/* TGK Mini: one Lightgold reading palette with device-controlled appearance. */
:root {
  color-scheme: light;
  --canvas: #f3efe7;
  --surface: #e9e2d8;
  --text: #211f1b;
  --text-muted: #5f5a52;
  --accent: #775e40;
  --border: #92795b;
  --link: #674925;
  --link-hover: #493117;
  --link-visited: #5b4532;
  --citation: #775e40;
  --focus: #77501f;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #0d0d0c;
    --surface: #1b1b1a;
    --text: #eee8de;
    --text-muted: #c8c0b5;
    --accent: #dcb884;
    --border: #a58760;
    --link: #dcb884;
    --link-hover: #f1d5a6;
    --link-visited: #c9ae91;
    --citation: #c79b61;
    --focus: #e9c88e;
  }
}

/* Original TGK editorial hues, scoped to selected editorial elements. The page palette stays Lightgold.
   Each accent keeps only the original site's text-accent, strong-text and border-accent tokens
   (dark mode uses text-accent for both accent and ink). The allowlist is `editorialAccents` in eleventy.config.js. */
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="obsidian"] { --accent: #874a2a; --accent-ink: #874a2a; --accent-border: rgba(135, 74, 42, .38); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="violet"] { --accent: #8b6aa8; --accent-ink: #6e5c8a; --accent-border: rgba(157, 132, 198, .32); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="tyrian-purple"] { --accent: #7e315b; --accent-ink: #5e2144; --accent-border: rgba(126, 49, 91, .36); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="indigo"] { --accent: #274f87; --accent-ink: #274f87; --accent-border: rgba(39, 79, 135, .34); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="aqua"] { --accent: #9a6335; --accent-ink: #74451f; --accent-border: rgba(154, 99, 53, .34); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="black"] { --accent: #2f3942; --accent-ink: #20262c; --accent-border: rgba(47, 57, 66, .22); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="copper"] { --accent: #b96a38; --accent-ink: #a95f2e; --accent-border: rgba(209, 120, 56, .32); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="cyan"] { --accent: #0d7285; --accent-ink: #0a5f70; --accent-border: rgba(25, 165, 189, .32); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="emerald"] { --accent: #2f7f66; --accent-ink: #256b55; --accent-border: rgba(47, 127, 102, .36); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="gold"] { --accent: #8f6f24; --accent-ink: #8f6f24; --accent-border: rgba(143, 111, 36, .36); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="green"] { --accent: #6f7d1b; --accent-ink: #566014; --accent-border: rgba(132, 147, 36, .30); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="lightgold"] { --accent: #775e40; --accent-ink: #615039; --accent-border: rgba(119, 94, 64, .36); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="orange"] { --accent: #c84c1a; --accent-ink: #9e3513; --accent-border: rgba(255, 82, 27, .30); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="pale-sky"] { --accent: #4a7ea8; --accent-ink: #36546d; --accent-border: rgba(124, 174, 209, .30); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="peach"] { --accent: #a35c42; --accent-ink: #7f3f2d; --accent-border: rgba(163, 92, 66, .38); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="pink"] { --accent: #c7184a; --accent-ink: #9d153a; --accent-border: rgba(239, 71, 111, .30); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="plumwine"] { --accent: #6e3d59; --accent-ink: #5b2e47; --accent-border: rgba(110, 61, 89, .32); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="red"] { --accent: #b3161b; --accent-ink: #8f0d12; --accent-border: rgba(253, 21, 27, .30); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="signal-silver"] { --accent: #7a8899; --accent-ink: #6b7a8f; --accent-border: rgba(122, 136, 153, .32); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="teal"] { --accent: #2f6f78; --accent-ink: #1f525a; --accent-border: rgba(47, 111, 120, .36); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="the-forge"] { --accent: #8f3f68; --accent-ink: #7a3157; --accent-border: rgba(143, 63, 104, .38); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="the-vault"] { --accent: #b08a5f; --accent-ink: #6b6455; --accent-border: rgba(155, 140, 110, .32); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="white"] { --accent: #4f6479; --accent-ink: #465766; --accent-border: rgba(140, 156, 172, .22); }
:is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="yellow"] { --accent: #bf8610; --accent-ink: #9b6a09; --accent-border: rgba(255, 179, 15, .30); }
/* Ivory titles sit on a dark gradient panel over the photo; use each accent's lighter tone for its eyebrow. */
.article[data-accent="obsidian"] { --accent-on-image: #c97f50; }
.article[data-accent="violet"] { --accent-on-image: #b290f5; }
.article[data-accent="tyrian-purple"] { --accent-on-image: #c982aa; }
.article[data-accent="indigo"] { --accent-on-image: #739bd0; }
.article[data-accent="aqua"] { --accent-on-image: #e0ad78; }
.article[data-accent="black"] { --accent-on-image: #e9eef2; }
.article[data-accent="copper"] { --accent-on-image: #e8a46a; }
.article[data-accent="cyan"] { --accent-on-image: #5fd0e3; }
.article[data-accent="emerald"] { --accent-on-image: #56b28f; }
.article[data-accent="gold"] { --accent-on-image: #d9a646; }
.article[data-accent="green"] { --accent-on-image: #c8d74b; }
.article[data-accent="lightgold"] { --accent-on-image: #c79b61; }
.article[data-accent="orange"] { --accent-on-image: #ff8b59; }
.article[data-accent="pale-sky"] { --accent-on-image: #8ec2e8; }
.article[data-accent="peach"] { --accent-on-image: #cf8869; }
.article[data-accent="pink"] { --accent-on-image: #ff6f91; }
.article[data-accent="plumwine"] { --accent-on-image: #d7a6bf; }
.article[data-accent="red"] { --accent-on-image: #ff5b63; }
.article[data-accent="signal-silver"] { --accent-on-image: #b6c2d1; }
.article[data-accent="teal"] { --accent-on-image: #55adb8; }
.article[data-accent="the-forge"] { --accent-on-image: #c17fa4; }
.article[data-accent="the-vault"] { --accent-on-image: #b08a5f; }
.article[data-accent="white"] { --accent-on-image: #dce6ee; }
.article[data-accent="yellow"] { --accent-on-image: #ffca45; }
@media (prefers-color-scheme: dark) {
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="obsidian"] { --accent: #c97f50; --accent-ink: #c97f50; --accent-border: rgba(201, 127, 80, .32); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="violet"] { --accent: #b290f5; --accent-ink: #b290f5; --accent-border: rgba(157, 132, 198, .42); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="tyrian-purple"] { --accent: #c982aa; --accent-ink: #c982aa; --accent-border: rgba(201, 130, 170, .32); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="indigo"] { --accent: #739bd0; --accent-ink: #739bd0; --accent-border: rgba(115, 155, 208, .32); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="aqua"] { --accent: #e0ad78; --accent-ink: #e0ad78; --accent-border: rgba(224, 173, 120, .42); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="black"] { --accent: #e9eef2; --accent-ink: #e9eef2; --accent-border: rgba(255, 255, 255, .14); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="copper"] { --accent: #e8a46a; --accent-ink: #e8a46a; --accent-border: rgba(232, 164, 106, .42); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="cyan"] { --accent: #5fd0e3; --accent-ink: #5fd0e3; --accent-border: rgba(25, 165, 189, .40); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="emerald"] { --accent: #56b28f; --accent-ink: #56b28f; --accent-border: rgba(86, 178, 143, .32); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="gold"] { --accent: #d9a646; --accent-ink: #d9a646; --accent-border: rgba(217, 166, 70, .30); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="green"] { --accent: #c8d74b; --accent-ink: #c8d74b; --accent-border: rgba(132, 147, 36, .36); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="lightgold"] { --accent: #c79b61; --accent-ink: #c79b61; --accent-border: rgba(199, 155, 97, .30); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="orange"] { --accent: #ff8b59; --accent-ink: #ff8b59; --accent-border: rgba(255, 82, 27, .36); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="pale-sky"] { --accent: #8ec2e8; --accent-ink: #8ec2e8; --accent-border: rgba(142, 194, 232, .36); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="peach"] { --accent: #cf8869; --accent-ink: #cf8869; --accent-border: rgba(207, 136, 105, .32); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="pink"] { --accent: #ff6f91; --accent-ink: #ff6f91; --accent-border: rgba(239, 71, 111, .36); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="plumwine"] { --accent: #d7a6bf; --accent-ink: #d7a6bf; --accent-border: rgba(215, 166, 191, .40); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="red"] { --accent: #ff5b63; --accent-ink: #ff5b63; --accent-border: rgba(253, 21, 27, .36); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="signal-silver"] { --accent: #b6c2d1; --accent-ink: #b6c2d1; --accent-border: rgba(182, 194, 209, .42); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="teal"] { --accent: #55adb8; --accent-ink: #55adb8; --accent-border: rgba(85, 173, 184, .30); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="the-forge"] { --accent: #c17fa4; --accent-ink: #c17fa4; --accent-border: rgba(193, 127, 164, .32); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="the-vault"] { --accent: #b08a5f; --accent-ink: #b08a5f; --accent-border: rgba(170, 155, 125, .42); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="white"] { --accent: #dce6ee; --accent-ink: #dce6ee; --accent-border: rgba(220, 230, 238, .30); }
  :is(.story-card, .article, .gnostic-divider, .site-footer)[data-accent="yellow"] { --accent: #ffca45; --accent-ink: #ffca45; --accent-border: rgba(255, 179, 15, .36); }
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 1.0625rem/1.7 Georgia, "Times New Roman", serif;
}

/* Frosted surfaces: every boxed component (cards, dropdowns, part navigation, quotes, tables)
   shares one faint tint and backdrop blur. */
:root { --glass-bg: color-mix(in srgb, var(--surface) 2%, transparent); --glass-blur: blur(6px); --action-radius: .875rem; }

body > main, body > .page-masthead, body > .primary-nav, body > .gnostic-divider, body > .site-footer { position: relative; z-index: 1; }

a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .075em; }
a:visited { color: var(--link-visited); text-decoration-style: dotted; }
a:hover { color: var(--link-hover); text-decoration-thickness: .14em; }
:where(a, [tabindex], summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 2px; }

.container { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.skip-link { position: absolute; top: -6rem; left: 1rem; z-index: 3; padding: .45rem .75rem; border-radius: var(--action-radius); background: var(--surface); color: var(--link); }
.skip-link:focus { top: 1rem; }

/* Shared page navigation follows each masthead without a bar. */
.page-masthead { border-bottom: 1px solid #a58760; background: #090807; }
.page-masthead__inner { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: 1.5rem; }
.page-masthead a, .page-masthead a:visited { color: #f1ebe0; font: 700 clamp(1.3rem, 2.5vw, 1.8rem)/1.2 "Cinzel Decorative", Georgia, serif; text-decoration: none; }
.page-masthead a:hover { color: #f1cd8f; }
.primary-nav { background: transparent; border: 0; }
.nav-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(.25rem, 2vw, 1.75rem); width: min(100% - 2rem, 76rem); margin: 0 auto; padding: 0; list-style: none; }
.nav-list li { margin: 0; }
.nav-list a, .nav-list a:visited { display: block; padding: .8rem .5rem; border-radius: var(--action-radius); color: var(--accent); font: 700 1rem/1.4 Georgia, serif; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.nav-list a:hover, .nav-list a:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-list a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .3em; }
.nav-list a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .3em; }
@media (max-width: 40rem) {
  .nav-list { gap: 0 .2rem; }
  .nav-list a, .nav-list a:visited { padding: .7rem .35rem; font-size: .85rem; letter-spacing: .04em; }
}

main { min-height: 65vh; padding-block: clamp(1.75rem, 5vw, 3rem); }
h1, h2, h3 { line-height: 1.2; color: var(--accent); }
h1 { font-size: clamp(2rem, 6vw, 3rem); margin: .25rem 0 1rem; }
h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.25rem; margin: 0; }
p { margin: 0 0 1.25rem; }
ul, ol { padding-left: 1.5em; }
li { margin-block: .35em; }
.intro { padding-block: .5rem 1.75rem; border-bottom: 1px solid var(--border); }
.eyebrow { margin-bottom: .7rem; color: var(--text-muted); font: 700 .8rem/1.4 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.article-list { list-style: none; padding: 0; margin: 0; }
.article-list li { padding-block: 1.4rem; border-bottom: 1px solid var(--border); }
.article-list p { margin: .45rem 0 0; }
.article-date { font: .9rem/1.5 system-ui, sans-serif; }
.article-date { color: var(--text-muted); }
.article-header { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.article-summary { font-size: 1.18rem; line-height: 1.6; }
.article-body { font-size: 1.1rem; }
.article-body > :first-child { margin-top: 0; }
.article-body p, .article-body li, .page-content { max-width: 68ch; }
blockquote { margin: 2rem 0; padding: .3rem 0 .3rem 1.25rem; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-left: 3px solid var(--border); }
blockquote p:last-child { margin-bottom: 0; }
cite, figcaption { color: var(--citation); }
figcaption { font-size: .9rem; }
img { max-width: 100%; height: auto; }

@media (max-width: 35rem) {
  .article-body { font-size: 1.0625rem; }
}

/* Homepage masthead: clean artwork, with a soft dark patch behind the text only (see .masthead-text). */
.home-main { padding: 0; }
.home-masthead { position: relative; display: grid; align-items: start; overflow: hidden; background: #090807; border-bottom: 1px solid #a58760; }
/* Above the phone breakpoint, illustrated mastheads follow the 16:9 artwork (56.25vw) so the whole picture
   shows instead of a cropped strip. Never shorter than the text needs (36.625rem, which governs tablets),
   never taller than 85% of the window, so the navigation stays in view on short laptop screens. */
.home-masthead, .article-header--image { --masthead-copy-top: 150px; height: clamp(36.625rem, 56.25vw, 85svh); }
.home-masthead__art, .home-masthead__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-masthead__art img { display: block; object-fit: cover; object-position: center 75%; filter: saturate(.7); }
.home-masthead__inner { position: relative; z-index: 1; width: min(100% - 2rem, 76rem); margin-inline: auto; padding-top: var(--masthead-copy-top); }
.home-masthead__copy { max-width: 54rem; }
/* Masthead text block (homepage and article image mastheads). It keeps the old panel's padding, reaching
   into the gutter on wider screens, so the text stays aligned with the content column. Artwork is supplied
   clean (the same files serve social sharing), so a soft dark patch sits directly behind the text only:
   full strength under the words, its edges blurred until they disappear into the image. No outline,
   corners or frosted glass, and the rest of the artwork is left as it is. */
.masthead-text { --masthead-text-pad: clamp(.9rem, 2vw, 1.5rem); position: relative; width: fit-content; max-width: 100%; padding: var(--masthead-text-pad) calc(2 * var(--masthead-text-pad)) var(--masthead-text-pad) var(--masthead-text-pad); }
:is(.home-masthead, .article-header--image) .masthead-text::before { position: absolute; inset: -1rem; z-index: -1; border-radius: 3rem; background: linear-gradient(90deg, rgba(8, 7, 6, .76) 0%, rgba(8, 7, 6, .6) 50%, rgba(8, 7, 6, .3) 100%); filter: blur(28px); content: ""; pointer-events: none; }
@media (min-width: 48rem) { .masthead-text { max-width: calc(100% + 2 * var(--masthead-text-pad)); margin-inline: calc(-1 * var(--masthead-text-pad)); } }
.article-header:not(.article-header--image) .masthead-text { width: auto; max-width: none; margin: 0; padding: 0; }
.home-masthead .eyebrow { margin: 0 0 .6rem; color: #dcb884; font: 700 .83rem/1.4 Georgia, serif; letter-spacing: .1em; }
.home-masthead h1 { margin: 0; color: #f1ebe0; font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(2.8rem, 4.25vw, 4.5rem); line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 12px #000; }
/* Tablets: the homepage title takes the article masthead title size, so both page types match. */
@media (min-width: 40.0625rem) and (max-width: 64rem) { .home-masthead h1 { font-size: clamp(2.2rem, 3.2vw, 3.4rem); } }
.home-masthead__lead { max-width: 40ch; margin: 1.15rem 0 0; color: #f1ebe0; font-size: clamp(1.2rem, 1.65vw, 1.65rem); line-height: 1.45; text-shadow: 0 2px 8px #000; }

/* Wider editorial area with article imagery only when supplied by front matter. */
.home-content { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: clamp(3rem, 5vw, 4.5rem); }
.home-section + .home-section { margin-top: clamp(3rem, 6vw, 5rem); }
.home-section__header { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.home-section__header .eyebrow, .home-empty .eyebrow, .home-intro__questions .eyebrow { color: var(--accent); font-family: Georgia, serif; font-size: .9rem; letter-spacing: .08em; }
.home-section__header h2 { margin: 0; color: var(--text); font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: 1.1; text-wrap: balance; }
.home-section__intro { max-width: 60ch; margin: 1.1rem 0 0; color: var(--text); font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 700; }
/* Homepage cards: one component, three treatments (text, stacked, horizontal).
   The title link stretches over the whole card, so the card is one target with one focus ring. */
.story-card { position: relative; display: flex; flex-direction: column; --card-radius: 10px; width: 100%; overflow: hidden; border-radius: var(--card-radius); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); transition: border-color .2s ease; }
.story-card[data-accent] { border-color: var(--accent-border); }
.story-card[data-accent] .story-card__body::before { display: block; width: 3rem; height: 2px; margin-bottom: .9rem; background: var(--accent); content: ""; }
.story-card[data-accent] .card-series { color: var(--accent-ink); }
.story-card:hover { border-color: var(--accent); }
.story-card__media { position: relative; margin: 0; overflow: hidden; background: var(--canvas); }
.story-card__media img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.story-card:hover .story-card__media img { transform: scale(1.025); }
.story-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(1.4rem, 2.5vw, 2rem); }
.story-card__body > :last-child { margin-bottom: 0; }
.story-card__title { color: var(--text); font-family: Georgia, "Times New Roman", serif; text-transform: none; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25; text-wrap: balance; margin: 0; }
.story-card__title a, .story-card__title a:visited { color: inherit; text-decoration: none; }
.story-card__title a::after { position: absolute; inset: 0; z-index: 1; border-radius: var(--card-radius); content: ""; }
.story-card:hover .story-card__title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .06em; }
.story-card__title a:focus-visible { outline: none; }
.story-card__title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.story-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: .6rem 0 .9rem; }
.story-card__excerpt { display: -webkit-box; max-width: 60ch; overflow: hidden; color: color-mix(in srgb, var(--text) 88%, var(--canvas)); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; text-overflow: ellipsis; }

/* Stacked: image above the text. */
.story-card--stacked .story-card__media { border-bottom: 1px solid var(--border); }

/* Text: no image; a gold rule and display title carry the card. */
.story-card--text { background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%), var(--glass-bg); }
.story-card--text::before { position: absolute; top: 0; left: clamp(1.75rem, 3.5vw, 3rem); width: 3.5rem; height: 3px; background: var(--accent); content: ""; }
.story-card--text .story-card__body { justify-content: center; padding: clamp(2rem, 3.5vw, 3rem); }
.story-card--text .story-card__title { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.2; }
.story-card--text .story-card__excerpt { font-size: 1.12rem; }

/* Horizontal cards: image left, text right at wide mosaic sizes. */
.story-card--horizontal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* Side-by-side artwork fills the available card height; stacked artwork uses its natural dimensions. */
.story-card--horizontal .story-card__media { position: relative; align-self: stretch; }
.story-card--horizontal .story-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-card--horizontal .story-card__body { justify-content: center; border-left: 1px solid var(--border); }

/* Homepage mosaics: compact editorial cards. `cardSize` sets the footprint (compact, wide = two columns,
   tall = two rows); `cardStyle` still sets the image treatment. Placement is the default sparse
   auto-flow: no `dense`, no `order`, so visual order always follows source and keyboard order. */
.home-mosaic { --mosaic-columns: 4; display: grid; grid-template-columns: repeat(var(--mosaic-columns), minmax(0, 1fr)); gap: clamp(.85rem, 1.4vw, 1.15rem); margin: 0; padding: 0; list-style: none; }
.home-mosaic--featured { --mosaic-columns: 3; }
.home-mosaic__item { display: flex; min-width: 0; margin: 0; }
.home-mosaic__item--wide { grid-column: span 2; }
.home-mosaic__item--tall { grid-row: span 2; }
.home-mosaic .story-card { --card-radius: 8px; }
.home-mosaic .story-card[data-accent] .story-card__body::before { width: 2rem; margin-bottom: .6rem; }
.home-mosaic .story-card__body { padding: .95rem 1.05rem 1.1rem; }
.home-mosaic .card-series { margin-bottom: .35rem; font-size: .68rem; letter-spacing: .09em; }
.home-mosaic .story-card__title { margin: 0; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.25; }
.home-mosaic .story-card__meta { margin: .35rem 0 .5rem; }
.home-mosaic .story-card__excerpt { font-size: .9rem; line-height: 1.45; -webkit-line-clamp: 3; line-clamp: 3; }
/* Mosaic artwork is framed and cropped from the centre so rows stay aligned whatever the source ratio. */
.home-mosaic .story-card__media { position: relative; aspect-ratio: 16 / 9; }
.home-mosaic .story-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-mosaic__item--wide .story-card--stacked .story-card__media { aspect-ratio: 21 / 9; }
.home-mosaic__item--wide .story-card__title { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
/* Tall cards: the artwork grows to fill the second row and the excerpt runs longer. */
.home-mosaic__item--tall .story-card__media { flex: 1 1 auto; min-height: 11rem; aspect-ratio: auto; }
.home-mosaic__item--tall .story-card__body { flex: 0 0 auto; }
.home-mosaic__item--tall .story-card__title { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
/* Horizontal cards sit side by side only in a wide cell; elsewhere they stack. */
.home-mosaic__item--wide .story-card--horizontal { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.home-mosaic__item--wide .story-card--horizontal .story-card__media { aspect-ratio: auto; min-height: 100%; }
.home-mosaic__item:not(.home-mosaic__item--wide) .story-card--horizontal { display: flex; }
.home-mosaic__item:not(.home-mosaic__item--wide) .story-card--horizontal .story-card__media { border-bottom: 1px solid var(--border); }
.home-mosaic__item:not(.home-mosaic__item--wide) .story-card--horizontal .story-card__body { border-left: 0; }
.home-mosaic .story-card--text .story-card__body { padding: 1.25rem 1.15rem; }
.home-mosaic .story-card--text .story-card__title { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }

/* Featured series: the series name and length, Part I as a full-row lead, then the remaining
   parts in part order (three columns, two on tablets, one on phones). The remaining parts tile as
   wide + compact, compact + wide, ...; an odd count opens with three compact cards and ends on
   the wide card (see `seriesCardLayout`). */
.series-block__header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.series-block__eyebrow { width: 100%; margin: 0; color: var(--accent); font: 700 .8rem/1.4 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.series-block__title { margin: 0; color: var(--text); font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.12; text-wrap: balance; }
.series-block__count { margin: 0; color: var(--text-muted); font: 700 .8rem/1.4 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
/* Always its own row under the title, however short the title; the padding keeps the 60ch measure. */
/* Set like the homepage introduction copy (.home-intro__copy p): the site's Georgia reading face, size and colour. */
.series-block__description { flex: 0 0 100%; padding-inline-end: max(0px, calc(100% - 60ch)); margin: .45rem 0 0; color: var(--text); font-size: clamp(1.1rem, 1.3vw, 1.2rem); text-wrap: pretty; }
.home-mosaic--series { --mosaic-columns: 3; }
.home-mosaic__item--lead { grid-column: 1 / -1; }
.home-mosaic__item--lead .story-card__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.2; }
.home-mosaic__item--lead .story-card__excerpt { font-size: clamp(.95rem, .9rem + .25vw, 1.08rem); }
.story-card__cta { margin: .9rem 0 0; color: var(--accent); font: 700 .85rem/1.4 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.story-card[data-accent] .story-card__cta { color: var(--accent-ink); }
@media (min-width: 62.0625rem) {
  .home-mosaic--series .home-mosaic__item--lead .story-card--horizontal { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .home-mosaic--series .home-mosaic__item--lead .story-card--horizontal .story-card__media { aspect-ratio: auto; min-height: clamp(16rem, 24vw, 21rem); border-bottom: 0; }
  .home-mosaic--series .home-mosaic__item--lead .story-card--horizontal .story-card__body { justify-content: center; padding: clamp(1.4rem, 2.5vw, 2.25rem); border-left: 1px solid var(--border); }
}
/* Two columns and fewer: every card takes one cell, so the grid can never open a gap whatever
   sizes editors choose. Featured wide and tall emphasis applies at three columns. */
@media (max-width: 74rem) {
  .home-mosaic:not(.home-mosaic--featured), .home-mosaic--featured { --mosaic-columns: 2; }
  .home-mosaic__item--wide, .home-mosaic__item--tall { grid-column: auto; grid-row: auto; }
  .home-mosaic__item--tall .story-card__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .home-mosaic__item--wide .story-card--stacked .story-card__media { aspect-ratio: 16 / 9; }
  .home-mosaic__item--wide .story-card--horizontal { display: flex; }
  .home-mosaic__item--wide .story-card--horizontal .story-card__media { aspect-ratio: 16 / 9; min-height: 0; border-bottom: 1px solid var(--border); }
  .home-mosaic__item--wide .story-card--horizontal .story-card__body { border-left: 0; }
  .home-mosaic :is(.home-mosaic__item--wide, .home-mosaic__item--tall) .story-card__title { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); }
}
/* Two columns only: an odd Featured set leads with one full-row card so no cell is left empty.
   A horizontal lead keeps its side-by-side layout across the row. */
@media (min-width: 62.0625rem) and (max-width: 74rem) {
  .home-mosaic--featured > .home-mosaic__item:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .home-mosaic--featured > .home-mosaic__item:first-child:nth-last-child(odd) .story-card--horizontal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .home-mosaic--featured > .home-mosaic__item:first-child:nth-last-child(odd) .story-card--horizontal .story-card__media { aspect-ratio: auto; min-height: 100%; border-bottom: 0; }
  .home-mosaic--featured > .home-mosaic__item:first-child:nth-last-child(odd) .story-card--horizontal .story-card__body { border-left: 1px solid var(--border); }
}
@media (max-width: 62rem) {
  .home-mosaic:not(.home-mosaic--featured), .home-mosaic--featured { --mosaic-columns: 1; }
  /* Once the series stacks, its lead card uses the same heading size as every other part. */
  .home-mosaic--series .story-card__title { font-size: clamp(1.17rem, 1.05rem + .45vw, 1.27rem); }
  .story-card--horizontal { display: flex; }
  .story-card--horizontal .story-card__media { align-self: stretch; border-bottom: 1px solid var(--border); }
  .home-mosaic__item--wide .story-card--horizontal .story-card__media { min-height: 0; }
  .story-card--horizontal .story-card__media img { position: static; height: auto; }
  .story-card--horizontal .story-card__body { border-left: 0; }
}
/* Tablets: series stay in two columns; full-row parts keep their artwork beside the text. */
@media (min-width: 40.0625rem) and (max-width: 74rem) {
  .home-mosaic.home-mosaic--series { --mosaic-columns: 2; }
  .home-mosaic--series > .home-mosaic__item--tablet-full { grid-column: 1 / -1; }
  .home-mosaic--series .home-mosaic__item--tablet-full .story-card--horizontal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .home-mosaic--series .home-mosaic__item--tablet-full .story-card--horizontal .story-card__media { aspect-ratio: auto; min-height: clamp(13rem, 26vw, 18rem); border-bottom: 0; }
  .home-mosaic--series .home-mosaic__item--tablet-full .story-card--horizontal .story-card__media img { position: absolute; height: 100%; }
  .home-mosaic--series .home-mosaic__item--tablet-full .story-card--horizontal .story-card__body { border-left: 1px solid var(--border); }
}
.story-card[data-accent] :is(.story-card__media, .story-card__body) { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); }
@media (prefers-reduced-motion: reduce) {
  .story-card, .story-card__media img { transition: none; }
  .story-card:hover .story-card__media img { transform: none; }
}
.home-empty { max-width: 54rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--border); }
.home-empty h2 { margin-top: 0; }
/* Publication introduction: purpose and principle beside the six questions, kept compact above the writing. */
.home-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.home-intro .home-section__header { margin-bottom: 1.25rem; }
.home-intro__copy > p:not(.home-section__intro) { max-width: 60ch; font-size: clamp(1.1rem, 1.3vw, 1.2rem); }
.home-intro__copy .home-section__intro { margin: 0 0 1.5rem; }
.home-intro__questions { padding: clamp(1.4rem, 2.5vw, 2rem); border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 10px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.home-intro__questions .eyebrow { margin-bottom: .9rem; }
.home-intro__questions ol { margin: 0; padding-left: 1.6em; font-size: 1.1rem; line-height: 1.45; }
.home-intro__questions li { margin-block: 0 .55rem; }
.home-intro__questions li:last-child { margin-bottom: 0; }
.home-intro__questions li::marker { color: var(--accent); font-weight: 700; }
.home-intro__questions--mobile { display: none; }
@media (max-width: 48rem) {
  .home-intro { grid-template-columns: 1fr; }
  .home-intro__questions--desktop { display: none; }
  .home-intro__questions--mobile { display: block; }
  .home-intro__questions ol { columns: 2; column-gap: 1.5rem; font-size: 1rem; }
  .home-intro__questions li { break-inside: avoid; }
}
@media (max-width: 26rem) {
  .home-intro__questions ol { columns: 1; }
}

@media (max-width: 40rem) {
  /* One phone height for every masthead, following the cost-page framing at each width. */
  .home-masthead, .article-header--image { height: clamp(29.5rem, calc(661px - 34.3vw), 34.5rem); }
  .home-masthead { align-items: center; }
  /* Phones: the image is anchored to its foot so the key and book show below the text panel. */
  .home-masthead__art img { object-position: 62% bottom; }
  .home-masthead__inner { padding-block: 6.25rem 9rem; }
  .home-masthead .eyebrow { font-size: .8rem; letter-spacing: .055em; }
  .home-masthead h1 { font-size: clamp(1.9rem, 7.3vw, 2.65rem); }
  .home-masthead__lead { margin-top: .75rem; font-size: 1.07rem; line-height: 1.4; }
}

/* Long-form reading surface. Wide media and tables sit outside the reading column. */
.article-main { --article-frame: 76rem; --article-copy-width: var(--article-frame); --disclosure-radius: 10px; padding: 0; }
.article-reading { width: min(100% - 2rem, var(--article-frame)); margin-inline: auto; }
.article-main .article-header:not(.article-header--image) { width: min(100% - 2rem, var(--article-frame)); margin: 2.5rem auto; }
.article-main .article-header h1 { color: var(--text); font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.article-header--image { position: relative; display: grid; align-content: start; align-items: start; margin: 0; padding: var(--masthead-copy-top) 0 0; overflow: hidden; border-bottom: 1px solid #a58760; background: #0d0d0c; }
.article-header--image > picture { display: contents; }
.article-header__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center min(calc(54% + 140px), 0%); filter: saturate(.82); }
@media (min-width: 64rem) {
  .article-header__art[src$="/what-does-the-monarchy-really-cost/masthead-16x9.jpg"] { object-position: center max(100%, -100px); }
}
.article-header--image .article-header__inner { position: relative; z-index: 1; width: min(100% - 2rem, var(--article-frame)); margin-inline: auto; }
.article-header__eyebrow { margin: 0 0 .6rem; color: #dcb884; font: 700 .83rem/1.4 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.article[data-accent] .article-header--image { border-bottom-color: var(--accent); }
.article[data-accent] .article-header--image .article-header__eyebrow { color: var(--accent-on-image); text-shadow: 0 1px 5px #000; }
.article[data-accent] .article-header:not(.article-header--image) .article-header__eyebrow { color: var(--accent-ink); }
.article[data-accent] .article-byline-strip { border-bottom-color: var(--accent-border); }
.article[data-accent] :is(.article-contents, .editorial-disclosure) { border-color: var(--accent-border); }
.article[data-accent] :is(.article-contents summary, .editorial-disclosure__summary)::after { border-color: var(--accent-border); }
.article[data-accent] .article-reading :is(.byline-monogram, .byline-name, .article-contents summary, .editorial-disclosure__eyebrow, .reference-number, .series-nav__eyebrow, .series-nav__direction) { color: var(--accent-ink); }
.article[data-accent] .article-body :is(h3, em, strong, .gnostic-table th, .gnostic-table td:first-child) { color: var(--accent-ink); }
.article[data-accent] .article-body blockquote { border-left-color: var(--accent-border); }
.article[data-accent] :is(.series-nav, .series-nav__link) { border-color: var(--accent-border); }
/* Links inside an accented article use its hue: hover moves towards the text colour, as the
   site-wide gold does, and visited links soften slightly beside their dotted underline. */
.article[data-accent] {
  --link: var(--accent-ink);
  --link-hover: color-mix(in srgb, var(--accent-ink) 70%, var(--text));
  --link-visited: color-mix(in srgb, var(--accent-ink) 82%, var(--canvas));
}
/* The reader-support invitation takes the accent of the article it closes. */
.article[data-accent] :is(.reader-support, .reader-support__link) { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); }
.article[data-accent] :is(.reader-support__link, .reader-support__link:visited) { color: var(--accent-ink); }
.article[data-accent] .reader-support__link:hover { border-color: var(--accent); color: var(--accent); }
/* Masthead rule: accent lines with a travelling glint, meeting a lit, nested diamond flanked by pips. */
.masthead-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; width: min(100% - 2rem, var(--article-frame, 76rem)); height: 1.8rem; margin: clamp(1.1rem, 2.5vw, 1.6rem) auto 0; }
.article-header:not(.article-header--image) + .masthead-rule { margin-top: -1rem; }
.masthead-rule::before, .masthead-rule::after, .gnostic-divider::before, .gnostic-divider::after { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 75%, var(--accent)), transparent) -60% 0 / 35% 100% no-repeat, linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 35%, var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); content: ""; animation: tgk-rule-glint 7s ease-in-out infinite; }
.masthead-rule::after, .gnostic-divider::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 75%, var(--accent)), transparent) 160% 0 / 35% 100% no-repeat, linear-gradient(to left, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 35%, var(--accent)); animation-direction: reverse; }
.masthead-rule span { position: relative; display: block; width: 3.6rem; height: 1.8rem; background: radial-gradient(circle at .2rem 50%, var(--accent) .13rem, transparent .16rem), radial-gradient(circle at calc(100% - .2rem) 50%, var(--accent) .13rem, transparent .16rem); }
.masthead-rule span::before, .masthead-rule span::after { position: absolute; top: 50%; left: 50%; content: ""; transform: translate(-50%, -50%) rotate(45deg); }
.masthead-rule span::before { z-index: 1; width: .78rem; height: .78rem; border: 1px solid var(--accent); background: radial-gradient(circle, var(--accent) 0 24%, transparent 30%), color-mix(in srgb, var(--accent) 14%, var(--canvas)); box-shadow: 0 0 0 3px var(--canvas), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent); }
.masthead-rule span::after { width: 1.45rem; height: 1.45rem; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent); animation: tgk-rule-breathe 6.5s ease-in-out infinite; }
@keyframes tgk-rule-glint { 0%, 15% { background-position: -60% 0, 0 0; } 65%, 100% { background-position: 160% 0, 0 0; } }
@keyframes tgk-rule-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .masthead-rule::before, .masthead-rule::after, .masthead-rule span::after, .gnostic-divider::before, .gnostic-divider::after { animation: none; }
}
.article-main .article-header--image h1 { max-width: 28ch; margin: 0; color: #f1ebe0; font-size: clamp(2.2rem, 3.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; text-shadow: 0 2px 12px #000; text-wrap: balance; }
.article-header--image .article-summary { max-width: 53ch; margin: 1.15rem 0 0; color: #f1ebe0; font-size: clamp(1.2rem, 1.65vw, 1.65rem); line-height: 1.45; text-shadow: 0 2px 8px #000; }
/* Byline strip: a gold-ringed monogram beside the author, date and reading time. */
.article-byline-strip { display: flex; align-items: center; gap: 1.1rem; margin: calc(clamp(2.5rem, 5vw, 3.5rem) + 10px) 0 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
/* Keep the byline's icon, author and date aligned with the centred article copy. */
.article-main .article-reading > .article-byline-strip {
  box-sizing: border-box;
  width: min(100%, 46rem);
  margin-inline: auto;
}

.byline-monogram { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border)); border-radius: 50%; background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); box-shadow: 0 0 0 4px var(--canvas), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font: 700 .95rem/1 "Cinzel Decorative", Georgia, serif; letter-spacing: .04em; }
.byline-name { margin: 0; color: var(--accent); font-size: 1.15rem; line-height: 1.3; }
.byline-details { margin: .25rem 0 0; color: var(--text-muted); font: 700 .78rem/1.5 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.byline-sep { margin-inline: .6rem; color: var(--accent); }
.byline-details time, .byline-read { white-space: nowrap; }
.byline-publisher { margin: .25rem 0 0; color: var(--text-muted); font: 700 .72rem/1.45 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.article-byline-strip + .article-body { margin-top: 2.25rem; }
.container .article-reading { width: auto; }
.article-contents { margin: 1.5rem 0 0; border: 1px solid var(--border); border-radius: var(--disclosure-radius); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); scroll-margin-top: 1rem; }
.article-contents summary { position: relative; padding: 1rem 3.5rem 1rem 1.5rem; cursor: pointer; color: var(--accent); font: 700 .85rem/1.4 Georgia, serif; letter-spacing: .12em; list-style: none; text-transform: uppercase; }
.article-contents summary::-webkit-details-marker { display: none; }
.article-contents summary:hover { background: var(--surface); }
.article-contents ol { columns: 2; column-gap: 2.5rem; margin: 0; padding: 1rem 1.5rem 1.25rem 3rem; border-top: 1px solid var(--border); font-size: 1rem; line-height: 1.45; }
.article-contents li { break-inside: avoid; margin-block: 0 .45rem; }
.article-main .article-body { font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); line-height: 1.75; }
.article-main .article-body li { max-width: none; }
/* Centre narrow prose within the wider article frame; leave text left-aligned. Figures use the same column (see .article-figure). */
.article-main .article-body > :is(p, h2, h3, h4, ul, ol, blockquote),
.article-main .section-block > :is(p, h2, h3, h4, ul, ol, blockquote, .footnote) {
  box-sizing: border-box;
  width: min(100%, 46rem);
  max-width: 100%;
  margin-inline: auto;
}
/* Data tables share the prose column; a table too wide for it scrolls inside its own frame. */
.article-main :is(.article-body, .section-block) > .gnostic-table-responsive { width: min(100%, 46rem); margin-inline: auto; }
/* Reading copy is eased back from full contrast, as on the original TGK, to lighten dense paragraphs. */
.article-main .article-body, .page-content { --reading-text: color-mix(in srgb, var(--text) 88%, var(--canvas)); color: var(--reading-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Emphasis carries the accent so key terms and titles stand out from the eased copy. */
:is(.article-main .article-body, .page-content) :is(em, strong) { color: var(--accent); }
.article-main .section-block { margin-block: clamp(3.5rem, 7vw, 5rem); }
/* Components carried over by the MINI-13 legacy import, restyled with Mini tokens. */
.article-main .section-subheading { margin-top: 2.25rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.article-main :is(.hebrew, .arabic) { display: inline-block; direction: rtl; unicode-bidi: isolate; font-size: 1.12em; line-height: 1.6; }
.article-main :is(.disclaimer-box, .editorial-note) { max-width: var(--article-copy-width); margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--glass-bg); }
.article-main :is(.disclaimer-box, .editorial-note) > :last-child { margin-bottom: 0; }
.article-main .disclaimer-heading { margin-top: 0; font-size: 1.05rem; }
.article-main .table-block { max-width: 100%; overflow-x: auto; }
.article-main .divider-sigil { color: var(--accent); text-align: center; }
.article-main .article-body hr { max-width: var(--article-copy-width); margin: 1.5rem 0; border: 0; border-top: 1px solid var(--border); }
.article-main .section-block > :is(p, h2, h3, ul, ol, blockquote, .footnote),
.article-main .editorial-disclosure__body > :is(p, ul, ol) { max-width: var(--article-copy-width); margin-inline: 0; }
.article-main .section-block > p { margin-block: 0 1.6rem; }
.article-main .section-block > :is(ul, ol) { margin-block: 0 1.75rem; padding-left: 1.5em; }
.article-main .section-block > :is(ul, ol) > li { margin-block: 0 .9rem; padding-left: .25em; }
.article-main .section-block > :is(ul, ol) > li::marker { color: var(--accent); }
.article-main .section-heading { margin-block: 0 1.5rem; color: var(--accent); font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.15; letter-spacing: .005em; text-wrap: balance; }
/* Markdown section headings, after the original TGK: Cinzel Decorative in ivory, a step larger than the body. */
.article-main .article-body h2:not(.section-heading) { margin-top: 3rem; color: var(--text); font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.12; text-wrap: balance; }
.article-main .article-body h3 { margin-block: 1.8rem .7rem; }
.article-main .article-body blockquote { position: relative; margin-block: 2.5rem; padding: 1.25rem 1.75rem 1.25rem 2.25rem; border-radius: 0 var(--disclosure-radius) var(--disclosure-radius) 0; background: linear-gradient(to right, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 55%, transparent), var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--text); font-size: 1.2em; font-style: italic; line-height: 1.55; }
/* Callout bar: a gold rule that fades at both ends and glows softly. */
.article-main .article-body blockquote::before { position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px; background: linear-gradient(to bottom, transparent, var(--accent) 22%, var(--accent) 78%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); content: ""; }
/* Quote attribution: a smaller, upright line beneath the quotation. */
.article-main .article-body blockquote cite { display: block; margin-top: .6rem; color: var(--text-muted); font-size: .72em; font-style: normal; letter-spacing: .01em; }
.article-main .article-body blockquote > br:has(+ cite) { display: none; }
.article-main .article-body .footnote { color: var(--text-muted); font-size: .95rem; }
/* Hand-off from the summary into the article: fading rules meeting a nested, softly lit diamond. */
.editorial-transition-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem; width: min(100% - 2rem, 34rem); margin: clamp(3rem, 6vw, 4.5rem) auto; }
.editorial-transition-divider::before, .editorial-transition-divider::after { height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 45%, var(--border)) 55%, var(--accent)); content: ""; }
.editorial-transition-divider::after { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--accent) 45%, var(--border)) 55%, var(--accent)); }
.editorial-transition-divider span { position: relative; display: block; width: 3.4rem; height: 1.4rem; background: radial-gradient(circle at .2rem 50%, var(--accent) .11rem, transparent .14rem), radial-gradient(circle at calc(100% - .2rem) 50%, var(--accent) .11rem, transparent .14rem); }
.editorial-transition-divider span::before { position: absolute; top: 50%; left: 50%; width: .8rem; height: .8rem; border: 1px solid var(--accent); background: radial-gradient(circle, var(--accent) 0 22%, transparent 27%), color-mix(in srgb, var(--accent) 12%, var(--canvas)); box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); content: ""; transform: translate(-50%, -50%) rotate(45deg); }
.editorial-disclosure { margin-block: 1.25rem; border: 1px solid var(--border); border-radius: var(--disclosure-radius); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* Summary rows follow the rounded box so hover fills and focus rings stay inside its corners. */
:is(.article-contents, .editorial-disclosure) > summary { border-radius: calc(var(--disclosure-radius) - 1px); }
:is(.article-contents, .editorial-disclosure)[open] > summary { border-radius: calc(var(--disclosure-radius) - 1px) calc(var(--disclosure-radius) - 1px) 0 0; }
:is(.article-contents, .editorial-disclosure) > summary:focus-visible { outline-offset: -4px; border-radius: calc(var(--disclosure-radius) - 1px); }
.editorial-disclosure__summary { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: clamp(1.25rem, 3vw, 1.6rem) 4rem clamp(1.25rem, 3vw, 1.6rem) clamp(1.25rem, 3vw, 1.85rem); cursor: pointer; font-size: 1rem; list-style: none; }
.editorial-disclosure__summary::-webkit-details-marker { display: none; }
.editorial-disclosure__summary::after { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--border); border-radius: 50%; color: var(--accent); content: "+"; font: 1.1rem/1 Georgia, serif; }
.editorial-disclosure[open] > .editorial-disclosure__summary::after, .article-contents[open] > summary::after { content: "−"; }
.article-contents summary::after { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--border); border-radius: 50%; color: var(--accent); content: "+"; font: 400 1.1rem/1 Georgia, serif; letter-spacing: 0; }
.editorial-disclosure__summary:hover { background: var(--surface); }
.editorial-disclosure__eyebrow { color: var(--accent); font: 700 .8rem/1.4 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.editorial-disclosure__deck { color: var(--text); font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.35; }
.editorial-disclosure__body { padding: clamp(1.25rem, 3vw, 1.85rem); border-top: 1px solid var(--border); }
/* Symbolic lists, after the original TGK lists.css: a gold ✦ marks each item. */
:is(.article-main .article-body, .page-content, .home-intro__questions) .list-emoji { --list-emoji-char: "✦"; padding-left: 0; list-style: none; }
:is(.article-main .article-body, .page-content, .home-intro__questions) .list-emoji > li { position: relative; padding-left: clamp(2rem, 3vw, 3rem); }
:is(.article-main .article-body, .page-content, .home-intro__questions) .list-emoji > li::before { position: absolute; top: 0; left: 0; width: 1.5rem; color: var(--accent); content: var(--list-emoji-char); content: var(--list-emoji-char) / ""; opacity: .9; text-align: center; }
.editorial-disclosure__body .list-emoji { margin: 0; }
.editorial-disclosure__body .list-emoji > li { margin-block: 0 1rem; }
.editorial-disclosure__body .list-emoji > li:last-child { margin-bottom: 0; }
.editorial-disclosure--episode-summary { border-left: 3px solid var(--accent); }
.article-main .article-body > .editorial-disclosure--episode-summary { margin-block: 1.25rem 0; }
/* Data tables, after the original TGK tables.css: rounded frame, gold header band, zebra rows. */
.gnostic-table-responsive { --table-rule: color-mix(in srgb, var(--border) 70%, var(--text) 30%); width: 100%; margin: clamp(1.75rem, 5vw, 3rem) 0; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--table-rule); border-radius: .75rem; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 16%, transparent); scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
.editorial-disclosure__body > .gnostic-table-responsive { margin: 0; box-shadow: none; }
.gnostic-table { width: 100%; min-width: 42rem; border-collapse: collapse; color: var(--text); font-size: clamp(.88rem, 1.2vw, 1rem); line-height: 1.6; }
.gnostic-table thead { border-bottom: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.gnostic-table th { color: var(--accent); font-size: clamp(.82rem, 1.2vw, 1rem); line-height: 1.35; letter-spacing: .035em; text-transform: uppercase; }
.gnostic-table th, .gnostic-table td { padding: clamp(.75rem, 1.8vw, 1rem) clamp(.85rem, 2.2vw, 1.5rem); border-right: 1px solid var(--table-rule); border-bottom: 1px solid var(--table-rule); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.gnostic-table :is(th, td):last-child { border-right: 0; }
.gnostic-table tbody tr:last-child td { border-bottom: 0; }
.gnostic-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--text) 4%, transparent); }
.gnostic-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gnostic-table a { color: var(--accent-ink, var(--accent)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; transition: color .2s ease, text-shadow .2s ease, text-decoration-color .2s ease; }
.gnostic-table a:hover { color: var(--link-hover); text-decoration-color: transparent; text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); }
.gnostic-table a:focus-visible { color: var(--link-hover); outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; border-radius: .15rem; }
@media (prefers-reduced-motion: reduce) { .gnostic-table a { transition: none; } }
/* Narrow screens: each row becomes a card whose first cell is the heading band. Cells with a
   data-label (added to Markdown tables at build time) show their column name beside the value. */
@media (max-width: 40rem) {
  .gnostic-table-responsive { margin: clamp(1.5rem, 7vw, 2.25rem) 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .gnostic-table, .gnostic-table tbody { display: block; width: 100%; min-width: 0; }
  .gnostic-table thead { display: none; }
  .gnostic-table tr { display: block; margin-bottom: 1.25rem; overflow: hidden; border: 1px solid var(--table-rule); border-left: 3px solid var(--accent); border-radius: .75rem; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .gnostic-table tbody tr:is(:nth-child(odd), :hover) { background: var(--glass-bg); }
  .gnostic-table tr:last-child { margin-bottom: 0; }
  .gnostic-table td { display: block; padding: .75rem .9rem; border: 0; border-bottom: 1px solid var(--table-rule); font-size: clamp(.88rem, 3.7vw, .96rem); line-height: 1.55; }
  .gnostic-table td[data-label] { display: grid; grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr); align-items: start; gap: .75rem; }
  .gnostic-table td[data-label]::before { content: attr(data-label); color: var(--accent-ink, var(--accent)); font: 700 clamp(.7rem, 3vw, .8rem)/1.35 Georgia, serif; letter-spacing: .035em; opacity: .92; text-align: left; text-transform: uppercase; }
  .gnostic-table td:first-child::before { content: none; }
  /* Markdown column alignment is inline; on cards every value reads from the left, under its label. */
  .gnostic-table td { text-align: left !important; }
  .gnostic-table td:first-child { display: block; padding: .9rem 1rem; border-bottom: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: clamp(.95rem, 4vw, 1.05rem); font-weight: 700; line-height: 1.4; }
  .gnostic-table td:last-child { border-bottom: 0; }
  /* Restore card dividers that the desktop last-row rule would otherwise remove. */
  .gnostic-table tbody tr td:not(:last-child) { border-bottom: 1px solid var(--table-rule); }
  .gnostic-table tbody tr td:first-child { border-bottom: 2px solid var(--accent); }
}
/* Very narrow phones: the column name sits above its value. */
@media (max-width: 26.25rem) {
  .gnostic-table td[data-label] { grid-template-columns: 1fr; gap: .3rem; padding: .75rem .85rem; }
  .gnostic-table td[data-label]::before { margin-bottom: .1rem; }
  .gnostic-table tr { border-radius: .65rem; }
}
/* Timeline groups: decade, range and count on one line, with a tighter rhythm. */
.editorial-disclosure--timeline { margin-block: .5rem; }
.editorial-disclosure--timeline > .editorial-disclosure__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding-block: .85rem; }
.editorial-disclosure--timeline .editorial-disclosure__eyebrow { color: var(--accent); font-size: 1.2rem; font-variant-numeric: lining-nums; letter-spacing: normal; text-transform: none; }
.editorial-disclosure--timeline .editorial-disclosure__deck { color: var(--text-muted); font-size: 1rem; font-weight: 400; }
.editorial-disclosure--timeline > .editorial-disclosure__body { padding: 1rem; }
@media (max-width: 40rem) {
  .editorial-disclosure--timeline > .editorial-disclosure__summary { grid-template-columns: 1fr; row-gap: 0; }
  .editorial-disclosure--timeline > .editorial-disclosure__body { padding: .75rem; }
}
.article-figure { margin: 2.5rem 0; }
.article-figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 3vw, 2rem); }
.article-figure-pair .article-figure { margin: 1rem 0 2.5rem; }
/* Figures never exceed the screen height; an image narrowed by that cap is centred in the column. */
.article-figure__viewport { width: fit-content; max-width: 100%; margin-inline: auto; border: 1px solid var(--border); background: var(--surface); }
.article[data-accent] .article-figure__viewport { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); }
/* Figures share the prose and table column; smaller images stay centred at their own size. */
.article-main .article-body > .article-figure { width: min(100%, 46rem); margin-inline: auto; }
.article-figure picture { display: block; }
.article-figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 85vh; max-height: 85svh; }
/* Charts, and figures marked --full-width (such as tall maps), fill the column exactly, so they line up
   with the text and tables around them. They skip the screen-height cap, which would otherwise narrow
   a portrait image; readers scroll past it instead. */
.article-figure:is(.article-figure--chart, .article-figure--full-width) .article-figure__viewport { width: 100%; }
.article-figure:is(.article-figure--chart, .article-figure--full-width) img { width: 100%; max-height: none; }
/* Captions: centred, italic and set off from the image by a short accent rule. */
.article-main .article-figure figcaption { max-width: 62ch; margin: 1rem auto 0; color: var(--text-muted); font-size: .95rem; font-style: italic; line-height: 1.6; text-align: center; text-wrap: balance; -webkit-font-smoothing: antialiased; }
.article-main .article-figure figcaption::before { display: block; width: 2.5rem; height: 1px; margin: 0 auto .75rem; background: linear-gradient(to right, transparent, var(--accent), transparent); content: ""; }
.article-citation { white-space: nowrap; font: 400 .8em/1 system-ui, sans-serif; vertical-align: super; }
.article-citation a { padding: .1em .15em; color: var(--link); }
.article[data-accent] .article-citation a { color: var(--accent-ink); }
.article-corrections { margin: 3rem 0 0; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--disclosure-radius); scroll-margin-top: 1rem; }
.article-corrections h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.article-corrections ul { margin: 0; padding-left: 1.25rem; }
.article-corrections time { font-weight: 700; }
.article-references { margin: 5rem 0 0; scroll-margin-top: 1rem; }
.article-references h2 { margin: 0; font-weight: 400; }
.article-references .references-note { color: var(--text-muted); }
.article-references ol { margin: 0; padding: 0; list-style: none; }
.article-references li:last-child { border-bottom: 0; padding-bottom: 0; }
.article-references li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .75rem; padding-block: 1rem; border-bottom: 1px solid var(--border); scroll-margin-top: 1rem; overflow-wrap: anywhere; }
.reference-number { color: var(--accent); font: 700 .95rem/1.6 system-ui, sans-serif; }
.article-references li p { margin: .35rem 0 0; color: var(--text-muted); font-size: .95rem; line-height: 1.55; }
.article-references .reference-additional { margin: .5rem 0 0; padding: 0; list-style: none; }
.article-references .reference-additional li { display: block; }
.article-references h3 { margin: 2rem 0 .5rem; color: var(--accent-ink); font-size: 1.1rem; }
@media (max-width: 40rem) {
  .article-figure-pair { grid-template-columns: 1fr; }
  .article-main .section-block { margin-block: 2.5rem; }
  .article-main .article-body { font-size: 1.0625rem; }
  .article-header--image { align-content: normal; align-items: center; padding-block: 6.25rem 9rem; }
  .article-header__eyebrow { font-size: .8rem; letter-spacing: .055em; }
  /* As on the homepage: the image is anchored to its foot so the desk scene shows below the text panel. */
  .article-header__art { object-position: 60% bottom; }
  .article-main .article-header--image h1 { font-size: clamp(1.6rem, 6.2vw, 2.2rem); }
  .article-header--image .article-summary { margin-top: .75rem; font-size: 1.07rem; line-height: 1.4; }
  .article-contents ol { columns: 1; }
  .article-references li { grid-template-columns: 2.8rem minmax(0, 1fr); gap: .4rem; }
}

/* Closing key divider, carried over from the original TGK footer. */
.gnostic-divider { position: relative; display: grid; grid-template-columns: 1fr 3.6rem 1fr; align-items: center; gap: .7rem; width: min(100% - 2rem, 76rem); isolation: isolate; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-block: clamp(.75rem, 1.6vw, 1.1rem); }
.gnostic-divider .divider-symbol { justify-self: center; }
.divider-symbol { position: relative; z-index: 1; display: inline-grid; place-items: center; width: clamp(2rem, 3.5vw, 2.6rem); height: clamp(2rem, 3.5vw, 2.6rem); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 999px; background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 58%), radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 65%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1; animation: tgk-divider-spin 10s linear infinite; }
.divider-symbol::before, .divider-symbol::after { position: absolute; border-radius: 999px; content: ""; pointer-events: none; }
.divider-symbol::before { inset: -.36rem; border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); opacity: .78; animation: tgk-divider-spin 9s linear infinite; }
.divider-symbol::after { inset: -.9rem; background: radial-gradient(circle at 50% .12rem, color-mix(in srgb, var(--accent) 72%, transparent) .07rem, transparent .09rem), radial-gradient(circle at .12rem 50%, color-mix(in srgb, var(--accent) 58%, transparent) .06rem, transparent .08rem), radial-gradient(circle at 50% calc(100% - .12rem), color-mix(in srgb, var(--accent) 62%, transparent) .06rem, transparent .08rem), radial-gradient(circle at calc(100% - .12rem) 50%, color-mix(in srgb, var(--accent) 58%, transparent) .06rem, transparent .08rem); opacity: .7; animation: tgk-divider-breathe 6.5s ease-in-out infinite; }
@keyframes tgk-divider-spin { to { transform: rotate(360deg); } }
@keyframes tgk-divider-breathe { 0%, 100% { opacity: .56; transform: scale(.98); } 50% { opacity: .82; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .divider-symbol, .divider-symbol::before, .divider-symbol::after { animation: none; }
}

/* Site footer, after the original TGK footer: glowing top rule, centred links, publisher details. */
.site-footer { position: relative; isolation: isolate; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(2.5rem, 5vw, 3.5rem) 1rem; overflow-x: hidden; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); text-align: center; }
.site-footer::before { position: absolute; inset: 0 0 auto; z-index: 1; height: 9px; background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 20%, transparent), transparent), linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 42%, transparent) 30%, color-mix(in srgb, var(--accent) 70%, transparent) 50%, color-mix(in srgb, var(--accent) 42%, transparent) 70%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent), 0 1px 7px color-mix(in srgb, var(--accent) 16%, transparent); content: ""; pointer-events: none; }
.footer-inner { width: min(100%, 76rem); margin-inline: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: 1.5rem; }
.footer-links a, .footer-links a:visited { color: var(--link); font: 700 .95em/1.4 Georgia, serif; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; overflow-wrap: anywhere; }
.site-footer[data-accent] .footer-links a, .site-footer[data-accent] .footer-links a:visited { color: var(--accent-ink); }
.footer-links a:hover, .footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.footer-divider { color: var(--accent); opacity: .6; }
.footer-note { margin: 0 0 .75rem; color: var(--text-muted); font-size: .95rem; line-height: 1.6; }
.footer-note em { color: var(--text); }
.footer-glyphs { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.5rem; color: var(--accent); font-size: 1.15rem; line-height: 1; opacity: .8; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (max-width: 47.9375rem) {
  .footer-links, .footer-note { font-size: .9em; }
}

/* Breadcrumb: the route home on every inner page, after the original TGK masthead trail. */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 0; margin: 0 0 1.5rem; padding: 0; list-style: none; font: 700 .8rem/1.5 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { margin-inline: .6rem; color: var(--border); content: "/"; content: "/" / ""; }
.breadcrumb a, .breadcrumb a:visited { color: var(--link); text-decoration: none; }
.breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .25em; }
.breadcrumb [aria-current="page"] { color: var(--text); }
.article-header--image .breadcrumb ol { margin-bottom: 1.25rem; text-shadow: 0 1px 6px #000; }
.article-header--image .breadcrumb a, .article-header--image .breadcrumb a:visited { color: #d9cfbf; }
.article-header--image .breadcrumb a:hover { color: #f1ebe0; }
.article-header--image .breadcrumb li + li::before { color: #a58760; }
.article-header--image .breadcrumb [aria-current="page"] { color: #f1ebe0; }
/* The H1 sits directly below, so the current-page crumb is read by screen readers but not shown. */
.article-header--image .breadcrumb li:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 40rem) {
  .breadcrumb ol { font-size: .72rem; letter-spacing: .06em; }
  .breadcrumb li + li::before { margin-inline: .4rem; }
}

/* Multi-part articles: the shared work, the current part and links to its neighbours. */
.series-nav { margin: clamp(3.5rem, 7vw, 5rem) 0 0; padding-top: 2rem; border-top: 1px solid var(--border); }
.series-nav__eyebrow, .card-series { color: var(--accent); font: 700 .8rem/1.4 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.series-nav__eyebrow { margin: 0 0 .4rem; }
.series-nav__title { margin: 0; color: var(--text); font-family: "Cinzel Decorative", Georgia, serif; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.series-nav__current { margin: .5rem 0 0; color: var(--text-muted); }
.series-nav__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.series-nav__link, .series-nav__link:visited { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--action-radius); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); text-decoration: none; }
.series-nav__link--next { grid-column: 2; text-align: right; }
.series-nav__link:hover { background: var(--surface); }
.series-nav__direction { color: var(--accent); font: 700 .78rem/1.4 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.series-nav__name { color: var(--text); font-size: 1.2rem; line-height: 1.35; }
.series-nav__link:hover .series-nav__name { text-decoration: underline; text-underline-offset: .2em; }
.card-series { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .1em; }
/* "Part VII" never splits; the series name wraps before it on narrow cards. */
.card-series__part { white-space: nowrap; }
@media (max-width: 40rem) {
  .series-nav__links { grid-template-columns: 1fr; }
  .series-nav__link--next { grid-column: auto; text-align: left; }
}

/* Reader support: text-led invitations, native links and no payment scripts.
   Full content width, like References; the button sits to the right of the text, beneath it on phones. */
.reader-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: clamp(3.25rem, 7vw, 5rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.reader-support__eyebrow, .support-option__eyebrow {
  margin: 0 0 .65rem;
  color: var(--accent-ink, var(--accent));
  font: 700 .78rem/1.4 Georgia, serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.reader-support h2 { margin: 0 0 .75rem; color: var(--text); font-size: clamp(1.45rem, 2.6vw, 1.8rem); }
.reader-support p:not(.reader-support__eyebrow) { max-width: 65ch; margin-bottom: 0; }
.reader-support > :not(.reader-support__link) { grid-column: 1; }
.reader-support > .reader-support__link { grid-column: 2; grid-row: 1 / span 3; justify-self: end; white-space: nowrap; }
.reader-support__link, .reader-support__link:visited, .support-option__link, .support-option__link:visited, .home-intro__link, .home-intro__link:visited {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
  padding: .65rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--action-radius);
  background: var(--glass-bg);
  color: var(--link);
  font: 700 .95rem/1.45 Georgia, serif;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.reader-support__link:hover, .support-option__link:hover, .home-intro__link:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: .2em;
}
:is(.skip-link, .nav-list a, .reader-support__link, .support-option__link, .home-intro__link, .series-nav__link):focus-visible { border-radius: var(--action-radius); }
/* Match breadcrumb trails to the columns beneath them on text pages. */
main.container:has(> .about-page) > .breadcrumb {
  max-width: 68ch;
  margin-inline: auto;
}
main.container:has(> .support-page) > .breadcrumb {
  max-width: 70rem;
  margin-inline: auto;
}
/* Centre About and Contact's existing narrow reading column; keep Support's wider card layout. */
.container > .page-content.about-page { margin-inline: auto; }
.support-page { max-width: 70rem; margin: 0 auto; }
/* A standfirst for text pages such as About. */
.page-content__lead { color: var(--accent); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; }
.about-page h2 { margin-top: 3rem; }
.about-page > p:last-child { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.support-page__intro { color: var(--accent); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.support-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin: 2.5rem 0 2rem; }
.support-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.7vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--glass-bg);
}
.support-option h2 { margin: 0 0 .75rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.support-option p:not(.support-option__eyebrow) { max-width: 48ch; }
.support-option__link, .support-option__pending { margin-top: auto; }
.support-option__pending { color: var(--text-muted); font: 700 .9rem/1.5 Georgia, serif; }
.support-page__note { max-width: 70ch; color: var(--text-muted); font-size: .92rem; }
@media (max-width: 40rem) {
  .support-options { grid-template-columns: 1fr; }
  .reader-support { grid-template-columns: minmax(0, 1fr); padding: 1.35rem 1rem; }
  .reader-support > .reader-support__link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 1rem; white-space: normal; }
}