/* ══════════════════════════════════════════════════════════════
   NAPHTHA — a record label, pressed from petroleum
   Palette sources are documented in PLAN.md §7.
   No serif. No monospace. No cards, no dividers, no footer.
   ══════════════════════════════════════════════════════════════ */

:root{
  --petrol:#0C2126;   /* crude in a glass jar against a window */
  --aubergine:#2A1430; /* the sludge fraction under low light */
  --cyan:#3FE0D0;     /* thin-film band on wet asphalt */
  --magenta:#E0479B;  /* the same slick, one step thicker */
  --gold:#E8A33D;     /* sunlight through a jar of crude */
  --bone:#EDE4D8;     /* an aged paper inner sleeve — not white */
  --bone-dim:rgba(237,228,216,.62);
  --bone-faint:rgba(237,228,216,.36);

  --sel:var(--gold);  /* shifts with sleeve selection */

  --col:clamp(310px, 34vw, 520px);
  --gut:clamp(22px, 5.2vw, 88px);

  --t-body:clamp(17px, 1.12vw, 19px);
  --t-lede:clamp(20px, 1.62vw, 27px);
  --t-small:clamp(15px, .95vw, 16px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}

body{
  margin:0;
  background:var(--petrol);
  color:var(--bone);
  font-family:'Synonym','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.58;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--sel);color:#0C2126}

/* ─── the volume: one fixed canvas, never a section background ─── */
#stage{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(178deg,
      var(--petrol) 0%,
      var(--petrol) 34%,
      var(--aubergine) 72%,
      #241224 100%);
}
#gl{display:block;width:100%;height:100%}

/* film grain, 4% — the page should feel photographed, not rendered */
#grain{
  position:fixed; inset:-50%;
  z-index:2; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grainshift 700ms steps(1) infinite;
  will-change:transform;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

/* ─── cursor: a tight film-thickness fingertip, ~2.4cm ─── */
#cursor{
  position:fixed; top:0; left:0;
  width:90px; height:90px; margin:-45px 0 0 -45px;
  z-index:60; pointer-events:none; opacity:0;
  border-radius:50%;
  border:1px solid rgba(237,228,216,.30);
  box-shadow:inset 0 0 0 0 rgba(63,224,208,0);
  transition:width .28s cubic-bezier(.22,.9,.28,1),height .28s cubic-bezier(.22,.9,.28,1),
             margin .28s cubic-bezier(.22,.9,.28,1),border-color .28s ease,opacity .3s ease;
  mix-blend-mode:screen;
}
body.has-cursor #cursor{opacity:1}
body.cursor-live #cursor{
  width:120px;height:120px;margin:-60px 0 0 -60px;
  border-color:var(--sel);
}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ─── loader ─── */
#loader{
  position:fixed;inset:0;z-index:200;
  background:var(--petrol);
  display:flex;align-items:flex-end;
  padding:0 var(--gut) 9vh;
  transition:opacity .8s ease .15s,visibility .8s ease .15s;
}
body.loaded #loader{opacity:0;visibility:hidden}
.loader-inner{width:min(560px,90vw)}
.loader-word{
  font-family:'Tanker',Impact,sans-serif;
  font-size:clamp(48px,7vw,110px);
  line-height:.86;letter-spacing:.006em;
  color:var(--bone);
}
.loader-line{
  height:1px;background:rgba(237,228,216,.16);
  margin:26px 0 12px;overflow:hidden;
}
#loader-fill{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear}
.loader-note{font-size:var(--t-small);color:var(--bone-faint)}
#loader-pct::before{content:" — "}
#loader-pct::after{content:"%"}

