/* Retro Ride Revivals: shared layout. Themes only set variables + decoration. */
:root{
  --bg:#0d0e10; --bg2:#15171a; --panel:#1b1e22; --fg:#f2eee6; --muted:#a9a49b; --line:rgba(255,255,255,.1);
  --accent:#ff8a2a; --accent2:#ffc857; --on-accent:#140b02;
  --radius:14px; --frame-radius:14px; --maxw:1240px; --gap:clamp(16px,2.4vw,28px);
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Archivo",var(--font-body); --font-ui:var(--font-body);
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{line-height:1.05;margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* sample copy tag */
.sample-tag{display:inline-block;vertical-align:middle;font:600 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;
  padding:5px 8px 4px;border-radius:999px;border:1px dashed currentColor;color:var(--muted);opacity:.9;white-space:nowrap;transform:translateY(-2px)}
/* hidden site-wide 2026-10-21 (Neil); storyIsSample still records unverified copy */
.sample-tag{display:none !important}

/* nav */
.site-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 16px/1 var(--font-body);letter-spacing:.01em}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent);color:var(--on-accent);font:900 13px/1 var(--font-body);letter-spacing:.04em}
.nav-links{display:flex;gap:clamp(10px,2vw,26px);font-size:14.5px;font-weight:600}
.nav-links a{text-decoration:none;opacity:.85}
.nav-links a:hover{opacity:1;color:var(--accent2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
/* hidden site-wide 2026-10-21 (Neil); storyIsSample still records unverified copy */
.sample-tag{display:none !important}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{border:1.5px solid color-mix(in srgb,var(--fg) 45%,transparent)}

/* ---------- bike page template ---------- */
.bike-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(28px,6vw,80px) clamp(16px,4vw,40px) clamp(40px,7vw,96px)}
.hero-deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;flex-wrap:wrap}
.bike-title{font-family:var(--font-display);font-size:clamp(44px,7vw,96px);letter-spacing:-.01em}
.bike-title .yr{display:block;font-size:.55em;opacity:.9}
.byline{font-size:clamp(19px,2vw,24px);margin:18px 0 26px;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.stats .stat{padding:12px 14px;border-radius:var(--radius);background:var(--panel)}
.stats dt{font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.stats dd{margin:6px 0 0;font:700 26px/1 var(--font-ui)}
.frame{margin:0;position:relative;border-radius:var(--frame-radius);overflow:hidden;background:var(--lqip,#222) center/cover}
.hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

main{display:block}
.panel{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,40px) 0}
.sec-title{font-family:var(--font-display);font-size:clamp(30px,4vw,50px);margin-bottom:clamp(18px,2.5vw,30px)}
.story{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.story-copy p{font-size:clamp(17px,1.4vw,19px);max-width:62ch;margin:0 0 1em}
.spec-card{padding:24px;border-radius:var(--radius);background:var(--panel)}
.spec-card h3{font-family:var(--font-display);font-size:26px}
.spec-note{font-size:13px;opacity:.7;margin:6px 0 14px}
.spec-card dl{margin:0;display:grid;gap:0}
.spec-card dl div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.spec-card dt{font-weight:700;opacity:.75}
.spec-card dd{margin:0;overflow-wrap:anywhere}

.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap);counter-reset:tl}
.tl-step>a,.tl-step>div{display:flex;flex-direction:column;gap:6px;text-decoration:none;height:100%}
.tl-num{font:700 13px/1 var(--font-ui);letter-spacing:.14em;opacity:.7}
.tl-img{display:block;border-radius:var(--frame-radius);overflow:hidden;aspect-ratio:4/3;background:var(--lqip,#333) center/cover}
.tl-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tl-step a:hover .tl-img img{transform:scale(1.05)}
.tl-soon{display:grid;place-items:center;border:2px dashed currentColor;opacity:.55;background:none}
.tl-soon span{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.tl-name{font-family:var(--font-display);font-size:24px;margin-top:4px}
.tl-count{font-size:14px;opacity:.75}

.ba{position:relative;border-radius:var(--frame-radius);overflow:hidden;aspect-ratio:16/10;max-height:78vh;background:#111;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:700 24px/1 system-ui;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.ba-label{position:absolute;top:14px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:700 13px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.ba-l{left:14px}.ba-r{right:14px}
.ba-note{font-size:14px;opacity:.75;margin:12px 0 0}

.video-card{margin:0;max-width:880px}
.video-poster{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--frame-radius);overflow:hidden;cursor:pointer;background:#000;aspect-ratio:4/3}
.video-poster img{width:100%;height:100%;object-fit:cover;opacity:.85}
.video-poster .play{position:absolute;top:50%;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--accent)}
.video-poster .play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid var(--on-accent);border-top:16px solid transparent;border-bottom:16px solid transparent}
.video-card iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--frame-radius);display:block}
.video-card figcaption{font-size:14px;opacity:.8;margin-top:10px;overflow-wrap:anywhere}

.photo-set{margin-bottom:clamp(36px,5vw,60px);scroll-margin-top:80px}
.set-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.set-head h3{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px)}
.set-count{font-size:14px;opacity:.75;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ph{position:relative;padding:0;border:0;cursor:zoom-in;border-radius:calc(var(--frame-radius)*.6);overflow:hidden;aspect-ratio:4/3;background:var(--lqip,#222) center/cover}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ph:hover img{transform:scale(1.06)}
.soon-box{display:flex;flex-direction:column;gap:4px;padding:28px;border-radius:var(--radius);border:2px dashed var(--line);text-align:center}
.soon-box b{font-family:var(--font-display);font-size:26px;font-weight:400}
.soon-box span{opacity:.75}
.more-wrap{display:flex;justify-content:center;margin-top:20px}
.load-more{padding:14px 26px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);font-weight:800;cursor:pointer}
.lm-left{opacity:.7;font-weight:600}

.site-footer{max-width:var(--maxw);margin:clamp(40px,6vw,80px) auto 0;padding:28px clamp(16px,4vw,40px) 48px;border-top:1px solid var(--line);font-size:14px;opacity:.85}
.site-footer p{margin:0 0 6px}.site-footer .fine{opacity:.7}

/* breadcrumbs (hero) */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;font:600 13px/1.3 var(--font-ui);letter-spacing:.04em;opacity:.8}
.crumbs a{text-decoration:none;border-bottom:1px solid currentColor}
.crumbs a:hover{opacity:1;color:var(--accent2)}
.crumbs span[aria-hidden]{opacity:.5}

/* FAQ: plain visible Q&A, mirrors the FAQPage JSON-LD */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gap)}
.faq-item{padding:20px 22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.faq-item h3{font-family:var(--font-display);font-size:clamp(19px,1.7vw,22px);margin:0 0 8px}
.faq-item p{margin:0;font-size:16px;opacity:.9}

/* portrait (phone) video */
.video-card.is-portrait,.bike-page .video-card.is-portrait{max-width:380px}
.video-card.is-portrait .video-poster,.video-card.is-portrait iframe{aspect-ratio:9/16}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,5,7,.94);display:grid;grid-template-columns:64px 1fr 64px;align-items:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.lightbox img{max-width:100%;max-height:84vh;object-fit:contain;border-radius:8px}
.lightbox figcaption{color:#ddd;font-size:14px}
.lightbox button{background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:50%;width:52px;height:52px;font-size:34px;line-height:1;cursor:pointer;justify-self:center}
.lb-close{position:absolute;top:14px;right:14px}

@media (max-width:900px){
  .hero-inner,.story{grid-template-columns:1fr}
  .hero-photo{order:-1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .nav-links a:not(:last-child){display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .timeline{grid-template-columns:repeat(2,1fr);gap:14px}
  .tl-name{font-size:19px}
  .ba{aspect-ratio:4/5}
  .lightbox{grid-template-columns:1fr}
  .lb-prev,.lb-next{position:absolute;bottom:18px}
  .lb-prev{left:18px}.lb-next{right:18px}
  .spec-card dl div{grid-template-columns:96px 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* header extras: Shop Notes stamp badge, social icons; home "fresh from the shop" strip; footer follow row (2026-10-22) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-right{display:flex;align-items:center;gap:clamp(10px,1.8vw,22px)}
.notes-stamp{position:relative;display:inline-block;padding:5px 10px 4px;border:2.5px double currentColor;color:var(--accent2);transform:rotate(-4deg);
  font:800 12px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .15s}
.notes-stamp:hover,.notes-stamp:focus-visible{transform:rotate(0deg) scale(1.04)}
.notes-dot{position:absolute;top:-5px;right:-5px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.social{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;opacity:.85;color:inherit}
.social a:hover,.social a:focus-visible{opacity:1;color:var(--accent2);background:color-mix(in srgb,var(--fg) 10%,transparent)}
.fresh-strip{margin:0;padding:8px clamp(16px,4vw,40px);background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;text-align:center}
.fresh-strip a{color:inherit;text-decoration:none}
.fresh-strip a:hover span:last-child,.fresh-strip a:focus-visible span:last-child{margin-left:4px}
.fresh-strip a span:first-child{opacity:.8;font-weight:600}
.site-footer .follow a{color:inherit}
.yt-cta{margin:18px 0 0}
@media (max-width:560px){
  .brand-name{display:none}
  .nav-right{gap:8px}
  .social a{width:30px;height:30px}
  .fresh-strip{font-size:13px}
}