/* Plus234Feed design system: editorial components.
   Plain CSS on top of tokens.css and type.css. No framework, no build step.
   Every rule here reads a token. A raw colour or font-size in this file is a bug. */

/* --- focus -------------------------------------------------------------
   One focus style for the whole site. The amber needs the outer ring on a
   light page; on a dark page the outer ring recedes and the amber carries it. */
.p234 :focus-visible,
.p234-focusable:focus-visible {
  outline: 3px solid var(--p234-color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--p234-color-focus-outer);
  border-radius: var(--p234-radius-sm);
}

/* --- rules -------------------------------------------------------------
   An editorial page separates with rules, not cards and shadows. */
.p234-rule {
  border: 0;
  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
  margin: var(--p234-space-6) 0;
}
.p234-rule--section {
  border-top-width: var(--p234-border-thick);
  border-top-color: var(--p234-color-rule-strong);
}
.p234-rule--masthead {
  border-top-width: var(--p234-border-heavy);
  border-top-color: var(--p234-color-ink);
}

/* --- kicker ------------------------------------------------------------
   The section label above a headline. Carries the only section colour on the
   card, which is why section colours are never backgrounds. */
.p234-kicker {
  font-family: var(--p234-type-kicker-family);
  font-size: var(--p234-type-kicker-size);
  line-height: var(--p234-type-kicker-leading);
  font-weight: var(--p234-type-kicker-weight);
  letter-spacing: var(--p234-type-kicker-tracking);
  text-transform: var(--p234-type-kicker-case);
  color: var(--p234-color-brand);
  display: block;
  margin-bottom: var(--p234-space-3);
}
.p234-kicker[data-section="politics"] { color: var(--p234-color-section-politics); }
.p234-kicker[data-section="business"] { color: var(--p234-color-section-business); }
.p234-kicker[data-section="markets"]  { color: var(--p234-color-section-markets); }
.p234-kicker[data-section="world"]    { color: var(--p234-color-section-world); }
.p234-kicker[data-section="sport"]    { color: var(--p234-color-section-sport); }

/* --- story -------------------------------------------------------------
   One component, four densities. This replaces the 47 files that each
   re-implement an article card. */
.p234-story {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-block: var(--p234-space-5);
  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
}
.p234-story:first-child { border-top: 0; padding-top: 0; }

.p234-story__headline {
  font-family: var(--p234-type-headline-sm-family);
  font-size: var(--p234-type-headline-sm-size);
  line-height: var(--p234-type-headline-sm-leading);
  font-weight: var(--p234-type-headline-sm-weight);
  letter-spacing: var(--p234-type-headline-sm-tracking);
  color: var(--p234-color-ink);
  margin: 0;
  text-wrap: balance;
}
.p234-story:hover .p234-story__headline { text-decoration: underline; text-underline-offset: 2px; }
.p234-story:visited .p234-story__headline { color: var(--p234-color-link-visited); }

.p234-story__standfirst {
  font-family: var(--p234-type-body-sm-family);
  font-size: var(--p234-type-body-sm-size);
  line-height: var(--p234-type-body-sm-leading);
  color: var(--p234-color-ink-muted);
  max-width: var(--p234-measure-narrow);
  margin: var(--p234-space-3) 0 0;
}

.p234-story--lead .p234-story__headline {
  font-size: var(--p234-type-display-1-size);
  line-height: var(--p234-type-display-1-leading);
  letter-spacing: var(--p234-type-display-1-tracking);
}
.p234-story--lead .p234-story__standfirst {
  font-family: var(--p234-type-standfirst-family);
  font-size: var(--p234-type-standfirst-size);
  line-height: var(--p234-type-standfirst-leading);
  color: var(--p234-color-ink);
  max-width: var(--p234-measure-text);
}
.p234-story--secondary .p234-story__headline {
  font-size: var(--p234-type-headline-size);
  line-height: var(--p234-type-headline-leading);
  letter-spacing: var(--p234-type-headline-tracking);
}
.p234-story--compact {
  padding-block: var(--p234-space-4);
}
.p234-story--compact .p234-story__headline {
  font-size: var(--p234-type-headline-xs-size);
  line-height: var(--p234-type-headline-xs-leading);
}
.p234-story--compact .p234-story__standfirst { display: none; }

/* --- story media -------------------------------------------------------
   Most story cards on the site carry a picture. The image is a child of the
   story, not a separate component, so the two cannot drift apart. */
.p234-story__media {
  display: block;
  width: 100%;
  aspect-ratio: var(--p234-figure-ratio);
  object-fit: cover;
  background: var(--p234-color-paper-sunk);
  border-radius: var(--p234-radius-sm);
  margin-bottom: var(--p234-space-4);
}

/* Card: picture on top, headline under it. The homepage grid. */
.p234-story--card { display: flex; flex-direction: column; }

/* Thumb: picture beside the headline, for dense lists and rails. The image
   comes second in the markup so the headline is read first, and is pulled
   back into place visually. */
.p234-story--thumb { display: grid; grid-template-columns: 1fr 5.5rem; gap: var(--p234-space-4); align-items: start; }
.p234-story--thumb .p234-story__media { grid-column: 2; grid-row: 1 / span 3; margin-bottom: 0; }
.p234-story--thumb .p234-story__standfirst { display: none; }

/* Lead with a picture: the image sits above the headline at full width. */
.p234-story--lead .p234-story__media { margin-bottom: var(--p234-space-5); }

/* --- avatar ------------------------------------------------------------
   A person: a legislator, a candidate, an author. */
