/* =========================================================
   Cycology Cycling Club — Global Stylesheet
   Author: site rebuild, 2026
   Edit brand colors in :root below to re-theme the site.
   ========================================================= */

:root {
  /* =========================================================
     CYCOLOGY OFFICIAL BRAND PALETTE
     Source: Cycology Corporate Identity Guidelines v2 (Aug 2018)
     5-color identity: yellow, cyan, orange, pink, black.
     "Bolder colours to portray youthfulness, fun, energy and
      vibrancy" — diversity within one tonal value system.
     ========================================================= */
  --brand-yellow:   #FFD744;       /* Pantone 114 C — wordmark color, energy */
  --brand-cyan:     #46BFE0;       /* Pantone 305 C — sky, movement */
  --brand-orange:   #F39200;       /* Pantone 1375 C — vibrancy */
  --brand-pink:     #D60B52;       /* Pantone 1935 — inclusivity (added for
                                      female members & belonging) */
  --brand-black:    #1D1D1B;       /* Pantone Black C — type & contrast */

  /* Tints / shades derived from the palette */
  --brand-pink-dark:   #a40840;
  --brand-pink-light:  #ff3275;
  --brand-yellow-dark: #e6bf28;
  --brand-cyan-dark:   #2da4c6;

  /* Semantic aliases (the rest of the CSS uses these) */
  --color-primary:      var(--brand-pink);
  --color-primary-dark: var(--brand-pink-dark);
  --color-primary-light: var(--brand-pink-light);
  --color-accent:       var(--brand-yellow);
  --color-accent-2:     var(--brand-cyan);
  --color-accent-3:     var(--brand-orange);

  --color-ink:          var(--brand-black);
  --color-charcoal:     var(--brand-black);
  --color-muted:        #5b6470;
  --color-line:         #e6e8eb;
  --color-bg:           #ffffff;
  --color-bg-alt:       #f7f5f1;        /* warm off-white, pairs better with yellow */
  --color-bg-dark:      #14140f;        /* near-black with a touch of warmth */

  /* =========================================================
     TYPOGRAPHY — Open Sans is the brand's official web typeface
     "The typeface used for web and mobile applications is Open Sans"
     Weights used: 300 (Light), 400 (Regular), 600 (Semibold),
                   700 (Bold), 800 (Extra Bold)
     ========================================================= */
  --font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 6px 18px rgba(0,0,0,.10);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.18);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
/* The `hidden` attribute must win over any display we set elsewhere —
   without this, a rule like `.admin-pager { display: flex }` silently
   un-hides an element the JS marked as hidden. */
