/* =========================================================
   THADDEUS A — tape / viewfinder system
   Format study: taylorsavant.net (persistent HUD, hero seam,
   ticker, catalog ledger, contact sheet, scoped grain).

   v3 — full dark ground, red accent.
   The reference alternates dark and light sections. This one
   stays dark end to end and separates sections by tone
   instead: --ink (deepest) against --ink-2 (raised). Red is
   the only accent, rationed the way the reference rations
   orange — CTAs, the REC light, the ticker, live state.
   ========================================================= */

:root{
  /* colour ------------------------------------------------ */
  --ink:    #0A0908;   /* deepest ground — hero, listen, contact, footer */
  --ink-2:  #121010;   /* raised ground — catalog, watch, lessons        */
  --ink-3:  #1B1817;   /* panels — cards, form, video frames             */
  --bone:   #F0ECE7;   /* primary text on dark                           */
  --red:    #D42A2A;   /* the accent — CTAs, ticker, live                */
  --red-hi: #FF4A4A;   /* lifted red — hover, REC light                  */
  --red-dp: #7E1416;   /* deep red — pressed states, borders             */
  --grey:   #8B8380;   /* muted text                                     */

  --soft:   rgba(240,236,231,.70);  /* secondary text  */
  --faint:  rgba(240,236,231,.44);  /* tertiary text   */
  --rule:   rgba(240,236,231,.13);  /* hairlines       */
  --rule-2: rgba(240,236,231,.24);  /* stronger rules  */

  /* type -------------------------------------------------- */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;

  --wide: 125;   /* Archivo width axis, display */
  --norm: 100;

  /* metrics ----------------------------------------------- */
  --hud-h: 46px;
  --pad: clamp(18px, 4.5vw, 76px);
  --maxw: 1560px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Where the hero's type panel ends and the portrait begins.
     --seam is element-relative; --seam-px is the same edge measured
     from the viewport's left, which the wordmark's gradient fill
     needs. main.js replaces the fallback with the measured value so
     the two can never drift. */
  --seam: 58%;
  --seam-vw: 58vw;
  --seam-px: 58vw;
  /* Gradient stop in the wordmark's own coordinate space: the photo edge
     measured from the h1's left edge. main.js refines it; this fallback is
     already correct because the h1 starts exactly one --pad from the left. */
  --seam-local: calc(58vw - var(--pad));

  /* Colour the wordmark takes where it crosses onto the portrait.
     Red holds up over the pale sky; bone disappears into it. */
  --name-over: var(--red);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink); }
html:focus-within{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-variation-settings:'wdth' var(--norm);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(212,42,42,.22);
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{
  outline:2px solid var(--red-hi);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff;
  padding:12px 18px; font-family:var(--mono); font-size:12px;
}
.skip:focus{ left:0; }

/* ---------- shared type atoms ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 clamp(14px,2vw,22px);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.eyebrow--light{ color:var(--faint); }

.dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--grey); display:inline-block; flex:none;
}
.dot--live{ background:var(--red-hi); animation:blink 1.6s steps(1,end) infinite; }

.sec__title{
  font-family:var(--display);
  font-variation-settings:'wdth' var(--wide);
  font-weight:700;
  font-size:clamp(2.1rem, 4.4vw, 4.1rem);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--bone);
  margin:0 0 clamp(16px,2.4vw,26px);
  text-wrap:balance;
  overflow-wrap:break-word;
}
.sec__title--light{ color:var(--bone); }

.sec--catalog .sec__title,
.sec--contact .sec__title{ font-size:clamp(2.4rem, 6.2vw, 5.6rem); }

.sec__lede{
  max-width:46ch;
  font-size:clamp(1rem,1.35vw,1.18rem);
  line-height:1.5;
  color:var(--soft);
  margin:0;
}

/* ---------- buttons ---------- */

.btn{
  --bg:transparent; --fg:var(--bone); --bd:var(--rule-2);
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:13px 22px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg);
  border-radius:1px; cursor:pointer; white-space:nowrap;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn--go{ --bg:var(--red); --fg:#fff; --bd:var(--red); }
.btn--go:hover{ --bg:var(--red-hi); --bd:var(--red-hi); }

.btn--ghost{ --bg:transparent; --fg:var(--bone); --bd:var(--rule-2); }
.btn--ghost:hover{ --bg:var(--bone); --fg:var(--ink); --bd:var(--bone); }

.btn--wide{ width:100%; padding:17px 22px; font-size:13px; }

/* =========================================================
   HUD  (persistent viewfinder bar)
   ========================================================= */

.hud{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hud-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 clamp(12px,2.4vw,22px);
  /* A fixed bar with backdrop-filter re-blurs everything beneath it on every
     scrolled frame. On a ground this dark the blur is barely visible anyway,
     so the bar is now nearly opaque with a much cheaper blur — same read,
     less work per frame. */
  background:rgba(10,9,8,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
  color:var(--bone);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
}

.hud__l,.hud__r{ display:flex; align-items:center; gap:14px; min-width:0; }

.rec{
  width:8px; height:8px; border-radius:50%; background:var(--red-hi);
  flex:none; animation:blink 1.6s steps(1,end) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }

.hud__rec{ color:var(--red-hi); }

.hud__mark{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:700; font-size:13px; letter-spacing:.02em;
  text-transform:uppercase; text-decoration:none;
}

.hud__nav{ display:flex; gap:24px; }
.hud__nav a{
  text-decoration:none; color:var(--soft);
  transition:color .2s var(--ease);
}
.hud__nav a:hover{ color:var(--red-hi); }

.hud__geo{ color:var(--faint); }

.hud__tc{ color:var(--bone); font-variant-numeric:tabular-nums; }

.hud__cta{ padding:8px 16px; font-size:11px; }

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  padding:calc(var(--hud-h) + clamp(40px,9vh,110px)) var(--pad) clamp(28px,5vh,54px);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--ink); color:var(--bone);
  overflow:hidden;
}

/* The hillside portrait. Below 900px it sits behind the type as a full
   bleed; above, it docks to the right at its own aspect ratio. */
.hero__shot{ position:absolute; inset:0; margin:0; }
.hero__shot img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 18%;
  opacity:.30; filter:contrast(1.06) saturate(.9);
}

