/* ========================================================================
   OCCUPY REFOUNDING — Stylesheet
   A blog within the Kingdom of Conscience ecosystem
   ======================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary: #0d0f14;
  --bg-secondary: #141820;
  --bg-card: #1a1f2b;
  --bg-card-hover: #212838;
  /* Text tones, brightened 2026-09-10. Same hues, more light in them.

     The old --text-muted (#6b6760) measured 2.9:1 against --bg-card, under the
     4.5:1 minimum for body text — the labels and sources set in it were not
     merely understated, they were below the line where text is considered
     readable. New measurements, all against --bg-card, the lightest background
     on the site (anything passing there passes on --bg-primary too):

         --text-primary    14.2:1
         --text-secondary   9.4:1
         --text-muted       5.2:1
         --accent-gold      9.0:1

     Keep any tone added later above 4.5:1 on --bg-card. */
  --text-primary: #f2efe8;
  --text-secondary: #c9c3b8;
  --text-muted: #979187;
  /* Gold, taken to full saturation 2026-09-10 after two passes that were each
     too timid. Saturation was always the lever, not lightness: 46% -> 52% ->
     80% -> 100%, hue held near 43. Lightness alone walks gold toward cream and
     it stops reading as metal.
     This is the end of the road in this direction. s100% is the maximum, and
     going lighter from here produces pale yellow, not brighter gold. If it ever
     needs more presence than this, the answer is weight, size or surrounding
     restraint — not another colour value. 12.1:1 on --bg-card. */
  --accent-gold: #ffd97a;
  --accent-gold-dim: rgba(255, 217, 122, 0.16);
  --accent-gold-glow: rgba(255, 217, 122, 0.32);
  --accent-red: #d76363;
  --accent-green: #6fc285;
  --accent-blue: #74a6d6;
  --accent-amber: #e2b955;
  /* Borders are the gold at low alpha. Lifted with it, so a card edge keeps the
     same relationship to the text inside it. */
  --border-subtle: rgba(255, 217, 122, 0.16);
  --border-medium: rgba(255, 217, 122, 0.32);
  --font-heading: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 900px;
  --max-width-wide: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 18px root, and it has to be. Cormorant Garamond is a display Garamond with a
   notably small x-height — it sets around two sizes smaller than a workhorse
   face at the same nominal px. That is why the sub-1rem body sizes once
   scattered through this file read as tiny on any display: 0.85rem was 15px
   nominal and looked like 12px.

   The rule that follows: DO NOT set body copy below 1rem in this stylesheet.
   Inter and JetBrains Mono have normal x-heights and may go smaller, and do,
   for labels and data. */
html { scroll-behavior: smooth; font-size: 18px; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent-gold); text-decoration: none; transition: color var(--transition); }
/* Hover must land brighter than --accent-gold, not darker. This has now been
   wrong once already: #e0c88a was set against the original gold and quietly
   became dimmer than the base, so hovering a link faded it. With the base at
   full saturation, hover can only go up by getting paler — #fff0c4 is gold with
   light added, and reads as a lift rather than a different colour. */
a:hover { color: #fff0c4; }

::selection { background: var(--accent-gold-dim); color: var(--text-primary); }

/* --- Utility --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.container--wide { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ornament { text-align: center; color: var(--accent-gold); font-size: 1.2rem; letter-spacing: 0.5em; margin: 3rem 0; opacity: 0.85; }

/* --- Navigation --- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13, 15, 20, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.8rem 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.site-nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.site-nav__inner {
  max-width: var(--max-width-wide); margin: 0 auto; padding: 0 2rem;
  display: flex; justify-content: space-between; align-items: center;
}
.site-nav__brand {
  font-family: var(--font-heading); font-size: 0.85rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent-gold);
}
/* The brand is a <div>, not an <a>: the ecosystem name beside it links back to
   the Kingdom of Conscience site root, and an anchor cannot nest inside an
   anchor. Both children inherit the brand type; the global `a` rules give them
   their gold and their hover, so .site-nav__parent only has to dim itself. */
.site-nav__parent { color: var(--text-muted); font-size: 0.7rem; margin-left: 0.5rem; letter-spacing: 0.08em; }
.site-nav__links { display: flex; gap: 2rem; list-style: none; }
.site-nav__links a {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary);
  transition: color var(--transition);
}
.site-nav__links a:hover, .site-nav__links a.active { color: var(--accent-gold); }
.nav-toggle { display: none; background: none; border: none; color: var(--accent-gold); cursor: pointer; font-size: 1.4rem; }

