/* storytimeguru.com marketing home — page-local layout layer.
   shared/tokens.css is the source of truth for every brand value: the warm-editorial
   palette (paper / alt-band / card / ink / gold / Deep Blue / Vibrant Purple), the
   three type tiers (Montserrat display, Fraunces editorial, Open Sans body), the 8pt
   spacing + rhythm variables, radius, shadow, and the .section / .band--* / .card /
   .chip / .phone / .btn recipes. Nothing brand-y is hardcoded here, and this file
   introduces NO color, radius, shadow, or font of its own.

   Page-local additions (layout-only, deliberately not brand values):
     --ease        shared easing curve for the entrance reveal
     --check-mask  inline SVG check glyph, painted with a CSS mask in Vibrant Purple
*/

:root {
  --eyebrow-text: #8D611E; /* text-only darker gold: >= 4.5:1 on paper, alt band and card (tokens.css --gold stays for decoration) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Phone section rhythm, one step up the 8pt scale from the shared 32px: every band
     is 48 above and below (96 between blocks), the lighter bridge and stores bands 40.
     The hero keeps 32 on top because the header already sits above it. */
  --section-pad-mobile: var(--sp-12);
  --section-pad-light-mobile: var(--sp-10);
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.6l4.2 4.2L16.4 5.4'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
.eyebrow { color: var(--eyebrow-text); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 50;
  background: var(--stg-deep-blue); color: var(--paper);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  font-family: var(--font-heading); font-weight: 700; text-decoration: none;
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3);
}
/* The byline links to gradelevelguru.com, so it cannot sit inside the home link.
   The glyph gets its own (decorative, unfocusable) home link and the wordmark carries
   the accessible one; the lockup renders exactly as before. */
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__glyph-link { display: flex; flex: none; }
.brand__glyph { width: 40px; height: auto; flex: none; }
.brand__home { text-decoration: none; }
.brand__text { display: grid; gap: var(--sp-1); justify-items: start; }
.brand .byline { line-height: 1.2; }
a.byline { color: var(--muted); text-decoration: none; }
a.byline:hover { text-decoration: underline; }
.site-header .btn { white-space: nowrap; }

/* Header actions: the quiet educators link sits beside the CTA, never below it. */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.nav-link {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-md);
  color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: var(--touch-min);
}
.nav-link:hover { text-decoration: underline; }

/* On a phone the lockup, the two nav links and the CTA cannot share one row, so the
   header costs two rows. Sticky, that is ~14% of an iPhone viewport spent on chrome for
   the whole scroll; below 768px it scrolls away and the content gets the full screen.
   It stays sticky at >= 768px, where it is a single row. */
@media (max-width: 767px) {
  .site-header { position: static; }
  .brand__glyph { width: 32px; }
  .brand .wordmark--sm { font-size: 1rem; }
  .brand .byline { font-size: 0.625rem; letter-spacing: 1.2px; white-space: nowrap; }
  .site-header .btn { padding-inline: var(--sp-4); font-size: 0.875rem; }
  /* One step down the 8pt scale (12 -> 8). The 44/48px tap targets inside are
     untouched: this trims the band around them, not the controls. */
  .site-header__inner { gap: var(--sp-3); padding-block: var(--sp-2); }
  .site-header__actions { gap: var(--sp-3); }
  .nav-link { font-size: 0.8125rem; }
}
/* Below ~700px (four links now) the nav links and the CTA cannot share a row with the lockup, so the
   links stack under the wordmark (never dropped). display:contents promotes all three
   actions into the header grid so they can take separate areas; the two link columns
   are `auto`, so the lockup row above still spans the full width. */
@media (max-width: 700px) {
  .site-header__inner {
    display: grid; align-items: center;
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "brand brand brand brand cta"
      "nav1  nav2  nav3  nav4  .";
    column-gap: var(--sp-3); row-gap: var(--sp-1);
  }
  .site-header__actions { display: contents; }
  .brand { grid-area: brand; }
  .site-header__actions .nav-link:nth-of-type(1) { grid-area: nav1; }
  .site-header__actions .nav-link:nth-of-type(2) { grid-area: nav2; }
  .site-header__actions .nav-link:nth-of-type(3) { grid-area: nav3; }
  .site-header__actions .nav-link:nth-of-type(4) { grid-area: nav4; }
  .site-header .btn { grid-area: cta; justify-self: end; }
}
@media (max-width: 380px) {
  .brand__glyph { display: none; }
}

/* ---------- Buttons / store rows ---------- */

