/* =============================================================
   AKU WORLD 2.0 · page shell + page layouts  ·  v2-pages.css
   Load after v2-tokens.css. Preview pages only (v2/).
   ============================================================= */

/* ---------- site shell ---------- */
.skip{ position:absolute; left:-999px; top:8px; z-index:60; background:#fff; color:#000; padding:10px 14px; }
.skip:focus{ left:8px; }
.site-top{ position:relative; z-index:30; display:flex; align-items:center; gap:28px; padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) 16px; color:var(--fg); }
.site-top--over{ position:absolute; top:0; left:0; right:0; color:#fff; }
.site-top__logo img{ width:60px; height:auto; display:block; }
.site-nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); margin-left:auto; }
.site-top .btn{ margin-left:4px; }
.menu{ display:none; margin-left:auto; }
.menu > summary{ list-style:none; cursor:pointer; min-height:44px; padding:10px 14px; border:2px solid currentColor; border-radius:var(--radius); font-family:var(--ui); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.02em; }
.menu > summary::-webkit-details-marker{ display:none; }
.menu[open] > summary{ background:var(--deep); color:#fff; border-color:var(--deep); }
.menu__panel{ position:absolute; left:0; right:0; top:100%; background:var(--paper); color:var(--deep); padding:10px var(--gut) 26px; border-bottom:2px solid var(--deep); display:flex; flex-direction:column; }
.menu__panel a{ padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--ui); font-weight:800; font-size:1.25rem; color:inherit; text-decoration:none; }
.menu__panel a[aria-current="page"]{ color:var(--galaxy); }
.menu__panel a:last-child{ border-bottom:0; }
@media (max-width:980px){ .site-nav{ display:none; } .menu{ display:block; } .site-top{ gap:12px; } .site-top > .btn{ order:2; margin-left:auto; } .menu{ order:3; margin-left:0; } }

.site-foot{ background:var(--night); color:#fff; padding:clamp(48px,7vw,88px) var(--gut) calc(32px + env(safe-area-inset-bottom,0px)); }
.site-foot__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--s6); }
.site-foot__logo{ width:72px; }
.site-foot h2{ margin:0 0 var(--s3); font-family:var(--ui); font-weight:800; font-size:var(--t-small); color:var(--starlight); }
.site-foot a{ display:block; padding:6px 0; color:#fff; text-decoration:none; font-size:var(--t-small); }
.site-foot a:hover{ text-decoration:underline; text-underline-offset:5px; }
.site-foot__line{ margin:var(--s4) 0 0; max-width:30ch; color:rgba(255,255,255,.78); font-size:var(--t-small); }
.site-foot__legal{ margin:var(--s7) 0 0; padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.2); font-size:13px; color:rgba(255,255,255,.72); }
@media (max-width:760px){ .site-foot__grid{ grid-template-columns:1fr 1fr; } .site-foot__grid > :first-child{ grid-column:1/-1; } }

/* ---------- shared blocks ---------- */
.block{ padding:clamp(56px,8.5vw,128px) var(--gut); }
.block--tight{ padding-block:clamp(40px,5.5vw,80px); }
.block__in{ max-width:1240px; margin-inline:auto; }
.eyebrow-row{ display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
.photo{ margin:0; }
.photo img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
.photo--tall{ aspect-ratio:4/5; } .photo--wide{ aspect-ratio:3/2; } .photo--crop{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); } .photo--crop img{ transform:scale(1.04); }
.photo figcaption{ margin-top:10px; font-size:13px; color:var(--muted); }
.facts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; font-family:var(--ui); font-weight:500; font-size:14px; color:var(--accent); }
.facts li{ padding:0 14px; border-left:1px solid currentColor; }
.facts li:first-child{ padding-left:0; border-left:0; }
.faq{ border-top:2px solid var(--rule); }
.faq details{ border-bottom:2px solid var(--rule); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:var(--s5); align-items:center; min-height:64px; padding:16px 0; font-family:var(--ui); font-weight:800; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.25; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary > span{ flex:1; min-width:0; }
.faq summary::after{ content:"+"; flex:none; font-family:var(--ui); font-weight:500; font-size:1.6rem; line-height:1; transition:transform var(--fast) var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--accent); }
.faq p{ margin:0 0 22px; max-width:var(--measure); color:var(--muted); }

