/* 🎨 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: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}
/* 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 {
  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; }