/* Yaeger. Two materials: deep ground and one sheet of paper. One family: Newsreader. */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground: #0A1411;
  --ground-2: #0E1A16;
  --paper: #EFE9DC;
  --paper-2: #E6DFCF;
  --ink: #EFE9DC;
  --ink-paper: #121A16;
  --muted: #8A968E;
  --muted-paper: #5E6A62;
  --gold: #C8A65D;
  --line: rgba(239, 233, 220, 0.14);
  --line-paper: rgba(18, 26, 22, 0.28);

  --serif: "Newsreader", "Iowan Old Style", "Palatino", Georgia, serif;
  --col: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-variation-settings: "opsz" 16;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "onum";
}
/* Depth: a slow vertical gradient plus fine grain so it never bands. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #0C1713 0%, #0A1411 45%, #071009 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
.skip { position: absolute; left: 16px; top: -100px; padding: 8px 12px; background: var(--paper); color: var(--ink-paper); }
.skip:focus { top: 16px; z-index: 50; }
[id] { scroll-margin-top: 96px; }

.col { width: min(var(--col), 100% - var(--gutter) * 2); margin-inline: auto; }

/* Logo. Text only. The full stop is the mark. */
.logo {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  display: inline-block;
}
.logo .dot { color: var(--gold); }
.nav .logo { font-size: 1.75rem; }

/* Nav */
.nav { padding: 28px 0; }
.nav .col { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; }
.nav ul { display: flex; gap: clamp(20px, 3vw, 40px); }
.nav li a { font-size: 1.0625rem; color: var(--muted); transition: color 200ms var(--ease); }
.nav li a:hover { color: var(--ink); }
.nav li a[aria-current="page"] { color: var(--ink); }
@media (max-width: 720px) { .nav li:not(:last-child) { display: none; } }

/* Text links: plain underline that thickens. */
.tl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line); transition: text-decoration-color 200ms var(--ease); }
.tl:hover { text-decoration-color: currentColor; }
.paper .tl { text-decoration-color: var(--line-paper); }

/* Type roles */
.display {
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(3rem, 8.6vw, 8rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.statement {
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.body { color: var(--muted); max-width: 58ch; }
.small { font-size: 0.9375rem; }

/* Hero: headline top-left, voice bottom-right. */
.hero { padding: clamp(64px, 10vh, 120px) 0 clamp(64px, 12vh, 140px); }
.hero .display { max-width: 10.5em; }
@media (max-width: 720px) { .hero .display br { content: ""; } .hero .display br::after { content: " "; } }
.hero-voice {
  margin-top: clamp(48px, 9vh, 112px);
  display: grid;
  grid-template-columns: 1fr minmax(0, 34rem);
}
.hero-voice > div { grid-column: 2; }
.hero-voice p { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.4; font-variation-settings: "opsz" 28; }
.hero-voice .lines span { display: block; }
.hero-voice .tail { margin-top: 1.1em; color: var(--muted); }
.hero-voice .contact { margin-top: 2em; font-size: 1.125rem; }
@media (max-width: 720px) { .hero-voice { grid-template-columns: 1fr; } .hero-voice > div { grid-column: 1; } }

/* The sheet. The one light surface on the page. */
.sheet-wrap { padding: 0 0 clamp(96px, 14vh, 180px); }
.paper {
  background: var(--paper);
  color: var(--ink-paper);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 80px) clamp(28px, 4vw, 56px);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -30px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.35);
}
.paper::selection, .paper *::selection { background: rgba(200,166,93,0.35); }
.sheet-title { font-size: 1.0625rem; color: var(--muted-paper); font-style: italic; font-variation-settings: "opsz" 18; }
.sentence {
  margin-top: clamp(20px, 3vw, 36px);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(1.625rem, 3.6vw, 3rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.sentence + .sentence { margin-top: clamp(16px, 2vw, 28px); padding-top: clamp(16px, 2vw, 28px); border-top: 1px solid var(--line-paper); }
.blank {
  display: inline-block;
  min-width: 4.5ch;
  padding: 0 0.15em;
  position: relative;
  color: var(--ink-paper);
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: bottom;
}
.blank::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 1px;
  background: var(--ink-paper); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease); transition-delay: var(--d, 0ms);
}
.paper.in .blank::after { transform: scaleX(1); }
.blank.empty { min-width: 6ch; }
.blank.filled { font-style: normal; }
.blank.moved { color: #8A6A1E; }
/* Live blanks: structure stays, width glides, the word slides through. */
.blank.live {
  box-sizing: content-box;
  min-width: 0;
  overflow: hidden;
  transition: width 520ms cubic-bezier(0.86, 0, 0.07, 1);
  will-change: width;
}
.blank.live .word {
  display: block;
  transition: transform 480ms var(--ease), opacity 380ms var(--ease);
}
.blank.live .word.in { transform: translateY(70%); opacity: 0; }
.blank.live .word.out { position: absolute; left: 0.15em; top: 0; transform: translateY(-70%); opacity: 0; }
.live-sentence { max-width: none; }
.live-sentence .ln { display: block; white-space: nowrap; }
.live-sentence .blank.metric { max-width: 100%; }
@media (max-width: 720px) { .live-sentence { font-size: clamp(1.375rem, 6.6vw, 1.625rem); } .live-sentence .ln-to { display: block; } }
.measure { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; font-style: normal; font-weight: 500; }
.sentence { position: relative; }
.sheet-note { margin-top: clamp(28px, 4vw, 44px); color: var(--muted-paper); max-width: 54ch; font-size: 1.0625rem; }
.sheet-note a { color: var(--ink-paper); }
.sheet-foot { margin-top: clamp(28px, 4vw, 44px); display: flex; justify-content: space-between; gap: 24px; font-size: 0.9375rem; color: var(--muted-paper); font-style: italic; }
.product-link { display: inline-block; margin-left: 0.6em; font-size: 0.6em; font-style: italic; font-weight: 400; color: var(--muted-paper); vertical-align: 0.15em; }

/* Method and filter: type only, space as structure. */
.section { padding: clamp(72px, 12vh, 160px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 44rem; }
.section-head .statement { max-width: 17ch; }
.section-head .body { margin-top: 1.25rem; }

.rules { margin-top: clamp(48px, 7vh, 96px); display: grid; gap: clamp(36px, 5vh, 64px); }
.rule { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 64px); align-items: baseline; }
.rule dt { font-variation-settings: "opsz" 48; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; }
.rule dd { color: var(--muted); max-width: 52ch; font-size: 1.125rem; }
@media (max-width: 720px) { .rule { grid-template-columns: 1fr; gap: 8px; } }

.tests { margin-top: clamp(48px, 7vh, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px) clamp(32px, 6vw, 96px); }
.test .q { font-variation-settings: "opsz" 48; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 20ch; }
.test .n { margin-top: 0.75rem; color: var(--muted); font-style: italic; }
.tests-note { margin-top: clamp(40px, 6vh, 72px); color: var(--muted); font-style: italic; }
@media (max-width: 720px) { .tests { grid-template-columns: 1fr; } }

/* Closing */
.closing { padding: clamp(96px, 18vh, 220px) 0 clamp(64px, 10vh, 120px); border-top: 1px solid var(--line); }
.closing .display { max-width: 12ch; }
.closing .contact { margin-top: 2.5rem; font-size: clamp(1.25rem, 2vw, 1.625rem); }

/* Footer: the brand, large. */
.footer { padding: clamp(48px, 8vh, 96px) 0 clamp(32px, 5vh, 56px); }
.footer .logo { font-size: clamp(4rem, 14vw, 13rem); letter-spacing: -0.045em; display: block; line-height: 0.85; }
.footer .meta { margin-top: clamp(24px, 4vh, 40px); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--muted); }
.footer ul { display: flex; gap: 28px; flex-wrap: wrap; }
.footer a:hover { color: var(--ink); }

/* Manifesto */
.manifesto { width: min(40rem, 100% - var(--gutter) * 2); margin-inline: auto; padding: clamp(48px, 8vh, 96px) 0 clamp(96px, 14vh, 160px); }
.manifesto h1 { max-width: 14ch; }
.manifesto .lede { margin-top: 2rem; font-size: 1.375rem; line-height: 1.45; font-variation-settings: "opsz" 24; color: var(--muted); }
.manifesto h2 { margin: 3.5rem 0 1rem; font-variation-settings: "opsz" 48; font-weight: 500; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.015em; }
.manifesto p { margin-bottom: 1.4rem; font-size: 1.1875rem; line-height: 1.65; }
.manifesto p em { font-style: italic; }
.manifesto .final { margin-top: 4rem; font-variation-settings: "opsz" 72; font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.02; letter-spacing: -0.02em; }

/* The one load moment: the voice speaks in cadence. */
.cadence > * { opacity: 0; transition: opacity 900ms var(--ease); transition-delay: var(--d, 0ms); }
.cadence.on > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blank.live, .blank.live .word { transition: none; }
  .cadence > * { opacity: 1; transition: none; }
  .blank::after { transform: scaleX(1); transition: none; }
  .paper.in .blank.empty:first-of-type::before { animation: none; }
}

