/* ==========================================================================
   VRCC Moravia – design tokens
   Valkyrie Riders Cruiser Club · Chapter Moravia
   Colours sampled from export/01_logo/logo_moravia-chapter.png (PIL).
   The logo file is quantised to the 216 "web-safe" palette, so the logo hexes
   are exact file values (#CC0000, #FFCC00 …); derived tones are marked "derived".
   ========================================================================== */

/* Fonts – all four families verified to contain ě š č ř ž ý á í é ů ú ď ť ň
   (Google Fonts latin-ext subset; checked against the API's text= subsetting). */

:root {
  /* ---- Brand core (sampled from logo) ---------------------------------- */
  --vr-red:          #CC0000;  /* Moravian red – shield, checker, bars (logo) */
  --vr-red-hot:      #FF3333;  /* highlight red – wing tips, focus, small accents (logo) */
  --vr-red-deep:     #990000;  /* pressed / shadow red (logo) */
  --vr-red-blood:    #330000;  /* darkest red – vignettes, red-tinted surfaces (logo) */
  --vr-gold:         #FFCC00;  /* crown gold – ribbon, crown, numbers (logo) */
  --vr-gold-deep:    #CC9900;  /* gold shadow / hover on gold (logo) */
  --vr-black:        #000000;  /* logo ground (logo) */
  --vr-white:        #FFFFFF;  /* eagle head, lettering (logo) */

  /* ---- Steel (logo greys + derived) ------------------------------------- */
  --vr-steel-100:    #CCCCCC;  /* chrome highlight (logo) */
  --vr-steel-300:    #999999;  /* brushed steel (logo) */
  --vr-steel-500:    #666666;  /* gunmetal (logo) */
  --vr-steel-700:    #333333;  /* wing shadow (logo) */

  /* ---- Neutrals (derived, warm – leather & asphalt, not blue-grey) ------- */
  --vr-ink:          #0B0A09;  /* page background */
  --vr-asphalt:      #141211;  /* section alt background */
  --vr-leather:      #1C1917;  /* cards / raised surfaces */
  --vr-saddle:       #272320;  /* hover surface, inputs */
  --vr-seam:         #3A3430;  /* borders, dividers */
  --vr-bone:         #F2EDE4;  /* primary text, checker light square */
  --vr-parchment:    #BDB4A8;  /* secondary text (≥ 9:1 on ink) */
  --vr-dust:         #8A8178;  /* tertiary text, captions (≥ 5:1 on ink) */

  /* ---- Semantic --------------------------------------------------------- */
  --bg:              var(--vr-ink);
  --bg-alt:          var(--vr-asphalt);
  --surface:         var(--vr-leather);
  --surface-hover:   var(--vr-saddle);
  --border:          var(--vr-seam);
  --text:            var(--vr-bone);
  --text-muted:      var(--vr-parchment);
  --text-faint:      var(--vr-dust);
  --accent:          var(--vr-red);
  --accent-text:     var(--vr-red-hot);   /* red used AS text on dark (5.4:1) */
  --highlight:       var(--vr-gold);
  --on-accent:       var(--vr-white);     /* white on #CC0000 = 5.9:1 */
  --on-highlight:    var(--vr-ink);       /* ink on gold = 13:1 */
  --focus-ring:      0 0 0 2px var(--vr-ink), 0 0 0 4px var(--vr-gold);

  /* ---- Chrome / metal gradients ----------------------------------------- */
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 38%, #666666 52%, #999999 70%, #F2EDE4 100%);
  --gold-leaf: linear-gradient(180deg, #FFE27A 0%, #FFCC00 45%, #CC9900 100%);
  --red-lacquer: linear-gradient(180deg, #E01010 0%, #CC0000 50%, #990000 100%);
  --vignette: radial-gradient(120% 80% at 50% 0%, rgba(204,0,0,.18) 0%, rgba(51,0,0,.10) 35%, transparent 70%);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Barlow Condensed", Impact, sans-serif; /* headlines, CAPS */
  --font-slab:    "Alfa Slab One", Rockwell, Georgia, serif;                      /* member names, numbers, plates */
  --font-label:   "Barlow Condensed", "Arial Narrow", sans-serif;                 /* nav, eyebrows, buttons, meta */
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;    /* running text */

  /* Fluid type scale (360 px → 1440 px viewport) */
  --fs-hero:  clamp(3.25rem, 1.6rem + 7.3vw, 8.5rem);   /* 52 → 136 */
  --fs-h1:    clamp(2.5rem, 1.6rem + 4vw, 5.25rem);     /* 40 → 84  */
  --fs-h2:    clamp(2rem, 1.45rem + 2.4vw, 3.5rem);     /* 32 → 56  */
  --fs-h3:    clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);  /* 24 → 36  */
  --fs-h4:    clamp(1.25rem, 1.15rem + .45vw, 1.5rem);  /* 20 → 24  */
  --fs-lead:  clamp(1.125rem, 1.04rem + .4vw, 1.375rem);/* 18 → 22  */
  --fs-body:  1.0625rem;                                /* 17 */
  --fs-small: .9375rem;                                 /* 15 */
  --fs-label: .8125rem;                                 /* 13, uppercase, tracked */
  --fs-micro: .6875rem;                                 /* 11 */

  --lh-tight: .92;
  --lh-snug:  1.15;
  --lh-body:  1.6;
  --tracking-display: .01em;
  --tracking-label:   .16em;
  --tracking-plate:   .04em;

  /* ---- Spacing (4 px base) ---------------------------------------------- */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter:    clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --container: 76rem;     /* 1216 px */
  --container-narrow: 46rem;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-0: 0;          /* default: hard, machined edges */
  --radius-1: 2px;        /* buttons, inputs */
  --radius-2: 4px;        /* cards */
  --radius-plate: 6px;    /* number plates */
  --radius-pill: 999px;   /* tags only */
  --cut: 14px;            /* chamfered corner size (clip-path) */
  --clip-chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));

  /* ---- Lines & shadows -------------------------------------------------- */
  --rule:        1px solid var(--vr-seam);
  --rule-red:    3px solid var(--vr-red);
  --rule-gold:   2px solid var(--vr-gold);
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px -12px rgba(0,0,0,.8);
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
  --glow-red: 0 0 0 1px rgba(204,0,0,.6), 0 10px 40px -10px rgba(204,0,0,.55);
  --glow-gold: 0 0 24px rgba(255,204,0,.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-throttle: cubic-bezier(.7,0,.2,1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 600ms;

  /* ---- Checker (Moravian eagle) --------------------------------------- */
  --checker-size: 24px;
  --checker-a: var(--vr-red);
  --checker-b: var(--vr-bone);
}

/* ==========================================================================
   Checker pattern utilities – pure CSS, no images
   ========================================================================== */

/* Diamond checker – the eagle-wing pattern (squares rotated 45°) */
.vr-checker {
  background-color: var(--checker-b);
  background-image: conic-gradient(from 45deg, var(--checker-a) 25%, var(--checker-b) 0 50%, var(--checker-a) 0 75%, var(--checker-b) 0);
  background-size: var(--checker-size) var(--checker-size);
}

/* Straight checker – for small chips, flags, 1-row strips */
.vr-checker--square {
  background-image: conic-gradient(var(--checker-a) 25%, var(--checker-b) 0 50%, var(--checker-a) 0 75%, var(--checker-b) 0);
}

/* Checker that fades out (like the wing feathers) – use on dividers / hero edge */
.vr-checker--fade {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
}

/* Thin checker band (section divider): 2 rows of 6 px squares */
.vr-checker-band {
  height: 12px;
  background-color: var(--checker-b);
  background-image: conic-gradient(var(--checker-a) 25%, var(--checker-b) 0 50%, var(--checker-a) 0 75%, var(--checker-b) 0);
  background-size: 12px 12px;
}

/* Black/white Silesian variant (left wing) */
.vr-checker--steel { --checker-a: var(--vr-ink); --checker-b: var(--vr-steel-700); }

/* Chrome text (headline accent) */
.vr-chrome-text {
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ==========================================================================
   VRCC Moravia – site styles
   ========================================================================== */
:root { --head-h: 72px; --head-band: 6px; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
::selection { background: var(--vr-red); color: #fff; }

:focus-visible { outline: 2px solid var(--vr-gold); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--vr-gold); color: var(--vr-ink); padding: 12px 18px;
  font-family: var(--font-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip:focus { top: 16px; outline: 2px solid var(--vr-ink); }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.chrome-text {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* checker ----------------------------------------------------------------- */
.checker, .checker-sq, .checker-band {
  --a: var(--vr-red); --b: var(--vr-bone);
  background-color: var(--b);
}
.checker { background-image: conic-gradient(from 45deg, var(--a) 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0); background-size: 12px 12px; }
.checker-sq, .checker-band { background-image: conic-gradient(var(--a) 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0); }
.checker-sq { background-size: 6px 6px; }
.checker-band { height: 12px; background-size: 12px 12px; }
.checker-band--fade {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 100%);
}

/* buttons ----------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; line-height: 1;
  padding: 14px 22px; border-radius: var(--radius-1); text-decoration: none; border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur), transform var(--dur) var(--ease-out);
}
.btn .arr { transition: transform var(--dur) var(--ease-out); flex: none; }
.btn--primary { background: var(--vr-red); color: var(--on-accent); clip-path: var(--clip-chamfer); }
.btn--primary:hover { background: var(--vr-red-deep); }
.btn--primary:active { background: var(--vr-red-deep); }
.btn--secondary { background: transparent; color: var(--vr-bone); box-shadow: inset 0 0 0 1px rgba(242,237,228,.4); }
.btn--secondary:hover { color: var(--vr-gold); box-shadow: inset 0 0 0 1px var(--vr-gold); }
.btn:focus-visible { clip-path: none; outline: none; box-shadow: var(--focus-ring); }
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: .8rem; --cut: 10px; }

.tlink {
  color: var(--vr-bone); text-decoration: underline; text-decoration-color: var(--vr-red-hot);
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--dur);
}
.tlink:hover { color: var(--vr-gold); }
.ext { display: inline-block; vertical-align: -1px; margin-left: 2px; }

.tag {
  display: inline-flex; align-items: center; font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: .75rem; line-height: 1; padding: 5px 10px 4px; border-radius: var(--radius-pill); border: 1px solid;
}
.tag--red { color: var(--vr-red-hot); border-color: rgba(255,51,51,.5); background: rgba(204,0,0,.12); }
.tag--steel { color: var(--vr-steel-100); border-color: var(--vr-seam); }
.tag--gold { color: var(--vr-gold); border-color: rgba(255,204,0,.5); }
.tag--done { color: var(--vr-parchment); border-color: var(--vr-seam); background: var(--vr-ink); }

/* number plate ------------------------------------------------------------ */
.plate {
  display: inline-flex; flex-direction: column; align-items: center; flex: none;
  background: var(--vr-bone); color: var(--vr-ink); border: 2px solid var(--vr-ink);
  outline: 1px solid rgba(242,237,228,.35); outline-offset: 2px; border-radius: var(--radius-plate);
  padding: 4px 12px 6px; line-height: 1; box-shadow: 0 6px 18px -6px rgba(0,0,0,.8);
}
.plate small {
  font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .28em; color: var(--vr-red-deep);
  border-bottom: 1px solid rgba(11,10,9,.25); padding-bottom: 3px; margin-bottom: 3px; width: 100%; text-align: center; white-space: nowrap;
}
.plate b { font-family: var(--font-slab); font-weight: 400; font-size: 1.4rem; letter-spacing: var(--tracking-plate); }
.plate--gold { background: var(--gold-leaf); }
.plate--sm { padding: 3px 9px 5px; outline-offset: 1px; }
.plate--sm small { font-size: .52rem; letter-spacing: .22em; }
.plate--sm b { font-size: 1.05rem; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: var(--rule);
  transition: box-shadow var(--dur) var(--ease-out);
}
.site-head::before { /* blur on a pseudo element so the fixed mobile menu is not trapped by backdrop-filter */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11,10,9,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-head__band { height: var(--head-band); position: relative; z-index: 3; }
.site-head__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--head-h); padding: 0 var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  transition: height var(--dur) var(--ease-out);
}
.site-head.is-scrolled { box-shadow: 0 10px 30px -10px rgba(0,0,0,.9); }
.site-head.is-scrolled .site-head__bar { height: 60px; }
.brand-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; flex: none; }
.brand-mark img { width: 52px; transition: width var(--dur) var(--ease-out); }
.site-head.is-scrolled .brand-mark img { width: 44px; }
.brand-mark span {
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; line-height: 1.2;
}
.brand-mark em { display: block; font-style: normal; color: var(--vr-red-hot); font-weight: 600; }

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.nav ul { display: flex; gap: clamp(14px, 1.6vw, 26px); }
.nav li a {
  position: relative; display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
  text-decoration: none; color: var(--vr-parchment); transition: color var(--dur-fast);
}
.nav li a::after {
  content: ""; position: absolute; left: 0; right: .14em; bottom: 4px; height: 2px; background: var(--vr-red);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out);
}
.nav li a:hover { color: var(--vr-bone); }
.nav li a.is-active { color: var(--vr-bone); }
.nav li a.is-active::after { transform: scaleX(1); }
.nav__short { display: none; }
.nav__band { display: none; }
.burger { display: none; }

@media (max-width: 1279px) and (min-width: 1100px) {
  .nav__full { display: none; }
  .nav__short { display: inline; }
}

@media (max-width: 1099px) {
  .burger {
    display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--vr-seam); border-radius: var(--radius-1);
    background: transparent; cursor: pointer; position: relative; z-index: 2;
  }
  .burger span, .burger span::before, .burger span::after {
    display: block; width: 22px; height: 2px; background: var(--vr-bone); position: relative;
    transition: transform var(--dur) var(--ease-out), background var(--dur);
  }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -7px; }
  .burger span::after { top: 7px; }
  .burger[aria-expanded="true"] span { background: transparent; }
  .burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--vr-ink); padding: calc(var(--head-h) + var(--head-band) + 12px) var(--gutter) 32px;
    overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__band { display: block; position: absolute; left: 0; right: 0; top: 0; height: 12px; }
  .nav ul { flex-direction: column; gap: 0; border-top: var(--rule); }
  .nav li a {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: .01em; line-height: 1;
    color: var(--vr-bone); padding: 14px 0; min-height: 60px; border-bottom: var(--rule);
  }
  .nav li a::after { display: none; }
  .nav li a.is-active { color: var(--vr-red-hot); }
  .nav__cta { margin-top: 28px; align-self: flex-start; min-height: 52px; font-size: .95rem; padding: 14px 22px; }
  body.menu-open { overflow: hidden; }
  /* keep brand + burger above the overlay */
  .brand-mark { position: relative; z-index: 2; }
}
@media (max-width: 420px) {
  .brand-mark span { font-size: .74rem; letter-spacing: .1em; }
  .brand-mark img { width: 44px; }
}

