/* ==========================================================================
   AN AUSTRIAN ECONOMIST · V4 · THE FRONT PAGE
   --------------------------------------------------------------------------
   The broadsheet page one, composed on the gazette foundation. Loads after
   gazette-motion.css and writes only into the `page` layer. Every color,
   face, rule and space is a foundation token; nothing here invents a fourth
   rule weight or a sixth face.
   ========================================================================== */

@layer page {

/* --------------------------------------------------------------------------
   Masthead furniture (byline, directory, edition line) now lives in
   gazette.css components: it is the folio's nameplate on every leaf.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Section heads: label · rule · direct. One grammar for the whole page.
   -------------------------------------------------------------------------- */
.secthead {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.secthead__label {
  font-size: var(--type-lg);
  white-space: nowrap;
}
.secthead__rule {
  flex: 1 1 2rem;
  margin-top: 0.4em;
}
.secthead__direct {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--type-small);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 519.9px) {
  .secthead { flex-wrap: wrap; }
  .secthead__label { flex: 1 1 auto; }
  .secthead__rule { order: 3; flex-basis: 100%; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Page one: the lead story and the rail. The rail is a true column with a
   column rule; on narrower sheets it becomes a band beneath the lead.
   -------------------------------------------------------------------------- */
.front { margin-top: var(--flow-band); }
.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow-band);
  margin-top: var(--s-5);
}
.front-lead { container: lead / inline-size; }
@media (min-width: 1000px) {
  .front-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 0; }
  .front-rail {
    border-inline-start: 1px solid var(--paper-line);
    padding-inline-start: var(--s-5);
    margin-inline-start: var(--s-6);
    /* The rail composes to the lead's depth: the certificate absorbs the
       slack with air around its centered quote (the checkpoint's N5
       reading: a taller banknote frame with air inside reads composed),
       so no column ends far before its neighbor. */
    display: flex;
    flex-direction: column;
  }
  .front-rail > .rail-mod:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .front-rail > .rail-mod:first-child .voices-panel {
    flex: 1;
    display: flex;
  }
  .front-rail > .rail-mod:first-child .voices-panel__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* With the archive pointers slimmed (items 24 + 34) the certificate
     absorbs more of the column; the voice steps up a register at the
     width where its frame grew, so the feature fills its own deed panel
     instead of floating in it (the endorsed N5 air, kept in proportion). */
  .front-rail > .rail-mod:first-child .voices-quote__text {
    font-size: var(--type-lg);
    line-height: 1.42;
  }
}

/* ----- The lead story ----- */
.lead-headpiece { margin: var(--s-1) 0 0; }
/* Seats paint their own field so the multiply ink always lands on paper,
   whatever stacking context an engine builds around them. */
.lead-headpiece__frame {
  position: relative;
  background-color: var(--paper);
  background-image: var(--paper-tile);
  background-size: var(--paper-tile-size);
}
.lead-headpiece__frame img {
  width: 100%;
  border: 1px solid var(--paper-line);
}
@media (min-width: 720px) {
  /* The intaglio plate mark: the pressed rectangle around the engraved band. */
  .lead-headpiece__frame::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(107, 90, 62, 0.30);
    pointer-events: none;
  }
}
.lead-headpiece figcaption { margin-top: var(--s-3); }
.lead-headpiece__caption {
  font-family: var(--font-apparatus);
  font-style: italic;
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  color: var(--ink-3);
  text-wrap: pretty;
}
/* The credit sub-line retired (creator ledger item 33, July 2026): the
   claim caption stands alone; provenance lives in the engraving manifest. */

