/* brandonlehmanshow.com — shared shell and tokens.
   Source of truth: .claude/skills/brandon-lehman-design/SKILL.md (sections 2-4).
   Hex is the notation; do not convert. Every value below maps to a token or a rule there. */

/* 1. Tokens (SKILL.md section 2, verbatim) */
:root {
  color-scheme: dark;
  --bg: #1C1610;           /* paper: page background */
  --bg-deep: #16100B;      /* espresso: hero, footer, deepest surface */
  --panel: #241B14;        /* raised surface: drawer, dialog, editorial band */
  --ink: #F6F0E6;          /* cream: text, hairlines at alpha */
  --ink-85: rgba(246,240,230,.85);
  --muted: #B3A78F;        /* secondary text on bg/panel only (7.6:1 on bg) */
  --forest: #1F5C3D;       /* club surface only; text on it is cream/ink-85, never muted (3.3:1 fails) */
  --gold: #E0A83E;         /* the single accent: one headline word, primary CTA, focus ring (checked size is cream since 2026-09-29) */
  --gold-ink: #1C1610;     /* text on gold */
  --line: rgba(246,240,230,.14);
  --line-strong: rgba(246,240,230,.28);
  --outline-img: rgba(246,240,230,.08);
  --scrim-hero: linear-gradient(90deg, rgba(22,16,11,.78) 0%, rgba(22,16,11,.35) 45%, transparent 75%);
  --scrim-bottom: linear-gradient(180deg, transparent 60%, rgba(22,16,11,.72) 100%);

  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif; /* metric-matched fallback, fonts.css */
  --font-body: "Manrope", "Manrope Fallback", Arial, sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --gutter: clamp(16px, 4vw, 40px);
  --page-max: 1440px;
  --measure: 68ch;
  --nav-h: 64px; --nav-h-mobile: 56px;

  --r-0: 0px;      /* images, sections, buttons, inputs */
  --r-input: 2px;  /* only if a 0px input reads broken on a given browser */
  --r-chip: 999px; /* size chips only */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 120ms; --t-state: 200ms; --t-layout: 320ms; --t-drawer: 420ms;
  --t-crossfade: 450ms; --t-reveal: 1100ms; /* hero only */
}
::selection { background: var(--gold); color: var(--gold-ink); }
:root { caret-color: var(--gold); accent-color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Aliases for pages that still use the previous variable names. */
:root {
  --paper: var(--bg);
  --espresso: var(--bg-deep);
  --cream: var(--ink);
  --display: var(--font-display);
  --body: var(--font-body);
  --header-height: var(--nav-h);
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* The canvas (overscroll, iOS rubber-band, any frame of sticky lag) is the deepest surface: the
     flight engine's own stylesheet paints html cream otherwise (engine report 2026-10-01, #8). */
  background: var(--bg-deep);
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
  scrollbar-color: var(--muted) var(--bg);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 3. Type roles (SKILL.md section 3) as utility classes */
.display-1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8.5vw, 128px); line-height: 1; letter-spacing: -0.03em; max-width: 10ch; text-wrap: balance; }
.display-2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.025em; }
.heading   { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.02em; }
.subhead   { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.body      { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.6; letter-spacing: 0.005em; max-width: var(--measure); }
.small     { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.55; letter-spacing: 0; }
.label     { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; }
.price     { font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.4; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.muted     { color: var(--muted); }

/* 4. Layout helpers */
.page-width { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }

/* 5. Controls */
.text-link {
  display: inline-block;
  min-height: 44px;
  padding-block: 10px;
  font: 500 13px/1.4 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t-state) var(--ease-out), scale var(--t-press) var(--ease-out);
}
.text-link:active { scale: 0.97; }
.button-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-5);
  background: var(--gold); color: var(--gold-ink);
  border: 1px solid var(--gold); border-radius: var(--r-0);
  font: 500 15px/1 var(--font-body); letter-spacing: 0.01em;
  transition: background-color var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out), scale var(--t-press) var(--ease-out);
}
.button-primary:active { scale: 0.97; }
.button-primary:disabled, .button-primary[aria-busy="true"] { background: var(--panel); border-color: var(--line-strong); color: var(--muted); }
.field { display: grid; gap: var(--s-2); }
.field label { font: 500 13px/1.4 var(--font-body); letter-spacing: 0.02em; }
.field input {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--s-3);
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-0);
  font-size: 16px;
  transition: border-color var(--t-state) var(--ease-out);
}
.field input::placeholder { color: var(--ink-85); opacity: 0.6; }
.field input[aria-invalid="true"] { border-color: var(--gold); }

