/*
Theme Name: All That History
Theme URI: https://allthathistory.com
Author: AllThatHistory
Author URI: https://allthathistory.com
Description: Custom WordPress theme for AllThatHistory.com built from the "Industry" design system — a survey-drawing / field-notebook aesthetic for history & archaeology reporting: hairline blueprint frames with registration marks, Barlow Condensed headings over Barlow body text, a gold/bronze accent matched to the site logo, and articles built around sources, dates and named authors.
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allthathistory

This stylesheet is the single source of truth for the theme's look. Every
color, font, spacing and radius value used anywhere in the theme is a
variable defined in the ":root" block below — never hard-code a hex, a font
name or a px value the tokens already carry. Fonts are loaded via
wp_enqueue_style() in functions.php, not @import here, so they don't block
render behind this file.
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --color-bg: #f7f5f1;
  --color-surface: #eeeae2;
  --color-text: #1b1815;
  --color-accent: #b8863e;
  --color-accent-2: #8a6a3f;
  --color-divider: color-mix(in srgb, #1b1815 16%, transparent);

  /* Brand ink — the near-black from the logo, used for full-bleed dark
     bands (the CTA band, dark header variants) instead of a tinted ramp
     step, so it matches the logo's true black rather than a dark gold. */
  --color-ink: #0d0c0a;
  --color-ink-700: #221e18;

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. Neutrals are
     warmed slightly (toward the brand's bronze) rather than pure gray. */
  --color-neutral-100: #f7f5f1;
  --color-neutral-200: #e9e5dd;
  --color-neutral-300: #d6d0c4;
  --color-neutral-400: #b6ad9d;
  --color-neutral-500: #968c7a;
  --color-neutral-600: #79705f;
  --color-neutral-700: #5c5447;
  --color-neutral-800: #3d382e;
  --color-neutral-900: #24211b;

  /* Accent ramp — the gold/bronze pyramid color sampled from the site logo. */
  --color-accent-100: #faf3e3;
  --color-accent-200: #f0e0bd;
  --color-accent-300: #e3c790;
  --color-accent-400: #d3ac6c;
  --color-accent-500: #c39750;
  --color-accent-600: #a9823f;
  --color-accent-700: #8a6830;
  --color-accent-800: #6b4f22;
  --color-accent-900: #4a3717;

  /* Second accent — a slightly darker/cooler bronze so the mono palette
     still has a subtle second voice for the rare "tag-accent-2" use. */
  --color-accent-2-100: #f6efe2;
  --color-accent-2-200: #e6d7b9;
  --color-accent-2-300: #d1b989;
  --color-accent-2-400: #b99b66;
  --color-accent-2-500: #9c7f4f;
  --color-accent-2-600: #7f663f;
  --color-accent-2-700: #634f32;
  --color-accent-2-800: #473924;
  --color-accent-2-900: #2c2316;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --logo-max-height: 40px;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  --wrap: 1080px;
}

