/* Attera v2 — base + motif primitives
   The chip, the §-mark, the drop-cap, the hairline table. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

/* Subtle paper grain — additive, never decorative */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(26,24,20,0.018) 0, transparent 55%),
    radial-gradient(circle at 78% 76%, rgba(26,24,20,0.015) 0, transparent 50%);
}

main, header, footer, section, article, nav { position: relative; z-index: 1; }

/* Reset */
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 100;
  border-radius: 2px;
}
.skip-link:focus { top: 12px; }

/* ---------- Containers ---------- */
.container        { width: 100%; max-width: var(--w-wide);   margin: 0 auto; padding: 0 32px; }
.container--content { max-width: var(--w-content); }
.container--reading { max-width: var(--w-reading); }
.container--narrow  { max-width: var(--w-narrow); }

@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 6vw, 84px); line-height: 1.02; letter-spacing: -0.028em; }
h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.022em; }
h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -0.015em; }
h4 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }

h1 em, h2 em {
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--teal-deep);
}

p { margin: 0; text-wrap: pretty; }
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}
.body-narrow p + p { margin-top: 1.1em; }

strong { font-weight: 600; color: var(--ink); }

/* ---------- §-mark / section labelling ---------- */
.section-mark {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}
.section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.section-mark--center { justify-content: center; }
.section-mark--center::after,
.section-mark--center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section-numeral {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.9;
  font-weight: 360;
  color: var(--rule);
  margin: 0 0 -0.2em -0.05em;
  letter-spacing: -0.04em;
  user-select: none;
}

/* ---------- Drop cap ---------- */
.drop-cap > p:first-of-type::first-letter,
.drop-cap::first-letter {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-weight: 400;
  font-size: 5.2em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.12em 0 0;
  margin: 0.05em 0.04em 0 -0.02em;
  color: var(--ink);
}

/* ---------- The motif: citation chip ---------- */
.fig {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
.fig-val {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18, "SOFT" 0;
  font-weight: 500;
  font-feature-settings: "tnum", "lnum";
  color: var(--teal-deep);
}
.fig-cite {
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 400;
  color: var(--mute);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
  transform: translateY(-0.18em);
  cursor: help;
  text-transform: none;
  line-height: 1.4;
  white-space: nowrap;
}
.fig-cite:hover {
  background: var(--paper-3);
  color: var(--ink-2);
  border-color: var(--ink-2);
}

/* Quiet variant — for footnote-like inline use */
.fig--quiet .fig-val { color: var(--ink); font-weight: 500; }
.fig--quiet .fig-cite { opacity: 0.72; }

/* Strong variant — for big stats */
.fig--strong .fig-val {
  font-size: 1em;
  font-weight: 400;
}
.fig--strong .fig-cite {
  font-size: 11px;
  padding: 3px 8px;
}

/* Amber/verify variant — always carries ⚠ + the word "verify" */
.fig--verify .fig-val { color: var(--amber); }
.fig--verify .fig-cite {
  color: var(--amber);
  background: var(--amber-tint);
  border-color: rgba(185,122,30,0.35);
}

/* Plain "source" chip — used standalone next to marketing claims */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mute);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 7px;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: 0.15em;
}
.chip--verify {
  color: var(--amber);
  background: var(--amber-tint);
  border-color: rgba(185,122,30,0.35);
}
.chip--verify::before {
  content: "⚠";
  font-family: var(--sans);
  font-size: 11px;
  margin-right: 1px;
}

/* ---------- Hairline tables ---------- */
.hairline {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.hairline th,
.hairline td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.hairline thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.hairline tbody tr:last-child td { border-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--teal-deep); }
.btn--secondary {
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn--ghost {
  color: var(--ink);
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover { color: var(--teal-deep); }
.btn .arr { font-family: var(--mono); font-size: 12.5px; font-weight: 400; }

/* ---------- Page-mark (top-right working-paper meta) ---------- */
.page-mark {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
}

/* ---------- Card / paper-block ---------- */
.paper-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 32px;
}

/* ---------- Reveal animation (intersection observer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-mute   { color: var(--mute); }
.mono        { font-family: var(--mono); }
.serif       { font-family: var(--serif); }
.italic      { font-style: italic; }
.tnum        { font-feature-settings: "tnum"; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }

/* ---------- Section spacing ---------- */
section { padding: var(--s-9) 0; }
section + section { padding-top: 0; }
@media (max-width: 720px) {
  section { padding: var(--s-8) 0; }
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}