/* ============================================================================
   Verity Gulf - composed page sections.
   The bands that make up the front page, the article page and the listings.
   Anything reusable enough to appear on three pages belongs in components.css.
   ========================================================================= */

/* ============================================================ HOME: HERO */

.section--hero { padding-block: var(--s-2) var(--s-9); }

.hero-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: var(--grid-gap);
  /* The story card is meant to run the full height of the row. Its own
     divider is margin-block-start: auto, so the byline settles against the
     foot of the card rather than leaving the gap in the middle. */
  align-items: stretch;
}

.hero-grid--norail { grid-template-columns: 340px minmax(0, 1fr); }

.hero-grid__story { display: flex; flex-direction: column; }
.hero-grid__story .card--hero { flex: 1; }

/*
 * The three hero columns are naturally different heights, and the rail is the
 * tallest. The media fills its cell rather than keeping a bare 16:9 box with
 * a hole beneath it - the image is object-fit: cover, so it simply crops. The
 * floor stops it collapsing on a short row.
 */
.hero-grid__media { display: flex; }

/* ---- the newest story, as one large picture ---- */

/*
 * Picture and scrim are stacked in one grid cell rather than the scrim being
 * absolutely positioned over the picture. That matters for more than tidiness:
 * an absolutely positioned overlay is a positioned ancestor, so the headline's
 * stretched link resolved inset: 0 against the overlay and covered only the
 * strip of text at the bottom. As a grid item it is not positioned, the link
 * resolves against .lead-media, and the whole panel is the click target - which
 * is the point of the panel.
 */
.lead-media {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  inline-size: 100%;
  min-block-size: 320px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-brand-900);
  isolation: isolate;
}

.lead-media__picture,
.lead-media__overlay { grid-area: 1 / 1; }

.lead-media__picture,
.lead-media__picture picture,
.lead-media__picture img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.lead-media__picture { border-radius: 0; aspect-ratio: auto; }

.lead-media__live {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  z-index: 1;
}

/*
 * The scrim. A gradient rather than a flat panel, because a headline has to
 * stay readable over a photograph whose brightness nobody controls: it is
 * darkest where the text sits and clears entirely by the middle of the frame.
 */
.lead-media__overlay {
  z-index: 1;
  align-self: end;
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-5) var(--s-5);
  background: linear-gradient(
    180deg,
    rgba(6, 20, 22, 0) 0%,
    rgba(6, 20, 22, .55) 45%,
    rgba(6, 20, 22, .88) 100%
  );
}

.lead-media__thumb {
  flex: none;
  inline-size: 64px;
  block-size: 64px;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

.lead-media__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.lead-media__text { min-inline-size: 0; }

/*
 * White, not a token. The picture underneath does not change with the theme,
 * so the type on it cannot either.
 */
.lead-media__label {
  display: block;
  margin-block-end: 6px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
  opacity: .88;
}

.lead-media__title {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 700;
}

/*
 * The headline's link is stretched over the whole panel, and lifted above the
 * picture: .media is positioned, so it painted over an ::after at z-index 0
 * and the picture - the obvious thing to click - did nothing.
 */
.lead-media__title .card__link { color: inherit; }
.lead-media__title .card__link::after { z-index: 2; }

.lead-media__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-block-start: var(--s-2);
  margin-block-end: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  font-weight: 500;
}

.lead-media__meta > * + *::before { content: '\00B7'; margin-inline-end: 6px; }

@media (hover: hover) {
  .lead-media .lead-media__picture img {
    transition: transform var(--t-slow) var(--ease);
  }
  .lead-media:hover .lead-media__picture img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .lead-media:hover .lead-media__picture img { transform: none; }
}



/* The trending rail is a white card with its rows divided, not eight cards. */
.trending-rail {
  padding: var(--s-5);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

/*
 * In the hero the rail fills its column. The grid already made the three cells
 * the same height, but the rail sat at its own content height inside the third
 * one and stopped short of the card and the picture beside it - so the row read
 * as two panels and a gap. The rows take the extra space between them rather
 * than the card growing a blank foot.
 *
 * Scoped to the hero: the same rail in the article and listing sidebars should
 * still end where its content does, because nothing sits beside it there.
 */
.hero-grid__trending { display: flex; }

.hero-grid__trending .trending-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero-grid__trending .trending-rail__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ============================================================ HOME: PLAYER */

.player {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-brand-900);
  aspect-ratio: 16 / 9;
}

