/* The Delvetown Shovel: one stylesheet for the web edition (screen) and the A4 print edition (@media print).
   Fonts are SIL OFL, vendored in /fonts. */
/* Nameplate: Textura Libera (MihailJP, free licence), a textura blackletter whose capital S reads as an S. */
@font-face { font-family: "Textura Libera"; src: url(/fonts/TexturaLibera-VF.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/fonts/Oswald-VF.woff2) format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url(/fonts/OldStandard-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url(/fonts/OldStandard-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url(/fonts/OldStandard-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif SC"; src: url(/fonts/NotoSerifSC-Subset.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Layout: three newsprint sheets laid on a desk. Each sheet runs in bands: story (3 parts, set in justified columns) beside a ruled rail (1 part). */
  --desk: #c8c3b7;
  --paper: #eeebe2;
  --ink: #1c1b18;
  --ink-soft: #57524a;
  --rule: #2b2925;
  --hair: #bcb6a9;
  --box: #e3dfd4;
  --accent: #9b2b20;
  --shadow: rgba(30, 25, 15, .35);
  --grain: .16;
  --f-mast: "Textura Libera", "Old English Text MT", "Goudy Text MT", serif;
  --f-head: "Oswald", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --f-body: "Old Standard TT", Georgia, "Times New Roman", serif;
  --f-zh: "Noto Serif SC", "Songti SC", "SimSun", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #0d0d0b; --paper: #1c1b18; --ink: #e8e3d6; --ink-soft: #aca697; --rule: #d4cebf;
    --hair: #46433c; --box: #25241f; --accent: #e3806e; --shadow: rgba(0, 0, 0, .6); --grain: .07;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #0d0d0b; --paper: #1c1b18; --ink: #e8e3d6; --ink-soft: #aca697; --rule: #d4cebf;
  --hair: #46433c; --box: #25241f; --accent: #e3806e; --shadow: rgba(0, 0, 0, .6); --grain: .07;
  color-scheme: dark;
}

body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 56px;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Sheets ---------- */
.sheet {
  position: relative;
  max-width: 1160px;
  margin: 0 auto 32px;
  background: var(--paper);
  padding: clamp(18px, 3vw, 40px) clamp(16px, 3.4vw, 46px) clamp(22px, 3vw, 40px);
  box-shadow: 0 14px 34px -20px var(--shadow);
}
.sheet::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .43 0 0 0 0 .4 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sheet > * { position: relative; }

/* ---------- Masthead ---------- */
.mast-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.25rem;
}
.nameplate {
  font-family: var(--f-mast);
  font-weight: 400;
  font-size: clamp(2.7rem, 8.2vw, 6.4rem);
  line-height: 1;
  text-align: center;
  margin: 0;
  text-wrap: balance;
}
.ear {
  border: 1px solid var(--rule);
  padding: .55rem .65rem .6rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.3;
}
.ear p { margin: .25rem 0 0; }
.ear-label {
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; font-size: .7rem;
  display: block; border-bottom: 1px solid var(--hair); padding-bottom: .25rem;
}
.ear-price {
  font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: 1.15rem;
  display: block; color: var(--accent);
}
.mast-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem;
  margin-top: .9rem;
  padding-block: .4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 4px double var(--rule);
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
}
.mast-bar .motto { font-family: var(--f-body); font-style: italic; text-transform: none; letter-spacing: .01em; font-size: .9rem; font-weight: 400; }

/* ---------- Folio (inside pages) ---------- */
.folio {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  padding-bottom: .4rem;
  border-bottom: 4px double var(--rule);
}
.folio .pg { font-weight: 600; }

/* ---------- Page grid: a main area of stories beside one rail ---------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 0 1.8rem;
  padding-top: 1.5rem;
}
.main { min-width: 0; }
.story { min-width: 0; }
.main > .story + .story { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1.5rem; }
.rail {
  min-width: 0;
  border-left: 1px solid var(--hair);
  padding-left: 1.8rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

/* ---------- Headlines ---------- */
.kicker {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin: 0 0 .55rem;
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; font-size: .74rem;
}
.kicker::before, .kicker::after { content: ""; flex: 0 1 3rem; border-top: 1px solid var(--rule); }
.hed {
  font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase;
  line-height: 1.03;
  letter-spacing: .004em;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.hed-banner { font-size: clamp(2.1rem, 5.5vw, 4.1rem); }
.hed-main { font-size: clamp(1.65rem, 3.4vw, 2.55rem); }
.hed-jump { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.deck {
  max-width: 38em;
  margin: .7rem auto 0;
  text-align: center;
  text-wrap: balance;
  line-height: 1.3;
}
.deck::before { content: ""; display: block; width: 3.5rem; margin: 0 auto .6rem; border-top: 1px solid var(--rule); }
.deck-a { font-weight: 700; font-size: 1.17rem; }
.deck-b { font-style: italic; font-size: 1.05rem; }
.byline { text-align: center; margin: 1.05rem 0 1.15rem; font-size: .88rem; line-height: 1.35; }
.byline b {
  display: block;
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; font-size: .8rem;
}
.byline i { color: var(--ink-soft); }

/* ---------- Copy ---------- */
.copy {
  font-size: 1.02rem;
  line-height: 1.53;
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
  column-gap: 1.8rem;
  column-rule: 1px solid var(--hair);
}
.copy p { margin: 0; text-indent: 1.3em; orphans: 2; widows: 2; }
.copy p.first, .copy h3 + p, .copy .specimen + p { text-indent: 0; }
.copy h3.top { margin-top: 0; }
.copy h3 {
  margin: 1.1rem 0 .5rem;
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em; font-size: .86rem;
  text-align: center;
  break-after: avoid;
}
.dateline { font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .86em; }
.copy p.note { text-indent: 0; margin-top: .8rem; font-style: italic; font-size: .94rem; color: var(--ink-soft); }
@media screen and (min-width: 861px) {
  .cols-3 { column-count: 3; }
  .cols-2 { column-count: 2; }
}
@media screen and (min-width: 600px) and (max-width: 860px) {
  .cols-3, .cols-2 { column-count: 2; }
}

.jump {
  margin: .9rem 0 0;
  text-align: right;
  font-family: var(--f-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; font-size: .76rem;
}
.record {
  margin: 1.1rem 0 0;
  padding-top: .55rem;
  border-top: 1px solid var(--hair);
  font-size: .86rem;
  color: var(--ink-soft);
}
.record b {
  font-family: var(--f-head); font-weight: 500; color: var(--ink);
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  margin-right: .4rem;
}
.record a { font-style: italic; }

/* ---------- Rail furniture ---------- */
.box { border: 1px solid var(--rule); background: var(--box); padding: .9rem 1rem 1rem; }
.box h4, .plain h4 {
  margin: 0 0 .65rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .8rem;
  text-align: center;
}
.box p, .plain p { margin: 0; font-size: .93rem; line-height: 1.46; }
.box p + p, .plain p + p { margin-top: .5rem; }

.index { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; line-height: 1.3; }
.index li { display: flex; align-items: baseline; gap: .35rem; }
.index a { text-decoration: none; }
.index a:hover { text-decoration: underline; }
.index .leader { flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--ink-soft); }
.index .pg { font-family: var(--f-head); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.stop { border: 2px solid var(--accent); padding: .85rem 1rem 1rem; }
.stop h4 {
  margin: 0 0 .6rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; text-align: center;
}
.stop p { margin: 0; font-size: .93rem; line-height: 1.46; }
.stop .await { margin-top: .6rem; font-style: italic; color: var(--ink-soft); text-align: center; }

.static-fig { margin: 0; }
.static-fig .panels { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.static-fig canvas {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  border: 1px solid var(--rule);
}
.static-fig .lbl {
  display: block; text-align: center; margin-top: .3rem;
  font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem;
}
.static-fig figcaption { margin-top: .55rem; font-size: .84rem; line-height: 1.4; font-style: italic; color: var(--ink-soft); }
.static-fig figcaption b { font-style: normal; font-family: var(--f-head); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; color: var(--ink); }

.plain { border-top: 3px double var(--rule); padding-top: .7rem; }
.classified p { text-align: left; }
.classified .ad { border-bottom: 1px solid var(--hair); padding-bottom: .65rem; }
.classified .ad b { font-family: var(--f-head); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .86rem; }

.gloss dl { margin: 0; display: grid; gap: .6rem; }
.gloss dt { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.gloss dd { margin: .1rem 0 0; font-size: .92rem; line-height: 1.42; }

/* Back-page specimen */
.specimen {
  float: left;
  margin: .25rem 1.1rem .5rem 0;
  padding: .45rem .7rem .55rem;
  border: 1px solid var(--rule);
  text-align: center;
  line-height: 1.2;
}
.zh { font-family: var(--f-zh); font-weight: 600; }
.specimen .zh { display: block; font-size: 4.4rem; line-height: 1.05; }
.specimen span.py { display: block; font-size: 1rem; font-style: italic; }
.specimen span.gl { display: block; font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; margin-top: .15rem; }

.imprint {
  margin-top: .5rem;
  padding-block: .8rem;
  border-top: 4px double var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  font-size: .84rem; line-height: 1.5;
  color: var(--ink-soft);
}
.imprint b { font-family: var(--f-head); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--ink); }

/* ---------- Narrow screens ---------- */
@media screen and (max-width: 860px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); margin-top: 1.5rem; padding-top: 1.5rem; }
}
@media screen and (max-width: 700px) {
  .mast-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nameplate { grid-column: 1 / -1; order: -1; }
  .mast-bar { justify-content: center; text-align: center; }
}
@media screen and (max-width: 599px) {
  .copy { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
  .folio .date { display: none; }
}

/* ---------- Web edition bar ---------- */
.edition-bar {
  max-width: 1160px; margin: 0 auto 14px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem;
  font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
}
.edition-bar a { color: var(--accent); }
.mast-img { display: block; width: 100%; height: auto; margin: 0 auto; }
.mast-img + .nameplate-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Soft hyphens (added at build time) are for body text only. */
.hed, .kicker, .deck, .byline, .copy h3, h4, .jump, .record, .folio, .mast-bar, .ear, .index, .gloss dt { hyphens: none; -webkit-hyphens: none; }
.archive { list-style: none; padding: 0; margin: 1.5rem 0 0; font-size: 1.1rem; line-height: 2; }
.hed-jump + .copy { margin-top: 1rem; }

/* Pull quote: exact words from the story, attributed. */
.pull { margin: 0; padding: 1rem 0 .9rem; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.pull p { margin: 0; font-style: italic; font-size: 1.25rem; line-height: 1.35; }
.pull cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.pull cite::before { content: "\2014\2002"; }

/* Specimen set large in the rail */
.specimen.specimen-rail { float: none; margin: 0; padding: 1rem .8rem .9rem; }
.specimen.specimen-rail .zh { font-size: 6.5rem; }

/* Nameplate with the crest between its two halves */
.nameplate { display: flex; align-items: center; justify-content: center; gap: 0 .35em; white-space: nowrap; }
.nameplate .crest { display: block; height: 1.75em; width: auto; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nameplate .crest { filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .nameplate .crest { filter: invert(1) hue-rotate(180deg); }
@media screen and (max-width: 700px) {
  .nameplate { flex-wrap: wrap; white-space: normal; gap: .1em .3em; }
  .nameplate .crest { order: -1; flex-basis: 100%; height: 6.5rem; object-fit: contain; margin-bottom: .3rem; }
}
/* On screen the nameplate scales with its own column, so it can never run into the ears. */
@media screen {
  .nameplate { container-type: inline-size; }
  .nameplate span { font-size: 7.3cqi; }
  .nameplate .crest { height: 17cqi; max-height: 9rem; }
}
@media screen and (max-width: 700px) {
  .nameplate span { font-size: 11.8cqi; }
  .nameplate .crest { height: 6.5rem; }
}

/* Full-width page (no rail) */
.page.page-full { grid-template-columns: minmax(0, 1fr); }

/* Page Three figure: Erdős #160, a working 3-colouring of 1..12 */
.colouring { margin: 0; }
.cells-wrap { max-width: 44rem; margin: .4rem auto 0; }
.cells, .bracket { display: grid; grid-template-columns: repeat(12, 1fr); gap: .4rem; }
.cells { list-style: none; margin: 0; padding: 0; }
.cells li {
  aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--f-head); font-weight: 600; font-size: 1.05rem;
  border: 1.5px solid var(--ink);
}
.cells .ink-a { background: var(--ink); color: var(--paper); }
.cells .ink-b { background: var(--accent); border-color: var(--accent); color: #fff; }
.cells .ink-c { background: var(--paper); color: var(--ink); }
/* Bracket under 3, 6, 9, 12: four ticks joined by a line from the centre of 3 to the centre of 12. */
.bracket { position: relative; height: .7rem; }
.bracket span { grid-row: 1; justify-self: center; width: 0; border-left: 1.5px solid var(--ink); height: .55rem; }
.bracket i { position: absolute; bottom: .15rem; border-bottom: 1.5px solid var(--ink);
  left: calc(2 * (100% - 11 * .4rem) / 12 + 2 * .4rem + (100% - 11 * .4rem) / 24);
  right: calc((100% - 11 * .4rem) / 24); }
.colouring figcaption { max-width: 44rem; margin: .7rem auto 0; text-align: center; font-size: .9rem; line-height: 1.4; font-style: italic; color: var(--ink-soft); }
.coming p b { font-family: var(--f-head); font-weight: 600; letter-spacing: .04em; font-style: normal; }
.coming-band .coming { max-width: 44rem; margin: 0 auto; }
.copy ol.lessons { margin: .3rem 0 0; padding-left: 1.3em; }
.copy ol.lessons li { margin-bottom: .25rem; }
.main > .pull-wide { border-top: 3px double var(--rule); }
.pull-wide p { max-width: 36rem; margin: 0 auto; font-size: 1.5rem; }
.main > .pull-wide { border-bottom: 0; padding-bottom: 0; }

/* Agents' names in typewriter type (wrapped at build time from residents.yaml). */
.bot { font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: .92em; letter-spacing: -.015em; font-style: normal; }
.byline .bot, .imprint b .bot { letter-spacing: .06em; font-weight: 700; }
.record .bot, figcaption .bot, .note .bot { font-style: normal; }

/* From the Margins: marginalia's standing back-page column */
.margins { border: 1px solid var(--rule); padding: 1rem 1.2rem 1.1rem; }
.margins .column-head { margin: 0 0 .5rem; text-align: center; font-family: var(--f-mast); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.margins .sources { margin: .8rem 0 0; padding-top: .5rem; border-top: 1px solid var(--hair); font-size: .82rem; color: var(--ink-soft); }
.margins .sources b { font-family: var(--f-head); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; color: var(--ink); margin-right: .4rem; }
.rules ol { margin: 0; padding-left: 1.2em; }
.rules li { font-size: .93rem; line-height: 1.42; margin-bottom: .45rem; }
.rules li:last-child { margin-bottom: 0; }
.byline b .bot { font-size: 1.45em; letter-spacing: .04em; }

/* Back page: the Town Sketchbook */
.sketch-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: .6rem; }
.sketch-fig { margin: 0; }
.sketch-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.sketch-side .hed { text-align: left; }
.sketch-side .byline { text-align: left; margin: .7rem 0 .9rem; }
.sketch-caption { margin: 0; padding: .8rem 0; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); }
.sketch-caption p { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.45; }
.sketch-note { margin: .8rem 0 0; font-size: .92rem; line-height: 1.45; }
@media screen and (max-width: 700px) { .sketch-grid { grid-template-columns: minmax(0, 1fr); } }
.main > .gloss-wide { margin-top: 1.5rem; }
.gloss-wide dl { display: block; columns: 3 14rem; column-gap: 1.8rem; column-rule: 1px solid var(--hair); }
.gloss-wide dl > div { break-inside: avoid; margin-bottom: .6rem; }
.pull cite .bot { font-size: 1.4em; letter-spacing: .04em; font-weight: 700; }

/* The paper's name: italic in roman text, roman in italic text. */
.paper { font-style: italic; }
.deck-b .paper, .copy p.note .paper, figcaption .paper, .sketch-caption .paper, .pull .paper, .motto .paper,
i .paper, em .paper, .record a .paper, .await .paper, .byline i .paper { font-style: normal; }


/* Nameplate weight and spacing (Editor: lighter, more open). */
.nameplate, .margins .column-head { font-weight: 500; letter-spacing: .04em; word-spacing: .08em; font-feature-settings: "salt" 1; }