/* Storeybrook showcase — composition only. Every colour, face, size and curve is a Storeybrook token or
   comes from components/bundle.css; each scene carries its own data-theme, so it is printed in its own look. */

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sc-page { overflow-x: clip; }
.sc-skip { position: absolute !important; left: -999px; top: 8px; z-index: var(--z-overlay) !important; padding: var(--space-2) var(--space-3); background: var(--page); color: var(--ink); border-radius: var(--radius-sm); }
.sc-skip:focus { left: 8px; }

/* ---------- the bar: it takes the look of the scene you are in ---------- */
.sc-bar {
  position: sticky !important; top: 0; z-index: var(--z-sticky) !important;
  display: flex; align-items: center; gap: var(--space-4);
  padding: max(10px, env(safe-area-inset-top, 0px)) max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px)) 10px max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px));
  /* chrome is a fixed bar's paper; laid over solid paper so nothing shows through (Storeybrook has no glass) */
  background: linear-gradient(var(--chrome), var(--chrome)), var(--paper); color: var(--ink);
  border-bottom: var(--border-pencil) solid var(--line);
  transition: background-color var(--dur-base) var(--ease-paper), color var(--dur-base) var(--ease-paper);
}
.sc-brand {
  font: var(--sb-display-weight) 1.45rem/1 var(--sb-display); font-variation-settings: 'wdth' var(--sb-display-wdth);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sc-nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.sc-nav::-webkit-scrollbar { display: none; }
.sc-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 8px; white-space: nowrap;
  border-radius: var(--radius-pill); color: var(--ink-muted); text-decoration: none; font: 400 0.95rem/1 var(--sb-ui);
  transition: background-color var(--dur-quick), color var(--dur-quick);
}
.sc-nav a:hover { color: var(--ink); background: var(--surface); }
.sc-nav a[aria-current="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.sc-nav i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line); flex: none; }
@media (max-width: 1100px) { .sc-nav { justify-content: flex-start; } }
@media (max-width: 720px) {
  .sc-bar { flex-wrap: wrap; gap: 6px var(--space-3); padding-bottom: 6px; }
  .sc-nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * clamp(16px, 3vw, 32px)); padding: 0 clamp(16px, 3vw, 32px); }
  .sc-full { margin-left: auto; }
  .sc-full [data-immersive-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- scenes ---------- */
.sc {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; box-sizing: border-box;
  padding: clamp(56px, 8vw, 112px) 0 clamp(72px, 9vw, 128px);
  background-color: var(--paper); color: var(--ink); font-family: var(--sb-story);
}
.sc + .sc { border-top: var(--border-pencil) solid var(--line); }
.sc .sb-washes { z-index: 0; }
.sc-in { position: relative; z-index: 1; width: min(var(--size-container), calc(100% - 2 * clamp(16px, 4vw, 48px))); margin-inline: auto; }
.sc-head { margin: 0 0 var(--space-7); }
.sc-narrow { max-width: 46ch; }
.sc-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font: 400 1rem/1.4 var(--sb-ui); color: var(--ink-muted); }
.sc .display-xl { font-size: clamp(3rem, 9vw, 7rem); margin: 0 0 var(--space-4); text-wrap: balance; }
.sc .display-l { font-size: clamp(2.4rem, 6vw, 4.5rem); margin: 0 0 var(--space-4); text-wrap: balance; }
.sc .display-m { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 var(--space-3); }
.sc .sb-lede { margin: 0 0 var(--space-5); }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }

/* 1 · Meta Daylight: the front page */
.sc-front { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: end; min-height: 52svh; }
.sc-front__copy .sb-lede { max-width: 34ch; }
.sc-front__art { --cw: min(340px, 100%); justify-self: center; }
.sc-map-head { display: flex; justify-content: flex-end; margin: var(--space-6) 0 0; }
.sc-map-head .sb-note { margin: 0; transform: rotate(-2deg); }
.sc-front__brook { height: 300px; margin: 0 0 var(--space-8); }
.sc-shelf-wrap { padding-top: var(--space-6); }
.sc-shelf-wrap .sb-lede { margin-bottom: var(--space-4); }
.sc-cover-creature { position: absolute; left: 50%; top: 54%; translate: -50% -50%; --cw: 112px; }
@media (max-width: 860px) {
  .sc-front { grid-template-columns: 1fr; }
  .sc-front__art { --cw: min(220px, 60vw); grid-row: 1; justify-self: start; }
  .sc-front__brook { height: 560px; }
}