/* 6. Skip link */
.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--gold); color: var(--gold-ink);
  font: 500 13px/1.4 var(--font-body);
  translate: 0 calc(-100% - var(--s-5));
}
.skip-link:focus-visible { translate: 0 0; }

/* 7. Shell: fixed transparent nav. No bar and no blur (SKILL.md 4), so it
   leaves on scroll-down and returns on scroll-up (experience.js sets
   html.nav-hidden); it always returns while it holds focus. Nothing else
   changes: scroll-padding-top still assumes it.
   Left: flag mark + wordmark in the serif (client decision 2026-09-29, SKILL.md 0.3).
   Right: the five links and the gold "Join the club" button; on mobile the
   button shortens to "Join" and sits beside Menu. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  height: var(--nav-h);
  padding-inline: var(--gutter);
  font: 500 13px/1.4 var(--font-body); letter-spacing: 0.02em;
  color: var(--ink);
}
.nav__wordmark, .nav__links a, .nav__menu, .menu__close {
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav__wordmark {
  gap: var(--s-3);
  min-width: 0;
  font: 400 24px/1 var(--font-display); letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.nav__flag { width: 34px; height: auto; flex: none; }
.nav__name { overflow: hidden; text-overflow: ellipsis; }
.nav__links { display: flex; gap: var(--s-6); margin-left: auto; }
.nav__links a { color: var(--ink-85); transition: color var(--t-state) var(--ease-out); }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav__cta { min-height: 44px; padding-inline: var(--s-4); font-size: 13px; letter-spacing: 0.02em; }
.nav__cta-short { display: none; }
.nav-scrolled .nav { background: var(--bg-deep); }
@media (prefers-reduced-motion: no-preference) { html:not(.motion-paused) .nav { transition: translate var(--t-state) var(--ease-out), background-color var(--t-state) var(--ease-out); } }
.nav-hidden .nav { translate: 0 -100%; }
.nav-hidden .nav:focus-within { translate: none; }
.nav__links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav__menu { display: none; padding-inline: var(--s-2); }

/* Bag link (the Patriot Store, client decision 2026-09-29, SKILL.md 0.3): the
   word "Bag" and, once something is in it, the count ("Bag 2"). No pill, no
   badge circle; tabular numerals so the width holds as the count changes.
   A plain link to /bag/; cart.js opens the drawer instead. */
.nav__bag {
  /* inline-block, not flex: the space before the count must survive (a flex
     item drops leading white space) and sit inside the current-page underline. */
  display: inline-block; line-height: 44px; text-align: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--s-2);
  color: var(--ink-85); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: color var(--t-state) var(--ease-out);
}
/* The leading space in the markup separates the count; no margin, so the
   current-page underline runs unbroken under "Bag 2". */
.nav__bag[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* The cart icon before the word; the cart is the Shopify store's (2026-10-21). */
.nav__cart-icon { display: inline-block; vertical-align: -4px; margin-right: 6px; }
/* Phones (<= 479px): the 18px wordmark with its flag, Bag, Join and Menu need
   about 464px on one line (measured), so the show's name sets on two balanced
   lines ("The Brandon / Lehman Show") instead of being truncated. Same face,
   size and colour. */
@media (max-width: 479px) {
  .nav__wordmark { white-space: normal; }
  .nav__name { max-width: 6.6em; line-height: 1.05; text-wrap: balance; }
  .nav__bag { padding-inline: var(--s-1); }
  /* Icon only; the word stays for screen readers. */
  .nav__cart-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__cart-icon { margin-right: 0; }
}
/* Just above the menu breakpoint the Bag link costs the 24px wordmark ~23px
   (measured at 1025px); the five links close up from 32px to 24px there. */
@media (min-width: 1025px) and (max-width: 1099px) {
  .nav__links { gap: var(--s-5); }
}

/* Mobile menu: native popover, entry through @starting-style, opacity only.
   Modal while open: experience.js makes the page behind it inert and moves
   focus in and back; overscroll-behavior keeps wheel/touch from scrolling the page. */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: var(--nav-h-mobile) var(--gutter) var(--s-8);
  overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: var(--r-0);
  background: var(--bg-deep); color: var(--ink);
  display: none; flex-direction: column;
  opacity: 0;
  transition: opacity var(--t-layout) var(--ease-out), display var(--t-layout) allow-discrete, overlay var(--t-layout) allow-discrete;
}
.menu:popover-open, .menu.is-open { display: flex; opacity: 1; }
@starting-style { .menu:popover-open, .menu.is-open { opacity: 0; } }
.menu::backdrop { background: transparent; }
.menu__close { position: absolute; top: calc((var(--nav-h-mobile) - 44px) / 2); right: var(--gutter); font: 500 13px/1.4 var(--font-body); letter-spacing: 0.02em; color: var(--ink-85); padding-inline: var(--s-2); }
.menu__links { display: grid; gap: var(--s-2); margin-top: var(--s-7); }
.menu__links a { display: block; font: 400 32px/1.15 var(--font-display); letter-spacing: -0.02em; padding-block: var(--s-3); min-height: 48px; border-bottom: 1px solid var(--line); }
.menu__links a:last-child { border-bottom: 0; }
.menu__foot { margin-top: auto; font: 500 13px/1.4 var(--font-body); letter-spacing: 0.02em; color: var(--muted); }

