/* The journal — dovetail.city/journal.
 *
 * Served by the Worker, not by Astro: a piece is published the moment it has a
 * slug and the status to match, and waiting for a site rebuild to say so would
 * make publishing a deploy. So this file is a plain stylesheet in public/,
 * served at a stable path, and the Worker's HTML links it directly.
 *
 * The look is the one already set by the published report at
 * /reports/volume-v/: cream ground under a faint linen weave, one 720px
 * column, full-ink serif running text, terra label-caps, a crosshatched rule
 * for an ornament. Palette and faces come from /colors_and_type.css.
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: #F4EFDC; /* lighter than --calc, less saturated cream */
  color: var(--charcoal);
  font-family: var(--font-serif);
  /* No grey-on-cream running text — body copy stays at full ink. */
}

/* The linen ground, same recipe as the report. Fixed, so it does not scroll
   past the text and turn into a moiré. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .22;
  background:
    repeating-linear-gradient(90deg, rgba(43,34,24,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(43,34,24,0.017) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px 96px;
  position: relative;
  z-index: 1;
}

/* ── Label-caps ──────────────────────────────────────────────
   Cinzel renders thin, so every label-cap here is 600+ with a same-colour
   stroke. Thin washed-out label text is a bug, not a style. */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--terra);
  -webkit-text-stroke: 0.85px var(--terra);
  paint-order: stroke fill;
  margin: 0 0 22px;
}
@media (max-width: 600px) {
  .eyebrow { font-size: 11px; letter-spacing: 0.18em; -webkit-text-stroke: 0.7px var(--terra); }
}

/* ── Crosshatched divider (engraving-style ornament) ───────── */
.hatch-rule {
  margin: 22px 0;
  height: 8px;
  border-top: 1px solid var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
  background-image:
    repeating-linear-gradient(45deg,  var(--charcoal) 0 0.6px, transparent 0.6px 4.5px),
    repeating-linear-gradient(-45deg, var(--charcoal) 0 0.6px, transparent 0.6px 4.5px);
  background-clip: padding-box;
}

/* ── Masthead ────────────────────────────────────────────── */
.jr-mast { padding: 56px 0 0; }
.jr-mast__home {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal-80);
  -webkit-text-stroke: 0.4px var(--charcoal-80);
  paint-order: stroke fill;
  text-decoration: none;
  border-bottom: 1px solid var(--charcoal-40);
  padding-bottom: 2px;
}
.jr-mast__home:hover { color: var(--terra); -webkit-text-stroke-color: var(--terra); border-bottom-color: var(--terra); }
.jr-mast__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 26px 0 10px;
}
.jr-mast__standfirst {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  max-width: 32em;
  margin: 0 0 4px;
}

/* ── The index list ──────────────────────────────────────── */
.jr-list { list-style: none; margin: 0; padding: 0; }
.jr-item { padding: 26px 0; border-bottom: 1px solid var(--charcoal-20); }
.jr-item:last-child { border-bottom: 0; }
.jr-item__meta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal-60);
  -webkit-text-stroke: 0.35px var(--charcoal-60);
  paint-order: stroke fill;
  margin: 0 0 8px;
}
.jr-item__meta .sep { margin: 0 8px; color: var(--charcoal-40); }
.jr-item__title { margin: 0 0 8px; }
.jr-item__title a {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 1.95rem);
  line-height: 1.2;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  text-wrap: balance;
}
.jr-item__title a:hover { color: var(--terra); border-bottom-color: var(--terra); }
.jr-item__standfirst {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 0;
  max-width: 34em;
  text-wrap: pretty;
}

/* ── An entry ────────────────────────────────────────────── */
.jr-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.jr-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 30em;
}
.jr-byline {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal-80);
  -webkit-text-stroke: 0.35px var(--charcoal-80);
  paint-order: stroke fill;
  margin: 0 0 6px;
}

/* Running text. Same measure and colour as the report: full ink, generous
   leading, no grey. */
.jr-prose p {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.62;
  color: var(--charcoal);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.jr-prose h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.55rem, 3.6vw, 1.9rem);
  line-height: 1.2;
  margin: 38px 0 14px;
  color: var(--charcoal);
  text-wrap: balance;
}
.jr-prose h3 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal-80);
  -webkit-text-stroke: 0.35px var(--charcoal-80);
  paint-order: stroke fill;
  margin: 32px 0 12px;
}
.jr-prose strong { font-weight: 600; }
.jr-prose em { font-style: italic; }
.jr-prose a { color: var(--terra); text-decoration: none; border-bottom: 1px solid var(--terra); }
.jr-prose ul, .jr-prose ol { margin: 0 0 22px; padding-left: 1.4em; }
.jr-prose li {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.62;
  margin: 0 0 10px;
  text-wrap: pretty;
}
.jr-prose blockquote {
  margin: 0 0 22px;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--terra);
  font-style: italic;
}
.jr-prose blockquote p { margin-bottom: 12px; }
.jr-prose blockquote p:last-child { margin-bottom: 0; }
.jr-prose img { max-width: 100%; height: auto; display: block; margin: 0 0 22px; }
.jr-prose hr { border: 0; border-top: 1px solid var(--charcoal-20); margin: 34px 0; }
.jr-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(43,34,24,0.06);
  padding: 1px 5px;
}
.jr-prose pre {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  background: rgba(43,34,24,0.06);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 22px;
}
.jr-prose pre code { background: none; padding: 0; }
/* Wide things scroll inside their own box; the page itself never does. */
.jr-prose table { display: block; overflow-x: auto; width: 100%; margin: 0 0 22px; border-collapse: collapse; }
.jr-prose th, .jr-prose td {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  text-align: left;
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--charcoal-20);
}
.jr-prose th {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.3px var(--charcoal);
  paint-order: stroke fill;
}

/* The film this piece is also available as. One argument, three formats — when
   the video exists, say so at the end of the words. */
.jr-film {
  margin: 34px 0 0;
  padding: 18px 20px;
  background: rgba(43,34,24,0.045);
  border-left: 2px solid var(--terra);
}
.jr-film__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  -webkit-text-stroke: 0.4px var(--terra);
  paint-order: stroke fill;
  margin: 0 0 6px;
}
.jr-film a {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--terra);
  text-decoration: none;
}
.jr-film a:hover { color: var(--terra); }

/* ── Foot ────────────────────────────────────────────────── */
.jr-foot { margin-top: 56px; }
.jr-foot a {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal-80);
  -webkit-text-stroke: 0.4px var(--charcoal-80);
  paint-order: stroke fill;
  text-decoration: none;
  border-bottom: 1px solid var(--charcoal-40);
  padding-bottom: 2px;
}
.jr-foot a:hover { color: var(--terra); -webkit-text-stroke-color: var(--terra); border-bottom-color: var(--terra); }

.jr-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--charcoal-80);
  margin: 30px 0 0;
}