/* ============================================================
   WHEELS ON FIRE — shared design system

   Tokens, type utilities, buttons, header, split-screen menu,
   breadcrumb, section furniture, CTA, footer, grain and reveals.
   Everything that is identical on every page.

   The four original pages (index, tours, bikes, contact) still carry
   their own inline copy of this; pages added later link this file.
   ============================================================ */

/* ---------- FONTS ----------
   Each file is a single cut that ALREADY is its bold. Declaring the
   400-700 range maps a heading's default weight:700 onto the real file
   instead of letting the browser fake it — faux bold smears the glyphs,
   which doubles and breaks every -webkit-text-stroke outline. */
@font-face{font-family:'FuturaMd';src:url('fonts/Futura-Condensed-Medium.otf') format('opentype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Futura';src:url('fonts/Futura-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Andale';src:url('fonts/ANDALEMO.TTF') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'AndaleB';src:url('fonts/ANDALEBMO.TTF') format('truetype');font-weight:400 700;font-display:swap}

/* the tokens are assets/tokens.css, loaded before this file */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:var(--cream)}

.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.84;letter-spacing:-0.03em}
/* A line-height of .84 is an optical setting for display type at 100px and up,
   where the cap height fills the line and the tightness reads as deliberate.
   At the 34-44px these headings fall to on a phone the lines nearly touch, so
   the ratio opens up as the type gets smaller. */
@media (max-width:640px){ .disp{line-height:.95} }

/* Hairline stroke that stays thin at poster scale, and a touch more
   letter-spacing so neighbouring outlines never collide. */
.outline-c,.outline-i{letter-spacing:-0.02em}
.outline-c{color:var(--cream)}
.outline-i{color:var(--ink)}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.kicker::before{content:'';width:10px;height:10px;background:var(--red);flex:none}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--med);text-transform:uppercase;letter-spacing:.08em;font-size:15px;padding:14px 26px;border:1px solid;cursor:pointer;position:relative;overflow:hidden;transition:color .28s ease;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;transform:translateY(101%);transition:transform .28s cubic-bezier(.65,0,.35,1);z-index:-1}
.btn:hover::after{transform:translateY(0)}
.btn .arr{width:26px;height:19px;flex:none;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.btn:hover .arr{transform:translateX(6px)}
.btn-red{background:var(--red);border-color:var(--red);color:var(--cream)}
.btn-red::after{background:var(--cream)}
.btn-red:hover{color:var(--ink)}
.btn-ghost-c{background:transparent;border-color:rgba(241,237,228,.5);color:var(--cream)}
.btn-ghost-c::after{background:var(--cream)}
.btn-ghost-c:hover{color:var(--ink);border-color:var(--cream)}
.btn-ghost-i{background:transparent;border-color:rgba(26,26,26,.45);color:var(--ink)}
.btn-ghost-i::after{background:var(--ink)}
.btn-ghost-i:hover{color:var(--cream);border-color:var(--ink)}

/* the header and the menu are assets/chrome.css, shared with the pages
   that carry their own inline CSS */

/* ---------- PAGE HERO + BREADCRUMB ---------- */
.ph{position:relative;min-height:var(--page-hero-h,60svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ph-media{position:absolute;inset:-10% 0;z-index:0}
.ph-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.ph-shade{position:absolute;inset:0;z-index:1;
  /* A vignette over the top/bottom ramp: the corners fall away so the
     breadcrumb and the page name stay readable whatever the photo does. */
  background:
    /* the curtain, only under the breadcrumb and the title */
    radial-gradient(95% 95% at 12% 106%, rgba(12,10,9,.88) 0%, rgba(12,10,9,.72) 32%,
      rgba(12,10,9,.30) 60%, rgba(12,10,9,0) 80%)}
.ph-content{position:relative;z-index:3;padding:0 var(--pad) clamp(56px,9vh,120px)}
.ph-content h1{font-size:var(--fs-display)}
.ph-content h1 .dot{color:var(--red)}

/* ---------- SECTION FURNITURE ---------- */
.light{background:var(--cream);color:var(--ink)}
.section{padding:clamp(58px,9vh,120px) var(--pad)}
.label-row{display:flex;align-items:center;gap:18px;margin-bottom:clamp(28px,4.5vh,50px);flex-wrap:wrap}
.label-row .kicker{flex:none}
.light .label-row .rule{flex:1;height:1px;background:var(--line-l)}
.dark .label-row .rule,.label-row .rule{flex:1;height:1px;background:var(--line-d)}
.light .label-row .rule{background:var(--line-l)}
.label-row .idx{font-family:var(--mono);font-size:12px;white-space:nowrap;color:var(--cream-dim)}
.light .label-row .idx{color:var(--ink-dim)}

/* the CTA band is assets/cta.css, shared with the pages that carry
   their own inline CSS */

/* ---------- FOOTER ---------- */
footer{background:var(--ink-2);color:var(--cream);padding:clamp(56px,9vh,110px) var(--pad) 34px;border-top:1px solid var(--line-d)}
.foot-grid{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(36px,6vw,110px);align-items:center;margin-bottom:clamp(48px,8vh,90px)}
.foot-logo img{width:clamp(150px,24vw,340px)}
.foot-nav{display:grid;grid-template-columns:repeat(2,max-content);gap:12px clamp(40px,5vw,90px)}
.foot-nav a{font-family:var(--disp);font-weight:700;letter-spacing:-0.02em;text-transform:uppercase;font-size:clamp(20px,2.2vw,30px);line-height:1.15;transition:color .22s}
.foot-nav a:hover{color:var(--red)}
.foot-info{max-width:280px;display:flex;flex-direction:column;gap:20px}
.foot-info p{font-size:12.5px;color:var(--cream-dim)}
.foot-info p b{color:var(--red);font-family:var(--monob);font-weight:400}
.foot-social{display:flex;gap:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.foot-social a{border-bottom:1px solid var(--line-d);padding-bottom:3px}
.foot-social a:hover{color:var(--red);border-color:var(--red)}
.foot-bottom{border-top:1px solid var(--line-d);padding-top:22px;display:flex;justify-content:space-between;gap:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,237,228,.4);flex-wrap:wrap}
/* The bottom line holds three links — Legal, General terms and the studio —
   in the same dim colour as the text around them, which left them looking
   like plain words. A hairline under them says they are clickable without
   brightening a line that is meant to sit back. */
.foot-bottom a{text-decoration:underline;text-decoration-color:rgba(241,237,228,.28);
  text-underline-offset:3px;transition:color .22s ease,text-decoration-color .22s ease}
.foot-bottom a:hover{text-decoration-color:var(--cream)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr;gap:44px;justify-items:start}.foot-nav{grid-template-columns:1fr}}

/* ---------- GRAIN + REVEALS ---------- */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-reveal]{opacity:0;transform:translateY(42px)}
.no-anim [data-reveal]{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .menu-overlay.open .mo-panel{clip-path:inset(0)}
}