/* ==========================================================================
   Fan-network base stylesheet (shared by every site in the network).
   Per-site identity lives in sites/<id>/theme.css which overrides the tokens
   below and the three optional layout variants.

   Elevation model
   ---------------
   Four shadow levels (e1..e4) plus a top-edge highlight (--hl) and a pressed
   state (--press). Light themes use soft grey-blue shadows and a white top
   highlight; dark themes flip to hard black shadows with a faint white rim.
   Everything raised on the page uses these tokens, so the depth reads as one
   system instead of a pile of one-off box-shadows.
   ========================================================================== */

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

:root {
  /* Brand tokens — overridden per site */
  --accent: #088ef5;
  --accent-2: #1870e0;
  --accent-ink: #ffffff;
  --pop: #f89314;
  --ink: #14263a;
  --ink-soft: #4a5c72;
  --muted: #7b8a9c;
  --bg: #ffffff;
  --bg-alt: #f4f8fc;
  --surface: #ffffff;
  --line: #dde6ef;
  --radius: 18px;
  --radius-sm: 10px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --head-h: 74px;

  /* Elevation */
  --e1: 0 1px 2px rgba(20, 38, 58, .07), 0 2px 5px rgba(20, 38, 58, .05);
  --e2: 0 2px 4px rgba(20, 38, 58, .06), 0 8px 18px rgba(20, 38, 58, .09);
  --e3: 0 4px 10px rgba(20, 38, 58, .07), 0 18px 38px rgba(20, 38, 58, .13);
  --e4: 0 8px 18px rgba(20, 38, 58, .09), 0 30px 58px rgba(20, 38, 58, .18);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .95);
  --hl-soft: inset 0 1px 0 rgba(255, 255, 255, .55);
  --press: inset 0 2px 5px rgba(20, 38, 58, .2);
  --shadow: var(--e2);
  --shadow-lg: var(--e4);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-2); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.16; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg-alt); padding: .12em .38em; border-radius: 5px; }
pre { background: #101c2b; color: #e8f1fb; padding: 1.1rem 1.2rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: .87rem; line-height: 1.6; box-shadow: var(--e2), var(--hl-soft); }
pre code { background: none; color: inherit; padding: 0; }
blockquote { margin: 1.8rem 0; padding: .4rem 0 .4rem 1.4rem; border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .7rem 1rem; z-index: 99; }
.skip:focus { left: 0; }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, var(--wrap-narrow)); margin-inline: auto; }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px rgba(20, 38, 58, .06);
}
.head-inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--head-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; box-shadow: var(--e1); }
.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.02em; }
.brand-text em { font-style: normal; font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.site-nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: .48rem .78rem; border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); font-size: .9rem; font-weight: 500;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.site-nav a:hover { background: var(--bg-alt); color: var(--ink); box-shadow: var(--e1), var(--hl-soft); }
.site-nav a[aria-current="page"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: var(--accent-ink);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.fan-banner {
  margin: 0; background: var(--pop); color: #23180a; text-align: center;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: .34rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.6rem);
  background-image:
    radial-gradient(75% 95% at 94% 4%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    linear-gradient(165deg, var(--bg-alt), var(--bg) 62%);
}
.hero-inner { position: relative; }
.eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: .9rem; }
.hero h1 { max-width: 22ch; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--ink-soft); max-width: 60ch; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.7rem 0 0; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: .82rem 1.5rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .94rem; border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
  will-change: transform;
}
.btn-primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #ffffff) 0%, var(--accent) 48%, var(--accent-2) 100%);
  color: var(--accent-ink);
  box-shadow: var(--e3), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14);
}
.btn-primary:hover {
  color: var(--accent-ink); transform: translateY(-2px);
  box-shadow: var(--e4), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .14);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: var(--e1), inset 0 2px 6px rgba(0, 0, 0, .28);
}
.btn-ghost {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent), color-mix(in srgb, var(--bg-alt) 70%, var(--surface)));
  color: var(--ink); border-color: var(--line);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.btn-ghost:hover { color: var(--ink); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--e3), inset 0 1px 0 rgba(255, 255, 255, .85); }
.btn-ghost:active { transform: translateY(1px); box-shadow: var(--e1), var(--press); }

/* ----------------------------------------------------------------- stats */
.stats { display: flex; gap: 1rem; list-style: none; margin: 2.6rem 0 0; padding: 0; flex-wrap: wrap; }
.stats li {
  min-width: 152px; padding: .9rem 1.15rem; border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent), color-mix(in srgb, var(--bg-alt) 60%, var(--surface)));
  border: 1px solid var(--line);
  box-shadow: var(--e2), var(--hl);
}
.stats strong { display: block; font-family: var(--font-display); font-size: 1.65rem; line-height: 1.15; }
.stats span { font-size: .82rem; color: var(--muted); }

