/* ==========================================================================
   MCF DESIGN SYSTEM — SINGLE AUTHORITATIVE DEFINITION
   Mega Corporate Futsal 2026 · organised by Blum Creatives

   This file is the ONLY place the official MCF visual tokens are defined.
   Pages must not redefine --lime / --purple / --paper locally.

   OFFICIAL COLOURS (locked, do not substitute)
     LIME      #C1D62F
     PURPLE    #5F4499
     OFF WHITE #F7F5E8

   THREE SURFACE SYSTEM
     Lime surface      = official lime  + subtle MCF dots
     Purple surface    = official purple + approved chevron / graphic depth
     Off White surface = official off white + subtle MCF dots

   The halftone dot gradient is the MCF signature accent, taken from the
   approved reference artwork. It is corner anchored and is deliberately kept
   out of the area body copy sits in so readability never drops.
   ========================================================================== */

:root{
  /* ---- OFFICIAL PALETTE ---- */
  --lime:#C1D62F;
  --purple:#5F4499;
  --paper:#F7F5E8;

  /* ---- DERIVED VALUES ----
     Depth, hover and accessibility tones ONLY. Every one of these is now
     mixed from the official colours at runtime rather than pinned to its own
     hex, so no fourth brand colour can exist anywhere in the system: change
     an official colour above and every derived tone follows it.

     The first declaration in each pair is the fallback for browsers without
     color-mix(); the second is what every current browser actually uses.
     Both stay inside the official family. */
  --lime-pale:#E7EFB8;
  --lime-pale:color-mix(in srgb, var(--paper) 85%, var(--lime));
  --lime-deep:#A9BC2C;
  --lime-deep:color-mix(in srgb, var(--lime) 85%, var(--ink));
  --purple-mid:#7A64A7;
  --purple-mid:color-mix(in srgb, var(--paper) 18%, var(--purple));
  --purple-pale:#E3DEDE;
  --purple-pale:color-mix(in srgb, var(--paper) 87%, var(--purple));
  --ink:#241A3D;                /* the single MCF dark — used for depth, never as a brand colour */
  --purple-deep:var(--ink);     /* legacy alias. MCF has no fourth purple. */
  --deep:var(--ink);            /* legacy alias. MCF has no fourth purple. */
  --white:var(--paper);         /* alias: MCF has no pure white surface */
  --paper-dot:rgba(36,26,61,0.06);

  /* ---- MCF PATTERN LIBRARY ---- */
  --mcf-dot-on-lime:radial-gradient(rgba(36,26,61,0.17) 1.7px, transparent 1.8px);
  --mcf-dot-on-paper:radial-gradient(var(--paper-dot) 1.4px, transparent 1.5px);
  --mcf-dot-on-purple:radial-gradient(rgba(193,214,47,0.15) 1.6px, transparent 1.7px);
  --mcf-dot-size:16px 16px;

  --mcf-ht-purple-tl:url("brand/halftone-purple-tl.svg");
  --mcf-ht-purple-br:url("brand/halftone-purple-br.svg");
  --mcf-ht-lime-tl:url("brand/halftone-lime-tl.svg");
  --mcf-ht-lime-br:url("brand/halftone-lime-br.svg");
  --mcf-ht-ink-br:url("brand/halftone-ink-br.svg");
  --mcf-chevron:url("brand/chevron-light.svg");
  --mcf-chevron-lime:url("brand/chevron-lime.svg");

  /* ---- STRUCTURE ---- */
  --shadow-hard: 9px 9px 0 var(--purple-deep);
  --shadow-hard-sm: 5px 5px 0 var(--purple-deep);
  --shadow-soft: 0 28px 60px rgba(36,26,61,0.22);
  --maxw:1200px;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:12px;
  --border-strong:3px solid var(--purple-deep);
  --border-soft:2px solid rgba(36,26,61,0.14);

  /* ---- TYPOGRAPHY ---- */
  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;
  --fs-hero:clamp(42px,7vw,86px);
  --fs-h2:clamp(30px,4.4vw,56px);
  --fs-h3:clamp(20px,2.4vw,28px);
  --fs-body:clamp(15px,1.5vw,17px);
  --fs-label:12px;
  --ls-label:.14em;
}

