/* Outfit — self-hosted. Loading this from fonts.googleapis.com would mean a
   third party can see every visitor's IP and could, if compromised, serve
   different CSS. Google Fonts cannot be pinned with SRI, so the fix is to hold
   the files ourselves. One variable file covers weights 200-900. */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ══════════════════════════════════════════════════
   VAPOUR TRAIL RECORDS — futuristic · British Racing Green
   Archetype F: horizontal-scroll / panel
   ══════════════════════════════════════════════════ */

:root{
  --bg:#04110b;
  --bg2:#071b12;
  --panel:#0a2419;
  --racing:#0b3d29;      /* British Racing Green */
  --racing-deep:#052417;
  --green:#2fffa8;        /* phosphor accent */
  --green-dim:#17c07e;
  --ink:#eafff4;
  --muted:#9fc6b4;
  --faint:#6a8f7e;
  --line:rgba(47,255,168,.16);
  --line-soft:rgba(255,255,255,.07);
  --glass:rgba(9,34,24,.55);
  --wash:linear-gradient(180deg,rgba(4,17,11,.35),rgba(4,17,11,.82));
  --glow:0 0 30px rgba(47,255,168,.28);
  --maxw:1200px;
  /* Backgrounds are self-hosted: hotlinking meant every visitor's IP went to a
     third party, and the shop broke if that host did. Re-encoded through GD, so
     no EXIF and nothing riding along in the file. */
  --img-hero:url('/assets/img/img-hero.jpg');
  --img-crate1:url('/assets/img/img-crate2.jpg');
  --img-crate2:url('/assets/img/img-crate1.jpg');
  --img-crate3:url('/assets/img/img-crate3.jpg');
  --img-crate4:url('/assets/img/gear-accessories-436f2251.jpg');
  --img-tshirt:url('/assets/img/img-tshirt.jpg');
  --img-shop:url('/assets/img/img-shop.jpg');
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* futuristic film grain / scanline veil */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ── Type ── */
h1,h2,h3{line-height:1.04;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.7rem,7vw,5.4rem);font-weight:800}
h1 em{font-style:normal;font-weight:300;color:var(--green);text-shadow:var(--glow);display:block}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.eyebrow,.kicker{
  font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  color:var(--green);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:var(--glow)}
.kicker{color:var(--green-dim)}
.sec-lede,.lede{color:var(--muted);font-weight:300;font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:56ch}