.store-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn--store svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn--outline-on-brand { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--outline-on-brand:hover { background: var(--paper); color: var(--ink); }

/* Pre-launch store marks. Same size/shape as .btn--secondary, but they are <span>s,
   not links: no hover change, no press shift, and none of the dimmed
   "disabled control" treatment tokens.css gives .btn[aria-disabled="true"] --
   these are labels for a store that is not open yet, not broken buttons. */
.btn--static { cursor: default; }
.btn--static:hover { background: var(--card); color: var(--stg-deep-blue); box-shadow: none; }
.btn--static:active { transform: none; }
.btn--static[aria-disabled="true"] { opacity: 1; cursor: default; }
.prelaunch-note { font-family: var(--font-body); font-size: var(--fs-body-md); color: var(--muted); margin-top: var(--sp-3); }
.band--brand .prelaunch-note { color: var(--muted-on-dark); }

/* ---------- Section scaffolding ---------- */

/* Rhythm (locked): eyebrow -> heading 8 (the .eyebrow margin), heading -> lead 16,
   lead -> content 40, paragraph -> paragraph 16, statement -> body 24. */
h1, h2 { text-wrap: balance; }
/* Statement and lead paragraphs: avoid a one-word last line (progressive enhancement; ignored where unsupported). */
.statement, .lead { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.section__head { max-width: 46ch; margin-bottom: var(--gap-content); }
/* A head that carries a lead line under the heading needs a wider measure than the
   heading-only default; the rhythm stays heading -> lead 16, lead -> content 40. */
.section__head--wide { max-width: 58ch; }
/* A heading-only head whose h2 should wrap on its own measure (like the h1s) rather than on the
   46ch body-font box, which is only ~450px and forces long headings into three lines. */
.section__head--narrow { max-width: 52ch; }
/* Centered head: eyebrow and heading as one group over the content below. */
.section__head--center { margin-inline: auto; text-align: center; }
/* Paragraph measure caps (64ch) would leave a short eyebrow off-centre in a wide head. */
.section__head--center > p { margin-inline: auto; }
/* Themes: the lead paragraph sits flush left, directly above the theme grid. */
.themes__lead { margin-bottom: var(--gap-content); }
/* Themes: more air between the centered heading group and the flush-left lead beneath it. */
#themes .section__head--center { margin-bottom: var(--gap-content); }
/* Wide enough that "Think Friendship to Forgiveness." stays on one line from tablet up. */
.section__head--wide.section__head--center { max-width: 48rem; }
.section__head--narrow h2 { max-width: 28ch; }
.section__lead { margin-top: var(--gap-lead); }
.muted { color: var(--muted); }
.band--dark .wordmark { color: var(--paper); }

/* ---------- Hero ---------- */

.hero__grid { display: grid; gap: var(--col-gap); align-items: center; }
/* No measure cap on the COLUMN: tokens already caps every <p> at 64ch, and capping
   the column instead leaves the locked-pattern "leftover whitespace" beside it. */
.hero__copy h1 { margin-bottom: var(--gap-lead); max-width: 20ch; }
/* Each sentence of the hero headline stays on one line. Below ~560px the viewport is
   narrower than the longer line at the default hero size (about 10.9em wide), so the size is derived from the container width (viewport minus the 24px gutters). */
.hero__copy h1 .h1-line { display: block; }
@media (max-width: 560px) { .hero__copy h1 { max-width: none; font-size: min(2.25rem, calc((100vw - 3rem) / 11.2)); } }
.hero__copy .tagline { margin-bottom: var(--gap-statement); max-width: 46ch; }
.hero__body { max-width: 46ch; margin-bottom: var(--gap-content); font-size: var(--fs-body-xl); }

.hero__art { justify-self: center; }
/* Fan of three phones in one grid cell; the launch screen sits on top. Side phones are shifted and
   tilted with transforms, so the layout box stays one phone tall. The section clips any overhang so the page never scrolls sideways. */
.section--hero { overflow-x: clip; }
.fan { display: grid; place-items: center; width: min(100%, 360px); margin-inline: auto; }
.fan__item { grid-area: 1 / 1; width: 48%; }
.fan__item .phone { width: 100%; height: auto; }
.fan__item--left { transform: translateX(-42%) rotate(-8deg); transform-origin: 50% 90%; z-index: 1; }
.fan__item--right { transform: translateX(42%) rotate(8deg); transform-origin: 50% 90%; z-index: 1; }
.fan__item--front { z-index: 2; }

@media (min-width: 1025px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 480px; }
  .hero__art { justify-self: end; }
  .fan { width: 480px; }
}

/* ---------- How it works (4 cards) ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--card-gap); }
.step {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-2);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.step h3 { margin: 0; }
.step p { margin: 0; color: var(--muted); font-size: var(--fs-body-md); max-width: 34ch; }
.step .eyebrow { margin-bottom: 0; }
.step__figure { display: flex; justify-content: center; margin-top: var(--sp-6); }
.step__shot { width: min(100%, 180px); }

@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Tablet band: there is room for the phone beside the copy well before 1025px, and a
   lone 220px phone centered under a full-width paragraph reads as a gap, not a figure.
   Copy left, art right (the split order rule below keeps art-first sections consistent). */
@media (min-width: 700px) and (max-width: 1024px) {
  .hero__grid, .edu-hero, .split { grid-template-columns: minmax(0, 1fr) 220px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .fan { width: 340px; }
  .hero__art, .edu-hero__art, .split__art { justify-self: end; }
  .split__art img { width: 220px; }
}

/* ---------- Two-column content sections ---------- */

.split { display: grid; gap: var(--col-gap); align-items: center; }
.split__art { justify-self: center; }
.split__art img { width: min(100%, 220px); }

/* Stacked widths: copy reads before the art in art-first splits (otherwise the hero
   phone and this phone land back to back with no words between them), and the art
   is a supporting figure, not a second hero. */
@media (max-width: 1024px) {
  .split--art-first .split__art { order: 2; }
  .split__art img { width: min(100%, 180px); }
}
@media (min-width: 1025px) {
  .split { grid-template-columns: minmax(0, 1fr) 260px; }
  .split--art-first { grid-template-columns: 260px minmax(0, 1fr); }
  .split__art img { width: 260px; }
}

.split__copy h2 { margin-bottom: var(--gap-lead); }
.split__copy .statement { margin-bottom: var(--gap-statement); }
.split__copy .split__body { margin-bottom: var(--gap-content); }
.split__copy .split__body--tight { margin-bottom: var(--gap-para); }
/* One sentence per line in a two-sentence heading. */
.h-line { display: block; }

/* Stats: Montserrat, ink, flat (no gradient text) */
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: var(--gap-content) 0; }
.stat__value {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; color: var(--ink);
}
.stat__label { font-size: var(--fs-body-md); color: var(--muted); margin-top: var(--sp-1); }

/* Feature list: purple check marks (Storytime's secondary accent) */
.inside-list { list-style: none; margin: 0 0 var(--gap-content); padding: 0; }
.inside-list li {
  position: relative; padding-left: var(--sp-8); padding-block: var(--sp-2);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body-lg);
}
.inside-list li::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px; background-color: var(--stg-vibrant-purple);
  -webkit-mask-image: var(--check-mask); mask-image: var(--check-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
}

