/*!
 * Theme Name: Historiainfo
 * Theme URI:
 * Author: Haroon Yamin
 * Author URI: http://www.linkedin.com/in/haroon-webdev
 * Description: A fast, secure, SEO-friendly blogging theme for a world-history archive, built with native Gutenberg blocks and a Customizer-driven header/footer.
 * Version: 1.0.106
 * Requires at least: 6.4
 * Requires PHP: 7.4
 * Tags: blog, custom-theme, block-styles, translation-ready
 * Text Domain: historiainfo
**/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
	--parchment:#F4ECD8; --aged:#E8DCC4; --ink:#3E2723; --sepia:#5D4037;
	--gold:#B8860B; --gold-ink:#785507; --oxblood:#7B241C;
	--rule:rgba(62,39,35,.18); --rule-strong:rgba(62,39,35,.34); --on-dark:#F4ECD8;
	--font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
	--font-body:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
	--step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.75rem;
	--step-3:2.5rem; --step-4:clamp(2.6rem,6vw,4.4rem);
	--s-1:.5rem; --s-2:.875rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --s-6:6rem;
	/* A fixed unit, not "ch" — "ch" is relative to whichever element's own
	   font-size it's applied to, so the same 68ch would render as a
	   completely different physical width on a large H1 vs. small meta
	   text, breaking the shared-column alignment between them. */
	--measure:45rem; --wrap:1180px;
	/* Single source of truth for every featured-image plate on the site
	   (Featured Story, article cards, ...). Change once here to re-crop the
	   whole site consistently. Keep this in sync with the writer-facing
	   hint added via admin_post_thumbnail_html() in settings/support.php. */
	--content-aspect-ratio:16/9;
}
html[data-mode="candlelight"]{
	--parchment:#1E1512; --aged:#2A1F1A; --ink:#E8DCC4; --sepia:#C4A78E;
	--gold:#A8842B; --gold-ink:#D9A94E; --oxblood:#CE7462;
	--rule:rgba(232,220,196,.16); --rule-strong:rgba(232,220,196,.32); --on-dark:#1E1512;
}
@media (prefers-color-scheme:dark){
	html:not([data-mode="daylight"]):not([data-mode="candlelight"]){
		--parchment:#1E1512; --aged:#2A1F1A; --ink:#E8DCC4; --sepia:#C4A78E;
		--gold:#A8842B; --gold-ink:#D9A94E; --oxblood:#CE7462;
		--rule:rgba(232,220,196,.16); --rule-strong:rgba(232,220,196,.32); --on-dark:#1E1512;
	}
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.75;transition:background .25s ease,color .25s ease;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;margin:0}
p{margin:0}
img,svg{display:block;max-width:100%}
/* Every interactive element on the site is an <a> or a <button>, so a single
   transition here covers hover effects site-wide without repeating it on
   every individual selector. */
a,button{transition:color .2s ease,background-color .2s ease,border-color .2s ease,outline-color .2s ease}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--oxblood)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.screen-reader-text{position:absolute!important;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.smallcaps{font-variant:small-caps;letter-spacing:.13em;text-transform:lowercase;font-size:var(--step--1)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:20;background:var(--aged);color:var(--ink);padding:.6rem 1rem;border:1px solid var(--rule-strong)}
.skip-link:focus{left:1rem;top:1rem}

/* Scroll-reveal — .reveal-on-scroll/.is-visible are added by assets/js/custom.js,
   never in markup, so a section only ever fades in when JS actually runs;
   if JS is blocked or IntersectionObserver is unsupported, the class is
   never added and content simply displays normally at full opacity. */
.reveal-on-scroll{opacity:0;transition:opacity .7s ease}
.reveal-on-scroll.is-visible{opacity:1}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--parchment) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.site-header__inner{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-2) 0}
.wordmark{display:block}
.wordmark img{max-height:44px;width:auto}
.wordmark__name{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:.22em;line-height:1.1}
.wordmark__tagline{display:block;color:var(--sepia);font-variant:small-caps;text-transform:lowercase;font-size:.72rem;letter-spacing:.16em;line-height:1.6}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.site-nav a{color:var(--sepia);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1);padding:.35rem 0;display:inline-block}
.site-nav a:hover{color:var(--ink)}
.site-nav .current-menu-item>a{color:var(--ink);border-bottom:1px solid var(--gold)}
.tools{display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--sepia);border:1px solid transparent}
.icon-btn:hover{color:var(--ink);border-color:var(--rule)}
.hamburger{display:none}
.mode-icon--moon{display:none}
html[data-mode="candlelight"] .mode-icon--sun{display:none}
html[data-mode="candlelight"] .mode-icon--moon{display:inline-flex}

/* ==========================================================================
   Ornament divider
   ========================================================================== */
.ornament{display:block;width:100%;max-width:600px;margin:var(--s-4) auto;color:var(--gold)}

/* ==========================================================================
   Featured Post (Side by Side) — image and text as two equal columns,
   reusing .lead__plate for the image side (same aspect-ratio/skeleton-load
   treatment as the homepage Featured Story's own image) rather than
   inventing a second image pattern.
   ========================================================================== */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:center;padding:var(--s-5) 0 0}
