/* Layout: career as a route line, maroon & brass on linen. Electric blue only for live signals (tracker, AI demo). */
:root{
  --bg:#F4EEE6;          /* linen */
  --surface:#FBF8F3;
  --ink:#2B1B20;         /* oxblood-black */
  --muted:#6F5B60;
  --line:#E2D5C8;
  --accent:#6E1F31;      /* maroon */
  --accent-soft:rgba(110,31,49,.08);
  --gold:#A8854F;        /* brushed brass, marks only */
  --gold-ink:#7E6235;    /* brass for text */
  --signal:#2346E8;      /* electric blue */
  --deep:#4A1422;        /* oxblood panel */
  --on-deep:#F4EEE6;
  --on-accent:#FBF8F3;
  --f-display:"Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-body:Karla, "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A0E12; --surface:#24151A; --ink:#F1E8DE; --muted:#BBA7A2; --line:#3E2A30;
    --accent:#E096A7; --accent-soft:rgba(224,150,167,.12); --gold:#C9A66B; --gold-ink:#D8B77C;
    --signal:#8EA2FF; --deep:#3A1220; --on-deep:#F4EEE6; --on-accent:#1A0E12;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1A0E12; --surface:#24151A; --ink:#F1E8DE; --muted:#BBA7A2; --line:#3E2A30;
  --accent:#E096A7; --accent-soft:rgba(224,150,167,.12); --gold:#C9A66B; --gold-ink:#D8B77C;
  --signal:#8EA2FF; --deep:#3A1220; --on-deep:#F4EEE6; --on-accent:#1A0E12;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}
.eyebrow{font:500 .74rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.3rem}
p{margin:0}
.mono{font-family:var(--f-mono)}
section{padding-block:clamp(3rem,7vw,5.5rem)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.sec-head{display:grid;gap:.6rem;max-width:46rem;margin-bottom:2.25rem}
.sec-head p:last-child{color:var(--muted)}

/* header */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:1.25rem;padding-block:.7rem}
.brand{font:500 1.2rem/1 var(--f-display);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand i{color:var(--accent)}
.nav{display:flex;gap:1.25rem;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;font-size:.92rem}
.nav a:hover{color:var(--ink)}
.bar-end{display:flex;align-items:center;gap:.6rem;margin-left:1rem}
.lang{font:500 .78rem/1 var(--f-mono);color:var(--muted);text-decoration:none;padding:.5rem .55rem;border-radius:6px;border:1px solid var(--line)}
.lang:hover{color:var(--ink);border-color:var(--ink)}
.wed{display:inline-flex;align-items:center;gap:.45rem;font:600 .85rem/1 var(--f-body);color:var(--accent);text-decoration:none;padding:.55rem .85rem;border:1px solid var(--gold);border-radius:999px;background:var(--surface)}
.wed:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.wed svg{width:.85rem;height:.85rem;flex:none}
@media (max-width:820px){.nav{display:none}.bar-end{margin-left:auto}}
@media (max-width:380px){.wed span{display:none}}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem)}
/* Row 1: name and intro, with the portrait exactly as tall as that text. Row 2: facts and buttons, with the route line beside them. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:1.6rem clamp(1.5rem,3.5vw,3rem);align-items:stretch}
.hero-main{min-width:0;display:flex;flex-direction:column;justify-content:center}
.hero-photo-wrap{position:relative;min-height:14rem}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 28%;border-radius:20px;box-shadow:0 30px 60px -40px var(--accent)}
.hero-photo.mono-ph{font-size:5rem}
.hero-sub{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:1.5rem 2.5rem;align-items:stretch;padding-top:1.4rem;border-top:1px solid var(--line)}
.hero-sub .map{display:flex;flex-direction:column;justify-content:center}
.hero-facts{display:flex;flex-direction:column;justify-content:space-between}
.hero-facts .readout{margin-top:0;padding-top:0;border-top:0}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-photo-wrap{order:-1;aspect-ratio:4/5;max-height:26rem;max-width:21rem;width:100%}.hero-sub{grid-template-columns:1fr}}
.hero-main{container-type:inline-size}
/* The name always sits on one line: it scales with its column (the name is about 9 em wide). */
.hero h1{font-size:clamp(1.6rem,10.6cqi,4.6rem);white-space:nowrap;font-weight:500;letter-spacing:-.03em;line-height:1;margin:.8rem 0 1.2rem}
.hero h1 i{font-style:italic;color:var(--accent)}
.lede{font-size:1.14rem;max-width:36rem}
.readout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.2rem;margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);font:400 .84rem/1.5 var(--f-mono);max-width:36rem}
.readout dt{color:var(--muted)}
.readout dd{margin:0}
.readout .live{display:inline-flex;align-items:center;gap:.45rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 60%,transparent)}70%{box-shadow:0 0 0 .55rem transparent}100%{box-shadow:0 0 0 0 transparent}}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 .95rem/1 var(--f-body);padding:.85rem 1.25rem;border-radius:999px;border:1px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:hover{transform:translateY(-1px)}

