/* ============================================================
   THE WORKING FORM — site stylesheet
   Neo-brutalist. Black, white, and one red.
   Red only ever marks something: a finding, an admission,
   a retraction. It is never decoration.
   ============================================================ */

/* ---------- TOKENS ---------- */

:root {
  --wf-page:  #FFFFFF;
  --wf-ink:   #000000;
  --wf-red:   #E01B00;
  --wf-knock: #FFFFFF;
  --wf-fill:  #F0F0F0;

  --wf-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Page width and text width are different problems. The shell sets how wide
     the page runs — covers, readouts, headings. The measure keeps running text
     at a comfortable line length inside it. */
  --wf-shell:   80ch;
  --wf-measure: 68ch;
  --wf-offset: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wf-page:  #000000;
    --wf-ink:   #FFFFFF;
    --wf-red:   #FF4A2E;
    --wf-knock: #000000;
    --wf-fill:  #171717;
  }
}

:root[data-theme="dark"] {
  --wf-page:  #000000;
  --wf-ink:   #FFFFFF;
  --wf-red:   #FF4A2E;
  --wf-knock: #000000;
  --wf-fill:  #171717;
}

/* ---------- RESET & BASE ---------- */

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

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

body {
  margin: 0;
  background: var(--wf-page);
  color: var(--wf-ink);
  font-family: var(--wf-font);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; border-radius: 0; }

::selection { background: var(--wf-red); color: var(--wf-knock); }

/* ---------- LAYOUT ---------- */

.wf-shell {
  max-width: var(--wf-shell);
  margin-inline: auto;
  padding: 0 1.25rem;
}

.wf-post > * + * { margin-top: 1.15rem; }

/* ---------- PREVIEW FLAG ---------- */

/* Only ever rendered on a preview build. Red on black so it cannot be
   mistaken for part of the site at a glance on a phone. */
.wf-preview-flag {
  background: var(--wf-red);
  color: #FFFFFF;
  padding: 0.6rem 1.25rem;
  text-align: center;
}

/* ---------- COVER PHOTOS ---------- */

/* Hard border, no radius, no shadow — the same 3px rule the index uses,
   so a photograph sits in the grid rather than floating on it. */
.wf-cover {
  display: block;
  border: 3px solid var(--wf-ink);
  background: var(--wf-fill);
}

.wf-cover img { display: block; width: 100%; }

/* On a post the red bar underneath does the separating. */
.wf-post .wf-cover { margin-top: 1.5rem; }

/* On the index the cover leads the entry and is part of the link target. */
.wf-index .wf-cover { margin-bottom: 1.25rem; }
.wf-index .wf-cover:hover { border-color: var(--wf-red); }

/* ---------- TYPE ---------- */

h1, h2, h3 {
  font-variation-settings: "wdth" 125, "wght" 800;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--wf-ink);
}

h1 { font-size: clamp(1.25rem, 8.5vw, 4.5rem); letter-spacing: -0.04em; line-height: 0.88; }
h2 { font-size: clamp(1.6rem, 5vw, 2.75rem); margin-top: 3rem; }
h3 { font-size: clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing: -0.02em; margin-top: 2.25rem; }

/* Narrow screens: drop the expanded width so long single-word titles fit
   without breaking glyphs. Size already fluid via the clamp above. */
@media (max-width: 30rem) {
  h1 {
    font-variation-settings: "wdth" 100, "wght" 800;
  }
}

p { max-width: var(--wf-measure); margin: 0; }