/* --- Hero --- */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 6rem 2rem 4rem; position: relative;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,169,110,0.06) 0%, transparent 70%);
}
.hero__title {
  font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.08em; line-height: 1.2; color: var(--text-primary);
  margin-bottom: 1.5rem; max-width: 800px;
}
.hero__subtitle {
  font-family: var(--font-body); font-size: 1.4rem;
  color: var(--text-secondary); max-width: 650px;
  line-height: 1.8; margin-bottom: 3rem; font-style: italic;
}
.hero__scroll-cue {
  position: absolute; bottom: 2rem;
  color: var(--accent-gold); opacity: 0.75;
  animation: pulse-down 2s infinite;
  font-size: 1.5rem;
}
@keyframes pulse-down {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(8px); opacity: 0.8; }
}

/* --- Sections --- */
section { padding: 5rem 0; }
section + section { border-top: 1px solid var(--border-subtle); }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header__kicker {
  font-family: var(--font-sans); font-size: 0.65rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--accent-gold); margin-bottom: 0.75rem; display: block;
}
.section-header__title {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0.06em; color: var(--text-primary); margin-bottom: 1rem;
}
.section-header__desc {
  font-size: 1rem; color: var(--text-secondary);
  max-width: 600px; margin: 0 auto; line-height: 1.7;
}

/* --- Thesis prose ---------------------------------------------------------
   The thesis is the only section whose body is bare <p> and <blockquote> in a
   .container — every other section is built from components that carry their
   own type. The global reset zeroes all margins, so without these rules the
   paragraphs butt straight up against each other and read as one slab.
   Set one notch above body copy: this is the argument the page is making, so
   it outranks the post prose (1rem) while staying under the hero (1.2rem). */
#thesis p {
  font-size: 1.25rem;
  line-height: 1.85;
  margin-bottom: 1.6rem;
}
#thesis p:last-of-type { margin-bottom: 0; }
#thesis strong { color: var(--text-primary); }
#thesis em { color: var(--text-primary); }
#thesis blockquote {
  border-left: 3px solid var(--accent-gold);
  padding: 1rem 1.5rem; margin: 2.5rem 0;
  background: var(--accent-gold-dim); border-radius: 0 6px 6px 0;
  font-style: italic; color: var(--text-primary);
}
#thesis blockquote p { margin-bottom: 0; }

/* --- Evidence Dashboard --- */
.evidence-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin-bottom: 3rem;
}
.evidence-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 1.5rem 1.8rem;
  transition: border-color var(--transition), transform var(--transition);
}
.evidence-card:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
}
.evidence-card__label {
  font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.5rem;
}
.evidence-card__value {
  font-family: var(--font-data); font-size: 1.8rem;
  color: var(--accent-gold); font-weight: 700;
  margin-bottom: 0.3rem; line-height: 1.2;
}
.evidence-card__detail {
  font-family: var(--font-sans); font-size: 0.86rem;
  color: var(--text-secondary); line-height: 1.6;
}
.evidence-card__source {
  font-family: var(--font-sans); font-size: 0.68rem;
  color: var(--text-muted); margin-top: 0.8rem;
  border-top: 1px solid var(--border-subtle); padding-top: 0.6rem;
}
.evidence-card--alert .evidence-card__value { color: var(--accent-red); }
.evidence-card--positive .evidence-card__value { color: var(--accent-green); }
.evidence-card__update-date {
  font-family: var(--font-data); font-size: 0.66rem;
  color: var(--text-muted); margin-top: 0.3rem;
}

