/* FISHSCALE WOOLY — art direction pulled from his own footage:
   near-black ground, his red + bronze, the teal night grade and the VHS
   camcorder OSD burned into the "FN Taste Like Butter" video. */

:root{
  --ink:#08080A;
  --ink-2:#0F0F13;
  --ink-3:#17171D;
  --red:#DA2128;
  --red-hot:#FF3A42;
  --bronze:#987554;
  --bronze-lt:#C9A176;
  --acid:#D8F63A;
  --teal:#35C9C0;
  --bone:#EFEAE2;
  --bone-dim:#9A958D;

  --gut:clamp(20px,5vw,64px);
  --rule:1px solid rgba(239,234,226,.12);

  --mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --head:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --black-letter:'Pirata One','UnifrakturCook',serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 17px/1.65 var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ─── VHS camcorder chrome ─────────────────────────────────────── */
.osd{
  font:400 13px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.osd--teal{color:var(--teal)}
.rec{display:inline-flex;align-items:center;gap:.5em}
.rec::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--red-hot);
  box-shadow:0 0 10px var(--red-hot);
  animation:blink 1.4s steps(1,end) infinite;
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.rec::before{animation:none}}

.scan{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 2px,
    rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply;
  opacity:.55;
}
.vig{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 85% at 50% 45%,transparent 40%,rgba(0,0,0,.62) 100%);
}

/* ─── Layout primitives ────────────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,11vw,140px)}
.sec--tight{padding-block:clamp(52px,8vw,96px)}

.kicker{
  font:400 12px/1 var(--mono);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronze-lt);
  display:flex;align-items:center;gap:14px;
  margin:0 0 22px;
}
.kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bronze) 0%,transparent 100%)}

h2.big{
  font:400 clamp(38px,7.2vw,86px)/.92 var(--head);
  letter-spacing:-.015em;text-transform:uppercase;
  margin:0 0 .35em;
}
h3{font:400 clamp(21px,2.6vw,30px)/1.12 var(--head);letter-spacing:.01em;text-transform:uppercase;margin:0 0 .5em}
p{margin:0 0 1.15em;max-width:62ch;color:#D6D1C9}
p.lede{font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:var(--bone)}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font:400 15px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:17px 28px;border:2px solid var(--red);
  background:var(--red);color:#fff;text-decoration:none;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--red-hot);border-color:var(--red-hot);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--bone);border-color:rgba(239,234,226,.38)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px}

/* ─── HERO ─────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#000}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__grade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.12) 30%,rgba(8,8,10,.55) 66%,var(--ink) 100%),
    linear-gradient(90deg,rgba(8,8,10,.55) 0%,transparent 55%);
}
.hero__osd{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;
  padding:clamp(16px,3vw,28px) var(--gut);pointer-events:none}
.hero__body{position:relative;z-index:3;margin-top:auto;padding:0 var(--gut) clamp(40px,7vw,78px)}
.hero__mark{
  font:400 clamp(52px,12.5vw,152px)/.84 var(--black-letter);
  margin:0 0 .1em;letter-spacing:.005em;
  text-shadow:0 6px 40px rgba(0,0,0,.85);
}
.hero__mark span{display:block}
.hero__mark .red{color:var(--red-hot)}
.hero__tag{
  font:400 clamp(13px,1.7vw,17px)/1.4 var(--mono);
  letter-spacing:.3em;text-transform:uppercase;color:var(--bone);
  margin:0 0 clamp(22px,3.4vw,34px);max-width:none;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__now{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
.hero__sound{
  position:absolute;right:var(--gut);bottom:clamp(40px,7vw,78px);z-index:4;
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(239,234,226,.4);background:rgba(8,8,10,.55);
  color:var(--bone);cursor:pointer;backdrop-filter:blur(6px);
  display:grid;place-items:center;font:400 10px/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
}
.hero__sound:hover{background:var(--red);border-color:var(--red)}

/* ─── RELEASE (EP showcase) ────────────────────────────────────── */
.release{background:var(--ink);position:relative}
.release__grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1fr;align-items:start}
@media(min-width:880px){.release__grid{grid-template-columns:minmax(300px,46%) 1fr}}
.release__art{position:relative;box-shadow:0 30px 70px rgba(0,0,0,.65)}
.release__art img{width:100%;display:block}
.release__art .osd-strip{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;padding:12px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
}
.release__title{font:400 clamp(34px,5.6vw,62px)/.94 var(--head);text-transform:uppercase;margin:0 0 .25em}
.release__meta{font:400 13px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin:0 0 26px}

.apple-wrap{border:1px solid rgba(239,234,226,.14);background:var(--ink-3);margin:0 0 26px}
.apple-embed{border:0;width:100%;height:450px;display:block;background:transparent}
.apple-fall{margin:0;padding:12px 14px;border-top:1px solid rgba(239,234,226,.12);
  font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);max-width:none}
.apple-fall a{color:var(--acid)}

/* ─── NEXT UP ──────────────────────────────────────────────────── */
.next{position:relative;background:var(--ink-2);overflow:hidden}
.next__grid{display:grid;gap:clamp(28px,5vw,60px);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){.next__grid{grid-template-columns:1fr minmax(260px,38%)}}
.next__clip{position:relative;background:#000;overflow:hidden}
.next__clip img{width:100%;display:block}

/* ─── FEED ─────────────────────────────────────────────────────── */
.feed{background:var(--ink)}
.feed__grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:860px){.feed__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.feed__grid{grid-template-columns:repeat(2,1fr)}}
.tile{
  position:relative;background:#000;overflow:hidden;cursor:pointer;
  border:0;padding:0;display:block;width:100%;aspect-ratio:9/16;margin:0;
}
.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 12px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
  font:400 12px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--bone);text-align:left;
}
.tile__badge{
  position:absolute;top:10px;left:10px;z-index:3;
  background:rgba(8,8,10,.62);padding:5px 9px;
  display:flex;align-items:center;gap:6px;
  font:400 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
}
.tile__badge .rec::before{width:7px;height:7px}