/* ---------- Three benefits (What's inside) ---------- */

.benefits { list-style: none; margin: var(--gap-content) 0 0; padding: 0; display: none; gap: var(--card-gap); }
.benefit h3 { margin-bottom: var(--sp-2); }
.benefit p { margin: 0; color: var(--muted); font-size: var(--fs-body-md); max-width: 34ch; }
/* Hidden below 900px (display:none, so out of the accessibility tree too): it repeats How it works. */
@media (min-width: 900px) { .benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Pricing plans ---------- */

.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--card-gap); }
.plan h3 { margin-bottom: var(--sp-2); }
.plan .stat__value { margin: 0 0 var(--sp-2); }
.plan p:last-child { margin: 0; color: var(--muted); font-size: var(--fs-body-md); max-width: 34ch; }
.plan__unit { font-family: var(--font-body); font-size: var(--fs-body-md); font-weight: 600; color: var(--muted); }
.plans__note { margin-top: var(--gap-content); color: var(--muted); font-size: var(--fs-body-md); max-width: 64ch; }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan__was { font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: 600; color: var(--muted); }
.plan__tag { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--stg-deep-blue); font-size: var(--fs-body-md); }
@media (min-width: 768px) { .plans--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .plans--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- FAQ (native details, no JS) ---------- */

/* One card, like the pricing cards: the hairline alone is almost invisible on the alt band
   (#E7DCC8 on #F2E9D8), so bare rows floated. The card surface gives them an edge and a base. */
.faq {
  max-width: 46rem; margin-inline: auto; overflow: hidden;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.faq__item + .faq__item { border-top: 1px solid var(--hairline); }

.faq__item summary {
  cursor: pointer; font-family: var(--font-editorial); font-weight: 500;
  font-size: var(--fs-body-lg); color: var(--ink); min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  list-style: none; padding: var(--sp-4) var(--sp-6);
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Plus at the right of the row (a minus when open), drawn in CSS so it is never read out. */
.faq__item summary::after {
  content: ""; flex: none; width: 18px; height: 18px; color: var(--stg-deep-blue);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.faq__item[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.faq__item[open] summary { color: var(--stg-deep-blue); }
.faq__item summary:focus-visible { outline: 3px solid var(--stg-deep-blue); outline-offset: -3px; }
@media (hover: hover) {
  .faq__item summary:hover { color: var(--stg-deep-blue); background: var(--tint-blue-bg); }
}
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] p { animation: faq-open 220ms var(--ease); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.faq__item p { margin: 0; padding: 0 var(--sp-6) var(--sp-4); color: var(--muted); }
@media (max-width: 767px) {
  .faq__item summary { padding-inline: var(--sp-4); }
  .faq__item p { padding-inline: var(--sp-4); }
}
.faq__item a { color: var(--stg-deep-blue); }

/* ---------- Parent quotes (carousel) ----------
   One quote at a time. Native scroll-snap does the sliding, so swipe, trackpad and keyboard scroll
   work even without the script; the script adds arrows, dots and a slow auto-advance. */

.carousel { max-width: 46rem; margin-inline: auto; }
.quotes {
  list-style: none; margin: 0; padding: 0; display: flex; gap: var(--card-gap); position: relative;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding-block: var(--sp-2);
}
.quotes::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); min-height: 11rem; }
.quote blockquote { margin: 0; font-family: var(--font-editorial); font-weight: 500; font-size: var(--fs-body-xl); line-height: 1.4; color: var(--ink); }
@media (min-width: 768px) { .quote { padding: var(--sp-10) var(--sp-12); } .quote blockquote { font-size: var(--fs-statement); } }
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.carousel__arrow {
  width: 48px; height: 48px; border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1;
  background: var(--card); color: var(--stg-deep-blue); border: 1.5px solid var(--stg-deep-blue);
}
.carousel__arrow:hover { background: var(--tint-blue-bg); }
.carousel__dots { display: flex; gap: 0; }
.carousel__dot { width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.carousel__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--hairline); border: 1.5px solid var(--stg-deep-blue);
}
.carousel__dot[aria-current="true"]::before { background: var(--stg-deep-blue); }
@media (prefers-reduced-motion: reduce) { .quotes { scroll-behavior: auto; } }

/* ---------- Transition bridge (between How it works and What's inside) ---------- */

.section--bridge { padding-block: var(--sp-12); }
.bridge { max-width: 40rem; margin-inline: auto; text-align: center; }
.bridge .statement { margin-bottom: var(--gap-para); }
.bridge__body { margin: 0 auto var(--gap-para); max-width: 36rem; }
.bridge__note { margin: 0 auto; max-width: 34rem; font-size: var(--fs-body-md); }
@media (max-width: 767px) { .section--bridge { padding-block: var(--section-pad-light-mobile); } }

/* ---------- Twelve themes (shared: home #themes) ----------
   3-up on desktop, 2-up on mobile, single column on very narrow phones. */

.themes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-6) var(--col-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.themes > li { border-top: 1px solid var(--hairline); padding-top: var(--sp-4); }
.themes h3 { font-size: var(--fs-body-lg); margin-bottom: var(--sp-1); color: var(--stg-deep-blue); }
/* The app's own theme glyphs (Phosphor, see scripts/build-theme-icons.py): gold icon, Deep Blue name. */
.theme-icon { display: block; width: 32px; height: 32px; margin-bottom: var(--sp-2); color: var(--gold); fill: currentColor; }
.themes p { font-size: var(--fs-body-md); color: var(--muted); max-width: 30ch; }
@media (min-width: 900px) { .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .themes { grid-template-columns: minmax(0, 1fr); } }

.themes__cta { margin-top: var(--gap-content); }
.themes__note { margin-top: var(--sp-3); font-size: var(--fs-body-md); }

/* ---------- For educators (compact: text + CTA, no screenshot) ---------- */

.educators { max-width: 46ch; }
/* Centered creators block: one column, short paragraphs centered, buttons centered. */
.educators--center { max-width: 60ch; margin-inline: auto; text-align: center; }
.educators--center .educators__actions { justify-content: center; }
/* The 64ch paragraph cap would leave short lines (the eyebrow) off-centre inside the 60ch column. */
.educators--center > p { margin-inline: auto; }
.educators--center .eyebrow { margin-bottom: var(--gap-eyebrow); }
.educators h2 { margin-bottom: var(--gap-lead); }
.educators__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--gap-content); }
.educators .educators__actions .btn { margin-top: 0; }