.lead-cat {
  margin-top: var(--s-6);
  font-size: var(--type-small);
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.lead-title { margin-top: var(--s-2); }
.lead-standfirst {
  margin-top: var(--s-3);
  /* ~60ch (was 46rem/~76ch at 768): the standfirst is the last wide-measure
     element on the sheet; capped here it joins the locked reading rhythm
     instead of running a line-length the body never does. */
  max-inline-size: 34rem;
  font-family: var(--font-text);
  font-size: var(--type-md);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}
.lead-pub {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.lead-cols {
  margin-top: var(--s-4);
  max-inline-size: none;             /* the columns keep their own measure */
}
.lead-cols p {
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
@container lead (min-width: 37.5rem) {
  .lead-cols {
    columns: 2;
    column-gap: var(--s-6);
    column-rule: 1px solid var(--paper-line);
  }
}
@media (max-width: 479.9px) {
  /* Below 480 the single column rags right; rivers read worse than a rag. */
  .lead-cols p { text-align: left; }
}
.lead-continued {
  margin-top: var(--s-3);
  font-style: italic;
}
.lead-continued a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-text);
  font-size: var(--type-body);
}

/* ----- The rail ----- */
.rail-mod + .rail-mod { margin-top: var(--s-8); }
.rail-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.rail-head__label {
  font-size: var(--type-md);
  white-space: nowrap;
}
.rail-head__rule {
  flex: 1 1 1rem;
  margin-top: 0.35em;
}

/* Voices of the School: the certificate, elevated to the rail's feature
   (creator ledger item 6: the rail carries the Ledger's weight without
   it). The double hairline frame holds a panel printed on the deeper
   certificate stock (.band in the markup), opened by the engraved
   swelled rule; the quote steps up half a register. */
.voices-panel {
  margin-top: var(--s-4);
  border: 1px solid var(--paper-line);
  padding: 3px;
}
.voices-panel__inner {
  border: 1px solid var(--paper-line);
  padding: var(--s-6) var(--s-4) var(--s-1);
  text-align: center;
}
/* The certificate opens with the asterism (a swelled rule at stub width
   squeezes its burin noise into a blob: the N1 lesson at panel scale). */
.voices-panel__open {
  margin: 0 0 var(--s-4);
  line-height: 1;
}
.voices-panel__open .orn--asterism { font-size: 1.35rem; }
/* The certificate reserves one size for every voice (creator ledger item
   20, July 2026): all quotes stack in a single grid cell, the hidden ones
   kept in layout as invisible ink, so the panel is sized by the LONGEST
   quote at every width and never moves between turns. The hidden attribute
   stays for AT semantics; visibility carries the layout reservation. */
.voices-quotes {
  display: grid;
}
.voices-quote {
  grid-area: 1 / 1;
  align-self: center;
}
.voices-quote[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
}
/* The turn is an analog cross-dissolve (item 21): the leaving voice recedes
   quickly, the arriving one settles in over it with a breath's delay, ink
   meeting paper rather than a snap. Reduced motion turns instantly (the
   utilities-layer kill collapses these transitions). */
@media (prefers-reduced-motion: no-preference) {
  .voices-quote {
    transition:
      opacity 340ms var(--ease-out) 90ms,
      transform 340ms var(--ease-out) 90ms,
      visibility 0s 90ms;
  }
  .voices-quote[hidden] {
    transform: translateY(4px);
    transition:
      opacity 200ms var(--ease-in),
      transform 200ms var(--ease-in),
      visibility 0s 200ms;
  }
}
.voices-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
/* The opening mark hangs in the margin (QC refinement R2, July 2026): the
   compositor's tell of a hand-set page. The span's negative start-margin
   equals the mark's own advance (probed 0.42em in Playfair italic), so the
   centered first line is MEASURED without the mark: the words center
   optically and the mark stands outside them. Engines that hang punctuation
   natively do it themselves; the margin then resets so nothing double-hangs.
   The mark clears at most ~12px into the panel's 24px inline padding. */
.voices-quote__mark { margin-inline-start: -0.42em; }
@supports (hanging-punctuation: first) {
  .voices-quote__text { hanging-punctuation: first; }
  .voices-quote__mark { margin-inline-start: 0; }
}
.voices-quote__attr {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}
.voices-nums {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: var(--s-2);
}
.voices-nums[hidden] { display: none; }
.voices-num {
  min-width: 44px;
  min-height: 44px;
  position: relative;
  font-family: var(--font-text);
  font-size: 1.125rem;
  color: var(--ink-3);
}
.voices-num:hover { color: var(--ink); }
.voices-num[aria-pressed="true"] { color: var(--gold-deep); }
.voices-num[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 9px;
  width: 1.3em;
  height: 2px;
  background: var(--gold);
}

/* The Ledger module retired (creator ledger item 6, July 2026); its data
   file stays on disk, unused, for a possible future home. */

/* The archive pointers. */
.recent-list { margin-top: var(--s-4); }
.recent-item + .recent-item {
  border-top: 1px dotted var(--paper-line);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
}
.recent-item__meta {
  font-size: var(--type-caption);
  color: var(--ink-3);
}
.recent-item__title {
  margin-top: var(--s-1);
  font-size: var(--type-md);
}
.recent-item__link {
  color: inherit;
  text-decoration: none;
  position: relative;
  /* Touch floor (checkpoint N6): pad the hit area to exactly 44px effective
     without moving the type; the negative margin returns the space. */
  --touch-pad: max(0.2em, calc((44px - 1lh) / 2));
  display: inline-block;
  padding-block: var(--touch-pad);
  margin-block: calc(-1 * var(--touch-pad));
}
.recent-item__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  /* The ink rule hugs the title's own baseline zone (creator ledger item
     22, July 2026): the anchor's box is padded to the 44px touch floor, so
     a box-bottom offset drew the rule ~10px below the words, nearly
     touching the next line. Anchor it above the padding instead; the
     0.12em clears the descenders without drifting toward the line below. */
  bottom: calc(var(--touch-pad) - 0.12em);
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.recent-item__link:hover::after,
.recent-item__link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .recent-item__link::after { transition: transform var(--dur-ui) var(--ease-out); }
}
/* Each pointer's short description returned at the creator's asking (July
   2026): the essay's own deck line, lifted verbatim from V3's essay list,
   set quiet in the apparatus italic under the title and held to the
   two-line budget the creator fixed. The clamp below is the no-JS floor
   (its engine ellipsis can cut mid-word); js/front-page.js re-cuts the
   printed span to a whole-word ellipsis, and the visually-hidden sibling
   keeps the full deck for assistive tech. The tag eyebrows (item 24) and
   the epigraph quotes (item 34) stay retired; the epigraph mini-grammar
   survives in the catalogue, where the full entry earns it. */