[hidden] { display: none !important; }
a { color: var(--color-primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover, a:focus-visible { color: var(--color-primary-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;                /* Open Sans Extra Bold for confident headings */
  line-height: 1.12;
  letter-spacing: -0.015em;        /* tighten slightly — Open Sans defaults run wide */
  color: var(--color-charcoal);
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 700; }
p  { margin: 0 0 1em; color: #2a3038; }

ul.clean { list-style: none; padding: 0; margin: 0; }

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-charcoal); color: #fff;
  padding: .75rem 1rem; z-index: 1000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--brand-black); color: #e9edf2; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #c2c9d2; }
/* Eyebrow inside dark sections should be the brand yellow (the wordmark
   color) — high contrast and on-brand. */
.section--dark .eyebrow { color: var(--brand-yellow); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* Decorative bar before each eyebrow — a tiny brand accent */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.section-title { margin-bottom: 1rem; }
.section-lead { max-width: 720px; color: var(--color-muted); margin-bottom: 2.5rem; font-size: 1.05rem; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: .04em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  text-transform: uppercase;
  font-size: .85rem;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--brand-pink);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(214,11,82,.55);
}
.btn-primary:hover {
  background: var(--brand-pink-dark);
  color:#fff;
  box-shadow: 0 12px 28px -8px rgba(214,11,82,.7);
}
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: var(--brand-yellow); color: var(--brand-black); border-color: var(--brand-yellow); }
.btn-dark { background: var(--brand-black); color:#fff; }
.btn-dark:hover { background:#000; color: var(--brand-yellow); }
.btn-ghost {
  background: transparent;
  color: var(--brand-pink);
  border-color: var(--brand-pink);
}
.btn-ghost:hover { background: var(--brand-pink); color:#fff; }
/* Brand-yellow accent button — for emphasis CTAs on dark sections */
.btn-accent { background: var(--brand-yellow); color: var(--brand-black); }
.btn-accent:hover { background: var(--brand-yellow-dark); color: var(--brand-black); box-shadow: var(--shadow-md); }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 72px;
}
/* ---------- Brand lock-up (header & footer) ----------
   Header uses the bike-mark SVG + a separate CYCOLOGY wordmark in HTML
   so the wordmark stays legible at small heights.
   Footer uses the full logo SVG (light variant) since there's room
   for the wordmark to render inside the SVG.
   To change the logo, replace the files in /assets/ — no CSS edits needed. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-charcoal);
  letter-spacing: .04em;
}
.brand-mark-img {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand-text {
  line-height: 1;
  white-space: nowrap;
}

/* Footer brand uses the full logo (mark + wordmark inside the SVG) */
.brand--footer {
  gap: 0;
  margin-bottom: 1rem;
}
.brand-logo-footer {
  height: 64px;
  width: auto;
  display: block;
}

/* Compact on narrow viewports — hide the HTML wordmark, keep just the mark */
@media (max-width: 420px) {
  .brand-text { display: none; }
  .brand-mark-img { height: 36px; }
}
.nav-list {
  display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0;
  align-items: center;
}
.nav-list a {
  display: inline-block;
  color: var(--color-charcoal);
  font-weight: 600;
  font-size: .92rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-list a:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.nav-list .has-sub { position: relative; }
.nav-list .has-sub > a::after {
  content: ' ▾'; font-size: .7em; opacity: .7;
}
.subnav {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: .5rem; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s var(--ease);
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a {
  display: block; padding: .55rem .8rem; border-radius: 6px; font-size: .92rem;
}
.nav-cta { margin-left: .75rem; }

.menu-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 8px;
}
.menu-toggle:hover { background: var(--color-bg-alt); }
.menu-toggle span {
  display: block; width: 22px; height: 2px; background: var(--color-charcoal);
  position: relative;
}
.menu-toggle span::before, .menu-toggle span::after {
  content:''; position:absolute; left:0; width:22px; height:2px; background: var(--color-charcoal);
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after  { top:  7px; }

/* Mobile nav — collapse to the hamburger early enough that the desktop row
   never has to cram/wrap all the top-level items. */
@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .nav-list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    padding: 1rem; gap: .25rem;
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav-list.is-open { max-height: 80vh; overflow-y: auto; }
  .nav-list a { padding: .8rem .9rem; }
  .nav-list .has-sub > a::after { content: ''; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding-left: 1rem;
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .has-sub.open .subnav { max-height: 500px; }
  .nav-cta { margin: .5rem 0 0; }
}

/* ---------- Hero / Carousel ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--color-bg-dark);
  color: #fff;
  min-height: clamp(460px, 75vh, 720px);
  display: grid;
}
.hero-slide {
  grid-area: 1/1;
  position: relative;
  opacity: 0; transition: opacity 1s var(--ease);
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.55);
  transform: scale(1.04);
}
.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(460px, 75vh, 720px);
  padding: 4rem 0;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 5rem);
  max-width: 900px;
  line-height: 1.05;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 640px;
  color: #e7eaee;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-dots {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 3;
}
.hero-dots button {
  width: 36px; height: 4px; border-radius: 2px; border: 0;
  background: rgba(255,255,255,.4); cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease);
}
.hero-dots button.is-active { background: var(--color-primary); width: 50px; }

/* ---------- Page header (internal) ---------- */
.page-header {
  background: linear-gradient(120deg, var(--brand-black) 0%, #2a2a25 100%);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  position: relative; overflow: hidden;
}
/* Two soft brand-colored radial washes — pink top-right, cyan bottom-left.
   Echoes the brand's "multi-colour but harmonious" identity. */
.page-header::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(214, 11, 82, .28), transparent 45%),
    radial-gradient(circle at 10% 95%, rgba(70, 191, 224, .22), transparent 50%);
  pointer-events:none;
}
/* Thin multi-colour stripe at the bottom edge — the visual signature
   that ties every internal page back to the brand mark. */
.page-header::after {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand-yellow) 0%, var(--brand-yellow) 25%,
    var(--brand-cyan)  25%, var(--brand-cyan)  50%,
    var(--brand-orange) 50%, var(--brand-orange) 75%,
    var(--brand-pink)  75%, var(--brand-pink)  100%);
  pointer-events:none;
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { color: #fff; margin-bottom: .5rem; }
.crumbs {
  font-size: .85rem; color: #b9c0c8;
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.crumbs a { color: #b9c0c8; }
.crumbs a:hover { color: var(--brand-yellow); }
.crumbs span[aria-current] { color: var(--brand-yellow); font-weight: 600; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d4d8dd; }
.card-media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-pink) 100%);
  position: relative; overflow: hidden;
}
/* When card medias are placeholder gradients (no <img>), rotate through
   brand colours so a grid of placeholder cards looks intentional, not
   monotone. Only applied when the media has no child <img>. */
.grid > .card:nth-child(4n+1) .card-media:not(:has(img)) {
  background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-pink)   100%);
}
.grid > .card:nth-child(4n+2) .card-media:not(:has(img)) {
  background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-cyan)   100%);
}
.grid > .card:nth-child(4n+3) .card-media:not(:has(img)) {
  background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-orange) 100%);
}
.grid > .card:nth-child(4n+4) .card-media:not(:has(img)) {
  background: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-yellow) 100%);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.4rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card-meta { font-size: .8rem; color: var(--color-muted); margin-bottom: .5rem; letter-spacing: .04em; text-transform: uppercase; }
