/* ============================================================
   Civilization 101 — design system v2
   ============================================================ */

:root {
  color-scheme: light dark;

  --bg: #faf7f0;
  --bg-elevated: #ffffff;
  --bg-alt: #f2ecdf;
  --fg: #241f18;
  --fg-muted: #6b6252;
  --border: #e4dcc9;
  --accent: #b06a2c;
  --accent-deep: #8a4a1f;
  --accent-fg: #ffffff;
  --link: #8a4a1f;

  --level-foundation: #a9672f;
  --level-village: #4f8a3d;
  --level-industrial: #2f6f96;
  --level-future: #7a4a9e;

  --pillar-water: #2f6f96;
  --pillar-food: #a9672f;
  --pillar-energy: #b8862a;
  --pillar-shelter: #7a5a3a;
  --pillar-materials: #6b6252;
  --pillar-tools: #4a4640;
  --pillar-health: #3f8a5c;
  --pillar-knowledge: #7a4a9e;
  --pillar-community: #b6486b;
  --pillar-automation: #2f6f96;

  /* hero scene */
  --sky-top: #f6e3c5;
  --sky-bottom: #f0d2a8;
  --sun: #e8a23d;
  --hill-far: #d9c294;
  --hill-mid: #bfa06a;
  --hill-near: #8f7040;
  --scene-ink: #6b4f28;
  --pond: #7fa8bf;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(30, 24, 12, .05), 0 10px 30px -12px rgba(30, 24, 12, .16);
  --shadow-lift: 0 2px 4px rgba(30,24,12,.07), 0 18px 40px -16px rgba(30,24,12,.3);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16120e;
    --bg-elevated: #211c16;
    --bg-alt: #1c1712;
    --fg: #ece5d6;
    --fg-muted: #a89e8b;
    --border: #3a332a;
    --accent: #d8933f;
    --accent-deep: #e2a663;
    --accent-fg: #171310;
    --link: #e2a663;

    --level-foundation: #d8933f;
    --level-village: #7bc266;
    --level-industrial: #6fb2dd;
    --level-future: #b98ee6;

    --pillar-water: #6fb2dd;
    --pillar-food: #d8933f;
    --pillar-energy: #e0b45a;
    --pillar-shelter: #c69a6c;
    --pillar-materials: #a89e8b;
    --pillar-tools: #c9c2b3;
    --pillar-health: #7bc266;
    --pillar-knowledge: #b98ee6;
    --pillar-community: #e087a4;
    --pillar-automation: #6fb2dd;

    --sky-top: #2a2030;
    --sky-bottom: #47301f;
    --sun: #e8a23d;
    --hill-far: #3d2f22;
    --hill-mid: #2f251b;
    --hill-near: #211a13;
    --scene-ink: #d8933f;
    --pond: #3d5a6b;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.5);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.2; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--link); }
img, svg { max-width: 100%; }

/* ============ header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding-top: .85rem; padding-bottom: .85rem; }
.brand { text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--fg); white-space: nowrap; }
.brand .mark { color: var(--accent); }
.site-nav { display: flex; gap: 1.4rem; align-items: center; font-size: .92rem; font-weight: 500; }
.site-nav a { text-decoration: none; color: var(--fg-muted); transition: color .15s; }
.site-nav a:hover { color: var(--fg); }
.site-nav .nav-cta {
  color: var(--accent-fg); background: var(--accent);
  padding: .45em 1em; border-radius: 999px; font-weight: 600;
}
.site-nav .nav-cta:hover { background: var(--accent-deep); color: var(--accent-fg); }
@media (max-width: 640px) { .site-nav a:not(.nav-cta) { display: none; } }

/* ============ hero ============ */
.hero-full { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-art { position: absolute; inset: 0; z-index: -1; }
.hero-art svg { width: 100%; height: 100%; display: block; }
.sky-top { stop-color: var(--sky-top); }
.sky-bottom { stop-color: var(--sky-bottom); }
.sun { fill: var(--sun); }
.sun-glow { fill: var(--sun); opacity: .18; }
.hill-far { fill: var(--hill-far); }
.hill-mid { fill: var(--hill-mid); }
.hill-near { fill: var(--hill-near); }
.turbine rect, .turbine path, .turbine circle { fill: var(--scene-ink); opacity: .85; }
.dome path, .tree path, .tree rect { fill: var(--scene-ink); opacity: .92; }
.dome-door { opacity: .5 !important; }
.dome-window { fill: var(--sky-top); opacity: .9; }
.pond { fill: var(--pond); opacity: .65; }

/* ---- hero scene animations ---- */
/* szélturbina rotor: a .rotor-bounds láthatatlan kör (r=71) szimmetrikussá teszi
   a fill-box-ot, így a transform-origin: center pontosan a rotor tengelye */
.turbine .rotor-bounds { fill: none; }
.rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotor-spin 14s linear infinite;
}
@keyframes rotor-spin {
  to { transform: rotate(360deg); }
}

/* nap-glow: finom pulzálás */
.sun-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-pulse 7s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%, 100% { opacity: .14; transform: scale(1); }
  50%      { opacity: .26; transform: scale(1.05); }
}