/* ==========================================================================
   Layout rhythm – one container, one left edge, one vertical spacing
   ========================================================================== */
:root { --sec-y: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); --gap: clamp(14px, 1.2vw, 20px); }

.section { padding: var(--sec-y) 0; border-top: var(--rule); }
.section--alt { background: var(--bg-alt); }
.sh { border-left: var(--rule-red); padding-left: 18px; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); max-width: 46rem; }
.sh__label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label);
  color: var(--vr-red-hot);
}
.sh h2 { font-size: var(--fs-h2); }
.sh p { margin-top: 12px; color: var(--vr-parchment); font-size: var(--fs-lead); line-height: 1.5; max-width: 38rem; }
.sub-h {
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: .95rem;
  color: var(--vr-parchment); margin: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0 16px; padding-bottom: 12px; border-bottom: var(--rule);
}
.footnote { margin-top: 20px; color: var(--vr-dust); font-size: var(--fs-small); }
.card {
  background: var(--vr-leather); border: 1px solid var(--vr-seam); border-radius: var(--radius-2); overflow: hidden;
  transition: border-color var(--dur);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--head-h) + var(--head-band) + clamp(2rem, 1rem + 3vw, 4rem));
  background: radial-gradient(55% 60% at 78% 70%, rgba(204,0,0,.22), transparent 70%), var(--vr-ink);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.hero__text { max-width: 36rem; }