/* ==========================================================================
   2. Reset & base type
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
  text-wrap: pretty;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
/* Body-copy links use the deep accent step, not the raw accent — the
   accent/ground pair only clears ~3:1, enough for icons, large type and
   chrome, but not paragraph text (WCAG AA needs 4.5:1). */
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-900); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption {
  font-size: 11.5px; margin-top: var(--space-2);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
ul, ol { padding-left: 1.2em; }
blockquote { margin: 0; }
hr.wp-block-separator, .hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.mono { font-family: var(--font-mono); }
.kicker {
  display: inline-flex; align-items: center;
  font: 600 10px var(--font-heading); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.eyebrow {
  font: 400 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* ==========================================================================
   3. WordPress core / accessibility
   ========================================================================== */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--color-ink); color: #fff;
  padding: 10px 18px; font: 600 13px var(--font-heading);
  text-decoration: none;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
  word-wrap: normal !important; margin: -1px; padding: 0;
}

.alignleft { float: left; margin: 0.4em 1.6em 1.2em 0; }
.alignright { float: right; margin: 0.4em 0 1.2em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: calc(var(--wrap) + 160px); margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption img { display: block; }
.wp-caption-text { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: var(--space-2); }
.gallery { display: grid; grid-template-columns: repeat(var(--columns, 3), 1fr); gap: var(--space-4); }
.gallery-item { margin: 0; }

/* ==========================================================================
   4. Blueprint frame system + imagery
   ========================================================================== */

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* Photos render in their own natural color — no accent color-wash. The
   class name is kept (rather than renamed everywhere) purely so existing
   markup/JS hooks don't need to change; it's just a cropped photo frame now. */
.duotone { position: relative; overflow: hidden; }
.duotone img { width: 100%; height: 100%; object-fit: cover; }

/* photo placeholder — shown wherever a template has no real image yet */
.ph {
  position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--color-neutral-200) 0 5px, var(--color-neutral-100) 5px 10px);
  display: flex; align-items: center; justify-content: center;
}
.ph span {
  font: 400 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-700); background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  padding: 3px 7px; text-align: center;
}
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-16-10 { aspect-ratio: 16/10; }
.ratio-4-3 { aspect-ratio: 4/3; }
.ratio-4-5 { aspect-ratio: 4/5; }
.ratio-1-1 { aspect-ratio: 1/1; }

/* ==========================================================================
   5. Components (buttons, forms, cards, tags, nav, table, dialog)
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 0;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Dark text on the gold fill reads cleaner than cream and clears WCAG AA
   (5.5:1) where cream-on-gold would not (~3:1). */
.btn-primary { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-ink); }
.btn-primary:active { background: var(--color-accent-600); color: var(--color-ink); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); border-color: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 42px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: 0; background: transparent; border: 1px solid var(--color-divider); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0;
  text-decoration: none;
}
.tag-accent { background: var(--color-accent-200); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); border: 1px solid var(--color-divider); }
.tag-outline { border: 1px solid var(--color-divider); color: var(--color-neutral-700); }
.tag-outline:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ==========================================================================
   6. Layout shell
   ========================================================================== */

.ath-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.ath-section { padding-top: 44px; }
.ath-section-tight { padding-top: 30px; }
.ath-rule {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--color-divider); padding-bottom: 8px; margin-bottom: 24px; gap: 16px;
}
.ath-rule h2, .ath-rule h3 { margin: 0; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.ath-rule .ath-rule__link { font: 400 12px var(--font-body); text-decoration: none; white-space: nowrap; }
.ath-breadcrumb {
  font: 400 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 16px;
}
.ath-breadcrumb a { color: var(--color-neutral-600); text-decoration: underline; text-underline-offset: 2px; }
.ath-breadcrumb a:hover { color: var(--color-accent-700); }

.nl { display: block; text-decoration: none; color: inherit; }
.nl:hover h2, .nl:hover h3, .nl:hover h4 { color: var(--color-accent-700); }

/* ==========================================================================
   7. Site header & navigation
   ========================================================================== */

.site-header { border-bottom: 1px solid var(--color-divider); background: var(--color-bg); position: relative; z-index: 40; }
.site-header__bar {
  max-width: var(--wrap); margin: 0 auto; padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.site-header__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--color-text); }
.site-header__brand:hover { color: var(--color-text); }
.site-header__mark {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  font: 600 15px var(--font-heading); background: var(--color-accent); color: var(--color-ink);
}
.site-header__mark img { width: 100%; height: 100%; object-fit: cover; }
.site-header__name { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: .01em; line-height: 1; }
.site-header__logo { display: flex; align-items: center; }
/* A fixed "height" (not "max-height") so the Logo height (px) field in
   Customize → Branding always has a visible effect — max-height is only
   a ceiling, so it silently does nothing once the uploaded logo file
   already renders shorter than the configured number. Height forces the
   logo to that exact size either way, scaling it up or down as needed. */
.site-header__logo img { height: var(--logo-max-height); width: auto; display: block; }

/* "Logo centered, nav below" header layout (Customize → Branding). Its own
   gap, separate from the left/right layout's gap above, since a taller
   logo needs more clearance from the nav row sitting directly beneath it. */
