@font-face {
  font-family: 'Archivo';
  src: url('font/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Weldon Reporting Company
   Register: condensed news / printed directory. One family, Archivo
   variable, using the width axis for display instead of a second face.

   Type ladder, written before markup, six steps:
     11  chips, eyebrows, column heads, stacked-row labels
     14  small print: table cells, footer, notes, hours
     17  body prose, subheads, reporter names
     21  lede, header telephone, section lede
     34  section headings, the scheduling telephone
     62  the one page headline
   Weights: 400 / 600 / 800. Widths: 100% everywhere, 78% on h2,
   66% on h1. Radius: 0.

   Colour: warm paper ground, one dark band (Coverage) and one mid
   band (footer). Darkest point is the coverage band, lightest is the
   roster paper. Neutrals are the paper darkened toward its own warmth,
   not a stock grey ramp. Accent is a burnt rust and it fills exactly
   two things: the realtime marks and the scheduling call block.
   --------------------------------------------------------------- */

:root {
  --paper:  #f3efe7;
  --panel:  #e4ddce;
  --ink:    #17181c;
  --muted:  #5a574f;
  --accent: #a34418;

  --s1: 11px;
  --s2: 14px;
  --s3: 17px;
  --s4: 21px;
  --s5: 34px;
  --s6: clamp(38px, 7.2vw, 62px);

  --rule: 1px solid rgba(23, 24, 28, 0.22);
  --rule-hard: 2px solid var(--ink);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--s3);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: auto; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

a:focus-visible,
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
}

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shared marks ---------- */

.eyebrow, .chip, .board thead th, .n {
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow { color: var(--muted); margin: 0 0 18px; }
.eyebrow-inv { color: var(--paper); }

.chip {
  display: inline-block;
  color: var(--muted);
  border: var(--rule);
  padding: 3px 7px 2px;
  margin: 0 5px 5px 0;
}

.mark {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding: 3px 8px 2px;
}

h1, h2, h3 { margin: 0; font-weight: 800; }

h1 {
  font-size: var(--s6);
  font-stretch: 66%;
  line-height: 0.96;
  letter-spacing: -0.005em;
}

h2 {
  font-size: var(--s5);
  font-stretch: 78%;
  line-height: 1.06;
  margin-bottom: 22px;
}

h3 {
  font-size: var(--s3);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lede { font-size: var(--s4); line-height: 1.5; }

.tel {
  font-size: var(--s4);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
.tel:hover { background: var(--panel); }

/* ---------- mockup banner ---------- */

.mockup {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--s2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}

/* ---------- masthead ---------- */

.masthead { border-bottom: var(--rule-hard); }

.masthead-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  padding-top: 22px;
  padding-bottom: 18px;
}

.wordmark { text-decoration: none; display: block; }
.wordmark-a {
  display: block;
  font-size: var(--s5);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 0.94;
  letter-spacing: -0.005em;
}
.wordmark-b {
  display: block;
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
}

.masthead-call {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.masthead-hours {
  font-size: var(--s2);
  color: var(--muted);
}

/* ---------- opener ---------- */

.opener-in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 34px 68px;
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(48px, 6vw, 84px);
}

.opener-head { align-self: start; }
.opener-body { align-self: end; max-width: 52ch; }
.opener-body .lede { margin-bottom: 1.1em; }

/* ---------- full bleed figures ---------- */

.bleed { margin: 0; }
.bleed img { max-height: 62vh; object-fit: cover; }
.bleed-wide img { max-height: 46vh; }

/* ---------- the roster board ---------- */

.roster { padding-top: clamp(54px, 6.5vw, 90px); }

.act-head { max-width: 62ch; margin-bottom: 34px; }
.act-note {
  font-size: var(--s2);
  color: var(--muted);
  max-width: 60ch;
  margin-top: 14px;
}

.board-scroll { padding: 0 clamp(20px, 5vw, 44px); }

.board {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
  border-top: var(--rule-hard);
  border-bottom: var(--rule-hard);
}

.board thead th {
  color: var(--muted);
  font-weight: 600;
  vertical-align: bottom;
  padding: 12px 16px 10px;
  border-bottom: var(--rule);
  background: var(--panel);
}

.board tbody th,
.board tbody td {
  padding: 15px 16px;
  border-bottom: var(--rule);
  vertical-align: top;
}
.board tbody tr:last-child th,
.board tbody tr:last-child td { border-bottom: 0; }

.board tbody th {
  font-size: var(--s3);
  font-weight: 600;
  white-space: nowrap;
}

.board tbody td {
  font-size: var(--s2);
  color: var(--muted);
  line-height: 1.5;
}

.board .cert { min-width: 162px; padding-bottom: 10px; }
.board .num { white-space: nowrap; }
.board .rt { white-space: nowrap; }
.board .subj { min-width: 200px; }
.board .drive { min-width: 168px; }

.board tbody tr:hover th,
.board tbody tr:hover td { background: rgba(228, 221, 206, 0.55); }

.board-foot {
  font-size: var(--s2);
  color: var(--muted);
  max-width: 74ch;
  margin-top: 26px;
}

/* ---------- realtime ---------- */

.realtime { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }

.realtime-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 38px 62px;
  align-items: stretch;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 26px 0;
  padding: 24px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.tight { max-width: 62ch; }

.realtime-fig { margin: 0; height: 100%; min-height: 340px; }
.realtime-fig img { height: 100%; object-fit: cover; }

/* ---------- coverage: the page's one dark band ---------- */

.coverage {
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.coverage h2 { max-width: 20ch; }
.coverage h3 { color: var(--paper); padding-bottom: 12px; border-bottom: 1px solid rgba(243, 239, 231, 0.34); }
.coverage-lede { font-size: var(--s4); line-height: 1.5; max-width: 46ch; margin-bottom: 44px; }

.cov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 52px;
}

.plain { list-style: none; margin: 0; padding: 0; }
.plain li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(243, 239, 231, 0.18);
}

.cov-col p { font-size: var(--s2); }

/* ---------- exhibits ---------- */

.exhibits { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }

.exhibits-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  gap: 38px 62px;
  align-items: stretch;
}

.exhibits-fig { margin: 0; height: 100%; min-height: 340px; }
.exhibits-fig img { height: 100%; object-fit: cover; }

.steps { margin: 22px 0 0; padding: 0 0 0 1.4em; }
.steps li { margin-bottom: 14px; padding-left: 6px; }
.steps li::marker { font-weight: 800; }

/* ---------- holding a date ---------- */

.holding { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 96px); }

