/* ============================================================================
   CONQUERORSUN — one page, zero dependencies
   ========================================================================= */

/* ── reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root{
  --ink:#000;
  --bone:#f4efe6;
  --ash:#8b8377;
  --ash-dim:#575148;

  --accent:#34e07c;
  --accent-deep:#0d8f48;
  --accent-pale:#a9f7c8;

  --sleeve: clamp(198px, min(38vmin, 46vh), 400px);
  --slide: .66;                       /* how far the disc travels, x sleeve   */

  --font: "Bahnschrift", "Oswald", "Haettenschweiler", "Arial Narrow",
          "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

/* ── page ────────────────────────────────────────────────────────────────── */
body{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font);
  font-weight:600;
  font-stretch:condensed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@supports (cursor:none){
  @media (hover:hover) and (pointer:fine){ body{cursor:none} a{cursor:none} }
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:99;
  padding:.6rem 1rem;background:var(--accent);color:#00230f;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  transform:translateY(-160%);transition:transform .25s var(--e-out);
}
.skip:focus{transform:none}

:where(a,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:2px;
}

/* ── backdrop layers ─────────────────────────────────────────────────────── */
#bg{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  display:block;
  opacity:0;
  transition:opacity 1.4s ease .1s;
  background:radial-gradient(120% 90% at 50% 44%, #0a2216 0%, #04100a 42%, #000 78%);
}
.is-ready #bg{opacity:1}

/* inset only as far as the 3% drift needs — a full-viewport blended layer is
   costly, and -120px made it noticeably larger than the viewport */
.grain{
  position:fixed;inset:-4%;z-index:2;pointer-events:none;
  opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}      25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)}  75%{transform:translate3d(-2%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}

.scanlines{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.055) 0 1px, transparent 1px 3px);
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 88%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 88%);
}

.cursor{
  position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(circle, rgba(140,255,190,.95) 0 18%, rgba(52,224,124,.32) 40%, transparent 72%);
  mix-blend-mode:screen;opacity:0;
  transition:opacity .35s ease, width .3s var(--e-out), height .3s var(--e-out), margin .3s var(--e-out);
  will-change:transform;
}
.cursor.is-live{opacity:1}            /* only once a real pointer has moved */
body.is-open .cursor{width:56px;height:56px;margin:-28px 0 0 -28px}
@media (hover:none),(pointer:coarse){ .cursor{display:none} }

/* ── sound toggle ────────────────────────────────────────────────────────── */
.sound{
  position:relative;z-index:10;margin-top:auto;
  display:flex;justify-content:center;
  padding:0 1rem;
}
.sound__btn{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .9rem;
  font:inherit;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ash);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid rgba(244,239,230,.12);border-radius:999px;
  cursor:pointer;
  transition:color .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out);
}
.sound__btn[hidden]{display:none}
@media (hover:hover){
  .sound__btn:hover{color:var(--accent);border-color:rgba(52,224,124,.45);transform:translateY(-2px)}
}
.sound__btn.is-playing{color:var(--accent);border-color:rgba(52,224,124,.35)}

/* equaliser — scaleY keeps it on the compositor */
.eq{display:flex;align-items:flex-end;gap:2px;width:15px;height:12px}
.eq i{
  flex:1;height:100%;border-radius:1px;
  background:currentColor;
  transform:scaleY(.16);transform-origin:bottom;
  transition:transform .35s var(--e-out);
}
.sound__btn.is-playing .eq i{animation:eq .82s var(--e-io) infinite alternate}
.sound__btn.is-playing .eq i:nth-child(2){animation-duration:.58s;animation-delay:-.21s}
.sound__btn.is-playing .eq i:nth-child(3){animation-duration:.94s;animation-delay:-.44s}
.sound__btn.is-playing .eq i:nth-child(4){animation-duration:.68s;animation-delay:-.13s}
@keyframes eq{from{transform:scaleY(.16)}to{transform:scaleY(1)}}

.js .sound{opacity:0;transform:translateY(8px)}
.is-ready .sound{
  opacity:1;transform:none;
  transition:opacity .9s ease 1.3s, transform 1s var(--e-out) 1.3s;
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:center;gap:.9em;
  padding:clamp(.9rem,2.2vmin,1.5rem) clamp(1rem,3.4vw,2.6rem);
  font-size:clamp(.58rem,1.05vmin,.72rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim);
}
.footer p{white-space:nowrap}
.footer__c{color:var(--accent-deep)}

