/* The Oakhaven Gazette, set in HTML.
 *
 * This is a RE-SETTING of the printed paper, not a picture of it. Same words, same
 * palette, same font roles as ArtSource/gazette_pages.py (impact / georgiab / georgia),
 * but it reflows - which is the whole reason it exists. The printed spread is 2:1, so on
 * a phone at fit-width its body type is about four pixels tall.
 *
 * No web fonts: public/_headers sets `default-src 'self'` with no font host, so every
 * face here has to be one the reader already has. Impact ships on Windows and macOS;
 * Haettenschweiler and Arial Narrow are the fallbacks that keep the masthead condensed
 * rather than letting it collapse to a wide default sans.
 */
:root{
  --paper:#D6D4C6;        /* the newsprint stock, matched off the rendered page */
  --paper-edge:#C9C7B8;
  --ink:#1A1A1C;
  --ink-soft:#4E5055;
  --ink-faint:#7A7C80;
  --accent:#C4491B;       /* the second colour on the press */
  --rule:#9A9889;
  --mast:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif;
  --head:Georgia,"Times New Roman",Times,serif;
  --body:Georgia,"Times New Roman",Times,serif;
  --label:"Arial Black","Arial Bold",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

body{margin:0;background:#14171A;color:var(--ink);font:400 1rem/1.6 var(--body)}

/* ── the sheet ─────────────────────────────────────────────────────────────
   Full browser width, which is what was asked for, but with a ceiling: newspaper
   columns are only readable up to a point, and a 3000px-wide column of Georgia is
   not a newspaper, it is a wall. */
.paper{background:var(--paper);color:var(--ink);
  width:min(96rem,100%);margin-inline:auto;padding:clamp(1rem,3vw,2.5rem);
  box-shadow:0 0 60px rgba(0,0,0,.5)}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead{text-align:center;border-bottom:3px solid var(--ink);padding-bottom:.35rem}
.masthead h1{font:400 clamp(2.6rem,9vw,7rem)/0.92 var(--mast);letter-spacing:.005em;
  text-transform:uppercase;margin:0;color:var(--ink);
  text-shadow:.055em .045em 0 var(--accent)}
.dateline{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;
  font:700 .72rem/1.5 var(--label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);padding:.5rem 0;border-bottom:1px solid var(--rule)}
.dateline .free{color:var(--accent)}

/* ── section-page flag ────────────────────────────────────────────────────── */
.flag{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  border-bottom:3px solid var(--ink);padding-bottom:.3rem;margin-bottom:.6rem}
.flag h2{font:400 clamp(1.8rem,5vw,3.2rem)/1 var(--mast);text-transform:uppercase;
  letter-spacing:.01em;margin:0}
.flag .strap{font:700 .72rem/1.5 var(--label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin:0}

/* ── the lead ─────────────────────────────────────────────────────────────── */
.kicker{font:700 .74rem/1.5 var(--label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .3rem}
.lead-head{font:700 clamp(2rem,5.5vw,3.6rem)/1.02 var(--head);margin:0 0 .25em;
  letter-spacing:-.015em}
.dek{font:400 clamp(1.05rem,1.7vw,1.45rem)/1.35 var(--head);color:var(--ink-soft);
  margin:0 0 1rem;max-width:60ch}

figure.shot{margin:0 0 1rem;break-inside:avoid}
figure.shot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06)}
figure.shot figcaption{font:700 .74rem/1.4 var(--label);color:var(--ink-soft);
  padding-top:.4rem;border-top:1px solid var(--rule);margin-top:.35rem}

/* ── the columns ──────────────────────────────────────────────────────────
   `columns` with a min width, so it is 4 columns on a desktop, 1 on a phone, and
   nobody has to pan. Headings must not be stranded at the foot of a column. */
.cols{columns:4 17rem;column-gap:2rem;column-rule:1px solid var(--rule);
  font-size:clamp(.95rem,1.05vw,1.02rem)}
.cols > *{break-inside:avoid-column}
.cols p{margin:0 0 .75em;text-align:justify;hyphens:auto}
.cols p.strong{font-weight:700}
.cols h3{font:700 1.3rem/1.15 var(--head);margin:.9em 0 .3em;break-after:avoid}
.cols .kicker{margin-top:1em;break-after:avoid}
.cols hr{border:0;border-top:1px solid var(--rule);margin:1.1em 0}
.cols p:first-of-type::first-letter{font-weight:700}

.folio{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:1.2rem;padding-top:.5rem;
  font:700 .72rem/1.5 var(--label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint)}
.folio .cont{color:var(--accent)}

/* ── chrome (outside the paper) ───────────────────────────────────────────── */
.bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;color:#F2EFE9;
  padding:1rem clamp(1rem,3vw,2rem);border-bottom:1px solid #2A2F35;
  font:400 1rem/1.6 ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.bar a{color:#FF9B2E}
.bar .mark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.bar .mark svg{width:26px;height:26px;display:block}
.bar .mark b{font:800 .82rem/1 inherit;letter-spacing:.14em;text-transform:uppercase}
.bar .right{margin-left:auto;display:flex;gap:1.1rem;align-items:center;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}

.controls{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;
  gap:.75rem;padding:.85rem 1rem;background:rgba(20,23,26,.94);border-top:1px solid #2A2F35;
  backdrop-filter:blur(6px);
  font:400 1rem ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.btn{appearance:none;border:1px solid #2A2F35;background:#1B1F24;color:#F2EFE9;
  font:700 1.1rem/1 inherit;padding:.65rem 1.05rem;border-radius:6px;cursor:pointer;min-width:3rem}
.btn:hover:not(:disabled){border-color:#FF9B2E;color:#FF9B2E}
.btn:disabled{opacity:.35;cursor:default}
.count{font:600 .85rem/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#A7ADB3;
  min-width:7.5rem;text-align:center}
.count b{color:#F2EFE9}
:focus-visible{outline:3px solid #FF9B2E;outline-offset:3px}

.note{color:#A7ADB3;font:400 .92rem/1.65 ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  padding:1.6rem clamp(1rem,3vw,2rem) 3rem}
.note p{max-width:46rem;margin:0 0 .8em}
.note a{color:#FF9B2E}

/* Print the paper, not the chrome. */
@media print{
  body{background:#fff}
  .bar,.controls,.note{display:none}
  .paper{box-shadow:none;width:100%}
  .page[hidden]{display:block !important}
}


/* The YouTube call to action. Red is YouTube's, and borrowing it is the point: it should
   read as "that is the YouTube one" without being read at all. */
.ytrail{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  flex-wrap:wrap;width:min(46rem,100% - 2.5rem);margin:2.5rem auto 0;
  border:1px solid #2A2F35;border-radius:10px;padding:1.15rem 1.35rem;background:#181C21}
.ytrail p{margin:0;color:#A7ADB3;font-size:.95rem;max-width:34rem}
.ytrail p b{color:#F2EFE9}
.ytbtn{display:inline-flex;align-items:center;gap:.6rem;background:#FF0000;color:#fff;
  border:1.5px solid #FF0000;border-radius:8px;padding:.7rem 1.15rem;font-weight:700;
  text-decoration:none;white-space:nowrap}
.ytbtn:hover{background:#d90000;border-color:#d90000;color:#fff}
.ytbtn svg{width:22px;height:16px;display:block;flex:none}
.ytbtn .yt{fill:#fff}