.feature-split__media{order:0}
.feature-split__content{order:1}
.feature-split--reverse .feature-split__media{order:1}
.feature-split--reverse .feature-split__content{order:0}
.feature-split__kicker{display:block;color:var(--sepia);margin-bottom:var(--s-2)}
.feature-split__kicker a:hover{color:var(--gold-ink)}
.feature-split__title{font-size:var(--step-3);line-height:1.15;margin:0 0 var(--s-2)}
.feature-split__title a{color:var(--ink)}
.feature-split__title a:hover{color:var(--oxblood)}
.feature-split__excerpt{color:var(--sepia);margin-bottom:var(--s-3)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{text-align:center;padding:var(--s-6) 0 var(--s-5)}
.hero__kicker{display:block;color:var(--sepia)}
.hero__title{font-size:var(--step-4);font-weight:500;margin:var(--s-3) 0 0}
.hero__title em{font-style:italic;color:var(--gold-ink)}
.hero__lede{max-width:38rem;margin:var(--s-3) auto 0;color:var(--sepia);font-size:var(--step-1)}

/* ==========================================================================
   Eyebrow / section heads
   ========================================================================== */
.eyebrow{display:flex;align-items:center;gap:var(--s-3);color:var(--sepia);margin-bottom:var(--s-4);font-size:18px;line-height:1}
/* Groups an optional icon with the heading text as a single flex item, so
   .eyebrow's own (much larger) gap applies only between the label and the
   divider line — not between the icon and its own text. */
.eyebrow__label{display:inline-flex;align-items:center;gap:.5em}
/* flex align-items:center centers each item's box, but the smallcaps text's
   visible ink sits noticeably lower within its own box than the icon's does
   in its box (measured empirically via pixel scan, not estimated) — nudge
   the icon down to meet the text's actual ink center. */
.eyebrow__label svg{color:var(--gold-ink);flex-shrink:0;transform:translateY(3px)}
/* flex align-items:center centers the *font's* full metrics box, not the
   visible glyph ink — small-caps text has no descenders, so its actual ink
   sits noticeably higher than the box center (measured ~2px on this font
   stack). Nudge the line down to meet the visible text instead of the
   invisible box. */
.eyebrow::after{content:"";flex:1;height:3px;transform:translateY(2px);border-top:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-bottom:1px solid color-mix(in srgb,var(--gold) 50%,transparent)}
.section{padding:var(--s-5) 0 0}
.section-head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.section-head .eyebrow{margin-bottom:0;flex:1}
.pill{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--gold);color:var(--gold-ink);padding:.1rem .55rem;font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:.78rem}
a.pill:hover{border-color:var(--oxblood);color:var(--oxblood)}
.pill--active{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--parchment)}
a.pill--active:hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--parchment)}

/* ==========================================================================
   Featured today / hero split
   ========================================================================== */
.hero-split{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--s-4)}
.lead__plate{position:relative;aspect-ratio:var(--content-aspect-ratio);background:color-mix(in srgb,var(--ink) 7%,var(--aged));border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lead__plate img{width:100%;height:100%;object-fit:cover}
.lead__plate .plate-art{padding:var(--s-4) var(--s-5)}
.plate-badge{position:absolute;top:0;left:0;z-index:1;background:rgba(30,21,18,.75);color:#F4ECD8;padding:.3rem .85rem;border:1px solid var(--gold);pointer-events:none}
.lead__plate .plate-badge{top:var(--s-2);left:var(--s-2)}
.plate-link{display:block;width:100%;height:100%}
.plate-art{width:100%;height:auto;color:var(--gold);opacity:.58;box-sizing:border-box}
.lead__kicker{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-3);color:var(--sepia);line-height:1em}
.lead__kicker a{color:inherit}
.lead__kicker a:hover{color:var(--gold-ink)}
.featured__meta{font-size:18px}
.lead__day{font-family:var(--font-display);font-size:var(--step-1);color:var(--gold-ink);font-variant:normal;letter-spacing:0}
.lead__title{font-size:var(--step-3);margin:var(--s-2) 0 10px;text-wrap:balance}
.lead__title a{color:var(--ink)}
.lead__title a:hover{color:var(--oxblood)}
.lead__standfirst{color:var(--sepia)}
.lead__standfirst p+p{margin-top:var(--s-2)}
.lead__foot{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);flex-wrap:wrap}
.readlink{display:inline-block;margin-top:0;color:var(--gold-ink);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;border-bottom:1px solid var(--gold)}
.readlink:hover{color:var(--oxblood)}
.mini-list li{padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.mini-list li:first-child{padding-top:var(--s-2)}
.hero-split__rail .eyebrow{margin-bottom:16px}
.hero-split__rail .mini-list li:first-child{padding-top:var(--s-3)}
.mini-list li:last-child{border-bottom:0}
.mini{display:grid;grid-template-columns:2.1rem 1fr;gap:var(--s-2)}
.mini__num{font-family:var(--font-display);font-size:var(--step-1);color:var(--gold-ink);line-height:1.2}
/* Thumbnail variant: a small square image (or the same fallback icon used
   by the card/plate components) in place of the ranked number. */
.mini--thumbnail{grid-template-columns:4.5rem 1fr;align-items:center}
/* .mini__thumb also carries .skeleton-placeholder, whose own base rule
   (declared later in this file) sets width/height:100% — the extra type
   selector here is needed so this fixed size actually wins over that. */
span.mini__thumb{width:4.5rem;height:4.5rem;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,var(--aged))}
.mini__thumb img{width:100%;height:100%;object-fit:cover}
.mini__thumb svg{width:100%;height:100%;color:var(--gold);opacity:.5}
.mini__meta{display:block;color:var(--sepia);font-size:.78rem;line-height:1em}
.mini__title{font-family:var(--font-display);font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--ink);display:block;margin-bottom:.15rem;transition:color .2s ease}
.mini:hover .mini__title{color:var(--oxblood)}

/* ==========================================================================
   Grids / cards
   ========================================================================== */