.js .footer{opacity:0;transform:translateY(8px)}
.is-ready .footer{
  opacity:1;transform:none;
  transition:opacity .9s ease 1.15s, transform 1s var(--e-out) 1.15s;
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:5;flex:1;
  display:grid;place-items:center;
  padding:clamp(1.2rem,4vmin,2.6rem) clamp(1rem,4vw,2rem) clamp(.5rem,2vmin,1.5rem);
  isolation:isolate;
}

.ghost{
  position:absolute;inset:0;z-index:-1;
  display:grid;place-items:center;
  pointer-events:none;user-select:none;
  font-size:clamp(3.4rem, 15.5vw, 15rem);
  font-weight:800;letter-spacing:-.035em;line-height:1;
  white-space:nowrap;
}
.ghost span{
  display:block;
  color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(52,224,124,.05) 65%, transparent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px rgba(244,239,230,.085);
  transform:translate3d(0,0,0);
}
/* particle layer sits with the wordmark, behind the sleeve */
.ghost-fx{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .5s;
}
.is-ready .ghost-fx{opacity:1}
/* The wordmark IS the particles. The heading stays in the DOM for screen
   readers and search, but nothing of it is painted — no fill, no stroke —
   so the letters are made of dust rather than dusted on top of an outline. */
.fx-on .ghost span{
  background:none;
  -webkit-text-stroke-color:transparent;
}

.js .ghost span{opacity:0;transform:scale(1.12)}
.is-ready .ghost span{
  opacity:1;transform:none;
  transition:opacity 1.6s ease .25s, transform 1.9s var(--e-out) .25s;
}

/* ── showcase ────────────────────────────────────────────────────────────── */
.showcase{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.1rem,3.6vmin,2.6rem);
}

.stage{
  position:relative;
  width:calc(var(--sleeve) * (1 + var(--slide)));
  height:var(--sleeve);
  perspective:1400px;
  perspective-origin:50% 46%;
}
.js .stage{opacity:0;transform:translateY(46px) scale(.9)}
.is-ready .stage{
  opacity:1;transform:none;
  transition:opacity 1.1s ease .45s, transform 1.35s var(--e-out) .45s;
}

.stage__shadow{
  position:absolute;left:50%;bottom:-9%;
  width:78%;height:16%;
  transform:translate3d(-50%,0,0);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 42%, transparent 72%);
  filter:blur(2px);
  will-change:transform,opacity;
}

.assembly{
  position:absolute;top:0;left:50%;
  width:var(--sleeve);height:var(--sleeve);
  margin-left:calc(var(--sleeve) / -2);
  transform-style:preserve-3d;
  will-change:transform;
}

/* ── vinyl ───────────────────────────────────────────────────────────────── */
.disc-wrap{
  position:absolute;inset:0;
  display:grid;place-items:center;
  transform:translate3d(0,0,-4px);
  will-change:transform;
}
/* All radii below are % of the disc RADIUS, thanks to `closest-side`.
   Zones, outward: label 0-38, seam 38-40, run-out 40-52,
   playing area 52-95, lead-in 95-97, rim bevel 97-100. */
