/* 🎨 Website poster look (Design, study 1c, 27 Sep 2026 handoff) — Design's theme-poster.css,
   loaded AFTER site.css. Changes from Design's file, and only these:
   · the Google Fonts @import is gone (our CSP blocks it): Bangers comes from /fonts.css (the app's
     one font file) and Atkinson Hyperlegible Next (OFL, @fontsource 5.3.0) is self-hosted below;
   · the brand-link selector names /home instead of the prototype's file name.
   ⛔ Remove this one <link> and a page reverts to the serif site. */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:600;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:800;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:400;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:800;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-800-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:600;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:800;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:400;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:800;font-display:swap;src:url(/site/fonts/atkinson-hyperlegible-next-latin-ext-800-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* The poster palette: every colour Design's sheet uses, defined ONCE here and read as var()
   everywhere below (test:tokens — a hex in this file may only sit on a --token line). */
:root {
  --pp-x0b1628: #0b1628;
  --pp-x13233a: #13233a;
  --pp-xeef6f7: #eef6f7;
  --pp-x3fc1de: #3fc1de;
  --pp-x0f1d33: #0f1d33;
  --pp-x16263f: #16263f;
  --pp-x22344f: #22344f;
  --pp-x3a4b66: #3a4b66;
  --pp-x6b7890: #6b7890;
  --pp-x9aa3b3: #9aa3b3;
  --pp-xc4c9d1: #c4c9d1;
  --pp-xe0ddd4: #e0ddd4;
  --pp-x0e2a3a: #0e2a3a;
  --pp-x123a4e: #123a4e;
  --pp-x1a5670: #1a5670;
  --pp-x2a86a6: #2a86a6;
  --pp-x6dd3ea: #6dd3ea;
  --pp-x9be3f2: #9be3f2;
  --pp-xc6f0f8: #c6f0f8;
  --pp-xe6f9fc: #e6f9fc;
  --pp-x1f7a8c: #1f7a8c;
  --pp-xe8743b: #e8743b;
  --pp-xe9b44c: #e9b44c;
  --pp-xcfeaf1: #cfeaf1;
  --pp-x0e5566: #0e5566;
  --pp-xb5dce7: #b5dce7;
  --pp-x1a0f08: #1a0f08;
  --pp-x000: #000;
  --pp-xd8662f: #d8662f;
  --pp-x1a2a44: #1a2a44;
  --pp-x14304a: #14304a;
  --pp-x1b4466: #1b4466;
  --pp-x9bd8ea: #9bd8ea;
  --pp-x2a2010: #2a2010;
  --pp-x8a3a1c: #8a3a1c;
  --pp-x6a2b14: #6a2b14;
  --pp-xfff8ee: #fff8ee;
  --pp-x214f7c: #214f7c;
  --pp-xffffff: #ffffff;
  --pp-x9ed3e2: #9ed3e2;
  --pp-x7fc4d8: #7fc4d8;
  --pp-x15588f: #15588f;
  --pp-x17606e: #17606e;
  --pp-xffe08a: #ffe08a;
  --pp-xd9a43c: #d9a43c;
  --pp-xe6d3ac: #e6d3ac;
  --pp-xf3e9d2: #f3e9d2;
  --pp-xd9c39b: #d9c39b;
  --pp-xc4a77c: #c4a77c;
  --pp-x5e1f0a: #5e1f0a;
}
/* OceanLog poster theme (study 1c, live 26 Sep 2026).
   Token override loaded AFTER the Broadsheet styles.css. Remove this one <link> to revert a page. */

:root {
  --color-bg: var(--pp-x0b1628);
  --color-surface: var(--pp-x13233a);
  --color-text: var(--pp-xeef6f7);
  --color-accent: var(--pp-x3fc1de);
  --color-divider: color-mix(in srgb, var(--pp-xeef6f7) 18%, transparent);

  --color-neutral-100: var(--pp-x0f1d33);
  --color-neutral-200: var(--pp-x16263f);
  --color-neutral-300: var(--pp-x22344f);
  --color-neutral-400: var(--pp-x3a4b66);
  --color-neutral-500: var(--pp-x6b7890);
  --color-neutral-600: var(--pp-x9aa3b3);
  --color-neutral-700: var(--pp-xc4c9d1);
  --color-neutral-800: var(--pp-xe0ddd4);
  --color-neutral-900: var(--pp-xeef6f7);

  /* accent ramp inverted for the dark ground: 700 is the readable paragraph-size accent */
  --color-accent-100: var(--pp-x0e2a3a);
  --color-accent-200: var(--pp-x123a4e);
  --color-accent-300: var(--pp-x1a5670);
  --color-accent-400: var(--pp-x2a86a6);
  --color-accent-500: var(--pp-x3fc1de);
  --color-accent-600: var(--pp-x6dd3ea);
  --color-accent-700: var(--pp-x9be3f2);
  --color-accent-800: var(--pp-xc6f0f8);
  --color-accent-900: var(--pp-xe6f9fc);

  --font-heading: "Bangers", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);

  /* poster palette */
  --pp-navy: var(--pp-x0b1628);
  --pp-cream: var(--pp-xeef6f7);
  --pp-cyan: var(--pp-x3fc1de);
  --pp-teal: var(--pp-x1f7a8c);
  --pp-sunset: var(--pp-xe8743b);
  --pp-mustard: var(--pp-xe9b44c);
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

/* Bangers has no italic or weights: keep display type upright and lightly tracked */
h1, h2, h3, h1 *, h2 *, h3 *, blockquote { font-style: normal !important; font-weight: 400 !important; letter-spacing: 0.02em !important; }
h1, h2, h3 { line-height: 1 !important; }
blockquote { font-family: var(--font-heading) !important; }
[style*="font-family: var(--font-heading)"], [style*="font-family: var(--font-heading)"] * { font-style: normal !important; }

/* light poster bands flip the tokens for everything inside */
[data-band="cream"]   { /* pale ocean, not sand */ --color-bg: var(--pp-xcfeaf1); --color-text: var(--pp-x0b1628); --color-accent: var(--pp-x1f7a8c); --color-accent-700: var(--pp-x0e5566); --color-accent-900: var(--pp-x0b1628); --color-neutral-200: var(--pp-xb5dce7); background: var(--pp-xcfeaf1); color: var(--pp-x0b1628); }
[data-band="sunset"]  { --color-bg: var(--pp-xe8743b); --color-text: var(--pp-x1a0f08); --color-accent: var(--pp-x0b1628); --color-accent-700: var(--pp-x1a0f08); --color-accent-900: var(--pp-x000); --color-neutral-200: var(--pp-xd8662f); background: var(--pp-xe8743b); color: var(--pp-x1a0f08); }
[data-band="mustard"] { --color-bg: var(--pp-xe9b44c); --color-text: var(--pp-x1a0f08); --color-accent: var(--pp-x0b1628); --color-accent-600: var(--pp-x1a2a44); --color-accent-700: var(--pp-x1a0f08); --color-accent-900: var(--pp-x000); background: var(--pp-xe9b44c); color: var(--pp-x1a0f08); }
[data-band] .btn-primary { color: var(--pp-xeef6f7); }
.btn-primary { color: var(--pp-x0b1628) !important; }
[data-band] .btn-primary { color: var(--pp-xeef6f7) !important; }

/* The --ol-* page palette was drawn for a light ground. On navy it is inverted:
   deep = ink (light), foam = paper (navy), surfaces become dark tints.
   !important beats the inline declarations on each page wrapper. */
:root, [style*="--ol-deep:"]:not([data-palette="coach"]) {
  --ol-deep: var(--pp-xeef6f7) !important;
  --ol-foam: var(--pp-x0b1628) !important;
  --ol-surface: var(--pp-x14304a) !important;
  --ol-open-water: var(--pp-x1b4466) !important;
  --ol-offshore: var(--pp-x9bd8ea) !important;
}

/* UI chrome stays in Atkinson Hyperlegible Next; only headings and the brand take Bangers */
.btn, button, input, select, textarea { font-family: var(--font-body) !important; font-weight: 800; font-style: normal; letter-spacing: 0; }
.btn { white-space: nowrap; }
.nav-brand, a[href="/home"]:has(> img[src*="oceanlog-mark"]) { font-family: "Bangers", system-ui, sans-serif !important; font-weight: 400 !important; font-size: 28px !important; letter-spacing: 0.04em !important; line-height: 1 !important; }
a[data-appstore-href] > span > span, a[data-playstore-href] > span > span { white-space: nowrap; line-height: 14px !important; }
a[data-appstore-href] > span, a[data-playstore-href] > span { display: block; line-height: 20px; }
a[style*="min-height: 48px"] { white-space: nowrap; }

/* For Coaches keeps its sand ground; deepen its ink + accent so every pair clears AA */
[data-palette="coach"] { --ol-sand-ink: var(--pp-x2a2010) !important; --color-text: var(--pp-x2a2010) !important; --color-accent: var(--pp-x8a3a1c) !important; --color-accent-600: var(--pp-x6a2b14) !important; }
[data-palette="coach"] .btn-primary { color: var(--pp-xfff8ee) !important; }
/* Small badges/chips inside headings: never Bangers, never squeezed */
h1 span[style*="font-size: 1"], h2 span[style*="font-size: 1"], h3 span[style*="font-size: 1"] { font-family: var(--font-body) !important; font-weight: 800 !important; font-size: 12px !important; line-height: 18px !important; letter-spacing: 0.04em !important; white-space: nowrap; padding: 2px 8px; border-radius: 999px; }
button { white-space: nowrap; }
[id^="plan-"] > h2 { padding-right: 52px; }
/* Current page in the nav: full ink + weight, never faded */
[aria-current="page"] { color: var(--color-text) !important; font-weight: 800; white-space: nowrap; }
/* On warm/pale bands, faded mixes are lifted to full ink (colour text is fine elsewhere if it clears AA) */
[data-band] [style*="transparent)"]:not(.btn):not(.btn *) { color: var(--color-text) !important; }

/* ============ Comic vignettes (26 Sep) ============
   Every top-level section on a page is its own panel: flat colour, navy gutter between.
   Athlete pages cycle ocean + warm; For Coaches cycles sand. Sections that already carry
   their own background (coach band, founder, pledge) keep it and just take the panel shape. */
div[style*="max-width: 1200px"] > section,
div[style*="max-width: 1200px"] > sc-if > section,
div[style*="max-width: 1200px"] > div[data-panel] /* a panel that must not count in section:nth-of-type (Why #pledge, 29 Sep) */ {
  margin: 0 0 14px !important;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px) !important;
  border-radius: 4px !important;
}
div[style*="max-width: 1200px"] > section:first-of-type { margin-top: 14px !important; }
div[style*="max-width: 1200px"] > section[data-band] { margin-inline: 0 !important; }
div[style*="max-width: 1200px"] > section:empty { display: none; }

