/* Boyer Audio — house stylesheet. Extracted from the Shunyata brand page. */

/* ══════════════════════════════════════════════════════════════════════
   BOYER AUDIO · SHUNYATA RESEARCH

   Editorial layout on a 12-column grid. The page is composed, not
   stacked: every block is placed on named columns, and the images
   break the measure rather than sitting inside it. Three voices —
   Sincerity Bold for statements, Sincerity Light for the pull quotes,
   Schibsted Grotesk for everything you actually read. Mono is for
   labels and captions only.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Sincerity';src:url(../fonts/sincerity-light.woff2) format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sincerity';src:url(../fonts/sincerity-bold.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'PlayfairDisplay';src:url(../fonts/playfair-italic.woff2) format('woff2');
  font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Schibsted';src:url(../fonts/schibsted-grotesk.woff2) format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrainsMono';src:url(../fonts/jetbrains-mono.woff2) format('woff2');
  font-weight:500 700;font-style:normal;font-display:swap}

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --copper:#DA916D; --copper-bright:#E8A985; --copper-dark:#B56E4C;
  --bg:#F5F1EA; --bg-2:#EDE7DC; --bg-3:#E3DBCC; --surface:#FFFFFF;
  --ink:#1A1715; --ink-soft:#413A33; --ink-dim:#7D7468;
  --line:rgba(26,23,21,.16); --line-soft:rgba(26,23,21,.09);
  --accent:var(--copper-dark);
  --shadow:0 40px 64px -36px rgba(26,23,21,.40), 0 12px 22px -14px rgba(26,23,21,.18);

  --display:'Sincerity',Georgia,'Times New Roman',serif;
  --serif:'PlayfairDisplay',Georgia,serif;
  --sans:'Schibsted',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --mono:'JetBrainsMono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --gut:22px; --max:1560px;
  --gap:clamp(14px,1.5vw,28px);
  --bay:clamp(84px,12vw,196px);        /* space between chapters */
  --ease:cubic-bezier(.22,1,.36,1);
  --silk:cubic-bezier(.36,0,.14,1);   /* eased at both ends, long tail */
}
@media(min-width:720px){:root{--gut:44px}}
@media(min-width:1200px){:root{--gut:72px}}
@media(min-width:1700px){:root{--gut:96px}}

html[data-theme="dark"]{
  --bg:#0C0B0A; --bg-2:#141211; --bg-3:#1E1B18; --surface:#161413;
  --ink:#F6F1E9; --ink-soft:#CBC2B5; --ink-dim:#8B8274;
  --line:rgba(246,241,233,.18); --line-soft:rgba(246,241,233,.09);
  --accent:var(--copper-bright);
  --shadow:0 40px 70px -34px rgba(0,0,0,.9), 0 12px 26px -14px rgba(0,0,0,.65);
}
html[data-theme="dark"] .frame img{filter:brightness(.86) contrast(1.05)}
html[data-theme="dark"] .frame{border:1px solid var(--line-soft)}
html[data-theme="dark"] .brand svg{filter:brightness(1.18) saturate(.95)}

/* ── base ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* the canvas beyond the page (rubber-banding past the end) is the dark of
   the mahogany, so the site ends on wood rather than on white */
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#1E0906}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(17.5px,1.12vw,20px);line-height:1.62;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--copper);color:#1A1715}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* ── the grid ───────────────────────────────────────────────────────── */
.grid{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);
}
.grid > *{grid-column:1/-1;min-width:0}
@media(min-width:900px){
  .c1-6{grid-column:1/7}   .c1-7{grid-column:1/8}   .c1-5{grid-column:1/6}
  .c2-7{grid-column:2/8}   .c2-8{grid-column:2/9}   .c2-11{grid-column:2/12}
  .c3-9{grid-column:3/10}  .c4-12{grid-column:4/13} .c5-12{grid-column:5/13}
  .c7-12{grid-column:7/13} .c8-12{grid-column:8/13} .c9-12{grid-column:9/13}
  .c6-12{grid-column:6/13} .c1-9{grid-column:1/10}  .c1-4{grid-column:1/5}
  .c1-11{grid-column:1/12} .c4-11{grid-column:4/12} .c3-11{grid-column:3/12}
  .r1{grid-row:1} .r2{grid-row:2}
  .end{align-self:end} .mid{align-self:center}
}
.chapter{padding-block:var(--bay)}
.read .body p{max-width:none}
@media(min-width:900px){
  .read{grid-column:1/-1;max-width:772px;margin-inline:auto}
  .read .lead{font-size:clamp(32px,3.4vw,52px)}
  .read .body{line-height:1.68}
}
@media(max-width:899px){
  .grid > figure{margin-block:clamp(30px,7vw,54px)}
  .grid > figure:first-child{margin-top:0}
  .pull.right{text-align:left}
}

