/* ============================================================
   Dennis Kim — design system
   Black and white only. Hierarchy through weight, scale,
   spacing and tone — never colour.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  /* grayscale palette — the entire colour system */
  --ink:#0b0b0c;                    /* near-black: headings, ink fields   */
  --ink-92:rgba(11,11,12,.92);
  --ink-78:rgba(11,11,12,.78);      /*  9.1:1  body prose                 */
  --ink-60:rgba(11,11,12,.60);      /*  5.2:1  small labels               */
  --ink-40:rgba(11,11,12,.40);
  --hair:rgba(11,11,12,.16);        /* hairlines only                     */
  --hair-soft:rgba(11,11,12,.09);

  --snow:#ffffff;
  --snow-78:rgba(255,255,255,.78);  /* 11.2:1  body prose on ink          */
  --snow-60:rgba(255,255,255,.60);  /*  7.0:1  small labels on ink        */
  --snow-40:rgba(255,255,255,.40);
  --hair-d:rgba(255,255,255,.18);
  --hair-d-soft:rgba(255,255,255,.10);

  --paper:#faf9f7;                  /* warm off-white                     */
  --paper-2:#f2f0ec;                /* one step down, for hover fields    */

  --label:var(--ink-60);
  --label-d:var(--snow-60);

  /* type — two families only.
     Newsreader carries display and prose (variable wght 200–800, opsz 6–72,
     with a true calligraphic italic); Jost, a geometric Bauhaus sans,
     carries navigation, labels and every piece of structural furniture. */
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --text:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* 8px spacing grid */
  --s05:4px;  --s1:8px;   --s2:16px;  --s3:24px;  --s4:32px;
  --s5:40px;  --s6:48px;  --s7:64px;  --s8:80px;  --s9:96px;
  --s10:128px; --s11:160px; --s12:200px;

  /* fluid rhythm, all endpoints on the grid */
  --gut:clamp(24px,4.6vw,64px);          /* page gutter                  */
  --sec:clamp(80px,10vw,160px);          /* major section                */
  --sec-tight:clamp(48px,6vw,96px);      /* minor section                */
  /* Paper ↔ ink blend distance. The seam is painted OVER the section above
     it, so it must stay shorter than that section's bottom padding or it
     tints live content. Dithering means it no longer needs length to stay
     smooth, so it is kept deliberately short. */
  --seam:clamp(80px,8vw,120px);

  --maxw:1560px;
  --rail:200px;                          /* sticky label column          */

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --t-fast:.22s;
  --t-slow:.92s;

  --navh:76px;
}
@media (min-width:900px){:root{--navh:96px}}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- 2b. dither ----------
   Long tonal ramps quantise to 8 bits and the eye reads each flat step as a
   bar. This is the same fix Photoshop applies with its gradient "Dither"
   option: a fixed, page-wide film of monochrome noise, composited in
   `overlay` so it perturbs midtones symmetrically and leaves the extremes
   alone. It sits above everything and takes no pointer events, so no seam
   anywhere on the site can develop a visible edge. */
body::after{
  content:'';
  position:fixed;inset:0;z-index:100;
  pointer-events:none;
  opacity:.3;
  mix-blend-mode:overlay;
  background-repeat:repeat;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.on-dark :focus-visible,
.on-ink :focus-visible,
.site-nav.on-dark :focus-visible,
.site-nav.is-open :focus-visible,
.site-foot :focus-visible,
.hero :focus-visible{outline-color:var(--snow)}

.skip{
  position:fixed;top:var(--s2);left:var(--s2);z-index:200;
  background:var(--ink);color:var(--paper);
  padding:13px 18px;
  font:400 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  transform:translateY(-200%);
  transition:transform .34s var(--ease);
}
.skip:focus{transform:none}
main:focus{outline:none}

/* ============================================================
   3. TYPE
   ============================================================ */
.eyebrow{
  font:400 10px/1.5 var(--sans);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--label);
}
.eyebrow--light{color:var(--label-d)}
.eyebrow--lg{font-size:clamp(13px,1.4vw,16px);letter-spacing:.2em}

/* display face — Didone, high contrast, set tight and large */
.display{
  font-family:var(--display);
  font-weight:300;
  font-optical-sizing:auto;
  letter-spacing:-.018em;
  line-height:1.03;
  text-wrap:balance;
}
.display em,.display i.it{font-style:italic}
.d-xl{font-size:clamp(46px,8.6vw,132px);letter-spacing:-.026em}
.d-lg{font-size:clamp(38px,5.8vw,86px);letter-spacing:-.022em}
.d-md{font-size:clamp(28px,3.5vw,52px);line-height:1.14;letter-spacing:-.014em}
.d-sm{font-size:clamp(23px,2.4vw,34px);line-height:1.22;letter-spacing:-.01em}

/* prose */
.lede{
  font:300 clamp(19px,1.8vw,26px)/1.5 var(--text);
  color:var(--ink-78);
  letter-spacing:.002em;
  text-wrap:pretty;
}
.body{
  font:400 clamp(16px,1.15vw,17.5px)/1.6 var(--text);
  color:var(--ink-78);
  letter-spacing:.004em;
  text-wrap:pretty;
}
.body + .body{margin-top:1.5em}
.body em{font-style:italic}