.grid{display:grid;gap:var(--s-3)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--eras{grid-template-columns:repeat(3,1fr)}
.grid--must{grid-template-columns:repeat(2,1fr)}
.grid--cats{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.grid--standards{grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.doublerule{border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:3px}

.era-card{position:relative;display:block;padding:var(--s-3);background:transparent;transition:outline-color .2s ease}
.era-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transition:background-color .2s ease}
.era-card:hover{outline-color:var(--gold)}
.era-card:hover::before{background:var(--oxblood)}
.era-card__name{font-family:var(--font-display);font-size:var(--step-1);color:var(--ink);line-height:1.2}
.era-card__range{display:block;color:var(--sepia);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:.8rem}
.era-card__count{display:block;color:var(--gold-ink);font-size:.85rem;margin-top:var(--s-1)}

.card{display:flex;flex-direction:column;background:var(--aged);padding:var(--s-3);transition:transform .2s ease,outline-color .2s ease}
.card__plate{aspect-ratio:var(--content-aspect-ratio);background:color-mix(in srgb,var(--ink) 7%,var(--aged));border:0;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:center;margin:calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3);overflow:hidden}
.card__plate img{width:100%;height:100%;object-fit:cover}
.card__plate .plate-art{padding:var(--s-3) var(--s-4)}
.card:hover .plate-art{opacity:.72}
.plate-art{transition:opacity .25s ease}
.card__meta{display:block;color:var(--sepia);letter-spacing:.16em}
.card__title{font-size:var(--step-1);line-height:1.24;margin:var(--s-1) 0 var(--s-2);text-wrap:balance}
.card__title a{color:var(--ink)}
.card__title a:hover{color:var(--oxblood)}
.card__excerpt{color:var(--sepia);font-size:.97rem;line-height:1.62;text-wrap:pretty;margin-bottom:var(--s-3)}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--rule)}
.card__tags{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.tag{display:inline-block;padding:.05rem .45rem;border:1px solid var(--rule);color:var(--gold-ink);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:.78rem}
.tag:hover{border-color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
	.card:hover{transform:translateY(-3px);outline-color:var(--gold)}
}
.no-posts-notice{max-width:600px;margin:0 auto;padding:var(--s-2) var(--s-3);text-align:center;background:var(--aged);color:var(--sepia);border:1px solid var(--rule-strong)}
.ghost-row{display:flex;justify-content:center;margin-top:var(--s-4)}
.btn-ghost{display:inline-block;padding:.7rem 2rem;border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:3px;color:var(--ink);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1)}
.btn-ghost:hover{outline-color:var(--gold);color:var(--oxblood)}

/* Archive search — shared by search.php (so a visitor can refine a search
   from the results page) and the Search block below (for a dedicated
   Search page). Deliberately NOT on archive.php/index.php any more — those
   listing pages point people to the Search page instead of each carrying
   their own box. */
.archive-search{display:flex;max-width:32rem;margin:var(--s-3) 0 var(--s-4)}
.archive-search__input{flex:1;min-width:0;background:transparent;border:1px solid var(--rule-strong);border-right:0;color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);padding:.65rem .9rem}
.archive-search__input::placeholder{color:var(--sepia);opacity:.8}
.archive-search__btn{display:inline-flex;align-items:center;justify-content:center;width:3rem;border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:-4px;color:var(--ink)}
.archive-search__btn:hover{outline-color:var(--gold);color:var(--oxblood)}
.archive-search__btn svg{width:18px;height:18px}
.archive-title span{color:var(--gold-ink)}

/* Search filter tabs — Category/Era/Tags pills built from whatever the
   current search actually matched (see hi_search_facets()), sitting
   between the search box and the results grid on search.php. */
.search-filters{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.search-filters__group{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.search-filters__label{color:var(--sepia);flex-shrink:0;width:5rem}
.search-filters__pills{display:flex;flex-wrap:wrap;gap:.5rem}

/* ==========================================================================
   Archive filter drawer — Archive/Category/Tag/Era pages. An off-canvas
   panel (search, sort, Category, Era, multi-select Tags) rather than an
   always-visible sidebar, so it doesn't compete with the post grid for
   width on what's otherwise a simple listing page.
   ========================================================================== */
.archive-filters-toggle{width:auto;gap:.5rem;padding:.45rem .9rem;border:1px solid var(--rule-strong)}
.archive-filters-toggle svg{width:18px;height:18px}
.archive-filters{position:fixed;inset:0;z-index:50;visibility:hidden}
.archive-filters[data-open="true"]{visibility:visible}
.archive-filters__backdrop{position:absolute;inset:0;background:rgba(20,12,10,.55);opacity:0;transition:opacity .25s ease}
.archive-filters[data-open="true"] .archive-filters__backdrop{opacity:1}
.archive-filters__panel{position:absolute;top:0;right:0;bottom:0;width:min(90vw,380px);background:var(--parchment);border-left:1px solid var(--rule-strong);overflow-y:auto;padding:var(--s-4);transform:translateX(100%);transition:transform .3s ease}
.archive-filters[data-open="true"] .archive-filters__panel{transform:translateX(0)}
.archive-filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.archive-filters__title{font-size:var(--step-0);color:var(--ink)}
.archive-filters__form{display:flex;flex-direction:column;gap:var(--s-3)}
.archive-filters__field{margin:0;padding:0;border:0}
.archive-filters__field label,.archive-filters__field legend{display:block;margin-bottom:.4rem;font-family:var(--font-display);color:var(--ink);padding:0}
.archive-filters__field input[type="search"],.archive-filters__field select{width:100%;background:transparent;border:1px solid var(--rule-strong);color:var(--ink);font-family:var(--font-body);font-size:var(--step--1);padding:.6rem .75rem}
.archive-filters__tags{display:flex;flex-direction:column;gap:.5rem;max-height:220px;overflow-y:auto;border:1px solid var(--rule);padding:var(--s-2)}
.archive-filters__tag{display:flex;align-items:center;gap:.5rem;font-size:var(--step--1);color:var(--sepia);cursor:pointer}
.archive-filters__actions{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2)}
.archive-filters__clear{color:var(--sepia);font-size:var(--step--1);border-bottom:1px solid var(--rule-strong)}
.archive-filters__clear:hover{color:var(--oxblood);border-color:var(--oxblood)}
body.has-open-drawer{overflow:hidden}

/* ==========================================================================
   Search block — a dedicated Search page: heading, description, and the
   same .archive-search box used on the search-results page itself.
   ========================================================================== */
.search-block{padding:var(--s-5) 0 0}
.search-block__intro{width:min(100%,var(--measure));margin:0 auto var(--s-2)}
.search-block__heading{font-size:var(--step-3)}
.search-block__description{color:var(--sepia);margin-top:var(--s-2)}
/* max-width:none overrides .archive-search's own 32rem cap — without it,
   the search box rendered narrower than .search-block__intro above it, so
   the two ended up with different left edges once both were centered
   (neither reading as aligned nor as a deliberate contrast). */
.search-block .archive-search{width:min(100%,var(--measure));max-width:none;margin-left:auto;margin-right:auto}

/* ==========================================================================
   Must-read
   ========================================================================== */
.must{position:relative;display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:3px;background:transparent;transition:outline-color .2s ease}
.must:hover{outline-color:var(--gold)}
/* No aspect-ratio here, deliberately — .must__media is a grid item that
   already stretches to match .must__content's height (grid's default
   align-items:stretch); combining that stretch with an aspect-ratio left
   the image sized to the ratio instead of the taller stretched box, so it
   rendered small and centered with visible gaps above/below. */
.must__media{position:relative;background:color-mix(in srgb,var(--ink) 7%,var(--aged));display:flex;align-items:center;justify-content:center;overflow:hidden}
.must__media .plate-badge{padding:.3rem .5rem}
.must__media img{width:100%;height:100%;object-fit:cover}
.must__media svg{width:100%;height:100%;color:var(--gold);opacity:.5}
.must__content{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.must__title{font-size:var(--step-1);line-height:1.26;text-wrap:balance}
.must__title a{color:var(--ink)}
.must__title a:hover{color:var(--oxblood)}
.must__excerpt{color:var(--sepia);font-size:.95rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ==========================================================================
   Categories
   ========================================================================== */
.cat__media{position:relative;aspect-ratio:var(--content-aspect-ratio);background:color-mix(in srgb,var(--ink) 7%,var(--aged));display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:var(--s-3)}
.cat__media .plate-badge{top:var(--s-2);left:var(--s-2)}
.cat__media img{width:100%;height:100%;object-fit:cover}
.cat__media svg{width:100%;height:100%;color:var(--gold);opacity:.5}
.cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
.cat__name{font-family:var(--font-display);font-size:var(--step-2)}
.cat__count{color:var(--sepia);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:.8rem}
.cat__list{margin-top:var(--s-2)}
.cat__list li{padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.cat__list li:last-child{border-bottom:0}
.cat__link{display:block;font-family:var(--font-display);font-size:1.02rem;line-height:1.3}
.cat__date{display:block;margin-top:.35rem;color:var(--sepia);font-size:.78rem;letter-spacing:.06em}
.cat__more{display:inline-block;margin-top:var(--s-2);color:var(--gold-ink);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1);border-bottom:1px solid var(--gold)}
.cat__more:hover{color:var(--oxblood)}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.subscribe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:center;border-top:1px solid var(--gold);padding:var(--s-4) 0;margin-top:var(--s-5)}
/* The newsletter section always sits directly above the footer (see
   footer.php), so its own bottom rule would just duplicate the footer's
   top rule with an oversized gap between them — collapse that gap here
   instead of stacking two dividers. */
.subscribe + .site-footer{margin-top:0}
.subscribe h2{font-size:var(--step-2)}
.subscribe p{color:var(--sepia);margin-top:var(--s-2);max-width:46ch}
.subscribe__form{display:flex;gap:var(--s-2);flex-wrap:wrap}
.subscribe__input{flex:1;min-width:200px;background:transparent;border:1px solid var(--rule-strong);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);padding:.65rem .8rem}
.subscribe__input::placeholder{color:var(--sepia);opacity:.8}
.subscribe__btn{border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:3px;padding:.65rem 1.4rem;color:var(--ink);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1)}
.subscribe__btn:hover{outline-color:var(--gold);color:var(--oxblood)}
.subscribe__notice{margin-top:var(--s-2);color:var(--gold-ink);font-size:var(--step--1)}

