/* 727 Motorsports — storefront concept.
   Palette sampled from the client's own kit, not chosen: the lime is the green
   edge on their tee logo (#72DE1E), the blue is the same logo's outline
   (#2A7EEA), the black is the shirt. Panda's magenta / turquoise are hers and
   stay on the Panda card only.
   Signature device is the cam card — the printed spec card that ships in every
   cam kit box. It is the only light-coloured surface on the site. */

:root{
  --void:#08090B;
  --asphalt:#111317;
  --asphalt-2:#171A1F;
  --rail:#24282F;
  --rail-2:#333842;
  --bone:#F2F3F0;
  --smoke:#9BA2AC;
  --smoke-dim:#666C76;
  --signal:#72DE1E;          /* lime — the accent on their own logo */
  --signal-deep:#3F8A0A;
  --flame:#2A7EEA;           /* blue — the logo outline */
  --slip:#F1EFE6;            /* cam card stock */
  --slip-2:#E2DFD2;
  --slip-ink:#1E1F1B;
  --go:#72DE1E;
  --panda-m:#E83E9B; --panda-t:#3CC9C0; --panda-l:#9BE23B;

  --display:'Chakra Petch','Archivo','Arial Narrow',Impact,system-ui,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --slipface:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  --gut:clamp(18px,4vw,48px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut);}

