/* ═══════════════════════════════════════════════════════════════
   SteelQueens — Design Tokens (v3, image-first redesign)
   Colors + Type + Spacing + Elevation
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo+Black&family=Archivo:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ─── Core palette ─────────────────────────────
     Dark, heavy, metallic — photography is the color.
     The UI steps back so the athletes step forward. */
  --sq-ink:              #0A0B0D;   /* near-black, primary surface */
  --sq-ink-2:            #13151A;   /* elevated surface */
  --sq-ink-3:            #1C2028;   /* card over dark */
  --sq-hairline:         #2A2E36;   /* 1px borders on dark */
  --sq-hairline-soft:    rgba(255,255,255,0.08);

  --sq-paper:            #F5F2EC;   /* warm off-white, editorial breaks */
  --sq-paper-2:          #EBE6DC;
  /* paper-ink: warm near-black instead of pure #0A0B0D — pure black on
     cream stock looks like cheap photocopy. This warm dark grey reads
     like an offset-printed magazine and visibly softens the giant
     section titles the user flagged as "ugly". */
  --sq-paper-ink:        #1F1A14;
  --sq-paper-ink-soft:   #4A3F30;   /* subheadings + captions on paper */

  /* ─── Text on dark ───────────────────────────── */
  --sq-fg:               #F2EFE8;   /* body on dark */
  --sq-fg-2:             #B8B6AE;   /* secondary */
  --sq-fg-3:             #6E6C66;   /* tertiary / captions */

  /* ─── Brand accents ─────────────────────────────
     Copper = signature. Iron = structural. Blood = caution/accountability. */
  --sq-copper:           #C8843A;   /* primary accent — warmer, more gold than original */
  --sq-copper-hot:       #E09B46;
  --sq-copper-deep:      #8A5223;
  --sq-iron:             #8C8F95;   /* cold grey for scores, metadata */
  --sq-blood:            #B31B2E;   /* accountability / alerts / receipts */

  /* ─── Division colors (kept from v2 for data continuity) ─── */
  --sq-div-bb:           #E2B33A;   /* Women's Bodybuilding — gold crown */
  --sq-div-physique:     #8A94A0;   /* Women's Physique — cold silver */
  --sq-div-figure:       #C8843A;   /* Figure — copper */
  --sq-div-wellness:     #D47E9A;   /* Wellness — rose */
  --sq-div-bikini:       #46B5A8;   /* Bikini — teal */
  --sq-div-fitness:      #A569D6;   /* Fitness — violet */

  /* ─── Iron Score tiers ───────────────────────── */
  --sq-tier-gold:        #E2B33A;
  --sq-tier-silver:      #B8B8B8;
  --sq-tier-bronze:      #CD7F32;

  /* ─── Typography stack ───────────────────────── */
  --font-display:        "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-headline:       "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-editorial:      "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-body:           "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-mono:           "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ─── Type scale (image-hero sizes, not sidebar sizes) ─── */
  --fs-micro:   0.6875rem;   /* 11 — eyebrow / metadata */
  --fs-small:   0.8125rem;   /* 13 — caption */
  --fs-body:    1rem;        /* 16 */
  --fs-lede:    1.1875rem;   /* 19 — intro paragraph */
  --fs-h4:      1.375rem;    /* 22 */
  --fs-h3:      1.875rem;    /* 30 */
  --fs-h2:      2.75rem;     /* 44 */
  --fs-h1:      4rem;        /* 64 */
  --fs-mega:    clamp(3.5rem, 9vw, 8rem);  /* editorial display */

  /* ─── Spacing ────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ─── Radius (minimal — editorial, not app-y) ─ */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ─── Elevation ──────────────────────────────── */
  --elev-1: 0 1px 2px rgba(0,0,0,.25);
  --elev-2: 0 6px 20px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
  --elev-3: 0 20px 60px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.30);
  --elev-hi: 0 30px 80px rgba(0,0,0,.60);

  /* ─── Motion ─────────────────────────────────── */
  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-in:   cubic-bezier(.7,.0,.8,.3);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  /* ─── Compatibility aliases ──────────────────────
     Older templates (page-ask.php, etc.) reference tokens that didn't
     exist in the v3 redesign — without these aliases their inline styles
     fall back to user-agent defaults, which on a dark theme produces
     black-on-black text inputs. Map the old names to v3 equivalents. */
  --sq-surface:          var(--sq-ink-2);
  --sq-surface-alt:      var(--sq-ink-3);
  --sq-border:           var(--sq-hairline);
  --sq-ink-muted:        var(--sq-fg-3);
  --sq-radius:           var(--r-2);
  --sq-radius-sm:        var(--r-1);
  --sq-radius-pill:      var(--r-pill);

  /* ─── Layout ─────────────────────────────────── */
  --container: 1360px;
  --container-narrow: 960px;
  --container-wide: 1680px;

  /* ─── Image treatment ────────────────────────── */
  --photo-filter-default:  contrast(1.08) saturate(0.92);
  --photo-filter-heroic:   contrast(1.15) saturate(0.78) brightness(0.96);
  --photo-grade-bw:        grayscale(1) contrast(1.15);

  /* Protection gradient overlays for text-over-image */
  --protect-bottom: linear-gradient(to top,
    rgba(10,11,13,0.95) 0%,
    rgba(10,11,13,0.75) 35%,
    rgba(10,11,13,0.25) 70%,
    transparent 100%);
  --protect-top: linear-gradient(to bottom,
    rgba(10,11,13,0.85) 0%,
    rgba(10,11,13,0.35) 45%,
    transparent 100%);
  --protect-left: linear-gradient(to right,
    rgba(10,11,13,0.92) 0%,
    rgba(10,11,13,0.55) 40%,
    transparent 80%);
}

/* ═══════════════════════════════════════════════════════════════
   SEMANTIC BASE
   ═══════════════════════════════════════════════════════════════ */

html { background: var(--sq-ink); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--sq-fg);
  background: var(--sq-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.0;  letter-spacing: -0.015em; text-transform: uppercase; margin: 0; }
h3, .h3 { font-family: var(--font-headline); font-size: var(--fs-h3); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
h4, .h4 { font-family: var(--font-headline); font-size: var(--fs-h4); line-height: 1.1;  letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }

.display-mega { font-family: var(--font-display); font-size: var(--fs-mega); line-height: 0.88; letter-spacing: -0.035em; text-transform: uppercase; }
.headline     { font-family: var(--font-headline); letter-spacing: 0.04em; text-transform: uppercase; }
.editorial    { font-family: var(--font-editorial); font-style: italic; }
.mono         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sq-copper);
}
.caption {
  font-size: var(--fs-small);
  color: var(--sq-fg-3);
  font-family: var(--font-body);
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--sq-fg-2);
  font-family: var(--font-editorial);
}
/* ═══════════════════════════════════════════════════════════════
   SteelQueens redesign styles
   ═══════════════════════════════════════════════════════════════ */

.sq-root {
  background: var(--sq-ink);
  color: var(--sq-fg);
  font-family: var(--font-body);
  min-height: 100%;
}

