/* ==========================================================================
   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.
   ========================================================================== */

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

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

img { max-width: 100%; }

/* ============ nav / footer theme overrides ============ */
header.mono-nav {
  background: rgba(228, 227, 224, 0.92);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.mono-word, header.mono-nav nav a, footer.mono-foot nav a { color: #6A6A6A; }
.mono-word:hover, header.mono-nav nav a:hover, footer.mono-foot nav a:hover { color: #1A1A1A; }
header.mono-nav nav a.is-current { 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 gmscroll {
  0%, 6%    { transform: translateY(0); }
  50%       { transform: translateY(calc(-100% + 100cqh)); }
  94%, 100% { transform: translateY(0); }
}
@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 ============ */
.gm-hero { max-width: 1440px; margin: 0 auto; padding: 120px 80px 96px; box-sizing: border-box; }
.gm-hero-inner { display: flex; flex-direction: column; gap: 40px; }
.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; }
.gm-numeral {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: 'VCR OSD Mono', monospace; font-size: clamp(220px, 22vw, 360px);
  line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(26,26,26,0.16);
  pointer-events: none; user-select: none;
}
.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; }
.gm-num { font-family: 'VCR OSD Mono', monospace; font-size: 13px; color: #747474; }
.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; }

/* scrolling (full-page) frame variant */
.browser-body-scroll {
  aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: #F4F4F4;
}
.browser-body-scroll img {
  display: block; width: 100%; height: auto; will-change: transform;
  animation-name: gmscroll; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-play-state: paused;
}

/* cropped-detail frame variant (e.g. club dashboard — crops out the cart rail) */
.browser-body-crop { aspect-ratio: 8 / 7; overflow: hidden; }
.browser-body-crop img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ============ 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; }
}