/* ============================================================
   BRAND PALETTE — sampled directly from the club crest.
   Burgundy #6C0C0C · gold #F0A824 · cream #FCF0F0
   Change these eight values and the whole site follows.
   ============================================================ */
:root {
  --brand-deepest: #3d0607;  /* darkest burgundy — dark CTA band     */
  --brand-deep:    #45100f;  /* crest burgundy   — buttons, headings */
  --brand:         #7a1a22;  /* lighter burgundy — italic emphasis   */
  --gold:          #f0a824;  /* crest gold       — rules, highlights */
  --gold-deep:     #b8790c;  /* gold legible on white                */
  --brand-tint:    #f7e7e7;  /* pale burgundy    — avatars, chips    */
  --brand-wash:    #fdf8f5;  /* warm cream       — alternating bands */
  --brand-border:  #ecdcdc;  /* burgundy-tinted hairline             */
}

:root {
  --bg:        #ffffff;
  --surface:   #fcfaf9;
  --ink:       #1a1416;
  --ink-soft:  #5c5257;
  --ink-faint: #8b8085;
  --line:      var(--brand-border);
  --accent:    var(--brand-deep);
  --wrap: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#131011; --surface:#1a1517; --ink:#f5efec; --ink-soft:#bdb0b3;
    --ink-faint:#8d8085; --line:#332628; --accent:#e8a0a0;
    --brand:#e8a0a0; --gold-deep:var(--gold); --brand-tint:#2e2022;
    --brand-wash:#181314; --brand-border:#332628;
  }
}
:root[data-theme="dark"] {
  --bg:#131011; --surface:#1a1517; --ink:#f5efec; --ink-soft:#bdb0b3;
  --ink-faint:#8d8085; --line:#332628; --accent:#e8a0a0;
  --brand:#e8a0a0; --gold-deep:var(--gold); --brand-tint:#2e2022;
  --brand-wash:#181314; --brand-border:#332628;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-deep); color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 16px; top: 16px; }

/* ---------------- announcement bar ---------------- */
.announce {
  background: #2e0709; color: #f6e7d6; gap: 22px; padding: 13px 24px;
  font-size: 13.5px; text-align: center; padding: 10px 16px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
}
.announce strong { font-weight: 700; }
.announce .pill {
  background: #fff; color: var(--brand-deepest); text-decoration: none;
  font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.announce .pill:hover { background: var(--gold); }

/* ---------------- nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 248, 241, .72);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(59, 10, 14, .08);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.mark { width: 34px; height: 34px; flex: none; display: block; }
.brand-text { font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.brand-short { display: none; font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; font-size: 19px; }
.nav nav { display: flex; align-items: center; gap: 30px; }
.nav nav a { color: var(--ink); text-decoration: none; font-size: 12.5px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; opacity: .78; transition: opacity .2s ease; }
.nav nav a:hover { opacity: 1; }
.nav-cta {
  background: var(--brand-deepest); color: #fff !important;
  padding: 10px 20px; border-radius: 999px; letter-spacing: .04em !important;
  text-transform: none !important; font-size: 13.5px !important;
  transition: background .2s ease, transform .2s ease;
}
.nav-cta:hover { background: var(--brand-deep); transform: translateY(-1px); }

/* ---------------- hero ---------------- */
/* ============================================================
   BASE TYPE AND CONTROLS
   Shared by every section; the hero overrides these afterwards.
   ============================================================ */
h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  letter-spacing: -0.025em; margin: 0 0 30px; max-width: 16ch;
}
h1 em, h2 em { font-style: italic; font-weight: 600; color: var(--brand); }

.lede {
  font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--ink-soft);
  max-width: 60ch; margin: 0 0 34px; line-height: 1.68;
}
.lede.narrow { max-width: 54ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block; text-decoration: none; padding: 13px 26px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--brand-deepest); color: #fff;
  border: 1px solid var(--brand-deepest);
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--brand-wash); border-color: var(--brand-deep); color: var(--accent); }
.btn.ghost.light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn.ghost.light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.hero-cue { display: flex; align-items: center; gap: 16px; }
.hero-cue a { text-decoration: none; }
.hero-rule { display: block; }