/* --- Timeline --- */
.timeline-container { position: relative; padding: 2rem 0; }
.timeline-controls {
  display: flex; justify-content: center; gap: 0.8rem;
  margin-bottom: 2rem; flex-wrap: wrap;
}
.timeline-filter {
  font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--border-subtle);
  color: var(--text-secondary); padding: 0.4rem 1rem;
  border-radius: 20px; cursor: pointer;
  transition: all var(--transition);
}
.timeline-filter:hover, .timeline-filter.active {
  border-color: var(--accent-gold); color: var(--accent-gold);
  background: var(--accent-gold-dim);
}
.timeline {
  position: relative; padding-left: 3rem;
}
.timeline::before {
  content: ''; position: absolute; left: 1rem; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--accent-gold-dim), var(--border-subtle), var(--accent-gold-dim));
}
.timeline-era {
  margin-bottom: 3rem;
}
.timeline-era__label {
  font-family: var(--font-heading); font-size: 1rem;
  letter-spacing: 0.1em; color: var(--accent-gold);
  margin-bottom: 1.5rem; padding-left: 0;
  position: relative;
}
.timeline-era__label::before {
  content: ''; position: absolute; left: -2.3rem; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent-gold); box-shadow: 0 0 12px var(--accent-gold-glow);
}
.timeline-event {
  position: relative; margin-bottom: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 6px; transition: border-color var(--transition);
}
.timeline-event:hover { border-color: var(--border-medium); }
.timeline-event::before {
  content: ''; position: absolute; left: -2.55rem; top: 1.5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--text-muted);
}
.timeline-event[data-status="confirmed"]::before { border-color: var(--accent-gold); background: var(--accent-gold); }
.timeline-event[data-status="active"]::before { border-color: var(--accent-red); background: var(--accent-red); box-shadow: 0 0 8px rgba(196,79,79,0.5); }
.timeline-event[data-status="projected"]::before { border-color: var(--accent-amber); background: transparent; border-style: dashed; }
.timeline-event__date {
  font-family: var(--font-data); font-size: 0.76rem;
  color: var(--accent-gold); margin-bottom: 0.3rem;
}
.timeline-event__title {
  font-family: var(--font-heading); font-size: 1.05rem;
  letter-spacing: 0.04em; color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.timeline-event__desc {
  font-family: var(--font-body); font-size: 1rem;
  color: var(--text-secondary); line-height: 1.65;
}
.timeline-event__tags {
  display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap;
}
.timeline-event__tag {
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 3px;
  background: var(--accent-gold-dim); color: var(--accent-gold);
}
.timeline-event__tag--banking { background: rgba(90,143,196,0.15); color: var(--accent-blue); }
.timeline-event__tag--ai { background: rgba(196,79,79,0.15); color: var(--accent-red); }
.timeline-event__tag--sovereignty { background: rgba(90,175,110,0.15); color: var(--accent-green); }
.timeline-event__tag--fiat { background: rgba(212,168,67,0.15); color: var(--accent-amber); }

/* --- Scaffolding / Layers --- */
.scaffolding { counter-reset: layer; }
.scaffold-layer {
  margin-bottom: 2rem; counter-increment: layer;
  border: 1px solid var(--border-subtle); border-radius: 8px;
  overflow: hidden; transition: border-color var(--transition);
}
.scaffold-layer:hover { border-color: var(--border-medium); }
.scaffold-layer__header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem; cursor: pointer;
  background: var(--bg-card);
  transition: background var(--transition);
  user-select: none;
}
.scaffold-layer__header:hover { background: var(--bg-card-hover); }
.scaffold-layer__number {
  font-family: var(--font-data); font-size: 0.78rem;
  color: var(--accent-gold); opacity: 0.9;
  min-width: 2rem;
}
.scaffold-layer__number::before { content: 'LAYER ' counter(layer); }
.scaffold-layer__title {
  font-family: var(--font-heading); font-size: 1rem;
  letter-spacing: 0.05em; color: var(--text-primary); flex: 1;
}
.scaffold-layer__toggle {
  font-size: 1.2rem; color: var(--text-muted);
  transition: transform var(--transition);
}
.scaffold-layer.open .scaffold-layer__toggle { transform: rotate(180deg); }
.scaffold-layer__content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.scaffold-layer.open .scaffold-layer__content { max-height: 2000px; }
.scaffold-layer__inner {
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid var(--border-subtle);
}
.scaffold-layer__inner p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; color: var(--text-secondary); }
.scaffold-layer__inner p:last-child { margin-bottom: 0; }
.scaffold-layer__inner strong { color: var(--text-primary); }
.scaffold-layer__inner blockquote {
  border-left: 3px solid var(--accent-gold);
  padding: 0.8rem 1.2rem; margin: 1.2rem 0;
  background: var(--accent-gold-dim); border-radius: 0 4px 4px 0;
  font-style: italic; color: var(--text-primary);
}

