/* No, Pero Why? release stylesheet: the calm design system.
   Loaded LAST on every page. It keeps the house look and uses it the same way everywhere:
     1. Sections are spacing, with text on the page's left edge; one or two colored bands per screen.
     2. One card: white, a thick navy outline, rounded corners and an offset brand-color shadow (blue, gold, pink).
     3. One emphasis card: the card with a bigger blue offset.
     4. One filled panel: sunny yellow with the navy outline (pink for optional extras).
     5. Photos keep a white sticker edge, a navy ring and a colored offset.
     6. Voice notes are blue cards with yellow "Hear" buttons.
     7. Nothing tilts except stickers and cutouts.
   Rules are prefixed with #main so they win over older, long selectors.
   The new case pages (.cs-page), books (.bk-page, .te-sheet), anchor charts (.ac-page) and
   educator hub pages (eh-*) carry their own stylesheets; the calm rules skip their insides. */

/* ---------- 0. Tokens ---------- */
:root{
  --r-ink:#142b46; --r-blue:#124dec; --r-blue-dark:#0b37b0; --r-gold:#ffdc52; --r-pink:#c2185b;
  --r-line:#c9d4ea; --r-tint-quiet:#f4f7ff; --r-tint-warm:#fff6d6; --r-white:#fff;
  --r-radius:20px; --r-radius-lg:26px; --r-radius-sm:10px;
  --r-lift:4px 5px 0 var(--r-ink); --r-card-shadow:6px 6px 0 var(--card-shadow,var(--r-blue)); --r-tint-sun:#fff3c4; --r-tint-pink:#ffe6ef;
  --r-s1:4px; --r-s2:8px; --r-s3:12px; --r-s4:16px; --r-s5:24px; --r-s6:32px; --r-s7:48px; --r-s8:72px;
  --r-gap:clamp(48px,6vw,72px);
  --r-measure:68ch; --r-lead:56ch;
  --r-display:'Clash Display','Satoshi',system-ui,sans-serif; --r-body:'Satoshi',system-ui,sans-serif;
  --stk-line:2.5px solid var(--r-ink);
  --gz-tilt:0deg;
}

/* The site's own icons (icons.py). Stroke comes from the SVG; fills come from here. */
.npw-icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em;overflow:visible}
.npw-icon .f{fill:none}
.npw-icon--sticker{color:var(--r-ink);filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)}
.npw-icon--sticker .f{fill:var(--npw-fill,#fff)}
svg.npw-use{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 2. Type rhythm (audit 9) ---------- */
:is(h1,h2,h3,h4):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) :is(.hl,span,em,strong,b){font-family:inherit!important}
:is(h1,h2,h3,h4){word-spacing:normal!important;overflow-wrap:break-word!important;hyphens:manual}
/* Clash Display sets a narrow space: one even letter-spacing and a slightly wider space keep words apart */
#main :is(h1,h2,h3):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){letter-spacing:-.01em!important;word-spacing:.04em!important}
#main :is(h1,h2,h3,h4):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){max-width:100%}
#main .hl{display:inline}
#main :is(h1,h2) em:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){font-style:normal}

/* ---------- 3. Sections: no box (audit 7, 14) ---------- */
#main > :is(section,div,aside).wrap:not(.cs-page):not(:is(.r-band,.book-notice,.format-invitation,.shelf-teaser,.home-action-desk,.small-question,.name-story,.app-pocket)):not([class^="eh-"]):not([class*=" eh-"]):not(:has(.cs-page,.bk-page,.te-sheet,.ac-page)){
  background-color:transparent; border:0!important; border-radius:0!important; box-shadow:none!important;
  clip-path:none!important; transform:none!important;
  padding-inline:0!important; padding-block:0!important;
  margin-block:var(--r-gap) 0!important;
}
#main > :is(section,div,aside).wrap:first-child:not(.cs-page){margin-top:clamp(28px,4vw,48px)!important}
/* a band: one tinted or framed section, padded, at most one or two per page */
#main > .wrap:is(.r-band,.book-notice,.format-invitation,.shelf-teaser,.home-action-desk,.small-question,.name-story,.app-pocket):not(.cs-page){margin-block:var(--r-gap) 0!important;padding:clamp(20px,4vw,48px)!important;border-radius:var(--r-radius-lg)!important;transform:none!important}
/* homepage-era chapter numbers are gone: no labels that can collide with panels */
#main section[data-chapter]::before{content:none!important;display:none!important}
#main section[data-chapter]{padding-top:0!important;padding-bottom:0!important;background:none!important;box-shadow:none!important}
#main section[data-chapter]::after{content:none!important}
/* a lone "see all" link is spacing, not a section */
#main > div.wrap:has(> a.journal-all:only-child){margin-block:var(--r-s5) 0!important}

/* ---------- 4. Heading and paragraph rhythm (audit 14) ---------- */
#main :is(section,article,header,div,aside):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) > :is(h2,h3,h4):first-child{margin-top:0!important}
#main :is(h2):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(p,ul,ol,dl){margin-top:var(--r-s3)!important}
#main :is(h3,h4):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(p,ul,ol,dl){margin-top:var(--r-s2)!important}
#main :is(p,ul,ol,dl):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(p,ul,ol,dl){margin-top:var(--r-s3)}
#main :is(p,ul,ol,dl,blockquote):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(h2){margin-top:var(--r-s6)!important}
#main :is(p,ul,ol,dl,blockquote):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(h3){margin-top:var(--r-s5)!important}
#main .school-reading h2:first-of-type{margin-top:0!important}
/* prose never runs wider than a comfortable line */
#main :is(.prose,.school-reading,.trust-reading,.about-story,.creator-letter,.equity-letter,.privacy-reading) :is(p,li):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){max-width:var(--r-measure)}

/* ---------- 5. Default card (audit 7) ---------- */
#main :is(.season-ticket,.shelf-entry,article.feed-post,a.case-card,.book-download-grid>article,.cast-detail,
  .platform-statements>article,.room-photo-shelf>article,.src-card,.crew-card,.ht-card,.td-group,.made-grid>div,
  .cast-kid,.join-card,.involvement-route,.school-downloads>article,.shelf-teaser-links a,.home-action-desk nav a,
  .companion-questions article,.room-photo-spread article):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  border:var(--stk-line)!important; border-radius:var(--r-radius)!important; background-color:#fff!important;
  box-shadow:6px 6px 0 var(--card-shadow,var(--r-blue))!important; transform:none!important; --gz-tilt:0deg;
}
#main :is(.season-ticket,.shelf-entry,article.feed-post,a.case-card,.book-download-grid>article,.cast-detail,.platform-statements>article,.room-photo-shelf>article,.src-card,.crew-card,.td-group,.made-grid>div,.cast-kid,.join-card,.involvement-route,.school-downloads>article,.companion-questions article,.room-photo-spread article):nth-child(3n+2){--card-shadow:var(--r-gold)}
#main :is(.season-ticket,.shelf-entry,article.feed-post,a.case-card,.book-download-grid>article,.cast-detail,.platform-statements>article,.room-photo-shelf>article,.src-card,.crew-card,.td-group,.made-grid>div,.cast-kid,.join-card,.involvement-route,.school-downloads>article,.companion-questions article,.room-photo-spread article):nth-child(3n){--card-shadow:var(--r-pink)}
#main :is(.season-ticket,.shelf-entry,a.case-card,.src-card,.crew-card,.cast-kid,.join-card):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *):is(:hover,:focus-visible){
  transform:translate(-2px,-2px)!important; box-shadow:8px 8px 0 var(--card-shadow,var(--r-blue))!important;
}
#main .season-ticket .ticket-picture{border-radius:calc(var(--r-radius) - 1px) calc(var(--r-radius) - 1px) 0 0!important}
#main .ht-deck::before,#main .ht-deck::after{display:none!important}