/* ============================================================
   HERO — from the Claude Design handoff. Reproduced numerically:
   amber field, sun wash, etched ICADE facade, readability scrim.
   The scrim is what keeps the body copy accessible over the bars.
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: 86vh; display: flex; align-items: center;
  background: linear-gradient(176deg, #f0b23a 0%, #e8a427 42%, #de9519 100%);
}
.hero-wash {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 85% at 12% -10%,
    rgba(255,244,218,.55) 0%, rgba(255,244,218,0) 58%);
}
.hero-etch {
  position: absolute; left: 0; right: 0; bottom: -2%; height: 74%;
  opacity: .85; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
}
.hero-etch img {
  position: absolute; left: 0; bottom: 0; width: 100%; min-width: 1100px;
  height: 100%; object-fit: cover; object-position: 62% 100%; display: block;
}
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(232,164,39,.80) 0%, rgba(232,164,39,.34) 46%, rgba(232,164,39,0) 72%);
}
.hero-content { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 108px; }

.hero h1 {
  font-size: clamp(52px, 8.4vw, 132px); line-height: .94;
  letter-spacing: -0.035em; color: #2e0709; text-wrap: balance;
  max-width: none; margin: 0;
}
.hero h1 em { color: #7a1a22; }
.hero .slogan {
  font-size: clamp(22px, 2.6vw, 36px); color: #45100f;
  margin: 14px 0 0; display: block;
}
.hero .slogan { display: block; font-family: "Playfair Display", Georgia, serif;
  font-style: italic; }
.hero .lede {
  max-width: 640px; font-size: clamp(16px, 1.32vw, 19.5px); line-height: 1.62;
  color: #47110f; margin: 34px 0 0; text-wrap: pretty;
}
.hero .hero-actions { margin-top: 40px; gap: 14px; }
.hero .btn {
  background: #2e0709; color: #fdf8f1; border-color: #2e0709;
  font-size: 16px; padding: 17px 30px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
}
.hero .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(46,7,9,.3); }
.hero .btn.ghost {
  background: rgba(253,248,241,.16); color: #2e0709;
  border: 1.5px solid rgba(46,7,9,.55); padding: 16px 28px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .btn.ghost:hover { background: rgba(253,248,241,.42); transform: translateY(-2px); }

.hero-cue {
  margin-top: 76px; padding-top: 22px;
  border-top: 1px solid rgba(46,7,9,.22);
  animation: cueDrift 3.4s ease-in-out infinite;
}
.hero-rule { width: 44px; height: 1px; background: rgba(46,7,9,.5); }
.hero-cue a {
  color: rgba(46,7,9,.72); font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500;
}
.hero-cue a:hover { color: #2e0709; }
@keyframes cueDrift {
  0%, 100% { transform: translateY(0);   opacity: .75; }
  50%      { transform: translateY(5px); opacity: 1; }
}
.hero a:focus-visible { outline-color: #2e0709; }

@media (prefers-reduced-motion: reduce) { .hero-cue { animation: none; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background: linear-gradient(176deg, #7a5410 0%, #6b4a0e 42%, #55390a 100%);
  }
  :root:not([data-theme="light"]) .hero-scrim {
    background: linear-gradient(100deg, rgba(107,74,14,.86) 0%, rgba(107,74,14,.4) 46%, rgba(107,74,14,0) 72%);
  }
  :root:not([data-theme="light"]) .hero h1,
  :root:not([data-theme="light"]) .hero .slogan { color: #fdf3e2; }
  :root:not([data-theme="light"]) .hero h1 em { color: var(--gold); }
  :root:not([data-theme="light"]) .hero .lede { color: #ead9bd; }
  :root:not([data-theme="light"]) .hero .btn { background: #fdf8f1; color: #2e0709; border-color: #fdf8f1; }
  :root:not([data-theme="light"]) .hero .btn.ghost { color: #fdf8f1; border-color: rgba(253,248,241,.45); }
  :root:not([data-theme="light"]) .hero-cue { border-top-color: rgba(253,243,226,.22); }
  :root:not([data-theme="light"]) .hero-cue a { color: rgba(253,243,226,.75); }
  :root:not([data-theme="light"]) .hero-rule { background: rgba(253,243,226,.5); }
  :root:not([data-theme="light"]) .nav { background: rgba(19,16,17,.72); border-bottom-color: rgba(255,255,255,.08); }
}

/* ---------------- bands ---------------- */
.band { padding: 92px 0; }
.band.alt { background: var(--brand-wash);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { margin: 0 0 14px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.kicker.light { color: var(--gold); }
h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -0.022em;
  line-height: 1.16; margin: 0 0 44px; max-width: 22ch; }
h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  font-size: 1.32rem; line-height: 1.26; margin: 0 0 14px; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
.aside { color: var(--ink-faint); font-size: 14px; margin-top: 40px; max-width: 64ch; }

/* ---------------- pillar columns (rules, not boxes) ---------------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); }
.card { padding: 4px 30px 0; border-left: 1px solid var(--line); }
.card:first-child { padding-left: 0; border-left: 0; }
.card-num { display: block; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.1rem; font-weight: 300; line-height: 1; color: var(--brand);
  letter-spacing: -0.01em; margin-bottom: 20px; }
.card p { color: var(--ink-soft); font-size: 14.6px; margin: 0; line-height: 1.66; }

/* ---------------- stats ---------------- */
.stats { padding: 92px 0; border-top: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.stat { padding: 0 28px; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.num { display: block; overflow-wrap: anywhere; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 300; line-height: 1.05;
  color: var(--brand); letter-spacing: -0.02em; }
.lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); margin-top: 12px; }

/* ---------------- split lists ---------------- */
.split { display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 22px; margin-bottom: 12px;
  color: var(--ink-soft); font-size: 14.8px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg);
  transition: transform .2s ease; }
