/* House of Rakerad
   Newsreader carries the words. Archivo carries the filing system: numbers, dates, labels, navigation.
   The few custom properties in :root are the only levers for future changes of atmosphere. */

@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.a5d8dc881c.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-italic.54f1e82026.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* True bold and bold italic for the text; downloaded only by pages that use them. */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-bold.12d6ad3cdd.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-bold-italic.d86426d83f.woff2") format("woff2"); font-weight: 600 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.1391897edd.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Condensed"; src: url("/assets/fonts/archivo-condensed-caps.4321f98409.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks keep text from jumping while the web fonts arrive (values from tools/fonts.py). */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 92.3%; ascent-override: 79.6%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 99.5%; ascent-override: 88.2%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Condensed Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); size-adjust: 69.4%; ascent-override: 126.5%; descent-override: 30.3%; line-gap-override: 0%; }

:root {
  --paper: #f9f7f3;
  --ink: #181613;
  --muted: #67625a;

  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --condensed: "Archivo Condensed", "Archivo Condensed Fallback", "Arial Narrow", Arial, sans-serif;

  --text: 1.3125rem;      /* 21px; Newsreader has a small x-height */
  --leading: 1.6;
  --measure: 27em;        /* about 65 characters */
  --gutter: clamp(1.375rem, 4.5vw, 3.5rem);
  --gap: clamp(1.5rem, 4vw, 4rem);
  --label-col: minmax(6.5rem, 15rem);
  --list-col: 44rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text);
  line-height: var(--leading);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ol, ul, blockquote, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ol.entries { padding: 0; list-style: none; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
::selection { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* The filing-system voice */
.bar, .label, .entry-no, .entry-date, .to-archive, .piece-meta, .piece-end,
.colophon-copy, .colophon-role, .notes h2, .footnote-ref, .back, figcaption {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.bar, .label, .to-archive, .piece-end, .colophon-role, .notes h2 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* The structural grid: a margin column for labels, a list column, then air. */
.grid {
  display: grid;
  grid-template-columns: [label-start] var(--label-col) [label-end list-start] minmax(0, var(--list-col)) [list-end] minmax(0, 1fr);
  column-gap: var(--gap);
}
.grid > * { grid-column: list-start / list-end; }

/* ---------- Bar ---------- */
.bar { display: flex; justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; }
.bar-home { justify-content: flex-end; }
.bar a, .piece-end a, .to-archive a { text-decoration: none; }
.bar a:hover, .piece-end a:hover, .to-archive a:hover, .bar a[aria-current] { text-decoration: underline; text-decoration-color: currentColor; }

/* ---------- Homepage ---------- */
.masthead { text-align: center; padding-top: clamp(5rem, 22vh, 12rem); }
.masthead-title {
  font-size: clamp(2.625rem, 7.2vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.012em;
}
.masthead-motto {
  font-style: italic;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  color: var(--muted);
  margin-top: 0.85rem;
}

.register { margin-top: clamp(6rem, 18vh, 11rem); align-items: baseline; }
.register > .label { grid-column: label-start / label-end; color: var(--muted); }
.entry {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  align-items: baseline;
  padding: 0.6rem 0;
}
.entry:first-child { padding-top: 0; }
.entry-no { font-weight: 500; }
.entry-title { font-size: 1.4375rem; line-height: 1.3; text-decoration: none; text-wrap: balance; }
.entry-title:hover { text-decoration: underline; }
.entry-date { color: var(--muted); }
/* Empty-state lines share the motto's voice: same size, same colour, same italic. */
.soon, .nothing { font-style: italic; color: var(--muted); font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.35; }
.to-archive { margin-top: 3.25rem; }

/* The empty homepage is a title page: masthead and register as one centred group, set a little above
   the middle of the space between the bar and the footer, on every screen size. The label-to-line gap
   repeats the title-to-motto gap. */
.is-empty .frontispiece {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 0 8vh;
}
.is-empty .masthead { padding-top: 0; }
.is-empty .register { display: block; text-align: center; margin-top: clamp(3.5rem, 10vh, 6rem); }
.is-empty .register > .label { margin-bottom: 0; }
.is-empty .soon { margin-top: 0.85rem; }
.is-empty .colophon { padding-top: 3rem; }

/* ---------- Archive ---------- */
.page-head { margin: clamp(4.5rem, 15vh, 9rem) 0 clamp(3rem, 9vh, 5.5rem); }
/* An empty archive (and the 404 page): the message is the heading's subordinate line, like the motto. */
.is-empty .page-head { margin-bottom: 0; }
.is-empty > .nothing { margin-top: 0.85rem; }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 3.375rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.year + .year { margin-top: 4.5rem; }
.year-h {
  grid-column: label-start / label-end;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.month + .month { margin-top: 2.5rem; }
.month-h { color: var(--muted); margin-bottom: 0.85rem; }
.nothing a { color: var(--ink); }

/* ---------- Article ---------- */
.piece-head {
  text-align: center;
  max-width: 44rem;
  margin: clamp(4.5rem, 15vh, 9rem) auto clamp(3.5rem, 9vh, 5.5rem);
}
.piece-meta { color: var(--muted); }
.piece-no { color: var(--ink); font-weight: 500; }
.flag { color: var(--ink); text-transform: uppercase; letter-spacing: 0.12em; }
.piece-title {
  font-size: clamp(2.25rem, 5.6vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 1.4rem;
  text-wrap: balance;
}
.piece-author { font-style: italic; font-size: 1.1875rem; color: var(--muted); margin-top: 1.15rem; }

.prose { width: 100%; max-width: var(--measure); margin: 0 auto; hanging-punctuation: first; }
.prose p { text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose em, .prose i { font-style: italic; }
.prose strong, .prose b { font-weight: 600; }
.prose h2, .prose h3 { font-size: 1em; line-height: inherit; }
.prose h2 { font-style: italic; margin-top: 2.5em; }
.prose h3 { margin-top: 2em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose blockquote { margin: 1.5em 0 1.5em 1.5em; }
.prose blockquote + * { margin-top: 1.5em; }
.prose blockquote > * + * { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose code { font-size: 0.85em; }
.prose hr { border: 0; margin: 2.6em 0; height: auto; text-align: center; overflow: visible; color: var(--muted); }
.prose hr::before { content: "*\2003*\2003*"; font-size: 0.9em; line-height: 1; }
.prose hr + * { margin-top: 0; }
.prose figure {
  width: min(42rem, 100vw - 2 * var(--gutter));
  margin: 2.5em 0 2.5em 50%;
  translate: -50% 0;
}
.prose img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
figcaption { color: var(--muted); margin-top: 0.75rem; text-align: center; hyphens: manual; text-wrap: balance; }

/* Fiction: continuous, book-like setting */
.form-fiction .prose > p + p { margin-top: 0; text-indent: 1.5em; }
.form-fiction .prose h2 {
  font-style: normal;
  text-align: center;
  font-size: 1.1875rem;
  letter-spacing: 0.04em;
  margin: 2.6em 0 1.3em;
}
.form-fiction .prose > h2:first-child { margin-top: 0; }
.form-fiction .prose h2 + p, .form-fiction .prose hr + p { text-indent: 0; }

/* Notes */
.footnote-ref { font-size: 0.6em; font-weight: 500; line-height: 0; vertical-align: 0.6em; margin-left: 0.08em; letter-spacing: 0; }
.footnote-ref a { text-decoration: none; padding: 0 0.15em; }
.notes { margin-top: 3.5rem; font-size: 1rem; line-height: 1.55; }
.notes h2 { color: var(--muted); margin-bottom: 1rem; font-style: normal; }
.notes ol { padding-left: 1.5em; }
.notes li::marker { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.notes li + li { margin-top: 0.5rem; }
.notes li p { display: inline; }
.back { text-decoration: none; margin-left: 0.15em; }
.footnote-ref a, .notes li { scroll-margin-top: 2rem; }

.piece-end { display: flex; justify-content: center; gap: 2.5rem; margin-top: clamp(4.5rem, 12vh, 7rem); }

/* ---------- Colophon ---------- */
.colophon {
  margin-top: auto;
  padding-top: clamp(8rem, 26vh, 16rem);
  padding-bottom: clamp(1.75rem, 5vh, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
}
.colophon-name {
  font-family: var(--condensed);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7.25rem);
  line-height: 0.86;
  margin-left: -0.03em;
}
.colophon-copy { color: var(--muted); margin-top: 1rem; }
.colophon-editor { max-width: 19rem; }
.colophon-quote { font-style: italic; font-size: 1.125rem; line-height: 1.45; margin-top: 0.5rem; text-wrap: balance; }

/* ---------- Medium screens: narrower margin column, footer stacked with the name on one line ---------- */
@media (max-width: 64rem) {
  :root { --label-col: minmax(5.5rem, 8.5rem); }
  .colophon { flex-direction: column; align-items: stretch; gap: 2.25rem; }
  .colophon-name { font-size: min(12vw, 6.5rem); }
  .colophon-editor { max-width: 24rem; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 47.5rem) {
  :root { --text: 1.1875rem; }   /* 19px */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .register > .label, .year-h { grid-column: 1; }
  .register { margin-top: clamp(5rem, 14vh, 7rem); }
  .register > .label { margin-bottom: 1.1rem; }
  .entry { grid-template-columns: auto 1fr; row-gap: 0.2rem; padding: 0.75rem 0; }
  .entry-title { grid-column: 1 / -1; grid-row: 2; font-size: 1.3125rem; }
  .entry-date { justify-self: end; }
  .to-archive { margin-top: 2.5rem; }
  .year-h { margin-bottom: 1.4rem; }
  .prose { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
  .prose blockquote { margin-left: 1em; }
  .colophon { padding-top: clamp(6rem, 18vh, 9rem); }
  .piece-title { font-size: clamp(2.125rem, 9vw, 2.75rem); }
  .colophon-name { font-size: min(19.5vw, 6rem); }
  .colophon-copy { margin-top: 0.9rem; }
  .colophon-editor { max-width: 22rem; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; display: block; }
  .bar, .piece-end, .colophon { display: none; }
  .prose { max-width: none; }
  a { text-decoration: none; }
}