/* The Souls Gazette — front page stylesheet.
   Shared by every issue and by the editor. You don't need to touch this to make an issue:
   use the editor at smply.gg/gazette. */

@import url("https://fonts.googleapis.com/css2?family=Jacquard+24&family=Pixelify+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Playfair+Display:wght@700;900&family=UnifrakturMaguntia&display=swap");

/* Minecraft's in-game lettering (typeface-minecraft, MIT). Characters it doesn't have,
   like curly quotes, fall back to Pixelify Sans. */
@font-face {
  font-family: "Minecraft";
  src: url("https://cdn.jsdelivr.net/npm/typeface-minecraft@1.0.0/files/minecraft.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/typeface-minecraft@1.0.0/files/minecraft.woff") format("woff");
  font-display: swap;
}

:root {
  --ink: #151311;
  --ink-soft: #3b3733;
  --rule: #151311;
  --hairline: #8d8780;
  --paper: #f3eee3;           /* newsprint */
  --shadow: #c4bcae;          /* Minecraft-style text shadow on the nameplate */
  --desk: #3d3a36;            /* screen background behind the page */

  --f-mast: "Jacquard 24", "UnifrakturMaguntia", serif;
  --f-pixel: "Minecraft", "Pixelify Sans", monospace;
  --f-head: "Pixelify Sans", monospace;
  --f-body: "Minecraft", "Pixelify Sans", monospace;

  /* Pixel fonts are only sharp at whole multiples of their grid: Minecraft 8px, Pixelify 10px,
     Jacquard 43px. So sizes here are in px. (8px prints as 8px; the Minecraft letters are tall,
     so it reads like an 11px newspaper face.) */
  --body-size: 8px;
  --body-lead: 10px;
  --gutter: 16px;

  /* a strip of dark stone blocks, used for the heavy rules */
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 3' shape-rendering='crispEdges'%3E%3Crect width='8' height='3' fill='%23302d2a'/%3E%3Crect x='1' width='2' height='1' fill='%23545049'/%3E%3Crect x='5' width='1' height='1' fill='%23151311'/%3E%3Crect y='1' width='1' height='1' fill='%23151311'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23635e57'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23545049'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23151311'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23443f3a'/%3E%3C/svg%3E");
}

