/* Nookery print stylesheet.

   A bifold: one 11x17 sheet folded once, four pages. The front carries
   the masthead and the lede, the inside spread carries the stories, and
   the back carries credits.

   This file is the single source of truth for edition layout. The sandbox
   preview and the PDF both render from it. */

@page {
  size: 11in 17in;
  margin: 0.62in 0.55in 0.72in;

  @top-left {
    content: string(edition-masthead);
    font-family: var(--ui-mono);
    font-size: 7.5pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6257;
  }
  @top-right {
    content: string(edition-date);
    font-family: var(--ui-mono);
    font-size: 7.5pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6257;
  }
  @bottom-center {
    content: counter(page);
    font-family: var(--ui-mono);
    font-size: 8pt;
    color: #6b6257;
  }
}

@page :first {
  @top-left { content: none; }
  @top-right { content: none; }
}

:root {
  --paper: #faf8f3;
  --ink: #1a1815;
  --ink-soft: #6b6257;
  --ink-faint: #9c9284;
  --rule: #d8d0c2;
  --rule-strong: #b9ae9b;
  --accent: #a33a22;
  --edition-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --edition-sans: "Geist", system-ui, -apple-system, sans-serif;
  --ui-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  font-family: var(--edition-serif);
  color: var(--ink);
  background: var(--paper);
}

body {
  margin: 0;
  font-size: 10.5pt;
  line-height: 1.42;
  font-variant-numeric: oldstyle-nums;
  hanging-punctuation: first last;
}


/* ================================================================
   Front page
   ================================================================ */

.masthead {
  text-align: center;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  padding: 0.14in 0;
  margin-bottom: 0.06in;
}

.masthead h1 {
  string-set: edition-masthead content();
  font-size: 64pt;
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  font-variant-numeric: lining-nums;
  text-transform: uppercase;
}

.masthead .dek {
  font-family: var(--ui-mono);
  font-size: 7pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.06in;
}

.colophon {
  display: flex;
  justify-content: space-between;
  font-family: var(--ui-mono);
  font-size: 7pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.06in;
  margin-bottom: 0.22in;
}

.colophon .issue-date { string-set: edition-date content(); }


/* ================================================================
   Lede story
   ================================================================ */

.lede {
  margin-bottom: 0.2in;
}

.lede h2 {
  font-size: 40pt;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.016em;
  margin: 0 0 0.08in;
  text-wrap: balance;
}

.lede .byline {
  font-family: var(--ui-mono);
  font-size: 7.5pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.12in;
}

.lede-photo {
  margin: 0 0 0.14in;
  break-inside: avoid;
}
.lede-photo img {
  width: 100%;
  display: block;
  filter: grayscale(1) contrast(1.08);
}
.lede-photo figcaption {
  font-family: var(--ui-mono);
  font-size: 7pt;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 0.04in;
}

.lede-body {
  columns: 2;
  column-gap: 0.3in;
  column-rule: 1px solid var(--rule);
}
.lede-body p { margin: 0; text-align: justify; hyphens: auto; }
.lede-body p + p { text-indent: 1.1em; }

/* Drop cap on the first paragraph of the lede. */
.drop-cap::first-letter {
  float: left;
  font-size: 3.8em;
  line-height: 0.78;
  padding-right: 0.06em;
  margin-top: 0.04em;
  font-weight: 700;
}

.lede-body > .drop-cap::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}


/* ================================================================
   Front page below the lede
   ================================================================ */

.front-below {
  border-top: 3px double var(--ink);
  margin-top: 0.18in;
  padding-top: 0.16in;
  display: flex;
  gap: 0.3in;
}