.hero__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: .45em; row-gap: 6px; margin-bottom: 20px;
  font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label);
  color: var(--vr-red-hot);
}
.hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--vr-red); flex: none; margin-right: 8px; }
.hero__eyebrow span, .nw { white-space: nowrap; }
.hero__title { font-size: clamp(3rem, 1.6rem + 4.2vw, 5.5rem); color: var(--vr-bone); }
.hero__title span { display: block; }
.hero__sub {
  margin-top: 20px; font-family: var(--font-label); font-weight: 600; font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem);
  letter-spacing: .02em; line-height: 1.3; color: var(--vr-bone);
}
.hero__welcome { margin-top: 14px; color: var(--vr-parchment); }
.hero__welcome strong { color: var(--vr-bone); font-weight: 600; }
.hero .btn-row { margin-top: 28px; }
.hero__photo img { width: 100%; }
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 1rem + 2vw, 3rem); border-top: var(--rule); padding: 24px 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.stats li { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; border-left: var(--rule); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats b { font-family: var(--font-slab); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; color: var(--vr-gold); white-space: nowrap; }
.stat__label { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: .85rem; color: var(--vr-bone); margin-top: 6px; }
.stat__detail { font-size: var(--fs-small); color: var(--vr-dust); }
.hero + .section { border-top: 0; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background-color: var(--vr-bone); background-image: conic-gradient(var(--vr-red) 25%, var(--vr-bone) 0 50%, var(--vr-red) 0 75%, var(--vr-bone) 0); background-size: 6px 6px; }

/* ==========================================================================
   01 Naše stroje
   ========================================================================== */
.garage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.bike figure { height: 100%; display: flex; flex-direction: column; }
.bike { display: flex; }
.bike figure { width: 100%; background: var(--vr-leather); border: 1px solid var(--vr-seam); border-radius: var(--radius-2); overflow: hidden; transition: border-color var(--dur); }
.bike:hover figure { border-color: rgba(204,0,0,.55); }
.bike__stage {
  position: relative; aspect-ratio: 16 / 10;
  background: radial-gradient(70% 45% at 50% 85%, rgba(204,0,0,.22), transparent 70%), linear-gradient(180deg, #141211 0%, #0B0A09 100%);
}
.bike__stage img { position: absolute; inset: 3% 4% 2%; width: 92%; height: 95%; object-fit: contain; object-position: 50% 100%; }
.bike__cap { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; border-top: var(--rule); }
.bike__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bike__owner { font-family: var(--font-slab); font-size: 1.35rem; line-height: 1.1; overflow-wrap: anywhere; }
.bike__model { font-size: var(--fs-small); color: var(--vr-dust); line-height: 1.4; }
.bike__paint { font-size: var(--fs-small); color: var(--vr-parchment); line-height: 1.4; }

/* ==========================================================================
   02 Akce
   ========================================================================== */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 20px 24px; background: var(--vr-leather); border: 1px solid var(--vr-seam); border-left: var(--rule-red); border-radius: var(--radius-2);
}
.notice__text { flex: 1 1 26rem; }
.notice h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h4); line-height: 1.1; }
.notice__yr { color: var(--vr-gold); font-family: var(--font-slab); font-weight: 400; margin-right: .2em; }
.notice p { margin-top: 6px; color: var(--vr-parchment); }