/* ---------- BOOK PAGE (cinematic) ---------- */
.bk-hero{ position:relative; min-height:min(92svh, 900px); display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; overflow:hidden; padding:0 var(--gut) clamp(40px,7vh,84px); }
.bk-hero__art{ position:absolute; inset:0; z-index:-2; }
.bk-hero__art img{ width:100%; height:100%; object-fit:cover; object-position:22% 55%; }
.bk-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,10,18,.6) 0%, rgba(11,10,18,0) 20%), linear-gradient(0deg, rgba(11,10,18,.6) 0%, rgba(11,10,18,0) 32%),
             linear-gradient(90deg, rgba(11,10,18,.84) 0%, rgba(11,10,18,.64) 24%, rgba(11,10,18,.2) 46%, rgba(11,10,18,0) 60%); }
.bk-hero__copy{ max-width:720px; }
.bk-hero .hand{ margin-bottom:12px; }
.bk-hero .lede{ margin-top:26px; color:#fff; max-width:31ch; text-shadow:0 1px 16px rgba(0,0,0,.6); }
.bk-hero .facts{ margin-top:24px; }
.bk-hero .btn-row{ margin-top:32px; }
.bk-story{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,88px); align-items:center; }
.bk-story .prose{ margin-top:var(--s5); color:var(--muted); }
.bk-story__tag{ margin:var(--s5) 0 0; padding-left:var(--s4); border-left:4px solid var(--mars); font-family:var(--ui); font-weight:500; font-size:var(--t-h3); line-height:1.3; max-width:26ch; }
.bk-cover{ margin:0; display:flex; justify-content:center; padding:0 22px 26px 0; }
.bk-cover .book__cover{ width:min(100%, 400px); box-shadow:18px 22px 0 var(--mars); }
.bk-themes{ list-style:none; margin:var(--s6) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--ui); font-weight:800; font-size:var(--t-small); text-transform:uppercase; letter-spacing:.02em; color:var(--starlight); }
.bk-quote{ background:var(--starlight); color:var(--deep); text-align:left; }
.bk-quote .quote p{ font-family:var(--ui); font-weight:800; font-size:clamp(1.6rem,3.6vw,3.2rem); line-height:1.08; letter-spacing:-.018em; max-width:20ch; }
.bk-quote .quote cite{ font-family:var(--ui); font-weight:500; font-size:1rem; color:var(--mars-ink); }
.bk-crew{ position:relative; isolation:isolate; min-height:min(78svh,760px); display:flex; align-items:flex-end; padding:0 var(--gut) clamp(36px,6vh,72px); overflow:hidden; }
.bk-crew picture{ position:absolute; inset:0; z-index:-2; } .bk-crew img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.bk-crew::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(11,10,18,.88) 0%, rgba(11,10,18,.3) 42%, rgba(11,10,18,0) 64%); }
.bk-facts{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,5vw,80px); }
/* desktop: one even grid of twelve facts. phones: three labelled groups. */
.bk-groups{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 28px; }
.bk-group, .bk-dl{ display:contents; margin:0; }
.bk-group__h{ display:none; }
.bk-dl dt{ font-family:var(--ui); font-weight:500; font-size:13px; color:var(--muted); }
.bk-dl dd{ margin:4px 0 0; font-family:var(--ui); font-weight:800; font-size:1.05rem; line-height:1.25; overflow-wrap:anywhere; }
.bk-next{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(28px,5vw,80px); align-items:center; }
.bk-close{ text-align:left; }
.bk-close .btn-row{ margin-top:var(--s6); }
.bk-close--art{ position:relative; isolation:isolate; overflow:hidden; min-height:min(70svh,640px); display:flex; align-items:flex-end; }
.bk-close--art .block__in{ width:100%; }
.bk-close__art{ position:absolute; inset:0; z-index:-2; }
.bk-close__art img{ width:100%; height:100%; object-fit:cover; }
.bk-close--art::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(11,10,18,.9) 0%, rgba(11,10,18,.45) 45%, rgba(11,10,18,.1) 75%), linear-gradient(90deg, rgba(11,10,18,.6) 0%, rgba(11,10,18,0) 60%); }
.bk-crew img{ object-position:30% 50%; }