.p234-avatar {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--p234-radius-pill);
  object-fit: cover;
  background: var(--p234-color-paper-sunk);
  flex-shrink: 0;
}
.p234-avatar--sm { width: 1.75rem; height: 1.75rem; }
.p234-avatar--lg { width: 5rem; height: 5rem; }
.p234-avatar--xl { width: 8rem; height: 8rem; }
/* Initials when there is no photograph, which is common for newer members. */
.p234-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--p234-type-ui-family);
  font-weight: 700;
  color: var(--p234-color-ink-muted);
  background: var(--p234-color-paper-sunk);
}

/* --- logo --------------------------------------------------------------
   A company, a team, a publisher. Square, contained, never cropped: a
   cropped logo is a different logo. */
.p234-logo {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  background: var(--p234-color-paper-sunk);
  border-radius: var(--p234-radius-sm);
  padding: 2px;
  flex-shrink: 0;
}
.p234-logo--lg { width: 3rem; height: 3rem; }

/* --- meta and coverage -------------------------------------------------
   Source, timestamp, and the number of outlets carrying the story. The
   coverage count is the one thing an aggregator can say that a single
   publisher cannot, so it is a first-class part of the card. */
.p234-meta {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  line-height: var(--p234-type-meta-leading);
  color: var(--p234-color-ink-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p234-space-3);
  margin-top: var(--p234-space-3);
}
.p234-meta__dot { color: var(--p234-color-rule-strong); }
.p234-meta__source { font-weight: 600; color: var(--p234-color-ink); }

.p234-coverage {
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  color: var(--p234-color-brand);
  border: var(--p234-border-hairline) solid var(--p234-color-brand);
  border-radius: var(--p234-radius-pill);
  padding: 1px var(--p234-space-3);
  white-space: nowrap;
}

/* --- tag ---------------------------------------------------------------
   The only pill-shaped thing in the system. */
.p234-tag {
  display: inline-block;
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: var(--p234-type-ui-sm-weight);
  color: var(--p234-color-ink);
  background: var(--p234-color-paper-sunk);
  border-radius: var(--p234-radius-pill);
  padding: var(--p234-space-2) var(--p234-space-4);
  text-decoration: none;
}
.p234-tag[aria-pressed="true"] {
  background: var(--p234-color-brand-tint);
  box-shadow: inset 0 0 0 1px var(--p234-color-brand);
}

/* --- button ------------------------------------------------------------ */
.p234-btn {
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 600;
  line-height: 1;
  padding: var(--p234-space-4) var(--p234-space-5);
  border-radius: var(--p234-radius-md);
  border: var(--p234-border-hairline) solid transparent;
  background: var(--p234-color-brand);
  color: var(--p234-color-on-brand);
  cursor: pointer;
  transition: background var(--p234-motion-duration-fast) var(--p234-motion-easing-standard);
}
.p234-btn:hover { background: var(--p234-color-brand-hover); }
.p234-btn--secondary {
  background: transparent;
  color: var(--p234-color-ink);
  border-color: var(--p234-color-rule-strong);
}
.p234-btn--secondary:hover { background: var(--p234-color-paper-sunk); }

/* --- data --------------------------------------------------------------
   Figures are sans and tabular so columns line up. Direction is never colour
   alone: the arrow glyph carries it for anyone who cannot separate the hues. */
.p234-tile {
  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
  padding-top: var(--p234-space-4);
}
.p234-tile__label {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
  display: block;
}
.p234-tile__figure {
  font-family: var(--p234-type-data-lg-family);
  font-size: var(--p234-type-data-lg-size);
  line-height: var(--p234-type-data-lg-leading);
  font-weight: var(--p234-type-data-lg-weight);
  letter-spacing: var(--p234-type-data-lg-tracking);
  font-variant-numeric: var(--p234-type-data-lg-numeric);
  color: var(--p234-color-ink);
  display: block;
  margin-top: var(--p234-space-2);
}
.p234-delta {
  font-family: var(--p234-type-data-sm-family);
  font-size: var(--p234-type-data-sm-size);
  font-weight: var(--p234-type-data-sm-weight);
  font-variant-numeric: var(--p234-type-data-sm-numeric);
  color: var(--p234-color-data-flat);
}
.p234-delta[data-direction="up"] { color: var(--p234-color-data-up); }
.p234-delta[data-direction="down"] { color: var(--p234-color-data-down); }
.p234-delta[data-direction="up"]::before { content: "\25B2 "; }
.p234-delta[data-direction="down"]::before { content: "\25BC "; }

.p234-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--p234-type-data-family);
  font-size: var(--p234-type-data-sm-size);
  font-variant-numeric: tabular-nums;
}
.p234-table th {
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  text-align: left;
  color: var(--p234-color-ink-muted);
  padding: var(--p234-space-3) var(--p234-space-4);
  border-bottom: var(--p234-border-thick) solid var(--p234-color-ink);
}
.p234-table td {
  padding: var(--p234-space-3) var(--p234-space-4);
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
  color: var(--p234-color-ink);
}
.p234-table td:not(:first-child),
.p234-table th:not(:first-child) { text-align: right; }

/* --- prose -------------------------------------------------------------
   The article body. Capped at a measure because a full-width line of 18px
   serif is unreadable, which is most of what "looks like a dashboard" means. */
.p234-prose {
  font-family: var(--p234-type-body-family);
  font-size: var(--p234-type-body-size);
  line-height: var(--p234-type-body-leading);
  color: var(--p234-color-ink);
  max-width: var(--p234-measure-text);
}
.p234-prose > * + * { margin-top: var(--p234-space-5); }
.p234-prose a { color: var(--p234-color-link); text-underline-offset: 2px; }
.p234-prose a:visited { color: var(--p234-color-link-visited); }
.p234-prose blockquote {
  font-family: var(--p234-type-quote-family);
  font-size: var(--p234-type-quote-size);
  line-height: var(--p234-type-quote-leading);
  letter-spacing: var(--p234-type-quote-tracking);
  border-left: var(--p234-border-heavy) solid var(--p234-color-brand);
  padding-left: var(--p234-space-5);
  margin-inline: 0;
  color: var(--p234-color-ink);
}