/* ─── Header ───────────────────────────────────── */
.sq-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,11,13,0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--sq-hairline);
}
.sq-header-topline {
  background: #000;
  color: var(--sq-fg-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 0;
  text-align: center;
  border-bottom: 1px solid var(--sq-hairline);
}
.sq-header-topline strong { color: var(--sq-copper); }
.sq-header-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; gap: 40px;
}
.sq-wordmark {
  display: flex; flex-direction: column; line-height: 0.85;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.sq-wordmark .wm-1 { font-size: 22px; color: var(--sq-fg); }
.sq-wordmark .wm-2 { font-size: 22px; color: var(--sq-copper); }
.sq-wordmark .wm-rule {
  width: 24px; height: 2px; background: var(--sq-copper); margin: 4px 0;
}

.sq-nav { display: flex; gap: 24px; flex: 1; }
.sq-nav a {
  font-family: var(--font-headline);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sq-fg-2);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sq-nav a:hover { color: var(--sq-fg); border-bottom-color: var(--sq-copper); }
.sq-nav a.active { color: var(--sq-fg); border-bottom-color: var(--sq-copper); }

.sq-header-actions { display: flex; gap: 12px; align-items: center; }

/* ─── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--sq-fg);
  border: 1px solid var(--sq-hairline);
  border-radius: var(--r-1);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { border-color: var(--sq-copper); color: var(--sq-copper); }
.btn-primary {
  background: var(--sq-copper);
  color: #0A0B0D;
  border-color: var(--sq-copper);
  font-weight: 700;
}
.btn-primary:hover { background: var(--sq-copper-hot); border-color: var(--sq-copper-hot); color: #0A0B0D; }
.btn-ghost { border-color: var(--sq-hairline-soft); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn svg { width: 16px; height: 16px; }

/* ─── Container ───────────────────────────────── */
.sq-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.sq-container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 32px; }

/* ─── HOMEPAGE HERO — editorial image mosaic ───── */
.sq-home-hero {
  background: var(--sq-ink);
  padding: 48px 0 80px;
  position: relative;
  overflow: hidden;
}
.sq-home-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(200,132,58,0.12) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(179,27,46,0.06) 0%, transparent 45%);
  pointer-events: none;
}
.sq-home-hero-inner {
  max-width: var(--container-wide);
  margin: 0 auto; padding: 0 32px;
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.sq-hero-left { display: flex; flex-direction: column; justify-content: center; }
.sq-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sq-copper);
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
}
.sq-hero-eyebrow::before {
  content: ''; display: inline-block; width: 24px; height: 2px; background: var(--sq-copper);
}
.sq-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--sq-fg);
  margin: 0 0 28px;
}
.sq-hero-title .accent { color: var(--sq-copper); }
.sq-hero-lede {
  font-family: var(--font-editorial);
  font-size: 19px;
  line-height: 1.55;
  color: var(--sq-fg-2);
  max-width: 540px;
  margin: 0 0 36px;
}
.sq-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.sq-hero-proof {
  display: flex; gap: 48px; padding-top: 28px;
  border-top: 1px solid var(--sq-hairline);
}
.sq-hero-proof-stat { display: flex; flex-direction: column; }
.sq-hero-proof-stat .val {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--sq-fg);
  letter-spacing: -0.02em;
}
.sq-hero-proof-stat .val .sub { color: var(--sq-copper); }
.sq-hero-proof-stat .lbl {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sq-fg-3);
  margin-top: 6px;
}

/* ─── HERO IMAGE MOSAIC (right side, 3-panel) ──── */
.sq-hero-mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 620px;
}
.sq-hero-mosaic .cell {
  position: relative;
  overflow: hidden;
  background: var(--sq-ink-2);
  border-radius: var(--r-2);
}
.sq-hero-mosaic .cell-main { grid-row: 1 / 3; grid-column: 1; }
.sq-hero-mosaic .cell-top  { grid-row: 1; grid-column: 2; }
.sq-hero-mosaic .cell-bot  { grid-row: 2; grid-column: 2; }

.sq-photo-frame {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: var(--photo-filter-heroic);
}
.sq-photo-overlay {
  position: absolute; inset: 0;
  background: var(--protect-bottom);
  pointer-events: none;
}
.sq-photo-caption {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.sq-photo-caption .name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.01em;
}
.sq-photo-caption .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.05em;
}
.sq-photo-caption .score {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--sq-copper);
  font-weight: 700;
  white-space: nowrap;
}
.cell-main .name { font-size: 32px; }

/* Placeholder image generator — copper monogram on dark gradient.
   When we don't have a real photo yet we show a big Archivo Black
   initial with a subtle copper glow and a centered diagonal wash,
   intentionally graphic so missing photos look designed, not broken. */
.photo-placeholder {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(200,132,58,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #1e222a 0%, #0f1116 70%);
  position: relative;
}
.photo-placeholder::before {
  /* Thin copper rule at the top edge */
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(to right, transparent, var(--sq-copper), transparent);
  opacity: 0.55;
}
.photo-placeholder::after {
  /* Brand wordmark fragment, very subtle */
  content: 'SQ'; position: absolute; right: 12px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em;
  color: rgba(200,132,58,0.4);
  font-weight: 700;
}
.photo-placeholder .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(56px, 18cqw, 140px);
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(200,132,58,0.35);
  container-type: inline-size;
}
/* On small thumbnails (leaderboard row 64x80) we need a smaller letter */
.sq-lb-photo .photo-placeholder .silhouette { font-size: 32px; }

/* ─── Section base ───────────────────────────── */
.sq-section { padding: 80px 0; }
.sq-section-paper { background: var(--sq-paper); color: var(--sq-paper-ink); }
.sq-section-paper h1, .sq-section-paper h2, .sq-section-paper h3 { color: var(--sq-paper-ink); }

.sq-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px; gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sq-hairline);
}
.sq-section-paper .sq-section-head { border-bottom-color: #D1CCC0; }
.sq-section-title {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.sq-section-title small {
  display: block;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sq-fg-3);
  margin-top: 6px;
  text-transform: none;
}
.sq-section-paper .sq-section-title small { color: var(--sq-paper-ink-soft, #5C5A54); }

/* The "GET THE DIGEST" copper-on-copper headline + black H2s on cream
   were the worst offenders in the user's screenshots. Use the warm
   paper-ink token everywhere on light surfaces instead of pure black,
   and demote subheaders to a softer secondary tone. */
.sq-section-paper .sq-hero-eyebrow,
.sq-section-paper .sq-hero-lede,
.sq-section-paper p { color: var(--sq-paper-ink-soft, #4A3F30); }

/* ─── FEATURE WELL — editorial image-left, text-right ── */
.sq-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: stretch;
  margin-bottom: 56px;
}
.sq-feature-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--sq-ink-2);
}
.sq-feature-image .sq-photo-frame { filter: var(--photo-filter-default); }
.sq-feature-image .sq-photo-overlay {
  background: linear-gradient(135deg, rgba(10,11,13,0.55) 0%, transparent 45%),
              var(--protect-bottom);
}
.sq-feature-tag {
  position: absolute; top: 16px; left: 16px;
  background: var(--sq-blood);
  color: #fff;
  font-family: var(--font-headline);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: var(--r-1);
}
.sq-feature-body { display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.sq-feature-body .sq-hero-eyebrow { color: var(--sq-copper); margin-bottom: 16px; }
.sq-feature-body h2 {
  font-family: var(--font-display);
  font-size: 48px; line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.sq-feature-body .lede {
  font-family: var(--font-editorial);
  font-size: 18px;
  line-height: 1.6;
  color: var(--sq-fg-2);
  margin: 0 0 20px;
}
.sq-feature-byline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sq-fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--sq-hairline);
}

/* ─── Division explorer — 5 big colored cards ──── */
.sq-divisions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sq-division-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--sq-ink-2);
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out);
}
.sq-division-card:hover { transform: translateY(-4px); }
.sq-division-card .sq-photo-frame { filter: var(--photo-filter-heroic) brightness(0.75); transition: filter var(--dur-base); }
.sq-division-card:hover .sq-photo-frame { filter: var(--photo-filter-heroic) brightness(0.9); }
.sq-division-card::after {
  content: ''; position: absolute; inset: 0;
  background: var(--protect-bottom);
  pointer-events: none;
}
.sq-division-card > * { position: relative; z-index: 1; }
.sq-division-card .div-name {
  font-family: var(--font-display);
  font-size: 26px; line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.sq-division-card .div-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.sq-division-card .div-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  z-index: 2;
}
.div-bb        .div-accent { background: var(--sq-div-bb); }
.div-physique  .div-accent { background: var(--sq-div-physique); }
.div-figure    .div-accent { background: var(--sq-div-figure); }
.div-wellness  .div-accent { background: var(--sq-div-wellness); }
.div-bikini    .div-accent { background: var(--sq-div-bikini); }

