/* ==========================================================================
   BROADSHEET — Build with it (Design Completion Campaign, 2026-09-29).
   A section of the same front: printed inside .bs-rec under the strap (the
   record marks the place), flagged between double rules, fields as stories
   on the six-column grid with hairlines between them. Faces are the room's
   own ("FrankRuhlX", "OswaldX", declared in x-broadsheet.css). Ink on
   newsprint, with the room's one red (a translation) on kickers and focus. Classes are gbs- or scoped to .gm--broadsheet. Nothing moves.
   ========================================================================== */
.gm--broadsheet {
  --gm-tag-inverse: var(--gm-color-newsprint);
  max-width: none; margin: 10px 0 0; padding: 0 0 12px;
  background: transparent; color: var(--gm-color-ink);
  font: 400 16px/1.45 var(--gm-font);
  border-bottom: 4px double var(--gm-color-ink);
}
.gm--broadsheet .gm__head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px 24px; margin: 0 0 10px; padding: 8px 0 10px; border-bottom: 1px solid var(--gm-color-ink); }
.gm--broadsheet .gm__title { font: 600 clamp(28px, 3.4vw, 44px)/1 var(--gm-font-cond); text-transform: uppercase; }
.gm--broadsheet .gm__title::before { content: "Section B"; display: block; margin-bottom: 4px; font: 500 12px/1.2 var(--gm-font-cond); letter-spacing: 0.06em; }
.gm--broadsheet .gm__lede { font: italic 400 18px/1.3 var(--gm-font); color: var(--gm-color-grey); }
.gm--broadsheet .gm__key, .gm--broadsheet .gm__get { font-size: 13px; color: var(--gm-color-grey); opacity: 1; }
.gm--broadsheet .gm__get a, .gm--broadsheet a { color: var(--gm-color-ink); }
.gm--broadsheet .gm-t { font: 500 11px/1.6 var(--gm-font-cond); text-transform: uppercase; letter-spacing: 0.04em; }
.gm--broadsheet .gm-t[data-g="translation"] { color: var(--gm-color-ink); }
.gm--broadsheet .gm-more summary { font: 500 12px/1.2 var(--gm-font-cond); text-transform: uppercase; letter-spacing: 0.06em; min-height: 44px; display: flex; align-items: center; }
.gm--broadsheet .gm-ls { font-size: 14px; }
.gm--broadsheet .gm-gap, .gm--broadsheet .gm-f__note { color: var(--gm-color-grey); opacity: 1; font-style: italic; font-size: 14px; }
.gm--broadsheet :focus-visible { outline: 2px solid var(--gm-color-red); outline-offset: 2px; }
.gm--broadsheet .gm__title::before, .gbs-red, .gbs-f .gm-f__n { color: var(--gm-color-red); }

/* the fields as stories on the grid */
.gbs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gbs-f { min-width: 0; padding: 0 12px 14px; border-left: 1px solid var(--gm-color-rule); }
.gbs-s2 { grid-column: span 2; } .gbs-s3 { grid-column: span 3; } .gbs-s4 { grid-column: span 4; } .gbs-s6 { grid-column: span 6; }
.gbs-grid > .gbs-f:first-child, .gbs-f.gbs-s6, .gbs-grid > .gbs-s3:nth-child(3), .gbs-grid > .gbs-s2:nth-child(6) { border-left: 0; padding-left: 0; }
.gbs-grid > .gbs-f:nth-child(n+3) { border-top: 1px solid var(--gm-color-ink); padding-top: 10px; }
.gbs-f .gm-f__head { gap: 8px; margin-bottom: 6px; }
.gbs-f .gm-f__n { font: 500 12px/1 var(--gm-font-cond); letter-spacing: 0.06em; }
.gbs-f .gm-f__name { font: 600 22px/1.02 var(--gm-font-cond); text-transform: uppercase; }
.gbs-cap { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--gm-color-grey); }