/* ── chrome ─────────────────────────────────────────────────────────── */
.top{
  position:fixed;inset:0 0 auto 0;z-index:65;   /* above the price lists' sticky search bar (60), so the dropdowns clear it */
  display:flex;align-items:center;gap:18px;
  padding:20px var(--gut);
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
}
.top.stuck{
  background:rgba(245,241,234,.88);   /* for browsers without color-mix (older iPhones): otherwise the bar is only blur */
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-bottom-color:var(--line-soft);
}
.brand{display:block;flex:none;line-height:0}
.brand svg{height:clamp(40px,3.6vw,56px);width:clamp(104px,9.36vw,145.6px);aspect-ratio:1920/738.87;display:block}   /* explicit width: Safari collapses an auto-width inline SVG in a shrink-to-fit box to nothing */
.nav{display:none;gap:30px;margin-left:40px}
.nav a{
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-dim);
  transition:color .3s ease;
}
@media(hover:hover) and (pointer:fine){.nav a:hover{color:var(--accent)}}
@media(min-width:1000px){.nav{display:flex}}
.top .spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  border-radius:100px;border:1px solid transparent;padding:17px 30px;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease,gap .35s var(--ease);
}
.btn-fill{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn svg{width:14px;height:14px;flex:none}
.btn-sm{padding:11px 19px;font-size:10.5px;gap:9px}
.btn-sm svg{width:12px;height:12px}
@media(hover:hover) and (pointer:fine){
  .btn-fill:hover{background:var(--accent);border-color:var(--accent);color:#fff;gap:18px}
  .btn-line:hover{border-color:var(--accent);color:var(--accent);gap:18px}
}
.iconbtn{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .3s ease,color .3s ease;
}
.iconbtn svg{width:15px;height:15px}
@media(hover:hover) and (pointer:fine){.iconbtn:hover{border-color:var(--accent);color:var(--accent)}}

/* ── type ───────────────────────────────────────────────────────────── */
.label{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(10px,.72vw,11.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 clamp(26px,3vw,44px);
}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(46px,7.6vw,126px);line-height:1.03;letter-spacing:-.032em;   /* Sincerity: ascender 760 + descender 260 — 1.02 is where they touch */
  margin:0;max-width:17ch;text-wrap:balance;
}
.lead{
  font-family:var(--display);font-weight:700;
  font-size:clamp(33px,4.5vw,66px);line-height:1.03;letter-spacing:-.028em;
  margin:0;text-wrap:pretty;
}
h1 em,.lead em,.pull em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--accent);letter-spacing:-.018em;
}
.body{margin-top:clamp(26px,3vw,44px)}
.body p{margin:0 0 1.25em;color:var(--ink-soft);max-width:44ch}
.body p:last-child{margin-bottom:0}
.body em{font-family:var(--serif);font-style:italic}

/* pull quotes — the light cut of the display face, given room */
.pull{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(27px,3.7vw,61px);line-height:1.14;letter-spacing:-.008em;
  /* background-clip:text paints nothing outside the background box, and
     Playfair italic descenders sit below the last line box — so the box
     has to be grown or the tails of y, g and p get shaved off. Padded on
     both flanks now the text is centred. */
  margin:0;padding:0 .07em .17em;text-wrap:balance;
}
.moment{padding-block:clamp(86px,13vw,210px)}
blockquote{margin:0}