.meta{
  font:300 10.5px/1.7 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--label);
}
.meta--light{color:var(--label-d)}
em{font-style:italic}

.measure{max-width:64ch}
.measure-sm{max-width:50ch}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:var(--sec-tight)}

.split{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.split__rail{position:sticky;top:calc(var(--navh) + var(--s4))}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--s3)}
  .split__rail{position:static}
}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,64px);align-items:center}
.duo--start{align-items:start}
/* golden-ratio splits — the image, or the text, carries the weight */
.duo--wide{grid-template-columns:1.618fr 1fr}
.duo--tall{grid-template-columns:1fr 1.618fr}
@media (max-width:900px){
  .duo,.duo--wide,.duo--tall{grid-template-columns:1fr;gap:var(--s5)}
}

/* ============================================================
   5. THE MOTIF
   A hairline carrying one small solid square at its terminus.
   It opens sections, divides them, and closes the page.
   ============================================================ */
.mark{
  position:relative;
  display:block;
  height:1px;
  background:var(--hair);
  border:0;margin:0;
}
.mark::before{
  content:'';position:absolute;left:0;top:-2px;
  width:5px;height:5px;background:var(--ink);
}
.mark--center::before{left:50%;transform:translateX(-50%)}
.mark--short{width:clamp(96px,12vw,168px)}
.on-ink .mark,.site-foot .mark{background:var(--hair-d)}
.on-ink .mark::before,.site-foot .mark::before{background:var(--snow)}

/* the mark draws itself in when it enters the frame */
.mark{transform:scaleX(0);transform-origin:left;transition:transform 1.05s var(--ease) var(--d,0s)}
.mark.in{transform:none}
.mark::before{opacity:0;transition:opacity .5s var(--ease) calc(var(--d,0s) + .5s)}
.mark.in::before{opacity:1}
.mark--center{transform-origin:center}

.rule{height:1px;background:var(--hair);border:0;margin:0}
.on-ink .rule{background:var(--hair-d)}

/* section opener: motif + eyebrow, used at the head of every section */
.opener{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s6)}
.opener .mark{width:clamp(80px,10vw,140px)}

/* ============================================================
   6. NAV
   ============================================================ */
/* A frosted panel that inverts between the paper and ink fields.

   --nd is the bar's darkness, 0 = ink on paper, 1 = snow on ink. It is not
   a CSS transition: site.js drives it every frame from how dark the page
   actually is behind the bar, so the swap is tied to scroll position rather
   than to a clock. A timed fade always runs for its own fixed duration no
   matter how fast the page is moving, which is what made the change arrive
   out of step with what you were looking at. Channels are interpolated by
   hand because a custom property cannot itself hold an interpolatable
   colour.
     ink #0b0b0c = 11,11,12       snow #ffffff = 255,255,255              */
.site-nav{
  --nd:0;
  position:fixed;inset:0 0 auto 0;z-index:80;
  height:var(--navh);
  display:flex;align-items:center;
  padding-inline:var(--gut);
  color:rgb(calc(11 + 244*var(--nd)),calc(11 + 244*var(--nd)),calc(12 + 243*var(--nd)));
  transition:height .5s var(--ease);
}
/* the panel is a layer of its own so its colour can track --nd every frame
   while its arrival is still a gentle fade */
.site-nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgb(calc(250 - 239*var(--nd)),calc(249 - 238*var(--nd)),calc(247 - 235*var(--nd)));
  opacity:0;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  transition:opacity .34s var(--ease);
}
.site-nav.is-stuck::before{opacity:.92}
.site-nav::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(calc(11 + 244*var(--nd)),calc(11 + 244*var(--nd)),calc(12 + 243*var(--nd)),.17);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--ease),opacity .3s var(--ease);
}
.site-nav.is-stuck::after{transform:scaleY(1)}
/* no script, no scroll to drive --nd: the hero page keeps its light bar */
.no-js .site-nav.on-dark{color:var(--snow)}
.no-js .site-nav.on-dark::after{background:var(--hair-d)}
/* elegant collapse: the bar tightens once you have left the top */
@media (min-width:900px){
  .site-nav.is-stuck{height:72px}
}

.nav__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}

