@font-face{font-family:"Newsreader";src:url(fonts/newsreader.woff2) format("woff2-variations"),url(fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic.woff2) format("woff2-variations"),url(fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/sourcesans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/sourcesans-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ivory:#F6F3EC;
  --paper:#FBF9F4;
  --ink:#1A1F2B;
  --muted:#5A6170;
  --navy:#1F3864;
  --navy-deep:#131F38;
  --navy-card:#182747;
  --gold:#C9A227;
  --gold-soft:#D9BC62;
  --gold-text:#86690F;
  --rule:#DDD6C8;
  --rule-dark:rgba(217,188,98,.55);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
  --gap:56px;
  --sec:104px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
h1,h2,h3{font-weight:400;letter-spacing:-.01em;line-height:1.08}
p+p{margin-top:1em}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:2px;background:var(--gold);vertical-align:middle;margin-right:12px;position:relative;top:-2px}
.dark{background:var(--navy-deep);color:#E3DFD3}
.dark .eyebrow{color:var(--gold-soft)}
.dark h2,.dark h3,.sec.dark h2{color:var(--ivory)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- the one grid ---------- */
.g{display:grid;grid-template-columns:4fr 8fr;column-gap:var(--gap);align-items:start}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec h2{font-size:clamp(38px,4.6vw,58px);font-weight:350;color:var(--navy-deep);margin-top:18px;max-width:11ch}
.sec .lede{font-size:clamp(21px,2vw,25px);line-height:1.45;max-width:30em;padding-top:46px}
.sec .lede em{font-style:italic;color:var(--navy)}
.dark .lede em{color:var(--gold-soft)}
.sec .body{font-size:20px;line-height:1.62;max-width:34em}
.sub{grid-column:2;margin-top:64px}
.sub .eyebrow{margin-bottom:22px}
.full{grid-column:1/-1;margin-top:56px}
.kicker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

/* ---------- masthead ---------- */
.mast{border-bottom:2px solid var(--rule);background:var(--ivory);position:sticky;top:0;z-index:40;transition:box-shadow .25s ease}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;height:64px;transition:height .25s ease}
.mark{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--navy-deep)}
.mark::after{content:"";display:inline-block;width:22px;height:2px;background:var(--gold);vertical-align:middle;margin-left:12px;position:relative;top:-2px}
.nav{display:flex;gap:28px;list-style:none;font-family:var(--sans);font-size:14px;letter-spacing:.06em}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--navy)}

/* ---------- hero ---------- */
.hero .wrap{display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gap);align-items:end;padding-top:80px;padding-bottom:96px}
.hero h1{font-size:clamp(54px,7.6vw,100px);font-weight:350;margin:20px 0 26px;color:var(--navy-deep);line-height:1.02}
.hero .lede{font-size:clamp(22px,2.2vw,27px);line-height:1.4;max-width:24ch;font-weight:350}
.hero .lede em{font-style:italic;color:var(--navy)}
.hero .place{margin-top:26px;font-family:var(--sans);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait::after{content:"";position:absolute;left:-18px;bottom:-18px;width:38%;height:38%;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);pointer-events:none}

/* ---------- photo bands ---------- */
.band{position:relative;color:var(--ivory);min-height:480px;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-deep)}
.band img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(19,31,56,.55) 0%,rgba(19,31,56,.68) 50%,rgba(19,31,56,.94) 100%)}
.band .wrap{position:relative;z-index:2;padding-top:130px;padding-bottom:64px;width:100%}
.band .eyebrow{color:var(--gold-soft)}
.band h2{font-size:clamp(44px,6.2vw,82px);font-weight:350;margin-top:18px;max-width:18ch;color:var(--ivory)}
.band h2 em{font-style:italic;color:var(--gold-soft)}

/* ---------- frames ---------- */
.frames{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.frames.four{grid-template-columns:repeat(4,1fr)}
.frame{padding:30px 28px 34px 0;border-right:2px solid var(--rule)}
.frame+.frame{padding-left:28px}
.frame:last-child{border-right:0;padding-right:0}
.frame .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
.frame h3{font-size:27px;font-weight:400;color:var(--navy-deep);margin-bottom:14px;line-height:1.15}
.frame p{font-size:17.5px;line-height:1.5}
.frame .held{margin-top:16px;padding-top:12px;border-top:2px solid var(--rule);font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--muted)}
.frame .held b{font-weight:600;color:var(--navy-deep)}
.dark .frames{border-color:var(--gold-soft)}
.dark .frame{border-right-color:var(--rule-dark)}
.dark .frame h3{color:var(--ivory)}
.dark .frame p{color:#E3DFD3}
.dark .frame .held{border-top-color:var(--rule-dark);color:#B8BCC8}
.dark .frame .held b{color:var(--ivory)}

/* case frame: one name, three books */
.case{border:2px solid var(--rule);background:var(--paper);padding:34px 36px 36px}
.case .kicker{margin-bottom:10px}
.case h3{font-size:30px;font-weight:400;color:var(--navy-deep);margin-bottom:22px}
.case .three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--rule)}
.case .three div{padding:18px 24px 6px 0;border-right:2px solid var(--rule)}
.case .three div+div{padding-left:24px}
.case .three div:last-child{border-right:0;padding-right:0}
.case .three .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.case .three p{font-size:17px;line-height:1.5}
.case .after{margin-top:22px;padding-top:16px;border-top:2px solid var(--rule);font-style:italic;color:var(--navy);font-size:19px}