.player video,
.player img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.player__chrome {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  block-size: 44px;
  padding-inline: var(--s-3);
  color: #FFFFFF;
  background: linear-gradient(180deg, transparent, rgba(6, 47, 53, .72));
}

.player__play {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  background: #FFFFFF;
  color: var(--c-brand-700);
  border-radius: 50%;
  font-size: 14px;
}

.player__time { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.player__scrub {
  position: relative;
  flex: 1;
  block-size: 4px;
  background: rgba(255, 255, 255, .35);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.player__buffered {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: rgba(255, 255, 255, .25);
  border-radius: inherit;
}

.player__played {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--accent);
  border-radius: inherit;
}

.player__knob {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 12px;
  block-size: 12px;
  background: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Media controls stay left-to-right even in an RTL document: a scrub bar that
   runs backwards is confusing regardless of the reading direction. */
.player__chrome { direction: ltr; }

/* Without a source the player is a poster with a play overlay - it degrades
   rather than showing dead controls. */
.player--poster .player__chrome { display: none; }

/* ============================================================ HOME: WIDGETS */

.section--widgets { padding-block: 0 var(--sec-y); }

/*
 * The three cards match each other rather than each ending where its own
 * content does. align-items: start let them stop short, so the row read as
 * three panels of three different heights with the shortest looking unfinished.
 * They stretch now and each widget's body fills what it is given - which is
 * why the section list is spaced out and the tiles grow, rather than either
 * being padded to a number somebody guessed.
 */
.widget-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.widget-row > .widget {
  display: flex;
  flex-direction: column;
}

.widget-row > .widget > :last-child { flex: 1; }

/* At the widest breakpoint the markets table joins the row. */
@media (min-width: 1600px) {
  .widget-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================ HOME: LEAD */

.lead-grid {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--grid-gap);
  align-items: start;
}

.lead-grid__media .media { --media-ratio: 4 / 3; border-radius: var(--r-lg); }

.lead-grid__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

/* ============================================================ HOME: RAILS */

/* Consecutive section rails alternate their background so the page reads as
   bands rather than one long scroll. */
.section--rail:nth-of-type(even) { background: var(--bg-canvas-2); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ============================================================ HOME: FEATURE */

.section--feature { background: var(--bg-canvas); }

.feature__media .player,
.feature__media .media { border-radius: var(--r-lg); }

.feature__media .media--illustration { background: var(--brand-soft-2); }

/* ============================================================ HOME: HASHTAGS */

.section--hashtags {
  padding-block: var(--s-7);
  background: var(--bg-surface);
  border-block: var(--hairline) solid var(--line);
}

.hashtags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hashtags__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline-end: var(--s-4);
  border-inline-end: var(--hairline) solid var(--line);
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================ HOME: TRIPLE */

.triple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
  align-items: start;
}

.triple-grid__col { display: flex; flex-direction: column; gap: var(--s-4); }

/* ============================================================ HOME: PROMO */

.promo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}

/* ============================================================ HOME: APP BAND */

.section--app {
  position: relative;
  background: var(--c-brand-800);
  color: rgba(255, 255, 255, .78);
  overflow: hidden;
}

/* A 4% white weave, drawn in CSS so it costs no request and scales cleanly. */
.section--app::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .04) 0,
    rgba(255, 255, 255, .04) 1px,
    transparent 1px,
    transparent 12px
  );
  pointer-events: none;
}

.app-band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-9);
  align-items: center;
  min-block-size: 320px;
}