/* ==========================================================================
   1. THREE SURFACE SYSTEM
   ========================================================================== */

.mcf-surface-lime{
  background-color:var(--lime);
  background-image:var(--mcf-dot-on-lime);
  background-size:var(--mcf-dot-size);
  color:var(--ink);
}
.mcf-surface-paper{
  background-color:var(--paper);
  background-image:var(--mcf-dot-on-paper);
  background-size:var(--mcf-dot-size);
  color:var(--ink);
}
.mcf-surface-purple{
  background-color:var(--purple);
  background-image:var(--mcf-chevron);
  background-size:132px 66px;
  color:var(--paper);
}
/* Chevron must stay a depth cue, never a pattern that fights text. */
.mcf-surface-purple{ background-blend-mode:soft-light; }

/* ==========================================================================
   2. HALFTONE ACCENT — the MCF signature
   Corner anchored, decorative only, never beneath body copy.
   ========================================================================== */

.mcf-ht{ position:relative; isolation:isolate; }
.mcf-ht > *{ position:relative; z-index:2; }
.mcf-ht::before,
.mcf-ht::after{
  content:""; position:absolute; z-index:1;
  width:min(320px,42vw); height:min(320px,42vw);
  background-repeat:no-repeat; background-size:contain;
  pointer-events:none; opacity:.55;
}
.mcf-ht::before{ top:0; left:0; }
.mcf-ht::after { bottom:0; right:0; }

/* purple halftone belongs on lime and off white surfaces */
.mcf-ht-purple::before{ background-image:var(--mcf-ht-purple-tl); }
.mcf-ht-purple::after { background-image:var(--mcf-ht-purple-br); }
/* lime halftone belongs on purple surfaces */
.mcf-ht-lime::before{ background-image:var(--mcf-ht-lime-tl); }
.mcf-ht-lime::after { background-image:var(--mcf-ht-lime-br); }

/* single corner variants */
.mcf-ht-tl::after{ display:none; }
.mcf-ht-br::before{ display:none; }

@media (max-width:640px){
  .mcf-ht::before,.mcf-ht::after{ width:56vw; height:56vw; opacity:.42; }
}

/* ==========================================================================
   3. LABEL PANEL — solid block behind heavy type, offset outline.
   Taken directly from the approved reference artwork.
   ========================================================================== */

.mcf-label{
  display:inline-block;
  font-family:var(--font-display);
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:.42em .78em;
  background:var(--purple);
  color:var(--paper);
  border:3px solid var(--purple-mid);
  border-radius:4px;
  line-height:1.06;
}
.mcf-label-lime{ background:var(--lime); color:var(--purple-deep); border-color:var(--purple-deep); }
.mcf-label-paper{ background:var(--paper); color:var(--purple-deep); border-color:var(--purple); }

/* ==========================================================================
   4. TYPOGRAPHY GUARDS
   Locked: clear, sharp, strongly contrasted, comfortable at mobile size.
   ========================================================================== */

/* .mcf-eyebrow is defined once, in section 11 below. */
/* No faint grey body copy anywhere in the MCF system. */
.mcf-muted{ color:rgba(36,26,61,.72); }
.on-purple .mcf-muted,
.mcf-surface-purple .mcf-muted{ color:rgba(247,245,232,.78); }

/* ==========================================================================
   5. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--purple-deep);
  outline-offset:2px;
}

/* ==========================================================================
   6. SIGNATURE HALFTONE ON THE EXISTING BRUSH LAYER
   The reference artwork always pairs the torn brush diagonals with a halftone
   fall-off. .brush-layer already exists on every page, is decorative only and
   sits behind content, so the signature attaches there with no markup churn.
   ========================================================================== */

