/* ==========================================================================
   BROADSHEET — one page. Loaded on a/broadsheet.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One newspaper front: masthead with ears, dateline, strap, then a six-column
   grid of stories carrying the record. Narrow justified hyphenated columns,
   hairline rules doing structural work, one spot red spent sparingly, no air.
   The red is the room's art direction, not a broadsheet attribute: the
   research withdrew single spot colour as the format's mark (2026-09-29).
   Motion: none — newsprint does not move. The shell (rail, top bar, action
   cluster, community drawer) is never restyled: every rule here is scoped to
   .bs-hero or .bs-rec. The two are siblings inside main and share one sheet:
   the hero has no bottom padding, the record no top.

   Colour, with contrast on the newsprint ground #F2EEE3:
     ink        #191813  15.33:1  (body, heads)               AA/AAA
     grey       #514D42   7.27:1  (decks, by-lines, folio)    AA/AAA
     spot red   #A11A1A   6.76:1  (kickers, dateline spot)    AA
     rule       #B9B2A0   1.82:1  (rules only — never text)
   ========================================================================== */
@font-face {
  font-family: "FrankRuhlX";
  src: url("fonts/frank-ruhl.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "OswaldX";
  src: url("fonts/oswald.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "UnifrakturX";
  src: url("fonts/unifraktur-maguntia.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.bs-page {
  --bs-paper: #F2EEE3; --bs-paper2: #EFEAE0; --bs-ink: #191813; --bs-grey: #514D42; --bs-red: #A11A1A; --bs-rule: #B9B2A0;
  --bs-mat: #d9d3c3;
  --bs-serif: "FrankRuhlX", "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --bs-cond: "OswaldX", "Oswald", "Arial Narrow", sans-serif;
  --bs-black: "UnifrakturX", "UnifrakturMaguntia", "Old English Text MT", serif;
  --bs-sheet-w: 1320px;
  --bs-sheet-pad: clamp(12px, 2.4vw, 30px);
  --bs-sheet-gap: clamp(0px, 2vw, 28px);
  background: var(--paper); /* shell mat; the ground lives on main */
}
.bs-page main { background: var(--bs-mat); color: var(--bs-ink); }

/* ---- the sheet: hero and record are one piece of paper ------------------- */
.bs-hero, .bs-rec {
  max-width: var(--bs-sheet-w);
  margin-inline: auto;
  background: var(--bs-paper);
  background-image: radial-gradient(rgba(25, 24, 19, .05) .6px, transparent .8px);
  background-size: 3px 3px;
  color: var(--bs-ink);
  font: 400 16px/1.45 var(--bs-serif);
  font-synthesis: weight style; /* the shell sets none; the sheet needs the serif's italic */
}
.bs-hero { margin-top: var(--bs-sheet-gap); padding: var(--bs-sheet-pad) var(--bs-sheet-pad) 0; }
.bs-rec { margin-bottom: var(--bs-sheet-gap); padding: 0 var(--bs-sheet-pad) var(--bs-sheet-pad); }
.bs-hero a, .bs-rec a { color: var(--bs-ink); }
.bs-hero a:hover, .bs-rec a:hover { color: var(--bs-red); }
.bs-hero :focus-visible, .bs-rec :focus-visible { outline: 2px solid var(--bs-red); outline-offset: 2px; }
.bs-rec .bs-sans { font-family: var(--bs-cond); }
.bs-rec .bs-kick, .bs-hero .bs-kick { font: 500 12px/1.2 var(--bs-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-red); }

/* ---- masthead ------------------------------------------------------------ */
.bs-hero .bs-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-bottom: 6px; border-bottom: 4px double var(--bs-ink); }
.bs-hero .bs-ear { border: 1px solid var(--bs-ink); padding: 8px 10px; font-size: 13px; line-height: 1.3; max-width: 220px; margin: 0; }
.bs-hero .bs-ear dd { margin: 0; }
.bs-hero .bs-ear dt { display: block; font: 600 12px var(--bs-cond); text-transform: uppercase; letter-spacing: .05em; }
.bs-hero .bs-ear .bs-ear__2 { margin-top: 4px; }
.bs-hero .bs-ear--r { justify-self: end; text-align: right; }
.bs-hero .bs-name { margin: 0; text-align: center; font-family: var(--bs-black); font-weight: 400; font-size: clamp(46px, 9vw, 118px); line-height: 1; letter-spacing: .01em; }
.bs-hero .bs-dateline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 5px 0; border-bottom: 1px solid var(--bs-ink); font: 500 12px/1.3 var(--bs-cond); text-transform: uppercase; letter-spacing: .05em; }
.bs-hero .bs-spot { color: var(--bs-red); }
.bs-hero .bs-strap { margin: 0; padding: 8px 0; border-bottom: 2px solid var(--bs-ink); text-align: center; font: italic 400 18px/1.3 var(--bs-serif); }

/* ---- the grid ------------------------------------------------------------ */
.bs-rec .bs-front { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 10px; }
.bs-rec .bs-story { min-width: 0; padding: 0 12px 14px; border-left: 1px solid var(--bs-rule); }
.bs-rec .bs-story:first-child, .bs-rec .bs-fl { border-left: 0; padding-left: 0; }
.bs-rec .bs-br { border-top: 1px solid var(--bs-ink); padding-top: 10px; margin-top: 4px; }
.bs-rec .bs-s2 { grid-column: span 2; }
.bs-rec .bs-s3 { grid-column: span 3; }
.bs-rec .bs-s4 { grid-column: span 4; }
.bs-rec .bs-s6 { grid-column: span 6; }
.bs-rec .bs-story h2 { margin: 4px 0 8px; font: 600 clamp(24px, 2.6vw, 36px)/1.02 var(--bs-cond); text-transform: uppercase; letter-spacing: -.005em; }
.bs-rec .bs-story h2.bs-xl { font-size: clamp(34px, 5.4vw, 72px); line-height: .95; }
.bs-rec .bs-story h3 { margin: 4px 0 6px; font: 600 20px/1.05 var(--bs-cond); text-transform: uppercase; }
.bs-rec .bs-deck { font: italic 400 19px/1.3 var(--bs-serif); margin: 0 0 10px; color: var(--bs-grey); }
.bs-rec .bs-cols { column-gap: 18px; column-rule: 1px solid var(--bs-rule); text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.bs-rec .bs-c2 { column-count: 2; }
.bs-rec .bs-c3 { column-count: 3; }
.bs-rec .bs-cols p { margin: 0 0 .6em; text-indent: 1.2em; }
.bs-rec .bs-cols p.bs-ni { text-indent: 0; }
.bs-rec .bs-drop::first-letter { float: left; font: 700 3.6em/.8 var(--bs-serif); margin: .06em .06em 0 0; }
.bs-rec .bs-by { font: 500 12px var(--bs-cond); text-transform: uppercase; letter-spacing: .06em; color: var(--bs-grey); margin: 0 0 8px; border-top: 1px solid var(--bs-rule); border-bottom: 1px solid var(--bs-rule); padding: 2px 0; }
.bs-rec .bs-pull { border-top: 3px solid var(--bs-ink); border-bottom: 1px solid var(--bs-ink); margin: 8px 0 12px; padding: 8px 0; font: italic 600 22px/1.2 var(--bs-serif); break-inside: avoid; text-align: left; text-indent: 0; }
.bs-rec .bs-box { border: 1px solid var(--bs-ink); padding: 8px 10px; break-inside: avoid; margin-bottom: 10px; }
.bs-rec .bs-box--red { border-color: var(--bs-red); }
.bs-rec .bs-box .bs-kick { display: block; margin-bottom: 2px; }
.bs-rec .bs-nl { color: var(--bs-grey); font-style: italic; }
.bs-rec .bs-small { font-size: 13px; margin: 6px 0 0; }

/* ---- tables -------------------------------------------------------------- */
.bs-rec .bs-tw { overflow-x: auto; }
.bs-rec table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bs-rec th, .bs-rec td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--bs-rule); vertical-align: top; }
.bs-rec thead th { font: 600 12px var(--bs-cond); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--bs-ink); }
.bs-rec .bs-res { min-width: 420px; }
.bs-rec .bs-ct th a { font: 600 13px var(--bs-cond); text-transform: uppercase; text-decoration: none; }
.bs-rec .bs-ct small { display: block; color: var(--bs-red); font: 500 12px var(--bs-cond); text-transform: uppercase; }
.bs-rec .bs-tags { margin: 0 0 4px; }
.bs-rec .bs-tags a { display: inline-block; margin: 0 6px 2px 0; font: 600 13px var(--bs-cond); text-transform: uppercase; }
.bs-rec .bs-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 2px; }
.bs-rec .bs-chips span { font: 12px ui-monospace, Menlo, monospace; padding: 14px 4px 2px; border: 1px solid var(--bs-ink); flex: 1 1 60px; }

