/*
 * Shared styling for rebuilt II Communities pages.
 *
 * One stylesheet for every converted page, so a design change is one edit
 * rather than a hundred. Colours are lifted from the Ceros originals.
 *
 * Unlike the Ceros player, this is genuinely responsive: the original is a
 * fixed 1280px canvas scaled to fit, which is why the embed needs a
 * heightOverride. Here the iframe can simply be sized to its content.
 */

/* --- brand fonts -------------------------------------------------------
 * The real typefaces, served from our own asset pool. The design data names
 * them exactly: the page title and the buttons are FS Kim Medium, the
 * "In Collaboration With" label is Messina Sans Web Bold, and everything else
 * is Roboto. Using Georgia/Helvetica instead is what made the rebuild read as
 * a different page.
 */
@font-face {
  font-family: "FS Kim Medium";
  src: url("../../_assets/media-s3-us-east-1.ceros.com/institutional-investor/fonts/2024/01/04/ea2ae4c5-28ab-4a22-b145-f55c62163e46/fskim-medium.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Messina Sans Web";
  src: url("../../_assets/media-s3-us-east-1.ceros.com/institutional-investor/fonts/2024/01/04/a3e62d98-b791-45af-ad7b-e7d6dbc7dcf8/messinasansweb-bold.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../../_assets/fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmUiAr0klQmz24.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../../_assets/fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmUiAr0klQmz24.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../../_assets/fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAr0klQmz24.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../../_assets/fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmUiAr0klQmz24.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../../_assets/fonts.gstatic.com/s/roboto/v51/KFOKCnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmOClHrs6ljXfMMLoHQuAj-k3Yi128m0g.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --green: #6ABF4B;
  --green-dark: #1F7A34;
  --green-pale: #D9EFD0;
  --slate: #3A444C;
  --ink: #000000;     /* the design sets text to pure black */
  --rule: #D8DDE1;
  --page: #FFFFFF;

  /* The Ceros design is 1280px wide; matching it means the rebuild renders at
     the design's own scale rather than an invented one. */
  --measure: 1280px;
  --gap: 20px;
  --radius: 0;        /* Ceros squares have no corner radius */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.5 "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  /* Named so a full-bleed band inside the page can pull back out to the gutter. */
  --pad: clamp(16px, 3vw, 32px);
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--pad);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* --- masthead ---------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  /* The title and the sponsor logo belong on one row. Let the title shrink
     rather than wrap the logo onto its own line, which drops it to the left
     and reads as a second, unrelated block. */
  flex-wrap: nowrap;
  padding-bottom: 14px;
  border-bottom: 6px solid var(--ink);
}
.masthead h1 {
  margin: 0;
  min-width: 0;          /* without this the title refuses to shrink */
  font-family: "FS Kim Medium", Georgia, "Times New Roman", serif;
  font-weight: 400;
  /* Sizes come from the design, via custom properties the build sets per page.
     min() keeps them from overflowing narrow screens. */
  font-size: min(var(--fs-h1, 38px), 7.2vw);
  line-height: 1.12;
}
.collab { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.collab-label {
  font-family: "Messina Sans Web", "Roboto", sans-serif;
  font-size: min(var(--fs-collab, 17px), 3.4vw);
  font-weight: 400;   /* the face itself is the bold cut */
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;   /* line breaks come from the source content */
}
.collab img { width: auto; max-height: 46px; }

/* Only stack them when there genuinely isn't room. */
@media (max-width: 640px) {
  .masthead { flex-wrap: wrap; }
  .collab { margin-left: auto; }
}

.hero { width: 100%; margin: clamp(16px, 3vw, 28px) 0; }

/* Thin colour strip that sits above a section heading. */
.band-strip { width: 258px; max-width: 60%; height: auto; }

/* --- section bands ----------------------------------------------------- */
.section { margin: clamp(24px, 5vw, 48px) 0; }

.band {
  background: var(--band, var(--green-dark));
  padding: 10px clamp(12px, 2vw, 20px);
}
.band h2 {
  margin: 0;
  color: #fff;
  font-weight: 300;   /* Roboto Light, per the design */
  font-size: min(var(--fs-band, 36px), 6vw);
}
.standfirst {
  /* Runs the full width of the page, as in the original -- a reading-measure
     cap left an obvious empty gap to the right of the band. */
  margin: 12px 0 0;
  color: var(--slate);
  font-style: italic;
  font-size: min(var(--fs-standfirst, 20px), 4.2vw);
}

/* --- featured episode -------------------------------------------------- */
.featured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 18px;
  padding: clamp(16px, 2.5vw, 24px);
  background: var(--tile, var(--green-pale));
  border-left: 10px solid var(--wedge, var(--green));
  border-radius: var(--radius);
}
/* The original draws a large triangular wedge into the bottom-right corner.
   Sized in percentages so it scales with the card instead of being pinned to
   Ceros' fixed canvas. */
.featured::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: clamp(120px, 20%, 220px);
  aspect-ratio: 2 / 1;
  background: var(--wedge, var(--green));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.featured > * { position: relative; }
.featured h3 {
  margin: 0 0 .6em;
  font-size: min(var(--fs-feat, 24px), 4.6vw);
  font-weight: 400;   /* bold comes from the run's spans, via <strong> */
  line-height: 1.25;
}
.featured p,
.featured li { font-size: min(var(--fs-featBody, 22px), 4.4vw); }
.featured p { margin: 0 0 .6em; }

.kicker {
  margin: clamp(20px, 4vw, 32px) 0 10px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--ink);
  font-size: min(var(--fs-kicker, 20px), 4.2vw);
  font-weight: 500;   /* Roboto Medium, per the design */
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- card grids -------------------------------------------------------- */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.card > a {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  padding: 16px;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--tile, var(--green-pale));
  transition: transform .12s ease, box-shadow .12s ease;
}