/* ---------- EDUCATORS (editorial, Agrandir-led) ---------- */
.ed-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:end; padding-top:clamp(24px,4vw,56px); }
.ed-hero .lede{ margin-top:var(--s5); max-width:34ch; }
.ed-hero .btn-row{ margin-top:var(--s6); }
.ed-visit-steps{ margin-top:clamp(36px,5vw,64px); }
.cl-ways{ list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); }
.cl-ways li{ padding-top:var(--s4); border-top:2px solid var(--deep); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.cl-ways p{ margin:0 0 var(--s3); color:var(--muted); max-width:34ch; flex:1; }
.cl-empty[hidden]{ display:none; }
.ed-jump{ list-style:none; margin:clamp(36px,5vw,64px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--deep); }
.ed-jump a{ display:block; padding:16px 16px 4px 0; font-family:var(--ui); font-weight:800; font-size:1rem; line-height:1.2; color:inherit; text-decoration:none; }
.ed-jump a span{ display:block; margin-bottom:6px; font-weight:500; font-size:13px; color:var(--muted); }
.ed-jump a:hover{ color:var(--galaxy); }
.ed-sec__head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(28px,4vw,56px); }
.ed-sec__head .lede{ max-width:36ch; }
.ed-n{ font-family:var(--ui); font-weight:500; font-size:var(--t-small); color:var(--accent); margin:0 0 10px; }
.ed-cats{ list-style:none; margin:0; padding:0; border-top:2px solid var(--deep); }
.ed-cats li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.ed-cats b{ font-family:var(--ui); font-weight:800; font-size:clamp(1.05rem,1.5vw,1.25rem); }
.ed-cats span{ font-size:var(--t-small); color:var(--muted); white-space:nowrap; }
.ed-res{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:start; }
.ed-sheets{ position:relative; aspect-ratio:5/4; }
.ed-sheets img{ position:absolute; width:46%; height:auto; background:#fff; border-radius:2px; box-shadow:0 18px 40px -18px rgba(34,34,34,.5); }
.ed-sheets img:nth-child(1){ left:2%; top:8%; transform:rotate(-6deg); }
.ed-sheets img:nth-child(2){ left:28%; top:0; transform:rotate(3deg); z-index:1; }
.ed-sheets img:nth-child(3){ right:0; top:14%; transform:rotate(8deg); }
.ed-quotes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px) clamp(28px,5vw,80px); margin-top:clamp(40px,6vw,88px); }
.ed-quotes .quote p{ font-size:clamp(1.15rem,1.8vw,1.5rem); }
.ed-quotes .quote{ padding-top:var(--s4); border-top:2px solid var(--deep); }
.ed-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,80px); }
.ed-duo__item .photo{ margin-bottom:var(--s5); }
.ed-duo__item p{ margin:var(--s3) 0 var(--s5); color:var(--muted); max-width:36ch; }
.ed-close{ text-align:left; }

/* ---------- CLASSROOMS ---------- */
.cl-hero{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,72px); align-items:center; padding:clamp(120px,14vw,170px) var(--gut) clamp(48px,7vw,96px); }
.cl-hero .lede{ margin-top:var(--s5); max-width:36ch; }
.cl-hero .btn-row{ margin-top:var(--s6); }
.cl-proofline{ display:flex; gap:18px; align-items:center; margin-top:clamp(28px,4vw,48px); max-width:520px; }
.cl-proofline img{ width:64px; height:auto; flex:none; border-radius:2px; }
.cl-proofline p{ margin:0; font-size:var(--t-small); color:var(--muted); }
.cl-steps{ list-style:none; margin:clamp(28px,4vw,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); counter-reset:step; }
.cl-steps li{ counter-increment:step; padding-top:var(--s4); border-top:2px solid var(--deep); }
.cl-steps li::before{ content:counter(step); display:block; font-family:var(--ui); font-weight:800; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; color:var(--galaxy); margin-bottom:var(--s3); }
.cl-steps p{ margin:var(--s3) 0 0; color:var(--muted); max-width:34ch; }