/* ─── Leaderboard — photo rows, not a table ────── */
.sq-leaderboard {
  display: flex; flex-direction: column;
  border: 1px solid var(--sq-hairline);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--sq-ink-2);
}
.sq-lb-row {
  display: grid;
  grid-template-columns: 56px 72px 1fr 140px 140px 120px;
  align-items: center;
  padding: 14px 20px;
  gap: 20px;
  border-bottom: 1px solid var(--sq-hairline);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}
.sq-lb-row:last-child { border-bottom: none; }
.sq-lb-row:hover { background: var(--sq-ink-3); }
.sq-lb-rank {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--sq-fg-3);
  letter-spacing: -0.02em;
}
.sq-lb-rank.top-3 { color: var(--sq-copper); }
.sq-lb-rank.rank-1 { color: var(--sq-tier-gold); }
.sq-lb-photo {
  width: 64px; height: 80px;
  border-radius: var(--r-2);
  overflow: hidden; position: relative;
  background: var(--sq-ink);
}
.sq-lb-photo .sq-photo-frame { filter: var(--photo-filter-default); }
.sq-lb-name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--sq-fg);
  margin-bottom: 4px;
}
.sq-lb-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sq-fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sq-lb-division {
  font-family: var(--font-headline);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sq-lb-score {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--sq-copper);
  letter-spacing: -0.02em;
  text-align: right;
}
.sq-lb-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--sq-fg-3);
}
.sq-lb-delta.up { color: #5FB874; }
.sq-lb-delta.down { color: var(--sq-blood); }

/* Division badges */
.div-badge {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.div-badge.bb        { background: var(--sq-div-bb); color: #0A0B0D; }
.div-badge.physique  { background: var(--sq-div-physique); color: #0A0B0D; }
.div-badge.figure    { background: var(--sq-div-figure); color: #fff; }
.div-badge.wellness  { background: var(--sq-div-wellness); color: #fff; }
.div-badge.bikini    { background: var(--sq-div-bikini); color: #0A0B0D; }

/* ─── Athlete grid — photo-first cards ─────────── */
.sq-athlete-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sq-athlete-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--sq-ink-2);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  display: block;
  cursor: pointer;
}
.sq-athlete-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-3);
}
.sq-athlete-card .pic {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--sq-ink);
}
.sq-athlete-card .pic .sq-photo-frame {
  filter: var(--photo-filter-default);
  transition: filter var(--dur-slow), transform var(--dur-slow);
}
.sq-athlete-card:hover .pic .sq-photo-frame {
  filter: var(--photo-filter-heroic);
  transform: scale(1.04);
}
.sq-athlete-card .pic::after {
  content: ''; position: absolute; inset: 0;
  background: var(--protect-bottom);
  pointer-events: none;
  opacity: 0.9;
}
.sq-athlete-card .pic .score-pill {
  position: absolute; top: 12px; right: 12px;
  background: rgba(10,11,13,0.82);
  backdrop-filter: blur(10px);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sq-copper);
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 1px solid rgba(200,132,58,0.4);
  z-index: 2;
}
.sq-athlete-card .pic .caption {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  z-index: 2;
}
.sq-athlete-card .caption .name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.sq-athlete-card .caption .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Dossier cards (accountability) ───────────── */
.sq-dossier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sq-dossier-card {
  background: var(--sq-ink);
  border: 1px solid var(--sq-hairline);
  border-radius: var(--r-3);
  padding: 28px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base), transform var(--dur-base);
  text-decoration: none; color: inherit;
}
.sq-dossier-card:hover {
  border-color: var(--sq-blood);
  transform: translateY(-2px);
}
.sq-dossier-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--sq-blood);
}
.sq-dossier-tag {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sq-blood);
  margin: 10px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.sq-dossier-tag::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--sq-blood);
  animation: sq-pulse 2s infinite;
}
@keyframes sq-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.sq-dossier-card h3 {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.sq-dossier-card p {
  font-family: var(--font-editorial);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sq-fg-2);
  margin-bottom: 20px;
}
.sq-dossier-meta {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--sq-hairline);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sq-fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sq-dossier-meta .receipts-count { color: var(--sq-copper); font-weight: 700; }

/* ─── ATHLETE PROFILE (separate artboard) ───────── */
.sq-profile-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: var(--sq-ink);
}
.sq-profile-hero .sq-photo-frame {
  filter: var(--photo-filter-heroic) brightness(0.82);
  transform: scale(1.02);
}
.sq-profile-hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,11,13,0.92) 0%, rgba(10,11,13,0.7) 30%, rgba(10,11,13,0.1) 60%, transparent 100%),
    linear-gradient(to top, rgba(10,11,13,0.9) 0%, rgba(10,11,13,0.2) 40%, transparent 70%);
  pointer-events: none;
}
.sq-profile-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide); margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: end;
  min-height: 720px;
}
.sq-profile-name {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
}
.sq-profile-meta {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  max-width: 640px;
}
.sq-profile-meta .sep { opacity: 0.3; }
.sq-profile-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Iron Score panel overlay */
.sq-iron-panel {
  background: rgba(10,11,13,0.7);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(200,132,58,0.3);
  border-radius: var(--r-3);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.sq-iron-panel-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sq-copper);
  display: flex; align-items: center; gap: 10px;
}
.sq-iron-panel-label::before {
  content: ''; width: 24px; height: 2px; background: var(--sq-copper);
}
.sq-iron-panel-score {
  font-family: var(--font-mono);
  font-size: 88px;
  line-height: 0.9;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.sq-iron-panel-rank {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.sq-iron-panel-rank strong { color: var(--sq-copper); }
.sq-iron-panel-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--r-2); overflow: hidden; margin-top: 8px;
}
.sq-iron-panel-stat {
  padding: 14px;
  background: rgba(10,11,13,0.6);
}
.sq-iron-panel-stat .v {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
}
.sq-iron-panel-stat .l {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

/* Profile gallery strip */
.sq-profile-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0;
}
.sq-gallery-tile {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--sq-ink-2);
  cursor: pointer;
}
.sq-gallery-tile .sq-photo-frame { transition: transform var(--dur-slow); }
.sq-gallery-tile:hover .sq-photo-frame { transform: scale(1.06); }
.sq-gallery-tile .tag {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(10,11,13,0.78); color: #fff;
  padding: 2px 8px; border-radius: var(--r-1);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* Results table — dark, editorial */
.sq-results {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--sq-ink-2);
  border: 1px solid var(--sq-hairline);
  border-radius: var(--r-2);
  overflow: hidden;
}
.sq-results th {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sq-fg-3);
  text-align: left; padding: 14px 16px;
  background: var(--sq-ink);
  border-bottom: 1px solid var(--sq-hairline);
}
.sq-results td {
  padding: 16px; border-bottom: 1px solid var(--sq-hairline);
  font-family: var(--font-body); font-size: 14px; color: var(--sq-fg);
}
.sq-results tr:last-child td { border-bottom: none; }
.sq-results tr:hover td { background: var(--sq-ink-3); }
.sq-results .place {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  font-family: var(--font-display);
  font-size: 15px;
  border-radius: 50%;
  background: var(--sq-ink);
  color: var(--sq-fg-3);
  border: 1px solid var(--sq-hairline);
}
.sq-results .place.p1 { background: var(--sq-tier-gold); color: #0A0B0D; border-color: var(--sq-tier-gold); }
.sq-results .place.p2 { background: var(--sq-tier-silver); color: #0A0B0D; border-color: var(--sq-tier-silver); }
.sq-results .place.p3 { background: var(--sq-tier-bronze); color: #fff; border-color: var(--sq-tier-bronze); }
.sq-results .year { font-family: var(--font-mono); color: var(--sq-fg-2); }
.sq-results .comp { font-weight: 600; color: var(--sq-fg); }

/* Newsletter band */
.sq-newsletter {
  background: var(--sq-copper);
  color: #0A0B0D;
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sq-newsletter::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg,
    transparent 0, transparent 40px,
    rgba(0,0,0,0.04) 40px, rgba(0,0,0,0.04) 41px);
}
.sq-newsletter-inner { position: relative; max-width: 720px; margin: 0 auto; padding: 0 32px; }
.sq-newsletter h2 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #0A0B0D;
}
.sq-newsletter p {
  font-family: var(--font-editorial);
  font-size: 18px;
  color: rgba(10,11,13,0.82);
  max-width: 520px;
  margin: 0 auto 28px;
}
.sq-newsletter form {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
}
.sq-newsletter input {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  background: #0A0B0D;
  color: #fff;
  border: none;
  border-radius: var(--r-1);
}
.sq-newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.sq-newsletter .btn-primary {
  background: #0A0B0D; color: var(--sq-copper); border-color: #0A0B0D;
}
.sq-newsletter .btn-primary:hover {
  background: #fff; color: #0A0B0D; border-color: #fff;
}

/* Footer */
.sq-footer {
  background: #000;
  padding: 64px 0 32px;
  color: var(--sq-fg-3);
  border-top: 1px solid var(--sq-hairline);
}
.sq-footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 40px;
  border-bottom: 1px solid var(--sq-hairline);
}
.sq-footer h4 {
  font-family: var(--font-headline);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sq-fg);
  margin-bottom: 16px;
}
.sq-footer ul { list-style: none; padding: 0; margin: 0; }
.sq-footer li { margin-bottom: 8px; }
.sq-footer a {
  color: var(--sq-fg-2);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--dur-fast);
}
.sq-footer a:hover { color: var(--sq-copper); }
.sq-footer-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sq-fg-3);
}

