/* ─────────────────────────────────────────────────────────────────────────────
   RevWatch Docs — Shared Base
   base.css

   Design language is REVEAL's, reused deliberately: the two projects are meant to
   read as related applications of the same trust architecture (The Lens).
   Token values are carried over unchanged from reveal-landing/shared-base.css so
   the palettes cannot drift apart.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 2. Design tokens (carried over from REVEAL, values unchanged) ── */
:root {
  /* Warm neutrals */
  --ivory:       #F5F0E6;
  --eggshell:    #F2EDE0;
  --linen:       #EDE6D6;
  --warm-white:  #f7f7f7;
  --parchment:   #E8DEC8;
  --taupe:       #B8A898;
  --stone:       #D4C4B0;

  /* Brand earth tones */
  --cognac:      #8C4A2F;
  --cognac-dim:  rgba(140,74,47,0.1);
  --botanical:   #2e382b;

  /* Dark surfaces */
  --slate-deep:  #1E2A38;
  --slate-mid:   #2A3545;
  --charcoal:    #2C2824;
  --slate:       #4A5568;

  /* Gold — REVEAL uses two, one per surface, and both values are carried over
     unchanged. --gold is the light-ground gold from reveal-landing; --gold-on-dark
     is the dark-surface gold from reveal-finance/src/styles/tokens.js. Using the
     light one on charcoal was the contrast bug: #B8860B reaches only 4.49:1 there,
     just under AA, while #C4A96A reaches 6.43:1. */
  --gold:         #B8860B;
  --gold-on-dark: #C4A96A;
  --gold-light:  rgba(184,134,11,0.15);
  --gold-rule:   rgba(184,134,11,0.3);

  /* Layout */
  --measure:     720px;
  --shell-pad:   60px;
  --rail-w:      178px;
}

/* ── 3. Base element defaults ── */
html { scroll-behavior: smooth; }

body {
  background: var(--eggshell);
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; }

/* ── 4. Noise texture overlay (REVEAL house treatment) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 200;
}

/* ── 5. Shared keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 6. Accessibility ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: var(--ivory);
  padding: 12px 18px;
  z-index: 300;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── 7. Eyebrow label (REVEAL canonical: JetBrains Mono · 9px · uppercase · gold) ── */
.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

/* ── 8. Masthead ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  padding: 16px var(--shell-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Two stacked links, not one wrapping link: the second goes to a different site,
   and an anchor cannot legally nest inside another anchor. */
.nav-mark { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.nav-mark-name {
  /* The home link. Given a visible affordance because a wordmark that silently
     navigates is a wordmark nobody clicks. */
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  line-height: 1.1;
}

.nav-mark-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-mark-name { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s ease; }
.nav-mark-name:hover { border-bottom-color: rgba(245,240,230,0.45); }

/* No longer a link: revelationwatch.org does not exist yet. */
.nav-mark-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
}
.nav-mark-arrow { font-size: 9px; line-height: 1; }

.nav-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-on-dark);
  border: 1px solid rgba(196,169,106,0.3);
  padding: 5px 10px;
  border-radius: 2px;
  white-space: nowrap;
  margin-left: auto;
}

/* ── 8b. Section rail / drawer ──
   One list, two presentations: a persistent rail at desktop width, a drawer
   below it. Same markup either way, so there is nothing to keep in sync. */