/* ── drop quotes ──────────────────────────────────────────────────────
   The whole quote — mark and words together — is one piece of copper,
   using the gradient ramp off the Boyer wordmark. A single slow drift
   moves the light across it. Nothing tilts, nothing is embossed; it is
   just a surface catching light. */
.qmark{
  display:block;font-family:var(--display);font-style:normal;font-weight:700;
  font-size:clamp(76px,8.2vw,142px);line-height:1;letter-spacing:-.035em;
  margin:0 0 -.28em;
}
/* Centred, mark and all. Nothing hangs into the margin any more, so the
   glyph sits well inside the paintable box and needs no compensation. */
.qb{color:var(--accent);text-align:center}
/* A narrower, centred measure. justify-self does the centring rather than
   auto margins, which would fight the negative margin that lets the quote
   mark hang into the left edge. */
@media(min-width:900px){
  .qb{grid-column:1/-1;justify-self:center;width:min(100%,960px)}
}
/* ── metallic type ────────────────────────────────────────────────────
   Anything carrying .metal is filled with a gradient clipped to its own
   glyphs, and the scroll handler at the foot of the file walks the
   highlight across it. .silver is the second finish, for the press ad —
   that page was printed in metallic Pantone, so the quote and the
   footline should catch light rather than sit flat. */