/* ---------- Download band (flat Deep Blue) ---------- */

.band--brand { background: var(--stg-deep-blue); color: var(--paper); }
.band--brand h2, .band--brand .statement { color: var(--paper); }
.band--brand p { color: var(--paper); }
.band--brand .eyebrow { color: var(--paper); }
.band__inner { max-width: 46ch; }
.band__inner h2 { margin-bottom: var(--gap-lead); }
.band__inner .store-row { margin-top: var(--gap-content); }

/* ---------- Redeem (universal-link fallback page, /redeem/) ---------- */

.redeem { max-width: 46rem; }
.redeem__panel[hidden] { display: none; }
.redeem h1 { margin-bottom: var(--gap-lead); }
.redeem .lead { margin-bottom: var(--gap-content); }
.redeem__card { margin-bottom: var(--gap-content); }
.redeem__h2 { margin-bottom: var(--gap-lead); }

.coderow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.btn--copy { padding-inline: var(--sp-4); }
.btn--block { width: 100%; }
.code-inline { font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--stg-deep-blue); }

/* Open in app: the primary action, with the stores reachable directly beneath it. */
.openrow { display: grid; gap: var(--sp-3); }
.openrow .btn svg { flex: none; }
.store-row--tight .btn { flex: 1 1 auto; }
.openrow .help { margin: 0; color: var(--muted); font-size: var(--fs-body-md); }
.openrow .status { margin: 0; font-size: var(--fs-body-md); color: var(--muted); }
.openrow .status:empty { display: none; }
.openrow .status[data-tone="error"] { color: #9B2C1E; font-weight: 600; }

.howto { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.howto li {
  counter-increment: step; position: relative;
  padding-left: calc(var(--sp-8) + var(--sp-2)); min-height: 32px; max-width: var(--measure);
}
.howto li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--tint-blue-bg); color: var(--stg-deep-blue);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body-md);
}
.howto__text { display: block; padding-top: 3px; }

/* ---------- Footer ---------- */

.site-footer { padding-block: var(--sp-12); }
.site-footer__inner { display: grid; gap: var(--sp-8); }
.site-footer p { margin: var(--sp-2) 0 0; max-width: none; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.site-footer a {
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--muted-on-dark);
  display: inline-flex; align-items: center; min-height: var(--touch-min);
}
.site-footer a:hover { border-bottom-color: var(--paper); }
.site-footer small { color: var(--muted-on-dark); font-size: var(--fs-body-md); }
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: auto 1fr; align-items: start; justify-content: space-between; }
  .site-footer nav { justify-self: end; }
}

