/* Golf Cart Hoodies main site. Same palette and type as the booking site, Hoodies HQ and the Hoodie Hopper. */
:root{
  --paper:#EEE9DE; --sheet:#F6F2E9; --panel:#E4DDCC; --khaki:#C9C3B1; --sage:#6C7356; --army:#3F4A1E; --ink:#1F2421;
  --muted:#5A604B; --rule:#1F2421; --army-text:#3F4A1E; --warn:#9A3B1B; --lime:#A7B24A;
  --night:#121510; --night-2:#1B1F17; --night-ink:#EEE9DE; --night-muted:#B3B795;
  --accent:#A7B24A; --accent-2:#737D35;               /* holiday.js swaps these */
  --metal-fill:linear-gradient(180deg,#B9BE9E 0%,#7E8566 6%,#56602E 18%,#46521F 34%,#3F4A1E 48%,#2A3313 56%,#36401A 68%,#4E5A26 86%,#8A9070 97%,#A9AE90 100%);
  --brushed:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 46%);
  --display:"Oswald","Arial Narrow",Impact,sans-serif; --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --label:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  --paper-tex: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .14 0 0 0 0 .13 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow:5px 5px 0 var(--rule);
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1F2421; --sheet:#262C28; --panel:#2E3530; --khaki:#48514A; --ink:#EEE9DE; --muted:#B3AE9E; --rule:#C9C3B1;
  --army-text:#B3B795; --warn:#F08A6B; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1F2421; --sheet:#262C28; --panel:#2E3530; --khaki:#48514A; --ink:#EEE9DE; --muted:#B3AE9E; --rule:#C9C3B1;
  --army-text:#B3B795; --warn:#F08A6B; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + var(--nh,0px))}
body{margin:0;background:var(--paper);background-image:var(--paper-tex);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--army);color:#EEE9DE}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--army);color:#EEE9DE;padding:10px 14px;border-radius:6px;font-weight:600}
.skip:focus{top:12px}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:.95;margin:0}
.eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.95rem;color:var(--army-text);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:32px;height:2px;background:currentColor}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:60ch}
.h-sec{font-size:clamp(2.4rem,6vw,4.6rem);margin:.18em 0 .3em}
.h-sec em{font-style:normal;color:var(--army-text)}