/* wordmark — shared face so the drawer copy can scale from it exactly */
.wordmark,.drawer__mark{
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.34em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
.wordmark{
  display:inline-block;
  font-size:clamp(15px,1.35vw,19px);
  padding-block:var(--s2);
  transition:opacity .3s var(--ease);
}
.wordmark:hover{opacity:.6}
.site-nav.is-open .wordmark{opacity:0;pointer-events:none;transition:opacity .2s linear}
/* the header copy fades back in exactly as the drawer copy lands on it, so
   the two cross-fade in place and the mark never blinks out */
.site-nav.is-closing .wordmark{opacity:1;pointer-events:none;transition:opacity .22s linear .46s}

.nav__links{display:flex;align-items:center;gap:clamp(22px,2.6vw,44px)}
@media (max-width:899px){.nav__links{display:none}}

/* larger, a touch heavier, and materially higher contrast than before */
.nav__link{
  position:relative;
  font:400 clamp(11.5px,.85vw,13px)/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;
  padding-block:var(--s2);
  opacity:.82;
  transition:opacity var(--t-fast) ease;
}
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:11px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover{opacity:1}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{opacity:1}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* burger — 44px hit area */
.burger{
  display:none;position:relative;z-index:3;
  width:44px;height:44px;margin-right:-10px;flex:0 0 auto;
}
@media (max-width:899px){.burger{display:block}}
.burger span{
  position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;
  transition:transform .55s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){bottom:17px}
.site-nav.is-open .burger span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.site-nav.is-open .burger span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- drawer ---------- */
/* The ink field lives on a pseudo-element rather than the drawer itself, so
   the backdrop can fade independently of the wordmark riding on top of it.
   That is what lets the mark stay solid all the way back to the header
   instead of dissolving mid-flight. */
.nav__drawer{
  position:fixed;inset:0;z-index:-1;
  color:var(--snow);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--navh) + var(--s6)) var(--gut) var(--s8);
  visibility:hidden;
  /* the drawer is fixed and full-bleed, so it must stop taking pointer
     events the instant it starts closing or it swallows clicks on the page
     behind it for the length of the exit */
  pointer-events:none;
  transition:visibility 0s linear 0s;
}
.nav__drawer::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  opacity:0;
  transition:opacity .42s var(--ease);
}
.site-nav.is-open .nav__drawer{
  visibility:visible;
  pointer-events:auto;
  transition:visibility 0s linear 0s;
}
.site-nav.is-open .nav__drawer::before{opacity:1}
/* on the way out the backdrop holds, then clears only once the mark has
   landed — total 720ms, matching CLOSE_MS in site.js */
.site-nav.is-closing .nav__drawer{
  visibility:visible;
  transition:visibility 0s linear .72s;
}
.site-nav.is-closing .nav__drawer::before{
  opacity:0;
  transition:opacity .42s var(--ease) .30s;
}
/* The drawer is an ink field like any other, so site.js simply folds its
   backdrop's live opacity into the bar's darkness. Pinning --nd here
   instead would hold the bar dark for the whole exit and then drop it in
   one step at the end, which is what made the close feel like a trick. */
.site-nav.is-open::after,.site-nav.is-closing::after{opacity:0}

.drawer__inner{
  display:flex;flex-direction:column;align-items:center;
  width:100%;text-align:center;
}

/* the wordmark grows out of the header bar and settles above the links */
.drawer__mark{
  display:block;
  font-size:clamp(22px,6.6vw,34px);
  transform-origin:top left;
  opacity:0;
  transition:transform .62s var(--ease),opacity .28s linear;
  will-change:transform;
}
.site-nav.is-open .drawer__mark{opacity:1}
/* holds full strength for the whole 500ms flight home, then hands over */
.site-nav.is-closing .drawer__mark{
  opacity:0;
  transition:transform .5s var(--ease),opacity .22s linear .46s;
}
.drawer__rule{
  display:block;width:1px;height:clamp(32px,7vh,64px);
  background:linear-gradient(to bottom,var(--snow) 0%,rgba(255,255,255,.12) 100%);
  margin-block:clamp(20px,3.4vh,32px);
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease);
}
.site-nav.is-open .drawer__rule{transform:none;transition-delay:.22s}