/* --- ad slot -----------------------------------------------------------
   Declared, labelled and bounded. The article template allows two of these,
   total. The count is a design decision, not an inventory decision: at six
   plus a sticky, the page reads as an ad wrapper and the reader leaves. */
.p234-adslot {
  background: var(--p234-color-paper-sunk);
  border: var(--p234-border-hairline) dashed var(--p234-color-rule-strong);
  border-radius: var(--p234-radius-sm);
  padding: var(--p234-space-5);
  text-align: center;
  max-width: var(--p234-measure-text);
}
.p234-adslot::before {
  content: "Advertisement";
  display: block;
  font-family: var(--p234-type-caption-family);
  font-size: var(--p234-type-caption-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p234-color-ink-subtle);
  margin-bottom: var(--p234-space-3);
}

/* --- next step ---------------------------------------------------------
   The module the GA4 numbers say is missing: 114 seconds on the page, then
   1.18 pages per session. A reader who arrived on a visa story wants the next
   visa story, not the general feed. */
.p234-nextstep {
  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
  padding-top: var(--p234-space-4);
  max-width: var(--p234-measure-text);
}
.p234-nextstep__title {
  font-family: var(--p234-type-kicker-family);
  font-size: var(--p234-type-kicker-size);
  font-weight: var(--p234-type-kicker-weight);
  letter-spacing: var(--p234-type-kicker-tracking);
  text-transform: var(--p234-type-kicker-case);
  color: var(--p234-color-ink-muted);
  margin: 0 0 var(--p234-space-4);
}
.p234-nextstep ol { margin: 0; padding-left: var(--p234-space-6); }
.p234-nextstep li { margin-bottom: var(--p234-space-4); }
.p234-nextstep li::marker {
  font-family: var(--p234-type-ui-sm-family);
  font-weight: 700;
  color: var(--p234-color-brand);
}
.p234-nextstep a {
  font-family: var(--p234-type-headline-xs-family);
  font-size: var(--p234-type-headline-xs-size);
  line-height: var(--p234-type-headline-xs-leading);
  font-weight: var(--p234-type-headline-xs-weight);
  color: var(--p234-color-ink);
  text-decoration: none;
}
.p234-nextstep a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- breadcrumb --------------------------------------------------------
   34 files hand-roll this today, each with its own separator and spacing. */
.p234-breadcrumb {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
  margin-bottom: var(--p234-space-5);
}
.p234-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p234-space-3);
}
.p234-breadcrumb li { display: flex; align-items: center; gap: var(--p234-space-3); }
.p234-breadcrumb li + li::before {
  content: "/";
  color: var(--p234-color-rule-strong);
}
.p234-breadcrumb a { color: var(--p234-color-ink-muted); text-decoration: none; }
.p234-breadcrumb a:hover { color: var(--p234-color-ink); text-decoration: underline; text-underline-offset: 2px; }
.p234-breadcrumb [aria-current="page"] { color: var(--p234-color-ink); }

/* --- figure ------------------------------------------------------------
   An image with its credit. The credit is not optional: the archive
   summarises other outlets, and their photographs belong to them. */
.p234-figure { margin: 0 0 var(--p234-space-6); }
.p234-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* The space is reserved before the image lands, so the text below does not
     jump under the reader. This is why the ratio is a token and not a guess. */
  aspect-ratio: var(--p234-figure-ratio);
  object-fit: cover;
  border-radius: var(--p234-radius-sm);
  background: var(--p234-color-paper-sunk);
}

/* Hero: the lead image on an article. Capped in height so the first paragraph
   is still on screen on a laptop. */
.p234-figure--hero img { max-height: var(--p234-figure-hero-max-height); }

/* Portrait, for people. A face cropped to 16:9 is a forehead and a chin. */
.p234-figure--portrait img { aspect-ratio: var(--p234-figure-ratio-portrait); }
.p234-figure--square img { aspect-ratio: var(--p234-figure-ratio-square); }

/* Inset: beside the text once there is room for it, full width before that. */
@media (min-width: 48rem) {
  .p234-figure--inset {
    float: right;
    width: var(--p234-figure-inset-width);
    margin: 0 0 var(--p234-space-5) var(--p234-space-6);
  }
}

/* An image whose host the resizer cannot touch arrives at its original size and
   shape. Letterbox it rather than crop blind: for a third of the archive this
   is the normal case, not the edge case. */
.p234-figure--unsized img {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: var(--p234-figure-hero-max-height);
}
.p234-figure figcaption {
  font-family: var(--p234-type-caption-family);
  font-size: var(--p234-type-caption-size);
  line-height: var(--p234-type-caption-leading);
  color: var(--p234-color-ink-muted);
  margin-top: var(--p234-space-3);
  max-width: var(--p234-measure-text);
}
.p234-figure__credit { color: var(--p234-color-ink-subtle); }

/* --- toggle ------------------------------------------------------------
   Save, follow topic, follow source. One control, three labels. The state
   lives in aria-pressed, so it is announced rather than merely coloured. */