.app-band__text { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.app-band__text h2 { color: #FFFFFF; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 700; }
.app-band__text .eyebrow { color: var(--accent); }
.app-band__copy { max-inline-size: 460px; }

.store-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.store-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 52px;
  padding-inline: var(--s-4);
  background: #FFFFFF;
  color: var(--c-ink-900);
  border-radius: var(--r-md);
  text-decoration: none;
}

.store-button .ui { font-size: 24px; }
.store-button__label { display: grid; line-height: 1.2; text-align: start; }
.store-button__small { font-size: 10px; color: var(--c-ink-500); }
.store-button__big { font-family: var(--font-display); font-size: 15px; font-weight: 700; }

/* Two CSS-drawn phones, tilted. No image, so nothing to load or misalign. */
.phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-block-size: 420px;
}

.phone {
  inline-size: 260px;
  aspect-ratio: 260 / 540;
  padding: 8px;
  background: var(--c-brand-900);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.phone__screen {
  inline-size: 100%;
  block-size: 100%;
  background: var(--bg-canvas);
  border-radius: calc(var(--r-2xl) - 6px);
  overflow: hidden;
}

.phone__screen img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }

.phone--back { position: absolute; transform: rotate(-6deg) translateX(-38%); }
.phone--front { transform: rotate(4deg) translateX(12%); }

/* ============================================================ HOME: NEWSLETTER */

.section--newsletter {
  background: var(--accent-soft);
  text-align: center;
}

:root[data-theme="dark"] .section--newsletter { background: var(--bg-canvas-2); }

.newsletter-band {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}

.newsletter-band__copy { max-inline-size: 520px; color: var(--fg-body); font-size: 15px; line-height: 1.7; }

.newsletter-form {
  display: flex;
  gap: var(--s-3);
  inline-size: 100%;
  max-inline-size: 520px;
}

.newsletter-form .input { min-block-size: 48px; max-inline-size: 380px; }
.newsletter-form .btn { min-block-size: 48px; }

/* ============================================================ ARTICLE */

/* The grid track already holds the column to the reading measure where the
   sidebar is beside it. The cap matters once the sidebar drops underneath and
   the cell runs the full width; the auto margins keep it centred there rather
   than pinned to the left edge. */
.article-col {
  max-inline-size: var(--container-reading);
  margin-inline: auto;
}

.article-head { padding-block: var(--s-8) var(--s-6); }


.article-head__standfirst {
  margin-block-start: var(--s-4);
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/*
 * The byline is two lines beside one portrait: who filed it, then when and
 * from where. It had been a row of three things standing side by side - name,
 * desk, timestamps - each set at its own size with nothing lining up, and the
 * name floating against the middle of a two-line block beside it. Now the two
 * lines share a left edge and the portrait is centred against the pair.
 */
.article-byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}

.article-byline__portrait { align-self: center; }

.article-byline__text { min-inline-size: 0; }
.article-byline__text > p { margin-block: 0; }

.article-byline__by {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  line-height: 1.45;
}

.article-byline__prefix { color: var(--fg-meta); font-size: 13px; }

.article-byline__name {
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) {
  a.article-byline__name:hover { color: var(--brand); text-decoration: underline; }
}

.article-byline__desk { color: var(--fg-meta); font-size: 12.5px; font-weight: 500; }

/*
 * Second line. The dots are drawn between items rather than written into the
 * template, so a story filed without a location, or one never updated, does
 * not print a separator with nothing after it.
 */
.article-byline__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-block-start: 2px;
  color: var(--fg-meta);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.article-byline__meta > * + *::before {
  content: '\00B7';
  margin-inline-end: 6px;
}

/* The desk follows the name on the same line, and takes the same dot. */
.article-byline__desk::before {
  content: '\00B7';
  margin-inline-end: 6px;
}

/* The engagement bar - stats that are also buttons. */
.engagement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  min-block-size: 56px;
  margin-block: var(--s-6);
  border-block: var(--hairline) solid var(--line);
}

.engagement__group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); }

.engagement__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: none;
  transition: color var(--t-base) var(--ease);
}

@media (hover: hover) {
  .engagement__stat:hover { color: var(--brand); }
}

/* An active save or like swaps the stroke icon for its solid twin. */
.engagement__stat.is-active { color: var(--brand); }
.engagement__stat.is-active .ui { color: var(--brand); }