/* ── Buttons ── */
.btn-solid,.btn-ghost{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;
  padding:.85em 1.5em;border-radius:100px;letter-spacing:.01em;cursor:pointer;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s;border:1px solid transparent;
}
.btn-solid{background:var(--green);color:#042014;box-shadow:var(--glow)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 42px rgba(47,255,168,.5)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}

/* ══ NAV ══ */
.nav{position:sticky;top:0;z-index:60;background:rgba(4,17,11,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);transition:background .3s}
.nav.scrolled{background:rgba(4,17,11,.92)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:.7rem clamp(20px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;background:none;border:0;cursor:pointer;color:var(--ink);padding:0}
.brand-logo{width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px var(--line),0 0 16px rgba(47,255,168,.32)}
/* ── Typographic wordmark logo ── */
.wordmark{display:inline-flex;flex-direction:column;line-height:1;text-align:left;min-width:0}
.wm-name{display:inline-flex;align-items:center;font-weight:800;font-size:clamp(1.02rem,2.1vw,1.36rem);
  letter-spacing:.01em;text-transform:uppercase;color:#fff;line-height:1.06;
  /* "Vapour Trail" is held together by an nbsp; "Records" may drop to a second
     line on a narrow phone, where three words on one line will not fit. */
  flex-wrap:wrap}
.wm-name .wm-trail{width:26px;height:2px;margin-left:.55em;border-radius:2px;flex:none;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
  box-shadow:0 0 10px rgba(255,255,255,.5);position:relative}
.wm-name .wm-trail::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.75)}
.wm-line{font-weight:600;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;
  color:#fff;margin-top:6px;padding-left:2px}
.brand:hover .wm-trail{width:34px;transition:width .3s}
.wm-name .wm-trail{transition:width .3s}
.nav-links{display:flex;align-items:center;gap:.4rem}
.nav-links a{padding:.5rem .85rem;font-weight:500;font-size:.95rem;color:var(--muted);border-radius:100px;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn-solid{color:#042014;margin-left:.4rem}
.nav-links a.btn-solid:hover{color:#042014}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--bg2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem}
.drawer[hidden]{display:none}
.drawer-x{position:absolute;top:20px;right:24px;background:none;border:0;color:var(--ink);font-size:2.6rem;line-height:1;cursor:pointer}
.drawer-links{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;padding:0 2rem}
.drawer-links a{font-size:1.5rem;font-weight:600;color:var(--ink);padding:.6rem}
.drawer-links a.btn-solid{color:#042014;margin-top:1rem;font-size:1.05rem}

/* ══ HERO ══ */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 80% at 85% -10%,rgba(11,61,41,.9),transparent 60%),
  radial-gradient(90% 60% at 0% 100%,rgba(47,255,168,.08),transparent 55%),
  var(--bg)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--img-hero) right center/cover no-repeat;opacity:.28;
  mask-image:linear-gradient(90deg,transparent 30%,#000 78%);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 78%)}
.hero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(120% 90% at 60% 20%,#000,transparent 75%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.hero-copy{max-width:640px}
.hero h1{margin:1.1rem 0 1.2rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.8rem 0 2.2rem}
.hero-facts{list-style:none;display:flex;gap:clamp(1rem,3vw,2.2rem);flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:1.4rem}
.hero-facts li{display:flex;flex-direction:column;gap:.15rem}
.hero-facts b{font-size:1.05rem;font-weight:700;color:var(--ink)}
.hero-facts span{font-size:.82rem;color:var(--faint);letter-spacing:.02em}

/* turntable */
.hero-visual{display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative}
.turntable{position:relative;width:min(100%,420px);aspect-ratio:1;display:grid;place-items:center}
/* real record: grooved black vinyl + swappable centre label */
.disc{width:100%;height:100%;border-radius:50%;position:relative;display:grid;place-items:center;
  background:
    /* groove rings */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 4px),
    /* run-out + edge shading */
    radial-gradient(circle at 50% 50%,
      #14100e 0 17%, #0d0d0c 17% 19%,
      #17181a 19% 84%, #0e0f10 84% 92%, #1a1c1e 92% 99%, #000 99%),
    #111413;
  box-shadow:0 0 0 1px var(--line),0 0 70px rgba(47,255,168,.3),0 20px 50px rgba(0,0,0,.55);
  animation:spin 9s linear infinite;
}
/* light sheen sweeping the vinyl — sits above grooves, below the label */
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.10) 24deg, rgba(255,255,255,0) 60deg,
    rgba(255,255,255,0) 180deg, rgba(47,255,168,.10) 208deg, rgba(255,255,255,0) 250deg,
    rgba(255,255,255,0) 360deg)}
.disc-label{position:absolute;width:36%;aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:2;
  box-shadow:0 0 0 1px rgba(0,0,0,.65),0 2px 14px rgba(0,0,0,.5)}
.disc-label .lbl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--zoom,1));opacity:0;transition:opacity .55s ease}
.disc-label .lbl.is-on{opacity:1}
.spindle{position:absolute;top:50%;left:50%;width:6.5%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3f42,#0a0b0b 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.7);z-index:3}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.disc{animation:none}}
.tonearm{position:absolute;top:6%;right:2%;width:44%;height:8px;border-radius:8px;transform-origin:right center;
  transform:rotate(24deg);background:linear-gradient(90deg,transparent,#9fc6b4 20%,#cfe8dd);z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,.5)}
.tonearm::after{content:"";position:absolute;left:0;top:-4px;width:16px;height:16px;border-radius:3px;background:#cfe8dd}
.visual-tag{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}

/* marquee */
.marquee{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(11,61,41,.25);overflow:hidden;padding:.8rem 0}
.marquee-in{display:flex;gap:1.4rem;white-space:nowrap;width:max-content;animation:slide 26s linear infinite}
.marquee-in span{font-size:.95rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.marquee-in i{color:var(--green);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══ CRATE (horizontal rail) ══ */
.crate{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,5vw,4rem);background:
  linear-gradient(180deg,var(--bg),var(--bg2))}
.crate-head{margin-bottom:2.4rem}
.crate-head h2{margin:.7rem 0 .8rem}
.rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem clamp(20px,5vw,48px) 1.5rem;scrollbar-width:thin;scrollbar-color:var(--green-dim) transparent;
  scroll-padding-left:clamp(20px,5vw,48px)}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--racing);border-radius:8px}
.rail::-webkit-scrollbar-track{background:transparent}
.card{scroll-snap-align:start;flex:0 0 clamp(240px,72vw,320px);border:1px solid var(--line-soft);
  border-radius:20px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s}
/* The four crate tiles are links into the filtered store. */
a.card{color:inherit;text-decoration:none;-webkit-user-drag:none;user-select:none}
a.card:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.card-go{display:inline-flex;align-items:center;gap:.45em;margin-top:.15rem;
  font-size:.82rem;font-weight:600;color:var(--green)}
/* the arrow is a pseudo-element so the label itself stays plain, editable text */
.card-go::after{content:"92";transition:transform .25s;display:inline-block}
a.card:hover .card-go::after,a.card:focus-visible .card-go::after{transform:translateX(4px)}
.card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 24px 50px rgba(0,0,0,.5),var(--glow)}
.card-art{aspect-ratio:4/3;position:relative;
  background:var(--wash),var(--art,var(--racing)) center/cover;background-blend-mode:multiply}
.card-art .rpm{position:absolute;top:12px;left:12px;font-size:.66rem;letter-spacing:.24em;font-weight:700;
  padding:.35em .8em;border-radius:100px;background:var(--green);color:#042014;box-shadow:var(--glow)}
.card-body{padding:1.3rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-body h3{font-size:1.35rem}
.card-body p{color:var(--muted);font-weight:300;font-size:.96rem}
.card-body .tag{margin-top:auto;align-self:flex-start;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--line);border-radius:100px;padding:.3em .8em}
.card-body .tag+.card-go{margin-top:.55rem}
.card--cta{background:linear-gradient(160deg,var(--racing),var(--racing-deep));justify-content:center}
.card--cta .card-body{gap:.8rem}
.card--cta h3{color:var(--ink)}
.card--cta p{color:var(--muted)}
.rail-hint{text-align:center;margin-top:.4rem}
.rail-hint span{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

/* ══ SHOP ══ */
.shop{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg2)}
.sec-head{max-width:60ch;margin-bottom:2.8rem}
.sec-head h2{margin:.7rem 0 .8rem}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.feat{border:1px solid var(--line-soft);border-radius:18px;padding:1.6rem 1.5rem 1.8rem;background:
  linear-gradient(180deg,rgba(11,61,41,.28),transparent);position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.feat::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--green);opacity:0;transition:opacity .3s}
.feat:hover{transform:translateY(-4px);border-color:var(--line)}
.feat:hover::before{opacity:1}
.feat-no{font-size:.78rem;font-weight:700;letter-spacing:.2em;color:var(--green);opacity:.7}
.feat h3{font-size:1.28rem;margin:.6rem 0 .5rem}
.feat p{color:var(--muted);font-weight:300;font-size:.95rem}

/* ══ TEES ══ */
.tees{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg)}
.tees-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.tees-media{border-radius:22px;aspect-ratio:4/5;min-height:320px;position:relative;
  background:var(--wash),var(--art,var(--racing)) center/cover;background-blend-mode:multiply;
  border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.tees-copy h2{margin:.7rem 0 .9rem}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.4rem 0 1.8rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--muted);font-weight:400}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:var(--glow)}