.ticks li:hover::before { transform: rotate(45deg) scale(1.35); }

/* ---------------- timeline ---------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 36px 32px; border-left: 1px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -4.5px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.when { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.timeline h3 { font-size: 1.18rem; margin-bottom: 8px; }
.timeline p { color: var(--ink-soft); font-size: 14.6px; margin: 0; max-width: 60ch; }

/* ---------------- dark join band ---------------- */
.join { background: var(--brand-deepest); color: #fff;
  border: 0; position: relative; overflow: hidden; }
.join h2 { max-width: 22ch; margin-bottom: 20px; }
.join .lede { color: #e4cfcf; margin-bottom: 34px; }
.join h2 em { color: var(--gold); }

/* ---------------- footer ---------------- */
footer { border-top: 1px solid var(--line); padding: 32px 0; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 20px 32px;
  justify-content: space-between; align-items: center; }
.foot-id { display: flex; align-items: center; gap: 12px; }
.foot-mark { display: block; }
.foot-brand { font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; font-size: 14.5px; margin: 0 0 2px; }
.muted { color: var(--ink-faint); font-size: 12.5px; margin: 0; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 500; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }
.disclaimer { flex-basis: 100%; max-width: 62ch; padding-top: 14px;
  border-top: 1px solid var(--line); }

/* ============================================================
   MOTION
   ============================================================ */
.motion-on .reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .78s cubic-bezier(.22,.61,.36,1),
              transform .78s cubic-bezier(.22,.61,.36,1); }