.metal{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .metal{
    background-image:linear-gradient(127deg,
      #B05943 0%, #8E5337 12%, #845134 25%, #8E5337 36%,
      #A96546 43%, #C8855D 47.5%, #E4A277 50.5%, #F2B084 53%, #E19F74 55.5%,
      #C17C53 60%, #9C5C3F 66%, #845134 77%, #8E5337 89%, #B05943 100%);
    background-size:320% 100%;
    background-position:94% 50%;   /* light parked just off the left edge */
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}
html[data-theme="dark"] .metal,
.band .metal{
  background-image:linear-gradient(127deg,
    #BE7150 0%, #A2653F 12%, #9A6140 25%, #A86A45 36%,
    #C08258 43%, #DCA077 47.5%, #F3C49C 50.5%, #FBD3AE 53%, #EFBE97 55.5%,
    #CE8A5F 60%, #AC6D47 66%, #9A6140 77%, #A2653F 89%, #BE7150 100%);
}
/* last, and matched in weight to the theme rule above, so silver wins
   whichever theme the page is in */
html .metal.silver{
  color:#C8C8C8;
  background-image:linear-gradient(127deg,
    #6E6E6E 0%, #8A8A8A 12%, #9C9C9C 25%, #8E8E8E 36%,
    #B4B4B4 43%, #D6D6D6 47.5%, #EFEFEF 50.5%, #FFFFFF 53%, #E4E4E4 55.5%,
    #BDBDBD 60%, #9A9A9A 66%, #8A8A8A 77%, #949494 89%, #6E6E6E 100%);
}
@media(prefers-reduced-motion:reduce){
  .metal{background-position:50% 50% !important}
}

/* ── the press ad ────────────────────────────────────────────────────
   The Hi-Fi+ page itself, as artwork, with a gloss travelling across it
   on scroll so it reads as a coated magazine page rather than a flat
   picture. The sweep is driven by the same scroll handler that moves the
   highlight through the metallic type. */
.adpage{
  position:relative;overflow:hidden;line-height:0;border-radius:2px;
  box-shadow:0 54px 76px -46px rgba(26,23,21,.52),
             0 16px 30px -20px rgba(26,23,21,.30);
}
html[data-theme="dark"] .adpage{
  box-shadow:0 54px 76px -40px rgba(0,0,0,.9), 0 16px 30px -18px rgba(0,0,0,.7);
}
.adpage img{width:100%;height:auto;display:block}
/* Plain alpha, not mix-blend-mode. The blend mode looked identical over
   a page this dark but pushed the whole document off the compositor's
   fast path — 36 dropped frames per 420 against 5 with it gone, even
   with the ad far off screen. */
.gloss{display:none}
.gloss.lit{
  display:block;position:absolute;inset:0;pointer-events:none;
  /* 60% wider and a third less opaque than it started. The image is
     sized at 380% rather than 300% so the same scroll range carries the
     band from clear of one edge to clear of the other — at 300% it ran
     out with the band still on the page. */
  background-image:linear-gradient(104deg,
    rgba(255,255,255,0) 37.4%,  rgba(255,255,255,.022) 42%,
    rgba(255,255,255,.062) 45.6%, rgba(255,255,255,.104) 48.6%,
    rgba(255,255,255,.129) 50%, rgba(255,255,255,.098) 51.4%,
    rgba(255,255,255,.056) 54.4%, rgba(255,255,255,.019) 58%,
    rgba(255,255,255,0) 62.6%);
  background-size:380% 100%;
  background-position:94% 50%;
  background-repeat:no-repeat;
}
@media(prefers-reduced-motion:reduce){.gloss{background-position:50% 50% !important}}

/* ── an old print of the ridge, sunk into the paper ───────────────────
   Hurricane Ridge, desaturated and warmed toward sepia with the grain
   baked in, then masked so it has no edges at all — it fades out on
   every side rather than sitting in a frame. Multiply lets the cream of
   the page come through it in the light theme; screen does the same job
   against the black in dark. */
.ghost{position:relative;isolation:isolate}
.ghost .ridge{
  /* centred at natural scale rather than cover-cropped — the band is far
     wider than the section, and cover would blow it up almost twice to
     fill the height. It sits across the middle and fades out instead. */
  position:absolute;z-index:-1;pointer-events:none;
  /* placed from script so the first ridge line lands just under the
     heading — where the heading falls inside the section moves far too
     much between layouts for a fixed percentage to hold. This is only
     the pre-script fallback. */
  top:34%;left:50%;width:100vw;transform:translateX(-50%);
}
.ghost .ridge img{
  width:100%;height:auto;display:block;
  opacity:.62;mix-blend-mode:multiply;
  /* a straight vertical fade: the mist has to arrive out of the paper and
     go back into it, with no edge at either end */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 30%,#000 62%,rgba(0,0,0,.3) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 30%,#000 62%,rgba(0,0,0,.3) 86%,transparent 100%);
}
html[data-theme="dark"] .ghost .ridge img{opacity:.32;mix-blend-mode:screen}

.cap{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(9.5px,.68vw,11px);letter-spacing:.15em;text-transform:uppercase;
  line-height:1.9;color:var(--ink-dim);margin:18px 0 0;
}
.cap b{font-weight:600;color:var(--ink-soft)}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(156px,20vw,256px);padding-bottom:clamp(64px,8vw,120px)}
.mark{color:var(--ink);width:clamp(120px,11.2vw,172px);margin-bottom:clamp(46px,7vw,104px)}
.mark svg{width:100%;height:auto;display:block}
.meta{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(10px,.75vw,12px);letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-dim);margin:clamp(40px,5vw,70px) 0 0;line-height:1.9;
}
.herobtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,4.4vw,58px)}

/* ── images ─────────────────────────────────────────────────────────── */
figure{margin:0}
.frame{
  border-radius:2px;overflow:hidden;background:var(--bg-2);
  box-shadow:var(--shadow);
}
.frame img{width:100%;height:auto}
.frame.tall img{aspect-ratio:4/5;object-fit:cover}
.flat .frame{box-shadow:none}

/* full-bleed plates */
.bleed{width:100vw;margin-inline:calc(50% - 50vw);position:relative}
.bleed img{width:100%;height:clamp(340px,62vh,760px);object-fit:cover}

/* two plates, cross-fading: five seconds held, two seconds across, and
   back again. Only opacity moves, so it stays on the compositor, and the
   observer stops it once the plate is off screen. */
