@font-face { font-family:"Diatype Variable"; src:url("/fonts/Cargo-DiatypePlusVariable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root{
    --ink:#5c5c5c;
    --sw2:rgba(92,92,92,0.90); --sw3:rgba(92,92,92,0.72); --sw4:rgba(92,92,92,0.58);
    --accent:#2e2e2e; --bg1:#ebebeb; --tile:#101010;
    --line:rgba(92,92,92,0.42);
    /* One gutter for the whole frame: rail padding, card spread, and the first
       card's top all read from this, so the buffer is identical on every side. */
    --gut:1.4rem;
    --sans:"Diatype Variable","Helvetica Neue",Helvetica,Arial,sans-serif;
    --serif:"Times New Roman",Times,serif;
    /* One prose ladder. Every block of running sentences on the page — the rail bio, the
       card descriptions, the CV bio — reads from these two, so the serif has a single size
       and a single leading no matter which column it lands in. The measure varies by
       container; the voice does not. The sans keeps its own two steps (.72rem for ledger
       rows and links, .62rem for the uppercase micro-labels) and never sets a sentence. */
    --prose:clamp(.8rem,.72rem + .22vw,.92rem);
    --prose-lh:1.38;
    /* The gap below any block of prose, so the three serif blocks sit off their neighbours
       by the same amount instead of 1.4 / .7 / 1.1 as before. */
    --prose-gap:.8rem;
    /* One prose ink. The three serif blocks were on --ink, --sw4 and --sw2 — 5.61:1, 2.42:1
       and 4.54:1 — which is three different greys doing one job. This is the single value,
       set lighter than the two heavy ones because Times ships no light cut: weight cannot
       be taken out of the face, so it comes out of the ink. Lands at 3.55:1 on the light
       ground and 5.48:1 on the dark. Below the 4.5:1 AA floor in light mode; the card
       descriptions were already at 2.42:1, so this raises them and lightens the other two. */
    --prose-ink:rgba(92,92,92,0.78);
    /* The CV chip follows the theme rather than sitting at one fixed value: light plate
       and dark label here, dark plate and light label in dark mode. The dotted rule on it
       is what separates the chip from the page in both directions, since a light chip on a
       light ground and a dark chip on a dark ground both need the edge drawn for them. */
    --chip:#f6f6f6; --chip-ink:#1a1a1a;
  }

:root[data-theme="dark"]{
    --ink:#b0b0b0;
    --sw2:rgba(176,176,176,0.90); --sw3:rgba(176,176,176,0.72); --sw4:rgba(176,176,176,0.58);
    --accent:#ffffff; --bg1:#161718; --line:rgba(176,176,176,0.42);
    --chip:#0e0e0f; --chip-ink:rgba(255,255,255,0.92);
    --prose-ink:rgba(176,176,176,0.78);
  }


/* ══ Frame. Lifted from renaise.com: sticky 280px rail + measured main column. ══ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--sw2);background:var(--bg1);min-height:100vh;
  font-family:var(--sans);font-weight:400;font-size:.72rem;line-height:1.14;letter-spacing:0;}
a{color:inherit;text-decoration:none}

.app{display:flex;align-items:flex-start;}
.side{position:sticky;top:0;height:100vh;width:280px;flex-shrink:0;
  border-right:1px dotted var(--line);padding:var(--gut) var(--gut);
  display:flex;flex-direction:column;gap:1.9rem;z-index:10;}
.side .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.side .brand .mk-d{display:none;}
:root[data-theme="dark"] .side .brand .mk-l{display:none;}
:root[data-theme="dark"] .side .brand .mk-d{display:block;}
.statement h2{font-family:var(--serif);font-weight:300;font-size:var(--prose);
  line-height:var(--prose-lh);color:var(--prose-ink);margin:0;max-width:38ch;
  letter-spacing:0;text-wrap:pretty;padding-bottom:var(--prose-gap);}

/* Entity marquee — masked marks, same as live. */
.mq{overflow:hidden;margin-top:-1.9rem;border-top:1px dotted var(--line);padding-top:12px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.mq-t{display:flex;align-items:center;width:max-content;animation:mq 64s linear infinite;}
@keyframes mq{to{transform:translateX(-50%)}}
.ent{display:block;height:18px;background-color:var(--sw3);transition:background-color .2s;
  -webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain;}
.ent:hover{background-color:var(--ink);}
.mq .ent{flex:none;height:12px;margin-right:12px;}

.acts{display:flex;flex-direction:column;gap:.7rem;margin-top:auto;}
.acts a{font-family:var(--sans);font-size:.72rem;color:var(--sw2);
  text-decoration:none;transition:color .2s;}
.acts a:hover{color:var(--ink);}
.acts a[aria-current]{color:var(--ink);}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;}
.side .clock{position:static;font-family:var(--sans);font-size:.62rem;color:var(--sw4);
  letter-spacing:.03em;font-variant-numeric:tabular-nums;}

.tsw{display:none;}
.js .tsw{display:flex;align-items:center;gap:.55rem;background:none;border:0;padding:0;
  font-family:var(--sans);font-size:.72rem;color:var(--sw2);cursor:pointer;
  text-align:left;transition:color .2s;}
.tsw:hover{color:var(--ink);}
.tsw .track{position:relative;width:30px;height:16px;flex-shrink:0;border-radius:999px;
  border:1px dotted var(--line);}
.tsw .knob{position:absolute;top:50%;left:3px;width:8px;height:8px;border-radius:50%;
  background:currentColor;transform:translateY(-50%);transition:left .22s cubic-bezier(.2,.7,.2,1);}
:root[data-theme="dark"] .tsw .knob{left:17px;}
.tsw:focus-visible{outline:1px dotted var(--accent);outline-offset:3px;}

.wrap{flex:1;min-width:0;max-width:none;margin:0;
  padding:0 var(--gut) clamp(1.2rem,2vw,2rem);display:flex;flex-direction:column;}

/* ══ Page head. h1 is Times, as live — there is no display face on this site. ══ */
h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,12vw,11rem);
  line-height:.9;color:var(--sw4);letter-spacing:-.022em;font-kerning:normal;
  font-feature-settings:"kern" 1;margin:0;text-transform:none;}