/* ─── the wordmark, hard-left, never centred ─── */
#mark{
  position:fixed;
  top:clamp(20px,2.6vw,36px); left:var(--gut);
  z-index:50;
  display:flex;flex-direction:column;gap:4px;
  mix-blend-mode:normal;
  opacity:0;transform:translateY(-8px);
  transition:opacity .9s ease .35s,transform .9s cubic-bezier(.2,.8,.25,1) .35s;
}
body.loaded #mark{opacity:1;transform:none}
body.at-top #mark{opacity:0;transform:translateY(-8px);pointer-events:none}
.mark-word{
  font-family:'Tanker',Impact,sans-serif;
  font-size:clamp(19px,1.5vw,25px);
  line-height:1;letter-spacing:.03em;
  color:var(--bone);text-decoration:none;
}
.mark-sub{font-size:var(--t-small);color:var(--bone-faint);font-weight:300}

.skip{
  position:fixed;left:-9999px;top:0;z-index:300;
  background:var(--bone);color:var(--petrol);padding:12px 18px;text-decoration:none;
}
.skip:focus{left:var(--gut);top:14px}

/* ─── the scroll column ─── */
#scroll{position:relative;z-index:10}
.act{position:relative}
.act-i{height:150vh}
.act-ii{height:600vh}
.act-iii{height:330vh}
.act-iv{height:240vh}

/* Type is pinned over the volume and driven by one scroll value.
   There are no sections, no bands and no dividers — depth changes
   instead of background colour. */
.beat,.rel,.numeral,.slick-fig{
  position:fixed;
  left:var(--gut);
  top:50%;
  width:var(--col);
  opacity:0;
  transform:translate3d(0,0,0);
  will-change:opacity,transform;
  pointer-events:none;
  z-index:12;
}
.beat p,.rel p,.rel h3{pointer-events:auto}
.beat p+p{margin-top:1.05em}
.beat p{margin:0;max-width:46ch}

/* ─── Act I hero: the upper band is occupied, not empty ─── */
.beat-hero{
  position:fixed;
  top:0;left:0;width:100%;height:100vh;
  padding:clamp(96px,13vh,150px) var(--gut) clamp(30px,5vh,56px);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:1;transform:none;
  pointer-events:none;
}
.hero-top{
  margin:0;max-width:44ch;
  font-size:clamp(16px,1.18vw,20px);font-weight:300;line-height:1.42;
  color:var(--bone-dim);
  opacity:0;transform:translateY(16px);
}
body.loaded .hero-top{opacity:1;transform:none;
  transition:opacity .9s ease .25s,transform 1s cubic-bezier(.16,.84,.24,1) .25s}
.hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gut);flex-wrap:wrap;
}
.hero-cue{
  margin:0;text-align:right;max-width:34ch;
  font-size:var(--t-small);font-weight:300;line-height:1.5;
  color:var(--bone-faint);
  opacity:0;
}
.hero-cue span{color:var(--gold)}
body.loaded .hero-cue{opacity:1;transition:opacity 1s ease 1.3s}
.hero-word{
  margin:0 0 .06em -0.028em;
  font-family:'Tanker',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(76px,20vw,340px);
  line-height:.78;
  letter-spacing:-.004em;
  color:var(--bone);
  opacity:0;
  transform:translateY(46px);
}
body.loaded .hero-word{
  opacity:1;transform:none;
  transition:opacity 1.1s ease .5s,transform 1.3s cubic-bezier(.16,.84,.24,1) .5s;
}
.hero-thesis{
  margin:0;
  max-width:22ch;
  font-size:clamp(21px,2.05vw,36px);
  font-weight:300;
  line-height:1.24;
  color:var(--bone-dim);
  opacity:0;transform:translateY(26px);
}
body.loaded .hero-thesis{
  opacity:1;transform:none;
  transition:opacity 1s ease .95s,transform 1.1s cubic-bezier(.16,.84,.24,1) .95s;
}

.beat-left{margin-top:-9rem}
.beat-object{margin-top:-7rem}
.rel-gap{margin-top:-9rem}

.lede{font-size:var(--t-lede);font-weight:300;line-height:1.34;letter-spacing:-.005em}
.lede em{font-style:normal;color:var(--sel);transition:color .9s ease}
.muted{color:var(--bone-dim);font-weight:300}
.small{font-size:var(--t-small);line-height:1.5}