/* ─── Responsive (1200px down) ─────────────────── */
@media (max-width: 1200px) {
  .sq-home-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .sq-hero-mosaic { min-height: 500px; }
  .sq-divisions { grid-template-columns: repeat(3, 1fr); }
  .sq-athlete-grid { grid-template-columns: repeat(3, 1fr); }
  .sq-dossier-grid { grid-template-columns: 1fr; }
  .sq-lb-row { grid-template-columns: 40px 56px 1fr 100px 100px; }
  .sq-lb-row > :last-child { display: none; }
}


/* ═══════════════════ COMPETITION SINGLE ═══════════════════ */
.sq-comp-hero { position: relative; height: 520px; overflow: hidden; border-bottom: 1px solid var(--sq-border-strong); }
.sq-comp-hero .sq-photo-frame { position: absolute; inset: 0; }
.sq-comp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--sq-ink) 0%, rgba(10,11,13,0.6) 40%, rgba(10,11,13,0.2) 100%); }
.sq-comp-hero-inner { position: absolute; bottom: 48px; left: 0; right: 0; padding: 0 48px; max-width: 1440px; margin: 0 auto; }
.sq-comp-hero-title { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem); line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; margin: 16px 0 24px; color: #fff; }
.sq-comp-hero-meta { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sq-fg-muted); }
.sq-comp-hero-meta .sep { opacity: 0.3; }

.sq-stat-card { background: var(--sq-ink-2); border: 1px solid var(--sq-border); padding: 24px 20px; }
.sq-stat-card .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sq-fg-muted); margin-bottom: 12px; }
.sq-stat-card .val { font-family: var(--font-mono); font-size: 40px; font-weight: 700; color: var(--sq-fg); font-variant-numeric: tabular-nums; }

.sq-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; align-items: end; max-width: 980px; margin: 0 auto; }
.sq-podium-card { text-align: center; }
.sq-podium-card.place-1 { transform: translateY(-32px); }
.sq-podium-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 2px solid var(--sq-border-strong); }
.sq-podium-card.place-1 .sq-podium-photo { border-color: var(--sq-copper); }
.sq-podium-place { font-family: var(--font-display); font-size: 88px; line-height: 1; letter-spacing: -0.04em; margin-top: 16px; }
.sq-podium-name { font-family: var(--font-headline); font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sq-fg); margin-top: 4px; }
.sq-podium-score { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--sq-fg-muted); margin-top: 6px; }

.sq-year-card { display: block; padding: 20px 16px; background: rgba(255,255,255,0.55); border: 1px solid rgba(10,11,13,0.1); text-align: center; text-decoration: none; transition: all 0.15s; }
.sq-year-card:hover { background: var(--sq-paper); border-color: var(--sq-copper); }
.sq-year-card .year { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--sq-copper); }
.sq-year-card .winner { font-family: var(--font-headline); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sq-ink); margin-top: 6px; }

/* ═══════════════════ COMPETITION ARCHIVE ═══════════════════ */
.sq-archive-hero { padding: 80px 0 48px; border-bottom: 1px solid var(--sq-border); }
.sq-archive-title { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; margin: 16px 0 0; color: var(--sq-fg); }

.sq-tier-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--sq-border); padding-bottom: 0; flex-wrap: wrap; }
.sq-tier-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--sq-fg-muted); font-family: var(--font-headline); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 18px; cursor: pointer; transition: all 0.15s; }
.sq-tier-tab:hover { color: var(--sq-fg); }
.sq-tier-tab.is-active { color: var(--sq-copper); border-bottom-color: var(--sq-copper); }

.sq-archive-filter { display: flex; gap: 16px; align-items: flex-end; padding: 20px 24px; background: var(--sq-ink-2); border: 1px solid var(--sq-border); margin-bottom: 32px; flex-wrap: wrap; }
.sq-archive-filter input[type=search] {
    flex: 1 1 240px; min-width: 0; max-width: 100%;
    padding: 12px 16px;
    background: #1c2028;
    border: 1px solid rgba(255,255,255,0.18);
    color: #f2efe8;
    font-family: var(--font-body); font-size: 16px;
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
}
.sq-archive-filter input[type=search]::placeholder { color: rgba(242,239,232,0.55); opacity: 1; }
.sq-archive-filter input[type=search]:focus { outline: none; border-color: var(--sq-copper); background: #232831; }
.sq-archive-filter input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sq-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 1 auto; }
.sq-filter-group label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sq-fg-muted); }
.sq-filter-group select {
    padding: 10px 14px;
    background: #1c2028;
    border: 1px solid rgba(255,255,255,0.18);
    color: #f2efe8;
    font-family: var(--font-body); font-size: 16px;
    min-width: 0; max-width: 100%; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #f2efe8 50%), linear-gradient(135deg, #f2efe8 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 12px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 32px;
}
@media (min-width: 641px) { .sq-filter-group select { min-width: 180px; } }
@media (max-width: 640px) {
    .sq-archive-filter { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    .sq-archive-filter input[type=search], .sq-filter-group, .sq-filter-group select { width: 100%; }
    .sq-filter-meta { margin-left: 0; align-self: flex-start; }
}
.sq-filter-meta { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--sq-fg-muted); align-self: center; }
.sq-filter-meta strong { color: var(--sq-fg); font-weight: 700; }