/* ---------- Motion. Scroll-scrubbed, native, no library. ---------- */

/* The rail: a gold hairline in the left margin that draws with scroll, like a ruler down ledger paper. */
.rail { position: fixed; left: clamp(8px, 1.6vw, 22px); top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 5;
  background: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-size: 100% 0%; opacity: 0.7; }
@supports (animation-timeline: scroll()) {
  .rail { animation: rail linear both; animation-timeline: scroll(root); }
  @keyframes rail { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
}
@media (max-width: 720px) { .rail { display: none; } }

@supports (animation-timeline: view()) {
  /* The sheet settles onto the desk as it enters. */
  .paper { animation: sheet-in linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; transform-origin: 50% 100%; }
  @keyframes sheet-in {
    from { transform: perspective(1400px) rotateX(9deg) translateY(48px); opacity: 0.5; box-shadow: 0 60px 120px -40px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.35); }
    to   { transform: none; opacity: 1; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -30px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.35); }
  }
  /* Rules are written as you reach them: an ink wipe. */
  .rule dt { animation: ink linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
  .rule dd { animation: fade linear both; animation-timeline: view(); animation-range: entry 25% entry 65%; }
  @keyframes ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  /* The closing line settles into place. */
  .closing .display { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; transform-origin: 0 100%; }
  @keyframes settle { from { transform: translateY(14%) scale(0.96); opacity: 0.25; } to { transform: none; opacity: 1; } }
  /* The brand rises out of the footer, one letter after another. */
  .logo-wall span { display: inline-block; animation: rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) entry calc(55% + var(--i) * 5%); }
  @keyframes rise { from { transform: translateY(28%); opacity: 0; } to { transform: none; opacity: 1; } }
}
.logo-wall { overflow: hidden; padding-bottom: 0.08em; }
.logo-wall span { display: inline-block; }

/* The period stamps on hover. */
.logo .dot { display: inline-block; transition: transform 240ms var(--ease); transform-origin: 50% 80%; }
.logo:hover .dot { transform: scale(1.25) translateY(-0.02em); }

@media (prefers-reduced-motion: reduce) {
  .rail, .paper, .rule dt, .rule dd, .closing .display, .logo-wall span { animation: none !important; }
}