a {
  color: var(--wf-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:focus-visible { outline: 3px solid var(--wf-red); outline-offset: 3px; }

hr { border: 0; border-top: 8px solid var(--wf-ink); margin: 3rem 0; }

.wf-bar { height: 14px; background: var(--wf-red); margin: 1.5rem 0; }

.wf-label {
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.wf-standfirst {
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 1.15rem;
  line-height: 1.4;
}

/* ---------- MASTHEAD ----------
   The misregistration offset: the wordmark printed twice,
   12px out of alignment, as if the plates were misaligned. */

.wf-masthead {
  border-bottom: 8px solid var(--wf-ink);
  padding: 2.5rem 0 1.75rem;
  margin-bottom: 3rem;
}

.wf-wordmark {
  display: block;
  position: relative;
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: clamp(1.75rem, 7vw, 3rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wf-ink);
  isolation: isolate;
}

/* The offset scales with the type. A fixed 12px at wordmark size
   interleaves the glyphs and reads as mush rather than as a second
   impression, so this is expressed in em and stays a hairline slip. */
.wf-wordmark::before {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  color: var(--wf-red);
  transform: translate(0.035em, 0.02em);
  z-index: -1;
  pointer-events: none;
}

.wf-masthead .wf-label { display: block; margin-top: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .wf-wordmark::before { transition: transform 120ms steps(2, end); }
  .wf-wordmark:hover::before { transform: translate(0, 0); }
}

/* ---------- INDEX INTRO ----------
   Two paragraphs rather than one: the standfirst carries who and what,
   the body paragraph carries the intent. Replaces an inline margin. */

.wf-intro { margin-bottom: 2.5rem; }
.wf-intro p + p { margin-top: 1.15rem; }

/* ---------- INDEX ---------- */

.wf-index { margin: 0; padding: 0; list-style: none; }

.wf-index li { border-top: 3px solid var(--wf-ink); padding: 1.75rem 0; }
.wf-index li:last-child { border-bottom: 3px solid var(--wf-ink); }

.wf-index h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); margin: 0.5rem 0 0.75rem; }
.wf-index h2 a { color: var(--wf-ink); text-decoration: none; }
.wf-index h2 a:hover { color: var(--wf-red); }

.wf-index .wf-standfirst { font-size: 1rem; }

/* ---------- THE THREE MARKS ---------- */

/* 1. The finding. One per post. */
.wf-mark {
  background-image: linear-gradient(var(--wf-red), var(--wf-red));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* 2. The admission. */
.wf-callout {
  color: var(--wf-red);
  font-variation-settings: "wdth" 100, "wght" 700;
}

/* 3. The retraction. Struck, never deleted. */
.wf-strike {
  text-decoration: line-through;
  text-decoration-color: var(--wf-red);
  text-decoration-thickness: 3px;
  opacity: 0.65;
}

/* ---------- NUMBERS ---------- */

/* Flex rather than grid: equal columns will happily be narrower than the
   value inside them, which broke the unit onto its own line. Sizing each
   cell from its own content keeps "3,800 m" whole at any type size, and
   wraps whole cells to the next row instead. */

.wf-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1.5rem;
  margin: 2rem 0;
}

/* min-content, not max-content: the label may wrap, the value may not,
   so the cell ends up at least as wide as the number and its unit. */
.wf-readout > div {
  flex: 1 1 auto;
  min-width: min-content;
}

.wf-readout .k { display: block; margin-bottom: 0.4rem; }

.wf-readout .v {
  display: block;
  font-variation-settings: "wdth" 125, "wght" 800;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wf-readout .v.hot { color: var(--wf-red); }
.wf-readout .v small { font-size: 0.4em; letter-spacing: 0; }

/* ---------- BYLINE ---------- */

/* Square, hard-bordered, no radius. A circular avatar would be the one
   rounded corner on the whole site. */
.wf-byline {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-top: 3px solid var(--wf-ink);
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  max-width: var(--wf-measure);
}

.wf-byline-photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid var(--wf-ink);
}

.wf-byline-name {
  font-variation-settings: "wdth" 125, "wght" 800;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: 0.45rem;
}

.wf-byline-bio { font-size: 0.95rem; margin-top: 0.6rem; }

@media (max-width: 30rem) {
  .wf-byline { gap: 1rem; }
  .wf-byline-photo { width: 72px; height: 72px; }
}

/* ---------- QUOTES ---------- */

blockquote, .wf-note {
  border-left: 8px solid var(--wf-red);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

blockquote p + p { margin-top: 0.75rem; }

/* ---------- THE TAG ---------- */

.wf-tag {
  display: inline-block;
  background: var(--wf-red);
  color: var(--wf-knock);
  border: 3px solid var(--wf-ink);
  padding: 0.5rem 0.9rem;
  transform: rotate(-1.4deg);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- LISTS ---------- */

.wf-post ul, .wf-post ol { max-width: var(--wf-measure); padding-left: 1.25rem; }
.wf-post li + li { margin-top: 0.5rem; }

/* ---------- FOOTER ---------- */

.wf-foot {
  border-top: 8px solid var(--wf-ink);
  margin-top: 5rem;
  padding: 2rem 0 4rem;
}

.wf-foot p { font-size: 0.85rem; }
.wf-foot p + p { margin-top: 0.75rem; }

/* Quiet footer signup. Only rendered when site.buttondownUsername is set. */
.wf-signup {
  margin-top: 1.5rem;
  max-width: var(--wf-measure);
}

.wf-signup .wf-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wf-signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wf-signup input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--wf-ink);
  background: var(--wf-page);
  border: 3px solid var(--wf-ink);
  border-radius: 0;
  padding: 0.55rem 0.75rem;
}

.wf-signup button {
  font: inherit;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wf-knock);
  background: var(--wf-ink);
  border: 3px solid var(--wf-ink);
  border-radius: 0;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.wf-signup button:hover {
  background: var(--wf-red);
  border-color: var(--wf-red);
}

.wf-signup button:focus-visible,
.wf-signup input[type="email"]:focus-visible {
  outline: 3px solid var(--wf-red);
  outline-offset: 3px;
}

.wf-signup-note {
  margin-top: 0.6rem;
  font-size: 0.8rem;
}

/* ---------- PRINT ---------- */

@media print {
  .wf-masthead, .wf-foot { border-color: #000; }
  .wf-wordmark::before { display: none; }
  a { color: #000; }
  .wf-signup { display: none; }
}