/* ==========================================================================
   THE WILD PROJECT RECORD — /style.css
   The site's only stylesheet: design tokens, typography, layout, components.
   Three families, self-hosted woff2 in /fonts/:
     Spectral (serif, display + body)  400 / 400 italic / 500
     Archivo (grotesk, meta + rubrics) 400–600 (variable file)
     Spline Sans Mono (catalogue data) 400
   ========================================================================== */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-400-600.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/fonts/spline-sans-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --paper: #FAF9F5;    /* page ground, warm paper white */
  --ink: #1B1A17;      /* text */
  --muted: #6E6A61;    /* captions, meta, sources */
  --hairline: #DCD9D0; /* rules, table borders, image frames */
  --accent: #9E2B1E;   /* dry cadmium red: rubrics, links, record numbers ONLY */
  --plate: #EFEDE7;    /* ground behind images (matted-print look) */

  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Spline Sans Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --measure: 68ch;   /* article text column */
  --shell: 1200px;   /* 12-col shell */
  --plate-w: 800px;  /* 8-col "plate" width — never full-bleed */
}

/* ---------- Base ---------- */

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

html { background: var(--paper); }

body {
  margin: 0;
  font: 400 18px/1.65 var(--serif);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Square corners and 1px rules only — no shadows, no radii, anywhere. */
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;          /* never bold-black */
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }

p, ul, ol, dl, blockquote, table, figure { margin: 0 0 1.1em; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 48px 0;
}

blockquote {
  margin: 1.5em 0;
  padding-left: 1.25em;
  border-left: 1px solid var(--hairline);
  font-style: italic;
  color: var(--ink);
}

::selection { background: var(--plate); }

/* ---------- Shell & measure ---------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Article text always centered at 68ch; plates may widen past it. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * { max-width: var(--measure); }

/* ---------- Grotesk meta voice: rubrics, nav, labels, dates ---------- */

.rubric,
.label,
.credit,
.meta,
.site-nav,
.site-footer nav,
.index-strip {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rubric {
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 10px;
}

.label { color: var(--muted); font-weight: 600; }
.meta  { color: var(--muted); }
.meta a { color: var(--muted); }

/* ---------- Mono catalogue voice: record numbers, date ranges, logs ---------- */

.record-no,
.dates,
.fig-no,
.mono {
  font-family: var(--mono);
  font-size: 0.88em;
  letter-spacing: 0.01em;
}
.record-no { color: var(--accent); }
.dates { color: var(--muted); }
.fig-no { color: var(--muted); }

/* Mono record line under article titles: `WPG.07 — Cute and Cruel, 30 Jun – 30 Jul 2016` */
.record-line {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0 0;
}
.record-line .record-no { color: var(--accent); }

/* ---------- Header / masthead ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: static;
  display: inline-block;
  padding: 4px 8px;
}

.site-header {
  text-align: center;
  padding: 40px 24px 0;
}

.masthead {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: clamp(22px, 4.5vw, 40px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.masthead a { color: var(--ink); text-decoration: none; }

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
  margin: 10px auto 0;
  max-width: var(--measure);
}

/* Hairline rule beneath the masthead block, then the nav on one line. */
.site-nav {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 24px;
  padding: 12px 0;
}
.site-nav ul,
.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
  row-gap: 6px;
}
.site-nav li + li::before,
.site-footer nav li + li::before,
.index-strip li + li::before {
  content: '\00B7';        /* interpunct separators, set in the rule colour */
  color: var(--hairline);
  margin-right: 8px;
}
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--accent); }

/* ---------- Sections: the ruled-ledger page ---------- */

main { padding: 56px 0 0; }

