/* ShaggyGreen Poker v2. Mobile-first, no build step.
   Blocks marked "Removable block" can be deleted together with their
   matching <section> in index.html (see README). */

/* ---------- Fonts (self-hosted, OFL) ----------
   font-display: optional: the preloaded web fonts are used only if they are ready for the
   first render, so text never re-wraps after it is on screen. Otherwise the page stays on
   the metric-matched local fallbacks below for that view. The fonts may be cached and used
   on a later view; nothing guarantees that they finish downloading or appear on the next one. */
@font-face { font-family: "Anton"; src: url("/fonts/anton-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-var-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: optional; }

/* Metric-matched local fallbacks, carried over from main (PR 4): Arial / Liberation Sans / Arimo first,
   then a Roboto set for Android. Latin ranges only, so symbols render from the normal font stack.
   The Montserrat faces cover both weight ranges of the variable font (400-600 and 700-800). */
@font-face { font-family:"Anton Fallback"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Arial"); font-weight:400; font-style:normal; size-adjust:67.3%; ascent-override:174.8%; descent-override:48.9%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Anton Fallback R"; src:local("Roboto Bold"),local("Roboto-Bold"); font-weight:400; font-style:normal; size-adjust:74.6%; ascent-override:157.7%; descent-override:44.1%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Montserrat Fallback"; src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Arimo-Regular"); font-weight:400 600; font-style:normal; size-adjust:113.31%; ascent-override:85.4%; descent-override:22.2%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Montserrat Fallback"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Arial"); font-weight:700 800; font-style:normal; size-adjust:111%; ascent-override:87.2%; descent-override:22.6%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Montserrat Fallback R"; src:local("Roboto"),local("Roboto-Regular"); font-weight:400 600; font-style:normal; size-adjust:113.3%; ascent-override:85.4%; descent-override:22.2%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Montserrat Fallback R"; src:local("Roboto Bold"),local("Roboto-Bold"); font-weight:700 800; font-style:normal; size-adjust:118.6%; ascent-override:81.6%; descent-override:21.2%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }

/* ---------- Tokens ---------- */
:root {
  --ink: #080a09;
  --ink-2: #111713;
  --line: #334037;
  --accent: #00a86b;        /* emerald: buttons, links, headline accents, focus */
  --emerald-deep: #04402c;  /* button hover, section tints */
  --bone: #fafaf5;
  --mute: #b8c1b8;
  --gold: #f0be3c;          /* small accents only */
  --charcoal: #2b2e2c;      /* merch section only: matches the store's product-photo background */

  --display: "Anton", "Anton Fallback", "Anton Fallback R", "Arial Narrow", sans-serif;
  --text: "Montserrat", "Montserrat Fallback", "Montserrat Fallback R", Arial, sans-serif;

  --gutter: 1.25rem;
  --header-h: 4rem;
  --secnav-h: 2.75rem; /* the "On this page" row under the bar */
  --section-y: clamp(4rem, 10vw, 8rem);
  --radius: 16px;
  --wrap: 76rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: #080a09;
  color: #fafaf5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Keep in-page jump targets (and anything focused) clear of the sticky header + section nav.
   This used to be html { scroll-padding-top }, which some engines and scripted scrolls
   (e.g. scrollIntoView in capture tools) ignore; scroll-margin-top on the target is honoured
   everywhere. Not combined with scroll-padding, so the offset is not applied twice. */
:root { --anchor-offset: calc(var(--header-h) + var(--secnav-h) + 1rem); }
main [id], main a, main button, main [tabindex], .site-footer a { scroll-margin-top: var(--anchor-offset); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  text-wrap: balance; /* no one-word last lines in headlines */
}
h1 { font-size: clamp(2.5rem, 1.6rem + 5vw, 5.75rem); }
h2 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); }
h3 { font-size: 1.125rem; font-weight: 800; line-height: 1.3; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.accent { color: var(--accent); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: 999px;
  background: var(--accent); color: var(--ink); font-weight: 800; text-decoration: none;
}
.skip:focus { top: .75rem; }

.eyebrow {
  display: flex; /* block-level, so its box does not change width with the font that is loaded */ align-items: center; gap: .5rem;
  color: var(--gold);
  font-size: .8125rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; }

.lede { color: var(--mute); max-width: 38rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.375rem;
  border: 2px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: var(--ink);
  font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--emerald-deep); color: var(--bone); }