/* record grid (dark) */
.record{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft)}
.record div{padding:22px 22px 24px 0;border-right:2px solid var(--rule-dark);border-bottom:2px solid var(--rule-dark)}
.record div:nth-child(4n){border-right:0}
.record div:nth-child(n+5){border-bottom:0}
.record div+div{padding-left:22px}
.record div:nth-child(4n+1){padding-left:0}
.record b{display:block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ivory);margin-bottom:6px}
.record span{display:block;font-size:16.5px;line-height:1.45;color:#C9CDD8}

/* two areas + key */
.areas{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border-top:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft)}
.area{padding:28px 32px 30px 0}
.area:last-child{padding:28px 0 30px 32px}
.area .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px}
.area h3{font-size:26px;font-weight:400;color:var(--ivory);margin-bottom:12px}
.area p{font-size:17.5px;line-height:1.5;color:#E3DFD3}
.key{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 22px;border-left:2px solid var(--rule-dark);border-right:2px solid var(--rule-dark);text-align:center}
.key .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.key .v{font-family:var(--serif);font-size:22px;color:var(--ivory);margin-top:8px;font-style:italic}
.model .status{font-family:var(--sans);font-size:15px;line-height:1.6;letter-spacing:.02em;color:#B8BCC8;margin-top:28px}
.model .status b{font-weight:600;color:var(--ivory)}

/* numbers strip */
.numbers{border-top:2px solid var(--rule-dark)}
.numbers .wrap{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap);padding-top:56px;padding-bottom:72px}
.num .v{font-family:var(--serif);font-size:72px;font-weight:300;line-height:1;color:var(--gold-soft);letter-spacing:-.02em}
.num .v small{font-size:34px}
.num b{display:block;margin-top:14px;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory)}
.num span{display:block;margin-top:6px;font-family:var(--sans);font-size:15px;line-height:1.5;color:#B8BCC8}

/* writing */
.lead-article{border-top:2px solid var(--ink);padding:26px 0 28px;border-bottom:2px solid var(--rule)}
.lead-article .meta{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.lead-article .title{display:block;font-size:27px;line-height:1.28;color:var(--ink)}
.lead-article .links{margin-top:16px;display:flex;flex-wrap:wrap;gap:22px;font-family:var(--sans);font-size:14px;letter-spacing:.04em}
.lead-article .links a{text-decoration:none;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:1px}
.earlier{margin-top:34px}
.earlier ul{list-style:none}
.earlier li{border-bottom:2px solid var(--rule)}
.earlier a{display:block;padding:14px 0;text-decoration:none;font-size:19px;line-height:1.35;color:var(--ink)}
.earlier a:hover{color:var(--navy)}
.earlier a span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* about / contact */
.about{background:var(--paper);border-top:2px solid var(--rule)}
.about .bio{font-size:20px;line-height:1.62;max-width:34em}
.contact h2{max-width:14ch}
.links-list{list-style:none;border-top:2px solid var(--ink);margin-top:36px}
.links-list li{border-bottom:2px solid var(--rule)}
.links-list a{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;text-decoration:none;font-size:24px}
.links-list a span{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.links-list a:hover{color:var(--navy)}
footer{border-top:2px solid var(--rule)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:36px;font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--muted)}

/* reveal on scroll (no JS: everything visible) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}}

/* ===== Article pages ===== */
.art-head{border-bottom:2px solid var(--rule)}
.art-head .wrap{padding-top:72px;padding-bottom:56px;max-width:900px}
.art-head h1{font-size:clamp(36px,4.6vw,60px);font-weight:350;color:var(--navy-deep);margin:20px 0 22px;line-height:1.1}
.art-head .dek{font-size:clamp(20px,2vw,24px);line-height:1.4;font-style:italic;color:var(--navy);max-width:34em}
.art-head .byline{margin-top:28px;font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 22px}
.art-head .byline b{font-weight:600;color:var(--ink)}
.art{max-width:720px;margin:0 auto;padding:56px 32px 40px;font-size:20px;line-height:1.62}
.art p{margin:0 0 1.15em}
.art h2{font-size:30px;font-weight:400;color:var(--navy-deep);margin:2.1em 0 .7em;line-height:1.2}
.art h2:first-child{margin-top:0}
.art .note{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--muted);border-top:2px solid var(--rule);padding-top:18px;margin-top:2.2em}
.art .note p{margin-bottom:.8em}
.art .lead-in{font-weight:600;font-variant:small-caps;letter-spacing:.03em;color:var(--navy-deep)}
.art .year{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.06em;color:var(--navy);margin-right:8px}
.art .drop::first-letter{font-size:3.6em;line-height:.85;float:left;padding:6px 10px 0 0;color:var(--navy-deep)}
.art blockquote{margin:2em 0;padding:8px 0 8px 28px;border-left:3px solid var(--gold);font-size:24px;line-height:1.4;font-style:italic;color:var(--navy)}
.art a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold)}
.art a:hover{color:var(--ink)}
figure.chart{max-width:1000px;margin:44px auto;padding:0 32px}
figure.chart .card{background:var(--paper);border:2px solid var(--rule);padding:18px}
figure.chart img{width:100%;height:auto}
figure.chart figcaption{margin-top:12px;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--muted);letter-spacing:.02em}
figure.chart figcaption b{font-weight:600;color:var(--navy)}
.art-foot{border-top:2px solid var(--rule);margin-top:48px}
.art-foot .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:44px;padding-bottom:64px;max-width:900px}
.art-foot .n{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.art-foot ul{list-style:none}
.art-foot li{border-top:2px solid var(--rule)}
.art-foot li:last-child{border-bottom:2px solid var(--rule)}
.art-foot a{display:block;padding:14px 0;text-decoration:none;font-size:19px;line-height:1.35;color:var(--ink)}
.art-foot a:hover{color:var(--navy)}
.art-foot a span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.art-foot .links a{font-family:var(--sans);font-size:15px;letter-spacing:.03em;color:var(--navy)}

/* ---------- small screens ---------- */
@media (max-width:900px){
  :root{--sec:64px;--gap:32px}
  body{font-size:18px}
  .wrap{padding:0 20px}
  .nav{gap:16px}
  .g{grid-template-columns:1fr;row-gap:28px}
  .sub{grid-column:1;margin-top:48px}
  .full{margin-top:40px}
  .sec h2{max-width:none}
  .hero .wrap{grid-template-columns:1fr;row-gap:44px;padding-top:44px;padding-bottom:64px}
  .portrait{max-width:440px}
  .portrait::after{left:-10px;bottom:-10px}
  .band{min-height:400px}
  .band .wrap{padding-top:96px;padding-bottom:44px}
  .frames,.frames.four{grid-template-columns:1fr}
  .frame,.frame+.frame,.frame:last-child{padding:24px 0 26px;border-right:0;border-bottom:2px solid var(--rule)}
  .dark .frame{border-bottom-color:var(--rule-dark)}
  .frame:last-child{border-bottom:0}
  .case{padding:24px 20px}
  .case .three{grid-template-columns:1fr}
  .case .three div,.case .three div+div,.case .three div:last-child{padding:14px 0;border-right:0;border-bottom:2px solid var(--rule)}
  .case .three div:last-child{border-bottom:0}
  .record{grid-template-columns:1fr 1fr}
  .record div{padding:16px 16px 18px 0;border-right:2px solid var(--rule-dark);border-bottom:2px solid var(--rule-dark)}
  .record div:nth-child(2n){border-right:0;padding-left:16px}
  .record div:nth-child(2n+1){padding-left:0}
  .record div:nth-child(n+5){border-bottom:2px solid var(--rule-dark)}
  .record div:nth-child(n+7){border-bottom:0}
  .areas{grid-template-columns:1fr}
  .area,.area:last-child{padding:22px 0}
  .key{padding:18px 0;border-left:0;border-right:0;border-top:2px solid var(--rule-dark);border-bottom:2px solid var(--rule-dark)}
  .numbers .wrap{grid-template-columns:1fr 1fr;row-gap:36px;padding-top:44px;padding-bottom:56px}
  .num .v{font-size:56px}
  .lead-article .title{font-size:23px}
  .links-list a{font-size:20px}
  footer .wrap{flex-direction:column;gap:6px}
  .art-head .wrap{padding-top:44px;padding-bottom:40px}
  .art{padding:40px 20px 24px;font-size:18px}
  .art h2{font-size:25px}
  .art blockquote{font-size:21px;padding-left:20px}
  figure.chart{padding:0 12px;margin:32px auto}
  figure.chart .card{padding:10px}
  .art-foot .wrap{grid-template-columns:1fr;gap:32px;padding-top:32px;padding-bottom:48px}
}

/* ---------- key map ---------- */
.keymap{display:grid;grid-template-columns:1fr 220px 1fr;align-items:center;border-top:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft);padding:34px 0 36px}
.keymap .side{padding-right:28px}
.keymap .side.right{padding-right:0;padding-left:28px}
.keymap .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px}
.keymap h3{font-size:26px;font-weight:400;color:var(--ivory);margin-bottom:12px}
.keymap p{font-size:17.5px;line-height:1.5;color:#E3DFD3}
.feeds{list-style:none;margin-top:16px;border-top:2px solid var(--rule-dark)}
.feeds li{font-family:var(--sans);font-size:14px;line-height:1.45;color:#B8BCC8;padding:8px 0;border-bottom:2px solid var(--rule-dark)}
.keymap .mid{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:150px}
.keybox{position:relative;z-index:1;border:2px solid var(--gold);background:var(--navy-deep);padding:16px 18px;text-align:center;min-width:164px}
.keybox .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.keybox .id{font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-size:24px;letter-spacing:.06em;color:var(--ivory);margin:8px 0 6px}
.keybox .s{font-family:var(--sans);font-size:12px;line-height:1.35;color:#B8BCC8}
.wire{position:absolute;top:50%;height:2px;background:var(--gold);width:0;transition:width 1.1s ease .2s}
.wire.l{left:0}
.wire.r{right:0;transition-delay:.45s}
.wire::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.wire.l::after{left:-3px}
.wire.r::after{right:-3px}
.keymap.in .wire,html:not(.js) .wire{width:calc(50% - 82px)}
.kicker .ex{font-weight:400;letter-spacing:.02em;text-transform:none;color:#B8BCC8;margin-left:14px}
.record code{font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-size:14px;color:var(--gold-soft);background:rgba(217,188,98,.08);padding:1px 6px;border-radius:2px;margin-right:4px}
.record span{font-size:15.5px;line-height:1.6}

/* ---------- timeline ---------- */
.timeline{border-top:2px solid var(--gold-soft);padding-top:26px}
.phases{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding-bottom:16px;border-bottom:2px solid var(--gold)}
.phases span{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B8BCC8;padding-left:0}
.phases span+span{border-left:2px solid var(--rule-dark);padding-left:16px}
.delays{display:grid;grid-template-columns:repeat(4,1fr);column-gap:28px;padding-top:34px}
.delay{position:relative}
.delay::before{content:"";position:absolute;top:-41px;left:0;width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--navy-deep);box-shadow:0 0 0 2px var(--gold)}
.delay::after{content:"";position:absolute;top:-30px;left:4.5px;width:2px;height:26px;background:var(--gold)}
.delay .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
.delay h3{font-size:24px;font-weight:400;color:var(--ivory);margin-bottom:12px;line-height:1.15}
.delay p{font-size:16.5px;line-height:1.5;color:#E3DFD3}
.delay .held{margin-top:14px;padding-top:10px;border-top:2px solid var(--rule-dark);font-family:var(--sans);font-size:13.5px;line-height:1.5;color:#B8BCC8}
.delay .held b{font-weight:600;color:var(--ivory)}
@media (max-width:900px){
  .keymap{grid-template-columns:1fr;row-gap:0;padding:24px 0}
  .keymap .side,.keymap .side.right{padding:0}
  .keymap .mid{min-height:0;padding:26px 0}
  .wire{display:none}
  .phases{display:none}
  .delays{grid-template-columns:1fr;row-gap:0;padding-top:0;border-left:2px solid var(--gold);margin-left:5px}
  .delay{padding:22px 0 24px 22px;border-bottom:2px solid var(--rule-dark)}
  .delay:last-child{border-bottom:0}
  .delay::before{top:26px;left:-6px}
  .delay::after{display:none}
}

/* ---------- forest strip ---------- */
.forest{display:grid;grid-template-columns:repeat(5,1fr);column-gap:32px;margin-top:34px;border-top:2px solid var(--ink);border-bottom:2px solid var(--rule);padding:30px 0 28px}
.forest .v{font-family:var(--serif);font-size:56px;font-weight:300;line-height:1;color:var(--navy-deep);letter-spacing:-.02em;white-space:nowrap}
.forest .v small{font-size:24px;margin-left:2px;color:var(--navy)}
.forest b{display:block;margin-top:12px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep)}
.forest span{display:block;margin-top:6px;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--muted)}
.forest i{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.04em;color:var(--gold-text);text-transform:uppercase}
.forest.m3{grid-template-columns:repeat(3,1fr);column-gap:48px}
.forest.m3 span{max-width:34ch}
.forest-note{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--muted);margin-top:14px;margin-bottom:72px}
#blind-spot .g h2{margin-top:18px}
#measures .forest-note{margin-bottom:0}
#blind-spot .g .lede{padding-top:46px}
@media (max-width:900px){
  .sec .lede{padding-top:0}
  .forest{grid-template-columns:1fr 1fr;row-gap:28px;column-gap:20px;padding:24px 0}
  .forest.m3{grid-template-columns:1fr}
  .forest .v{font-size:44px}
  .forest-note{margin-bottom:48px}
}

/* ---------- 26 Sep: outputs, basis note, aligned rules ---------- */
.outputs .frame h3{margin-bottom:14px}
.model .basis{max-width:62em}
.model .basis .status{margin-top:22px}
.model .basis .status+.status{margin-top:10px}
.frame{display:flex;flex-direction:column}
.frame .held{margin-top:auto}
.frame p:not(.held){margin-bottom:16px}
.frame p:not(.held):last-child{margin-bottom:0}
.delay{display:flex;flex-direction:column}
.delay .held{margin-top:auto}
.delay p:not(.held):not(.n){margin-bottom:14px}
.forest.m3{border-bottom:0}
.quote{margin:8px 0 8px;padding:6px 0 6px 28px;border-left:3px solid var(--gold);max-width:46em}
.quote blockquote{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1.4;font-style:italic;color:var(--navy)}
.quote figcaption{margin-top:12px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.frames.trilogy{margin-top:48px}
.band h1{font-size:clamp(44px,6.2vw,82px);font-weight:350;margin-top:18px;max-width:18ch;color:var(--ivory);line-height:1.05}
.band h1 em{font-style:italic;color:var(--gold-soft)}
#writing .case{margin-top:48px}
.more{margin-top:22px;font-family:var(--sans);font-size:15px;letter-spacing:.02em;color:var(--muted)}
.more a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px;margin-left:6px}

/* ---------- 26 Sep: article navigation and chart full screen ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:50;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.crumbs{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.crumbs a{color:var(--navy);text-decoration:none;border-bottom:2px solid transparent}
.crumbs a:hover{border-bottom-color:var(--gold)}
.crumbs span[aria-current]{color:var(--muted);font-weight:400;letter-spacing:.06em;text-transform:none;font-size:14px}
.art-head .byline a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold)}
.toc-inline{margin-top:26px;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);font-family:var(--sans)}
.toc-inline summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);list-style:none}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline summary::after{content:"+";float:right;font-weight:400;color:var(--gold)}
.toc-inline[open] summary::after{content:"\2212"}
.toc-inline ol,.toc ol{list-style:none;counter-reset:t}
.toc-inline li,.toc li{counter-increment:t}
.toc-inline a,.toc a{display:block;text-decoration:none;color:var(--ink);font-size:15px;line-height:1.4}
.toc-inline a{padding:8px 0;border-top:2px solid var(--rule)}
.toc-inline a::before,.toc a::before{content:counter(t) ". ";color:var(--gold-text);font-weight:600}
.toc{display:none}
@media (min-width:1440px){
  .toc{display:block;position:fixed;top:140px;left:calc(50% - 700px);width:180px;font-family:var(--sans);max-height:calc(100vh - 180px);overflow:auto}
  .toc .n{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .toc a{padding:7px 0 7px 10px;border-left:3px solid var(--rule);font-size:13.5px;color:var(--muted)}
  .toc a:hover{color:var(--navy)}
  .toc a.on{border-left-color:var(--gold);color:var(--navy-deep);font-weight:600}
  .toc-inline{display:none}
}
figure.chart .card{position:relative;cursor:zoom-in}
.zoom{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--rule);background:var(--paper);color:var(--navy);cursor:pointer;opacity:.85}
.zoom:hover,.zoom:focus-visible{opacity:1;border-color:var(--gold)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(19,31,56,.96);display:flex;align-items:center;justify-content:center;padding:56px 32px 32px;overflow:auto;touch-action:pinch-zoom}
.lightbox[hidden]{display:none}
.lightbox figure{margin:auto;max-width:min(1600px,100%)}
.lightbox img{display:block;width:auto;max-width:100%;max-height:calc(100vh - 150px);margin:0 auto;background:var(--paper);padding:14px}
.lightbox figcaption{margin-top:14px;font-family:var(--sans);font-size:15px;line-height:1.5;color:#E3DFD3;max-width:60em}
.lightbox figcaption b{color:var(--gold-soft)}
.lb-close{position:fixed;top:14px;right:18px;width:40px;height:40px;border:2px solid var(--rule-dark);background:transparent;color:var(--ivory);font-size:26px;line-height:1;cursor:pointer}
.lb-close:hover,.lb-close:focus-visible{border-color:var(--gold)}
.lightbox.in{animation:lbin .25s ease}
@keyframes lbin{from{opacity:0}to{opacity:1}}
html.lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.lightbox.in{animation:none}}

/* ---------- 26 Sep: sticky menu, writing call to action ---------- */
.mast.scrolled{box-shadow:0 4px 18px rgba(19,31,56,.10)}
.mast.scrolled .wrap{height:52px}
section[id],.art h2[id],main[id]{scroll-margin-top:72px}
.toc{top:150px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;padding:20px 24px;border:2px solid var(--gold);text-decoration:none;color:var(--navy-deep);background:transparent;transition:background .25s ease,color .25s ease}
.cta span{font-size:clamp(18px,1.6vw,21px);line-height:1.35}
.cta b{flex:none;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);white-space:nowrap;transition:color .25s ease}
.cta i{display:inline-block;font-style:normal;margin-left:10px;color:var(--gold-text);transition:transform .25s ease,color .25s ease}
.cta:hover,.cta:focus-visible{background:var(--gold);color:var(--navy-deep)}
.cta:hover b,.cta:focus-visible b,.cta:hover i,.cta:focus-visible i{color:var(--navy-deep)}
.cta:hover i,.cta:focus-visible i{transform:translateX(6px)}
.js .cta.in i{animation:nudge 1.4s ease .8s 3}
@keyframes nudge{0%,100%{transform:none}40%{transform:translateX(10px)}60%{transform:translateX(4px)}}
@media (max-width:900px){.cta{flex-direction:column;align-items:flex-start;gap:12px}}
@media (prefers-reduced-motion:reduce){.js .cta.in i{animation:none}.mast,.mast .wrap,.cta,.cta i{transition:none}}
.art .note.update{border:2px solid var(--gold);background:var(--paper);padding:16px 20px;margin:0 0 1.6em;color:var(--ink)}

/* ---------- 26 Sep: graphic pass (4K and phone) ---------- */
.model .head{grid-column:1/-1}
.model .head h2{max-width:22ch}
.model .head-lede{grid-column:2}
.model .head-lede .lede{padding-top:30px}
#measures{padding-bottom:64px}
.forest b{font-size:15px}
.forest span{font-size:16px;line-height:1.55}
.forest.m3 span{max-width:36ch}
.forest i{font-size:13px}
.forest-note{font-size:14px}
.model .status{font-size:16.5px}
.record b{font-size:16px}
.record span{font-size:17px;line-height:1.6}
.record code{font-size:15px}
.delay h3{font-size:26px}
.delay p{font-size:18px}
.delay .held{font-size:15px}
.phases span{font-size:13px}
#blind-spot .sub{margin-top:36px}
.articles-lede{padding-top:0!important}
.art .drop::first-letter{font-size:3.3em;line-height:.8;padding:5px 10px 0 0}
@supports (initial-letter:2) or (-webkit-initial-letter:2){
  .art .drop::first-letter{-webkit-initial-letter:2;initial-letter:2;float:none;font-size:inherit;line-height:inherit;padding:0;margin-right:10px}
}
.nav a{white-space:nowrap}
@media (max-width:900px){
  .model .head-lede{grid-column:1}
  .model .head-lede .lede{padding-top:0}
  #blind-spot .g .lede{padding-top:0}
  #measures{padding-bottom:48px}
}
@media (max-width:600px){
  .record{grid-template-columns:1fr}
  .record div,.record div:nth-child(2n),.record div:nth-child(2n+1),.record div+div{padding:16px 0 18px;border-right:0;border-bottom:2px solid var(--rule-dark)}
  .record div:nth-child(n+5){border-bottom:2px solid var(--rule-dark)}
  .record div:last-child{border-bottom:0}
}
@media (max-width:480px){
  .nav{gap:18px}
}
#blind-spot .quote{margin-top:44px}
.model .basis{margin-top:36px}
@media (min-width:901px){.delay .held{min-height:80px}}
@media (max-width:900px){.kicker .ex{display:block;margin:6px 0 0}}
figure.chart picture{display:block}
.art-lab,.articles-lede{margin-top:64px}
@media (max-width:900px){.art-lab{margin-top:48px}.articles-lede{margin-top:0}}
.model .basis .status:first-child{margin-top:0}

/* ---------- 26 Sep: one event, every line; the model shown; one action ---------- */
.nav{align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:var(--gold);color:var(--navy-deep);font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.05em;text-decoration:none;border:2px solid var(--gold);transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover,.btn:focus-visible{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--rule-dark)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--gold);color:var(--ivory);background:transparent}
.nav .btn.sm{padding:7px 14px;font-size:13.5px;letter-spacing:.05em;color:var(--navy-deep)}
.nav .btn.sm:hover{color:var(--navy-deep)}
.btn .sh{display:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:26px}
.hero2{background:var(--navy-deep);color:#E3DFD3}
.hero2 .wrap{padding-top:64px;padding-bottom:60px}
.h2top{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);align-items:end}
.hero2 .eyebrow{color:var(--gold-soft)}
.hero2 h1{font-size:clamp(46px,5.4vw,78px);font-weight:350;color:var(--ivory);line-height:1.02;margin-top:18px}
.hero2 h1 em{font-style:italic;color:var(--gold-soft)}
.hero2 .lede{font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#E3DFD3;max-width:30em}
.hero2 .lede em{font-style:italic;color:var(--gold-soft)}
.who{margin-top:20px;font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#B8BCC8}
.who a{color:var(--ivory);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.who span::before{content:"\00B7";margin:0 10px;color:var(--gold-soft)}
.hero-fig{margin-top:46px;border-top:2px solid var(--gold-soft);padding-top:30px}
.hero-fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig-m{display:none}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);column-gap:28px;margin-top:28px;border-top:2px solid var(--rule-dark);padding-top:0}
.steps li{color:#C9CDD8}
.steps b{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy-deep);font-family:var(--sans);font-size:13px}
.fig-note{margin-top:16px;font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;color:#8E94A3;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.replay{background:none;border:0;border-bottom:2px solid var(--gold);color:var(--gold-soft);font:inherit;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px;font-weight:600;cursor:pointer;padding:0 0 1px}
.replay[hidden]{display:none}
.hero-fig .t{font-family:"Newsreader",Georgia,serif;font-size:19px;fill:#F6F3EC}.hero-fig .s{font-family:"Source Sans 3",Arial,sans-serif;font-size:14px;letter-spacing:.05em;fill:#B8BCC8}.hero-fig .s.g{fill:#D9BC62}.hero-fig .s.m{fill:#B8BCC8}.hero-fig .h{font-family:"Source Sans 3",Arial,sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.14em;fill:#D9BC62}.hero-fig .k{font-family:"Source Sans 3",Arial,sans-serif;font-weight:600;font-size:21px;letter-spacing:.08em;fill:#D9BC62}.hero-fig .bx{fill:#182747;stroke:#C9A227;stroke-width:1.6}.hero-fig .tl{font-family:"Source Sans 3",Arial,sans-serif;font-weight:600;fill:#131F38}.hero-fig .wr{fill:none;stroke:#C9A227;stroke-width:2.8}.hero-fig .st-dep .wr{stroke-width:2.2;stroke-dasharray:10 7}.hero-fig .st-dep .bx{stroke-dasharray:8 6}.hero-fig .st-no .wr{stroke:#6B7385;stroke-width:1.2}.hero-fig .st-no .bx{stroke:#6B7385;stroke-width:1.2;fill:#16213B}.hero-fig .st-no .t{fill:#8E94A3}.hero-fig .st-no .s.g{fill:#7D8392}.hero-fig .st-no .tab{fill-opacity:.45}.hero-fig .pill{fill:#131F38;stroke:#D9BC62;stroke-width:1.3;stroke-dasharray:4 3}.hero-fig .it{font-style:italic}.hero-fig .g2{fill:#D9BC62}.hero-fig .iv{fill:#F6F3EC}.hero-fig .hv{font-size:12.5px;letter-spacing:.03em}
.hero-fig .spark{transform-box:fill-box;transform-origin:center}
/* animation: the figure starts complete; JS dims it first, then plays the four steps */
.js .hero-fig:not(.still) .k1,.js .hero-fig:not(.still) .k2,.js .hero-fig:not(.still) .k3,.js .hero-fig:not(.still) .k4{opacity:.14;transition:opacity .55s ease var(--d,0s)}
.js .hero-fig.s2 .k1,.js .hero-fig.s2 .k2,.js .hero-fig.s3 .k3,.js .hero-fig.s5 .k4{opacity:1}
.hero-fig .ln.st-no,.js .hero-fig.s2 .k2.st-no{opacity:.62}
.js .hero-fig:not(.still) .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease var(--d,0s),opacity .3s ease var(--d,0s)}
.js .hero-fig.s2 .k1.draw,.js .hero-fig.s2 .k2.draw{stroke-dashoffset:0}
.js .hero-fig:not(.still) .grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform 1.1s ease,opacity .3s ease}
.js .hero-fig:not(.still) .grow.slow{transition-duration:2.6s,.3s}
.js .hero-fig.s5 .grow{transform:none}
.js .hero-fig:not(.still) .late{transition-delay:1.9s}
.js .hero-fig.s2 .spark{animation:pulse .9s ease 2}
.js .hero-fig.s2 .k2 .lit .bx{animation:flash 1.1s ease var(--d,0s) 1 both}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes flash{0%{stroke-width:1.6}35%{stroke-width:4;stroke:#F2D675}100%{stroke-width:1.6}}
.steps button{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:3px solid transparent;padding:10px 0 0;cursor:pointer;font:inherit;color:inherit;transition:border-color .3s ease,color .3s ease,opacity .3s ease}
.steps button span{font-family:var(--sans);font-size:15.5px;line-height:1.4}
.steps button:hover span{color:var(--ivory)}
.steps button.on{border-top-color:var(--gold)}
.steps button.on span{color:var(--ivory)}
.js .hero-fig:not(.still) .steps button{opacity:.55}
.js .hero-fig:not(.still) .steps button.on,.js .hero-fig:not(.still) .steps button.done{opacity:1}
.steps button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.step-note{margin-top:18px;font-family:var(--sans);font-size:15px;line-height:1.5;color:#C9CDD8;display:flex;gap:10px;align-items:flex-start;max-width:62em}
.step-note b{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--navy-deep);font-size:12.5px;margin-top:1px}
.legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:22px;font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:#C9CDD8}
.legend .lg{display:inline-flex;align-items:center;gap:10px}
.legend i{display:inline-block;width:34px;height:0;border-top:2.5px solid var(--gold)}
.legend .dep i{border-top-style:dashed}
.legend .no i{border-top-color:#5E6678}
.legend .no{color:#8E94A3}
.legend .lg-br{display:none}
.legend .ced b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:2px;color:var(--navy-deep);font-size:13px;font-weight:600}
.legend .ced:first-of-type{margin-left:14px}
.tav-sep{height:2px;background:var(--rule-dark);margin:34px 0 30px}
/* the stage: one plate at a time, always inside one screen */
.plate svg{display:block;width:100%;height:auto}
.plate.pb{margin-top:34px;padding-top:30px;border-top:2px solid var(--rule-dark)}
.js .plates{display:grid}
.js .plate{grid-area:1/1;align-self:center;transition:opacity .6s ease,visibility .6s}
.js .plate.pb{margin-top:0;padding-top:0;border-top:0}
.js .plate svg{width:auto;max-width:100%;max-height:max(calc(100vh - 290px),340px);margin:0 auto}
.js .hero-fig:not(.s4) .plate.pb{opacity:0;visibility:hidden}
.js .hero-fig.s4 .plate.pa{opacity:0;visibility:hidden}
.js .hero-fig.s4 .legend{opacity:.35}
.legend{transition:opacity .6s ease}
.stage .steps{margin-top:22px}
@media (prefers-reduced-motion:reduce){.js .plate,.legend{transition:none}}
@media (min-width:601px) and (max-width:900px){.legend{gap:8px 18px;font-size:13px}.legend i{width:24px}}
@media (max-width:600px){
  .js .plate svg{width:100%;max-height:none}
  .legend{gap:6px 9px;font-size:12px;letter-spacing:0;margin-bottom:14px}
  .legend .lg{gap:5px}
  .legend i{width:14px}
  .legend .lg-br{display:block;flex-basis:100%;height:0}
  .legend .ced:first-of-type{margin-left:0}
  .legend .ced b{width:19px;height:19px;font-size:12px}
  .stage .steps{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
  .stage .steps li{flex:none}
  .stage .steps li:has(button.on){flex:1}
  .steps button{padding-top:8px;gap:8px}
  .steps button span{display:none;font-size:14px;line-height:1.3}
  .steps button.on span{display:block}
  .legend{margin-bottom:10px}
}
.legend i{border-top-width:3px}
@media (prefers-reduced-motion:reduce){.hero-fig .k1,.hero-fig .k2,.hero-fig .k3,.hero-fig .k4{opacity:1!important;transition:none!important;animation:none!important;stroke-dashoffset:0!important;transform:none!important}}
/* the model outputs, shown */
.mini{display:block;width:100%;max-width:300px;height:auto;margin-bottom:20px;overflow:visible}
.mini .ms{font-family:var(--sans);font-size:13.5px;letter-spacing:.03em;fill:#B8BCC8}
.mini .ms.b{fill:var(--gold-soft);font-weight:600}
.spec{border-top:2px solid var(--gold-soft);padding:20px 0 24px}
.spec-q{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--ivory)}
.spec-q span{font-weight:400;color:#B8BCC8;margin-left:12px;letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{font-family:var(--sans);font-size:15.5px;padding:8px 18px;border:2px solid var(--rule-dark);background:transparent;color:#E3DFD3;cursor:pointer;border-radius:999px;transition:background .2s ease,border-color .2s ease,color .2s ease}
.chip:hover,.chip:focus-visible{border-color:var(--gold);outline:none}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);font-weight:600}
.spec-out{margin-top:18px;font-size:21px;line-height:1.4;color:var(--ivory)}
.spec-out b{font-weight:500;color:var(--gold-soft)}
.spec-note{display:block;margin-top:8px;font-family:var(--sans);font-size:15.5px;line-height:1.5;color:#C9CDD8}
.spec-note a{color:var(--ivory);text-decoration:none;border-bottom:2px solid var(--gold)}
#delays{scroll-margin-top:90px}
.spec-sum{margin-top:6px;font-family:var(--sans);font-size:14.5px;color:#B8BCC8}
.about-portrait{margin-top:40px;max-width:300px}
.contact .ctas{margin-top:28px}
@media (max-width:1200px){.nav li.n-x{display:none}}
@media (max-width:900px){
  .nav li.n-c{display:none}
  .btn .l{display:none}.btn .sh{display:inline}
  .h2top{grid-template-columns:1fr;row-gap:22px}
  .hero2 .wrap{padding-top:40px;padding-bottom:44px}
  .hero-fig{margin-top:34px;padding-top:24px}
  .steps{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:4px}
  .steps button span{font-size:14.5px}
  .about-portrait{max-width:260px;margin-top:28px}
}
@media (max-width:600px){
  .fig-d{display:none}.fig-m{display:block}
  .spec-out{font-size:19px}
}
@media (max-width:480px){.nav li.n-w{display:none}}

/* ---------- 26 Sep: the three numbers as one block; gold as text; large screens ---------- */
.dark .frame .n{color:var(--gold-soft)}
.forest.big{border-top:3px solid var(--ink);margin-top:30px;padding:0;column-gap:0}
.forest.big .f{padding:28px 36px 8px;border-left:2px solid var(--gold)}
.forest.big .f:first-child{border-left:0;padding-left:0}
.forest.big .f:last-child{padding-right:0}
.forest.big .v{font-size:clamp(84px,8.4vw,136px);font-weight:250;line-height:.92;letter-spacing:-.035em;color:var(--navy-deep)}
.forest.big .v small{font-size:.3em;margin-left:.12em;letter-spacing:0;color:var(--navy)}
.forest.big .f:nth-child(2) .v small{font-style:italic;font-size:.34em;margin:0 .14em;color:var(--gold-text)}
.forest.big b{margin-top:22px;font-size:15px}
.forest.big span{font-size:16.5px;line-height:1.55;color:var(--ink);opacity:.82}
.forest.big i{margin-top:12px}
.js .forest.big .v{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.js .forest.big.in .v{opacity:1;transform:none}
.js .forest.big.in .f:nth-child(2) .v{transition-delay:.18s}
.js .forest.big.in .f:nth-child(3) .v{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.js .forest.big .v{opacity:1;transform:none;transition:none}}
@media (max-width:900px){
  .forest.big .f,.forest.big .f:first-child{border-left:0;border-top:2px solid var(--gold);padding:22px 0 20px}
  .forest.big .f:first-child{border-top:0}
  .forest.big .v{font-size:84px}
}
/* large screens: the whole page scales with the screen, the proportions stay */
@media (min-width:1600px){html{zoom:1.08}}
@media (min-width:2000px){html{zoom:1.25}}
@media (min-width:2500px){html{zoom:1.5}}
@media (min-width:3200px){html{zoom:1.85}}
@media (min-width:901px){.delay .held{min-height:128px}}

/* 27 Sept 2026: illustrations on an ivory mount open each plate */
.pic .mount{background:var(--ivory);padding:12px 12px 9px;margin:0 auto;box-shadow:0 0 0 2px var(--rule-dark)}
.pic picture,.pic img{display:block;width:100%;height:auto}
.pic-cap{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-family:var(--sans);font-size:12px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.pic-cap b{font-weight:600}
.pic-cap span{color:#5E6472;letter-spacing:.08em}
.plate.pa .pic{margin-bottom:30px}
.plate.pa .mount{width:min(620px,100%)}
.plate.pb .pic{margin-bottom:22px}
.plate.pb .mount{width:min(620px,100%)}
.js .plate.pa{display:grid}
.js .plate.pa>.pic,.js .plate.pa>.dia{grid-area:1/1;align-self:center;transition:opacity .6s ease,visibility .6s}
.js .plate.pa>.pic{margin-bottom:0}
.js .plate.pa .mount{width:min(620px,max(calc(100vh - 260px),300px),100%)}
.js .plate.pb .mount{width:min(620px,max(calc((100vh - 640px) * 1.78),300px),100%)}
.js .hero-fig:not(.s2) .legend{opacity:.35}

.js .hero-fig.s2 .plate.pa>.pic{opacity:0;visibility:hidden}
.js .hero-fig:not(.s2) .plate.pa>.dia{opacity:0;visibility:hidden}
.js .hero-fig.still .plate.pa{display:block}
.js .hero-fig.still .plate.pa>.pic{opacity:1;visibility:visible;margin-bottom:30px}
@media (prefers-reduced-motion:reduce){.js .plate.pa>.pic,.js .plate.pa>.dia{transition:none}}
@media (max-width:600px){.js .plate.pa>.pic{align-self:start}.js .plate.pa .mount,.js .plate.pb .mount{width:100%}.pic .mount{padding:8px 8px 6px}.pic-cap{font-size:11px}}

/* 27 Sept 2026, second pass: the hero on ivory, sized to one screen */
.hero2{background:var(--ivory);color:var(--ink)}
.hero2 .wrap{padding-top:40px;padding-bottom:40px}
.hero2 .eyebrow{color:var(--navy)}
.hero2 h1{color:var(--navy-deep)}
.hero2 h1 em{color:var(--gold-text)}
.hero2 .lede{color:var(--ink)}
.hero2 .lede em{color:var(--navy)}
.hero2 .brief{margin-top:24px}
.hero2 .btn.ghost{color:var(--navy-deep);border-color:rgba(31,56,100,.45)}
.hero2 .btn.ghost:hover,.hero2 .btn.ghost:focus-visible{border-color:var(--gold);color:var(--navy-deep)}
.hero2 .who{color:var(--muted)}
.hero2 .who a{color:var(--navy-deep)}
.hero2 .who span::before{color:var(--gold-text)}
.hero-fig{--stage:max(calc(100vh - 520px),320px);margin-top:26px;padding-top:22px;border-top-color:var(--gold)}
.stage{position:relative}
.hero-fig .replay[hidden]{display:none}
.hero-fig .replay{position:absolute;top:0;right:0;color:var(--gold-text);border-bottom-color:var(--gold)}
.legend{color:var(--muted);padding-right:90px}
.legend .no{color:#9A9FAB}
.legend .no i{border-top-color:#B9BCC4}
.steps{border-top-color:var(--rule)}
.steps li{color:var(--muted)}
.steps button:hover span,.steps button.on span{color:var(--navy-deep)}
.step-note{color:var(--ink)}
.fig-note{color:var(--muted)}
/* the diagrams on ivory */
.hero-fig .t,.hero-fig .iv{fill:var(--navy-deep)}
.hero-fig .s,.hero-fig .s.m{fill:#5E6472}
.hero-fig .s.g,.hero-fig .h,.hero-fig .k,.hero-fig .g2{fill:#86690F}
.hero-fig .bx{fill:#FBF9F4;stroke:#B08A1E}
.hero-fig .pill{fill:#FBF9F4;stroke:#B08A1E}
.hero-fig .st-no .wr{stroke:#B9BCC4}
.hero-fig .st-no .bx{stroke:#C4C6CC;fill:#F1EEE6}
.hero-fig .st-no .t{fill:#9A9FAB}
.hero-fig .st-no .s.g{fill:#A99A6E}
.hero-fig [stroke="#D9BC62"]{stroke:#B08A1E}
.hero-fig [fill="#131F38"]{fill:#FBF9F4}
.hero-fig [stroke="#F6F3EC"]{stroke:var(--navy-deep)}
.hero-fig [stroke="#B8BCC8"]{stroke:#8E94A3}
.hero-fig [stroke="rgba(217,188,98,.38)"]{stroke:rgba(134,105,15,.35)}
@keyframes flashl{0%{stroke-width:1.6}35%{stroke-width:4;stroke:#86690F}100%{stroke-width:1.6}}
.js .hero-fig.s2 .k2 .lit .bx{animation-name:flashl}
/* the illustrations: a paper mount on the ivory page */
.pic .mount{background:var(--paper);box-shadow:0 0 0 2px var(--rule)}
/* one screen: each plate is one cell, picture first, then the diagram */
.js .plate.pb{display:grid}
.js .plate.pb>.pic,.js .plate.pb>.dia{grid-area:1/1;align-self:center;transition:opacity .6s ease,visibility .6s}
.js .plate.pb>.pic{margin-bottom:0}
.js .hero-fig.s5 .plate.pb>.pic{opacity:0;visibility:hidden}
.js .hero-fig:not(.s5) .plate.pb>.dia{opacity:0;visibility:hidden}
.js .hero-fig .plate .dia svg{max-height:var(--stage)}
.js .plate.pa .mount{width:min(620px,calc(var(--stage) - 24px),100%)}
.js .plate.pb .mount{width:min(1000px,calc((var(--stage) - 46px) * 1.78 + 24px),100%)}
.js .hero-fig.s4:not(.s5) .legend{opacity:.35}
@media (prefers-reduced-motion:reduce){.js .plate.pb>.pic,.js .plate.pb>.dia{transition:none}}
@media (max-width:600px){
  .stage{display:flex;flex-direction:column}
  .hero-fig .replay{position:static;display:block;order:9;align-self:flex-start;margin-top:14px}
  .legend{padding-right:0}
  .js .plate.pa .mount,.js .plate.pb .mount{width:100%}
  .js .plate.pb>.pic{align-self:start}
  .js .hero-fig .plate .dia svg{max-height:none}
  .js .hero-fig:not(.s2) .plate.pa>.dia,.js .hero-fig.s2 .plate.pa>.pic,.js .hero-fig:not(.s5) .plate.pb>.dia,.js .hero-fig.s5 .plate.pb>.pic{display:none}
}
/* tighter hero so the figure fits one screen */
.hero2 .wrap{padding-top:30px;padding-bottom:34px}
.hero2 h1{font-size:clamp(44px,4.6vw,68px);margin-top:14px}
.hero2 .lede{font-size:clamp(18px,1.45vw,21px)}
.hero2 .brief{margin-top:20px}
.hero2 .who{margin-top:14px}
:root{--z:1}
@media (min-width:1600px){:root{--z:1.08}}
@media (min-width:2000px){:root{--z:1.25}}
@media (min-width:2500px){:root{--z:1.5}}
@media (min-width:3200px){:root{--z:1.85}}
.hero-fig{--stage:max(calc(100vh / var(--z) - 650px),240px);margin-top:22px;padding-top:20px}
.legend{margin-bottom:16px}
.stage .steps{margin-top:16px}
/* navy moves to the measures band and to contact */
#measures.dark .eyebrow{color:var(--gold-soft)}
#measures.dark .forest.big{border-top-color:var(--gold-soft)}
#measures.dark .forest.big .v{color:var(--ivory)}
#measures.dark .forest.big .v small,#measures.dark .forest.big .f:nth-child(2) .v small{color:var(--gold-soft)}
#measures.dark .forest b{color:var(--ivory)}
#measures.dark .forest.big span{color:#D5D8E0;opacity:1}
#measures.dark .forest i{color:var(--gold-soft)}
#measures.dark .forest-note{color:#9EA3B0}
.contact.dark .lede{color:#E3DFD3}
.contact.dark .links-list{border-top-color:var(--gold-soft)}
.contact.dark .links-list li{border-bottom-color:var(--rule-dark)}
.contact.dark .links-list a{color:var(--ivory)}
.contact.dark .links-list a span{color:var(--gold-soft)}
.contact.dark .links-list a:hover{color:var(--gold-soft)}
.contact.dark .btn.ghost{color:var(--ivory)}

/* 28 Sept 2026: replay above the legend; later text hidden; one caption per step */
.hero-fig .replay{z-index:5}
.js .hero-fig:not(.s2):not(.still) .k2 text,.js .hero-fig:not(.s3):not(.still) .k3 text,.js .hero-fig:not(.s4):not(.still) .k4 text{opacity:0}
.step-notes{display:grid;margin-top:18px;max-width:62em}
.step-notes .step-note{margin-top:0;display:block}
.step-note small{display:block;margin-top:6px;font-size:13px;letter-spacing:.02em;color:var(--muted)}
.js .step-notes .step-note{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.js .hero-fig.s1:not(.s2) .sn1,.js .hero-fig.s2:not(.s3) .sn2,.js .hero-fig.s3:not(.s4) .sn3,.js .hero-fig.s4 .sn4{opacity:1;visibility:visible}
.js .hero-fig:not(.s1) .sn1{opacity:1;visibility:visible}
.step-notes .step-note+.step-note{margin-top:12px}
.js .step-notes .step-note+.step-note{margin-top:0}
.pic-cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.js .step-notes .step-note{transition:none}}

/* 28 Sept 2026: the legend only in steps 2 and 3, space kept */
.js .hero-fig .legend{transition:opacity .6s ease,visibility .6s}
.js .hero-fig:not(.still):not(.s2) .legend,.js .hero-fig:not(.still).s4 .legend{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.js .hero-fig .legend{transition:none}}

/* ---------- 28 Sep, build7: record on its own page; one CTA label; lede under its title; small text raised ---------- */
.model .head .lede{margin-top:0;padding-top:24px;max-width:40em;color:#E3DFD3}
.cta.on-dark{margin-top:56px;color:var(--ivory);border-color:var(--gold)}
.cta.on-dark b{color:var(--gold-soft)}
.cta.on-dark i{color:var(--gold-soft)}
.cta.on-dark:hover,.cta.on-dark:focus-visible{background:var(--gold);color:var(--navy-deep)}
.cta.on-dark:hover b,.cta.on-dark:focus-visible b,.cta.on-dark:hover i,.cta.on-dark:focus-visible i{color:var(--navy-deep)}
#record .sec{padding-top:64px}
#record .kicker .ex{display:block;margin:8px 0 0}
@media (max-width:900px){.btn .l{display:inline}}
/* labels in capitals: 13px minimum; running small text: 14px minimum */
.frame .n,.case .three .n,.area .n,.keymap .n,.delay .n,.phases span,.quote figcaption,.earlier a span,.art-foot a span{font-size:13px}
.step-note small,.fig-note,.forest i,.kicker .ex,.who a,.who span,.links-list a span,footer .wrap{font-size:14px}
.pic-cap span{font-size:13px}
@media (max-width:400px){.mast .btn.sm{padding-left:12px;padding-right:12px;font-size:13px;letter-spacing:.01em}.mark{letter-spacing:.12em}.mast .nav{gap:10px}}
@media (max-width:350px){.mast .btn.sm{padding-left:9px;padding-right:9px;font-size:12.5px;letter-spacing:0}.mark{letter-spacing:.06em}}

/* 28 Sep, build9: disclaimer on the record page */
#record .rec-status{margin:0 0 22px;font-size:15px}


/* ---------- 28 Sep, build11: layout as before, space recovered (empty legend row, margins) ---------- */
.js .hero-fig .legend{position:absolute;top:0;left:0;right:0;z-index:2;margin:0}
.js .plate.pa>.dia{padding-top:36px}
.hero-fig{margin-top:14px;padding-top:14px}
.stage .steps{margin-top:12px}
.step-notes{margin-top:12px}
.fig-note{margin-top:10px}
.hero-fig{--stage:max(calc(100vh / var(--z) - 635px),200px)}
@media (max-width:900px){
  .js .hero-fig .legend{position:static}
  .js .plate.pa>.dia{padding-top:0}
}

/* ---------- 28 Sep, build12: data hall band, new photo (Getty Images for Unsplash+, fLVarAqM4v0), lighter and less saturated ---------- */
#model .band img,#record .band img{filter:grayscale(.6) contrast(1) brightness(1.1)}
#model .band::before,#record .band::before{background:linear-gradient(180deg,rgba(19,31,56,.18) 0%,rgba(19,31,56,.36) 45%,rgba(19,31,56,.78) 75%,rgba(19,31,56,.94) 100%)}

/* ---------- 28 Sep, build13: the model on ivory, the blind spot on navy ---------- */
.sec.model{background:var(--ivory);color:var(--ink)}
.sec.model .head .lede{color:var(--ink)}
.sec.model .kicker{color:var(--gold-text)}
.sec.model .kicker .ex{color:var(--muted)}
.sec.model .status{color:var(--muted)}
.sec.model .status b{color:var(--navy-deep)}
.sec.model .cta{margin-top:56px}
/* the three small drawings */
.sec.model .mini .ms{fill:#5E6472}
.sec.model .mini .ms.b{fill:#86690F}
.sec.model .mini [fill="#D9BC62"]{fill:#C9A227}
.sec.model .mini [fill="#182747"],.sec.model .mini [fill="#131F38"]{fill:#FBF9F4}
.sec.model .mini [stroke="#F6F3EC"]{stroke:var(--navy-deep)}
.sec.model .mini [stroke="#D9BC62"]{stroke:#B08A1E}
.sec.model .mini [stroke="rgba(217,188,98,.38)"]{stroke:rgba(134,105,15,.35)}
/* the four delays */
.sec.model .timeline{border-top-color:var(--gold)}
.sec.model .phases span{color:var(--muted)}
.sec.model .phases span+span{border-left-color:var(--rule)}
.sec.model .delay::before{border-color:var(--ivory)}
.sec.model .delay .n{color:var(--gold-text)}
.sec.model .delay h3{color:var(--navy-deep)}
.sec.model .delay p{color:var(--ink)}
.sec.model .delay .held{border-top-color:var(--rule);color:var(--muted)}
.sec.model .delay .held b{color:var(--navy-deep)}
/* the record (model page) */
.sec.model .record{border-top-color:var(--gold);border-bottom-color:var(--gold)}
.sec.model .record div{border-right-color:var(--rule);border-bottom-color:var(--rule)}
.sec.model .record b{color:var(--navy-deep)}
.sec.model .record span{color:var(--ink)}
.sec.model .record code{color:#86690F;background:rgba(134,105,15,.08)}
.sec.model .spec{border-top-color:var(--gold)}
.sec.model .spec-q{color:var(--navy-deep)}
.sec.model .spec-q span{color:var(--muted)}
.sec.model .chip{border-color:var(--rule);color:var(--ink)}
.sec.model .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.sec.model .spec-out{color:var(--ink)}
.sec.model .spec-out b{color:#86690F}
.sec.model .spec-note{color:var(--muted)}
.sec.model .spec-note a{color:var(--navy-deep)}
.sec.model .spec-sum{color:var(--muted)}
@media (max-width:900px){
  .sec.model .delay{border-bottom-color:var(--rule)}
  .sec.model .record div,.sec.model .record div:nth-child(2n),.sec.model .record div:nth-child(2n+1),.sec.model .record div+div,.sec.model .record div:nth-child(n+5){border-color:var(--rule)}
}
/* the blind spot on navy */
#blind-spot.dark .lede{color:#E3DFD3}
#blind-spot.dark .body{color:#C9CDD8}
#blind-spot.dark .quote{border-left-color:var(--gold)}
#blind-spot.dark .quote blockquote{color:var(--ivory)}
#blind-spot.dark .quote figcaption{color:var(--gold-soft)}

/* build14: privacy link in the footer, privacy page */
footer a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);margin-left:8px}
footer a:hover{color:var(--ink)}
footer a[aria-current]{border-bottom-color:transparent;color:var(--muted)}
.art.privacy{padding-bottom:72px}