/* video-tape scanlines + vignette — the tape texture stays on the type
   side; the photograph is left clean. */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    /* Below 900px the photo is a full bleed behind the type, so weight
       the scrim to the bottom where the wordmark, buttons and stats sit
       — the guitar body is the brightest thing in frame and the copy
       lands right on it. */
    linear-gradient(to top,
      rgba(10,9,8,.94) 0%, rgba(10,9,8,.78) 32%,
      rgba(10,9,8,.42) 58%, rgba(10,9,8,.10) 82%),
    radial-gradient(120% 90% at 50% 45%,
      transparent 36%, rgba(10,9,8,.80) 90%);
}

@media (min-width:900px){
  /* Everything that must stay on the dark panel is held back
     individually; the h1 stays full width so background-clip:text can
     paint its glyphs where they cross the seam. */
  .hero__eyebrow,
  .hero__actions,
  .hero__stats{ max-width:calc(var(--seam-vw) - 2 * var(--pad)); }

  .hero__shot{
    left:auto; right:0; width:calc(100% - var(--seam));
    border-left:1px solid var(--rule);
    background:var(--ink-2);
  }
  .hero__shot img{
    object-position:50% 20%;
    opacity:1; filter:contrast(1.02) saturate(.92);
  }

  /* keep the scanlines off the photograph */
  .hero::after{
    right:calc(100% - var(--seam));
    background:
      repeating-linear-gradient(to bottom,
        rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
      radial-gradient(140% 100% at 20% 50%,
        transparent 40%, rgba(10,9,8,.72) 92%);
  }
}

/* The wordmark runs past the panel edge and over the portrait, so it
   changes colour where it crosses: a hard-stop gradient whose stop sits
   exactly on the photo edge.

   This used `background-attachment:fixed`, which pins the gradient to the
   viewport and therefore forces the browser to repaint the whole wordmark
   on every scrolled frame. Traced at 4x CPU throttle it was the single
   most expensive thing on the page: removing it dropped Paint from
   1170ms to 484ms and total render work by 31% over one full scroll.

   The stop is now measured in the element's OWN coordinates instead
   (--seam-local = photo left edge minus the h1's left edge, set by
   main.js). The h1 never moves horizontally, so the result is pixel-wise
   identical — it just no longer repaints while scrolling. The CSS
   fallback below is correct on its own if the script never runs. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @media (min-width:900px){
    .hero__name{
      background-color:var(--bone);
      background-image:linear-gradient(to right,
        var(--bone)      0,
        var(--bone)      var(--seam-local),
        var(--name-over) var(--seam-local),
        var(--name-over) 100%);
      background-repeat:no-repeat;
      -webkit-background-clip:text;
              background-clip:text;
      color:transparent;
    }
  }
}

/* viewfinder corner brackets */
.vf{ position:absolute; inset:clamp(14px,2.6vw,30px); pointer-events:none; z-index:2; }
.vf__c{ position:absolute; width:26px; height:26px; border:1.5px solid rgba(240,236,231,.62); }
.vf__c--tl{ top:0; left:0;  border-right:0; border-bottom:0; }
.vf__c--tr{ top:0; right:0; border-left:0;  border-bottom:0; }
.vf__c--bl{ bottom:0; left:0;  border-right:0; border-top:0; }
.vf__c--br{ bottom:0; right:0; border-left:0;  border-top:0; }

.hero__body{ position:relative; z-index:3; }

.hero__eyebrow{ color:var(--soft); }

.hero__name{
  font-family:var(--display);
  font-variation-settings:'wdth' var(--wide);
  font-weight:800;
  /* THADDEUS is 8 glyphs — sized so the full run fits at every width */
  font-size:clamp(2.8rem, 12vw, 12rem);
  line-height:.82;
  letter-spacing:-.045em;
  text-transform:uppercase;
  /* No `color` here on purpose. It inherits --bone from body, and the
     seam block below sets color:transparent so the clipped gradient can
     show through. Declaring a colour here would win on source order and
     silently kill the colour flip. */
  margin:0 0 clamp(22px,3.4vw,40px);
  display:flex; flex-direction:column;
}
.hero__name span{ display:block; }

.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero__stats{
  position:relative; z-index:3;
  margin:clamp(34px,6vh,70px) 0 0;
  padding-top:16px;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.hero__stats div{ display:flex; flex-direction:column; gap:4px; }
.hero__stats dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--faint);
}
.hero__stats dd{
  margin:0;
  font-family:var(--display); font-variation-settings:'wdth' var(--wide);
  font-weight:700; font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1; letter-spacing:-.03em; color:var(--bone);
}