.site-header__bar.is-logo-center { flex-direction: column; gap: 26px; }
.site-header__bar.is-logo-center .site-header__brand { order: -1; }
.site-header__bar.is-logo-right { flex-direction: row-reverse; }

/* Compact brand mark reused at the top of single articles — same logic
   as the main header (logo when uploaded, initial+name mark otherwise),
   just capped a little smaller so it fits the slim article bar. */
.site-header__brand--compact { gap: 11px; }
.site-header__brand--compact .site-header__mark { width: 24px; height: 24px; font-size: 14px; }
.site-header__brand--compact .site-header__name { font-size: 21px; }
.site-header__brand--compact .site-header__logo img { height: min(28px, var(--logo-max-height)); }

.site-header__actions { display: flex; align-items: center; gap: 18px; }

/* Keeps the actions group (menu button, search, subscribe) pinned to the
   right edge in the default "logo left" layout even when the header
   wraps to two rows on narrow screens — without this, a lone flex item
   on its own row falls back to flex-start (space-between has nothing to
   space against with only one item per row), which is what was pulling
   the mobile search/menu buttons over to the left instead of staying on
   the "Subscribe" side. Scoped to the default layout only — in "logo
   right, nav left" the row is already reversed, and in "logo centered,
   nav below" it's a column, so this rule would misplace those instead. */
.site-header__bar:not(.is-logo-right):not(.is-logo-center) .site-header__actions { margin-left: auto; }
.primary-nav { display: flex; align-items: center; gap: 18px; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 18px; }
.primary-nav a {
  font: 400 13px var(--font-body); text-decoration: none; color: var(--color-text);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a {
  color: var(--color-accent-700); border-bottom-color: var(--color-accent);
}
.nav-toggle { display: none; }

.ath-search { position: relative; }
.ath-search summary { list-style: none; cursor: pointer; }
.ath-search summary::-webkit-details-marker { display: none; }
.ath-search summary::marker { content: ""; }
.ath-search[open] summary { border-color: var(--color-accent); color: var(--color-accent-700); }
.ath-search .input { min-width: 200px; }
/* Flush to the search icon's own right edge, not a fixed magic-number
   offset — a hardcoded "right: 40px" (measured relative to .ath-search
   itself, which is only as wide as the icon) shifted the whole panel a
   fixed 40px further left than the icon, which read as fine on a wide
   desktop header but looked disconnected/"panned left" from the icon on
   a narrow phone header. Anchoring to 0 keeps it attached to the icon at
   every width; a comfortable max-width plus a viewport-relative right
   offset keeps it from ever overflowing past the left edge of the screen. */
.ath-search__panel {
  position: absolute;
  right: 0;
  margin-top: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  padding: 10px;
  z-index: 50;
  max-width: calc(100vw - 32px);
}


.category-rail { border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.category-rail__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 40px 12px;
  display: flex; gap: 26px; flex-wrap: wrap; overflow-x: auto;
}
.category-rail a {
  font: 600 12px var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--color-neutral-700); white-space: nowrap;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.category-rail a:hover, .category-rail a.is-current {
  color: var(--color-accent-700); border-bottom-color: var(--color-accent);
}

.reading-progress { height: 3px; background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.reading-progress > span { display: block; height: 3px; background: var(--color-accent); width: var(--progress, 0%); }

/* ==========================================================================
   8. Ad slots
   ========================================================================== */

.ath-ad { max-width: var(--wrap); margin: 0 auto; padding: 22px 40px 0; }
.ath-ad--tight { padding-top: 0; }
.ath-ad__frame {
  border: 1px dashed color-mix(in srgb, var(--color-text) 30%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column;
  min-height: 90px; text-align: center;
}
.ath-ad__frame span { font: 400 10px var(--font-mono); letter-spacing: .1em; color: var(--color-neutral-600); }
.ath-ad__frame span.ath-ad__note { color: var(--color-neutral-400); letter-spacing: normal; text-transform: none; }
.ath-ad--leaderboard .ath-ad__frame { min-height: 90px; }
.ath-ad--mpu .ath-ad__frame { min-height: 250px; }
.ath-ad--billboard .ath-ad__frame { min-height: 250px; }
.ath-ad--sidebar .ath-ad__frame { min-height: 250px; }
.ath-ad--in-sidebar { padding: 0; max-width: none; }
.ath-ad--header-top { padding: 10px 40px; }
.ath-ad--header-top .ath-ad__frame { min-height: 60px; }

/* In-article ad zones (spliced directly into the post content) sit inside
   the narrower 66ch text column, so they reset the sitewide .ath-ad
   max-width/padding rather than inheriting the full-bleed defaults. */
.ath-ad--in-article { max-width: none; padding: 4px 0; margin: 22px 0; }
.ath-ad--in-article .ath-ad__frame { min-height: 120px; }

/* Admin-only "why is this section hidden" notices (Substack fetch/mapping
   failures) — same dashed-frame language as an empty ad slot, but tinted
   amber so it reads as a warning rather than a placeholder, and never
   shown to a logged-out visitor. */
.ath-substack-admin-notice {
  border-color: color-mix(in srgb, var(--color-accent-700) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent-100) 60%, transparent);
}
.ath-substack-admin-notice span { color: var(--color-accent-800); }
.ath-substack-admin-notice span.ath-ad__note { color: var(--color-accent-700); max-width: 640px; }
.ath-substack-admin-inline-note {
  font: 400 11px var(--font-mono); color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent-100) 60%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-accent-700) 55%, transparent);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}