/* Angled section tab, like the price list */
.tab{display:inline-flex;align-items:stretch;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:1rem;line-height:1}
.tab b{background:var(--brushed),var(--metal-fill);color:#EEE9DE;padding:9px 18px 9px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);font-weight:600}
.tab span{background:var(--ink);color:var(--paper);padding:9px 16px 9px 22px;margin-left:-12px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;display:flex;align-items:center}

/* ---------- Buttons ---------- */
.btn{--b:var(--rule);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;text-decoration:none;border:2px solid var(--b);border-radius:8px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;background:var(--sheet);color:var(--ink);box-shadow:4px 4px 0 var(--b)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--b)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--b)}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--brushed),var(--metal-fill);color:#EEE9DE;border-color:#1A1F0B}
.btn.glow{background:var(--accent);color:#141810;border-color:#141810;box-shadow:4px 4px 0 #141810,0 0 32px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn.ghost-night{background:transparent;color:#EEE9DE;border-color:#EEE9DE;box-shadow:4px 4px 0 rgba(238,233,222,.35)}
.btn.small{min-height:40px;padding:0 14px;font-size:.9rem;box-shadow:3px 3px 0 var(--b)}

/* ---------- Notice bar (away, market, holiday greeting) ---------- */
.notice{position:sticky;top:0;z-index:51;background:var(--ink);color:var(--paper);font-size:1.05rem}
.notice[hidden]{display:none}
.notice .wrap{display:flex;gap:10px 22px;align-items:center;justify-content:center;flex-wrap:wrap;padding-block:9px;text-align:center}
.notice .n{display:inline-flex;gap:4px 8px;align-items:center;justify-content:center;flex-wrap:wrap}
.notice b{white-space:nowrap;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--accent)}
.notice .n.away b{color:#F4A07F}
.notice svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notice a{color:inherit;text-underline-offset:3px}
:root[data-theme="dark"] .notice{background:#0E100C;color:#EEE9DE}
/* Real notices (away, announcement, market): a bright bar in the site's accent color, and the icons nudge a few times */
.notice.alert,:root[data-theme="dark"] .notice.alert{background:var(--accent);color:#141810;border-bottom:2px solid #141810}
.notice.alert b,.notice.alert .n.away b,.notice.alert .n.news b{color:#141810}
.notice.alert a{color:#141810;font-weight:700}
.notice.alert svg{animation:nudge 1.4s ease-in-out 1s 3;transform-origin:50% 60%}
.notice.alert.seen svg{animation:none}
@keyframes nudge{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.15)}40%{transform:rotate(12deg) scale(1.15)}60%{transform:none}}
@media (prefers-reduced-motion:reduce){.notice.alert svg{animation:none}}
/* Phones: the bar stays pinned, so keep it compact */
@media (max-width:560px){.notice{font-size:1rem}.notice .wrap{padding-block:6px;gap:4px 16px}.notice .n{gap:0 6px;line-height:1.3}.notice b{white-space:normal}.notice svg{width:17px;height:17px}}

/* ---------- Header ---------- */
.top{position:sticky;top:var(--nh,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--rule)}
.brand b{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:1.35rem;letter-spacing:.05em;line-height:1}
.brand small{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--muted);margin-top:4px;font-weight:600}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-weight:500;font-size:.98rem;text-decoration:none;padding:8px 12px;border-radius:6px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--panel)}
.nav .btn{margin-left:8px}
.theme{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);cursor:pointer}
.theme svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu{display:none;width:46px;height:46px;border:2px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);cursor:pointer;place-items:center}
.menu svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (max-width:980px){
  .menu{display:grid}
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);background-image:var(--paper-tex);border-bottom:2px solid var(--rule);padding:10px var(--gut) 20px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:.18s ease}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a{padding:14px 6px;border-bottom:1px solid var(--khaki);font-size:1.15rem;border-radius:0}
  .nav .btn{margin:16px 0 0;justify-content:center;border-radius:8px;border-bottom:2px solid var(--b)}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:radial-gradient(120% 90% at 78% 40%,#2A3313 0%,var(--night-2) 42%,var(--night) 78%);color:var(--night-ink);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--paper-tex);opacity:.5;z-index:-1}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:10px;background:var(--brushed),var(--metal-fill);border-top:2px solid #0B0D09}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(48px,8vw,104px) clamp(64px,9vw,120px)}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(3.2rem,8.6vw,7.4rem);font-weight:700;line-height:.86;margin:.22em 0 .26em;letter-spacing:-.005em}
.hero h1 .lit{color:var(--accent);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 60%,transparent),0 0 2px color-mix(in srgb,var(--accent) 80%,transparent)}
.hero h1 .out{-webkit-text-stroke:2px var(--night-ink);color:transparent}
.hero .lede{color:#CFCBBE;max-width:52ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600;color:var(--night-muted)}
.hero .facts li{display:flex;align-items:center;gap:8px}
.hero .facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* The hood: a lit disc that swaps designs, with headlight beams like the logo */
.stage{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.beams{position:absolute;inset:0;pointer-events:none}
.beams path{fill:var(--accent);opacity:.9;filter:drop-shadow(0 0 10px var(--accent))}
.disc{--glow:#A7B24A;position:absolute;left:8%;top:8%;width:72%;height:0;padding:0 0 72%;box-sizing:content-box;border-radius:50%;background:conic-gradient(from 200deg,#0D0F0B,#3B3F38,#0D0F0B 30%,#55594F 52%,#0D0F0B 70%,#2D3029 88%,#0D0F0B);box-shadow:0 0 0 6px #0B0D09,0 0 0 10px var(--accent-2),0 30px 60px rgba(0,0,0,.6),0 0 90px 10px color-mix(in srgb,var(--glow) 55%,transparent);transition:box-shadow .8s ease}
/* Square by padding-bottom rather than aspect-ratio: some phone browsers drew the disc as an oval */
.disc .face{position:absolute;inset:4.44%;border-radius:50%;overflow:hidden;background:#000}
.disc img{position:absolute;inset:-14%;width:128%;height:128%;max-width:none;object-fit:cover;opacity:0;transform:rotate(-30deg) scale(.92);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.disc img.on{opacity:1;transform:none}
.disc .shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(60% 45% at 32% 24%,rgba(255,255,255,.28),rgba(255,255,255,0) 60%);pointer-events:none}
.stage .tag{position:absolute;right:2%;bottom:14%;z-index:2;background:var(--paper);color:var(--ink);border:2px solid #0B0D09;box-shadow:4px 4px 0 #0B0D09;border-radius:8px;padding:10px 14px;display:grid;gap:2px;transform:rotate(-3deg);min-width:180px}
.stage .tag small{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:600;color:var(--muted)}
.stage .tag b{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:1.15rem;line-height:1.1}
.stage .swap{position:absolute;left:0;bottom:2%;display:flex;gap:8px}
.stage .swap button{width:46px;height:46px;border-radius:50%;border:2px solid #EEE9DE;background:rgba(0,0,0,.35);color:#EEE9DE;display:grid;place-items:center;cursor:pointer}
.stage .swap button:hover{background:var(--accent);color:#141810;border-color:var(--accent)}
.stage .swap svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .stage{max-width:400px;order:-1;margin-top:-10px}
}

/* ---------- Ticker ---------- */
.ticker{background:var(--brushed),var(--metal-fill);color:#EEE9DE;border-bottom:2px solid var(--rule);overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-flex;gap:34px;padding:14px 0;animation:tick 48s linear infinite;font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.08em;font-size:1.15rem}
.ticker .run span{display:inline-flex;align-items:center;gap:34px}
.ticker .run span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section.s{padding-block:clamp(64px,9vw,120px);position:relative}
section.s.tint{background:var(--panel);background-image:var(--paper-tex);border-block:2px solid var(--rule)}
section.s.night{background:var(--night);background-image:var(--paper-tex);color:var(--night-ink)}
section.s.night .eyebrow{color:var(--accent)}
section.s.night .lede{color:#CFCBBE}
section.s.night .h-sec em{color:var(--accent)}
.head{display:grid;gap:6px;margin-bottom:clamp(28px,4vw,48px)}

/* What is a Hoodie: numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:st}
.step{background:var(--sheet);border:2px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);padding:26px 24px 24px;display:grid;gap:10px;align-content:start;position:relative}
.step::before{counter-increment:st;content:"0" counter(st);font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--ink)}
.step h3{font-size:1.6rem}
.step p{margin:0;color:var(--muted)}
.specs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:36px}
.spec{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--rule);border-radius:999px;padding:8px 16px 8px 10px;background:var(--sheet);font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.spec svg{width:24px;height:24px;stroke:var(--army-text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* Meet Richard */
.meet{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.badge{position:relative;aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.badge img{width:100%;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--rule),10px 10px 0 var(--rule)}
.badge .jack{position:absolute;right:-4%;bottom:6%;background:var(--accent);color:#141810;border:2px solid #141810;border-radius:8px;padding:10px 14px;transform:rotate(4deg);box-shadow:4px 4px 0 #141810;font-family:var(--display);text-transform:uppercase;font-weight:600;line-height:1.1;font-size:1rem}
.badge .jack small{display:block;font-family:var(--label);letter-spacing:.1em;font-size:.68rem}
.quote{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.05;margin:.3em 0 .5em}
.quote em{font-style:normal;color:var(--army-text)}
.meet p{max-width:58ch}
.sig{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:18px;display:flex;align-items:center;gap:12px}
.sig::before{content:"";width:40px;height:2px;background:var(--ink)}
@media (max-width:860px){.meet{grid-template-columns:1fr}.badge{max-width:300px}}

/* Gallery teaser: category tiles */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:700px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat{--glow:#A7B24A;display:grid;gap:12px;justify-items:center;text-decoration:none;color:inherit;padding:18px 10px 16px;border-radius:12px;transition:background .2s ease}
.cat .d{width:100%;max-width:150px;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 0 0 4px #0B0D09,0 0 0 7px var(--accent-2),0 0 36px 2px color-mix(in srgb,var(--glow) 45%,transparent);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.cat .d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}  /* img/vibe covers already fill the circle (tools/vibes.py) */
.cat b{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.05em;font-size:1.05rem;text-align:center;line-height:1.1}
.cat small{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--night-muted);margin-top:-8px}
.cat:hover{background:rgba(238,233,222,.06)}
.cat:hover .d{transform:rotate(-8deg) scale(1.05);box-shadow:0 0 0 4px #0B0D09,0 0 0 7px var(--accent),0 0 60px 10px color-mix(in srgb,var(--glow) 70%,transparent)}
.more{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Carts */
.carts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.brands{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;padding:0;list-style:none}
.brands li{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:1.15rem;border:2px solid var(--rule);border-radius:6px;padding:6px 12px;background:var(--sheet)}
.brands li.ask{border-style:dashed;background:transparent;color:var(--muted)}
.where{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.where li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.where i{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--brushed),var(--metal-fill);border:2px solid #1A1F0B}
.where svg{width:22px;height:22px;stroke:#EEE9DE;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.where b{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:1.1rem}
.where span{color:var(--muted);font-size:.98rem}
.collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:84px;gap:12px}
.collage figure{margin:0;border:2px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);position:relative;background:#000}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figcaption{position:absolute;left:8px;bottom:8px;background:var(--paper);color:var(--ink);font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.7rem;padding:3px 8px;border-radius:4px;border:1.5px solid var(--rule)}
.collage .a{grid-column:1/4;grid-row:span 4}
.collage .b{grid-column:4/7;grid-row:span 3}
.collage .c{grid-column:4/7;grid-row:span 3}
.collage .d{grid-column:1/4;grid-row:span 2}
@media (max-width:860px){.carts{grid-template-columns:1fr}}

/* Products */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.prod{background:var(--sheet);border:2px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.prod:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--rule)}
.prod .ph{aspect-ratio:4/3;background:#000;border-bottom:2px solid var(--rule);overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .bd{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.prod h3{font-size:1.45rem}
.prod p{margin:0;color:var(--muted);font-size:.95rem}
.prod .from{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.78rem;color:var(--muted);margin-top:4px}
.prod .from b{font-family:var(--display);font-size:1.6rem;letter-spacing:0;color:var(--army-text);margin-left:4px}
@media (max-width:980px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.prods{grid-template-columns:1fr}}

/* Find me */
.find{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center}
.ticket{background:var(--sheet);color:var(--ink);border:2px solid #0B0D09;border-radius:12px;box-shadow:8px 8px 0 #0B0D09;overflow:hidden}
.ticket .tt{background:var(--brushed),var(--metal-fill);color:#EEE9DE;padding:14px 20px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.06em}
.ticket .tt small{font-family:var(--label);letter-spacing:.12em;font-size:.72rem;opacity:.85}
.ticket .tb{padding:22px 20px 20px;display:grid;gap:14px}
.ticket .big{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:clamp(2rem,4vw,2.8rem);line-height:.95}
.ticket .status{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:8px 12px;border-radius:6px;border:2px solid var(--rule);justify-self:start}
.ticket .status::before{content:"";width:10px;height:10px;border-radius:50%;background:#3F8A2A;box-shadow:0 0 0 3px rgba(63,138,42,.25)}
.ticket .status.off{color:var(--warn);border-color:var(--warn)}
.ticket .status.off::before{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
.ticket dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.98rem}
.ticket dt{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.75rem;color:var(--muted);padding-top:3px}
.ticket dd{margin:0}
.perf{border-top:2px dashed var(--khaki);margin:0 -20px;padding:14px 20px 0;font-size:.92rem;color:var(--muted)}
@media (max-width:860px){.find{grid-template-columns:1fr}}

/* Hoodie Groove player */
.groove{display:grid;grid-template-columns:auto 1fr;gap:20px 28px;align-items:center;background:var(--sheet);border:2px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:clamp(18px,3vw,28px)}
.vinyl{width:clamp(110px,16vw,160px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#161814 0 2px,#22251F 2px 4px);display:grid;place-items:center;box-shadow:0 0 0 3px var(--rule);position:relative}
.vinyl img{width:44%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;background:#fff}
.vinyl.spin{animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.groove h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.groove .now{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.78rem;color:var(--muted);margin:6px 0 12px}
.groove .now b{color:var(--ink);font-family:var(--body);text-transform:none;letter-spacing:0;font-size:1rem;margin-left:6px}
.pctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pctrl button{width:48px;height:48px;border-radius:50%;border:2px solid var(--rule);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.pctrl button.play{width:58px;height:58px;background:var(--brushed),var(--metal-fill);color:#EEE9DE;border-color:#1A1F0B}
.pctrl svg{width:22px;height:22px;fill:currentColor}
.pbar{flex:1;min-width:140px;height:10px;border-radius:999px;background:var(--panel);border:1.5px solid var(--rule);cursor:pointer;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--army)}
:root[data-theme="dark"] .pbar i{background:var(--lime)}
.credit{font-size:.8rem;color:var(--muted);margin-top:10px}
@media (max-width:560px){.groove{grid-template-columns:1fr;justify-items:start}}

/* Gift + contact */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{background:var(--sheet);border:2px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:clamp(22px,3vw,34px);display:grid;gap:12px;align-content:start}
.card h3{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.card p{margin:0;color:var(--muted)}
.card.gift{background:var(--brushed),var(--metal-fill);color:#EEE9DE;border-color:#1A1F0B}
.card.gift p{color:#DAD6C6}
.card.gift .btn{justify-self:start;margin-top:8px}
.contact{display:grid;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.contact a{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:1.05rem}
.contact a span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.contact i{width:40px;height:40px;border-radius:50%;border:2px solid var(--rule);display:grid;place-items:center;flex:none}
.contact svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* Big closing call to action */
.closer{background:var(--night);background-image:var(--paper-tex);color:var(--night-ink);text-align:center;padding-block:clamp(70px,10vw,130px);position:relative;overflow:hidden;isolation:isolate}
.closer::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);z-index:-1}
.closer h2{font-size:clamp(2.8rem,8vw,6.6rem);font-weight:700;line-height:.88}
.closer h2 span{color:var(--accent)}
.closer p{color:#CFCBBE;margin:18px auto 30px;max-width:52ch}
.closer .ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Footer ---------- */
.foot{background:#0B0D09;color:#C9C3B1;padding-block:44px 30px;font-size:.92rem;border-top:10px solid transparent;border-image:var(--metal-fill) 1}
.foot .wrap{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:30px}
.foot b{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#EEE9DE;display:block;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:#C9C3B1;text-decoration:none}
.foot a:hover{color:#EEE9DE;text-decoration:underline}
.foot .fb{display:flex;gap:14px;align-items:center}
.foot .fb img{width:64px;height:64px;border-radius:50%;background:#fff}
.foot .legal{grid-column:1/-1;border-top:1px solid #2E3530;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:#8C8A7E;font-size:.82rem}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .fb{grid-column:1/-1}}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Holiday touches (holiday.js sets data-holiday on <html>) ---------- */
.hol-mark{display:none}
[data-holiday] .hol-mark{display:inline-block;width:22px;height:22px;margin-left:-4px}

/* ---------- Inner page header ---------- */
.ph-hero{background:var(--night);background-image:var(--paper-tex);color:var(--night-ink);padding-block:clamp(48px,7vw,90px) clamp(40px,6vw,70px);position:relative;overflow:hidden;isolation:isolate}
.ph-hero::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 62%);z-index:-1}
.ph-hero .eyebrow{color:var(--accent)}
.ph-hero h1{font-size:clamp(3rem,8vw,6.4rem);font-weight:700;line-height:.88;margin:.2em 0 .25em}
.ph-hero h1 span{color:var(--accent)}
.ph-hero .lede{color:#CFCBBE}
.ph-hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}

/* ---------- Price list ---------- */
.rules{display:grid;gap:10px;background:var(--sheet);border:2px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:clamp(36px,5vw,56px)}
.rules p{margin:0;display:flex;gap:12px;align-items:flex-start}
.rules svg{width:24px;height:24px;flex:none;margin-top:1px;stroke:#EEE9DE;fill:var(--army);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(22px,3vw,36px)}
.pgroup{display:grid;gap:12px;align-content:start;scroll-margin-top:calc(100px + var(--nh,0px))}
.pgroup.wide{grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(22px,3vw,36px);align-items:start}
.pgroup.wide .tab,.pgroup.wide .pnote{grid-column:1/-1}
.pgroup .rows{display:grid;gap:10px}
.prow{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--sheet);border:2px solid var(--rule);border-radius:8px;padding:12px 16px;box-shadow:3px 3px 0 var(--rule)}
.prow b{font-weight:600}
.prow small{color:var(--muted);font-size:.9rem}
.prow .amt{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--army-text);white-space:nowrap}
.prow .amt small{font-family:var(--body);font-weight:600;font-size:.85rem;margin-right:4px}
.prow.special{background:color-mix(in srgb,var(--accent) 22%,var(--sheet));border-color:var(--army-text)}
.prow .flag{display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:600;background:var(--army);color:#EEE9DE;border-radius:4px;padding:3px 7px;margin-right:8px;vertical-align:2px}
.prow .d3{display:inline-block;font-family:var(--label);font-weight:600;font-size:.7rem;background:var(--ink);color:var(--paper);border-radius:4px;padding:2px 6px;margin-right:6px;vertical-align:2px}
.pphoto{border:2px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);background:#000;aspect-ratio:4/3}
.pphoto img{width:100%;height:100%;object-fit:cover}
.pnote{font-size:.9rem;color:var(--muted);margin:0}
.perks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(40px,6vw,64px)}
.perk{text-align:center;display:grid;gap:6px;justify-items:center;padding:16px 8px;border-top:3px solid var(--rule)}
.perk svg{width:30px;height:30px;stroke:var(--army-text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.perk b{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.perk span{font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.pgrid{grid-template-columns:1fr}.pgroup.wide{grid-template-columns:1fr}.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Gallery ---------- */
.gal{background:var(--night);background-image:var(--paper-tex);color:var(--night-ink);min-height:60vh;padding-bottom:clamp(60px,8vw,110px)}
.gbar{position:sticky;top:calc(76px + var(--nh,0px));z-index:30;background:color-mix(in srgb,var(--night) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #2E3530}
.gbar .wrap{display:flex;gap:14px;align-items:center;padding-block:12px}
.gchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px}
.gchips::-webkit-scrollbar{display:none}
.gchip{flex:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:500;font-size:.92rem;text-decoration:none;color:#DAD6C6;border:1.5px solid #48514A;border-radius:999px;padding:6px 14px;white-space:nowrap;background:transparent;cursor:pointer}
.gchip small{font-family:var(--label);color:var(--night-muted);margin-left:6px;font-size:.75rem}
.gchip:hover{border-color:var(--accent);color:#fff}
.gchip[aria-current="true"],.gchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#141810}
.gchip[aria-current="true"] small,.gchip[aria-pressed="true"] small{color:#141810}
.gsearch{position:relative;flex:none;width:min(260px,40vw)}
.gsearch input{width:100%;font:inherit;font-size:.95rem;color:#EEE9DE;background:#0B0D09;border:1.5px solid #48514A;border-radius:999px;padding:8px 14px 8px 36px}
.gsearch input:focus{outline:none;border-color:var(--accent)}
.gsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--night-muted);fill:none;stroke-width:2.4;stroke-linecap:round}
.gsec{padding-top:clamp(40px,5vw,64px);scroll-margin-top:calc(150px + var(--nh,0px))}
.gsec h2{font-size:clamp(2rem,4.6vw,3.4rem);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.gsec h2+.gsubs{margin-top:-8px}
.gsec h2 small{font-family:var(--label);font-size:.85rem;letter-spacing:.1em;color:var(--night-muted);font-weight:600}
.gsubs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ggrid.photos{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.gi{position:relative;display:block;border:0;padding:0;background:#0B0D09;border-radius:14px;overflow:hidden;cursor:zoom-in;aspect-ratio:1;box-shadow:0 0 0 1.5px #2E3530;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.ggrid.photos .gi{aspect-ratio:4/3}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gi:hover,.gi:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 2px var(--accent),0 10px 30px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--accent) 35%,transparent)}
.gi:hover img{transform:scale(1.06)}
.gi .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:.8rem;line-height:1.25;text-align:left;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .2s ease}
.gi:hover .cap,.gi:focus-visible .cap{opacity:1}
.gi .new{position:absolute;top:8px;left:8px;background:var(--accent);color:#141810;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;font-weight:600;border-radius:4px;padding:2px 6px}
.gmore{margin-top:18px}
.gempty{padding:60px 0;text-align:center;color:var(--night-muted)}
.gload{padding:80px 0;text-align:center;color:var(--night-muted);font-family:var(--display);text-transform:uppercase;letter-spacing:.1em}
@media (hover:none){.gi .cap{opacity:1}}
@media (max-width:640px){.gbar{top:74px}.gbar .wrap{flex-wrap:wrap}.gsearch{width:100%}.ggrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ggrid.photos{grid-template-columns:repeat(2,minmax(0,1fr))}.gi{border-radius:10px}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,10,7,.94);display:grid;grid-template-rows:1fr auto;color:#EEE9DE}
.lb[hidden]{display:none}
.lb figure{margin:0;display:grid;place-items:center;padding:56px 70px 10px;min-height:0}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 0 80px color-mix(in srgb,var(--accent) 25%,transparent)}
.lb .bar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px var(--gut) 22px}
.lb .bar b{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem;font-weight:600;display:block}
.lb .bar small{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;color:var(--night-muted);font-size:.75rem}
.lb .x,.lb .pv,.lb .nx{position:absolute;width:52px;height:52px;border-radius:50%;border:2px solid #EEE9DE;background:rgba(0,0,0,.4);color:#EEE9DE;display:grid;place-items:center;cursor:pointer}
.lb .x{top:14px;right:14px}.lb .pv{left:12px;top:45%}.lb .nx{right:12px;top:45%}
.lb .x:hover,.lb .pv:hover,.lb .nx:hover{background:var(--accent);color:#141810;border-color:var(--accent)}
.lb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.lb figure{padding:60px 8px 6px}.lb .pv,.lb .nx{top:auto;bottom:90px}}
@media (max-width:480px){.brand b{font-size:1.12rem}.brand small{display:none}.brand img{width:44px;height:44px}.top .wrap{gap:10px}}

/* Announcement spotlight on the home page */
.spot{padding-block:clamp(28px,4vw,44px) 0}
.spot[hidden]{display:none}
.spotc{display:flex;gap:18px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--night);background-image:var(--paper-tex);color:var(--night-ink);border:2px solid #0B0D09;border-left:10px solid var(--accent);border-radius:12px;box-shadow:var(--shadow);padding:clamp(20px,3vw,30px) clamp(20px,3vw,34px)}
.spotc .eyebrow{color:var(--accent)}
.spotc h2{font-size:clamp(1.8rem,4vw,3rem);margin:.2em 0 .15em}
.spotc p{margin:0;color:#CFCBBE;max-width:62ch}
.notice .n.news b{color:var(--accent)}

/* Meet Richard & Jack: photo + tilted snapshot */
.duo-ph{position:relative;max-width:400px;width:100%;justify-self:start;padding:0 0 90px 0;margin-left:4%}
.duo-ph figure{margin:0}
.duo-ph .main{border:3px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--rule);transform:rotate(-1.5deg);background:var(--panel)}
.duo-ph .main img{width:100%;height:auto;aspect-ratio:813/966;object-fit:cover}
.duo-ph .snap{position:absolute;right:-7%;bottom:0;width:50%;background:#FBF8F1;padding:8px 8px 10px;border:2px solid var(--rule);border-radius:4px;box-shadow:6px 6px 0 var(--rule);transform:rotate(5deg)}
.duo-ph .snap img{width:100%;height:auto;aspect-ratio:1.1;object-fit:cover;object-position:60% 40%;border-radius:2px}
.duo-ph .snap figcaption{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:.85rem;color:#1F2421;text-align:center;margin-top:7px;line-height:1.1}
.duo-ph .jack{position:absolute;right:-9%;top:-16px;background:var(--accent);color:#141810;border:2px solid #141810;border-radius:8px;padding:10px 14px;transform:rotate(4deg);box-shadow:4px 4px 0 #141810;font-family:var(--display);text-transform:uppercase;font-weight:600;line-height:1.1;font-size:1rem;z-index:2}
.duo-ph .jack small{display:block;font-family:var(--label);letter-spacing:.1em;font-size:.68rem}
@media (max-width:860px){.duo-ph{max-width:300px;margin-inline:auto;justify-self:center}.duo-ph .snap{right:-14%;width:52%}.duo-ph .jack{right:-12%}}

/* Hero disc: full-color artwork shows edge to edge; photos of lit discs trim their dark rim */
.disc img.art{inset:0;width:100%;height:100%}
.disc img.lit{inset:-5%;width:110%;height:110%}

/* Now in full color */
.fcg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.fromto{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);align-items:center;gap:14px;margin:28px 0 10px}
.fromto figure{margin:0;display:grid;gap:8px}
.fromto img{width:100%;height:auto;display:block}
.fromto .snap{background:#FBF8F1;padding:8px 8px 10px;border:2px solid var(--rule);border-radius:4px;box-shadow:5px 5px 0 var(--rule);transform:rotate(-3deg)}
.fromto .snap img{border-radius:2px}
.fromto .oncart img{border:3px solid var(--rule);border-radius:10px;box-shadow:6px 6px 0 var(--rule)}
.fromto figcaption{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.74rem;color:var(--muted);text-align:center}
.fromto .snap figcaption{color:#1F2421}
.fromto .arw{width:42px;height:24px;stroke:var(--army-text);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:24px}
@media (max-width:520px){.fromto{grid-template-columns:1fr;justify-items:center}.fromto .snap{max-width:240px}.fromto .arw{transform:rotate(90deg);margin:0}}
.fcwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);padding:10px}
.fcwall img{--g:#A7B24A;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 4px #0B0D09,0 0 0 7px var(--accent-2),0 0 34px 4px color-mix(in srgb,var(--g) 50%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
/* middle column sits a little lower; whole column moves so discs never overlap */
.fcwall{padding-bottom:34px}
.fcwall img:nth-child(3n+1){transform:rotate(-4deg)}
.fcwall img:nth-child(3n+2){transform:translateY(26px) rotate(3deg)}
.fcwall img:nth-child(3n){transform:rotate(-2deg)}
.fcwall img:hover{transform:scale(1.08) rotate(0)}
@media (max-width:860px){.fcg{grid-template-columns:1fr}.fcwall{max-width:520px}}

/* Score Cardie before/after */
.scg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.scpick{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px}
.scpick .gchip{color:var(--ink);border-color:var(--rule);font-size:.95rem}
.scpick .gchip:hover{color:var(--ink);background:var(--panel)}
.scpick .gchip[aria-pressed="true"]{background:var(--brushed),var(--metal-fill);color:#EEE9DE;border-color:#1A1F0B}
.ba{position:relative;border:3px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--rule);background:#B9B7B1;user-select:none;touch-action:pan-y}
.ba img{width:100%;height:auto;display:block}
.ba .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba .before img{width:100%;height:100%;object-fit:cover}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#EEE9DE;box-shadow:0 0 0 1px #1F2421;pointer-events:none}
.ba .handle svg{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;padding:11px;border-radius:50%;background:var(--accent);border:2px solid #141810;stroke:#141810;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-shadow:3px 3px 0 #141810}
.ba .lbl{position:absolute;top:12px;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.85rem;background:#1F2421;color:#EEE9DE;padding:4px 10px;border-radius:4px;pointer-events:none}
.ba .lbl.l{left:12px}.ba .lbl.r{right:12px;background:var(--accent);color:#141810}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible+*,.ba:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:860px){.scg{grid-template-columns:1fr}}

.scprice{display:inline-flex;align-items:baseline;gap:12px;margin-top:18px;border:2px solid var(--rule);border-radius:8px;padding:8px 16px;background:var(--sheet);box-shadow:3px 3px 0 var(--rule)}
.scprice span{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.8rem;color:var(--muted)}
.scprice b{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--army-text)}

/* Brownwood Market songs on the market card */
.mksongs{display:grid;gap:8px;border-top:2px dashed var(--khaki);margin:2px -20px 0;padding:14px 20px 0}
.mksongs[hidden]{display:none}
.mksongs .lbl{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.72rem;color:var(--muted)}
.mksongs button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:var(--paper);border:2px solid var(--rule);border-radius:8px;padding:8px 12px;cursor:pointer}
.mksongs button:hover{background:var(--panel)}
.mksongs button i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--brushed),var(--metal-fill);color:#EEE9DE}
.mksongs button svg{width:14px;height:14px;fill:currentColor}
.mksongs button[aria-pressed="true"]{border-color:var(--army-text);background:color-mix(in srgb,var(--accent) 22%,var(--paper))}

/* Golf ball switch photo in the adapter kit card */
.stepimg{margin:2px 0 4px;position:relative;border:2px solid var(--rule);border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.stepimg img{width:100%;height:100%;object-fit:cover}
.stepimg figcaption{position:absolute;left:8px;top:8px;background:var(--paper);color:var(--ink);font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.7rem;padding:3px 8px;border-radius:4px;border:1.5px solid var(--rule)}
.meet p a{color:var(--army-text);font-weight:600;text-underline-offset:3px}
/* Hoodie-shaped gallery tiles and viewer */
.ggrid .gi.round{border-radius:50%;box-shadow:0 0 0 4px #0B0D09,0 0 0 6px var(--accent-2)}
.ggrid .gi.round .cap{text-align:center;padding:22px 14% 16%}
.lb.round img{border-radius:50%;aspect-ratio:1;object-fit:cover;box-shadow:0 0 0 8px #0B0D09,0 0 0 12px var(--accent-2),0 0 90px color-mix(in srgb,var(--accent) 35%,transparent)}

.lc{text-transform:none}
/* Round tiles: "New" badge centered at the top so it stays inside the circle */
.gi.round .new{display:none}   /* the whole category is new; a badge would cover lettering */
/* Designs with lettering near the edge: shrink inside the circle over a soft blurred copy */
.gi.round[style*="--f"]::before{content:"";position:absolute;inset:-10%;background:var(--bg) center/cover;filter:blur(14px) brightness(.85)}
.gi.round img.fit{position:relative;transform:scale(var(--f))}
.gi.round:hover img.fit{transform:scale(calc(var(--f) * 1.06))}
/* Score Cardies on the Yamaha holder */
.scf{position:relative;display:block;width:100%;height:100%;background:#B9B7B1}
.scf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scf .art{clip-path:polygon(28.5% 16.5%, 34.5% 16.5%, 37.0% 21.6%, 63.1% 21.6%, 65.6% 16.5%, 70.5% 16.5%, 87.0% 28.2%, 89.9% 30.4%, 94.1% 32.5%, 93.8% 34.6%, 93.4% 37.7%, 93.2% 40.2%, 92.8% 42.6%, 92.6% 44.7%, 92.3% 46.8%, 92.0% 49.3%, 91.8% 51.4%, 91.5% 53.5%, 91.3% 55.6%, 90.9% 58.1%, 90.6% 60.2%, 90.4% 62.3%, 90.0% 64.7%, 89.6% 66.8%, 89.4% 68.9%, 89.0% 71.4%, 88.7% 73.5%, 88.3% 75.6%, 88.0% 77.7%, 87.6% 80.2%, 87.3% 82.3%, 86.6% 84.4%, 81.0% 86.5%, 77.0% 89.1%, 73.2% 90.4%, 50.0% 90.9%, 26.8% 90.4%, 18.6% 89.1%, 14.4% 85.8%, 13.0% 83.7%, 12.7% 81.6%, 12.3% 79.5%, 11.8% 77.4%, 11.4% 75.3%, 11.0% 73.2%, 10.7% 71.1%, 10.3% 68.9%, 10.0% 66.8%, 9.6% 64.7%, 9.2% 62.3%, 8.9% 60.2%, 8.6% 58.1%, 8.2% 56.0%, 7.9% 53.9%, 7.6% 51.8%, 7.3% 49.6%, 7.0% 47.5%, 6.6% 45.4%, 6.3% 43.3%, 6.1% 41.2%, 5.8% 39.1%, 5.4% 36.7%, 5.3% 34.6%, 6.6% 32.5%, 9.7% 30.4%, 12.7% 28.2%);filter:saturate(1.08)}
.scf::after{content:"";position:absolute;inset:0;clip-path:polygon(28.5% 16.5%, 34.5% 16.5%, 37.0% 21.6%, 63.1% 21.6%, 65.6% 16.5%, 70.5% 16.5%, 87.0% 28.2%, 89.9% 30.4%, 94.1% 32.5%, 93.8% 34.6%, 93.4% 37.7%, 93.2% 40.2%, 92.8% 42.6%, 92.6% 44.7%, 92.3% 46.8%, 92.0% 49.3%, 91.8% 51.4%, 91.5% 53.5%, 91.3% 55.6%, 90.9% 58.1%, 90.6% 60.2%, 90.4% 62.3%, 90.0% 64.7%, 89.6% 66.8%, 89.4% 68.9%, 89.0% 71.4%, 88.7% 73.5%, 88.3% 75.6%, 88.0% 77.7%, 87.6% 80.2%, 87.3% 82.3%, 86.6% 84.4%, 81.0% 86.5%, 77.0% 89.1%, 73.2% 90.4%, 50.0% 90.9%, 26.8% 90.4%, 18.6% 89.1%, 14.4% 85.8%, 13.0% 83.7%, 12.7% 81.6%, 12.3% 79.5%, 11.8% 77.4%, 11.4% 75.3%, 11.0% 73.2%, 10.7% 71.1%, 10.3% 68.9%, 10.0% 66.8%, 9.6% 64.7%, 9.2% 62.3%, 8.9% 60.2%, 8.6% 58.1%, 8.2% 56.0%, 7.9% 53.9%, 7.6% 51.8%, 7.3% 49.6%, 7.0% 47.5%, 6.6% 45.4%, 6.3% 43.3%, 6.1% 41.2%, 5.8% 39.1%, 5.4% 36.7%, 5.3% 34.6%, 6.6% 32.5%, 9.7% 30.4%, 12.7% 28.2%);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%),radial-gradient(120% 90% at 50% 45%,transparent 70%,rgba(0,0,0,.35));pointer-events:none}
.ggrid.photos .gi.framed{aspect-ratio:1065/855;background:#B9B7B1}
.gi.framed:hover img{transform:none}
.lb .lbsc{display:none}
.lb.framed figure>img{display:none}
.lb.framed .lbsc{display:block;width:min(92vw,900px);aspect-ratio:1065/855;max-height:100%}
.lb.framed .scf{border-radius:12px;overflow:hidden}
.prow .evnote{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}
.prow .evnote a{color:var(--army-text);font-weight:600;text-underline-offset:3px}

.stepimg.dark{background:radial-gradient(circle at 50% 50%,#2A3313,#0B0D09 70%);display:grid;place-items:center}
.stepimg .disc1{width:72%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 5px #0B0D09,0 0 0 8px var(--accent-2),0 0 40px 8px rgba(120,160,255,.45)}
.swapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;padding:6% 7%;background:var(--panel);align-content:center}
.swapgrid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 3px #0B0D09}
.switchpic{margin:10px 0 0;max-width:220px;position:relative;border:2px solid var(--rule);border-radius:8px;overflow:hidden;box-shadow:3px 3px 0 var(--rule)}
.switchpic img{width:100%;height:auto;display:block}
.switchpic figcaption{position:absolute;left:6px;top:6px;background:var(--paper);color:var(--ink);font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.66rem;padding:2px 7px;border-radius:4px;border:1.5px solid var(--rule)}
.where .switchpic{grid-column:2;margin-top:2px}
.where li:has(.switchpic){row-gap:4px}

.brandlogos{grid-column:1/-1;margin:8px 0 0;padding:22px clamp(16px,4vw,48px) 14px;background:var(--sheet);border:2px solid var(--rule);border-radius:10px;box-shadow:3px 3px 0 var(--rule)}
.brandlogos img{width:100%;height:auto;display:block}
.brandlogos figcaption{margin-top:10px;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:.95rem;color:var(--muted);text-align:center}
:root[data-theme="dark"] .brandlogos img{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brandlogos img{filter:invert(1)}}

/* What is a Hoodie: step numbers and the two kinds of mount */
.stepno{font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--ink)}
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:none;margin-top:22px}
.steps.two .step::before{content:none}
.mountpick{background:var(--sheet);border:2px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:clamp(20px,3vw,32px)}
.mphead{display:flex;gap:16px;align-items:flex-end;margin-bottom:20px}
.mphead h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.mphead span:not(.stepno){color:var(--muted);font-size:.98rem}
.mpgrid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 clamp(12px,2vw,22px);align-items:stretch}
.mcard{display:grid;grid-template-rows:auto auto 1fr;border:2px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--paper)}
.mq{display:block;background:var(--ink);color:var(--paper);font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:500;font-size:1.05rem;text-align:center;padding:10px 12px}
.mq b{color:var(--accent);font-weight:600}
.mcard figure{margin:0;aspect-ratio:16/10;border-bottom:2px solid var(--rule);background:#000}
.mcard figure img{width:100%;height:100%;object-fit:cover}
/* Yamaha card: the factory light-up logo ("before") layered over a corner of the Hoodie photo ("after") */
.mcard figure.ba2{position:relative}
.ba2 .was{position:absolute;left:4%;top:7%;width:34%;aspect-ratio:1;border:3px solid var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.45);transform:rotate(-4deg)}
.ba2 .was img{display:block}
.ba2 i{position:absolute;font-style:normal;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.72rem;line-height:1;padding:5px 8px;border-radius:5px;background:#0B0D09;color:#EEE9DE}
.ba2 .was i{left:6px;bottom:6px}
.ba2 .now{right:10px;bottom:10px;background:var(--accent);color:#141810}
.mbody{display:grid;gap:10px;padding:16px 18px 18px;align-content:start}
.mbody h4{margin:0;font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:1.45rem;letter-spacing:.02em;text-align:center}
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mlist li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem}
.mlist svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:#EEE9DE;fill:var(--army);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mprice{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;border-top:2px dashed var(--khaki);padding-top:12px}
.mprice span{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.78rem;color:var(--muted);display:grid;gap:2px}
.mprice small{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:500;font-size:.88rem;color:var(--ink)}
.mprice b{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--army-text)}
.mor{align-self:center;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--brushed),var(--metal-fill);color:#EEE9DE;border:3px solid var(--paper);box-shadow:0 0 0 2px var(--rule);font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.04em}
.mpnote{margin:18px 0 0;text-align:center;color:var(--muted)}
.mpnote a{color:var(--army-text);font-weight:600;text-underline-offset:3px}
@media (max-width:860px){.mpgrid{grid-template-columns:1fr;gap:0}.mor{justify-self:center;margin:-12px 0;position:relative;z-index:2}.steps.two{grid-template-columns:1fr}.mphead{align-items:flex-start;flex-direction:column;gap:6px}}
.mbody{display:flex;flex-direction:column}
.mprice{margin-top:auto}
.mlist{margin-bottom:6px}
.steps.two .stepimg{aspect-ratio:16/9}
.steps.two .stepimg .disc1{width:auto;height:84%}
.steps.two .swapgrid{grid-template-columns:repeat(6,1fr);gap:3%;padding:4% 4%}
@media (max-width:560px){.steps.two .swapgrid{grid-template-columns:repeat(3,1fr);gap:5%}.steps.two .stepimg{aspect-ratio:4/3}}
.steps.two .stepimg .disc1{width:44%;height:auto}
.steps.two .swapgrid{grid-template-columns:repeat(3,minmax(0,104px));justify-content:center;gap:16px 26px;padding:0}
@media (max-width:560px){.steps.two .swapgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5%;padding:5% 7%}.steps.two .stepimg .disc1{width:62%}}
/* COO tag: bottom-left of the photo, next to Jack, hanging just off the edge */
.duo-ph .jack{top:auto;right:auto;left:-8%;bottom:62px;transform:rotate(-4deg)}
@media (max-width:860px){.duo-ph .jack{left:-6%;bottom:66px}}
.where .xlpic{max-width:300px}
.collage .d img{object-position:50% 60%}

/* Hoodie Groove: full playlist */
#pShuf svg{fill:none}
#pShuf[aria-pressed="true"]{background:var(--brushed),var(--metal-fill);color:#EEE9DE;border-color:#1A1F0B}
.ptime{font-family:var(--label);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:84px}
.plist{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.plist button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:.95rem;color:var(--ink);background:transparent;border:0;border-radius:6px;padding:7px 8px;cursor:pointer}
.plist button:hover{background:var(--panel)}
.plist .n{font-family:var(--display);font-weight:600;color:var(--muted);min-width:18px}
.plist .t{flex:1}
.plist button[aria-current="true"]{background:var(--panel);font-weight:600}
.plist button[aria-current="true"] .n{color:var(--army-text)}
.plist .eq{display:none;align-items:flex-end;gap:2px;height:14px}
.plist .eq i{width:3px;background:var(--army-text);animation:eq .9s ease-in-out infinite}
.plist .eq i:nth-child(2){animation-delay:.2s}.plist .eq i:nth-child(3){animation-delay:.4s}
.plist button.playing .eq{display:flex}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
@media (max-width:640px){.plist{grid-template-columns:1fr}.ptime{display:none}}

/* Price list: tap a row or photo to see an example */
.prow[data-ex],.pphoto[role="button"]{cursor:pointer}
.prow[data-ex]:hover{border-color:var(--army-text)}
.prow[data-ex]:focus-visible,.pphoto[role="button"]:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:2px}
.prow .seeex{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.68rem;color:var(--army-text);white-space:nowrap}
.prow .seeex svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.exdlg{border:2px solid var(--rule);border-radius:12px;padding:0;background:var(--sheet);color:var(--ink);width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--shadow)}
.exdlg::backdrop{background:rgba(15,18,12,.7)}
.exdlg figure{margin:0}
.exdlg figure+figure{border-top:2px solid var(--rule)}
.exdlg img{display:block;width:100%;height:auto;max-height:calc(100dvh - 140px);object-fit:contain;background:#fff}
.exdlg figcaption{padding:12px 16px 14px;font-size:.95rem}
.exx{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:2px solid var(--rule);background:var(--sheet);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--rule)}
@media (max-width:560px){.prow .seeex{font-size:0;gap:0}.prow .seeex svg{width:20px;height:20px}}