/* cycle — only sections without their own inline background; For Coaches is excluded so its sand panels keep dark ink (WCAG AA) */
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):nth-of-type(6n+1) { --color-bg:var(--pp-x214f7c); --color-surface:var(--pp-x214f7c); --color-text:var(--pp-xeef6f7); --color-accent:var(--pp-x9be3f2); --color-accent-600:var(--pp-x9be3f2); --color-accent-700:var(--pp-x9be3f2); --color-accent-900:var(--pp-xffffff); --color-divider: rgba(238,246,247,0.3); background:var(--pp-x214f7c); color:var(--pp-xeef6f7); }
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):nth-of-type(6n+2) { --color-bg:var(--pp-xcfeaf1); --color-surface:var(--pp-xcfeaf1); --color-text:var(--pp-x0b1628); --color-accent:var(--pp-x0e5566); --color-accent-600:var(--pp-x0e5566); --color-accent-700:var(--pp-x0e5566); --color-accent-900:var(--pp-x0b1628); --color-neutral-200:var(--pp-xb5dce7); --color-divider: rgba(11,22,40,0.25); --ol-deep:var(--pp-x0b1628) !important; --ol-foam:var(--pp-xeef6f7) !important; --ol-surface:var(--pp-x9ed3e2) !important; --ol-open-water:var(--pp-x7fc4d8) !important; --ol-offshore:var(--pp-x15588f) !important; background:var(--pp-xcfeaf1); color:var(--pp-x0b1628); }
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):nth-of-type(6n+3) { --color-bg:var(--pp-x17606e); --color-surface:var(--pp-x17606e); --color-text:var(--pp-xeef6f7); --color-accent:var(--pp-xffe08a); --color-accent-600:var(--pp-xffe08a); --color-accent-700:var(--pp-xffe08a); --color-accent-900:var(--pp-xffffff); --color-divider: rgba(238,246,247,0.3); background:var(--pp-x17606e); color:var(--pp-xeef6f7); }
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):nth-of-type(6n+4) { --color-bg:var(--pp-xe9b44c); --color-surface:var(--pp-xe9b44c); --color-text:var(--pp-x1a0f08); --color-accent:var(--pp-x0b1628); --color-accent-600:var(--pp-x0b1628); --color-accent-700:var(--pp-x0b1628); --color-accent-900:var(--pp-x1a0f08); --color-neutral-200:var(--pp-xd9a43c); --color-divider: rgba(11,22,40,0.25); --ol-deep:var(--pp-x0b1628) !important; --ol-foam:var(--pp-xeef6f7) !important; --ol-surface:var(--pp-x9ed3e2) !important; --ol-open-water:var(--pp-x7fc4d8) !important; --ol-offshore:var(--pp-x15588f) !important; background:var(--pp-xe9b44c); color:var(--pp-x1a0f08); }
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):nth-of-type(6n+5) { --color-bg:var(--pp-x15588f); --color-surface:var(--pp-x15588f); --color-text:var(--pp-xeef6f7); --color-accent:var(--pp-xffe08a); --color-accent-600:var(--pp-xffe08a); --color-accent-700:var(--pp-xffe08a); --color-accent-900:var(--pp-xffffff); --color-divider: rgba(238,246,247,0.3); background:var(--pp-x15588f); color:var(--pp-xeef6f7); }
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):nth-of-type(6n+6) { --color-bg:var(--pp-xe8743b); --color-surface:var(--pp-xe8743b); --color-text:var(--pp-x1a0f08); --color-accent:var(--pp-x0b1628); --color-accent-600:var(--pp-x0b1628); --color-accent-700:var(--pp-x0b1628); --color-accent-900:var(--pp-x1a0f08); --color-neutral-200:var(--pp-xd8662f); --color-divider: rgba(11,22,40,0.25); --ol-deep:var(--pp-x0b1628) !important; --ol-foam:var(--pp-xeef6f7) !important; --ol-surface:var(--pp-x9ed3e2) !important; --ol-open-water:var(--pp-x7fc4d8) !important; --ol-offshore:var(--pp-x15588f) !important; background:var(--pp-xe8743b); color:var(--pp-x1a0f08); }