/* Sticky mobile ad bar (Layout Toggles → "Enable sticky mobile ad bar"). */
.ath-sticky-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--color-bg); border-top: 1px solid var(--color-divider);
  display: none; align-items: center; justify-content: center;
  padding: 6px 40px 6px 10px; box-shadow: var(--shadow-md);
}
.ath-sticky-ad .ath-ad { padding: 0; max-width: none; }
.ath-sticky-ad .ath-ad__frame { min-height: 50px; }
.ath-sticky-ad__close {
  position: absolute; top: 4px; right: 8px; border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--color-neutral-600); padding: 4px;
}
@media (max-width: 640px) {
  .ath-sticky-ad { display: flex; }
}

/* ==========================================================================
   9. Homepage
   ========================================================================== */

.ath-lead-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 40px; align-items: start; }
.ath-lead-figure { margin-bottom: 18px; }
.ath-lead h1, .ath-lead h2 { font-size: 40px; line-height: 1.05; margin: 0 0 12px; max-width: 15ch; }
.ath-lead__dek { font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-800); max-width: 56ch; margin: 0 0 14px; }
.ath-lead__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ath-byline { font: 400 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }

.ath-also-week { display: flex; flex-direction: column; gap: 22px; }
.ath-also-week__title { font: 600 12px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); border-bottom: 1px solid var(--color-divider); padding-bottom: 7px; }
.ath-also-week__item { display: grid; grid-template-columns: 88px 1fr; gap: 14px; }
.ath-also-week__item h4 { font-size: 18px; line-height: 1.15; margin: 3px 0 5px; }

.ath-latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 30px; }
.ath-latest-grid h3 { font-size: 21px; line-height: 1.13; margin: 5px 0 7px; }
.ath-latest-grid p { font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-700); margin: 0 0 8px; }

.ath-weekly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.ath-weekly-grid__item { background: var(--color-bg); padding: 20px 22px; display: flex; flex-direction: column; }
.ath-weekly-grid__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; gap: 10px; }
.ath-weekly-grid__issue { font: 400 10px var(--font-mono); letter-spacing: .1em; color: var(--color-accent-700); }
.ath-weekly-grid__date { font: 400 10px var(--font-mono); color: var(--color-neutral-600); }
.ath-weekly-grid__item h4 { margin: 0 0 7px; font-size: 20px; line-height: 1.15; }
.ath-weekly-grid__item p { font-size: 13px; line-height: 1.55; color: var(--color-neutral-700); margin: 0 0 10px; }
.ath-weekly-grid__cta { font: 400 10px var(--font-mono); letter-spacing: .08em; color: var(--color-accent-700); margin-top: auto; }