.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ev { display: flex; flex-direction: column; background: var(--vr-leather); border: 1px solid var(--vr-seam); border-radius: var(--radius-2); overflow: hidden; transition: border-color var(--dur); }
.ev:hover { border-color: rgba(204,0,0,.55); }
.ev__logo { height: 200px; display: grid; place-items: center; padding: 20px; background: var(--vr-ink); border-bottom: var(--rule); }
.ev__logo img { max-height: 160px; width: auto; object-fit: contain; mix-blend-mode: lighten; /* hides black boxes of non-transparent logos */ }
.ev__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 18px 12px; }
.ev__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ev__date { margin-top: 14px; font-family: var(--font-label); font-weight: 700; letter-spacing: .08em; font-size: 1rem; color: var(--vr-gold); }
.ev h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h4); line-height: 1.05; margin: 4px 0 6px; }
.ev__meta { font-size: var(--fs-small); color: var(--vr-parchment); }
.ev__link { display: inline-block; margin-top: auto; padding: 11px 0 9px; line-height: 1.6; font-size: var(--fs-small); }

/* ==========================================================================
   03 Členové
   ========================================================================== */
.crew { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.member { display: flex; flex-direction: column; background: var(--vr-leather); border: 1px solid var(--vr-seam); border-radius: var(--radius-2); overflow: hidden; transition: border-color var(--dur); }
.member:hover { border-color: rgba(204,0,0,.55); }
.member__ph {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 85%, rgba(204,0,0,.22), transparent 70%), linear-gradient(180deg, #141211, #0B0A09);
}
.member__cut { position: absolute; inset: 2% 3% 0; width: 94%; height: 98%; object-fit: contain; object-position: 50% 100%; }
.member__logo { position: absolute; inset: 14% 22%; width: 56%; height: 72%; object-fit: contain; opacity: .9; }
.member__info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; border-top: var(--rule); }
.member__nick { font-family: var(--font-slab); font-size: 1.35rem; line-height: 1.1; overflow-wrap: anywhere; }
.member__bike { font-size: var(--fs-small); color: var(--vr-dust); line-height: 1.4; }
.member__bike b { color: var(--vr-parchment); font-weight: 500; }