/*
 * The reading-size control is its own indicator: the T sits at the size it
 * sets, so a reader can see which of the three steps they are on without
 * pressing anything. Before this the button looked identical in every state,
 * which is most of why it read as doing nothing.
 */
[data-text-size] .ui { transition: font-size var(--t-base) var(--ease); }
[data-text-size][data-text-size-step="0"] .ui { font-size: 15px; }
[data-text-size][data-text-size-step="1"] .ui { font-size: 18px; }
[data-text-size][data-text-size-step="2"] .ui { font-size: 22px; }

[data-text-size][data-text-size-step="2"] { color: var(--brand); }

/* Lead media may bleed wider than the reading column on a big screen. */
.article-media { margin-block-end: var(--s-6); }

/*
 * It widens only where there is room on both sides. Below 1200px the sidebar
 * has dropped underneath and the column has the container to itself; from
 * 1440px up the centred pair leaves enough margin beside it. Between the two
 * the columns and the gap have taken the width, and a bleed would run off the
 * left edge of the screen. The distance itself is declared on .grid--article,
 * which sizes the gap from it - the two must not be able to drift apart.
 */
@media (min-width: 1100px) and (max-width: 1199.98px), (min-width: 1440px) {
  .article-media--bleed { margin-inline: calc(var(--article-bleed, 60px) * -1); }
}

.article-media__caption {
  margin-block-start: var(--s-3);
  color: var(--fg-meta);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- body */

.article-body {
  font-size: var(--fs-article);
  line-height: var(--lh-article);
  color: var(--fg-body);
}

.article-body > * + * { margin-block-start: var(--s-6); }

.article-body h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-block: var(--s-9) var(--s-4);
  font-size: var(--fs-h3);
}

.article-body h2::before {
  content: "";
  inline-size: 3px;
  block-size: 18px;
  flex: none;
  background: var(--accent);
  border-radius: var(--r-pill);
  transform: translateY(2px);
}

.article-body h3 { margin-block: var(--s-7) var(--s-3); font-size: var(--fs-h4); }

.article-body ul,
.article-body ol { padding-inline-start: var(--s-6); }
.article-body li + li { margin-block-start: var(--s-2); }
.article-body li::marker { color: var(--brand); }

.article-body a { color: var(--brand); }

.article-body img { inline-size: 100%; border-radius: var(--r-md); }

.article-body blockquote {
  padding: var(--s-6);
  background: var(--brand-soft);
  border-radius: var(--r-lg);
  color: var(--c-brand-900);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
}

:root[data-theme="dark"] .article-body blockquote { color: var(--fg-heading); }

.article-body hr { margin-block: var(--s-9); }

/* The "In brief" box. */
.key-points {
  padding: var(--s-5);
  background: var(--accent-soft);
  border-radius: var(--r-lg);
}

.key-points ul { padding-inline-start: var(--s-5); margin-block-start: var(--s-3); }

/* ---------------------------------------------------------------- toc */

.toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-7)); }
.toc__list { display: grid; gap: var(--s-2); border-inline-start: 2px solid var(--line); }

.toc__link {
  display: block;
  padding-inline-start: var(--s-4);
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.toc__link.is-active { border-inline-start-color: var(--brand); color: var(--brand); font-weight: 700; }
.toc__link--h3 { padding-inline-start: var(--s-6); font-size: 13px; }

/* ---------------------------------------------------------------- author card */

.author-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--bg-canvas-2);
  border-radius: var(--r-lg);
}

/*
 * The spacing is set per element rather than by one flex gap. A uniform gap
 * left the name, the desk and the link 12px apart while the bio, which
 * carries the prose margin every paragraph gets, sat 36px below the desk -
 * so the block read as two halves that had come apart. The name and the desk
 * are one unit, the bio a second, the link a third, and nothing inside brings
 * a margin of its own.
 */
.author-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
}

.author-card__body > * { margin-block: 0; }

.author-card__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.author-card__desk {
  margin-block-start: 3px;
  color: var(--fg-meta);
  font-size: 12.5px;
  font-weight: 500;
}

/* Below the name in size as well as in weight: it is the supporting line, and
   at 15px against a 16px name it had been reading as the louder of the two. */