.ath-subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.ath-subject-grid__item { background: var(--color-bg); padding: 18px 20px; }
.ath-subject-grid__item .row { display: flex; align-items: baseline; justify-content: space-between; }
.ath-subject-grid__item h4 { margin: 0; font-size: 19px; }
.ath-subject-grid__item .count { font: 400 10px var(--font-mono); color: var(--color-neutral-600); }
.ath-subject-grid__item p { font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700); margin: 6px 0 0; }

.ath-cta-band { margin-top: 44px; background: var(--color-ink); color: var(--color-bg); }
.ath-cta-band__inner { max-width: var(--wrap); margin: 0 auto; padding: 38px 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.ath-cta-band .eyebrow { color: var(--color-accent-300); }
.ath-cta-band h2, .ath-cta-band h3 { font-size: 30px; line-height: 1.08; margin: 8px 0 10px; color: var(--color-bg); max-width: 20ch; }
.ath-cta-band p { font-size: 14px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-bg) 72%, transparent); max-width: 48ch; }
.ath-cta-band__form { display: flex; gap: 10px; }
.ath-cta-band__form .input { background: color-mix(in srgb, var(--color-bg) 8%, transparent); border-color: color-mix(in srgb, var(--color-bg) 28%, transparent); color: var(--color-bg); }
.ath-cta-band__form .btn { white-space: nowrap; }
.ath-cta-band__fine { font: 400 10px var(--font-mono); letter-spacing: .06em; color: color-mix(in srgb, var(--color-bg) 50%, transparent); margin-top: 10px; }
.ath-cta-band .ath-substack-embed { max-width: 480px; }

/* "More on Substack" button under each category group in the homepage
   RSS section. */
.ath-substack-group__more { display: inline-flex; margin-top: 14px; }

/* "From Substack" homepage section — one card row per matched category. */
.ath-substack-group { margin-bottom: 34px; }
.ath-substack-group:last-child { margin-bottom: 0; }
.ath-substack-group__title {
  font: 600 13px var(--font-heading); letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 14px;
}

/* ==========================================================================
   10. Article
   ========================================================================== */

.ath-article-header { border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.ath-article-header__bar { max-width: var(--wrap); margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ath-article-grid { max-width: var(--wrap); margin: 0 auto; padding: 34px 40px 0; display: grid; grid-template-columns: 1fr 280px; gap: 52px; align-items: start; }
.ath-article-body { max-width: 66ch; }
.ath-article-body__kicker { margin-bottom: 10px; }
.ath-article-body h1 { font-size: 48px; line-height: 1.03; margin: 0 0 14px; }
.ath-article-body .ath-dek { font-size: 18px; line-height: 1.5; color: var(--color-neutral-800); margin: 0 0 20px; }
.ath-article-body p { font-size: 17px; line-height: 1.68; margin: 0 0 16px; }
.ath-article-body h2, .ath-article-body h3 { font-size: 24px; margin: 30px 0 10px; }
.ath-article-body ul, .ath-article-body ol { font-size: 17px; line-height: 1.68; margin: 0 0 16px; }
/* A touch larger than the text column — enough to read as a real photo
   without breaking out of the article grid or crowding the sidebar. */
.ath-article-body figure { margin: 0 -4% 26px; }
.ath-dropcap:first-letter {
  font-family: var(--font-heading); font-weight: 600; font-size: 52px; line-height: .78;
  float: left; margin: 6px 12px 0 0; color: var(--color-accent-700);
}
.ath-byline-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin-bottom: 24px;
}
.ath-byline-row__avatar {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-heading); color: var(--color-neutral-700);
  overflow: hidden;
}
.ath-byline-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ath-byline-row__meta { flex: 1; min-width: 0; }
.ath-byline-row__name { font: 400 13px var(--font-body); margin-bottom: 5px; }
.ath-byline-row__dates { display: block; margin-top: 5px; font: 400 10px var(--font-mono); letter-spacing: .06em; color: var(--color-neutral-600); }
.ath-share { display: flex; gap: 6px; }