.sq-comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sq-comp-card { display: block; background: var(--sq-ink-2); border: 1px solid var(--sq-border); text-decoration: none; color: var(--sq-fg); transition: all 0.2s; overflow: hidden; }
.sq-comp-card:hover { border-color: var(--sq-copper); transform: translateY(-2px); }
.sq-comp-photo { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.sq-comp-photo .sq-photo-frame { position: absolute; inset: 0; }
.sq-tier-pill { position: absolute; top: 14px; left: 14px; padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; font-weight: 700; z-index: 2; }
.sq-tier-pill.apex { background: var(--sq-copper); color: #0a0b0d; }
.sq-tier-pill.pro  { background: var(--sq-fg); color: var(--sq-ink); }
.sq-tier-pill.qual { background: #2E7D32; color: #fff; }
.sq-comp-year { position: absolute; bottom: 12px; right: 14px; font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.6); z-index: 2; }
.sq-comp-body { padding: 18px 20px 20px; }
.sq-comp-body h3 { font-family: var(--font-headline); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; color: var(--sq-fg); }
.sq-comp-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sq-fg-muted); margin-bottom: 12px; }
.sq-comp-stats { font-size: 13px; color: var(--sq-fg-muted); padding-top: 10px; border-top: 1px dashed var(--sq-border); }
.sq-comp-stats strong { font-family: var(--font-mono); color: var(--sq-fg); font-size: 15px; font-weight: 700; }

/* ═══════════════════ HEAD-TO-HEAD ═══════════════════ */
.sq-h2h-hero { padding: 72px 0 56px; }
.sq-h2h-title { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); line-height: 0.88; letter-spacing: -0.045em; text-transform: uppercase; margin: 16px 0 0; color: var(--sq-fg); }

.sq-h2h-picker { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 16px; align-items: end; max-width: 860px; }
.sq-h2h-input { display: flex; flex-direction: column; gap: 8px; }
.sq-h2h-input label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sq-copper); }
.sq-h2h-input .field { padding: 14px 18px; background: var(--sq-ink-2); border: 1px solid var(--sq-border-strong); color: var(--sq-fg); font-family: var(--font-headline); font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.sq-h2h-input .field.filled { border-color: var(--sq-copper); }
.sq-h2h-vs-chip { font-family: var(--font-display); font-size: 24px; color: var(--sq-copper); align-self: center; letter-spacing: 0.04em; padding: 0 4px; }

.sq-h2h-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: stretch; margin-bottom: 56px; }
.sq-h2h-card { background: var(--sq-ink-2); border: 1px solid var(--sq-border-strong); overflow: hidden; }
.sq-h2h-card-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.sq-h2h-card-photo .sq-photo-frame { position: absolute; inset: 0; }
.sq-h2h-card-body { padding: 28px 32px 32px; }
.sq-h2h-card-body h2 { font-family: var(--font-display); font-size: 44px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; margin: 12px 0 24px; color: var(--sq-fg); }
.score-block { padding-top: 20px; border-top: 1px solid var(--sq-border); }
.score-block .score-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sq-fg-muted); }
.score-block .score-val { font-family: var(--font-mono); font-size: 56px; font-weight: 700; color: var(--sq-copper); font-variant-numeric: tabular-nums; line-height: 1; margin: 6px 0 8px; }
.score-block .score-sub { font-size: 13px; color: var(--sq-fg-muted); }
.sq-h2h-vs-huge { font-family: var(--font-display); font-size: 96px; line-height: 1; letter-spacing: -0.04em; color: var(--sq-copper); align-self: center; }

.sq-h2h-stats { background: var(--sq-ink-2); border: 1px solid var(--sq-border); padding: 32px 40px; }
.sq-h2h-stat-row { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--sq-border); }
.sq-h2h-stat-row:last-child { border-bottom: none; }
.sq-h2h-stat-label { font-family: var(--font-headline); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sq-fg-muted); text-align: center; }
.sq-h2h-bar { position: relative; height: 32px; display: flex; align-items: center; }
.sq-h2h-bar::before { content: ""; position: absolute; top: 0; bottom: 0; width: var(--pct); background: linear-gradient(90deg, transparent, rgba(200,132,58,0.35)); border-right: 2px solid var(--sq-copper); }
.sq-h2h-bar.left::before { right: 0; background: linear-gradient(270deg, rgba(200,132,58,0.35), transparent); border-right: none; border-left: 2px solid var(--sq-copper); }
.sq-h2h-bar.right::before { left: 0; }
.sq-h2h-bar .v { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--sq-fg); padding: 0 14px; font-variant-numeric: tabular-nums; }
.sq-h2h-bar.left { justify-content: flex-end; }

/* ═══════════════════ EVENTS HUB ═══════════════════ */
.sq-events-hero { padding: 72px 0 48px; border-bottom: 1px solid var(--sq-border); }
.sq-events-title { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; margin: 16px 0 0; color: var(--sq-fg); }

.sq-live-banner { display: flex; align-items: center; gap: 24px; padding: 24px 28px; background: linear-gradient(90deg, rgba(179,27,46,0.15), transparent 70%), var(--sq-ink-2); border: 1px solid var(--sq-blood); border-left: 4px solid var(--sq-blood); }
.sq-live-banner .pulse { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.sq-live-banner .pulse span { position: absolute; inset: 0; background: var(--sq-blood); border-radius: 50%; animation: sq-pulse 1.6s infinite; }
@keyframes sq-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(179,27,46,0.7); } 70% { box-shadow: 0 0 0 14px rgba(179,27,46,0); } }
.sq-live-banner .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--sq-blood); font-weight: 700; margin-bottom: 4px; }
.sq-live-banner .title { font-family: var(--font-headline); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sq-fg); margin-bottom: 4px; }
.sq-live-banner .meta { font-size: 13px; color: var(--sq-fg-muted); font-family: var(--font-mono); }
.sq-live-banner > div { flex: 1; }

.sq-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sq-event-card { display: block; background: var(--sq-ink-2); border: 1px solid var(--sq-border); text-decoration: none; color: var(--sq-fg); transition: all 0.2s; overflow: hidden; }
.sq-event-card:hover { border-color: var(--sq-copper); transform: translateY(-2px); }
.sq-event-photo { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.sq-event-photo .sq-photo-frame { position: absolute; inset: 0; }
.sq-event-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,13,0.95), rgba(10,11,13,0.2) 50%, transparent); }
.sq-event-countdown { position: absolute; bottom: 16px; right: 16px; text-align: right; z-index: 2; }
.sq-event-countdown .num { display: block; font-family: var(--font-display); font-size: 56px; line-height: 0.9; letter-spacing: -0.04em; color: #fff; }
.sq-event-countdown .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--sq-copper); font-weight: 700; }
.sq-event-body { padding: 18px 20px; }
.sq-event-body h3 { font-family: var(--font-headline); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; }
.sq-event-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sq-fg-muted); }

.sq-recent-list { display: flex; flex-direction: column; border-top: 1px solid rgba(10,11,13,0.12); }
.sq-recent-row { display: grid; grid-template-columns: 140px 1fr 220px 260px 24px; gap: 20px; padding: 22px 20px; align-items: center; border-bottom: 1px solid rgba(10,11,13,0.12); text-decoration: none; color: var(--sq-ink); transition: background 0.15s; }
.sq-recent-row:hover { background: rgba(10,11,13,0.04); }
.sq-recent-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10,11,13,0.55); }
.sq-recent-name { font-family: var(--font-headline); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.sq-recent-loc { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(10,11,13,0.55); }
.sq-recent-winner span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(10,11,13,0.55); text-transform: uppercase; margin-bottom: 2px; }
.sq-recent-winner strong { font-family: var(--font-headline); font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sq-copper); }

