/* ==========================================================================
   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-reviews theme ===== */
/* Site C — Novaluxia Price Check PH
   Identity: a price-comparison desk. White shelves, thin grey rules, one blue
   for action and one green for money saved. Sans-serif throughout — the
   numbers are the story here, so nothing competes with them.

   Elevation: soft and low. Cards lift 2px on hover and nothing else moves, so
   a wall of 40 product cards still reads as a table, not a pinboard. */

:root {
  --accent: #0b62d6;
  --accent-2: #084eb0;
  --accent-ink: #ffffff;
  --pop: #0f8a4a;
  --ink: #14181f;
  --ink-soft: #4b5563;
  --muted: #6f7887;
  --bg: #ffffff;
  --bg-alt: #f3f5f9;
  --surface: #ffffff;
  --line: #e1e6ee;
  --radius: 12px;
  --radius-sm: 8px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1180px;

  --e1: 0 1px 2px rgba(20, 24, 31, .06), 0 1px 3px rgba(20, 24, 31, .05);
  --e2: 0 2px 4px rgba(20, 24, 31, .05), 0 6px 16px rgba(20, 24, 31, .07);
  --e3: 0 4px 10px rgba(20, 24, 31, .06), 0 14px 30px rgba(20, 24, 31, .1);
  --e4: 0 8px 18px rgba(20, 24, 31, .07), 0 24px 48px rgba(20, 24, 31, .13);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .9);
  --hl-soft: inset 0 1px 0 rgba(255, 255, 255, .5);
}

body { font-family: var(--font-body); font-size: 16.5px; }
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

/* -------------------------------------------------------------- structure */
.site-head { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 24, 31, .02); }
.head-inner { min-height: 68px; }
/* The wordmark is the site's signature: a copperplate script against the
   utilitarian sans the rest of the page uses. Sized so the script's cap height
   matches the logo badge beside it, and the tagline stays sans so it is still
   readable at 0.72rem. */
.brand-mark { width: 38px; height: 38px; border-radius: 10px; }
.brand-text { line-height: 1.12; }
.brand-text strong { font-family: 'Great Vibes', 'Segoe Script', cursive; font-size: 1.85rem; font-weight: 400; letter-spacing: 0; line-height: 1.05; }
.brand-text em { font-size: .72rem; letter-spacing: .06em; margin-top: 4px; }
/* The footer brand column signs off the same way. */
.foot-about h2 { font-family: 'Great Vibes', 'Segoe Script', cursive; font-size: 1.45rem; font-weight: 400; letter-spacing: 0; }
.brand-text em { text-transform: none; letter-spacing: .01em; font-size: .76rem; }
.brand-mark { border-radius: 8px; }
.site-nav a { border-radius: 999px; font-weight: 600; font-size: .86rem; }
.site-nav a[aria-current="page"] { background-image: none; background-color: var(--accent); color: var(--accent-ink); box-shadow: var(--e2), var(--hl); }
.fan-banner { background: #101828; background-image: none; color: #eaf0f8; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }

.hero--compare { background: linear-gradient(180deg, #eef3fb 0%, #ffffff 100%); border-bottom: 1px solid var(--line); padding: clamp(2.4rem, 6vw, 4rem) 0 clamp(1.8rem, 4vw, 2.6rem); }
.hero--compare h1 { max-width: 30ch; }
.hero--compare .lede { max-width: 68ch; }
.eyebrow { color: var(--accent-2); }

/* The search box is the second thing a reader should see after the promise:
   they came with a product in mind. */
.find-search { display: flex; gap: .6rem; margin: 1.6rem 0 .4rem; max-width: 620px; flex-wrap: wrap; }
.find-search input {
  flex: 1 1 320px; min-height: 52px; padding: 0 1.1rem; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--e1), var(--hl);
}
.find-search input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff); outline-offset: 1px; border-color: var(--accent); }
.find-search .btn { border-radius: 999px; }

.stats--compare li { border-radius: var(--radius-sm); }
.stats--compare strong { font-size: 1.45rem; }

/* ------------------------------------------------------------------- finds */
.find-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.find-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e1), var(--hl); transition: transform .16s ease, box-shadow .16s ease;
}
.find-card:hover { transform: translateY(-2px); box-shadow: var(--e3), var(--hl); }
.find-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.find-media { position: relative; display: block; background: #fff; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.find-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: .8rem; }
.find-badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 1;
  background: #e7f7ee; color: #0b6b3a; border: 1px solid #b8e6cd;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: .22rem .55rem; border-radius: 999px;
}