/* For Coaches: sand family only */
[data-palette="coach"] div[style*="max-width: 1200px"] > section:not([style*="background"]):nth-of-type(4n+1) { --color-bg:var(--pp-xe6d3ac); background:var(--pp-xe6d3ac); }
[data-palette="coach"] div[style*="max-width: 1200px"] > section:not([style*="background"]):nth-of-type(4n+2) { --color-bg:var(--pp-xf3e9d2); background:var(--pp-xf3e9d2); }
[data-palette="coach"] div[style*="max-width: 1200px"] > section:not([style*="background"]):nth-of-type(4n+3) { --color-bg:var(--pp-xd9c39b); background:var(--pp-xd9c39b); }
[data-palette="coach"] div[style*="max-width: 1200px"] > section:not([style*="background"]):nth-of-type(4n+4) { --color-bg:var(--pp-xc4a77c); background:var(--pp-xc4a77c); --color-accent:var(--pp-x5e1f0a) !important; --color-accent-700:var(--pp-x5e1f0a); }
[data-palette="coach"] div[style*="max-width: 1200px"] > section { --color-text:var(--pp-x2a2010); color:var(--pp-x2a2010); }
[data-palette="coach"] div[style*="max-width: 1200px"] > section:not([style*="background"]) { --ol-deep:var(--pp-x2a2010) !important; --ol-foam:var(--pp-xfff8ee) !important; }

