/* Shared design system.
   Hybrid: dark bands (header, heroes, footer) over a light reading surface.
   Amber only works as an accent on dark, so there are two accents:
     --flare  on dark surfaces   (6.9:1 on --void,  2.6:1 on paper — never use on light)
     --ember  on light surfaces  (4.5:1 on paper,   AA for body text)
   Swap in assets/theme-dark.css for the all-dark variant. */
:root{
  /* surfaces */
  --void:#08090B;        /* page background */
  --panel:#101217;       /* cards, raised surfaces */
  --panel-2:#161922;     /* hover / nested */
  --rule:#242833;        /* hairlines */
  --rule-lit:#3A2A1E;    /* warm hairline near accents */

  /* ink */
  --text:#EDEAE5;        /* body — 16.3:1 on void */
  --muted:#9BA1AB;       /* secondary — 7.4:1 on void */
  --dim:#6B717C;         /* tertiary */

  /* accent — the Tron amber */
  --flare:#FF7A1A;       /* primary accent — 6.9:1 on void */
  --glow:#FFB454;        /* highlight, nodes — 10.2:1 on void */
  --deep:#C2400F;        /* pressed / borders */

  /* light reading surface */
  --paper:#FCFBFA;
  --paper-2:#FFFFFF;
  --ink:#14161A;          /* body on paper — 15.6:1 */
  --ink-muted:#565C66;    /* secondary on paper — 6.9:1 */
  --ink-dim:#7A818B;
  --ink-rule:#E6E1DC;
  --ember:#D6410F;        /* accent on paper — 4.54:1, AA */

  --maxw:74rem;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* the dark bands: header, every hero, the footer */
.site-head,.hero,.site-foot,.band{
  background-color:var(--void);color:var(--text);
  background-image:
    linear-gradient(rgba(255,122,26,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,122,26,.03) 1px,transparent 1px);
  background-size:72px 72px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--flare);color:#08090B;
  padding:.75rem 1rem;z-index:100;font-weight:600}
.skip:focus{left:0}
a{color:var(--ember);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--deep)}
.hero a,.site-foot a,.band a,.card-dark a{color:var(--flare)}
.hero a:hover,.site-foot a:hover,.band a:hover{color:var(--glow)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:30;
  background:rgba(8,9,11,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:4.75rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);
  font-weight:650;letter-spacing:-.015em;font-size:1.02rem}
.brand svg{width:30px;height:30px;display:block;flex:none}
nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-size:.88rem;font-weight:500;
  letter-spacing:.01em;padding:.25rem 0;position:relative}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{color:var(--text)}
nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--flare);box-shadow:0 0 10px rgba(255,122,26,.75)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:7rem 0 5rem;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:120%;
  background:radial-gradient(60% 55% at 22% 12%,rgba(255,122,26,.20),transparent 68%),
             radial-gradient(45% 45% at 88% 0%,rgba(255,180,84,.10),transparent 70%);
  pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--deep) 12%,var(--flare) 50%,var(--deep) 88%,transparent);
  box-shadow:0 0 14px rgba(255,122,26,.5)}
.hero .wrap{position:relative}
.hero-sm{padding:4.5rem 0 3rem}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flare);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--flare);
  box-shadow:0 0 8px rgba(255,122,26,.8)}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.03;letter-spacing:-.04em;
  margin:0 0 1.4rem;max-width:17ch;font-weight:680}
.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--muted);max-width:56ch;
  margin:0 0 2.25rem;line-height:1.6}
h2{font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.03em;line-height:1.12;
  margin:0 0 .9rem;font-weight:650}
h3{font-size:1.12rem;letter-spacing:-.015em;margin:0 0 .5rem;font-weight:620;line-height:1.35}
p{margin:0 0 1.1rem;max-width:66ch;color:var(--ink-muted)}
.hero p,.site-foot p,.band p{color:var(--muted)}
.hero .lede{color:var(--muted)}
p strong,li strong{color:var(--ink);font-weight:600}
.hero strong,.band strong{color:var(--text)}
section{padding:5rem 0;position:relative}
section + section{border-top:1px solid var(--ink-rule)}
.section-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 .9rem}

/* ── buttons ────────────────────────────────────────────────────────────── */
.actions{display:flex;gap:.85rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:7px;
  text-decoration:none;font-weight:600;font-size:.94rem;border:1px solid transparent;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn-primary{background:var(--ember);color:#FFF}
.hero .btn-primary,.band .btn-primary{background:var(--flare);color:#0A0B0D}
.hero .btn-primary:hover,.band .btn-primary:hover{background:var(--glow);color:#0A0B0D}
.btn-primary:hover{background:var(--deep);color:#FFF;transform:translateY(-1px);
  box-shadow:0 8px 28px -10px rgba(255,122,26,.85)}
.btn-ghost{border-color:var(--ink-rule);color:var(--ink);background:var(--paper-2)}
.hero .btn-ghost,.band .btn-ghost{border-color:var(--rule);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--ember);color:var(--text);transform:translateY(-1px);
  box-shadow:0 8px 24px -14px rgba(255,122,26,.7)}

/* ── cards ──────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:2.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(24rem,1fr))}
.card{position:relative;border:1px solid var(--ink-rule);border-radius:12px;padding:1.75rem;
  background:var(--paper-2);overflow:hidden;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);opacity:0;
  transition:opacity .2s ease}
.card:hover{border-color:var(--ember);transform:translateY(-2px);
  box-shadow:0 10px 34px -20px rgba(214,65,15,.55)}
.card:hover::before{opacity:1}
.card p{margin-bottom:0;font-size:.97rem;color:var(--ink-muted)}
.card p + p{margin-top:.75rem}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);display:block;margin-bottom:.85rem}

/* ── metrics ────────────────────────────────────────────────────────────── */
.metrics{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-top:2.5rem;list-style:none;padding:0}
.metric{border:1px solid var(--rule);border-radius:12px;padding:1.5rem;background:var(--void)}
.metric .n{font-family:var(--mono);font-size:2rem;line-height:1;color:var(--glow);
  letter-spacing:-.03em;display:block;margin-bottom:.6rem}
.metric .l{font-size:.9rem;color:var(--muted);margin:0}

/* ── fact lists ─────────────────────────────────────────────────────────── */
.facts{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.facts li{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;align-items:baseline;
  border-top:1px solid var(--ink-rule);padding:1.1rem 0}
.facts li:last-child{border-bottom:1px solid var(--ink-rule)}
.facts .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember)}
.facts li > span:last-child{color:var(--ink-muted)}

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:s;margin:2.5rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--ink-rule);border:1px solid var(--ink-rule);border-radius:12px;overflow:hidden}
.steps li{counter-increment:s;background:var(--paper-2);padding:1.6rem 1.75rem;
  display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:.82rem;color:var(--ember);letter-spacing:.08em;padding-top:.28rem}