.brush-layer::before,
.brush-layer::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(330px,44vw); height:min(330px,44vw);
  background-repeat:no-repeat; background-size:contain;
  opacity:.62;
}
.brush-layer::before{ top:0; left:0;     background-image:var(--mcf-ht-purple-tl); }
.brush-layer::after { bottom:0; right:0; background-image:var(--mcf-ht-purple-br); }
.brush-layer > svg{ position:relative; z-index:1; }

@media (max-width:640px){
  .brush-layer::before,.brush-layer::after{ width:58vw; height:58vw; opacity:.46; }
}

/* Purple bands carry the lime halftone instead, per the reference. */
.marquee-wrap::after,
.verify-shell::after{
  content:""; position:absolute; right:0; bottom:0; z-index:0;
  width:min(300px,42vw); height:min(300px,42vw);
  background:var(--mcf-ht-lime-br) no-repeat right bottom/contain;
  opacity:.42; pointer-events:none;
}
.verify-shell > *{ position:relative; z-index:1; }

/* ==========================================================================
   7. SUPPORTER STUDIO — same site, same system
   ========================================================================== */
.sf-page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.sf-page-bg .dots{
  position:absolute; inset:0; opacity:.17;
  background-image:var(--mcf-dot-on-lime); background-size:var(--mcf-dot-size);
}
.sf-page-bg::before{
  content:""; position:absolute; top:0; left:0;
  width:min(340px,46vw); height:min(340px,46vw);
  background:var(--mcf-ht-purple-tl) no-repeat left top/contain; opacity:.5;
}
.sf-page-bg::after{
  content:""; position:absolute; bottom:0; right:0;
  width:min(340px,46vw); height:min(340px,46vw);
  background:var(--mcf-ht-purple-br) no-repeat right bottom/contain; opacity:.5;
}

/* ==========================================================================
   8. MCF PETAL MARK — ONE AUTHORITATIVE ASSET
   The mark is the Home Page brandmark's own geometry, reused as an alpha mask
   so it can take a brand colour per surface without ever being redrawn.
   brand/mcf-petal-source.png is the untouched Home Page asset; the mask files
   carry that identical alpha. Nothing here traces, approximates or rebuilds it.
   ========================================================================== */

:root{
  --mcf-petal-mask:url("brand/mcf-petal-mask@2x.png");
  --mcf-petal-w:18px;
  --mcf-petal-h:17px;   /* 120:115, the source aspect ratio */
}

/* The section eyebrow identifier. Replaces the old decorative bar. */
.mcf-petal{
  display:inline-block;
  width:var(--mcf-petal-w); height:var(--mcf-petal-h);
  flex-shrink:0;
  background-color:var(--purple);
  -webkit-mask:var(--mcf-petal-mask) no-repeat center/contain;
          mask:var(--mcf-petal-mask) no-repeat center/contain;
}
.mcf-petal.on-lime,
.on-dark .mcf-petal{ background-color:var(--lime); }
.mcf-petal.on-paper{ background-color:var(--purple); }

/* ==========================================================================
   9. MCF AI IDENTITY
   Same locked Petal, presented inside a dedicated badge. The distinction is
   the container and its treatment, never a second mark.
   ========================================================================== */

.mcf-ai-badge{
  display:inline-grid; place-items:center;
  width:2.15em; height:2.15em;
  border-radius:50%;
  background:var(--purple);
  border:2px solid var(--lime);
  flex-shrink:0;
  position:relative;
}
.mcf-ai-badge::before{
  content:"";
  width:52%; height:49%;
  background-color:var(--lime);
  -webkit-mask:var(--mcf-petal-mask) no-repeat center/contain;
          mask:var(--mcf-petal-mask) no-repeat center/contain;
}
/* On a purple ground the badge inverts so it never disappears. */
.mcf-ai-badge.on-purple{ background:var(--lime); border-color:var(--paper); }
.mcf-ai-badge.on-purple::before{ background-color:var(--purple); }