/* ─── display type: violent size range, hard left ─── */
.display{
  font-family:'Tanker',Impact,sans-serif;
  font-weight:400;margin:0 0 .34em -0.026em;
  line-height:.82;letter-spacing:.002em;
  color:var(--bone);
}
.display-mid{font-size:clamp(58px,12vw,190px)}

/* the one enormous numeral, bleeding off both edges */
.numeral{
  left:0;width:100vw;top:50%;margin-top:-26vw;z-index:11;
  margin:0;padding:0;
  font-family:'Tanker',Impact,sans-serif;
  font-size:40vw;line-height:.72;
  letter-spacing:.01em;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1.6px rgba(237,228,216,.26);
  white-space:nowrap;
  pointer-events:none;
}

/* ─── releases: caption hangs off the RIGHT edge, half-cropped ─── */
.rel{
  left:auto;
  right:calc(var(--gut) * -0.16);
  width:min(440px,40vw);
  margin-top:-10rem;
  cursor:pointer;
  z-index:13;
}
.rel:focus-visible{outline:2px solid var(--gold);outline-offset:16px}
.rel-title{
  font-family:'Tanker',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(32px,3.5vw,56px);
  line-height:.92;letter-spacing:.004em;
  margin:0 0 .18em -0.02em;
  color:var(--bone);
  transition:color .5s ease;
}
.rel:hover .rel-title,.rel.picked .rel-title{color:var(--sel)}
.rel-artist{
  margin:0 0 .5em;font-size:clamp(18px,1.4vw,23px);
  font-weight:500;color:var(--bone);
}
.rel-meta{margin:0 0 1em;font-size:var(--t-small);color:var(--bone-faint);font-weight:300}
.rel-note{margin:0 0 1.15em;max-width:38ch;color:var(--bone-dim);font-weight:300}
.rel-links{margin:0;display:flex;gap:26px}

/* understated links: a bone rule that draws in from the left */
.ul{
  position:relative;color:var(--bone);text-decoration:none;
  font-weight:500;font-size:var(--t-small);
  padding-bottom:3px;
}
.ul::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.22,.9,.28,1);
}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1)}
.contact-line .ul,.lede .ul{font-size:inherit}

.gap-year{
  font-family:'Tanker',Impact,sans-serif;
  font-size:clamp(56px,9vw,140px);line-height:.84;
  margin:0 0 .22em -0.024em;
  color:transparent;-webkit-text-stroke:1.2px rgba(237,228,216,.42);
}
.rel-gap{left:var(--gut);right:auto;width:var(--col)}
.gap-year{font-variant-numeric:tabular-nums}

.obj-head{
  font-family:'Tanker',Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,3.6vw,58px);line-height:.94;
  margin:0 0 .42em -0.018em;color:var(--bone);
}
.beat-object{width:min(480px,40vw)}

/* ─── the one photograph, treated four ways ─── */
.slick-fig{
  left:0;width:min(640px,54vw);margin:0;margin-top:-15rem;
}
.slick-fig figcaption::before{
  content:'';display:block;height:1px;width:100%;margin-bottom:16px;
  background:var(--bone-faint);
  transform:scaleX(var(--draw,0));transform-origin:left;
}
.slick-crop{
  position:relative;overflow:hidden;
  height:min(440px,46vh);
  filter:grayscale(.55) contrast(1.22) brightness(.72);
}
.slick-crop img{
  width:100%;height:100%;object-fit:cover;
  object-position:24% 74%;
  transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(.2,.8,.25,1),filter 1.4s ease;
  display:block;
}
.slick-fig:hover .slick-crop img{transform:scale(1.13)}
.slick-crop::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,var(--petrol),var(--gold) 62%,var(--magenta));
  mix-blend-mode:color;opacity:.55;
}
.slick-crop::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(42,20,48,.92) 0%,rgba(42,20,48,0) 22%),
    linear-gradient(270deg,rgba(42,20,48,.95) 0%,rgba(42,20,48,0) 30%),
    linear-gradient(0deg,rgba(42,20,48,.75) 0%,rgba(42,20,48,0) 24%);
}
.slick-fig figcaption{
  margin:20px 0 0 var(--gut);
  max-width:44ch;font-size:var(--t-small);
  color:var(--bone-dim);font-weight:300;line-height:1.55;
}

