/* ==========================================================================
   OneManOnly — shared stylesheet (CLAUDE.md §7)
   "Kitchen Table" in the "Honey & Walnut" palette, "Bookish" type:
   paper cards on a warm oak table, light by default, an "evening kitchen"
   dark theme via <html data-theme="dark"> (set by the inline head snippet
   before first paint and by the toggle in main.js).
   Components use ONLY the tokens in §1, so both themes follow automatically.
   The class structure follows DabPop's (simplecodeworker/dbpp), via MetaRoles.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Honey & Walnut, day */
  --paper: #F7EEDC;        /* page ground: the table */
  --surface: #FFFBF2;      /* paper cards, the letter, tables, inputs (--card in §7) */
  --surface-2: #F3E6CC;    /* table heads, toolbars, hovers */
  --ink: #2B2014;          /* headings, figures, names */
  --body: #483A29;         /* long-form copy */
  --muted: #6B5A45;        /* captions, meta, "as of" lines */
  --rule: #E2D2B4;         /* borders, table rules, card edges */
  --accent: #865409;       /* honey: links, step numbers, recipe stripe, buttons */
  --accent2: #6B3D25;      /* walnut: second colour ("done for you", Filed, second chart series) */
  --on-accent: #FFFFFF;    /* text on --accent */
  --on-accent2: #FFFFFF;   /* text on --accent2 */
  --tint: #F6E3B9;         /* chips, tags, AI step chips, plan chips */
  --hl: #FBF1DA;           /* the #1 row of a ranking table, :target */
  --cat-bg: #FFFBF2;       /* category badge on images */
  --cat-fg: #2B2014;
  --badge-bg: #2B2014;     /* count badge on images */
  --badge-fg: #FFFBF2;
  --img: #EFE2C6;          /* placeholder block behind a missing image */
  --img-ink: #2B2014;      /* icon on --img */
  --band: #3A2A1A;         /* walnut band: categories list, footer */
  --band-text: #FFF7E8;
  --band-muted: #E0CBAA;
  --band-accent: #F2B84E;
  --band-rule: rgba(255, 247, 232, .16);
  --focus: #865409;
  --shadow: 0 1px 0 var(--rule), 0 10px 22px rgba(58, 42, 26, .08);
  --shadow-up: 0 1px 0 var(--rule), 0 16px 30px rgba(58, 42, 26, .13);
  /* the oak grain under everything (very faint vertical boards) */
  --grain: repeating-linear-gradient(90deg, rgba(134, 84, 9, .05) 0 2px, transparent 2px 150px);

  --r: 8px;                /* cards, panels, tables */
  --r-sm: 6px;             /* inputs, buttons, media */
  --r-pill: 999px;         /* chips, labels */

  --f-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --f-hand: 'Patrick Hand', 'Comic Neue', cursive; /* greetings and margin tips only, never facts */

  --h1: 50px;
  --h2: 32px;
  --ct: 22px;
  --bar-h: 66px;           /* sticky top bar height, for scroll-padding */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Honey & Walnut, evening kitchen */
  --paper: #19130B;
  --surface: #241C12;
  --surface-2: #2C2317;
  --ink: #F6ECDA;
  --body: #DED1BA;
  --muted: #AC9C82;
  --rule: #3B2F20;
  --accent: #F2B84E;
  --accent2: #D89E78;
  --on-accent: #19130B;    /* never white on the lamp-lit honey */
  --on-accent2: #19130B;
  --tint: #3A2C15;
  --hl: #2E2416;
  --cat-bg: #241C12;
  --cat-fg: #F6ECDA;
  --badge-bg: #F6ECDA;
  --badge-fg: #19130B;
  --img: #2A2116;
  --img-ink: #F6ECDA;
  --band: #110C06;
  --band-text: #F6ECDA;
  --band-muted: #B9A88C;
  --band-accent: #F2B84E;
  --band-rule: rgba(246, 236, 218, .12);
  --focus: #F2B84E;
  --shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .35);
  --shadow-up: 0 1px 0 rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .45);
  --grain: repeating-linear-gradient(90deg, rgba(242, 184, 78, .03) 0 2px, transparent 2px 150px);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--paper); background-image: var(--grain); color: var(--ink);
  font-family: var(--f-body); font-size: 18px; line-height: 1.65;
}
/* width: 100% stops a narrow page (About, Terms) from shrinking to its text and floating off-centre */
body > main { flex: 1 0 auto; width: 100%; }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; font-optical-sizing: auto; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px;
  font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: 12px; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums lining-nums; }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: 0; }