/* ==========================================================================
   Ad slot
   ========================================================================== */
.ad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);border:1px dashed var(--rule-strong);background:color-mix(in srgb,var(--ink) 4%,var(--aged));color:var(--sepia);text-align:center;padding:var(--s-3);overflow:hidden}
.ad img{width:100%;height:100%;object-fit:cover}
.ad__label{font-variant:small-caps;text-transform:lowercase;letter-spacing:.16em;font-size:.75rem}
.ad__size{font-size:.72rem;letter-spacing:.06em;opacity:.75}
.ad--leaderboard{min-height:120px}
.ad--rail{min-height:280px}
.ad--footer{min-height:104px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--gold);margin-top:var(--s-6);padding:var(--s-5) 0 var(--s-4)}
/* --footer-cols (set inline, per-page, from the actual number of assigned
   footer menu locations) keeps the grid at exactly that many columns —
   e.g. 2 assigned menus is a 3-column grid (logo + 2), not a 4-column grid
   with an empty trailing track. The mobile/tablet media queries below
   still hard-override this with their own fixed column counts, since they
   don't reference the variable at all. */
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(var(--footer-cols, 3),1fr);gap:var(--s-4)}
.footer-head{display:block;color:var(--sepia);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1);margin-bottom:var(--s-2)}
.footer-blurb{max-width:36ch;color:var(--sepia);margin-top:var(--s-2)}
.footer-links li a{display:block;padding:.18rem 0;color:var(--sepia)}
.footer-links li a:hover{color:var(--gold-ink)}
.footer-social{display:flex;gap:var(--s-2);margin-top:var(--s-2)}
.colophon{border-top:1px solid var(--rule);margin-top:var(--s-4);padding-top:var(--s-3);text-align:center;color:var(--sepia)}

/* ==========================================================================
   Skeleton lazy-load images (shared component)
   ========================================================================== */