/* ---------- type roles ---------- */
.h-display{
  font-family:var(--display); font-weight:700; font-style:italic;
  text-transform:uppercase; letter-spacing:-.01em; line-height:.92; margin:0;
}
.chrome{
  background:linear-gradient(177deg,#FFFFFF 0%,#E4E7EB 26%,#9BA1AA 44%,#F7F8FA 52%,#C7CBD2 68%,#6E737C 88%,#B9BEC6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.tag{
  font-family:var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; font-size:11px; color:var(--smoke-dim); margin:0;
}
.tag-lime{color:var(--signal);}
.tag-blue{color:var(--flame);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:14px;
  padding:14px 22px; border:1px solid var(--rail-2); border-radius:3px; color:var(--bone);
  transition:transform .15s,border-color .15s,background .15s;
}
.btn:hover{transform:translateY(-1px); border-color:var(--smoke);}
.btn-signal{background:var(--signal); color:#07110A; border-color:var(--signal);}
.btn-signal:hover{background:#8BF23A;}
.btn-ghost{background:rgba(255,255,255,.04);}
.btn-block{width:100%;}
.btn-slip{background:var(--slip-ink); color:var(--slip); border-color:var(--slip-ink); border-radius:2px;}
.btn-slip:hover{background:#000; border-color:#000;}

/* ---------- hello ---------- */
.hello{background:linear-gradient(180deg,#0E1410,#08090B); border-bottom:1px solid var(--rail);}
.hello-in{max-width:var(--max); margin:0 auto; padding:22px var(--gut) 18px;}
.hello-lede{margin:0 0 14px; font-size:16px; color:var(--bone); max-width:70ch;}
.hello-lede b{color:var(--signal);}
.hello-acts{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.hello-act{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--rail); border-radius:4px; background:rgba(255,255,255,.02); transition:border-color .15s;}
.hello-act:hover{border-color:var(--signal);}
.hello-n{font-family:var(--cond); font-weight:700; color:var(--signal); font-size:13px; letter-spacing:.1em; padding-top:2px;}
.hello-t{font-family:var(--cond); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.04em; line-height:1.2;}
.hello-t span{display:block; font-family:var(--body); font-weight:400; text-transform:none; letter-spacing:0; color:var(--smoke); font-size:13px; margin-top:3px;}
.hello-foot{margin:14px 0 0; font-size:13px; color:var(--smoke);}
.hello-foot b{color:var(--bone);}

.announce{background:var(--signal); color:#07110A; font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:12px; text-align:center; padding:9px var(--gut);}
.announce a{border-bottom:1px solid rgba(0,0,0,.4);}

/* ---------- header ---------- */
.head{position:sticky; top:0; z-index:40; background:rgba(8,9,11,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--rail);}
.head-in{display:flex; align-items:center; gap:22px; height:64px;}
.mark{display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; white-space:nowrap;}
.mark-a{font-size:30px; letter-spacing:.02em;}
.mark-b{font-size:13px; letter-spacing:.2em; color:var(--signal); font-style:normal;}
.nav{display:flex; gap:22px; margin-left:auto;}
.nav a{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; color:var(--smoke); padding:6px 0; border-bottom:2px solid transparent;}
.nav a:hover{color:var(--bone); border-color:var(--signal);}
.cart-btn{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; display:flex; align-items:center; gap:8px; border:1px solid var(--rail-2); padding:8px 12px; border-radius:3px;}
.cart-n{background:var(--signal); color:#07110A; border-radius:999px; min-width:20px; height:20px; display:inline-grid; place-items:center; font-size:11px; padding:0 6px;}
.burger{display:none; width:40px; height:40px; position:relative; margin-left:auto;}
.burger span,.burger span::before,.burger span::after{content:''; position:absolute; left:8px; width:24px; height:2px; background:var(--bone); transition:.2s;}
.burger span{top:19px;} .burger span::before{top:-7px; left:0;} .burger span::after{top:7px; left:0;}
@media(max-width:860px){
  .burger{display:block;}
  .nav{display:none; position:absolute; left:0; right:0; top:64px; background:var(--asphalt); border-bottom:1px solid var(--rail); padding:12px var(--gut) 18px; flex-direction:column; gap:6px;}
  .nav.open{display:flex;}
  .nav a{padding:10px 0; border-bottom:1px solid var(--rail); font-size:15px;}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(88vh,760px); display:grid; align-items:end; overflow:hidden; border-bottom:1px solid var(--rail);}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:70% 45%;}
.hero-veil{position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,11,1) 0%,rgba(8,9,11,.97) 22%,rgba(8,9,11,.72) 42%,rgba(8,9,11,.2) 70%,rgba(8,9,11,.15) 100%),linear-gradient(180deg,rgba(8,9,11,.2) 0%,rgba(8,9,11,0) 40%,rgba(8,9,11,.9) 100%);}
.hero-in{position:relative; max-width:var(--max); margin:0 auto; width:100%; padding:80px var(--gut) 44px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:32px;}
.hero-eyebrow{margin-bottom:14px;}
.hero-h{font-size:clamp(46px,8.6vw,108px); max-width:9ch;}
.hero-sub{max-width:52ch; color:var(--smoke); font-size:clamp(16px,1.6vw,19px); margin:18px 0 26px;}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap;}
.tach{display:flex; gap:6px; align-items:flex-end; padding-bottom:6px;}
.tach-seg{font-family:var(--display); font-style:italic; font-weight:700; font-size:clamp(28px,4vw,52px); line-height:1; color:var(--rail-2); padding:6px 10px; border:1px solid var(--rail); border-radius:3px; background:rgba(0,0,0,.35); transition:color .35s,border-color .35s,text-shadow .35s;}
.tach-seg.on{color:var(--signal); border-color:var(--signal); text-shadow:0 0 18px rgba(114,222,30,.55);}
@media(max-width:860px){ .hero-in{grid-template-columns:1fr;} .tach{order:-1; padding:0 0 8px;} .tach-seg{font-size:26px;} }

/* ---------- generation picker ---------- */
.gen{padding:clamp(40px,6vw,72px) 0 10px;}
.gen-head{max-width:64ch; margin-bottom:22px;}
.gen-h{font-size:clamp(30px,4.6vw,54px); margin:8px 0 12px;}
.gen-sub{color:var(--smoke); margin:0;}
.gen-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.gen-card{text-align:left; padding:18px 18px 16px; border:1px solid var(--rail); border-radius:5px; background:var(--asphalt); position:relative; overflow:hidden; transition:border-color .15s,transform .15s;}
.gen-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rail-2); transition:background .15s;}
.gen-card:hover{border-color:var(--smoke-dim); transform:translateY(-2px);}
.gen-card.on{border-color:var(--signal);}
.gen-card.on::before{background:var(--signal);}
.gen-roman{font-family:var(--display); font-style:italic; font-weight:700; font-size:40px; line-height:1; color:var(--bone);}
.gen-card.on .gen-roman{color:var(--signal);}
.gen-years{font-family:var(--cond); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--smoke); margin:4px 0 10px;}
.gen-eng{font-family:var(--slipface); font-size:12.5px; color:var(--bone); line-height:1.5; margin:0 0 10px;}
.gen-tell{font-size:13.5px; color:var(--smoke); margin:0;}
.gen-count{position:absolute; top:14px; right:14px; font-family:var(--cond); font-weight:700; letter-spacing:.1em; font-size:11px; color:var(--smoke-dim); text-transform:uppercase;}
.gen-card.on .gen-count{color:var(--signal);}
.gen-state{margin:14px 0 0; font-family:var(--cond); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--smoke);}
.gen-state b{color:var(--signal);}
.gen-state button{color:var(--bone); border-bottom:1px solid var(--smoke-dim); margin-left:10px; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:13px;}
.gen-help{margin:10px 0 0; color:var(--smoke); font-size:14px;}
.gen-help a{color:var(--bone); border-bottom:1px solid var(--signal);}