/* ══ STORY ══ */
.story{padding:clamp(4rem,8vw,7rem) 0;background:
  linear-gradient(180deg,var(--bg),var(--bg2))}
.story-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.story-copy h2{margin:.7rem 0 1.1rem}
.story-copy p{color:var(--muted);font-weight:300;margin-bottom:1rem;max-width:52ch}
.story-stats{display:flex;gap:clamp(1.2rem,3vw,2.4rem);flex-wrap:wrap;margin-top:1.8rem;border-top:1px solid var(--line-soft);padding-top:1.5rem}
.story-stats b{display:block;font-size:1.5rem;font-weight:700;color:var(--green)}
.story-stats span{font-size:.85rem;color:var(--faint)}
.story-media{border-radius:22px;min-height:380px;position:relative;
  background:var(--wash),var(--art,var(--racing)) center/cover;background-blend-mode:multiply;
  border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.media-badge{position:absolute;left:16px;bottom:16px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(4,17,11,.7);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--ink);padding:.5em .9em;border-radius:100px}

/* ══ VISIT ══ */
.visit{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg2)}
.visit-in{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.visit-copy h2{margin:.7rem 0 .9rem}
.contact-list{list-style:none;margin:1.6rem 0 1.2rem;display:flex;flex-direction:column;gap:1rem}
.contact-list li{display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:baseline;
  border-bottom:1px solid var(--line-soft);padding-bottom:1rem}
.contact-list .ci{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-dim)}
.contact-list .cv{color:var(--ink);font-weight:400}
.contact-list .cv a:hover{color:var(--green)}
.contact-list em{color:var(--faint);font-size:.78rem;font-style:normal;letter-spacing:.04em}
.flag{margin-top:1rem;font-size:.85rem;color:var(--muted);background:rgba(11,61,41,.35);
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:.9rem 1.1rem}