/* ---- briefs (the rules) -------------------------------------------------- */
.bs-rec .bs-brief { border-bottom: 1px solid var(--bs-rule); padding: 6px 0; break-inside: avoid; text-align: left; }
.bs-rec .bs-brief b { font: 600 14px var(--bs-cond); text-transform: uppercase; }
.bs-rec .bs-brief i { display: block; font: 500 12px var(--bs-cond); text-transform: uppercase; color: var(--bs-red); font-style: normal; letter-spacing: .04em; }
.bs-rec .bs-brief p { margin: 2px 0 0; text-indent: 0; }
/* The rules run the full width of the sheet in three ruled columns, so no column of briefs leaves the page beside it empty. */
.bs-rec .bs-rules { margin-top: 6px; }
.bs-rec .bs-brief small { color: var(--bs-grey); font-style: italic; font-size: 13px; }

/* ---- classifieds --------------------------------------------------------- */
.bs-rec .bs-classi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bs-rec .bs-classi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-rec .bs-ad { display: block; border: 2px solid var(--bs-ink); padding: 10px; text-decoration: none; text-align: center; font-size: 14px; line-height: 1.3; color: var(--bs-ink); }
.bs-rec .bs-ad b { display: block; font: 700 20px/1 var(--bs-cond); text-transform: uppercase; margin-bottom: 4px; }
.bs-rec .bs-ad:hover { background: var(--bs-ink); color: var(--bs-paper); }
.bs-rec .bs-mach { font-size: 13px; margin: 8px 0 0; }
.bs-rec .bs-mach b { font-size: 12px; text-transform: uppercase; }

/* ---- folio --------------------------------------------------------------- */
.bs-rec .bs-folio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 14px; padding-top: 6px; border-top: 4px double var(--bs-ink); font: 500 12px var(--bs-cond); text-transform: uppercase; letter-spacing: .05em; }

/* ---- narrower sheets ----------------------------------------------------- */
@media (max-width: 1000px) {
  .bs-rec .bs-front { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-rec .bs-story { grid-column: span 2; border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--bs-ink); padding-top: 10px; }
  .bs-rec .bs-c3 { column-count: 2; }
}
@media (max-width: 640px) {
  .bs-rec .bs-c2, .bs-rec .bs-c3 { column-count: 1; }
  /* The ears carry facts, so they stay: the name leads, the ears sit under it. */
  .bs-hero .bs-mast { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bs-hero .bs-name { grid-column: 1 / -1; order: -1; }
  .bs-hero .bs-ear { max-width: none; }
  .bs-rec .bs-classi, .bs-rec .bs-classi--2 { grid-template-columns: 1fr; }
  .bs-rec .bs-cols { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}