/* ---------- phones ---------- */
@media (max-width:760px){
  .bk-hero{ min-height:0; padding:0 20px 36px; justify-content:flex-start; }
  .bk-hero__art{ position:relative; inset:auto; z-index:0; height:min(133.34vw, 60svh); margin:0 -20px; }
  .bk-hero__art img{ object-position:50% 50%; }
  .bk-hero::before{ inset:0 0 auto 0; height:min(133.34vw, 60svh); z-index:1; background:linear-gradient(180deg, rgba(11,10,18,.62) 0%, rgba(11,10,18,0) 20%), linear-gradient(0deg, var(--night) 0%, rgba(11,10,18,.7) 12%, rgba(11,10,18,0) 34%); }
  .bk-hero__copy{ position:relative; z-index:2; margin-top:-58px; }
  .bk-hero .lede{ margin-top:14px; text-shadow:none; }
  .bk-hero .facts{ margin-top:14px; font-size:12.5px; flex-wrap:nowrap; white-space:nowrap; } .bk-hero .facts li{ padding:0 10px; } .bk-hero .facts li:nth-child(3){ display:none; }
  .bk-hero .btn-row{ margin-top:20px; }
  .bk-story, .bk-facts, .bk-next, .ed-hero, .ed-sec__head, .ed-res, .ed-duo, .cl-hero{ grid-template-columns:1fr; }
  .bk-story > .photo{ order:-1; }
  .bk-groups{ display:block; }
  .bk-group{ display:block; margin-top:var(--s6); } .bk-group:first-child{ margin-top:var(--s4); }
  .bk-group__h{ display:block; margin:0 0 6px; font-family:var(--ui); font-weight:800; font-size:1.25rem; line-height:1.15; letter-spacing:-.01em; }
  .bk-dl{ display:block; border-top:2px solid var(--deep); }
  .bk-dl > div{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:12px 0; border-bottom:1px solid var(--rule); }
  .bk-dl dt{ font-family:var(--body); font-weight:400; font-size:15px; color:var(--muted); flex:none; }
  .bk-dl dd{ margin:0; text-align:right; font-family:var(--ui); font-weight:800; font-size:1rem; line-height:1.3; }
  .bk-cover{ order:-1; padding:8px 18px 22px 0; } .bk-cover .book__cover{ width:min(70vw,300px); }
  .cl-ways{ grid-template-columns:1fr; gap:var(--s6); }
  .bk-crew{ min-height:70svh; }
  .ed-hero > .photo{ order:-1; aspect-ratio:4/3; }
  .ed-jump{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ed-jump a{ padding:14px 12px 10px 0; border-bottom:1px solid var(--rule); }
  .ed-quotes{ grid-template-columns:1fr; }
  .ed-sheets{ margin-top:var(--s4); }
  .cl-hero{ padding-top:104px; }
  .cl-hero > .photo{ aspect-ratio:4/3; }
  .cl-steps{ grid-template-columns:1fr; gap:var(--s6); }
}

/* =============================================================
   Stage 4C additions: review marks, form helpers, and the layouts
   for Home, Books, Journey to Ibra, About, Activities and 404.
   Built from the approved system. No new visual language.
   ============================================================= */

/* ---------- review marks (preview only) ----------
   Anything still waiting on a fact check (V) or on Micah's sign-off (M) carries data-pending.
   Normal view: shown as drafted. ?review=1 outlines each one. ?public=1 hides them all,
   which is what could go live today. */
html.review [data-pending]{ outline:2px dashed var(--mars); outline-offset:4px; }
html.review [data-pending="V"]{ outline-color:var(--galaxy); }
html.review .mode-cinematic [data-pending]{ outline-color:var(--starlight); }
html.public [data-pending]{ display:none !important; }

/* ---------- form helpers ---------- */
.form-req{ margin:0 0 14px; font-family:var(--ui); font-weight:500; font-size:var(--t-small); color:var(--deep); }
.edu-help{ display:block; margin-top:6px; font-size:13px; line-height:1.35; color:var(--muted-ink); font-style:normal; }
.field-error{ margin:6px 0 0; font-size:var(--t-small); line-height:1.35; color:var(--error); font-family:var(--body); }
.field-error::before{ content:"! "; font-weight:700; }
.edu-form__line{ margin:14px 0 0; font-size:var(--t-small); line-height:1.45; color:var(--muted-ink); }
.note-line{ margin:var(--s5) 0 0; font-size:var(--t-small); color:rgba(255,255,255,.78); }

/* ---------- shared ---------- */
.block--paper{ background:var(--paper); color:var(--deep); }
.block--star{ background:var(--starlight); color:var(--deep); }
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,88px); align-items:start; }
.center-y{ align-items:center; }
.support{ margin-top:clamp(28px,4vw,48px); padding:clamp(20px,3vw,32px); border:2px solid var(--deep); border-radius:var(--radius); max-width:720px; }
.support p{ margin:var(--s3) 0 0; color:var(--muted); max-width:56ch; }
.detail-list{ list-style:none; margin:var(--s5) 0 0; padding:0; border-top:2px solid var(--deep); max-width:560px; }
.detail-list li{ padding:12px 0; border-bottom:1px solid var(--rule); }
.said{ margin:var(--s6) 0 0; padding-left:var(--s5); border-left:4px solid var(--galaxy); max-width:60ch; }
.said p{ margin:0; font-family:var(--ui); font-weight:500; font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.35; }
.said cite{ display:block; margin-top:10px; font-style:normal; font-size:var(--t-small); color:var(--muted); }