/* ---------- Entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise 700ms var(--ease) forwards; }
  .reveal--1 { animation-delay: 60ms; }
  .reveal--2 { animation-delay: 150ms; }
  .reveal--3 { animation-delay: 240ms; }
  .reveal--4 { animation-delay: 330ms; }
  .reveal--5 { animation-delay: 420ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   /educators/ — the PUBLIC educator page. Layout only; every color, type,
   space, radius and shadow comes from shared/tokens.css, same as the rest of
   this file. The accordion is native <details>/<summary>: no JS on the page.
   ========================================================================== */

/* Current page in the header nav. */
.nav-link[aria-current="page"] { color: var(--stg-deep-blue); text-decoration: underline; text-underline-offset: 4px; }

/* Quiet secondary action beside a primary button. */
.text-link {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body-md);
  color: var(--stg-deep-blue); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  border-bottom: 1.5px solid transparent;
}
.text-link:hover { border-bottom-color: var(--stg-deep-blue); }

/* ---------- Hero ---------- */

.edu-hero { display: grid; gap: var(--col-gap); align-items: center; }
.edu-hero h1 { margin-bottom: var(--gap-lead); max-width: 18ch; }
.edu-hero .tagline { margin-bottom: var(--gap-statement); max-width: 46ch; }
.edu-hero__body { max-width: 52ch; margin-bottom: var(--gap-content); }
.edu-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-8); }
.edu-hero__art { justify-self: center; }
.edu-hero__shot { width: min(100%, 220px); }

@media (min-width: 1025px) {
  .edu-hero { grid-template-columns: minmax(0, 1fr) 280px; }
  .edu-hero__art { justify-self: end; }
  .edu-hero__shot { width: 280px; }
}

/* ---------- In the classroom (5 icon cards) ---------- */

.use-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--card-gap); }
.use {
  display: grid; grid-template-rows: auto auto 1fr; gap: var(--sp-3);
  align-content: start;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.use:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.use h3 { font-size: var(--fs-body-xl); }
.use p { margin: 0; color: var(--muted); font-size: var(--fs-body-md); max-width: 34ch; }
@media (min-width: 640px) { .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .use-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* 5 cards over a 6-track grid: three up, then two centred underneath. */
  .use-grid > li { grid-column: span 2; }
  .use-grid > li:nth-child(4) { grid-column: 2 / span 2; }
  .use-grid > li:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------- Question frames (native accordion) ---------- */

.section__head--tight { margin-bottom: var(--gap-lead); }
.std__intro { max-width: 58ch; margin-bottom: var(--gap-content); }
.accordion { max-width: var(--container-max); border-top: 1px solid var(--hairline); }
.acc { border-bottom: 1px solid var(--hairline); }
.acc > summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) calc(var(--sp-8) + var(--sp-2)) var(--sp-4) 0;
  position: relative; cursor: pointer; list-style: none;
  min-height: var(--touch-min);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover .acc__name,
.acc[open] > summary .acc__name { color: var(--stg-deep-blue); }
.acc__name {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-heading-md);
  color: var(--ink); transition: color var(--dur-fast) var(--ease);
}
.acc__ref {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}
/* Chevron, drawn from borders so it needs no asset. */
.acc > summary::after {
  content: ""; position: absolute; right: var(--sp-3); top: calc(50% - 7px);
  width: 10px; height: 10px;
  border-right: 2px solid var(--stg-deep-blue); border-bottom: 2px solid var(--stg-deep-blue);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--dur-base) var(--ease);
}
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc__body { padding: 0 var(--sp-10) var(--sp-6) 0; }
.acc__q {
  font-family: var(--font-editorial); font-weight: 500; font-size: var(--fs-body-xl);
  line-height: 1.4; color: var(--muted); margin: 0;
  padding-left: var(--sp-4); border-left: 2px solid var(--tint-gold-bg);
}
@media (max-width: 480px) { .acc__name { font-size: var(--fs-body-lg); } }

/* ---------- Send it home ---------- */

.edu-home { max-width: 52ch; }
.edu-home h2 { margin-bottom: var(--gap-lead); }
.edu-home .statement { margin-bottom: var(--gap-statement); }
.edu-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-8); margin-top: var(--gap-lead); }

/* ---------- Classroom-access CTA ---------- */

.edu-cta__actions { margin-top: var(--gap-content); }

/* ==========================================================================
   /library/ — the public shelf, generated by scripts/build-library.py.
   Layout only. Every color, font, space, radius and shadow below resolves to a
   token in shared/tokens.css; the cards are the locked .card recipe, the chips
   reuse the .btn sizing language, and nothing here introduces a brand value.
   ========================================================================== */

.lib-hero { padding-bottom: var(--section-pad); }
/* Left-aligned copy with the app's own library screen beside it on desktop. Top-aligned
   so the eyebrow sits at the section top like every other hero, and the taller
   screenshot fills the space beside the copy rather than centering it and opening a
   gap under the header. */
.lib-hero__grid { display: grid; gap: var(--col-gap); align-items: center; }
.lib-hero h1 { margin-bottom: var(--gap-lead); max-width: 20ch; }
/* The library headline is two long sentences. Below 560px the size is derived from the container width
   (viewport minus the 24px gutters) so it runs to three lines at most, as the home hero does. */