.author-card__bio {
  margin-block-start: var(--s-4);
  max-inline-size: 62ch;
  color: var(--fg-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.author-card__link { margin-block-start: var(--s-5); }

/* ---------------------------------------------------------------- comments */

.comments { display: grid; gap: var(--s-6); }

.comment { display: flex; gap: var(--s-3); }
.comment__body { flex: 1; min-inline-size: 0; }
.comment__name { color: var(--fg-heading); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.comment__time { color: var(--fg-meta); font-size: 12.5px; }
.comment__text { margin-block-start: var(--s-2); font-size: 15px; line-height: 1.7; }
.comment__actions { display: flex; gap: var(--s-4); margin-block-start: var(--s-2); }

/* Replies are indented behind a rule, one level only. */
.comment__replies {
  margin-block-start: var(--s-4);
  margin-inline-start: 48px;
  padding-inline-start: var(--s-4);
  border-inline-start: var(--hairline) solid var(--line);
  display: grid;
  gap: var(--s-4);
}

.comment-composer { display: flex; gap: var(--s-3); }
.comment-composer__fields { flex: 1; display: grid; gap: var(--s-3); }

/* ---------------------------------------------------------------- share */

/* ---------------------------------------------------------------- share */

/*
 * A ruled band rather than a loose row of buttons. It used to float between
 * the hashtags and the author card with nothing holding it, and the glyphs
 * were 16px inside 44px circles, which is what made them look like an
 * afterthought - the circle read as the element and the icon as a speck in
 * the middle of it.
 */
.share-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block: var(--hairline) solid var(--line);
}

.share-strip__label {
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.share-strip__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.share-circle {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  background: var(--bg-surface-2);
  color: var(--fg-body);
  border: var(--hairline) solid transparent;
  border-radius: 50%;
  text-decoration: none;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.share-circle .ui { font-size: 19px; }

/*
 * Each network's own colour, and only on hover. At rest the row is neutral,
 * because five saturated logos beside a story pull harder than the story; on
 * hover the colour confirms which one is under the cursor. --share-brand also
 * drives the focus ring, so a keyboard gets the same signal as a mouse.
 */
.share-circle--x        { --share-brand: #000000; }
.share-circle--facebook { --share-brand: #1877F2; }
.share-circle--linkedin { --share-brand: #0A66C2; }
.share-circle--whatsapp { --share-brand: #25D366; }
.share-circle--telegram { --share-brand: #229ED9; }

@media (hover: hover) {
  .share-circle:hover {
    background: var(--share-brand);
    color: #FFFFFF;
    transform: translateY(-2px);
  }
}

.share-circle:focus-visible {
  background: var(--share-brand);
  color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .share-circle:hover { transform: none; }
}

/* Same height as the circles so the row sits on one line, and outlined rather
   than filled so it reads as the odd one out on purpose - it copies, it does
   not post. */
.share-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 42px;
  padding-inline: var(--s-4);
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.share-copy .ui { font-size: 17px; }

@media (hover: hover) {
  .share-copy:hover { background: var(--brand); color: var(--on-brand); }
}

/* ---------------------------------------------------------------- prev/next */

.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }

.prevnext__tile {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
}

.prevnext__tile--next { text-align: end; }

@media (hover: hover) {
  .prevnext__tile:hover { border-color: var(--brand); }
}

/* ============================================================ LISTINGS */

/* The section head band, tinted with the section's own colour. */
.section-head-band {
  position: relative;
  min-block-size: 200px;
  display: flex;
  align-items: center;
  background: var(--cat-plinth, var(--brand-soft));
  overflow: hidden;
}

.section-head-band__inner { display: grid; gap: var(--s-3); padding-block: var(--s-8); max-inline-size: 620px; }
.section-head-band__title { color: var(--cat-label, var(--brand)); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 700; }
.section-head-band__count { color: var(--fg-muted); font-size: var(--fs-sm); }

/* The sticky controls row under the head band. */
.controls-row {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  min-block-size: 64px;
  background: var(--bg-surface);
  border-block-end: var(--hairline) solid var(--line);
}

.controls-row__end { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ============================================================ LIVE */

.live-timeline { position: relative; padding-inline-start: var(--s-6); }

/* The spine. */
.live-timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 5px;
  inline-size: 2px;
  background: var(--line);
}

.live-entry { position: relative; padding-block-end: var(--s-8); }

.live-entry::before {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: calc(var(--s-6) * -1);
  inline-size: 12px;
  block-size: 12px;
  background: var(--brand);
  border: 2px solid var(--bg-canvas);
  border-radius: 50%;
}

.live-entry__time {
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
}

.live-entry__title { margin-block: var(--s-2); font-size: var(--fs-h4); }
.live-entry__body { font-size: 15px; line-height: 1.7; }

/* ============================================================ AUTHOR */

.author-hero { position: relative; }

.author-hero__cover {
  block-size: 200px;
  background: var(--brand-soft-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.author-hero__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.author-hero__body {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-block-start: -60px;
  text-align: center;
}

.author-hero__avatar { box-shadow: 0 0 0 4px var(--bg-canvas); }

.author-hero__stats {
  display: flex;
  gap: var(--s-7);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.author-hero__stat strong { display: block; color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h4); }

/* ============================================================ SEARCH */

.search-band {
  padding-block: var(--s-10);
  background: var(--brand-soft);
}

.search-band__field { display: flex; gap: var(--s-3); max-inline-size: 720px; }
.search-band__field .input { min-block-size: 56px; font-size: 17px; }

.search-result {
  display: block;
  padding-block: var(--s-5);
  border-block-end: var(--hairline) solid var(--line);
  text-decoration: none;
}

.search-result__title { color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; }
.search-result__text { margin-block-start: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }

@media (hover: hover) {
  .search-result:hover .search-result__title { color: var(--brand); }
}

/* ============================================================ MEGA MENU */

.mega {
  position: absolute;
  inset-inline: 0;
  z-index: var(--z-dropdown);
  padding-block: var(--s-6);
  background: var(--bg-surface);
  border-block-end: var(--hairline) solid var(--line);
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.mega__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--s-8); }
.mega__links { display: grid; gap: 10px; align-content: start; }

.mega__heading {
  margin-block-end: var(--s-2);
  color: var(--fg-meta);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
}

.mega__link { color: var(--fg-body); font-size: 14px; font-weight: 500; text-decoration: none; }

@media (hover: hover) {
  .mega__link:hover { color: var(--brand); }
}

.mega__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }

/* ============================================================ PAGE BLOCKS
   The page-builder block set, used on free pages built in admin. This is not
   the news front page - that is composed from stories - but an editor still
   needs a hero, a statement, a stat band and so on for About, Advertise and
   anything else they add. */

/* ---- hero block ---- */

.section--hero.section--block {
  position: relative;
  padding-block: var(--s-13);
  background: var(--bg-canvas-2);
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--s-5); }
/* The measure sits on the prose, not on the column: capping the column capped
   the headline too, and a headline wraps when it runs out of room, not before. */
.hero__content { display: grid; gap: var(--s-5); justify-items: start; }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 700; }
.hero__sub { max-inline-size: 46ch; color: var(--fg-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero__media,
.hero__embed { position: absolute; inset: 0; z-index: 0; }

.hero__media img,
.hero__embed iframe { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* A photograph behind text needs a scrim, or the headline is unreadable over
   whichever part of the image happens to be bright. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--bg-canvas) 20%, rgba(247, 246, 242, .6) 60%, transparent);
}

:root[data-theme="dark"] .hero__overlay {
  background: linear-gradient(90deg, var(--bg-canvas) 20%, rgba(10, 19, 21, .6) 60%, transparent);
}

.hero__ticker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  color: var(--fg-meta);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
}

.hero__scroll { display: none; }

/* ---- statement block ---- */

.section--statement .split { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-9); align-items: start; }
.split__sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-7)); }
.statement__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-heading); }
.statement__body { margin-block-start: var(--s-5); }