/* =========================================================
   TICKER
   ========================================================= */

.ticker{
  background:var(--red); color:#fff;
  padding:11px 0; overflow:hidden;
  border-top:1px solid var(--red-dp);
  border-bottom:1px solid var(--red-dp);
}
.ticker__run{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker__run span{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap;
}
.ticker__d{ opacity:.55; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   SECTION FRAME
   ========================================================= */

.sec{ padding:clamp(64px,11vh,140px) var(--pad); }
.sec__head{ max-width:var(--maxw); margin:0 auto clamp(38px,6vw,64px); }

/* =========================================================
   CATALOG
   ========================================================= */

.sec--catalog{ background:var(--ink-2); position:relative; }

.cat{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--maxw);
  border-top:1px solid var(--rule);
}

.rel{ border-bottom:1px solid var(--rule); }

.rel__row{
  width:100%; background:none; border:0; cursor:pointer;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 128px 92px 116px 34px;
  align-items:center; gap:18px;
  padding:clamp(18px,2.2vw,26px) 4px;
  text-align:left; color:inherit; font:inherit;
  transition:padding-left .34s var(--ease), color .24s var(--ease);
}
.rel__row:hover{ padding-left:18px; }
.rel__row:hover .rel__title{ color:var(--red-hi); }

.rel__cat,
.rel__meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.rel__title{
  font-family:var(--display); font-variation-settings:'wdth' 116;
  font-weight:700; color:var(--bone);
  font-size:clamp(1.55rem,4.2vw,3.1rem);
  line-height:1; letter-spacing:-.035em; text-transform:uppercase;
  transition:color .24s var(--ease);
  min-width:0; overflow-wrap:anywhere;
}

.rel__tag{
  justify-self:start;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid var(--rule-2); border-radius:1px;
  padding:5px 9px; color:var(--faint);
}
.rel--new .rel__tag{ border-color:var(--red); color:var(--red-hi); }

.rel__x{
  font-family:var(--mono); font-size:19px; color:var(--faint);
  justify-self:end; transition:transform .34s var(--ease), color .24s var(--ease);
  line-height:1;
}
.rel.is-open .rel__x{ transform:rotate(45deg); color:var(--red-hi); }

/* --- expanded panel --- */
.rel__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.rel.is-open .rel__panel{ grid-template-rows:1fr; }
.rel__panelIn{ overflow:hidden; }

.rel__inner{
  display:grid; grid-template-columns:260px minmax(0,1fr);
  gap:clamp(22px,3.4vw,48px);
  padding:6px 4px clamp(30px,3.6vw,44px);
}

.rel__art{ width:100%; border:1px solid var(--rule-2); }

.rel__side{ display:flex; flex-direction:column; gap:14px; }
.rel__buys{ display:flex; flex-direction:column; gap:8px; }
.rel__buys .btn{ width:100%; }
.rel__buys .btn:hover{ --bg:var(--bone); --fg:var(--ink); --bd:var(--bone); }

.rel__main{ min-width:0; }

.rel__spec{
  margin:0 0 clamp(20px,2.4vw,28px);
  padding-bottom:clamp(16px,2vw,22px);
  border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
.rel__spec div{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rel__spec dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.rel__spec dd{
  margin:0; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--bone);
}

.tracks{
  list-style:none; margin:0; padding:0;
  column-gap:clamp(22px,3vw,44px);
}
.tracks li{
  break-inside:avoid;
  display:flex; gap:12px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--rule);
  font-size:.95rem; color:var(--soft);
}
.tracks b{
  font-family:var(--mono); font-size:11px; font-weight:400;
  color:var(--faint); flex:none; min-width:22px;
}

/* --- side-project cards under the catalog --- */
.also{
  max-width:var(--maxw); margin:clamp(34px,5vw,56px) auto 0;
  display:grid; gap:clamp(14px,2vw,22px);
  /* auto-fit so the card count can change without touching this */
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.also__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.also__card{
  border:1px solid var(--rule); border-radius:1px;
  background:var(--ink-3);
  padding:clamp(18px,2.4vw,28px);
  display:flex; flex-direction:column; gap:10px;
}
.also__card h3{
  margin:0; color:var(--bone);
  font-family:var(--display); font-variation-settings:'wdth' 116;
  font-weight:700; font-size:1.35rem; letter-spacing:-.02em;
  text-transform:uppercase;
}
.also__card p{ margin:0; color:var(--soft); font-size:.97rem; max-width:52ch; }
.also__card .btn{ align-self:flex-start; margin-top:6px; }

/* --- cursor-tracked cover scrub --- */
.scrub{
  position:fixed; top:0; left:0; z-index:60;
  width:210px; height:210px;
  pointer-events:none; opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.9) rotate(-3deg);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  border:1px solid var(--rule-2);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.scrub img{ width:100%; height:100%; object-fit:cover; }
.scrub.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1) rotate(-3deg); }