.ath-article-body blockquote {
  margin: 26px 0; padding: 0 0 0 20px; border-left: 2px solid var(--color-accent);
}
.ath-article-body blockquote p { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1.2; margin: 0 0 8px; color: var(--color-text); }
.ath-article-body blockquote cite { font: 400 11px var(--font-mono); letter-spacing: .06em; color: var(--color-neutral-600); font-style: normal; }

.ath-sources-box { padding: 18px 20px; margin: 30px 0; }
.ath-sources-box__title { font: 600 11px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 10px; }
.ath-sources-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.5; }
.ath-sources-box a { text-decoration: none; }
.ath-sources-box a:hover { text-decoration: underline; }

.ath-tag-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--color-divider); }

.ath-article-sidebar { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 20px; }
.ath-toc-title, .ath-sidebar-title {
  font: 600 11px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--color-divider); padding-bottom: 7px; margin-bottom: 11px;
}
.ath-toc { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; }
.ath-toc a { text-decoration: none; color: var(--color-neutral-700); }
.ath-toc a:hover, .ath-toc a.is-active { color: var(--color-accent-700); }
.ath-sidebar-box { padding: 18px; }
.ath-sidebar-box p { font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-800); margin: 0 0 11px; }

/* Ads and widgets dropped into the narrow (280px) article-sidebar column
   used to size themselves however their own ad network or embed script
   wanted — a 300px ad creative, a 300px Facebook Page Plugin — rather than
   the column's actual width, which left them pinned to one edge (or
   clipped on one side) instead of centered like everything else in the
   column. Centering the ad slot itself and capping anything inside either
   it or the widget area to the column's own width keeps every item — ad
   or widget — sitting on the same centered axis no matter what width its
   own embed asks for. */
.ath-article-sidebar .ath-ad--sidebar {
  max-width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}
.ath-article-sidebar .ath-ad--sidebar iframe,
.ath-article-sidebar .ath-ad--sidebar img {
  max-width: 100%;
}
.ath-article-sidebar .widget-area {
  align-items: center;
}
.ath-article-sidebar .widget-area iframe,
.ath-article-sidebar .widget-area img {
  max-width: 100%;
}

/* Substack's own subscribe embed (Customize → Subscribe & Contact), used
   in place of a custom email form wherever a subscribe box appears —
   it's the only path that actually subscribes someone. Its fixed
   width/height attributes are overridden so it fits its container. */
.ath-substack-embed iframe { display: block; width: 100%; max-width: 100%; height: 150px; border: 0; }

.ath-keep-reading { max-width: var(--wrap); margin: 0 auto; padding: 14px 40px 0; }
.ath-keep-reading__title { font: 600 12px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--color-divider); padding-bottom: 8px; margin-bottom: 22px; }
.ath-keep-reading__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ath-keep-reading__grid img, .ath-keep-reading__grid .ph { margin-bottom: 11px; }
.ath-keep-reading__grid h4 { font-size: 18px; line-height: 1.15; margin: 4px 0 0; }

/* ==========================================================================
   11. Category / archive
   ========================================================================== */

.ath-archive-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; border-bottom: 1px solid var(--color-divider); padding-bottom: 22px; }
.ath-archive-head h1 { font-size: 46px; margin: 0 0 10px; letter-spacing: .01em; }
.ath-archive-head p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; max-width: 62ch; }
.ath-archive-count { text-align: right; }
.ath-archive-count .num { font: 600 34px var(--font-heading); line-height: 1; color: var(--color-accent-700); }
.ath-archive-count .lbl { font: 400 10px var(--font-mono); letter-spacing: .1em; color: var(--color-neutral-600); }