/* The episode card's own geometry, straight from the design: a 1px grey rule
   around a 312x166 tile, the headline inset 41px so it clears the wedge, and
   the button on the bottom RIGHT. */
.card.episode > a {
  border: 1px solid var(--card-rule, #838383);
  min-height: 166px;
  /* Left inset clears the wedge: Ceros' own x/y sit in different nested
     groups, so its numbers cannot be copied across directly. */
  padding: 24px 16px 16px calc(16px + var(--wedge-w) + 12px);
  justify-content: space-between;
}

/* Episode cards are marked with a small wedge rather than a border -- its
   colour comes from the card's own data, which is why they alternate blue and
   green across the grid.

   It sits INSIDE the padding box, with the headline indented past it, so the
   text runs beside the wedge. Pinning it to the card's corner instead put it
   half over the rounded edge and let the text run across it. */
.card.episode > a { --wedge-w: 26px; --wedge-h: 46px; }
.card.episode > a::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: var(--wedge-w);
  height: var(--wedge-h);
  background: var(--wedge, var(--green));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.card.episode .cta { align-self: flex-end; }
.card > a:hover,
.card > a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgb(0 0 0 / .16);
}
.card h5 {
  margin: 0;
  font-size: min(var(--fs-card, var(--fs-episode, 20px)), 4.4vw);
  font-weight: 400;   /* the design uses Roboto regular here, not bold */
  line-height: 1.25;
}

/* Article tiles carry their own colour from the original design. */
.card.tile h5 { font-size: min(var(--fs-card, var(--fs-tile, 27px)), 5.2vw); font-weight: 400; }
.card.tile > a {
  background: var(--tile, var(--green));
  border-left: 0;
  /* White by default, black where white would not meet contrast. */
  color: var(--tile-ink, #fff);
  min-height: 262px;   /* the tile height in the original design */
}

/* A tile's artwork sits UNDER its text, filling the tile, which is how the
   original was drawn: the picture is the tile's background and the headline is
   set over it. It stays a real <img> so it is still artwork a reader (and the
   mirror comparison) can see. */
.card.tile > a,
.card.tile > .card-body { isolation: isolate; }
.tile-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Text over artwork needs a floor of contrast the picture cannot undercut. */
.card.tile:has(.tile-bg) > a,
.card.tile:has(.tile-bg) > .card-body {
  background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .45)), var(--tile, var(--green));
  color: #fff;
}
/* A picture-only tile is sized by its picture, not padded like a text tile. */
.card.tile.art-only > a,
.card.tile.art-only > .card-body { padding: 0; min-height: 0; background: none; }
.tile-art { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* A tile's standfirst, where the design gave it one. */
.card p {
  margin: 0;
  font-size: min(var(--fs-tile-body, 18px), 3.8vw);
  line-height: 1.35;
}
/* A tile with no link still lays out like one. */
.card > .card-body {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--tile, var(--green-pale));
}

/* Links the layout could not attach to the thing they were drawn over. Styled
   plainly and on purpose: this is a fallback, and it should look like one. */