/* ═══════════════════ ATHLETES ARCHIVE ═══════════════════ */
.sq-athletes-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ═══════════════════ UTILITIES ═══════════════════ */
.btn.btn-lg { padding: 14px 28px; font-size: 15px; }

/* ═══════════════════ FLIP CARD (sq-render_athlete_card helper) ═══════════════════ */
/* Front = photo + ELO overlay. Back = detailed stats.
   Uses an opacity crossfade — works on every browser, no 3D quirks.
   BUILD-MARKER: flip-v5-opacity */
.sq-ac-build-marker-v5 { display: none; }

.sq-athlete-card.sq-ac {
    position: relative;
    display: block;
    border-radius: var(--r-2);
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}
.sq-athlete-card.sq-ac:hover { transform: none; box-shadow: none; }

.sq-ac-frame {
    position: relative;
    aspect-ratio: 3/4;
}

.sq-ac-face {
    position: absolute; inset: 0;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--sq-ink-2);
    border: 1px solid var(--sq-hairline);
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s;
}

/* Front is visible by default; back sits stacked on top at opacity 0. */
.sq-ac-front { opacity: 1; z-index: 2; }
.sq-ac-back  { opacity: 0; z-index: 1; pointer-events: none; }

.sq-athlete-card.sq-ac:hover .sq-ac-front,
.sq-athlete-card.sq-ac:focus-visible .sq-ac-front,
.sq-athlete-card.sq-ac.is-flipped .sq-ac-front {
    opacity: 0;
    pointer-events: none;
}
.sq-athlete-card.sq-ac:hover .sq-ac-back,
.sq-athlete-card.sq-ac:focus-visible .sq-ac-back,
.sq-athlete-card.sq-ac.is-flipped .sq-ac-back {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.sq-athlete-card.sq-ac:hover .sq-ac-face { border-color: var(--sq-copper); }
.sq-athlete-card.sq-ac:hover .sq-ac-face { border-color: var(--sq-copper); }

.sq-ac-front .sq-photo-frame {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: var(--photo-filter-default);
    transition: filter 0.3s, transform 0.4s;
}
.sq-athlete-card.sq-ac:hover .sq-ac-front .sq-photo-frame {
    filter: var(--photo-filter-heroic);
}
.sq-ac-front::after {
    content: ''; position: absolute; inset: 0;
    background: var(--protect-bottom);
    pointer-events: none; opacity: 0.9;
}

/* ELO+name strip that's visible on BOTH front and back */
.sq-ac-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(to bottom, rgba(10,11,13,0.85), rgba(10,11,13,0.5) 60%, transparent);
}
.sq-ac-name {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sq-ac-is {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--sq-copper);
    background: rgba(10,11,13,0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200,132,58,0.4);
    border-radius: var(--r-pill);
    padding: 3px 10px;
    white-space: nowrap;
}

/* Front bottom label: country · division */
.sq-ac-bottom {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}

/* Back: stats grid */
.sq-ac-back {
    background: linear-gradient(135deg, var(--sq-ink-2) 0%, var(--sq-ink-3) 100%);
    padding: 52px 18px 20px; /* 52px top reserves room for the sq-ac-top strip */
    display: flex; flex-direction: column;
    gap: 14px;
}
.sq-ac-back .sq-ac-top {
    background: linear-gradient(to bottom, rgba(200,132,58,0.18), transparent);
}
.sq-ac-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--sq-hairline);
    border-radius: var(--r-1);
    overflow: hidden;
}
.sq-ac-stat {
    background: var(--sq-ink);
    padding: 10px 12px;
}
.sq-ac-stat .v {
    display: block;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--sq-fg);
    line-height: 1;
    letter-spacing: -0.01em;
}
.sq-ac-stat .l {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sq-fg-3);
    margin-top: 4px;
}
.sq-ac-titles {
    font-family: var(--font-editorial);
    font-size: 13px;
    line-height: 1.45;
    color: var(--sq-fg-2);
    font-style: italic;
    padding: 0 4px;
}
.sq-ac-view {
    margin-top: auto;
    font-family: var(--font-headline);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sq-copper);
    text-align: right;
}

/* ═══════════════════ LONGFORM EDITORIAL (global — used by page.php,
   single.php, single-sq_athlete.php bio, single-sq_competition.php bio,
   single-sq_spotlight.php, template-roundup.php intro) ═══════════════════ */
/* Long-form editorial layout scoped to .sq-longform so it never bleeds
   into data-driven templates (athletes, competitions, etc.). */

.sq-page-hero {
    padding: 72px 0 48px;
    background: var(--sq-ink);
    border-bottom: 1px solid var(--sq-hairline);
}
.sq-page-hero .sq-breadcrumbs {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--sq-fg-3);
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
.sq-page-hero .sq-breadcrumbs a { color: var(--sq-fg-2); text-decoration: none; }
.sq-page-hero .sq-breadcrumbs a:hover { color: var(--sq-copper); }
.sq-page-hero .sq-breadcrumbs .sep { opacity: 0.4; padding: 0 8px; }

.sq-page-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--sq-fg);
    margin: 0 0 24px;
}

.sq-page-lede {
    font-family: var(--font-editorial);
    font-size: 22px;
    line-height: 1.55;
    color: var(--sq-fg-2);
    font-style: italic;
    margin: 0 0 28px;
    max-width: 640px;
}

.sq-page-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sq-fg-3);
    padding-top: 16px;
    border-top: 1px solid var(--sq-hairline);
}
.sq-page-meta .sep { opacity: 0.4; padding: 0 8px; }

.sq-longform {
    padding: 64px 0 96px;
    background: var(--sq-ink);
}
.sq-longform-body {
    font-family: var(--font-editorial);
    font-size: 19px;
    line-height: 1.7;
    color: var(--sq-fg-2);
}
.sq-longform-body > *:first-child { margin-top: 0; }

.sq-longform-body p { margin: 0 0 24px; }

.sq-longform-body h2 {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--sq-fg);
    margin: 56px 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sq-hairline);
}
.sq-longform-body h3 {
    font-family: var(--font-headline);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sq-fg);
    margin: 40px 0 16px;
}
.sq-longform-body h4 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sq-copper);
    margin: 32px 0 12px;
}

.sq-longform-body ul,
.sq-longform-body ol { margin: 0 0 24px; padding-left: 24px; }
.sq-longform-body li { margin-bottom: 8px; }
.sq-longform-body li > ul,
.sq-longform-body li > ol { margin-top: 8px; }

.sq-longform-body a {
    color: var(--sq-copper);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.sq-longform-body a:hover { color: var(--sq-copper-hot); }

.sq-longform-body strong { color: var(--sq-fg); font-weight: 700; }

.sq-longform-body blockquote {
    font-family: var(--font-editorial);
    font-size: 22px;
    line-height: 1.5;
    font-style: italic;
    color: var(--sq-fg);
    margin: 32px 0;
    padding: 8px 0 8px 24px;
    border-left: 3px solid var(--sq-copper);
}
.sq-longform-body blockquote cite {
    display: block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--sq-fg-3);
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sq-longform-body code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--sq-ink-2);
    padding: 2px 6px;
    border-radius: var(--r-1);
    color: var(--sq-copper-hot);
}
.sq-longform-body pre {
    background: var(--sq-ink-2);
    border: 1px solid var(--sq-hairline);
    border-radius: var(--r-2);
    padding: 20px;
    overflow-x: auto;
    margin: 24px 0;
}
.sq-longform-body pre code { background: none; padding: 0; color: var(--sq-fg); }

.sq-longform-body hr {
    border: 0;
    height: 1px;
    background: var(--sq-hairline);
    margin: 48px 0;
}