.p234-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--p234-space-3);
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 600;
  line-height: 1;
  min-height: var(--p234-field-height);
  padding: 0 var(--p234-space-5);
  background: transparent;
  color: var(--p234-color-ink);
  border: var(--p234-border-hairline) solid var(--p234-color-rule-strong);
  border-radius: var(--p234-radius-md);
  cursor: pointer;
  transition: background var(--p234-motion-duration-fast) var(--p234-motion-easing-standard);
}
.p234-toggle:hover { background: var(--p234-color-paper-sunk); }
.p234-toggle[aria-pressed="true"] {
  background: var(--p234-color-brand-tint);
  border-color: var(--p234-color-brand);
  color: var(--p234-color-brand);
}
/* The icon changes with the state too, so the change is not colour alone. */
.p234-toggle__on, .p234-toggle[aria-pressed="true"] .p234-toggle__off { display: none; }
.p234-toggle[aria-pressed="true"] .p234-toggle__on { display: inline; }

/* --- share -------------------------------------------------------------- */
.p234-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p234-space-3);
  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
  padding: var(--p234-space-4) 0;
  margin: var(--p234-space-6) 0;
  max-width: var(--p234-measure-text);
}
.p234-share__label {
  font-family: var(--p234-type-kicker-family);
  font-size: var(--p234-type-kicker-size);
  font-weight: var(--p234-type-kicker-weight);
  letter-spacing: var(--p234-type-kicker-tracking);
  text-transform: var(--p234-type-kicker-case);
  color: var(--p234-color-ink-muted);
  margin-right: var(--p234-space-3);
}
.p234-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p234-space-3);
  min-width: var(--p234-field-height);
  min-height: var(--p234-field-height);
  padding: 0 var(--p234-space-4);
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  color: var(--p234-color-ink);
  background: transparent;
  border: var(--p234-border-hairline) solid var(--p234-color-rule);
  border-radius: var(--p234-radius-md);
  cursor: pointer;
  text-decoration: none;
}
.p234-share__btn:hover { background: var(--p234-color-paper-sunk); border-color: var(--p234-color-rule-strong); }

/* --- subscribe ---------------------------------------------------------
   The newsletter block. One field, one button, one line of what you get. */
.p234-subscribe {
  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
  padding-top: var(--p234-space-5);
  max-width: var(--p234-measure-text);
}
.p234-subscribe__title {
  font-family: var(--p234-type-headline-sm-family);
  font-size: var(--p234-type-headline-sm-size);
  line-height: var(--p234-type-headline-sm-leading);
  font-weight: var(--p234-type-headline-sm-weight);
  letter-spacing: var(--p234-type-headline-sm-tracking);
  color: var(--p234-color-ink);
  margin: 0 0 var(--p234-space-3);
}
.p234-subscribe__what {
  font-family: var(--p234-type-body-sm-family);
  font-size: var(--p234-type-body-sm-size);
  line-height: var(--p234-type-body-sm-leading);
  color: var(--p234-color-ink-muted);
  margin: 0 0 var(--p234-space-5);
}
.p234-subscribe__row { display: flex; flex-wrap: wrap; gap: var(--p234-space-3); }
.p234-subscribe__field {
  flex: 1 1 14rem;
  min-width: 0;
  height: var(--p234-field-height);
  padding: 0 var(--p234-field-padding-x);
  background: var(--p234-color-field-bg);
  color: var(--p234-color-ink);
  border: var(--p234-field-border-width) solid var(--p234-color-field-border);
  border-radius: var(--p234-field-radius);
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
}
.p234-subscribe__field::placeholder { color: var(--p234-color-field-ink-placeholder); }
.p234-subscribe__field:hover { border-color: var(--p234-color-field-border-hover); }
.p234-subscribe__field[aria-invalid="true"] {
  border-width: var(--p234-field-border-width-invalid);
  border-color: var(--p234-color-error);
}
.p234-subscribe__note {
  font-family: var(--p234-type-caption-family);
  font-size: var(--p234-type-caption-size);
  color: var(--p234-color-ink-subtle);
  margin: var(--p234-space-4) 0 0;
}
.p234-subscribe__error {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-error);
  margin: var(--p234-space-3) 0 0;
}

/* --- masthead ----------------------------------------------------------
   The 727 line Header replaced by a shell. The dropdown and overlay
   behaviour belongs to the app; what lives here is the shape, the rules
   and the layering. */
.p234-masthead {
  position: sticky;
  top: 0;
  z-index: var(--p234-z-sticky);
  background: var(--p234-color-paper);
  border-bottom: var(--p234-border-heavy) solid var(--p234-color-ink);
}
.p234-masthead__bar {
  max-width: var(--p234-layout-container);
  margin: 0 auto;
  padding: var(--p234-space-4) var(--p234-layout-gutter);
  display: flex;
  align-items: center;
  gap: var(--p234-space-5);
}
@media (min-width: 48rem) {
  .p234-masthead__bar { padding-inline: var(--p234-layout-gutter-lg); }
}
.p234-masthead__brand {
  display: flex;
  align-items: baseline;
  gap: var(--p234-space-3);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.p234-masthead__mark {
  font-family: var(--p234-type-ui-family);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--p234-color-brand);
}
.p234-masthead__tagline {
  font-family: var(--p234-type-caption-family);
  font-size: var(--p234-type-caption-size);
  color: var(--p234-color-ink-muted);
  display: none;
}
@media (min-width: 62rem) { .p234-masthead__tagline { display: inline; } }

.p234-masthead__nav { display: none; gap: var(--p234-space-5); margin-left: auto; }
@media (min-width: 62rem) { .p234-masthead__nav { display: flex; } }
.p234-masthead__nav a {
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 600;
  color: var(--p234-color-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.p234-masthead__nav a:hover { color: var(--p234-color-ink); }
.p234-masthead__nav a[aria-current] { color: var(--p234-color-ink); }

.p234-masthead__actions { display: flex; align-items: center; gap: var(--p234-space-3); margin-left: auto; }
@media (min-width: 62rem) { .p234-masthead__actions { margin-left: 0; } }
.p234-masthead__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--p234-field-height);
  height: var(--p234-field-height);
  background: transparent;
  color: var(--p234-color-ink);
  border: 0;
  border-radius: var(--p234-radius-md);
  cursor: pointer;
}
.p234-masthead__icon:hover { background: var(--p234-color-paper-sunk); }