/* Up to 1024px the five links move into the menu: the 24px serif wordmark, five
   links and the gold button need about 1000px (measured), so a tablet in either
   orientation gets the menu rather than a truncated name. */
@media (max-width: 1024px) {
  .nav { height: var(--nav-h-mobile); gap: var(--s-3); }
  .nav__wordmark { font-size: 18px; gap: var(--s-2); }
  .nav__flag { width: 26px; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; min-width: 44px; justify-content: center; padding-inline: var(--s-1); }
  .nav__actions { gap: var(--s-2); }
  .nav__cta { padding-inline: var(--s-2); min-width: 44px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  html { scroll-padding-top: calc(var(--nav-h-mobile) + var(--s-4)); }
}
/* Below 360px the name alone fills the space the flag would take; the name wins. */
@media (max-width: 360px) {
  .nav__flag { display: none; }
}

/* 8. Shell: one-line footer. Social links are text (client decision 2026-09-29), no icon row. */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-6);
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--s-6) var(--gutter) max(var(--s-6), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font: 500 13px/1.4 var(--font-body); letter-spacing: 0.02em; color: var(--muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer a, .footer button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); transition: color var(--t-state) var(--ease-out); }
/* "X" is the one link narrower than 44px: its box grows to 44px and gives the
   extra back in negative margin, so the visible spacing stays the row's 24px. */
.footer a[href^="https://x.com/"] { margin-inline: -17px; }
.footer button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
/* The toggle stays focusable when the device setting decides; its label says so. */
.footer button[aria-disabled="true"] { color: var(--muted); text-decoration: none; cursor: default; }

/* 9. Motion gates. Motion is authored opt-in elsewhere under no-preference; here
   only the session toggle (html.motion-paused) mirrors it. Keep opacity/colour.
   Anchors jump (no smooth scroll: an in-page jump must not glide through the flight). */
.motion-paused .text-link:active, .motion-paused .button-primary:active { scale: 1; }

/* 10. Hover only where a pointer can hover (rubric 16). */
@media (hover: hover) {
  .text-link:hover { text-decoration-color: currentColor; }
  .button-primary:hover { background: var(--ink); border-color: var(--ink); }
  .field input:hover { border-color: var(--ink-85); }
  .nav__links a:hover { color: var(--ink); }
  .nav__bag:hover { color: var(--ink); }
  .nav__wordmark:hover .nav__name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
  .footer a:hover, .footer button:not([aria-disabled="true"]):hover { color: var(--ink); }
}

/* 11. The welcome popup (experience.js): "Join the Patriot Club and receive 10% off the Patriot Store".
   Frosted glass (2026-10-12: "transparent background / translucent"): the page shows through, lightly dimmed
   and blurred, under an espresso tint dark enough that cream text keeps at least 4.5:1 even over a white
   product photo. A card centred on wide screens; on phones a sheet that slides up from the bottom edge. The
   gold kept for the club's name and the button. Type sized for an audience that is mostly 55+. */