.join {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  padding: 20px 24px; background: var(--vr-leather); border: 1px solid var(--vr-seam); border-left: var(--rule-red); border-radius: var(--radius-2);
}
.join__img { width: 88px; flex: none; order: -1; }
.join__text { flex: 1 1 20rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.join h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h3); line-height: 1; }
.join p { color: var(--vr-parchment); flex: 1 1 14rem; }

/* ==========================================================================
   04 Galerie
   ========================================================================== */
.gallery { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); background: var(--vr-leather); border: 1px solid var(--vr-seam); border-radius: var(--radius-2); overflow: hidden; }
.gallery__photo { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 70%; }
.gallery__card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: clamp(20px, 3vw, 40px); }
.gallery__icon { width: 88px; }
.gallery__card p { color: var(--vr-parchment); margin-bottom: 16px; }
.gallery__provider { display: block; margin-top: 10px; font-size: .8125rem; color: var(--vr-dust); }

/* ==========================================================================
   05 Spřátelené kluby
   ========================================================================== */
.clubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.club { display: flex; }
.club__link {
  width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
  padding: 28px 20px 24px; background: var(--vr-leather); border: 1px solid var(--vr-seam); border-radius: var(--radius-2); transition: border-color var(--dur);
}
.club__link:hover { border-color: rgba(204,0,0,.55); }
.club__logo { height: 130px; width: auto; object-fit: contain; }
.club__name { margin-top: 18px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h4); line-height: 1; }
.club__meta { margin-top: 8px; font-size: var(--fs-small); color: var(--vr-parchment); }
.club__link:hover .club__meta { color: var(--vr-gold); }