/* =========================================================
   LISTEN
   ========================================================= */

.sec--listen{ background:var(--ink); }

.listen__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:center;
}
.listen__links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.listen__player{ border:1px solid var(--rule); padding:10px; background:var(--ink-3); }

/* =========================================================
   WATCH  (footage — click-to-load YouTube)
   ========================================================= */

.sec--watch{ background:var(--ink-2); }

.videos{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
}
.video{ margin:0; }
.video__btn{
  position:relative; display:block; width:100%;
  padding:0; border:1px solid var(--rule); background:var(--ink);
  cursor:pointer; overflow:hidden;
}
/* height:auto is required — the width/height attributes on the <img> map to
   presentational hints, and a used `height` makes the browser ignore
   aspect-ratio entirely. Without it the thumbnails render 720px tall. */
.video__btn img{
  width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover;
  opacity:.82; filter:saturate(.88) contrast(1.04);
  transition:transform .8s var(--ease), opacity .4s var(--ease);
}
.video__btn:hover img{ transform:scale(1.04); opacity:.95; }
.video__play{
  position:absolute; inset:0; display:grid; place-items:center;
}
.video__play::before{
  content:''; width:58px; height:58px; border-radius:50%;
  background:rgba(212,42,42,.86); border:1px solid rgba(255,255,255,.28);
  transition:background .3s var(--ease);
}
.video__btn:hover .video__play::before{ background:var(--red-hi); }
.video__play::after{
  content:''; position:absolute;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
.video iframe{
  width:100%; aspect-ratio:16 / 9; border:1px solid var(--rule); display:block;
}
.video figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint);
  padding:10px 2px 0;
}
.watch__more{ max-width:var(--maxw); margin:clamp(20px,3vw,30px) auto 0; }

/* =========================================================
   ABOUT
   ========================================================= */

.sec--about{ background:var(--ink); }

.about__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,84px); align-items:start;
}

