/* ==========================================================================
   eqengine.io
   Signature: "the drift". Section labels hold a fixed origin column for the
   whole scroll; the prose column steps one increment (--u) further right in
   each successive section. Change is only legible against something that
   didn't change, so the labels are the reference and the prose is the
   displacement. Nothing animates. There is no JavaScript on this page.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 500;               /* one variable file covers both */
  font-display: swap;
  src: url('fonts/plexsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plexsans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* palette — every text pair verified against WCAG AA on --paper */
  --paper:        #E9EBE5;   /* ground                                    */
  --ink:          #15191A;   /* body + display        16.5:1              */
  --ink-soft:     #4B524E;   /* labels, attribution    7.5:1              */
  --oxblood:      #6B2333;   /* the only accent       10.2:1              */
  --oxblood-deep: #4C1723;   /* link hover                                */

  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* layout */
  --u:        40px;                     /* drift increment (see @media)   */
  --origin:   clamp(24px, 7vw, 96px);   /* fixed left column              */
  --gutter:   clamp(24px, 5vw, 88px);   /* right breathing room           */
  --measure:  33em;                     /* ≈ 66 characters at body size   */
  --gap:      clamp(5.5rem, 13vh, 10.5rem);
}

@media (max-width: 1100px) { :root { --u: 22px; } }
@media (max-width:  860px) { :root { --u: 12px; } }
@media (max-width:  600px) { :root { --u:  0px; } }  /* drift collapses   */

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.125rem);   /* 17 → 18px */
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 1000px;
  margin-inline: auto;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── Sections and the drift ───────────────────────────────────────────── */
/* --pad-top is set here and overridden only via the custom property, so no
   later rule can win a specificity fight over section padding.           */

.section {
  --pad-top: var(--gap);
  --step: 0;
  padding: var(--pad-top) var(--gutter) 0 var(--origin);
}

.sec--hero      { --pad-top: clamp(6rem, 18vh, 12.5rem); --col-max: 50rem; }
.sec--idea      { --step: 1; }
.sec--questions { --step: 2; --col-max: 46rem; }
.sec--whyme     { --step: 3; }
.sec--looking   { --step: 4; }
.sec--contact   { --step: 5; }

/* the displacement itself — the only thing on the page that carries it.
   --col-max widens a column for display type; --measure is the reading default.
   Both are set as custom properties, never by a more specific selector.      */
.col {
  margin-inline-start: calc(var(--u) * var(--step));
  max-width: min(var(--col-max, var(--measure)), 100%);
}

/* ── Section labels: the fixed reference ──────────────────────────────── */

.label {
  margin: 0 0 clamp(1.75rem, 3.6vh, 3rem);
  font-family: var(--sans);
  font-size: 0.8125rem;                /* 13px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.wordmark {
  margin: 0 0 clamp(2.5rem, 6vh, 4.5rem);
  font-family: var(--sans);
  font-size: 1.0625rem;                /* 17px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.375rem);      /* 30 → 54px */
  line-height: 1.14;
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.attribution {
  margin-top: clamp(2rem, 4.5vh, 3rem);
  font-size: 0.9375rem;                /* 15px */
  color: var(--ink-soft);
}

/* ── Reading copy ─────────────────────────────────────────────────────── */

.prose p + p { margin-top: 1.4em; }
.prose { hyphens: none; }

cite {
  font-style: italic;
}

/* ── Open questions ───────────────────────────────────────────────────── */
/* No numbering, no bullets, no container. Scale and air do the work.     */

.questions li {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.875rem);      /* 28 → 46px */
  line-height: 1.2;
  letter-spacing: -0.008em;
  font-optical-sizing: auto;
  text-wrap: pretty;
}

.questions li + li { margin-top: clamp(3rem, 6.5vh, 6rem); }

/* ── Contact: the terminal statement, not a footer ────────────────────── */

.email {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3.25rem);       /* 30 → 52px */
  line-height: 1.2;
  letter-spacing: -0.008em;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

.email a {
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1.5px;
}

.email a:hover { text-decoration-thickness: 3px; }

/* ── Colophon: returns to the origin and closes the measurement ───────── */

.colophon {
  padding: clamp(7rem, 22vh, 15rem) var(--gutter)
           clamp(4rem, 10vh, 7rem) var(--origin);
  font-size: 0.8125rem;                /* 13px */
  color: var(--ink-soft);
}

/* ── Links and focus ──────────────────────────────────────────────────── */

a {
  color: var(--oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--oxblood-deep);
  text-decoration-thickness: 2px;
}

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

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 140ms ease, text-decoration-thickness 140ms ease; }
}

/* ── Print ────────────────────────────────────────────────────────────── */

@media print {
  :root { --u: 0px; --origin: 0; --gutter: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}