.skeleton-placeholder{position:relative;overflow:hidden;width:100%;height:100%;background:color-mix(in srgb,var(--ink) 7%,var(--aged))}
.skeleton-placeholder::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 18%,transparent),transparent);background-size:200% 100%;animation:skeleton-loading 1.4s ease-in-out infinite}
.skeleton-placeholder img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;position:relative}
.skeleton-placeholder img.loaded{opacity:1}
.skeleton-placeholder:has(img.loaded)::before{display:none}
@keyframes skeleton-loading{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ==========================================================================
   404
   ========================================================================== */
.error-404{text-align:center;padding:var(--s-6) 0;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.error-404__code{font-family:var(--font-display);font-size:var(--step-4);color:var(--gold-ink)}
.error-404__title{font-size:var(--step-2);margin-top:var(--s-2)}
.error-404__message{color:var(--sepia);max-width:46ch;margin:var(--s-2) auto 0}
.error-404__actions{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap;margin-top:var(--s-4)}
.error-404__search{max-width:420px;width:100%;margin-top:var(--s-4)}
.error-404__search input[type="search"]{width:100%;background:transparent;border:1px solid var(--rule-strong);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);padding:.65rem .8rem}

/* ==========================================================================
   Standard post content (single/page)

   .page-content (page.php/legal.php, no sidebar) keeps the old approach:
   each element centers itself at the narrow reading measure. Single posts
   have a sidebar now, so the two-column grid does that width-constraining
   job instead — individual elements inside it just fill their column.
   ========================================================================== */
.single-post-container,.page-content{padding:var(--s-5) 0}
/* The Contact page's last block (Contact Info) already ends flush with its
   own content — no closing prose paragraph like other pages have — so
   .page-content's usual bottom padding just reads as a dead gap before the
   footer. Scoped to pages containing the Contact Form block, not removed
   globally. */
.page-content:has(.contact-block){padding-bottom:0}
.page-title{width:min(100% - 2.5rem,var(--measure));margin-inline:auto}
.page-content>article>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,pre,table,figure,hr){width:min(100% - 2.5rem,var(--measure));margin-inline:auto}
.single-post-title,.page-title{font-size:var(--step-3);margin-bottom:var(--s-2)}
.single-post-kicker{margin-top:0;margin-bottom:var(--s-2)}
.single-post-meta{color:var(--sepia);margin-bottom:var(--s-3)}
/* The hero image spans the full width above the two-column split below it. */
.single-post-thumbnail{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;margin-bottom:var(--s-4)}
.single-post-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (max-width:900px){
	/* minmax(0, 1fr), not bare 1fr — a bare 1fr track won't shrink below its
	   content's min-content size, so a wide unbreakable child (a <pre> code
	   block, an unwrapped table) blows the whole grid out past the viewport
	   instead of scrolling inside itself. */
	.single-post-layout{grid-template-columns:minmax(0,1fr)}
}
/* .page-content>article>*+*, not .page-content>*+* — the_content() sits
   directly inside <article> with no wrapper div of its own (unlike single
   posts, where .single-post-content is that wrapper), so the article
   itself is the right level for "space every prose element from the one
   before it". Gives a plain Page (Privacy Policy, Terms, ...) the same
   heading/paragraph/link polish a single post already has, instead of
   flat, unstyled default browser spacing between every element.
   .mce-content-body repeats it all again — that's TinyMCE's own content
   root class (used by the "Classic" block/old Classic Editor), a separate
   iframe/document from the block editor's .editor-styles-wrapper, so
   neither of those two prior fixes reaches it; without this, a Classic
   block shows every heading/paragraph flush together with no spacing. */
.single-post-content>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,pre,table,figure,hr)+*,.page-content>article>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,pre,table,figure,hr)+*,.mce-content-body>*+*{margin-top:var(--s-2)}
/* Scoped to links inside actual prose tags (p, li, blockquote, table cell,
   ...) directly in the content flow — not bare ".page-content a", which
   matches literally any link anywhere on a Page, including every custom
   block's own links (Hero, Featured Story, the mini rail, card titles,
   ...). Every WP Page (About, Archive, the homepage itself) renders
   through page.php's <main class="page-content">, so that version was
   underlining every block's links site-wide, not just hand-typed prose
   links in a plain page like a Privacy Policy. */
.single-post-content>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,pre,table,figure,hr) a,.page-content>article>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,pre,table,figure,hr) a,.mce-content-body a{border-bottom:1px solid var(--gold)}
/* Direct-child only (.page-content>article>h2, not .page-content h2) —
   a bare ".page-content h2" also matches every custom block's own <h2>
   (Must Read, Categories, Newsletter, ... every "eyebrow" heading is an
   h2 nested a few levels inside a <section>), overriding .eyebrow's own
   margin-bottom via higher specificity and silently squashing the
   established spacing under every section heading site-wide. A genuine
   prose heading the page author typed sits directly under <article>. */
.single-post-content>h2,.single-post-content>h3,.single-post-content>h4,.page-content>article>h2,.page-content>article>h3,.page-content>article>h4,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4{margin-top:var(--s-4);margin-bottom:var(--s-1)}
.single-post-content>h2,.page-content>article>h2,.mce-content-body h2{font-size:var(--step-2)}
.single-post-content>h3,.page-content>article>h3,.mce-content-body h3{font-size:var(--step-1)}
.single-post-content>h4,.page-content>article>h4,.mce-content-body h4{font-size:1.05rem}
.single-post-content>blockquote,.page-content>article>blockquote,.mce-content-body blockquote{border-left:3px solid var(--gold);margin-left:8px;padding-left:8px;font-family:var(--font-display);font-style:italic;color:var(--sepia);font-size:var(--step-1);line-height:1.5}
/* pre defaults to white-space:pre (no wrapping), so an unbroken code line
   used to force this whole column — and the mobile grid track sizing it —
   wider than the viewport. pre-wrap lets it wrap like normal text while still
   preserving the author's line breaks/indentation; overflow-x is a fallback
   for a genuinely unbreakable single token (a long URL with no spaces). */
.single-post-content pre,.page-content pre{background:color-mix(in srgb,var(--ink) 6%,var(--aged));border:1px solid var(--rule);padding:var(--s-2) var(--s-3);overflow-x:auto;white-space:pre-wrap;overflow-wrap:break-word;font-size:.9rem;line-height:1.6}
.single-post-content table,.page-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The site-wide ul{list-style:none} reset is meant for nav/UI lists
   (footer links, the "mini" rail, tag rows, ...) — actual post content
   needs its bullets/numbers back, or a list just reads as unmarked lines. */
/* Native decimal/disc markers don't share a consistent width or alignment
   (a "1." sits differently than a "•"), so bullet and numbered lists never
   quite line up against each other. Custom counters give both the same
   fixed text-start position, and right-aligning the numbers keeps "1."
   through "11." flush against the text instead of drifting left. */
/* margin-top deliberately omitted — .single-post-content>*+* below supplies
   it, so lists get the same top spacing as every other sibling element.
   margin-bottom still needs zeroing since ol has no base reset the way ul
   does (see the ul{} rule near the top of this file); left/right use auto,
   not 0 — on a plain Page (.page-content has no width constraint of its
   own, unlike .single-post-content which is already a narrow grid column),
   a list is individually width-capped to var(--measure) by the :where(...)
   rule below and needs its own margin-inline:auto to actually center
   inside the full-width .page-content, matching the paragraph/heading
   above and below it. (auto resolves to 0 when the parent is already
   exactly that width, so this changes nothing for .single-post-content.) */