/* tavacska: finom csillámlás */
.pond {
  transform-box: fill-box;
  transform-origin: center;
  animation: pond-shimmer 5s ease-in-out infinite;
}
@keyframes pond-shimmer {
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50%      { opacity: .72; transform: scaleX(1.02); }
}

/* sodródó felhők: a külső <g> pozicionál (nyugalmi hely reduced-motion esetén),
   a belső .cloud-drift úszik át a teljes égen és loopol */
.cloud { opacity: .5; }
.cloud ellipse { fill: var(--bg-elevated); }
.cloud-1 .cloud-drift { animation: cloud-drift-1 84s linear infinite; animation-delay: -20s; }
.cloud-2 .cloud-drift { animation: cloud-drift-2 66s linear infinite; animation-delay: -48s; }
@keyframes cloud-drift-1 {
  from { transform: translateX(-500px); }
  to   { transform: translateX(1260px); }
}
@keyframes cloud-drift-2 {
  from { transform: translateX(-880px); }
  to   { transform: translateX(840px); }
}

@media (prefers-reduced-motion: reduce) {
  .rotor, .sun-glow, .pond,
  .cloud-1 .cloud-drift, .cloud-2 .cloud-drift { animation: none; }
}

.hero-inner { padding: 6rem 1.5rem 8.5rem; max-width: 780px; margin: 0; }
.hero-caps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.hero-cap {
  font-size: .84rem; font-weight: 500; color: var(--fg);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid var(--border); border-radius: 999px; padding: .35em 1em;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero-cap strong { color: var(--accent-deep); }
.hero-cap em { color: var(--fg-muted); font-style: italic; }
.hero-kicker {
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 700;
  color: var(--accent-deep); margin-bottom: 1rem;
}
.hero-inner h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 1.2rem; }
.hero-inner h1 em { font-style: italic; color: var(--accent-deep); }
.hero-lede { font-size: 1.12rem; color: var(--fg); max-width: 56ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .98rem;
  padding: .75em 1.5em; border-radius: 999px; transition: transform .12s, box-shadow .12s, background .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-ghost { border: 1.5px solid var(--border); color: var(--fg); background: color-mix(in srgb, var(--bg-elevated) 65%, transparent); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-disabled { opacity: .65; cursor: default; pointer-events: none; }

@media (max-width: 720px) { .hero-inner { padding: 4.5rem 1.5rem 7rem; } }

/* ============ belief band ============ */
.belief-band { background: var(--fg); color: var(--bg); padding: 3rem 0; }
.belief-question {
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
  margin-bottom: 1.2rem;
}
.belief-question em { color: var(--accent); font-style: italic; }
.belief-band blockquote {
  margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.55; max-width: 60ch; font-style: italic;
}
.belief-band strong { color: var(--accent); font-style: normal; }
@media (prefers-color-scheme: dark) {
  .belief-band { background: var(--bg-alt); color: var(--fg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
}

/* ============ sections ============ */
.section { padding: 5rem 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-kicker {
  text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 700;
  color: var(--accent); margin-bottom: .6rem;
}
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 1rem; }
.section-lede { color: var(--fg-muted); font-size: 1.06rem; max-width: 62ch; margin-bottom: 2.2rem; }

/* ============ pillars ============ */
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.pillar-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.2rem; box-shadow: var(--shadow);
  border-top: 3px solid var(--pillar-color, var(--accent));
  transition: transform .15s, box-shadow .15s;
}
.pillar-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pillar-card h3 { font-size: 1.1rem; margin: .7rem 0 .35rem; }
.pillar-card p { font-size: .86rem; color: var(--fg-muted); margin: 0; }
.pillar-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--pillar-color, var(--accent));
  background: color-mix(in srgb, var(--pillar-color, var(--accent)) 13%, transparent);
}
.pillar-icon svg { width: 24px; height: 24px; }

.pillar-water { --pillar-color: var(--pillar-water); }
.pillar-food { --pillar-color: var(--pillar-food); }
.pillar-energy { --pillar-color: var(--pillar-energy); }
.pillar-shelter { --pillar-color: var(--pillar-shelter); }
.pillar-materials { --pillar-color: var(--pillar-materials); }
.pillar-tools { --pillar-color: var(--pillar-tools); }
.pillar-health { --pillar-color: var(--pillar-health); }
.pillar-knowledge { --pillar-color: var(--pillar-knowledge); }
.pillar-community { --pillar-color: var(--pillar-community); }
.pillar-automation { --pillar-color: var(--pillar-automation); }

/* colored band backgrounds (featured cards, topic hero) */
.pillar-water-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-water) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-water) 38%, var(--bg-elevated))); }
.pillar-food-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-food) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-food) 38%, var(--bg-elevated))); }
.pillar-energy-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-energy) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-energy) 38%, var(--bg-elevated))); }
.pillar-shelter-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-shelter) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-shelter) 38%, var(--bg-elevated))); }
.pillar-materials-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-materials) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-materials) 38%, var(--bg-elevated))); }
.pillar-tools-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-tools) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-tools) 38%, var(--bg-elevated))); }
.pillar-health-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-health) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-health) 38%, var(--bg-elevated))); }
.pillar-knowledge-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-knowledge) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-knowledge) 38%, var(--bg-elevated))); }
.pillar-community-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-community) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-community) 38%, var(--bg-elevated))); }
.pillar-automation-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-automation) 22%, var(--bg-elevated)), color-mix(in srgb, var(--pillar-automation) 38%, var(--bg-elevated))); }