/* ==========================================================================
   06 Kontakty
   ========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__list { display: grid; border-top: var(--rule); }
.contact__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 0; border-bottom: var(--rule); }
.contact__role { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: .9rem; color: var(--vr-dust); }
.contact__val {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-slab); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1.15; text-decoration: none; overflow-wrap: anywhere;
  transition: color var(--dur);
}
.contact__val:hover { color: var(--vr-gold); }
.contact__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact__logo { width: 200px; }
.sponsor { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; background: var(--vr-leather); border: var(--rule); border-radius: var(--radius-2); }
.sponsor__cap { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label); color: var(--vr-gold); }
.sponsor__link { display: block; background: #fff; border-radius: var(--radius-2); padding: 14px 18px; transition: box-shadow var(--dur); }
.sponsor__link:hover { box-shadow: 0 0 0 2px var(--vr-gold); }
.sponsor__link img { width: 100%; max-width: 220px; margin: 0 auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { background: var(--vr-asphalt); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); padding-top: 48px; padding-bottom: 32px; }
.foot__brand img { width: 120px; margin-bottom: 14px; }
.foot__brand p { font-size: var(--fs-small); color: var(--vr-parchment); line-height: 1.5; }
.foot__brand strong { color: var(--vr-bone); }
.foot__tag { margin-top: 8px; color: var(--vr-dust) !important; }
.foot__h { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: .8rem; color: var(--vr-gold); margin-bottom: 10px; }
.foot ul { display: flex; flex-direction: column; font-size: .95rem; color: var(--vr-parchment); }
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color var(--dur-fast); }
.foot ul a:hover { color: var(--vr-bone); text-decoration: underline; text-decoration-color: var(--vr-red-hot); text-underline-offset: 4px; }
.foot__role { display: block; font-size: .8rem; color: var(--vr-dust); margin-top: 6px; line-height: 1; }
.foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  border-top: var(--rule); padding-top: 18px; padding-bottom: 26px; font-size: .85rem; color: var(--vr-dust);
}
.foot__sig { font-family: var(--font-display); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--vr-steel-500); }
.totop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none;
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: var(--vr-bone);
  box-shadow: inset 0 0 0 1px rgba(242,237,228,.3); border-radius: var(--radius-1); transition: color var(--dur), box-shadow var(--dur);
}
.totop:hover { color: var(--vr-gold); box-shadow: inset 0 0 0 1px var(--vr-gold); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { max-width: 40rem; }
  .garage, .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .gallery { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .member__info { padding: 12px; }
  .member__nick { font-size: 1.2rem; }
  .clubs { grid-template-columns: 1fr; }
  .club__link { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 18px; row-gap: 4px; text-align: left; padding: 16px 18px; }
  .club__logo { grid-row: 1 / 3; height: auto; max-height: 96px; width: 80px; }
  .club__name { align-self: end; margin-top: 0; }
  .club__meta { align-self: start; margin-top: 0; }
}
@media (max-width: 599px) {
  .hero__eyebrow .hero__sep { display: none; }
  .hero__eyebrow { column-gap: 0; }
  .hero__eyebrow::before { margin-right: 12px; }
  .hero__eyebrow span:last-child { flex-basis: 100%; }
  .hero__photo { margin: 0 calc(-1 * var(--gutter)); }
}
@media (max-width: 559px) {
  .garage, .ev-grid { grid-template-columns: 1fr; }
  .ev__logo { height: 180px; }
  .stats li { padding: 0 12px; }
  .foot { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .foot__brand { grid-column: 1 / -1; }
  .notice .btn, .join .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 404 */