/* ---------- 6. Emphasis card: one per page ---------- */
#main :is(.r-emphasis,#school-question,.first-move):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  background:#fff!important; border:var(--stk-line)!important; border-radius:var(--r-radius-lg)!important;
  box-shadow:8px 8px 0 var(--r-blue)!important; padding:clamp(20px,3vw,32px)!important; transform:none!important;
}

/* ---------- 7. Quiet panel ---------- */
#main :is(.r-quiet,details.optional-culture,details.commitment-check,.school-course-note,.book-sheet,.book-notice,
  .crew-home-heading,.case-assignment,.gz-note,.small-callout,.pitch-process,.format-invitation,.shelf-teaser,.home-action-desk,
  .small-question,.name-story):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  background:var(--r-gold)!important; color:var(--r-ink); border:var(--stk-line)!important; border-radius:var(--r-radius-lg)!important;
  box-shadow:none!important; transform:none!important; --gz-tilt:0deg;
}
#main :is(details.optional-culture,details.commitment-check,.gz-note,.small-callout):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){background:var(--r-tint-pink)!important}
#main details.optional-culture:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *),#main details.commitment-check{padding:clamp(14px,2vw,20px)!important}

/* ---------- 8. Tilt: only stickers and cutouts may rotate (audit 11) ---------- */
#main :is(.gz-moment figure,.gz-moment-bubble,.crew-card,.ig-status,.ph-pin,.case-learning-note :is(dt,dd,.gl-card),
  .artifact-stack .case-artifact,.rw-clip,.rw-card,.crew-hero-photo,.cast-kid img,.cast-adult img,.fit-eyebrow,.book-notice,.crew-home-heading,
  .sb-grid figure,.reel-card,.lv-card,.mission-picture,.welcome-film):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){transform:none!important}
#main .gz-moment figure{box-shadow:none!important;border:var(--stk-line)!important;border-radius:var(--r-radius-lg)!important}
#main .gz-moment-bubble{box-shadow:none!important;border:var(--stk-line)!important;border-radius:var(--r-radius-lg) var(--r-radius-lg) var(--r-radius-lg) 6px!important}
#main .gz-moment-who span{background:var(--r-tint-warm)!important;text-transform:none!important;letter-spacing:0!important}

/* ---------- 9. Buttons: one family (audit 13) ---------- */
#main :is(a.primary-action,button.primary-action,.r-btn-primary):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  display:inline-flex!important; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:11px 20px!important; box-sizing:border-box;
  background:var(--r-blue)!important; color:#fff!important; border:2px solid var(--r-ink)!important;
  border-radius:14px!important; box-shadow:var(--r-lift)!important;
  font:750 1rem/1.25 var(--r-body)!important; text-decoration:none!important; text-align:center; white-space:normal;
  width:auto; max-width:100%; transform:none; transition:transform .12s,box-shadow .12s!important;
}
#main :is(a.primary-action,button.primary-action,.r-btn-primary):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *):hover{transform:translate(-1px,-1px)!important;box-shadow:5px 6px 0 var(--r-ink)!important}
#main :is(a.btn,button.btn,.r-btn,.chapter-next,.ph-btn:not(.primary),.depth-entry,.ht-links button,.sb-reset):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  display:inline-flex!important; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:11px 20px!important; box-sizing:border-box;
  background:#fff!important; color:var(--r-ink)!important; border:2px solid var(--r-ink)!important;
  border-radius:14px!important; box-shadow:none!important;
  font:750 1rem/1.25 var(--r-body)!important; text-decoration:none!important; text-align:center; cursor:pointer;
  width:auto; max-width:100%; transform:none!important;
}
#main :is(a.btn,button.btn,.r-btn,.chapter-next,.depth-entry,.ht-links button,.sb-reset):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *):hover{background:var(--r-tint-quiet)!important}
:is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--r-blue)!important;outline-offset:3px!important}
/* Action rows: never jammed, never wrapped around each other */
#main :is(.r-actions,p:has(> a.primary-action),p:has(> a.btn),.school-library,.audience-bridge > div:last-child,.ht-links,
  .welcome-invitation > div,.shelf-teaser > div:first-child,.form-actions,.field-actions):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--r-s3) var(--r-s4);
}
#main :is(p,ul,ol,dl,h2,h3):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(a.primary-action,a.btn,.r-actions,p:has(> a.primary-action),p:has(> a.btn)){margin-top:var(--r-s4)!important}
#main :is(button,a.primary-action,a.btn):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) + :is(p,small,.small-note,[role=status]){margin-top:var(--r-s3)!important}

/* Filter chips: one pill family everywhere (the shelf, the scene library, companion steps, voice-note names) */
#main :is(.shelf-filters,.media-filters){display:flex;flex-wrap:wrap;gap:8px!important;border-bottom:1px solid var(--r-line)!important;padding:0 0 var(--r-s4)!important;margin:0!important}
#main :is(.shelf-filters,.media-filters,.companion-fieldnote nav,.scene-journal nav,.soundboard-console nav) button{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px!important;margin:0;box-sizing:border-box;
  background:#fff!important;color:var(--r-ink)!important;border:1.5px solid var(--r-ink)!important;border-radius:999px!important;box-shadow:none!important;transform:none!important;
  font:650 .92rem/1.2 var(--r-body)!important;cursor:pointer;text-align:left}
#main :is(.shelf-filters,.media-filters,.companion-fieldnote nav,.scene-journal nav,.soundboard-console nav) button:hover{background:var(--r-tint-quiet)!important}
#main :is(.shelf-filters,.media-filters,.companion-fieldnote nav,.scene-journal nav,.soundboard-console nav) button[aria-pressed=true]{background:var(--r-ink)!important;color:#fff!important}
#main :is(.companion-fieldnote nav,.scene-journal nav) button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--r-tint-quiet);color:var(--r-ink);font-size:.8rem;font-weight:750}
#main :is(.companion-fieldnote nav,.scene-journal nav) button[aria-pressed=true] span{background:#fff}
#main .soundboard-console nav{display:flex!important;flex-wrap:wrap;gap:8px!important}
/* Pagers and small actions: the secondary button; a disabled pager button keeps ink text on a dashed outline */
#main :is(.shelf-pages,.media-pagination) button,#main :is([data-shelf-reset],[data-media-reset],[data-caption-download],.media-viewer > nav button){
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px!important;
  background:#fff!important;color:var(--r-ink)!important;border:2px solid var(--r-ink)!important;border-radius:14px!important;box-shadow:none!important;opacity:1!important;
  font:750 .95rem/1.2 var(--r-body)!important;cursor:pointer}
#main :is(.shelf-pages,.media-pagination) button:hover:not(:disabled){background:var(--r-tint-quiet)!important}
#main :is(.shelf-pages,.media-pagination) button:disabled{border-style:dashed!important;border-color:var(--r-line)!important;color:var(--r-ink)!important;background:#fff!important;cursor:default}
#main :is(.shelf-pages,.media-pagination){display:flex;justify-content:center!important;align-items:center;gap:var(--r-s4)!important;padding:var(--r-s5) 0 0!important;margin:0!important;font-weight:650}
#main :is(.media-count,#shelf-count){margin:var(--r-s4) 0!important}