/* ============ badges & chips ============ */
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .22em .75em; border-radius: 999px; font-size: .75rem; font-weight: 700;
  border: 1px solid transparent;
}
.level-foundation { background: color-mix(in srgb, var(--level-foundation) 15%, transparent); color: var(--level-foundation); border-color: color-mix(in srgb, var(--level-foundation) 35%, transparent); }
.level-village { background: color-mix(in srgb, var(--level-village) 15%, transparent); color: var(--level-village); border-color: color-mix(in srgb, var(--level-village) 35%, transparent); }
.level-industrial { background: color-mix(in srgb, var(--level-industrial) 15%, transparent); color: var(--level-industrial); border-color: color-mix(in srgb, var(--level-industrial) 35%, transparent); }
.level-future { background: color-mix(in srgb, var(--level-future) 15%, transparent); color: var(--level-future); border-color: color-mix(in srgb, var(--level-future) 35%, transparent); }

.pillar {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .18em .65em; border-radius: 6px;
  background: color-mix(in srgb, var(--pillar-color, var(--fg-muted)) 14%, transparent);
  color: var(--pillar-color, var(--fg-muted));
}
.status-stub { background: transparent; color: var(--fg-muted); border-color: var(--border); font-style: italic; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ============ knowledge graph — "Világfa" ============ */
.graph-legend { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1.4rem; }
.legend-note { color: var(--fg-muted); font-size: .8rem; margin-left: .5rem; }

.graph-bleed { width: min(1400px, 100% ); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1440px) { .graph-bleed { padding: 0; } }

.graph-panel--world {
  position: relative;
  height: clamp(560px, 74vh, 780px);
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(216, 147, 63, .10), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 110%, rgba(63, 90, 140, .18), transparent 60%),
    linear-gradient(180deg, #14101d 0%, #191320 55%, #171310 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  touch-action: none;
}
.graph-svg { width: 100%; height: 100%; display: block; }

.graph-star { fill: #efe6d0; opacity: .35; animation: star-twinkle 6s ease-in-out infinite; }
@keyframes star-twinkle {
  0%, 100% { opacity: .12; }
  50% { opacity: .55; }
}

.graph-ring { fill: none; opacity: .13; stroke-width: 1; stroke-dasharray: 3 7; }
.graph-ring-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .22em;
  opacity: .5; pointer-events: none;
}
.graph-core { fill: #e8a23d; opacity: .8; }

.graph-edge { fill: none; stroke-linecap: round; transition: opacity .18s, stroke-width .18s; }
.graph-node { transition: opacity .2s; }
.graph-halo { opacity: .14; pointer-events: none; }
.graph-dot.is-stub { opacity: .45; }
.graph-dot:not(.is-stub) { stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; }
.graph-label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  fill: #ece5d6;
  paint-order: stroke; stroke: rgba(16, 12, 22, .85); stroke-width: 3px;
  pointer-events: none; transition: opacity .18s;
}

/* info card */
.graph-info {
  position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);
  width: min(340px, calc(100% - 3rem));
  background: rgba(24, 19, 30, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.3rem;
  color: #ece5d6;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8);
  animation: card-in .25s ease;
}
@keyframes card-in { from { opacity: 0; transform: translateY(calc(-50% + 12px)); } to { opacity: 1; transform: translateY(-50%); } }
@media (max-width: 760px) {
  .graph-info {
    top: auto; bottom: 1rem; right: 50%; transform: translateX(50%);
    animation: none;
  }
}
.graph-info h3 { font-family: var(--serif); font-size: 1.35rem; margin: .6rem 0 .5rem; color: #faf5e8; }
.graph-info p { font-size: .88rem; opacity: .8; margin-bottom: 1rem; }
.graph-info .btn-sm { padding: .5em 1.2em; font-size: .88rem; }
.graph-info-close {
  position: absolute; top: .6rem; right: .8rem;
  font: inherit; font-size: 1.4rem; line-height: 1; color: #ece5d6; opacity: .5;
  background: none; border: none; cursor: pointer;
}
.graph-info-close:hover { opacity: 1; }
.graph-info-soon { font-size: .84rem; font-style: italic; opacity: .6; }
.graph-info-related { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.gi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .5; width: 100%; margin-bottom: .1rem; }
.gi-chip {
  font: inherit; font-size: .78rem; font-weight: 500; color: #ece5d6;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: .25em .8em; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gi-chip:hover { background: rgba(216, 147, 63, .25); border-color: rgba(216, 147, 63, .6); }

@media (prefers-reduced-motion: reduce) {
  .graph-star { animation: none; }
  .graph-info { animation: none; }
}

/* ============ journey ============ */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.journey-step {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow); position: relative;
  border-top: 4px solid var(--step-color, var(--accent));
}
.step-foundation { --step-color: var(--level-foundation); }
.step-village { --step-color: var(--level-village); }
.step-industrial { --step-color: var(--level-industrial); }
.step-future { --step-color: var(--level-future); }
.journey-num {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: color-mix(in srgb, var(--step-color) 40%, transparent);
  margin-bottom: .4rem;
}
.journey-step h3 { font-size: 1.25rem; color: var(--step-color); margin-bottom: .5rem; }
.journey-step p { font-size: .88rem; color: var(--fg-muted); }
.journey-topics { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.journey-topic {
  font-size: .76rem; font-weight: 500; text-decoration: none;
  color: var(--fg-muted); border: 1px solid var(--border);
  padding: .2em .7em; border-radius: 999px; transition: all .12s;
}
.journey-topic:hover { border-color: var(--step-color); color: var(--step-color); }
.journey-topic.is-ready { color: var(--step-color); border-color: color-mix(in srgb, var(--step-color) 45%, transparent); background: color-mix(in srgb, var(--step-color) 10%, transparent); font-weight: 600; }

/* ============ featured ============ */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.featured-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--fg);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.featured-band { height: 170px; display: grid; place-items: center; overflow: hidden; }
.featured-icon svg { width: 52px; height: 52px; color: var(--bg-elevated); opacity: .95; }
.featured-ill { width: 100%; height: 100%; object-fit: cover; display: block; }

/* topic page illustration */
.topic-ill {
  margin: 0 0 2rem; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: var(--bg-elevated);
}
.topic-ill img { display: block; width: 100%; height: auto; }
.featured-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.featured-body h3 { font-size: 1.2rem; }
.featured-body p { font-size: .9rem; color: var(--fg-muted); margin: 0; }
.featured-more { font-size: .88rem; font-weight: 600; color: var(--accent-deep); margin-top: .2rem; }

/* ============ pack ============ */
.pack-section { background: var(--fg); color: var(--bg); }
@media (prefers-color-scheme: dark) {
  .pack-section { background: var(--bg-alt); color: var(--fg); border-top: 1px solid var(--border); }
}
.pack-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 820px) { .pack-inner { grid-template-columns: 1fr; } }
.pack-section .section-title { color: inherit; }
.pack-section p { color: inherit; opacity: .85; }
.pack-list { margin: 0 0 1.6rem; padding-left: 1.2rem; opacity: .85; }
.pack-list li { margin-bottom: .4rem; }
.pack-art { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; perspective: 600px; }
.pack-book {
  width: 96px; height: 140px; border-radius: 6px 12px 12px 6px;
  display: grid; place-items: end center; padding-bottom: .8rem;
  font-family: var(--serif); font-weight: 700; font-size: .85rem;
  color: #fff; box-shadow: var(--shadow-lift);
  border-left: 6px solid rgba(0,0,0,.25);
}
.pack-book.b1 { background: linear-gradient(160deg, #3d7ea3, #2f6f96); transform: rotate(-6deg) translateY(8px); }
.pack-book.b2 { background: linear-gradient(160deg, #c9973a, #b8862a); height: 158px; z-index: 2; }
.pack-book.b3 { background: linear-gradient(160deg, #7d7462, #6b6252); transform: rotate(6deg) translateY(8px); }

/* ============ topic page ============ */
.topic-hero { border-bottom: 1px solid var(--border); padding: 2.6rem 0 2.2rem; }
.topic-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .6rem 0 .4rem; }
.topic-summary { font-size: 1.1rem; color: var(--fg); opacity: .8; max-width: 62ch; margin: 0; }
.back-link { display: inline-block; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; color: var(--fg-muted); text-decoration: none; }
.back-link:hover { color: var(--link); }
.topic-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.topic-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; padding-top: 2.5rem; padding-bottom: 4rem; }
@media (max-width: 900px) { .topic-layout { grid-template-columns: 1fr; } }

.topic-article { max-width: 68ch; }
.topic-article h2 { font-size: 1.45rem; margin: 2.4rem 0 .9rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.topic-article h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.topic-article li { margin-bottom: .4rem; }

.spec-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 2.2rem; overflow: hidden;
}
.spec { padding: 1rem 1.2rem; border-right: 1px solid var(--border); }
.spec:last-child { border-right: none; }
@media (max-width: 640px) { .spec { border-right: none; border-bottom: 1px solid var(--border); } .spec:last-child { border-bottom: none; } }
.spec-label { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; color: var(--fg-muted); margin-bottom: .25rem; }
.spec-value { font-size: .88rem; font-weight: 500; }

.topic-aside { display: flex; flex-direction: column; gap: 1.2rem; }
.aside-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.3rem 1.3rem 1.1rem;
  position: sticky; top: 84px;
}
.aside-card + .aside-card { position: static; }
.aside-card h3 { font-size: 1.02rem; margin-bottom: .9rem; }

.product-list { list-style: none; margin: 0; padding: 0; }
.product-item {
  padding: .8rem 0; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .3rem;
}
.product-item:first-child { border-top: none; padding-top: 0; }
.product-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.product-name { font-size: .9rem; font-weight: 600; }
.product-generic { font-size: .8rem; color: var(--fg-muted); margin: 0; }
.product-note { font-size: .74rem; color: var(--fg-muted); font-style: italic; }
.product-link { font-size: .85rem; font-weight: 600; text-decoration: none; }
.tier {
  flex-shrink: 0; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .2em .6em; border-radius: 999px; white-space: nowrap;
}
.tier-diy { background: color-mix(in srgb, var(--pillar-health) 15%, transparent); color: var(--pillar-health); }
.tier-consumer { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-deep); }
.tier-pro { background: color-mix(in srgb, var(--pillar-water) 15%, transparent); color: var(--pillar-water); }

.related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.related-list li a {
  display: block; padding: .6em .9em; border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: var(--fg); background: var(--bg); font-size: .9rem; font-weight: 500;
  transition: border-color .12s, color .12s;
}
.related-list li a:hover { border-color: var(--accent); color: var(--link); }

.sources-section h2 { font-size: 1.2rem; }
.sources-list { font-size: .88rem; color: var(--fg-muted); padding-left: 1.3rem; }
.sources-list li { margin-bottom: .5rem; }

code { background: color-mix(in srgb, var(--fg-muted) 16%, transparent); padding: .15em .45em; border-radius: 5px; font-size: .9em; }

/* ============ search ============ */
.search-toggle {
  display: inline-flex; align-items: center; gap: .45em;
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--fg-muted);
  background: color-mix(in srgb, var(--fg-muted) 8%, transparent);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .4em 1em; cursor: pointer; transition: border-color .15s, color .15s;
}
.search-toggle:hover { border-color: var(--accent); color: var(--fg); }
.search-toggle svg { width: 15px; height: 15px; }
.search-toggle kbd {
  font-family: var(--sans); font-size: .7rem; border: 1px solid var(--border);
  border-radius: 4px; padding: 0 .4em; color: var(--fg-muted);
}
@media (max-width: 760px) { .search-toggle span, .search-toggle kbd { display: none; } .search-toggle { padding: .4em .6em; } }

.search-overlay { position: fixed; inset: 0; z-index: 100; }
.search-backdrop { position: absolute; inset: 0; background: rgba(20, 15, 8, .5); backdrop-filter: blur(3px); }
.search-box {
  position: relative; max-width: 620px; margin: 10vh auto 0; padding: 0 1rem;
}
#search-input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--fg);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
  padding: .9em 1.2em; outline: none; box-shadow: var(--shadow-lift);
}
#search-input:focus { border-color: var(--accent); }
.search-results {
  list-style: none; margin: .6rem 0 0; padding: 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lift); overflow: hidden; max-height: 55vh; overflow-y: auto;
}
.search-results:empty { display: none; }
.search-result {
  display: block; padding: .8rem 1.2rem; text-decoration: none; color: var(--fg);
  border-top: 1px solid var(--border);
}
.search-results li:first-child .search-result { border-top: none; }
.search-result.is-selected, .search-result:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sr-title { display: block; font-weight: 600; font-family: var(--serif); font-size: 1.05rem; }
.sr-meta { display: inline-flex; gap: .4rem; align-items: center; margin: .2rem 0; }
.sr-stub { font-size: .74rem; font-style: italic; color: var(--fg-muted); }
.sr-summary { display: block; font-size: .84rem; color: var(--fg-muted); }
.search-empty { padding: 1rem 1.2rem; color: var(--fg-muted); font-size: .9rem; }
.search-hint { text-align: center; color: #fff; opacity: .7; font-size: .78rem; margin-top: .8rem; }

/* ============ pack note (topic aside) ============ */
.pack-note { background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.pack-note p { font-size: .84rem; color: var(--fg-muted); margin: 0; }
.pack-note a { font-weight: 600; }
.pack-note-icon { color: var(--accent); margin-right: .2em; }

/* ============ footer ============ */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-mission { font-size: .88rem; color: var(--fg-muted); max-width: 48ch; margin-top: .8rem; }
.footer-meta { text-align: right; font-size: .82rem; color: var(--fg-muted); align-self: end; }
@media (max-width: 720px) { .footer-meta { text-align: left; } }
.footer-meta p { margin: 0 0 .3rem; }