.btn--ghost { background: transparent; color: var(--bone); }
.btn--ghost:hover { background: var(--emerald-deep); }
.btn svg, .text-link svg { width: 1em; height: 1em; flex: none; }
.text-link {
  display: inline-flex; align-items: center; gap: .375rem;
  color: var(--accent); font-weight: 800; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-block: .25rem;
}
.text-link:hover { color: var(--bone); }
.btn--small { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .9375rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(8 10 9 / .86);
  border-bottom: 1px solid rgb(51 64 55 / .7);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgb(8 10 9 / .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; min-height: 2.75rem; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand-name { font-family: var(--display); font-size: 1.375rem; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.brand-name span { color: var(--accent); }

.menu-toggle {
  display: none; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem .875rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--ink-2); color: var(--bone);
  font: 800 .875rem/1 var(--text); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle svg { width: 1.125rem; height: 1.125rem; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* No-JS default: links always visible, wrapping under the brand on small screens. */
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding-block: .25rem .5rem; }
.site-nav a {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem;
  font-size: .9375rem; font-weight: 700; text-decoration: none; color: var(--bone);
}
.site-nav a:hover { color: var(--accent); }
.site-nav svg { width: .875em; height: .875em; color: var(--accent); }

/* JS on, small screens: collapse into a menu panel that overlays the page (no layout shift). */
@media (max-width: 47.99em) { .footer-bar { flex-direction: column; } } /* the two lines always stack on phones; as a column they keep full-width boxes */
@media (max-width: 47.99em) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .5);
  }
  .js .site-header.is-open .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: .5rem 1rem; }
  .js .site-nav li + li { border-top: 1px solid var(--line); }
  .js .site-nav a { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
  /* Keep the brand and the menu button on one row at every phone width, with room to spare
     for the fallback fonts (otherwise the button wrapped under the brand at 320-360px). */
  .js .bar { flex-wrap: nowrap; gap: 0 .5rem; }
  .js .menu-toggle { flex: none; padding: .5rem .75rem; gap: .375rem; }
}
/* Narrow phones: icon-only menu button; the "Menu" label stays as its accessible name. */
@media (max-width: 23.99em) {
  .js .menu-toggle { width: 2.75rem; padding: 0; justify-content: center; }
  .js .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 21.24em) {
  .brand { gap: .5rem; }
  .brand-name { font-size: 1.25rem; }
  .eyebrow { letter-spacing: .12em; } /* the hero eyebrow had only 2px to spare on one line at 320px */
}
/* Section nav: a second, horizontally scrolling row of in-page links. */
.section-nav { border-top: 1px solid rgb(51 64 55 / .55); }
.section-nav ul {
  display: flex; gap: 0 1.25rem; min-height: var(--secnav-h); align-items: center;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
}
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav a {
  display: inline-flex; align-items: center; min-height: var(--secnav-h);
  color: var(--mute); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.section-nav a:hover { color: var(--bone); }
.section-nav a[aria-current="true"] { color: var(--bone); border-bottom-color: var(--accent); }
@media (min-width: 48em) {
  .bar { flex-wrap: nowrap; }
  .site-nav ul { gap: 1.75rem; padding: 0; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3rem); max-width: 44rem; }
.section-head p:not(.eyebrow) { color: var(--mute); }
.section--tint { background: linear-gradient(180deg, var(--ink) 0, var(--ink-2) 12%, var(--ink-2) 88%, var(--ink) 100%); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.25rem, 4vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem); overflow: clip; }
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-art { position: relative; justify-self: center; width: min(100%, 26rem); }
.hero-art::before {
  content: ""; position: absolute; inset: -18% -22%; z-index: -1;
  background: radial-gradient(closest-side, rgb(0 168 107 / .42), rgb(0 168 107 / .12) 55%, transparent 75%);
  pointer-events: none;
}
.hero-art img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 4%;
  border-radius: 20px; border: 1px solid var(--line);
  background: var(--emerald-deep);
}
.hero-copy { display: grid; gap: 1.125rem; justify-items: start; }
.hero-copy h1 { max-width: 6.9em; } /* ~14ch of Anton; em, not ch, so the measure does not change with the font that is loaded */
.hero-copy .actions { margin-top: .5rem; }
.hero-byline { display: grid; gap: .125rem; padding-left: .875rem; border-left: 3px solid var(--gold); }
.hero-byline-name { color: var(--bone); font-weight: 800; }
.hero-byline-place { color: var(--mute); font-size: .9375rem; font-weight: 600; }
.hero-copy .eyebrow { justify-self: stretch; } /* full-width box, so it does not resize with the font */
@media (min-width: 56.25em) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .hero-art { order: 2; width: min(100%, 34rem); }
  .hero-art img { aspect-ratio: 4 / 5; object-position: 50% 12%; }
  .hero-copy { gap: 1.5rem; }
}