.contact-line{margin:0 0 .5em;font-size:var(--t-lede);font-weight:300;line-height:1.3}
.beat-end .tail{
  margin-top:2.4em;font-size:22px;color:var(--bone-faint);
  animation:drift 3.4s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(9px);opacity:.75}}

/* ─── selection panel: hangs off the right edge, half-cropped ─── */
#sleeve-panel{
  position:fixed;
  right:0;bottom:clamp(24px,5vh,60px);
  z-index:40;
  width:min(360px,74vw);
  padding:20px 0 20px 22px;
  transform:translateX(38%);
  opacity:0;
  pointer-events:none;
  transition:transform .7s cubic-bezier(.18,.86,.24,1),opacity .55s ease;
  border-left:1px solid rgba(237,228,216,.18);
}
#sleeve-panel.on{transform:translateX(22%);opacity:1;pointer-events:auto}
#sleeve-panel:hover{transform:translateX(0)}
.sp-cat{font-size:var(--t-small);color:var(--sel);font-weight:500;margin:0 0 6px}
.sp-title{
  font-family:'Tanker',Impact,sans-serif;font-weight:400;
  font-size:clamp(28px,2.6vw,42px);line-height:.92;margin:0 0 .2em -0.018em;
}
.sp-artist{margin:0 0 .9em;font-size:var(--t-small);color:var(--bone-dim)}
.sp-links{display:flex;gap:22px;margin:0}

/* ─── magnetic / focus ─── */
a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:4px;
}
.mag{display:inline-block;will-change:transform}

/* ═══ mobile: reflow, not shrink ═══ */
@media (max-width:820px){
  :root{--gut:20px;--col:min(100%,520px)}

  /* Mobile is a different composition, not a squeezed one: the volume takes
     the upper frame and the copy drops into a band beneath it, with a soft
     shade so type never has to compete with a sleeve behind it. */
  #stage::after{
    content:'';position:absolute;inset:auto 0 0 0;height:66vh;
    background:linear-gradient(to top,
      rgba(6,11,14,.90) 0%, rgba(6,11,14,.78) 30%,
      rgba(6,11,14,.42) 62%, rgba(6,11,14,0) 100%);
    pointer-events:none;
  }
  .beat,.rel,.slick-fig{top:auto;bottom:7vh;margin-top:0}
  .beat-object{margin-top:0}
  .rel-gap{margin-top:0}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-cue{text-align:left;max-width:100%}
  .beat-hero{top:0;bottom:auto}
  .act-i{height:130vh}
  .act-ii{height:520vh}
  .act-iii{height:300vh}
  .act-iv{height:220vh}
  .beat,.rel,.slick-fig{width:calc(100vw - var(--gut) * 2)}
  .rel{left:var(--gut);right:auto}
  .rel-note{max-width:100%}
  .beat-object{width:calc(100vw - var(--gut) * 2)}
  .slick-fig{left:0;width:100vw}
  .slick-crop{height:52vw}
  .slick-fig figcaption{margin-left:var(--gut);margin-right:var(--gut)}
  .numeral{font-size:44vw}
  .hero-word{font-size:23vw}
  .hero-thesis{font-size:clamp(19px,5vw,26px)}
  #sleeve-panel{
    right:var(--gut);left:var(--gut);width:auto;bottom:18px;
    transform:translateY(120%);padding:16px 0 16px 18px;
  }
  #sleeve-panel.on{transform:translateY(0)}
  .ul{padding-bottom:8px;display:inline-block;min-height:30px}
  .rel-links{gap:30px}
  #mark .mark-sub{display:none}
}

@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
  .beat,.rel,.numeral,.slick-fig{opacity:1 !important;transform:none !important}
  .beat-end .tail{animation:none}
  html{scroll-behavior:auto}
}