/* A single restrained breath, only where motion is welcome. */
@media (prefers-reduced-motion:no-preference){
  .mcf-ai-badge.is-live{ animation:mcfAiBreath 3.4s ease-in-out infinite; }
  @keyframes mcfAiBreath{
    0%,100%{ box-shadow:0 0 0 0 rgba(193,214,47,.42); }
    55%    { box-shadow:0 0 0 6px rgba(193,214,47,0); }
  }
}

/* ---- MCF AI launcher -------------------------------------------------- */
.mcf-ai-launcher{
  position:fixed; right:16px; bottom:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:900;
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 17px 9px 9px;
  border-radius:999px;
  background:var(--purple);
  border:2px solid var(--purple-deep);
  box-shadow:5px 5px 0 var(--purple-deep);
  text-decoration:none;
  min-height:48px;
  /* Without this the launcher falls back to the browser's link blue on any
     page that does not set its own anchor colour. */
  color:var(--lime);
}
.mcf-ai-launcher .mcf-ai-badge{ font-size:13px; }   /* badge scales from font-size */
.mcf-ai-launcher-label{
  font-family:var(--font-body); font-weight:800; font-size:14px;
  letter-spacing:.02em; color:var(--lime); white-space:nowrap;
}
.mcf-ai-launcher:hover{ background:var(--purple); }
.mcf-ai-launcher:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; }

@media (max-width:420px){
  .mcf-ai-launcher{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:8px 14px 8px 8px; }
  .mcf-ai-launcher-label{ font-size:13px; }
}

/* ==========================================================================
   10. TOUCH TARGETS
   Nav and footer links were 14px tall on a phone — readable but hard to hit.
   Padding gives them a usable target without changing type size, colour or
   spacing rhythm, so the layout is unchanged on desktop.
   ========================================================================== */

@media (max-width:900px){
  /* body-prefixed so these beat the per-page inline rules on specificity,
     not on source order — the shared sheet loads before those styles. */
  body .nav-links a,
  body .footer-col a,
  body .footer-brand a,
  body .footer-bottom a,
  body .footer a{
    display:inline-block;
    padding-block:7px;          /* 14px text + 14px padding = 28px target */
    min-height:28px;
  }
  body .footer-col li{ margin-bottom:2px; }

  /* Text links inside content lists sit at 20px on a phone. Same treatment:
     padding only, so type size, colour and rhythm are untouched. */
  body .role-cat li > a,
  body .rules-list li > a,
  body .faqs a,
  body .matchsheet-row a,
  body .socials > a{
    display:inline-block;
    padding-block:4px;
    min-height:26px;
  }
}

/* ==========================================================================
   11. SECTION EYEBROW — ONE GLOBAL RULE
   Every major section identifier on the site is a .eyebrow: BRANDS ON BOARD,
   INTERACTIVE · 3D, MEDIA HUB, VERIFICATION, LEAGUE OFFICE, EVENT CREW,
   PRIZE POOL, TEAMS and their equivalents. Size, weight, tracking, spacing
   and Petal scale are defined HERE and nowhere else — pages reference these
   tokens instead of restating values, so one change moves the whole site.

   The eyebrow is a major heading, not a caption. It is deliberately large
   enough to be read as a section title from across a room, and the Petal
   scales with it in em so the mark never looks stranded beside big type.
   Geometry is untouched: mask/contain always preserves the source aspect,
   so a slightly different box only letterboxes, it never distorts.
   ========================================================================== */

:root{
  --mcf-eyebrow-size:clamp(15px,1.75vw,21px);
  --mcf-eyebrow-weight:700;
  --mcf-eyebrow-tracking:.17em;
  --mcf-eyebrow-gap:.62em;
  --mcf-eyebrow-space:20px;
  --mcf-petal-em-w:1.18em;
  --mcf-petal-em-h:1.13em;
}

