/*
 * Transparency register.
 *
 * The page reads as a Stable Tape publication, not as a status console: serif headings, a single
 * measured column, generous space between entries, and no severity colour anywhere. Colour-coding
 * the classifications would sort the entries into good and bad news, which is a judgement the page
 * is not entitled to make — a withdrawal and a date with no fixing are simply two different facts
 * about the record. The label is set in the mono face used elsewhere for record metadata, so it
 * reads as a state and not as an alarm.
 *
 * All colour comes from the theme tokens, so the page follows light and dark with the rest of the
 * site and inherits the same contrast guarantees the accessibility gate checks.
 */

.st-tr-page {
  max-width: 44rem;
  margin: 0 auto;
  /*
   * The site nav is position:fixed, so the top padding clears it before the editorial space begins.
   * Derived from --layout-nav-h rather than from a bare clamp: a viewport-relative value alone
   * collapses at narrow widths, which put the eyebrow underneath the nav bar at 390px.
   */
  padding: calc(var(--layout-nav-h) + clamp(1rem, 4vw, 2.5rem)) var(--layout-gutter) clamp(4rem, 8vw, 6rem);
  color: var(--theme-ink-primary);
}

/* Masthead */

.st-tr-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
  margin: 0 0 0.75rem;
}

.st-tr-masthead h1 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--theme-ink-primary);
}

.st-tr-intro {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--theme-ink-secondary);
  max-width: 34rem;
  margin: 1.25rem 0 0;
}

/* Register */

.st-tr-register {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--theme-rule-standard);
}

.st-tr-entry {
  padding-block: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--theme-rule-subtle);
  /* An entry is a scroll target from another surface, so it keeps clear of the sticky nav when a
     #date link lands on it. Without this the heading sits under the bar and the reader arrives
     looking at the middle of the first paragraph. */
  scroll-margin-top: 5rem;
}

.st-tr-entry:last-child { border-bottom: none; }

.st-tr-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
  margin: 0 0 0.6rem;
}

.st-tr-entry-head h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

/*
 * The date is its own permalink. It is not decorated as a link until the reader goes looking for it:
 * a page whose every heading is blue reads as a directory, and the destination here is the heading
 * the reader is already on.
 */
.st-tr-permalink {
  color: var(--theme-ink-primary);
  text-decoration: none;
}

.st-tr-permalink:hover,
.st-tr-permalink:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-tr-headline {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--theme-ink-secondary);
  margin: 0.65rem 0 0;
}

.st-tr-section { margin-top: 1.9rem; }

.st-tr-section h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
  margin: 0 0 0.7rem;
}

.st-tr-section p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--theme-ink-primary);
  margin: 0 0 0.9rem;
}

.st-tr-section p:last-child { margin-bottom: 0; }

.st-tr-related { margin: 1.7rem 0 0; }

.st-tr-related a,
.st-correction-action a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--theme-ink-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Comfortable target without breaking the underline before the arrow, which is why this is
     inline-block with vertical padding rather than a flex row. */
  display: inline-block;
  padding-block: 9px;
}

.st-tr-related a:hover,
.st-correction-action a:hover { color: var(--theme-ink-link-hover); }

.st-tr-empty {
  font-family: var(--sans);
  color: var(--theme-ink-secondary);
  padding-block: 2rem;
}

/* Correction prompt. Rendered only when the correction channel is live. */

.st-correction {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--theme-rule-standard);
}

.st-correction-prompt {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-ink-primary);
  margin: 0;
}

.st-correction-action { margin: 0.15rem 0 0; }

.st-correction-principle {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
  margin: 0.35rem 0 0;
  max-width: 34rem;
}

@media (max-width: 520px) {
  /* The private 18px inset is gone: the shared gutter is 20px at this width and the page keeps the
     site's edge rather than sitting 2px proud of everything above and below it. */
  .st-tr-section p { font-size: 0.97rem; }
}