.nav-toggle {
  /* One control, one meaning: show or hide the sections. Below the rail breakpoint it
     opens the drawer; above it, it collapses the rail. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 30px;
  padding: 0;
  background: none;
  border: 1px solid rgba(196,169,106,0.35);
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 1px;
  margin: 0 auto;
  background: var(--ivory);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.layout {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: 0;
}
body.is-index .layout,
body.is-legal .layout { grid-template-columns: minmax(0, 1fr); }
body.is-index .section-nav,
body.is-legal .section-nav { display: none; }

.section-nav {
  padding: 72px 22px 40px var(--shell-pad);
  position: sticky;
  top: 63px;
  align-self: start;
  max-height: calc(100vh - 63px);
  overflow-y: auto;
}
.section-nav-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gold-rule);
}
.section-nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.section-nav-list a {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px 6px 0;
  text-decoration: none;
  color: var(--slate);
  font-size: 11px;
  line-height: 1.45;
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.section-nav-list a:hover { color: var(--charcoal); background: var(--cognac-dim); }
.section-nav-list a.active { color: var(--charcoal); border-left-color: var(--cognac); font-weight: 500; }
.section-nav-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--gold);
  flex-shrink: 0;
}

/* A site page with its own sections shows them in the rail as jump links. The
   methodology rail lists pages; this lists headings within one page. Same furniture,
   so a reader does not have to learn a second navigation pattern. */
/* Both of these are wide-screen layout, so they live behind a min-width query.
   They were previously unscoped, and that was a real bug: `body.has-toc .section-nav`
   is specificity (0,2,1) while the mobile `.section-nav { display: none }` is (0,1,1),
   and a media query adds no specificity — so the table-of-contents rail won at every
   width and ate half a phone screen. Scoping by width rather than out-specifying it
   keeps the two breakpoints from fighting. */
@media (min-width: 1041px) {
  body.has-toc .layout { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  body.has-toc .section-nav { display: block; }

  /* Collapsed: the rail folds away and the page takes the full measure. */
  body.nav-collapsed .layout { grid-template-columns: minmax(0, 1fr); }
  body.nav-collapsed .section-nav { display: none; }
}
body.has-toc .section-nav-list a { align-items: flex-start; }
body.has-toc .section-nav-num { padding-top: 2px; }
body.has-toc .section-nav-list a.active {
  color: var(--charcoal);
  border-left-color: var(--cognac);
  font-weight: 500;
}

/* ── 9. Shell ── */
.shell {
  min-width: 0;
  padding: 72px var(--shell-pad) 96px;
  position: relative;
  z-index: 1;
}
body.is-index .shell { max-width: 1200px; margin: 0 auto; }
body.is-legal .shell { max-width: 900px; margin: 0 auto; }

/* ── 10. Footer ── */
.site-footer {
  background: var(--charcoal);
  color: rgba(245,240,230,0.62);
  padding: 40px var(--shell-pad) 0;
  position: relative;
  z-index: 1;
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 48px;
  padding-bottom: 44px;
}

.footer-brand { max-width: 38ch; }
.footer-mark a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.footer-mark a:hover { border-bottom-color: rgba(245,240,230,0.5); }
.footer-mark {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ivory);
}
/* Quoted verbatim from v0.1 §1; the build asserts it. */
.footer-principle {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gold-on-dark);
  margin: 16px 0 18px;
  padding-left: 16px;
  border-left: 2px solid rgba(196,169,106,0.4);
}
.footer-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: rgba(245,240,230,0.58);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
  align-content: start;
}
.footer-column { display: flex; flex-direction: column; gap: 9px; }
.footer-column-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
  margin-bottom: 3px;
}
.footer-column a {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(245,240,230,0.62);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-column a:hover { color: var(--ivory); border-bottom-color: rgba(196,169,106,0.6); }

/* One quiet peer-to-peer line, at the head of the footer.
   
   Position is load-bearing, not aesthetic. It previously sat directly above the
   baseline, which reads "Part of The Lens with Sara Llanes." — and two adjacent
   lines saying "built on the same trust architecture" and "Part of The Lens" invite
   the reader to conclude that The Lens is the name of that architecture. Naming the
   shared framework is a deferred decision, so layout must not make it by accident.
   
   At the head of the footer, the entire brand block and link columns always sit
   between the two, at every breakpoint: the footer-inner grid collapses from two
   columns to one on narrow screens but never to zero height, so the two lines
   cannot become neighbours. */
.footer-peer {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245,240,230,0.7);
}
.footer-peer a {
  color: var(--gold-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,169,106,0.4);
  font-style: normal;
  letter-spacing: 0.04em;
}
.footer-peer a:hover { color: var(--ivory); border-bottom-color: rgba(196,169,106,0.8); }

.footer-baseline {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(245,240,230,0.58);
}

/* ── 11. Responsive ── */
@media (max-width: 1040px) {
  :root { --shell-pad: 24px; }

  .nav-toggle { display: flex; }
  .nav-tag { margin-left: 0; }

  .layout { grid-template-columns: minmax(0, 1fr); }

  .section-nav {
    display: none;
    position: static;
    max-height: none;
    padding: 20px var(--shell-pad);
    background: var(--linen);
    border-bottom: 1px solid var(--gold-rule);
  }
  body.nav-open .section-nav { display: block; }
  .section-nav-list { gap: 0; }
  .section-nav-list a { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }

  .shell { padding-top: 48px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 560px) {
  .nav-mark-name { font-size: 13px; letter-spacing: 0.13em; }
  .nav-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}