.xfade{position:relative;line-height:0}
.xfade .alt{position:absolute;top:0;left:0;width:100%;opacity:0}
.xfade.run .alt{animation:plate 14s ease-in-out infinite}
@keyframes plate{
  0%,35.7%   {opacity:0}
  50%,85.7%  {opacity:1}
  100%       {opacity:0}
}
@media(prefers-reduced-motion:reduce){.xfade .alt{animation:none;opacity:0}}
.bleed .cap{padding-inline:var(--gut);max-width:var(--max);margin-inline:auto}

/* a matched pair, side by side — both cropped to the same 5:4 so they
   sit exactly level whatever the column width */
.pair-imgs{display:grid;gap:clamp(12px,1.4vw,22px)}
@media(min-width:760px){.pair-imgs{grid-template-columns:1fr 1fr}}
.pair-imgs .frame img{aspect-ratio:5/4;object-fit:cover;height:auto}

/* plates that run off one edge */
@media(min-width:900px){
  .runs-right{margin-right:calc(var(--gut) * -1)}
  .runs-right .cap{padding-right:var(--gut)}
  .runs-left{margin-left:calc(var(--gut) * -1)}
  .runs-left .cap{padding-left:var(--gut)}
  .drop{margin-top:clamp(40px,6vw,120px)}
}

/* ── the dark chapter ───────────────────────────────────────────────── */
.band{
  position:relative;isolation:isolate;background:#0A0908;color:#F6F1E9;
  padding-block:clamp(104px,15vw,232px);
}
.qbg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.qbg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,9,8,.80) 0%,rgba(10,9,8,.86) 45%,rgba(10,9,8,.92) 100%);
}
.band .label{color:rgba(246,241,233,.52)}
.band .lead{color:#F7F2EA}
.band .body p{color:rgba(246,241,233,.82)}

/* ── video ──────────────────────────────────────────────────────────── */
.video{
  margin-top:clamp(40px,5vw,72px);position:relative;
  aspect-ratio:16/9;border-radius:2px;overflow:hidden;
  background:var(--ink);border:1px solid var(--line);
  cursor:pointer;transition:border-color .3s ease;
  --play:clamp(54px,5.6vw,70px);
  --vgap:clamp(16px,2.2vw,30px);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vscrim{
  position:absolute;inset:0;z-index:1;transition:background .45s var(--silk);
  background:radial-gradient(64% 72% at 50% 50%,
    rgba(8,7,6,.34) 0%, rgba(8,7,6,.52) 46%, rgba(8,7,6,.70) 100%);
}
/* The play button is anchored to the exact centre of the frame, with the
   mark hung above it and the caption below. Centring the three as a
   stack instead put the button off-centre, because the mark is taller
   than the caption — at 1512 that left the button 10px low and the whole
   group reading high. */
.vinner{position:absolute;inset:0;z-index:2;text-align:center}
.vplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--play);height:var(--play);
}
.vmark{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(50% + var(--play)/2 + var(--vgap))}
.vlabel{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(50% + var(--play)/2 + var(--vgap))}
/* below 720 the contents no longer fit a 16:9 box — at 390 they stood
   197px tall in a 195px frame and were being clipped off the top and
   bottom. A squarer frame gives them room rather than shrinking them. */
@media(max-width:720px){.video{aspect-ratio:4/3}}
.vmark{width:clamp(40px,4.8vw,62px);color:var(--bg);opacity:.85}
.vmark svg{width:100%;height:auto;display:block}
.vplay{
  border-radius:50%;border:1px solid rgba(246,241,233,.36);
  display:grid;place-items:center;color:var(--bg);
  transition:border-color .3s ease,background .3s ease;
}
.vplay svg{width:18px;height:18px;margin-left:3px}
.vlabel{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(246,241,233,.66);margin:0;
}
@media(hover:hover) and (pointer:fine){
  .video:hover{border-color:var(--accent)}
  .video:hover .vplay{border-color:var(--copper-bright);background:rgba(232,169,133,.18)}
  .video:hover .vscrim{background:radial-gradient(64% 72% at 50% 50%,
    rgba(8,7,6,.26) 0%, rgba(8,7,6,.46) 46%, rgba(8,7,6,.66) 100%)}
}