.about__strip{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.about__strip figure{ margin:0; overflow:hidden; border:1px solid var(--rule); }
.about__strip img{
  width:100%; aspect-ratio:3 / 4; object-fit:cover;
  filter:saturate(.78) contrast(1.06) brightness(.92);
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.about__strip figure:first-child img{ object-position:50% 30%; }
.about__strip figure:last-child img{ object-position:50% 50%; }
.about__strip figure:hover img{ transform:scale(1.045); filter:saturate(.95) contrast(1.06) brightness(1); }

.about__copy p{ max-width:52ch; color:var(--soft); margin:0 0 16px; font-size:1.02rem; }
.about__copy em{ font-style:italic; color:var(--bone); }
.about__copy .pull{
  color:var(--bone); font-size:1.08rem; line-height:1.5;
  border-left:2px solid var(--red); padding-left:16px;
}
.about__copy a{ color:var(--red-hi); }

.about__facts{
  list-style:none; margin:clamp(24px,3vw,34px) 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.about__facts li{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone);
}
.about__facts li span:first-child{ color:var(--faint); }
.about__facts li span:last-child{ text-align:right; }

/* =========================================================
   LESSONS POINTER
   ========================================================= */

.sec--lessons{
  background:var(--ink-2);
  padding-top:clamp(44px,7vh,80px); padding-bottom:clamp(44px,7vh,80px);
}
.lessons__bar{
  max-width:var(--maxw); margin:0 auto;
  border:1px solid var(--rule); border-radius:1px;
  background:var(--ink-3);
  padding:clamp(22px,3vw,38px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,40px); flex-wrap:wrap;
}
.lessons__bar h2{
  font-family:var(--display); font-variation-settings:'wdth' var(--wide);
  font-weight:700; font-size:clamp(1.5rem,2.6vw,2.2rem);
  letter-spacing:-.03em; text-transform:uppercase; margin:0 0 6px;
  color:var(--bone);
}
.lessons__bar p{ margin:0; color:var(--soft); max-width:52ch; }
.lessons__cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* =========================================================
   CONTACT
   ========================================================= */

.sec--contact{
  background:var(--ink);
  background-image:
    linear-gradient(rgba(10,9,8,.93), rgba(10,9,8,.975)),
    url('assets/img/studio-04.jpg');
  background-size:cover; background-position:center;
}

.contact__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,90px); align-items:start;
}

.contact__lede{
  max-width:42ch; color:var(--soft);
  font-size:clamp(1rem,1.3vw,1.14rem); margin:0 0 24px;
}
.steps{
  list-style:none; margin:0 0 clamp(26px,3.4vw,38px); padding:0;
  border-top:1px solid var(--rule); max-width:44ch;
}
.steps li{
  display:flex; gap:16px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--rule);
}
.steps__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--red-hi); flex:none;
}
.steps__t{ font-size:.97rem; color:var(--soft); line-height:1.45; }

.contact__direct{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); margin:0; }
.contact__direct a{ color:var(--red-hi); }

/* the contact sheet */
.rider{
  background:var(--ink-3);
  border:1px solid var(--rule);
  padding:clamp(20px,2.8vw,34px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px 18px;
}

.rider__no{
  grid-column:1 / -1; margin:0 0 4px;
  display:flex; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

.f{ grid-column:1 / -1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.f--half{ grid-column:span 1; }

.f label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft);
}
.f .opt{ color:var(--faint); letter-spacing:.06em; }

/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus.
   13px vertical padding puts the control at ~46px, over the 44px touch
   target minimum. */
.f input,.f select,.f textarea{
  width:100%; font-family:var(--body); font-size:16px;
  color:var(--bone); background:transparent;
  border:0; border-bottom:1px solid var(--rule-2);
  padding:13px 2px; border-radius:0;
  transition:border-color .24s var(--ease);
}
.f textarea{ resize:vertical; min-height:84px; }
.f select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(240,236,231,.5) 50%),
                   linear-gradient(135deg,rgba(240,236,231,.5) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:26px;
}
.f select option{ background:var(--ink-3); color:var(--bone); }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0; border-bottom-color:var(--red-hi);
}
.f input::placeholder,.f textarea::placeholder{ color:rgba(240,236,231,.26); }

.f.is-bad input,.f.is-bad select{ border-bottom-color:var(--red-hi); }

.err{
  margin:0; min-height:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--red-hi);
}

.rider button{ grid-column:1 / -1; margin-top:6px; }

.rider__status{
  grid-column:1 / -1; margin:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  line-height:1.5; color:var(--soft);
}
.rider__status.is-ok{ color:var(--bone); }
.rider__status.is-bad{ color:var(--red-hi); }

/* =========================================================
   FOOTER
   ========================================================= */