@media (max-width: 560px) { .lib-hero h1 { max-width: none; font-size: min(2.25rem, calc((100vw - 3rem) / 11.8)); } }
/* Subhead uses the shared tagline treatment (Fraunces editorial), not Montserrat. */
.lib-hero__subhead { max-width: 40ch; margin-bottom: var(--gap-lead); }
.lib-hero__body { max-width: 54ch; margin-bottom: var(--sp-4); font-size: var(--fs-body-lg); color: var(--muted); }
.lib-hero__body:last-of-type { margin-bottom: 0; }
.lib-hero__sub { font-size: var(--fs-heading-md); margin: var(--sp-6) 0 var(--sp-2); }
.lib-hero__art { justify-self: center; }
.lib-hero__shot { width: min(100%, 240px); }
@media (min-width: 768px) {
  /* The phone takes a share of the width beside the copy, top-aligned, and is cropped (with a soft fade) at the
     bottom of the copy block: it never makes the hero taller than its text. */
  .lib-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(180px, 20%, 240px); align-items: stretch; }
  .lib-hero__copy { align-self: center; }
  .lib-hero__art { position: relative; justify-self: stretch; overflow: hidden; min-height: 0;
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .lib-hero__shot { position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
}
@media (max-width: 767px) {
  .lib-hero { padding-bottom: var(--section-pad-mobile); }
  .lib-hero__body { font-size: var(--fs-body-md); }
  /* The screenshot is a supporting figure, not a second hero: drop it on a phone
     so the search field and shelf are reachable without scrolling past it. */
  .lib-hero__art { display: none; }
}

/* ---------- Controls ---------- */

/* Centered, compact control cluster on the hero surface: search over the theme chips.
   The label is visually hidden (the placeholder names the field), so it is not repeated. */
.lib-controls { max-width: 780px; margin-inline: auto; margin-top: var(--sp-10); }
.lib-search { display: grid; justify-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.lib-search input {
  width: min(100%, 380px); min-height: 44px;
  padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-body-md);
  border: 1.5px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--card); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.lib-search input:focus { border-color: var(--stg-deep-blue); }
.lib-search input::placeholder { color: var(--muted); opacity: 1; }

/* Chip row. The twelve theme chips are the primary way into the shelf, so they
   are real buttons carrying aria-pressed, not links or a select. */
.lib-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.lib-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 36px; padding: var(--sp-1) var(--sp-3);
  border: 1.5px solid var(--hairline); border-radius: var(--radius-full);
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption);
  line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.lib-chip:hover { background: var(--alt-band); border-color: var(--gold); }
.lib-chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.lib-chip[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); }
.lib-chip__n { font-size: var(--fs-caption); opacity: 0.65; font-variant-numeric: tabular-nums; }

/* Mobile controls. The theme chips wrap into centered rows at every width (the base
   .lib-chips rule), so a narrow window never turns them into a cut-off horizontal
   scroll rail. */
@media (max-width: 767px) {
  .lib-search { gap: 0; margin-bottom: var(--sp-3); }
  .lib-search input { width: 100%; }
  .lib-controls { margin-top: var(--sp-8); }
}

/* ---------- Affiliate disclosure (sticky footer) ---------- */
/* Sticks to the bottom of the viewport while the page scrolls, then rests just above
   the site footer at the end (it is the last child of <main>, whose bottom is the
   footer's top). A solid background keeps content legible as it scrolls underneath. */
.lib-affiliate {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--card); border-top: 1px solid var(--hairline);
  padding-block: var(--sp-3);
}
.lib-affiliate p {
  margin: 0; max-width: 80ch; margin-inline: auto; text-align: center;
  font-size: var(--fs-caption); color: var(--muted);
}
@media (max-width: 767px) {
  .lib-affiliate { padding-block: var(--sp-2); }
  .lib-affiliate p { text-align: left; }
}

/* ---------- The shelf ---------- */

.lib-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Denser than before: the shelf is a scannable catalog, so more, smaller jackets per
   row beat fewer big ones. Phone card treatment (below) stays strictly <=767. */
@media (min-width: 768px)  { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .lib-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* minmax(0, 1fr) on both columns: a nowrap label inside (the buy link) would
   otherwise raise the column's min-content width and push the cover past the card. */
.book {
  display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1); padding: var(--sp-3);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.book[hidden] { display: none; }
.book:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
/* 1fr on the themes row pins every buy link in a grid line to the same baseline. */
.book__body {
  display: grid; grid-template-rows: auto auto 1fr auto;
  grid-template-columns: minmax(0, 1fr); gap: var(--sp-2);
}

/* A fixed frame with the cover contained inside it: the catalog mixes portrait,
   square and landscape jackets, and a fixed frame keeps the rows aligned without
   cropping anyone's artwork. The aspect-ratio reserves the space before the lazy
   cover arrives, so the shelf never shifts under a scrolling thumb. */
/* width + align-self pin the inline size so aspect-ratio derives the block size. A
   stretched grid item resolves the ratio the other way round and overflows its column. */
.book__frame {
  position: relative; display: grid; place-items: center;
  width: 100%; align-self: start; aspect-ratio: 1 / 1;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); overflow: hidden;
}
/* object-fit does the containing. The old max-width/max-height pair did not resolve
   against an aspect-ratio box in WebKit, so tall jackets overflowed the frame and
   were silently cropped top and bottom by the overflow:hidden. */