/* --- subnav ------------------------------------------------------------
   Section level navigation: the price pages, the account panes. Scrolls
   sideways on a phone rather than wrapping into two rows. */
.p234-subnav {
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.p234-subnav::-webkit-scrollbar { display: none; }
.p234-subnav ul {
  display: flex;
  gap: var(--p234-space-5);
  list-style: none;
  margin: 0;
  padding: 0 var(--p234-layout-gutter);
  max-width: var(--p234-layout-container);
  margin-inline: auto;
}
.p234-subnav a {
  display: block;
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  color: var(--p234-color-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--p234-space-4) 0;
  border-bottom: var(--p234-border-thick) solid transparent;
  margin-bottom: -1px;
}
.p234-subnav a:hover { color: var(--p234-color-ink); }
.p234-subnav a[aria-current] {
  color: var(--p234-color-ink);
  border-bottom-color: var(--p234-color-brand);
}

/* --- page hero ---------------------------------------------------------
   The header for a page that is not an article: a section front, a price
   page, a state page. */
.p234-pagehero {
  border-bottom: var(--p234-border-thick) solid var(--p234-color-ink);
  padding-bottom: var(--p234-space-5);
  margin-bottom: var(--p234-space-7);
}
.p234-pagehero__title {
  font-family: var(--p234-type-display-2-family);
  font-size: var(--p234-type-display-2-size);
  line-height: var(--p234-type-display-2-leading);
  font-weight: var(--p234-type-display-2-weight);
  letter-spacing: var(--p234-type-display-2-tracking);
  color: var(--p234-color-ink);
  margin: 0;
  text-wrap: balance;
}
.p234-pagehero__standfirst {
  font-family: var(--p234-type-standfirst-family);
  font-size: var(--p234-type-standfirst-size);
  line-height: var(--p234-type-standfirst-leading);
  color: var(--p234-color-ink-muted);
  max-width: var(--p234-measure-text);
  margin: var(--p234-space-4) 0 0;
}
.p234-pagehero__meta {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
  margin-top: var(--p234-space-4);
}

/* --- footer ------------------------------------------------------------- */
.p234-footer {
  border-top: var(--p234-border-heavy) solid var(--p234-color-ink);
  margin-top: var(--p234-space-9);
  padding: var(--p234-space-8) 0;
}
.p234-footer__in {
  max-width: var(--p234-layout-container);
  margin: 0 auto;
  padding-inline: var(--p234-layout-gutter);
}
.p234-footer__groups {
  display: grid;
  gap: var(--p234-space-7);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: var(--p234-space-8);
}
.p234-footer__title {
  font-family: var(--p234-type-kicker-family);
  font-size: var(--p234-type-kicker-size);
  font-weight: var(--p234-type-kicker-weight);
  letter-spacing: var(--p234-type-kicker-tracking);
  text-transform: var(--p234-type-kicker-case);
  color: var(--p234-color-ink-muted);
  margin: 0 0 var(--p234-space-4);
}
.p234-footer ul { list-style: none; margin: 0; padding: 0; }
.p234-footer li { margin-bottom: var(--p234-space-3); }
.p234-footer a {
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  color: var(--p234-color-ink);
  text-decoration: none;
}
.p234-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }
.p234-footer__legal {
  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
  padding-top: var(--p234-space-5);
  font-family: var(--p234-type-caption-family);
  font-size: var(--p234-type-caption-size);
  line-height: 1.6;
  color: var(--p234-color-ink-muted);
}

/* --- route progress ----------------------------------------------------
   A thin bar while the next page is fetched. It sits above everything
   except a toast, because it is about the navigation itself. */
.p234-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--p234-z-overlay);
  background: var(--p234-color-brand);
  transform-origin: 0 50%;
  transition: transform var(--p234-motion-duration-base) var(--p234-motion-easing-standard);
}

/* --- field -------------------------------------------------------------
   One control for input, select and textarea. 34 files currently style
   their own. The label is a real label, never a placeholder. */
.p234-field { display: block; margin-bottom: var(--p234-space-5); }
.p234-field__label {
  display: block;
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  color: var(--p234-color-ink);
  margin-bottom: var(--p234-space-3);
}
.p234-field__optional { font-weight: 400; color: var(--p234-color-ink-muted); }
.p234-field__hint {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
  margin: 0 0 var(--p234-space-3);
  max-width: var(--p234-measure-narrow);
}
.p234-field__control {
  display: block;
  width: 100%;
  min-height: var(--p234-field-height);
  padding: 0 var(--p234-field-padding-x);
  background: var(--p234-color-field-bg);
  color: var(--p234-color-ink);
  border: var(--p234-field-border-width) solid var(--p234-color-field-border);
  border-radius: var(--p234-field-radius);
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
}
.p234-field__control::placeholder { color: var(--p234-color-field-ink-placeholder); }
.p234-field__control:hover { border-color: var(--p234-color-field-border-hover); }
.p234-field__control:disabled {
  background: var(--p234-color-field-bg-disabled);
  color: var(--p234-color-ink-muted);
  border-color: var(--p234-color-rule);
  cursor: not-allowed;
}
textarea.p234-field__control {
  padding: var(--p234-space-4) var(--p234-field-padding-x);
  min-height: 7rem;
  line-height: 1.5;
  resize: vertical;
}
/* Invalid thickens the border as well as changing its colour, so the state
   does not depend on seeing the hue. */