.drawer__nav{display:flex;flex-direction:column;align-items:center;width:100%}
.drawer__link{
  display:block;width:100%;
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(30px,8.4vw,50px);line-height:1.26;
  letter-spacing:-.016em;
  padding-block:var(--s1);
  /* closing state is the default — this is what the links animate back to */
  opacity:0;transform:translateY(16px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.site-nav.is-open .drawer__link{
  opacity:1;transform:none;
  transition:opacity .66s var(--ease),transform .66s var(--ease);
  transition-delay:calc(.14s + var(--i,0)*.06s);
}
.drawer__link[aria-current="page"]{color:var(--snow)}
.drawer__link:not([aria-current="page"]){color:var(--snow-60)}
.drawer__link[aria-current="page"]::after{
  content:'';display:block;width:26px;height:1px;background:var(--snow);
  margin:6px auto 0;
}
body.nav-open{overflow:hidden}

/* ============================================================
   7. PAGE TRANSITION
   ============================================================ */
/* The closing seam blends over clear paper, never over type. The last
   section already contributes its own bottom padding, so this only has to
   make up the difference. */
.page{padding-bottom:clamp(48px,6vw,96px)}
.page{opacity:0;transition:opacity .5s var(--ease)}
body.is-ready .page{opacity:1}
body.is-leaving .page{opacity:0;transition-duration:.32s}

.veil{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  background:var(--paper);opacity:1;
  transition:opacity .5s var(--ease);
}
body.is-ready .veil{opacity:0}
body.is-leaving .veil{opacity:1;transition-duration:.32s}
body.nav-open .veil{background:var(--ink)}

/* ============================================================
   8. REVEALS — timed as phrases, never as jolts
   ============================================================ */
[data-rv]{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease) var(--d,0s),
             transform var(--t-slow) var(--ease) var(--d,0s);
}
[data-rv].in{opacity:1;transform:none}

/* a gentler variant: settles up from 0.98 rather than sliding */
[data-rv-scale]{
  opacity:0;transform:scale(.98);
  transition:opacity var(--t-slow) var(--ease) var(--d,0s),
             transform var(--t-slow) var(--ease) var(--d,0s);
}
[data-rv-scale].in{opacity:1;transform:none}

.lines .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines .line > i{
  display:block;font-style:inherit;
  transform:translateY(112%);
  transition:transform 1.05s var(--ease) var(--d,0s);
}
.lines.in .line > i{transform:none}
/* italic display lines need side room so the slant is not clipped */
.lines--it .line{padding-inline:.08em;margin-inline:-.08em}

.img-rv{overflow:hidden;position:relative}
.img-rv img{
  transform:scale(1.08);
  transition:transform 1.5s var(--ease) var(--d,0s);
  will-change:transform;
}
.img-rv::after{
  content:'';position:absolute;inset:0;background:var(--paper);
  transform-origin:bottom;
  transition:transform 1.1s var(--ease) var(--d,0s);
}
.img-rv.in img{transform:none}
.img-rv.in::after{transform:scaleY(0)}
.on-ink .img-rv::after,.site-foot .img-rv::after{background:var(--ink)}

/* ============================================================
   9. HERO — 62/38, the portrait carries it, a rule holds the type
   ============================================================ */
.hero{
  position:relative;
  min-height:600px;height:100svh;max-height:1040px;
  background:#08080a;color:var(--snow);
  overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero__media{
  position:absolute;inset:0;overflow:hidden;
  transform:scale(1.10);
  transition:transform 2.4s var(--ease-soft);
}
body.is-ready .hero__media{transform:scale(1.004)}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  will-change:transform;
}

/* eased scrims — many stops, smootherstep, so no band is ever visible */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(6,6,7,.62) 0%,rgba(6,6,7,.6196) 2%,rgba(6,6,7,.6141) 4%,
      rgba(6,6,7,.6023) 6%,rgba(6,6,7,.5826) 8%,rgba(6,6,7,.5539) 10%,
      rgba(6,6,7,.5157) 12%,rgba(6,6,7,.4685) 14%,rgba(6,6,7,.4136) 16%,
      rgba(6,6,7,.3533) 18%,rgba(6,6,7,.2904) 20%,rgba(6,6,7,.2283) 22%,
      rgba(6,6,7,.1703) 24%,rgba(6,6,7,.1192) 26%,rgba(6,6,7,.0771) 28%,
      rgba(6,6,7,.0451) 30%,rgba(6,6,7,.0231) 32%,rgba(6,6,7,.0097) 34%,
      rgba(6,6,7,.0029) 36%,rgba(6,6,7,.0004) 38%,rgba(6,6,7,0) 40%),
    linear-gradient(to top,
      rgba(6,6,7,.80) 0%,rgba(6,6,7,.7995) 3%,rgba(6,6,7,.7952) 6%,
      rgba(6,6,7,.7828) 9%,rgba(6,6,7,.7592) 12%,rgba(6,6,7,.7222) 15%,
      rgba(6,6,7,.6710) 18%,rgba(6,6,7,.6062) 21%,rgba(6,6,7,.5296) 24%,
      rgba(6,6,7,.4444) 27%,rgba(6,6,7,.3547) 30%,rgba(6,6,7,.2653) 33%,
      rgba(6,6,7,.1812) 36%,rgba(6,6,7,.1075) 39%,rgba(6,6,7,.0487) 42%,
      rgba(6,6,7,.0130) 45%,rgba(6,6,7,.0017) 48%,rgba(6,6,7,0) 52%),
    linear-gradient(to right,
      rgba(6,6,7,.55) 0%,rgba(6,6,7,.5495) 4%,rgba(6,6,7,.5452) 8%,
      rgba(6,6,7,.5330) 12%,rgba(6,6,7,.5099) 16%,rgba(6,6,7,.4741) 20%,
      rgba(6,6,7,.4251) 24%,rgba(6,6,7,.3639) 28%,rgba(6,6,7,.2929) 32%,
      rgba(6,6,7,.2158) 36%,rgba(6,6,7,.1375) 40%,rgba(6,6,7,.0653) 44%,
      rgba(6,6,7,.0148) 48%,rgba(6,6,7,.0012) 52%,rgba(6,6,7,0) 58%);
}
.hero__inner{position:relative;width:100%;padding-bottom:clamp(48px,9vh,104px)}
.hero__stack{max-width:min(880px,94%)}
.hero .eyebrow{margin-bottom:var(--s3)}
.hero__mark{width:clamp(96px,11vw,168px);margin-bottom:var(--s4)}
.hero__sub{
  margin-top:clamp(24px,3.6vh,40px);
  padding-left:var(--s3);
  border-left:1px solid var(--hair-d);
  font:300 clamp(15.5px,1.35vw,19px)/1.6 var(--text);
  color:var(--snow-78);
  max-width:46ch;
}
.hero__credit{
  margin-top:clamp(20px,2.6vh,32px);
  font:300 10px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--snow-40);
}