.recent-item__desc {
  margin-top: var(--s-1);
  font-style: italic;
}
.recent-item__desc-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The subject index: the catalogue's filing register in rail form, each
   head with its count in old-style figures, each row opening the
   catalogue with that drawer already pulled. */
.subject-index {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}
.subject-index li + li { border-top: 1px dotted var(--paper-line); }
.subject-index__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
  padding-block: 0.55rem;
  text-decoration: none;
  color: var(--ink-2);
}
.subject-index__name {
  font-size: var(--type-body);
  letter-spacing: 0.05em;
}
.subject-index__row:hover .subject-index__name,
.subject-index__row:focus-visible .subject-index__name { color: var(--gold-deep); }
.subject-index__count {
  font-family: var(--font-text);
  font-variant-numeric: oldstyle-nums;
  font-size: var(--type-body);
  color: var(--ink-3);
}

/* The rail's bottom line: a ruled direct to the catalogue. */
.rail-foot { margin-top: var(--s-5); }
.rail-foot__rule { margin-bottom: var(--s-1); }
.rail-foot__direct {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-kicker);
}

/* The rail as a band between 700 and 1000: the certificate and the
   archive pointers abreast, the subject index running full width beneath
   with its heads two by two. Voices stretches to its neighbor's height
   with the quote centered (checkpoint N5): a taller banknote frame with
   air inside it reads as composed. */
@media (min-width: 700px) and (max-width: 999.9px) {
  .front-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--flow-band) var(--s-8);
    align-items: stretch;
  }
  .rail-mod + .rail-mod { margin-top: 0; }
  .front-rail > .rail-mod:nth-child(3) { grid-column: 1 / -1; }
  .front-rail > .rail-mod:first-child { display: flex; flex-direction: column; }
  .front-rail > .rail-mod:first-child .voices-panel { flex: 1; display: flex; margin-top: var(--s-4); }
  .front-rail > .rail-mod:first-child .voices-panel__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .subject-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-8);
  }
  .subject-index li + li { border-top: 0; }
  .subject-index li { border-bottom: 1px dotted var(--paper-line); }
}

/* At 1000-1239 the rail is at its narrowest against a tall lead, and the
   deed panel was holding ALL of the column's slack: air 431px above and
   414px below a 222px quote verged on vacant (QC refinement R5, July 2026,
   the critic's preferred non-asset option). In that band only, the subject
   index shares the slack, certificate weighted ~2.4:1: the deed stays the
   feature, and the filing register opens out like a ledger with room left
   between its entries. From 1240 up the certificate's air returns to the
   endorsed banknote proportion untouched. */