/* :not(.mini-list):not(.cat__list) excludes the theme's own UI lists —
   .page-content is the whole <main>, so custom blocks (Featured Story's
   "mini" rail, Categories Showcase) sit inside it too and would otherwise
   pick up prose bullets/numbers meant only for real WYSIWYG-authored lists.
   .editor-styles-wrapper repeats every selector here — it's the wrapper
   add_editor_style() (see settings/support.php) puts around content inside
   the block editor's canvas, which has neither .single-post-content nor
   .page-content as an ancestor, so without it these rules (and therefore
   any bullets/numbers at all) silently never applied while editing. */
.single-post-content ul:not(.mini-list):not(.cat__list),.page-content ul:not(.mini-list):not(.cat__list),.editor-styles-wrapper ul:not(.mini-list):not(.cat__list),.mce-content-body ul,.single-post-content ol,.page-content ol,.editor-styles-wrapper ol,.mce-content-body ol{list-style:none;padding:0;margin-right:auto;margin-bottom:0;margin-left:auto}
.single-post-content ul:not(.mini-list):not(.cat__list) li,.page-content ul:not(.mini-list):not(.cat__list) li,.editor-styles-wrapper ul:not(.mini-list):not(.cat__list) li,.mce-content-body ul li,.single-post-content ol li,.page-content ol li,.editor-styles-wrapper ol li,.mce-content-body ol li{position:relative;padding-left:1.6em}
.single-post-content ul:not(.mini-list):not(.cat__list) li::before,.page-content ul:not(.mini-list):not(.cat__list) li::before,.editor-styles-wrapper ul:not(.mini-list):not(.cat__list) li::before,.mce-content-body ul li::before{content:"•";position:absolute;left:.3em;color:var(--gold-ink)}
.single-post-content ol,.page-content ol,.editor-styles-wrapper ol,.mce-content-body ol{counter-reset:hi-ol}
.single-post-content ol li,.page-content ol li,.editor-styles-wrapper ol li,.mce-content-body ol li{counter-increment:hi-ol}
.single-post-content ol li::before,.page-content ol li::before,.editor-styles-wrapper ol li::before,.mce-content-body ol li::before{content:counter(hi-ol) ".";position:absolute;left:0;width:1.2em;text-align:right;color:var(--gold-ink);font-weight:600}
.single-post-content ul:not(.mini-list):not(.cat__list) li+li,.page-content ul:not(.mini-list):not(.cat__list) li+li,.editor-styles-wrapper ul:not(.mini-list):not(.cat__list) li+li,.mce-content-body ul li+li,.single-post-content ol li+li,.page-content ol li+li,.editor-styles-wrapper ol li+li,.mce-content-body ol li+li{margin-top:.4em}
.single-post-content img{border:1px solid var(--rule)}
.single-post-content figcaption{color:var(--sepia);font-size:var(--step--1);text-align:center;margin-top:var(--s-1)}
.single-post-content hr{border:0;border-top:1px solid var(--rule)}
.single-post-content .wp-block-table{overflow-x:auto}
.single-post-content table{width:100%;border-collapse:collapse;font-size:.97rem}
.single-post-content th,.single-post-content td{padding:.65rem 1rem;text-align:left;border-bottom:1px solid var(--rule)}
.single-post-content th{font-family:var(--font-display);font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,var(--aged));border-bottom:2px solid var(--gold)}
.single-post-content th:first-child,.single-post-content td:first-child{padding-left:1rem}
.single-post-content td{color:var(--sepia)}
.single-post-content tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 3%,transparent)}
.single-post-content tbody tr:last-child td{border-bottom:0}
.single-post-tags{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-4)}

/* Prev/next post navigation */
.single-post-nav{margin-top:var(--s-5);border-top:1px solid var(--rule);padding-top:var(--s-4)}
.single-post-nav .nav-links{display:flex;justify-content:space-between;gap:var(--s-3)}
.single-post-nav .nav-previous,.single-post-nav .nav-next{max-width:48%}
.single-post-nav .nav-next{text-align:right;margin-left:auto}
/* The label ("Previous"/"Next") and title live inside the same <a>, one
   level deeper than .nav-previous/.nav-next — display:block here (not
   flex on the wrapper, which never reaches this element) is what actually
   pushes the title onto its own line. */
.single-post-nav__title{display:block;margin-top:.3rem;font-family:var(--font-display);font-size:1.05rem;color:var(--ink);transition:color .2s ease}
.single-post-nav a:hover .single-post-nav__title{color:var(--oxblood)}

/* Sidebar (Category / Era / More posts) */
.single-post-sidebar{display:flex;flex-direction:column;gap:var(--s-4)}
/* Sticky only above the breakpoint where the layout is actually two columns
   (see the max-width:900px rule below that collapses .single-post-layout to
   one column) — a sticky sidebar makes no sense once it's stacked under the
   article instead of beside it. --s-6 clears the sticky site header (~67px
   tall) with room to spare. */
@media (min-width:901px){
	.single-post-sidebar{position:sticky;top:var(--s-6);align-self:start}
}
/* Same reasoning as .single-post-sidebar-more .eyebrow: the 40px default is
   sized for full-width homepage sections, not this compact sidebar. */
.single-post-sidebar-box .eyebrow{margin-bottom:var(--s-2)}
/* No padding-top here — Category, Era, and More Posts are spaced solely by
   .single-post-sidebar's own flex gap above, so all three gaps match. */
/* .eyebrow's site-wide margin-bottom (40px) is sized for full-width homepage
   sections — in this narrow sidebar column the same gap reads as too much
   air between the heading and the first post. Scoped here only, so the
   homepage's own eyebrow headings are unaffected. */