.sq-longform-body table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sq-ink-2);
    border: 1px solid var(--sq-hairline);
    border-radius: var(--r-2);
    overflow: hidden;
    margin: 32px 0;
    font-family: var(--font-body);
    font-size: 15px;
}
.sq-longform-body th {
    background: var(--sq-ink);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sq-fg-3);
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sq-hairline);
}
.sq-longform-body td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sq-hairline);
    color: var(--sq-fg);
}
.sq-longform-body tr:last-child td { border-bottom: none; }

.sq-longform-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-2);
    margin: 24px 0;
}

.sq-longform-body figure { margin: 32px 0; }
.sq-longform-body figcaption {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--sq-fg-3);
    letter-spacing: 0.04em;
    margin-top: 8px;
    text-align: center;
}

.sq-pagination {
    margin-top: 48px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--sq-fg-3);
}
/* Single-post specific bits on top of page.php long-form styles */
.sq-article-source {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--sq-hairline);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.55;
    font-style: normal !important;
    color: var(--sq-fg-3);
    letter-spacing: 0.04em;
}
.sq-article-source em { font-style: normal; }
.sq-article-source a { color: var(--sq-copper); text-decoration: underline; }

.sq-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 32px 0 64px;
    border-top: 1px solid var(--sq-hairline);
}
.sq-post-nav > div:last-child { text-align: right; }
@media (max-width: 640px) {
    .sq-post-nav { grid-template-columns: 1fr; }
    .sq-post-nav > div:last-child { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   Contrast + overflow safety patches (2026-04 ship hardening)
   ═══════════════════════════════════════════════════════════════ */

/* Buttons placed inside paper (light) sections were inheriting the
   on-dark .btn rule (color: var(--sq-fg) = cream) and rendering invisible
   on the cream background. Restore ink color when ancestor is paper. */
.sq-section-paper .btn,
.sq-paper .btn,
.sq-newsletter-inner .btn,
section[style*="background:#F5F2EC"] .btn,
section[style*="background:#FFF"]    .btn,
.sq-on-paper .btn {
    color: var(--sq-paper-ink);
    border-color: rgba(10, 11, 13, 0.18);
}
.sq-section-paper .btn:hover,
.sq-paper .btn:hover,
.sq-on-paper .btn:hover {
    color: var(--sq-copper-deep);
    border-color: var(--sq-copper-deep);
}
.sq-section-paper .btn-primary,
.sq-paper .btn-primary,
.sq-on-paper .btn-primary {
    color: #FFFFFF;
    background: var(--sq-copper);
    border-color: var(--sq-copper);
}
.sq-section-paper .btn-primary:hover,
.sq-paper .btn-primary:hover,
.sq-on-paper .btn-primary:hover {
    color: #0A0B0D;
    background: var(--sq-copper-hot);
    border-color: var(--sq-copper-hot);
}

/* Form controls — inputs and textareas were defaulting to white background
   with the dark site CSS giving them a near-black text color, producing
   a "black on black" look on darker themes. Force a sensible pair. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="password"],
textarea,
select {
    background: #FFFFFF;
    color: #0A0B0D;
    border: 1px solid var(--sq-hairline);
    border-radius: var(--r-2);
    padding: 10px 12px;
    font: inherit;
    -webkit-text-fill-color: #0A0B0D;  /* iOS Safari */
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder { color: #6E6C66; opacity: 1; }

/* Sidebars — long titles like "Card of the Day — Laura Creavalle · Iron
   Score 2164" were overflowing the 280-320px right rail. Constrain width
   and break long words at any point so they wrap into the column. */
.widget,
.sq-sidebar,
#secondary,
aside.widget-area {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    word-wrap: break-word;
}
.widget a,
.sq-sidebar a,
#secondary a {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.widget ul,
.widget ol { padding-left: 0; list-style: none; }
.widget li { padding: 6px 0; line-height: 1.45; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   Feature card — empty state (no featured image yet)
   Replaces the giant 4:5 black placeholder with the silhouette "D"
   that previously dominated the homepage. Editorial card-style box,
   reasonable size, hints at the action without screaming "broken".
   ═══════════════════════════════════════════════════════════════ */

.sq-feature.sq-feature-no-image {
    grid-template-columns: 1fr;
    gap: 16px;
}

.sq-feature.sq-feature-no-image .sq-feature-image {
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
}

.sq-feature-empty {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    background: var(--sq-paper-2);
    border: 1px solid rgba(10,11,13,0.15);
    border-radius: var(--r-2);
    min-width: 0;
}

.sq-feature-empty .sq-feature-tag {
    position: static;            /* unpin from corner */
    flex: 0 0 auto;
}

.sq-feature-empty-mark {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sq-ink);
    color: var(--sq-copper);
    border-radius: var(--r-1);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
}

.sq-feature-empty-hint {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sq-paper-ink);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   Athlete card v4 — flip removed, photo + stats always visible.
   These rules OVERRIDE the older sq-ac-front / sq-ac-back rules
   above (still in the file for backwards-compat with one-off
   templates that haven't migrated yet).
   ═══════════════════════════════════════════════════════════════ */

/* Cancel the legacy two-face system: there is no longer a "back face". */
.sq-athlete-card.sq-ac .sq-ac-back { display: none !important; }
.sq-athlete-card.sq-ac:hover  .sq-ac-front,
.sq-athlete-card.sq-ac:focus-visible .sq-ac-front,
.sq-athlete-card.sq-ac.is-flipped .sq-ac-front {
    opacity: 1 !important;          /* never fade */
    pointer-events: auto !important;
}

/* New self-contained card: <article> wraps a clickable <a class="sq-ac-frame">
   containing photo + overlays + a separate .sq-ac-actions row outside the link. */
.sq-athlete-card.sq-ac {
    position: relative;
    display: block;
    border-radius: var(--r-2);
    overflow: visible;
}
.sq-athlete-card.sq-ac .sq-ac-frame {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--sq-ink-2);
    border: 1px solid var(--sq-hairline);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-base), transform var(--dur-base);
}
.sq-athlete-card.sq-ac .sq-ac-frame:hover { border-color: var(--sq-copper); transform: translateY(-2px); }
.sq-athlete-card.sq-ac .sq-photo-frame {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: var(--photo-filter-default);
    transition: filter var(--dur-base);
}
.sq-athlete-card.sq-ac .sq-ac-frame:hover .sq-photo-frame {
    filter: var(--photo-filter-heroic);
}
.sq-athlete-card.sq-ac .sq-ac-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0) 28%, rgba(10,11,13,0) 55%, rgba(10,11,13,0.85) 100%);
    pointer-events: none;
    z-index: 1;
}
.sq-athlete-card.sq-ac .sq-ac-top {
    position: absolute; top: 12px; left: 12px; right: 12px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    z-index: 2;
}
.sq-athlete-card.sq-ac .sq-ac-name {
    font-family: var(--font-display);
    font-size: 16px; line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    word-break: break-word;
    flex: 1;
}
.sq-athlete-card.sq-ac .sq-ac-is {
    flex: 0 0 auto;
    background: rgba(0,0,0,0.55);
    border: 1px solid var(--sq-copper);
    color: var(--sq-copper);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}
.sq-athlete-card.sq-ac .sq-ac-info {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    z-index: 2;
}
.sq-athlete-card.sq-ac .sq-ac-stats {
    display: flex; gap: 14px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.sq-athlete-card.sq-ac .sq-ac-stat {
    display: flex; flex-direction: column;
    line-height: 1;
    color: #fff;
}
.sq-athlete-card.sq-ac .sq-ac-stat .v {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}
.sq-athlete-card.sq-ac .sq-ac-stat .l {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}
.sq-athlete-card.sq-ac .sq-ac-bottom {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.78);
    margin-top: 4px;
}