.visit-form{background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;
  padding:1.8rem;display:flex;flex-direction:column;gap:.9rem}
.visit-form h3{font-size:1.35rem;margin-bottom:.3rem}
.visit-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;color:var(--muted);font-weight:500}
.visit-form input,.visit-form select,.visit-form textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);background:rgba(4,17,11,.6);
  border:1px solid var(--line-soft);border-radius:10px;padding:.75rem .9rem;transition:border-color .2s}
.visit-form input:focus,.visit-form select:focus,.visit-form textarea:focus{outline:none;border-color:var(--green)}
.visit-form textarea{resize:vertical}
.visit-form option{background:var(--bg2)}
.visit-form .btn-solid{justify-content:center;margin-top:.4rem}
.form-note{font-size:.76rem;color:var(--faint);text-align:center}

/* ══ FOOTER ══ */
.foot{background:var(--bg);border-top:1px solid var(--line-soft);padding:3rem 0 2rem}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.8rem;border-bottom:1px solid var(--line-soft)}
.foot-brand{display:flex;align-items:center;gap:.7rem}
.wordmark--foot~.brand-logo,.foot-brand .brand-logo{width:44px;height:44px}
.wordmark--foot .wm-name{font-size:1.16rem}
.wordmark--foot .wm-line{color:var(--faint);letter-spacing:.28em;font-size:.6rem;margin-top:7px}
.foot-links{display:flex;gap:1.3rem;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.92rem;font-weight:500}
.foot-links a:hover{color:var(--green)}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.6rem}
.foot-base span{font-size:.82rem;color:var(--faint)}
.powered a{color:var(--green);font-weight:600}
.powered a:hover{text-shadow:var(--glow)}

/* ══ FAB ══ */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:.55rem;
  background:var(--green);color:#042014;font-weight:700;font-size:.92rem;padding:.7rem 1.1rem .7rem .75rem;
  border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.4),var(--glow);transition:transform .25s}