.kicker, .label {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.kicker { color: var(--accent); }
.label { color: var(--muted); }

/* 3. Layout ---------------------------------------------------------------- */
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
main { display: block; }

/* 4. Top bar (sticky) + wordmark ------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  box-shadow: 0 6px 18px rgba(58, 42, 26, .05);
}
.topbar-in { display: flex; align-items: center; gap: 12px 24px; min-height: var(--bar-h); }
.mini-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
/* W1 "Mug Ring": a dashed honey ring around a Newsreader "1", then the name (CLAUDE.md §7).
   <svg class="mark" viewBox="0 0 64 64" aria-hidden="true"><circle class="mark-ring" …/><path class="mark-one" …/></svg> */
.mark { width: 36px; height: 36px; flex: none; }
.mark-ring { fill: none; stroke: var(--accent); }
.mark-one { fill: var(--ink); }
.wordmark { font-family: var(--f-display); font-weight: 600; font-size: 25px; line-height: 1; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.topbar-tag { font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--muted); white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--rule); }
.mast-panel { display: flex; flex: 1; align-items: center; gap: 8px 20px; order: 2; }
.topbar-in > .theme-toggle { order: 3; }
.topbar-in > .nav-toggle { order: 4; }
.util-nav { display: flex; flex-wrap: nowrap; margin-left: auto; white-space: nowrap; }
.util-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 16px; font-weight: 600; text-decoration: none; color: var(--body);
}
.util-nav a:hover, .util-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mast-tools { display: flex; align-items: center; gap: 10px; }
.mast-tools form { display: flex; margin: 0; }

.search {
  display: flex; align-items: center; gap: 8px; height: 44px; min-width: 220px; padding: 0 12px;
  color: var(--muted); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.search .ico { width: 16px; height: 16px; }
.search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink);
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }

