/* ============================================================
   PROOF OF PRESS — stylesheet
   --------------------------------------------------------------
   Anti-brand guideline, enforced in code. If a component below
   could appear on a generic SaaS landing page, reject it.

   BANNED (do not reintroduce in future edits):
   - rounded cards with box-shadow elevation
   - gradient blob / mesh backgrounds
   - centered hero copy with CTA button row
   - hover-lift / scale / glow on any element
   - pill badges, capsule chips, "Coming Soon" ribbons
   - three-word SaaS navs (What · Properties · Contact)
   - auto-scroll animations, fade-ins, parallax, marquee
   - feature-grid cards with identical aspect ratios
   - gradient text on headlines
   - Inter, Geist, Satoshi, "Cal Sans" — reserved for SaaS

   APPROVED (publishing-house signatures):
   - left-anchored masthead with imprint metadata
   - asymmetric 5/12 · 7/12 editorial grid
   - publication register (No. 01, No. 02 ...) not cards
   - small-caps section heads + horizontal rules
   - serif wordmark + sans body + mono for metadata
   - restraint. no motion. no tracker. no cookie banner.
   ============================================================ */

:root {
  /* newsprint palette — cold dark, pulp ivory, earthen terracotta */
  --bg:        #0C0D10;
  --fg:        #F2ECE0;
  --muted:     #8A8694;
  --rule:      #26242E;
  --rule-thick:#3A3742;
  --accent:    #C94E1C;
  --accent-2:  #E8B99A;

  /* type stacks — serif wordmark, sans body, mono for bureaucracy */
  --serif:     "Newsreader", "Times New Roman", Times, serif;
  --sans:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* layout */
  --page-max:  1280px;
  --gutter:    clamp(20px, 4.5vw, 56px);
  --measure:   58ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 88px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* keyboard focus — visible, not SaaS-cute */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--bg); }

/* ============================================================
   LINKS — underline is the default, arrow is the flourish
   no accent-coloured buttons exist on this site.
   ============================================================ */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--fg) 45%, transparent);
  transition: text-decoration-color 120ms linear;
}
a:hover { text-decoration-color: var(--accent); }
.link { color: var(--fg); }
.link--muted { color: var(--muted); text-decoration: none; }
.link--arrow { font-variant-numeric: tabular-nums; }

/* ============================================================
   RULES — the signature motif
   ============================================================ */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule--thick { border-top: 1px solid var(--rule-thick); }
.rule--break {
  /* deliberate grid break: this rule spans both columns and is
     the only thing the right column does NOT own.
     On desktop, this rule also pins at top:0 (see STICKY FOLIO block)
     so it remains a visible editorial header as the register scrolls. */
  grid-column: 1 / -1;
  margin: clamp(24px, 3vw, 36px) 0 clamp(28px, 3.5vw, 44px);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  max-width: var(--page-max);
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}
.wordmark {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  font-size: clamp(40px, 11vw, 152px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-decoration: none;
  margin: 0 0 clamp(14px, 2vw, 22px);
  /* typographic contrast by case — italic half + roman half */
  white-space: nowrap;
}
.wordmark__a {
  font-style: italic;
  font-weight: 400;
  margin-right: 0.28em;       /* tuned so italic "of" f-descender clears P */
}
.wordmark__b { font-style: normal; font-weight: 600; }

/* Narrow-mobile fallback: let the wordmark wrap across two lines (Proof of / Press)
   rather than overflow the viewport. Triggered when clamp min would still be too wide. */
@media (max-width: 420px) {
  .wordmark {
    white-space: normal;
    line-height: 0.98;
  }
  .wordmark__a {
    display: block;
    margin-right: 0;
    margin-bottom: -0.04em;
  }
  .wordmark__b {
    display: block;
  }
}

.imprint {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(10px, 1.2vw, 14px) auto clamp(16px, 2vw, 22px);
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.4em;
}
.imprint__item { white-space: nowrap; }
/* Small-mobile: stack imprint vertically so the email address doesn't overflow. */
@media (max-width: 520px) {
  .imprint {
    flex-direction: column;
    gap: 2px 0;
    line-height: 1.9;
  }
  .imprint__sep { display: none; }
  .imprint__item { white-space: normal; }
}
.imprint__label { color: color-mix(in oklab, var(--muted) 60%, var(--bg)); }
.imprint__sep { color: var(--rule-thick); }
.imprint a { color: var(--muted); text-decoration-color: var(--rule-thick); }
.imprint a:hover { color: var(--fg); text-decoration-color: var(--accent); }

.tagline {
  font-family: var(--serif);
  font-variation-settings: "opsz" 32;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 auto;
  /* tagline on one line at desktop — line-break allowed only under 560px viewport */
  white-space: nowrap;
}
@media (max-width: 560px) {
  .tagline {
    white-space: normal;
    max-width: 32ch;
  }
}

/* ============================================================
   EDITORIAL GRID · asymmetric 5/12 · 7/12
   ============================================================ */
.editorial {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 56px);
}
@media (min-width: 880px) {
  .editorial {
    grid-template-columns: 5fr 7fr;
    column-gap: clamp(36px, 5vw, 80px);
    row-gap: 0;
    align-items: stretch;  /* cells equal-height so inquiry anchors to register-bottom */
  }
}

