/* The Seventh Winter — stratigraphy: pale layers, dark crises, one rust band for now. */

:root{
  --field:#D5DAD5;      /* page ground: cold mineral, never cream */
  --chalk:#EDEFE9;      /* High */
  --ice:#B9C4C0;        /* Awakening */
  --moss:#7F918B;       /* Unraveling */
  --ink:#17302B;        /* Crisis, and the text ink */
  --ink-soft:#2B3F3A;
  --ink-mute:#5A6B65;
  --rust:#A33A1E;       /* reserved: the present, unfinished crisis */
  --rust-lit:#D2643B;   /* the same signal on the dark ground */
  --rule:rgba(23,48,43,.16);
  --measure:64ch;
  --gut:clamp(1.25rem,4vw,3rem);
  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --text:"Spectral",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--field);color:var(--ink-soft);
  font-family:var(--text);font-weight:400;font-size:clamp(1rem,.94rem + .25vw,1.125rem);
  line-height:1.62;font-kerning:normal;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;
  line-height:.86;letter-spacing:.005em;text-transform:none}
p{margin:0 0 1.15em}
a{color:inherit;text-decoration-color:var(--rust);text-underline-offset:.18em;
  text-decoration-thickness:from-font}
a:hover{color:var(--rust)}
cite{font-style:italic}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:.5rem;top:.5rem;background:var(--ink);color:var(--chalk);
  padding:.5rem .9rem;z-index:99;font-family:var(--display);font-size:1.2rem}

/* ---------- chapter rail ---------- */
.rail{position:fixed;left:1.4rem;top:50%;transform:translateY(-50%);z-index:20;display:none}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.rail a{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;
  color:var(--ink-mute);font-family:var(--display);font-size:1.05rem;
  letter-spacing:.04em;line-height:1;padding:.15rem 0}
.rail-n{width:1.6em;text-align:right;color:var(--ink);opacity:.45}
.rail-t{opacity:0;transform:translateX(-.35rem);transition:opacity .22s,transform .22s}
.rail:hover .rail-t,.rail a:focus-visible .rail-t{opacity:1;transform:none}
.rail a:hover,.rail a[aria-current="true"]{color:var(--rust)}
.rail a[aria-current="true"] .rail-n{opacity:1;color:var(--rust)}
@media (min-width:1180px){
  .rail{display:block}
  :root{--gut:5.75rem}
}
.rail.on-dark a{color:#7F948C}
.rail.on-dark .rail-n{color:var(--chalk)}
.rail.on-dark a:hover,.rail.on-dark a[aria-current="true"]{color:var(--rust-lit)}
.rail.on-dark a[aria-current="true"] .rail-n{color:var(--rust-lit)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.5rem,4vw,3rem) var(--gut) 0}
.hero-grid{max-width:1400px;width:100%;margin:0 auto;flex:1;
  display:grid;grid-template-columns:1fr;align-content:center;gap:clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(1rem,3vh,2.5rem)}
.kicker{font-size:.9rem;font-style:italic;color:var(--ink-mute);margin:0;max-width:40ch}
.hero h1{font-size:clamp(3.2rem,min(19vw,14.5vh),9.5rem);font-weight:800;line-height:.79;
  letter-spacing:-.012em;margin:0}
.hero-deck{max-width:46ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem)}
.hero-deck-b{color:var(--ink-mute)}
.verdict{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1;color:var(--rust);margin:1.4rem 0 0}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(20rem,26rem);
    grid-template-areas:"kick kick" "title deck";align-items:end}
  .kicker{grid-area:kick}
  .hero h1{grid-area:title}
  .hero-deck{grid-area:deck;padding-bottom:.6rem}
}

/* ---------- strata band ---------- */
.strata{margin:0 calc(var(--gut) * -1);padding:0 0 clamp(1rem,2vw,1.6rem)}
.strata-readout{display:flex;flex-wrap:wrap;gap:.1rem 1rem;align-items:baseline;
  padding:0 var(--gut) .55rem;min-height:2.1rem}
.ro-name{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1}
.ro-meta{font-size:.85rem;color:var(--ink-mute);font-style:italic}
.bands{display:flex;gap:2px;height:clamp(84px,13vh,132px);padding:0 var(--gut)}
.band{border:0;padding:0;margin:0;cursor:pointer;flex-basis:0;min-width:2px;
  transform-origin:bottom;transition:filter .18s,transform .18s}
.band:hover,.band:focus-visible{filter:brightness(1.08) saturate(1.1);transform:scaleY(1.045)}
.band.sae-end{margin-right:5px}
.k-high{background:var(--chalk)}
.k-awaken{background:var(--ice)}
.k-unravel{background:var(--moss)}
.k-crisis{background:var(--ink)}
.k-now{background:repeating-linear-gradient(90deg,var(--rust) 0 11px,#8E3218 11px 13px);
  margin-right:calc(var(--gut) * -1);
  -webkit-mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.15) 92%,transparent);
  mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.15) 92%,transparent)}