.theme-toggle, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); cursor: pointer;
}
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--accent); }
.theme-toggle .ico { width: 16px; height: 16px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
html:not(.js) .theme-toggle { display: none; }
.nav-toggle { display: none; padding: 0; }

/* 5. Masthead + category strip (index + category pages) -------------------- */
.masthead { padding: 30px 0 0; }
.masthead h1, .masthead .mast-title { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; }
.mast-tag { max-width: 66ch; margin-top: 8px; font-size: 18px; color: var(--muted); }
.cat-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 4px; }
.cat-strip .chip { background: var(--surface); }
.cat-strip .chip.is-active, .cat-strip .chip[aria-current="page"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* Chips (category strip, post tags, tag cloud) */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--body); background: transparent; border: 1px solid var(--rule); border-radius: var(--r-pill);
}
.chip:hover { color: var(--ink); border-color: var(--accent); }
.chip.is-active, .chip[aria-current="page"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.chip-n { font-family: var(--f-mono); font-size: 12px; opacity: .8; }

/* Pillar chip (Tools / Economics / Cases) on every post, and plan-price chips (CLAUDE.md §7) */
.pillar {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px;
  font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none;
  color: var(--ink); background: var(--tint); border-radius: var(--r-pill);
}
a.pillar:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-chip {
  display: inline-flex; align-items: center; padding: 3px 10px;
  font-family: var(--f-mono); font-size: 14px; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--tint); border: 1px solid var(--tint); border-radius: var(--r-sm);
}
.plan-chip.is-free { background: transparent; border-color: var(--rule); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.post-meta .meta-txt { font-size: 15px; font-weight: 600; color: var(--muted); }

/* 6. Homepage: the letter, and the hero (latest post) ---------------------- */
/* The letter card: "Dear founder, sit down, have a coffee…" (CLAUDE.md §7) */
.letter {
  position: relative; max-width: 760px; padding: 28px 32px 26px;
  color: var(--body); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
}
.letter-greet { display: block; font-family: var(--f-hand); font-size: 28px; line-height: 1.2; color: var(--accent); }
.letter h1, .letter h2, .letter .letter-t { margin: 4px 0 10px; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; color: var(--ink); }
.letter p + p { margin-top: 10px; }
.letter-sign { display: block; margin-top: 14px; font-family: var(--f-hand); font-size: 22px; color: var(--accent); }
/* A faint mug ring on the corner of the letter */
.letter::after {
  content: ""; position: absolute; right: -20px; top: -30px; width: 120px; height: 120px; border-radius: 50%;
  border: 8px solid var(--accent); opacity: .14; pointer-events: none;
}
.home-intro { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 28px; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 28px;
  padding: 28px 0 8px;
}
.hero-media { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-media .media { flex: 1; min-height: 320px; border-radius: var(--r); box-shadow: var(--shadow); }
.hero-copy {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 34px 34px 30px; overflow: hidden;
  color: var(--body); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
}
/* recipe-card stripe across the top of the hero card */
.hero-copy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--accent); }
.hero-eyebrow, .hero-cat { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hero-cat { align-self: flex-start; text-decoration: none; }
.hero-cat:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-t { font-size: clamp(32px, 3.6vw, var(--h1)); line-height: 1.08; color: var(--ink); }
.hero-t a { text-decoration: none; }
.hero-t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.hero-blurb { font-size: 19px; line-height: 1.6; color: var(--body); }
.stat-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none;
}
.stat-list li {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.stat-list li > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat-list .val { font-family: var(--f-mono); font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.hero-cta { align-self: flex-start; margin-top: auto; }

/* 7. Media boxes (hero, cards, post lead) ---------------------------------- */
.media, .card-img, .post-lead {
  position: relative; display: grid; place-items: center; overflow: hidden;
  color: var(--img-ink); background: var(--img);
}
.media { aspect-ratio: 4 / 3; }
/* A drawn chart or diagram sizes to its content instead of being cropped to 4:3 */
.media.is-diagram { aspect-ratio: auto; padding: 24px; }
a.media { text-decoration: none; }
.media img, .card-img img, .post-lead img, .media svg.chart-svg { width: 100%; height: 100%; object-fit: cover; }
/* YouTube's hqdefault thumbnails are 4:3 with the 16:9 picture letterboxed: zoom past the bars */
.media img[src*="img.youtube.com/"], .card-img img[src*="img.youtube.com/"] { transform: scale(1.34); }
.media .ico { width: 120px; height: 120px; stroke-width: 1; }
.badge {
  position: absolute; top: 10px; z-index: 1; padding: 5px 11px; line-height: 1.25;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; border-radius: var(--r-pill);
}
.badge-cat { left: 10px; max-width: calc(100% - 110px); color: var(--cat-fg); background: var(--cat-bg); overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(58, 42, 26, .12); }
.badge-n { right: 10px; color: var(--badge-fg); background: var(--badge-bg); font-family: var(--f-mono); font-weight: 600; letter-spacing: 0; }
.caption, .post-lead-caption { font-size: 15px; text-align: center; color: var(--muted); }

/* 8. Buttons + links ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  font-family: var(--f-body); font-size: 16px; font-weight: 700;
  color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
/* Primary: honey. Light: white text (6.4:1); dark: near-black --on-accent (10.3:1) */
.btn-primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }
.link, .cta-link {
  font-weight: 700; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.link:hover, .cta-link:hover { color: var(--ink); }
.cta-link { font-size: 16px; }

/* 9. Section heads + card grid --------------------------------------------- */
.section { padding-top: 44px; padding-bottom: 8px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sec-head h2 { font-size: var(--h2); line-height: 1.12; }
.sec-head a { font-size: 15px; font-weight: 700; color: var(--accent); text-decoration: none; }
.sec-head a:hover { text-decoration: underline; text-underline-offset: 4px; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  color: var(--ink); text-decoration: none; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.card-img { aspect-ratio: 4 / 3; }
.card-img .ico { width: 84px; height: 84px; stroke-width: 1.1; }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.card-t { font-size: var(--ct); line-height: 1.2; }
.card-blurb { font-size: 16px; line-height: 1.55; color: var(--body); }
.card-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: auto; padding-top: 8px;
  font-size: 14px; color: var(--muted); border-top: 1px solid var(--rule);
}
.card-meta time { font-family: var(--f-mono); font-size: 13px; }
.card-cta { font-weight: 700; color: var(--accent); }
.card:hover .card-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.more { display: flex; justify-content: center; padding: 40px 0 24px; }
.empty-note { grid-column: 1 / -1; padding: 28px; font-size: 18px; color: var(--muted); background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r); }

/* 10. Walnut band: categories list + footer -------------------------------- */
.band { margin-top: 64px; color: var(--band-text); background: var(--band); }
.band-in { padding-top: 44px; padding-bottom: 48px; }
.band h2 { margin-bottom: 22px; font-size: 30px; }
.band-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.band-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; padding: 14px 0;
  color: var(--band-text); text-decoration: none; border-top: 1px solid var(--band-rule);
}
.band-list .n { font-family: var(--f-display); font-size: 20px; color: var(--band-accent); }
.band-list .t { font-size: 19px; font-weight: 700; }
.band-list .d { flex-basis: 100%; font-size: 15px; color: var(--band-muted); }
.band-list a:hover .t { text-decoration: underline; text-decoration-color: var(--band-accent); text-underline-offset: 4px; }

.foot { margin-top: 64px; color: var(--band-text); background: var(--band); }
.band + .foot { margin-top: 0; border-top: 1px solid var(--band-rule); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 30px; padding-bottom: 26px; }
.foot-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.foot .wordmark { color: var(--band-text); }
.foot .mark-ring { stroke: var(--band-accent); }
.foot .mark-one { fill: var(--band-text); }
.foot-tag { margin-top: 6px; font-size: 16px; color: var(--band-muted); }
.foot-tag em { font-family: var(--f-display); font-size: 17px; color: var(--band-text); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.foot-links a, .foot .link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--band-text); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.foot-links a:hover, .foot .link-btn:hover { text-decoration: underline; text-decoration-color: var(--band-accent); text-underline-offset: 4px; }
.foot-fine { padding-bottom: 28px; font-size: 14px; color: var(--band-muted); }

/* 11. Page heads (category, tags, search, about, hubs…) -------------------- */
.page-head { padding: 38px 0 8px; }
.page-head h1 { max-width: 24ch; font-size: calc(var(--h1) * .88); line-height: 1.08; }
.page-head p.lede { max-width: 62ch; margin-top: 12px; font-size: 19px; color: var(--body); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* 12. Post page ------------------------------------------------------------ */
.post { padding-top: 34px; padding-bottom: 24px; }
.post-head { max-width: 900px; }
.post-head .hero-cat, .profile-head .hero-cat { display: inline-block; color: var(--accent); }
.post-h1 { max-width: 24ch; margin: 10px 0 12px; font-size: clamp(34px, 4.4vw, var(--h1)); line-height: 1.08; }
.post-blurb { max-width: 62ch; font-size: 20px; line-height: 1.6; color: var(--body); }
.post-checked { margin-top: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.post-lead-fig { margin: 28px 0 36px; }
.post-lead { aspect-ratio: 21 / 9; border-radius: var(--r); box-shadow: var(--shadow); }
/* A chart or diagram lead sizes to its content instead of filling a fixed 21:9 box */
.post-lead:has(.chart), .post-lead:has(.diagram) { aspect-ratio: auto; display: block; }
.post-lead .ico { width: 150px; height: 150px; stroke-width: .9; }
.post-lead-caption { margin-top: 10px; }
.post-lead-caption em { font-style: italic; }

/* "As of" line: directly above or below every table (CLAUDE.md §1, §7) */
.asof { display: flex; align-items: flex-start; gap: 8px; font-family: var(--f-mono); font-size: 13px; line-height: 1.5; color: var(--muted); }
.asof .ico { width: 15px; height: 15px; margin-top: 2px; }
.asof strong { color: var(--ink); font-weight: 600; }

/* Data table (table.js). The plain data table is the default; .dt-ranking adds
   the Rank column, the #1 tint and in-row bars, and is ONLY for ranked-data posts. */
.dt { margin: 0; overflow: hidden; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.dt::before { content: ""; display: block; height: 5px; background: var(--accent); }
.dt > .asof { padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.dt-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.dt-tools .search { flex: 0 1 320px; min-width: 240px; background: var(--surface); }
.dt-filter-toggle { display: none; }
.dt-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.dt-field { display: flex; flex-direction: column; gap: 4px; }
.dt-field .label { font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--ink); }
.dt-field select {
  height: 44px; min-width: 170px; padding: 0 36px 0 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A08A6A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--rule); border-radius: var(--r-sm); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.dt-field select:focus-visible { border-color: var(--focus); }
.dt-clear { min-height: 44px; padding: 0 18px; color: var(--accent); background: transparent; }
.dt-count { margin-left: auto; align-self: center; font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
/* Long tables scroll inside their box on desktop so the header stays pinned; phones use the 5-row peek instead */
.dt-scroll { overflow-x: auto; }
@media (min-width: 721px) { .dt-scroll { max-height: 80vh; overflow-y: auto; } }
.dt-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 16px; font-variant-numeric: tabular-nums lining-nums; }
.dt-table caption { text-align: left; }
.dt-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 11px 14px; text-align: left; white-space: nowrap; vertical-align: bottom;
  font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border-bottom: 1px solid var(--rule);
}
.dt-table th .u { font-weight: 400; color: var(--muted); }
.dt-table td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--rule); color: var(--body); }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table tbody tr:hover td { background: var(--hl); }
.dt-table .r, .dt-table th.r { text-align: right; }
.dt-table td.num { font-size: 15px; white-space: nowrap; color: var(--ink); }
.dt-table td.unit { font-size: 14px; color: var(--muted); white-space: nowrap; }
.dt-table td.name { min-width: 160px; font-weight: 700; color: var(--ink); }
.dt-table td.name a { text-decoration: none; }
.dt-table td.name a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.dt-table td.name .sub { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.dt-table sup.fn a { font-weight: 400; }
/* Ranking table only */
.dt-ranking td.rank { width: 56px; font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.dt-ranking tr.is-top td { background: var(--hl); }
.dt-ranking tr.is-top td.rank { color: var(--accent); }
.dt-ranking td.dt-bar { width: 20%; min-width: 110px; }
.dt-bar .bar { display: block; height: 8px; width: var(--w, 0%); background: var(--accent); opacity: .85; border-radius: 4px; }
.dt-sort {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: transparent; border: 0; cursor: pointer;
}
.dt-sort:hover { color: var(--accent); }
.dt-sort .arr { font-size: 12px; opacity: .55; }
th[aria-sort="ascending"] .dt-sort, th[aria-sort="descending"] .dt-sort { color: var(--accent); }
th[aria-sort="ascending"] .dt-sort .arr, th[aria-sort="descending"] .dt-sort .arr { opacity: 1; }
.dt-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.dt-table tbody tr.dt-clip { display: none; }
.dt-more { display: flex; justify-content: center; padding: 14px 16px; border-top: 1px solid var(--rule); }
.dt-more-btn { width: 100%; max-width: 420px; min-height: 46px; color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.table-note { max-width: 80ch; margin-top: 12px; font-size: 16px; color: var(--muted); }

/* "Done for you" pill (the money-and-admin-side-by-side column): yes = tinted, no = plain */
.pill-yes, .pill-no {
  display: inline-flex; align-items: center; padding: 2px 10px;
  font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; border-radius: var(--r-pill);
}
.pill-yes { color: var(--ink); background: var(--tint); }
.pill-no { color: var(--muted); background: transparent; border: 1px solid var(--rule); font-weight: 600; }

/* Figure labels (CLAUDE.md §1, §7): shape carries the meaning, so it reads in greyscale.
   Solid = independently checked (Verified, Filed), and only these rank.
   Dashed = someone's own claim (Founder-stated, Vendor-stated).
   <span class="flabel flabel-verified"><svg class="ico" aria-hidden="true"><use href="/assets/img/icons.svg#i-verified"></use></svg>Verified</span> */
.flabel {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 7px;
  font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
}
.flabel .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.flabel-verified { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.flabel-filed { color: var(--on-accent2); background: var(--accent2); border-color: var(--accent2); }
.flabel-founder, .flabel-vendor { color: var(--ink); background: transparent; border-style: dashed; border-color: var(--muted); }
.flabel-founder .ico, .flabel-vendor .ico { stroke-width: 2; }

/* Recipe card: the workflow strip (CLAUDE.md §7). Numbered steps, who does each
   (tool / AI / you), minutes and cost per step, prep time and hours saved in the header.
   <section class="recipe"><div class="recipe-head"><span class="kicker">Recipe · AI Workflows</span><span class="recipe-meta">Prep 20 min · Saves 3 h/week</span></div>
   <h3 class="recipe-t">…</h3><ol class="steps"><li class="step"><span class="step-n">1</span><span class="step-t">…</span><span class="who who-tool">Tool</span><span class="step-cost">2 min · $0</span></li>…</ol></section> */
.recipe { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.recipe::before { content: ""; display: block; height: 6px; background: var(--accent); }
.recipe-in { padding: 20px 24px 22px; }
.recipe-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.recipe-meta { font-family: var(--f-mono); font-size: 14px; color: var(--muted); }
.recipe-t { margin: 6px 0 12px; font-size: 25px; line-height: 1.2; color: var(--ink); }
.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.step-n { font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--accent); }
.step-t { color: var(--ink); }
.step-t .sub { display: block; font-size: 15px; color: var(--muted); }
.step-cost { min-width: 96px; font-family: var(--f-mono); font-size: 14px; text-align: right; color: var(--muted); white-space: nowrap; }
.who {
  display: inline-flex; align-items: center; padding: 1px 10px;
  font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-pill);
}
.who-tool { color: var(--ink); background: transparent; border-color: var(--rule); }
.who-ai { color: var(--ink); background: var(--tint); border-color: var(--tint); }
.who-you { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.recipe .tip { margin-top: 10px; }

/* Handwritten margin tip (Patrick Hand): short, never a fact or a figure */
.tip { display: block; font-family: var(--f-hand); font-size: 21px; line-height: 1.3; color: var(--accent); }
.tip::before { content: "↳ "; }

/* Chart (lead image drawn from the post's own data) and diagram */
.chart { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 100%; padding: 24px 26px; background: var(--surface); color: var(--ink); text-align: left; }
.chart-title { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.25; }
/* One shared grid for every row, so all bars start at the same line and their lengths compare */
.chart-rows { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr) max-content; align-items: center; gap: 12px 12px; }
.chart-row { display: contents; }
.chart-label { font-size: 16px; font-weight: 600; color: var(--ink); }
.chart-val { font-family: var(--f-mono); font-size: 15px; color: var(--ink); text-align: right; }
.chart-bar { height: 22px; width: var(--w, 0%); background: var(--accent); border-radius: 4px; }
.chart-bar.is-alt { background: var(--accent2); }
.chart-note { font-family: var(--f-mono); font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 8px; }
/* Diagram: boxes and arrows (e.g. customer → merchant of record → you) */
.diagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; width: 100%; padding: 24px; background: var(--surface); }
.dg-box {
  padding: 10px 14px; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.dg-box .sub { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.dg-box.is-key { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dg-box.is-key .sub { color: var(--on-accent); }
.dg-box.is-you { border: 2px solid var(--accent); }
.dg-arrow { font-family: var(--f-mono); font-size: 13px; text-align: center; color: var(--muted); }

/* Narrative */
.narrative { margin-top: 56px; }
.narrative > h2, .sources h2, .appears h2, .facts h2 { margin-bottom: 20px; font-size: var(--h2); }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; padding: 28px 0; border-top: 1px solid var(--rule); }
.entry-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.entry-rank { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; color: var(--accent); }
.entry h3 { font-size: calc(var(--h2) * .84); line-height: 1.15; }
.entry-val { margin-left: auto; font-family: var(--f-mono); font-size: 18px; font-weight: 600; color: var(--ink); }
.entry-body { max-width: 62ch; color: var(--body); }
.entry-body p + p { margin-top: 12px; }
.entry-body:last-child { grid-column: 1 / -1; max-width: 72ch; }
.prose-sec { padding: 28px 0; border-top: 1px solid var(--rule); }
.prose-sec h3 { margin-bottom: 12px; font-size: 26px; }
.prose-sec h3 em, .prose-sec h3.is-italic { font-weight: 500; font-style: italic; }
.prose-sec p + p, .prose-sec .entry-body + .entry-body { margin-top: 12px; }
.prose-sec > p, .prose-sec > ul, .prose-sec > ol { max-width: 68ch; color: var(--body); }
.prose-sec .embed, .prose-sec .recipe { max-width: 860px; margin-top: 20px; }
/* Footnote markers: <sup class="fn"><a href="#src-1" id="r1-1">1</a></sup> */
.fn a { padding: 0 2px; font-size: .78em; font-weight: 700; color: var(--accent); text-decoration: none; vertical-align: super; line-height: 0; }
.fn a:hover { text-decoration: underline; }
.term { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.term:hover { color: var(--accent); }
.embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--img); border-radius: var(--r-sm); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-facade { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: var(--img); cursor: pointer; }
.embed-facade img { width: 100%; height: 100%; object-fit: cover; }
.play-btn {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(43, 32, 20, .62); border: 1.5px solid #FFF7E8; transition: background-color .2s;
}
.play-btn svg { width: 28px; height: 28px; margin-left: 4px; fill: #FFF7E8; }
.embed-facade:hover .play-btn, .embed-facade:focus-visible .play-btn { background: #865409; border-color: #865409; }
.entry-img { overflow: hidden; border-radius: var(--r-sm); }
.entry-img img { width: 100%; }

/* "Latest" headlines (data/news.json via sync-cards.py; main.js hides expired items) */
.latest { padding-top: 32px; }
.latest .sec-head { margin-bottom: 10px; }
.latest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; margin: 0; padding: 14px 22px; list-style: none; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.latest-item { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; padding: 10px 0 10px 14px; border-left: 3px solid var(--rule); }
.latest-list > .latest-item:first-child { border-left-color: var(--accent); }
.latest-date { padding-top: 2px; font-family: var(--f-mono); font-size: 13px; white-space: nowrap; color: var(--muted); }
.latest-text { margin: 0; color: var(--ink); }
.latest-src { font-size: 14px; color: var(--muted); }
.latest-links { margin: 6px 0 0; font-size: 15px; }
.latest-links .link { display: inline; }
.latest-links .link + .link { margin-left: 14px; }
.latest-box { max-width: 72ch; margin: 22px 0 0; }
.latest-box .latest-list { grid-template-columns: minmax(0, 1fr); }
.latest-box .label { display: block; margin-bottom: 8px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0; }
.sources { padding-top: 28px; border-top: 1px solid var(--rule); }
.sources ol { display: grid; gap: 8px; margin: 0; padding-left: 22px; font-size: 15px; color: var(--muted); }
.sources a { color: var(--accent); overflow-wrap: anywhere; }
.sources .fn-back { margin-left: 6px; text-decoration: none; }
.sources li:target { color: var(--ink); background: var(--hl); border-radius: 4px; }

/* 13. Profile hubs --------------------------------------------------------- */
.profile-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px 44px; align-items: start; padding: 38px 0 12px; }
.profile-type { color: var(--accent); }
.profile-name { margin-top: 10px; font-size: clamp(40px, 5.4vw, 66px); line-height: 1.04; }
.profile-intro { max-width: 66ch; margin-top: 22px; font-size: 19px; line-height: 1.7; color: var(--body); }
.profile-intro p + p { margin-top: 14px; }
.facts { margin-top: 48px; }
.facts-table { width: 100%; max-width: 760px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.facts-table th, .facts-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: 0; }
.facts-table th { width: 34%; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--surface-2); }
.facts-table td { color: var(--body); overflow-wrap: anywhere; }
/* Plan chips may wrap inside a narrow facts cell rather than push the table wider */
.facts-table .plan-chip { white-space: normal; }
.appears { margin-top: 56px; }
.appears-list { margin: 0; padding: 0 22px; list-style: none; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.appears-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.appears-list li:last-child { border-bottom: 0; }
.appears-list .pos { min-width: 3.2em; font-family: var(--f-mono); font-size: 16px; font-weight: 600; color: var(--accent); }
.appears-list a { flex: 1 1 320px; font-family: var(--f-display); font-size: 20px; font-weight: 600; text-decoration: none; }
.appears-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.appears-list .meta { font-size: 14px; color: var(--muted); }
.related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.type-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 8px; }
.type-filter button.chip { cursor: pointer; font-family: var(--f-body); }
.az { columns: 3 260px; column-gap: 40px; margin: 24px 0 0; padding: 0; list-style: none; }
.az li { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--rule); }
.az a { font-size: 19px; font-weight: 700; text-decoration: none; }
.az a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.az .meta { display: block; font-size: 14px; color: var(--muted); }
.az-letter { break-after: avoid; padding-top: 18px; font-family: var(--f-display); font-size: 30px; font-weight: 600; color: var(--accent); border: 0 !important; }

/* 14. Glossary, category tiles, search, prose, 404 ------------------------- */
.glossary { margin: 24px 0 0; max-width: 820px; }
.glossary dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--f-display); font-size: 24px; font-weight: 600; }
.glossary dt .abbr { font-family: var(--f-body); font-size: 17px; font-weight: 400; color: var(--muted); }
.glossary dt .term-link { margin-left: auto; font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.glossary dt .term-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.glossary dd { margin: 6px 0 22px; color: var(--body); }
.glossary dd + dd { margin-top: -14px; font-size: 15px; color: var(--muted); }
.glossary dt:target, .glossary dt:target + dd { background: var(--hl); }
.az-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.az-jump a { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; font-family: var(--f-display); font-size: 18px; font-weight: 600; text-decoration: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.az-jump a:hover { border-color: var(--accent); color: var(--accent); }

.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 24px 0 8px; }
.cat-tile { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; color: var(--ink); text-decoration: none; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.cat-tile .ico { width: 34px; height: 34px; color: var(--accent); stroke-width: 1.4; }
.cat-tile h2 { font-size: var(--ct); line-height: 1.2; }
.cat-tile p { font-size: 16px; color: var(--body); }
.cat-tile .pillar { align-self: flex-start; }
.cat-tile .chip-n { margin-top: auto; font-size: 13px; color: var(--muted); }
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; }
.results-status { margin: 8px 0 24px; color: var(--muted); }
.search-page-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.search-page-form .search { flex: 1 1 420px; max-width: 640px; height: 56px; background: var(--surface); }
.search-page-form .search input { font-size: 19px; }

.prose { max-width: 70ch; padding: 8px 0 24px; color: var(--body); }
.prose h2 { margin: 40px 0 12px; font-size: 30px; color: var(--ink); }
.prose h3 { margin: 28px 0 10px; font-size: 22px; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose a { color: var(--accent); text-underline-offset: 4px; }
.prose .flabel { margin-right: 4px; }
.labels-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 18px; align-items: center; margin: 0 0 20px; }
.labels-list dt, .labels-list dd { margin: 0; }

.notfound { padding: 96px 0; text-align: center; }
.notfound .code { font-family: var(--f-display); font-size: 120px; font-weight: 600; line-height: 1; color: var(--accent); }
.notfound h1 { margin: 16px 0 12px; font-size: var(--h2); }
.notfound p { margin-bottom: 28px; color: var(--muted); }
.notfound .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Reserved ad slots (CLAUDE.md §2): fixed heights so ads never shift layout. Unused until ads go live. */
.ad-slot { display: grid; place-items: center; min-height: 280px; margin: 40px 0; background: var(--surface-2); border-radius: var(--r); }
.ad-slot.is-leader { min-height: 90px; }
.ad-slot::before { content: "Advertisement"; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* 14b. Cookie consent banner (assets/js/consent.js; EU/EEA/UK/CH visitors only) */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 20px 22px 18px; overflow: hidden;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(58, 42, 26, .22);
}
.consent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--accent); }
.consent[hidden] { display: none; }
.consent-text { flex: 1 1 300px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.consent-text strong { font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.consent-text a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.consent-btns { display: flex; gap: 10px; }
.consent .btn { min-height: 44px; padding: 0 22px; }

/* 15. Responsive ----------------------------------------------------------- */
@media (max-width: 1300px) {
  .topbar-tag { display: none; }
}

@media (max-width: 1100px) {
  /* Top bar (tablets and phones): logo + theme toggle + menu button; util nav and search fold into a panel */
  .topbar-in { flex-wrap: wrap; gap: 8px; }
  .mini-logo { margin-right: auto; }
  .nav-toggle { display: inline-flex; width: 44px; }
  .nav-toggle .i-close { display: none; }
  .topbar.is-open .nav-toggle .i-menu { display: none; }
  .topbar.is-open .nav-toggle .i-close { display: block; }
  /* Without JS (no .js class) the panel simply stays open */
  .mast-panel { order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 12px; }
  .js .mast-panel { display: none; }
  .js .topbar.is-open .mast-panel { display: flex; }
  html:not(.js) .nav-toggle { display: none; }
  .util-nav { flex-direction: column; margin-left: 0; }
  .util-nav a { padding: 0; font-size: 17px; }
  .mast-tools, .mast-tools form { width: 100%; }
  .mast-tools .search { flex: 1; min-width: 0; }

  .grid, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
  .hero-media .media { min-height: 0; }
  .profile-head { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root { --h1: 34px; --h2: 27px; --ct: 21px; --bar-h: 58px; }
  body { font-size: 17px; }
  .wrap, .wrap-narrow { padding-left: 16px; padding-right: 16px; }
  /* Phones: a smaller logo and an icon-only theme toggle */
  .wordmark { font-size: 22px; }
  .mark { width: 30px; height: 30px; }
  .theme-toggle { padding: 0; width: 44px; }
  .theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* Category strip: one horizontally scrolling row; main.js scrolls the active chip into view */
  .cat-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-strip .chip { flex: none; white-space: nowrap; }

  .letter { padding: 22px 20px 20px; }
  .letter::after { width: 84px; height: 84px; right: -10px; top: -24px; border-width: 6px; }
  .hero-copy { padding: 26px 20px 22px; }
  .grid, .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .band-list { grid-template-columns: minmax(0, 1fr); }
  .labels-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .labels-list dd { margin-bottom: 10px; }
  .stat-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .stat-list li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; }
  .stat-list .val { text-align: right; font-size: 18px; }

  /* Table filters collapse behind a "Filters" button */
  .dt-tools { padding: 12px 14px; }
  .dt-tools .search { flex: 1 1 100%; min-width: 0; }
  .dt-filter-toggle { display: inline-flex; min-height: 44px; }
  .dt-filters { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .dt.filters-open .dt-filters { display: flex; }
  .dt-field select { width: 100%; }
  .dt-count { margin-left: 0; }
  .dt-table th, .dt-table td { padding-left: 12px; padding-right: 12px; }

  /* Recipe steps: number and text on one line, who + cost under the text */
  .recipe-in { padding: 18px 16px 18px; }
  .step { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .step .who { grid-column: 2; justify-self: start; }
  .step-cost { grid-column: 3; grid-row: 2; min-width: 0; }

  .entry { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .entry-val { margin-left: 0; }
  .post-lead { aspect-ratio: 4 / 3; }
  .post-lead img[src*="img.youtube.com/"] { transform: scale(1.34); }
  .chart { padding: 18px 16px; }
  .chart-label { font-size: 15px; }
  .diagram { flex-direction: column; }
  .latest-list { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .facts-table th { width: 42%; }
  .notfound .code { font-size: 88px; }
}

/* 16. Motion + print ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .cat-tile:hover { transform: none; }
}
@media print {
  .topbar, .cat-strip, .band, .foot, .dt-tools, .more, .dt-more, .consent, .ad-slot { display: none !important; }
  .dt-table tbody tr.dt-clip { display: table-row; }
  .dt-scroll { max-height: none; overflow: visible; }
  .dt-table th { position: static; }
  body { background: #fff !important; color: #000 !important; }
  .card, .dt, .recipe, .letter, .hero-copy { box-shadow: none !important; }
}
html:not(.js) .js-only { display: none; }