html.club-pop-open { overflow: hidden; scrollbar-gutter: stable; }   /* the page behind keeps its width where scrollbars take space */
.club-pop {
  width: min(540px, calc(100% - 2 * var(--gutter))); max-width: none; max-height: calc(100dvh - 2 * var(--s-5));
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  background: rgba(36, 27, 20, .58); color: var(--ink);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(246, 240, 230, .2); border-radius: var(--r-0);
  box-shadow: inset 0 1px 0 rgba(246, 240, 230, .12), 0 40px 80px -30px rgba(8, 5, 3, .7);
  opacity: 0; translate: 0 16px;
  transition: opacity var(--t-layout) var(--ease-out), translate var(--t-drawer) var(--ease-drawer),
    display var(--t-drawer) allow-discrete, overlay var(--t-drawer) allow-discrete;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .club-pop { background: rgba(36, 27, 20, .94); }   /* no blur to lean on: nearly solid */
}
.club-pop[open] { opacity: 1; translate: 0 0; }
@starting-style { .club-pop[open] { opacity: 0; translate: 0 16px; } }
.club-pop::backdrop {
  background: rgba(12, 8, 5, 0);
  transition: background-color var(--t-layout) var(--ease-out), display var(--t-layout) allow-discrete, overlay var(--t-layout) allow-discrete;
}
.club-pop[open]::backdrop { background: rgba(12, 8, 5, .38); }
@starting-style { .club-pop[open]::backdrop { background: rgba(12, 8, 5, 0); } }
.club-pop__card { position: relative; padding: var(--s-7) var(--s-7) var(--s-5); text-align: center; }
.club-pop__close {
  position: absolute; top: var(--s-2); right: var(--s-2);
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--ink-85); transition: color var(--t-state) var(--ease-out), scale var(--t-press) var(--ease-out);
}
.club-pop__close:active { scale: 0.94; }
.club-pop__coin { width: 88px; height: 88px; margin: 0 auto var(--s-4); }
.club-pop__title { font: 400 clamp(34px, 4.4vw, 46px)/1.05 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; }
.club-pop__title em { font-style: italic; color: var(--gold); }
.club-pop__offer { margin-top: var(--s-3); font: 400 20px/1.45 var(--font-body); color: var(--ink-85); text-wrap: balance; }
.club-pop__offer strong { font-weight: 700; color: var(--ink); }
.club-pop__form { margin-top: var(--s-6); text-align: left; }
.club-pop__label { display: block; font: 500 15px/1.4 var(--font-body); letter-spacing: 0.01em; color: var(--ink-85); }
.club-pop__control { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.club-pop__control input {
  width: 100%; min-width: 0; min-height: 56px; padding: 0 var(--s-4);
  background: rgba(22, 16, 11, .6); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-0);
  font: 400 18px/1.2 var(--font-body);
}
.club-pop__control input::placeholder { color: var(--muted); }
.club-pop__control input:focus-visible { outline: none; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.club-pop__control input[aria-invalid="true"] { border-color: var(--gold); }
.club-pop__submit, .club-pop__back { width: 100%; min-height: 56px; font-size: 17px; }
.club-pop__status { min-height: 1.55em; margin-top: var(--s-2); color: var(--ink-85); }
.club-pop__fine { color: var(--ink-85); }
.club-pop__skip { margin-top: var(--s-1); color: var(--ink-85); font-size: 15px; }
.club-pop__card:focus, .club-pop__done:focus { outline: none; }
.club-pop__back { margin-top: var(--s-6); }
@media (hover: hover) {
  .club-pop__close:hover { color: var(--ink); }
  .club-pop__skip:hover { text-decoration-color: var(--ink-85); }
}
@media (max-width: 640px) {
  .club-pop {
    width: 100%; max-height: calc(100dvh - var(--s-6)); margin: auto 0 0;
    border-width: 1px 0 0; translate: 0 100%;
  }
  @starting-style { .club-pop[open] { opacity: 0; translate: 0 100%; } }   /* last: a later [open] rule would cancel it */
  .club-pop__card { padding: var(--s-6) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .club-pop__coin { width: 64px; height: 64px; margin-bottom: var(--s-3); }
  .club-pop__form { margin-top: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .club-pop, .club-pop::backdrop { transition: none; }
  .club-pop, .club-pop[open] { translate: none; }
}
.motion-paused .club-pop, .motion-paused .club-pop::backdrop { transition: none; }
.motion-paused .club-pop, .motion-paused .club-pop[open] { translate: none; }