.holding-head { max-width: 60ch; }

.holding-call {
  margin: 30px 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  background: var(--accent);
  padding: 16px 22px;
}
.holding-call .tel-big {
  font-size: var(--s5);
  font-weight: 800;
  font-stretch: 78%;
  color: var(--paper);
  border-bottom: 0;
  text-decoration: none;
  line-height: 1.05;
}
.holding-call .tel-big:hover { text-decoration: underline; text-underline-offset: 5px; background: none; }
.holding-call .tel-big:focus-visible { outline-color: var(--paper); }
.holding-call .masthead-hours { color: var(--paper); }

.checklist {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: var(--rule-hard);
  columns: 2;
  column-gap: 62px;
}
.checklist li {
  break-inside: avoid;
  padding: 16px 0;
  border-bottom: var(--rule);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.checklist .n { color: var(--muted); flex: 0 0 auto; }

.holding-foot {
  margin-top: 30px;
  max-width: 70ch;
  font-size: var(--s2);
  color: var(--muted);
}

/* ---------- colophon ---------- */

.colophon {
  background: var(--panel);
  border-top: var(--rule-hard);
}

.colophon-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 30px 56px;
  padding-top: 46px;
  padding-bottom: 52px;
}

.colophon .col p { font-size: var(--s2); color: var(--muted); }
.colophon .col .chip { color: var(--ink); border-color: rgba(23, 24, 28, 0.3); margin-bottom: 14px; }
.colophon .tel { color: var(--ink); }

/* ---------- reveal (progressive enhancement) ---------- */

.js .rise {
  opacity: 0;
  transform: translateY(16px);
}
.js .rise.seen {
  opacity: 1;
  transform: none;
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- narrow ---------- */

@media (max-width: 1000px) {
  .opener-in,
  .realtime-in,
  .exhibits-in { grid-template-columns: minmax(0, 1fr); }
  .exhibits-fig { order: 2; }
  .exhibits-copy { order: 1; }
  .realtime-fig, .exhibits-fig { height: auto; min-height: 0; }
  .realtime-fig img, .exhibits-fig img { height: auto; }
  .cov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colophon-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-wide { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  /* the board stops being a table and becomes nine stacked entries */
  .board-scroll { padding: 0 clamp(20px, 5vw, 44px); }
  .board, .board tbody, .board tr, .board th, .board td { display: block; width: auto; }
  /* the column heads are re-issued per cell by the data-label rule below, so
     the head row is removed outright rather than merely hidden from sight */
  .board thead { display: none; }
  .board { border-bottom: 0; }
  .board tbody tr {
    border-bottom: var(--rule);
    padding: 20px 0 22px;
  }
  .board tbody tr:last-child { border-bottom: var(--rule-hard); }
  .board tbody th,
  .board tbody td { padding: 0; border-bottom: 0; white-space: normal; }
  .board tbody th { font-size: var(--s4); margin-bottom: 10px; }
  .board tbody td { margin-bottom: 10px; }
  .board tbody td:last-child { margin-bottom: 0; }
  .board tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--s1);
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
  }
  .board .cert::before { margin-bottom: 6px; }
  .board tbody tr:hover th,
  .board tbody tr:hover td { background: none; }
  .checklist { columns: 1; }
}

@media (max-width: 640px) {
  .cov-grid { grid-template-columns: minmax(0, 1fr); }
  .colophon-in { grid-template-columns: minmax(0, 1fr); }
  .bleed img { max-height: 54vh; }
  .masthead-in { align-items: flex-start; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .rise.seen { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; scroll-behavior: auto !important; }
}