.scroll-cue{
  position:absolute;right:var(--gut);bottom:clamp(48px,9vh,104px);
  display:flex;flex-direction:column;align-items:center;gap:13px;
  color:var(--snow-60);
}
@media (max-width:900px){.scroll-cue{display:none}}
.scroll-cue span{font:300 9px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.scroll-cue i{
  width:1px;height:64px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.6) 0%,rgba(255,255,255,.5947) 10%,rgba(255,255,255,.5590) 20%,
    rgba(255,255,255,.4778) 30%,rgba(255,255,255,.3600) 40%,rgba(255,255,255,.2400) 50%,
    rgba(255,255,255,.1354) 60%,rgba(255,255,255,.0610) 70%,rgba(255,255,255,.0186) 80%,
    rgba(255,255,255,.0023) 90%,rgba(255,255,255,0) 100%);
  transform-origin:top;animation:cue 2.8s var(--ease-soft) infinite;
}
@keyframes cue{
  0%{transform:scaleY(0);opacity:0}
  22%{opacity:1}
  62%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}
}

/* interior page mastheads */
.masthead{
  padding-top:calc(var(--navh) + clamp(56px,10vh,136px));
  padding-bottom:clamp(40px,5vw,72px);
}
.masthead .mark{width:clamp(80px,10vw,140px);margin-bottom:var(--s4)}
.masthead .eyebrow{display:block;margin-bottom:clamp(20px,3vw,36px)}
.masthead__lede{margin-top:clamp(28px,3.4vw,48px)}
/* when the lede runs straight on into prose, the two should read as one
   column of text rather than two separated blocks */
.masthead--tight{padding-bottom:clamp(16px,1.8vw,26px)}

/* ============================================================
   10. COMPONENTS
   ============================================================ */
.ln{
  position:relative;display:inline-block;
  font:400 11px/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:10px;
  min-height:24px;
  transition:opacity var(--t-fast) ease;
}
.ln::before,.ln::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px}
.ln::before{background:var(--ink-40)}
.ln::after{background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ln:hover::after{transform:scaleX(1);transform-origin:left}
.on-ink .ln::before,.site-foot .ln::before{background:var(--snow-40)}

/* --- index rows --- */
.rows{border-top:1px solid var(--hair)}
.row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) minmax(0,auto);
  gap:var(--s1) clamp(16px,3vw,40px);
  align-items:baseline;
  padding-block:clamp(20px,2.2vw,28px);
  border-bottom:1px solid var(--hair);
  transition:padding-left .45s var(--ease);
}
.rows--hover .row:hover{padding-left:var(--s2)}
/* a row can be the link itself */
a.row{color:inherit;text-decoration:none}
@media (max-width:820px){
  .row{grid-template-columns:1fr;gap:var(--s05);padding-block:var(--s3)}
}
.row__k{
  font:300 10.5px/1.5 var(--sans);letter-spacing:.16em;
  color:var(--label);text-transform:uppercase;
}
.row__t{font:400 clamp(19px,1.7vw,25px)/1.3 var(--text)}
.row__n{
  font:300 10px/1.6 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);
  text-align:right;max-width:24ch;justify-self:end;
}
@media (max-width:820px){.row__n{text-align:left;justify-self:start;max-width:none}}
.on-ink .rows,.on-ink .row{border-color:var(--hair-d)}
.on-ink .row__k,.on-ink .row__n{color:var(--label-d)}

/* --- inline word lists --- */
.tags{display:flex;flex-wrap:wrap;gap:var(--s1) 0}
.tags li{font:400 clamp(15.5px,1.15vw,17px)/1.55 var(--text);color:var(--ink-78)}
.tags li:not(:last-child)::after{content:'·';margin-inline:.62em;color:var(--ink-40)}
.on-ink .tags li{color:var(--snow-78)}
.on-ink .tags li:not(:last-child)::after{color:var(--snow-40)}

.stack li{font:400 clamp(15px,1.12vw,16.5px)/2 var(--text);color:var(--ink-78)}
.on-ink .stack li{color:var(--snow-78)}

/* --- roster: the prestige treatment for orchestras and conductors --- */
.roster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 clamp(32px,4vw,80px);
}
.roster__col{border-top:1px solid var(--hair-d)}
.roster__h{padding-block:var(--s2) var(--s3);display:block}
.roster__i{
  display:flex;align-items:baseline;gap:var(--s2);
  padding-block:clamp(12px,1.4vw,17px);
  border-top:1px solid var(--hair-d-soft);
}
.roster__n{
  flex:0 0 auto;width:22px;
  font:300 9.5px/1.6 var(--sans);letter-spacing:.1em;
  color:var(--snow-40);font-variant-numeric:tabular-nums;
}
.roster__t{font:400 clamp(17px,1.5vw,22px)/1.34 var(--text);color:var(--snow)}
.roster__t--it{font-style:italic;font-weight:400}
/* paper-field variant */
.roster--paper .roster__col{border-top-color:var(--hair)}
.roster--paper .roster__i{border-top-color:var(--hair-soft)}
.roster--paper .roster__n{color:var(--ink-40)}
.roster--paper .roster__t{color:var(--ink)}

