/* ==========================================================================
   Grooming Masters — case study (light theme page)
   Loads after css/site.css. Overrides the shared dark-page defaults for
   this page only; does not touch site.css.
   ========================================================================== */

html { background: #E4E3E0; }
body {
  background: #E4E3E0;
  color: #1A1A1A;
}

::selection { background: #1A1A1A; color: #4F7A14; }

img { max-width: 100%; }

/* ============ nav / footer theme overrides ============
   Paper header on a paper page — the passport hero below is the
   same family of light stock, so the chrome simply matches it. */
header.mono-nav {
  background: rgba(233, 232, 227, 0.92);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.mono-word, header.mono-nav nav a { color: #6A6A6A; }
.mono-word:hover, header.mono-nav nav a:hover { color: #1A1A1A; }
header.mono-nav nav a.is-current { color: #1A1A1A; }
footer.mono-foot nav a { color: #6A6A6A; }
footer.mono-foot nav a:hover { color: #1A1A1A; }
footer.mono-foot { border-top: 1px solid #DFDDD4; }
.mono-foot-brand span { color: #6A6A6A; }
.mono-foot-copy { color: #747474; }

/* ============ keyframes (page-specific) ============ */
@keyframes gmfloat {
  0%, 100% { transform: rotate(-2.4deg) translateY(0); }
  50%      { transform: rotate(-2.4deg) translateY(-20px); }
}

/* ============ shared containers ============ */
.gm-wrap { max-width: 1440px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }

/* ============ hero — the passport data page ============
   Diplomacy, printed. The hero is the data page of a passport from
   the Sovereign State of Men's Care, and its security print behaves
   like UV ink: blank official paper until light touches it. The
   engraving (woven mesh + guilloché rosettes, generated as SVG by
   js/pages/grooming-masters.js) lives in #gmGuilLit, masked to a
   light spot that follows the pointer; a soft sheen crosses the
   laminate on its own; the
   GM oval seal hue-shifts like a kinegram. Microprint, perforated
   document number, bilingual fields and the MRZ close the page. */
.gm-hero {
  position: relative; max-width: none; margin: 0; padding: 150px 80px 0;
  box-sizing: border-box; overflow: hidden;
  background: linear-gradient(to bottom, #F2F1EC 0%, #EDECE6 70%, #E9E8E2 100%);
  /* the pointer-following light spot (JS writes these) */
  --gmLx: 50%;
  --gmLy: 30%;
}

/* security print: UV ink. The paper reads blank — #gmGuil only gets
   a faint static print for reduced-motion users; everyone else sees
   the engraving solely inside the light (#gmGuilLit masked to the
   pointer spot on desktop, to a slow roaming band on touch). */
.gm-guil { position: absolute; inset: 0; pointer-events: none; }
.gm-guil svg { display: block; width: 100%; height: 100%; }
.gm-guil-lit {
  opacity: 0;
  -webkit-mask-image: radial-gradient(400px circle at var(--gmLx) var(--gmLy), #000 0%, rgba(0,0,0,0.5) 48%, transparent 74%);
  mask-image: radial-gradient(400px circle at var(--gmLx) var(--gmLy), #000 0%, rgba(0,0,0,0.5) 48%, transparent 74%);
  transition: opacity 0.35s ease;
}
.gm-hero.gm-has-light .gm-guil-lit { opacity: 1; }
/* no pointer: the lamp roams the page on its own, but kept to a
   whisper — this used to run at full 0.6 opacity on an 18s loop and
   fought with the copy for attention the whole time it was on screen.
   Slower and much dimmer keeps the "the page has a secret" idea
   without competing with the text that has to carry the page. */
@media (hover: none) {
  .gm-guil-lit {
    opacity: 0.14;
    -webkit-mask-image: linear-gradient(72deg, transparent 30%, #000 46%, #000 54%, transparent 70%);
    mask-image: linear-gradient(72deg, transparent 30%, #000 46%, #000 54%, transparent 70%);
    -webkit-mask-size: 340% 100%;
    mask-size: 340% 100%;
    animation: gmUvRoam 28s ease-in-out infinite alternate;
  }
}
@keyframes gmUvRoam {
  from { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-guil-lit { display: none; }
}

/* the laminate: a soft band of light that keeps crossing the page */
.gm-laminate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gm-laminate::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 62%;
  background: linear-gradient(78deg, transparent 0%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 70%, transparent 100%);
  transform: skewX(-8deg);
  mix-blend-mode: soft-light;
}
@media (prefers-reduced-motion: no-preference) {
  .gm-laminate::before { animation: gmSheen 18s ease-in-out infinite; }
}
@keyframes gmSheen {
  0%   { left: -70%; }
  58%  { left: 115%; }
  100% { left: 115%; }
}

.gm-hero-inner, .gm-hero .gm-meta-grid { max-width: 1280px; margin-left: auto; margin-right: auto; }
.gm-hero-inner { position: relative; z-index: 2; }

/* ---- boot: border control ----
   Armed as .gm-boot before first paint (inline script under the hero),
   released by js/pages/grooming-masters.js ~2.5s later. One soft pass
   of the inspection lamp glides left to right and prints the page:
   typography wiped on by its leading edge, the holder name settling
   from two quiet frames of misregistered ink, the seal glinting, the
   MRZ machine-printing in steps. The security print deliberately sits
   the boot out — the page loads as clean paper, and the engraving
   stays a discovery for the pointer afterward. All of it lives inside
   the no-preference media block — reduced motion never arms the
   class. */
@media (prefers-reduced-motion: no-preference) {
  /* the lamp: a soft white crest with the faintest glass shoulders,
     skewed like the ambient sheen's big brother */
  .gm-bootlight { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: none; overflow: hidden; }
  .gm-boot .gm-bootlight { display: block; }
  .gm-bootlight::before {
    content: ""; position: absolute; top: -14%; bottom: -14%; width: 32%; left: -45%;
    transform: skewX(-11deg);
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.16) 66%,
      transparent 100%);
    animation: gmLampPass 1.5s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0.15s both;
  }

  /* typography prints in the lamp's wake: a hard clip wipe, no fade */
  .gm-boot .gm-hero-inner,
  .gm-boot .gm-meta-grid {
    animation: gmPrintWipe 1.5s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0.15s both;
  }

  /* the holder name arrives out of register and snaps true */
  .gm-boot .gm-pass-h1 {
    animation: gmMisprint 0.45s steps(1, end) 0.6s both;
  }

  /* the seal catches the lamp as the band crosses it */
  .gm-boot .gm-seal {
    animation: gmSealCatch 0.8s ease-out 0.95s both;
  }

  /* the MRZ prints like the machine that will read it */
  .gm-boot .gm-mrz span:first-child { animation: gmMrzPrint 0.55s steps(22, end) 1.35s both; }
  .gm-boot .gm-mrz span + span { animation: gmMrzPrint 0.55s steps(22, end) 1.6s both; }

  /* the ambient sheen stands aside while the lamp works */
  .gm-laminate { transition: opacity 0.6s ease; }
  .gm-boot .gm-laminate { opacity: 0; }
}
@keyframes gmLampPass {
  from { left: -55%; }
  to   { left: 118%; }
}
@keyframes gmPrintWipe {
  from { clip-path: inset(-8% 104% -8% -4%); }
  to   { clip-path: inset(-8% -4% -8% -4%); }
}
@keyframes gmMisprint {
  0%   { text-shadow: -4px 0 rgba(188, 255, 86, 0.5), 4px 0 rgba(39, 67, 214, 0.35); }
  50%  { text-shadow: -1.5px 0 rgba(188, 255, 86, 0.55), 1.5px 0 rgba(39, 67, 214, 0.4); }
  100% { text-shadow: none; }
}
@keyframes gmSealCatch {
  0%   { filter: hue-rotate(70deg) brightness(1.35) saturate(1.25); }
  100% { filter: none; }
}
@keyframes gmMrzPrint {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* top row: breadcrumb + trilingual document word */
.gm-pass-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.gm-hero .gm-tag-pass, .gm-hero .gm-tag-pass a { color: #8A8F82; }
.gm-hero .gm-tag-pass a:hover { color: #16309C; }
.gm-hero .gm-cursor { color: #4F7A14; }
.gm-pass-word {
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.3em;
  color: #9A9FB4; text-transform: uppercase; white-space: nowrap;
}

/* issuing state, then the machine row of type/code/number */
.gm-pass-state {
  margin: 46px 0 0; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(11px, 1.4vw, 14px); letter-spacing: 0.34em;
  color: #16309C; text-transform: uppercase;
}
.gm-pass-idrow {
  margin: 14px 0 0; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(10px, 1.1vw, 12px); letter-spacing: 0.14em;
  color: #565D7E; text-transform: uppercase;
}

/* holder name + the seal */
.gm-pass-main {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-top: 44px;
}
.gm-field-label {
  display: block; font-family: 'VCR OSD Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: #8A90A8;
}
/* min-width 0 so the name column can never shove the seal off the row */
.gm-pass-name { flex: 1 1 auto; min-width: 0; }
.gm-hero .gm-pass-h1 {
  margin: 14px 0 0; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(34px, 5vw, 84px); line-height: 1.04;
  letter-spacing: 0.015em; text-transform: uppercase; color: #16309C;
  font-weight: 400;
}

.gm-seal { width: clamp(120px, 13vw, 176px); height: auto; flex: 0 0 auto; overflow: visible; margin-bottom: 8px; }
.gm-seal path { stroke-width: 7; opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .gm-seal { filter: hue-rotate(calc(var(--gmTilt, 0) * 36deg)); }
}

/* observations field carries the intro copy */
.gm-pass-obs { margin-top: 42px; max-width: 660px; }
.gm-pass-obs .gm-field-label { margin-bottom: 10px; }
.gm-hero .gm-sub-pass { margin: 0; color: #3E4458; }

.gm-hero-hint {
  margin: 34px 0 0; font-family: 'VCR OSD Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9AA0B6;
}

/* the document number, laser-perforated through the corner */
.gm-perf {
  position: absolute; right: 0; bottom: -12px; width: clamp(120px, 14vw, 200px);
  height: auto; overflow: visible; pointer-events: none;
}
.gm-perf text {
  font-family: 'VCR OSD Mono', monospace; font-size: 96px;
  fill: none; stroke: #2A3050; stroke-width: 1.6;
  stroke-dasharray: 0.1 5.4; stroke-linecap: round; opacity: 0.55;
}

/* passport fields */
.gm-hero .gm-meta-grid {
  position: relative; z-index: 2; margin-top: 46px;
  border-top-color: rgba(26, 33, 56, 0.16);
}
.gm-hero .gm-meta-label { color: #8A90A8; font-size: 10px; letter-spacing: 0.22em; }
.gm-hero .gm-meta-val { color: #1A2138; }

/* the machine-readable zone: whiter strip, full bleed, OCR lines */
.gm-mrz {
  position: relative; z-index: 2; margin: 56px -80px 0; padding: 20px 80px 22px;
  background: #F7F6F1; border-top: 1px solid rgba(26, 33, 56, 0.14);
}
.gm-mrz-inner { max-width: 1280px; margin: 0 auto; }
.gm-mrz span {
  display: block; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(10px, 1.55vw, 21px); letter-spacing: 0.1em;
  color: #2A3050; white-space: nowrap;
}
.gm-mrz span + span { margin-top: 7px; }

@media (max-width: 760px) {
  .gm-hero { padding-top: 110px; }
  .gm-pass-word { display: none; }
  .gm-pass-state { margin-top: 34px; letter-spacing: 0.22em; }
  .gm-pass-main { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 34px; }
  /* seal reads first on mobile, the way a passport photo/stamp sits
     above the printed name — order only, DOM stays as-is so desktop's
     name-left/seal-right row is untouched */
  .gm-seal { width: 108px; margin-bottom: 0; order: -1; }
  .gm-mrz { margin: 44px -22px 0; padding: 14px 22px 16px; }
  .gm-mrz span { font-size: 8.5px; letter-spacing: 0.08em; }
  .gm-perf { bottom: -6px; }
  .gm-perf text { stroke-width: 2.2; stroke-dasharray: 0.1 6.4; }
  /* touch devices can't hover the security print off, so it's a
     permanent (if now much dimmer) presence — the observations copy
     is the longest, densest reading on the page and the one the old
     full-strength roam visibly crossed, so it gets its own solid
     paper backing to stay legible through every phase of the loop,
     read as a stamped field rather than a patch. */
  .gm-pass-obs {
    background: rgba(242, 241, 236, 0.92);
    margin-left: -14px; margin-right: -14px;
    padding: 14px 14px 16px;
  }
}

.gm-tag {
  font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.12em;
  color: #747474; text-transform: uppercase;
}
.gm-tag a { color: #747474; text-decoration: none; transition: color 0.2s ease; }
.gm-tag a:hover { color: #4F7A14; }
.gm-cursor { color: #4F7A14; animation: blink 1.2s steps(1) infinite; }
.gm-h1 {
  margin: 0; font-weight: 400; font-size: clamp(48px, 8vw, 124px);
  line-height: 0.98; letter-spacing: -0.04em; color: #1A1A1A;
}
.gm-sub { margin: 0; max-width: 640px; font-size: 21px; line-height: 1.4; color: #6A6A6A; }
.gm-meta-grid {
  margin-top: 88px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px; border-top: 1px solid #DFDDD4; padding-top: 28px;
}
.gm-meta-item { display: flex; flex-direction: column; gap: 10px; }
.gm-meta-label {
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  color: #8F8F8F; text-transform: uppercase;
}
.gm-meta-val { font-size: 15px; color: #3D3D3D; }

/* ============ part dividers ============ */
.gm-divider { position: relative; max-width: 1440px; margin: 0 auto; padding: 140px 80px 96px; box-sizing: border-box; }
/* the part numerals are laser-perforated through the page — the same
   device as the document number in the hero: dotted-outline VCR mono
   digits in ink navy, with the tracking pulled in so II reads as one
   numeral rather than two spaced glyphs */
.gm-numeral {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  overflow: visible; pointer-events: none; user-select: none;
}
.gm-numeral text {
  font-family: 'VCR OSD Mono', monospace; font-size: 280px;
  letter-spacing: -0.14em;
  fill: none; stroke: #2A3050; stroke-width: 2.2;
  stroke-dasharray: 0.1 9; stroke-linecap: round; opacity: 0.4;
}
.gm-numeral-i { width: clamp(120px, 12vw, 190px); height: auto; }
.gm-numeral-ii { width: clamp(200px, 20.5vw, 330px); height: auto; }
.gm-divider-inner { border-top: 1px solid #DFDDD4; padding-top: 32px; display: flex; flex-direction: column; gap: 28px; position: relative; }
.gm-divider-h2 {
  margin: 0; font-weight: 400; font-size: clamp(44px, 6.5vw, 104px);
  line-height: 0.98; letter-spacing: -0.04em; color: #1A1A1A;
}

/* ============ numbered content sections ============ */
.gm-section { max-width: 1440px; margin: 0 auto; padding: 152px 80px 120px; box-sizing: border-box; }
.gm-section.gm-section-tight { padding-top: 32px; }
.gm-section-grid { display: grid; grid-template-columns: minmax(240px, 0.8fr) 1.6fr; gap: 64px; align-items: start; }
.gm-section-num { position: sticky; top: 100px; display: flex; align-items: baseline; gap: 14px; }
/* the section numbers carry the page's one quiet holographic touch:
   a slow foil drift between ink gray, green and blue — small enough
   to register as a printing detail, recurring down the whole page */
.gm-num {
  font-family: 'VCR OSD Mono', monospace; font-size: 13px;
  color: transparent;
  background: linear-gradient(100deg, #747474 0%, #52794A 30%, #3E5AB8 55%, #747474 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .gm-num { animation: gmHoloSoft 14s linear infinite; }
}
@keyframes gmHoloSoft {
  from { background-position: 0% 0; }
  to   { background-position: -150% 0; }
}
.gm-h2 { margin: 0; font-weight: 400; font-size: clamp(34px, 3.6vw, 54px); letter-spacing: -0.03em; line-height: 1; color: #1A1A1A; }
.gm-copy { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.gm-lead { margin: 0; font-size: 24px; line-height: 1.35; color: #3D3D3D; }
.gm-body { margin: 0; font-size: 18px; line-height: 1.55; color: #555555; }
.gm-body em { font-style: normal; color: #1A1A1A; }

/* ============ figures ============ */
.gm-fig { padding: 0 0 8px; }
.gm-fig-hero { display: block; width: min(720px, 100%); margin: 0 auto; height: auto; }
.gm-fig-support { display: block; width: 100%; max-width: 1040px; margin: 0 auto; height: auto; }
.gm-fig-grid-2 { max-width: 1040px; margin: 8px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-fig-grid-3 { max-width: 1040px; margin: 8px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gm-fig-grid-2 img, .gm-fig-grid-3 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-fig-grid-2 img { aspect-ratio: 4 / 5; }
.gm-fig-grid-3 img { aspect-ratio: 3 / 4; }
.gm-caption {
  max-width: 1440px; margin: 0 auto; padding: 16px 80px 0; box-sizing: border-box;
  display: flex; justify-content: space-between; gap: 24px;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8F8F8F;
}
.gm-caption span:first-child { color: #747474; }

/* ============ ticker ============ */
.gm-ticker-section { padding: 72px 0 0; overflow: hidden; }
.gm-ticker-section.gm-ticker-tight { padding-top: 64px; }
.gm-ticker {
  border-top: 1px solid #DFDDD4; border-bottom: 1px solid #DFDDD4; padding: 22px 0;
  display: flex; width: max-content; animation: mq 46s linear infinite;
}
.gm-ticker-set { display: flex; font-family: 'VCR OSD Mono', monospace; font-size: 15px; letter-spacing: 0.12em; }
.gm-ticker-item { display: inline-flex; align-items: baseline; gap: 14px; padding-right: 56px; white-space: nowrap; }
.gm-ticker-item .t-name { color: #1A1A1A; }
.gm-ticker-item .t-meta { color: #8F8F8F; font-size: 12px; }
.gm-ticker-item .t-est { color: #4F7A14; font-size: 12px; }

/* ============ browser-window mockup ============ */
.browser-stage { background: #DBDAD7; padding: clamp(48px, 7vw, 104px) clamp(20px, 6vw, 96px); }
.browser-window {
  margin: 0 auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 48px 120px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
  background: #202124;
}
.browser-bar { display: flex; align-items: center; height: 46px; padding: 0 16px; gap: 12px; background: #202124; }
.browser-dots { display: flex; gap: 8px; flex-shrink: 0; }
.browser-dots span { display: block; width: 12px; height: 12px; border-radius: 50%; }
.browser-dots span:nth-child(1) { background: #FF5F57; }
.browser-dots span:nth-child(2) { background: #FEBC2E; }
.browser-dots span:nth-child(3) { background: #28C840; }
.browser-url-wrap { flex: 1; display: flex; justify-content: center; }
.browser-url {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #282A2D; border-radius: 15px; height: 30px; padding: 0 18px;
  width: min(460px, 66%);
}
.browser-url svg { flex-shrink: 0; }
.browser-url span {
  font-family: 'VCR OSD Mono', monospace; font-size: 12px; color: #9AA0A6;
  letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-spacer { width: 60px; flex-shrink: 0; }
.browser-body { background: #F4F4F4; }
.browser-body img { display: block; width: 100%; height: auto; }
/* sticky scrub zone — wraps each scroll-frame's stage; the JS gives the
   zone extra height and pins the stage while the reader's scroll drives
   the screenshot from its top all the way to its bottom */
.scrub-zone { position: relative; }
.scrub-zone .scrub-sticky { position: sticky; top: 0; }

/* scrolling (full-page) frame variant — inner pan is scroll-scrubbed
   from js/pages/grooming-masters.js, tied to the reader's own scroll */
.browser-body-scroll {
  aspect-ratio: 16 / 10; overflow: hidden; background: #F4F4F4;
}
.browser-body-scroll img {
  display: block; width: 100%; height: auto; will-change: transform;
}


/* ============ Club+ card monument ============ */
.club-card-fig { padding: 0 0 8px; }
.club-card-panel {
  position: relative; background: #DBDAD7; overflow: hidden;
  padding: clamp(72px, 9vw, 150px) clamp(20px, 6vw, 96px);
}
.club-card-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'VCR OSD Mono', monospace; font-size: clamp(120px, 24vw, 380px);
  letter-spacing: -0.02em; color: rgba(26,26,26,0.06); white-space: nowrap;
  user-select: none; pointer-events: none;
}
.club-card-imgwrap { position: relative; display: flex; justify-content: center; }
.club-card-imgwrap img {
  display: block; width: min(1160px, 96vw); height: auto;
  animation: gmfloat 5.4s ease-in-out infinite; will-change: transform;
}
.club-card-note {
  position: absolute; left: clamp(24px, 6vw, 96px); bottom: clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6E6E6E;
}
.club-card-note span:last-child { color: #8F8F8F; }

/* ============ final CTA ============ */
.gm-cta { max-width: 1440px; margin: 0 auto; padding: 160px 80px 140px; box-sizing: border-box; }
.gm-cta-tag {
  display: block; font-family: 'VCR OSD Mono', monospace; font-size: 13px;
  letter-spacing: 0.12em; color: #747474; text-transform: uppercase;
}
.gm-cta-link {
  display: inline-block; margin-top: 32px; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(28px, 5vw, 72px); color: #1A1A1A; text-decoration: none;
  text-transform: uppercase; line-height: 1.1; transition: color 0.2s ease;
}
.gm-cta-link:hover { color: #4F7A14; }
.gm-cta-foot {
  margin-top: 72px; border-top: 1px solid #DFDDD4; padding-top: 28px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.gm-cta-foot a {
  font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.08em;
  color: #6A6A6A; text-decoration: none; transition: color 0.2s ease;
}
.gm-cta-foot a:hover { color: #1A1A1A; }

/* ============ reveal starting state tweak for light bg ============ */
[data-reveal] { opacity: 0; }

/* ============ mobile ============ */
@media (max-width: 760px) {
  .gm-wrap,
  .gm-hero, .gm-divider, .gm-section, .gm-cta { padding-left: 22px !important; padding-right: 22px !important; }
  .gm-caption { padding-left: 22px !important; padding-right: 22px !important; }
  .gm-numeral { display: none; }
  .gm-meta-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .gm-section-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .gm-section-num { position: static !important; top: auto; }
  .gm-section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .gm-divider { padding-top: 96px !important; }
  .club-card-imgwrap img { width: min(560px, 100%); }
  .club-card-word { font-size: clamp(80px, 34vw, 200px); }

  /* three-up photo grid is illegible squeezed into 3 columns on a phone
     (each photo shrinks to ~120px on a 375px screen) — stack it. The
     two-up grid already reads fine at 2 columns on mobile, left as-is. */
  .gm-fig-grid-3 { grid-template-columns: 1fr; gap: 8px; }
  .gm-fig-grid-3 img { aspect-ratio: 4 / 3; }
}