.gbs-dummy { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: 6px 0; height: 120px; border: 1px solid var(--gm-color-ink); padding: 6px; }
.gbs-dummy > span { display: flex; flex-direction: column; gap: 5px; padding: 0 5px; border-left: 1px solid var(--gm-color-rule); }
.gbs-dummy i { display: block; height: 4px; background: var(--gm-color-ink); opacity: 0.55; }
.gbs-dummy i:first-child { height: 9px; opacity: 1; }
.gbs-d-lead { grid-column: span 4; border-left: 0 !important; }
.gbs-d-lead i:first-child { height: 16px; }
.gbs-d-side { grid-column: span 2; }
.gbs-d-a, .gbs-d-b, .gbs-d-c { grid-column: span 2; border-top: 1px solid var(--gm-color-ink); padding-top: 5px !important; }
.gbs-d-a { border-left: 0 !important; }

.gbs-sws { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.gbs-sws li { display: flex; align-items: center; gap: 8px; }
.gbs-sws span { width: 26px; height: 18px; border: 1px solid var(--gm-color-ink); flex: none; }
.gbs-sws code { font: 12px ui-monospace, Menlo, monospace; color: var(--gm-color-grey); }

.gbs-kick { display: block; margin: 0; font: 500 var(--gm-size-kicker)/1.2 var(--gm-font-cond); letter-spacing: 0.06em; text-transform: uppercase; }
.gbs-head { display: block; margin: 2px 0 4px; font: 600 var(--gm-size-head)/var(--gm-leading-head) var(--gm-font-cond); text-transform: uppercase; }
.gbs-text { display: block; margin: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.gbs-rules span { display: block; margin: 0 0 12px; }
.gbs-r-dbl { border-top: 4px double var(--gm-color-ink); }
.gbs-r-ink { border-top: 1px solid var(--gm-color-ink); }
.gbs-r-hair { border-top: 1px solid var(--gm-color-rule); }

.gbs-nav { display: flex; flex-wrap: wrap; gap: 0 18px; border-block: 1px solid var(--gm-color-ink); }
.gbs-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1 var(--gm-font-cond); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
.gbs-nav a:hover { text-decoration: underline; }
.gbs-nav a[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gbs-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.gbs-story { display: block; padding-right: 12px; text-decoration: none; color: var(--gm-color-ink); border-bottom: 1px solid var(--gm-color-rule); padding-bottom: 8px; }
.gbs-story:hover .gbs-head { text-decoration: underline; }
.gbs-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; padding-left: 12px; border-left: 1px solid var(--gm-color-rule); }
.gbs-form label { flex-basis: 100%; font: 500 12px/1.2 var(--gm-font-cond); text-transform: uppercase; letter-spacing: 0.06em; }
.gbs-form input { flex: 1 1 10rem; min-width: 0; height: 2.75rem; border: 0; border-bottom: 1px solid var(--gm-color-ink); border-radius: 0; background: transparent; color: var(--gm-color-ink); }
.gbs-form input:focus-visible { border-bottom-width: 2px; }
.gbs-btn { min-height: 44px; padding: 0 18px; border: 2px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-newsprint); color: var(--gm-color-ink); font: 700 18px/1 var(--gm-font-cond) !important; text-transform: uppercase; cursor: pointer; }
.gbs-btn:hover, .gbs-btn:active { background: var(--gm-color-ink); color: var(--gm-color-newsprint); }
.gbs-btn:active { border-style: double; border-width: 4px; }
.gbs-still { margin: 0; font: 600 22px/1.05 var(--gm-font-cond); text-transform: uppercase; }
.gbs-fold { display: grid; grid-template-columns: 1fr 1fr; height: 90px; width: 110px; border: 1px solid var(--gm-color-ink); }
.gbs-fold span + span { border-left: 1px dashed var(--gm-color-ink); }

@media (max-width: 1000px) {
  .gbs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gbs-grid > .gbs-f { grid-column: span 2; border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--gm-color-ink); padding-top: 10px; }
  .gbs-grid > .gbs-f:first-child { border-top: 0; }
}
@media (max-width: 640px) {
  .gm--broadsheet .gm__head { grid-template-columns: 1fr; }
  .gbs-ui { grid-template-columns: 1fr; gap: 12px; }
  .gbs-form { padding-left: 0; border-left: 0; }
  .gbs-text { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}