.single-post-sidebar-more .eyebrow{margin-bottom:var(--s-2)}
/* .mini-list's own :first-child rule trims the first item's top padding,
   assuming it directly follows a heading with its own bottom margin
   (true on the homepage rail) — here that just makes item 01 sit closer
   to its divider than items 02/03 sit to theirs. Keep all three even. */
.single-post-sidebar-more .mini-list li:first-child{padding-top:var(--s-3)}

.single-post-comments{margin-top:var(--s-5)}

/* ==========================================================================
   About page blocks — Mission, Editorial Standards, Team
   ========================================================================== */
/* padding-top only, no bottom — matches .section's convention (see the
   "Eyebrow / section heads" block above): each section only pushes itself
   away from whatever comes before it, so two of these back-to-back get one
   gap, not two stacked ones. */
.mission{padding:var(--s-5) 0 0}
/* min(100%, ...), not min(100% - 2.5rem, ...) — these already sit inside a
   .wrap ancestor (<section class="mission wrap">), which has already
   applied that 2.5rem gutter. Subtracting it again here doubled the
   horizontal margin on mobile, where .wrap's own "100% - 2.5rem" branch is
   the one actually in effect (on desktop .wrap is capped at var(--wrap)
   long before this matters, which is why the bug wasn't obvious there). */
.mission__kicker{display:block;width:min(100%,var(--measure));margin:0 auto var(--s-2);color:var(--sepia)}
.mission__title{width:min(100%,var(--measure));margin:0 auto var(--s-3);font-size:var(--step-3)}
.mission__body{width:min(100%,var(--measure));margin-inline:auto;color:var(--sepia);font-size:var(--step-0);line-height:1.75}
.mission__body>*+*{margin-top:var(--s-2)}

.standards{padding:var(--s-5) 0 0}
/* Everything in Standards/Team shares this one centered column — same
   width as .mission__body — so the page reads as a single consistent
   container instead of the heading/intro sitting narrow while the grid
   below stretches to the full-width .wrap. */
.standards>.section-head,.standards__intro,.grid--standards,.team>.section-head,.grid--team{width:min(100%,var(--measure));margin-inline:auto}
.standards__intro{color:var(--sepia);margin-bottom:var(--s-4)}
.standards__item{display:flex;flex-direction:column;gap:var(--s-1)}
.standards__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--rule-strong);border-radius:50%;color:var(--gold-ink);margin-bottom:var(--s-2)}
.standards__icon svg{width:22px;height:22px}
.standards__item-title{font-family:var(--font-display);font-size:var(--step-0);color:var(--ink)}
.standards__item-desc{color:var(--sepia);font-size:.92rem;line-height:1.6}

.team{padding:var(--s-5) 0 0}
/* flex, not grid — a grid with fixed columns leaves dead empty tracks when
   there are fewer members than columns (e.g. one contributor stretched
   across a 3-column row); flex-wrap lets each card size to its own content
   and only wrap when there's enough people to need a new row. */
.grid--team{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.team-member{flex:0 1 260px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.team-member__photo{display:block;width:88px;height:88px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,var(--aged));margin-bottom:var(--s-1)}
.team-member__photo img{width:100%;height:100%;object-fit:cover}
.team-member__photo svg{width:100%;height:100%;color:var(--gold);opacity:.5}
.team-member__name{font-family:var(--font-display);font-size:var(--step-1);color:var(--ink)}
.team-member__role{color:var(--gold-ink)}
.team-member__bio{color:var(--sepia);font-size:.92rem;line-height:1.6}

/* ==========================================================================
   Contact Info block
   ========================================================================== */
.contact-info{padding:var(--s-5) 0 0}
/* Same centered column as .contact-block__form (see below) and the About
   page's Mission/Standards/Team, so Contact Info lines up with whatever
   else shares the page instead of spanning the full-width .wrap. */
.contact-info>.section-head,.grid--contact-info{width:min(100%,var(--measure));margin-inline:auto}
.grid--contact-info{gap:var(--s-4)}
.contact-info__item{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.contact-info__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--rule-strong);border-radius:50%;color:var(--gold-ink);margin-bottom:var(--s-1)}
.contact-info__icon svg{width:22px;height:22px}
.contact-info__label{display:block;color:var(--sepia)}
.contact-info__value{font-family:var(--font-display);font-size:var(--step-0);color:var(--ink)}
a.contact-info__value:hover{color:var(--oxblood)}

/* ==========================================================================
   Contact Form block
   ========================================================================== */
/* No top padding of its own — .page-content (the page wrapper) already
   supplies a top gap, and this block is always the first thing on the
   Contact page, so its own padding-top was just stacking a second gap on
   top of that one. */
.contact-block{padding:0}
.contact-block__intro{width:min(100%,var(--measure));margin:0 auto var(--s-4)}
.contact-block__heading{font-size:var(--step-3);margin-bottom:var(--s-2)}
.contact-block__description{color:var(--sepia)}
.contact-block__email{display:inline-block;margin-top:var(--s-2);color:var(--gold-ink);border-bottom:1px solid var(--gold)}
.contact-block__email:hover{color:var(--oxblood)}
.contact-block__notice{margin-top:var(--s-3);font-size:var(--step--1)}
.contact-block__notice--success{color:var(--gold-ink)}
.contact-block__notice--error{color:var(--oxblood)}

.contact-block__form{width:min(100%,var(--measure));margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.contact-block__field{margin:0}
.contact-block__field--full{grid-column:1 / -1}
.contact-block__field label{display:block;margin-bottom:.4rem;font-family:var(--font-display);color:var(--ink)}
.contact-block__field .required{color:var(--oxblood)}
.contact-block__field input,.contact-block__field textarea{width:100%;background:transparent;border:1px solid var(--rule-strong);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);padding:.65rem .8rem}
.contact-block__field input::placeholder,.contact-block__field textarea::placeholder{color:var(--sepia);opacity:.8}
.contact-block__field textarea{resize:vertical;min-height:140px}
.contact-block__submit{grid-column:1 / -1;justify-self:start;border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:3px;padding:.65rem 1.4rem;color:var(--ink);background:transparent;font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1)}
.contact-block__submit:hover{outline-color:var(--gold);color:var(--oxblood)}

/* ==========================================================================
   Comments — WordPress core's default comment template (this theme has no
   comments.php override), styled to match the rest of the reading column.
   ========================================================================== */
