/* network-surface.css — load AFTER network.css.
   1) www hero: featured poster rail (replaces the prose "scene" box)
   2) edu surface: Ink & Ember retheme via html[data-surface="edu"]  */

/* ── 1. Featured poster rail (www) ───────────────────────────── */
.nw-rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.nw-rail-head em{font:italic 400 13px/1 var(--nw-editorial);color:var(--nw-mute)}
html:not([data-surface="edu"]) .nw-hero-rail{width:100%;max-width:560px;justify-self:end}
@media (max-width:1100px){html:not([data-surface="edu"]) .nw-hero-rail{justify-self:start}}
.nw-poster{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--nw-rule);background:var(--nw-stage2);text-decoration:none;color:var(--nw-chalk)}
.nw-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.nw-poster:hover img{transform:scale(1.03)}
.nw-poster-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 35%,rgba(10,10,10,0) 65%)}
.nw-poster-top{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center}
.nw-poster-genre{font:500 10px/1 var(--nw-mono);letter-spacing:2px;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.nw-chip-solid{background:rgba(10,10,10,.6)}
.nw-poster-info{position:absolute;left:22px;right:22px;bottom:22px}
.nw-poster-title{font:400 52px/.9 var(--nw-display);letter-spacing:-1px;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.nw-poster-tag{font:italic 400 16px/1.4 var(--nw-editorial);color:var(--nw-chalk2);margin:12px 0 0;max-width:34ch;text-wrap:pretty}
.nw-poster-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid rgba(244,241,234,.18)}
.nw-poster-by{font:400 10px/1 var(--nw-mono);letter-spacing:1.5px;color:var(--nw-mute);text-transform:uppercase}
.nw-poster-go{font:400 14px/1 var(--nw-display);letter-spacing:1px;color:var(--nw-amber)}
.nw-rail-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.nw-rail-strip a{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--nw-rule);display:block}
.nw-rail-strip img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.nw-rail-strip a:hover img{filter:none}
.nw-rail-strip span{position:absolute;left:6px;right:6px;bottom:6px;font:400 11px/1 var(--nw-display);letter-spacing:.3px;color:var(--nw-chalk);text-shadow:0 1px 4px #000}
.nw-ticker-xnav{margin-left:auto;color:var(--nw-chalk2);text-decoration:none}
@media (max-width:1100px){.nw-ticker-xnav{margin-left:0}}
.nw-ticker-xnav:hover{color:var(--nw-amber)}
.nw-hero-note{font:400 12px/1.4 var(--nw-grotesk);color:var(--nw-mute);align-self:center}
.nw-card-link{text-decoration:none;color:inherit;display:block}
.nw-card-badge{position:absolute;top:12px;right:12px;z-index:2;font:600 11px/1 var(--nw-grotesk);letter-spacing:.06em;color:var(--nw-stage);background:var(--nw-amber);border-radius:999px;padding:4px 9px}
@media (max-width:720px){.nw-rail-strip{grid-template-columns:repeat(4,1fr)}.nw-poster-title{font-size:38px}}

/* beat card (edu hero rail) — general structure, not edu-specific styling */
.nw-beatcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--nw-rule);border-radius:12px;overflow:hidden;background:var(--nw-stage2);aspect-ratio:4/3;text-decoration:none;color:inherit}
.nw-beatcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nw-beatcard-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,18,21,.96) 0%,rgba(16,18,21,.7) 45%,rgba(16,18,21,.15) 100%)}
.nw-beatcard-txt{position:relative;padding:22px 24px}
.nw-beatcard-cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--nw-mute)}
.nw-beatcard-title{font:400 26px/1.15 var(--nw-editorial);color:#fff;margin-top:6px}
.nw-beatcard-when{font-size:12px;color:var(--nw-mute);margin-top:4px}
.nw-beatcard-obj{margin-top:14px;padding-top:12px;border-top:1px solid rgba(93,102,115,.6)}
.nw-beatcard-k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--nw-amber)}
.nw-beatcard-obj ul{list-style:none;margin:6px 0 0;padding:0}
.nw-beatcard-obj li{display:flex;gap:10px;font-size:13.5px;color:#e7e8ec;margin-top:6px;line-height:1.45}
.nw-beatcard-obj li::before{content:"▸";color:var(--nw-amber);flex:none}
.nw-footer-xnav{color:var(--nw-chalk2);text-decoration:none}
.nw-footer-xnav:hover{color:var(--nw-amber)}

/* ── 2. Edu surface retheme — Ink & Ember ────────────────────── */
/* Full retheme, not a subset — an earlier draft of this file kept only the token
   block and deferred the rest as "polish". It wasn't: .nw-hero-h1-edu (the edu
   homepage headline, a full sentence) had no rule outside this block and fell back
   to the base 170px/Anton poster-title face, overlapping across multiple lines.
   Also fixes .nw-how-grid-4 (was laying 4 steps into base .nw-how-grid's 3 columns)
   and .nw-how-note (was a bare unstyled paragraph). */
html[data-surface="edu"]{
  --nw-stage:#101215;--nw-stage2:#1e2229;--nw-ink:#1e2229;
  --nw-chalk:#ffffff;--nw-chalk2:#e7e8ec;--nw-mute:#8b93a0;--nw-rule:#5d6673;
  --nw-rouge:#e0913a;--nw-rouge-dk:#c2782b;--nw-amber:#e0913a;
  /* faculty-facing type: quieter than the consumer display face */
  --nw-display:"Inter Tight","Inter",system-ui,sans-serif;
  --nw-editorial:ui-serif,Georgia,"Noto Serif",serif;
}
html[data-surface="edu"] body{font-size:14px;line-height:1.55}
html[data-surface="edu"] .nw-wordmark{font-size:28px;letter-spacing:-.5px;font-weight:700}
html[data-surface="edu"] .nw-wordmark-sub{font:600 11px/1 var(--nw-grotesk);letter-spacing:.18em;text-transform:uppercase;color:var(--nw-amber);margin-left:12px;vertical-align:middle}
html[data-surface="edu"] .nw-nav-links{font:600 13px/1 var(--nw-grotesk);letter-spacing:0}
html[data-surface="edu"] .nw-nav-links .nw-btn,html[data-surface="edu"] .nw-btn{font:600 13px/1 var(--nw-grotesk);letter-spacing:0;border-radius:6px;padding:10px 16px;text-transform:none}
html[data-surface="edu"] .nw-btn-chalk{background:var(--nw-amber);color:#15171a}
html[data-surface="edu"] .nw-btn-chalk:hover{background:#c2782b}
html[data-surface="edu"] .nw-btn-ghost{border-color:var(--nw-rule);color:var(--nw-chalk)}
html[data-surface="edu"] .nw-btn-ghost:hover{border-color:var(--nw-amber);color:var(--nw-amber)}
html[data-surface="edu"] .nw-chip{border-radius:999px;letter-spacing:.14em}
html[data-surface="edu"] .nw-hero{padding:72px 40px 64px}
html[data-surface="edu"] .nw-hero-wash{background:radial-gradient(ellipse 45% 60% at 22% 50%,rgba(224,145,58,.12),transparent 65%)}
html[data-surface="edu"] .nw-hero-grid{grid-template-columns:1.1fr 1fr;align-items:center}
html[data-surface="edu"] .nw-hero-h1-edu{font:700 44px/1.1 var(--nw-grotesk);letter-spacing:-.5px;margin-top:18px;text-transform:none}
html[data-surface="edu"] .nw-hero-lede{font-size:17px;color:#b3bac6}
html[data-surface="edu"] .nw-h2,html[data-surface="edu"] .nw-page-hero-h1,html[data-surface="edu"] .nw-realm-hero-h1,html[data-surface="edu"] .nw-page-cta-h,html[data-surface="edu"] .nw-realm-section-h,html[data-surface="edu"] .nw-how-step-h{font-family:var(--nw-grotesk);font-weight:700;letter-spacing:-.5px;text-transform:none}
html[data-surface="edu"] .nw-h2{font-size:40px;line-height:1.1}
html[data-surface="edu"] .nw-page-hero-h1{font-size:40px;line-height:1.1}
html[data-surface="edu"] .nw-realm-hero-h1{font-size:56px;line-height:1;letter-spacing:-1.5px}
html[data-surface="edu"] .nw-realm-section-h{font-size:26px}
html[data-surface="edu"] .nw-how-step-h{font-size:18px;letter-spacing:0}
html[data-surface="edu"] .nw-h2-em,html[data-surface="edu"] .nw-page-hero-h1-em,html[data-surface="edu"] .nw-realm-section-h em,html[data-surface="edu"] .nw-page-cta-h em{color:var(--nw-amber)}
html[data-surface="edu"] .nw-card{border-radius:10px;overflow:hidden}
html[data-surface="edu"] .nw-card-poster-title{font:600 20px/1.2 var(--nw-grotesk);letter-spacing:0;text-transform:none;color:#fff!important}
html[data-surface="edu"] .nw-card-poster-genre{display:none}
html[data-surface="edu"] .nw-card-blurb{font-family:var(--nw-grotesk);font-size:13.5px;color:#b3bac6}
html[data-surface="edu"] .nw-card-cta{font:600 12px/1 var(--nw-grotesk);letter-spacing:0}
html[data-surface="edu"] .nw-filter{border-radius:999px;letter-spacing:.08em}
html[data-surface="edu"] .nw-how{background:#1e2229;color:#e7e8ec}
html[data-surface="edu"] .nw-h2-dark{color:#fff}
html[data-surface="edu"] .nw-how-step-p{color:#b3bac6;opacity:1}
html[data-surface="edu"] .nw-how-grid-4{grid-template-columns:repeat(4,1fr);gap:24px}
html[data-surface="edu"] .nw-how-note{margin-top:24px;border:1px solid var(--nw-rule);background:#101215;border-radius:10px;padding:14px 18px;color:#b3bac6;font-size:13.5px}
html[data-surface="edu"] .nw-how-note b{color:#fff}
html[data-surface="edu"] .nw-realm-meta{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
html[data-surface="edu"] .nw-realm-tile{border-radius:10px}
html[data-surface="edu"] .nw-realm-tile-h-serif{font:400 19px/1.2 var(--nw-editorial);letter-spacing:0}
html[data-surface="edu"] .nw-realm-objectives{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
html[data-surface="edu"] .nw-realm-objective{border:1px solid var(--nw-rule);background:#1e2229;border-radius:8px;padding:12px 14px}

/* ── Review fixes (2026-09-22, rendered at 390 / 820 / 1280 / 1920) ── */
/* The edu two-column hero rule outranked the base <=1100px single-column rule, so on a
   phone the headline ran in a 230px column beside a thumbnail-sized beat card. */
@media (max-width:1100px){html[data-surface="edu"] .nw-hero-grid{grid-template-columns:1fr}}
/* The edu hero padding above also outranked the base phone padding, so a phone kept the
   desktop 72px/40px inset and the sign-in button fell below the fold. */
@media (max-width:720px){html[data-surface="edu"] .nw-hero{padding:40px 20px 40px}}
/* .nw-how is a LIGHT band in the base theme; edu darkens its background, so the step
   headings and the pull quote (both --nw-stage ink) went dark-on-dark and vanished. */
html[data-surface="edu"] .nw-how-step-h{color:#fff}
html[data-surface="edu"] .nw-how-quote{color:#b3bac6;opacity:1}
/* The edu padding override dropped the base 38px left inset, so the ✎ marker sat on
   top of each objective's first letter. Also use the full column, one per row on a phone. */
html[data-surface="edu"] .nw-realm-objective{padding:12px 14px 12px 38px}
html[data-surface="edu"] .nw-realm-objectives{max-width:none}
@media (max-width:720px){html[data-surface="edu"] .nw-realm-objectives{grid-template-columns:1fr}
  html[data-surface="edu"] .nw-how-grid-4{grid-template-columns:1fr}}
@media (min-width:721px) and (max-width:1100px){html[data-surface="edu"] .nw-how-grid-4{grid-template-columns:repeat(2,1fr)}}
/* On a phone the ticker wrapped to three lines; keep the count and the cross-surface
   link, drop the note. The long page-hero eyebrow may wrap rather than overflow. */
@media (max-width:720px){.nw-ticker-opt{display:none}
  .nw-page-hero-eyebrow{white-space:normal}
  .nw-beatcard{aspect-ratio:auto;min-height:440px}}
/* The subtitle sat on the wordmark's text baseline with vertical-align:middle, visibly
   below the wordmark's centre. Centre the two as flex items instead. */
.nw-wordmark{display:inline-flex;align-items:center}
html[data-surface="edu"] .nw-wordmark-sub{vertical-align:baseline}
html[data-surface="edu"] .nw-menu-panel{font:600 16px/1.2 var(--nw-grotesk)}
html[data-surface="edu"] .nw-menu-btn{border-radius:6px}
.nw-beatcard-note{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:#e7e8ec}
.nw-card-poster-title{color:var(--nw-chalk);text-shadow:0 2px 12px rgba(0,0,0,.85)}
.nw-card-cta{color:var(--nw-amber)}
/* The hero genre line sat in the raw realm accent over key art; dark accents (Sprint Zero's
   green, Paranormal Response Team's navy) vanished. Lift it toward white and shadow it. */
.nw-realm-hero-genre{color:color-mix(in srgb,var(--realm-accent,#e8a843) 50%,#fff);text-shadow:0 1px 8px rgba(0,0,0,.9)}