.fab:hover{transform:translateY(-3px) scale(1.03)}
.fab-disc{width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,#042014 0 22%,var(--green) 23% 38%,#042014 39% 58%,var(--green) 59%)}

/* ══ REVEAL ══ */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ══ NAV CLUSTER + BAG ══ */
.nav-cluster{display:flex;align-items:center;gap:.6rem}
.bag-btn{position:relative;display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft);color:var(--ink);border-radius:100px;padding:.5rem .75rem;cursor:pointer;transition:border-color .2s,color .2s}
.bag-btn:hover{border-color:var(--green);color:var(--green)}
.bag-count{min-width:18px;height:18px;padding:0 5px;border-radius:100px;background:var(--faint);color:#04110b;
  font-size:.7rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.bag-count.has{background:var(--green);color:#042014;box-shadow:var(--glow)}

/* ══ STORE ══ */
.store{padding:clamp(4rem,8vw,7rem) 0;background:linear-gradient(180deg,var(--bg2),var(--bg))}
/* the crate tiles link here, so leave room for the sticky header */
#store{scroll-margin-top:clamp(72px,11vh,116px)}
.store-filter{display:flex;gap:.5rem;margin:0 0 2rem;flex-wrap:wrap;align-items:center}
/* divides "what it is" chips from "which crate section" chips */
.chip-sep{width:1px;align-self:stretch;min-height:1.9rem;background:var(--line);margin:0 .35rem}
.chip{background:rgba(255,255,255,.03);border:1px solid var(--line-soft);color:var(--muted);
  border-radius:100px;padding:.5rem 1.1rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:.2s}
.chip:hover{color:var(--ink);border-color:var(--line)}
.chip.is-active{background:var(--green);color:#042014;border-color:var(--green);box-shadow:var(--glow)}
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.prod{border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.prod:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:0 22px 46px rgba(0,0,0,.5)}
.prod-media{aspect-ratio:1;position:relative;background:var(--wash),var(--pimg,var(--racing));
  background-size:cover;background-position:center;background-blend-mode:multiply}
.prod-badge{position:absolute;top:12px;left:12px;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:.3em .7em;border-radius:100px;background:rgba(4,17,11,.72);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--green)}
.prod-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.prod-artist{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--green)}
.prod-name{font-size:1.1rem;font-weight:700;line-height:1.25}
.prod-meta{font-size:.82rem;color:var(--faint)}
/* Three lines is enough to sell a record; the rest is on the sleeve. */
.prod-desc{font-size:.84rem;line-height:1.5;color:var(--muted);margin-top:.15rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod-buy{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.prod-price{font-size:1.15rem;font-weight:800;color:var(--green)}
.prod-add{background:rgba(47,255,168,.1);border:1px solid var(--green);color:var(--green);border-radius:100px;
  padding:.5rem .95rem;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.prod-add:hover,.prod-add.added{background:var(--green);color:#042014}
.store-flag{margin-top:1.6rem;font-size:.82rem;color:var(--muted);background:rgba(11,61,41,.35);
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:.8rem 1.1rem}
/* Artwork / cut-out products: show the whole image on a lit plinth instead of
   cropping it and multiplying a dark wash over it — a label or logo on white
   turns to mud under the photographic treatment above. */
.prod-media--fit{
  background-image:var(--pimg),radial-gradient(circle at 50% 46%,rgba(47,255,168,.13),rgba(4,17,11,0) 64%);
  background-size:78%,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  background-blend-mode:normal,normal;
  background-color:#071b12;
}
.bi-img--fit{background-size:86%;background-repeat:no-repeat;background-color:#071b12}
/* live-catalogue states */
.store-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:2.4rem 1rem;
  border:1px dashed var(--line-soft);border-radius:16px}
.store-empty a{color:var(--green);text-decoration:underline}
.prod.is-sold{opacity:.72}
.prod-sold{position:absolute;inset:auto 12px 12px auto;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;padding:.32em .7em;border-radius:100px;background:rgba(4,17,11,.82);border:1px solid rgba(255,255,255,.22);color:#ffd7d7}
.prod-add:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line-soft);color:var(--muted);background:transparent}
.prod-add:disabled:hover{background:transparent;color:var(--muted)}

/* ══ BASKET ══ */
.basket{position:fixed;inset:0;z-index:90}
.basket[hidden]{display:none}
.basket-backdrop{position:absolute;inset:0;background:rgba(2,10,7,.62);backdrop-filter:blur(3px)}
.basket-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--bg2);
  border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.55);animation:slidein .3s ease}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.basket-top{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.4rem;border-bottom:1px solid var(--line-soft)}
.basket-top h3{font-size:1.25rem}
.basket-n{font-size:.78rem;color:var(--faint);font-weight:500}
.basket-x{background:none;border:0;color:var(--ink);font-size:2rem;line-height:1;cursor:pointer}
.basket-items{flex:1;overflow-y:auto;padding:1.1rem 1.4rem;display:flex;flex-direction:column;gap:1rem}
.bi{display:grid;grid-template-columns:60px 1fr auto;gap:.9rem;align-items:start;border-bottom:1px solid var(--line-soft);padding-bottom:1rem}
.bi-img{width:60px;height:60px;border-radius:10px;background:var(--racing) center/cover;border:1px solid var(--line-soft)}
.bi-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.bi-name{font-weight:600;font-size:.95rem;line-height:1.25}
.bi-price{font-size:.8rem;color:var(--faint)}
.bi-qty{display:flex;align-items:center;gap:.45rem;margin-top:.35rem}
.qbtn{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--ink);font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.qbtn:hover{border-color:var(--green);color:var(--green)}
.qn{min-width:18px;text-align:center;font-weight:700}
.bi-remove{background:none;border:0;color:var(--faint);font-size:.76rem;cursor:pointer;text-decoration:underline;margin-left:.4rem}
.bi-remove:hover{color:var(--green)}
.bi-line{font-weight:700;white-space:nowrap}
.basket-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--muted);padding:2rem;text-align:center}
.basket-foot{padding:1.3rem 1.4rem;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.9rem}
.basket-ship{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;color:var(--muted);
  padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)}