.foot{
  background:var(--ink); color:var(--bone);
  padding:clamp(48px,7vh,86px) var(--pad) clamp(22px,3vh,34px);
  border-top:1px solid var(--rule);
  display:grid; gap:clamp(30px,4vw,56px);
  max-width:none;
}

.foot__mark{
  font-family:var(--display); font-variation-settings:'wdth' var(--wide);
  font-weight:800; font-size:clamp(2.6rem,10vw,7rem);
  line-height:.84; letter-spacing:-.045em; text-transform:uppercase;
}

.foot__cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
/* 13px vertical padding clears the 44px touch target; the columns are
   the densest run of links on the page and the easiest to mis-tap. */
.foot__cols a{
  display:block; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  padding:13px 0; color:var(--soft);
  transition:color .2s var(--ease), padding-left .24s var(--ease);
}
.foot__cols a:hover{ color:var(--red-hi); padding-left:7px; }

.foot__fine{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:0; padding-top:20px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}

/* =========================================================
   GLOBAL GRAIN
   The whole page is footage now, so the grain runs everywhere
   except the catalog ledger, which stays clean enough to read.
   ========================================================= */

.hero::before,
.sec--listen::before,
.sec--about::before,
.sec--contact::before,
.foot::before{
  content:''; position:absolute; inset:-25%;
  z-index:5; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4,end) infinite;
}
.sec--listen,.sec--about,.sec--contact,.foot{ position:relative; overflow:hidden; }
/* keep the grain layer under the interactive content */
.listen__grid,.about__grid,.contact__grid,.foot__mark,.foot__cols,.foot__fine{ position:relative; z-index:6; }
@keyframes grain{
  0%{transform:translate(0,0)}      25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}  75%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */

.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1080px){
  .listen__grid,
  .about__grid,
  .contact__grid{ grid-template-columns:minmax(0,1fr); }

  .about__strip{ order:2; }

  .rel__row{ grid-template-columns:70px minmax(0,1fr) 30px; gap:12px; }
  .rel__meta,.rel__tag{ display:none; }
  .rel__inner{ grid-template-columns:180px minmax(0,1fr); }

  .videos{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .hud__nav,.hud__geo{ display:none; }
  .hud{ font-size:10px; }

  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }

  .rel__inner{ grid-template-columns:minmax(0,1fr); }
  .rel__art{ max-width:240px; }
  .tracks{ columns:1 !important; }
  .rel__spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .also{ grid-template-columns:minmax(0,1fr); }
  .about__strip{ grid-template-columns:minmax(0,1fr); }

  .rider{ grid-template-columns:1fr; }
  .f--half{ grid-column:1 / -1; }

  .foot__cols{ grid-template-columns:1fr; }
  .scrub{ display:none; }

  /* comfortable touch targets for the catalog rows */
  .rel__row{ padding-top:20px; padding-bottom:20px; }
}

/* Touch devices fire :hover on tap and then leave it stuck until the
   next tap elsewhere. Neutralise every hover-only affordance there —
   the states they reveal are all decorative. */
@media (hover:none){
  .rel__row:hover{ padding-left:4px; }
  .rel__row:hover .rel__title{ color:var(--bone); }
  .btn:hover{ transform:none; }
  .btn--go:hover{ --bg:var(--red); --bd:var(--red); }
  .btn--ghost:hover{ --bg:transparent; --fg:var(--bone); --bd:var(--rule-2); }
  .rel__buys .btn:hover{ --bg:transparent; --fg:var(--bone); --bd:var(--rule-2); }
  .about__strip figure:hover img{ transform:none; }
  .video__btn:hover img{ transform:none; opacity:.72; }
  .video__btn:hover .video__play::before{ background:rgba(212,42,42,.86); }
  .foot__cols a:hover{ color:var(--soft); padding-left:0; }
  .hud__nav a:hover{ color:var(--soft); }
}

@media (max-width:420px){
  .hero__actions .btn{ width:100%; }
  .lessons__cta .btn{ width:100%; }
}

/* Animated grain is a full-screen composited layer repainting ~4x a
   second. On touch devices that is a battery and jank cost for an
   effect nobody looks for, so hold it still there. */
@media (hover:none) and (pointer:coarse){
  .hero::before,
  .sec--listen::before,
  .sec--about::before,
  .sec--contact::before,
  .foot::before{ animation:none; opacity:.12; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero::before,.sec--listen::before,.sec--about::before,.sec--contact::before,.foot::before{ animation:none; }
  .ticker__run{ animation:none; }
  .rv{ opacity:1; transform:none; }
  .scrub{ display:none; }
}