@media (min-width: 1000px) and (max-width: 1239.9px) {
  .front-rail > .rail-mod:first-child { flex: 2.4 1 auto; }
  .front-rail > .rail-mod:nth-child(3) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .front-rail > .rail-mod:nth-child(3) .subject-index {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .front-rail > .rail-mod:nth-child(3) .subject-index li {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Plate of the Week: the standing plate feature (creator item 38; strings
   copy deck §13). One of the house's built information plates, brought out
   of its essay and laid on a band display board beside a detail column,
   with a direct that lands on the plate's own place in its leaf.

   CONSTANCY (the item-38 hard rule: the section may not move when the
   plate is swapped). Two mechanisms hold the shape:
   1. The well is a display board of fixed height per breakpoint (24rem
      under 540, 30rem to 1179.9; at >=1180 both columns stretch to the
      row height the ghost specimen sets), and the plate composes INSIDE
      it, contain-fashion: the svg root gets width and height 100% (the
      !important overrides the master's inline style so a swap pastes the
      plate untouched) and its own preserveAspectRatio="xMidYMid meet"
      letterboxes the drawing. Any plate of any aspect sits centered on
      the same board; the air is board, not void.
   2. The detail column stacks an aria-hidden CEILING SPECIMEN in the same
      grid cell (the Voices reserve-one-size precedent, item 20): the
      inaugural 117-word calibration block (deck §13.3) plus a two-line
      cushion, under a 29-character title line. The column always sizes
      to the ceiling, so a swapped block (80-120 words) breathes or fills
      but never moves the page, and the direct rides the cell's floor.
   -------------------------------------------------------------------------- */
.potw { margin-top: var(--flow-section); }
.potw__open { margin-bottom: var(--s-4); }
.potw__dek {
  margin-top: var(--s-3);
  max-inline-size: 46rem;
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--type-md);
  line-height: 1.5;
  color: var(--ink-2);
}

.potw-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-6);
}

/* The display board: band stock in a hairline frame. The plate carries its
   own cream sheet, so on the deeper stock it reads as a print laid out on
   the counter, whatever its shape. The mat is a thin reveal (creator fill
   ruling, July 2026: the print fills the frame with authority; the sheet's
   own margins supply the rest of the air), and on the stacked band the
   board is capped at 40rem and centered, so the frame keeps company with
   the print instead of running the full counter. The cap is plate-blind:
   at the 30rem board height it still lets a landscape plate (4:3 and
   taller) sit height-bound, so no swap is disadvantaged, and neither mat
   nor cap touches the fixed board heights. */
.potw-well {
  margin: 0;
  height: 24rem;
  border: 1px solid var(--paper-line);
  padding: clamp(var(--s-2), 1.2vw, var(--s-3));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Size containment is the whole constancy contract in one declaration:
     the well is sized as if empty, so the pasted plate's intrinsic aspect
     can NEVER feed back into the board's height (without it, the svg's
     aspect box inflates the stretched row at >=1180 and a tall plate
     moves the section: the item-38 defect class, caught by the swap
     proof). The svg then fills the settled box and letterboxes inside. */
  contain: size;
}
.potw-well > svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
@media (min-width: 540px) {
  .potw-well { height: 30rem; }
}
@media (max-width: 1179.9px) {
  /* A definite inline-size, not a max cap: auto margins switch the grid
     item from stretch to shrink-to-fit, and under contain:size that
     shrinks to the empty box. min(100%, 40rem) stays definite. */
  .potw-well { inline-size: min(100%, 40rem); margin-inline: auto; }
}

/* The detail column: real column and ghost specimen share one cell. */
.potw-detail { display: grid; }
/* On the stacked band the detail prints as a centered caption column
   under the centered plate (the instruments idiom: head at the leaf
   edge, matter centered). width:100% up to the cap keeps the real and
   ghost items the same width whatever their content, so the ceiling
   stays exact. */