/* ============================================================
   STICKY FOLIO + FOOTER-ALIGN · desktop only
   --------------------------------------------------------------
   Running-header metaphor. The argument cell stretches to the
   register row height. Inside: a sticky wrapper (manifesto + lede)
   pins near the top as the register turns. The inquiry line lives
   outside that wrapper and is pushed to the cell bottom via
   margin-top:auto, so when the reader reaches the footer, the
   email lands on the same baseline as the final abstract.
   No JS, no overflow-hidden, no transforms on grid ancestors —
   per council: those are what cause nested-entry titles to miss
   the IntersectionObserver threshold.
   ============================================================ */
@media (min-width: 880px) {
  .rule--break {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;                              /* reset — sticky band owns its spacing */
    padding: clamp(14px, 1.8vw, 22px) 0;     /* band height the rule is seated inside */
    background: var(--bg);                  /* opaque strip so scrolling content is hidden */
  }
  .argument {
    display: flex;
    flex-direction: column;
    /* fills the grid cell height by default via align-items:stretch above */
  }
  .argument__sticky {
    position: sticky;
    top: clamp(29px, 3.8vw, 45px);           /* seated flush under the rule band */
    padding-top: clamp(16px, 2vw, 24px);     /* restores the whitespace the old rule margin provided */
  }
  .argument > .argument__inquiry {
    margin-top: auto;                        /* pushes inquiry to bottom of cell */
    /* Lift the inquiry line up by the same amount the last entry pads below
       its abstract, so the visible end-of-text aligns with the last abstract
       instead of the raw cell bottom. */
    margin-bottom: clamp(18px, 2.2vw, 26px);
    padding-bottom: 0;
  }
  /* give the register an equivalent top breathing-room so it visually matches */
  .register {
    padding-top: clamp(16px, 2vw, 24px);
  }
}

/* Mobile: no sticky, no flex, natural document flow (inquiry appears right after the manifesto). */
@media (max-width: 879px) {
  .argument__sticky { padding-top: clamp(8px, 2vw, 16px); }
  .argument > .argument__inquiry { margin-top: 0; }
}

.section-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 clamp(16px, 2vw, 22px);
}

/* ---- Argument column (left) ---- */
.argument { max-width: var(--measure); }
.prose {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 1.1em;
  color: var(--fg);
}
.prose--lede {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 1.2em;
}
.prose--inquiry {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Register column (right) ---- */
.register { }
.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(14px, 1.8vw, 20px) 0 clamp(18px, 2.2vw, 26px);
}
.entry__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.5em;
  font-variant-numeric: tabular-nums;
}
.entry__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  color: var(--fg);
}
.entry__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(12px, 1.4vw, 18px);
  row-gap: 2px;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.entry__meta dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 400;
}
.entry__meta dd { margin: 0; color: var(--fg); }
.entry__meta dd a { color: var(--fg); }
.entry__abstract {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  max-width: var(--measure);
}

/* STATUS — not a pill, not a chip, not a capsule. A label. */
.status {
  display: inline;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.status--live { color: var(--accent); }
.status--live::before { content: "● "; color: var(--accent); font-size: 0.8em; }
.status--forthcoming { color: var(--accent-2); }

/* ============================================================
   FOOTER · colophon
   ============================================================ */
.footer {
  max-width: var(--page-max);
  margin: clamp(56px, 8vw, 112px) auto 0;
}
.footer .rule { margin-bottom: clamp(18px, 2vw, 24px); }
.footer__line {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--muted);
  margin: 0;
}
.footer__line a { color: var(--muted); text-decoration-color: var(--rule-thick); }
.footer__line a:hover { color: var(--fg); text-decoration-color: var(--accent); }
.footer__line--muted { color: color-mix(in oklab, var(--muted) 60%, var(--bg)); }
.year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05em;
  letter-spacing: 0.04em;
}

/* ============================================================
   MOBILE · explicit composition, not just stacked
   The asymmetry becomes a vertical rhythm instead of disappearing.
   ============================================================ */
@media (max-width: 879px) {
  .imprint {
    line-height: 2.1;
  }
  .entry { grid-template-columns: 1fr; row-gap: 10px; }
  .entry__no { padding-top: 0; }
  .rule--break { display: none; }
}

/* ============================================================
   REVEAL — "Number-first activation" (council-approved)
   № 0X settles first, title+body follow by ~60ms, metadata last.
   Linear easings, tiny translate, opacity-led. No bounce, no stagger.
   Only activates when <html class="js-reveal"> is present — which
   only happens when prefers-reduced-motion is NOT reduce AND JS ran.
   ============================================================ */
.js-reveal .entry__no,
.js-reveal .entry__body > * {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 180ms linear,
    transform 180ms linear;
  will-change: opacity, transform;
}
.js-reveal .entry__body > .entry__title  { transition-delay: 60ms; }
.js-reveal .entry__body > .entry__meta   { transition-delay: 120ms; }
.js-reveal .entry__body > .entry__abstract { transition-delay: 180ms; }

.js-reveal .entry[data-revealed] .entry__no,
.js-reveal .entry[data-revealed] .entry__body > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MOTION — everything else stays still, always
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  .js-reveal .entry__no,
  .js-reveal .entry__body > * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}