/* --- credits: the soundtracks get their own moment --- */
.credits{border-top:1px solid var(--hair-d)}
.credit{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);
  padding-block:clamp(18px,2.2vw,28px);
  border-bottom:1px solid var(--hair-d);
}
.credit__t{
  font:300 clamp(24px,3vw,42px)/1.16 var(--display);
  font-style:italic;letter-spacing:-.014em;
  color:var(--snow);
}
.credit__m{
  flex:0 0 auto;
  font:300 10px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--snow-40);text-align:right;
}
.credit--more .credit__t{
  font-style:normal;font-family:var(--sans);font-weight:300;
  font-size:clamp(12px,1vw,13.5px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--snow-60);
  transition:color var(--t-fast) ease;
}
/* when the row is the link to the full list, it says so and behaves like one */
.credit--more .credit__t i{
  font-style:normal;display:inline-block;margin-left:.5em;
  transform:translateX(-4px);
  transition:transform .5s var(--ease);
}
a.credit--more:hover .credit__t,
a.credit--more:focus-visible .credit__t{color:var(--snow)}
a.credit--more:hover .credit__t i{transform:none}
@media (max-width:640px){
  .credit{flex-direction:column;gap:var(--s1)}
  .credit__m{text-align:left}
}

/* --- statistics --- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
.stat{background:var(--paper);padding:clamp(32px,3.4vw,48px) clamp(24px,2.4vw,36px)}
.stat__n{
  font:200 clamp(44px,5.4vw,78px)/1 var(--sans);
  letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
}
.stat__l{margin-top:var(--s2);max-width:28ch;color:var(--ink-78)}
.on-ink .stat__l{color:var(--snow-78)}
.on-ink .stats{background:var(--hair-d)}
.on-ink .stat{background:var(--ink)}

/* --- placements: where his students went --- */
.placements{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(40px,5vw,96px);
}
/* the column heads stay small caps: the section already carries one display
   heading, and a second tier of display type here reads as a duplicate once
   the rail stacks above the content on narrow screens */
.placement__h{margin-bottom:var(--s3)}
.placement__l{border-top:1px solid var(--hair)}
.placement__l li{
  font:400 clamp(15.5px,1.2vw,18px)/1.4 var(--text);
  color:var(--ink-78);
  padding-block:clamp(10px,1.1vw,14px);
  border-bottom:1px solid var(--hair-soft);
}
.on-ink .placement__l{border-top-color:var(--hair-d)}
.on-ink .placement__l li{color:var(--snow-78);border-bottom-color:var(--hair-d-soft)}

/* --- gateway cards --- */
.gates{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.gates--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.gates,.gates--2{grid-template-columns:1fr}}
.gate{
  position:relative;display:block;
  padding:clamp(24px,2.2vw,32px) clamp(20px,2vw,32px) clamp(26px,2.6vw,36px);
  border-bottom:1px solid var(--hair);
  overflow:hidden;isolation:isolate;
}
.gate + .gate{border-left:1px solid var(--hair)}
@media (max-width:860px){.gate + .gate{border-left:0}}
.gate::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--paper-2);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .7s var(--ease);
}
.gate:hover::before,.gate:focus-visible::before{transform:scaleY(1);transform-origin:top}
.gate__t{
  font:300 clamp(26px,2.6vw,38px)/1.12 var(--display);letter-spacing:-.018em;
  font-style:italic;
  display:flex;align-items:baseline;gap:.42em;
}
.gate__t i{
  font-style:normal;display:inline-block;font-size:.42em;
  font-family:var(--sans);
  opacity:.3;transform:translateX(-6px);
  transition:transform .55s var(--ease),opacity .55s var(--ease);
}
.gate:hover .gate__t i,.gate:focus-visible .gate__t i{transform:none;opacity:.6}
/* block, or the margin and measure below are silently ignored and anything
   following it runs onto the same line */
.gate__d{display:block;margin-top:var(--s2);font:400 15.5px/1.6 var(--text);color:var(--ink-78);max-width:32ch}
/* a card that leaves the site names where it goes, and keeps saying so
   when nobody is hovering it */
.gate__cta{
  display:inline-block;margin-top:clamp(20px,2.4vw,32px);
  padding-bottom:6px;border-bottom:1px solid var(--ink-40);
  color:var(--ink);
  transition:border-color var(--t-fast) ease;
}
.gate:hover .gate__cta,.gate:focus-visible .gate__cta{border-bottom-color:var(--ink)}

/* --- dark band --- */
/* the vertical margin guarantees clear paper for the seams to blend over,
   whatever padding the neighbouring sections happen to carry */
.band{position:relative;isolation:isolate;background:var(--ink);color:var(--snow);margin-block:var(--s6)}
.band .lede,.band .body{color:var(--snow-78)}
.band .eyebrow,.band .meta{color:var(--label-d)}
.band .rule{background:var(--hair-d)}

/* The seam. 25 smootherstep stops across a long distance: the slope is
   continuous at every stop, so no Mach band can form. */