/* inside any panel: faded text is lifted to the panel's full ink */
span[aria-hidden="true"][style*="pointer-events: none"] { white-space: nowrap; }
div[style*="max-width: 1200px"] > section [style*="transparent)"]:not(.btn):not(.btn *):not([style*="background: color-mix"]) { color: var(--color-text) !important; }

/* ── Code, 27 Sep 2026: the one change to Design's rules, and it is a fix ─────────────
   On the cream, mustard and sunset panels of the cycle the accent turns dark (teal or
   navy), and `.btn-primary` above paints its text navy — so "Start logging — free"
   measured 2.16:1 on How it works and 1.00:1 (invisible) on Contact, in Design's own
   prototype too. Light ink on those three, exactly as `[data-band] .btn-primary` does. */
:not([data-palette="coach"]) > div[style*="max-width: 1200px"] > section:not([style*="background"]):not([data-band]):is(:nth-of-type(6n+2), :nth-of-type(6n+4), :nth-of-type(6n+6)) .btn-primary { color: var(--pp-xeef6f7) !important; }

/* ── Website v4 (Design, 13 Oct 2026) ─────────────────────────────────────────────── */
:root {
  --pp-xc9d6e2: #c9d6e2;
  --pp-x124c7e: #124c7e;
}
/* "For coaches" in the nav: a PLAIN LINK like its neighbours (16 Oct 2026, UX audit #10, LOCKED by
   Xisco, work_log 5427). It was a sand outline pill that competed with the sign-up call to action.
   ⛔ Not a button again: the one button in the nav is the CTA. */
