/* Archive 21 — web edition.
   Three layouts from one markup: pocket (< 720px), tabloid (720–1199px), broadsheet (>= 1200px). */

/* Adler's curly quotes, dashes, ellipsis and "!" are blank glyphs; limit it to what it draws
   so those characters fall back to Special Elite. */
@font-face {
  font-family: 'Adler'; src: url('fonts/adler.woff2') format('woff2'); font-display: swap;
  unicode-range: U+0020, U+0022-007E;
}
@font-face { font-family: 'Special Elite'; src: url('fonts/special-elite.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('fonts/bebas-neue.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #161616;
  --ink-soft: #3a3a38;
  --paper: #f1f0ec;
  --table: #252523;
  --tint: #9a9a96;
  --rule: 1px dotted var(--ink);
  --gap: clamp(1rem, 2vw, 2rem);
  --hed: 'Adler', 'Special Elite', serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --label: 'Bebas Neue', 'Arial Narrow', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.5 var(--type);
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- Running head + issue menu ---------- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  font: 1rem/1 var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.runhead {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.runhead::before, .runhead::after { content: ''; flex: 1; border-top: var(--rule); }

.issues { position: relative; }
.issues summary {
  cursor: pointer;
  list-style: none;
  padding: 0.45rem 0.7rem 0.35rem;
  background: var(--ink);
  color: var(--paper);
}
.issues summary::-webkit-details-marker { display: none; }
.issues summary::after { content: ' ▾'; }
.issues[open] summary::after { content: ' ▴'; }
.issues ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 15rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0.35rem 0.35rem 0 var(--ink);
}
.issues a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem 0.5rem;
  text-decoration: none;
}
.issues a b { font-weight: normal; }
.issues a span { color: var(--ink-soft); }
.issues a:hover, .issues a[aria-current] { background: var(--ink); color: var(--paper); }
.issues a:hover span, .issues a[aria-current] span { color: inherit; }

/* ---------- The sheet ---------- */

.paper { padding: 0 1rem 2rem; }

.masthead { text-align: center; }
.masthead h1 {
  margin: 0.5rem 0 0;
  font: normal clamp(2.4rem, 12.5vw, 12.5rem)/0.9 var(--hed);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.folio {
  margin: 0.4rem 0 1rem;
  font-size: clamp(0.7rem, 1.6vw, 1.05rem);
  text-transform: uppercase;
}
.teasers {
  margin: 0 0 var(--gap);
  padding: 0.9rem 1rem;
  list-style: none;
  background: var(--tint);
  color: var(--ink);
  font-size: clamp(0.85rem, 2vw, 1.5rem);
  line-height: 1.35;
  text-transform: uppercase;
}
.teasers li { display: inline; }
.teasers li + li::before { content: ' • '; }

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

.front, .front-side, .spread { display: grid; gap: var(--gap); }
.spread { margin-top: var(--gap); grid-auto-flow: row dense; }

.story { min-width: 0; padding-top: 0.6rem; border-top: 3px solid var(--ink); }

.label {
  display: block;
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.5rem 0.15rem;
  background: var(--ink);
  color: var(--paper);
  font: 1rem/1 var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hed {
  margin: 0 0 0.4rem;
  font: normal 2rem/0.98 var(--hed);
  text-transform: uppercase;
  text-wrap: balance;
}
.story--lead .hed { font-size: clamp(2.8rem, 7.5vw, 6.5rem); }
.story--major .hed { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
.story--brief .hed { font-size: 1.6rem; }

.subhed {
  margin: 0 0 0.6rem;
  font: normal clamp(1.3rem, 2.6vw, 2.4rem)/1.05 var(--hed);
  text-transform: uppercase;
  text-wrap: balance;
}
.deck {
  margin: 0 0 0.8rem;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
.byline { margin: 0 0 0.6rem; font-style: italic; }

.copy {
  font-size: 0.98rem;
  line-height: 1.5;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.copy p { margin: 0; }
.copy p + p { text-indent: 1.4em; }
.copy figure + p, .copy table + p, .copy .classified p, .copy .signoff { text-indent: 0; }
.dateline { text-transform: uppercase; }
.copy .signoff { margin-top: 0.8rem; text-align: right; font-style: italic; }

.copy figure { margin: 0 0 1rem; break-inside: avoid; }
.copy figcaption { margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.85rem; }

/* Drop cap opens the front-page story. */
.front > .story .copy > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font: 3.4em/0.8 var(--hed);
}

/* ---------- Ads, menu, classifieds ---------- */

.story--ad { align-self: start; padding: 0.6rem; border: 3px solid var(--ink); }
.story--ad .hed {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.story--ad .copy figure { margin: 0; }

.menu {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
  break-inside: avoid;
}
.menu caption {
  padding: 0.3rem 0.5rem 0.15rem;
  background: var(--ink);
  color: var(--paper);
  font: 1rem/1 var(--label);
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.menu th, .menu td {
  padding: 0.35rem 0.3rem 0.25rem;
  border-bottom: var(--rule);
  font-weight: normal;
  text-align: left;
  text-transform: uppercase;
}
.menu td { text-align: right; white-space: nowrap; }

.story--classifieds { border: 3px solid var(--ink); padding: 0; }
.story--classifieds .hed {
  margin: 0;
  padding: 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}
.story--classifieds .copy { padding: 1rem; }
.classified { break-inside: avoid; padding-bottom: 0.9rem; }
.classified .when {
  font: 0.95rem/1.2 var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.classified h3 { margin: 0.1rem 0 0; font-size: 1rem; text-transform: uppercase; }
.classified .where { font-weight: bold; }

/* ---------- Front-page index rail ---------- */

.rail { display: grid; gap: 0.25rem 1rem; align-content: start; }
.rail-item {
  display: grid;
  padding: 0 0 0.8rem;
  border-bottom: var(--rule);
  text-decoration: none;
}
.rail-item .label { margin-bottom: 0.3rem; font-size: 0.85rem; justify-self: stretch; }
.rail-text { font-size: 1.2rem; line-height: 1.45; }
.rail-page { justify-self: end; color: var(--ink-soft); }
.rail-item:hover .rail-text { text-decoration: underline; }

.colophon {
  margin-top: calc(var(--gap) * 2);
  padding-top: 0.8rem;
  border-top: var(--rule);
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Pocket (phones) ---------- */

@media (max-width: 719px) {
  .runhead { font-size: 0.85rem; }
  .copy { text-align: left; }
  .story { border-top-width: 6px; padding-top: 0.8rem; }
  .story + .story { margin-top: 0.5rem; }

  /* The index becomes a swipeable strip under the lead story. */
  .rail {
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1rem;
    padding: 0 1rem 0.5rem;
  }
  .rail-item { scroll-snap-align: start; border: var(--rule); padding: 0 0.6rem 0.6rem; }
  .rail-item .label { margin: 0 -0.6rem 0.4rem; }
}

/* ---------- Tabloid (tablets) ---------- */

@media (min-width: 720px) {
  .paper { padding: 0 2rem 3rem; }
  .copy { text-align: justify; columns: 16rem; column-gap: 1.6rem; column-rule: var(--rule); }
  .story--lead .copy > figure:first-child,
  .story--major .copy > figure:first-child { column-span: all; }

  .spread { grid-template-columns: repeat(6, 1fr); }
  .spread > * { grid-column: span 3; }
  .spread > .story--lead, .spread > .story--major { grid-column: span 6; }

  .rail { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Broadsheet (desktop): the paper becomes a sheet on the table ---------- */

@media (min-width: 1200px) {
  body { background: var(--table); padding: 0 2rem 4rem; }
  .topbar { max-width: 1640px; margin: 0 auto; color: var(--paper); }
  .runhead::before, .runhead::after { border-color: var(--paper); }
  .issues summary { background: var(--paper); color: var(--ink); }
  .topbar :focus-visible { outline-color: var(--paper); }
  .paper {
    max-width: 1640px;
    margin: 0 auto;
    padding: 3rem 3.5rem 3rem;
    background: var(--paper);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.45);
  }

  .front { grid-template-columns: repeat(12, 1fr); }
  .front > .story { grid-column: span 9; }
  .front-side { grid-column: span 3; display: grid; gap: var(--gap); align-content: start; }
  .front-side .rail { grid-template-columns: 1fr; padding-top: 0.6rem; border-top: 3px solid var(--ink); }
  .front-side .hed { font-size: 2rem; }
  .front-side .subhed { font-size: 1.3rem; }

  .spread { grid-template-columns: repeat(12, 1fr); }
  /* Spans are multiples of 4 so dense flow can always fill a row. */
  .spread > * { grid-column: span 4; }
  .spread > .story--lead { grid-column: span 12; }
  .spread > .story--major { grid-column: span 8; }
}