@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');
/* Site layer on top of base.css (tokens + components). base.css styles the option boards; this turns it into real pages. */
html, body { background-color: var(--paper); color: var(--ink); overflow-x: clip; }
/* real paper: long fibres + cloudy unevenness + a darker edge, under the fine grain (body::after) */
html {
  /* newsprint: fine grain, a faint halftone dot, and slight unevenness */
  background-image:
    radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(60, 50, 30, .10) 100%),
    radial-gradient(rgba(30, 30, 36, .07) 1px, transparent 1.3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='none'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.003' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  background-attachment: fixed, scroll, fixed;
  background-size: 100% 100%, 6px 6px, 100vw 100vh;
}
body { background: transparent; }
body { padding: 0; position: relative; min-height: 100vh; }
body::after { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .34; mix-blend-mode: multiply; pointer-events: none; z-index: 100; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.site-nav { padding-block: 22px; }
.site-nav .navs { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-nav .navs .logo-img { width: 44px; height: auto; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.section { padding-block: clamp(48px, 8vw, 110px); }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.sec-head h1, .sec-head h2 { font-size: clamp(38px, 5.6vw, 72px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 36px; }
.review-pill { position: fixed; z-index: 120; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; background: var(--ink); color: var(--paper); padding: 11px 14px; border-radius: 999px; text-decoration: none; box-shadow: var(--shadow-card); }
.crumb { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--ink); }
.site-foot { padding-block: 40px 70px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }

/* top menu: Organic engine / Paid engine / UGC vs AI */
.site-nav .nav-links { gap: clamp(14px, 2.4vw, 30px); font-weight: 500; }
.site-nav .nav-links a { opacity: .8; text-decoration: none; }
.site-nav .nav-links a:hover, .site-nav .nav-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
@media (max-width: 760px) { .site-nav .nav { row-gap: 12px; } .site-nav .nav-links { order: 3; width: 100%; justify-content: space-between; font-size: 14px; } }

/* ---------- blue ballpoint marks ---------- */
:root { --pen: #2c4fbf; }
.ink, .ink-note { position: absolute; pointer-events: none; z-index: 5; }
.ink svg { display: block; overflow: visible; }
.ink path { fill: none; stroke: var(--pen); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; opacity: .82; mix-blend-mode: multiply;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6,.05,.3,1); }
.ink.inked path { stroke-dashoffset: 0; }
.ink-note { font: 600 clamp(20px, 1.9vw, 27px)/1.05 "Caveat", "Bradley Hand", "Segoe Print", cursive; color: var(--pen); opacity: 0; transform: rotate(var(--rot, -4deg)) translateY(4px); transition: opacity .9s ease, transform .9s ease; white-space: nowrap; mix-blend-mode: multiply; }
.ink-note.inked { opacity: .85; transform: rotate(var(--rot, -4deg)); }
.ink-note s { text-decoration-thickness: 2px; }
.ink-host { position: relative; display: inline-block; }
.ink-zone { position: relative; }
@media (max-width: 900px) { .ink.m-hide, .ink-note.m-hide { display: none; } }
@media (prefers-reduced-motion: reduce) { .ink path { transition: none; stroke-dashoffset: 0; } .ink-note { transition: none; opacity: .85; } }

/* ===== Brand (2026-11-08): Redaction 35 · Old newspaper (T17 · C5 · P3 · M3) ===== */
:root {
  --paper: #ece3cf; --paper-2: #f4eddc; --line: #d5cab2;
  --ink: #1e1e24; --muted: #5a5850;
  --sea-900: #172a4f; --sea-700: #24427a; --sea-600: #2f5590; --sea-500: #4f72a8; --sea-300: #8ea6c8; --sea-100: #dcdfe4;
  --primary: var(--sea-700); --organic: var(--sea-500); --organic-fill: var(--sea-300); --organic-text: #2f5590; --paid: var(--sea-700);
  --sun: #cfae68; --accent: #b8432f; --data: #276f50; --pen: var(--sea-700);
  --night: #1a1d29; --night-2: #252a38; --night-ink: #ece3cf; --night-muted: #a9a596; --night-data: #9fd0b4;
  --f-display: "Redaction 35", "Times New Roman", serif;
  --f-body: "Redaction 35", "Times New Roman", serif;
  --f-mono: "Redaction 35", "Times New Roman", serif;
}
.btn-sun { background: var(--sun); color: var(--ink); }
.wordmark { font-family: var(--f-display); letter-spacing: -.02em; }
.display, .num { font-variation-settings: normal; }
/* stamp mark on every emphasis phrase in a headline */
.display em, .hx h1 em, .head h1 .vs {
  display: inline-block; font-style: italic; color: var(--sea-700);
  border: .05em solid currentColor; border-radius: .08em; padding: 0 .14em .04em; line-height: 1;
  transform: rotate(-2.5deg); transform-origin: 50% 60%;
}
.night .display em { color: var(--sea-300); }
/* pen marks and handwritten notes are replaced by the stamp */
.ink, .ink-note { display: none !important; }