.card h3 { margin-bottom: .6rem; font-size: 1.25rem; }
.card p { color: #4a525c; margin-bottom: 1rem; }
.card-link { margin-top: auto; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }

/* Feature card (icon + text) */
.feature {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.6rem; margin-bottom: 1rem;
}
.feature h3 { font-size: 1.2rem; margin-bottom: .5rem; }

/* Rotate feature-icon colors through the 5-color brand palette so each
   card in a grid picks up a different brand color. This reflects the
   stated brand intent: "celebrating diversity within one vision." */
.grid > .feature:nth-child(5n+1) .feature-icon { background: linear-gradient(135deg, var(--brand-pink),   var(--brand-pink-dark)); }
.grid > .feature:nth-child(5n+2) .feature-icon { background: linear-gradient(135deg, var(--brand-cyan),   var(--brand-cyan-dark));  color: #fff; }
.grid > .feature:nth-child(5n+3) .feature-icon { background: linear-gradient(135deg, var(--brand-orange), #c47200); }
.grid > .feature:nth-child(5n+4) .feature-icon { background: linear-gradient(135deg, var(--brand-yellow), var(--brand-yellow-dark)); color: var(--brand-black); }
.grid > .feature:nth-child(5n+5) .feature-icon { background: linear-gradient(135deg, var(--brand-black),  #3a3a37);  color: var(--brand-yellow); }

/* Value pill — cycle through the brand palette */
.value-pill {
  display: inline-flex; align-items: center;
  background: #fff;
  border: 1px solid var(--color-line);
  padding: .55rem 1rem;
  border-radius: 999px;
  font-weight: 600; color: var(--color-charcoal);
  margin: .25rem;
}
.value-pill::before {
  content:''; width: 10px; height:10px; background: var(--color-primary);
  border-radius: 50%; margin-right: .6rem;
}
.value-pill:nth-child(5n+1)::before { background: var(--brand-pink); }
.value-pill:nth-child(5n+2)::before { background: var(--brand-cyan); }
.value-pill:nth-child(5n+3)::before { background: var(--brand-orange); }
.value-pill:nth-child(5n+4)::before { background: var(--brand-yellow); }
.value-pill:nth-child(5n+5)::before { background: var(--brand-black); }

/* Stat card */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.section--dark .stat { color:#fff; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--brand-yellow);
  display:block; line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label { font-size: .85rem; color: #c2c9d2; text-transform: uppercase; letter-spacing: .1em; margin-top: .4rem; }

/* ---------- Two-column with image ---------- */
.two-col {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 820px){ .two-col { grid-template-columns: 1fr; } }
.two-col .media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1a1a1a 0%, #c8102e 100%);
}
.two-col .media img { width:100%; height:100%; object-fit: cover; }

/* ---------- Lists ---------- */
.bullet-list { padding-left: 0; list-style: none; }
.bullet-list li {
  position: relative; padding-left: 1.8rem; margin-bottom: .65rem;
}
.bullet-list li::before {
  content:''; position:absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.checklist li::before {
  content:'✓'; position:absolute; left:0; top:0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

/* ---------- Accordion (FAQ) ---------- */
.faq-list { display: grid; gap: .75rem; max-width: 860px; }
.faq-item {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 600; color: var(--color-charcoal);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.4rem; color: var(--color-primary); transition: transform .2s var(--ease);
  font-weight: 400;
}
.faq-item[open] summary::after { content:'−'; }
.faq-answer { padding: 0 1.3rem 1.2rem; color: #4a525c; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; max-width: 620px; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px){ .form-grid { grid-template-columns: 1fr; } }
.form label {
  display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem;
  color: var(--color-charcoal);
}
.form .req { color: var(--color-primary); }
.form input, .form select, .form textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit; color: var(--color-ink);
  background: #fff;
  border: 1px solid #d8dce2;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--brand-pink);
  box-shadow: 0 0 0 3px rgba(214,11,82,.18);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- Newsletter strip ---------- */
.newsletter {
  background: linear-gradient(120deg, var(--brand-pink) 0%, var(--brand-orange) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Subtle pattern wash — a soft cyan radial in one corner to bring a
   third brand colour into the strip without overpowering. */
.newsletter::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 8% 80%, rgba(70,191,224,.35), transparent 50%);
  pointer-events:none;
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter .inner {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1.4fr 1fr;
}
@media (max-width: 820px){ .newsletter .inner { grid-template-columns: 1fr; } }
.newsletter h2 { color:#fff; margin-bottom: .5rem; }
.newsletter p { color: rgba(255,255,255,.92); margin: 0; }
.newsletter form {
  display: flex; gap: .5rem; background:#fff; padding: .4rem; border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.newsletter input {
  border: 0; padding: .85rem 1.1rem; flex: 1; font: inherit;
  border-radius: 999px; background: transparent;
}
.newsletter input:focus { outline: none; }
.newsletter button {
  border: 0; background: var(--color-charcoal); color: #fff;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; cursor: pointer; text-transform: uppercase; font-size: .9rem;
}
.newsletter button:hover { background: #000; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-bg-dark);
  color: #c8cdd3;
  padding: 4rem 0 1.5rem;
  position: relative;
}
/* Brand multi-colour stripe along the top edge of the footer — mirrors
   the same accent at the bottom of every page header so internal pages
   are visually framed in brand colour top and bottom. */
.site-footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height: 4px;
  background: linear-gradient(90deg,
    var(--brand-pink)   0%, var(--brand-pink)   25%,
    var(--brand-orange) 25%, var(--brand-orange) 50%,
    var(--brand-cyan)   50%, var(--brand-cyan)   75%,
    var(--brand-yellow) 75%, var(--brand-yellow) 100%);
}
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff; font-family: var(--font-body); font-weight: 700;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 1rem;
}
.site-footer a { color: #c8cdd3; }
.site-footer a:hover { color: #fff; }
/* The global `p { color: #2a3038 }` rule matches these paragraphs directly,
   which beats the light colour they would otherwise inherit from
   .site-footer — leaving near-black text on the dark footer. Set it back
   to white explicitly. */
.site-footer p { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.brand--footer { color: #fff; margin-bottom: 1rem; }
.social-row { display: flex; gap: .5rem; margin-top: 1rem; }
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.social-row a:hover { background: var(--color-primary); transform: translateY(-2px); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 3rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .85rem; color: #8a929b;
}

/* ---------- Misc helpers ---------- */
.tag {
  display: inline-block; padding: .25rem .65rem; border-radius: 999px;
  background: rgba(200,16,46,.1); color: var(--color-primary);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
/* The text-divider is a miniature brand mark — same four-colour sweep
   used in the page header/footer stripes, scaled down to act as an
   underline accent inside content blocks. */
.divider {
  display: block;
  height: 4px; width: 72px;
  background: linear-gradient(90deg,
    var(--brand-yellow) 0%, var(--brand-yellow) 25%,
    var(--brand-cyan)  25%, var(--brand-cyan)  50%,
    var(--brand-orange) 50%, var(--brand-orange) 75%,
    var(--brand-pink)  75%, var(--brand-pink)  100%);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

/* CSR partners grid */
.partners { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.partner {
  background:#fff; border:1px solid var(--color-line); border-radius: var(--radius);
  padding: 1.5rem 1rem; text-align: center;
}
.partner-name { font-weight: 700; color: var(--color-charcoal); margin-bottom: .3rem; }
.partner-desc { font-size: .85rem; color: var(--color-muted); margin: 0; }

/* Sponsor logo lockup (sits on top of a sponsor card; auto-removed if the
   image file is missing, so the card falls back to text only) */
.sponsor-logo {
  height: 72px; margin-bottom: 1.1rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-line);
}
/* Every logo fills the same box and is scaled to fit (contain), so logos of
   any shape/size render at a uniform footprint. */
.sponsor-logo img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.sponsor-logo--lg { height: 104px; }

/* Timeline */
.timeline { position: relative; padding-left: 2rem; border-left: 2px solid var(--color-line); }
.timeline-item { position: relative; padding-bottom: 2rem; }
.timeline-item::before {
  content:''; position:absolute; left:-2.55rem; top:.3rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-primary); border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.timeline-year {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-pink);
  font-size: 1.3rem;
  margin-bottom: .25rem;
  letter-spacing: -0.01em;
}

/* Gallery */
.gallery-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  min-height: 120px;
}
.gallery-item {
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-black), var(--brand-pink));
  position: relative; cursor: pointer;
  margin: 0;
}
.gallery-item img { width:100%; height:100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item .caption {
  position: absolute; inset: auto 0 0 0;
  padding: .8rem 1rem;
  color:#fff; font-weight: 600; font-size: .9rem;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}

/* Gallery loading / empty state messages */
.gallery-loading,
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
  color: var(--color-muted);
  font-size: .95rem;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
}
.gallery-loading::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: .6rem;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  vertical-align: -3px;
  animation: gallery-spin .8s linear infinite;
}
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery-empty code {
  font-size: .85em;
  background: rgba(0,0,0,.06);
  padding: .15rem .4rem;
  border-radius: 4px;
}

/* Video grid */
.video-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.video-card {
  background:#000; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm);
}
.video-card .frame { position: relative; aspect-ratio: 16/9; background:#111; }
.video-card .frame iframe, .video-card .frame img { width:100%; height:100%; border:0; }
.video-card .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.25);
  color: #fff; font-size: 3rem;
}
.video-card .frame img { object-fit: cover; }
.video-card .frame[role="button"] { cursor: pointer; }
.video-card .frame[role="button"]:hover .play,
.video-card .frame[role="button"]:focus-visible .play { background: rgba(214, 11, 82, .35); }
.video-card .frame:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.video-card .info { padding: 1rem 1.2rem; background:#fff; color: var(--color-charcoal); }
.video-card .info h3 { font-size: 1.05rem; margin: 0; }
.video-date { display: block; margin-top: .35rem; color: var(--color-muted); font-size: .8rem; letter-spacing: .03em; }

/* Shop grid */
.shop-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.product { background:#fff; border:1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.product .media { aspect-ratio: 1/1; background: var(--color-bg-alt); display:grid; place-items:center; color: var(--color-muted); font-family: var(--font-display); font-size: 2rem; }
.product .info { padding: 1rem 1.2rem 1.4rem; }
.product .price { color: var(--color-primary); font-weight: 700; margin: .25rem 0 .75rem; }

/* Hand signals grid */
.signals { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.signal {
  background:#fff; border:1px solid var(--color-line); border-radius: var(--radius);
  padding: 1.2rem; text-align: center;
}
.signal-icon { font-size: 2rem; margin-bottom: .5rem; }
.signal-label { font-weight: 700; }

/* Animations (in-view) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   TEAM / EXECUTIVES GRID
   Portrait-aspect cards with an initials fallback so cards
   look polished even before headshot images are uploaded.
   Used on /pages/club-executives.html and board-of-trustees.html.
   ========================================================= */
.team-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.team-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #d4d8dd;
}

.team-photo {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-black), var(--brand-pink));
}
/* Initials sit underneath the image. When the <img> loads, it covers the
   initials. When the image fails (onerror hides it) the initials show. */
.team-photo[data-initials]::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: -0.04em;
  z-index: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.team-photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform .5s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.04); }

/* Rotate the gradient through the brand palette so a row of fallback
   cards reads as intentional brand variety rather than monotony. */
.team-grid > .team-card:nth-child(5n+1) .team-photo {
  background: linear-gradient(135deg, var(--brand-black), var(--brand-pink));
}
.team-grid > .team-card:nth-child(5n+2) .team-photo {
  background: linear-gradient(135deg, var(--brand-black), var(--brand-cyan));
}
.team-grid > .team-card:nth-child(5n+3) .team-photo {
  background: linear-gradient(135deg, var(--brand-black), var(--brand-orange));
}
.team-grid > .team-card:nth-child(5n+4) .team-photo {
  background: linear-gradient(135deg, var(--brand-black), var(--brand-yellow));
}
.team-grid > .team-card:nth-child(5n+4) .team-photo::after { color: var(--brand-black); }
.team-grid > .team-card:nth-child(5n+5) .team-photo {
  background: linear-gradient(135deg, var(--brand-pink), var(--brand-orange));
}

.team-body { padding: 1.25rem 1rem 1.6rem; }

.team-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
  color: var(--brand-black);
  line-height: 1.2;
}
.team-role {
  font-size: .87rem;
  color: var(--color-muted);
  margin: 0;
  letter-spacing: .01em;
}
.team-role--accent { color: var(--brand-pink); font-weight: 600; }

/* Print */
@media print {
  .site-header, .site-footer, .newsletter, .hero-dots, .menu-toggle { display: none !important; }
  body { color:#000; background:#fff; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   CLASSIC EDITORIAL HERO  (.hero--classic)
   Full-bleed Ken Burns imagery, serif display title,
   staggered text reveal, slide counter, arrows, progress bar.
   Scoped so existing .hero defaults are untouched.
   ========================================================= */
.hero--classic {
  --hero-min-h: clamp(560px, 88vh, 820px);
  --hero-slide-ms: 7000;        /* must match JS duration */
  position: relative; overflow: hidden;
  min-height: var(--hero-min-h);
  background: #0a0c10;
  color: #fff;
  isolation: isolate;
  display: block;               /* override the default grid layout */
}
.hero--classic .hero-stage {
  position: relative;
  min-height: var(--hero-min-h);
}

/* Slide */
.hero--classic .hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear 1.1s;
  display: flex; align-items: center;
}
.hero--classic .hero-slide.is-active {
  opacity: 1; visibility: visible;
  transition-delay: 0s;
  z-index: 1;
}

/* Background image (Ken Burns on active) */
.hero--classic .hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  transform: scale(1.02);
  filter: brightness(.82) saturate(.95);
  transition: transform 8s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.hero--classic .hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero--classic .hero-slide.is-active .hero-bg { transform: scale(1.12); }

/* Cinematic veil: vertical gradient + side wash for legibility */
.hero--classic .hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.45) 38%, rgba(8,10,14,.15) 62%, rgba(8,10,14,.55) 100%),
    linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,.10) 35%, rgba(8,10,14,.65) 100%);
}

/* Inner content */
.hero--classic .hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(4rem, 10vw, 7rem) 1.25rem clamp(7rem, 12vw, 9rem);
}
.hero--classic .hero-text {
  max-width: 720px;
}

/* Staggered reveal */
.hero--classic .hero-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.hero--classic .hero-slide.is-active .hero-text > *           { opacity: 1; transform: none; }
.hero--classic .hero-slide.is-active .hero-text > *:nth-child(1) { transition-delay: .15s; }
.hero--classic .hero-slide.is-active .hero-text > *:nth-child(2) { transition-delay: .30s; }
.hero--classic .hero-slide.is-active .hero-text > *:nth-child(3) { transition-delay: .42s; }
.hero--classic .hero-slide.is-active .hero-text > *:nth-child(4) { transition-delay: .58s; }
.hero--classic .hero-slide.is-active .hero-text > *:nth-child(5) { transition-delay: .72s; }

/* Eyebrow */
.hero--classic .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Hairline rule */
.hero--classic .hero-rule {
  display: block;
  width: 64px; height: 1px;
  background: rgba(255,255,255,.6);
  margin: 1.25rem 0 1.5rem;
}

/* Display title — Open Sans Extra Bold at large sizes reads with confidence
   while keeping us on-brand. The italic accent line is also Open Sans Italic. */
.hero--classic .hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1.6rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero--classic .hero-title em {
  font-style: italic;
  font-weight: 600;
  color: #fff;
  /* Brand-aligned gradient: cyan → pink → yellow — three of the five
     identity colors flowing across the accent phrase. */
  background: linear-gradient(110deg,
    var(--brand-cyan)   0%,
    var(--brand-pink)  45%,
    var(--brand-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Lead paragraph */
.hero--classic .hero-lead {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  max-width: 56ch;
  margin: 0 0 2rem;
  font-weight: 400;
}

/* CTA row */
.hero--classic .hero-actions {
  display: flex; flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.hero--classic .btn { padding: 1rem 1.75rem; font-size: .85rem; letter-spacing: .14em; }
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,.08);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Controls overlay (arrows + counter) ---------- */
.hero--classic .hero-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.75rem, 4vw, 2.75rem);
  z-index: 3;
  pointer-events: none;
}
.hero--classic .hero-controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hero--classic .hero-arrows {
  display: flex; gap: .6rem;
  pointer-events: auto;
}
.hero--classic .hero-arrow {
  width: 52px; height: 52px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: rgba(8,10,14,.32);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.hero--classic .hero-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  color: #fff;
}
.hero--classic .hero-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Counter (01 — 03) */
.hero--classic .hero-counter {
  display: inline-flex; align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: rgba(255,255,255,.95);
  pointer-events: auto;
  user-select: none;
}
.hero--classic .hero-num-current {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-feature-settings: "lnum" 1, "tnum" 1;
  min-width: 1.6ch; text-align: right;
}
.hero--classic .hero-num-bar {
  display: inline-block;
  width: 48px; height: 1px;
  background: rgba(255,255,255,.55);
}
.hero--classic .hero-num-total {
  font-size: 1rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.75);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Auto-fill progress bar at the bottom edge */
.hero--classic .hero-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.12);
  z-index: 3;
  overflow: hidden;
}
.hero--classic .hero-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  /* All four brand identity colors sweep across the bar — a subtle nod to
     the multi-coloured logo each time the slide advances. */
  background: linear-gradient(90deg,
    var(--brand-cyan)   0%,
    var(--brand-yellow) 35%,
    var(--brand-orange) 65%,
    var(--brand-pink)   100%);
  transform-origin: left center;
}
.hero--classic .hero-progress.is-running .hero-progress-fill {
  animation: heroFill 7s linear forwards;
}
@keyframes heroFill { from { width: 0%; } to { width: 100%; } }

/* Hide the legacy bottom dots on classic hero — counter & arrows replace them */
.hero--classic .hero-dots {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; pointer-events: none;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 720px) {
  .hero--classic {
    --hero-min-h: clamp(560px, 92vh, 760px);
  }
  .hero--classic .hero-veil {
    background:
      linear-gradient(180deg, rgba(8,10,14,.45) 0%, rgba(8,10,14,.30) 30%, rgba(8,10,14,.85) 100%);
  }
  .hero--classic .hero-inner {
    padding: 5rem 1.25rem 7rem;
    align-items: flex-end;
  }
  .hero--classic .hero-title {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    line-height: 1.05;
  }
  .hero--classic .hero-rule { margin: 1rem 0 1.25rem; width: 48px; }
  .hero--classic .hero-actions { gap: .6rem; width: 100%; }
  .hero--classic .hero-actions .btn,
  .hero--classic .hero-actions .btn-ghost-light {
    flex: 1 1 auto;
    justify-content: center;
    padding: .9rem 1.2rem;
    font-size: .78rem;
    letter-spacing: .12em;
  }
  .hero--classic .hero-arrow { width: 44px; height: 44px; }
  .hero--classic .hero-num-current { font-size: 1.6rem; }
  .hero--classic .hero-num-bar { width: 28px; }
}

@media (max-width: 420px) {
  .hero--classic .hero-num-total { display: none; }
  .hero--classic .hero-num-bar { display: none; }
}

/* =========================================================
   Gallery — album index cards + lightbox
   ========================================================= */

/* Album cards link through to album.html?album=<slug> */
.album-card { text-decoration: none; color: inherit; }
.album-card .card-body { padding: 1.1rem 1.3rem 1.3rem; }
.album-card h3 { margin-bottom: .35rem; }
.album-card .card-meta { margin-bottom: 0; }

/* Lightbox overlay */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 12, 15, .93);
  padding: 4vh 4vw;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 92vw; max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.lightbox-close {
  position: absolute; top: .75rem; right: 1.25rem;
  background: none; border: 0; color: #fff;
  font-size: 2.6rem; line-height: 1; cursor: pointer;
  padding: .25rem .5rem;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255, 255, 255, .14); border: 0; color: #fff;
  font-size: 2.2rem; line-height: 1; cursor: pointer;
  transition: background .2s var(--ease);
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-counter {
  position: absolute; bottom: 1.1rem; left: 0; right: 0;
  text-align: center; color: #fff;
  font-size: .85rem; letter-spacing: .06em;
}
@media (max-width: 600px) {
  .lightbox-nav { width: 2.5rem; height: 2.5rem; font-size: 1.8rem; }
  .lightbox-prev { left: .35rem; }
  .lightbox-next { right: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-nav { transition: none; }
}


/* =========================================================
   Admin — publications manager (pages/admin-publications.html)
   ========================================================= */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-toolbar .actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.admin-count { color: var(--color-muted); font-weight: 400; font-size: 1rem; }
.admin-note { min-height: 1.4em; margin: 0 0 1rem; color: var(--color-muted); font-size: .9rem; }
.admin-note.admin-error { color: var(--brand-pink); font-weight: 600; }

.admin-table-wrap { overflow-x: auto; border: 1px solid #e3e6ea; border-radius: var(--radius); background: #fff; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
.admin-table th, .admin-table td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid #eceef1; vertical-align: middle; }
.admin-table th { background: var(--color-bg-alt); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: #fbfaf7; }
.admin-table code { font-size: .82rem; color: #4a525c; }
.admin-title { font-weight: 600; }
.admin-empty { text-align: center; color: var(--color-muted); padding: 2.5rem 1rem !important; }
.admin-actions-col { white-space: nowrap; text-align: right; }
.admin-actions-col .btn + .btn { margin-left: .35rem; }
.btn-sm { padding: .4rem .8rem; font-size: .78rem; }

.admin-status { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-status.is-published { background: #e3f7ec; color: #1b6e3c; }
.admin-status.is-draft { background: #fff3d6; color: #8a5a00; }

.admin-dialog { border: 0; border-radius: var(--radius-lg); padding: 2rem; width: min(720px, calc(100vw - 2rem)); box-shadow: var(--shadow-md); }
.admin-dialog::backdrop { background: rgba(29,29,27,.6); }
.admin-dialog .form { max-width: none; }
.admin-dialog h3 { margin-bottom: .25rem; }
.admin-dialog label small { font-weight: 400; color: var(--color-muted); }

@media (max-width: 640px) {
  .admin-dialog { padding: 1.25rem; }
}

/* ---- Admin: cover image picker ---- */
.admin-cover { grid-column: 1 / -1; }
.admin-cover .actions { margin: .5rem 0; }
.admin-cover-preview {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 220px; overflow: hidden;
  background: var(--color-bg-alt); border: 1px dashed #d4d8dd; border-radius: var(--radius);
  color: var(--color-muted); font-size: .9rem;
}
.admin-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.form .admin-upload-btn { display: inline-flex; margin: 0; color: #fff; font-size: .78rem; cursor: pointer; }
.form .admin-upload-btn:hover { color: var(--brand-yellow); }

/* =========================================================
   Article page (pages/article.html)
   ========================================================= */
.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover { color: var(--brand-pink); }
.page-header .article-meta { color: #d6dbe2; margin: 0; font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; }
.article { max-width: 780px; margin: 0 auto; }
.article-cover { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.article-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.article-body { font-size: 1.08rem; line-height: 1.8; color: #2b3138; }
.article-body p { margin: 0 0 1.4rem; }
.article-body a { color: var(--brand-pink); text-decoration: underline; word-break: break-word; }
.article-lead { font-size: 1.2rem; font-weight: 600; color: var(--brand-black); }
.article-back { max-width: 780px; margin: 2.5rem auto 0; }

/* Spam-trap field on the mailing forms — hidden from people (and from
   screen readers via aria-hidden in the markup), but present in the DOM
   so bots fill it in and give themselves away. Not display:none, which
   many bots detect and skip. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Admin: submissions browser ---- */
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-tab {
  border: 1px solid #e3e6ea; background: #fff; cursor: pointer;
  padding: .5rem .9rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: .82rem;
  color: var(--color-muted); transition: all .2s var(--ease);
}
.admin-tab:hover { border-color: var(--brand-pink); color: var(--brand-pink); }
.admin-tab.is-active { background: var(--brand-pink); border-color: var(--brand-pink); color: #fff; }
.admin-tab-count {
  display: inline-block; margin-left: .35rem; padding: .05rem .45rem;
  border-radius: 999px; background: rgba(0,0,0,.08); font-size: .75rem;
}
.admin-tab.is-active .admin-tab-count { background: rgba(255,255,255,.25); }

.admin-filters {
  display: grid; gap: .75rem; align-items: end; margin-bottom: 1rem;
  grid-template-columns: 2fr 1fr 1fr auto;
}
.admin-filters label {
  display: block; font-weight: 600; font-size: .8rem; margin-bottom: .3rem;
  color: var(--color-muted);
}
.admin-filters input {
  width: 100%; padding: .6rem .8rem; font: inherit; font-size: .9rem;
  border: 1px solid #d9dde2; border-radius: var(--radius); background: #fff;
}
.admin-filters input:focus { outline: none; border-color: var(--brand-pink); box-shadow: 0 0 0 3px rgba(214,11,82,.12); }
.admin-filters-actions { display: flex; gap: .4rem; }
@media (max-width: 760px) { .admin-filters { grid-template-columns: 1fr 1fr; } }

.admin-pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.25rem; font-size: .9rem; color: var(--color-muted);
}
.admin-pager .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.admin-detail { margin: 0 0 1.5rem; }
.admin-detail dt {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-muted); margin-top: 1rem;
}
.admin-detail dd { margin: .2rem 0 0; white-space: pre-wrap; color: var(--color-ink); }

/* =========================================================
   Admin shell — sign-in, dashboard and the bar above each
   admin screen (pages/admin*.html)
   ========================================================= */
.admin-bar { background: var(--brand-black); color: #fff; }
.admin-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: .6rem;
}
.admin-nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.admin-nav-link {
  color: #c8cdd3; padding: .45rem .9rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
}
.admin-nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav-link.is-active { background: var(--brand-pink); color: #fff; }
.admin-bar-user { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: #c8cdd3; }
.admin-bar-user strong { color: #fff; }
.page-header--admin { padding-block: 2.5rem; }

/* ---- Sign-in screen ---- */
.admin-login-page { background: var(--color-bg-alt); }
.login-card {
  max-width: 460px; margin: 8vh auto; padding: 2.5rem;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.login-card h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.login-brand { display: block; margin-bottom: 1.5rem; }
.login-brand img { height: 40px; width: auto; }
.login-lead { color: var(--color-muted); font-size: .95rem; margin-bottom: 1.5rem; }
.login-lead code { background: var(--color-bg-alt); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.login-card .form { max-width: none; }
.login-back { margin: 1.5rem 0 0; font-size: .85rem; }
@media (max-width: 520px) { .login-card { margin: 4vh 1rem; padding: 1.5rem; } }

/* ---- Dashboard ---- */
.admin-callout {
  background: #fff8e6; border: 1px solid #f0dca8; border-left: 4px solid var(--brand-yellow);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1rem; color: #6b5413;
}
.admin-callout code { background: rgba(0,0,0,.06); padding: .1rem .35rem; border-radius: 4px; }

.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-card {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.4rem; background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius); text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-pink); }
.stat-value { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--brand-black); }
.stat-label { font-size: .85rem; color: var(--color-muted); }
.stat-card.is-warn { border-color: var(--brand-pink); background: #fff5f8; }
.stat-card.is-warn .stat-value { color: var(--brand-pink); }

.action-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.action-card {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.25rem; background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-pink); color: inherit; }
.action-icon { font-size: 1.6rem; line-height: 1; }
.action-body { display: flex; flex-direction: column; gap: .2rem; }
.action-body strong { font-size: 1rem; }
.action-body span { font-size: .85rem; color: var(--color-muted); }

.dash-columns { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }
@media (max-width: 820px) { .dash-columns { grid-template-columns: 1fr; } }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash-list { border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.dash-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid #eceef1; text-decoration: none; color: inherit;
}
.dash-item:last-child { border-bottom: 0; }
.dash-item:hover { background: #fbfaf7; color: inherit; }
.dash-item-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.dash-item-main strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item-main > span { font-size: .8rem; color: var(--color-muted); }
.dash-item-date { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.dash-list .gallery-empty { border: 0; margin: 0; }