.disc{
  position:relative;
  width:95.5%;aspect-ratio:1;border-radius:50%;
  background:
    /* rim bevel — a lit outer edge with a dark break just inside it */
    radial-gradient(circle closest-side at 50% 50%,
      transparent 0 96.4%,
      rgba(255,255,255,.22) 97.4%,
      rgba(0,0,0,.92) 98.6%,
      rgba(255,255,255,.16) 100%),
    /* gaps between tracks — the strongest realism cue on a record */
    radial-gradient(circle closest-side at 50% 50%,
      transparent 0 57.6%,  rgba(255,255,255,.11) 57.6% 58.4%,
      transparent 58.4% 66.6%, rgba(255,255,255,.10) 66.6% 67.4%,
      transparent 67.4% 75.6%, rgba(255,255,255,.09) 75.6% 76.3%,
      transparent 76.3% 84.6%, rgba(255,255,255,.08) 84.6% 85.3%,
      transparent 85.3% 100%),
    /* label seam: the paper sits slightly proud of the vinyl */
    radial-gradient(circle closest-side at 50% 50%,
      transparent 0 37.5%,
      rgba(0,0,0,.85) 38.6%,
      rgba(255,255,255,.05) 40.4%,
      transparent 42%),
    /* base vinyl, darkening toward the rim */
    radial-gradient(circle closest-side at 50% 50%,
      #14110f 0 40%, #0d0b0a 56%, #090808 80%, #050404 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.11),
    0 12px 34px rgba(0,0,0,.92),
    inset 0 0 46px rgba(0,0,0,.9);
  will-change:transform;
  transform:translateZ(0);
}

/* fine grooves, confined to the playing area */
.disc__grooves{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle closest-side at 50% 50%,
      rgba(255,255,255,.07) 0 1px,
      rgba(0,0,0,.30) 1px 2.6px),
    repeating-radial-gradient(circle closest-side at 50% 50%,
      rgba(255,255,255,.035) 0 1px,
      rgba(0,0,0,0) 1px 9px);
  mask:radial-gradient(circle closest-side at 50% 50%,
    transparent 0 51%, #000 53.5% 94.4%, transparent 96.4%);
  -webkit-mask:radial-gradient(circle closest-side at 50% 50%,
    transparent 0 51%, #000 53.5% 94.4%, transparent 96.4%);
  opacity:.9;
}

.disc__label{
  position:absolute;left:50%;top:50%;
  width:38%;height:38%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:visible;
}
/* bone ink on a deep printed green — matches the cover and stays readable */
.lbl-t,.lbl-b,.lbl-c{
  fill:#f2fff8;font-family:var(--font);font-weight:700;
}
.lbl-t{font-size:22px;letter-spacing:2.8px}
.lbl-b{font-size:12px;letter-spacing:1.6px;fill-opacity:.72}
.lbl-c{font-size:11.5px;letter-spacing:2.6px;fill-opacity:.6}

/* fixed specular — does NOT rotate with the disc */
.disc__sheen{
  position:absolute;left:50%;top:50%;
  width:95.5%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;mix-blend-mode:screen;
  background:
    /* Anisotropic specular. Circular grooves smear a point light into TWO
       opposing arcs — that bowtie is what reads as "vinyl" rather than
       "black disc". The warm edge on each lobe fakes the iridescence. */
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg 10deg,
      rgba(196,255,228,.09)  24deg,
      rgba(244,255,250,.26)  39deg,
      rgba(255,236,205,.11)  52deg,
      transparent 68deg 190deg,
      rgba(168,240,214,.07) 204deg,
      rgba(228,251,242,.19) 219deg,
      rgba(255,232,200,.08) 232deg,
      transparent 248deg 360deg),
    /* broad soft bounce of the room, off-centre */
    radial-gradient(58% 58% at 33% 25%, rgba(215,255,238,.07), transparent 62%),
    radial-gradient(44% 44% at 72% 78%, rgba(150,235,200,.04), transparent 66%);
  /* peak the highlight across the playing area, fade it off the label and rim */
  mask:radial-gradient(circle closest-side at 50% 50%,
    transparent 0 38%, rgba(0,0,0,.42) 47%, #000 62% 88%,
    rgba(0,0,0,.5) 97%, transparent 100%);
  -webkit-mask:radial-gradient(circle closest-side at 50% 50%,
    transparent 0 38%, rgba(0,0,0,.42) 47%, #000 62% 88%,
    rgba(0,0,0,.5) 97%, transparent 100%);
}

/* ── sleeve ──────────────────────────────────────────────────────────────── */
/* Square corners on purpose. The 3px radius clipped a 3D-transformed layer,
   and right at the curve the 1px outer ring stacked on top of the 2px inset
   highlight — antialiasing fused them into bright white pixels in each
   corner. Real sleeves are square anyway, and a rectangular clip is cheaper
   to composite. */
.sleeve{
  position:absolute;inset:0;
  transform:translateZ(2px);
  box-shadow:
    0 26px 60px -18px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
.sleeve__mouth{
  position:absolute;top:0;right:0;bottom:0;width:11px;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.72));
  box-shadow:inset -1px 0 0 rgba(255,255,255,.14);
}
.sleeve__spine{
  position:absolute;top:0;left:0;bottom:0;width:8px;
  background:linear-gradient(90deg, rgba(255,255,255,.09), rgba(0,0,0,.55));
}

/* ── cover artwork ───────────────────────────────────────────────────────── */
/* BRUTALIST — type is the subject. The wordmark fills the top, SUN is
   knocked out of a solid green band, the artist bleeds in from the right.
   Layers, back to front: band 1 · portrait 2 · type 3 · rules 4 ·
   grain 5 · gloss 7 */
.cover{
  position:absolute;inset:0;
  background:#040606;
  /* board edges catch less ink than the middle */
  box-shadow:inset 0 0 calc(var(--sleeve) * .16) rgba(0,0,0,.5);
  overflow:hidden;
}