.eyebrow,
.mcf-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--mcf-eyebrow-size);
  font-weight:var(--mcf-eyebrow-weight);
  letter-spacing:var(--mcf-eyebrow-tracking);
  line-height:1.15;
  text-transform:uppercase;
  color:var(--purple);
  display:inline-flex;
  align-items:center;
  gap:var(--mcf-eyebrow-gap);
  margin:0 0 var(--mcf-eyebrow-space);
}

/* The Petal is the eyebrow's identifier. currentColor means it always takes
   the eyebrow's own colour — purple on light surfaces, lime on dark — so no
   surface ever needs its own override. */
.eyebrow::before,
.mcf-eyebrow::before{
  content:"";
  width:var(--mcf-petal-em-w);
  height:var(--mcf-petal-em-h);
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:var(--mcf-petal-mask) no-repeat center/contain;
          mask:var(--mcf-petal-mask) no-repeat center/contain;
}

.eyebrow.on-dark,
.mcf-eyebrow.on-dark,
.on-dark .eyebrow,
.mcf-surface-purple .eyebrow{ color:var(--lime); }

/* A decorative dash must never stand in for the Petal. */
.eyebrow::after,
.mcf-eyebrow::after{ content:none; }

/* ==========================================================================
   12. SOCIAL CONTROLS — ONE GLOBAL RULE
   Official Facebook, Instagram and WhatsApp marks in MCF dress. Purple
   surface, lime ring, off-white glyph — the three brand colours and nothing
   else. All three controls are the same size, weight and spacing so the row
   reads as one set rather than three borrowed logos.

   The purple disc sits on a purple footer, so the lime ring and the off-white
   glyph are what define it. Both carry comfortably: off white on official
   purple measures 6.7:1.
   ========================================================================== */

:root{
  --mcf-social-size:58px;
  --mcf-social-glyph:46%;
  --mcf-social-gap:14px;
  --mcf-social-ring:2.5px;
}

.socials{
  display:flex;
  align-items:center;
  gap:var(--mcf-social-gap);
  /* The set never breaks across two lines: three controls plus two gaps is
     202px desktop and 180px mobile, which fits the narrowest column used. */
  flex-wrap:nowrap;
  margin:0;
  padding:0;
  list-style:none;
}

.social-btn,
.social-btn.social-btn{
  width:var(--mcf-social-size);
  height:var(--mcf-social-size);
  flex:0 0 var(--mcf-social-size);
  border-radius:50%;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  padding:0;
  background:var(--purple);
  border:var(--mcf-social-ring) solid var(--lime);
  color:var(--paper);
  /* Purple disc, lime accent ring, then a purple outer edge in the disc's own
     colour. On the purple footer that outer edge blends away; on an off white
     card it gives the lime ring a hard edge to sit against, so the accent
     stays crisp without introducing a fourth colour. The control boundary
     that carries perception is the purple disc itself: 6.7:1 on off white,
     4.4:1 on lime. */
  box-shadow:inset 0 0 0 1px rgba(247,245,232,.10),
             0 0 0 2px var(--purple),
             0 6px 18px rgba(36,26,61,.28);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease, color .16s ease, transform .16s ease,
             border-color .16s ease, box-shadow .16s ease;
}

.social-btn.social-btn{ color:var(--paper); }

.social-btn svg{
  width:var(--mcf-social-glyph);
  height:var(--mcf-social-glyph);
  fill:currentColor;
  display:block;
  pointer-events:none;
}

.social-btn.social-btn:hover,
.social-btn.social-btn:focus-visible{
  background:var(--lime);
  border-color:var(--paper);
  color:var(--purple);
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(95,68,153,.14),
             0 0 0 2px var(--purple),
             0 12px 26px rgba(36,26,61,.34);
}

/* The ring is lime on every surface, with no per-page exception: the three
   controls must read as one identical set wherever they appear. */

@media (max-width:600px){
  :root{ --mcf-social-size:52px; --mcf-social-gap:12px; }
}