.p234-field__control[aria-invalid="true"] {
  border-width: var(--p234-field-border-width-invalid);
  border-color: var(--p234-color-error);
}
.p234-field__error {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  font-weight: 600;
  color: var(--p234-color-error);
  margin: var(--p234-space-3) 0 0;
  max-width: var(--p234-measure-narrow);
}

/* Checkbox and radio: the control keeps its native shape and the whole row
   is the target. */
.p234-check {
  display: flex;
  align-items: flex-start;
  gap: var(--p234-space-4);
  padding: var(--p234-space-3) 0;
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  color: var(--p234-color-ink);
  cursor: pointer;
}
.p234-check input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--p234-color-brand);
}
.p234-check__text { line-height: 1.45; }
.p234-check__hint {
  display: block;
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
  margin-top: 2px;
}

/* --- toast -------------------------------------------------------------
   A short message about something that just happened. Lives in a live
   region so it is announced, not only seen. */
.p234-toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--p234-space-6);
  transform: translateX(-50%);
  z-index: var(--p234-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--p234-space-3);
  width: calc(100% - (2 * var(--p234-layout-gutter)));
  max-width: 26rem;
  pointer-events: none;
}
.p234-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--p234-space-4);
  pointer-events: auto;
  background: var(--p234-color-paper-dark);
  color: var(--p234-color-ink-inverse);
  border-radius: var(--p234-radius-md);
  box-shadow: var(--p234-shadow-overlay);
  padding: var(--p234-space-4) var(--p234-space-5);
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  line-height: 1.45;
}
.p234-toast__mark { flex-shrink: 0; font-weight: 700; }
.p234-toast--success .p234-toast__mark { color: var(--p234-color-data-up); }
.p234-toast--error .p234-toast__mark { color: var(--p234-color-data-down); }
.p234-toast__action {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- empty state -------------------------------------------------------
   30 files write their own "no results" copy. An empty state says what
   happened and what to do next. */
.p234-empty {
  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
  padding: var(--p234-space-7) 0;
  max-width: var(--p234-measure-text);
}
.p234-empty__title {
  font-family: var(--p234-type-headline-sm-family);
  font-size: var(--p234-type-headline-sm-size);
  line-height: var(--p234-type-headline-sm-leading);
  font-weight: var(--p234-type-headline-sm-weight);
  color: var(--p234-color-ink);
  margin: 0 0 var(--p234-space-3);
}
.p234-empty__body {
  font-family: var(--p234-type-body-sm-family);
  font-size: var(--p234-type-body-sm-size);
  line-height: var(--p234-type-body-sm-leading);
  color: var(--p234-color-ink-muted);
  margin: 0 0 var(--p234-space-5);
}
.p234-empty__actions { display: flex; flex-wrap: wrap; gap: var(--p234-space-3); }

/* --- skeleton ----------------------------------------------------------
   A placeholder shaped like the thing that is coming. Never a spinner:
   a spinner says "wait", a skeleton says "here is what is arriving". */
.p234-skeleton {
  display: block;
  background: var(--p234-color-paper-sunk);
  border-radius: var(--p234-radius-sm);
  position: relative;
  overflow: hidden;
}
.p234-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--p234-color-rule), transparent);
  transform: translateX(-100%);
  animation: p234-shimmer 1.4s infinite;
}
@keyframes p234-shimmer { to { transform: translateX(100%); } }

.p234-skeleton--line { height: 0.75rem; margin-bottom: var(--p234-space-3); }
.p234-skeleton--headline { height: 1.5rem; margin-bottom: var(--p234-space-4); }
.p234-skeleton--figure { aspect-ratio: var(--p234-figure-ratio); height: auto; width: 100%; }
.p234-skeleton--short { width: 40%; }
.p234-skeleton--medium { width: 70%; }

/* --- tabs --------------------------------------------------------------
   Switches a panel in place. If it navigates, it is a sub-nav. */
.p234-tabs {
  display: flex;
  gap: var(--p234-space-5);
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.p234-tabs::-webkit-scrollbar { display: none; }
.p234-tabs__tab {
  flex-shrink: 0;
  background: none;
  border: 0;
  border-bottom: var(--p234-border-thick) solid transparent;
  margin-bottom: -1px;
  padding: var(--p234-space-4) 0;
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 600;
  color: var(--p234-color-ink-muted);
  white-space: nowrap;
  cursor: pointer;
}
.p234-tabs__tab:hover { color: var(--p234-color-ink); }
.p234-tabs__tab[aria-selected="true"] {
  color: var(--p234-color-ink);
  border-bottom-color: var(--p234-color-brand);
}
.p234-tabs__count { color: var(--p234-color-ink-subtle); font-weight: 400; }
.p234-tabpanel { padding-top: var(--p234-space-6); }

/* --- pagination --------------------------------------------------------
   One button and a count. The count is the part people leave out, and it
   is the part that tells a reader whether to keep going. */
.p234-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p234-space-4);
  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
  padding-top: var(--p234-space-6);
  margin-top: var(--p234-space-6);
}
.p234-pagination__status {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
  margin: 0;
}

/* --- strip -------------------------------------------------------------
   A sideways row of cards. 22 files roll their own overflow container. */