.ath-filter-row { padding: 18px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ath-sort { display: flex; border: 1px solid var(--color-divider); }
.ath-sort span, .ath-sort a {
  font: 600 11px var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; color: var(--color-neutral-700); text-decoration: none; border-left: 1px solid var(--color-divider);
}
.ath-sort a:first-child, .ath-sort span:first-child { border-left: 0; }
.ath-sort .is-active { background: var(--color-accent); color: var(--color-ink); }
.ath-filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.ath-content-grid { padding: 26px 0 0; display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.ath-post-list { display: flex; flex-direction: column; }
.ath-post-list__item {
  display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px 0;
  border-bottom: 1px solid var(--color-divider);
}
.ath-post-list__item:first-child { padding-top: 0; }
.ath-post-list__item h3 { font-size: 25px; line-height: 1.1; margin: 5px 0 8px; }
.ath-post-list__item p { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-700); margin: 0; }

.ath-pagination { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 0; flex-wrap: wrap; gap: 14px; }
.ath-pagination .page-numbers { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ath-pagination .page-numbers li { display: contents; }
.ath-pagination a, .ath-pagination span.page-numbers {
  font: 600 12px var(--font-heading); width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--color-divider); color: var(--color-neutral-700); text-decoration: none;
}
.ath-pagination .current { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.ath-pagination .dots { border: 0; color: var(--color-neutral-400); }

.ath-sidebar { display: flex; flex-direction: column; gap: 26px; }
.ath-most-read { display: flex; flex-direction: column; gap: 12px; }
.ath-most-read__item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; text-decoration: none; color: inherit; }
.ath-most-read__item .num { font: 600 16px var(--font-heading); color: var(--color-neutral-400); }
.ath-most-read__item h4 { margin: 0; font-size: 15px; line-height: 1.25; }
.ath-follow-row { display: flex; gap: 8px; }

/* ==========================================================================
   12. About page
   ========================================================================== */

.ath-about-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 52px; align-items: start; }
.ath-about-hero h1 { font-size: 52px; line-height: 1.02; margin: 0 0 16px; max-width: 16ch; }
.ath-about-hero p { font-size: 17px; line-height: 1.62; color: var(--color-neutral-800); max-width: 58ch; }

.ath-stats-plate { padding: 26px 30px; }
.ath-stats-plate__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-divider); }
.ath-stats-plate__cell { background: var(--color-bg); padding: 4px 20px; }
.ath-stats-plate__num { font: 600 40px var(--font-heading); line-height: 1; color: var(--color-accent-700); }
.ath-stats-plate__lbl { font: 400 10px var(--font-mono); letter-spacing: .1em; color: var(--color-neutral-600); margin-top: 6px; }

.ath-standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 30px; }
.ath-standards-grid__num { font: 400 11px var(--font-mono); color: var(--color-neutral-400); margin-bottom: 8px; }
.ath-standards-grid h4 { margin: 0 0 7px; font-size: 20px; }
.ath-standards-grid p { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-700); margin: 0; }

.ath-desk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ath-desk-grid__item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.ath-desk-grid__item h4 { margin: 0 0 3px; font-size: 19px; }
.ath-desk-grid__role { font: 400 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 7px; }
.ath-desk-grid__item p { font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-700); margin: 0; }

.ath-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.ath-contact-grid__item { background: var(--color-bg); padding: 24px 26px; }
.ath-contact-grid__item h4 { margin: 0 0 8px; font-size: 20px; }
.ath-contact-grid__item p { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-700); margin: 0 0 12px; }
.ath-contact-grid__item a.mono-link { font: 400 13px var(--font-mono); text-decoration: none; }

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer { max-width: var(--wrap); margin: 0 auto; padding: 26px 40px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer--bordered { border-top: 1px solid var(--color-divider); margin-top: 34px; }
.site-footer__credit { font: 400 11px var(--font-mono); color: var(--color-neutral-600); }
.site-footer__social { display: flex; gap: 8px; }
.site-footer__social a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-divider); font: 600 12px var(--font-heading); text-decoration: none; color: var(--color-text);
}
.site-footer__social a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.widget-area { display: flex; flex-direction: column; gap: 26px; }
.widget { display: flex; flex-direction: column; gap: 10px; }
.widget-title { font: 600 11px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--color-divider); padding-bottom: 7px; margin: 0; }