/* ==========================================================================
   13. DECORATIVE BRUSH LAYERS
   The constellation / brushwork behind heroes and bands is texture, never a
   wash. It used to be drawn in a family of derived purples; now that it is
   drawn in official colours the contrast against its ground is much higher,
   so the layer opacity is governed here — one place, for every page.

   Rule: brushwork must never compete with a headline sitting over it.
   ========================================================================== */

svg.band-brush{ opacity:.18; }      /* off white on the official purple surface */
svg.hero-brush,
svg.brush-field{ opacity:.30; }     /* official purple on the lime surface */

@media (max-width:640px){
  svg.band-brush{ opacity:.14; }
  svg.hero-brush, svg.brush-field{ opacity:.24; }
}

/* ==========================================================================
   14. NATIVE FORM CONTROLS
   A control the page has not styled otherwise falls back to the browser's
   own palette: black text, white field, grey border. That is a pure white
   branded surface arriving through the back door, so the MCF defaults are
   set here. Only colour is touched — the control's mechanics, focus ring and
   native behaviour are left exactly as the browser provides them.
   ========================================================================== */

input, select, textarea, button, optgroup, option{ color:var(--ink); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea{
  background-color:var(--paper);
  border-color:rgba(36,26,61,.28);
}

/* Brand the native checkbox, radio, range and progress without replacing them. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress{ accent-color:var(--purple); }

::placeholder{ color:rgba(36,26,61,.55); opacity:1; }

/* Text selection follows the brand rather than the system highlight. */
::selection{ background:var(--lime); color:var(--ink); }

/* ==========================================================================
   15. FOOTER — ONE GLOBAL AUTHORITY
   The footer is official purple with restrained decoration and nothing else.
   A large repeating field across the whole footer is NOT part of the MCF
   system: it fights the content and cheapens the identity. The chevron stays
   available to other purple surfaces; it is barred from the footer.

   Permitted decoration, in this order and no other:
     1. one lime halftone, anchored bottom right, no repeat
     2. the subtle MCF lime dot field
     3. one soft diagonal depth gradient in MCF ink

   This rule is written at footer.footer so it outranks a page level .footer
   block. A page can add spacing or layout of its own; it cannot repaint the
   footer surface or reintroduce a repeating field.
   ========================================================================== */

footer.footer{
  background-color:var(--purple);
  background-image:
    var(--mcf-ht-lime-br),
    var(--mcf-dot-on-purple),
    linear-gradient(152deg, rgba(36,26,61,0) 40%, rgba(36,26,61,.55) 100%);
  background-size:min(340px,46vw) auto, var(--mcf-dot-size), 100% 100%;
  background-position:right bottom, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
  background-blend-mode:normal, normal, normal;
  color:rgba(247,245,232,.88);
}

/* The MCF AI launcher is fixed to the bottom right. Reserve clearance so it
   can never sit on top of the copyright line at the foot of the page. */
footer.footer{ padding-bottom:92px; }
@media (max-width:640px){ footer.footer{ padding-bottom:104px; } }

/* The constellation layer stays a whisper behind footer content. */
footer.footer svg.band-brush{ opacity:.10; }
@media (max-width:640px){
  footer.footer svg.band-brush{ opacity:.07; }
  footer.footer{ background-size:min(260px,54vw) auto, var(--mcf-dot-size), 100% 100%; }
}

/* --- footer layout: grid tracks must be allowed to shrink ------------------
   Grid items default to min-width:auto, so a long address or email forces its
   track wider than its share and pushes footer content past the viewport. It
   is clipped rather than scrolling, so it reads as content simply missing.
   These rules let the tracks shrink and let long strings wrap. */
footer.footer .footer-top,
footer.footer .footer-cols,
footer.footer .footer-top > *,
footer.footer .footer-cols > *,
footer.footer .footer-brand{ min-width:0; }

footer.footer .footer-col a,
footer.footer .footer-col span,
footer.footer .footer-brand p{ overflow-wrap:anywhere; }

@media (max-width:820px){
  footer.footer .footer-top{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  footer.footer .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:400px){
  footer.footer .footer-cols{ grid-template-columns:minmax(0,1fr); }
  footer.footer .footer-bottom{ flex-direction:column; gap:10px; }
}

/* Between the three-column footer and the wide layout the FOLLOW column gets
   tight enough that the third control clips at the viewport edge. The set must
   stay on one line, so the controls step down instead of wrapping. */
@media (min-width:641px) and (max-width:1120px){
  footer.footer .socials{ --mcf-social-size:50px; --mcf-social-gap:10px; }
}

/* ============================================================================
   16. GLOBAL HEADER — ONE AUTHORITY

   Every public page shipped the same header CSS inline, byte for byte, in 15
   separate copies. Identical today, free to drift tomorrow — and two pages had
   already drifted: supporter.html carried its own `.topbar` and crew.html a
   reduced "back to site" bar.

   These declarations are the values those 15 pages already used, promoted to
   `nav.nav` (specificity 0,1,1) so they outrank a page level `.nav` (0,1,0)
   without `!important`. Nothing renders differently; the header simply now has
   one place to change and no page can silently diverge from it.
   ========================================================================== */
nav.nav{
  position:fixed; top:14px; left:0; right:0; z-index:200;
  padding:0 18px;
}
nav.nav .nav-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(247,245,232,0.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:2.5px solid var(--purple-deep);
  border-radius:999px;
  padding:10px 10px 10px 20px;
  box-shadow:0 10px 30px rgba(36,26,61,0.18);
  transition:box-shadow .2s ease, background .2s ease;
}
nav.nav.scrolled .nav-inner{
  background:rgba(247,245,232,0.94);
  box-shadow:0 14px 36px rgba(36,26,61,0.26);
}
nav.nav .brandmark{display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none;}
nav.nav .brandmark-icon{width:27px; height:auto; flex-shrink:0;}
nav.nav .brandmark .word{
  font-family:'Anton','Arial Narrow',Impact,Haettenschweiler,sans-serif; font-size:19px;
  letter-spacing:0.05em; color:var(--purple-deep); text-transform:uppercase; line-height:1;
}
nav.nav .brandmark .expand{
  display:block; margin-top:3px;
  font-family:'Space Mono',monospace; font-size:7.5px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--purple-mid); line-height:1;
}
@media (max-width:430px){ nav.nav .brandmark .expand{display:none;} }
nav.nav .nav-links{display:flex; align-items:center; gap:17px; list-style:none; margin:0; padding:0;}
nav.nav .nav-links a{
  font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--purple-deep);
  opacity:0.7; text-decoration:none;
  transition:opacity .15s ease, transform .15s ease;
}
nav.nav .nav-links a:hover{opacity:1; transform:translateY(-1px);}
nav.nav .nav-cta{display:flex; align-items:center; gap:10px;}
/* The two header buttons are part of the header, so their appearance belongs
   to this authority too. supporter.html carried no .btn rules of its own and
   rendered them as bare underlined links until these landed here. Scoped to
   the header so a page's own .btn styling elsewhere is untouched. */