.stranded-links {
  margin-top: clamp(20px, 4vw, 36px);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.stranded-links h2 { font-size: 1em; font-weight: 700; margin: 0 0 .5em; }
.stranded-links ul { margin: 0; padding-left: 1.2em; }
.stranded-links li { margin: 0 0 .3em; }
.hero-link { display: block; }

.cta {
  align-self: flex-start;
  /* Button colour comes from the card: dark green on episodes, slate on the
     article tiles. */
  background: var(--cta, var(--slate));
  color: #fff;
  font-family: "FS Kim Medium", Georgia, serif;
  font-size: min(var(--fs-cta, 18px), 3.8vw);
  font-weight: 400;
  padding: 6px 16px;
  border: 1px solid #fff;
  border-radius: 15px;
  text-decoration: none;
}
.featured .cta { display: inline-block; margin-top: .4em; }

/* --- disclosure -------------------------------------------------------- */
.disclosure {
  margin-top: clamp(28px, 5vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink);   /* the design sets the disclosure in black, not slate */
  font-size: min(var(--fs-disclosure, 15px), 3.4vw);
  line-height: 1.55;
}
.disclosure h2 { font-size: 1em; font-weight: 700; margin: 0 0 .6em; }
.disclosure p { margin: 0 0 .7em; }

@media (prefers-reduced-motion: reduce) {
  .card > a { transition: none; }
  .card > a:hover, .card > a:focus-visible { transform: none; }
}

/* Bulleted copy lifted out of Ceros text runs. */
.featured ul { margin: 0 0 .6em; padding-left: 1.2em; }
.featured li { margin: 0 0 .3em; }

/* ======================================================================
 * Long-form report family
 *
 * Many screens of editorial down one very tall canvas. The rebuild is a single
 * measured column in drawn order: every run keeps the size the design set it at
 * (--fs), so the page's own typographic hierarchy survives, but it reflows
 * instead of being scaled to fit.
 * ==================================================================== */
.page.editorial {
  --measure: 46rem;
  color: var(--ink);
}
.page.editorial > * { margin: 0 0 clamp(12px, 2vw, 22px); }
.page.editorial h1,
.page.editorial h2,
.page.editorial h3 {
  font-family: var(--ff, var(--font-title, inherit));
  font-size: min(var(--fs, 32px), 9vw);
  line-height: 1.12;
  margin: clamp(20px, 4vw, 40px) 0 clamp(10px, 1.6vw, 18px);
}
.page.editorial h1 { margin-top: 0; }
.page.editorial .copy {
  font-family: var(--ff, var(--font-body, inherit));
  font-size: min(var(--fs, 18px), 4.4vw);
  line-height: 1.55;
}
.page.editorial .copy.small { color: var(--slate); }
.page.editorial .copy p { margin: 0 0 .7em; }
/* The design's own furniture: a section numeral set 300px tall, an opening quote
   mark. Kept because it is on the page, muted because it is not content. */
.page.editorial .marker {
  font-size: min(var(--fs, 120px), 22vw);
  line-height: .85;
  color: var(--rule);
  margin: clamp(24px, 5vw, 48px) 0 0;
}
.page.editorial .figure { margin: clamp(14px, 2.5vw, 26px) 0; border-radius: var(--radius); }
.page.editorial .player { margin: clamp(16px, 3vw, 30px) 0; }
.page.editorial .video-slot { display: grid; }

/* ======================================================================
 * Fireside Chat family
 *
 * A different page from the Communities directory above: one sponsored
 * conversation, set white-on-black, built around a video with thumbnails that
 * switch between episodes. The colours, fonts and type sizes all arrive as
 * custom properties the build reads out of the Ceros design, so a page in
 * another sponsor's palette needs no edit here.
 * ==================================================================== */
.page.fireside {
  background: var(--page, #000);
  color: #fff;
  max-width: 1280px;
}
/* NOTE: five of these pages (rip-reeves-podcast, winton-1-1, jennison-1-1,
   msim-1-1, newsletter-hub) are designed over a full-bleed photograph that the
   rebuild loads, places at z-index -1, and then paints over with the canvas
   colour above -- so the picture is present and invisible. Showing it is a
   one-line change here, but it alters four pages that are already signed off,
   and on the light-canvas ones (winton, jennison: #A2A1A1) the design puts its
   copy on a translucent panel we do not yet rebuild, so the orange call to
   action lands unreadably on the picture. Left as it is deliberately; raised
   with the owner as its own piece of work. */
/* The band of colour has to reach the full width of the iframe, not just the
   content column, or the page sits in a white surround. */
body:has(.page.fireside) { background: var(--page, #000); }

/* The masthead band the design sets the title on, where it has one. It runs the
   full width of the viewport, as the original block runs the full canvas, so the
   padding is pulled back out to the page gutter. */
.fireside .intro.has-banner {
  background: var(--banner);
  margin: calc(-1 * var(--pad, 20px)) calc(-1 * var(--pad, 20px)) 0;
  padding: var(--pad, 20px) var(--pad, 20px) clamp(18px, 3vw, 30px);
}

/* The full-canvas photograph the page is designed over. Behind the content, and
   dimmed, because the original sets white type over it and the picture must not
   compete with the words. */
.fireside { position: relative; }
.fireside .page-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
}

.fireside .eyebrow {
  margin: 0 0 clamp(10px, 2vw, 18px);
  font-family: var(--font-body), "Helvetica Neue", Arial, sans-serif;
  font-size: min(var(--fs-eyebrow, 24px), 5vw);
  line-height: 1.2;
  color: var(--accent, #EF780F);
}

.fireside h1 {
  margin: 0 0 clamp(14px, 2.5vw, 26px);
  text-align: center;
  font-family: var(--font-title), Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: min(var(--fs-h1, 48px), 8vw);
  line-height: 1.1;
}

.fireside .standfirst {
  max-width: 62ch;
  margin: 0 auto clamp(20px, 3vw, 34px);
  text-align: center;
  /* The Communities .standfirst above sets slate italic. A declaration on the
     element beats the white it would otherwise inherit, so restate both. */
  color: #fff;
  font-style: normal;
  font-family: var(--font-body), "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}
/* Each run keeps the size the design gives it -- a standfirst and the pull
   quote under it are not the same size, and forcing one on both is what made
   the rebuild drift. min() keeps them readable on a narrow screen. */
.fireside .copy {
  font-size: min(var(--fs, 18px), 4.2vw);
  /* And the face it is set in: a run naming no font is Ceros' default. */
  font-family: var(--ff, var(--font-body)), "Helvetica Neue", Arial, sans-serif;
}
.fireside .standfirst p { margin: 0 0 .6em; }
/* The call to action is the closing line of the standfirst, in the accent
   colour -- the same way the design draws it. */
.fireside .cta-line { margin: .8em 0 0; }
.fireside a.cta {
  /* The Communities .cta is a button set in FS Kim; here the call to action is
     a sentence of the standfirst and must stay in the standfirst's typeface. */
  font-family: inherit;
  font-size: inherit;
  color: var(--accent, #EF780F);
  text-decoration: none;
  /* Strip the Communities button shape (pill, padding, background) it would
     otherwise inherit -- here the call to action is a line of the copy. */
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.fireside a.cta:hover, .fireside a.cta:focus-visible { text-decoration: none; opacity: .8; }

/* --- the video ---------------------------------------------------------
 * One slot per episode, stacked; only the active one shows. Sized by aspect
 * ratio rather than the design's fixed 1000x570, so it reflows.
 */
.fireside .player {
  max-width: 1000px;
  margin: 0 auto;
}
.fireside .video-slot {
  display: none;
  aspect-ratio: 1000 / 570;
  place-items: center;
  text-align: center;
  background: #111;
  border: 1px dashed #555;
  color: #bbb;
  font-size: 15px;
}
.fireside .video-slot.is-active { display: grid; }
.fireside .video-slot span { color: #777; font-size: 13px; }

/* A slot holding a real player is not a placeholder: drop the dashed box and
   the centring, and let the player fill the width. */
.fireside .video-slot.has-video {
  background: none;
  border: 0;
  place-items: stretch;
}
.fireside .video-slot bitmovin-stream {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- episode thumbnails ------------------------------------------------ */
.fireside .thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 24px);
  list-style: none;
  margin: clamp(20px, 3vw, 36px) auto 0;
  padding: 0;
  max-width: 1000px;
}
.fireside .thumbs button {
  display: block;
  width: 100%;
  padding: 5px;              /* the design frames each still in white */
  border: 0;
  background: #fff;
  cursor: pointer;
}
.fireside .thumbs img { width: 100%; display: block; }
/* The label the design drew above each thumbnail: "Episode 2", or the
   interviewee's name. It belongs with its thumbnail, not in the banner. */
.fireside .thumbs .caption {
  display: block;
  padding: 8px 2px 0;
  font-family: var(--font-body, inherit);
  font-size: min(var(--fs-caption, 18px), 3.6vw);
  line-height: 1.3;
  text-align: left;
}
/* Copy the design drew below the video -- a legal note, speaker biographies. */
.fireside .after-player {
  margin: clamp(20px, 4vw, 36px) 0 0;
  display: grid;
  gap: 14px;
}
/* Which episode is playing has to be visible; the Ceros version showed it only
   by swapping the video. */
.fireside .thumbs li.is-active button { outline: 3px solid var(--accent, #EF780F); }
.fireside .thumbs button:focus-visible { outline: 3px solid var(--accent, #EF780F); }

/* An episode list, for the pages whose episodes are named rather than pictured:
   the podcasts, which are audio only and offer their segments as a column of
   titled buttons. Each button keeps the colour the design painted it (--button,
   set per button from the page's own artwork) and gains what the Ceros original
   never had -- a play marker, a hover state, and a clear mark on the segment
   currently loaded. */
.fireside .thumbs.is-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}
.fireside .thumbs.is-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  padding: 13px 16px;
  border-radius: 8px;        /* as the design draws them; Ceros rounds these */
  background: var(--button, #2D5970);
  color: #fff;
  text-align: left;
  transition: filter .15s ease, transform .15s ease;
}
/* Drawn, not fetched: a mirror that reaches for an icon file is a mirror with a
   dependency. */
.fireside .thumbs.is-list button::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
.fireside .thumbs.is-list button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.fireside .thumbs.is-list .caption { padding: 0; }
/* A button that carries more than its name -- an episode title, and the sentence
   describing it -- stacks them under the name, in a column beside the marker. */
.fireside .thumbs.is-list button:has(.sub) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 12px;
  text-align: left;
}
.fireside .thumbs.is-list button:has(.sub)::before {
  grid-column: 1;
  grid-row: 1;
  margin-top: .4em;
}
.fireside .thumbs.is-list button:has(.sub) > .caption { grid-column: 2; }
/* No weight of our own on any of these: each run is already set in the weight the
   design gave it, and bolding the first line here re-set "Watch Now" from 400 to
   700 and put the page back in front of the reviewer for a difference we had
   invented. Separation comes from spacing instead. */
.fireside .thumbs.is-list .sub { margin-top: 6px; opacity: .93; }
/* The playing segment: filled brighter and flagged down its leading edge, which
   reads on a coloured button where an orange outline does not. */
.fireside .thumbs.is-list li.is-active button {
  outline: 0;
  filter: brightness(1.3);
  box-shadow: inset 4px 0 0 #fff;
}
/* Zeroing the outline above outranks the shared button:focus-visible rule, so
   without this the segment currently playing is the one button that shows nothing
   when you tab onto it. White rather than the page accent: these buttons carry
   their own brand colour and an orange ring on top of it does not read. */
.fireside .thumbs.is-list button:focus-visible,
.fireside .thumbs.is-list li.is-active button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fireside .thumbs.is-list button { transition: none; }
  .fireside .thumbs.is-list button:hover { transform: none; }
}

/* Sponsor small print, where a fireside page carries it. The Communities
   .disclosure above is black on white at its own size; here it is quiet grey
   on the dark page, at the size the design sets. */
.fireside .disclosure {
  margin: clamp(24px, 4vw, 44px) auto 0;
  max-width: 1000px;
  color: #9a9a9a;
  font-family: var(--font-body), "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
.fireside .disclosure .copy { font-size: min(var(--fs, 12px), 3vw); }
.fireside .disclosure p { margin: 0 0 .7em; }

/* Artwork the layout could not place, shown rather than dropped. Like the
   stranded links, it is meant to look like a fallback. */
.stranded-art {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 16px);
  align-items: flex-start;
}
.stranded-art .figure { max-width: min(100%, 320px); height: auto; }
/* A backdrop found this way sits behind the page, as it was drawn. */
.page > .page-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
}
.page { position: relative; }

/* ======================================================================
 * Hub pages: the masthead band, the hero photograph with its title panel,
 * the lead article on its band of colour, and blocks easing in on scroll.
 *
 * All four are opt-in from the markup — a page only gets them when the build
 * found the thing in the design (a full-width fill behind the masthead, a fill
 * sitting inside the hero picture, a single card inside a coloured block). The
 * pages that have none of those render exactly as they did before.
 * ==================================================================== */

/* Masthead drawn as a full-width band of the design's own colour: centred, and
   pulled out to the edges of the page rather than sitting in the gutter. */
.masthead.has-band {
  display: block;
  text-align: center;
  background: var(--masthead);
  border-bottom: 0;
  margin: calc(-1 * var(--pad, 20px)) calc(-1 * var(--pad, 20px)) 0;
  padding: clamp(12px, 2.2vw, 22px) var(--pad, 20px) clamp(10px, 1.8vw, 18px);
}
.masthead.has-band .collab {
  justify-content: center;
  margin-top: 8px;
  gap: 10px;
}
.masthead.has-band .collab-label { text-align: center; }
.masthead.has-band h1 { font-size: min(var(--fs-h1, 38px), 6.4vw); }

/* The hero photograph, with the title panel the design lays over it. Position
   and width arrive as a share of the picture, so the panel holds its place as
   the picture reflows. */
.hero-figure {
  position: relative;
  margin: 0 calc(-1 * var(--pad, 20px));
  overflow: hidden;
}
.hero-figure .hero,
.hero-figure .hero-link { display: block; margin: 0; }
.hero-figure .hero { width: 100%; }
.hero-panel {
  position: absolute;
  left: var(--panel-x, 10%);
  top: var(--panel-y, 35%);
  width: var(--panel-w, 80%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: clamp(6px, 1.4vw, 16px) clamp(10px, 2vw, 22px);
  /* The design's own panel colour, at the weight it is drawn: a wash over the
     photograph, not a solid block that hides it. */
  background: color-mix(in srgb, var(--panel-tint, #ffffff) 42%, transparent);
  color: #fff;
}
.hero-panel p {
  margin: 0;
  text-align: center;
  font-family: var(--font-title), "FS Kim Medium", Georgia, serif;
  font-size: min(var(--fs-hero, 40px), 4.6vw);
  line-height: 1.15;
  text-shadow: 0 1px 10px rgb(0 0 0 / .35);
}

/* The lead article, on the band of colour the design gives it. */
.feature-band {
  background: var(--feature-band);
  margin: clamp(18px, 3vw, 30px) calc(-1 * var(--pad, 20px)) 0;
  padding: clamp(20px, 3.5vw, 40px) var(--pad, 20px);
}
.grid-feature {
  display: grid;
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The lead tile carries more weight than the ones below it. */
.grid-feature .card.tile > a,
.grid-feature .card.tile > .card-body { min-height: clamp(220px, 30vw, 300px); }
.grid-feature .card.tile h5 { font-size: min(var(--fs-card, 30px), 5.4vw); }

/* Text over artwork: dark where the words are, clear where they are not, so a
   headline stays readable over a pale photograph without flattening the picture
   behind it. Weighted to the top, which is where the headline sits — the pale
   pictures (banknotes, a page of percent signs) were the ones losing their
   headline. */
.card.tile:has(.tile-bg) > a,
.card.tile:has(.tile-bg) > .card-body {
  background:
    linear-gradient(rgb(0 0 0 / .68), rgb(0 0 0 / .28) 52%, rgb(0 0 0 / .58)),
    var(--tile, var(--green));
}

/* A floor under the headline whatever the picture does. The gradient handles most
   of it; a page of white percent signs or a banknote needs the letterform itself
   to carry an edge. */
.card.tile:has(.tile-bg) h5,
.card.tile:has(.tile-bg) p { text-shadow: 0 1px 3px rgb(0 0 0 / .55); }

/* Lay the grid the number across the design lays it, where the build could tell.
   Falls back to fitting as many as will go, as before. */
.grid[style*="--cols"] {
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grid[style*="--cols"] { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid[style*="--cols"] { grid-template-columns: minmax(0, 1fr); }
}

/* Blocks easing in as they scroll into view. The hidden state applies only when
   the script has run and added `reveals`, so with no JavaScript everything is
   simply visible. */
html.reveals .reveal {
  opacity: 0;
  transform: translateY(20px);
}
html.reveals .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
/* Already on screen at load: shown outright, with nothing to animate. */
html.reveals .reveal.no-anim { transition: none; }
/* A row arrives as a row, each tile a beat behind the last. */
html.reveals .grid .reveal:nth-child(2).is-in { transition-delay: .07s; }
html.reveals .grid .reveal:nth-child(3).is-in { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
  html.reveals .reveal,
  html.reveals .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* "Back to top", where the design gives the page one. */
.to-top { margin: clamp(14px, 2.5vw, 24px) 0 0; }
.to-top a {
  font-family: var(--font-body), "Roboto", sans-serif;
  font-size: min(var(--fs-totop, 18px), 3.6vw);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}