/* ==========================================================================
   pf-brand.css — THE one brand system for mtcstw.com (unified 2026-10-24)
   Source of record: BRAND_SHEETS.md / BRAND_SUITE.md
     Ink #16161A · Paper #F4F2ED · Signal Red #C1121F
     Condensed black display type (Anton), uppercase headlines, grain.
   Themes: [data-theme="dark"] is the DEFAULT (CEO ruling 2026-10-24 —
   the site's black-and-red feel). [data-theme="light"] is the paper/white
   version of the same system. Theme is set pre-paint by an inline script
   on every page (localStorage 'pf_theme', default dark, never transmitted)
   and flipped by pf-theme.js via the .pf-theme-toggle button.
   This file also bridges the legacy v1.4.3 token names (--pf-fg, --pf-muted,
   --pf-line, --pf-raise, --pf-font, --pf-mono from pf-faces.css) onto the
   same values per theme, so legacy shared components flip with the theme
   without editing the immutable /v1.4.3/* assets.
   ========================================================================== */

/* ---------- Display font: Anton (condensed black, SIL OFL 1.1) ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin.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: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens: DARK (default) ---------- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --pf-bg: #0A0A0A;
  --pf-surface: #16161A;
  --pf-surface-raised: #232326;
  --pf-border: #2A2A2E;
  --pf-text: #F4F2ED;
  --pf-text-dim: #B8B2A6;
  --pf-text-faint: #8A8478;
  --pf-bar-bg: rgba(10, 10, 10, .96);
  --pf-bar-text: #F4F2ED;
  --pf-grain-opacity: .05;
  /* legacy v1.4.3 token bridge (pf-faces.css names) */
  --pf-fg: #F5F0E6;
  --pf-muted: #8A8478;
  --pf-line: #2A2824;
  --pf-raise: #141311;
}
/* Accent family — owned by the pf-faces face system when data-face is
   present; defined here only for pages without it. */
html:not([data-face]) {
  --pf-accent: #C1121F;
  --pf-accent-ink: #E5383B;
  --pf-on-accent: #F5F0E6;
}

/* ---------- Tokens: LIGHT (paper) ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --pf-bg: #F4F2ED;
  --pf-surface: #FFFFFF;
  --pf-surface-raised: #FFFFFF;
  --pf-border: #DDD6C4;
  --pf-text: #16161A;
  --pf-text-dim: #5A5648;
  --pf-text-faint: #8A8478;
  --pf-bar-bg: #16161A;
  --pf-bar-text: #F4F2ED;
  --pf-grain-opacity: .04;
  /* legacy bridge */
  --pf-fg: #16161A;
  --pf-muted: #5A5648;
  --pf-line: #DDD6C4;
  --pf-raise: #FFFFFF;
}
/* Face accents darkened on paper for legibility (hue preserved). */
html[data-theme="light"][data-face="fight"] { --pf-accent-ink: #C1121F; }
html[data-theme="light"][data-face="build"] { --pf-accent: #178A4C; --pf-accent-ink: #178A4C; }
html[data-theme="light"][data-face="scale"] { --pf-accent: #B57E00; --pf-accent-ink: #966900; }

/* ---------- Shared tokens (theme-independent) ---------- */
:root {
  --pf-font-display: 'Anton', 'Arial Narrow', 'Franklin Gothic Medium', sans-serif;
  --pf-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pf-font-serif: Georgia, 'Times New Roman', serif;
  --pf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pf-font: var(--pf-font-body);   /* legacy pf-faces name, unified */
  --pf-mono: var(--pf-font-mono);   /* legacy pf-faces name, unified */
  --pf-ink: #16161A;                /* constant ink (text on accent/light chips) */
  --pf-paper: #F4F2ED;              /* constant paper */
  --pf-radius: 10px;
  --pf-radius-lg: 16px;
}
...[truncated 4934 chars]
/* ---------- Base canvas (wins over per-page boot styles) ---------- */
html[data-theme] body {
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-font-body);
}

/* ---------- Display type: condensed black, uppercase headlines ---------- */
html[data-theme] h1,
html[data-theme] h2 {
  font-family: var(--pf-font-display);
  font-weight: 400;
  letter-spacing: .015em;
}

/* ---------- Shared chrome: topbar / shell nav ---------- */
html[data-theme] .pf-topbar {
  background: var(--pf-bar-bg);
  color: var(--pf-bar-text);
  border-bottom-color: var(--pf-accent);
}
html[data-theme] .pf-topbar a,
html[data-theme] .pf-topbar-nav a { color: var(--pf-bar-text); }
html[data-theme] .pf-shell-nav {
  background: var(--pf-bar-bg);
  border-bottom-color: var(--pf-accent);
}
html[data-theme] .pf-shell-nav a { color: var(--pf-bar-text); }
html[data-theme] .pf-shell-nav a:hover { color: var(--pf-accent); }

/* ---------- Forms inherit the system ---------- */
html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea { font-family: var(--pf-font-body); }

::selection { background: var(--pf-accent); color: var(--pf-on-accent, #F5F0E6); }

/* ---------- Grain (CSS-only, subtle, brand sheets: "grain on everything") ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
  opacity: var(--pf-grain-opacity, .05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- Theme toggle ---------- */
.pf-theme-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 100001;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--pf-accent);
  background: var(--pf-bar-bg);
  color: var(--pf-bar-text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
.pf-theme-toggle--inbar {
  position: static;
  width: 38px;
  height: 38px;
  margin-left: auto;
  flex: 0 0 auto;
  box-shadow: none;
  font-size: 16px;
}

/* ---------- Bottom nav: scroll collapse (CEO 2026-10-24) ----------
   Scrolling down collapses .pf-bnav to just the Home (Feed) button;
   pf-chrome.js toggles .pf-collapsed. The bar shrink-wraps around the
   home link, which keeps a pill's breathing room. */
html[data-theme] .pf-bnav a {
  transition: flex .3s cubic-bezier(.2,.8,.25,1), max-width .3s cubic-bezier(.2,.8,.25,1),
    opacity .18s ease, padding .3s cubic-bezier(.2,.8,.25,1);
}
html[data-theme] .pf-bnav.pf-collapsed {
  right: auto;
  border-right: 1px solid var(--pf-surface-raised);
  border-top-right-radius: 14px;
}
html[data-theme] .pf-bnav.pf-collapsed a:not(.pf-bnav-home) {
  flex: 0 0 0;
  max-width: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
html[data-theme] .pf-bnav.pf-collapsed a.pf-bnav-home {
  flex: 0 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .pf-bnav a { transition: none; }
}