.nav-coach:hover, .nav-coach:focus-visible { text-decoration: underline; }
/* The Sports menu (built, hidden: Kamila 13 Oct · scripts/site-v2/sport-pages.config.mjs) */
.nav-sports { position: relative; }
.nav-sports[hidden] { display: none !important; }
.nav-sports > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 5px; color: inherit; }
.nav-sports > summary::-webkit-details-marker { display: none; }
.nav-sports > summary:hover { text-decoration: underline; }
.nav-sports-panel { position: absolute; top: calc(100% + 10px); left: -14px; z-index: 60; min-width: 260px; padding: 16px 18px 18px; overflow: hidden; background: var(--pp-x0b1628); color: var(--pp-xeef6f7); border: 3px solid var(--pp-xe9b44c); border-radius: 6px; box-shadow: 5px 5px 0 var(--pp-xe9b44c); display: grid; gap: 14px; white-space: normal; }
.nav-sports-label { font-family: "Bangers", system-ui, sans-serif; font-size: 20px; line-height: 1; letter-spacing: 0.03em; color: var(--pp-xe9b44c); }
.nav-sports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.nav-sports-grid > * { display: block; padding: 6px 0; font-size: 16px; line-height: 22px; color: var(--pp-xeef6f7); text-decoration: none; white-space: nowrap; }
.nav-sports-grid > a:hover, .nav-sports-grid > a:focus-visible { color: var(--pp-xe9b44c); text-decoration: underline; }
.nav-sports-tape { margin: 4px -24px 2px; transform: rotate(-2deg); background: var(--pp-xe9b44c); color: var(--pp-x0b1628); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.nav-sports-stripes { height: 7px; background-image: repeating-linear-gradient(-45deg, var(--pp-x0b1628) 0 10px, var(--pp-xe9b44c) 10px 20px); }
.nav-sports-tape-text { padding: 5px 0 3px; font-family: "Bangers", system-ui, sans-serif; font-size: 20px; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; text-align: center; overflow: hidden; }
.nav-sports-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--pp-xc9d6e2); }
.nav-sports-wip { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 16px; line-height: 22px; color: var(--pp-xc9d6e2); }
/* Footer social icons: ink, deep blue on hover */
.footer-icon:hover, .footer-icon:focus-visible { color: var(--pp-x124c7e) !important; }
/* Linked sport tags (How it works, when the sport pages are live) */
a.tag-link { text-decoration: none; }
a.tag-link:hover, a.tag-link:focus-visible { background: var(--pp-xe9b44c) !important; color: var(--pp-x0b1628) !important; border-color: var(--pp-xe9b44c) !important; }
/* Comic sticker (Pricing ×3, HOW-TO-BUILD §5) */
.sticker { display: inline-flex; align-items: center; padding: 8px 18px 6px; font-family: "Bangers", system-ui, sans-serif !important; font-weight: 400 !important; font-size: 24px; line-height: 1.1; letter-spacing: 0.03em; color: var(--pp-x0b1628) !important; border: 3px solid var(--pp-x0b1628); border-radius: 6px; box-shadow: 4px 4px 0 var(--pp-x0b1628); text-decoration: none; white-space: normal; text-align: left; transition: transform 120ms, box-shadow 120ms; }
.sticker-mustard { background: var(--pp-xe9b44c); }
.sticker-sunset { background: var(--pp-xe8743b); transform: rotate(1deg); }
a.sticker { transform: rotate(-1.5deg); cursor: pointer; }
button.sticker { transform: rotate(-1deg); cursor: pointer; }
a.sticker:hover, button.sticker:hover, a.sticker:focus-visible, button.sticker:focus-visible { transform: rotate(0) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pp-x0b1628); }
a.sticker:active, button.sticker:active { transform: translate(4px, 4px); box-shadow: none; }