.band::before,.band::after{
  content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  height:var(--seam);
  background:linear-gradient(to bottom,
    rgba(11,11,12,0)      0%,
    rgba(11,11,12,.0007)  4.17%,
    rgba(11,11,12,.0051)  8.33%,
    rgba(11,11,12,.0161)  12.5%,
    rgba(11,11,12,.0355)  16.67%,
    rgba(11,11,12,.0645)  20.83%,
    rgba(11,11,12,.1035)  25%,
    rgba(11,11,12,.1522)  29.17%,
    rgba(11,11,12,.2099)  33.33%,
    rgba(11,11,12,.2752)  37.5%,
    rgba(11,11,12,.3466)  41.67%,
    rgba(11,11,12,.4223)  45.83%,
    rgba(11,11,12,.5)     50%,
    rgba(11,11,12,.5777)  54.17%,
    rgba(11,11,12,.6534)  58.33%,
    rgba(11,11,12,.7248)  62.5%,
    rgba(11,11,12,.7901)  66.67%,
    rgba(11,11,12,.8478)  70.83%,
    rgba(11,11,12,.8965)  75%,
    rgba(11,11,12,.9355)  79.17%,
    rgba(11,11,12,.9645)  83.33%,
    rgba(11,11,12,.9839)  87.5%,
    rgba(11,11,12,.9949)  91.67%,
    rgba(11,11,12,.9993)  95.83%,
    rgba(11,11,12,1)      100%);
}
/* Overlap the field by 1px. Section tops land on fractional pixels, and a
   seam butted exactly against the edge leaves a half-covered row where the
   paper behind shows through as a hairline. */
.band::before{top:0;transform:translateY(calc(-100% + 1px))}
.band::after{bottom:0;transform:translateY(calc(100% - 1px)) scaleY(-1)}
/* a band that runs straight into the footer needs no bottom seam, and no
   margin either — the gap would show as a strip of paper between two inks */
.band--to-foot{margin-bottom:0}
.band--to-foot::after{display:none}
/* the page's own bottom padding would show as a strip of paper between the
   band's ink and the footer's, so it goes too */
body.foot-flush .page{padding-bottom:0}

/* --- figures --- */
.fig figcaption{margin-top:var(--s2)}
/* a second, quieter line under a caption: who took the picture */
.fig__credit{display:block;margin-top:3px;color:var(--ink-40)}
.on-ink .fig__credit{color:var(--snow-40)}
.fig img{width:100%;height:auto;object-fit:cover}
.ratio-4x5{aspect-ratio:4/5}
.ratio-3x2{aspect-ratio:3/2}
.ratio-1x1{aspect-ratio:1/1}
.ratio-16x7{aspect-ratio:16/7}
@media (max-width:760px){.ratio-16x7{aspect-ratio:4/3}}
.mono img{filter:grayscale(1) contrast(1.05)}

/* an image that is held by a rule rather than floated in space */
.fig--held{position:relative;padding-top:var(--s3)}
.fig--held::before{
  content:'';position:absolute;top:0;left:0;width:clamp(64px,8vw,112px);height:1px;
  background:var(--ink);
}
.on-ink .fig--held::before{background:var(--snow)}

/* --- video embeds --- */
.videos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,4vw,64px);
}
.video__frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink);
}
.video__frame iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;
}
/* the same curtain the figures use, but nothing is scaled behind it: a
   transformed player puts its own controls in the wrong place */
.video__frame::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--paper);
  transform-origin:bottom;
  transition:transform 1.1s var(--ease) var(--d,0s);
}
.in .video__frame::after{transform:scaleY(0)}
.on-ink .video__frame::after{background:var(--ink)}

/* full-bleed plate with the caption sitting on the image */
.plate{position:relative;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
.plate__cap{
  position:absolute;left:0;bottom:0;
  padding:var(--s4) var(--gut);
  color:var(--snow);
  width:100%;
}
.plate__cap::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(6,6,7,.72) 0%,rgba(6,6,7,.7157) 8%,rgba(6,6,7,.6867) 16%,
    rgba(6,6,7,.6182) 24%,rgba(6,6,7,.5076) 32%,rgba(6,6,7,.3697) 40%,
    rgba(6,6,7,.2333) 48%,rgba(6,6,7,.1244) 56%,rgba(6,6,7,.0525) 64%,
    rgba(6,6,7,.0154) 72%,rgba(6,6,7,.0021) 80%,rgba(6,6,7,0) 90%);
}
.plate__cap-inner{max-width:var(--maxw);margin:0 auto}

/* --- timeline --- */
.tl{border-top:1px solid var(--hair)}
.tl__item{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:var(--s1) clamp(16px,3vw,40px);
  padding-block:clamp(24px,2.6vw,36px);
  border-bottom:1px solid var(--hair);
}
@media (max-width:760px){.tl__item{grid-template-columns:1fr;gap:var(--s05)}}
.tl__y{font:300 11px/1.5 var(--sans);letter-spacing:.16em;color:var(--label);text-transform:uppercase}
.tl__h{font:400 clamp(18px,1.5vw,22px)/1.34 var(--text)}
.tl__d{margin-top:var(--s1);font:400 15.5px/1.62 var(--text);color:var(--ink-78);max-width:60ch}