/* ─── VIDEOS (YouTube lite) ────────────────────────────────────── */
.ytlite{position:relative;aspect-ratio:16/9;background:#000;border:0;padding:0;width:100%;cursor:pointer;overflow:hidden;display:block}
.ytlite img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .2s,transform .3s}
.ytlite:hover img{opacity:1;transform:scale(1.03)}
.ytlite__play{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none;
}
.ytlite__play span{
  width:66px;height:66px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.ytlite__play span::after{content:"";border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vid__cap{
  margin:12px 0 0;font:400 13px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);max-width:none;
}
.vid__cap span{color:var(--bone-dim);display:block;margin-top:3px;font-size:12px;letter-spacing:.1em}
.ytframe{position:relative;aspect-ratio:16/9;background:#000;width:100%}
.ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ─── STORY ────────────────────────────────────────────────────── */
.story{background:var(--ink-2);position:relative;overflow:hidden}
.story__grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){.story__grid{grid-template-columns:minmax(240px,38%) 1fr}}
.story__pic{position:relative}
.story__pic img{width:100%;display:block}
.pull{
  font:400 clamp(22px,3.2vw,34px)/1.25 var(--head);text-transform:uppercase;
  color:var(--bone);border-left:4px solid var(--red);padding-left:22px;margin:0 0 28px;max-width:24ch;
}

/* ─── SHOP / BOOK ──────────────────────────────────────────────── */
.shop{background:var(--ink)}
.shop__grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);background:rgba(239,234,226,.12)}
@media(max-width:760px){.shop__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.shop__grid{grid-template-columns:1fr}}
.card{background:var(--ink-2);padding:clamp(24px,3.4vw,34px)}
.card h3{margin:0 0 .3em}
.card .price{font:400 clamp(26px,3.4vw,36px)/1 var(--head);color:var(--acid);display:block;margin:0 0 .35em}
.card p{font-size:15px;color:var(--bone-dim);margin:0;max-width:none}

.book{background:var(--red);color:#fff}
.book h2{font:400 clamp(30px,5vw,58px)/.96 var(--head);text-transform:uppercase;margin:0 0 .2em}
.book p{color:rgba(255,255,255,.9);margin:0;max-width:46ch}
.book .btn{background:#fff;color:var(--ink);border-color:#fff}
.book .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.book .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.book .btn--ghost:hover{background:#fff;color:var(--red)}

/* ─── FOLLOW + FOOTER ──────────────────────────────────────────── */
.follow{background:var(--ink-2);border-top:var(--rule)}
.follow__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.follow__row a{
  font:400 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);border:1px solid rgba(239,234,226,.22);
  padding:14px 20px;transition:.15s;
}
.follow__row a:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

footer{background:var(--ink);border-top:var(--rule);padding-block:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer .osd{color:var(--bone-dim);font-size:12px}
.logo-foot{height:130px;width:auto}

/* ─── Motion ───────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* On a phone the sound toggle sat on top of the CTA row. Move it up into the
   camcorder chrome, under the timecode, where it can never collide. */
@media(max-width:640px){
  .hero__sound{top:62px;right:var(--gut);bottom:auto;width:48px;height:48px;font-size:9px}
  .hero__tag{letter-spacing:.2em}
}

/* ─── WATCH: size hierarchy, not a carousel ────────────────────── */
.vids__grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.vids__grid{grid-template-columns:1.95fr 1fr;gap:22px}}
.vids__side{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px) and (max-width:899px){.vids__side{grid-template-columns:1fr 1fr}}
.vid--lead .vid__cap{font-size:16px;margin-top:14px}
.vid--lead .ytlite__play span{width:86px;height:86px}
.vid--lead .ytlite__play span::after{border-left-width:25px;border-top-width:15px;border-bottom-width:15px}

/* ─── BOOK: a real form, so an enquiry lands on the account ────── */
.book__grid{display:grid;gap:clamp(28px,5vw,60px);grid-template-columns:1fr;align-items:start}
@media(min-width:880px){.book__grid{grid-template-columns:1fr 1fr}}
.book__call{margin-top:18px;font:400 13px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.book__call a{color:#fff;text-underline-offset:4px}
.book__form{display:grid;gap:14px}
.fld{display:grid;gap:6px}
.fld span{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.fld input,.fld select,.fld textarea{
  font:400 16px/1.4 var(--body);color:#fff;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.42);padding:13px 14px;width:100%;
  border-radius:0;appearance:none;
}
.fld textarea{resize:vertical;min-height:84px}
.fld select option{color:#111;background:#fff}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid #fff;outline-offset:2px;background:rgba(0,0,0,.42)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn--send{background:#fff;color:var(--ink);border-color:#fff;justify-self:start;cursor:pointer}
.btn--send:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--send:disabled{opacity:.6;cursor:progress}
.book__status{margin:0;min-height:1.3em;font:400 13px/1.5 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.9);max-width:none}
.book__status.is-good{color:#fff;font-weight:600}
.book__status.is-bad{color:#2A0407;background:var(--acid);display:inline-block;padding:6px 10px}