/* ---------- lanes ---------- */
.lanes{padding:clamp(36px,5vw,64px) 0 10px;}
.lanes-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; border-bottom:1px solid var(--rail); padding-bottom:12px;}
.lane{margin-bottom:clamp(30px,4vw,48px);}
.lane-head{display:flex; align-items:baseline; gap:14px; margin-bottom:14px; flex-wrap:wrap;}
.lane-n{font-family:var(--display); font-style:italic; font-weight:700; font-size:34px; color:var(--rail-2); line-height:1;}
.lane-t{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:19px; margin:0;}
.lane-s{font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--signal);}
.lane-b{width:100%; margin:0; color:var(--smoke); font-size:14px;}
.lane-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.lane-empty{border:1px dashed var(--rail-2); border-radius:5px; padding:18px; color:var(--smoke-dim); font-size:14px;}

/* card */
.card{position:relative; background:var(--asphalt); border:1px solid var(--rail); border-radius:5px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s,transform .15s;}
.card:hover{border-color:var(--rail-2); transform:translateY(-2px);}
.card-shot{position:relative; aspect-ratio:4/3; background:#0F1114; overflow:hidden;}
.card-shot img{width:100%; height:100%; object-fit:cover;}
.card-stamp{position:absolute; left:10px; top:10px; font-family:var(--cond); font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; padding:4px 8px; background:rgba(8,9,11,.82); border:1px solid var(--rail-2); border-radius:2px; color:var(--smoke);}
.card-gen{position:absolute; right:10px; top:10px; display:flex; gap:4px;}
.card-gen span{font-family:var(--display); font-style:italic; font-weight:700; font-size:11px; padding:3px 6px; background:rgba(8,9,11,.85); border:1px solid var(--signal); color:var(--signal); border-radius:2px;}
.card-body{padding:14px 14px 12px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-t{font-family:var(--cond); font-weight:600; font-size:16.5px; letter-spacing:.02em; line-height:1.22; margin:0;}
.card-prov{margin:0; font-size:12.5px; color:var(--smoke-dim);}
.card-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px;}
.price{font-family:var(--display); font-style:italic; font-weight:700; font-size:20px;}
.price-from{font-family:var(--cond); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke-dim); margin-right:6px;}
.price-was{font-size:13px; color:var(--smoke-dim); text-decoration:line-through; margin-left:8px;}
.card-add{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; padding:8px 12px; border:1px solid var(--signal); color:var(--signal); border-radius:3px; position:relative; z-index:2;}
.card-add:hover{background:var(--signal); color:#07110A;}
.card-out{font-family:var(--cond); font-weight:700; letter-spacing:.14em; font-size:11px; color:var(--smoke-dim); text-transform:uppercase;}
.card-link{position:absolute; inset:0; z-index:1;}
.shot-none{position:absolute; inset:0; display:grid; place-items:center; background:repeating-linear-gradient(135deg,#0F1114 0 12px,#121519 12px 24px);}
.shot-none-in{text-align:center; display:grid; gap:4px;}
.shot-none-sku{font-family:var(--slipface); font-size:12px; color:var(--smoke);}
.shot-none-lab{font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--smoke-dim);}
.shot-none-cta{font-family:var(--cond); font-size:12px; color:var(--signal); letter-spacing:.08em;}

/* ---------- shop work ---------- */
.work{padding:clamp(30px,4vw,56px) 0 10px; border-top:1px solid var(--rail);}
.work-head{max-width:62ch; margin-bottom:22px;}
.work-h{font-size:clamp(28px,4vw,46px); margin:8px 0 12px;}
.work-intro{color:var(--smoke); margin:0;}
.work-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.job{display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--rail); border-radius:5px; background:linear-gradient(180deg,var(--asphalt-2),var(--asphalt)); position:relative;}
.job::after{content:''; position:absolute; right:14px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--signal); box-shadow:0 0 12px rgba(114,222,30,.6);}
.job-t{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:18px; margin:0; padding-right:22px;}
.job-gen{font-family:var(--display); font-style:italic; font-size:12px; color:var(--signal);}
.job-p{margin:0; color:var(--smoke); font-size:14px; flex:1;}
.job-rows{display:grid; gap:2px; font-family:var(--slipface); font-size:12px; color:var(--smoke);}
.job-rows b{color:var(--bone); font-weight:500;}
.job-go{align-self:flex-start; margin-top:6px;}

