/* Hybrid look: editorial type, cream ground, navy ink, gold hairlines. */
:root{
  --bg:#F8F7F1; --surface:#FFFFFF; --panel:#ECEDE8; --fg:#17233A; --muted:#545F6C; --line:#D9D6CB;
  --gold:#D9A23A; --bronze:#8A6519; --navy:#17233A; --slate:#3E5C76;
  --link:#17233A; --btn-bg:#17233A; --btn-fg:#FFFFFF; --field:#3E5C76; --accent:#D9A23A;
  --font-display:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10151D; --surface:#171E28; --panel:#1E2632; --fg:#ECE9E1; --muted:#A9B1BB; --line:#2E3746;
    --gold:#E2B04F; --bronze:#E2B04F; --link:#ECE9E1; --btn-bg:#E2B04F; --btn-fg:#17233A; --field:#9DB6CC; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10151D; --surface:#171E28; --panel:#1E2632; --fg:#ECE9E1; --muted:#A9B1BB; --line:#2E3746;
  --gold:#E2B04F; --bronze:#E2B04F; --link:#ECE9E1; --btn-bg:#E2B04F; --btn-fg:#17233A; --field:#9DB6CC; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:18px;line-height:1.6;margin:0}
a{color:var(--link);text-underline-offset:3px;text-decoration-color:var(--gold)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em;font-weight:600}
h1{font-size:clamp(2.4rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
h3{font-size:1.3rem}
em.serif,.serif{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--bronze);letter-spacing:0}
p{margin:0 0 1em;max-width:66ch}
.mono,.label{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rule-label{display:flex;align-items:center;gap:14px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin:0 0 18px;max-width:none}
.rule-label::before{content:"";width:28px;height:2px;background:var(--gold);flex:none}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
@media (min-width:900px){.wrap{padding-inline:32px}}

/* header */
.site-head{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-block:14px}
.brand{display:flex;flex-direction:column;color:var(--fg);text-decoration:none;line-height:1.1}
.brand b{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.brand span{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-left:auto}
nav a{font-size:.98rem;font-weight:600;padding:8px 10px;color:var(--fg);text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--line)}
nav a[aria-current="page"]{border-bottom-color:var(--gold)}
nav a.join{background:var(--btn-bg);color:var(--btn-fg);padding:9px 16px;margin-left:8px;border-bottom:0}
nav a.join[aria-current="page"]{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:640px){nav{margin-left:0;width:100%}nav a{padding:6px 8px}nav a.join{margin-left:auto}}

/* pages */
.page{padding-block:40px 80px}
.page-head{display:grid;gap:12px;margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.page-head .mono{display:flex;align-items:center;gap:14px;color:var(--fg);margin:0}
.page-head .mono::before{content:"";width:28px;height:2px;background:var(--gold)}
.page-head p{font-size:1.18rem;color:var(--muted)}
section+section{margin-top:56px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 48px}
.cols>*{min-width:0}
@media (max-width:760px){.cols{grid-template-columns:minmax(0,1fr)}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;font-weight:700;text-decoration:none;border:1.5px solid var(--fg);color:var(--fg);font-size:1rem;transition:transform .15s}
.btn.primary,.btn.dark{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn:hover{transform:translateY(-1px)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
.text-link{font-weight:700;text-decoration:none;color:var(--fg);font-size:1rem}
.text-link:hover{text-decoration:underline;text-decoration-color:var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:center;padding-block:24px 40px}
.hero>*{min-width:0}
.hero h1{font-size:clamp(2.8rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:22px}
.hero h1 .serif{font-size:1.04em}
.hero .lead{font-size:1.2rem;line-height:1.55;color:var(--muted);margin-bottom:26px;max-width:40ch}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}

.model{background:var(--panel);border:1px solid var(--line);padding:14px 14px 12px;max-width:440px;justify-self:end;width:100%}
.model-top{display:flex;justify-content:space-between;gap:12px;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.model-canvas{position:relative;aspect-ratio:4/3;background:var(--surface)}
.model-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}
.model-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.model-foot p{margin:0;font-size:.82rem;line-height:1.35;color:var(--muted)}
.toggle{font:inherit;font-size:.78rem;font-weight:700;padding:7px 12px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;white-space:nowrap}
.toggle[aria-pressed="false"]{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
@media (max-width:900px){.model{justify-self:start}}

.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:8px 0 72px}
.strip p{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.7}
.strip p:nth-child(2){text-align:center}.strip p:nth-child(3){text-align:right}
@media (max-width:700px){.strip{grid-template-columns:minmax(0,1fr)}.strip p:nth-child(n){text-align:left}}

.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin-bottom:32px}
.section-head p{color:var(--muted);margin:0;font-size:1.05rem}
@media (max-width:760px){.section-head{grid-template-columns:minmax(0,1fr)}}

.directions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:0 0 80px;padding:0}
.directions li{border-top:2px solid var(--fg);padding-top:18px;display:flex;flex-direction:column}
.directions .num{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);margin:0 0 14px}
.directions svg{height:56px;width:auto;margin-bottom:16px;align-self:flex-start}
.directions h3{font-size:1.4rem;margin-bottom:10px}
.directions p{color:var(--muted);font-size:1rem}
.directions .text-link{margin-top:auto;font-size:.92rem}
@media (max-width:860px){.directions{grid-template-columns:minmax(0,1fr)}}

.recruit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px 36px;align-items:center;background:var(--navy);color:#F3F1EA;padding:32px;margin-bottom:72px}
.recruit img{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:3px solid var(--gold)}
.recruit .label{color:var(--gold);margin:0 0 8px}
.recruit h2{color:#fff;margin-bottom:10px}
.recruit p{color:#D3D7DE;margin:0;font-size:1.05rem}
.recruit .btn-row{flex-direction:column;align-items:stretch;margin:0}
.recruit .btn{justify-content:center}
.recruit .btn.primary{background:var(--gold);border-color:var(--gold);color:#17233A}
.recruit .btn.ghost{border-color:#F3F1EA;color:#F3F1EA}
.recruit .count{display:block;margin-top:12px;font-size:.9rem;color:#B8C0CB}
@media (max-width:860px){.recruit{grid-template-columns:minmax(0,1fr)}.recruit .btn-row{flex-direction:row;flex-wrap:wrap}}

.latest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 48px}
.latest ul{list-style:none;margin:0;padding:0}
.latest li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 16px;padding:16px 0;border-top:1px solid var(--line);font-size:1rem}
.latest li:first-child{border-top:0;padding-top:0}
.latest time{font-weight:700;color:var(--bronze)}
@media (max-width:760px){.latest{grid-template-columns:minmax(0,1fr)}}

.portrait{margin:0}
.portrait img{width:100%;max-width:320px;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;display:block;border-bottom:3px solid var(--gold)}
.about-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px 48px;align-items:end}
@media (max-width:760px){.about-top{grid-template-columns:minmax(0,1fr)}.portrait img{max-width:240px}}

/* lists */
.themes,.news-list,.projects,.roster,.pubs,.steps{list-style:none;margin:0;padding:0}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.themes li{padding:18px 0;border-top:1px solid var(--line)}
.themes h3{margin-bottom:6px}
.themes p{margin:0;color:var(--muted);font-size:1rem}
@media (max-width:700px){.themes{grid-template-columns:minmax(0,1fr)}}

.news-list li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:4px 20px;padding:20px 0;border-top:1px solid var(--line)}
.news-list time{font-weight:700;font-size:1.1rem;color:var(--bronze)}
.news-list p{margin:0}
@media (max-width:560px){.news-list li{grid-template-columns:minmax(0,1fr)}}

.projects>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 40px;padding:32px 0;border-top:1px solid var(--line)}
.projects>li:first-child{border-top:2px solid var(--fg)}
.projects>li>*{min-width:0}
.projects h3{font-size:1.55rem}
.projects p{margin:0 0 .7em}
.tag-line{font-size:.8rem;font-weight:600;color:var(--muted)}
@media (max-width:760px){.projects>li{grid-template-columns:minmax(0,1fr)}}

.roster>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2px 40px;padding:16px 0;border-top:1px solid var(--line)}
.roster>li>*{min-width:0}
.roster .who{font-weight:700}
.roster .what{color:var(--muted);margin:0;max-width:none}
.roster .when{display:block;font-size:.82rem;font-weight:600;color:var(--bronze)}
@media (max-width:640px){.roster>li{grid-template-columns:minmax(0,1fr)}}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{font:inherit;font-size:.92rem;font-weight:600;padding:7px 14px;border:1.5px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.pub-group{margin-top:36px}
.pub-year{font-size:1.6rem;font-weight:600;margin:0 0 6px;padding-bottom:8px;border-bottom:2px solid var(--fg)}
.pubs li{padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 16px}
.pubs li:first-child{border-top:0}
.pubs .kind{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);padding-top:5px}
.pubs p{margin:0;max-width:none;font-size:1rem}
.pubs .doi{font-family:var(--font-mono);font-size:.78rem;word-break:break-all}
@media (max-width:520px){.pubs li{grid-template-columns:minmax(0,1fr)}}

.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 12px;padding:18px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-weight:700;font-size:1rem;color:var(--bronze);padding-top:2px}
.steps p{margin:0}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:10px 0 4px}
.email-row code{font-family:var(--font-mono);font-size:1rem;background:var(--surface);border:1px solid var(--line);padding:8px 14px;user-select:all}
.copy-state{font-size:.9rem;color:var(--muted)}
dl.facts-dl{margin:0;display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:14px 20px;border-top:2px solid var(--fg);padding-top:20px}
dl.facts-dl dt{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding-top:4px}
dl.facts-dl dd{margin:0}
@media (max-width:520px){dl.facts-dl{grid-template-columns:minmax(0,1fr)}dl.facts-dl dt{padding-top:10px}}