.front-below article.brief {
  flex: 1;
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.front-below article.brief h2 {
  font-size: 16pt;
  line-height: 1.1;
}

.front-below article.brief .body {
  columns: 1;
}

.teasers {
  flex: 0 0 2.4in;
  border-left: 1px solid var(--rule);
  padding-left: 0.2in;
}

.teasers h3 {
  font-family: var(--ui-mono);
  font-size: 7pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.1in;
}

.teasers ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.teasers li {
  font-size: 9pt;
  line-height: 1.3;
  margin-bottom: 0.1in;
  padding-bottom: 0.1in;
  border-bottom: 1px solid var(--rule);
}
.teasers li:last-child { border-bottom: none; }

.teaser-title {
  font-weight: 500;
}

.teaser-page {
  font-family: var(--ui-mono);
  font-size: 7pt;
  color: var(--ink-soft);
}


/* ================================================================
   Inside pages
   ================================================================ */

.page { break-before: page; }
.page:first-of-type { break-before: auto; }

.page.inside {
  columns: 3;
  column-gap: 0.24in;
  column-rule: 1px solid var(--rule);
}

.story-rule {
  border: none;
  border-top: 2px solid var(--ink);
  margin: 0.2in 0;
  column-span: all;
}

article {
  break-inside: avoid;
  margin-bottom: 0.2in;
}

article h2 {
  font-size: 22pt;
  line-height: 1.04;
  font-weight: 500;
  margin: 0 0 0.06in;
  text-wrap: balance;
  break-after: avoid;
}

.kicker {
  font-family: var(--ui-mono);
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.02in;
  break-after: avoid;
}

.byline {
  font-family: var(--ui-mono);
  font-size: 7pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.1in;
  break-after: avoid;
}

/* Inside article bodies flow within the page columns, not their own. */
.page.inside .body { columns: unset; }

.body { columns: 3; column-gap: 0.24in; column-rule: 1px solid var(--rule); }

.body p { margin: 0; text-align: justify; hyphens: auto; }
.body p + p { text-indent: 1.1em; }

.body > p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}

p { orphans: 3; widows: 3; }

figure { margin: 0 0 0.14in; break-inside: avoid; }
figure img { width: 100%; display: block; filter: grayscale(1) contrast(1.06); }
figcaption {
  font-family: var(--ui-mono);
  font-size: 7pt;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 0.04in;
}


/* ================================================================
   Back page
   ================================================================ */

.page.back {
  display: flex;
  align-items: flex-end;
  min-height: 100%;
}

.back-content {
  width: 100%;
}

.contributors {
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0.18in 0;
  margin-bottom: 0.3in;
}

.contributors h2 {
  font-family: var(--edition-serif);
  font-size: 18pt;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.12in;
}

.contributors .names {
  font-size: 11pt;
  line-height: 1.8;
  color: var(--ink);
}

.back-footer {
  text-align: center;
  padding-top: 0.2in;
}

.back-strapline {
  font-family: var(--edition-serif);
  font-size: 14pt;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.06in;
}

.back-dek {
  font-family: var(--ui-mono);
  font-size: 7.5pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.04in;
}

.back-issue {
  font-family: var(--ui-mono);
  font-size: 7pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.empty-note {
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
  padding: 1in 0;
}


/* ================================================================
   On screen

   Stacked by default for the sidebar preview. `spread` lays it out
   as the folded sheet reads: front, inside spread side-by-side, back.
   ================================================================ */

@media screen {
  body { background: #e8e3d9; }

  .pagedjs_page {
    background: var(--paper);
    margin: 0 auto;
    box-shadow: 0 2px 18px rgba(26, 24, 21, 0.2);
  }

  .pagedjs_pages {
    padding: 0.5in 0;
    display: flex;
    flex-direction: column;
    gap: 0.5in;
  }

  body.spread .pagedjs_pages {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-content: start;
    gap: 0.5in 0;
  }

  body.spread .pagedjs_page:nth-child(1) { grid-column: 1 / span 2; justify-self: center; }
  body.spread .pagedjs_page:nth-child(2) { grid-column: 1; border-right: 1px dashed var(--rule-strong); }
  body.spread .pagedjs_page:nth-child(3) { grid-column: 2; }
  body.spread .pagedjs_page:nth-child(4) { grid-column: 1 / span 2; justify-self: center; }
}