/* ---------- fleet ---------- */
.fleet{padding:clamp(30px,4vw,56px) 0 10px; border-top:1px solid var(--rail);}
.fleet-head{max-width:64ch; margin-bottom:22px;}
.fleet-h{font-size:clamp(28px,4vw,46px); margin:8px 0 12px;}
.fleet-intro{color:var(--smoke); margin:0;}
.fleet-grid{display:grid; gap:14px; grid-template-columns:2fr 1fr;}
@media(max-width:860px){ .fleet-grid{grid-template-columns:1fr;} }
.rig{border:1px solid var(--rail); border-radius:6px; overflow:hidden; background:var(--asphalt); display:grid; grid-template-rows:auto 1fr;}
.rig-shot{aspect-ratio:21/9; background:#0F1114; position:relative;}
.rig-shot img{width:100%; height:100%; object-fit:cover;}
.rig.is-panda .rig-shot::after{content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--panda-m),var(--panda-l),var(--panda-t));}
.rig-body{padding:18px; display:grid; gap:10px; align-content:start;}
.rig-name{font-family:var(--display); font-style:italic; font-weight:700; font-size:30px; line-height:1; margin:0;}
.rig-year{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--smoke);}
.rig-story{margin:0; color:var(--smoke); font-size:14px; line-height:1.55;}
.rig-story b{color:var(--bone);}
.rig-sheet{margin:6px 0 0; display:grid; gap:3px; font-family:var(--slipface); font-size:12px;}
.rig-sheet div{display:grid; grid-template-columns:110px 1fr; gap:10px; border-bottom:1px dotted var(--rail-2); padding:3px 0;}
.rig-sheet dt{color:var(--smoke-dim); margin:0;} .rig-sheet dd{margin:0; color:var(--bone);}
.rig-tag{display:inline-block; font-family:var(--cond); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:#07110A; background:var(--signal); padding:3px 8px; border-radius:2px; justify-self:start;}
.rig.is-panda .rig-tag{background:linear-gradient(90deg,var(--panda-m),var(--panda-t)); color:#fff;}
.rig-none{aspect-ratio:21/9; display:grid; place-items:center; background:repeating-linear-gradient(135deg,#0F1114 0 12px,#121519 12px 24px); font-family:var(--cond); letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--smoke-dim);}

/* ---------- events ---------- */
.events{padding:clamp(30px,4vw,56px) 0 10px; border-top:1px solid var(--rail);}
.events-grid{display:grid; gap:28px; grid-template-columns:1.4fr 1fr; align-items:start;}
@media(max-width:860px){ .events-grid{grid-template-columns:1fr;} }
.events-h{font-size:clamp(28px,4vw,46px); margin:8px 0 12px;}
.events-intro{color:var(--smoke); margin:0 0 18px;}
.events-list{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.ev{display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--rail); border-radius:4px; background:var(--asphalt);}
.ev.is-past{opacity:.45;}
.ev.is-own{border-color:var(--signal);}
.ev-d{font-family:var(--display); font-style:italic; font-weight:700; font-size:15px; color:var(--signal); line-height:1.1;}
.ev.is-past .ev-d{color:var(--smoke);}
.ev-n{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:16px; line-height:1.15;}
.ev-w{display:block; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:13px; color:var(--smoke); margin-top:2px;}
.ev-k{font-family:var(--cond); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; color:var(--smoke-dim);}
.ev.is-own .ev-k{color:var(--signal);}
.events-poster{border:1px solid var(--rail); border-radius:6px; overflow:hidden; background:var(--asphalt);}
.events-poster img{width:100%;}
.events-poster p{margin:0; padding:10px 14px; font-size:12.5px; color:var(--smoke);}

/* ---------- partners ---------- */
.partners{padding:clamp(30px,4vw,56px) 0 10px; border-top:1px solid var(--rail);}
.partners-head{margin-bottom:18px;}
.partners-h{font-size:clamp(24px,3.4vw,38px); margin:8px 0 0;}
.partners-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.partner{display:grid; gap:8px; padding:14px; border:1px solid var(--rail); border-radius:4px; background:var(--asphalt); min-height:120px; align-content:start;}
.partner-logo{height:44px; display:flex; align-items:center;}
.partner-logo img{max-height:44px; max-width:100%; width:auto; filter:brightness(1.05);}
.partner-name{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:14px; line-height:1.2;}
.partner-line{margin:0; font-size:12.5px; color:var(--smoke);}
.partner-lead{grid-column:span 2; border-color:var(--signal);}
@media(max-width:560px){ .partner-lead{grid-column:span 1;} }

/* ---------- watch ---------- */
.watch{padding:clamp(30px,4vw,56px) 0 10px; border-top:1px solid var(--rail);}
.watch-head{max-width:64ch; margin-bottom:18px;}
.watch-h{font-size:clamp(28px,4vw,46px); margin:8px 0 12px;}
.watch-intro{color:var(--smoke); margin:0;}
.watch-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.chan{display:grid; gap:8px; align-content:start; padding:16px; border:1px solid var(--rail); border-radius:5px; background:var(--asphalt); transition:border-color .15s;}
.chan:hover{border-color:var(--signal);}
.chan-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.chan-k{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--signal);}
.chan-h{font-family:var(--display); font-style:italic; font-weight:700; font-size:18px; line-height:1; color:var(--bone);}
.chan-h:hover{color:var(--signal);}
.chan-stats{margin:0; font-family:var(--slipface); font-size:12px; color:var(--smoke);}
.chan-latest{display:grid; gap:8px; margin-top:4px; border:1px solid var(--rail-2); border-radius:4px; overflow:hidden; background:#0F1114; transition:border-color .15s;}
.chan-latest:hover{border-color:var(--signal);}
.chan-thumb{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#0F1114;}
.chan-thumb img{width:100%; height:100%; object-fit:cover;}
.chan-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(8,9,11,.75); border:1px solid var(--signal); color:var(--signal); display:grid; place-items:center; font-size:14px; padding-left:3px;}
.chan-vbody{display:grid; gap:3px; padding:0 12px 12px;}
.chan-latest:not(:has(.chan-thumb)) .chan-vbody{padding-top:12px;}
.chan-vk{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; color:var(--smoke-dim);}
.chan-vt{font-family:var(--cond); font-weight:600; font-size:15px; line-height:1.25; color:var(--bone);}
.chan-vm{font-size:12px; color:var(--smoke);}
.chan-follow{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--signal); margin-top:4px;}
.chan-l{margin:0; color:var(--smoke); font-size:13.5px;}
.watch-note{margin:14px 0 0; color:var(--smoke-dim); font-size:13px;}

/* ---------- shop ---------- */
.shop{margin-top:clamp(36px,5vw,72px); border-top:1px solid var(--rail); background:var(--asphalt);}
.shop-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0;}
@media(max-width:860px){ .shop-grid{grid-template-columns:1fr;} }
.shop-copy{padding:clamp(36px,5vw,72px) var(--gut);}
.shop-h{font-size:clamp(30px,4.4vw,52px); margin:0 0 14px;}
.shop-p{color:var(--smoke); max-width:48ch; margin:0 0 22px;}
.shop-facts{margin:0; display:grid; gap:10px;}
.shop-facts div{display:grid; grid-template-columns:90px 1fr; gap:12px; border-top:1px solid var(--rail); padding-top:10px;}
.shop-facts dt{font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--smoke-dim); margin:0; padding-top:3px;}
.shop-facts dd{margin:0; font-size:15px;}
.shop-facts dd a{border-bottom:1px solid var(--signal);}
.shop-shot{min-height:320px; background-size:cover; background-position:center;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rail); padding:22px 0 90px;}
.foot-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--smoke-dim);}
.foot-links{display:flex; gap:16px; flex-wrap:wrap;}
.foot-links a{color:var(--smoke); border-bottom:1px solid var(--rail-2);}