/* ── signature ────────────────────────────────────────────────────────
   Guillaume's own hand. A pen doesn't lay down one even width, so the
   path is stroked three times: a thin base, and two heavier passes each
   masked by a near-binary gradient so the line swells and thins along
   its length. A third, gentler gradient over the whole group dips the
   density where the ink ran dry. The masks have to be near-binary — at
   soft midpoints the heavy pass sits as a translucent halo around the
   thin one rather than reading as a thicker line. */
.sig{margin-top:clamp(44px,5.5vw,76px)}
.sigmark{display:block;color:var(--ink);opacity:.92}
.sigmark svg{
  width:clamp(196px,18.5vw,272px);height:auto;display:block;overflow:visible;
}
html[data-theme="dark"] .sigmark{opacity:.88}
.sig figcaption{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(9.5px,.68vw,11px);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:20px;line-height:1.9;
}

/* ── index rows ─────────────────────────────────────────────────────── */
.index{border-top:1px solid var(--line-soft)}
.rows{overflow-x:visible}   /* the rules and light reach the window's edges past the grid; html clips the rest */
.rows-three{overflow-x:clip}
/* the rule and the light run the full width of the window; the text
   keeps to the grid */
.row{
  position:relative;
  grid-column:1/-1;display:grid;gap:8px clamp(20px,3vw,60px);align-items:baseline;
  padding-block:clamp(30px,3.8vw,54px);
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  border-bottom:0;text-decoration:none;
}
/* the rules: one per boundary, drawn by the rows themselves. At rest they
   span the content; on hover the line under the row and the line above
   it (the previous row's) run out to the window's edges. */
/* The rules and the light are centred on the row and sized from the
   window, not from the row's own box, so they reach the window's edges
   whatever the browser makes of the row's margins. At rest a rule is the
   content width; on hover it is the window's. */
.row{--rw:calc(min(100vw, var(--max)) - 2 * var(--gut))}
.row::after{content:"";position:absolute;bottom:0;left:50%;width:var(--rw);transform:translateX(-50%);height:1px;background:var(--line-soft);z-index:1;
  transition:width .55s var(--silk),background .7s var(--silk)}
.row .rule-top{position:absolute;top:0;left:50%;width:var(--rw);transform:translateX(-50%);height:1px;background:var(--line-soft);z-index:1;
  transition:width .55s var(--silk)}
@media(hover:hover) and (pointer:fine){
  .row:hover::after,.row:has(+ .row:hover)::after,.row:hover .rule-top{width:100vw}
  .row:hover::after{background:var(--accent)}
}
/* Light rising off the rule beneath the link, like a sunrise off a
   horizon: brightest along the line, falling away upward and to both
   sides. The gradient's origin sits on the bottom edge, so the box clips
   exactly where the line is and nothing has to be feathered to hide a
   seam. No blur either — a nine-stop radial is already out of focus by
   nature, and blurring it only bled the glow past the rule into the row
   below. Every stop reaches zero well inside the box, so it never cuts
   off against an edge. Only opacity moves, so the fade stays on the
   compositor. */
.row::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:0;bottom:-1px;left:50%;width:100vw;transform:translateX(-50%);
  background:radial-gradient(82% 190% at 50% 100%,
    rgba(224,155,114,.42) 0%,   rgba(223,152,112,.36) 12%,
    rgba(220,145,105,.27) 24%,  rgba(215,135,97,.19) 36%,
    rgba(208,123,87,.12) 48%,   rgba(201,112,78,.068) 60%,
    rgba(195,102,70,.027) 72%,  rgba(190,95,65,.008) 85%,
    rgba(188,92,63,0) 100%);
  opacity:0;
  transition:opacity .75s var(--silk);
  will-change:opacity;
}
/* the first row has no rule above it, so its light is not cut at the top:
   the box reaches 60% higher and the ellipse is scaled to stay the same
   size (190 / 1.6), so the glow simply runs out. */