#comments,.comment-respond,.comment-navigation,.comments-title{width:min(100%,var(--measure));margin-inline:auto}
/* Only when .comment-respond directly follows the list of existing comments
   — i.e. there are comments to separate the form from. No divider appears
   when a post has zero comments and the form has nothing above it. */
.comment-list+.comment-respond{border-top:1px solid var(--rule);margin-top:var(--s-4);padding-top:var(--s-4)}
.comments-title,.comment-reply-title{font-size:var(--step-2);margin-bottom:var(--s-3)}
.comment-reply-title small{margin-left:var(--s-2)}
.comment-reply-title small a{font-size:var(--step--1);color:var(--sepia);border-bottom:1px solid var(--gold)}
.comment-notes,.logged-in-as{color:var(--sepia);margin-bottom:var(--s-3)}
.logged-in-as a{border-bottom:1px solid var(--gold)}
.comment-form p{margin-top:var(--s-3)}
.comment-form p:first-child{margin-top:0}
.comment-form label{display:block;margin-bottom:.4rem;font-family:var(--font-display);color:var(--ink)}
.comment-form .required{color:var(--oxblood)}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;background:transparent;border:1px solid var(--rule-strong);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);padding:.65rem .8rem}
.comment-form textarea{min-height:140px;resize:vertical}
.comment-form-cookies-consent{display:flex;align-items:center;gap:.5em}
.comment-form-cookies-consent label{margin:0;font-family:var(--font-body);font-size:var(--step--1);color:var(--sepia)}
.form-submit{margin-top:var(--s-2)}
#submit{border:1px solid var(--rule-strong);outline:1px solid var(--rule);outline-offset:3px;padding:.65rem 1.4rem;color:var(--ink);background:transparent;font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1)}
#submit:hover{outline-color:var(--gold);color:var(--oxblood)}

.comment-list{list-style:none;width:min(100%,var(--measure));margin:var(--s-4) auto 0;padding:0}
.comment-list .comment,.comment-list .pingback{border-top:1px solid var(--rule);padding:var(--s-3) 0}
.comment-list>li:first-child{border-top:0;padding-top:0}
.comment-author{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1)}
.comment-author .avatar{border-radius:50%;display:block}
.comment-author .fn{font-family:var(--font-display);font-style:normal;color:var(--ink)}
.comment-author .says{display:none}
.comment-metadata{color:var(--sepia);font-size:.85rem;margin-bottom:var(--s-2)}
.comment-metadata a{color:inherit}
.comment-content p{margin-top:var(--s-1)}
.comment-content p:first-child{margin-top:0}
.reply{margin-top:var(--s-2)}
.comment-reply-link{color:var(--gold-ink);font-variant:small-caps;text-transform:lowercase;letter-spacing:.13em;font-size:var(--step--1);border-bottom:1px solid var(--gold)}
.comment-reply-link:hover{color:var(--oxblood)}
.children{list-style:none;margin:var(--s-3) 0 0;padding-left:var(--s-4);border-left:1px solid var(--rule)}
.comment-awaiting-moderation{display:block;color:var(--gold-ink);font-size:.85rem;margin-top:var(--s-1)}
.no-comments{color:var(--sepia)}
.comment-navigation{display:flex;justify-content:space-between;margin-top:var(--s-3);color:var(--sepia)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
	.grid--3,.grid--eras,.grid--must,.grid--cats,.grid--standards{grid-template-columns:repeat(2,1fr)}
	.footer-grid{grid-template-columns:1fr 1fr}
	.hero-split{grid-template-columns:1fr}
	.feature-split{grid-template-columns:1fr}
	.feature-split__media,.feature-split--reverse .feature-split__media{order:0}
	.feature-split__content,.feature-split--reverse .feature-split__content{order:1}
	.hero-split__rail{padding-top:var(--s-3)}
	.subscribe{grid-template-columns:1fr}
	.contact-block__form{grid-template-columns:1fr}
}
@media (max-width:768px){
	.hamburger{display:inline-flex}
	/* visibility, not display:none — display can't be transitioned, so the
	   menu used to just snap open/closed instantly. visibility is paired
	   with a delay so it still behaves correctly for keyboard/assistive
	   tech: opening drops the delay to 0 (visible immediately, then fades
	   /slides in), closing keeps it visible for the full transition
	   duration so the close animation is seen before it actually leaves
	   the accessibility tree. */
	.site-nav{position:absolute;top:100%;left:0;right:0;background:var(--parchment);border-bottom:1px solid var(--rule);padding:var(--s-2) 1.25rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
	.site-nav[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .25s ease,transform .25s ease,visibility 0s linear 0s}
	@media (prefers-reduced-motion:reduce){
		.site-nav{transition:opacity 0s,visibility 0s;transform:none}
		.site-nav[data-open="true"]{transition:opacity 0s,visibility 0s}
	}
	.site-nav ul{flex-direction:column;align-items:flex-start;gap:0}
	.site-nav a{display:block;padding:.5rem 0}
	.site-header__inner{gap:var(--s-2)}
	.tools{margin-left:auto}
	.grid--3,.grid--eras,.grid--cats,.grid--standards{grid-template-columns:1fr}
	/* Must Read becomes a horizontal, swipeable slider instead of a stacked
	   column — scroll-snap only, no JS/library, so it works the same as any
	   native scrollable area (keyboard, trackpad, touch). Each card is 85%
	   wide so the next one peeks in at the edge as a "there's more" hint. */
	.grid--must{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);padding-bottom:var(--s-2)}
	.grid--must .must{flex:0 0 85%;scroll-snap-align:start}
	.must{grid-template-columns:1fr;padding:1rem}
	.team-member{flex-basis:100%}
	.lead__plate .plate-art{padding:var(--s-3)}
	.footer-grid{grid-template-columns:1fr}
	.hero{padding:var(--s-5) 0 var(--s-4)}
	.mini-list li{padding:1rem 0}
	.lead__title{font-size:28px}
	.hero-split__rail .eyebrow{margin:0}
	.card{padding:14px}
	.card__plate{margin:-14px -14px var(--s-3)}
}