/*
 * ───────────────────────────────────────────────────────────────────────────────────────────────
 * Desktop: the same editorial canvas as the homepage.
 *
 * Everything above is the narrow single column, and it stays exactly as it is below 900px. What
 * changes here is geometry only — no copy, no links, no order.
 *
 * The publication canvas is now --layout-box-page with --layout-gutter, published in css/tokens.css
 * from this page and the homepage together; both used to state it as min(100%, 1440px) with 56px
 * gutters in their own stylesheets. The page states the publisher once above a rule, then runs a
 * title row beneath it, so it reads as one publication with the benchmark rather than as a separate
 * document that happens to share a navigation bar.
 *
 * The reading measure is deliberately NOT widened to fill the canvas. Prose stays near 66ch; the
 * extra width goes to a left gutter that carries the section labels, which is what makes the page
 * feel like a wide editorial spread instead of stretched paragraphs. The trailing whitespace to the
 * right of the reading column is intentional margin, not an unfinished layout.
 */
@media (min-width: 900px) {
  .st-tr-page {
    /* The shared canvas: same maximum, same gutters, same centring as every other route. */
    max-width: none;
    width: min(100%, var(--layout-box-page));
    margin-inline: auto;
    /*
     * The fixed-nav clearance plus the canvas's own 42px top inset. Stated as a sum rather than as a
     * single number so the clearance stays visible as clearance: a bare figure here would look like
     * a design value and would be the first thing trimmed by someone tightening the masthead,
     * putting the publisher line back underneath the nav bar.
     */
    padding: calc(var(--layout-nav-h) + 42px) var(--layout-gutter) 96px;
  }

  /*
   * The masthead band. The publisher line sits above a rule that spans the full canvas, exactly as
   * the homepage masthead does, and the title row beneath it carries the page title on the left with
   * its standfirst set to the right — the homepage's h1-left / meta-right arrangement.
   *
   * Done as a grid over the existing elements so the markup, and therefore the copy and its order,
   * are untouched.
   */
  .st-tr-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30rem;
    column-gap: 48px;
    align-items: end;
  }

  .st-tr-eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--theme-rule-strong);
  }

  .st-tr-masthead h1 {
    grid-column: 1;
    font-size: clamp(3.5rem, 5vw, 4.75rem);
    letter-spacing: -0.021em;
    line-height: 0.95;
    padding-top: 12px;
  }

  /* The standfirst becomes the right-hand column of the title row rather than a block beneath it. */
  .st-tr-intro {
    grid-column: 2;
    max-width: none;
    margin: 0;
    padding-bottom: 6px;
  }

  .st-tr-register {
    margin-top: 56px;
    border-top: 1px solid var(--theme-rule-strong);
  }

  .st-tr-entry {
    padding-block: 52px;
  }

  /*
   * Side-heads. The section label moves into a 15.5rem left gutter — the same measure the homepage
   * publication register uses for its own labels — leaving the prose in a column of its own. This is
   * the whole reason the page can occupy a 1440px canvas without the paragraphs growing: the width
   * is spent on structure, not on line length.
   */
  .st-tr-entry-head,
  .st-tr-section,
  .st-tr-related {
    display: grid;
    grid-template-columns: var(--layout-sidehead) minmax(0, 66ch);
    column-gap: var(--layout-sidehead-gap);
  }

  .st-tr-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 10px;
  }

  .st-tr-entry-head h2,
  .st-tr-headline {
    grid-column: 2;
  }

  .st-tr-entry-head h2 { font-size: clamp(1.9rem, 2.4vw, 2.35rem); }

  .st-tr-section { margin-top: 2.4rem; }

  .st-tr-section h3 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 5px;
  }

  .st-tr-section p { grid-column: 2; }

  /* Keeps the outbound link on the reading column rather than under the gutter labels. */
  .st-tr-related > a { grid-column: 2; }

  .st-correction {
    display: grid;
    grid-template-columns: var(--layout-sidehead) minmax(0, 66ch);
    column-gap: var(--layout-sidehead-gap);
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--theme-rule-strong);
  }

  .st-correction-prompt { grid-column: 1; grid-row: 1; margin: 0; padding-top: 1px; }
  .st-correction-action,
  .st-correction-principle { grid-column: 2; }
  .st-correction-action { margin: 0; }
  .st-correction-principle { max-width: none; }
}