.rows .row:first-child::before{top:-60%;background-size:100% 100%;
  background-image:radial-gradient(82% 119% at 50% 100%,
    rgba(224,155,114,.42) 0%,   rgba(223,152,112,.36) 12%,
    rgba(220,145,105,.27) 24%,  rgba(215,135,97,.19) 36%,
    rgba(208,123,87,.12) 48%,   rgba(201,112,78,.068) 60%,
    rgba(195,102,70,.027) 72%,  rgba(190,95,65,.008) 85%,
    rgba(188,92,63,0) 100%)}
html[data-theme="dark"] .rows .row:first-child::before{
  background-image:radial-gradient(82% 119% at 50% 100%,
    rgba(238,180,142,.34) 0%,   rgba(236,175,137,.29) 12%,
    rgba(233,167,129,.172) 24%, rgba(227,155,118,.124) 36%,
    rgba(219,140,105,.082) 48%, rgba(211,126,93,.048) 60%,
    rgba(204,114,83,.023) 72%,  rgba(199,106,77,.007) 85%,
    rgba(196,102,74,0) 100%)}
html[data-theme="dark"] .row::before{
  background:radial-gradient(82% 190% at 50% 100%,
    rgba(238,180,142,.34) 0%,   rgba(236,175,137,.29) 12%,
    rgba(233,167,129,.172) 24%, rgba(227,155,118,.124) 36%,
    rgba(219,140,105,.082) 48%, rgba(211,126,93,.048) 60%,
    rgba(204,114,83,.023) 72%,  rgba(199,106,77,.007) 85%,
    rgba(196,102,74,0) 100%);
}
.row > *{position:relative;z-index:1}
/* the text drifts rather than steps, each element a touch behind the last */
.row .t,.row .d,.row .go{transition:transform .62s var(--silk)}
.row .d{transition-delay:.05s}
.row .go{transition-delay:.09s}
@media(min-width:760px){.row{grid-template-columns:2.2fr 3fr auto}}
.row .t{
  font-family:var(--display);font-weight:300;
  font-size:clamp(28px,3.4vw,50px);line-height:1;letter-spacing:-.022em;margin:0;
}
.row .d{margin:0;color:var(--ink-dim);max-width:40ch}
.row .go{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}
.row .go svg{width:13px;height:13px;transition:transform .62s var(--silk) .09s}
.row:focus-visible::before{opacity:1}
@media(hover:hover) and (pointer:fine){
  .row:hover::before{opacity:1}
  .row:hover .t {transform:translateX(13px)}
  .row:hover .d {transform:translateX(9px)}
  .row:hover .go{transform:translateX(5px)}
  .row:hover .go svg{transform:translateX(7px)}
}

/* ── the Boyer mark, turned ───────────────────────────────────────────
   Drawn on a canvas at device resolution — see the renderer at the
   foot of the file. The element only reserves the space. */
.mark3d{
  --size:clamp(96px,10vw,152px);
  width:var(--size);height:var(--size);
  justify-self:end;align-self:end;
}
.mark3d canvas{display:block;width:100%;height:100%}

footer{padding-block:clamp(56px,7vw,104px)}
.footnav{display:flex;flex-wrap:wrap;gap:14px 30px;margin:0 0 26px;padding:0;list-style:none}
.footnav a{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-dim);
  transition:color .3s ease;
}
@media(hover:hover) and (pointer:fine){.footnav a:hover{color:var(--accent)}}
.legal{
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin:0;
}

/* ── reveal ─────────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(32px)}
.rise.in{opacity:1;transform:none;transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.rise.in{opacity:1;transform:none;transition:none}
  .row,.row::before,.row .t,.row .d,.row .go,.row .go svg{transition:none}
}
@media print{
  .top,.video,.index{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .band{background:#fff;color:#000;min-height:0}
  .qbg{display:none}
}