/* figures */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.figs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fig{background:var(--surface);border:1px solid var(--line);padding:14px;margin:0;display:flex;flex-direction:column;gap:10px}
.fig.wide{grid-column:1/-1}
.fig svg{width:100%;height:auto;display:block}
.fig h3{font-size:1.15rem}
.fig p{margin:0;font-size:.95rem;color:var(--muted);line-height:1.45}
.credit{font-size:.9rem;color:var(--muted);margin:12px 0 0}
@media (max-width:900px){.figs,.figs.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.figs,.figs.two{grid-template-columns:minmax(0,1fr)}}

footer{border-top:1px solid var(--line);padding-block:32px 48px;color:var(--muted);font-size:.92rem}
footer p{margin:0 0 4px;max-width:none}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#17233A;padding:8px 14px;z-index:10}.skip:focus{left:12px}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.nc{text-transform:none;font-style:normal;letter-spacing:.06em}
.oa{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#17233A;background:var(--gold);padding:2px 8px;vertical-align:1px}
.page-head .btn-row{margin-top:4px}
.shot-row{display:grid;gap:12px;margin:18px 0 0}
.shot-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.shot-row.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.shot-row figure{margin:0;background:#fff;border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:8px}
.shot-row img{width:100%;height:auto;aspect-ratio:auto;display:block;object-fit:contain}
.shot-row figcaption,.cell figcaption{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#17233A}
.cell-pair{display:grid;grid-template-columns:160px 260px minmax(0,1fr);gap:20px 28px;align-items:center;margin-top:20px;padding:20px;background:var(--surface);border:1px solid var(--line)}
.cell{margin:0;display:flex;flex-direction:column;gap:8px;color:var(--fg)}
.cell figcaption{color:var(--fg)}
.cell svg{width:100%;height:auto;display:block}
.cell-pair p{margin:0;color:var(--muted);font-size:1rem}
@media (max-width:860px){.shot-row.five{grid-template-columns:repeat(3,minmax(0,1fr))}.cell-pair{grid-template-columns:120px minmax(0,1fr)}.cell-pair p{grid-column:1/-1}}
@media (max-width:560px){.shot-row.three{grid-template-columns:minmax(0,1fr)}.shot-row.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shot-row.three img{aspect-ratio:3/2}
.shot-row.five img{aspect-ratio:1/1}
.curious{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px 36px;align-items:center;margin-top:20px;padding:24px;background:var(--surface);border:1px solid var(--line)}
.curious figure{margin:0;background:#fff;padding:8px;border:1px solid var(--line)}
.curious img{width:100%;height:auto;display:block}
.curious h3{margin-bottom:10px}
.curious p{color:var(--muted);font-size:1rem}
.curious p:last-child{margin-bottom:0}
@media (max-width:640px){.curious{grid-template-columns:minmax(0,1fr)}.curious figure{max-width:220px}}
.news-list li:first-child{border-top:0;padding-top:0}