/* ==========================================================================
   SWISS STYLE — A SECOND READING. Loaded on a/swiss-style-b.html only.

   The record as a working drawing. One visible twelve-column module field
   runs the canvas; blocks sit on whole modules and carry their address in
   the apparatus voice. Three sizes (17 / 13 / 24 px), two weights (400 /
   700), flush left, ragged right, hyphens off; rank comes from position,
   weight and the interval above a block — never from scale. One flat
   functional ultramarine (hue free by the record's own rule).

   Hairlines separate grid fields — the one use the record permits them.
   The typeface is a class: a neutral grotesque, supplied by the machine.
   ========================================================================== */

.sb-page {
  --sb-paper: #F4F4F1;
  --sb-ink: #101112;      /* 16.9:1 */
  --sb-ink-2: #45484B;    /*  8.1:1 */
  --sb-hair: #C9C9C3;
  --sb-blue: #1D3FBF;     /*  7.6:1 on paper. Free hue; ours */
  --sb-grot: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", system-ui, sans-serif;
  /* the three sizes */
  --sb-a: 1.0625rem;  /* text and headings: 17px */
  --sb-b: 0.8125rem;  /* captions, tables, meta: 13px */
  --sb-c: 1.5rem;     /* the one larger step: 24px */
  --sb-gut: 1rem;
  background: var(--paper); /* shell mat */
}
.sb-page main { background: var(--sb-paper); color: var(--sb-ink); font-family: var(--sb-grot); }
.sb-wrap { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.sb { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.sb a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sb em { font-style: normal; font-weight: 700; }

/* ---- the visible construction ------------------------------------------- */
.sb-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sb-gut);
  /* rank comes partly from interval: the row gap is the page's one large
     rhythm unit, and blocks add nothing above themselves */
  row-gap: clamp(3rem, 7vw, 5.5rem);
  align-items: start;
}
.sb-gridlines {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sb-gut);
  pointer-events: none;
}
.sb-gridlines i { border-inline: 1px solid var(--sb-hair); min-height: 100%; }

.sb-blk { grid-column: var(--c) / span var(--w); position: relative; background: var(--sb-paper); padding-block: 0.25rem; }
.sb-addr { margin: 0 0 0.9rem; font: 400 0.75rem/1.4 var(--mono); color: var(--ink-3); }

@media (max-width: 52rem) {
  .sb-board { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .sb-gridlines { display: none; }
  .sb-blk { grid-column: auto; }
}

/* ---- the three sizes ------------------------------------------------------ */
.sb-kicker { margin: 0 0 1.1rem; font-size: var(--sb-b); font-weight: 400; color: var(--sb-ink-2); }
.sb-t1 { margin: 0 0 1rem; font-size: var(--sb-c); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sb-t1--h { font-size: var(--sb-a); }  /* section heads rank by position, not size */
.sb-body { margin: 0 0 0.9rem; font-size: var(--sb-a); font-weight: 400; line-height: 1.6; max-width: 62ch; text-align: left; hyphens: none; }
.sb-body:last-child { margin-bottom: 0; }
.sb-caption { margin: 0 0 0.7rem; font-size: var(--sb-b); font-weight: 400; line-height: 1.6; color: var(--sb-ink-2); max-width: 68ch; }
.sb-caption b { font-weight: 700; color: var(--sb-ink); }
.sb-caption:last-child { margin-bottom: 0; }
.sb-meta { margin: 0.6rem 0 0; font-size: var(--sb-b); color: var(--sb-ink-2); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sb-caption .ours, .sb-body .ours { color: var(--sb-blue); }

/* ---- corrections table ----------------------------------------------------- */
.sb-corr { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sb-hair); }
.sb-corr__row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 0.4rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--sb-hair); }
.sb-corr__n { font: 400 0.75rem/1.6 var(--mono); color: var(--ink-3); }
.sb-corr__q { font-size: var(--sb-a); font-weight: 700; line-height: 1.45; }
.sb-corr__a { font-size: var(--sb-a); line-height: 1.6; }
.sb-corr__meta { justify-self: end; }
@media (max-width: 52rem) {
  .sb-corr__row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .sb-corr__a, .sb-corr__meta { grid-column: 2; justify-self: start; }
}

/* ---- rules ----------------------------------------------------------------- */
.sb-group { margin-block-end: 1.8rem; }
.sb-group:last-child { margin-block-end: 0; }
.sb-group__name { margin: 0 0 0.3rem; font-size: var(--sb-a); font-weight: 700; }
.sb-group__name .ours { color: var(--sb-blue); }
.sb-group__count { font: 400 0.75rem/1 var(--mono); color: var(--ink-3); font-weight: 400; margin-inline-start: 0.4rem; }
.sb-rules { list-style: none; margin: 0.6rem 0 0; padding: 0; border-top: 1px solid var(--sb-hair); }
.sb-rule { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) minmax(11rem, auto); gap: 0.3rem 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--sb-hair); }
.sb-rule__n { font: 400 0.75rem/1.6 var(--mono); color: var(--ink-3); }
.sb-rule__text { font-size: var(--sb-a); line-height: 1.55; max-width: 70ch; }
.sb-rule__text .ours { color: var(--sb-blue); }
.sb-rule__note { display: block; font-size: var(--sb-b); line-height: 1.6; color: var(--sb-ink-2); }
.sb-rule__meta { font-size: var(--sb-b); color: var(--sb-ink-2); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; justify-content: flex-end; text-align: right; }
@media (max-width: 52rem) {
  .sb-rule { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .sb-rule__meta { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* ---- areas ------------------------------------------------------------------ */
.sb-areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sb-hair); }
.sb-area { display: grid; grid-template-columns: 2.2rem minmax(7rem, 0.8fr) minmax(0, 1.6fr) auto; gap: 0.3rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--sb-hair); }
.sb-area__n { font: 400 0.75rem/1.6 var(--mono); color: var(--ink-3); }
.sb-area__name { font-size: var(--sb-a); font-weight: 700; }
.sb-area__state { font-size: var(--sb-a); line-height: 1.5; }
.sb-area__meta { justify-self: end; }
.sb-area[data-tone="excluded"] .sb-area__state { font-weight: 700; }
@media (max-width: 52rem) {
  .sb-area { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .sb-area__state, .sb-area__meta { grid-column: 2; justify-self: start; }
}

/* ---- the one colour field ---------------------------------------------------- */
.sb-blk--field .sb-field { height: 9.5rem; background: var(--sb-blue); margin-block-end: 0.9rem; }

/* ---- works -------------------------------------------------------------------- */
.sb-works { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--sb-hair); }
.sb-work { display: grid; grid-template-columns: 2.2rem minmax(0, 1.7fr) minmax(0, 1fr); gap: 0.3rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--sb-hair); }
.sb-work__n { font: 400 0.75rem/1.6 var(--mono); color: var(--ink-3); }
.sb-work__id { font-size: var(--sb-a); line-height: 1.55; }
.sb-work__id cite { font-style: normal; font-weight: 700; }
.sb-work__meta { font-size: var(--sb-b); color: var(--sb-ink-2); }
@media (max-width: 52rem) {
  .sb-work { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .sb-work__meta { grid-column: 2; }
}

/* Apparatus disclosures inline in tables should not add box padding noise. */
.sb .ex-more { display: inline-block; margin: 0 0 0 0.5rem; vertical-align: baseline; }
.sb .ex-more__body { margin-top: 0.4rem; }