/* ============================================================
   11. FOOTER — one black field, blended, on every page
   ============================================================ */
.site-foot{
  position:relative;isolation:isolate;
  background:var(--ink);color:var(--snow);
  padding-block:clamp(72px,8vw,120px) clamp(40px,4.4vw,64px);
  margin-top:0;
}
/* the same eased seam, so the page dissolves into the footer */
.site-foot::before{
  content:'';position:absolute;left:0;right:0;top:0;z-index:1;
  height:var(--seam);transform:translateY(calc(-100% + 1px));pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,11,12,0)      0%,
    rgba(11,11,12,.0007)  4.17%,
    rgba(11,11,12,.0051)  8.33%,
    rgba(11,11,12,.0161)  12.5%,
    rgba(11,11,12,.0355)  16.67%,
    rgba(11,11,12,.0645)  20.83%,
    rgba(11,11,12,.1035)  25%,
    rgba(11,11,12,.1522)  29.17%,
    rgba(11,11,12,.2099)  33.33%,
    rgba(11,11,12,.2752)  37.5%,
    rgba(11,11,12,.3466)  41.67%,
    rgba(11,11,12,.4223)  45.83%,
    rgba(11,11,12,.5)     50%,
    rgba(11,11,12,.5777)  54.17%,
    rgba(11,11,12,.6534)  58.33%,
    rgba(11,11,12,.7248)  62.5%,
    rgba(11,11,12,.7901)  66.67%,
    rgba(11,11,12,.8478)  70.83%,
    rgba(11,11,12,.8965)  75%,
    rgba(11,11,12,.9355)  79.17%,
    rgba(11,11,12,.9645)  83.33%,
    rgba(11,11,12,.9839)  87.5%,
    rgba(11,11,12,.9949)  91.67%,
    rgba(11,11,12,.9993)  95.83%,
    rgba(11,11,12,1)      100%);
}
/* when the last section is already ink there is nothing to blend */
body.foot-flush .site-foot::before{display:none}

.foot__mark{margin-bottom:clamp(40px,5vw,72px)}
.foot__grid{
  display:grid;
  grid-template-columns:1.618fr repeat(2,minmax(0,.85fr));
  gap:clamp(32px,4vw,64px);align-items:start;
}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__col{display:flex;flex-direction:column;gap:2px}
.foot__col .wordmark{color:var(--snow);padding-block:0 var(--s2)}
.foot__h{margin-bottom:var(--s2);color:var(--label-d)}
.foot__l{
  font:300 12px/1.5 var(--sans);letter-spacing:.14em;color:var(--snow-60);
  transition:color var(--t-fast) ease;width:fit-content;
  padding-block:7px;
}
.foot__l:hover{color:var(--snow)}
.foot__note{font:300 12px/1.75 var(--sans);letter-spacing:.12em;color:var(--snow-60)}
.foot__base{
  position:relative;
  margin-top:clamp(48px,5.4vw,80px);
  padding-top:var(--s4);
  border-top:1px solid var(--hair-d-soft);
  display:flex;justify-content:flex-start;gap:var(--s3);flex-wrap:wrap;
}
.foot__base .meta{color:var(--snow-60)}
.foot__credit{
  position:absolute;left:50%;top:var(--s4);transform:translateX(-50%);
}
@media (max-width:520px){
  .foot__credit{position:static;transform:none;width:100%;text-align:center}
}
.foot__by{
  position:relative;color:var(--snow-78);
  transition:color var(--t-fast) ease;
}
.foot__by::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.foot__by:hover{color:var(--snow)}
.foot__by:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   12. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-rv],[data-rv-scale]{opacity:1;transform:none}
  .lines .line > i{transform:none}
  .img-rv img{transform:none}
  .img-rv::after{transform:scaleY(0)}
  .video__frame::after{transform:scaleY(0)}
  .mark{transform:none}
  .mark::before{opacity:1}
  .drawer__rule{transform:none}
  .drawer__link{opacity:1;transform:none}
  .drawer__mark{transform:none !important}
  .hero__media{transform:none}
  .page{opacity:1}
  .veil{display:none}
  .scroll-cue i{animation:none;transform:scaleY(1)}
}

/* ============================================================
   13. NO JAVASCRIPT
   ============================================================ */
.no-js .page{opacity:1}
.no-js .veil{display:none}
.no-js [data-rv],.no-js [data-rv-scale]{opacity:1;transform:none}
.no-js .lines .line > i{transform:none}
.no-js .img-rv img{transform:none}
.no-js .img-rv::after{display:none}
.no-js .video__frame::after{display:none}
.no-js .hero__media{transform:none}
.no-js .mark{transform:none}
.no-js .mark::before{opacity:1}

/* ============================================================
   14. PRINT
   ============================================================ */
@media print{
  .site-nav,.veil,.scroll-cue,.skip,.hero__scrim{display:none}
  .page{opacity:1}
  body{background:#fff;color:#000}
  .site-foot{background:#fff;color:#000}
}