.book__frame img {
  position: absolute; inset: var(--sp-2);
  width: calc(100% - 2 * var(--sp-2)); height: calc(100% - 2 * var(--sp-2));
  object-fit: contain; border-radius: var(--radius-sm);
}
/* The placeholder stays an in-flow grid item, so it centres without the abspos. */
.book__nocover {
  font-family: var(--font-editorial); font-weight: 500; font-size: var(--fs-body-md);
  color: var(--muted); text-align: center; line-height: 1.3; padding: var(--sp-2);
}
.book__title { font-size: var(--fs-body-md); margin: var(--sp-1) 0 0; line-height: 1.25; }
.book__author { font-size: var(--fs-caption); color: var(--muted); }

.book__themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); align-content: start; }
.theme-chip {
  display: inline-flex; align-items: center;
  padding: 3px var(--sp-2); border-radius: var(--radius-full);
  background: var(--tint-blue-bg); color: var(--stg-deep-blue);
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.4;
}
.theme-chip--more { background: transparent; color: var(--muted); padding-inline: var(--sp-1); }

.book__buy {
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-3);
  white-space: nowrap;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--paper); color: var(--stg-deep-blue); text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-caption);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.book__buy:hover { background: var(--stg-deep-blue); border-color: var(--stg-deep-blue); color: var(--paper); }
.book__nobuy {
  display: flex; align-items: center; min-height: var(--touch-min);
  margin-top: var(--sp-2); font-size: var(--fs-body-md);
}

.lib-empty[hidden] { display: none; }
.lib-empty {
  padding-block: var(--sp-16); text-align: center; max-width: none;
  font-family: var(--font-editorial); font-weight: 500; font-size: var(--fs-body-xl); color: var(--muted);
}
.lib-reset {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--stg-deep-blue); text-decoration: underline; text-underline-offset: 3px;
}

/* Phone shelf. Two-up is right for a family thumbing a catalog, but the old card
   spent its width on text and left the jacket at 108px: on a shelf the cover IS the
   content, so it bleeds to the card edge and the type below it is trimmed to fit. */