/* --- Blog Posts Grid --- */
.posts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.post-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 2rem;
  transition: border-color var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.post-card:hover { border-color: var(--border-medium); transform: translateY(-2px); }
.post-card__number {
  font-family: var(--font-data); font-size: 0.72rem;
  color: var(--accent-gold); opacity: 0.9; margin-bottom: 0.8rem;
}
.post-card__title {
  font-family: var(--font-heading); font-size: 1.1rem;
  letter-spacing: 0.04em; color: var(--text-primary);
  margin-bottom: 0.6rem; line-height: 1.4;
}
.post-card__subtitle {
  /* Italic Cormorant at 400 is the lightest thing on the page — small, thin and
     gold on dark all at once. Size and weight both go up. 600 rather than 500
     because the font is loaded with italic 400 and 600 only, so 500 would be
     synthesised by the browser and come out uneven. */
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 600;
  color: var(--accent-gold); font-style: italic; margin-bottom: 0.8rem;
}
.post-card__excerpt {
  font-size: 1rem; color: var(--text-secondary);
  line-height: 1.7; flex: 1; margin-bottom: 1rem;
}
.post-card__meta {
  font-family: var(--font-sans); font-size: 0.68rem;
  color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase;
  /* wrap + gap, not just space-between. At 0.6rem the layer chip and the tag
     list happened to fit on one line in a three-up grid; at 0.68 they do not,
     and a rigid flex row responded by breaking the chip across two lines and
     jamming it against the tags. Wrapping lets the row become two clean lines
     instead of one mangled one. The chip itself stays nowrap so it is never
     the thing that breaks. */
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 0.4rem 0.8rem;
}
.post-card__layer {
  padding: 0.15rem 0.5rem; white-space: nowrap; border-radius: 3px;
  background: var(--accent-gold-dim); color: var(--accent-gold);
}