.steps h3{margin-bottom:.3rem}
.steps p{margin:0;font-size:.96rem}

/* ── notes ──────────────────────────────────────────────────────────────── */
.note{border:1px solid var(--ink-rule);border-left:3px solid var(--ember);
  background:rgba(214,65,15,.045);padding:1.1rem 1.4rem;border-radius:0 10px 10px 0;margin:2rem 0}
.note p{margin:0;font-size:.95rem}
.placeholder{font-family:var(--mono);font-size:.88em;background:rgba(214,65,15,.1);
  padding:.12em .4em;border-radius:3px;color:var(--deep)}

/* ── forms ──────────────────────────────────────────────────────────────── */
form{max-width:36rem;margin-top:2rem}
label{display:block;font-weight:600;font-size:.9rem;margin:1.2rem 0 .4rem;color:var(--ink)}
input,textarea{width:100%;font:inherit;font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--ink-rule);border-radius:8px;background:var(--paper-2);color:var(--ink)}
input:focus,textarea:focus{border-color:var(--ember);outline:none;
  box-shadow:0 0 0 3px rgba(214,65,15,.18)}
textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{margin-top:1.5rem;cursor:pointer;font-family:inherit}
.form-status{margin-top:1rem;font-size:.95rem;color:var(--ember)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule);padding:3rem 0;color:var(--dim);font-size:.88rem;margin-top:0}
.site-foot .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-foot p{color:var(--dim);margin:0}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--flare)}
.site-foot ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* ── legal pages ────────────────────────────────────────────────────────── */
.legal h2{margin-top:2.75rem;font-size:1.3rem}
.legal ul{max-width:66ch;color:var(--ink-muted)}
.legal li{margin-bottom:.5rem}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .site-head .wrap{flex-direction:column;align-items:flex-start;
    padding-top:1rem;padding-bottom:1rem;min-height:0;gap:.75rem}
  nav ul{gap:1.15rem}
}
@media (max-width:640px){
  body{font-size:16px;background-size:48px 48px}
  .hero{padding:4rem 0 3rem}
  section{padding:3.25rem 0}
  h1{max-width:none}
  .facts li{grid-template-columns:1fr;gap:.35rem}
  .steps li{grid-template-columns:1fr;gap:.4rem}
  .steps li::before{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}
@media print{
  .site-head,.site-foot,.actions,.hero::before,.hero::after{display:none}
  body,.hero{background:#fff;color:#000;font-size:11pt}
  .hero h1,.hero p{color:#000}
  p,.facts li > span:last-child{color:#222}
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPRESSIVE LAYER
   Gradients, depth and motion. Everything here is decoration over a layout
   that already works without it — and every gradient keeps its text contrast
   above AA, because a gradient you cannot read is just an expensive mistake.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --grad-hot:linear-gradient(135deg,#FF7A1A 0%,#FFB454 100%);
  --grad-deep:linear-gradient(135deg,#C2400F 0%,#FF7A1A 60%,#FFB454 100%);
  --grad-ink:linear-gradient(135deg,#FFFFFF 0%,#FFE4C7 55%,#FFB454 100%);
  --grad-rule:linear-gradient(90deg,transparent,rgba(255,122,26,.9),rgba(255,180,84,.9),transparent);
}

/* ── aurora + grain in every dark band ──────────────────────────────────── */
.site-head,.hero,.site-foot,.band{position:relative;isolation:isolate}
.hero{
  background-color:#08090B;
  background-image:
    radial-gradient(ellipse 70% 60% at 15% -10%, rgba(255,122,26,.28), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 5%,  rgba(255,180,84,.16), transparent 62%),
    radial-gradient(ellipse 60% 45% at 60% 105%,rgba(194,64,15,.22),  transparent 65%),
    linear-gradient(rgba(255,122,26,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,122,26,.035) 1px,transparent 1px);
  background-size:auto,auto,auto,72px 72px,72px 72px;
}
/* slow drifting glow */
.hero::before{
  background:
    radial-gradient(38% 42% at 25% 25%, rgba(255,122,26,.22), transparent 70%),
    radial-gradient(32% 36% at 78% 12%, rgba(255,180,84,.14), transparent 72%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}
/* film grain, so the gradients do not band on cheap panels */
.hero::after{
  background:
    linear-gradient(90deg,transparent,rgba(194,64,15,.6) 10%,#FF7A1A 35%,#FFB454 50%,#FF7A1A 65%,rgba(194,64,15,.6) 90%,transparent);
  box-shadow:0 0 18px rgba(255,122,26,.55),0 0 42px rgba(255,122,26,.25);
  height:1px;
}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}

/* ── gradient display type ──────────────────────────────────────────────── */
.hero h1{
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.08em;
}
@supports not (background-clip:text){ .hero h1{color:var(--text);-webkit-text-fill-color:var(--text)} }

.eyebrow::before{background:var(--grad-hot);width:28px;height:2px;border-radius:2px}

/* ── buttons: gradient fill + sheen ─────────────────────────────────────── */
.hero .btn-primary,.band .btn-primary{
  background:var(--grad-hot);color:#0A0B0D;position:relative;overflow:hidden;
  box-shadow:0 6px 24px -10px rgba(255,122,26,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary{background:var(--grad-deep);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 6px 22px -12px rgba(214,65,15,.9)}
.btn-primary::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .55s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 12px 32px -10px rgba(255,122,26,.75)}
.hero .btn-ghost,.band .btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-color:rgba(255,180,84,.28);backdrop-filter:blur(6px)}

/* ── cards: gradient edge on hover, depth always ────────────────────────── */
.card{background:linear-gradient(180deg,#FFFFFF 0%,#FDFAF7 100%);
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 8px 24px -18px rgba(20,22,26,.25)}
.card::before{height:2px;background:var(--grad-hot)}
.card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;height:70%;
  background:radial-gradient(circle,rgba(255,122,26,.18),transparent 65%);
  opacity:0;transition:opacity .25s ease;pointer-events:none}
.card:hover{border-color:rgba(214,65,15,.45);
  box-shadow:0 2px 4px rgba(20,22,26,.05),0 18px 44px -24px rgba(214,65,15,.5)}
.card:hover::after{opacity:1}

/* ── metric tiles: instrument readouts ──────────────────────────────────── */
.metric{position:relative;overflow:hidden;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,122,26,.16), transparent 62%),
    linear-gradient(180deg,#12141A,#08090B);
  border-color:rgba(255,180,84,.16);
  box-shadow:0 14px 40px -26px rgba(0,0,0,.9)}
.metric::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--grad-rule)}
.metric .n{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
@supports not (background-clip:text){ .metric .n{color:var(--glow);-webkit-text-fill-color:var(--glow)} }

/* ── steps: gradient spine ──────────────────────────────────────────────── */
.steps{position:relative;box-shadow:0 10px 36px -28px rgba(20,22,26,.6)}
.steps li{position:relative;transition:background .2s ease}
.steps li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad-hot);opacity:0;transition:opacity .2s ease}
.steps li:hover{background:#FFFDFB}
.steps li:hover::after{opacity:1}

/* ── section rhythm ─────────────────────────────────────────────────────── */
.section-tag{display:flex;align-items:center;gap:.7rem}
.section-tag::after{content:"";flex:1;height:1px;max-width:8rem;
  background:linear-gradient(90deg,rgba(214,65,15,.5),transparent)}

/* ── footer: lit top edge ───────────────────────────────────────────────── */
.site-foot{background-color:#08090B;
  background-image:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(255,122,26,.10),transparent 70%)}
.site-foot::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--grad-rule);opacity:.7}

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn-primary::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION & DENSITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hamburger, shown only when the bar gets tight ──────────────────────── */
.nav-toggle{display:none;position:relative;z-index:2;width:44px;height:44px;padding:0;
  border:1px solid var(--rule);border-radius:9px;background:rgba(255,255,255,.04);
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── on-page section menu ───────────────────────────────────────────────── */
.toc{position:sticky;top:4.75rem;z-index:20;background:rgba(252,251,250,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-rule)}
.toc .wrap{display:flex;align-items:center;gap:1rem;min-height:3.4rem}
.toc-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);flex:none}
.toc ul{display:flex;flex-wrap:nowrap;gap:.45rem;list-style:none;margin:0;
  padding:.55rem 0;overflow-x:auto;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none}
.toc li{flex:none}
.toc ul::-webkit-scrollbar{display:none}
.toc a{display:block;white-space:nowrap;text-decoration:none;font-size:.85rem;font-weight:500;
  color:var(--ink-muted);padding:.4rem .8rem;border-radius:99px;border:1px solid transparent;
  transition:color .16s ease,border-color .16s ease,background .16s ease}
.toc a:hover{color:var(--ink);border-color:var(--ink-rule);background:var(--paper-2)}
.toc a.active{color:var(--ember);border-color:rgba(214,65,15,.35);background:rgba(214,65,15,.06)}

/* anchored sections must clear the sticky chrome */
section[id]{scroll-margin-top:9rem}

/* ── breathing room ─────────────────────────────────────────────────────── */
section{padding:5.5rem 0}
.hero + section{padding-top:5rem}
h2{margin-bottom:1.1rem}
h2 + p,.section-tag + h2 + p{margin-top:0}
p{max-width:64ch}
.lede{max-width:54ch}
.card p{max-width:none}
.grid{margin-top:2.75rem;gap:1.25rem}
.facts{margin-top:2.25rem}
.steps li{padding:1.75rem 1.9rem}

/* a quieter alternative to another full section */
.aside{border-left:2px solid var(--ink-rule);padding:.15rem 0 .15rem 1.4rem;margin:2rem 0;
  max-width:60ch}
.aside p{color:var(--ink-dim);font-size:.95rem;margin-bottom:.5rem}
.aside p:last-child{margin-bottom:0}

/* ── back to top ────────────────────────────────────────────────────────── */
.totop{position:fixed;right:1.25rem;bottom:1.25rem;z-index:25;width:44px;height:44px;
  display:grid;place-items:center;border-radius:12px;text-decoration:none;
  background:var(--grad-deep);color:#fff;box-shadow:0 10px 30px -12px rgba(214,65,15,.8);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:16px;height:16px;display:block}

@media (max-width:900px){
  .site-head .wrap{flex-direction:row;align-items:center;min-height:4.25rem;
    padding-top:0;padding-bottom:0;gap:.75rem}
  .nav-toggle{display:flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;
    background:#0B0D11;box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
    border-bottom:1px solid var(--rule);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .28s ease,visibility 0s linear .28s}
  .site-head.open .site-nav{max-height:70vh;visibility:visible;transition-delay:0s}
  .site-nav ul{flex-direction:column;gap:0;padding:.5rem 0 1rem}
  .site-nav li{border-top:1px solid rgba(255,255,255,.05)}
  .site-nav a{display:block;padding:.95rem 1.5rem;font-size:1rem}
  .site-nav a[aria-current="page"]::after{left:1.5rem;right:auto;width:22px;bottom:.6rem}
  .toc{top:4.25rem}
  section[id]{scroll-margin-top:8rem}
}
@media (max-width:640px){
  section{padding:3.5rem 0}
  .toc-label{display:none}
  .totop{right:.9rem;bottom:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .totop,.site-nav,.nav-toggle span{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUNDARY FADES
   Dark band meeting light surface at a hard 1px line looks like two pages
   stitched together. Each boundary now resolves through a warm dusk instead:
   near-black → ember haze → paper. Same idea in reverse above the footer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero → paper ───────────────────────────────────────────────────────── */
.hero{
  border-bottom:0;
  padding-bottom:9rem;                 /* room for the fade to breathe */
  background-image:
    /* the fade sits on top of the aurora, doing nothing until ~60% down */
    linear-gradient(180deg,
      transparent 0%,
      transparent 58%,
      rgba(44,20,8,.35)   74%,
      rgba(128,56,22,.34) 85%,
      rgba(214,140,92,.32) 92%,
      rgba(254,244,237,.92) 97.5%,
      #FEF4ED 100%),
    radial-gradient(ellipse 70% 60% at 15% -10%, rgba(255,122,26,.28), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 5%,  rgba(255,180,84,.16), transparent 62%),
    radial-gradient(ellipse 60% 45% at 60% 98%, rgba(255,122,26,.30), transparent 62%),
    linear-gradient(rgba(255,122,26,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,122,26,.035) 1px,transparent 1px);
  background-size:auto,auto,auto,auto,72px 72px,72px 72px;
}
.hero-sm{padding-bottom:7.5rem}

/* the old crisp hairline becomes a soft horizon glow inside the fade */
.hero::after{
  inset:auto 0 12% 0;height:auto;
  background:linear-gradient(180deg,transparent,rgba(255,140,50,.20),transparent);
  filter:blur(18px);box-shadow:none;height:90px;
}

/* grain must not sit over the fade, or the join turns muddy */
.hero .grain{opacity:.38;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 76%);
          mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 76%)}

/* the first light section starts warm and resolves to paper */
.hero + section,.hero + .toc + section{
  background:linear-gradient(180deg,rgba(255,238,226,.55),var(--paper) 42%)}
.hero + .toc{background:linear-gradient(180deg,rgba(255,240,230,.92),rgba(252,251,250,.92));
  backdrop-filter:blur(10px)}

/* ── paper → footer ─────────────────────────────────────────────────────── */
.site-foot{
  border-top:0;margin-top:0;padding-top:13rem;   /* clears the 200px ramp */
  background-color:#08090B;
  background-image:
    /* fixed-height ramp: percentage stops would compress into ~20px on a short
       footer, and fading alpha over a dark base collapses into a hard edge.
       Every stop here is opaque, so the ramp is linear in colour. */
    linear-gradient(180deg,
      #FEF4ED 0%,
      #F0CDB4 18%,
      #C07C4E 40%,
      #6B3418 62%,
      #241208 80%,
      #08090B 100%),
    radial-gradient(ellipse 60% 70% at 50% 34%,rgba(255,122,26,.16),transparent 72%);
  background-size:100% 200px,auto;
  background-position:top left,top left;
  background-repeat:no-repeat,no-repeat;
}
.site-foot::before{display:none}
.site-foot .grain{opacity:.35;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 58%,transparent 82%);
          mask-image:linear-gradient(0deg,#000 0%,#000 58%,transparent 82%)}

/* a dark figure between light sections gets the same treatment */
.figure{border-top:0;border-bottom:0}
.figure::after{
  background:
    linear-gradient(180deg,var(--paper),rgba(214,140,92,.22) 6%,transparent 22%),
    linear-gradient(0deg,var(--paper),rgba(214,140,92,.22) 7%,transparent 26%)}
.figure-wide::before{display:none}

@media (max-width:640px){
  .hero{padding-bottom:6.5rem}
  .hero-sm{padding-bottom:5.5rem}
  .site-foot{padding-top:11rem;background-size:100% 150px,auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRONZE READING SURFACE
   The light half is not white — it is a warm bronze wash that drifts across
   the page, so the dark bands read as the same material turned down rather
   than a different document. Every seam colour below is #FBF5EF so the
   boundaries stay invisible wherever they land.
   ═══════════════════════════════════════════════════════════════════════════ */
html{background-color:#08090B}          /* fills below a short page's footer */

body{
  background-color:#FBF5EF;
  background-image:
    radial-gradient(1400px 720px at 92% 1%,  rgba(196,120,72,.14), transparent 62%),
    radial-gradient(1150px 640px at 2% 34%,  rgba(226,162,98,.11), transparent 60%),
    radial-gradient(1050px 720px at 74% 66%, rgba(182,108,62,.10), transparent 62%),
    radial-gradient(900px 600px at 12% 96%,  rgba(214,140,92,.12), transparent 62%),
    linear-gradient(180deg,#FCF7F1 0%,#FAF2EA 38%,#FCF6F0 72%,#F9F1E9 100%);
}

/* sections ride on the wash instead of painting their own white */
.hero + section,.hero + .toc + section{
  background:linear-gradient(180deg,#FBF5EF 0,rgba(251,245,239,0) 340px)}
.hero + .toc{background:rgba(251,245,239,.93);backdrop-filter:blur(10px)}
.toc{background:rgba(251,245,239,.93)}

/* hero fade now resolves onto the wash, not onto paper */
.hero{
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 58%,
      rgba(44,20,8,.35)   74%,
      rgba(128,56,22,.34) 85%,
      rgba(214,140,92,.32) 92%,
      rgba(251,245,239,.93) 97.5%,
      #FBF5EF 100%),
    radial-gradient(ellipse 70% 60% at 15% -10%, rgba(255,122,26,.28), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 5%,  rgba(255,180,84,.16), transparent 62%),
    radial-gradient(ellipse 60% 45% at 60% 98%, rgba(255,122,26,.30), transparent 62%),
    linear-gradient(rgba(255,122,26,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,122,26,.035) 1px,transparent 1px);
}
.site-foot{background-image:
    linear-gradient(180deg,#FBF5EF 0%,#F0CDB4 18%,#C07C4E 40%,#6B3418 62%,#241208 80%,#08090B 100%),
    radial-gradient(ellipse 60% 70% at 50% 34%,rgba(255,122,26,.16),transparent 72%)}

/* surfaces that sit on the wash keep a little warmth rather than going stark */
.card{background:linear-gradient(180deg,#FFFDFB 0%,#FDF7F1 100%);
  border-color:rgba(120,84,60,.16)}
.steps{background:rgba(120,84,60,.16);border-color:rgba(120,84,60,.16)}
.steps li{background:linear-gradient(180deg,#FFFDFB,#FDF8F3)}
.steps li:hover{background:#FFFBF6}
.facts li{border-top-color:rgba(120,84,60,.16)}
.facts li:last-child{border-bottom-color:rgba(120,84,60,.16)}
section + section{border-top-color:rgba(120,84,60,.14)}
input,textarea{background:#FFFDFB;border-color:rgba(120,84,60,.22)}
.btn-ghost{background:#FFFDFB;border-color:rgba(120,84,60,.22)}
.toc{border-bottom-color:rgba(120,84,60,.16)}
.toc a:hover{background:#FFFDFB;border-color:rgba(120,84,60,.2)}
.aside{border-left-color:rgba(120,84,60,.28)}
.figure::after{
  background:
    linear-gradient(180deg,#FBF5EF,rgba(214,140,92,.22) 6%,transparent 22%),
    linear-gradient(0deg,#FBF5EF,rgba(214,140,92,.22) 7%,transparent 26%)}

/* .hero is itself a <section>, so `section + section` was drawing a 1px rule
   directly across the finished fade. */
.hero + section,.hero + .toc + section{border-top:0}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   All of it is decoration over pages that work without it. Nothing here runs
   under prefers-reduced-motion, and the canvas pauses whenever it is off-screen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* cross-page fades where the browser supports them */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .34s ease both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
.site-head{view-transition-name:site-head}

/* ── scroll progress ────────────────────────────────────────────────────── */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none;
  background:var(--grad-hot);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(255,122,26,.7)}

/* ── light-cycles canvas ────────────────────────────────────────────────── */
.cycles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 80%);
          mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 80%)}
.hero .wrap{z-index:1}

/* the glow leans toward the cursor; `translate` composes with the drift animation */
.hero::before{translate:calc(var(--px,0)*1px) calc(var(--py,0)*1px);transition:translate .6s ease-out}

/* ── hero entrance ──────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(8px)}
                to{opacity:1;transform:none;filter:none}}
@keyframes shine{from{background-position:0% 50%}to{background-position:100% 50%}}
.anim .hero .eyebrow{animation:rise .8s cubic-bezier(.2,.7,.2,1) .05s both}
.hero h1{background-size:230% 100%}
.anim .hero h1{animation:rise 1s cubic-bezier(.2,.7,.2,1) .16s both,shine 8s ease-in-out 1.2s infinite alternate}
.anim .hero .lede{animation:rise .9s cubic-bezier(.2,.7,.2,1) .34s both}
.anim .hero .actions{animation:rise .9s cubic-bezier(.2,.7,.2,1) .48s both}
.anim .eyebrow::before{transform-origin:0 50%;animation:grow .9s cubic-bezier(.2,.7,.2,1) .25s both}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}

/* ── the mark draws itself ──────────────────────────────────────────────── */
.anim .brand svg > path{stroke-dasharray:44;stroke-dashoffset:44;animation:draw 1.1s ease .35s forwards}
.anim .brand svg > circle{transform-box:fill-box;transform-origin:center;
  animation:pop .5s cubic-bezier(.3,1.6,.5,1) 1.2s both,pulse 3.2s ease-in-out 2s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,180,84,0))}
                 50%{filter:drop-shadow(0 0 5px rgba(255,180,84,.95))}}

/* ── cards: spotlight follows the cursor, slight tilt ───────────────────── */
.card,.metric,.pub{--mx:50%;--my:50%;transform-style:preserve-3d;will-change:transform}
.card::after{inset:0;width:auto;height:auto;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(255,122,26,.16),transparent 62%)}
.metric::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(255,180,84,.20),transparent 60%)}
.metric:hover::after{opacity:1}
.tilting{transition:transform .1s linear !important}

/* ── ticker ─────────────────────────────────────────────────────────────── */
.ticker{overflow:hidden;padding:1.35rem 0;
  border-top:1px solid rgba(120,84,60,.14);border-bottom:1px solid rgba(120,84,60,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:3rem;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8A6A55;white-space:nowrap;display:flex;align-items:center;gap:3rem}
.ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad-hot);
  box-shadow:0 0 8px rgba(255,122,26,.7)}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker + section{border-top:0}

/* ── figures ease in from a slight zoom ─────────────────────────────────── */
.figure{overflow:hidden}
.figure img{transform:scale(1.06);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.figure.in img,.no-js .figure img{transform:none}

/* ── buttons lean toward the cursor ─────────────────────────────────────── */
.btn{translate:calc(var(--bx,0)*1px) calc(var(--by,0)*1px)}

@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .lede,.hero .actions,.eyebrow::before,
  .brand svg > path,.brand svg > circle,.ticker-track{animation:none}
  .brand svg > path{stroke-dashoffset:0}
  .figure img{transform:none;transition:none}
  .cycles,.progress{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALM
   Summaries first; detail is one click away, never in the way.
   ═══════════════════════════════════════════════════════════════════════════ */
details.more{margin-top:1rem;max-width:64ch}
details.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);padding:.35rem 0;user-select:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";display:grid;place-items:center;width:1.15rem;height:1.15rem;
  border:1px solid rgba(214,65,15,.4);border-radius:50%;font-size:.8rem;line-height:1;
  transition:transform .2s ease,background .2s ease,color .2s ease}
details.more[open] summary::before{transform:rotate(45deg);background:var(--ember);color:#fff}
details.more summary:hover{color:var(--deep)}
details.more > *:not(summary){animation:unfold .35s ease both}
details.more p{font-size:.96rem;margin:.75rem 0 0}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}}

/* cards that are links */
a.card{display:block;text-decoration:none;color:inherit}
a.card h3{color:var(--ink)}
a.card .go{display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember);transition:translate .2s ease}
a.card:hover .go{translate:4px 0}

/* status chips on research areas */
.status{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.22rem .55rem;border-radius:99px;margin-bottom:.9rem;
  border:1px solid rgba(214,65,15,.35);color:var(--ember);background:rgba(214,65,15,.05)}
.status.quiet{border-color:rgba(120,84,60,.3);color:#8A6A55;background:transparent}

/* one highlighted result per area */
.result{border-left:3px solid var(--ember);background:rgba(214,65,15,.055);
  padding:.8rem 1.1rem;border-radius:0 8px 8px 0;font-size:.95rem;color:var(--ink);max-width:60ch;margin:1.25rem 0 0}
.result strong{color:var(--deep);font-family:var(--mono);font-weight:600}

/* an image that sits inside a section rather than spanning the page */
.inset{margin:2rem 0 0;border-radius:14px;overflow:hidden;border:1px solid rgba(120,84,60,.18);
  box-shadow:0 18px 50px -30px rgba(20,22,26,.55);max-width:52rem}
.inset img{display:block;width:100%;height:auto;max-height:26rem;object-fit:cover}
.inset figcaption{padding:.7rem 1rem;font-family:var(--mono);font-size:.74rem;color:#8A6A55;background:#FFFDFB}

/* projects as a calm grid instead of a long column */
.proj-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:.5rem}
.proj-grid .proj{display:block;border:1px solid rgba(120,84,60,.16);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#FFFDFB,#FDF7F1);padding:0;margin:0;
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 10px 30px -22px rgba(20,22,26,.3);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.proj-grid .proj:hover{transform:translateY(-3px);border-color:rgba(214,65,15,.4);
  box-shadow:0 18px 44px -24px rgba(214,65,15,.45)}
.proj-grid .proj-media{border:0;border-radius:0;box-shadow:none}
.proj-grid .proj-media img{aspect-ratio:16/10}
.proj-grid .proj-body{padding:1.4rem 1.5rem 1.5rem}
.proj-grid .proj-body h3{font-size:1.15rem;margin-bottom:.4rem}
.proj-grid .proj-body p{font-size:.95rem;margin-bottom:0}
.proj-grid .proj-links{margin-top:.9rem;font-size:.88rem}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNATURE
   One living centrepiece per home page, a command palette, and editorial
   details. Inner pages stay quiet on purpose.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero centrepiece ───────────────────────────────────────────────────── */
.hero-viz{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 88%),linear-gradient(90deg,transparent,#000 18%);
          mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 88%),linear-gradient(90deg,transparent,#000 18%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:0;transition:opacity 1.4s ease .3s}
.hero-viz.on{opacity:1}
.hero-viz canvas{display:block;width:100%;height:100%}
@media (max-width:1000px){ .hero-viz{width:100%;} .hero-viz.on{opacity:.3} }

/* ── live status line ───────────────────────────────────────────────────── */
.statusline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:2.4rem 0 0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero .statusline{color:#8C9099}
.statusline .dot{width:7px;height:7px;border-radius:50%;background:#5BE38C;flex:none;
  box-shadow:0 0 0 0 rgba(91,227,140,.6)}
.anim .statusline .dot{animation:ping 2.4s ease-out infinite}
.anim .hero .statusline{animation:rise .9s cubic-bezier(.2,.7,.2,1) .62s both}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(91,227,140,.55)}70%,100%{box-shadow:0 0 0 9px rgba(91,227,140,0)}}
.statusline .sep{opacity:.4}

/* ── giant outlined section numerals ────────────────────────────────────── */
section[data-n]::before{content:attr(data-n);position:absolute;right:max(1.5rem,calc((100vw - var(--maxw))/2 + 1.5rem));
  top:2.6rem;z-index:0;pointer-events:none;line-height:.8;
  font-size:clamp(6rem,15vw,13rem);font-weight:750;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.2px rgba(176,108,64,.20);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
section[data-n] > .wrap{position:relative;z-index:1}
@media (max-width:760px){ section[data-n]::before{font-size:5.5rem;top:1.6rem;-webkit-text-stroke-color:rgba(176,108,64,.14)} }

/* ── footer wordmark ────────────────────────────────────────────────────── */
.foot-mark{max-width:var(--maxw);margin:0 auto 2.2rem;padding:0 1.5rem;
  font-size:clamp(2rem,8.4vw,7.4rem);font-weight:720;letter-spacing:-.055em;line-height:1.05;white-space:nowrap;
  color:#FF7A1A;user-select:none;
  /* fade with a mask rather than clipped-gradient text: no box, and it degrades to solid amber */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.03) 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.03) 100%)}
.site-foot .wrap{position:relative;border-top:1px solid rgba(255,255,255,.07);padding-top:1.6rem}

/* ── command palette ────────────────────────────────────────────────────── */
.site-nav{margin-left:auto}
.cmdk-btn{display:inline-flex;align-items:center;gap:.6rem;margin-left:1.4rem;padding:.42rem .55rem .42rem .8rem;
  font:500 .8rem var(--sans);color:var(--muted);cursor:pointer;
  border:1px solid var(--rule);border-radius:9px;background:rgba(255,255,255,.04);
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.cmdk-btn:hover{border-color:rgba(255,180,84,.45);color:var(--text);background:rgba(255,255,255,.07)}
.cmdk-btn kbd,.cmdk kbd{font:500 .68rem var(--mono);letter-spacing:.04em;padding:.16rem .4rem;border-radius:5px;
  border:1px solid var(--rule);background:rgba(255,255,255,.05);color:var(--muted)}
@media (max-width:900px){ .cmdk-btn{display:none} }

.cmdk{position:fixed;inset:0;z-index:100;display:grid;place-items:start center;padding:14vh 1rem 0;
  background:rgba(4,5,7,.62);backdrop-filter:blur(8px);animation:cmdk-bg .18s ease both}
.cmdk[hidden]{display:none}
.cmdk-panel{width:min(38rem,100%);border-radius:16px;overflow:hidden;color:var(--text);
  background:linear-gradient(180deg,#15171E,#0C0E12);
  border:1px solid rgba(255,180,84,.22);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),0 0 80px -30px rgba(255,122,26,.45);
  animation:cmdk-in .22s cubic-bezier(.2,.8,.2,1) both}
.cmdk-panel::before{content:"";display:block;height:1px;background:var(--grad-rule)}
.cmdk input{width:100%;border:0;border-radius:0;background:transparent;color:var(--text);
  font:500 1.05rem var(--sans);padding:1.15rem 1.3rem;border-bottom:1px solid var(--rule)}
.cmdk input:focus{outline:none;box-shadow:none;border-color:var(--rule)}
.cmdk input::placeholder{color:var(--dim)}
.cmdk ul{list-style:none;margin:0;padding:.5rem;max-height:min(50vh,22rem);overflow:auto}
.cmdk li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .85rem;
  border-radius:10px;cursor:pointer;font-size:.96rem;color:var(--muted)}
.cmdk li small{font:500 .64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cmdk li[aria-selected="true"]{background:linear-gradient(90deg,rgba(255,122,26,.18),rgba(255,122,26,.05));
  color:var(--text);box-shadow:inset 2px 0 0 var(--flare)}
.cmdk li[aria-selected="true"] small{color:var(--glow)}
.cmdk .empty{padding:1.2rem .85rem;color:var(--dim);font-size:.92rem}
.cmdk-foot{display:flex;gap:1.1rem;padding:.7rem 1.1rem;border-top:1px solid var(--rule);
  font:500 .68rem var(--mono);letter-spacing:.08em;color:var(--dim)}
@keyframes cmdk-bg{from{opacity:0}}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-10px) scale(.98)}}

@media (prefers-reduced-motion:reduce){
  .hero-viz{display:none}
  .cmdk,.cmdk-panel{animation:none}
}

/* Grain used mix-blend-mode:overlay, which composites differently beneath any
   masked element and left a faint box behind the footer wordmark. Plain
   low-opacity noise looks the same and has no such side effect. */
.grain,.hero .grain,.site-foot .grain{mix-blend-mode:normal;opacity:.075}

/* inner-page scenes run quieter than the home centrepieces */
.hero-sm .hero-viz{width:48%}
.hero-sm .hero-viz.on{opacity:.72}
@media (max-width:1000px){ .hero-sm .hero-viz{width:100%} .hero-sm .hero-viz.on{opacity:.22} }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRAST — measured against the DARKEST point of the bronze wash (#F5E5DC),
   not its average. Ember passed AA on white; the wash darkened the ground
   beneath it and it quietly dropped to 4.1:1. These all clear 4.5:1 at worst.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ember:#B8350A;        /* 4.82:1 worst-case wash · 5.56:1 on cards */
  --deep:#96290A;         /* hover / pressed on light */
  --ink-dim:#5C636D;      /* 4.95:1 — section tags, meta lines, toc label */
  --dim:#8A909A;          /* 6.20:1 on the dark bands — footer, palette hints */
}
.status.quiet,.inset figcaption,.ticker span{color:#725340}   /* 5.66:1 */
.status{border-color:rgba(184,53,10,.4);background:rgba(184,53,10,.05)}
/* fills keep the brighter orange: large white-on-orange button text is a different test */
.btn-primary{background:linear-gradient(135deg,#B8350A 0%,#E2560F 60%,#FF7A1A 100%)}
.totop{background:linear-gradient(135deg,#B8350A,#FF7A1A)}

/* ═══════════════════════════════════════════════════════════════════════════
   TWO WAYS IN — the intake agent and the conventional path
   ═══════════════════════════════════════════════════════════════════════════ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.paths{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));align-items:start}
.path{position:relative;border:1px solid rgba(120,84,60,.16);border-radius:16px;padding:2rem;
  background:linear-gradient(180deg,#FFFDFB,#FDF7F1);
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 12px 34px -24px rgba(20,22,26,.3)}
.path h3{font-size:1.35rem;letter-spacing:-.025em;margin-bottom:.6rem}
.path > p{font-size:.98rem}
.path form{margin-top:1.25rem;max-width:none}
.path-fast{border-color:rgba(184,53,10,.35);
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 18px 50px -26px rgba(184,53,10,.5)}
.path-fast::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:16px 16px 0 0;background:var(--grad-hot)}
.path-soon{border-style:dashed;box-shadow:none;background:transparent}
.path-soon::before{display:none}
.fine{font-size:.86rem;color:var(--ink-dim);margin-top:1.75rem}

/* the agent is an instrument: a dark console set into the light page */
.agent{margin-top:1.4rem;border-radius:12px;overflow:hidden;border:1px solid rgba(255,180,84,.2);
  background:linear-gradient(180deg,#12141A,#08090B)}
.agent-log{height:21rem;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth}
.msg{max-width:88%;padding:.7rem .95rem;border-radius:12px;font-size:.93rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-agent{align-self:flex-start;background:rgba(255,255,255,.06);color:#EDEAE5;border-bottom-left-radius:3px}
.msg-user{align-self:flex-end;background:linear-gradient(135deg,#B8350A,#E2560F);color:#fff;border-bottom-right-radius:3px}
.msg-error{background:rgba(255,122,26,.12);color:#FFB454;border:1px solid rgba(255,122,26,.3)}
.msg-agent:empty::after{content:"";display:inline-block;width:1.6rem;height:.5rem;
  background:radial-gradient(circle,#FFB454 35%,transparent 40%) 0 50%/.55rem .5rem repeat-x;animation:dots 1s steps(3) infinite}
@keyframes dots{from{clip-path:inset(0 66% 0 0)}to{clip-path:inset(0 -34% 0 0)}}
.agent-form{display:flex;gap:.6rem;align-items:flex-end;margin:0;padding:.8rem;border-top:1px solid rgba(255,255,255,.08);max-width:none}
.agent-form textarea{flex:1;min-height:0;resize:none;background:rgba(255,255,255,.05);color:#EDEAE5;
  border-color:rgba(255,255,255,.12);font-size:.95rem;padding:.65rem .8rem}
.agent-form textarea::placeholder{color:#8A909A}
.agent-form textarea:focus{border-color:#FF7A1A;box-shadow:0 0 0 3px rgba(255,122,26,.2)}
.agent-form .btn,.agent-handoff .btn{margin:0;background:var(--grad-hot);color:#0A0B0D;white-space:nowrap}
.agent .hp{display:none}
.agent-send{padding:1rem 1.1rem 1.2rem;border-top:1px solid rgba(255,255,255,.08);color:#EDEAE5}
.agent-send p{color:#C9CDD3;font-size:.92rem;margin:0 0 .7rem}
.agent-handoff{display:flex;gap:.6rem;flex-wrap:wrap;margin:0;max-width:none}
.agent-handoff input{flex:1;min-width:12rem;background:rgba(255,255,255,.05);color:#EDEAE5;border-color:rgba(255,255,255,.12)}
.agent-note{color:#FFB454 !important;margin:.7rem 0 0 !important}
@media (prefers-reduced-motion:reduce){ .msg-agent:empty::after{animation:none} .agent-log{scroll-behavior:auto} }

/* a headline made of two sentences: one per line, never split mid-thought */
h1.pair{max-width:none;font-size:clamp(1.9rem,4.5vw,3.5rem);line-height:1.12}
h1.pair span{display:block}
@media (max-width:560px){ h1.pair span{display:inline} }

.statusline{max-width:none}

/* sub-groups inside one long list, so the CV awards read as four short lists */
h3.group{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;margin:2.4rem 0 -1.2rem}
h3.group:first-of-type{margin-top:1.2rem}

/* ═══ awards: never all at once ═══════════════════════════════════════════ */
.scroller{list-style:none;margin:2.25rem -1.5rem 0;padding:.4rem 1.5rem 1.4rem;display:flex;gap:1.1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1.5rem;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(184,53,10,.45) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 4rem),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 4rem),transparent)}
.scroller::-webkit-scrollbar{height:6px}
.scroller::-webkit-scrollbar-thumb{background:rgba(184,53,10,.4);border-radius:99px}
.scroller:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:12px}
.award{flex:0 0 min(17.5rem,78vw);scroll-snap-align:start;border:1px solid rgba(120,84,60,.16);border-radius:14px;
  padding:1.5rem;background:linear-gradient(180deg,#FFFDFB,#FDF7F1);position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 10px 28px -20px rgba(20,22,26,.3);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.award::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-hot);opacity:.85}
.award:hover{transform:translateY(-3px);border-color:rgba(184,53,10,.4);box-shadow:0 16px 40px -22px rgba(184,53,10,.5)}
.award h3{font-size:1.05rem;margin:0 0 .4rem}
.award p{font-size:.92rem;margin:0;color:var(--ink-muted)}
.scroll-hint{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:.2rem 0 0}

details.fold{border-top:1px solid rgba(120,84,60,.16)}
details.fold:last-of-type{border-bottom:1px solid rgba(120,84,60,.16)}
details.fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.8rem;padding:1.15rem 0;
  font-weight:620;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"+";display:grid;place-items:center;width:1.4rem;height:1.4rem;flex:none;
  border:1px solid rgba(184,53,10,.4);border-radius:50%;color:var(--ember);font-size:.9rem;line-height:1;
  transition:transform .2s ease,background .2s ease,color .2s ease}
details.fold[open] summary::before{transform:rotate(45deg);background:var(--ember);color:#fff}
details.fold summary small{margin-left:auto;font:500 .7rem var(--mono);letter-spacing:.1em;color:var(--ink-dim)}
details.fold summary:hover{color:var(--ember)}
details.fold .facts{margin:0 0 1.2rem;animation:unfold .3s ease both}
details.fold .facts li:first-child{border-top:0}
details.fold .facts li:last-child{border-bottom:0}

/* ═══ awards: one featured, the rest in a list the scroll wheel moves ═════ */
.award-feature{position:relative;overflow:hidden;margin-top:2.25rem;padding:2rem 2.1rem;border-radius:16px;color:var(--text);
  border:1px solid rgba(255,180,84,.22);
  background:radial-gradient(90% 140% at 0% 0%,rgba(255,122,26,.22),transparent 60%),linear-gradient(180deg,#14161C,#08090B);
  box-shadow:0 22px 60px -34px rgba(184,53,10,.75)}
.award-feature::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-hot)}
.award-feature .tag{color:#FFB454}
.award-feature h3{font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.03em;margin:0 0 .5rem;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.award-feature p{color:#B4B9C1;margin:0;max-width:58ch}
.vscroll{max-height:19.5rem;overflow-y:auto;margin-top:1.5rem;padding-right:.9rem;scroll-snap-type:y proximity;
  scrollbar-width:thin;scrollbar-color:rgba(184,53,10,.45) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3.2rem),transparent);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3.2rem),transparent)}
.vscroll::-webkit-scrollbar{width:6px}
.vscroll::-webkit-scrollbar-thumb{background:rgba(184,53,10,.4);border-radius:99px}
.vscroll li{scroll-snap-align:start}
.vscroll li:first-child{border-top:0}
.vscroll li:last-child{border-bottom:0;padding-bottom:3rem}
.vscroll:focus-visible{outline:2px solid var(--ember);outline-offset:6px;border-radius:8px}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXES FROM A REAL PHONE
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. The header must stick. An earlier rule set `position:relative` on every dark band for
      layering, which silently overrode sticky — so the header scrolled away while the section
      menu still parked itself 4.75rem down, leaving a gap with page content showing through. */
.site-head{position:sticky;top:0;z-index:40}

/* 2. Dark bands fade to TRANSPARENT, not to a fixed light colour. The wash underneath varies
      (far stronger on narrow screens), so any fixed seam colour shows up as a pale stripe.
      Letting the real page show through makes the join correct on every screen. */
.hero{
  background-color:transparent;
  background-image:
    linear-gradient(180deg,
      #08090B 0%, #08090B 56%,
      #150D09 70%,
      rgba(58,28,12,.94) 80%,
      rgba(128,60,26,.74) 88%,
      rgba(196,124,78,.42) 94%,
      rgba(214,150,104,0) 100%),
    radial-gradient(ellipse 70% 60% at 15% -10%, rgba(255,122,26,.28), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 5%,  rgba(255,180,84,.16), transparent 62%);
  background-size:auto;
}
/* aurora and grid now live on a layer that is masked off before the fade */
.hero::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 74%);
                      mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 74%)}
.hero::after{display:none}
.hero + section,.hero + .toc + section{background:none}

.site-foot{
  background-color:transparent;
  background-image:linear-gradient(180deg,
      rgba(214,150,104,0) 0,
      rgba(196,124,78,.42) 40px,
      rgba(128,60,26,.74) 85px,
      rgba(58,28,12,.94) 130px,
      #150D09 165px,
      #08090B 200px, #08090B 100%);
  background-size:auto;background-repeat:no-repeat;
}

/* 3. Section menu: sits flush under the header, tinted glass rather than an opaque light slab */
.toc,.hero + .toc{top:4.75rem;background:rgba(250,238,228,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(120,84,60,.18)}

/* 4. Narrow screens: a gentler wash (pixel-sized gradients are overwhelming at 390px), and only
      ONE sticky bar — header plus section menu would eat a fifth of the screen. */
@media (max-width:900px){
  .toc,.hero + .toc{position:static}
  section[id]{scroll-margin-top:5.5rem}
}
@media (max-width:760px){
  /* stacked translucent radials dither into visible stripes on phone screens, so: a flat tone */
  body{background-image:none;background-color:#FAF2E9}   /* flat: zero dithering */
}

/* the T mark crosses the headline on narrow screens: keep it a whisper there */
@media (max-width:1000px){ .hero-viz[data-viz="mark"].on{opacity:.14} }