.p234-strip { position: relative; }
.p234-strip__track {
  display: flex;
  gap: var(--p234-space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: var(--p234-space-3);
}
.p234-strip__track::-webkit-scrollbar { display: none; }
.p234-strip__item {
  flex: 0 0 15rem;
  scroll-snap-align: start;
  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
  padding-top: var(--p234-space-4);
  color: inherit;
  text-decoration: none;
}
.p234-strip__item:hover .p234-strip__title { text-decoration: underline; text-underline-offset: 2px; }
.p234-strip__title {
  font-family: var(--p234-type-headline-xs-family);
  font-size: var(--p234-type-headline-xs-size);
  line-height: var(--p234-type-headline-xs-leading);
  font-weight: var(--p234-type-headline-xs-weight);
  color: var(--p234-color-ink);
  margin: var(--p234-space-3) 0 0;
}
/* The right edge fades, which is the only hint that the row continues once
   the scrollbar is hidden. */
.p234-strip::after {
  content: "";
  position: absolute;
  inset: 0 0 var(--p234-space-3) auto;
  width: var(--p234-space-8);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--p234-color-paper));
}

/* --- directory ---------------------------------------------------------
   A long index: every equity, every state, every seat. Grouped, with the
   group letter sticking as the reader scrolls past it. */
.p234-directory { border-top: var(--p234-border-thick) solid var(--p234-color-ink); }
.p234-directory__letter {
  position: sticky;
  top: 0;
  background: var(--p234-color-paper);
  font-family: var(--p234-type-kicker-family);
  font-size: var(--p234-type-kicker-size);
  font-weight: var(--p234-type-kicker-weight);
  letter-spacing: var(--p234-type-kicker-tracking);
  text-transform: var(--p234-type-kicker-case);
  color: var(--p234-color-ink-muted);
  padding: var(--p234-space-4) 0 var(--p234-space-3);
  margin: 0;
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
}
.p234-directory__row {
  display: flex;
  align-items: baseline;
  gap: var(--p234-space-4);
  padding: var(--p234-space-4) 0;
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
  color: inherit;
  text-decoration: none;
}
.p234-directory__row:hover { background: var(--p234-color-paper-alt); }
.p234-directory__name {
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 600;
  color: var(--p234-color-ink);
}
.p234-directory__detail {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
}
.p234-directory__value {
  margin-left: auto;
  font-family: var(--p234-type-data-sm-family);
  font-size: var(--p234-type-data-sm-size);
  font-weight: var(--p234-type-data-sm-weight);
  font-variant-numeric: var(--p234-type-data-sm-numeric);
  color: var(--p234-color-ink);
}

/* --- chart -------------------------------------------------------------
   The frame around a plot: title, legend, the plot itself, and the line
   saying where the numbers came from and as of when. */
.p234-chart { margin: 0 0 var(--p234-space-7); max-width: var(--p234-measure-wide); }
.p234-chart__head { margin-bottom: var(--p234-space-5); }
.p234-chart__title {
  font-family: var(--p234-type-headline-sm-family);
  font-size: var(--p234-type-headline-sm-size);
  line-height: var(--p234-type-headline-sm-leading);
  font-weight: var(--p234-type-headline-sm-weight);
  color: var(--p234-color-ink);
  margin: 0;
}
.p234-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p234-space-3) var(--p234-space-5);
  margin-top: var(--p234-space-4);
  list-style: none;
  padding: 0;
}
.p234-chart__key {
  display: flex;
  align-items: center;
  gap: var(--p234-space-3);
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  color: var(--p234-color-ink);
}
.p234-chart__swatch { width: 0.875rem; height: 0.875rem; border-radius: 2px; flex-shrink: 0; }
.p234-chart__plot { display: block; width: 100%; height: auto; }
.p234-chart__source {
  font-family: var(--p234-type-caption-family);
  font-size: var(--p234-type-caption-size);
  line-height: var(--p234-type-caption-leading);
  color: var(--p234-color-ink-subtle);
  margin: var(--p234-space-4) 0 0;
}

/* --- map ---------------------------------------------------------------
   A choropleth of the 36 states and the FCT, with the ramp as its key. */
.p234-map { max-width: var(--p234-measure-wide); }
.p234-map__svg { display: block; width: 100%; height: auto; }
.p234-map__shape { stroke: var(--p234-color-paper); stroke-width: 1; }
.p234-map__shape:hover { stroke: var(--p234-color-ink); stroke-width: 2; }
.p234-map__shape--nodata { fill: var(--p234-color-paper-sunk); }
.p234-map__key { display: flex; align-items: center; gap: var(--p234-space-3); margin-top: var(--p234-space-5); flex-wrap: wrap; }
.p234-map__steps { display: flex; }
.p234-map__step { width: 2.25rem; height: 0.75rem; }
.p234-map__bound {
  font-family: var(--p234-type-data-sm-family);
  font-size: var(--p234-type-data-sm-size);
  font-variant-numeric: var(--p234-type-data-sm-numeric);
  color: var(--p234-color-ink-muted);
}

/* --- hemicycle ---------------------------------------------------------- */
.p234-hemicycle { max-width: var(--p234-measure-wide); }
.p234-hemicycle__svg { display: block; width: 100%; height: auto; }
.p234-hemicycle__seat { stroke: var(--p234-color-paper); stroke-width: 0.5; }
.p234-hemicycle__seat--vacant { fill: var(--p234-color-paper-sunk); }

/* --- results -----------------------------------------------------------
   Declared results and pending seats. Party identity is carried by the
   abbreviation, not by the colour: party colours are data, they are not
   tokens, and three of them are close to each other. */