.motion-on .reveal.is-in { opacity: 1; transform: none; }
.motion-on .hero h1 { transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { border-left: 0; padding: 0 0 38px; }
  .card:nth-child(odd) { padding-right: 24px; }
  .nav nav { gap: 16px; }
  .nav nav a:not(.nav-cta) { font-size: 11px; }
}
@media (max-width: 720px) {
  .brand-text { display: none; }
  .brand-short { display: block; }
  .hero-watermark { opacity: .05; right: -120px; }
  .wrap { padding: 0 20px; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 32px; }
  .band, .stats { padding: 58px 0; }
  .hero-cue { margin-top: 44px; }
  .nav nav a:not(.nav-cta) { display: none; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   APPLE-INFLECTED RHYTHM
   4/8/16/24/48/96 spacing scale, layered depth, calm easing.
   Brand serif typography is kept deliberately — the club's
   identity lives in it.
   ============================================================ */
:root {
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px;
  --ease: cubic-bezier(.25,.1,.25,1);
}

.band, .stats { padding: var(--space-2xl) 0; }
h2 { margin-bottom: var(--space-xl); }
.lede { margin-bottom: var(--space-lg); }

/* touch targets ≥44px */
.btn, .nav-cta, .announce .pill { min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center; }
.nav nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* calmer, Apple-ish micro-interactions */
.btn { transition: background .3s var(--ease), transform .3s var(--ease),
                   border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { transform: scale(1.02) translateY(-1px);
             box-shadow: 0 8px 24px rgba(108,12,12,.18); }
.btn:active { transform: scale(.985); }

/* depth: the pillar columns lift instead of merely shifting colour */
.card { transition: transform .4s var(--ease); }
.card:hover { transform: translateY(-4px); }

/* the club's Spanish slogans, in the pamphlet's script voice */
.slogan {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  color: var(--brand); margin: 0 0 var(--space-lg);
  display: flex; flex-wrap: wrap; gap: var(--space-md);
}
.slogan span { position: relative; padding-right: var(--space-md); }
.slogan span:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--gold); transform: rotate(45deg);
}

/* ============================================================
   PARALLAX OBJECTS
   Large line-drawn props that drift against the scroll.
   Decorative only: aria-hidden, never interactive, and frozen
   entirely under prefers-reduced-motion.
   ============================================================ */
.objects { position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0; }
.band, .stats, .hero { position: relative; }
.wrap { position: relative; z-index: 1; }

.obj { position: absolute; display: block; opacity: .13;
  will-change: transform; pointer-events: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .obj { opacity: .18; }
}

.o-hero-a    { width: 230px; top: 6%;   right: 34%; }
.o-hero-b    { width: 190px; bottom: -14%; left: -46px; }
.o-pillars   { width: 148px; top: 6%;   right: -40px; }

.o-program   { width: 250px; top: 12%;  left: -96px; }
.o-events    { width: 230px; bottom: 8%; right: -66px; }

@media (max-width: 860px) {
  .obj { opacity: .07; }
  .o-program { display: none; }
  .o-pillars { width: 110px; }
  .o-events  { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .obj { transform: none !important; transition: none !important; }
}

/* ============================================================
   SIGNATURE INTERACTION — masked word reveal on the headline.
   One kinetic treatment for the whole site, repeated nowhere
   else. The real sentence stays in the accessibility tree;
   the split spans are aria-hidden.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  /* the split spans carry the visible copy, so keep this out of selections */
  -webkit-user-select: none; user-select: none;
}
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-inner {
  display: inline-block; transform: translateY(110%);
  transition: transform .82s cubic-bezier(.16,1,.3,1);
}
.is-split.is-in .word-inner { transform: translateY(0); }
.motion-off .word-inner { transform: none; transition: none; }

/* fluid scale */
h1 { font-size: clamp(2.6rem, 1.8rem + 5.4vw, 6.4rem); line-height: .98; }

/* ---- grain on the dark closing band ---- */
.join::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.join .wrap { position: relative; z-index: 2; }

/* ---- focus states: never rely on hover alone ---- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}
.join a:focus-visible, .announce a:focus-visible { outline-color: var(--gold); }

/* ---- reduced motion: belt and braces over the per-effect rules ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .word-inner { transform: none !important; }
}

/* Photographic props: multiply blends them into the cream so they read as
   part of the page rather than clipart dropped on top. Desaturated toward
   the brand rather than left at full stock-photo colour. */
.obj-photo {
  opacity: .12; mix-blend-mode: multiply;
  filter: saturate(.5) contrast(1.03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .obj-photo {
    mix-blend-mode: screen; opacity: .13; filter: saturate(.5) brightness(1.1);
  }
}