/* Midwest Street Cars — storefront concept.
   Palette sampled from their own shirts, not chosen: the orange, blue and
   yellow are the Pontiac Judge stripes on the All Rise for The Judge art
   (#E5682A / #4A73B8 / #F7C929), the deeper blue is The Crow lettering on the
   hats (#1B66C5), the black is every shirt they sell. Signature device is the
   list — ten spots — and the call-out, the one light 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:#E5682A;          /* Judge orange */
  --signal-deep:#9E3E0E;
  --flame:#1B66C5;           /* The Crow blue */
  --gold:#F7C929;            /* Judge yellow — list numbers only */
  --slip:#F1EFE6;
  --slip-2:#E2DFD2;
  --slip-ink:#1E1F1B;
  --tape:#E9DDB4;
  --tape-ink:#1A1A1A;
  --go:#E5682A;
  --panda-m:#E5682A; --panda-t:#1B66C5; --panda-l:#F7C929;

  --display:'Bowlby One SC','Arial Black',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;
  --marker:'IBM Plex Mono',ui-monospace,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:400; font-style:normal;
  text-transform:uppercase; letter-spacing:.01em; line-height:.96; 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;} }




/* ============ Midwest Street Cars ============ */
.h-display{letter-spacing:.01em; line-height:1.02;}
.btn-signal{color:#fff;} .btn-signal:hover{background:#FF7A36;}
.cart-n{color:#fff;} .announce{color:#fff; text-transform:none; letter-spacing:.06em; font-size:13px; font-weight:600;}
.announce a{border-bottom-color:rgba(255,255,255,.5);}
.card-add:hover{color:#fff;}
.mark{gap:10px; align-items:center;}
.mark-logo{width:40px; height:40px; border-radius:50%; border:1px solid var(--rail-2);}
.mark-a{font-size:20px; letter-spacing:.02em;} .mark-b{font-style:normal; color:var(--signal); letter-spacing:.22em; font-size:11px;}
.lane-n,.rig-name,.chan-h,.price,.slip-title,.job-gen{font-style:normal; font-weight:400;}
.card-gen span,.slip-gens span{font-style:normal;}
:focus-visible{outline-color:var(--flame);}
.tag{letter-spacing:.2em;}

/* hero: the flashlight */
.hero{min-height:min(78vh,680px);}
.hero-bg{background-position:center 40%;}
.hero-h{max-width:12ch; font-size:clamp(44px,8vw,104px); text-shadow:0 4px 30px rgba(0,0,0,.6);}
.hero-sub{max-width:46ch;}
.flash{display:flex; align-items:center; gap:12px; padding-bottom:12px;}
.flash-lamp{width:18px; height:18px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(247,201,41,.18), 0 0 26px 8px rgba(247,201,41,.45); animation:flash 3.2s ease-in-out infinite;}
.flash-t{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.24em; font-size:12px; color:var(--gold);}
@keyframes flash{0%,80%,100%{opacity:.35; box-shadow:0 0 0 4px rgba(247,201,41,.08), 0 0 6px 2px rgba(247,201,41,.2)} 88%{opacity:1; box-shadow:0 0 0 4px rgba(247,201,41,.25), 0 0 40px 14px rgba(247,201,41,.6)}}
@media(prefers-reduced-motion:reduce){.flash-lamp{animation:none;}}

/* the list */
.list{padding:clamp(40px,6vw,72px) 0 10px; border-bottom:1px solid var(--rail); background:linear-gradient(180deg,#0B0C0F,var(--void));}
.list-head{max-width:64ch; margin-bottom:22px;}
.list-h{font-size:clamp(34px,5.2vw,64px); margin:8px 0 12px;}
.list-sub{color:var(--smoke); margin:0;}
.list-grid{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.spot{display:grid; grid-template-columns:64px 96px 1fr auto; gap:16px; align-items:center; padding:10px 14px 10px 6px; border:1px solid var(--rail); border-radius:6px; background:var(--asphalt); transition:border-color .15s, transform .15s;}
.spot:hover{border-color:var(--signal); transform:translateX(3px);}
.spot-top{border-color:var(--signal); background:linear-gradient(90deg,rgba(229,104,42,.12),var(--asphalt) 40%);}
.spot-n{font-family:var(--display); font-size:44px; line-height:1; color:var(--gold); text-align:center;}
.spot-top .spot-n{color:var(--signal);}
.spot-shot{display:block; width:96px; aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:#0F1114;}
.spot-shot img{width:100%; height:100%; object-fit:cover;}
.spot-body{display:grid; gap:2px; min-width:0;}
.spot-k{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; color:var(--smoke-dim);}
.spot-top .spot-k{color:var(--signal);}
.spot-t{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:19px; line-height:1.1;}
.spot-s{font-family:var(--slipface); font-size:12px; color:var(--smoke);}
.spot-p{font-family:var(--display); font-size:18px; color:var(--bone);}
.spot-go{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; padding:12px 16px; border:1px solid var(--signal); color:var(--signal); border-radius:3px; white-space:nowrap;}
.spot-go:hover{background:var(--signal); color:#fff;}
.list-note{margin:16px 0 0; font-size:13.5px; color:var(--smoke-dim); max-width:80ch;}
@media(max-width:700px){
  .spot{grid-template-columns:40px 72px 1fr; gap:10px;}
  .spot-n{font-size:30px;} .spot-shot{width:72px;}
  .spot-go{grid-column:2 / -1; justify-self:start;}
}

/* lanes: each lane carries its car's story */
.lane-story{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:baseline; margin:-4px 0 14px; padding:12px 16px; border-left:4px solid var(--flame); background:rgba(27,102,197,.07); border-radius:0 5px 5px 0;}
.lane-story-k{font-family:var(--display); font-size:18px; color:var(--bone);}
.lane-story-l{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--smoke);}
.lane-story-spec{grid-column:1 / -1; margin:0; display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--slipface); font-size:12px;}
.lane-story-spec div{display:flex; gap:8px;} .lane-story-spec dt{color:var(--smoke-dim); margin:0;} .lane-story-spec dd{margin:0; color:var(--bone);}
.card-shot{aspect-ratio:1/1;}
.card-badge{position:absolute; right:8px; top:8px; z-index:1; font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; padding:5px 8px; border-radius:2px; background:var(--gold); color:#1A1400;}
.card-sizes{margin:0; font-family:var(--slipface); font-size:11.5px; color:var(--smoke); letter-spacing:.04em;}
.slip-gens .tape{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:11px; padding:5px 8px; background:var(--gold); color:#1A1400; border-radius:2px;}
.slip-row dd{margin:0; font-family:var(--slipface); font-size:13px; color:var(--slip-ink);}
.slip-sizes{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; align-items:center;}
.slip-sizes-k{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:#6B6A63; margin-right:4px;}
.size{font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; border:1px solid #B9B6A8; border-radius:2px; color:var(--slip-ink); background:#fff;}
.size:hover{border-color:var(--slip-ink);} .size.on{background:var(--slip-ink); color:var(--slip); border-color:var(--slip-ink);}
.btn-slip:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.drawer::before{background:var(--signal);}

/* drop alerts */
.alerts{margin:clamp(30px,4vw,56px) 0 10px; border:1px solid var(--rail); border-radius:8px; background:linear-gradient(135deg,rgba(229,104,42,.14),rgba(27,102,197,.10)); overflow:hidden;}
.alerts-in{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; padding:clamp(22px,3vw,40px);}
.alerts-h{font-size:clamp(28px,4vw,46px); margin:8px 0 12px;}
.alerts-intro{color:var(--smoke); margin:0; max-width:48ch;}
.alerts-form{display:grid; gap:10px; align-content:start;}
.alerts-form .field{display:grid; gap:4px;}
.alerts-form .field span{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--smoke);}
.alerts-form input{font:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--rail-2); border-radius:3px; background:var(--void); color:var(--bone);}
.alerts-form input:focus{outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal);}
.alerts-fine{margin:0; font-size:12.5px; color:var(--smoke-dim);}
@media(max-width:760px){.alerts-in{grid-template-columns:1fr;}}

/* the cars */
.rig.is-panda .rig-shot::after{background:linear-gradient(90deg,var(--signal),var(--gold),var(--flame));}
.rig.is-panda .rig-tag{background:linear-gradient(90deg,var(--signal),var(--flame)); color:#fff;}
.fleet-grid{grid-template-columns:1.4fr 1fr 1fr;}
@media(max-width:960px){.fleet-grid{grid-template-columns:1fr;}}

/* the cats */
.cats{padding:clamp(30px,4vw,56px) 0 10px; border-top:1px solid var(--rail);}
.cats-head{max-width:64ch; margin-bottom:22px;}
.cats-h{font-size:clamp(30px,4.6vw,54px); margin:8px 0 12px;}
.cats-intro{color:var(--smoke); margin:0;}
.cats-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.cat{border:1px solid var(--rail); border-radius:6px; overflow:hidden; background:var(--asphalt); display:flex; flex-direction:column; transition:border-color .15s;}
.cat:hover{border-color:var(--signal);}
.cat-shot{position:relative; aspect-ratio:4/3; background:#0F1114; overflow:hidden;}
.cat-shot img{width:100%; height:100%; object-fit:cover;}
.cat-none{background:repeating-linear-gradient(135deg,#13161B 0 12px,#0F1114 12px 24px);}
.cat-none::after{content:'📷  photo from the phone'; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--smoke-dim);}
.cat-body{padding:14px; display:grid; gap:4px;}
.cat-name{font-family:var(--display); font-size:22px; margin:0; line-height:1.1;}
.cat-name-v{font-family:var(--cond); font-weight:600; text-transform:none; font-size:15px; letter-spacing:0;}
.cat-role{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--signal);}
.cat-line{margin:0; font-size:13.5px; color:var(--smoke);}
.cat-ph{border-style:dashed;}

/* contact */
.shop-shot{background-position:center 30%;}

/* the camera: one featured card for the channel that carries a video, then
   the follow cards in an even row — no stagger */
.watch-grid{grid-template-columns:repeat(5,1fr); gap:10px; align-items:stretch;}
.chan{min-height:150px;}
.chan.has-latest{grid-column:1 / -1; display:grid; grid-template-columns:minmax(280px,440px) 1fr; grid-template-areas:"latest top" "latest stats" "latest line"; column-gap:22px; align-content:start; padding:16px;}
.chan.has-latest .chan-latest{grid-area:latest; margin:0; align-self:stretch;}
.chan.has-latest .chan-top{grid-area:top;} .chan.has-latest .chan-stats{grid-area:stats;} .chan.has-latest .chan-l{grid-area:line; align-self:end; margin-top:auto;}
.chan.has-latest .chan-h{font-size:26px;}
.chan.has-latest .chan-thumb{aspect-ratio:16/9;}
.chan.has-latest .chan-vt{font-size:17px;}
.chan-follow{margin-top:auto;}
.chan:not(.has-latest){grid-template-rows:auto auto 1fr auto;}
.chan:not(.has-latest) .chan-l{order:3;} .chan:not(.has-latest) .chan-follow{order:4;}
@media(max-width:1000px){.watch-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.watch-grid{grid-template-columns:1fr 1fr;} .chan.has-latest{grid-template-columns:1fr; grid-template-areas:"top" "stats" "latest" "line";}}
/* handles are long; the display face is wide. Condensed for handles, and nothing may push the grid past the wrap. */
.watch-grid{min-width:0;}
.chan{min-width:0; overflow:hidden;}
.chan-h{font-family:var(--cond); font-weight:700; font-size:17px; letter-spacing:.04em; overflow-wrap:anywhere; text-transform:none;}
.chan-top{flex-direction:column; align-items:flex-start; gap:3px;}
.chan.has-latest .chan-h{font-size:24px;}
.chan.has-latest .chan-top{align-self:start;}
.chan.has-latest .chan-stats{align-self:start;}
.chan.has-latest{grid-template-rows:auto auto 1fr;}
@media(max-width:640px){.watch-grid > .chan:nth-child(6){grid-column:1 / -1;}}
/* two channels carry a video now: they sit side by side, the follow cards fill a row of four under them */
.watch-grid{grid-template-columns:repeat(4,1fr); grid-auto-flow:dense;}
.chan.has-latest{grid-column:span 2; grid-template-columns:minmax(180px,46%) 1fr; column-gap:16px;}
.chan.has-latest .chan-h{font-size:20px;}
.chan.has-latest .chan-vt{font-size:15px;}
@media(max-width:1000px){.watch-grid{grid-template-columns:repeat(2,1fr);} .chan.has-latest{grid-column:1 / -1;}}
@media(max-width:640px){.watch-grid{grid-template-columns:1fr 1fr;} .watch-grid > .chan:nth-child(6){grid-column:auto;}}
/* mobile last, so it wins */
@media(max-width:640px){
  .watch-grid{grid-template-columns:1fr 1fr;}
  .chan.has-latest{grid-column:1 / -1; grid-template-columns:1fr; grid-template-areas:"top" "stats" "latest" "line"; column-gap:0;}
  .chan.has-latest .chan-h{font-size:18px;}
}
@media(max-width:640px){ .watch-grid > .chan.has-latest:nth-child(n){grid-column:1 / -1;} }