.nf { min-height: 100vh; display: grid; place-items: center; text-align: left; padding: calc(var(--head-h) + 40px) var(--gutter) 60px; }
.nf__inner { max-width: 44rem; }
.nf .nf__code { margin: 0; font-family: var(--font-slab); color: var(--vr-gold); font-size: clamp(4rem, 2rem + 10vw, 9rem); line-height: .9; }
.nf h1 { font-size: var(--fs-h1); margin: 18px 0 16px; }
.nf p { color: var(--vr-parchment); font-size: var(--fs-lead); margin-bottom: 28px; max-width: 34rem; }
[tabindex="-1"]:focus { outline: none; }

.member--honor { border-color: rgba(255,204,0,.35); }

.ev--poster .ev__logo { padding: 0; height: auto; min-height: 0; background: #0B0A09; }
.ev--poster .ev__logo img { width: 100%; height: auto; max-height: none; mix-blend-mode: normal; display: block; }

/* Aktuální klubová akce */
.feat { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); background: var(--vr-leather); border: 1px solid rgba(204,0,0,.55); border-left: 3px solid var(--vr-red); border-radius: var(--radius-2); overflow: hidden; margin-bottom: var(--gap); }
.feat__poster { align-self: start; }
.feat__poster img { display: block; width: 100%; height: auto; }
.feat__body { padding: 22px 24px 20px; display: flex; flex-direction: column; align-items: flex-start; }
.feat h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; margin: 4px 0 6px; }
.feat__lead { margin-top: 10px; color: var(--vr-parchment); }
.feat__more { margin-top: 18px; width: 100%; border-top: var(--rule); }
.feat__more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-family: var(--font-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vr-gold); }
.feat__more summary::-webkit-details-marker { display: none; }
.feat__more summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--vr-red-hot); transition: transform var(--dur); }
.feat__more[open] summary::after { transform: rotate(45deg); }
.feat__more summary:focus-visible { outline: 2px solid var(--vr-gold); outline-offset: 2px; }
.feat__info { padding: 6px 0 4px; color: var(--vr-parchment); }
.feat__info h5 { margin: 16px 0 6px; font-family: var(--font-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--vr-bone, #F2EDE4); }
.feat__info ul { padding-left: 1.1em; display: grid; gap: 4px; }
.feat__info b { color: var(--vr-bone, #F2EDE4); }
.feat__bank { margin-top: 10px; display: grid; gap: 4px; }
.feat__bank div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; }
.feat__bank dt { color: var(--vr-dust); }
.feat__bank dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--vr-bone, #F2EDE4); }
.feat__photos { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feat__photos img { width: 100%; height: auto; aspect-ratio: 231 / 172; object-fit: cover; border-radius: var(--radius-1, 4px); border: 1px solid var(--vr-seam); }
@media (max-width: 760px) {
  .feat { grid-template-columns: 1fr; }
  .feat__poster img { height: auto; }
  .feat__body { padding: 18px 16px; }
}