.scale{display:flex;padding:.5rem var(--gut) 0;font-family:var(--display);
  font-size:.95rem;letter-spacing:.06em;color:var(--ink-mute)}
.scale span{flex-basis:0;border-top:1px solid var(--rule);padding-top:.3rem}
.scale .scale-end{flex:0 0 auto;color:var(--rust);border-top-color:var(--rust)}
.strata figcaption{max-width:58ch;padding:1rem var(--gut) 0;font-size:.9rem;
  color:var(--ink-mute);font-style:italic}

/* ---------- chapters ---------- */
.chapter{padding:clamp(4.5rem,11vh,9rem) var(--gut)}
.chapter > *{max-width:1180px;margin-inline:auto}
.col{max-width:1180px;margin-inline:auto}
.col > *{max-width:var(--measure)}
.col > h2{max-width:15ch}
.chap-mark{font-family:var(--display);font-size:1.05rem;letter-spacing:.14em;
  color:var(--rust);margin:0 0 .5rem}
.chapter h2{font-size:clamp(2.7rem,7.5vw,6rem);font-weight:700;margin:0 0 1.4rem;
  letter-spacing:-.008em}
.chapter h3{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:600;margin:0 0 .45rem}
.term{font-style:italic;color:var(--ink)}
.note{font-size:.92rem;color:var(--ink-mute);font-style:italic;max-width:52ch}
.pull{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.06;color:var(--ink);margin:2.6rem 0 0}
.col > .pull{max-width:22ch}
.pull.light{color:var(--chalk)}

/* short version: a summary strip attached under the strata band, not a card */
.short-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  margin-bottom:1.1rem}
.short h2{font-family:var(--display);font-weight:600;font-size:1.45rem;
  letter-spacing:.02em;margin:0}