/* The band has to centre on the INK of "SUN", not on its line box — with
   line-height .84 the glyphs overflow the box, so aligning the box leaves the
   letters jammed against the top edge. These are the correct static values;
   main.js then re-measures the real glyph bounds and rewrites them, so the
   alignment survives whichever font in the stack actually resolves. */
.cover__band{
  position:absolute;left:0;right:0;top:17.94%;height:13.5%;z-index:1;
  background:var(--accent);opacity:.94;
}

/* the artist, keyed out of the green screen at build time */
.cover__face{
  position:absolute;right:-8%;bottom:0;z-index:2;
  width:78%;height:auto;
  /* light touch only — the cutout already carries correct skin tones */
  filter:drop-shadow(calc(var(--sleeve) * -.02) 0 calc(var(--sleeve) * .07) rgba(0,0,0,.8))
         contrast(1.02) saturate(1.05);
}

.cover__word{
  position:absolute;left:6%;right:6%;top:7%;z-index:3;
  font-size:calc(var(--sleeve) * .1467);
  font-weight:800;line-height:.84;letter-spacing:-.035em;
  text-transform:uppercase;color:var(--bone);
}
.cover__word span{display:block}
.cover__word span:last-child{color:#040606}   /* knocked out of the band */

.cover__rule{
  position:absolute;left:6%;right:6%;bottom:19%;height:1px;z-index:4;
  background:rgba(244,239,230,.18);
}
.cover__meta{
  position:absolute;left:6%;bottom:6%;z-index:4;
  font-size:max(7px, calc(var(--sleeve) * .0267));
  letter-spacing:.3em;line-height:2;color:rgba(244,239,230,.55);
}

/* printed board texture — the whole reason the cover reads as card, not screen */
.cover__grain{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23p)' opacity='.55'/%3E%3C/svg%3E");
  background-size:90px 90px;
}

.cover__frame{
  position:absolute;inset:calc(var(--sleeve) * .035);
  border:1px solid rgba(244,239,230,.09);
  pointer-events:none;z-index:6;
}
/* static sheen — painted once */
.cover__gloss{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;z-index:7;
  overflow:hidden;
  background:linear-gradient(118deg, transparent 38%, rgba(255,255,255,.05) 46%, transparent 55%);
}
/* The pointer highlight used to be a gradient whose position was rewritten
   every frame, which repainted this blended layer every frame. It is now a
   fixed bitmap that only ever gets translated — compositor work, no repaint.
   Neutral white, NOT mint: a tinted gloss casts green over the portrait. */
.cover__glare{
  position:absolute;left:0;top:0;
  width:80%;aspect-ratio:1;
  margin:-40% 0 0 -40%;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,252,246,.17) 0%, rgba(255,252,246,.06) 45%, transparent 72%);
  will-change:transform;
}

/* ── links ───────────────────────────────────────────────────────────────── */
.links{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.7rem,1.9vmin,1.15rem);
  width:min(100%, 62rem);
}
.links__eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-size:.58rem;letter-spacing:.42em;color:var(--ash-dim);text-transform:uppercase;
}
.links__eyebrow span{
  display:block;width:clamp(18px,5vw,58px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,239,230,.28));
}
.links__eyebrow span:last-child{background:linear-gradient(90deg,rgba(244,239,230,.28),transparent)}

.links__row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.45rem,1.1vw,.7rem);
}
.links__social{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.35rem,.9vw,.55rem);
  margin-top:.15rem;
}
.links__row li[hidden],.links__social li[hidden]{display:none}

/* staged reveal */
.js .links__row li,
.js .links__social li{
  opacity:0;
  transform:translate3d(0,20px,0) scale(.94);
  filter:blur(7px);
  transition:
    opacity .5s var(--e-out) calc(var(--i) * 42ms),
    transform .72s var(--e-out) calc(var(--i) * 42ms),
    filter .5s var(--e-out) calc(var(--i) * 42ms);
}
.js .links__row li a,
.js .links__social li a{pointer-events:none}

.showcase.is-open .links__row li,
.showcase.is-open .links__social li{
  opacity:1;transform:none;filter:none;
}
.showcase.is-open .links__row li a,
.showcase.is-open .links__social li a{pointer-events:auto}