/* ---------- 10. Links look like links (audit 10) ---------- */
#main :is(p,li,td,dd,figcaption,small,blockquote,.small-note) a:not([class]):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *),
#main :is(.shelf-open,.text-link,.under-link,.quiet-link,.back,.journal-all,.r-link,.social-back,.ph-back a):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  color:var(--r-blue)!important; text-decoration:underline!important; text-decoration-thickness:1.5px!important;
  text-underline-offset:3px!important; font-weight:650;
}
#main :is(p,li,td,dd,figcaption,small) a:not([class]):hover,#main :is(.text-link,.shelf-open,.r-link):hover{color:var(--r-blue-dark)!important;text-decoration-thickness:2.5px!important}
#main :is(.text-link,.quiet-link,.r-link):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){display:inline-flex;align-items:center;gap:6px;min-height:32px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
/* bare links that sit on their own in a block (not inside a paragraph) look like links too, and never run together */
#main :is(div,section,article,aside,header,details) > a:not([class]):not(:has(img,picture,video,svg,h2,h3,h4,div,figure,ul,ol)):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page,[class^="eh-"],[class*=" eh-"],.casework-root) *),
#main :is(.shelf-back,.format-story > a,.series-end > a,.research-note > a,.media-opening > a):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  color:var(--r-blue)!important; text-decoration:underline!important; text-decoration-thickness:1.5px!important; text-underline-offset:3px!important;
  font-weight:650; display:inline-block; margin:var(--r-s3) var(--r-s5) 0 0; background:none!important; border:0!important; box-shadow:none!important; padding:0!important;
}
#main :is(div,section,article,aside,header,details) > a:not([class]):not(:has(img,picture,video,svg,h2,h3,h4,div,figure,ul,ol)):hover{color:var(--r-blue-dark)!important;text-decoration-thickness:2.5px!important}
/* the download link reads as one secondary button with a small file tag */
#main :is(.school-download,.book-download):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  display:inline-flex!important; flex-direction:row!important; flex-wrap:wrap; align-items:center; gap:10px; min-height:48px; padding:10px 18px!important;
  background:#fff!important; color:var(--r-ink)!important; border:2px solid var(--r-ink)!important; border-radius:14px!important;
  box-shadow:none!important; text-decoration:none!important; font-weight:750;
}
#main :is(.school-download,.book-download) span{text-decoration:none!important;font-size:.8rem;font-weight:750;padding:2px 8px;border-radius:99px;background:var(--r-tint-quiet);color:var(--r-ink)!important}