/* ---------- drawers: the cam card ---------- */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60;}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100vw); background:var(--slip); color:var(--slip-ink); z-index:70; transform:translateX(102%); transition:transform .25s cubic-bezier(.2,.8,.2,1); display:grid; grid-template-rows:auto 1fr auto; font-family:var(--slipface);
  background-image:linear-gradient(180deg,rgba(0,0,0,.03) 0 1px,transparent 1px); background-size:100% 28px;
  box-shadow:-10px 0 40px rgba(0,0,0,.6);}
.drawer::before{content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--signal);}
.drawer.open{transform:none;}
.slip-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px 12px 24px; border-bottom:2px solid var(--slip-ink);}
.slip-title{font-family:var(--display); font-style:italic; font-weight:700; text-transform:uppercase; font-size:16px; letter-spacing:.06em; margin:0;}
.slip-x{font-size:26px; line-height:1; width:36px; height:36px; border-radius:50%;}
.slip-x:hover{background:var(--slip-2);}
.slip-scroll{overflow:auto;}
.slip-pad{padding:18px 18px 18px 24px;}
.slip-shot{background:#fff; border:1px solid var(--slip-2); margin-bottom:14px; aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center; position:relative;}
.slip-shot img{width:100%; height:100%; object-fit:cover;}
.slip-shot .shot-none{position:absolute; inset:0;}
.slip-name{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:20px; line-height:1.15; margin:0 0 4px;}
.slip-sku{font-size:11.5px; letter-spacing:.12em; color:#6B6A63; margin:0 0 14px;}
.slip-gens{display:flex; gap:6px; margin:0 0 14px;}
.slip-gens span{font-family:var(--display); font-style:italic; font-weight:700; font-size:12px; padding:3px 8px; border:1.5px solid var(--slip-ink); border-radius:2px;}
.slip-rows{margin:0 0 14px; display:grid; gap:6px;}
.slip-row{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:8px; font-size:13px;}
.slip-row dt{margin:0; text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:#6B6A63;}
.slip-row .dots{border-bottom:2px dotted #B9B6A8; transform:translateY(-4px);}
.slip-row dd{margin:0; font-weight:600; text-align:right;}
.slip-copy{font-family:var(--body); font-size:14px; line-height:1.55; margin:0 0 12px;}
.slip-foot{padding:14px 18px 18px 24px; border-top:2px dashed #B9B6A8; display:grid; gap:8px; background:var(--slip);}
.slip-price{font-family:var(--display); font-style:italic; font-weight:700; font-size:30px; margin:0; line-height:1;}
.slip-stock{margin:0; font-size:12px; color:#6B6A63;}
.cart-empty{white-space:pre-line; text-align:center; padding:40px 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6B6A63;}
.cart-lines{display:grid; gap:10px; margin-bottom:16px;}
.cart-line{display:grid; grid-template-columns:1fr auto; gap:12px; font-size:13px; border-bottom:1px dotted #B9B6A8; padding-bottom:10px;}
.cart-line-t{font-family:var(--cond); font-weight:600; text-transform:uppercase; font-size:14.5px; letter-spacing:.03em; line-height:1.2;}
.cart-line-m{display:flex; align-items:center; gap:12px; margin-top:6px; font-size:11.5px; color:#6B6A63;}
.qty{display:inline-flex; border:1.5px solid var(--slip-ink); border-radius:3px; overflow:hidden;}
.qty button{width:28px; height:26px; font-weight:700;} .qty button:hover{background:var(--slip-2);}
.qty span{min-width:28px; display:grid; place-items:center; border-inline:1.5px solid var(--slip-ink); font-weight:600;}
.cart-tot{display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-top:1px dotted #B9B6A8;}
.cart-tot b{font-family:var(--display); font-style:italic; font-size:20px;}
.cart-shiphead{margin:6px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6B6A63;}
.field{display:grid; gap:4px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#6B6A63;}
.field input{font:inherit; font-family:var(--body); font-size:15px; text-transform:none; letter-spacing:0; padding:9px 10px; border:1.5px solid #B9B6A8; border-radius:3px; background:#fff; color:var(--slip-ink);}
.field input:focus{outline:2px solid var(--signal); border-color:var(--slip-ink);}
.note{margin:0; font-family:var(--body); font-size:12px; color:#6B6A63;}

/* ---------- toast / ribbon ---------- */
.toast{position:fixed; left:50%; bottom:80px; transform:translate(-50%,20px); background:var(--slip); color:var(--slip-ink); font-family:var(--cond); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:13px; padding:10px 16px; border-radius:3px; opacity:0; transition:.2s; z-index:80; pointer-events:none; border-left:5px solid var(--signal);}
.toast.show{opacity:1; transform:translate(-50%,0);}
.ribbon{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:14px; align-items:center; padding:10px var(--gut); background:rgba(8,9,11,.92); border-top:1px solid var(--rail); font-family:var(--cond); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke);}
.ribbon b{color:var(--signal); letter-spacing:.16em;}
.ribbon a{color:var(--bone); border-bottom:1px solid var(--signal);}
.ribbon-x{margin-left:auto; font-size:20px; line-height:1; width:32px; height:32px;}
@media(max-width:640px){ .ribbon span{display:none;} }

@media(prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} html{scroll-behavior:auto;} }