/* 2 · Knight Night: bedtime */
.sc-knight { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.sc-knight__book { display: grid; gap: var(--space-4); }
.sc-knight__book .sb-page { max-width: var(--size-page); }
.sc-knight__sleep { display: grid; justify-items: center; gap: var(--space-3); }
.sc-sleeper { --cw: min(300px, 70vw); }
.sc-knight__sleep .sb-note { transform: rotate(-3deg); margin: 0; }
@media (max-width: 860px) { .sc-knight { grid-template-columns: 1fr; } .sc-knight__sleep { order: -1; } .sc-sleeper { --cw: 200px; } }

/* 3 · Ink Blot: the slate */
.sc-ink { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-7); align-items: start; }
.sc-ink__head { margin: 0; }
.sc-ink__head .sb-choice { margin: 0 0 var(--space-5); }
.sc-ink__brook { grid-column: 1 / -1; height: 230px; }
.sc-slate { margin: 0; box-sizing: border-box; padding: clamp(14px, 2.4vw, 26px) clamp(14px, 2.4vw, 26px) 10px; border-radius: 28px; background: var(--ink); box-shadow: var(--shadow-page); }
.sc-slate__screen { padding: var(--space-5); border-radius: 10px; background: var(--paper); min-height: 420px; }
.sc-slate__screen .sb-page { min-height: 340px; }
.sc-slate__screen .display-s { margin: 0 0 var(--space-3); }
.sc-slate__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 2px 2px; color: var(--paper); }
.sc-slate__bar .sb-btn { color: var(--paper); }
.sc-slate__bar .small { color: var(--paper); opacity: .8; }
@media (max-width: 960px) { .sc-ink { grid-template-columns: 1fr; } .sc-ink__brook { height: 460px; } }

/* 4 · Comix */
.sc-comix__head .display-l { font-size: clamp(3rem, 8vw, 6rem); }
.sc-comix .sb-panel { min-height: 240px; }
.sc-panel-creature { position: absolute; right: 18px; bottom: 6px; --cw: 120px; }
.sc-panel-creature--big { --cw: 170px; right: 32px; }
.sc-panel-creature--left { right: auto; left: 22px; }
.sc-comix__end { display: flex; align-items: flex-end; justify-content: center; padding-top: 72px; }
.sc-comix__cta { position: relative; z-index: 2; display: flex; justify-content: center; margin: 0 0 var(--space-5); }
@media (max-width: 760px) { .sc-comix { --cols: 1 !important; } .sc-comix .sb-panel--wide { grid-column: auto; } }

/* 5 · Origami: the cutting mat and the maker */
.sc--origami {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.sc-maker { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr); gap: var(--space-6); align-items: start; }
.sc-maker__controls { display: grid; gap: var(--space-5); }
.sc-maker__controls .title { margin: 0; }
.sc-maker__controls .sb-choice { margin: 0; }
.sc-maker__map { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.sc-maker__brook { height: 340px; }
.sc-maker__brook.is-down { height: 460px; }
.sc-maker__grow { display: grid; justify-items: center; gap: var(--space-2); width: 170px; text-align: center; }
.sc-grower { --cw: 150px; }
.sc-maker__grow .small { margin: 0; color: var(--ink-muted); }
@media (max-width: 900px) { .sc-maker, .sc-maker__map { grid-template-columns: 1fr; } .sc-maker__grow { width: auto; } }

/* 6 · Skein silk: the album */
.sc-album { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.sc-album__sheet { padding: var(--space-6); }
.sc-album__sheet .sb-note { margin: var(--space-5) 0 0; transform: rotate(-1.5deg); }
.sc-album__keep { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.sc-keeper { --cw: min(260px, 64vw); }
.sc-keep-line { margin: 0; color: var(--ink-muted); }
@media (max-width: 860px) { .sc-album { grid-template-columns: 1fr; } }

/* Mirror windows: one page, every window */
.sc-desk {
  display: grid; gap: var(--space-6) var(--space-5); align-items: end;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "tv tv tv tv tv tv tv display display display display display"
    "tablet tablet tablet tablet slate slate slate fold fold fold phone phone";
}
.sc-device { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }
.sc-device--tv { grid-area: tv; } .sc-device--display { grid-area: display; } .sc-device--tablet { grid-area: tablet; }
.sc-device--slate { grid-area: slate; } .sc-device--fold { grid-area: fold; } .sc-device--phone { grid-area: phone; }
.sc-device__screen {
  position: relative; overflow: hidden; width: 100%; box-sizing: border-box; background: var(--surface);
  border: clamp(6px, 0.9vw, 12px) solid var(--art-line); border-radius: 14px; box-shadow: var(--shadow-page);
}
.sc-device--tv .sc-device__screen { aspect-ratio: 1920 / 1080; border-radius: 8px; }
.sc-device--display .sc-device__screen { aspect-ratio: 2560 / 1440; border-radius: 10px; }
.sc-device--tablet .sc-device__screen { aspect-ratio: 1024 / 768; border-radius: 22px; }
.sc-device--slate .sc-device__screen { aspect-ratio: 620 / 827; border-radius: 18px; border-color: var(--ink-muted); }
.sc-device--fold .sc-device__screen { aspect-ratio: 673 / 841; border-radius: 22px; }
.sc-device--phone .sc-device__screen { aspect-ratio: 390 / 844; border-radius: 26px; max-width: 170px; }
.sc-device--tv::after, .sc-device--display::after { content: ""; order: 2; width: 18%; height: 10px; margin-top: -6px; border-radius: 0 0 6px 6px; background: var(--art-line); }
.sc-device figcaption { order: 3; font: 400 0.95rem/1.35 var(--sb-ui); color: var(--ink-muted); text-align: center; }
.sc-device iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
@media (max-width: 900px) {
  .sc-desk { grid-template-columns: 1fr 1fr; grid-template-areas: "tv tv" "display display" "tablet tablet" "slate fold" "phone phone"; }
}
.sc-foot { margin-top: var(--space-9); padding-top: var(--space-6); border-top: var(--border-pencil) solid var(--line); }

/* Printing the slate: only the book */
@media print {
  body.sc-print-ink .sc-bar, body.sc-print-ink .sb-jar, body.sc-print-ink main > .sc:not(#look-inkblot),
  body.sc-print-ink .sc-ink__head, body.sc-print-ink .sc-slate__bar { display: none !important; }
  body.sc-print-ink .sc-ink { display: block; }
  body.sc-print-ink .sc-slate { background: none; box-shadow: none; padding: 0; }
}

/* ---------- the adventure ---------- */
.sc-tap { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-lg); }
.sc-tap:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: var(--border-focus-offset); }
.sc-quest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-7); align-items: center; margin: 0 0 var(--space-8); padding: var(--space-6); }
.sc-quest .display-s { margin: 0 0 var(--space-2); }
.sc-quest .story-body { margin: 0 0 var(--space-4); max-width: 52ch; }
.sc-quest__pets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 64px); gap: var(--space-2); }
.sc-quest__pets li { display: grid; justify-items: center; gap: 2px; font: 400 0.8rem/1.2 var(--sb-ui); color: var(--ink-muted); text-align: center; }
.sc-quest__pets .sc-mini { width: 64px; height: 64px; }
.sc-quest__pets li.is-found { color: var(--ink); }
.sc-full { display: inline-flex; align-items: center; gap: 6px; }
.sc-full[hidden] { display: none; }
.sc-mini.sb-creature { --cw: auto; aspect-ratio: auto; }
.sc-mini svg { display: block; width: 100%; height: 100%; }
.sc-mini.is-hidden svg { filter: brightness(0); opacity: .14; }
@media (max-width: 960px) { .sc-quest { grid-template-columns: 1fr; } .sc-quest__pets { grid-template-columns: repeat(7, minmax(0, 1fr)); } .sc-quest__pets .sc-mini { width: 100%; height: auto; aspect-ratio: 1; } .sc-quest__pets span:last-child { display: none; } }