/* ---------- HOME ---------- */
.hm-meet{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,88px); align-items:start; }
.hm-meet p{ margin:0 0 1em; font-size:var(--t-lede); line-height:1.5; max-width:46ch; }
.hm-books{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,6vw,96px); margin-top:clamp(32px,5vw,64px); }
.hm-books .book{ align-items:flex-end; }
.hm-books p{ margin:0; max-width:30ch; color:var(--muted); }
.hm-worlds{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.hm-world{ position:relative; isolation:isolate; min-height:min(64svh,620px); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,4vw,56px) var(--gut); color:#fff; overflow:hidden; }
.hm-world img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.hm-world::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(11,10,18,.9) 0%, rgba(11,10,18,.35) 48%, rgba(11,10,18,0) 72%); }
.hm-world p{ margin:12px 0 0; max-width:34ch; font-size:var(--t-lede); line-height:1.45; }
.hm-origin{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,88px); align-items:center; }
.hm-origin__q{ font-family:var(--ui); font-weight:800; font-size:clamp(2.1rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.hm-origin p{ margin:var(--s5) 0 0; font-size:var(--t-lede); line-height:1.5; max-width:40ch; }
.hm-origin .sig{ margin-top:var(--s4); font-family:var(--hand); font-size:1.9rem; color:var(--galaxy); }
.hm-more{ list-style:none; margin:clamp(28px,4vw,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px) clamp(28px,5vw,88px); }
.hm-more li{ padding-top:var(--s4); border-top:2px solid var(--deep); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.hm-more p{ margin:0 0 var(--s3); color:var(--muted); max-width:40ch; flex:1; }
.hm-close{ position:relative; isolation:isolate; overflow:hidden; min-height:min(64svh,600px); display:flex; align-items:flex-end; }

/* ---------- BOOKS ---------- */
.bx-head .lede{ margin-top:var(--s5); max-width:52ch; }
.bx-book{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,5vw,88px); align-items:center; padding-block:clamp(40px,6vw,88px); border-top:2px solid var(--rule); }
.bx-book__cover{ display:flex; justify-content:center; padding:0 22px 26px 0; }
.bx-book__cover .book__cover{ width:min(100%,340px); box-shadow:18px 22px 0 var(--world); }
.bx-book p{ max-width:52ch; }
.bx-proof{ margin:var(--s4) 0 0; font-family:var(--ui); font-weight:500; font-size:var(--t-small); color:var(--accent); }
.crew{ list-style:none; margin:clamp(24px,4vw,48px) 0 0; padding:0; border-top:2px solid var(--deep); }
.crew li{ display:grid; grid-template-columns:minmax(120px,2fr) minmax(0,10fr); gap:var(--s5); padding:16px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.crew b{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:1.25rem; }
.crew span{ font-size:var(--t-lede); line-height:1.4; }

/* ---------- JOURNEY TO IBRA ---------- */
.ji-beats{ list-style:none; margin:0; padding:0; max-width:900px; }
.ji-beats li{ padding:clamp(18px,2.6vw,30px) 0; border-bottom:1px solid var(--rule); font-family:var(--ui); font-weight:500; font-size:clamp(1.2rem,2.3vw,1.9rem); line-height:1.25; text-wrap:balance; }
.ji-beats li:first-child{ border-top:2px solid var(--rule); }
.cards{ display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x proximity; padding:6px var(--gut) 22px; margin:clamp(24px,4vw,48px) calc(-1 * var(--gut)) 0; -webkit-overflow-scrolling:touch; }
.card{ flex:0 0 clamp(240px,24vw,300px); scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; }
.card__art{ aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:#16141F; display:grid; place-items:center; }
.card__art img{ width:100%; height:100%; object-fit:cover; }
.card__art--none{ background:var(--galaxy); color:#fff; font-family:var(--hand); font-size:2.4rem; }
.card__role{ font-family:var(--ui); font-weight:500; font-size:13px; color:var(--starlight); }
.card__name{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:1.25rem; line-height:1; }
.card p{ margin:0; font-size:var(--t-small); line-height:1.45; color:rgba(255,255,255,.82); }
.card q{ font-family:var(--ui); font-weight:500; font-size:var(--t-small); color:#fff; quotes:"\201C" "\201D"; }
.cards:focus-visible{ outline:3px solid var(--starlight); outline-offset:4px; }

/* ---------- ABOUT ---------- */
.ab-open{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,88px); align-items:end; padding-top:clamp(24px,4vw,56px); }
.ab-story{ max-width:680px; }
.ab-story p{ margin:0 0 1.05em; font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.6; }
.ab-sec{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,5vw,88px); padding-block:clamp(40px,6vw,88px); border-top:2px solid var(--rule); align-items:start; }
.ab-sec figure{ margin:var(--s5) 0 0; }
.ab-sec figure img{ width:100%; height:auto; border-radius:var(--radius); }
.ab-sec figcaption, .ab-open figcaption{ margin-top:10px; font-size:13px; color:var(--muted); }
.ab-pull{ margin:var(--s6) 0 0; font-family:var(--ui); font-weight:800; font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.1; letter-spacing:-.018em; max-width:20ch; }
.ab-pull cite{ display:block; margin-top:12px; font-family:var(--ui); font-weight:500; font-style:normal; font-size:var(--t-small); letter-spacing:0; color:var(--muted); }

/* ---------- ACTIVITIES ---------- */
.act-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,4vw,40px); }
.act-filters button{ appearance:none; cursor:pointer; min-height:44px; padding:10px 16px; border:2px solid var(--deep); border-radius:var(--radius); background:transparent; color:var(--deep); font-family:var(--ui); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.02em; }
.act-filters button[aria-pressed="true"]{ background:var(--deep); color:#fff; }
.act-filters button:focus-visible{ outline:3px solid var(--galaxy); outline-offset:3px; }
.act-kind{ padding-block:clamp(36px,5vw,72px); border-top:2px solid var(--deep); }
.act-kind[hidden]{ display:none; }
.act-kind__head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(16px,4vw,64px); align-items:end; }
.act-kind__head p{ margin:0; color:var(--muted); max-width:44ch; }
.act-note{ margin:10px 0 0; font-family:var(--ui); font-weight:500; font-size:13px; color:var(--mars-ink); }
.act-grid{ list-style:none; margin:clamp(20px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(14px,2vw,26px); }
.act-grid a{ display:block; color:inherit; text-decoration:none; }
.act-grid img{ width:100%; height:auto; aspect-ratio:17/22; object-fit:cover; background:#fff; border-radius:2px; box-shadow:0 10px 24px -14px rgba(34,34,34,.55); transition:transform var(--fast) var(--ease); }
.act-grid a:hover img{ transform:translateY(-3px) rotate(-1deg); }
.act-grid a:focus-visible{ outline:3px solid var(--galaxy); outline-offset:4px; }
.act-grid span{ display:block; margin-top:8px; font-family:var(--ui); font-weight:800; font-size:13px; line-height:1.25; }
.act-answers summary{ cursor:pointer; font-family:var(--ui); font-weight:800; font-size:1.1rem; min-height:44px; display:flex; align-items:center; }
.act-answers div{ columns:2 320px; column-gap:48px; margin-top:var(--s4); font-size:var(--t-small); line-height:1.5; }
.act-answers p{ margin:0 0 .6em; break-inside:avoid; }
.act-answers b{ font-family:var(--ui); }

/* ---------- 404 ---------- */
.nf{ position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--gut) clamp(48px,9vh,110px); overflow:hidden; }
.nf img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.nf::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(11,10,18,.92) 0%, rgba(11,10,18,.5) 46%, rgba(11,10,18,.25) 100%); }
.nf .lede{ margin-top:var(--s5); color:#fff; }
.nf .btn-row{ margin-top:var(--s6); }

@media (max-width:760px){
  .two, .hm-meet, .hm-books, .hm-worlds, .hm-origin, .hm-more, .bx-book, .ab-open, .ab-sec, .act-kind__head{ grid-template-columns:1fr; }
  .hm-world{ min-height:56svh; }
  .hm-origin > figure{ order:-1; }
  .bx-book__cover{ justify-content:flex-start; padding:0 18px 22px 6px; } .bx-book__cover .book__cover{ width:min(64vw,280px); }
  .crew li{ grid-template-columns:1fr; gap:4px; }
  .ab-open > figure{ order:-1; max-width:300px; }
  .card{ flex-basis:72vw; }
  .act-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-books .book{ margin-bottom:var(--s4); align-items:flex-start; }
}


/* =============================================================
   Stage 4C final refinements
   ============================================================= */
/* ---------- phone menu: MENU becomes CLOSE ---------- */
.menu__close{ display:none; }
.menu[open] .menu__open{ display:none; } .menu[open] .menu__close{ display:inline; }
html.menu-open{ overflow:hidden; }

/* ---------- Journey to Ibra: flip cards ---------- */
.cards{ list-style:none; }
.cards__how{ margin:var(--s3) 0 0; font-size:var(--t-small); color:rgba(255,255,255,.78); }
.card{ flex:0 0 clamp(250px,24vw,300px); gap:0; }
.card__btn{ appearance:none; display:block; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; position:relative; aspect-ratio:3/4.5; perspective:1400px; border-radius:var(--radius); }
.card__btn:focus-visible{ outline:3px solid var(--starlight); outline-offset:4px; }
.card__face{ position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:var(--radius); backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .6s var(--ease); overflow:hidden; }
.card__front{ background:#16141F; border:1px solid rgba(255,255,255,.22); }
.card__back{ background:var(--starlight); color:var(--deep); transform:rotateY(180deg); justify-content:center; gap:12px; padding:22px; }
.card.is-flipped .card__front{ transform:rotateY(-180deg); }
.card.is-flipped .card__back{ transform:rotateY(0deg); }
.card__front .card__art{ flex:1; min-height:0; aspect-ratio:auto; border-radius:2px; background:#fff; display:block; overflow:hidden; }
.card__front .card__art img{ width:100%; height:100%; object-fit:cover; }
.card__front .card__art--none{ display:grid; place-items:center; background:var(--galaxy); color:#fff; font-family:var(--hand); font-size:2.2rem; }
.card__name{ display:block; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:1.3rem; line-height:1; }
.card__role{ display:block; font-family:var(--ui); font-weight:500; font-size:13px; color:var(--starlight); }
.card__back .card__role{ color:var(--mars-ink); }
.card__line{ display:block; font-size:1.02rem; line-height:1.45; }
.card__quote{ display:block; font-family:var(--ui); font-weight:800; font-size:1.02rem; line-height:1.3; }
.card__hint{ display:block; margin-top:auto; font-family:var(--ui); font-weight:500; font-size:12px; opacity:.75; }
.card__back .card__hint{ margin-top:6px; }
.cards__nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s3); }
.cards__nav[hidden]{ display:none; }
.cards__count{ font-family:var(--ui); font-weight:800; font-size:var(--t-small); }
.cards__nav .btn[disabled]{ background:transparent; color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.3); }
/* no script: both sides are simply shown, one under the other */
html:not(.js) .card__btn{ aspect-ratio:auto; } html:not(.js) .card__face{ position:static; transform:none; backface-visibility:visible; }
@media (max-width:760px){
  .cards{ scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; }
  .card{ flex-basis:82vw; scroll-snap-align:center; }
  .card__line, .card__quote{ font-size:1.1rem; }
  .card__name{ font-size:1.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .card__face{ transition:opacity .01s; transform:none !important; backface-visibility:visible; }
  .card__back{ opacity:0; visibility:hidden; } .card.is-flipped .card__back{ opacity:1; visibility:visible; } .card.is-flipped .card__front{ opacity:0; visibility:hidden; }
}

/* privacy page */
.legal .block__in{ max-width:760px; }
.legal h1{ margin:0 0 var(--s3); }
.legal__date{ color:var(--muted); font-size:var(--t-small); margin:0 0 var(--s6); }
.legal h2{ margin:var(--s7) 0 var(--s3); font-family:var(--ui); font-weight:800; font-size:1.35rem; line-height:1.2; }
.legal p, .legal li{ font-size:var(--t-body); line-height:1.65; max-width:68ch; }
.legal ul{ padding-left:1.2em; }
.legal a{ color:var(--galaxy); }