/* ==========================================================================
   14. Comments (kept minimal — theme is built around published reporting)
   ========================================================================== */

.comments-area { max-width: 66ch; padding: 34px 0 0; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding: 18px 0; border-top: 1px solid var(--color-divider); }
.comment-meta { font: 400 11px var(--font-mono); color: var(--color-neutral-600); margin-bottom: 6px; }
.comment-form label { display: block; font-size: 12px; margin: 14px 0 5px; }
.comment-reply-title { font-size: 24px; margin-bottom: 6px; }

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .ath-wrap, .site-header__bar, .category-rail__inner, .ath-ad,
  .ath-article-header__bar, .ath-article-grid, .ath-keep-reading, .site-footer { padding-left: 24px; padding-right: 24px; }

  .ath-lead-grid { grid-template-columns: 1fr; }
  .ath-latest-grid { grid-template-columns: repeat(2, 1fr); }
  .ath-standards-grid, .ath-desk-grid, .ath-keep-reading__grid { grid-template-columns: repeat(2, 1fr); }
  .ath-about-hero { grid-template-columns: 1fr; }
  .ath-content-grid { grid-template-columns: 1fr; }
  .ath-article-grid { grid-template-columns: 1fr; }
  .ath-article-sidebar { position: static; }
  .ath-cta-band__inner { grid-template-columns: 1fr; }
  .ath-stats-plate__grid { grid-template-columns: repeat(2, 1fr); }
  .ath-post-list__item { grid-template-columns: 160px 1fr; }
}

@media (max-width: 640px) {
  .site-header__bar { flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  .site-header__name { font-size: 20px; }
  .primary-nav { position: fixed; inset: 0; top: 0; background: var(--color-bg); flex-direction: column;
    align-items: flex-start; justify-content: flex-start; padding: 90px 28px 28px; gap: 22px;
    transform: translateX(100%); transition: transform .2s ease; z-index: 50; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 20px; }
  .primary-nav a { font-size: 18px; }
  .primary-nav.is-open { transform: translateX(0); }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid var(--color-divider); background: transparent; cursor: pointer; z-index: 60; position: relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 16px; height: 1.5px; background: currentColor; position: relative;
  }
  .nav-toggle span::before { position: absolute; top: -5px; }
  .nav-toggle span::after { position: absolute; top: 5px; }
  .site-header.is-nav-open .nav-toggle { color: var(--color-accent); }

  .ath-lead h1, .ath-lead-grid h1, .ath-about-hero h1, .ath-article-body h1 { font-size: 30px; }
  .ath-archive-head h1 { font-size: 30px; }
  .ath-archive-head { grid-template-columns: 1fr; }
  .ath-archive-count { text-align: left; }
  .ath-latest-grid, .ath-standards-grid, .ath-desk-grid, .ath-keep-reading__grid,
  .ath-weekly-grid, .ath-subject-grid, .ath-contact-grid, .ath-stats-plate__grid { grid-template-columns: 1fr; }
  .ath-post-list__item { grid-template-columns: 1fr; }
  .ath-post-list__item .ph, .ath-post-list__item img { aspect-ratio: 16/10; }
  .ath-also-week__item { grid-template-columns: 64px 1fr; }
  .ath-byline-row { flex-wrap: wrap; }
  .ath-cta-band__form { flex-direction: column; }
  .category-rail__inner { gap: 16px; padding-bottom: 10px; }

  /* These two zones are sized for desktop leaderboard banners (728×90 /
     970×90) and look out of place squeezed onto a phone, so they're
     desktop-only regardless of whether code is pasted in. (For an editor
     viewing on mobile, this also hides the "empty slot" placeholder for
     just these two zones — expected, since the zone itself is hidden here.) */
  .ath-ad[data-ad-zone="header_top"],
  .ath-ad[data-ad-zone="footer_sitewide"] { display: none; }
}