/* Surface system. Loaded last: one token set for the light editorial face and the dark cinematic face.
   Light face = paper, thin lines, quiet cards. Night face = home world scenes and category first views.
   Text on the night face never depends on the artwork: a night scrim always sits behind it. */
:root{--paper:#fdfcf9;--surface:#fffefb;--surface-soft:#f4f1ec;--ink:#171614;--body:#5f5a52;--line:#dfdad2;--accent:#a8482e;--night:#10100f;--night-text:#fbf8f1;--night-body:#d7d0c5;--night-accent:#efaa91;--night-line:#fbf8f14d;--muted:var(--body);--coral:var(--accent);--pale:var(--surface-soft)}
html{background:var(--paper)}
.filters,.empty-state,.notice,.toc,.proof-section,.practice-example,.money-callout{background:var(--surface-soft)}
.field-hub .eyebrow,.field-hero .eyebrow,.hub-choice .text-link,.related-hub .eyebrow,.hub-choice li:before,.proof-card .proof-kind{color:var(--accent)}
.practice-thumb{background:var(--night);color:var(--night-text)}.practice-thumb>span{background:var(--night-accent)!important;color:var(--night)!important}
.scene-note{font-size:13px}.scene-note a{display:inline-block;padding:10px 0;margin:-10px 0}.eyebrow,.proof-kind{font-size:12px}
.field-practice-links .related-hub{grid-template-columns:1fr}

/* Night face: shared rules for the home scenes and the category hero. */
.world-scenes,.world-hero{background:var(--night);color:var(--night-body)}
.world-hero{border-radius:0;overflow:clip}
.world-scenes .outcome-caption,.world-hero>div{text-shadow:none}
.world-scenes .outcome-caption h2,.world-hero h1{color:var(--night-text);font-weight:600;letter-spacing:-.045em}
.world-scenes .outcome-caption .photo-index,.world-scenes .outcome-caption>div>p:first-of-type,.world-hero .eyebrow{color:var(--night-accent)}.world-scenes .outcome-caption .photo-index{border:0;background:none}
.world-scenes .outcome-caption .outcome-description,.world-hero>div>p,.world-hero p{color:var(--night-body)}
.world-hero .field-audience{color:var(--night-text);line-height:1.8!important}
.world-scenes .outcome-caption .outcome-description{max-width:27em;line-height:1.9}.world-hero>div>p{max-width:28em}
.world-word{color:#fbf8f10d}
/* Scrims: a vertical fade into the night at both edges and a horizontal fade toward the text. */
.world-scenes .outcome-photo:after{background:linear-gradient(180deg,var(--night) 0%,transparent 16%,transparent 76%,var(--night) 100%),linear-gradient(90deg,transparent 38%,#10100f80 60%,var(--night) 92%)}
.world-scenes .outcome-card:nth-child(even) .outcome-photo:after,.world-hero figure:after{background:linear-gradient(180deg,var(--night) 0%,transparent 16%,transparent 76%,var(--night) 100%),linear-gradient(270deg,transparent 38%,#10100f80 60%,var(--night) 92%)}
.world-scenes .outcome-caption:before,.world-hero>div:before{content:'';position:absolute;inset:-36px -44px;z-index:-1;border-radius:40px;background:radial-gradient(ellipse at center,#10100fe6 0%,#10100fb3 48%,transparent 74%);pointer-events:none}
/* Links, controls and focus keep contrast on the night face. */
.world-scenes a,.world-hero a,.world-hero .text-link{color:var(--night-text)}
.world-scenes a:hover,.world-hero a:hover,.world-hero .text-link:hover,.world-scenes .outcome-card:hover .outcome-link{color:var(--night-accent)}
.world-scenes .scene-controls button,.world-hero .scene-controls button{color:var(--night-text);border-bottom-color:var(--night-line);min-height:44px}
.world-scenes .scene-controls button:hover,.world-hero .scene-controls button:hover{color:var(--night-accent);border-color:var(--night-accent)}
.world-scenes .scene-note,.world-hero .scene-note{color:var(--night-body)}
.world-scenes .scene-note a:hover,.world-hero .scene-note a:hover{text-decoration:underline}
.world-scenes :focus-visible,.world-hero :focus-visible{outline:2px solid var(--night-accent);outline-offset:4px}
.world-hero figcaption{top:14px;right:calc(2.2% + 24px);left:auto;bottom:auto;z-index:2;display:inline-block;padding:6px 12px;border-radius:999px;background:#10100fb8;color:var(--night-body);font-size:12px;letter-spacing:.02em;text-shadow:none;margin:0}
/* Field hero heading: two lines on a phone, natural phrase breaks. */
.world-hero h1{font-size:clamp(34px,3.4vw,52px);max-width:15em}
@media(max-width:700px){
 .world-hero h1{font-size:clamp(27px,7.3vw,34px)}
 .world-scenes .outcome-photo:after,.world-scenes .outcome-card:nth-child(even) .outcome-photo:after,.world-hero figure:after{background:linear-gradient(180deg,var(--night) 0%,transparent 14%,transparent 46%,#10100fb3 70%,var(--night) 100%)}
 .world-scenes .outcome-card,.world-scenes .outcome-card:nth-child(even){padding:330px 24px 72px}
 .world-hero{padding:330px 24px 44px}
 .world-scenes .outcome-caption:before,.world-hero>div:before{inset:-24px -20px;border-radius:24px}
 .world-hero figcaption{display:inline-block;top:12px;right:14px}
 .world-scenes .outcome-caption h2{font-size:clamp(28px,7.8vw,34px)}
}

/* Home: try a small task in every field before comparing schools. */
.try-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.3vw,28px)}
.try-grid .article-card{padding:0}.try-grid .practice-thumb{min-height:190px}.try-grid .practice-thumb strong{font-size:19px;padding:0 14px}
@media(max-width:1000px){.try-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.try-grid{grid-template-columns:1fr;gap:22px}
 /* Practice cards on a phone: the step strip sits above the text instead of in a narrow column. */
 .article-card:has(.practice-thumb){grid-template-columns:1fr;gap:6px 0}.article-card .practice-thumb{grid-row:auto;min-height:0;padding:14px 16px;justify-content:space-between;gap:12px;margin-bottom:8px}.article-card .practice-thumb strong{font-size:14px;line-height:1.6;text-align:left}.article-card .practice-thumb strong br{display:none}.article-card .practice-thumb>span{position:static;flex-shrink:0;font-size:12px}}
.journey-line a,.proof-card a{padding-block:10px}.hub-local-nav a{padding-block:12px}.try-section .section-heading>.text-link{white-space:nowrap}
@media print{.world-scenes,.world-hero{background:none;color:var(--ink)}.world-scenes .outcome-caption h2,.world-hero h1{color:var(--ink)}}