.p234-results { border-top: var(--p234-border-thick) solid var(--p234-color-ink); }
.p234-results__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--p234-space-3) var(--p234-space-4);
  padding: var(--p234-space-4) 0;
  border-bottom: var(--p234-border-hairline) solid var(--p234-color-rule);
}
.p234-results__party {
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 700;
  color: var(--p234-color-ink);
  min-width: 3.5rem;
}
.p234-results__name {
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  color: var(--p234-color-ink);
}
.p234-results__votes {
  font-family: var(--p234-type-data-family);
  font-size: var(--p234-type-data-size);
  font-weight: var(--p234-type-data-weight);
  font-variant-numeric: var(--p234-type-data-numeric);
  color: var(--p234-color-ink);
}
.p234-results__bar {
  grid-column: 1 / -1;
  height: 0.5rem;
  background: var(--p234-color-paper-sunk);
  border-radius: 1px;
  overflow: hidden;
}
.p234-results__fill { display: block; height: 100%; background: var(--p234-color-ink-muted); }
.p234-results__fill--lead { background: var(--p234-color-brand); }
.p234-results__status {
  display: inline-block;
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  padding: 1px var(--p234-space-3);
  border-radius: var(--p234-radius-pill);
}
.p234-results__status--declared { color: var(--p234-color-success); border: 1px solid var(--p234-color-success); }
.p234-results__status--pending { color: var(--p234-color-ink-muted); border: 1px solid var(--p234-color-rule-strong); }

/* --- banner ------------------------------------------------------------
   One band for the four that exist today: consent, push prompt, daily brief
   and quick access. A banner interrupts, so it earns its place or it goes. */
.p234-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--p234-space-4);
  padding: var(--p234-space-5);
  border: var(--p234-border-hairline) solid var(--p234-color-rule);
  border-left: var(--p234-border-heavy) solid var(--p234-color-brand);
  border-radius: var(--p234-radius-sm);
  background: var(--p234-color-paper-alt);
  margin-bottom: var(--p234-space-6);
}
.p234-banner__body { flex: 1; min-width: 0; }
.p234-banner__title {
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 700;
  color: var(--p234-color-ink);
  margin: 0 0 var(--p234-space-2);
}
.p234-banner__text {
  font-family: var(--p234-type-body-sm-family);
  font-size: var(--p234-type-body-sm-size);
  line-height: var(--p234-type-body-sm-leading);
  color: var(--p234-color-ink-muted);
  margin: 0;
}
.p234-banner__actions { display: flex; flex-wrap: wrap; gap: var(--p234-space-3); margin-top: var(--p234-space-4); }
.p234-banner__dismiss {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: var(--p234-color-ink-muted);
  font: inherit;
  font-size: var(--p234-type-ui-sm-size);
  cursor: pointer;
  min-width: var(--p234-field-height);
  min-height: var(--p234-field-height);
}
.p234-banner--info { border-left-color: var(--p234-color-info); }
.p234-banner--warning { border-left-color: var(--p234-color-warning); }
/* Consent is the one banner that may sit over the page. */
.p234-banner--sticky {
  position: fixed;
  inset: auto var(--p234-layout-gutter) var(--p234-layout-gutter);
  z-index: var(--p234-z-overlay);
  max-width: 34rem;
  margin: 0 auto;
  background: var(--p234-color-paper);
  box-shadow: var(--p234-shadow-overlay);
}

/* --- ticker ------------------------------------------------------------
   A row of figures across the top of a markets page. Scrolls by hand; it
   never animates on its own, because a moving number cannot be read. */
.p234-ticker {
  display: flex;
  gap: var(--p234-space-6);
  overflow-x: auto;
  scrollbar-width: none;
  border-block: var(--p234-border-hairline) solid var(--p234-color-rule);
  padding: var(--p234-space-4) 0;
}
.p234-ticker::-webkit-scrollbar { display: none; }
.p234-ticker__item {
  display: flex;
  align-items: baseline;
  gap: var(--p234-space-3);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
.p234-ticker__name {
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  color: var(--p234-color-ink-muted);
}
.p234-ticker__value {
  font-family: var(--p234-type-data-sm-family);
  font-size: var(--p234-type-data-sm-size);
  font-weight: 600;
  font-variant-numeric: var(--p234-type-data-sm-numeric);
  color: var(--p234-color-ink);
}

/* --- link grid ---------------------------------------------------------
   Destinations: categories, states, tools. Text, not icons in boxes. */
.p234-linkgrid {
  display: grid;
  gap: var(--p234-space-4);
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.p234-linkgrid a {
  display: block;
  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
  padding-top: var(--p234-space-3);
  font-family: var(--p234-type-ui-family);
  font-size: var(--p234-type-ui-size);
  font-weight: 600;
  color: var(--p234-color-ink);
  text-decoration: none;
}
.p234-linkgrid a:hover { color: var(--p234-color-brand); }
.p234-linkgrid__count {
  display: block;
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  font-weight: 400;
  color: var(--p234-color-ink-muted);
  margin-top: 2px;
}

/* --- poster ------------------------------------------------------------
   Portrait media: films, shows, book and product covers. */
.p234-poster { display: block; text-decoration: none; color: inherit; }
.p234-poster__img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--p234-color-paper-sunk);
  border-radius: var(--p234-radius-sm);
}
.p234-poster__title {
  font-family: var(--p234-type-ui-sm-family);
  font-size: var(--p234-type-ui-sm-size);
  font-weight: 600;
  color: var(--p234-color-ink);
  margin: var(--p234-space-3) 0 0;
}
.p234-poster__meta {
  font-family: var(--p234-type-meta-family);
  font-size: var(--p234-type-meta-size);
  color: var(--p234-color-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .p234-btn, .p234-toggle { transition: none; }
  /* The bar still appears and still fills, it just stops sliding. */
  .p234-progress { transition: none; }
  /* The placeholder stays, the shimmer goes. */
  .p234-skeleton::after { animation: none; }
  .p234-strip__track { scroll-behavior: auto; }
}