/* Spark and Soul reading-room component. Scoped; no framework or remote assets. */
.srr {
  --srr-ink: #183e59;
  --srr-paper: #faf8f2;
  --srr-gold: #dfbd76;
  --srr-rest: translate(-50%, -50%) rotateX(72deg) rotateZ(-15deg) scale(.80);
  --srr-raised: translate(-50%, -50%) translateX(-40%) translateY(-65%) rotateX(0deg) rotateY(-7deg) rotateZ(0deg) scale(1.08);
  width: 100%; max-width: 1132px; margin-inline: auto;
  color: var(--srr-ink); font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5; isolation: isolate;
}
.srr, .srr * { box-sizing: border-box; }
.srr [hidden] { display: none !important; }
.srr__heading { margin: 0 0 18px; font: 400 clamp(26px, 4vw, 38px)/1.2 Lora, Georgia, serif; letter-spacing: -.025em; }
.srr__scene {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: #382b21; perspective: 1000px; perspective-origin: 60% 55%;
  border-radius: 2px;
}
.srr__room { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The room never animates. Only this book has a moving transform. */
.srr__book {
  position: absolute; left: 60%; top: 61%; width: 19%; aspect-ratio: .65;
  transform: var(--srr-raised); transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.srr__front {
  position: absolute; inset: 0; transform: translateZ(3px);
  overflow: hidden; border-radius: 1px 3px 3px 1px;
  background: #e7dfcd;
  box-shadow: inset 4px 0 6px #0003, 1px 2px 5px #0006;
  backface-visibility: hidden;
}
.srr__cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.srr__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8%; padding: 12%;
  color: #5b554c; text-align: center;
  font: 700 clamp(7px, 1.1vw, 13px)/1.45 Arial, sans-serif;
  letter-spacing: .08em;
  background: repeating-linear-gradient(135deg, #e7dfcd, #e7dfcd 10px, #ddd4c2 10px, #ddd4c2 11px);
}
.srr__placeholder::before { content: ''; width: 35%; aspect-ratio: .7; border: 1px solid #8c8270; }
.srr__placeholder small { font-size: .75em; font-weight: 400; letter-spacing: .03em; }
.srr__pages {
  position: absolute; top: 1%; left: 2%; width: 98%; height: 99%;
  background: repeating-linear-gradient(0deg, #e6dcc6 0, #e6dcc6 1px, #bfb39a 1px, #bfb39a 2px);
  transform: translateZ(-3px); border-radius: 0 3px 3px 0;
  box-shadow: 1px 2px 1px #1c1917;
}
.srr__spine {
  position: absolute; top: 0; left: 0; width: 6px; height: 100%;
  background: #746b59; transform: translateX(-3px) rotateY(90deg);
  transform-origin: center; backface-visibility: visible;
}
.srr__announcement {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: center; gap: 4px;
  padding: 28px 18px 20px; text-align: center;
  background: linear-gradient(transparent, #1b2429e8 25%, #1b2429f5);
  color: #fffdf7; opacity: 1;
}
.srr__announcement strong { font: 400 clamp(21px, 4vw, 39px)/1.2 Lora, Georgia, serif; }
.srr__announcement span { font-size: clamp(12px, 1.6vw, 16px); letter-spacing: .025em; }
.srr__description { margin: 16px 0 0; font-size: 16px; line-height: 1.7; }
.srr__development-note { margin: 10px 0 0; font-size: 12px; color: #666058; }
.srr__purchase { margin: 16px 0 0; }
.srr__purchase a { display: inline-block; min-height: 44px; padding: 10px 18px; color: #182c39; background: var(--srr-gold); text-decoration: none; font-size: 15px; font-weight: 700; }
.srr__purchase a:focus-visible { outline: 3px solid #183e59; outline-offset: 4px; }
.srr__purchase a:hover { background: #edce91; }
.srr--enhanced .srr__book { transform: var(--srr-rest); }
.srr--enhanced[data-srr-state="idle"] .srr__announcement,
.srr--enhanced[data-srr-state="lifting"] .srr__announcement,
.srr--enhanced[data-srr-state="holding"] .srr__announcement { opacity: 0; }
.srr--enhanced[data-srr-state="announced"] .srr__announcement { transition: opacity 350ms ease; }
.srr--enhanced[data-srr-state="static"] .srr__book { transform: var(--srr-raised); }
.srr__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .srr__heading { margin-bottom: 14px; }
  .srr__announcement { padding: 20px 12px 12px; gap: 2px; }
  .srr__announcement strong { font-size: 23px; }
  .srr__announcement span { font-size: 12px; }
  .srr__description { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .srr .srr__book { transform: var(--srr-raised) !important; }
  .srr .srr__announcement { opacity: 1 !important; transition: none !important; }
}

/* Theme integration: native Group/Image/Paragraph blocks retain editable copy. */
.srr.ss-reading-room, .srr.ss-reading-room.wp-block-group { max-width: none; width: 100%; margin: 0; }
.srr.ss-reading-room .srr__room { margin: 0; }
.srr.ss-reading-room .srr__room img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srr.ss-reading-room .srr__placeholder p { margin: 0; padding: 0; color: inherit; font: inherit; }
.srr.ss-reading-room .srr__placeholder .srr__placeholder-note { font-size: .75em; font-weight: 400; letter-spacing: .03em; }
.srr.ss-reading-room .srr__announcement p { margin: 0; padding: 0; color: inherit; line-height: 0; }
/* Native Paragraph wrappers must not add a larger inherited line box. */
.srr.ss-reading-room .srr__announcement p > strong { display: block; line-height: 1.2; }
.srr.ss-reading-room .srr__announcement p > span { display: block; line-height: 1.5; }
.srr.ss-reading-room .srr__description { margin: 16px 0 0; font-size: 18px; line-height: 1.7; }
.srr.ss-reading-room .srr__development-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #666058; }

/* Recovered owner-approved standalone front. Original 700×994 bytes unchanged. */
.srr.ss-reading-room {
  --srr-rest: translate(10%, 74%) rotateX(72deg) rotateZ(-15deg) scale(.40);
  --srr-raised: rotateY(-7deg);
}
.srr.ss-reading-room .srr__book {
  left: auto; right: 36%; top: 8%; width: 30%; max-width: none;
  aspect-ratio: 700 / 994; transform-origin: top right;
}
.srr.ss-reading-room .srr__approved-front {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  overflow: hidden;
}
.srr.ss-reading-room .srr__approved-front img {
  position: absolute; display: block; max-width: none;
  width: 100%; height: 100%;
  left: 0; top: 0; object-fit: contain;
}
.srr.ss-reading-room .srr__announcement {
  left: 8%; right: 10%; top: 80%; bottom: auto;
  padding: 0; gap: 3px;
  background: linear-gradient(90deg, transparent, #1b2429bf 18%, #1b2429bf 82%, transparent);
  text-shadow: 0 1px 3px #000b;
}
.srr.ss-reading-room .srr__announcement strong { font-size: clamp(22px, 4vw, 38px); font-weight: 600; }
.srr.ss-reading-room .srr__announcement span { font-size: clamp(11px, 1.5vw, 14px); }
@media (max-width: 480px) {
  .srr.ss-reading-room { --srr-rest: translate(10%, 84%) rotateX(72deg) rotateZ(-15deg) scale(.40); }
  .srr.ss-reading-room .srr__scene { aspect-ratio: 4 / 3; }
  .srr.ss-reading-room .srr__book { max-width: none; }
  .srr.ss-reading-room .srr__announcement { top: 73%; }
  .srr.ss-reading-room .srr__announcement strong { font-size: clamp(19px, 5vw, 25px); }
  .srr.ss-reading-room .srr__announcement span { font-size: 11px; }
}

/* Full-width room directly below the dark intro; all original copy is retained. */
.srr.ss-reading-room .srr__heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.srr.ss-reading-room .srr__scene { border-radius: 0; }
.srr.ss-reading-room .srr__description { text-align: center; padding: 18px 24px; margin: 0; }
/* Fit the complete composition within the short viewport, including browser chrome.
   Keep the full-width section; scale its unchanged room/book layout as one scene.
   The 96px budget leaves space for the existing caption and breathing room. */
.srr.ss-reading-room {
  --srr-viewport-budget: calc(100vh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  --srr-fit-width: calc(var(--srr-viewport-budget) * 1.5);
  background: #202a2d;
}
@supports (height: 100svh) {
  .srr.ss-reading-room { --srr-viewport-budget: calc(100svh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
.srr.ss-reading-room .srr__scene {
  width: min(100%, var(--srr-fit-width)); margin-inline: auto;
  container-type: inline-size;
}
.srr.ss-reading-room .srr__description { background: var(--srr-paper); }
.srr.ss-reading-room .srr__announcement strong { font-size: clamp(19px, min(3.304vw, calc(var(--srr-viewport-budget) * .04956)), 38px); }
.srr.ss-reading-room .srr__announcement span { font-size: clamp(11px, min(1.217vw, calc(var(--srr-viewport-budget) * .018255)), 14px); }
@supports (font-size: 1cqw) {
  .srr.ss-reading-room .srr__announcement strong { font-size: clamp(19px, 3.304cqw, 38px); }
  .srr.ss-reading-room .srr__announcement span { font-size: clamp(11px, 1.217cqw, 14px); }
}
@media (max-width: 480px) {
  .srr.ss-reading-room { --srr-fit-width: calc(var(--srr-viewport-budget) * 4 / 3); }
  .srr.ss-reading-room .srr__announcement strong { font-size: clamp(19px, min(5vw, calc(var(--srr-viewport-budget) * .066667)), 25px); }
  .srr.ss-reading-room .srr__announcement span { font-size: 11px; }
  @supports (font-size: 1cqw) {
    .srr.ss-reading-room .srr__announcement strong { font-size: clamp(19px, 5cqw, 25px); }
  }
}

/* Local CSS light only: the source room and cover pixels are never changed. */
.srr--enhanced .srr__room { filter: brightness(.78); }
.srr--enhanced .srr__scene::before,
.srr--enhanced .srr__scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; transition: opacity 150ms ease; }
.srr--enhanced .srr__scene::before {
  background: radial-gradient(ellipse 19% 27% at 78% 28%, #10131c88 0%, #10131c30 70%, transparent 100%), radial-gradient(ellipse 33% 16% at 68% 61%, #11151c55 0%, transparent 100%);
  opacity: 0;
}
.srr--enhanced .srr__scene::after {
  background: radial-gradient(ellipse 16% 24% at 78% 28%, #ffd18a52 0%, #eaa84a12 70%, transparent 100%), radial-gradient(ellipse 32% 15% at 68% 61%, #ffc47740 0%, #eda34b0c 75%, transparent 100%);
  mix-blend-mode: screen; opacity: 1;
}
.srr--enhanced[data-srr-state="idle"] .srr__scene::before,
.srr--enhanced[data-srr-state="dim"] .srr__scene::before { opacity: 1; transition: none; }
.srr--enhanced[data-srr-state="idle"] .srr__scene::after,
.srr--enhanced[data-srr-state="dim"] .srr__scene::after { opacity: 0; transition: none; }
.srr--enhanced[data-srr-state="dim"] .srr__announcement,
.srr--enhanced[data-srr-state="lit"] .srr__announcement { opacity: 0; }
.srr--enhanced[data-srr-state="idle"] .srr__announcement,
.srr--enhanced[data-srr-state="dim"] .srr__announcement,
.srr--enhanced[data-srr-state="lit"] .srr__announcement,
.srr--enhanced[data-srr-state="lifting"] .srr__announcement,
.srr--enhanced[data-srr-state="holding"] .srr__announcement { transform: translateY(12px); }
.srr--enhanced[data-srr-state="announced"] .srr__announcement { transform: translateY(0); transition: opacity 350ms ease, transform 350ms ease; }
@media (prefers-reduced-motion: reduce) {
  .srr--enhanced .srr__room { filter: none; }
  .srr--enhanced .srr__scene::before, .srr--enhanced .srr__scene::after { display: none; }
  .srr--enhanced .srr__announcement { transform: none !important; }
}
.srr--enhanced[data-srr-state="static"] .srr__room { filter: none; }
.srr--enhanced[data-srr-state="static"] .srr__scene::before,
.srr--enhanced[data-srr-state="static"] .srr__scene::after { display: none; }