:root{--forest:#1E3D34;--deep:#16302A;--sage:#B4BEAD;--sageT:#E7EBE3;--bone:#F7F5EF;--paper:#fff;--ink:#26282A;--mute:#63695F;--signal:#D96642;--rule:rgba(30,61,52,.14);--serif:"IBM Plex Serif",Georgia,serif;--sans:Inter,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:clamp(15px,1.02vw,17px);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.dot{color:var(--signal)}
nav{position:sticky;top:0;z-index:90;background:rgba(247,245,239,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
nav .wrap{display:flex;align-items:center;height:62px;gap:26px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:30px;height:30px}
.brand span{font-family:var(--serif);font-size:1rem;letter-spacing:.14em;color:var(--forest)}
nav ul{display:flex;gap:22px;margin-left:auto;list-style:none;font-size:.8rem;font-weight:500}
nav ul a{text-decoration:none;opacity:.85}
nav ul a:hover{opacity:1;color:var(--signal)}
nav ul a.on{color:var(--signal)}
@media(max-width:820px){nav ul{gap:14px;font-size:.72rem}}
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--mute);padding:20px 0 0}
.crumb a{text-decoration:none;color:var(--mute)} .crumb a:hover{color:var(--signal)}
header.page{padding:clamp(34px,6vw,64px) 0 clamp(22px,3vw,34px)}
header.page h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:22ch;margin:.35em 0 .3em}
header.page .lede{max-width:62ch;color:#3B4038;font-size:clamp(.98rem,1.15vw,1.08rem)}
main{padding-bottom:clamp(60px,8vw,100px)}
section.block{padding:clamp(30px,4.5vw,52px) 0;border-top:1px solid var(--rule)}
section.block h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:18px}
section.block h3{font-size:1.12rem;margin:26px 0 8px;color:var(--forest)}
p{max-width:68ch;margin-bottom:14px}
p.note,.src{font-family:var(--mono);font-size:.66rem;line-height:1.7;color:var(--mute)}
ul.plain{max-width:68ch;margin:0 0 14px 20px}
ul.plain li{margin-bottom:8px}
.callout{border-left:3px solid var(--signal);background:var(--paper);padding:16px 20px;max-width:68ch;margin:18px 0;font-size:.92rem}
.callout.green{border-left-color:var(--forest)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:8px}
.tile{background:var(--bone);padding:24px;text-decoration:none;display:block;transition:background .15s}
.tile:hover{background:var(--paper)}
.tile .n{font-family:var(--mono);font-size:.64rem;color:var(--signal)}
.tile h3{font-size:1.05rem;margin:9px 0 6px;color:var(--forest)}
.tile p{font-size:.82rem;color:var(--mute);line-height:1.5;margin:0}
.frow{margin-bottom:15px;max-width:640px}
.frow .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.frow .lab{font-size:.82rem;font-weight:500}
.frow .n{font-family:var(--serif);font-size:1.35rem;color:var(--forest)}
.track{display:flex;height:22px;gap:2px;background:var(--sageT)}
.seg{display:flex;align-items:center;justify-content:flex-end;padding-right:7px;font-family:var(--mono);font-size:.64rem;color:#fff}
.seg.un{background:var(--signal)}.seg.rp{background:var(--forest)}
.key{display:flex;gap:20px;font-size:.74rem;color:var(--mute);margin:10px 0 0}
.sw{display:inline-block;width:10px;height:10px;margin-right:6px}
.pairs{display:flex;gap:40px;flex-wrap:wrap;margin:18px 0}
.pn{font-family:var(--serif);letter-spacing:-.03em;line-height:.9;font-size:2.7rem}
.pn.a{color:var(--signal)}.pn.b{color:var(--forest)}
.pl{font-size:.72rem;color:var(--mute);margin-top:6px;max-width:16ch;line-height:1.45}
.tl{margin:10px 0}
.tstep{display:grid;grid-template-columns:58px 16px 1fr;gap:0 12px}
.ty{font-family:var(--mono);font-size:.72rem;color:var(--mute);text-align:right;padding-top:2px}
.tdot{width:9px;height:9px;border-radius:50%;background:var(--forest);margin:5px auto 0}
.tstep.hot .tdot{background:var(--signal)}
.tline{width:1.5px;height:100%;min-height:22px;background:var(--rule);margin:2px auto}
.tt{font-size:.86rem;line-height:1.5;padding-bottom:16px;max-width:52ch}
table.data{width:100%;border-collapse:collapse;font-size:.84rem;max-width:820px}
table.data th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--mute);font-weight:400;padding:0 12px 8px 0}
table.data td{padding:11px 12px 11px 0;border-top:1px solid var(--rule);vertical-align:top}
.pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;white-space:nowrap;border:1px solid var(--sage);color:var(--forest)}
.grow{display:grid;grid-template-columns:150px 1fr 30px;gap:10px;align-items:center;margin-bottom:8px;font-size:.78rem;max-width:640px}
.gb{height:14px;background:var(--sageT);position:relative}
.gf{position:absolute;inset:0 auto 0 0;background:var(--forest)}
.grow.hot .gf{background:var(--signal)}
.gn{font-family:var(--mono);font-size:.72rem;color:var(--mute)}
.next{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);margin-top:34px;padding-top:18px;font-size:.85rem}
.next a{text-decoration:none;color:var(--forest);font-weight:500}
.next a:hover{color:var(--signal)}
footer{background:var(--forest);color:var(--bone);padding:clamp(40px,6vw,64px) 0 30px;margin-top:60px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,50px)}
footer h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:rgba(247,245,239,.5);margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.84rem}
footer a{text-decoration:none;color:rgba(247,245,239,.85)}
footer a:hover{color:var(--signal)}
.ftag{font-family:var(--serif);font-size:1.35rem;line-height:1.3;max-width:20ch}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(247,245,239,.18);font-family:var(--mono);font-size:.6rem;line-height:1.8;color:rgba(247,245,239,.5);max-width:100%}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
.hero{background:var(--deep);color:var(--bone);position:relative;overflow:hidden}
.hero .wrap{padding:clamp(70px,11vw,120px) 0 clamp(60px,9vw,100px);position:relative;z-index:2;max-width:1140px;margin:0 auto;padding-left:clamp(20px,4vw,44px);padding-right:clamp(20px,4vw,44px)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);max-width:12ch;line-height:1.04}
.hero h1 em{font-style:italic;font-weight:300;color:var(--sage)}
.hero p{margin-top:20px;max-width:44ch;color:rgba(247,245,239,.72)}
.hero .eyebrow{color:rgba(247,245,239,.55)}
.cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{font-size:.84rem;font-weight:600;text-decoration:none;padding:12px 24px;border-radius:2px;border:1px solid var(--bone);transition:.2s}
.btn.solid{background:var(--bone);color:var(--deep)}
.btn.solid:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.ghost{color:var(--bone);border-color:rgba(247,245,239,.35)}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal)}
#heroMark{position:absolute;right:max(-14vw,-240px);top:50%;transform:translateY(-50%);width:min(66vw,760px);height:min(66vw,760px);pointer-events:none}
#heroMark path{fill:none;stroke:var(--sage);stroke-width:1.1;opacity:.4}
#heroMark path.hot{stroke:var(--signal);opacity:.85;stroke-width:1.35}
.strip{background:var(--forest);color:var(--sage);overflow:hidden;padding:12px 0;border-top:1px solid rgba(247,245,239,.1)}
.strip .inner{display:flex;gap:52px;width:max-content;animation:mq 36s linear infinite;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.strip b{color:var(--bone);font-weight:500}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- MOBILE FIXES ---------- */
html,body{max-width:100%;overflow-x:hidden}
nav .wrap{gap:14px}
nav ul{flex-wrap:wrap;row-gap:2px}
@media(max-width:900px){
  nav .wrap{height:auto;min-height:56px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .brand{flex:0 0 auto}
  nav ul{margin-left:0;flex:1 1 100%;gap:12px 16px;font-size:.74rem;padding-bottom:4px;
         overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav ul::-webkit-scrollbar{display:none}
  nav ul li{white-space:nowrap}
}
@media(max-width:560px){
  body{font-size:15px}
  .hero .wrap{padding-top:56px;padding-bottom:48px}
  .hero h1{font-size:clamp(2.1rem,10vw,3rem);max-width:100%}
  #heroMark{right:-38vw;width:120vw;height:120vw;opacity:.55}
  .cta{gap:10px}.btn{padding:11px 18px;font-size:.8rem}
  header.page h1{font-size:clamp(1.75rem,7.6vw,2.3rem);max-width:100%}
  .grow{grid-template-columns:1fr 46px;gap:4px 8px}
  .grow .gb{grid-column:1/2}
  .grow .gn{grid-column:2/3;text-align:right}
  .grow span:first-child{grid-column:1/3}
  .pairs{gap:22px}
  .pn{font-size:2.2rem}.pn.big{font-size:3.2rem}
  .pl{max-width:22ch}
  table.data{display:block;overflow-x:auto;white-space:normal}
  table.data td,table.data th{min-width:120px}
  .tstep{grid-template-columns:44px 14px 1fr;gap:0 8px}
  .ty{font-size:.66rem}
  footer .cols{grid-template-columns:1fr 1fr;gap:22px}
  .frow .t{flex-wrap:wrap}
  .next{flex-direction:column;gap:10px}
  svg{max-width:100%}
}