/* your pet walks with you, bottom left; the jar keeps bottom right */
.sc-pet { position: fixed !important; z-index: var(--z-reader) !important; left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); width: 92px; --cw: 92px; }
.sc-pet[hidden] { display: none; }
.sc-pet.is-hop { animation: sc-hop var(--dur-turn) var(--ease-bounce); }
.sc-front__art.is-hop, .sc-sleeper.is-hop { animation: sc-hop var(--dur-turn) var(--ease-bounce); }
@keyframes sc-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-18px) rotate(-4deg); } 70% { transform: translateY(2px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-pet.is-hop, .sc-front__art.is-hop, .sc-sleeper.is-hop { animation: none; } }
@media (max-width: 720px) { .sc-pet { width: 72px; --cw: 72px; } }

/* the pet book */
.sc-petbook { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sc-petrow { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); text-align: left; cursor: pointer;
  border: var(--border-pencil) solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: inherit; min-height: var(--size-target); }
.sc-petrow[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sc-petrow b { display: block; font: 700 1.05rem/1.3 var(--sb-ui); }
.sc-petrow small { display: block; font: 400 0.92rem/1.35 var(--sb-ui); color: var(--ink-muted); }
.sc-petrow .sc-mini { width: 64px; height: 64px; }
.sc-petrow__tag { font: 400 0.85rem/1 var(--sb-ui); color: var(--ink-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sc-petbook__count { margin: 0 0 var(--space-3); color: var(--ink-muted); }
.sc-petbook__night { margin: var(--space-5) 0 0; color: var(--ink-muted); }

/* autoplay: a slip at the top while the book plays itself */
.sc-auto { position: fixed !important; z-index: var(--z-overlay) !important; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top, 0px)) + 66px);
  display: flex; align-items: center; gap: var(--space-3); max-width: calc(100vw - 24px); box-sizing: border-box; padding: 6px 6px 6px 16px;
  border-radius: var(--radius-pill); background: var(--page); color: var(--ink); box-shadow: var(--shadow-lift); border: var(--border-pencil) solid var(--line); font: 400 0.95rem/1.3 var(--sb-ui); }
.sc-auto[hidden] { display: none; }
.sc-auto__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; animation: sc-blink 1.4s var(--ease-paper) infinite; }
.sc-auto__line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes sc-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sc-auto__dot { animation: none; } }
@media (max-width: 720px) { .sc-auto { top: calc(max(10px, env(safe-area-inset-top, 0px)) + 104px); } }