/* ----------------------------------------------------------------- bands */
.band { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.band-alt { background: var(--bg-alt); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(20, 38, 58, .05); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.band-head h2 { margin: 0; }
.more { font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--accent-2); white-space: nowrap; }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.45rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--compact { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.grid--feature { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid--feature .card:first-child { grid-column: 1 / -1; }

.card {
  position: relative;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent) 0%, color-mix(in srgb, var(--surface) 96%, var(--bg-alt)) 100%);
  border: 1px solid var(--line);
  border-top-color: color-mix(in srgb, var(--surface) 55%, #ffffff);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--e2), var(--hl);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--e4), var(--hl);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  border-top-color: color-mix(in srgb, var(--accent) 30%, #ffffff);
}
.card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.card-media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-alt); box-shadow: inset 0 -1px 0 rgba(20, 38, 58, .08); }
.card-media--placeholder {
  display: grid; place-items: center; height: 86px; aspect-ratio: auto;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg-alt)), color-mix(in srgb, var(--accent) 6%, var(--bg-alt)));
  color: var(--accent-2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem;
  box-shadow: inset 0 -1px 0 rgba(20, 38, 58, .1), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.grid--feature .card:first-child .card-media--placeholder { height: 104px; }
.card-body { padding: 1.15rem 1.25rem 1.3rem; }
.card-meta { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--muted); margin: 0 0 .55rem; flex-wrap: wrap; }
.card-title { font-size: 1.14rem; margin: 0 0 .45rem; }
.card-excerpt { font-size: .91rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.card-byline { font-size: .78rem; color: var(--muted); margin: 0; }
.pill {
  display: inline-block; padding: .2rem .62rem; border-radius: 999px;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
  color: var(--accent-2); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(20, 38, 58, .06);
}
.grid--feature .card:first-child .card-title { font-size: 1.5rem; }
.empty { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------- cat grid */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cat-card {
  height: 100%;
  background-image: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 94%, var(--bg-alt)) 100%);
  border: 1px solid var(--line);
  border-top-color: color-mix(in srgb, var(--surface) 55%, #ffffff);
  border-radius: var(--radius);
  box-shadow: var(--e2), var(--hl);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--e4), var(--hl); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cat-card a { display: block; padding: 1.35rem 1.4rem; text-decoration: none; color: inherit; height: 100%; }
.cat-card h3 { margin: 0 0 .4rem; font-size: 1.06rem; }
.cat-card p { font-size: .87rem; color: var(--ink-soft); margin: 0 0 .85rem; }
.cat-count { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-2); }