[data-paper="white"] { --paper: #ffffff; --shadow: #cfcfcf; }
[data-paper="book"]  { --paper: #efe3c2; --shadow: #c9b88f; }   /* Book & Quill page */
[data-masthead="blackletter"] { --f-mast: "UnifrakturMaguntia", serif; }
[data-headlines="serif"] { --f-head: "Playfair Display", "Times New Roman", serif; }

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

body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  -webkit-font-smoothing: antialiased;
}

/* pixel-art icons: write :emerald: (etc.) in any text */
.ico { display: inline; white-space: nowrap; }
img.px-img {
  display: inline-block;
  width: 16px; height: 16px;         /* 16×16 textures at exactly 1:1 */
  vertical-align: middle;
  image-rendering: pixelated;
}
svg.px {
  display: inline-block;
  vertical-align: middle;  /* size comes from the icon (whole pixels) */
  image-rendering: pixelated;
}

/* ---------- Screen toolbar (never printed) ---------- */

.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: #1d1b19; color: #eee;
  font: 13px/1.3 system-ui, sans-serif;
}
.toolbar .fit { margin-left: auto; padding: 3px 8px; border-radius: 4px; background: #2f6b3a; }
.toolbar .fit.over { background: #9b2c22; }
.toolbar .back { color: #fff; text-decoration: none; font-weight: 600; }
.toolbar .back:hover { text-decoration: underline; }
.toolbar button {
  font: inherit; padding: 5px 12px; border: 0; border-radius: 4px;
  background: #eee; color: #111; cursor: pointer;
}

/* ---------- The page ---------- */

.page {
  /* the page sets its own type, so it looks the same inside the editor and the issues site */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  width: 210mm;
  min-height: 297mm;
  margin: 24px auto 48px;
  padding: 32px 38px 25px;
  background: var(--paper);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column;
}

.page > .grid { flex: 1; }

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  display: grid;
  grid-template-columns: 113px 1fr 113px;
  align-items: center;
  gap: 15px;
  padding-bottom: 10px;
}
.masthead::after {                    /* stone-block rule */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 7px;
  background: var(--stone) left / 18px 7px repeat-x;
}

.ear {
  border: 1px solid var(--rule);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 5px 7px 6px;
  text-align: center;
  font-size: 8px;
  line-height: 10px;
}
.ln { display: block; }   /* one line each: see snapTextIn in gazette.js */
.ear .ear-icon { margin-right: 5px; }
.ear b {
  display: block;
  font-family: var(--f-pixel);
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px; margin-bottom: 3px;
}

.nameplate { text-align: center; min-width: 0; }
.nameplate h1 {
  margin: 0;
  font-family: var(--f-mast);
  font-weight: 400;
  font-size: 43px;           /* Jacquard 24 is drawn on a 43px grid */
  line-height: 1;
  white-space: nowrap;
  text-shadow: 2px 2px 0 var(--shadow);
}
[data-masthead="roman"] .nameplate h1 {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.nameplate .motto {
  margin: 4px 0 0;
  
  font-size: 8px;
  color: var(--ink-soft);
}

.dateline {
  display: flex; justify-content: space-between; gap: 15px;
  border-bottom: 1px solid var(--rule);
  padding: 5px 0 4px;
  font-family: var(--f-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dateline span:nth-child(2) { text-align: center; flex: 1; }
.dateline span:last-child { text-align: right; }

/* ---------- Banner headline ---------- */

.banner {
  text-align: center;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 11px;
}
.banner .headline {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 40px;          /* upper limit; gazette.js steps it down 10px at a time to fit */
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-headlines="serif"] .banner .headline { font-weight: 900; letter-spacing: -.012em; }
.banner .deck {
  margin: 6px auto 0;
  max-width: 567px;
  
  font-size: 16px;
  line-height: 20px;
}
.byline {
  margin: 5px 0 0;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Main grid: wide news well + right rail ---------- */

.grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.rail {
  border-left: 1px solid var(--hairline);
  padding-left: var(--gutter);
  align-self: stretch;
}

.main > * + *, .rail > * + * {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 2px solid var(--rule);
}

/* ---------- Stories ---------- */

.kicker {
  margin: 0 0 2px;
  font-family: var(--f-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.kicker::after {                       /* little row of blocks */
  content: ""; display: inline-block;
  width: 27px; height: 5px; margin-left: 6px;
  vertical-align: 1px;
  background: var(--stone) left / 12px 5px repeat-x;
}

.story .title {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
}
.rail .story .title { font-size: 20px; }

.story .story-deck {
  margin: 4px 0 0;
  font-family: var(--f-pixel);   /* Minecraft font at 16px, like the ledger names */
  font-size: 16px;
  line-height: 20px;
  color: var(--ink-soft);
}
.story .title + .body, .story .story-deck + .body, .story .byline + .body { margin-top: 8px; }

figure.photo { margin: 0 0 9px; }
.photo-empty {
  display: grid; place-items: center;
  width: 100%;
  font: 16px var(--f-pixel); color: var(--ink-soft);
  background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(0,0,0,.04) 11px 23px);
  border: 1px dashed var(--ink-soft);
  cursor: pointer;
}
.photo-empty:hover { color: var(--ink); background-color: rgba(59, 142, 222, .08); }
figure.photo img {
  display: block;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--rule);
  box-shadow: 4px 4px 0 var(--shadow);
}
/* Pictures and icons start in black & white; right-click one in the editor for colour */
img.mono { filter: grayscale(1) contrast(1.06); }
figure.photo figcaption {
  margin-top: 6px;
  font-size: 8px;
  line-height: 10px;
  
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 5px;
}
figure.photo .credit {
  float: right;
  margin-left: 8px;
  font-family: var(--f-pixel);
  font-style: normal;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Body copy ---------- */

.body {
  column-count: var(--cols, 1);
  column-gap: var(--gutter);
  column-rule: 1px solid var(--hairline);
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  orphans: 2; widows: 2;
}
/* Justified looks most like newsprint but leaves gaps in browsers that can't
   hyphenate (Chrome on Linux); Firefox hyphenates and justifies nicely. */
[data-align="justify"] .body { text-align: justify; }
.body p { margin: 0; }
/* The pixel fonts have no italic, and a slanted pixel font can't be sharp: emphasis is shown
   upright in a softer ink instead */
.page em, .page i { font-style: normal; color: var(--ink-soft); }
/* Minecraft-style bold (see app.css) */
.page b, .page strong { font-weight: 400; text-shadow: 1px 0 0 currentColor; }
/* no first-line indents: they read like a sentence split with a stray space */

.has-dropcap .body > p:first-child::first-letter {
  float: left;
  font-family: var(--f-mast);
  font-weight: 400;
  font-size: 43px;
  line-height: 34px;
  padding: 2px var(--dropcap-pad, 3px) 0 0;   /* gazette.js rounds the letter + gap to whole pixels */
  text-shadow: 2px 2px 0 var(--shadow);
}

.subhead {
  margin: 7px 0 2px;
  font-family: var(--f-pixel);   /* Minecraft font at 16px, like the ledger names */
  font-weight: 400;
  font-size: 16px; line-height: 20px;
  text-align: left;
  break-after: avoid;
}

.quote {
  margin: 5px 0 5px 1.1em;
  
  text-align: left;
  quotes: "\201C" "\201D";
}
.quote .q::before { content: open-quote; }
.quote .q::after { content: close-quote; }
.quote cite { font-style: normal; margin-left: .5em; white-space: nowrap; color: var(--ink-soft); }
.quote cite::before { content: "— "; }

/* Pictures inside the text */
.inline-pic { position: relative; margin: 5px 0 6px; break-inside: avoid; }
.inline-pic.align-left { float: left; margin-right: 9px; }
.inline-pic.align-right { float: right; margin-left: 9px; }
.inline-pic.align-center { margin-left: auto; margin-right: auto; }
.inline-pic img { display: block; width: 100%; border: 1px solid var(--rule); }
.inline-pic figcaption { margin-top: 3px; font-size: 8px; line-height: 10px; color: var(--ink-soft); }
.body::after { content: ""; display: block; clear: both; }

/* Dividers and note boxes */
.rule-block { clear: both; margin: 8px 0; }
.rule-block.stone { height: 5px; background: var(--stone) left / 12px 5px repeat-x; }
.rule-block.line { height: 0; border-top: 1px solid var(--rule); }
.note-box { margin: 6px 0; padding: 5px 8px 6px; border: 1px solid var(--rule); background: rgba(0, 0, 0, .045); break-inside: avoid; }
.note-box .note-title { display: block; margin-bottom: 2px; font-family: var(--f-pixel); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }

/* Minecraft chat line: <Name> message */
.chat {
  margin: 4px 0;
  padding: 3px 6px 4px;
  background: rgba(21, 19, 17, .86);
  color: #f6f2e8;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 10px;
  text-align: left;
  text-shadow: 1px 1px 0 #4a4640;
  break-inside: avoid;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.chat .who { color: #fff; }

.pull {
  break-inside: avoid;
  margin: 9px 0;
  padding: 8px 0 7px;
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-family: var(--f-pixel);   /* the Minecraft font: even letter spacing */
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  quotes: "\201C" "\201D";
}
.pull .q::before { content: open-quote; }
.pull .q::after { content: close-quote; }
.pull cite {
  display: block;
  margin-top: 5px;
  font-family: var(--f-pixel);
  font-style: normal;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pull cite::before { content: "— "; }

/* ---------- The Death Ledger ---------- */

.ledger {
  border: 2px solid var(--rule) !important;
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 0 !important;
}
.ledger-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 9px 5px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ledger-head h3 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.ledger-head span {
  white-space: nowrap;
  font-family: var(--f-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ledger > .body { padding: 8px 9px 0; }
.ledger > .body:last-child { padding-bottom: 9px; }

.ledger-entries {
  list-style: none;
  margin: 8px 9px 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);   /* every entry has the same line above it, plus one after the last */
}
.ledger-entries li {
  display: grid;
  grid-template-columns: 16px auto 1fr;   /* the soul heart is 16px */
  align-items: start;                     /* heart and soul are centred on the name's letters below */
  column-gap: 6px;
  padding: 5px 0 4px;
  border-top: 1px solid var(--hairline);
}
.ledger-mark { display: flex; line-height: 1; transform: translateY(1px); }   /* heart centred on the name's capitals */
.ledger-name {
  font-family: var(--f-pixel);   /* Minecraft font, like a name tag; matches the 16px soul heart */
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
.ledger-soul {
  margin-top: 3px;   /* centres the small text on the 16px name */
  font-size: 8px;
  color: var(--ink-soft);
}
.ledger-cause {             /* death message, as it appeared in chat */
  grid-column: 2 / -1;
  margin: 2px 0 0;
  font-family: var(--f-pixel);
  font-size: 8px;
}
.ledger-note { grid-column: 2 / -1; margin: 2px 0 0; }

/* ---------- Folio (page foot) ---------- */

.folio {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline; gap: 15px;
  margin-top: 10px;
  padding-top: 10px;
  font-family: var(--f-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.folio::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 7px;
  background: var(--stone) left / 18px 7px repeat-x;
}
.folio span:nth-child(2) {
  flex: 1; text-align: center;
  font-family: var(--f-body); font-weight: 400;
  font-size: 8px; letter-spacing: 0; text-transform: none;
}
.folio span:last-child { text-align: right; }

/* ---------- On screen: whole pixels, so pixel fonts stay sharp ---------- */

@media screen {
  .page { width: 794px; padding: 32px 38px 24px; --gutter: 16px; }
  .grid { grid-template-columns: 432px 1fr; }
}

/* ---------- Print ---------- */

@page { size: A4; margin: 0; }

@media print {
  body { background: none; }
  .toolbar { display: none; }
  .page { zoom: 1 !important; }
  .page {
    margin: 0;
    height: 297mm;
    overflow: hidden;       /* stops a rounding sliver spilling onto a blank 2nd page */
    box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}