/* ---- cta band ---- */

.section--cta { background: var(--c-brand-800); color: rgba(255, 255, 255, .8); }
.cta__inner { display: grid; gap: var(--s-5); justify-items: start; }
.cta__title { color: #FFFFFF; font-size: var(--fs-h2); }
.cta__sub { max-inline-size: 56ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: var(--fs-xs); }

/* ---- timeline block ---- */

.timeline { display: grid; gap: var(--s-6); }
.timeline__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }

.timeline__num {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
}

.timeline__title { color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; }
.timeline__text { margin-block-start: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }


.slider-btn {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg-muted);
}

/* ---- gallery block ---- */

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery img { inline-size: 100%; border-radius: var(--r-md); }

/* ---- table block ---- */

.table-scroll { overflow-x: auto; }
.table-scroll table { min-inline-size: 560px; }

/* ---- accordion (FAQ) ---- */

.accordion { border-block-start: var(--hairline) solid var(--line); }
.accordion__item { border-block-end: var(--hairline) solid var(--line); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  inline-size: 100%;
  min-block-size: 56px;
  padding-block: var(--s-3);
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  text-align: start;
}

.accordion__icon { position: relative; inline-size: 14px; block-size: 14px; flex: none; }

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inline-size: 14px;
  block-size: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease);
}