.section {
  border-top: 1px solid var(--hairline);
  padding-top: 40px;
  margin: 0 0 72px;
}
.section:first-child { border-top: 0; padding-top: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-head h2 { margin: 0; }
.section-head .more {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Figures: the matted plate ---------- */

figure.plate {
  background: var(--plate);
  border: 1px solid var(--hairline);
  padding: 20px;
  margin: 2em auto;
  max-width: var(--plate-w);   /* 8-col plate width; never full-bleed */
}
figure.plate img {
  width: 100%;
  border: 1px solid var(--hairline);  /* the 1px frame on the print itself */
  background: var(--paper);
}
figure.plate.plate--small { max-width: 420px; }
figure.plate.plate--narrow { max-width: 560px; }

/* Article hero plate: the largest of the three plate widths — one step above
   .plate--narrow (560px) and two above .plate--small (420px) — and set off from
   the text it opens, while keeping the opening paragraph in view. */
figure.plate.hero {
  max-width: 620px;
  margin-bottom: 2.5em;
}

/* Diptych: two plates at matched heights, separately captioned */
.plate-pair {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: var(--plate-w);
  margin: 2em auto;
}
.plate-pair figure.plate { flex: 1 1 260px; margin: 0; }

/* Two-line caption: line 1 serif italic (Artist, Title, Year);
   line 2 grotesk muted (© / installation view / archival capture / courtesy). */
figure.plate figcaption {
  padding-top: 12px;
  line-height: 1.5;
}
figcaption .fig-no { display: block; font-size: 12px; margin-bottom: 4px; }
figcaption .work {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}
figcaption .credit {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

/* ---------- Article pattern ---------- */

article.entry header { margin-bottom: 32px; }
article.entry header .tagline { margin: 0; }

.dek {
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.5em;
}

/* Sources block, small type, at the foot of every article */
.sources {
  border-top: 1px solid var(--hairline);
  margin-top: 56px;
  padding-top: 20px;
  font-size: 14px;
  color: var(--muted);
}
.sources h2, .sources h3 {
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li { margin-bottom: 6px; }

/* ---------- Ledger tables: chronology, catalogue entries, logs ---------- */

table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
table.ledger caption {
  text-align: left;
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
}
table.ledger th {
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--hairline);
}
table.ledger td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
}
table.ledger td:last-child, table.ledger th:last-child { padding-right: 0; }
table.ledger td.record-no { white-space: nowrap; }

/* Catalogue field pairs (dossier vitals etc.) */
dl.fields { margin: 1.5em 0; }
dl.fields dt {
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
dl.fields dd { margin: 2px 0 0; }

/* Corrections log */
.log { font-family: var(--mono); font-size: 14px; }
.log time { color: var(--muted); }

/* ---------- Front-page modules ---------- */

.lead .dek { max-width: var(--measure); }
.lead-links { list-style: none; padding: 0; }
.lead-links li {
  border-top: 1px solid var(--hairline);
  padding: 10px 0;
}
.lead-links li:last-child { border-bottom: 1px solid var(--hairline); }

/* Journal listing rows: rubric label, then title */
.journal-list { list-style: none; padding: 0; margin: 0; }
.journal-list li {
  border-top: 1px solid var(--hairline);
  padding: 12px 0;
}
.journal-list li:last-child { border-bottom: 1px solid var(--hairline); }
.journal-list .rubric { display: block; margin-bottom: 4px; }
.journal-list a { color: var(--ink); text-decoration: none; }
.journal-list a:hover { color: var(--accent); }

/* Artist index strip: one wrapped rule-separated line */
.index-strip ul {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 6px;
}
.index-strip a { color: var(--ink); text-decoration: none; }
.index-strip a:hover { color: var(--accent); }

/* ---------- Forms (contact page; plain HTML POST, no JS) ---------- */

form.record-form { max-width: var(--measure); }
form.record-form label {
  display: block;
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 6px;
}
form.record-form input[type='text'],
form.record-form input[type='email'],
form.record-form textarea {
  width: 100%;
  font: 400 17px/1.5 var(--serif);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 10px 12px;
}
form.record-form input:focus,
form.record-form textarea:focus {
  outline: 1px solid var(--ink);
  outline-offset: 0;
}
form.record-form textarea { min-height: 180px; resize: vertical; }
form.record-form button {
  margin-top: 24px;
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 28px;
  cursor: pointer;
}
form.record-form button:hover { background: var(--accent); border-color: var(--accent); }

/* Honeypot: visually hidden, still in the form */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 96px;
  padding: 28px 24px 48px;
  text-align: center;
}
.site-footer nav { font-size: 12px; }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent); }
.site-footer .imprint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin: 16px 0 0;
}

/* ---------- Responsive (no JS) ---------- */

@media (max-width: 720px) {
  body { font-size: 17px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  main { padding-top: 40px; }
  .section { margin-bottom: 56px; padding-top: 32px; }
  figure.plate { padding: 12px; }
  .plate-pair { gap: 12px; }

  /* Ledger tables reflow to stacked entries */
  table.ledger, table.ledger tbody, table.ledger tr, table.ledger td { display: block; }
  table.ledger thead { display: none; }
  table.ledger tr { border-bottom: 1px solid var(--hairline); padding: 10px 0; }
  table.ledger td { border-bottom: 0; padding: 1px 0; }
  table.ledger td.record-no { padding-bottom: 3px; }
}

/* ---------- Print: quiet, ink on paper ---------- */

@media print {
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .site-nav, .site-footer nav, .skip-link, form.record-form { display: none; }
  a { color: inherit; text-decoration: none; }
  .rubric, .record-no, .record-line .record-no { color: #000; }
  figure.plate { background: none; border: 1px solid #999; }
  .site-header, .site-footer { text-align: center; }
  .section { border-top-color: #999; }
}