/* ---------------------------------------------------------- page heads */
.page-head { padding: clamp(1.9rem, 4vw, 3rem) 0 0; background: linear-gradient(180deg, var(--bg-alt), var(--bg)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.page-head h1 { margin-bottom: .35rem; }
.index-count { font-size: .84rem; color: var(--muted); }
.crumbs { font-size: .78rem; color: var(--muted); margin-bottom: .9rem; }
.crumbs ol { list-style: none; display: flex; gap: .45rem; padding: 0; margin: 0; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); }

/* ------------------------------------------------------------- toolbar */
.toolbar { display: grid; gap: 1rem; margin-bottom: 1.7rem; }
.search input {
  width: 100%; padding: .88rem 1.2rem; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink);
  box-shadow: var(--e1), var(--press); transition: box-shadow .16s ease, border-color .16s ease;
}
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), var(--e1); }
.search input::placeholder { color: var(--muted); }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background-image: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--bg-alt)));
  color: var(--ink-soft); padding: .44rem .9rem; border-radius: 999px;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease;
}
.chip span { color: var(--muted); font-weight: 500; }
.chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-2); box-shadow: var(--e2), inset 0 1px 0 rgba(255, 255, 255, .85); }
.chip.is-active {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
  border-color: var(--accent); color: var(--accent-ink);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.chip.is-active span { color: inherit; opacity: .78; }

/* ---------------------------------------------------------- post / page */
.post-head { padding: clamp(1.6rem, 4vw, 2.8rem) 0 1rem; background: linear-gradient(180deg, var(--bg-alt), var(--bg)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.post-head h1 { margin-bottom: .5rem; }
.post-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.post-meta { font-size: .84rem; color: var(--muted); }
/* Article covers keep their native 16:9 framing: capped to the page width so a
   wide viewport never crops the illustration, and never upscaled past source. */
.post-cover { margin: 0 auto; max-width: var(--wrap); }
.post-cover img { width: 100%; height: auto; max-height: 680px; object-fit: cover; display: block; box-shadow: var(--e3); }

/* Inline figures + photo grids. Native size is respected (small source photos
   are never upscaled) and tall portraits are capped so articles stay readable. */
.post-figure { margin: 2rem 0; }
.post-figure img { display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%; max-height: 560px; border-radius: var(--radius-sm); box-shadow: var(--e2); }
.post-figure figcaption { margin-top: .6rem; text-align: center; font-size: .84rem; color: var(--muted); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; align-items: start; }
.photo-grid-title { grid-column: 1 / -1; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.photo-grid .post-figure { margin: 0; }
.photo-grid .post-figure img { max-height: 340px; }
.photo-grid .post-figure figcaption { font-size: .78rem; }
.post-body { padding: 2.2rem 0 3rem; }
.post-body > h2 { margin-top: 2.2rem; scroll-margin-top: calc(var(--head-h) + 1rem); }
.post-body h3, .post-body h2 { scroll-margin-top: calc(var(--head-h) + 1rem); }
.post-body h2 + p, .post-body h3 + p { margin-top: .2rem; }
.prose { padding: 1rem 0 0; }
.hub-body { margin-bottom: 2rem; }
.anchor { margin-left: .4rem; color: var(--line); text-decoration: none; font-size: .7em; opacity: 0; }
h2:hover .anchor, h3:hover .anchor { opacity: 1; }
.toc {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent), color-mix(in srgb, var(--bg-alt) 70%, var(--surface)));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.35rem; margin-bottom: 2rem;
  box-shadow: var(--e2), var(--hl);
}
.toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .55rem; }
.toc ol { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.toc li { margin-bottom: .28rem; }
.toc-l3 { padding-left: 1rem; font-size: .86rem; }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover { color: var(--accent-2); }
.table-wrap { overflow-x: auto; margin: 1.6rem 0; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--e2), var(--hl); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--surface); }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
th { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-alt) 100%, transparent), color-mix(in srgb, var(--bg-alt) 88%, var(--line))); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; box-shadow: inset 0 -1px 0 var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.callout {
  border-radius: var(--radius); padding: 1.05rem 1.25rem; margin: 1.7rem 0;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-alt) 100%, transparent), color-mix(in srgb, var(--bg-alt) 88%, var(--surface)));
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  box-shadow: var(--e2), var(--hl);
}
.callout > p:last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; margin: 0 0 .4rem; }
.callout-tip { border-left-color: #13a06b; }
.callout-warn { border-left-color: #e0851b; }
.callout-note { border-left-color: var(--accent-2); }
.faq { margin: 2.4rem 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.faq dt { font-weight: 700; margin-top: 1.1rem; }
.faq dd { margin: .3rem 0 0; color: var(--ink-soft); }
.sources { margin: 2rem 0; font-size: .88rem; color: var(--ink-soft); }
.disclosure {
  margin: 2.4rem 0; padding: 1.05rem 1.25rem; border-radius: var(--radius);
  background-image: linear-gradient(180deg, var(--bg-alt), color-mix(in srgb, var(--bg-alt) 85%, var(--surface)));
  font-size: .85rem; color: var(--ink-soft); border: 1px dashed var(--line);
  box-shadow: var(--e1), var(--hl-soft);
}

/* ---------------------------------------------------------------- footer */
.site-foot {
  background-image: linear-gradient(180deg, #17293c, #101c2b 60%);
  color: #c3d1e0; margin-top: 2.6rem; padding: 2.9rem 0 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 -10px 30px rgba(20, 38, 58, .08);
}
.site-foot h2 { color: #fff; font-size: 1rem; margin-bottom: .7rem; }
.site-foot a { color: #c3d1e0; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-inner { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot-about p { font-size: .87rem; color: #9fb0c2; max-width: 42ch; }
.foot-col ul { list-style: none; padding: 0; margin: 0; font-size: .87rem; display: grid; gap: .4rem; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2rem; padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot-legal p { font-size: .78rem; color: #8296ab; margin: 0; }

/* --------------------------------------------------------------- mobile */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .head-inner { padding: .6rem 0; gap: .5rem; }
  .brand { width: 100%; }
  .site-nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { gap: .25rem; flex-wrap: nowrap; }
  .site-nav a { padding: .42rem .62rem; font-size: .84rem; white-space: nowrap; }
  .site-head { position: static; }
  .crumbs li:last-child { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats { gap: .7rem; }
  .stats li { flex: 1 1 130px; min-width: 130px; padding: .75rem .9rem; }
  .grid--feature .card:first-child { grid-column: auto; }
  .grid--feature .card:first-child .card-title { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}


/* First-party links block on every article (site.officialLinks). */
.official-links { margin: 2.4rem 0 0; padding: 1.4rem 1.6rem; border: 1px solid var(--line, #e2e2e2); background: var(--bg-alt, #fff); }
.official-links h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.official-note { margin: 0 0 .9rem; font-size: .92rem; color: var(--muted, #6e6e6e); }
.official-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.official-links li { margin: 0; font-size: .92rem; }
.official-links li a { font-weight: 600; }
.official-links li span { color: var(--muted, #6e6e6e); }


/* ===== novaluxia-guide theme ===== */
/* Site B — Novaluxia Insider PH
   Layout: modelled on the shopping-desk title nymag.com/strategist.

   Values below are measured off the reference rather than guessed:

     display type   Cooper BT Light / Medium, 40px article H1 at 1.06
     body type      Miller Text, 18px on a 27px line (1.5)
     small caps     Pitch, the typewriter serif: rubrics 13px @ .15em uppercase,
                    nav 14px, standing disclaimers 12px italic
     section heads  Cooper 18px, uppercase, letterspaced .19em, centred in a
                    cream tag that is rotated off the rule it sits on
     palette        white page, black type, orange #f55d1f, cream #fdfbec
     page           wrapper 1100px, article measure 600px, rail 300/335px
     house tells    dotted rules as every separator, straight corners, no
                    shadows except the hard offset on buttons and the tag

   Cooper BT, Miller Text and Pitch are licensed and are not web-loadable, so
   the closest free faces stand in: Fraunces at SOFT 100 for the fat rounded
   serif, Source Serif 4 for the text face, Courier Prime for the typewriter.
   Type sizes, measures and rules are the reference's own. */

:root {
  --ink: #000;
  --ink-soft: #333;
  --muted: #767676;
  --line: #e2e2e2;
  --line-mid: #c9c9c9;

  --bg: #fff;
  --bg-alt: #fff;
  --surface: #fff;

  --accent: #f55d1f;
  --accent-2: #f85d00;
  --accent-ink: #fff;
  --pop: #f55d1f;
  --cream: #fdfbec;

  --radius: 0;
  --radius-sm: 0;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-ui: 'Courier Prime', ui-monospace, 'Courier New', monospace;

  --wrap: 1100px;
  --wrap-narrow: 600px;
  --head-h: auto;

  /* Flat page. Elevation tokens stay defined so shared components resolve,
     they just resolve to nothing. */
  --e1: 0 0 0 rgba(0, 0, 0, 0);
  --e2: 0 0 0 rgba(0, 0, 0, 0);
  --e3: 0 0 0 rgba(0, 0, 0, 0);
  --e4: 0 0 0 rgba(0, 0, 0, 0);
  --hl: inset 0 0 0 rgba(0, 0, 0, 0);
  --hl-soft: inset 0 0 0 rgba(0, 0, 0, 0);
  --press: inset 0 0 0 rgba(0, 0, 0, 0);
  --shadow: none;
  --shadow-lg: none;
}

/* ------------------------------------------------------------------- type */

body { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.6; color: var(--ink); background: var(--bg); }

h1, h2, h3, h4, .brand-word { font-variation-settings: 'SOFT' 100, 'WONK' 0; }
h1 { font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.06; letter-spacing: -.01em; }
h2 { font-weight: 500; font-size: 1.875rem; line-height: 1.07; }
h3 { font-weight: 500; font-size: 1.125rem; }
a { color: var(--ink); }
a:hover { color: var(--accent); }

.wrap { width: min(100% - 3rem, var(--wrap)); }
.wrap-narrow { width: min(100% - 3rem, var(--wrap-narrow)); }
@media (max-width: 700px) { .wrap, .wrap-narrow { width: min(100% - 1.8rem, var(--wrap)); } }

/* ----------------------------------------------------------------- header */

.site-head {
  position: static;
  background: var(--bg);
  border-top: 1px dotted var(--ink);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.head-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 3.5rem; padding: 1.7rem 0 1.2rem; }
.brand { margin-right: 0; gap: 0; color: var(--ink); }
.brand-lockup { height: auto; width: min(320px, 42vw); }
.brand-word { display: grid; line-height: .9; color: var(--ink); }
.brand-word em { font-style: normal; font-size: .3em; font-weight: 400; letter-spacing: .06em; margin: 0 0 .1em .7em; }
.brand-word strong { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 500; letter-spacing: -.03em; }

.head-sections ul { columns: 2; column-gap: 3.2rem; list-style: none; margin: 0; padding: 0; }
.head-sections li { break-inside: avoid; }
.head-sections a {
  display: inline-block;
  font-family: var(--font-ui); font-size: .875rem; line-height: 2.05;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.head-sections a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.head-sections a[aria-current="page"] { font-weight: 700; }

.head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  border-top: 1px dotted var(--ink); border-bottom: 1px dotted var(--ink);
  padding: .8rem 0;
}
.head-deck { margin: 0; max-width: 66ch; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.5; }
.head-search {
  flex: none; border: 1px dotted var(--ink); border-radius: 999px; padding: .5rem 1.5rem;
  font-family: var(--font-ui); font-size: .8125rem; font-style: italic;
  color: var(--ink); text-decoration: none;
}
.head-search:hover { background: var(--cream); color: var(--ink); }

/* The network's fan-notice strip. Keeps the non-official marker in the same
   place on every site; here it reads as the desk's own promo line. */
.fan-banner {
  background: var(--cream); color: var(--ink);
  border-bottom: 1px dotted var(--ink); box-shadow: none;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 400; letter-spacing: .03em;
  padding: .5rem 1rem;
}

/* ------------------------------------------------------------------- home */

.home-intro { border-bottom: 1px dotted var(--ink); padding: 1.4rem 0 1.3rem; }
.home-intro p { margin: 0; max-width: 82ch; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

.lede-band { padding: 2.2rem 0 2.8rem; }
.lede-grid { display: grid; grid-template-columns: minmax(0, 1fr) 335px; }
.lede-story { display: block; color: inherit; text-decoration: none; padding-right: 2.2rem; border-right: 1px dotted var(--line-mid); }
.lede-media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.lede-title { margin: 0 0 .5rem; font-size: clamp(1.75rem, 3.2vw, 2.35rem); font-weight: 400; line-height: 1.06; }
.lede-story:hover .lede-title { color: var(--accent); }
.lede-excerpt { margin: 0; max-width: 48ch; font-size: 1.0625rem; font-style: italic; color: var(--ink-soft); }
.lede-rail { display: grid; align-content: start; gap: 1.7rem; padding-left: 2.2rem; }

.story-stamp { display: block; color: inherit; text-decoration: none; }
.story-stamp .card-media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.story-stamp .card-title { margin: 0; font-size: 1.1875rem; }
.story-stamp:hover .card-title { color: var(--accent); }

.rail-band { display: grid; grid-template-columns: minmax(0, 1fr) 335px; }
.container-main { padding-right: 2.2rem; }
.container-secondary { padding-left: 2.2rem; border-left: 1px dotted var(--line-mid); }

/* ---------------------------------------------------------- section bands */

.band { padding: 0; }
.band-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: 1.7rem;
  border-top: 1px dotted var(--ink);
  margin-bottom: 1.7rem;
}

/* The cream tag. Rotated off the rule it sits on, with a punched hole — the
   one piece of decoration in the whole system, so everything else stays flat. */
.sticker {
  display: inline-block; position: relative;
  margin: -1.5rem 0 0;
  font: 500 1rem/1 var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--accent); background: var(--cream);
  padding: .95rem 1.7rem .8rem;
  border-radius: 5px 12px 7px 13px;
  transform: rotate(-4.5deg);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .09);
  white-space: nowrap;
}
.sticker::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

.band-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1.4rem; padding-top: .7rem; }
.band-deck { margin: 0; font-family: var(--font-ui); font-size: .875rem; line-height: 1.5; }
.more {
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: 1px dotted var(--ink); padding-bottom: 2px;
}
.more::after { content: ' ➔'; color: var(--accent); }
.more:hover { color: var(--accent); border-bottom-color: var(--accent); }

.band--stacked { padding-bottom: 2.7rem; }
.band--stacked + .band--stacked { padding-top: 2.4rem; }
.band--grid, .band--products { padding: 2.6rem 0 0; }
.band--products { padding-bottom: 2.4rem; }
.band--subscribe { margin-top: 3rem; padding: 2.8rem 0; border-top: 1px dotted var(--ink); border-bottom: 1px dotted var(--ink); }

/* Closing prose: the home page markdown sits after the cards and above the
   signup, in the narrow measure, with the same dotted rule the rest of the
   page uses. */
.band--prose { padding: 2.6rem 0 .6rem; border-top: 1px dotted var(--ink); }
.band--prose .home-body > :first-child { margin-top: 0; }
.band--prose .home-body :is(h2, h3) { text-align: left; }
.band--prose .faq { margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 1px dotted var(--ink); }
.band--prose .faq dt { font-family: var(--font-display); font-weight: 500; }
.band--prose .faq dd { color: var(--ink-soft); }
.subscribe-inner { display: grid; gap: .5rem; justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }
.subscribe-inner h2 { margin: 0; font-size: 1.875rem; font-weight: 500; }
.subscribe-inner p { margin: 0 0 .6rem; font-family: var(--font-ui); font-size: .9375rem; line-height: 1.55; color: var(--ink-soft); }

/* ------------------------------------------------------------------ cards */

.card, .cat-card {
  background: none; background-image: none;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.card:hover, .cat-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.card-link { display: block; height: auto; color: inherit; }
.card-body { padding: 0; }
.card-media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--line); box-shadow: none; }
.card-media--placeholder { aspect-ratio: 3 / 2; height: auto; background-image: none; background: var(--cream); color: var(--accent); }
.card-title { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.14; letter-spacing: -.005em; }
.card:hover .card-title { color: var(--accent); }
.card-excerpt { font-size: 1rem; color: var(--ink-soft); }

.card-kicker {
  margin: .75rem 0 .55rem;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 400;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}

/* Main-column stories run picture-left, text-right, stacked. */
.stack { display: grid; gap: 1.9rem; }
.band--stacked .card-link { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.band--stacked .card-media { aspect-ratio: 4 / 3; }
.band--stacked .card-kicker { margin-top: 0; }
.band--stacked .card-title { font-size: 1.5rem; line-height: 1.12; }

/* Product strip. Flex rather than a fixed 5-column grid so a 3-card run sits
   centred instead of leaving two empty tracks. */
.products-row { display: flex; flex-wrap: wrap; justify-content: center; }
.product-item { display: flex; flex-direction: column; flex: 1 1 190px; max-width: 250px; padding: 0 1.2rem; text-align: center; border-left: 1px dotted var(--line-mid); }
.product-item:first-child { border-left: 0; }
.product-link { display: block; }
.product-item .card-media { aspect-ratio: 1 / 1; background: #f4f4f4; }
.product-item .card-title { margin: 1rem 0 .4rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.15; }
/* Buttons land on one line even when the titles above them do not. */
.product-item .btn { margin: auto auto 0; }
.product-kicker {
  margin: 0 0 .9rem; font-family: var(--font-ui); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------- side rail */

.rail-inner { border-top: 1px dotted var(--ink); padding-top: 1.1rem; }
.rail-title { margin: 0 0 .9rem; font: 500 1rem/1 var(--font-display); letter-spacing: .17em; text-transform: uppercase; }
.rail-list { list-style: none; counter-reset: rail; margin: 0; padding: 0; }
.rail-list li { counter-increment: rail; border-top: 1px dotted var(--line-mid); }
.rail-list li:first-child { border-top: 0; }
.rail-list a {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .5rem;
  padding: .85rem 0; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.2;
}
.rail-list a::before { content: counter(rail) '.'; font-family: var(--font-ui); font-size: .8125rem; color: var(--accent); }
.rail-list a:hover { color: var(--accent); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block; border: 1.5px solid var(--ink); border-radius: 0;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .72rem 1.15rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary { background: var(--bg); color: var(--ink); background-image: none; }
.btn-primary:hover { background: var(--cream); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn-ghost { background: var(--bg); color: var(--ink); border-style: dotted; box-shadow: none; background-image: none; }
.btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--ink); transform: none; box-shadow: none; }
.btn-ghost:active { transform: none; box-shadow: none; }
.hero-actions { gap: 1rem; }

/* ------------------------------------------------------- page heads, index */

.page-head { background: none; box-shadow: none; border-top: 1px dotted var(--ink); padding: 1.8rem 0 1.5rem; }
.post-head { background: none; box-shadow: none; border-top: 1px dotted var(--ink); padding: 2rem 0 .4rem; }
.post-head h1 { margin-bottom: .6rem; }

/* Every 600px column hangs off the page grid's left edge instead of sitting
   centred, so the headline, the copy and the rail all start on one line. The
   reference sets its article headline flush with the wrapper for the same
   reason: the rail takes the right-hand space. */
.layout-strategist .post-head .wrap-narrow,
.layout-strategist .page-head .wrap-narrow,
.layout-strategist .post-body.wrap-narrow {
  width: min(100% - 3rem, var(--wrap-narrow));
  margin-left: max(1.5rem, calc((100% - var(--wrap)) / 2));
  margin-right: auto;
}
.index-count { font-family: var(--font-ui); font-size: .8125rem; }
.crumbs { font-family: var(--font-ui); font-size: .75rem; letter-spacing: .02em; }
.crumbs li + li::before { color: var(--line-mid); }
.crumbs a:hover, .crumbs a { color: var(--muted); }

.post-tags { margin: 0 0 .9rem; }
.pill {
  background: none; box-shadow: none; padding: 0; border-radius: 0;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.pill:hover { color: var(--accent); }
.post-meta { font-family: var(--font-ui); font-size: .8125rem; letter-spacing: .01em; color: var(--muted); }

.toolbar { margin-bottom: 2rem; border-top: 1px dotted var(--ink); padding-top: 1.3rem; }
.search input {
  border: 1px dotted var(--ink); border-radius: 0; box-shadow: none;
  font-family: var(--font-ui); font-size: .9375rem; font-style: italic;
  padding: .8rem 1.1rem; background: var(--bg); color: var(--ink);
}
.search input:focus { border-color: var(--ink); box-shadow: none; }
.chips { gap: 1.4rem; }
.chip {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  padding: .2rem 0; border-bottom: 2px solid transparent;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.chip span { color: inherit; opacity: .7; }
.chip:hover { transform: none; color: var(--accent); box-shadow: none; background: none; }
.chip.is-active { background: none; color: var(--ink); border-bottom-color: var(--accent); }
.chip.is-active span { color: inherit; opacity: .7; }

.cat-grid { gap: 1.4rem; }
.cat-card a { padding: 1.2rem 1.3rem; border-top: 1px dotted var(--ink); }
.cat-card h3 { font-size: 1.25rem; font-weight: 400; }
.cat-card p { font-size: .9375rem; color: var(--ink-soft); }
.cat-count { font-family: var(--font-ui); font-size: .6875rem; color: var(--accent); }

/* --------------------------------------------------------------- article */

.post-cover { max-width: var(--wrap); margin: 1.4rem auto 0; }
.post-cover img { box-shadow: none; }

.article-grid {
  display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 300px);
  justify-content: space-between; gap: 3rem;
  padding: 2.6rem 0 1rem;
}
.post-body { padding: 0; }
.article-rail { display: grid; align-content: start; gap: 1.8rem; }
/* The contents list rides along the article the way the reference's sticky
   product rail does. The standing disclaimer stays put at the top. */
.article-rail .toc { position: sticky; top: 1.5rem; }

/* Standing disclaimer, printed the way a shopping desk prints it. */
.article-rail .disclosure {
  order: -1; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none; border-radius: 0;
  font-family: var(--font-ui); font-size: .75rem; font-style: italic; line-height: 1.35; color: var(--ink-soft);
}

/* The reading column — article copy, the static pages and the hub bodies all
   share one type spec, so a guide, an explainer and a section page read the
   same way. 600px measure, 18 on 27. */
:is(.article-main, .prose, .post-body.wrap-narrow) p { margin: 0 0 1.25rem; line-height: 1.5; }
:is(.article-main, .prose, .post-body.wrap-narrow) h2 {
  margin: 2.4rem 0 .8rem; padding-top: .7rem;
  border-top: 6px solid var(--ink);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.07;
}
:is(.article-main, .prose, .post-body.wrap-narrow) h3 { margin: 1.9rem 0 .5rem; font-size: 1.25rem; font-weight: 500; }
:is(.article-main, .prose, .post-body.wrap-narrow) :is(ul, ol) { padding-left: 1.3rem; margin: 0 0 1.25rem; }
:is(.article-main, .prose, .post-body.wrap-narrow) li { margin-bottom: .45rem; line-height: 1.5; }
:is(.article-main, .prose, .post-body.wrap-narrow) a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
:is(.article-main, .prose, .post-body.wrap-narrow) a:hover { color: var(--accent); }
:is(.article-main, .prose, .post-body.wrap-narrow) blockquote { margin: 1.8rem 0; border-left: 4px solid var(--accent); color: var(--ink-soft); }

/* Only the article's own opening paragraph gets the drop cap. */
.article-main > p:first-child::first-letter {
  float: left; margin: .04em .1em 0 0;
  font-family: var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-weight: 500; font-size: 3.5em; line-height: .78;
}

/* Hub bodies sit inside a .wrap, so pull them back to the page grid's edge. */
.layout-strategist .wrap-narrow.prose { margin-left: 0; margin-right: auto; }

.post-body > h2, .post-body h2 { scroll-margin-top: 1.5rem; }
.post-figure img { border-radius: 0; box-shadow: none; }
.post-figure figcaption { font-family: var(--font-ui); font-size: .8125rem; }
.photo-grid-title { font-family: var(--font-ui); color: var(--muted); }

.callout {
  border: 1px solid var(--ink); border-left: 6px solid var(--accent);
  border-radius: 0; background: var(--cream); box-shadow: none;
  padding: 1.1rem 1.3rem;
}
.callout-tip { border-left-color: var(--accent); }
.callout-warn { border-left-color: var(--ink); }
.callout-note { border-left-color: var(--accent); }
.callout-title { font-family: var(--font-ui); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.table-wrap { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
th { background: var(--cream); box-shadow: inset 0 -1px 0 var(--ink); font-family: var(--font-ui); font-size: .75rem; letter-spacing: .08em; }
td { font-size: 1rem; }
tbody tr:hover td { background: var(--cream); }

/* Section rules run wider than the measure they head — the reference pulls its
   top-level rules out past the text column. Direct children only, so the
   blocks appended after the copy keep their own alignment. */
@media (min-width: 1240px) {
  :is(.article-main, .prose, .post-body.wrap-narrow) > h2 { margin-left: -2.5rem; padding-left: 2.5rem; }
}

.faq { margin-top: 2.6rem; border-top: 1px dotted var(--ink); padding-top: 1.4rem; }
.faq dt { font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; }
.faq dd { font-size: 1rem; color: var(--ink-soft); }
.sources { font-family: var(--font-ui); font-size: .8125rem; }

.toc { border: 0; border-top: 1px dotted var(--ink); border-radius: 0; background: none; box-shadow: none; padding: 1rem 0 0; margin: 0; }
.toc-title { font-family: var(--font-display); font-size: .9375rem; font-weight: 500; letter-spacing: .12em; color: var(--ink); }
.toc ol { font-family: var(--font-ui); font-size: .8125rem; line-height: 1.4; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--accent); }

.post-body > .disclosure, .disclosure { border: 1px dashed var(--line-mid); background: none; border-radius: 0; box-shadow: none; font-family: var(--font-ui); font-size: .8125rem; }

/* ------------------------------------------------- official / related links */

.official-links { margin: 2.8rem 0 0; padding: 1.4rem 0 0; border: 0; border-top: 1px dotted var(--ink); background: none; }
.official-links h2 { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 500; }
.official-note { margin: 0 0 .9rem; font-size: .9375rem; color: var(--ink-soft); }
.official-links li { font-size: .9375rem; }
.official-links li a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.official-links li span { color: var(--muted); }

.related-links { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px dotted var(--ink); }
.related-links-label { margin: 0 0 .8rem; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.related-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem 1.9rem; }
.related-links a { font-family: var(--font-ui); font-size: .8125rem; color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-mid); padding-bottom: 1px; }
.related-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ footer */

.site-foot {
  background: var(--bg); background-image: none; color: var(--ink);
  border-top: 1px dotted var(--ink); box-shadow: none;
  margin-top: 3.2rem; padding: 2.6rem 0 1.3rem;
}
.site-foot h2 { color: var(--ink); font-family: var(--font-ui); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.site-foot a { color: var(--ink-soft); }
.site-foot a:hover { color: var(--accent); }
.foot-about p { color: var(--ink-soft); font-size: .875rem; }
.foot-col ul { font-family: var(--font-ui); font-size: .8125rem; }
.foot-keywords { border-top: 1px dotted var(--line-mid); padding: 1.3rem 0 1.4rem; }
.foot-keywords-label { margin: 0 0 .8rem; font-family: var(--font-ui); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.foot-keywords ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; }
.foot-keywords a { font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--line-mid); padding-bottom: 1px; }
.foot-keywords a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-legal { border-top: 1px dotted var(--line-mid); }
.foot-legal p { color: var(--muted); font-family: var(--font-ui); font-size: .75rem; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 980px) {
  .lede-grid, .rail-band, .article-grid { grid-template-columns: minmax(0, 1fr); }
  .lede-story { padding-right: 0; border-right: 0; padding-bottom: 2rem; border-bottom: 1px dotted var(--line-mid); }
  .lede-rail { padding-left: 0; padding-top: 2rem; }
  .container-main { padding-right: 0; }
  .container-secondary { padding-left: 0; border-left: 0; margin-top: 2.6rem; }
  .article-grid { gap: 2.4rem; }
  .article-rail { grid-row: 1; }
  .article-rail .disclosure { order: 0; }
  .article-rail .toc { position: static; }
  .layout-strategist .post-head .wrap-narrow,
  .layout-strategist .page-head .wrap-narrow,
  .layout-strategist .post-body.wrap-narrow { margin-left: auto; margin-right: auto; }
  .products-row { justify-content: flex-start; }
  .product-item { flex: 1 1 45%; max-width: none; padding: 0 1rem 1.6rem; margin-bottom: 1.6rem; }
  .product-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .product-item:nth-child(even) { padding-right: 0; }
  .lead-grid, .rail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .head-bar { flex-direction: column; gap: 1.4rem; padding-bottom: 1rem; }
  .head-sections ul { columns: 2; column-gap: 1.6rem; }
  .head-row { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .band-head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .band-meta { justify-content: flex-start; padding-top: 0; }
  .sticker { margin-top: -1.2rem; font-size: .875rem; }
  .band--stacked .card-link { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .band--stacked .card-media { aspect-ratio: 3 / 2; }
  .band--stacked .card-kicker { margin-top: .75rem; }
  .post-body > p:first-child { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}