/* Hallmark · macrostructure: Split-Studio · fixed dark rail + light canvas */
@import url("tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-h)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--signal);color:var(--color-ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.05;overflow-wrap:anywhere;min-width:0}

/* ===== split layout ===== */
.layout{display:grid;grid-template-columns:var(--rail-w) 1fr;align-items:start}
@media(max-width:940px){.layout{grid-template-columns:1fr}}

/* ===== N3 · side rail (fixed) ===== */
.rail{position:sticky;top:0;height:100vh;background:var(--rail-bg);color:var(--rail-ink);
  border-right:1px solid var(--rail-rule);display:flex;flex-direction:column;padding:var(--sp-8);overflow:auto}
.rail .brand{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);letter-spacing:-0.02em;display:flex;align-items:center;gap:.6ch;color:var(--rail-ink)}
.rail .brand .sq{width:14px;height:14px;background:var(--signal);box-shadow:0 0 12px var(--signal)}
.rail .role{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--rail-muted);margin-top:var(--sp-3)}
.rail .bio{color:var(--rail-muted);font-size:var(--text-sm);margin-top:var(--sp-6);max-width:32ch}
.rail nav{margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-1)}
.rail nav a{color:var(--rail-muted);font-family:var(--font-mono);font-size:var(--text-sm);padding:.4rem 0;display:flex;align-items:center;gap:.8ch;border:none}
.rail nav a::before{content:"";width:18px;height:1px;background:var(--rail-rule);transition:width var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out)}
.rail nav a:hover{color:var(--rail-ink)}
.rail nav a.active{color:var(--signal)}
.rail nav a.active::before{width:34px;background:var(--signal)}
.rail .spacer{flex:1;min-height:var(--sp-8)}
.rail .contact{display:flex;flex-direction:column;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-xs)}
.rail .contact a{color:var(--rail-muted)}
.rail .contact a:hover{color:var(--signal)}
.rail .contact .k{color:oklch(60% 0.03 150)}
@media(max-width:940px){
  .rail{position:static;height:auto;border-right:none;border-bottom:1px solid var(--rail-rule)}
  .rail nav{flex-flow:row wrap;gap:var(--sp-4)}
  .rail nav a::before{display:none}
  .rail .spacer{display:none}
  .rail .contact{flex-flow:row wrap;gap:var(--sp-4);margin-top:var(--sp-6)}
}

/* ===== canvas (right) ===== */
.canvas{padding:clamp(var(--sp-8),6vw,var(--sp-24)) clamp(var(--sp-6),6vw,var(--sp-20))}
.canvas section{padding-block:var(--sp-16);border-top:1px solid var(--color-rule)}
.canvas section:first-child{border-top:none;padding-top:0}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);display:inline-flex;align-items:center;gap:.6ch;margin-bottom:var(--sp-5)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--signal);border-radius:2px}

/* intro */
.intro h1{font-size:var(--text-display);max-width:15ch}
.intro h1 .u{background:linear-gradient(transparent 62%,oklch(86% 0.24 150 / .45) 0)}
.intro p{color:var(--color-muted);font-size:var(--text-md);max-width:56ch;margin-top:var(--sp-6)}
.intro .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.btn{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);
  padding:.6rem 1.15rem;border-radius:var(--radius);cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.btn.primary{background:var(--color-ink);color:var(--color-paper);border:1px solid var(--color-ink)}
.btn.primary:hover{transform:translateY(-1px);background:var(--color-accent-h);border-color:var(--color-accent-h)}
.btn.outline{background:transparent;color:var(--color-ink);border:1px solid var(--color-rule)}
.btn.outline:hover{transform:translateY(-1px);border-color:var(--color-accent)}

/* section head */
.sec-head h2{font-size:var(--text-2xl)}
.sec-head p{color:var(--color-muted);margin-top:var(--sp-3);max-width:54ch;font-size:var(--text-md)}
.sec-head{margin-bottom:var(--sp-10)}

/* capabilities as a definition list */
.dl{display:grid;grid-template-columns:14ch 1fr;gap:var(--sp-6) var(--sp-8)}
@media(max-width:560px){.dl{grid-template-columns:1fr;gap:var(--sp-2)}.dl dd{margin-bottom:var(--sp-6)}}
.dl dt{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);text-transform:uppercase;letter-spacing:.06em;padding-top:.2rem}
.dl dd h3{font-size:var(--text-lg);margin-bottom:var(--sp-2)}
.dl dd p{color:var(--color-muted);font-size:var(--text-base)}
.dl dd .tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.tag{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-rule);border-radius:6px;padding:.15rem .5rem}

/* selected work — numbered rows */
.work-list{list-style:none;counter-reset:w}
.wrow{counter-increment:w;display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3) var(--sp-6);align-items:baseline;
  padding-block:var(--sp-6);border-top:1px solid var(--color-rule);transition:background var(--dur-short) var(--ease-out)}
.wrow:first-child{border-top:none}
.wrow:hover{background:var(--color-paper-2)}
.wrow .no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent)}
.wrow .no::before{content:counter(w,decimal-leading-zero)}
.wrow .body h3{font-size:var(--text-lg);display:inline}
.wrow .body .state{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-neutral);margin-left:.8ch}
.wrow .body .state.live{color:var(--color-accent)}
.wrow .body p{color:var(--color-muted);margin-top:var(--sp-2);max-width:60ch;font-size:var(--text-base)}
.wrow .go{white-space:nowrap;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:560px){.wrow{grid-template-columns:auto 1fr}.wrow .go{grid-column:2}}

/* contact block */
.contact-b .card{border:1px solid var(--color-rule);border-radius:calc(var(--radius) + 4px);background:var(--color-paper-2);padding:var(--sp-12)}
.contact-b h2{font-size:var(--text-2xl);max-width:18ch}
.contact-b p{color:var(--color-muted);margin-top:var(--sp-3);max-width:50ch}
.contact-b .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* ===== Ft4 · dense typographic footer ===== */
.dense{border-top:1px solid var(--color-rule);margin-top:var(--sp-16);padding-top:var(--sp-8);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);font-size:var(--text-sm)}
@media(max-width:640px){.dense{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dense h4{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-neutral);margin-bottom:var(--sp-3)}
.dense a{display:block;color:var(--color-muted);padding-block:.15rem}
.dense a:hover{color:var(--color-ink)}
.dense .col p{color:var(--color-muted)}
.dense-base{grid-column:1/-1;border-top:1px solid var(--color-rule);margin-top:var(--sp-4);padding-block:var(--sp-4);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-neutral);display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between}

/* reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}