.basket-ship b{color:var(--ink);font-weight:600}
.basket-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem}
.basket-sub b{font-size:1.35rem;color:var(--green)}
.basket-checkout{justify-content:center}
.basket-note{font-size:.73rem;color:var(--faint);text-align:center}
.basket-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:2rem}
.basket-tick{width:56px;height:56px;border-radius:50%;background:var(--green);color:#042014;font-size:1.8rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--glow)}
.basket-tick--info{background:var(--faint);color:#04110b;box-shadow:none;font-style:italic;font-family:Georgia,serif}
.basket-tick--err{background:#e0563f;color:#fff;box-shadow:none}
.basket-done h4{font-size:1.2rem}
.basket-done p{color:var(--muted);font-size:.9rem}

/* ══ RESPONSIVE ══ */
/* Honeypot — hidden from people and from assistive tech, but a real field in
   the DOM so a bot fills it in. Never display:none on the input alone; some
   bots skip those. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Contact form outcome */
.form-result{background:rgba(11,61,41,.5);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:14px;padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.4rem}
.form-result b{color:var(--green);font-size:1.1rem}
.form-result p{color:var(--muted);font-size:.92rem}
.form-result--err{border-left-color:#ff6b6b}
.form-result--err b{color:#ff6b6b}

@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-in{grid-template-columns:1fr;gap:2.4rem}
  .hero-copy{order:0;max-width:none}
  .hero-visual{order:1}
  .turntable{width:min(100%,340px)}
  .feat-grid{grid-template-columns:1fr 1fr}
  .store-grid{grid-template-columns:1fr 1fr}
  .tees-in,.story-in,.visit-in{grid-template-columns:1fr}
  .story-media{min-height:280px;order:-1}
  .tees-media{aspect-ratio:16/10;min-height:240px}
  .visit-form{order:2}
}
@media (max-width:560px){
  .brand-logo{width:64px;height:64px}
  .wm-name{font-size:.9rem}
  .wm-line{letter-spacing:.28em;font-size:.6rem;margin-top:4px}
  /* phones: drop the decorative trail so the bigger logo still fits the bar */
  .wm-name .wm-trail{display:none}
  .feat-grid{grid-template-columns:1fr}
  .store-grid{grid-template-columns:1fr}
  .ticks{grid-template-columns:1fr}
  .foot-in,.foot-base{flex-direction:column;align-items:flex-start}
  .hero-facts{gap:1.1rem}
  .fab span{display:none}
  .fab{padding:.7rem;gap:0}
}

@media (max-width:420px){
  .brand{gap:.55rem}
  .brand-logo{width:52px;height:52px}
  .wm-name{font-size:.92rem}
  .wm-line{font-size:.58rem;letter-spacing:.2em}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Shop search in the nav (client request, 2026-09-29) ----------------
   Pill + phosphor focus ring to match .btn-solid and the nav links. The same
   markup is used in the header and in the mobile drawer; the .drawer-links
   overrides below let it go full width there. Above 900px the drawer is
   hidden and below it .nav-links is hidden, so only one is ever visible. */
.nav-search{display:flex;align-items:center;gap:.45rem;margin:0 .15rem;padding:.34rem .7rem;
  background:rgba(4,17,11,.55);border:1px solid var(--line);border-radius:100px;
  transition:border-color .2s,box-shadow .2s,background .2s}
.nav-search:focus-within{border-color:var(--green);box-shadow:var(--glow);background:rgba(4,17,11,.85)}
.nav-search-ico{width:15px;height:15px;flex:none;fill:none;stroke:var(--faint);stroke-width:2;
  stroke-linecap:round;transition:stroke .2s}
.nav-search:focus-within .nav-search-ico{stroke:var(--green)}
.nav-search input{width:8.5rem;min-width:0;background:none;border:0;outline:none;padding:0;
  color:var(--ink);font:inherit;font-size:.9rem;transition:width .25s ease}
.nav-search input::placeholder{color:var(--faint)}
.nav-search:focus-within input{width:11.5rem}
.nav-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
  width:13px;height:13px;cursor:pointer;background:var(--faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
.nav-search input::-webkit-search-cancel-button:hover{background:var(--green)}

/* full width inside the mobile drawer, matching the big stacked links */
.drawer-links .nav-search{width:100%;max-width:22rem;margin:.7rem auto;padding:.7rem 1.05rem}
.drawer-links .nav-search input,
.drawer-links .nav-search:focus-within input{width:100%;font-size:1.05rem}
.drawer-links .nav-search-ico{width:18px;height:18px}

/* Nav links never wrap. */
.nav-links a,.nav-links a.btn-solid{white-space:nowrap}

/* Search strip BELOW the banner (moved out of the header 2026-10-01). Full width,
   so it can no longer squeeze the nav or shove the left-hand links out of place. */
.search-band{border-bottom:1px solid var(--line-soft);background:rgba(4,17,11,.72);backdrop-filter:blur(8px)}
.search-band-in{max-width:var(--maxw);margin:0 auto;padding:.7rem 1.4rem;display:flex;justify-content:center}
.search-band .nav-search{width:100%;max-width:33rem;margin:0;padding:.5rem .95rem}
.search-band .nav-search input,
.search-band .nav-search:focus-within input{width:100%;font-size:.95rem}
@media (max-width:760px){
  .search-band-in{padding:.6rem 1rem}
  .search-band .nav-search{padding:.5rem .85rem}
}