/* route line */
.map{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .6rem .4rem;container-type:inline-size}
.map svg{display:block;width:100%;height:auto;overflow:visible}
.route-base{fill:none;stroke:var(--line);stroke-width:6;stroke-linecap:round}
.route{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.route-glow{fill:none;stroke:var(--accent-soft);stroke-width:18;stroke-linecap:round}
.wp{cursor:pointer;outline:none}
.wp .ring{fill:var(--surface);stroke:var(--accent);stroke-width:3;transition:r .2s}
.wp .core{fill:var(--gold)}
.wp .halo{fill:none;stroke:var(--signal);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.wp.now .ring{stroke:var(--signal)}
.wp.now .core{fill:var(--signal)}
.wp .yr{fill:var(--gold-ink);font:500 11px var(--f-mono);letter-spacing:.06em}
.wp .nm{fill:var(--ink);font:500 15px var(--f-display)}
.wp .sub{fill:var(--muted);font:10px var(--f-mono)}
.wp:hover .ring,.wp:focus-visible .ring,.wp.on .ring{stroke:var(--signal);stroke-width:4}
.wp:focus-visible .nm,.wp.on .nm,.wp.on .nm-s{fill:var(--accent)}
.tracker{fill:var(--signal);stroke:var(--surface);stroke-width:2.5}
.wp .nm-s{display:none;fill:var(--ink);font:500 18px var(--f-display)}
@container (max-width:440px){.wp .sub,.wp .nm{display:none}.wp .nm-s{display:inline}.wp .yr{font-size:15px}.wp .nm-s{font-size:20px}}
.map-note{font-size:.82rem;line-height:1.4;color:var(--muted);padding:.2rem .4rem .2rem;min-height:2.4em}
.map-note b{color:var(--ink);font-weight:600}
.map-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font:400 .72rem var(--f-mono);color:var(--muted);padding:0 .5rem}

/* portrait + about */
.portrait{display:block;width:7.5rem;height:7.5rem;max-width:none;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--gold),0 14px 30px -18px var(--accent);margin-bottom:1.2rem}
.mono-ph{display:flex;align-items:center;justify-content:center;background:var(--deep);color:var(--on-deep);font:500 2.2rem/1 var(--f-display);letter-spacing:-.02em}
.mono-ph i{color:var(--gold)}
.about{display:grid;gap:2rem}
.about-text{display:grid;gap:.8rem;max-width:46rem}
.about-text p:last-child{font-size:1.08rem;max-width:34rem}
.ints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
@media (max-width:960px){.ints{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ints{gap:.8rem}.int figcaption span{font-size:.84rem}}
.int{margin:0;display:grid;gap:.7rem;align-content:start}
.int img,.int .ph{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;object-fit:cover}
.int .ph{background:linear-gradient(135deg,var(--deep),color-mix(in srgb,var(--accent) 70%,var(--deep)));display:grid;place-items:center}
.int .ph svg{width:3rem;height:3rem;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.int figcaption{display:grid;gap:.25rem}
.int figcaption b{font:500 1.2rem var(--f-display)}
.int figcaption span{color:var(--muted);font-size:.94rem}

/* telemetry bubbles */
.attain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){.attain{grid-template-columns:1fr}}
.bubbles-a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.2rem 1.2rem}
.bubbles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:end;gap:1.6rem 1rem}
.ab{margin:0;display:grid;justify-items:center;gap:.6rem;animation:float 6s ease-in-out infinite}
.ab:nth-child(2){animation-delay:-1.5s}.ab:nth-child(3){animation-delay:-3s}.ab:nth-child(4){animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ab-c{position:relative;width:var(--d);height:var(--d);max-width:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 78%,#fff) 0,var(--accent) 60%);display:grid;place-items:center;box-shadow:0 10px 24px -14px var(--accent)}
.ab.soft .ab-c{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 35%,var(--surface)) 0,color-mix(in srgb,var(--accent) 55%,var(--surface)) 70%)}
.ab-ring{position:absolute;left:50%;top:50%;width:var(--b);height:var(--b);transform:translate(-50%,-50%);border-radius:50%;border:2px dashed color-mix(in srgb,var(--on-accent) 75%,transparent)}
.ab-c b{position:relative;font:500 1.3rem/1 var(--f-display);color:var(--on-accent);font-variant-numeric:tabular-nums}
.ab figcaption{display:grid;text-align:center;line-height:1.3}
.ab figcaption span{font-size:.88rem;font-weight:600}
.ab figcaption small{font:400 .72rem var(--f-mono);color:var(--muted)}
.legend{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.2rem;font:400 .76rem var(--f-mono);color:var(--muted);text-align:center}
.lg-ring{width:1.1rem;height:1.1rem;border-radius:50%;border:2px dashed var(--accent);flex:none}
.figs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem}
.fb{width:9.4rem;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--gold);background:var(--surface);display:grid;place-content:center;justify-items:center;text-align:center;padding:1.1rem;gap:.35rem;animation:float 7s ease-in-out infinite}
.fb:nth-child(2n){animation-delay:-2s}.fb:nth-child(3n){animation-delay:-4s}
.fb b{font:500 1.6rem/1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fb span{font-size:.74rem;line-height:1.3;color:var(--muted)}
.fb.hero{width:12.5rem;background:var(--deep);border-color:var(--deep)}
.fb.hero b{font-size:2.3rem;color:var(--on-deep)}
.fb.hero span{color:color-mix(in srgb,var(--on-deep) 80%,transparent);font-size:.82rem}
@media (max-width:480px){.fb{width:8.6rem}.fb.hero{width:100%;max-width:12.5rem}}

/* now: career chart */
.traj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.4rem 1.6rem}
.traj-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.traj svg{display:block;width:100%;min-width:700px;height:auto}
.traj .ax,.traj .tk{stroke:var(--line);stroke-width:1.5;fill:none}
.traj .ax-arrow{fill:none;stroke:var(--muted);stroke-width:1.5}
.traj .tl{fill:var(--muted);font:12px var(--f-mono)}
.traj .tl.now{fill:var(--signal);font-weight:500}
.band{transition:opacity .25s}
.band.b0{fill:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.band.b1{fill:color-mix(in srgb,var(--gold) 38%,var(--surface))}
.band.b2{fill:var(--accent)}
.bl{fill:var(--ink);font:500 17px var(--f-display)}
.bs{fill:var(--muted);font:11.5px var(--f-mono)}
.line{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.line-next{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:3 6}
.today{stroke:var(--signal);stroke-width:1.5;stroke-dasharray:4 4}
.here{fill:var(--signal);stroke:var(--surface);stroke-width:3}
.here-halo{fill:none;stroke:var(--signal);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
.st{cursor:pointer;outline:none}
.st .mk{fill:var(--surface);stroke:var(--ink);stroke-width:3;transition:r .2s}
.st .rn{fill:var(--ink);font:500 18px var(--f-display);transition:opacity .25s}
.st .rt{fill:var(--accent);font:500 12.5px var(--f-mono);transition:opacity .25s}
.st:hover .mk,.st:focus-visible .mk{stroke:var(--signal)}
.traj[data-sel="0"] .st:not([data-i="0"]) :is(.rn,.rt),.traj[data-sel="1"] .st:not([data-i="1"]) :is(.rn,.rt),.traj[data-sel="2"] .st:not([data-i="2"]) :is(.rn,.rt){opacity:.3}
.traj[data-sel="0"] .st[data-i="0"] .mk,.traj[data-sel="1"] .st[data-i="1"] .mk,.traj[data-sel="2"] .st[data-i="2"] .mk{fill:var(--accent);stroke:var(--accent)}
.traj[data-sel="0"] .band:not(.b0),.traj[data-sel="1"] .band.b2{opacity:.35}
.step-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1.2rem}
@media (max-width:640px){.step-tabs{grid-template-columns:1fr}}
.step-tab{display:flex;align-items:center;gap:.75rem;text-align:left;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;cursor:pointer}
.step-tab b{display:block;font-weight:600;font-size:.95rem}
.step-tab small{display:block;font:400 .74rem var(--f-mono);color:var(--muted)}
.sn{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font:500 .85rem var(--f-mono);border:2px solid var(--line);color:var(--muted)}
.step-tab:hover{border-color:var(--accent)}
.step-tab[aria-selected="true"]{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.step-tab[aria-selected="true"] .sn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.step-panels{margin-top:1rem}
.step-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem 2rem;padding-top:1rem;border-top:1px dashed var(--line);animation:fadeup .35s ease}
.step-panel+.step-panel{margin-top:1rem}
@media (max-width:760px){.step-panel{grid-template-columns:1fr}}
.sp-k{font:400 .72rem var(--f-mono);color:var(--gold-ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.sp-main{display:grid;gap:.2rem;align-content:start}
.sp-proof .proof{font:500 1.4rem/1.25 var(--f-display);color:var(--accent)}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ask-btn{justify-self:start;margin-top:.7rem;font:600 .85rem/1 var(--f-body);color:var(--signal);background:none;border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);border-radius:999px;padding:.55rem .9rem;cursor:pointer}
.ask-btn:hover{background:var(--signal);color:var(--surface)}
.dm{display:grid;gap:.6rem;margin-top:1rem;font-size:.92rem;color:var(--muted)}
.dm-link{justify-self:start;display:inline-flex;align-items:center;gap:.4rem;font:600 .9rem/1 var(--f-body);color:var(--on-deep);background:var(--deep);border-radius:999px;padding:.75rem 1.1rem;text-decoration:none}
.dm-link:hover{background:var(--accent);color:var(--on-accent)}
.org a{color:inherit;text-decoration-color:var(--gold)}

/* AI */
.built{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.how-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem 3rem;margin-top:2.5rem}
@media (max-width:900px){.how-wrap{grid-template-columns:1fr}}
.how-col h3{font-size:1.25rem;margin-bottom:.9rem}
.how{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:step}
.how li{counter-increment:step;display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.8rem;align-items:baseline}
.how li::before{content:counter(step);grid-row:span 2;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:500 .85rem var(--f-mono)}
.how li b{font-weight:600}
.how li span{color:var(--muted);font-size:.94rem}
@media (max-width:900px){.built{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.card .meta{font:400 .74rem var(--f-mono);color:var(--gold-ink);letter-spacing:.06em;text-transform:uppercase}
.card p{font-size:.98rem}
.card .why{color:var(--muted);border-top:1px dashed var(--line);padding-top:.7rem;font-size:.92rem}

.rag{margin-top:2.5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.rag-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;padding:1.4rem 1.4rem 0}
.pill{display:inline-flex;align-items:center;gap:.45rem;font:500 .72rem var(--f-mono);color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);border-radius:999px;padding:.3rem .65rem}
.rag-body{padding:1rem 1.4rem 1.4rem;display:grid;gap:1rem}
.rag-body>p{color:var(--muted);max-width:48rem;font-size:.96rem}
.rag form{display:flex;gap:.6rem;flex-wrap:wrap}
.rag label{position:absolute;left:-999px}
.rag input{flex:1 1 16rem;min-width:0;font:400 1rem var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem}
.rag input:focus{outline:2px solid var(--signal);outline-offset:1px}
.samples{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font:500 .85rem/1 var(--f-body);padding:.55rem .85rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip .n{font:400 .72rem var(--f-mono);opacity:.7;margin-left:.35rem}
.hits{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.hit{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:var(--bg);display:grid;gap:.45rem}
.hit-top{display:flex;justify-content:space-between;gap:1rem;font:400 .74rem var(--f-mono);color:var(--muted)}
.bar-s{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.bar-s i{display:block;height:100%;background:var(--signal)}
.hit mark{background:color-mix(in srgb,var(--signal) 18%,transparent);color:inherit;border-radius:2px;padding:0 .1em}
.rag-note{font:400 .8rem/1.5 var(--f-mono);color:var(--muted)}

.faq{margin-top:3.5rem}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font:500 1.12rem/1.35 var(--f-display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--gold-ink)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.6rem;color:var(--muted);font-size:.98rem}
.tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tools span{font:400 .8rem var(--f-mono);border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem;background:var(--surface)}
.toolbox{margin-top:2.5rem}
.toolbox h3{font-size:1.1rem}

/* logbook */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.log{list-style:none;margin:0;padding:0;position:relative}
.log::before{content:"";position:absolute;left:7px;top:.7rem;bottom:.7rem;border-left:2px dashed var(--line)}
.stop{position:relative;padding:0 0 2.4rem 2.3rem;transition:opacity .25s}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;left:0;top:.45rem;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.stop.now::before{background:var(--accent);border-color:var(--accent)}
.stop.flash::before{border-color:var(--signal);box-shadow:0 0 0 6px color-mix(in srgb,var(--signal) 22%,transparent)}
.stop-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:baseline}
@media (max-width:560px){.stop-head{grid-template-columns:1fr}}
.when{font:400 .8rem var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.org{color:var(--muted);font-size:.96rem;margin-top:.2rem}
.org b{color:var(--ink);font-weight:600}
.stop ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.5rem;max-width:48rem}
.stop li{position:relative;padding-left:1.15rem;transition:opacity .25s}
.stop li::before{content:"";position:absolute;left:0;top:.75em;width:.5rem;height:1px;background:var(--gold)}
.filtering .stop li{opacity:.35}
.filtering .stop li.on{opacity:1}
.filtering .stop li.on::before{background:var(--signal);height:3px;top:.68em}
.filtering .stop.miss{opacity:.4}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.tag{font:400 .7rem var(--f-mono);padding:.18rem .5rem;border-radius:4px;background:var(--accent-soft);color:var(--accent)}

.log.collapsed .stop.more{display:none}
.log.collapsed .stop:nth-child(3){padding-bottom:0}
.more-btn{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 0 2.3rem;font:600 .92rem/1 var(--f-body);color:var(--accent);background:var(--surface);border:1px solid var(--gold);border-radius:999px;padding:.75rem 1.15rem;cursor:pointer}
.more-btn::after{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.more-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.more-btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* education */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.panel{border-top:2px solid var(--accent);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.panel .meta{font:400 .78rem var(--f-mono);color:var(--muted)}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2rem;margin-top:2.5rem}
@media (max-width:820px){.skills{grid-template-columns:1fr}}
.skills h3{font-size:1.1rem;margin-bottom:.35rem}
.skills p{color:var(--muted);font-size:.95rem}

/* contact */
.contact{background:var(--deep);color:var(--on-deep);border-radius:20px;padding:clamp(1.6rem,5vw,3.25rem);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2rem;align-items:end}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
.contact .eyebrow{color:var(--gold)}
.contact h2{color:var(--on-deep);margin-top:.6rem}
.contact p{margin-top:.8rem;max-width:32rem;opacity:.85}
.rows{display:grid;gap:.8rem}
.crow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid color-mix(in srgb,var(--on-deep) 22%,transparent);min-width:0}
.crow .v{font:400 .9rem var(--f-mono);overflow-wrap:anywhere;color:var(--on-deep)}
.crow a.v{text-decoration-color:var(--gold)}
.copy{flex:none;font:600 .8rem/1 var(--f-body);background:var(--on-deep);color:var(--deep);border:0;border-radius:999px;padding:.5rem .85rem;cursor:pointer}

/* footer */
footer{padding-block:2rem 3rem;color:var(--muted);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem}
footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
.built-note{font-family:var(--f-mono);font-size:.75rem}

/* legal pages */
.legal{max-width:46rem;padding-block:3rem 4rem}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1.5rem}
.legal h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.legal h3{font-size:1.1rem;margin:1.4rem 0 .4rem}
.legal p,.legal li{color:var(--ink);font-size:1rem}
.legal p+p{margin-top:.7rem}
.legal ul{padding-left:1.2rem;display:grid;gap:.35rem}
.legal address{font-style:normal}
.legal .stand{font:400 .8rem var(--f-mono);color:var(--muted);margin-top:2.5rem}
.legal .en{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.todo{background:#FFE58F;color:#3A2A00;padding:0 .3em;border-radius:3px}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media print{.bar,.rag,.wed,.copy{display:none}body{background:#fff;color:#000}}