/* ---------- Removable block: Lately on the gram (Instagram wall) ---------- */
/* Generated by scripts/build-instagram.mjs: the latest 6 results posts, newest first, no
   filters. Images are shown whole in a square frame with object-fit: contain, no crop or
   overlays. 2 across on phones (3 rows), 3 across from 56.25em (2 rows). */
.gram-wall {
  position: relative; /* containing block for the .visually-hidden labels inside the tiles */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none;
}
.gram-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.gram-tile:hover { border-color: var(--accent); }
.gram-tile:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.gram-media { margin: 0; aspect-ratio: 4 / 5; background: var(--ink); border-bottom: 1px solid var(--emerald-deep); }
.gram-media img { width: 100%; height: 100%; object-fit: contain; }
.gram-body { display: grid; align-content: start; gap: .375rem; padding: .75rem; }
.gram-meta { display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: var(--mute); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gram-tag { color: var(--accent); font-weight: 800; }
.gram-body h3 { font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.gram-body h3 a { text-decoration: none; }
.gram-body h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gram-body h3 a:focus-visible { outline: none; }
.result-facts { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; color: var(--gold); font-size: .875rem; font-weight: 800; }
.gram-more { margin-top: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.gram-more .btn { display: inline-flex; }
@media (min-width: 56.25em) {
  .gram-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .gram-body { padding: 1rem; gap: .5rem; }
  .gram-body h3 { font-size: 1.0625rem; }
  .result-facts { font-size: .9375rem; }
}
/* ---------- end Lately on the gram ---------- */

/* ---------- Removable block: From Screen to Felt ---------- */
.reel-row {
  position: relative; /* containing block for the .visually-hidden labels inside its cards (otherwise they widen the page on phones) */
  display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 15.5rem); gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding: .5rem var(--gutter) 1.25rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.reel-row > li { scroll-snap-align: start; }
.reel-card {
  display: grid; gap: .875rem; height: 100%;
  text-decoration: none; color: var(--bone);
  transition: transform .2s var(--ease);
}
.reel-cover {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-2);
}
.reel-cover img { width: 100%; height: 100%; object-fit: cover; }
.reel-play {
  position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--ink);
}
.reel-play svg { width: 1rem; height: 1rem; }
.reel-meta { display: grid; gap: .25rem; }
.reel-ep { color: var(--gold); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reel-title { font-weight: 800; line-height: 1.35; }
.reel-card--all .reel-cover {
  display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgb(0 168 107 / .35), transparent 70%), var(--ink-2);
}
.reel-card--all .reel-cover svg { width: 3rem; height: 3rem; color: var(--accent); }
.reel-card--all .display { font-size: 2rem; }
.reel-card:hover .reel-cover { border-color: var(--accent); }
@media (min-width: 56.25em) {
  .reel-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 17rem)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
/* ---------- end From Screen to Felt ---------- */

/* ---------- Removable block: Read (Substack) ---------- */
.post-list { display: grid; gap: 1rem; }
.post-card {
  position: relative; display: grid; align-content: start; gap: .75rem; height: 100%;
  padding: 1.5rem; border-radius: var(--radius);
  background: var(--ink-2); border: 1px solid var(--line);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card p { color: var(--mute); font-size: .9375rem; }
.post-card .post-tag { color: var(--accent); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.post-card:hover { border-color: var(--accent); }
.post-card:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.post-card h3 a:focus-visible { outline: none; }
.read-more { margin-top: 2rem; }
@media (min-width: 48em) { .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- end Read ---------- */

/* ---------- Removable block: Merch ---------- */
/* A charcoal band that matches the store's product-photo ground, so the merch reads as one piece with the shop.
   Hard edges with a light hairline make the change of ground read as deliberate, not as a gradient that didn't finish. */
.section--merch {
  background: var(--charcoal);
  box-shadow: inset 0 1px 0 rgb(250 250 245 / .10), inset 0 -1px 0 rgb(250 250 245 / .10);
}
.merch-grid { display: grid; gap: 2.5rem; align-items: center; }
.merch-art { position: relative; justify-self: center; width: min(78%, 22rem); }
.merch-copy { display: grid; gap: 1.25rem; justify-items: start; }
.merch-copy h2 { max-width: 7.9em; } /* ~16ch of Anton */
.merch-art img { width: 100%; height: auto; border-radius: var(--radius); }
.merch-detail { max-width: 34em; }
.merch-price { display: grid; gap: .25rem; }
.merch-price-amount { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--gold); }
.merch-price-note { color: var(--mute); font-size: .875rem; }
@media (min-width: 56.25em) {
  .merch-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .merch-art { width: min(100%, 26rem); }
}
/* ---------- end Merch ---------- */

/* ---------- Results and profiles, Substack invite ---------- */
.profiles { display: grid; gap: 1.5rem; }
.profiles .section-head { margin-bottom: 0; }
.invite { display: grid; gap: 1.25rem; justify-items: start; max-width: 44rem; }

/* ---------- About ---------- */
.about { display: grid; gap: 1.5rem; max-width: 52rem; }
.about-badge { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--accent); }
.about p { max-width: 43em; } /* ~65ch of Montserrat */
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.about-affiliate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.affiliate-note { color: var(--mute); font-size: .875rem; }
.stake-card { display: grid; gap: .5rem; justify-items: start; max-width: 26rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.stake-card-label { color: var(--gold); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stake-card-name { font-size: 1.125rem; font-weight: 800; }
.stake-card-handle { color: var(--mute); font-weight: 600; }
@media (min-width: 48em) { .about { grid-template-columns: auto 1fr; column-gap: 2rem; } .about-badge { grid-row: span 4; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--ink-2); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-line { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); max-width: 8.9em; color: var(--accent); }
.socials { display: flex; gap: .75rem; }
.socials a {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--bone); background: var(--ink);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.socials a:hover { color: var(--accent); border-color: var(--accent); }
.socials svg { width: 1.25rem; height: 1.25rem; }
.footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--mute); font-size: .875rem; }
.footer-motto { color: var(--gold); font-weight: 800; letter-spacing: .04em; }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- 404 ---------- */
.notfound { display: grid; gap: 1.25rem; justify-items: center; text-align: center; padding-block: clamp(3rem, 10svh, 7rem); }
.notfound img { width: 200px; }
.notfound h1 { justify-self: stretch; /* full-width box; centred by text-align, so it does not resize with the font */ font-size: clamp(4rem, 2rem + 10vw, 8rem); color: var(--accent); }
.notfound .lede { margin-inline: auto; }

/* ---------- Motion (JS adds .motion only when IntersectionObserver exists and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .28s var(--ease), transform .28s var(--ease); }
  .motion .reveal.is-in { opacity: 1; transform: none; }
  .reel-card:hover, .post-card:hover, .gram-tile:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* BEGIN generated article styles */
.story{max-width:52rem;padding-top:clamp(3rem,7vw,6rem);padding-bottom:5rem}.story-head{margin-bottom:2rem}.story h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.08}.story .lede{margin-top:1.5rem}.story-meta{color:var(--mute);font-size:.95rem;margin-top:1.2rem}.story figure{margin:2rem 0}.story img{max-width:100%;height:auto;border-radius:.5rem}.story-body{font-size:1.1rem;line-height:1.85}.story-body p,.story-body ul,.story-body ol,.story-body blockquote,.story-body pre{margin:1.4rem 0}.story-body h2,.story-body h3{margin:2.8rem 0 1rem;text-transform:none;font-family:var(--text);font-weight:800;line-height:1.3}.story-body h2{font-size:1.7rem}.story-body h3{font-size:1.3rem}.story-body a{text-decoration:underline;text-underline-offset:.2em}.story-body ul{list-style:disc;padding-left:1.5rem}.story-body ol{list-style:decimal;padding-left:1.5rem}.story-body blockquote{border-left:3px solid var(--accent);padding-left:1.4rem;color:var(--mute)}.story-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}.story-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}.story-body th,.story-body td{border:1px solid var(--line);padding:.6rem;text-align:left}.story-body pre{overflow:auto;padding:1rem;background:var(--ink-2)}.story-next{margin-top:4rem;padding:2rem;background:var(--ink-2);border:1px solid var(--line);border-radius:1rem}.story-next h2{font-size:2rem}.story-next p{margin:1rem 0}.story-index{display:grid;gap:2rem}.story-index li{padding:2rem;border:1px solid var(--line);border-radius:1rem}.story-index h2{font-size:2rem;margin:.7rem 0}.story-preview{padding:1rem;border:1px solid var(--gold);margin-top:1rem}

/* END generated article styles */