.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0); }

/* Height is animated by accordion.js; the panel is clipped so the content does
   not spill while it opens. */
.accordion__panel { overflow: hidden; block-size: 0; transition: block-size var(--t-base) var(--ease); }
.accordion__panel-inner { padding-block: 0 var(--s-5); color: var(--fg-body); }

/* ---- prose (rich text) ---- */

.prose { font-size: var(--fs-article); line-height: var(--lh-article); }
.prose > * + * { margin-block-start: var(--s-5); }
.prose h2 { margin-block: var(--s-8) var(--s-4); font-size: var(--fs-h3); }
.prose h3 { margin-block: var(--s-6) var(--s-3); font-size: var(--fs-h4); }
.prose ul, .prose ol { padding-inline-start: var(--s-6); }
.prose li + li { margin-block-start: var(--s-2); }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand); }
.prose img { inline-size: 100%; border-radius: var(--r-md); }

/* ---- helpers the block templates still use ---- */

.cards { display: grid; gap: var(--grid-gap); }
.cards--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.section-head { margin-block-end: var(--s-7); }
.section-head__title { font-size: var(--fs-h2); }

.surface {
  padding: var(--s-6);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}

.surface--alt { background: var(--bg-canvas-2); }

.card__text { color: var(--fg-muted); font-size: var(--fs-body); }

/* Team cards on the About page. */
.team-card { display: grid; gap: var(--s-3); }
.team-card__photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; }
.team-card__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.team-card__name { color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; }
.team-card__role { color: var(--fg-meta); font-size: var(--fs-xs); }

/* The legal layout's table of contents. */
.legal__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.legal__toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-7)); display: grid; gap: var(--s-2); }
.legal__toc a { color: var(--fg-muted); font-size: var(--fs-sm); text-decoration: none; }
.legal__toc a.is-active { color: var(--brand); font-weight: 700; }
.legal__updated { color: var(--fg-meta); font-size: var(--fs-xs); }

.legal-banner {
  padding: var(--s-4) var(--s-5);
  background: var(--accent-soft);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}

.legal { font-size: var(--fs-article); line-height: var(--lh-article); }

@media (max-width: 1199.98px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; }
}

@media (max-width: 991.98px) {
  .section--statement .split { grid-template-columns: minmax(0, 1fr); }
  .split__sticky { position: static; }
  .cards--3up,
  .gallery,
  .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .cards--3up,
  .gallery,
  .gallery--2,
  .gallery--4 { grid-template-columns: minmax(0, 1fr); }
  .section--hero.section--block { padding-block: var(--s-11); }
}

/*
 * The widget row sizes itself to however many widgets actually rendered. The
 * weather panel is absent until an endpoint is configured, so a fixed
 * four-column grid left a visible empty cell.
 */
.widget-row--1 { grid-template-columns: minmax(0, 1fr); }
.widget-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.widget-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.widget-row--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 1600px) {
  .widget-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}