@media (max-width: 767px) {
  /* The shelf takes a 16px screen margin instead of the 24px container gutter, which
     is what carries the jacket past 40vw on the narrowest phones still in use. */
  .lib-grid {
    gap: var(--sp-4);
    margin-inline: calc(-1 * (var(--gutter) - var(--sp-4)));
    /* Each card is exactly as tall as its own jacket needs, so a landscape cover
       beside a portrait one does not inherit the taller card's height as dead paper. */}
  .book { padding: 0; overflow: hidden; }
  /* No fixed frame on a phone. The generator writes every cover's real pixel
     width/height into the markup, so the intrinsic ratio reserves the exact space
     before the lazy image arrives (no shift) and the box is only as tall as the
     jacket -- a 4/5 frame gave a landscape cover up to 90px of empty paper.
     min-height keeps a very wide jacket from collapsing the row. */
  .book__frame {
    aspect-ratio: auto; height: auto; min-height: 120px;
    border: 0; border-bottom: 1px solid var(--hairline);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  /* In flow, not absolutely positioned: an abspos image cannot give the frame its
     height. object-fit: contain stays as the fallback if a cover's attributes are
     ever missing and the frame falls back to min-height. */
  .book__frame img {
    position: static; inset: auto;
    width: 100%; height: auto; max-height: none; border-radius: 0;
  }
  .book__body { padding: var(--sp-3) var(--sp-3) 0; gap: var(--sp-1); }
  /* Three lines at 16px with an ellipsis. Two lines truncated a fifth of the catalog's
     titles in a 172px column; the third line clears almost all of them for 20px, and
     the full title still stays in the cover alt text and the buy link's aria-label. */
  .book__title {
    font-size: 1rem; line-height: 1.25; margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .book__author { line-height: 1.35; }
  /* The buy link is a full-width 44px bar across the foot of the card: it bleeds back
     through the body padding, so "Buy on Bookshop" stays on one line at 15px in a
     164px card instead of stacking to two lines and a 67px row. */
  .book__buy, .book__nobuy {
    min-height: var(--touch-min);
    margin: var(--sp-2) calc(-1 * var(--sp-3)) 0;
    padding-inline: var(--sp-1); justify-content: center;
    border-radius: 0; border-inline: 0; border-bottom: 0;
  }
  /* One theme, two lines maximum: the chip is a hint at what a book is about, and
     the rail above is the real way in. Long labels ellipse rather than stack. */
  .book__themes li:nth-child(n + 2) { display: none; }
  .theme-chip {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; line-height: 1.3;
  }
}

/* ---------- Footer groups (all pages) ---------- */

.site-footer__nav { display: grid; gap: var(--sp-8); }
@media (min-width: 640px) { .site-footer__nav { grid-template-columns: repeat(2, auto); gap: var(--sp-12); } }
.site-footer__label {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-on-dark);
  margin: 0 0 var(--sp-1);
}
/* Beats the flat `.site-footer nav ul` row above (same specificity, later in file). */
.site-footer__nav nav ul { display: grid; gap: 0; justify-items: start; }
.site-footer__nav a { border-bottom-color: transparent; }
.site-footer__nav a:hover { border-bottom-color: var(--paper); }
@media (min-width: 768px) {
  .site-footer__nav { justify-self: end; }
  .site-footer__nav nav { justify-self: start; }
}

/* ---------- Store buttons: hero line, pricing and the final row ---------- */

.hero__terms { margin: 0 0 var(--sp-3); font-size: var(--fs-body-md); color: var(--muted); max-width: 46ch; }
#get-app { scroll-margin-top: 110px; }
.pricing__stores { margin-top: var(--gap-content); }
.pricing__stores .store-row { justify-content: flex-start; }
.section--stores { padding-block: var(--sp-10); }
.stores-row { display: flex; flex-direction: column; align-items: center; }
.stores-row .store-row { justify-content: center; }
.stores-row .prelaunch-note { text-align: center; }
@media (max-width: 767px) {
  .section--stores { padding-block: var(--section-pad-light-mobile); }
  .section--hero { padding-top: var(--sp-8); }
}

/* ---------- Theme picker (enhances the themes list; see theme-picker.js) ---------- */

.picker__chips {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: var(--sp-1) var(--sp-1) var(--sp-3);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.picker__chips::-webkit-scrollbar { display: none; }
.picker { position: relative; }
/* Edge fades hint that the chip row scrolls sideways on a phone. */
.picker--fade-end .picker__chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.picker--fade-start .picker__chips { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.picker--fade-start.picker--fade-end .picker__chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.picker__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-4);
  background: var(--card); border: 1.5px solid var(--hairline); border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body-md); color: var(--stg-deep-blue);
  scroll-snap-align: start; transition: background var(--dur-base), border-color var(--dur-base);
}
.picker__chip:hover { background: var(--tint-blue-bg); }
.picker__chip[aria-pressed="true"] { background: var(--tint-blue-bg); border-color: var(--stg-deep-blue); }
.picker__chip:focus-visible, .picker__more:focus-visible { outline: 3px solid var(--stg-deep-blue); outline-offset: 2px; }
.picker__icon { width: 24px; height: 24px; flex: none; color: var(--gold); fill: currentColor; }
.picker__name { white-space: nowrap; }
@media (max-width: 767px) { .picker__name { white-space: normal; max-width: 9.5rem; line-height: 1.2; text-align: left; } }
@media (min-width: 768px) {
  .picker__chips { flex-wrap: wrap; overflow: visible; padding-bottom: var(--sp-4); }
  .picker--fade-end .picker__chips, .picker--fade-start .picker__chips { -webkit-mask-image: none; mask-image: none; }
}
.picker__panel { display: grid; gap: var(--sp-6); align-items: center; margin-top: var(--sp-2); }
.picker__title { color: var(--stg-deep-blue); margin-bottom: var(--sp-2); }
.picker__desc { margin: 0 0 var(--sp-4); color: var(--muted); max-width: 40ch; }
.picker__more { color: var(--stg-deep-blue); font-weight: 700; text-underline-offset: 3px; }
.picker__covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.picker__covers img { width: 100%; height: auto; border-radius: var(--radius-sm, 4px); box-shadow: var(--shadow-card); }
@media (min-width: 600px) { .picker__covers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .picker__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding: var(--sp-8); } }
@media (prefers-reduced-motion: no-preference) {
  .picker__panel--swap { animation: picker-in 220ms var(--ease); }
  @keyframes picker-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.themes[hidden] { display: none; }

/* ---------- Library: shorter first screen ---------- */

.lib-note-section { padding-block: var(--sp-12); }
.lib-note { max-width: 46rem; }
.lib-note .lib-hero__body { margin-bottom: var(--sp-3); }
.lib-note .lib-hero__sub { margin-top: var(--sp-6); }
.lib-note .lib-hero__body:first-child { color: var(--ink); }
.lib-chips { position: relative; }
#lib-chips { scroll-margin-top: 96px; }
@media (max-width: 767px) { #lib-chips { scroll-margin-top: 16px; } }
/* Up to 900px the theme chips are one scrolling row (like the home page picker) so the books start on the
   second phone screen; the edge fades are added by library.js. */
@media (max-width: 900px) {
  .lib-chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .lib-chips::-webkit-scrollbar { display: none; }
  .lib-chip { flex: 0 0 auto; white-space: nowrap; }
  .lib-controls--fade-end .lib-chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .lib-controls--fade-start .lib-chips { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .lib-controls--fade-start.lib-controls--fade-end .lib-chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}

/* ---------- FAQ art ----------
   From desktop width the app's gold Curiosity glyph sits to the left of the card, centered on it (aria-hidden:
   the eyebrow and heading carry the meaning). Below that it is not shown and the centered eyebrow and heading stand. */
.faq-art { display: none; }
@media (min-width: 1025px) {
  .faq-layout { display: grid; grid-template-columns: auto minmax(0, 46rem); column-gap: var(--sp-12); justify-content: center; align-items: stretch; }
  .faq-art {
    display: block; grid-row: 1 / span 2; grid-column: 1; align-self: center;
    width: clamp(7rem, 12vw, 10rem); height: clamp(7rem, 12vw, 10rem);
    color: var(--gold); fill: currentColor;
  }
  .faq-head { grid-column: 2; text-align: left; margin-inline: 0; max-width: none; margin-bottom: var(--sp-10); }
  .faq-head > p { margin-inline: 0; }
  .faq-layout .faq { grid-column: 2; margin-inline: 0; max-width: none; }
}