nav.nav .nav-cta .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Space Mono',monospace; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
  border-radius:999px; border:2.5px solid var(--purple-deep);
  cursor:pointer; white-space:nowrap;
  padding:12px 20px; font-size:11.5px; box-shadow:3px 3px 0 var(--purple-deep);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
nav.nav .nav-cta .btn-fill{background:var(--purple); color:var(--lime);}
nav.nav .nav-cta .btn-outline{background:transparent; color:var(--purple-deep); box-shadow:none;}
nav.nav .nav-cta .btn-outline:hover{background:var(--purple); color:var(--lime);}
nav.nav .nav-links a{white-space:nowrap;}
nav.nav .nav-toggle{
  display:none; background:var(--purple); border:none; color:var(--lime);
  cursor:pointer; padding:10px; border-radius:999px;
}
nav.nav .nav-toggle svg{width:22px; height:22px;}

@media (max-width:1215px){
  nav.nav .nav-links{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    /* One column, always. The desktop bar sets flex-wrap:wrap; in a column
       panel that wrapped the menu into a second column whose rows ran past the
       panel edge and were cut off by overflow:hidden. */
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    gap:0; row-gap:0; max-width:none;
    background:var(--paper);
    border:2.5px solid var(--purple-deep);
    border-radius:22px;
    box-shadow:var(--shadow-hard-sm);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s ease, opacity .2s ease;
  }
  /* The menu now carries eleven items. A fixed 420px cap left the last rows
     unreachable, because the panel could not scroll. Bound it to the viewport
     and let it scroll when it must, so every item is reachable at every size. */
  nav.nav .nav-links.open{
    max-height:min(72vh, 620px);
    opacity:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  nav.nav .nav-links li{flex:0 0 auto;}
  nav.nav .nav-links a{padding:16px 22px; border-bottom:1.5px solid rgba(36,26,61,0.12); opacity:1;}
  nav.nav .nav-links a:last-child{border-bottom:none;}
  nav.nav .nav-cta .btn-outline{display:none;}
  nav.nav .nav-toggle{display:inline-flex;}
}
@media (max-width:520px){
  nav.nav .nav-cta .btn-fill{display:none;}
  nav.nav .nav-inner{padding:9px 9px 9px 16px;}
}

/* ============================================================================
   17. MCF LIGHT SURFACE — OFF WHITE PLUS THE SUBTLE DOT

   A branded card, panel or shell on the light side of the palette is off white
   AND carries the quiet MCF dot. A handful of surfaces were off white but flat,
   so they read as plain white boxes next to the ones that carry the texture.

   Applied only to genuine branded cards. Deliberately NOT applied to:
     - long form legal reading blocks (.doc-box) — texture behind dense body
       copy costs readability, which section 9 rules out
     - page level <section> elements — a card treatment, not a page treatment
     - .payrow and .info-card — off white at 6% over purple. They read as
       light to a naive scan but are DARK surfaces carrying off white text;
       forcing a paper background on them destroys their contrast
     - form fields, checkboxes, photographs, validation messages, Admin UI
     - purple surfaces, which do not gain a dot merely because one exists here
   ========================================================================== */
/* The class is doubled so these outrank the page level rule that shipped the
   flat surface, without reaching for !important. */
.role-cat.role-cat,
.prize-card:not(.is-champion),
.hub-empty.hub-empty{
  background-color:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1.5px, transparent 1.6px);
  background-size:18px 18px;
  background-repeat:repeat;
}
/* .slot-card is off white at 55% over its section: it keeps its own alpha and
   takes only the dot, so the section behind it still shows through. */
.slot-card.slot-card{
  background-image:radial-gradient(var(--paper-dot) 1.5px, transparent 1.6px);
  background-size:18px 18px;
  background-repeat:repeat;
}

/* --- The same treatment, extended to the branded cards a first pass missed.
   The earlier audit only looked at surfaces 220x120 and larger, so the rule
   rows, the League Office fact cards, the policy callouts and the form
   fieldsets all slipped through and stayed flat white next to textured cards.

   Classes are doubled so these outrank the page level rule that shipped the
   flat surface, without reaching for !important. Still excluded: the refund
   policy data table (texture behind figures costs scanability), .reveal
   (an animation wrapper, not a card), form controls themselves, and every
   purple surface. --- */
.rules-list.rules-list li,
.gap-list.gap-list li,
.lo-fact.lo-fact,
.lo-steps.lo-steps li,
.doc-box.doc-box,
.conflict-note.conflict-note,
.gal-note.gal-note,
.notice.notice,
.mcf-form.mcf-form fieldset{
  background-color:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1.5px, transparent 1.6px);
  background-size:18px 18px;
  background-repeat:repeat;
}