/* pill */
.pill{
  --brand:var(--bone);
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.62rem .95rem .62rem .68rem;
  border:1px solid rgba(244,239,230,.13);
  border-radius:999px;
  /* no backdrop-filter: blurring the backdrop of six separate elements is the
     single most expensive thing on integrated GPUs, and over a near-black
     page a flat tint is indistinguishable from it */
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  overflow:hidden;
  transition:border-color .35s var(--e-out), transform .35s var(--e-out), background .35s var(--e-out);
}
.pill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(70% 130% at 12% 50%, var(--brand), transparent 72%);
  opacity:0;transition:opacity .4s var(--e-out);
}
.pill > *{position:relative}
.pill__icon{
  width:26px;height:26px;flex:none;color:var(--bone);
  transition:color .35s var(--e-out), transform .45s var(--e-out);
}
.pill__icon svg{width:100%;height:100%}
.pill__text{display:flex;flex-direction:column;line-height:1.05}
.pill__text b{
  font-size:.83rem;font-weight:700;letter-spacing:.03em;color:var(--bone);
}
.pill__text em{
  font-style:normal;font-size:.52rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ash);margin-top:.28em;
  transition:color .35s var(--e-out);
}
.pill__go{
  font-size:.72rem;color:var(--ash-dim);margin-left:auto;padding-left:.35rem;
  transition:transform .4s var(--e-out), color .35s var(--e-out);
}
@media (hover:hover){
  .pill:hover{
    border-color:color-mix(in srgb, var(--brand) 55%, transparent);
    transform:translateY(-3px);
  }
  .pill:hover::before{opacity:.12}
  .pill:hover .pill__icon{color:var(--brand);transform:scale(1.06)}
  .pill:hover .pill__text em{color:var(--brand)}
  .pill:hover .pill__go{transform:translate(3px,-3px);color:var(--brand)}
}
.pill:active{transform:translateY(-1px) scale(.985)}

/* chip */
.chip{
  --brand:var(--bone);
  display:flex;align-items:center;gap:.42rem;
  padding:.42rem .78rem;
  border:1px solid rgba(244,239,230,.09);
  border-radius:999px;
  color:var(--ash);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out);
}
.chip svg{width:14px;height:14px;flex:none;transition:color .3s var(--e-out)}
@media (hover:hover){
  .chip:hover{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 40%, transparent);transform:translateY(-2px)}
}

.links__hint{
  font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ash-dim);
  transition:opacity .45s ease;
  height:1em;
}
.js .links__hint{opacity:0}
.is-ready .links__hint{opacity:1;transition:opacity .8s ease 2s}
.is-ready .showcase.is-open .links__hint{opacity:0;transition:opacity .3s ease}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 760px){
  :root{ --slide:.40; --sleeve: clamp(180px, 60vw, 300px); }
  .ghost,.ghost-fx{display:none}   /* the cover already carries the wordmark */
  .links__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,26rem)}
  .pill{padding:.55rem .7rem .55rem .55rem}
  .pill__text b{font-size:.72rem}
  /* keep all four socials on one line */
  .links__social{gap:.3rem}
  .chip{padding:.4rem .58rem;font-size:.56rem;letter-spacing:.13em}
}
@media (max-width: 344px){
  .links__row{grid-template-columns:1fr}
}
@media (max-height: 620px){
  .ghost{display:none}
  :root{--sleeve: clamp(150px, 34vh, 240px)}
}

/* ── adaptive quality ────────────────────────────────────────────────────────
   main.js adds .q1 / .q2 to <html> when real frame times stop holding up.
   Each tier drops the layers that cost the most and are noticed the least. */
.q1 .grain{animation:none}
.q1 .scanlines{display:none}
.q1 .cursor{display:none}

.q2 .ghost-fx{display:none}
.q2 .fx-on .ghost span{                 /* hand the wordmark back to the stroke */
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(52,224,124,.05) 65%, transparent);
  -webkit-text-stroke-color:rgba(244,239,230,.085);
}
.q2 .grain{display:none}
.q2 .cover__gloss{display:none}
.q2 .disc__sheen{display:none}
.q2 .cover__grain{display:none}
.q2 #bg{display:none}
.q2 body{background:radial-gradient(120% 90% at 50% 44%, #0a2216 0%, #04100a 42%, #000 78%)}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{animation:none}
  .cover__rays{animation:none}
  .js .links__row li,.js .links__social li{opacity:1;transform:none;filter:none}
  .js .links__row li a,.js .links__social li a{pointer-events:auto}
  .js .stage,.js .ghost span,.js .footer,.js .sound{opacity:1;transform:none}
  .sound__btn.is-playing .eq i{animation:none;transform:scaleY(.6)}
  .cursor{display:none}
  body{cursor:auto}
}