@media (max-width: 1179.9px) {
  .potw-detail__col,
  .potw-detail__ghost {
    width: 100%;
    max-inline-size: 60ch;
    justify-self: center;
  }
}
.potw-detail__col,
.potw-detail__ghost {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.potw-detail__ghost {
  visibility: hidden;
  pointer-events: none;
}
.potw-detail__source {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  color: var(--gold-deep);
}
.potw-detail__title {
  margin-top: var(--s-2);
  font-size: clamp(1.375rem, 1.29rem + 0.38vw, 1.5625rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.potw-detail__fleuron {
  width: min(9rem, 60%);
  margin-top: var(--s-3);
}
.potw-detail__body {
  margin-top: var(--s-3);
  max-inline-size: 60ch;   /* measure discipline on the wide stacked band;
                              ghost and real share the class, so the
                              ceiling stays honest */
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* The ghost block's line-and-a-half cushion: covers a full 120-word Monday
   (three words past the specimen never costs more than a line). */
.potw-detail__body--ghost { padding-bottom: 2.4em; padding-bottom: 1.5lh; }
/* The direct rides the cell floor; a shorter block breathes above it. */
.potw-detail__direct { margin-top: auto; padding-top: var(--s-4); }
.potw-detail__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--type-plate-label);
  font-weight: 500;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--gold-deep);
}
a.potw-detail__btn:hover { color: var(--gold); }

/* The board splits where both columns earn their width: plate beside the
   column-ruled detail, both stretched to the ghost's row height. */
@media (min-width: 1180px) {
  .potw-board {
    grid-template-columns: minmax(0, 1fr) 30rem;
    gap: 0;
    align-items: stretch;
  }
  .potw-well {
    height: auto;
    min-height: 36rem;
  }
  .potw-detail {
    border-inline-start: 1px solid var(--paper-line);
    padding-inline-start: var(--s-5);
    margin-inline-start: var(--s-6);
  }
}

/* --------------------------------------------------------------------------
   Of the Instruments: the gazette's advertisement column, recomposed for
   weight (creator ledger item 9), recomposed again when the forthcoming
   tracker left the front page (creator item 37, July 2026), then recut
   LOW at the creator's asking (July 2026): the notice prints as the V3
   broadsheet's advertisement strip, the copy at left and the gold ₿ seal
   at right, both centred on the strip's axis inside the double hairline
   frame, the box no taller than its copy asks (V3's strip runs ~215px at
   1400; the tall certificate form ran 555). The stacked centered form
   survives under 720, where V3 itself stacks. The fleuron divider left
   with the height. The two-abreast frame with its column rule and D1/R1
   subgrid register lives in this sheet's history and returns when a
   second instrument enters circulation. The section opens on a hairline:
   the double rule moved up to close page one under the plate feature.
   -------------------------------------------------------------------------- */
.instruments { margin-top: var(--flow-section); }
.instruments__open { margin-bottom: var(--s-4); }

/* One advertisement block: the double hairline frame around the notice. */
.notices {
  width: min(100%, 34rem);
  margin: var(--s-6) auto 0;
  border: 1px solid var(--paper-line);
  padding: 3px;
}
.notices__frame {
  border: 1px solid var(--paper-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.notice__inner {
  height: 100%;
  padding: clamp(var(--s-4), 2.5vw, var(--s-5)) clamp(var(--s-4), 3.5vw, var(--s-8));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* In the stacked form the copy wrapper dissolves into the column. */
.notice__copy { display: contents; }

.notice__seal {
  width: clamp(7rem, 11vw, 8.75rem);
  height: auto;
}
.notice__kicker {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  color: var(--gold-deep);
}
.notice__name {
  margin-top: var(--s-2);
  max-inline-size: 13em;
  font-size: var(--type-xl);
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.notice__body {
  margin-top: var(--s-2);
  max-inline-size: 46ch;
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.notice__direct { margin-top: var(--s-3); }
.notice__direct a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  /* Touch floor (checkpoint N6) without the box: pad the hit area to 44px
     and return the space, so the CTA costs the strip no dead height. The
     ink-in underline rides the .ink span, clear of this padding. */
  --touch-pad: max(0.2em, calc((44px - 1lh) / 2));
  padding-block: var(--touch-pad);
  margin-block: calc(-1 * var(--touch-pad));
}

/* The strip form, >=720: the V3 advertisement economy in the V4 frame.
   Copy column left, seal right, both centred on the strip's axis. */
@media (min-width: 720px) {
  .notices { width: min(100%, 60rem); }
  .notice__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(var(--s-6), 4.5vw, var(--s-10));
    text-align: start;
  }
  .notice__copy { display: block; grid-column: 1; grid-row: 1; }
  .notice__device { grid-column: 2; grid-row: 1; }
  .notice__kicker { margin-top: 0; }
  /* The title takes its own line width; the body sets to the column, two
     lines from ~1000 up (V3's own measure ran ~70ch here). */
  .notice__name { max-inline-size: none; }
  .notice__body { max-inline-size: none; }
}
.instruments__close { margin-top: var(--flow-band); }

} /* @layer page */