.short-time{margin:0;font-size:.84rem;font-style:italic;color:var(--ink-mute)}
.short ul{margin:0;padding:0;list-style:none;display:grid;gap:1.4rem 1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
@media (min-width:1000px){
  .short ul{grid-template-columns:repeat(5,1fr);gap:0 1.6rem}
}
.short li{border-top:1px solid var(--rule);padding-top:.6rem;
  font-size:.94rem;line-height:1.5}

/* four seasons = the legend for the band */
.seasons{list-style:none;margin:2.5rem auto;padding:0;display:grid;gap:2px}
.season{display:grid;grid-template-columns:1fr;gap:.3rem;padding:clamp(1.1rem,2.4vw,1.9rem)}
.season-word{font-family:var(--display);font-weight:700;line-height:.85;
  font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.01em}
.season-body{max-width:56ch}
.season p{margin:0}
.season.k-high{background:var(--chalk)}
.season.k-awaken{background:var(--ice)}
.season.k-unravel{background:var(--moss);color:#12241F}
.season.k-unravel .season-word,.season.k-unravel .term{color:#0F211C}
.season.k-crisis{background:var(--ink);color:#C8D2CD}
.season.k-crisis .season-word{color:var(--chalk)}
.season.k-crisis .term{color:var(--rust-lit)}
@media (min-width:820px){
  .season{grid-template-columns:minmax(9rem,15rem) 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
}

/* the record of six crises */
.record{list-style:none;margin:2.5rem auto 0;padding:0;display:grid;gap:0}
.record li{display:grid;grid-template-columns:1fr;gap:.4rem;
  padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--rule)}
.record li:last-child{border-bottom:1px solid var(--rule)}
.rec-year{font-family:var(--display);font-weight:300;font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:.9;color:var(--ink);display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.rec-dash{width:1.4rem;height:1px;background:var(--ink);opacity:.5}
.rec-body{max-width:60ch}
.rec-body p{margin:0}
@media (min-width:820px){
  .record li{grid-template-columns:minmax(10rem,16rem) 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
  .rec-year{flex-direction:column;align-items:flex-start;gap:.25rem}
  .rec-dash{width:2.6rem}
}

/* dark chapters */
.chapter.dark{background:var(--ink);color:#B9C6C1}
.chapter.dark h2,.chapter.dark h3{color:var(--chalk)}
.chapter.dark .chap-mark{color:var(--rust-lit)}
.chapter.dark a{text-decoration-color:var(--rust-lit)}
.chapter.dark a:hover{color:var(--rust-lit)}
.chapter.pale{background:var(--chalk)}

/* instrument readings */
.gauges{list-style:none;margin:3rem auto 0;padding:0;display:grid;gap:0}
.gauges li{display:grid;grid-template-columns:1fr;gap:.35rem;
  padding:clamp(1.4rem,2.6vw,2rem) 0;border-top:1px solid rgba(201,214,208,.22)}
.gauges li:last-child{border-bottom:1px solid rgba(201,214,208,.22)}
.g-fig{font-family:var(--display);font-weight:500;color:var(--rust-lit);
  font-size:clamp(2.8rem,7vw,5rem);line-height:.85;letter-spacing:-.01em}
.g-unit{font-size:.38em;font-weight:400;letter-spacing:.02em;margin-left:.25em;
  color:var(--chalk);opacity:.75}
.g-body{max-width:58ch}
.g-body p{margin:0}
.g-src{margin-top:.5rem !important;font-size:.84rem;font-style:italic;color:#8AA098}
@media (min-width:820px){
  .gauges li{grid-template-columns:minmax(9rem,14rem) 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
}

/* the generation chapter */
.chapter.you{background:var(--ice)}
.chapter.you .chap-mark{color:var(--rust)}
.you-lede{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);max-width:52ch}
.you-note{border-left:6px solid var(--rust);padding:.2rem 0 .2rem 1.1rem;max-width:56ch;
  font-style:italic;color:var(--ink)}

/* the two paths */
.paths{display:grid;gap:2px;margin:2.6rem auto 3rem}
.path{padding:clamp(1.5rem,3vw,2.4rem)}
.path:first-child{background:var(--chalk)}
.path:last-child{background:var(--ink);color:#B9C6C1}
.path:last-child h3{color:var(--chalk)}
.path:last-child strong{color:var(--chalk)}
.path h3{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1rem}
.path ul{margin:0;padding-left:1.1rem;max-width:44ch}
.path li{margin-bottom:1rem}
.path li::marker{color:var(--rust)}
.path:last-child li::marker{color:var(--rust-lit)}
.path strong{font-weight:600;color:var(--ink)}
@media (min-width:900px){.paths{grid-template-columns:1fr 1fr}}

.close{font-size:clamp(1.05rem,1rem + .35vw,1.28rem);color:var(--ink)}
.verdict-end{font-size:clamp(2rem,5.5vw,4rem);margin-top:1.6rem}

/* ---------- sources ---------- */
.sources{background:var(--ink);color:#93A69F;padding:clamp(3.5rem,8vh,6rem) var(--gut)}
.sources > *{max-width:1180px;margin-inline:auto}
.sources h2{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--chalk);
  margin:0 0 1rem}
.sources .note{color:#93A69F;max-width:60ch}
.src-list{list-style:none;margin:1.6rem 0 0;padding:0;max-width:64ch;font-size:.94rem}
.src-list li{padding:.5rem 0;border-top:1px solid rgba(147,166,159,.2)}
.sources a{color:#C8D6D0;text-decoration-color:var(--rust-lit)}
.sources a:hover{color:var(--rust-lit)}
.byline{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.02em;
  color:var(--chalk);margin:2.6rem 0 0}
.byline a{color:var(--chalk);text-decoration-color:var(--rust-lit)}
.byline a:hover{color:var(--rust-lit)}
.colophon{margin-top:.55rem;font-size:.84rem;font-style:italic;color:#71847E}

/* ---------- mobile: the wall becomes a drill core ---------- */
@media (max-width:719px){
  .strata{padding-bottom:1.4rem;display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"read read" "bands scale" "cap cap";
    column-gap:.6rem;padding-right:var(--gut)}
  .strata-readout{grid-area:read}
  .strata figcaption{grid-area:cap}
  .bands{grid-area:bands;flex-direction:column;height:auto;min-height:72svh;width:100%;
    padding:0 0 0 var(--gut)}
  .scale{grid-area:scale;display:flex;flex-direction:column;padding:0;
    font-size:.78rem;letter-spacing:.04em}
  .scale span{border-top:0;border-left:1px solid var(--rule);padding:0 0 0 .35rem;
    display:flex;align-items:flex-start}
  .scale .scale-end{border-left-color:var(--rust);flex:0 0 auto;padding-top:.1rem}
  .band{width:100%}
  .band.sae-end{margin-right:0;margin-bottom:5px}
  /* the old rule that hid the year scale on mobile is gone — a column of years replaces it */
  .k-now{background:repeating-linear-gradient(180deg,var(--rust) 0 11px,#8E3218 11px 13px);
    margin-right:0;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.15) 92%,transparent);
    mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.15) 92%,transparent)}
  .band:hover,.band:focus-visible{transform:scaleX(1.02)}
}

/* ---------- one orchestrated moment: history draws itself ---------- */
@media (prefers-reduced-motion:no-preference){
  .bands .band{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards;
    animation-delay:calc(var(--i,0) * 38ms + 180ms)}
  @keyframes rise{from{transform:scaleY(.04);opacity:0}to{transform:none;opacity:1}}
  @media (max-width:719px){
    @keyframes rise{from{transform:scaleX(.04);opacity:0}to{transform:none;opacity:1}}
  }
}

/* the strip hangs off the bottom of the hero, so it keeps the hero's edges */
.shortwrap{padding-top:clamp(1.4rem,3vh,2.2rem);
  padding-bottom:clamp(1.5rem,3.5vh,3rem)}

/* small corrections after the first look */
.rail.on-dark a{color:#93A69F}
.sources h2{max-width:none}

/* the hinge sentence in chapter five */
.turn{font-family:var(--display);font-weight:600;line-height:1.04;color:var(--ink);
  font-size:clamp(1.5rem,3.2vw,2.3rem);margin:2rem 0 1.7rem}
.col > .turn{max-width:26ch}