h1 a{color:inherit}
h1 a:hover{color:var(--accent)}
.ph{padding:clamp(2rem,5vw,3.4rem) 0 1.4rem;}
.ph h2{font-family:var(--serif);font-weight:300;font-size:var(--prose);
  line-height:var(--prose-lh);color:var(--prose-ink);margin:.9rem 0 0;max-width:38ch;
  text-wrap:pretty;}

/* ══ Record. The .cv component set, reused verbatim for LAB/STAGE. ══ */
.rec .sec{display:grid;grid-template-columns:minmax(120px,22%) 1fr;gap:1.1rem 2.2rem;
  padding:1.5rem 0;border-top:1px dotted var(--line);align-items:start;}
.rec .sec:last-child{border-bottom:1px dotted var(--line);}
.rec .lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  justify-self:start;padding:.22rem .4rem .18rem;border-radius:3px;
  background:var(--chip);color:var(--chip-ink);border:1px dotted var(--line);}
.rec .body p{margin:0 0 var(--prose-gap);max-width:none;font-family:var(--serif);
  font-weight:300;font-size:var(--prose);line-height:var(--prose-lh);color:var(--prose-ink);}
.rec .body p:last-child{margin-bottom:0}
.rec .sub{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sw4);padding:.9rem 0 .3rem;}
.rec .row{display:flex;justify-content:space-between;gap:1.4rem;padding:.5rem 0;
  border-bottom:1px dotted var(--line);}
.rec .row:last-child{border-bottom:0;}
.rec .row .nm{color:var(--ink);}
.rec .row .yr,.rec .row .ctx{color:var(--sw3);font-family:var(--sans);font-size:.72rem;
  white-space:nowrap;letter-spacing:.03em;}
.rec .row .yr{font-variant-numeric:tabular-nums;}
a.row:hover .nm{color:var(--accent);}
.rec .links{display:flex;flex-wrap:wrap;gap:1.6rem;}

/* State is carried by the ctx column, not a colour chip — the site has no brand hue. */
.rec .row .ctx.open{color:var(--sw4);}

@media(max-width:1240px){
  .side{width:240px;}
}
@media(max-width:900px){
  .app{flex-direction:column;}
  .side{position:static;width:100%;height:auto;border-right:0;
    border-bottom:1px dotted var(--line);padding:var(--gut);gap:1.1rem;
    flex-flow:row wrap;align-items:center;}
  .side .brand{flex:0 0 auto;}
  .statement,.mq{flex:1 0 100%;}
  .statement h2{max-width:34ch;}
  .acts{display:contents;}
  .acts a{order:2;}
  .acts .foot{order:3;flex:1 0 100%;margin-top:.4rem;}
  .wrap{padding:0 var(--gut) clamp(1rem,3vw,1.6rem);}
  .rec .sec{grid-template-columns:1fr;gap:.7rem;}
  .rec .row{flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .mq-t{animation:none;}
  .tsw .knob{transition:none;}
}