/* Action row — under the frame, outside the <a>, so clicks don't navigate. */
.sq-ac-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    padding: 6px 4px 0;
}
.sq-ac-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid var(--sq-hairline);
    border-radius: var(--r-1);
    color: var(--sq-fg-2);
    background: transparent;
    text-decoration: none;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.sq-ac-action:hover {
    color: var(--sq-copper);
    border-color: var(--sq-copper);
    background: rgba(200,131,58,0.08);
}
.sq-ac-action:focus-visible {
    outline: 2px solid var(--sq-copper);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE — comprehensive responsive overrides (2026-04 ship)
   The original v3 design was photo-hero desktop-first; on phones
   the wide grids, fixed font scales and 12-col layouts collapsed
   awkwardly. This section is the mobile pass: everything legible,
   one column under 768px, no horizontal scroll anywhere.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container / page padding ──────────────────────────────── */
@media (max-width: 1024px) {
    .sq-container,
    .sq-container-wide { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
    body { font-size: 15px; }
    .sq-container,
    .sq-container-wide { padding-left: 12px; padding-right: 12px; }
    h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1; }
    h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15; }
    h3 { font-size: clamp(18px, 5vw, 24px) !important; }
    h4 { font-size: clamp(16px, 4.5vw, 20px) !important; }
    /* Section padding shrinks on phone — no more 96px gaps */
    .sq-section { padding: 32px 0 !important; }
    .sq-section-head { margin-bottom: 16px !important; }
    .sq-section-title { font-size: 20px !important; line-height: 1.2 !important; }
    .sq-section-title small { font-size: 12px !important; display: block !important; margin-top: 4px !important; }
}

/* ─── Header / nav ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .sq-header-inner { flex-direction: column; align-items: stretch; gap: 8px; }
    .sq-nav { flex-wrap: wrap; gap: 6px 12px; justify-content: center; }
    .sq-nav a { font-size: 12px; padding: 4px 6px; }
    .sq-wordmark .wm-1, .sq-wordmark .wm-2 { font-size: 18px !important; }
}
@media (max-width: 480px) {
    .sq-header-topline { font-size: 11px; padding: 6px 12px; }
}

/* ─── Front-page feature (dossier hero) ─────────────────────── */
@media (max-width: 900px) {
    .sq-feature {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 32px !important;
    }
    .sq-feature-image { aspect-ratio: 16/10 !important; max-width: 100%; }
    .sq-feature-body { padding: 0 !important; }
    .sq-feature-body h2 { font-size: clamp(24px, 6vw, 36px) !important; line-height: 1.05 !important; }
}

/* ─── Iron Score leaderboard rows ───────────────────────────── */
@media (max-width: 900px) {
    .sq-leaderboard { gap: 6px; }
    .sq-lb-row {
        grid-template-columns: 36px 56px 1fr auto !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .sq-lb-row .sq-lb-photo { width: 56px; height: 56px; }
    .sq-lb-row .div-badge { display: none !important; }
    .sq-lb-row .sq-lb-delta { display: none !important; }
    .sq-lb-row .sq-lb-sub { font-size: 11px !important; }
    .sq-lb-row .sq-lb-name { font-size: 14px !important; line-height: 1.2 !important; }
    .sq-lb-row .sq-lb-score { font-size: 16px !important; }
    .sq-lb-row .sq-lb-rank { font-size: 18px !important; }
}

/* ─── Athlete cards grid (collectibles) ─────────────────────── */
@media (max-width: 1024px) {
    .sq-athletes-grid,
    .sq-divisions,
    .wp-block-post-template,
    [class*="grid-template-columns:repeat(auto-fill"]:not(.sq-stat-panel) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}
@media (max-width: 540px) {
    .sq-athletes-grid,
    .sq-divisions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .sq-athlete-card.sq-ac .sq-ac-frame { aspect-ratio: 4/3 !important; }
    .sq-athlete-card.sq-ac .sq-ac-name  { font-size: 14px !important; }
    .sq-athlete-card.sq-ac .sq-ac-stat .v { font-size: 14px !important; }
    .sq-athlete-card.sq-ac .sq-ac-stat .l { font-size: 8px !important; }
}

/* ─── Tables (results, leaderboards, comparisons) ───────────── */
@media (max-width: 768px) {
    /* Wrap tables in a horizontal scroller so no row clips */
    .sq-results-table,
    .sq-affiliate-table,
    .sq-comparison-table,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        font-size: 13px;
    }
    .sq-results-table th,
    .sq-results-table td { padding: 6px 8px !important; white-space: nowrap; }
}

/* ─── Stat tiles row (athlete profile, data quality page) ───── */
@media (max-width: 540px) {
    .sq-stat-tiles,
    [style*="grid-template-columns:repeat(auto-fit,minmax(180px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .sq-stat-panel { padding: 12px !important; }
    .sq-stat-panel > div:first-child { font-size: 22px !important; }
}

/* ─── Athlete profile hero ──────────────────────────────────── */
@media (max-width: 900px) {
    .sq-profile-hero {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .sq-profile-hero .sq-photo-frame,
    .sq-profile-hero img { max-height: 60vh; }
}

/* ─── Head-to-head split ────────────────────────────────────── */
@media (max-width: 900px) {
    .sq-h2h-split,
    .sq-h2h-card,
    .sq-h2h-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ─── Competition podium ────────────────────────────────────── */
@media (max-width: 720px) {
    .sq-podium {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .sq-podium-card.place-1,
    .sq-podium-card.place-2,
    .sq-podium-card.place-3 { transform: none !important; }
    .sq-podium-photo { aspect-ratio: 16/10; }
}

/* ─── Footer columns ────────────────────────────────────────── */
@media (max-width: 768px) {
    .sq-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
    .sq-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .sq-footer-grid { grid-template-columns: 1fr !important; }
    .sq-footer .sq-footer-seo,
    .sq-footer .sq-data-quality-bar,
    .sq-footer .sq-footer-bottom { font-size: 11px !important; }
    .sq-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ─── Newsletter band ───────────────────────────────────────── */
@media (max-width: 640px) {
    .sq-newsletter-inner {
        padding: 32px 16px !important;
    }
    .sq-newsletter-inner h2 { font-size: 24px !important; }
    .sq-newsletter-inner p  { font-size: 14px !important; }
    .sq-newsletter form { flex-direction: column; gap: 8px; }
    .sq-newsletter input,
    .sq-newsletter button { width: 100%; box-sizing: border-box; }
}

/* ─── Dossier cards on home ─────────────────────────────────── */
@media (max-width: 720px) {
    .sq-dossier-grid,
    [class*="grid-template-columns:repeat(auto-fill,minmax(280px"],
    [class*="grid-template-columns:repeat(auto-fill,minmax(240px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Action row (download / share buttons on cards) ────────── */
@media (max-width: 540px) {
    .sq-ac-actions { gap: 6px; padding: 8px 4px 0; justify-content: center; }
    .sq-ac-action  { width: 32px; height: 32px; }
}

/* ─── Share Hub picker rows ─────────────────────────────────── */
@media (max-width: 720px) {
    [data-base][id^="sq-share-"] > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Long URLs / code blocks don't break the page ──────────── */
@media (max-width: 768px) {
    code, pre { word-break: break-all; max-width: 100%; }
    .sq-share-url,
    code.sq-share-url { font-size: 11px !important; }
}

/* ─── Generic overflow safety net ───────────────────────────── */
@media (max-width: 900px) {
    img { max-width: 100%; height: auto; }
    iframe { max-width: 100%; }
    .alignwide, .alignfull { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ─── Touch target minimum size (a11y) ──────────────────────── */
@media (max-width: 768px) {
    .btn, .btn-primary, .btn-ghost,
    .sq-nav a, .sq-footer a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
}