/* ---------- 11. Contrast and readability (audit 5, 6) ---------- */
.crew-hero-copy .fit-eyebrow{color:#fff!important}
.ph-card .room-voice,.ph-card .room-voice :is(.voice-words,.voice-heading strong,p,blockquote){color:var(--r-ink)!important}
.gz-sticker.gz-pink,.gz-pink.gz-sticker{background:var(--r-pink)!important}
#main :is(.fit-eyebrow,.eyebrow,.cast-role):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){letter-spacing:0!important}
#main .fit-eyebrow:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){background:none!important;color:var(--r-pink)!important;padding:0!important;border:0!important;box-shadow:none!important;transform:none!important;display:block;font-weight:750!important;margin:0 0 var(--r-s2)!important}
.fit-tags{display:none!important}

/* ---------- 12. Headings never cut through their boxes (audit 4) ---------- */
@media (max-width:480px){
  #main .about-opening h1{font-size:clamp(2.1rem,9vw,2.6rem)!important}
  #main .season-after h2{font-size:clamp(1.8rem,8vw,2.3rem)!important}
  #main .foundation-chapter h2{font-size:1.6rem!important}
}
.gd-art-label span{white-space:normal!important;flex:1 1 auto!important}

/* ---------- 13. Grids: no lone card beside empty cells (audit 15) ---------- */
#main :is(.src-wall,.rw-wall,.made-grid):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;gap:var(--r-s5)!important}
@media (min-width:700px){#main .made-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:700px){#main .school-course-note{flex-direction:column!important}}

/* ---------- 14. Sticker notice: a short line in the page, right under what earned it (audit 2).
   It is never fixed or floating, so it cannot cover content. genz.js adds it; the reader closes it. ---------- */
.gz-earned{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:fit-content;max-width:100%;box-sizing:border-box;margin:var(--r-s3) 0 0!important;padding:6px 8px 6px 6px!important;
  background:var(--r-tint-warm)!important;color:var(--r-ink)!important;border:1.5px solid var(--r-ink);border-radius:14px;font:500 .95rem/1.35 var(--r-body)}
.gz-earned img{width:40px;height:40px;object-fit:contain;flex:none}
.gz-earned span{flex:1 1 180px;min-width:0}
.gz-earned b{font-weight:750}
.gz-earned a{color:var(--r-blue)!important;text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:700;white-space:nowrap}
.gz-earned button{display:grid;place-items:center;width:36px;height:36px;margin:0 0 0 auto;padding:0;border:0;border-radius:10px;background:none;color:var(--r-ink);cursor:pointer}
.gz-earned button:hover{background:#fff}
.gz-earned .npw-use{width:20px;height:20px}
.gz-unlock{display:none!important}

/* ---------- 15. Page background on phones: plain brand blue, not a busy mural strip ---------- */
@media (max-width:760px){body{background:#124dec!important}}

/* ================= Page parts built on the system ================= */

/* Shared helpers */
#main .r-quiet{background:var(--r-tint-quiet)!important;border-radius:var(--r-radius)!important}
#main .r-link{color:var(--r-blue)!important;text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:3px!important;font-weight:700}
#main .r-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r-s3) var(--r-s4)}
#main :is(.gm-intro,.crew-cards header p,.cast-row header p,.cmp-row header p,.sk-note){max-width:var(--r-lead)}

/* ---------- Home (/), the role picker and the site footer live in home.css (loaded after this file) ---------- */
/* ---------- Real, cap or needs context? ---------- */
#main .hot-takes{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;gap:var(--r-s4) clamp(24px,4vw,56px);align-items:start}
#main .ht-intro{grid-row:1 / span 2}
#main .ht-deck{grid-column:2;grid-row:1}
#main .ht-intro{position:static}
#main .ht-intro h2{margin:0!important}
#main .ht-intro > p{margin:var(--r-s3) 0 0!important;max-width:var(--r-lead)}
#main .ht-key{list-style:none;margin:var(--r-s4) 0 0;padding:0;display:grid;gap:6px}
#main .ht-key li{margin:0}
#main .ht-duda{grid-column:2;grid-row:2;justify-self:end;position:static!important;display:block;width:104px!important;height:auto;margin:0 12px 0 0;transform:rotate(6deg)!important;filter:none!important}
#main .ht-card{background:#fff;padding:clamp(20px,3vw,28px)!important;min-height:0!important;border-radius:var(--r-radius-lg)!important}
#main .ht-count{margin:0 0 8px!important;font-size:.9rem!important;font-weight:750;letter-spacing:0!important;color:var(--r-ink)!important}
#main .ht-card h3{margin:0 0 var(--r-s4)!important;font-size:clamp(1.35rem,2.4vw,1.8rem)!important;line-height:1.2}
#main .ht-sides{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r-s3)!important}
#main .ht-sides button{min-height:52px;padding:10px 12px!important;border:2px solid var(--r-ink)!important;border-radius:14px!important;background:#fff!important;color:var(--r-ink)!important;box-shadow:none!important;transform:none!important;font:750 1rem/1.2 var(--r-body)!important;white-space:normal!important;cursor:pointer;outline:0}
#main .ht-sides button:hover{background:var(--r-tint-quiet)!important}
#main .ht-sides button[aria-pressed=true]{background:var(--r-ink)!important;color:#fff!important;outline:0!important}
#main .ht-sides button:focus-visible{outline:3px solid var(--r-blue)!important;outline-offset:3px}
#main .ht-reveal{margin-top:var(--r-s4)!important;gap:var(--r-s3)!important}
#main .ht-you{margin:0!important;font-weight:700}
#main .ht-reply{gap:10px!important;margin:0!important;max-width:none}
#main .ht-reply img{width:40px!important;height:40px!important;border:1.5px solid var(--r-ink)!important}
#main .ht-reply span{background:var(--r-tint-quiet)!important;border:1px solid var(--r-line)!important;border-radius:16px 16px 16px 6px!important;padding:9px 13px!important;font-size:1rem!important}
#main .ht-reply b{display:block;font-size:.85rem!important;margin-bottom:2px}
#main .ht-reply em{font-style:normal;margin-left:6px;padding:1px 8px;border-radius:99px;font-size:.78rem!important;font-weight:750;background:var(--r-gold)!important;color:var(--r-ink)}
#main .ht-cap em{background:#ffd3e0!important}
#main .ht-real em{background:#dfe8ff!important}
#main .ht-links{margin-top:var(--r-s2)!important;gap:var(--r-s3) var(--r-s4)!important}
#main .ht-links button{min-height:44px}
#main .ht-done p{margin:0 0 var(--r-s4)!important}
@media (max-width:860px){#main .hot-takes{grid-template-columns:minmax(0,1fr);grid-template-rows:none}#main :is(.ht-intro,.ht-deck){grid-column:1;grid-row:auto}#main .ht-duda{display:none}}
@media (max-width:480px){#main .ht-sides{grid-template-columns:1fr}}

/* ---------- The crew (/world/) ---------- */
#main .crew-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:0!important}
#main .crew-hero h1{margin:0!important;font-size:clamp(2.4rem,5vw,4rem)!important;line-height:1.02!important}
#main .crew-hero-copy > p{margin:var(--r-s4) 0 0!important;max-width:var(--r-lead)}
#main .crew-hero .crew-lead{font-size:clamp(1.05rem,1.4vw,1.18rem)}
#main .crew-jump ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;margin:var(--r-s5) 0 0;padding:0}
#main .crew-jump li{margin:0}
#main .crew-jump a{color:var(--r-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
#main .crew-hero-photo{margin:0;transform:none!important}
#main .crew-hero-photo img{display:block;width:100%;height:auto;border-radius:24px!important;border:6px solid #fff!important;box-shadow:0 0 0 2.5px var(--r-ink),7px 8px 0 1px var(--r-pink)!important;box-sizing:border-box}
#main .crew-hero-photo figcaption{position:static!important;margin-top:10px;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;transform:none!important;font-weight:500!important;font-size:.9rem!important;max-width:none!important}
#main :is(.crew-cards,.cast-row,.cmp-row,.crew-more) > header{max-width:none;margin:0 0 var(--r-s5)}
#main :is(.crew-cards,.cast-row,.cmp-row,.crew-more) h2,#main .room-soundboard h2,#main .fit-intro h2{margin:0!important;font-size:clamp(1.7rem,3vw,2.5rem)!important;line-height:1.1}
#main :is(.crew-cards,.cast-row,.cmp-row) header p{margin:var(--r-s3) 0 0!important}
#main .crew-card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:var(--r-s5)!important}
#main .crew-card{border-radius:var(--r-radius)!important;overflow:hidden}
#main .crew-card-top{padding:10px 16px!important;font-size:.95rem!important;border-bottom:var(--stk-line)!important}
#main .crew-card-no{font-size:.95rem!important;letter-spacing:0!important;font-weight:750}
#main .crew-card-photo{aspect-ratio:1/.8!important;background:#fff4dc!important}
#main .crew-card-photo img{transform:none!important}
#main .crew-card-body{gap:8px!important;padding:var(--r-s4) var(--r-s4) var(--r-s5)!important;border-top:0!important}
#main .crew-card-body strong{font-size:1.5rem!important}
#main .crew-card-chips span{background:var(--r-tint-quiet)!important;border:1px solid var(--r-line)!important;font-size:.82rem!important;padding:3px 10px!important}
#main .crew-card-quote{font-size:1rem!important}
#main .crew-card-open{margin-top:auto!important;padding-top:6px;border:0!important;color:var(--r-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:750!important;font-size:.95rem!important}
#main .crew-card-body{flex:1}
#main .cast-kids{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--r-s5)!important}
#main .cast-kid{background:#fff!important;padding:var(--r-s4) var(--r-s5) var(--r-s4) var(--r-s4)!important;grid-template-columns:minmax(90px,150px) 1fr!important;gap:var(--r-s5)!important}
#main .cast-kid img{background:#fff4dc;border-radius:12px;width:100%;height:auto;max-height:260px;object-fit:contain}
#main .cast-kid strong{font-size:1.35rem}
#main .cast-kid b{color:var(--r-blue);text-decoration:underline;text-underline-offset:3px;border:0!important}
/* grown-ups: trading cards in the crew card family (same header bar, full-bleed portrait on cream, same body).
   Each card's parts sit on a shared row grid (subgrid), so role bars, portraits, names and questions line up
   across a row even when one role runs to three lines. Five cards: 5 across, then 3 + 2 centered, 2 + 2 + 1 centered, 1. */
#main .gc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--r-s5);row-gap:0}
#main .gc-card{display:grid;grid-column:span 2;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;margin:0 0 var(--r-s5);padding-bottom:var(--r-s4);background:#fff;border:var(--stk-line);border-radius:var(--r-radius);overflow:hidden;min-width:0;box-shadow:6px 6px 0 var(--card-shadow,var(--r-blue))}
#main .gc-card:nth-child(4){grid-column:2 / span 2}
#main .gc-body{display:contents}
#main .gc-role{margin:0!important;padding:10px 16px;display:flex;align-items:center;border-bottom:var(--stk-line);font-weight:750;font-size:.95rem;line-height:1.25;background:var(--r-gold);color:var(--r-ink);max-width:none}
#main .gc-tone-1 .gc-role{background:var(--r-pink);color:#fff}
#main .gc-tone-2 .gc-role{background:var(--r-blue);color:#fff}
#main .gc-photo{margin:0;aspect-ratio:1/.8;background:#fff4dc;overflow:hidden;display:grid;place-items:center;border-bottom:var(--stk-line)}
#main .gc-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;mix-blend-mode:multiply;border:0;border-radius:0;box-shadow:none}
#main .gc-initials{display:grid;place-items:center;width:52%;max-width:170px;aspect-ratio:1;border-radius:50%;background:#fff;border:1.5px solid var(--r-ink);box-shadow:0 0 0 6px #fff,0 0 0 7.5px var(--r-ink);font:700 clamp(2rem,3.2vw,2.8rem)/1 var(--r-display);letter-spacing:.02em;color:var(--r-ink)}
#main .gc-card :is(h3,.gc-pron,.gc-job,.gc-called,.gc-ask){margin:0 var(--r-s4)!important;max-width:none}
#main .gc-card h3{padding-top:var(--r-s4);font-size:1.3rem;line-height:1.2;align-self:end}
#main .gc-pron{justify-self:start;align-self:start;margin-top:8px!important;font-size:.82rem;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--r-tint-quiet);border:1px solid var(--r-line)}
#main .gc-job{margin-top:10px!important;font-size:.98rem;line-height:1.5}
#main .gc-called{margin-top:8px!important;font-size:.92rem;line-height:1.5}
#main .gc-called a{white-space:nowrap;color:var(--r-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;font-weight:700}
#main .gc-ask{align-self:start;margin:var(--r-s3) var(--r-s4) 0!important;padding:10px 12px!important;background:var(--r-tint-quiet);border:1px solid var(--r-line);border-radius:14px 14px 14px 4px;font-size:.98rem;line-height:1.4}
#main .gc-ask p{margin:0!important;max-width:none}
#main .gc-ask-who{font-weight:750;font-size:.85rem!important;color:var(--r-pink);margin-bottom:2px!important}
@media (max-width:900px){
  #main .gc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #main .gc-card,#main .gc-card:nth-child(4){grid-column:span 2}
  #main .gc-card:nth-child(5){grid-column:2 / span 2}
}
@media (max-width:560px){
  #main .gc-grid{grid-template-columns:minmax(0,1fr)}
  #main .gc-card,#main .gc-card:nth-child(4),#main .gc-card:nth-child(5){grid-column:1}
}
/* companions */
#main .cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r-s4)}
#main .cmp-card{display:flex;align-items:center;gap:var(--r-s4);padding:var(--r-s3) var(--r-s4);background:#fff;border:var(--stk-line);border-radius:var(--r-radius);box-shadow:6px 6px 0 var(--card-shadow,var(--r-blue))}
#main .cmp-card:nth-child(3n+2),#main .gc-card:nth-child(3n+2),#main .crew-more-links li:nth-child(2) a{--card-shadow:var(--r-gold)}
#main .cmp-card:nth-child(3n),#main .gc-card:nth-child(3n),#main .crew-more-links li:nth-child(3) a{--card-shadow:var(--r-pink)}
#main .cmp-card img{width:104px;height:124px;object-fit:contain;flex:none}
#main .cmp-card h3{margin:0!important;font-size:1.2rem}
#main .cmp-card p{margin:2px 0 0!important}
#main .cmp-role{font-size:.85rem;font-weight:750;color:var(--r-pink)}
/* fit check and voice notes, calmer */
#main .fit-check{grid-template-columns:minmax(0,1fr) minmax(260px,330px)!important;gap:clamp(24px,4vw,64px)!important;align-items:center!important}
#main .fit-label{margin:var(--r-s5) 0 var(--r-s2)!important;font-weight:750}
#main .fit-intro .fit-swatches{justify-content:flex-start!important;margin:0!important;max-width:none!important;gap:8px!important}
#main .fit-intro .fit-swatches button{min-height:40px;font-size:.88rem!important;padding:6px 12px 6px 6px!important}
#main .fit-phone{max-width:330px!important}
@media (max-width:860px){#main .fit-people{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible!important;margin:0!important;padding:0!important}#main .fit-people img{width:56px!important;height:56px!important}#main .fit-check{grid-template-columns:1fr!important}#main .fit-phone{justify-self:start!important;max-width:300px!important}}
#main .fit-intro > p{max-width:var(--r-lead)!important;margin:var(--r-s3) 0 var(--r-s5)!important}
#main .fit-people{gap:12px 8px!important}
#main .fit-people img{box-shadow:0 0 0 1.5px var(--r-line)!important}
#main .fit-people button[aria-pressed=true] img{box-shadow:0 0 0 3px var(--r-ink)!important;transform:none!important}
#main .fit-screen{box-shadow:0 0 0 2px var(--r-ink)!important;border-width:8px!important}
#main .fit-swatches button[aria-pressed=true]{box-shadow:none!important}
#main .room-soundboard > header{display:block!important;max-width:none;margin:0 0 var(--r-s5)}
#main .room-soundboard > header p{margin:var(--r-s3) 0 0!important;max-width:var(--r-lead)}
#main .room-soundboard :is(.soundboard-room,.soundboard-console){background:none!important;box-shadow:none!important}
#main .soundboard-room{border:0!important;padding:0!important;border-radius:0!important}
#main .soundboard-room figure img{border-radius:var(--r-radius);border:var(--stk-line)!important;box-shadow:none!important}
/* voice notes: the blue card with a white sticker edge, a gold offset and a yellow "Hear" button */
#main .room-voice:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){background:var(--r-blue)!important;color:#fff!important;border:5px solid #fff!important;border-radius:28px 28px 28px 10px!important;box-shadow:0 0 0 2.5px var(--r-ink),7px 8px 0 2px var(--r-gold)!important;padding:18px 22px 20px!important;margin:0!important}
#main .room-voice .voice-heading{display:flex;align-items:center;gap:12px}
#main .room-voice .voice-heading strong{flex:1;color:#fff!important;font:700 1.25rem/1.2 var(--r-display)!important;text-align:left}
#main .room-voice .gz-vn-face img{border:2.5px solid #fff!important}
#main .room-voice [data-voice-play]{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px!important;background:var(--r-gold)!important;color:var(--r-ink)!important;border:2.5px solid var(--r-ink)!important;border-radius:14px!important;box-shadow:3px 3px 0 var(--r-ink)!important;font:750 .98rem/1.2 var(--r-body)!important;cursor:pointer}
#main .room-voice [data-voice-play]:disabled{background:#fff!important;color:var(--r-ink)!important}
#main .room-voice .voice-track{position:relative}
#main .room-voice .voice-wave{fill:#fff!important}
#main .room-voice .voice-words{color:#fff!important;margin:8px 0 0!important;max-width:none;font-size:1.08rem!important;font-weight:600}
/* profiles: the voice note is the same blue card, inside the profile panel */
#main#main .ph-card .room-voice{background:var(--r-blue)!important;color:#fff!important;border:5px solid #fff!important;border-radius:28px 28px 28px 10px!important;box-shadow:0 0 0 2.5px var(--r-ink),6px 7px 0 2px var(--r-gold)!important;padding:16px 20px 18px!important}
#main#main .ph-card .room-voice :is(.voice-words,.voice-heading strong,p,blockquote){color:#fff!important}
#main#main .ph-card:has(> .room-voice){background:none!important;border:0!important;box-shadow:none!important;padding:0 6px 8px 0!important}
#main .voice-progress{background:rgba(255,220,82,.45)!important;border-right:0!important;border-radius:6px}
#main .room-voice.is-speaking .voice-progress{border-right:2px solid var(--r-ink)!important}
#main .room-invitation{margin-block:var(--r-gap) 0!important}
#main .room-invitation > div:last-child{gap:var(--r-s4)!important}
#main .crew-more-links{list-style:none;margin:var(--r-s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r-s4)}
#main .crew-more-links li{margin:0;max-width:none}
#main .crew-more-links a{display:flex;flex-direction:column;gap:4px;height:100%;box-sizing:border-box;padding:var(--r-s4) var(--r-s5);border:var(--stk-line);border-radius:var(--r-radius);text-decoration:none;color:var(--r-ink);box-shadow:6px 6px 0 var(--card-shadow,var(--r-blue))}
#main .crew-more-links b{color:var(--r-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-size:1.1rem}
#main .crew-more-links a:hover{background:var(--r-tint-quiet)}
@media (max-width:1000px){#main .cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:601px) and (max-width:900px){
  #main .crew-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #main .crew-card-grid > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - var(--r-s5) / 2)}
}
@media (max-width:860px){
  #main .crew-hero{grid-template-columns:1fr}
  #main .crew-hero-photo{order:0!important}
  #main .crew-more-links{grid-template-columns:1fr}
}
@media (max-width:900px){#main .cast-kids{grid-template-columns:1fr!important}}
@media (max-width:600px){
  #main .crew-card-grid{grid-template-columns:1fr!important}
  #main .cmp-grid{grid-template-columns:1fr}
  #main .cast-kid{grid-template-columns:96px 1fr!important}
}

/* ---------- Sticker book (/stickers/): see stickers.css ---------- */

/* ---------- Photos: a white sticker edge, a navy ring and a colored offset ---------- */
#main :is(.school-opening,.about-story,.trust-opening,.page-story-art,.involvement-opening,.soundboard-room,.room-photo-spread,.family-listening) figure:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){
  margin:0; padding:6px!important; background:#fff!important; border:var(--stk-line)!important; border-radius:24px!important;
  box-shadow:7px 7px 0 var(--card-shadow,var(--r-gold))!important; transform:none!important; overflow:hidden;
}
#main :is(.school-opening,.about-story,.trust-opening,.page-story-art,.involvement-opening,.soundboard-room,.room-photo-spread,.family-listening) figure:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) img{
  display:block; width:100%; height:auto; border:0!important; border-radius:14px!important; box-shadow:none!important; transform:none!important;
}
#main .school-opening figure{height:auto!important;aspect-ratio:auto!important;align-self:center}
#main :is(.school-opening,.about-story,.trust-opening,.involvement-opening) figure img{aspect-ratio:16/9;object-fit:cover;height:auto!important}
#main :is(.school-opening,.about-story,.trust-opening,.involvement-opening) figure figcaption{position:static!important;margin:8px 4px 2px!important;padding:0!important;background:none!important;color:var(--r-ink)!important;font-size:.9rem!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
#main .gz-moment figure{padding:0!important}

/* ---------- Page openings share one rhythm ---------- */
#main :is(.school-opening,.about-opening,.trust-opening,.involvement-opening,.series-opening){gap:clamp(24px,4vw,56px)!important;align-items:center}
#main :is(.school-opening,.about-opening,.trust-opening,.involvement-opening,.series-opening) h1{margin:0!important;font-size:clamp(2.3rem,5vw,4rem)!important;line-height:1.04!important;max-width:18ch}
#main :is(.school-opening,.about-opening,.trust-opening,.involvement-opening,.series-opening) h1 + p{margin-top:var(--r-s4)!important}
#main :is(.school-opening,.about-opening,.trust-opening,.involvement-opening,.series-opening) p{font-size:clamp(1.02rem,1.3vw,1.15rem);max-width:var(--r-lead)}
#main :is(.school-opening,.involvement-opening) h1 em,#main .trust-opening h1 em{font-style:normal;background:none!important;color:inherit!important}

/* ---------- Students ---------- */
#main .school-start{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start}
#main .school-start aside{background:var(--r-blue)!important;color:#fff!important;border:var(--stk-line)!important;box-shadow:7px 7px 0 var(--r-gold)!important;border-radius:var(--r-radius-lg)!important;padding:clamp(20px,3vw,28px)!important}
#main .school-start aside :is(h2,h3,p,li){color:#fff!important}
#main .school-start aside ol{margin:var(--r-s3) 0 var(--r-s4);padding-left:1.3em;display:grid;gap:6px}
#main .school-start .r-actions,#main .school-library .r-actions,#main .school-reading .r-actions{margin-top:var(--r-s4)}
@media (max-width:860px){#main .school-start{grid-template-columns:1fr}}

/* ---------- Get involved ---------- */
#main .involvement-index{background:var(--r-tint-quiet)!important;color:var(--r-ink)!important;border:0!important;box-shadow:none!important;border-radius:var(--r-radius)!important;padding:var(--r-s4)!important}
#main .involvement-index h2{color:var(--r-ink)!important;font-size:1.3rem!important;margin:0 0 var(--r-s3)!important}
#main .involvement-index > a:not(.browse-shelf){background:#fff!important;color:var(--r-ink)!important;border:1.5px solid var(--r-ink)!important;box-shadow:none!important;border-radius:12px!important;text-decoration:none!important}
#main .involvement-index > a:not(.browse-shelf) :is(b,span){color:var(--r-ink)!important}
#main .involvement-index > a[aria-current=true]{background:var(--r-ink)!important}
#main .involvement-index > a[aria-current=true] :is(b,span){color:#fff!important}
#main .involvement-index > a.browse-shelf{display:block;border:0!important;background:none!important;box-shadow:none!important;padding:var(--r-s3) 0 0!important;color:var(--r-blue)!important;text-decoration:underline!important;text-underline-offset:3px;font-weight:700}
#main .involvement-route{overflow:hidden}
#main .route-top{background:var(--r-tint-quiet)!important}
#main .ask-at-door{box-shadow:none!important;border:0!important;border-radius:var(--r-radius)!important}
#main .route-practice > p{font-weight:750;margin:0 0 var(--r-s2)!important}
#main .first-move h2{margin:0!important}
#main .first-move form{border:0!important;box-shadow:none!important}
#main .move-privacy{margin-top:var(--r-s3)!important}
#main .involvement-close{margin-top:var(--r-gap)!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
#main .involvement-close .r-actions{margin-top:var(--r-s4)}

/* ---------- About ---------- */
#main .platform-statements article{background:#fff!important;padding:var(--r-s5)!important}
#main .platform-statements{display:grid;gap:var(--r-s4)}
#main .audience-bridge .r-actions{margin-top:var(--r-s4)}
#main .name-story{background:var(--r-tint-quiet)!important;max-width:none!important}
#main .name-story h2{font-size:clamp(1.5rem,2.4vw,2rem)!important}

/* ---------- Figures anywhere: no tilt; only framed photos carry an offset ---------- */
#main figure:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *),
#main figure:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *) > :is(img,picture,video,div){transform:none!important}
#main .character-film-frame:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){transform:none!important}

/* ---------- Sources and standards ---------- */
#main .trust-reading nav{background:var(--r-tint-quiet)!important;border:0!important;box-shadow:none!important;border-radius:var(--r-radius)!important}
#main .trust-reading nav a{color:var(--r-ink)!important;border-color:var(--r-line)!important;font-weight:700}
#main .trust-reading nav a:hover{color:var(--r-blue)!important;text-decoration:underline!important}
#main .trust-reading article{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
#main .trust-reading article > section{padding-inline:0!important;border-color:var(--r-line)!important}
#main .trust-voice{box-shadow:none!important}

/* ---------- Series ---------- */
#main .series-case{display:block;text-decoration:none!important;color:var(--r-ink)!important}
#main .series-case strong{color:var(--r-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
#main .series-case span{display:block;margin-top:2px}

/* ---------- The shelf ---------- */
#main .shelf-search{background:var(--r-tint-quiet)!important;border:0!important;box-shadow:none!important;border-radius:var(--r-radius)!important}
#main .shelf-search label{font-weight:750}
#main .shelf-kind{color:var(--r-pink)!important;font-weight:750}
#main .shelf-entry h2 a{text-decoration:none!important;color:var(--r-ink)!important}

/* ---------- Crew profiles ---------- */
#main .ph-more{display:inline-flex;gap:3px;align-items:center}
#main .ph-more i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}
#main .ph-appbar a{display:inline-flex;align-items:center;color:inherit}
#main .ph-back a.r-link{display:inline-flex;background:#fff!important;padding:8px 16px!important;border-radius:999px!important;border:1.5px solid var(--r-ink)!important;box-shadow:none!important;min-height:40px}


/* ---------- Forms and the making studio (/create/, /ask/): house cards, navy fields ---------- */
#main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select):not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){border:2px solid var(--r-ink)!important;border-radius:12px!important;background:#fff;color:var(--r-ink)}
#main :is(input,textarea)::placeholder{color:#3d5577;opacity:1}
#main#main .writer-sheet{background:#fff!important;border:var(--stk-line)!important;border-radius:var(--r-radius-lg)!important;box-shadow:8px 8px 0 var(--r-blue)!important;padding:clamp(20px,3vw,32px)!important}
#main#main .writer-tools{background:var(--r-gold)!important;border:var(--stk-line)!important;border-radius:var(--r-radius-lg)!important;box-shadow:none!important;padding:clamp(20px,3vw,32px)!important}
#main#main .writer-tools details{border-color:rgba(20,43,70,.3)!important}
#main#main .writer-actions button:not(.primary-action){display:inline-flex;align-items:center;min-height:48px;padding:11px 20px!important;background:#fff!important;color:var(--r-ink)!important;border:2px solid var(--r-ink)!important;border-radius:14px!important;box-shadow:none!important;font:750 1rem/1.25 var(--r-body)!important;cursor:pointer}
#main#main .writer-actions button:not(.primary-action):hover{background:var(--r-tint-sun)!important}

/* ================= Round 3: page fixes found at 390, 820, 1280 and 1920 ================= */

/* En dash: the body font draws "–" as wide as an em dash, so "16–24" read as "16—24".
   A narrower dash from the system font is used for that one character only. */
@font-face{font-family:'Satoshi';src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Liberation Sans'),local('DejaVu Sans');unicode-range:U+2013;font-weight:300 900;font-style:normal;font-display:swap}

/* Footer invitation: the second link is a secondary button, not bare text */



/* Voice notes: a waveform at its natural shape on the left, not a tiny strip in the middle */
#main .room-voice .voice-track{width:240px;max-width:100%;height:44px!important;margin:8px 0 4px!important;overflow:hidden}
#main .room-voice .voice-wave{width:100%!important;height:100%!important;opacity:1}
#main .room-voice-compact .voice-track{height:40px!important}

/* ---------- Crew profiles ---------- */
/* the quiet band spans the page canvas, and its content lines up with every other page */
#main > .ph-stage{margin-inline:0!important}
#main .ph-card .room-voice:not(:is(.cs-page,.bk-page,.te-sheet,.ac-page) *){border:0!important;padding:0!important;border-radius:0!important;background:none!important}
#main .ph-side .ph-rings{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px 8px!important}
#main .ph-actions{flex-wrap:wrap}
#main .ph-actions .ph-btn.primary{flex:1 1 180px}
#main .ph-actions .ph-btn:not(.primary){flex:0 0 auto;padding-inline:18px}
#main .ph-back a.r-link{margin:0}
@media (max-width:900px){
  #main .ph-layout{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch}
  #main .ph-phone{max-width:440px;width:100%;justify-self:center}
  #main .ph-side{position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #main .ph-side > .ph-card:has(.room-voice),#main .ph-side > .ph-card:last-child{grid-column:1 / -1!important}
  #main .ph-side > .ph-card:has(.room-voice){order:1}
  #main .ph-side > .ph-card:last-child{order:2}
}
@media (max-width:600px){#main .ph-side{grid-template-columns:minmax(0,1fr)!important}#main .ph-side > .ph-card{grid-column:1!important}}
@media (max-width:480px){#main .ph-side .ph-ring img{width:50px;height:50px}#main .ph-side .ph-rings{gap:12px 4px!important}}

/* ---------- About ---------- */
#main .about-story p{line-height:1.6}

/* ---------- How learning works: the field notes use the row, two columns wide ---------- */
@media (min-width:900px){
  body[data-page="about-learning"] #main .school-reading{columns:2;column-gap:clamp(32px,4vw,56px)}
  body[data-page="about-learning"] #main .school-reading > :is(h2,.r-actions,a){column-span:all}
  body[data-page="about-learning"] #main .school-reading > h2:not(:first-child){margin-top:var(--r-s6)!important}
  body[data-page="about-learning"] #main .school-reading > h2 + p{margin-bottom:var(--r-s3)}
  body[data-page="about-learning"] #main .school-reading > :is(h3,p,ul){break-inside:avoid}
  body[data-page="about-learning"] #main .school-reading > h3{break-after:avoid;margin-top:0!important;padding-top:var(--r-s4)}
  body[data-page="about-learning"] #main .school-reading > h2 + h3{padding-top:var(--r-s3)}
  body[data-page="about-learning"] #main .school-reading > ul{margin-top:0!important}
  body[data-page="about-learning"] #main .school-reading :is(p,li){max-width:none}
}

/* ---------- Get involved ---------- */
#main .involvement-page > .gz-moment{margin-block:var(--r-gap) 0!important}
#main .involvement-opening{padding-top:0!important;margin-top:0!important}

@media (max-width:600px){#main .first-move{padding:18px 14px!important}#main .first-move form{padding:14px 12px!important}}

/* ---------- Sticker book ---------- */
#main .sk-ways .sk-note + .sk-way-list{margin-top:var(--r-s5)}

/* ---------- The shelf (index) ---------- */
/* a photo never sets the card's height: the words do, and the photo fills the space beside them */
#main .shelf-entry.has-image > .shelf-thumb{position:relative;min-height:200px}
#main .shelf-entry.has-image > .shelf-thumb img{position:absolute;inset:0}
#main .shelf-entry h2{font-size:clamp(1.2rem,1.6vw,1.4rem)!important;line-height:1.2!important}

/* ---------- The shelf (item pages) ---------- */
#main .shelf-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0 0 var(--r-s4)!important}
#main .shelf-breadcrumb a{color:var(--r-blue)!important;text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:650}
#main .shelf-breadcrumb a + a::before{content:"";display:inline-block;width:7px;height:7px;margin:0 12px 2px 10px;border-top:2px solid var(--r-ink);border-right:2px solid var(--r-ink);transform:rotate(45deg)}
#main .shelf-detail .shelf-sections{border:var(--stk-line)!important;border-radius:var(--r-radius)!important;box-shadow:none!important;background:#fff!important}
#main .shelf-detail .shelf-template{background:var(--r-tint-quiet)!important}
#main .shelf-detail .shelf-use{background:var(--r-tint-quiet)!important;border:0!important;box-shadow:none!important;border-radius:var(--r-radius)!important;transform:none!important}
#main .shelf-detail .shelf-use > a:not(.primary-action){display:inline-block;margin-top:var(--r-s3)}
#main .shelf-detail .shelf-notes{background:#fff!important;border:var(--stk-line)!important;border-radius:var(--r-radius)!important;box-shadow:none!important}
#main .shelf-detail .shelf-back{margin-bottom:0!important}
#main > .shelf-detail{margin-bottom:0!important;padding-bottom:0!important}

/* ---------- Series ---------- */
#main .series-page .format-artifact{background:var(--r-tint-quiet)!important;border:0!important;border-radius:var(--r-radius)!important;box-shadow:none!important;color:var(--r-ink)!important}
#main .series-page .format-artifact :is(p,strong,b){color:var(--r-ink)!important}
#main .series-page .terms-artifact,#main .series-page .statement-artifact{border-left:0!important}
#main .series-page .chat-artifact p{background:#fff!important;border:1px solid var(--r-line)!important;box-shadow:none!important}
#main .series-page .format-image{background:none!important;color:var(--r-ink)!important;border-radius:0!important;overflow:visible!important;text-decoration:none!important}
#main .series-page .format-image img{border-radius:20px;border:6px solid #fff;box-shadow:0 0 0 1.5px var(--r-ink);box-sizing:border-box}
#main .series-page .format-image > span{padding:12px 2px 0!important;font-size:1.1rem!important;color:var(--r-blue)!important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ---------- Sources and standards ---------- */
#main .made-with .made-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}
@media (min-width:700px){#main .made-with .made-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
#main .made-grid > div{padding:var(--r-s5)!important;background:#fff!important}

/* ---------- Methods ---------- */
#main .page-story-art figcaption{position:static!important;margin:10px 0 0!important;padding:0!important;background:none!important;color:var(--r-ink)!important;font-size:.9rem!important;border:0!important;border-radius:0!important}
#main .page-story-art img{border-radius:20px!important;border:6px solid #fff!important;box-shadow:0 0 0 1.5px var(--r-ink)!important;box-sizing:border-box}
#main .source-distinction table{border:var(--stk-line)!important;border-radius:var(--r-radius)!important;overflow:hidden;border-collapse:separate;border-spacing:0;box-shadow:none!important}
#main .source-distinction thead th{background:var(--r-ink)!important;color:#fff!important}
#main .source-distinction tbody th{background:var(--r-tint-quiet)!important}
#main .foundation-chapter{border:0!important;border-top:1px solid var(--r-line)!important;border-radius:0!important;box-shadow:none!important;background:none!important;padding-inline:0!important}
#main .foundation-role{background:var(--r-tint-quiet)!important;border:0!important;box-shadow:none!important;border-radius:var(--r-radius)!important;transform:none!important}
#main .foundation-field{font-weight:750;color:var(--r-pink)!important}
#main .story-callout{align-items:center!important;gap:clamp(24px,4vw,48px)!important}
#main .story-callout > div{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
#main .story-callout figure img{border-radius:20px!important;border:6px solid #fff!important;box-shadow:0 0 0 1.5px var(--r-ink)!important;box-sizing:border-box}
#main .companion-fieldnote figcaption{background:var(--r-tint-quiet)!important;color:var(--r-ink)!important;border:0!important;box-shadow:none!important;border-radius:0 0 var(--r-radius) var(--r-radius)!important}
#main .companion-fieldnote .cf-voice{margin-top:var(--r-s5)}
#main .companion-fieldnote figure img{border-radius:var(--r-radius) var(--r-radius) 0 0!important}

/* ---------- Scene library ---------- */
@media (min-width:861px){
  #main .media-opening{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,72px);align-items:end}
  #main .media-opening > :not(.media-search){grid-column:1}
  #main .media-opening > .media-search{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0!important}
}
#main .media-search{background:var(--r-tint-quiet)!important;border:0!important;border-radius:var(--r-radius)!important;padding:var(--r-s5)!important;box-shadow:none!important}
#main .media-search input{width:100%;box-sizing:border-box}
#main .media-filters button{padding:7px 12px!important;font-size:.9rem!important}
#main .media-contact h2{font:750 1.05rem/1.3 var(--r-body)!important;letter-spacing:0!important}

/* ---------- The experience page: every column on the page grid ---------- */
@media (min-width:801px){#main .casework-root{width:min(1240px,calc(100% - 80px));margin-inline:auto;box-sizing:border-box}}
#main .app-pocket{border-radius:var(--r-radius)!important;box-shadow:none!important;background:var(--r-tint-quiet)!important}

/* ---------- Scene pages (/moments/): the lead lines up with the middle of the title ---------- */
#main .studio-introduction{align-items:center!important}

/* ---------- Ask ---------- */
@media (min-width:861px){#main .school-question > aside{position:sticky;top:24px;align-self:start}}

/* ---------- 16. Print ---------- */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff!important;color:#000!important}
  body{padding:0!important}
  .site-canvas{max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;overflow:visible!important}
  .skip,.site-canvas > footer,.toast,.gz-unlock,.gz-earned,.gz-sticker,video,audio,iframe,button,.primary-action,.btn,.r-btn,.r-actions,.motion-toggle,.room-voice,.fit-swatches,.reel-shelf,.sb-reset,[data-no-print]{display:none!important}
  #main{margin:0!important;padding:0!important}
  #main *{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;transform:none!important;animation:none!important}
  #main .wrap{width:auto!important;max-width:none!important;margin-inline:0!important}
  #main > :is(section,div,aside).wrap{margin-block:0 18pt!important}
  #main :is(h1,h2,h3){break-after:avoid;page-break-after:avoid}
  #main :is(article,figure,.r-card,.r-quiet,.r-emphasis,a.case-card,.crew-card,.gm-card,.src-card,li,tr,blockquote,.ht-card){break-inside:avoid;page-break-inside:avoid}
  #main img{max-width:100%!important;max-height:9cm;width:auto!important;height:auto!important;object-fit:contain}
  #main a{text-decoration:underline}
  #main p a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
}

/* ---------- Release QA: alignment and breathing room ---------- */
.casework-masthead>span{margin-right:auto}
#main .working-claim textarea{padding:10px 14px!important}
/* No dot separators: meta rows use spacing instead */
#main#main .cs-meta > :is(a,span)::after,#main#main .cs-page .cs-label > span::after,#main#main .tg-label span::after,#main#main .tg-toc-cur::before{content:none;display:none}
#main#main .cs-meta > :is(a,span):not(:last-child),#main#main .cs-page .cs-label > span:not(:last-child),#main#main .tg-label span:not(:last-child){margin-right:1.1em}
#main#main .tg-toc-cur:not(:empty){margin-left:.8em}
.gz-story-head .gz-story-title:not(:empty)::before,.listening-spark.gz-notify .gz-when::before{content:none;display:none}
.gz-story-head .gz-story-title:not(:empty),.listening-spark.gz-notify .gz-when{margin-left:.7em}
/* Companion speech cards sit beside or below their picture, not on top of it */
#main .gz-moment{gap:clamp(20px,3vw,36px)}
#main .gz-moment-bubble{margin:0!important}
/* Teaching shelf and course notes: text keeps clear of borders */
#main .school-downloads article{padding:22px 24px 26px!important}
#main#main section.school-course-note{padding:18px 22px!important;gap:18px;align-items:center;border:var(--stk-line);border-radius:var(--r-radius-lg,22px)}
#main .school-course-note .school-download{align-self:center;height:auto}
#main .alignment-collection .case-course-options>details{padding:12px 20px!important}
@media (max-width:640px){
  #main .school-unit{grid-template-columns:1fr!important;gap:12px}
  #main .school-unit figure{grid-column:1!important}
  #main .school-unit-number{font-size:2.4rem}
}
/* Download buttons: text starts at the icon and wraps from the left */
#main .eh-btn-dl{text-align:left;justify-content:flex-start}
#main .shelf-response [data-quick-choice]{text-align:left;justify-content:flex-start}
/* Pink text labels use the deeper pink so small text passes contrast; pink shadows and fills stay bright */
html body .tg-label,html body .tg-step-grid dt,html body .tg-pg-lbl,html body .tg-stack td::before,html body .tg-rubric td::before,html body .gd-concepts span[lang],html body #main .eh-case-no,html body #main .eh-table--band tbody td::before,html body #main .eh-table--college tbody td::before,html body #main .eh-table--practice tbody td::before,html body #main .eh-bell-case{color:#c8154f!important}
/* Tablets: the about story stacks so the text is not a narrow column beside empty space */
@media (max-width:980px){#main .about-story{grid-template-columns:1fr!important}#main .about-story figure{max-width:560px}}
@media (min-width:601px) and (max-width:900px){#main .ph-side > .ph-card{grid-column:auto}}
/* invitation buttons keep one left edge when they wrap */