.find-body { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem 1.05rem; flex: 1; }
.find-name { font-size: .98rem; font-weight: 650; line-height: 1.35; color: var(--ink); }
.find-prices { display: flex; flex-direction: column; gap: .28rem; margin-top: auto; }
.price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.price-store { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.price--our strong { font-size: 1.16rem; font-weight: 800; color: var(--ink); }
.price--our .price-store { color: var(--accent-2); }
.price--lz .price-was { color: var(--muted); text-decoration: line-through; }
.find-more { font-size: .82rem; font-weight: 700; color: #0b6b3a; }

/* --------------------------------------------------------------- cat tiles */
.cat-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; }
.cat-tile a {
  display: grid; gap: .3rem; height: 100%; padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--e1), var(--hl);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cat-tile a:hover { transform: translateY(-2px); box-shadow: var(--e3), var(--hl); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cat-tile-name { font-weight: 700; font-size: 1.05rem; }
.cat-tile-count { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); }
.cat-tile-blurb { font-size: .87rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------- steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.steps li { counter-increment: step; position: relative; padding: 1.1rem 1.2rem 1.1rem 1.2rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; color: var(--ink-soft); }
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: .6rem;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700;
}
.steps strong { display: block; color: var(--ink); margin-bottom: .3rem; }
.trust-note { font-size: .88rem; color: var(--muted); max-width: 70ch; }

/* --------------------------------------------------------------- toolbar */
.toolbar { grid-template-columns: 1fr; }
.sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.sort select { font: inherit; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .42rem 1.6rem .42rem .8rem; box-shadow: var(--e1), var(--hl); }
.result-count { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; }
.chips--links .chip { text-decoration: none; }

/* --------------------------------------------------------- product page */
.find-page .post-head { background: #fff; border-bottom: 1px solid var(--line); }
.find-page .post-head h1 { max-width: 26ch; }
.pill--plain { background: var(--bg-alt); color: var(--ink-soft); }

.compare-grid { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr); align-items: start; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; }
.compare-media { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--e1), var(--hl); }
.compare-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.compare-media figcaption { margin-top: .7rem; font-size: .74rem; color: var(--muted); text-align: center; }

.compare-panel { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-content: start; }
.price-box { display: grid; gap: .35rem; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e1), var(--hl); }
.price-box--our { border-color: #b8e6cd; background: linear-gradient(180deg, #f2fbf6, #ffffff); }
.price-box .price-amount { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.price-box--our .price-amount { color: #0b6b3a; }
.price-amount--was { color: var(--ink-soft); }
.price-box .price-note { margin: 0 0 .5rem; font-size: .78rem; color: var(--muted); }
.price-help { margin: .55rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--muted); }
.price-help a { font-weight: 600; }
.price-box .price-store { margin: 0; }
.price-box .btn { justify-self: start; }
.save-banner { grid-column: 1 / -1; margin: 0; padding: .85rem 1.1rem; border-radius: var(--radius-sm); background: #e7f7ee; border: 1px solid #b8e6cd; color: #0b6b3a; font-size: .95rem; }
.save-banner strong { font-size: 1.05rem; }
.variant-note { grid-column: 1 / -1; margin: 0; padding: .85rem 1.1rem; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft); }
.variant-note strong { color: var(--ink); }

.compare-table caption { text-align: left; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .8rem 1rem .4rem; }
.compare-table th[scope="row"] { width: 26%; }
.compare-table .cell-price { font-weight: 700; }
.method-link { font-size: .9rem; color: var(--ink-soft); }

/* ------------------------------------------------- footer keyword strip */
.foot-keywords { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2rem; padding: 1.5rem 0 1.6rem; }
.foot-keywords-label { margin: 0 0 .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8296ab; }
.foot-keywords ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.7rem; }
.foot-keywords a { font-size: .82rem; color: #c3d1e0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); padding-bottom: 1px; }
.foot-keywords a:hover { color: #fff; border-bottom-color: #fff; }

/* Keyword-bearing links, one per search phrase, on the price-check pages.
   The anchor text is what readers type, so this is the block that feeds the
   trust pages their anchor variety — it is not a place to repeat the brand. */
.keyword-checks { margin: 2.4rem 0 0; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.keyword-checks h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.keyword-checks p { margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-soft); }
.keyword-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.keyword-checks li { font-size: .88rem; line-height: 1.55; }
.keyword-checks a { font-weight: 650; }
.keyword-checks li span { color: var(--muted); }

/* Category pages carry the "before you order" tip written for that shelf, so
   the page has copy of its own next to the grid. */
.band--tight { padding: 1.7rem 0 0; }
.note-head { font-size: 1.02rem; margin: 0 0 .45rem; }
.category-note { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* The platform questions sit under the product questions, separated so the page
   still reads product-first. */
.faq dt.faq-platform { border-top: 1px dashed var(--line); padding-top: 1.3rem; margin-top: 1.5rem; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
  .compare-grid { grid-template-columns: 1fr; }
  .find-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
  .find-name { font-size: .92rem; }
  .price--our strong { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  .find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tiles { grid-template-columns: 1fr; }
  .find-search .btn { width: 100%; }
  .brand-text strong { font-size: 1.55rem; }
  .brand-text em { font-size: .68rem; }
}