/* --- Prose (Blog Post Pages) --- */
.prose { max-width: var(--max-width); margin: 0 auto; padding: 6rem 2rem 4rem; }
.prose__header { text-align: center; margin-bottom: 3rem; }
.prose__kicker {
  font-family: var(--font-sans); font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-gold); margin-bottom: 1rem; display: block;
}
.prose__title {
  font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.5rem);
  letter-spacing: 0.06em; color: var(--text-primary);
  margin-bottom: 1rem; line-height: 1.3;
}
.prose__subtitle {
  font-family: var(--font-body); font-size: 1.38rem;
  color: var(--text-secondary); font-style: italic; max-width: 600px;
  margin: 0 auto 1.5rem; line-height: 1.6;
}
.prose__meta {
  /* 0.7rem, not more. This is Inter, uppercase and widely tracked, so it reads
     considerably larger per px than the Cormorant italic subtitle above it.
     Taking it to 0.76 with everything else made the credit line outshout the
     subtitle — a hierarchy inversion that is invisible in the CSS and obvious
     on the page. Judge these two against each other, never in isolation. */
  font-family: var(--font-sans); font-size: 0.7rem;
  color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
}
.prose h2 {
  font-family: var(--font-heading); font-size: 1.5rem;
  letter-spacing: 0.05em; color: var(--text-primary);
  margin: 3rem 0 1.5rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.prose h3 {
  font-family: var(--font-heading); font-size: 1.15rem;
  letter-spacing: 0.04em; color: var(--accent-gold);
  margin: 2rem 0 1rem;
}
/* The essay body — the longest-read text on the site, and until now the
   smallest thing that mattered: it carried no font-size at all, so it inherited
   a bare 1rem of a face that needs more than that.

   It stays --text-secondary rather than --text-primary on purpose. `strong` and
   `em` below are primary, and that one step is the whole mechanism by which
   emphasis reads inside a paragraph. Brightening the token lifted both together
   and kept the gap. */
.prose p { font-size: 1.12rem; line-height: 1.85; margin-bottom: 1.35rem; color: var(--text-secondary); }
.prose p:first-of-type { font-size: 1.22rem; }
.prose strong { color: var(--text-primary); }
.prose em { color: var(--text-primary); }
.prose blockquote {
  border-left: 3px solid var(--accent-gold);
  padding: 1rem 1.5rem; margin: 1.5rem 0;
  background: var(--accent-gold-dim); border-radius: 0 6px 6px 0;
  font-style: italic; color: var(--text-primary);
}
.prose blockquote p { color: var(--text-primary); margin-bottom: 0.5rem; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { font-size: 1.08rem; margin: 1rem 0 1.2rem 1.5rem; color: var(--text-secondary); }
.prose li { margin-bottom: 0.4rem; }
.prose .evidence-inline {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 1rem 1.2rem; margin: 1.5rem 0;
  font-family: var(--font-sans); font-size: 0.8rem;
}
.prose .evidence-inline__label {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-gold); margin-bottom: 0.3rem; display: block;
}
.prose .source-note {
  font-family: var(--font-sans); font-size: 0.8rem;
  color: var(--text-muted); border-top: 1px solid var(--border-subtle);
  padding-top: 0.8rem; margin-top: 2rem;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 3rem 0; text-align: center;
}
.site-footer__brand {
  font-family: var(--font-heading); font-size: 0.8rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent-gold); margin-bottom: 0.5rem;
}
.site-footer__tagline {
  font-family: var(--font-body); font-size: 1.02rem;
  color: var(--text-secondary); font-style: italic; margin-bottom: 1.5rem;
}
.site-footer__links {
  display: flex; justify-content: center; gap: 2rem;
  list-style: none; margin-bottom: 1.5rem;
}
.site-footer__links a {
  font-family: var(--font-sans); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.site-footer__links a:hover { color: var(--accent-gold); }
.site-footer__legal {
  font-family: var(--font-sans); font-size: 0.6rem;
  color: var(--text-muted); letter-spacing: 0.05em;
}
.site-footer__ornament {
  color: var(--accent-gold); opacity: 0.4;
  font-size: 1rem; letter-spacing: 0.5em; margin-bottom: 1rem;
}

/* --- Last Updated Banner --- */
.last-updated {
  text-align: center; padding: 1rem 2rem;
  font-family: var(--font-data); font-size: 0.74rem;
  color: var(--text-muted); letter-spacing: 0.05em;
  background: var(--bg-secondary);
}
.last-updated strong { color: var(--accent-gold); }

/* --- Responsive --- */
@media (max-width: 768px) {
  /* 17px, not 16px. The small x-height that forces 18px on the desktop root
     bites harder on a phone, not less. */
  html { font-size: 17px; }
  .site-nav__links { display: none; }
  .site-nav__links.open {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 2rem; gap: 1rem;
  }
  .nav-toggle { display: block; }
  .hero { min-height: 90vh; padding: 5rem 1.5rem 3rem; }
  .container, .container--wide { padding: 0 1.2rem; }
  .evidence-grid { grid-template-columns: 1fr; }
  .posts-grid { grid-template-columns: 1fr; }
  .timeline { padding-left: 2.5rem; }
  .timeline::before { left: 0.5rem; }
  .timeline-era__label::before { left: -2.3rem; }
  .timeline-event::before { left: -2.25rem; }
  .site-footer__links { flex-direction: column; gap: 0.8rem; }
}

/* --- Print --- */
@media print {
  body { background: #fff; color: #111; font-size: 11pt; }
  .site-nav, .hero__scroll-cue, .timeline-controls, .nav-toggle { display: none; }
  .evidence-card, .timeline-event, .scaffold-layer, .post-card { break-inside: avoid; border-color: #ccc; }
  a { color: #333; }
  .evidence-card__value { color: #333; }
}