/* Headlines and section titles. */
@font-face {
  font-family: "MV Aaamu FK";
  src: url("../assets/fonts/MV_AammuFK_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Header measurements come from the 1920 x 346 artboard:
   logo ~292 x 146, 26px gap, nav bar 1788 x 80, 24px bottom. The artboard's
   top strip (theme, search, date and time) is gone: the buttons moved into
   the ticker strip, below the artboard area, and the header is 64px shorter. */
:root {
  --header-h: 346px;
  --nav-h: 80px;
  --nav-key: 56px;                  /* the menu and home buttons */
  --nav-bg: rgba(255, 255, 255, 0.34);
  --nav-bg-hover: rgba(0, 0, 0, 0.1);
  --nav-divider: rgba(255, 255, 255, 0.85);
  --ink: #fff;
  --green-900: #1b6a4f;
  --menu-green: #2a6a3f;
  --green-700: #2f9a6b;
  --green-500: #3fb27f;
  --live: #e53935;
  /* Text in live red: darker, so it keeps 4.5:1 on the light pills. */
  --live-ink: #b3261e;
  --panel-bg: #fff;
  --panel-ink: #1b6a4f;
  --page-bg: #edf6f0;
  --page-ink: #1f3a2c;
  --card-bg: #fff;
  --card-bg-2: #f3faf6;
  --card-border: #d7ebdf;
  --card-shadow: 0 12px 32px rgba(27, 106, 79, 0.1);
  --muted-ink: #5b7566;
  /* One family for now; --font-body is the hook for a second face later. */
  --font-heading: "MV Aaamu FK", "MV Boli", "Faruma", sans-serif;
  --font-body: "MV Aaamu FK", "MV Boli", "Faruma", sans-serif;
  --font-latin: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --live-ink: #ff8a80;
  --panel-bg: #1c2320;
  --panel-ink: #d9efe2;
  --page-bg: #121514;
  --page-ink: #e8e8e8;
  --card-bg: #1a211d;
  --card-bg-2: #1e2823;
  --card-border: #2b3a32;
  --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --muted-ink: #9fb5a8;
}

* { box-sizing: border-box; }

/* The hidden attribute wins over any display rule, so scripts can hide a
   grid or flex container by setting it. */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--page-ink);
}

/* ---------- Header shell ---------- */

.site-header {
  /* The header paints over the page, so the menu and search popovers that
     open from it drop over the content below. Above the page's own stacked
     parts (1-5), below the floating bars (30) and the lightbox (100). */
  position: relative;
  z-index: 10;
  color: var(--ink);
  background-color: #3e8a4c;
  background-image: url("../assets/header-bg.jpg");
  background-image: -webkit-image-set(url("../assets/header-bg.jpg") 1x, url("../assets/header-bg@2x.jpg") 2x);
  background-image: image-set(url("../assets/header-bg.jpg") 1x, url("../assets/header-bg@2x.jpg") 2x);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The nav bar keeps its place at the bottom; the logo centres itself in
   the space above it. The theme and search buttons live in the ticker strip,
   so nothing sits above the logo. */
.header-main {
  position: relative;
  /* Above the ticker strip under it, so the menu that opens from the nav
     bar drops over the strip's headlines and buttons, not under them. The
     search box in the strip (20) still sits above. */
  z-index: 2;
  min-height: calc(var(--header-h) - 64px);
  padding: 24px 66px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

/* Keep the photographic green centre still; the globes are separate layers.
   Without canvas/JavaScript the original header photograph remains intact. */
.site-header.has-header-globes {
  background-size: 220% 100%;
  background-position: center;
}
.has-header-globes .header-main { isolation: isolate; }
.header-globes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 113, 107, .88), transparent 30%, transparent 67%, rgba(0, 105, 99, .9));
}
.header-globe {
  position: absolute;
  width: clamp(340px, 33vw, 620px);
  aspect-ratio: 1;
  right: -4%;
  top: 50%;
  transform: translateY(-42%);
  opacity: .58;
}
.header-globe--left {
  width: clamp(280px, 27vw, 510px);
  right: auto;
  left: -8%;
  top: 5%;
  transform: translateY(-45%);
  opacity: .32;
}
@media (max-width: 640px) {
  .header-globe { right: -160px; opacity: .4; }
  .header-globe--left { left: -160px; right: auto; opacity: .24; }
}

/* ---------- Theme and search, at the left end of the ticker strip ---------- */

.header-tools {
  position: relative;
  flex: none;
  display: flex;
  gap: 2px;
  direction: ltr;
}

.tool {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease;
}

.tool:hover,
.tool[aria-expanded="true"],
.tool[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); }

.tool:focus-visible,
.menu-button:focus-visible,
.search-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.tool-icon {
  width: 20px;
  height: 20px;
}

/* The search button shows an X while the search box is open. */
.tool-icon-close { display: none; }
.tool[aria-expanded="true"] .tool-icon-open { display: none; }
.tool[aria-expanded="true"] .tool-icon-close { display: block; }

/* The box carries the one border; it turns green while the input has focus.
   It opens under the strip, over the page. */
.search {
  position: absolute;
  z-index: 20;
  top: calc(100% + 12px);
  left: 0;
  display: flex;
  gap: 6px;
  width: min(380px, calc(100vw - 48px));
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  direction: rtl;
  transition: border-color 0.15s ease;
}

.search:focus-within { border-color: var(--green-500); }

/* Titles that match while the reader types (js/header.js), on a row of their
   own under the field. */
.search { flex-wrap: wrap; }

.search-suggest {
  flex: 1 1 100%;
  max-height: min(60vh, 360px);
  margin: 2px 0 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--card-border);
  list-style: none;
  overflow-y: auto;
}

.search-suggest[hidden] { display: none; }

.search-suggest a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--panel-ink);
  font-size: 15px;
  line-height: 1.7;
  text-decoration: none;
}

.search-suggest a:hover,
.search-suggest [aria-selected="true"] a { background: var(--card-bg-2); }
.search-suggest-all a { color: var(--green-700); font-size: 14px; }

.search[hidden] { display: none; }

/* Thaana vowel marks sit well above the letters, so the field needs a tall
   line box or the top of the text is cut off. */
.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--panel-ink);
  font: inherit;
  font-size: 17px;
  line-height: 44px;
}

.search-input:focus { outline: none; }

/* No built-in clear button; the search button closes the box instead. */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* Hint text, shown until the field has a value. */
.search-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  overflow: hidden;
  color: var(--panel-ink);
  opacity: 0.55;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.search-input:not(:placeholder-shown) + .search-label { display: none; }

.search-submit {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--green-700);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.search-submit svg { width: 20px; height: 20px; }

.search-submit-clear { display: none; }
.search.has-text .search-submit-open { display: none; }
.search.has-text .search-submit-clear { display: block; }

/* ---------- Logo ---------- */

.brand {
  display: block;
  margin: auto 0;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: 232px;
  height: auto;
}

.brand:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ---------- Category bar ---------- */

.topnav {
  position: relative;
  width: 100%;
  max-width: 1788px;
  height: var(--nav-h);
  display: flex;
  background: var(--nav-bg);
  border-radius: 14px;
}

/* Hover tints on the end items follow the bar's corners. */
.topnav-scroll li:first-child a { border-start-start-radius: 14px; border-end-start-radius: 14px; }
.topnav-scroll li:last-child a { border-start-end-radius: 14px; border-end-end-radius: 14px; }

.topnav-scroll {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.topnav-scroll::-webkit-scrollbar { display: none; }

.topnav-scroll ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  min-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);   /* each at least its label, the rest shared */
}

.topnav-scroll li {
  position: relative;
  min-width: 0;
}

/* Divider between items: a short line on the leading edge of every item after
   the first. It is drawn at full height and scaled to 64%, so on hover it can
   grow to the full height of the bar. The 1.4s transition is deliberate. */
.topnav-scroll li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--nav-divider);
  transform: scaleY(0.64);
  transform-origin: 50% 50%;
  transition: transform 1.4s ease;
}

/* Both dividers beside the hovered item: its own, and the next item's. */
.topnav-scroll li:hover::before,
.topnav-scroll li:hover + li::before {
  transform: scaleY(1);
}

.topnav a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  /* Same slow pace as the dividers beside it. */
  transition: background-color 1.4s ease;
}

/* A slightly darker tint, not a lighter one, so the item settles in rather than lights up. */
.topnav a:hover { background: var(--nav-bg-hover); }

.topnav a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.topnav .icon {
  flex: none;
  width: 30px;
  height: 30px;
}

/* ---------- Menu ----------
   Hidden while all 11 items fit (desktop and laptops). Below 1024px the row
   scrolls and this button sits pinned at its left end, opening the
   two-column list. */

.menu {
  display: none;
  flex: none;
  height: 100%;
  border-inline-start: 1px solid var(--nav-divider);
}

/* Sits beside the menu button wherever that button shows: a way back to the
   front page without scrolling the bar. It takes the same box as the menu
   button, so the pair reads as two equal keys. */
.nav-home {
  display: none;
  flex: none;
  width: var(--nav-key);
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  transition: background-color 0.15s ease;
}

/* .topnav a sets display: flex on every link in the bar; this keeps the
   home key hidden until the menu key shows. */
.topnav .nav-home { display: none; }

.nav-home svg { width: 24px; height: 24px; }
.nav-home:hover { background: rgba(255, 255, 255, 0.3); }
.nav-home:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.menu-button {
  width: var(--nav-key);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 14px 0 0 14px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.menu-button:hover,
.menu-button[aria-expanded="true"] { background: rgba(255, 255, 255, 0.3); }

.menu-icon { width: 24px; height: 24px; }
.menu-icon-close { display: none; }
.menu-button[aria-expanded="true"] .menu-icon-open { display: none; }
.menu-button[aria-expanded="true"] .menu-icon-close { display: block; }

/* The panel spans the whole bar (.topnav is the positioning context). */
.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border-radius: 14px;
  /* Same left-to-right shading as the ticker strip, built on #2a6a3f. */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--menu-green) 82%, #000) 0%,
    var(--menu-green) 50%,
    color-mix(in srgb, var(--menu-green) 72%, #000) 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.menu-panel[hidden] { display: none; }

.menu-panel ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Row dividers only: a line above every row after the first, nothing
   vertical. When the item count is odd, an empty cell completes the last
   row so its line runs the full width. */
.menu-panel li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.18); }

.menu-panel ul:has(li:last-child:nth-child(odd))::after {
  content: "";
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.menu-panel a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 15px 18px;
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.menu-panel .icon {
  flex: none;
  width: 28px;
  height: 28px;
}

/* ---------- Ticker strip ---------- */

.ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 28px;
  color: var(--ink);
  /* Tint over the header photo, sampled from its own greens and darkened for contrast. */
  background: linear-gradient(90deg, rgba(14, 75, 58, 0.78) 0%, rgba(26, 92, 52, 0.66) 50%, rgba(10, 64, 48, 0.8) 100%);
}

.ticker-news {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A rule after the headlines, the social links, another rule, then the theme
   and search buttons, at the left. */
.ticker-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ticker-rule {
  width: 1px;
  height: 22px;
  background: var(--nav-divider);
  opacity: 0.5;
}

.ticker-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--live);
  animation: ticker-pulse 1.8s ease-out infinite;
}

@keyframes ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(229, 57, 53, 0); }
}

.ticker-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* The headlines run in a loop (js/header.js): a reel of copies of the list,
   moved one list's width at a steady speed, then started again. */
.ticker-reel {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ticker-list {
  flex: none;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker-list li {
  flex: none;
  display: flex;
  align-items: center;
}

/* A small dot after every headline, the last one too, so the spacing stays
   even where one copy meets the next. */
.ticker-list li::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-inline: 22px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.ticker-headline {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  line-height: 1.3;
}

.ticker-headline:hover { text-decoration: underline; }

.ticker-headline:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}



.ticker-social {
  flex: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  direction: ltr;
}

.ticker-social a {
  display: block;
  color: var(--ink);
  line-height: 0;
  opacity: 0.92;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ticker-social a:hover { opacity: 1; transform: translateY(-1px); }

.ticker-social a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.ticker-social svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-dot { animation: none; }
  /* The headlines stay put; the list scrolls sideways by hand. */
  .ticker-track {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ticker-track::-webkit-scrollbar { display: none; }
  .topnav-scroll li + li::before,
  .topnav a,
  .featured-track,
  .featured-media img,
  .story-media img,
  .section-more svg { transition: none; }
}

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

.page {
  max-width: 1920px;
  margin: 0 auto;
  padding: 40px 66px 48px;
}

/* ---------- Featured stories + portrait ad ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 40px;
}

.featured {
  --featured-pad: 28px;   /* the card's padding; the dots sit in it (see .featured-dots) */
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--card-bg-2) 100%);
  box-shadow: var(--card-shadow);
  padding: var(--featured-pad);
}

/* The viewport is at least one photo tall (see .featured-slide) and grows
   to fill the card when the poster beside it is taller, the photo growing
   with it. */
.featured-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -18px;
  padding: 0 18px;
  overflow: hidden;
  container-type: inline-size;
}

.featured-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

/* Height = the photo column's width x 3/4: (viewport - gap) x 1.1 / 2.1 x 0.75 */
/* Slides sit 36px apart, so the next one never touches the current one as
   they move; the viewport's own padding keeps the visible slide aligned. */
.featured-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  min-height: calc((100cqw - 36px - 36px) * 1.1 / 2.1 * 0.75);
  margin-inline-end: 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: minmax(0, 1fr);   /* the one row fills the slide, never past it */
  gap: 36px;
  align-items: stretch;
}

/* Beside a poster the card takes the poster's height exactly: sized as if
   it were empty (contain: size), it stretches to the row the poster sets,
   and the slide fills it. The excerpt goes, and a long title stops at
   three lines, so the card never needs more room than a short poster
   gives it. */
@media (min-width: 1024px) {
  .hero:has(> .ad-portrait:not([hidden])) .featured {
    contain: size;
    min-height: 360px;
  }
  .featured-excerpt { display: none; }
}

.featured-media {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-border);
}

.featured-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured-media:hover img { transform: scale(1.03); }

.featured-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /* The clip that keeps the excerpt in the card starts 14px out on each
     side, so the big title's first and last letters keep their ink: at
     54px the Thaana glyphs reach past their own boxes. */
  margin-inline: -14px;
  padding: 8px 14px 12px;
  overflow: hidden;
}

/* The lead story's headline, the largest on the page with the reports'. */
/* Three lines at most, so every slide is the same size. The clip starts
   14px out on each side, so the first and last letters keep their ink. */
.featured-title {
  flex: none;
  font-family: var(--font-heading);
  margin: 0 -14px 18px;
  padding-inline: 14px;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.featured-title a {
  color: var(--page-ink);
  text-decoration: none;
}

.featured-title a:hover { color: var(--green-700); }

.featured-meta {
  flex: none;
  display: flex;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--green-700);
}

.featured-meta a {
  color: var(--green-700);
  text-decoration: none;
}

.featured-meta a:hover { text-decoration: underline; }

.featured-meta span::before {
  content: "·";
  margin-inline-end: 14px;
  color: var(--muted-ink);
}

.featured-excerpt {
  margin: 0;
  font-size: 17px;
  line-height: 2;
  color: var(--muted-ink);
  flex: none;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 4em; /* Two complete lines at line-height: 2. */
  overflow: hidden;
}

/* The dots sit in the card's bottom-left corner, in its padding, as far
   from the left edge as from the bottom: under the words, never over them,
   and the card no taller. */
.featured-dots {
  position: absolute;
  left: calc(var(--featured-pad) / 2);
  bottom: calc(var(--featured-pad) / 2);
  display: flex;
  gap: 10px;
}

.featured-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card-border);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.featured-dots button:hover { background: var(--green-500); }
.featured-dots button[aria-selected="true"] { background: var(--green-700); transform: scale(1.15); }

.featured-dots button:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
}

/* The fill of the dot on show, which js/header.js runs while the slide
   waits to move on. It shows on phones only, where that dot is a short bar. */
.featured-dot-fill {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green-700);
  transform-origin: right center;   /* the start, in right-to-left reading */
}

/* ---------- Titled section: latest stories ---------- */

.section { margin-top: 48px; }

/* Grids inside a bordered section need no extra top gap. */
.section .story-grid,
.section .album-grid { margin-top: 26px; }

/* A thin line runs round the whole section; the head sits inside its top
   edge, with the title tab on a thicker rule under it. */
.section {
  position: relative;
  border: 1px solid rgba(20, 131, 107, 0.22);   /* a faint hairline */
  border-radius: 14px;
  padding: 18px 20px 22px;
}

:root[data-theme="dark"] .section { border-color: rgba(63, 178, 127, 0.22); }

.section-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  border-bottom: 3px solid var(--green-500);
}

.section-title {
  font-family: var(--font-heading);
  margin: 0;
  padding: 10px 28px 8px;
  border-radius: 10px 10px 0 0;
  background: var(--green-500);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding-bottom: 12px;
  color: var(--green-700);
  text-decoration: none;
  font-size: 17px;
  line-height: 1;
}

.section-more svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.section-more:hover { color: var(--green-900); }
.section-more:hover svg { transform: translateX(-4px); }

.story-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 28px;
}

.story {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-media {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--card-border);
  box-shadow: var(--card-shadow);
}

.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.story:hover .story-media img { transform: scale(1.04); }

/* Category and date sit on the photo as small white pills, grouped at the
   start side (the right in RTL). */
.story-pills {
  position: absolute;
  inset: auto 10px 10px;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

/* Frosted: translucent white over a blur of the photo behind it. */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  color: var(--green-900);
  font-size: 11px;
  line-height: 1.6;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

/* Breaking news: a story in the ticker carries the ticker's red dot and
   the word "breaking" on its card, as a pill over photos (.pill-breaking)
   and as a mark beside other labels (.breaking-mark). */
.pill-breaking,
.breaking-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--live-ink);
}

.breaking-mark {
  margin-inline-end: 10px;
  font-size: 13px;
  line-height: 1.6;
  vertical-align: middle;
}

.pill-breaking::before,
.breaking-mark::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  background: var(--live);
  animation: breaking-pulse 1.8s ease-out infinite;
}

@keyframes breaking-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); }
  100% { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
}

/* In the slider's meta line every span gets a "·" before it; the mark
   keeps its dot instead. */
.featured-meta .breaking-mark { margin: 0; }
.featured-meta .breaking-mark::before { content: ""; margin: 0; }

/* Over a photo (the world lead) the word reads in white. The pills stay
   light in the dark theme too, so their word stays dark red. */
.world-lead .breaking-mark { color: #fff; }
:root[data-theme="dark"] .pill-breaking { color: #b3261e; }

:root[data-theme="dark"] .world-lead .breaking-mark { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pill-breaking::before,
  .breaking-mark::before { animation: none; }
}

.story-title {
  font-family: var(--font-heading);
  margin: 0;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.story-title a {
  color: var(--green-900);
  text-decoration: none;
  transition: color 0.2s ease;
}

.story:hover .story-title a { color: var(--green-700); }

.story-media:focus-visible,
.story-title a:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
  border-radius: 4px;
}

:root[data-theme="dark"] .story-title a { color: #d9efe2; }
:root[data-theme="dark"] .story:hover .story-title a { color: var(--green-500); }

/* ---------- Islands in the news: a map in dots ---------- */

/* The stage holds the chain of atolls in dots (a canvas), each atoll's
   letters, a mark for each island with a story, and the card. js/header.js
   lays all of it out and glides between the whole chain and one atoll.
   Without the script the islands are a plain list of links (see the end). */
/* The note sits in the section's bottom right corner, over the sea. */
.atlas-note {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 16px;
  margin: 0;
  max-width: 60%;
  color: var(--muted-ink);
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
  text-shadow: 0 0 2px var(--page-bg), 0 0 2px var(--page-bg), 0 0 5px var(--page-bg);
  pointer-events: none;
}

.atlas-stage {
  /* What the pointer picks shows in this blue: js/header.js paints the
     atoll, or an island's glow, in it. Text takes a deeper shade, so it
     reads at 4.5:1. */
  --atlas-pick: #2078b4;
  --atlas-pick-ink: #1a6496;
  position: relative;
  margin-top: 0;
  aspect-ratio: 5 / 1;
  min-height: 220px;
  overflow: hidden;
  border-radius: 12px;
}

.atlas-stage.is-pointing { cursor: pointer; }

.atlas-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atlas-atolls,
.atlas-pins {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* An atoll's letters at its middle. A halo in the page's colour keeps them
   readable over the dots. */
.atlas-atoll {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  padding: 2px 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--green-900);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--page-bg), 0 0 2px var(--page-bg), 0 0 5px var(--page-bg);
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0s;
}

.atlas-atoll[hidden] { display: none; }

/* An atoll with no story is only its letters. */
.atlas-atoll.is-empty {
  color: var(--muted-ink);
  pointer-events: none;
  cursor: default;
}

.atlas-atoll:hover,
.atlas-atoll.is-hover { color: var(--atlas-pick-ink); }

.atlas-atoll:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 1px;
}

/* While one atoll is in view the letters go; its name takes the top corner,
   with the way back. On the way back they wait until the chain is in place. */
.is-zoomed .atlas-atoll,
.is-leaving .atlas-atoll {
  opacity: 0;
  visibility: hidden;
  transition: color 0.2s ease, opacity 0.35s ease, visibility 0s 0.35s;
}

/* The mark's colour is a registered property, so a mark eases into the
   pick colour instead of jumping to it. */
@property --pin {
  syntax: "<color>";
  inherits: true;
  initial-value: #1b6a4f;
}

.atlas-pin a { transition: --pin 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

.atlas-pin {
  --pin: var(--green-900);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: opacity 0.35s ease;
}

.atlas-pin.is-active { z-index: 2; }

/* The mark: a dot in a ring, in a target big enough to tap. Small while the
   whole chain is in view; full size for the islands of the atoll in view,
   which alone take the pointer. */
.atlas-pin a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pin) 0 3.5px, var(--page-bg) 4px 5.5px, transparent 6px);
  opacity: 0.5;   /* quiet under the atolls' dots until its atoll is in view */
  transform: scale(0.6);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.is-zoomed .atlas-pin.is-near { pointer-events: auto; }
.is-zoomed .atlas-pin.is-near a::before { opacity: 1; transform: scale(1); }
.is-zoomed .atlas-pin.is-near a:hover::before,
.is-zoomed .atlas-pin.is-near.is-active a::before { transform: scale(1.4); }
.is-zoomed .atlas-pin:not(.is-near) { opacity: 0.45; }

/* An island with a story from the last day sends out a slow ring. */
.atlas-pin.is-fresh a::after {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--green-500);
  border-radius: 50%;
  pointer-events: none;
  animation: atlas-ring-small 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.is-zoomed .atlas-pin.is-near.is-fresh a::after { animation-name: atlas-ring; }

@keyframes atlas-ring {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(2.8); opacity: 0; }
}

@keyframes atlas-ring-small {
  from { transform: scale(0.4); opacity: 0.8; }
  to { transform: scale(1.8); opacity: 0; }
}

/* The island's name beside its mark, on the side js/header.js finds room
   (data-side). It shows once its atoll is in view. */
.atlas-label {
  position: absolute;
  top: 0;
  left: 10px;
  transform: translateY(-50%);
  padding: 0 3px;
  color: var(--page-ink);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--page-bg), 0 0 2px var(--page-bg), 0 0 4px var(--page-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s 0.35s, color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.atlas-pin[data-side="above"] .atlas-label { top: auto; bottom: 8px; left: 0; right: auto; transform: translateX(-50%); }
.atlas-pin[data-side="below"] .atlas-label { top: 8px; bottom: auto; left: 0; right: auto; transform: translateX(-50%); }
.atlas-pin[data-side="left"] .atlas-label { top: 0; bottom: auto; left: auto; right: 10px; transform: translateY(-50%); }
.atlas-pin[data-side="right"] .atlas-label { top: 0; bottom: auto; left: 10px; right: auto; transform: translateY(-50%); }

/* A name with no room is left to screen readers; the card shows it. */
.is-named .atlas-pin.is-near:not(.is-quiet) .atlas-label {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s, color 0.2s ease;
}

.atlas-pin a:hover .atlas-label,
.atlas-pin.is-active .atlas-label { color: var(--atlas-pick-ink); }
.atlas-pin a:hover,
.atlas-pin.is-active a { --pin: var(--atlas-pick); }

.atlas-pin a:focus-visible { outline: none; }
.atlas-pin a:focus-visible::before { box-shadow: 0 0 0 2px var(--green-700); }
.atlas-pin a:focus-visible .atlas-label {
  outline: 2px solid var(--green-700);
  outline-offset: 1px;
  border-radius: 4px;
}

/* The atoll in view: its name, how many islands, and the way back. */
.atlas-focus {
  position: absolute;
  z-index: 3;
  top: 10px;
  inset-inline-start: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.atlas-focus[hidden] { display: none; }

.atlas-focus-name {
  margin: 0;
  color: var(--green-900);
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.5;
  text-shadow: 0 0 2px var(--page-bg), 0 0 2px var(--page-bg), 0 0 5px var(--page-bg);
}

.atlas-focus-count {
  color: var(--muted-ink);
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 0 2px var(--page-bg), 0 0 2px var(--page-bg), 0 0 5px var(--page-bg);
}

.atlas-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 6px;
  padding: 5px 12px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--green-700);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.atlas-back svg { width: 14px; height: 14px; }

.atlas-back:hover {
  color: var(--green-900);
  border-color: var(--green-500);
}

.atlas-back:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}

/* The latest headline from the island under the pointer, or tapped once. */
.atlas-card {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: min(290px, calc(100% - 24px));
  padding: 12px 16px 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.atlas-card[hidden] { display: none; }

.atlas-card-place {
  margin: 0;
  color: var(--muted-ink);
  font-size: 14px;
  line-height: 1.6;
}

.atlas-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 2px;
  color: var(--page-ink);
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.65;
  text-decoration: none;
  transition: color 0.2s ease;
}

.atlas-card-title:hover { color: var(--green-700); }

.atlas-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin: 8px 0 0;
  color: var(--muted-ink);
  font-size: 14px;
  line-height: 1.6;
}

.atlas-card-more {
  color: var(--green-700);
  text-decoration: none;
}

.atlas-card-more:hover { color: var(--green-900); }

.atlas-card a:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 4px;
}

:root[data-theme="dark"] .atlas-pin { --pin: var(--green-500); }
:root[data-theme="dark"] .atlas-stage { --atlas-pick-ink: #5fa8dc; }
:root[data-theme="dark"] .atlas-atoll,
:root[data-theme="dark"] .atlas-focus-name,
:root[data-theme="dark"] .atlas-card-title { color: #d9efe2; }
:root[data-theme="dark"] .atlas-atoll:hover,
:root[data-theme="dark"] .atlas-atoll.is-hover,
:root[data-theme="dark"] .atlas-pin a:hover .atlas-label,
:root[data-theme="dark"] .atlas-pin.is-active .atlas-label { color: var(--atlas-pick-ink); }
:root[data-theme="dark"] .atlas-card-title:hover,
:root[data-theme="dark"] .atlas-back:hover,
:root[data-theme="dark"] .atlas-card-more { color: var(--green-500); }
:root[data-theme="dark"] .atlas-atoll.is-empty { color: var(--muted-ink); }

@media (prefers-reduced-motion: reduce) {
  .atlas-atoll,
  .atlas-pin,
  .atlas-pin a,
  .atlas-pin a::before,
  .atlas-label { transition: none; }
  .atlas-pin.is-fresh a::after { animation: none; opacity: 0.6; transform: scale(1.5); }
}

/* Without the script: the islands as a list of links. */
.atlas:not(.is-live) .atlas-note { position: static; max-width: none; margin-top: 12px; text-align: start; }
.atlas:not(.is-live) .atlas-stage { aspect-ratio: auto; min-height: 0; overflow: visible; }
.atlas:not(.is-live) .atlas-dots,
.atlas:not(.is-live) .atlas-atolls,
.atlas:not(.is-live) .atlas-focus { display: none; }
.atlas:not(.is-live) .atlas-pins {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 12px;
  pointer-events: auto;
}
.atlas:not(.is-live) .atlas-pin { position: static; pointer-events: auto; }
.atlas:not(.is-live) .atlas-pin a::before,
.atlas:not(.is-live) .atlas-pin a::after { display: none; }
.atlas:not(.is-live) .atlas-pin a { color: var(--green-700); text-decoration: none; }
.atlas:not(.is-live) .atlas-label {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  font-size: 15px;
}

/* Phones: the chain stands upright, north at the top. */
@media (max-width: 640px) {
  .atlas-note { right: 10px; bottom: 10px; max-width: 36%; font-size: 12px; }
  .atlas-stage { aspect-ratio: 1 / 2; min-height: 0; }
  .atlas-atoll { padding: 1px 5px; font-size: 13px; }
  .atlas-label { font-size: 12px; }
  .atlas-focus { top: 8px; gap: 8px; }
  .atlas-focus-name { font-size: 16px; }
}

/* ---------- Advertisements ---------- */

.ad {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ad a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.ad img {
  display: block;
  width: 100%;
  height: auto;
}

/* Beside the slider the poster shows whole, at the column's width, and the
   slider's card grows to the poster's height (see .featured-viewport). */
.ad-portrait { align-self: start; }

.ad-banner img { aspect-ratio: 1720 / 220; object-fit: cover; }

/* The label sits inside the creative, in its bottom-right corner, as a
   frosted pill like the ones on the story cards. */
.ad-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  color: var(--green-900);
  font-size: 11px;
  line-height: 1.6;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1500px) {
  .header-main { padding-inline: 32px; }
  .topnav a { font-size: 18px; gap: 8px; }
  .topnav .icon { width: 26px; height: 26px; }
}

/* On desktops and laptops the logo leaves its own row and sits at the start
   of the nav bar's row, on the right, centred on the bar. The header is then
   that one row. The logo and the bar shrink with the window (see "Laptops"
   at the end of this file), so all eleven items fit beside the logo from
   1024px up. */
@media (min-width: 1024px) {
  .header-main {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: end;
    align-items: center;
    column-gap: 28px;
  }
  .brand { margin: 0; }
  .brand-logo { width: 184px; }
}

/* Below this width the 11 items no longer fit: the row scrolls sideways,
   and the menu button appears pinned at the left end of the bar, outside the
   scrolling part, opening the two-column list. */
@media (max-width: 1023px) {
  .menu { display: block; }
  .topnav .nav-home { display: flex; }
  /* The home button and the menu button read as one block, so no rule
     between them; the rule stays where they meet the scrolling part. */
  .menu { border-inline-start: 0; }
  .topnav-scroll { border-inline-end: 1px solid var(--nav-divider); }
  /* Whole items, three to a view (set below), instead of eleven squeezed
     into the bar. */
  .topnav-scroll { scroll-snap-type: x mandatory; }
  .topnav-scroll li { scroll-snap-align: start; }
  .topnav-scroll li:last-child a { border-start-end-radius: 0; border-end-end-radius: 0; }
}

@media (max-width: 1023px) {
  /* The hero's portrait ad now sits right above this banner: show one ad,
     not two in a row. */
  .hero + .ad-banner { display: none; }
  .topnav-scroll ul { grid-auto-columns: calc(100% / 3); }
  .page { padding-inline: 32px; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .hero { grid-template-columns: 1fr; }
  .ad-portrait { max-width: 360px; margin: 0 auto; width: 100%; }
  .featured-title { font-size: 34px; }
}

@media (max-width: 760px) {
  .featured { padding: 18px 18px 16px; }
  .featured-slide { grid-template-columns: 1fr; gap: 18px; }
  /* One column: the photo, then the words. Slides stretch to the tallest
     one, so the rows keep their own heights and any spare room goes under
     the words, not between them and the photo. */
  .featured-slide { height: auto; min-height: 0; align-items: start; grid-template-rows: none; align-content: start; }
  .featured-media { height: auto; aspect-ratio: 4 / 3; }
  .featured-body { padding-bottom: 0; overflow: visible; }
  /* The dots under the words, in the middle of the card; the one on show is
     a short bar that fills while the slide waits to move on. */
  .featured-dots { position: static; justify-content: center; width: auto; margin: 16px 0 0; padding: 0; }
  .featured-dots button { width: 10px; height: 10px; transform: none; }
  .featured-dots button[aria-selected="true"] { position: relative; width: 34px; border-radius: 999px; overflow: hidden; background: var(--card-border); transform: none; }
  .featured-dots button[aria-selected="true"] .featured-dot-fill { display: block; }
  .featured-title { font-size: 28px; margin-bottom: 12px; }
  .featured-meta { margin-bottom: 12px; }
  .featured-excerpt { font-size: 16px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .header-main {
    min-height: 0;
    padding: 20px 16px 16px;
    gap: 18px;
  }
  .brand-logo { width: 140px; }
  :root { --nav-key: 50px; }
  /* The home key sits right against the menu key, with room only on the
     side toward the scrolling items. */
  .topnav .nav-home { width: auto; padding: 0 12px 0 0; }
  .topnav a { font-size: 14px; gap: 6px; padding: 0 4px; }
  .topnav .icon { width: 22px; height: 22px; }
  .menu-panel a { padding: 13px 14px; font-size: 19px; gap: 12px; }
  /* Two rows: the headlines across the full width, then the links and
     buttons at the left. */
  .ticker { flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; padding: 8px 14px; }
  .ticker-news { flex-basis: 100%; }
  .ticker-rule-news { display: none; }
  .ticker-end { gap: 10px; }
  .ticker-headline { font-size: 14px; }
  .ticker-list li::after { margin-inline: 12px; }
  .ticker-social { gap: 10px; }
  .ticker-social svg { width: 18px; height: 18px; }
  /* The search box takes the room left in the strip's second row, where
     the search button was: between the theme button and the rule before
     the social links. Its suggestions open under the strip, across its
     width. */
  .ticker { position: relative; }
  .ticker-end { flex: 1 1 100%; min-width: 0; }
  .header-tools { display: contents; }
  #search-toggle { display: none; }
  #theme-toggle { order: 2; }
  .search,
  .search[hidden] {
    order: 1;
    position: static;
    /* A flex item takes z-index even unpositioned: without this, the
       desktop popover's 20 would lift the box over the open menu. */
    z-index: auto;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 0;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
  .search:focus-within { border-color: var(--ink); }
  .search-input { height: 34px; padding: 0 12px; color: var(--ink); font-size: 14px; line-height: 34px; }
  .search-label { padding: 0 12px; color: var(--ink); opacity: 0.8; font-size: 14px; }
  .search-submit { width: 34px; height: 34px; border-radius: 50%; background: transparent; }
  .search-submit svg { width: 18px; height: 18px; }
  .search-suggest {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 10px;
    right: 10px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--panel-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  }
  .page { padding: 24px 16px 32px; }
  .hero { gap: 20px; margin-bottom: 24px; }
  .section { margin-top: 32px; }
  .section-title { padding: 8px 20px 6px; font-size: 20px; }
  .section-more { font-size: 15px; }
  /* Two cards per row on phones, with the type and label scaled to fit. */
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 22px; }
  .story { gap: 6px; }
  .story-media { border-radius: 12px; }
  .story-pills { inset: auto 8px 8px; gap: 5px; }
  .pill { padding: 1px 7px; font-size: 10px; }
  .story-title { font-size: 15px; line-height: 1.7; }
}

/* ======================================================================
   People: dark panel with a snapping row of portrait cards
   ====================================================================== */

.people {
  position: relative;
  margin-top: 48px;
  padding: 28px 32px 22px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #17382d 0%, #1b4a3a 60%, #1d5843 100%);
  box-shadow: var(--card-shadow);
}

.people-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}

.people-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.people-more { color: #fff; opacity: 0.85; }
.people-more:hover { color: #fff; opacity: 1; }

.people-track {
  list-style: none;
  margin: 0;
  padding: 4px 0 10px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.people-track::-webkit-scrollbar { display: none; }

.person {
  flex: 0 0 250px;
  scroll-snap-align: start;
}

.person a {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #245c37;
  color: #fff;
  text-decoration: none;
  transition: transform 0.4s ease;
}

.person a:hover { transform: translateY(-4px); }

.person a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text sits on a gradient at the foot of the photo. */
.person-body {
  position: absolute;
  inset: auto 0 0;
  padding: 90px 16px 16px;
  background: linear-gradient(180deg, rgba(10, 30, 22, 0) 0%, rgba(10, 30, 22, 0.86) 100%);
  text-align: center;
}

.person-body time {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  opacity: 0.85;
}

.person-body strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

.people-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.people-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.people-dots button:hover { background: rgba(255, 255, 255, 0.7); }
.people-dots button[aria-selected="true"] { background: var(--green-500); transform: scale(1.2); }
.people-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ======================================================================
   Photo albums: the newest album large, the next five beside it
   ====================================================================== */

/* A dark panel in the night greens, lit from behind by a blurred copy of the
   lead photo, so each new album tints the section. */
.gallery {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 48px;
  padding: 28px 32px 32px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #17382d 0%, #1b4a3a 60%, #1d5843 100%);
  box-shadow: var(--card-shadow);
}

.gallery-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.gallery-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.2);
}

/* Night palm over the blur keeps the white text at full contrast. */
.gallery-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, #17382d 55%, transparent), color-mix(in srgb, #17382d 85%, transparent));
}

.gallery-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}

.gallery-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.gallery-title svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--green-500);
}

.gallery-more { padding-bottom: 0; color: #fff; opacity: 0.85; }
.gallery-more:hover { color: #fff; opacity: 1; }

.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 28px;
}

/* The large card fills the height of the list beside it. It holds one slide
   per album, stacked; the one on show fades in over the last. */
.gallery-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 14px;
  background: #17382d;
  /* Up and down scroll the page; a sideways swipe moves the card. */
  touch-action: pan-y;
}

.gallery-stage:has(.gallery-lead:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.gallery-lead {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 800ms;
}

.gallery-lead.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
}

.gallery-lead:focus-visible { outline: none; }

/* The photo on show drifts slightly closer while it waits for the next. */
.gallery-lead img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 7s linear;
}

.gallery-lead.is-active img { transform: scale(1); }

/* Shade under the words only; the photo stays clear above them. */
.gallery-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, #17382d 92%, transparent) 0%, color-mix(in srgb, #17382d 50%, transparent) 34%, transparent 64%);
}

.gallery-lead-body {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 28px 30px 24px;
}

.gallery-kicker {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--card-bg-2);
  color: var(--green-900);
  font-size: 13px;
  line-height: 1.6;
}

.gallery-lead-title {
  max-width: 34em;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.7;
  text-wrap: balance;
}

.gallery-time {
  font-size: 14px;
  opacity: 0.78;
}

.gallery-list {
  display: grid;
  align-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-list li + li { border-top: 1px solid color-mix(in srgb, #ffffff 14%, transparent); }

.gallery-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  color: #fff;
  text-decoration: none;
}

.gallery-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 8%, transparent);
  transition: box-shadow 300ms ease;
}

/* The album on show has a ring round its photo. */
.gallery-item[aria-current] .gallery-thumb { box-shadow: 0 0 0 2px var(--green-500); }

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-item-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gallery-item-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 3.6em; /* Two complete lines at line-height: 1.8. */
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.8;
  transition: color 200ms ease;
}

.gallery-item .gallery-time { font-size: 13px; }

.gallery-item:hover .gallery-thumb img { transform: scale(1.04); }
.gallery-item:hover .gallery-item-title { color: var(--green-500); }

.gallery-item:focus-visible,
.gallery-more:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Lead on top; the list below it in two columns. */
@media (max-width: 1023px) {
  .gallery-item { grid-template-columns: 124px minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gallery-stage { min-height: 0; aspect-ratio: 16 / 9; }
  .gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .gallery-list li + li { border-top: 0; }
  .gallery-list li:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, #ffffff 14%, transparent); }
}

@media (max-width: 640px) {
  .gallery { margin-top: 32px; padding: 20px 16px; }
  .gallery-head { margin-bottom: 16px; }
  .gallery-title { font-size: 21px; }
  .gallery-title svg { width: 22px; height: 22px; }
  .gallery-stage { aspect-ratio: 4 / 3; }
  .gallery-lead-body { gap: 8px; padding: 18px 18px 16px; }
  .gallery-lead-title { font-size: 20px; }
  .gallery-list { grid-template-columns: minmax(0, 1fr); }
  .gallery-list li:nth-child(2) { border-top: 1px solid color-mix(in srgb, #ffffff 14%, transparent); }
  .gallery-item { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
  .gallery-item-title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lead,
  .gallery-lead.is-active,
  .gallery-thumb,
  .gallery-thumb img,
  .gallery-item-title { transition: none; }
  .gallery-lead img { transform: none; transition: none; }
}

/* ======================================================================
   Reels: a rail of short vertical videos
   ====================================================================== */

.reel-rail {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 28px 0 0;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.reel-rail::-webkit-scrollbar { display: none; }

.reel {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

/* A tall card: the video's cover fills it, its length sits in the top
   corner, and the play mark waits in the middle. */
.reel a {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-border);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: transform 0.35s ease;
}

.reel a:hover { transform: translateY(-4px); }
.reel a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.reel-media { position: absolute; inset: 0; display: block; }

.reel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.reel a:hover .reel-media img { transform: scale(1.05); }

.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(10, 30, 22, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.reel-play svg { width: 22px; height: 22px; margin-inline-start: 3px; }
.reel a:hover .reel-play { background: rgba(63, 178, 127, 0.7); transform: scale(1.08); }

.reel-time {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10, 30, 22, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-latin);
  font-size: 12px;
  line-height: 1.5;
}

/* ======================================================================
   Weather: the week's forecast for Malé on a night-green strip, then the
   stories tagged މޫސުން
   ====================================================================== */

/* The weather now at the start (the right), then a column a day from today. */
.forecast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 3.2fr);
  margin-top: 26px;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #17382d 0%, #1b4a3a 60%, #1d5843 100%);
  box-shadow: var(--card-shadow);
}

.forecast-now {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 6px 18px;
  padding: 20px 26px;
}

.forecast-place {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.6;
}

.forecast-place > span {
  font-size: 14px;
  color: color-mix(in srgb, #ffffff 75%, transparent);
}

/* Rain over today's part of the strip while it rains at the place on
   show: a canvas under the words (js/header.js draws the drops, by the
   data-weather the server and the island picker set). */
.forecast-now { z-index: 2; }
.forecast-days { position: relative; z-index: 1; }

.forecast-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The place's name: a button that opens the list of islands. */
.forecast-place-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: -8px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.forecast-place-button svg {
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, #ffffff 75%, transparent);
}

.forecast-place-button:hover { background: color-mix(in srgb, #ffffff 12%, transparent); }
.forecast-place-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* While another island's weather loads, the strip dims. */
.forecast[aria-busy="true"] :is(.forecast-now-icon, .forecast-now-reading, .forecast-days) {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

/* The list of islands: a dialog over the page, two to a row. */
.island-picker {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--page-ink);
  box-shadow: var(--card-shadow);
}

.island-picker[open] {
  display: flex;
  flex-direction: column;
}

.island-picker::backdrop { background: color-mix(in srgb, #17382d 55%, transparent); }

.island-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--card-border);
}

.island-picker-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--green-900);
}

.island-picker-head form { margin: 0; }

.island-picker-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--green-900);
  cursor: pointer;
}

.island-picker-close svg { width: 20px; height: 20px; }
.island-picker-close:hover { background: var(--card-bg-2); }
.island-picker-close:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

/* The search box under the head: the header's box, on the card. */
.island-picker-search {
  flex: none;
  margin: 12px 12px 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--page-bg);
  transition: border-color 0.15s ease;
}

.island-picker-search:focus-within { border-color: var(--green-500); }
.island-picker-search .search-input { color: var(--page-ink); }
.island-picker-search .search-label { color: var(--muted-ink); opacity: 1; }

/* The islands, in groups by atoll; each group's heading stays at the top
   while its islands scroll under it. */
.island-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 4px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.island-group { display: grid; gap: 6px; }
.island-group[hidden] { display: none; }

.island-group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 10px 4px 4px;
  background: var(--card-bg);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted-ink);
}

.island-group ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.island-group li[hidden] { display: none; }

.island-picker-empty {
  margin: 0;
  padding: 24px 16px;
  font-family: var(--font-heading);
  text-align: center;
  color: var(--muted-ink);
}

.island-picker-list button {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--card-bg-2);
  color: var(--green-900);
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.6;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.island-picker-list button:hover { border-color: var(--card-border); background: var(--card-bg); }
.island-picker-list button:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

.island-picker-list button[aria-current="true"] {
  border-color: var(--green-500);
  background: color-mix(in srgb, var(--green-500) 14%, var(--card-bg));
}

:root[data-theme="dark"] .island-picker-title,
:root[data-theme="dark"] .island-picker-close,
:root[data-theme="dark"] .island-picker-list button { color: #d9efe2; }

@media (max-width: 640px) {
  .island-picker { max-height: min(84vh, 640px); }
  .island-picker-list button { padding: 8px 12px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .forecast-place-button,
  .island-picker-list button,
  .forecast[aria-busy="true"] :is(.forecast-now-icon, .forecast-now-reading, .forecast-days) { transition: none; }
}

/* The info button by the place. It opens the forecast's credit as a small
   card under the place line, over the weather now; a click elsewhere or
   Escape closes it (js/header.js). */
.forecast-info { align-self: center; }

.forecast-info summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: color-mix(in srgb, #ffffff 70%, transparent);
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.forecast-info summary::-webkit-details-marker { display: none; }
.forecast-info summary svg { width: 18px; height: 18px; }

.forecast-info summary:hover,
.forecast-info[open] summary {
  color: #fff;
  background: color-mix(in srgb, #ffffff 12%, transparent);
}

.forecast-info summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.forecast-info .forecast-credit {
  position: absolute;
  z-index: 2;
  top: 52px;
  right: 26px;
  left: 26px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
  border-radius: 10px;
  background: #17382d;
  box-shadow: var(--card-shadow);
  color: color-mix(in srgb, #ffffff 88%, transparent);
}

.forecast-info .forecast-credit a { color: #fff; }
.forecast-info .forecast-credit a:hover { color: var(--green-500); }
.forecast-info .forecast-credit a:focus-visible { outline: 2px solid #fff; }

.forecast-now-icon {
  width: 64px;
  height: 64px;
}

.forecast-now-reading {
  display: grid;
  margin: 0;
}

.forecast-now-temp {
  font-family: var(--font-latin);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.15;
}

/* Degrees read left to right inside the Thaana, so the sign stays after
   the number. */
.forecast-now-temp,
.forecast-deg {
  direction: ltr;
  unicode-bidi: isolate;
}

.forecast-now-text {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.6;
}

.forecast-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.forecast-day {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px 6px 18px;
  border-inline-start: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  text-align: center;
}

.forecast-day.is-today { background: color-mix(in srgb, #ffffff 7%, transparent); }

.forecast-name {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.6;
  white-space: nowrap;
}

.forecast-icon {
  width: 30px;
  height: 30px;
}

.forecast-range {
  display: flex;
  gap: 10px;
  font-family: var(--font-latin);
  font-size: 15px;
  line-height: 1.4;
}

.forecast-high { font-weight: 600; }
.forecast-low { color: color-mix(in srgb, #ffffff 72%, transparent); }

/* A forecast's credit: in the info card for MET Norway, and under the strip
   for Google, whose terms ask for it to stay in view. */
.forecast-credit {
  margin: 8px 4px 0;
  font-family: var(--font-latin);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-ink);
}

.forecast-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Google's attribution, set as Google's guidelines ask: Roboto 400, grey
   on light and white on dark, never translated. */
.forecast-credit.is-google {
  font-family: Roboto, var(--font-latin);
  font-weight: 400;
  color: #5e5e5e;
}

:root[data-theme="dark"] .forecast-credit.is-google { color: #fff; }

.forecast-credit a:hover { color: var(--green-700); }
.forecast-credit a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

/* Words for screen readers only, such as "highest" before a temperature. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tablets: the weather now above the row of days. */
@media (max-width: 1023px) {
  .forecast { grid-template-columns: minmax(0, 1fr); }
  .forecast-now { padding: 16px 20px 12px; border-bottom: 1px solid color-mix(in srgb, #ffffff 12%, transparent); }
  .forecast-day:first-child { border-inline-start: 0; }
}

/* Phones: the days scroll sideways, a little over four to a view. */
@media (max-width: 640px) {
  .forecast { margin-top: 20px; border-radius: 12px; }
  .forecast-now { gap: 4px 14px; padding: 14px 16px 10px; }
  .forecast-info .forecast-credit { top: 46px; right: 16px; left: 16px; }
  .forecast-place { font-size: 16px; }
  .forecast-now-icon { width: 48px; height: 48px; }
  .forecast-now-temp { font-size: 30px; }
  .forecast-now-text { font-size: 15px; }
  .forecast-days {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .forecast-days::-webkit-scrollbar { display: none; }
  .forecast-day { gap: 6px; padding: 12px 4px 14px; scroll-snap-align: start; }
  .forecast-name { font-size: 14px; }
  .forecast-icon { width: 26px; height: 26px; }
  .forecast-range { gap: 8px; font-size: 13px; }
  .forecast-credit { font-size: 11px; }
}

/* ======================================================================
   Lifestyle as a chart: a rail of ranked cards
   ====================================================================== */

/* The rail's controls sit with the section's "all" link. */
.chart-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
  padding-bottom: 10px;
}

/* The link carries its own foot spacing elsewhere; here the row sets it. */
.chart-tools .section-more { margin: 0; padding-bottom: 0; }

.chart-arrow {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--green-700);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.chart-arrow svg { width: 18px; height: 18px; }
.chart-arrow:hover { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.chart-arrow:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
.chart-arrow[disabled] { opacity: 0.35; cursor: default; }
.chart-arrow[disabled]:hover { border-color: var(--card-border); background: var(--card-bg); color: var(--green-700); }

.chart-rail {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 28px 0 0;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.chart-rail::-webkit-scrollbar { display: none; }

.chart-card {
  flex: 0 0 212px;
  scroll-snap-align: start;
}

/* A quiet card around the cover, so the picture carries the colour. */
.chart-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 18px;
  border-radius: 18px;
  background: var(--card-bg-2);
  color: var(--green-900);
  text-decoration: none;
  transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.chart-card a:hover {
  transform: translateY(-4px);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.chart-card a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.chart-art {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-border);
}

.chart-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.chart-card a:hover .chart-art img { transform: scale(1.04); }

/* The rank rides the top corner of the cover. */
.chart-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 16px;
  min-height: 3.4em;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  transition: color 0.2s ease;
}

.chart-card a:hover .chart-title { color: var(--green-700); }

.chart-meta {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-ink);
  text-align: center;
}

:root[data-theme="dark"] .chart-card a { color: #d9efe2; }

/* ======================================================================
   The footer
   ====================================================================== */

/* Lines up with the page's own gutters. */
.site-foot {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 66px 40px;
}

@media (max-width: 1023px) {
  .site-foot { padding-inline: 32px; }
}
@media (max-width: 640px) {
  .site-foot { padding: 0 16px 24px; }
}

.foot-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 24px 16px;
  border: 1px solid rgba(20, 131, 107, 0.22);
  border-radius: 14px;
  background: var(--card-bg-2);
  text-align: center;
}

/* The atolls sit behind the footer's content, across the panel with the north
   at the start. They fade where the text is and stay full at both ends. */
.foot-map {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: -1;
  width: calc(100% - 40px);
  height: calc(100% - 32px);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 15%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.35) 70%, #000 85%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 15%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.35) 70%, #000 85%, #000 100%);
  pointer-events: none;
}

:root[data-theme="dark"] .foot-map { opacity: 0.35; }

.foot-brand { display: inline-block; border-radius: 8px; }
.foot-brand img { display: block; width: 132px; height: auto; }
.foot-brand:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; }

/* The tagline, contact details and copyright line are in English, as on the
   WordPress site. */
.foot-kicker {
  margin: 14px 0 0;
  font-family: var(--font-latin);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--page-ink);
}

/* All three details on one line, wrapping only when they must. */
.foot-contact {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  color: var(--green-900);
  font-family: var(--font-latin);
}

.foot-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.foot-contact svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--green-700);
}

.foot-note { font-size: 13px; color: var(--muted-ink); }

.foot-contact a {
  color: var(--green-900);
  text-decoration: none;
  transition: color 0.2s ease;
}

.foot-contact a:hover { color: var(--green-700); text-decoration: underline; }
.foot-contact a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

/* Plain marks, no buttons around them. */
.foot-social {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
}

.foot-social a {
  display: grid;
  place-items: center;
  color: var(--green-700);
  transition: color 0.2s ease, transform 0.2s ease;
}

.foot-social svg { width: 21px; height: 21px; }
.foot-social a:hover { color: var(--green-900); transform: translateY(-2px); }
.foot-social a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; }

.foot-legal {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  font-family: var(--font-latin);
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted-ink);
}

:root[data-theme="dark"] .foot-panel { border-color: rgba(63, 178, 127, 0.28); }
:root[data-theme="dark"] .foot-kicker,
:root[data-theme="dark"] .foot-contact,
:root[data-theme="dark"] .foot-contact a { color: #d9efe2; }

/* ---------- Responsive: new sections ---------- */

@media (max-width: 1023px) {
  .chart-card { flex-basis: 196px; }
  .reel { flex-basis: 180px; }
}

@media (max-width: 640px) {
  .people { margin-top: 32px; padding: 22px 16px 18px; }
  .people-title { font-size: 22px; }
  .person { flex-basis: 200px; }
  .person-body strong { font-size: 16px; }
  .gallery { margin-top: 32px; }
  .foot-panel { padding: 22px 12px 14px; }
  /* Upright along the end edge, where a phone's footer has room for it. */
  .foot-map {
    top: 12px;
    left: 6px;
    width: 64px;
    height: calc(100% - 24px);
    opacity: 0.5;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .foot-brand img { width: 116px; }
  .foot-kicker { font-size: 16px; }
  .foot-contact { gap: 6px 16px; }
  .foot-contact li { font-size: 14px; }
  .foot-social { gap: 16px; }
  .foot-legal { font-size: 12px; }
  .chart-tools .chart-arrow { display: none; }   /* a swipe does the job */
  .reel-rail { gap: 12px; margin-top: 20px; }
  .reel { flex-basis: 150px; }
  .reel a { border-radius: 14px; }
  .reel-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .chart-rail { gap: 14px; margin-top: 20px; }
  .chart-card { flex-basis: 162px; }
  .chart-card a { padding: 10px 10px 14px; border-radius: 14px; }
  .chart-title { margin-top: 12px; font-size: 15px; }
  .chart-meta { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .person a, .chart-card a, .chart-art img, .reel a, .reel-media img, .reel-play, .udhaas-track, .foot-social a { transition: none; }
}

/* ======================================================================
   Extra advertisement slots
   ====================================================================== */

/* Banners placed between sections. */
.ad-between { margin-top: 48px; }

/* Sidebar slots on the archive page. */
.ad-side { width: 100%; }

.ad-side img { width: 100%; height: auto; }

/* Slots that js/ads.js fills from the dashboard. A slot with nothing
   booked is hidden; .ad sets display, so [hidden] needs saying here. */
.ad[hidden] { display: none; }

/* No posts marked for the breaking news ticker: the strip keeps its
   social links only. */
.ticker-news[hidden] { display: none; }

.ad .ad-creative {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.ad picture { display: block; }

/* A zone's ads are all built at once and take turns: the waiting ones are
   hidden, which the display rules above would otherwise undo. */
.ad [data-ad-id][hidden] { display: none; }

/* HTML and AdSense ads bring their own look. */
.ad .ad-code {
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  text-align: center;
}

/* Real creatives keep their own proportions in banner slots. */
.ad-banner.is-live img,
.ad-inline.is-live img { aspect-ratio: auto; object-fit: fill; }

/* Category pages: the top banner sits between the heading and the grid. */
.archive-top-ad { margin-bottom: 32px; }

/* The sports section's side column, left of the stories as in the hero:
   the ad, then more stories on photo cards that slide by themselves, with
   the dots on the card. */
.sports-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;   /* as tall as the lead beside it */
  min-width: 0;
}

/* The cards take whatever height is left under the ad, so the column ends
   level with the lead. */
.sports-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 200px;
}

.sports-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sports-rail::-webkit-scrollbar { display: none; }

.sports-slide {
  flex: 0 0 100%;
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

/* A photo card: the picture fills it, and the words sit on a fade at its
   foot, above the dots. */
.sports-slide a {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 14px;
  background: #17382d;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease;
}

.sports-slide a:hover { transform: translateY(-3px); }
.sports-slide a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.sports-slide-media {
  position: absolute;
  inset: 0;
}

.sports-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #17382de6 0%, #17382d73 42%, #17382d00 72%);   /* the night green, fading */
}

.sports-slide-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sports-slide a:hover .sports-slide-media img { transform: scale(1.04); }

.sports-slide .sport-kicker {
  position: relative;
  padding: 0 16px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.85);
}

.sports-slide .sport-kicker .pill {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.sports-slide-title {
  position: relative;
  display: block;
  padding: 0 16px 40px;   /* room for the dots */
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.sports-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.sports-dots[hidden] { display: none; }

.sports-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.sports-dots button[hidden] { display: none; }
.sports-dots button:hover { background: rgba(255, 255, 255, 0.75); }
.sports-dots button[aria-selected="true"] { background: var(--green-500); transform: scale(1.2); }
.sports-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 1281px) {
  .sports-grid:has(> .sports-side) { grid-template-columns: 1.25fr 1fr 300px; }
}

/* Narrower: the column goes under the stories as a row, the ad at the
   start (the right) and the cards in what's left, as tall as the ad. */
@media (max-width: 1280px) {
  .sports-side { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .sports-ad { flex: none; width: min(360px, 42%); }
  .sports-slider { flex: 1; min-height: 320px; }
}

/* Phones: the ad in the middle, the cards under it. */
@media (max-width: 760px) {
  .sports-side { flex-direction: column; align-items: center; }
  .sports-ad { width: min(360px, 100%); }
  .sports-slider { flex: none; width: 100%; min-height: 0; }
  .sports-slide a { aspect-ratio: 4 / 3; }
}

/* ======================================================================
   Archive page
   ====================================================================== */

.archive-head { margin-bottom: 28px; }

/* The page frames the category mark: the mark sits under everything and is
   cropped at the page's own edges, so it never widens the page or reaches
   over the site header. */
.page.archive {
  position: relative;
  isolation: isolate;
}

.cat-bg-clip {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Top-left, across from the heading, part of it past the corner. Its middle
   is strongest and it dissolves outwards, softer than the World globe. */
.cat-bg {
  position: absolute;
  top: -70px;
  left: -110px;
  width: 460px;
  height: 460px;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 50%, #000 40%, rgba(0, 0, 0, 0.45) 72%, transparent 100%);
  mask-image: radial-gradient(closest-side circle at 50% 50%, #000 40%, rgba(0, 0, 0, 0.45) 72%, transparent 100%);
}

:root[data-theme="dark"] .cat-bg { opacity: 0.22; }

.archive-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted-ink);
}

.archive-crumb a {
  color: var(--green-700);
  text-decoration: none;
}

.archive-crumb a:hover { text-decoration: underline; }

.archive-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The icon badge beside a page title (the send-udhaas page keeps one; the
   category pages carry their mark in the corner instead). */
.archive-icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  background: var(--green-500);
  color: #fff;
  box-sizing: border-box;
}

.archive-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--green-900);
}

.archive-count {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  font-size: 13px;
  color: var(--muted-ink);
}

.archive-desc {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.9;
  color: var(--muted-ink);
}

:root[data-theme="dark"] .archive-title { color: #d9efe2; }

.archive-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(27, 106, 79, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.archive-cta:hover { background: var(--green-900); transform: translateY(-1px); }
.archive-cta:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
.archive-cta svg { width: 20px; height: 20px; }
.archive-cta[hidden] { display: none; }

.archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

.archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }

.archive-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Udhaas text cards ---------- */

.udhaas-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.udhaas-grid[hidden] { display: none; }

.udhaas-card article {
  position: relative;
  height: 100%;
  padding: 26px 26px 22px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.udhaas-card article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(27, 106, 79, 0.16);
}

/* A faint column icon in the far corner (the left, in RTL). */
.udhaas-mark {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  width: 34px;
  height: 34px;
  color: var(--green-500);
  opacity: 0.35;
}

.udhaas-title {
  margin: 0;
  padding-inline-end: 44px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.7;
}

.udhaas-title a {
  color: var(--green-900);
  text-decoration: none;
}

.udhaas-card:hover .udhaas-title a { color: var(--green-700); }

.udhaas-excerpt {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--muted-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.udhaas-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  font-size: 14px;
}

.udhaas-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eaf5ee;
  color: var(--green-700);
  display: grid;
  place-items: center;
}

.udhaas-avatar svg { width: 18px; height: 18px; }

.udhaas-name { color: var(--green-900); }

.udhaas-place {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--green-500);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
}

.udhaas-date {
  margin-inline-start: auto;
  color: var(--muted-ink);
  font-size: 13px;
}

:root[data-theme="dark"] .udhaas-title a,
:root[data-theme="dark"] .udhaas-name { color: #d9efe2; }
:root[data-theme="dark"] .udhaas-avatar { background: #26332c; }

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--green-900);
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.page-link:hover { background: var(--green-500); color: #fff; border-color: transparent; }

.page-link.is-current {
  background: var(--green-700);
  color: #fff;
  border-color: transparent;
}

.page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.page-gap { color: var(--muted-ink); }

:root[data-theme="dark"] .page-link { color: #d9efe2; }

@media (max-width: 1023px) {
  .archive-layout { grid-template-columns: 1fr; }
  .archive-side { position: static; flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .ad-side { width: auto; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .archive-title { font-size: 26px; }
  .archive-icon { width: 34px; height: 34px; padding: 6px; }
  .archive-desc { font-size: 15px; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .udhaas-grid { grid-template-columns: 1fr; gap: 16px; }
  .udhaas-card article { padding: 20px 18px 16px; }
  .udhaas-title { font-size: 19px; }
  .ad-between { margin-top: 32px; }
  .page-link { min-width: 36px; height: 36px; padding: 0 10px; font-size: 14px; }
}

/* ======================================================================
   Send udhaas: form beside the rules
   ====================================================================== */

.udhaas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 40px;
  align-items: start;
}

.udhaas-form,
.udhaas-sent {
  padding: 28px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* The thank-you note that takes the form's place once an udhaas is sent. */
.udhaas-sent { align-self: start; outline: none; }
.udhaas-sent[hidden] { display: none; }
.udhaas-sent h2 {
  margin: 0 0 8px;
  color: var(--green-900);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
}
.udhaas-sent p { margin: 0; color: var(--page-ink); font-size: 17px; line-height: 1.9; }
:root[data-theme="dark"] .udhaas-sent h2 { color: var(--green-500); }

/* The field bots fill and people never see. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { margin-bottom: 20px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--green-900);
}

.req { color: var(--live); }

.field input[type="text"],
.field input[type="tel"],
.field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--page-bg);
  color: var(--page-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.9;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(63, 178, 127, 0.25);
}

/* A field the browser or the script has flagged. */
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--live); }

.hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted-ink);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Fields revealed by the "share more" checkbox. */
.field-group {
  margin: -6px 0 20px;
  padding: 18px 18px 2px;
  border-radius: 12px;
  background: var(--page-bg);
  border: 1px dashed var(--card-border);
}

.field-group[hidden] { display: none; }

.field-group .field input { background: var(--card-bg); }

.field-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--green-700);
}

.field-check label { margin: 0; font-size: 15px; line-height: 1.8; }

.form-error {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(229, 57, 53, 0.1);
  color: #b3261e;
  font-size: 15px;
}

.form-error[hidden] { display: none; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(27, 106, 79, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover { background: var(--green-900); transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

/* ---------- Rules panel ---------- */

.udhaas-rules {
  position: sticky;
  top: 24px;
  padding: 26px 28px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #17382d 0%, #1b4a3a 60%, #1d5843 100%);
  box-shadow: var(--card-shadow);
}

.rules-title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
}

.rules-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}

.rules-list li {
  position: relative;
  padding: 12px 44px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  line-height: 1.9;
  counter-increment: rule;
}

/* Numbered badge on the right of each rule. (Positioned with a physical
   side: an inline-start offset would follow the badge's own ltr direction
   and land on the left.) */
.rules-list li::before {
  content: counter(rule);
  position: absolute;
  top: 13px;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  direction: ltr;
}

.rules-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.8;
}

@media (max-width: 1000px) {
  .udhaas-layout { grid-template-columns: 1fr; }
  .udhaas-rules { position: static; }
}

@media (max-width: 640px) {
  .udhaas-form { padding: 18px; }
  .udhaas-rules { padding: 20px 18px; }
  .btn-primary { width: 100%; }
}

/* ======================================================================
   Article page
   ====================================================================== */

/* Body text of articles and comments: the A_Faseyha OpenType file, given
   Thaana code points by tools/remap_font.py (the original maps its glyphs
   to Latin keys). */
@font-face {
  font-family: "A Faseyha";
  src: url("../assets/fonts/AFaseyha-Unicode.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-article: "A Faseyha", "MV Aaamu FK", "MV Boli", "Faruma", sans-serif;
  --article-size: 19px;   /* changed by the text-size buttons */
}

/* The crumb and the title keep to the story's column, clear of the side
   column, on the same grid as the layout under them. */
.article-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0 40px;
  margin-bottom: 26px;
}

.article-head > * { grid-column: 1; }

@media (min-width: 1024px) {
  .article-page {
    width: calc(100% - 250px);
    max-width: 1670px;
  }
}

.article-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--green-900);
}

:root[data-theme="dark"] .article-title { color: #d9efe2; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

.article-main { min-width: 0; }

/* ---------- Hero photo with date badge and caption ---------- */

.article-hero {
  position: relative;
  margin: 0 0 18px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card-border);
  box-shadow: var(--card-shadow);
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-hero figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 16px 14px;
  color: #fff;
}

.hero-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--green-700);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.hero-day {
  font-family: var(--font-latin);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.hero-month {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
}

.hero-caption {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(20, 60, 45, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- Meta row ---------- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 0 4px 16px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--muted-ink);
}

.article-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.article-by-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: #eaf5ee;
  color: var(--green-700);
  box-sizing: border-box;
}

.article-cat {
  color: var(--green-700);
  text-decoration: none;
}

.article-cat:hover { text-decoration: underline; }

.article-author { color: var(--green-900); }

:root[data-theme="dark"] .article-author { color: #d9efe2; }
:root[data-theme="dark"] .article-by-icon { background: #26332c; }

.text-size {
  display: flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
}

.text-size span { font-size: 13px; }

.text-size button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--green-900);
  font-family: var(--font-latin);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.text-size button:hover { background: var(--green-500); color: #fff; border-color: transparent; }
.text-size button:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

/* ---------- Body ---------- */

.article-body {
  padding-inline: 20px;
  font-family: var(--font-article);
  font-size: var(--article-size);
  line-height: 2.1;
  color: var(--page-ink);
}

.article-body p { margin: 0 0 1.4em; }

/* Photos inside a story, with their captions ([caption] in the classic
   editor), and embedded posts and videos. A photo narrower than the column
   sits in its middle. */
.article-body img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 12px; }

.article-body figure { margin: 0.4em auto 1.8em; }

.article-body figure img { display: block; width: 100%; }

.article-body figcaption {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted-ink);
}

.article-body iframe { max-width: 100%; border: 0; }

.article-body .twitter-tweet { margin-inline: auto; }

/* X's embed code, when the site couldn't draw the post because X didn't
   send it: the link in a lifted card, until X's script swaps it for the
   post. */
.article-body blockquote.twitter-tweet {
  max-width: 550px;
  margin: 0.4em auto 1.8em;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  font-family: var(--font-latin), var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* An X post in a story, drawn by the site (admin/server/site/xposts.ts): a
   lifted card as wide as X's own embed. The text keeps the post's language,
   so a Dhivehi post reads in the story's face and an English one in the
   Latin face. */
.x-post {
  max-width: 550px;
  padding: 16px 18px 12px;
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.x-post a { color: var(--green-900); text-decoration: none; }
.x-post a:hover { text-decoration: underline; }
.x-post a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
:root[data-theme="dark"] .x-post-text a { color: var(--green-500); }

.x-post-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

.x-post .x-post-author { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--page-ink); }
.x-post .x-post-author:hover { text-decoration: none; }
.x-post .x-post-author:hover .x-post-name > span { text-decoration: underline; }

.article-body .x-post-avatar { flex: none; width: 48px; height: 48px; margin: 0; border-radius: 50%; }
.article-body .x-post-avatar.is-square { border-radius: 10px; }

.x-post-who { display: flex; flex-direction: column; min-width: 0; font-family: var(--font-latin), var(--font-body); line-height: 1.35; }
.x-post-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 15px; font-weight: 700; }
.x-post-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-post-badge { flex: none; width: 18px; height: 18px; fill: #1d9bf0; }
.x-post-badge.is-business { fill: #e2b719; }
.x-post-badge.is-government { fill: #829aab; }
.x-post-handle { overflow: hidden; font-size: 14px; color: var(--muted-ink); text-overflow: ellipsis; white-space: nowrap; }

.x-post .x-post-logo { flex: none; align-self: flex-start; color: var(--page-ink); line-height: 0; }
.x-post-logo svg { width: 22px; height: 22px; }

.x-post-text { margin: 0 0 12px; font-size: 0.92em; line-height: 2; overflow-wrap: anywhere; }
.x-post-text:not(:lang(dv)) { font-family: var(--font-latin), var(--font-body); font-size: 0.85em; line-height: 1.6; }

/* Up to four photos in X's grid: two side by side, three with the first
   down the whole start side, four in two rows. */
.x-post-media { display: grid; gap: 2px; margin: 0 0 10px; overflow: hidden; border-radius: 14px; }
.x-post-media[data-count="2"],
.x-post-media[data-count="3"],
.x-post-media[data-count="4"] { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.x-post-media[data-count="3"],
.x-post-media[data-count="4"] { grid-template-rows: 1fr 1fr; }
.x-post-media[data-count="3"] > :first-child { grid-row: span 2; }

.article-body .x-post-media img,
.article-body .x-post-media video { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; border-radius: 0; object-fit: cover; }
.article-body .x-post-media[data-count="1"] img { height: auto; max-height: 34rem; }
.article-body .x-post-media video { height: auto; }

.article-body .x-post-foot { margin: 0; font-size: 14px; line-height: 1.6; }
.x-post .x-post-foot a { color: var(--muted-ink); }

/* Full-width editorial quotation, with attribution below the shaded panel. */
.quote-mark { position: absolute; width: 2.2em; height: 2.2em; color: var(--green-500); }
.quote-open { top: -0.2em; inset-inline-start: 0; transform: scaleX(-1); }
.quote-close { bottom: -0.3em; inset-inline-end: 0; transform: scaleY(-1); }

.article-quote {
  margin: 1.8em 0;
  padding: 0;
  text-align: start;
}

.quote-content {
  position: relative;
  padding: 3.2em clamp(20px, 4vw, 48px) 1.8em;
  border-inline-start: 4px solid #55bb6b;
  background: var(--card-bg-2);
  color: #454e58;
}

.quote-content::before {
  content: "”";
  position: absolute;
  top: 10px;
  inset-inline-start: clamp(20px, 4vw, 48px);
  color: #55bb6b;
  font-family: Georgia, serif;
  font-size: 3.8em;
  font-weight: 700;
  line-height: 1;
}

.article-quote .quote-mark { display: none; }

.article-quote p {
  margin: 0 0 1em;
  font-size: 1em;
  line-height: 2.1;
  text-align: start;
  color: inherit;
}
.article-quote .quote-content > :last-child { margin-bottom: 0; }

.article-quote > :is(footer, cite) {
  display: block;
  margin-top: 1.2em;
  font-size: 0.78em;
  font-style: normal;
  text-align: start;
  color: var(--muted-ink);
}
:root[data-theme="dark"] .quote-content { color: var(--page-ink); }

/* In-article banner: a 728 x 90 proportion, centred. */
.ad-inline {
  max-width: 728px;
  margin: 0 auto 28px;
}

.article-body .ad-inline { margin: 0.4em auto 1.8em; }

.ad-inline img { aspect-ratio: 1456 / 180; object-fit: cover; }

/* ---------- Tags and share ---------- */

.article-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--card-border);
}

.article-tags-hash {
  font-family: var(--font-latin);
  font-size: 20px;
  font-weight: 700;
  color: var(--green-500);
}

.article-tags ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-tags a {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 6px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--green-900);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.article-tags a:hover { background: var(--green-500); color: #fff; border-color: transparent; }

.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.share {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--green-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.share:hover { background: var(--green-700); color: #fff; border-color: transparent; transform: translateY(-2px); }
.share:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.share svg { width: 20px; height: 20px; }

.share-note {
  font-size: 13px;
  color: var(--green-700);
}

.article-share.article-tools {
  --tools-shadow: 0 4px 18px rgba(27, 106, 79, 0.07), 0 1px 3px rgba(27, 106, 79, 0.04);
  position: fixed;
  z-index: 30;
  right: max(18px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--tools-shadow);
}

.article-tools .share {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease;
}
.article-tools .share svg { width: 22px; height: 22px; }
.article-tools .share:hover { background: var(--card-border); color: var(--green-900); transform: none; }
.article-tools .share:active { transform: scale(0.96); }
.article-tools .share:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.article-tools [hidden] { display: none !important; }
.article-tools .share[aria-expanded="true"],
.article-tools .share.is-speaking { background: var(--green-900); color: #fff; }
.article-tools .tts-pause, .article-tools .is-speaking .tts-play { display: none; }
.article-tools .is-speaking .tts-pause { display: block; }
.article-tools .narration-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; }
.article-tools .narration-toggle.has-time { height: 56px; }
.tts-remaining { font-family: var(--font-latin); font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.share-networks {
  position: absolute;
  right: calc(100% + 10px);
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--tools-shadow);
  animation: share-menu-in 180ms ease-out;
}
@keyframes share-menu-in {
  from { opacity: 0; transform: translateX(5px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .article-tools .share { transition: none; }
  .article-tools .share:active { transform: none; }
  .share-networks { animation: none; }
}
.article-tools .share-note:not(:empty) {
  position: absolute;
  right: calc(100% + 12px);
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: min(260px, calc(100vw - 100px));
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--page-ink);
  line-height: 1.6;
}
.article-tools .tts-note { font-family: var(--font-latin); }
.article-tools #copy-note:not(:empty) {
  right: 0;
  bottom: calc(100% + 8px);
  max-width: min(160px, calc(100vw - 32px));
  padding: 5px 8px;
  border-radius: 8px;
  box-shadow: var(--tools-shadow);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
/* An empty note stays in the accessibility tree, so screen readers still
   announce the copy and playback messages when they appear. */
.article-tools .share-note:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.article-tools .share.is-loading { cursor: progress; opacity: 0.65; }
@media (max-width: 1023px) {
  .article-share.article-tools {
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    right: max(8px, env(safe-area-inset-right));
    transform: none;
    padding: 5px;
    gap: 6px;
  }
  .share-networks { top: auto; bottom: 0; }
}

/* ---------- Section bar (home page) ----------
   A sideways twin of the article toolbar: 16px corners and 10px items,
   floating at the bottom center on a frosted surface. It starts with a link
   back to the top, appears once the featured stories scroll away, and marks
   the section in view (js/section-nav.js). */

.section-nav {
  --nav-shadow: 0 4px 18px rgba(27, 106, 79, 0.07), 0 1px 3px rgba(27, 106, 79, 0.04);
  display: flex;
  align-items: center;
  gap: 6px;
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - 24px);
  margin-inline: auto;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--nav-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 240ms cubic-bezier(0.25, 1, 0.5, 1), transform 240ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Keyboard users reach it from the top of the page too. */
.section-nav.is-visible,
.section-nav:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.section-nav[hidden] { display: none; }

/* Frosted where the browser can blur: the page shows through, softened. At
   80% the links stay legible over dark photos too. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .section-nav {
    background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}

.section-nav ul {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.section-nav ul::-webkit-scrollbar { display: none; }

/* Only the left edge fades, and only while more links wait past it. */
.section-nav.has-more ul {
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 20px);
  mask-image: linear-gradient(to right, transparent, currentColor 20px);
}

.section-nav li {
  position: relative;
  flex: none;
}

/* Hairlines between the links, as in the bar this one follows. They give way
   beside the current and hovered links, whose fill already sets them apart. */
.section-nav li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: -3.5px;
  width: 1px;
  height: 16px;
  background: var(--card-border);
  transform: translateY(-50%);
  transition: opacity 200ms ease;
}

.section-nav li:hover::before,
.section-nav li:hover + li::before,
.section-nav li:has(> [aria-current])::before,
.section-nav li:has(> [aria-current]) + li::before { opacity: 0; }

.section-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--green-900);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease;
}

/* Back to the top: an icon the size of the article toolbar's buttons, kept
   outside the list so it stays in place while the list scrolls. */
.section-nav-top {
  position: relative;
  flex: none;
  width: 44px;
}

.section-nav a.section-nav-top { padding: 0; }
.section-nav-top svg { width: 22px; height: 22px; }

.section-nav-top::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -3.5px;
  width: 1px;
  height: 16px;
  background: var(--card-border);
  transform: translateY(-50%);
  transition: opacity 200ms ease;
}

.section-nav-top:hover::after,
.section-nav:has(li:first-child:hover) .section-nav-top::after,
.section-nav:has(li:first-child > [aria-current]) .section-nav-top::after { opacity: 0; }

.section-nav a:hover { background: var(--card-border); }
.section-nav a:active { transform: scale(0.96); }
.section-nav a:focus-visible { outline: 2px solid var(--green-700); outline-offset: -2px; }
.section-nav a[aria-current] { background: var(--green-900); color: #fff; }

:root[data-theme="dark"] .section-nav { --nav-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .section-nav a { color: var(--panel-ink); }
:root[data-theme="dark"] .section-nav a[aria-current] { color: #fff; }

/* A jump lands with room above the section's title. */
.page > section[id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.section-nav) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .section-nav { transform: none; transition: opacity 120ms linear; }
  .section-nav a { transition: none; }
  .section-nav a:active { transform: none; }
}

@media (max-width: 600px) {
  .section-nav { bottom: max(12px, env(safe-area-inset-bottom)); gap: 4px; padding: 5px; }
  .section-nav ul { gap: 4px; }
  .section-nav li + li::before { inset-inline-start: -2.5px; }
  .section-nav-top::after { inset-inline-end: -2.5px; }
  .section-nav a { padding: 0 12px; font-size: 14px; }
}

@media print {
  .section-nav { display: none; }
}

/* ---------- Comments ---------- */

.comments { margin-top: 32px; }

.comments-title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--green-900);
}

:root[data-theme="dark"] .comments-title { color: #d9efe2; }

.comment-form {
  margin-bottom: 36px;
  padding: 24px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.comment-form textarea { font-family: var(--font-article); }

/* Where Turnstile shows its check, only when Cloudflare needs the reader to
   act (js/header.js draws it as the form is sent). */
.turnstile-slot { margin: 0 0 16px; }
.turnstile-slot:empty { display: none; }

.form-ok {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(63, 178, 127, 0.15);
  color: var(--green-900);
  font-size: 15px;
}

.form-ok[hidden] { display: none; }

.comments-empty {
  margin: 0;
  padding: 26px;
  border: 1px dashed var(--card-border);
  border-radius: 14px;
  text-align: center;
  font-size: 15px;
  color: var(--muted-ink);
}

/* Approved comments, as the site server lists them: threads, each reply
   under the comment it answers. */
.comment-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-item { display: grid; gap: 12px; }

.comment-body {
  padding: 16px 20px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
}

/* Replies hang under the comment they answer, along a hairline. */
.comment-replies {
  display: grid;
  gap: 12px;
  margin: 0;
  margin-inline-start: 14px;
  padding: 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--card-border);
  list-style: none;
}

/* A reply from the newsroom, sent from the dashboard. */
.comment-badge {
  padding: 0 9px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg-2);
  color: var(--green-900);
  font-size: 13px;
  line-height: 1.8;
}

.comment-reply {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-900);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.comment-reply:hover { text-decoration: underline; }
.comment-reply:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

/* The count beside the list's heading. */
.comments-count {
  display: inline-block;
  min-width: 1.7em;
  margin-inline-start: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--green-900);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  vertical-align: middle;
}

/* The form, answering a comment, sits under it and says whom it answers. */
.comment-item > .comment-form { margin: 0; }

.comment-replying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--card-bg-2);
  color: var(--green-900);
  font-size: 15px;
}

.comment-cancel {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.comment-cancel:hover { color: var(--page-ink); text-decoration: underline; }
.comment-cancel:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

/* The field bots fill: out of sight, out of the tab order, hidden from
   screen readers. */
.field-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 6px;
}

.comment-head strong {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--green-900);
}

.comment-head time {
  font-size: 13px;
  color: var(--muted-ink);
}

.comment-text {
  font-size: 16px;
  line-height: 1.9;
  white-space: pre-line;
  overflow-wrap: break-word;
}

:root[data-theme="dark"] .comment-head strong,
:root[data-theme="dark"] .comment-badge,
:root[data-theme="dark"] .comment-replying { color: #d9efe2; }
:root[data-theme="dark"] .comment-reply { color: var(--green-500); }

/* A YouTube player inside a story keeps the video's proportions. */
.article-body .video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

/* A category with nothing published yet. */
.archive-empty {
  margin: 0;
  padding: 40px 24px;
  border: 1px dashed var(--card-border);
  border-radius: 14px;
  text-align: center;
  color: var(--muted-ink);
}

/* ---------- Sidebar ---------- */

.article-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.side-box {
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.side-title {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--green-500);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--green-900);
}

:root[data-theme="dark"] .side-title { color: #d9efe2; }

.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-list li + li { border-top: 1px solid var(--card-border); }

.side-list-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg-2);
  color: var(--green-900);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.side-list-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.side-list-toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

.side-list-toggle:hover { border-color: var(--green-500); }
.side-list-toggle:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.side-list a {
  display: block;
  padding: 12px 0;
  color: var(--green-900);
  text-decoration: none;
}

.side-list a:hover span { color: var(--green-700); }

.side-list span {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.7;
  transition: color 0.2s ease;
}

.side-list time {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-ink);
}

:root[data-theme="dark"] .side-list a,
:root[data-theme="dark"] .side-list-toggle { color: #d9efe2; }

/* Palm green on the dark card is 2.5:1; the panel ink keeps icons at 13:1. */
:root[data-theme="dark"] .share { color: var(--panel-ink); }
:root[data-theme="dark"] .article-tools .share:hover { color: var(--panel-ink); }

@media (max-width: 1023px) {
  .article-layout,
  .article-head { grid-template-columns: 1fr; }
  .article-side { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .article-side .side-box { flex: 1 1 320px; }
  .article-side .ad-side { width: 300px; }
  .article-title { font-size: 28px; }
}

@media (max-width: 640px) {
  .article-title { font-size: 23px; }
  .article-hero { border-radius: 14px; }
  .article-hero figcaption { padding: 0 10px 10px; gap: 8px; }
  .hero-date { min-width: 52px; padding: 6px 8px; }
  .hero-day { font-size: 18px; }
  .hero-caption { padding: 8px 12px; font-size: 13px; }
  .article-meta { font-size: 13px; }
  :root { --article-size: 17px; }
  .comment-form { padding: 18px; }
}

/* ======================================================================
   Udhaas post: the writer's card in place of a photo
   ====================================================================== */

.udhaas-writer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.udhaas-avatar-lg {
  width: 52px;
  height: 52px;
}

.udhaas-avatar-lg svg { width: 28px; height: 28px; }

.udhaas-writer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.udhaas-writer .udhaas-name {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.5;
}

.udhaas-role {
  font-size: 13px;
  color: var(--muted-ink);
}

.udhaas-writer .udhaas-date { margin-inline-start: auto; }

.udhaas-post-cta { margin: 4px 0 24px; }

/* Three udhaas cards in a row under a post. */
.udhaas-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .udhaas-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .udhaas-writer { padding: 14px 16px; gap: 10px 12px; }
  .udhaas-writer .udhaas-date { margin-inline-start: 0; width: 100%; }
  .udhaas-grid-3 { grid-template-columns: 1fr; margin-top: 22px; }
}

/* ======================================================================
   Udhaas on the home page: a mint panel with one featured udhaas set as a
   quote, a list of recent ones beside it, and a "send yours" card
   ====================================================================== */

.udhaas-home {
  margin-top: 48px;
  padding: 32px;
  border-radius: 18px;
  background: #e2f1e8;
  background-image: radial-gradient(rgba(27, 106, 79, 0.08) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

:root[data-theme="dark"] .udhaas-home { background-color: #1a2620; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.2px); }

.udhaas-home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.udhaas-home-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--green-900);
}

.udhaas-home-title svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  background: var(--green-500);
  color: #fff;
  box-sizing: border-box;
}

.udhaas-home-sub {
  flex: 1 1 100%;
  margin: -8px 0 0;
  font-size: 15px;
  color: var(--muted-ink);
}

.udhaas-home-head .section-more { margin-inline-start: auto; }

.udhaas-home-grid {
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* The slider fills its column so its card matches the list's height. */
.udhaas-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 0;
}

/* Stretch the visible card to the adjacent list; keep slide widths tied to
   the clipping viewport so the carousel still advances one card at a time. */
.udhaas-viewport {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 0 -14px;
  padding: 0;
  overflow: hidden;
}

.udhaas-track {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  transition: transform 0.6s ease;
}

/* Side padding gives neighbouring cards a 28px gap as they slide past. */
.udhaas-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  padding: 0 14px;
  display: flex;
}

/* Each udhaas is set like the article pull quote, on the night greens of
   the People, Gallery and Weather panels, with the quote marks in reef
   green. */
.udhaas-feature {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 34px 34px 26px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #17382d 0%, #1b4a3a 60%, #1d5843 100%);
  box-shadow: var(--card-shadow);
}

.udhaas-feature .quote-mark {
  width: 44px;
  height: 44px;
  opacity: 0.9;
}

.udhaas-feature .quote-open { top: 18px; inset-inline-start: 22px; }
.udhaas-feature .quote-close { bottom: 74px; inset-inline-end: 22px; }

.udhaas-feature-title {
  margin: 0 0 14px;
  padding-inline-start: 44px;
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.7;
}

.udhaas-feature-title a { color: #fff; text-decoration: none; }
.udhaas-feature-title a:hover { color: var(--green-500); }
.udhaas-feature-title a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.udhaas-feature-text {
  flex: 1;
  margin: 0 0 18px;
  padding: 0 8px 0 40px;
  font-family: var(--font-article);
  font-size: 17px;
  line-height: 2.1;
  color: color-mix(in srgb, #ffffff 84%, transparent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.udhaas-feature .udhaas-by { border-top-color: color-mix(in srgb, #ffffff 16%, transparent); }
.udhaas-feature .udhaas-name { color: #fff; }
.udhaas-feature .udhaas-place,
.udhaas-feature .udhaas-date { color: color-mix(in srgb, #ffffff 74%, transparent); }
.udhaas-feature .udhaas-avatar { background: color-mix(in srgb, #ffffff 12%, transparent); color: #fff; }

.udhaas-controls {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}

.udhaas-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(27, 106, 79, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--green-900);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.udhaas-arrow:hover { background: var(--green-700); color: #fff; border-color: transparent; }
.udhaas-arrow:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.udhaas-arrow svg { width: 22px; height: 22px; }

.udhaas-dots {
  display: flex;
  gap: 8px;
}

.udhaas-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 106, 79, 0.25);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.udhaas-dots button:hover { background: var(--green-500); }
.udhaas-dots button[aria-selected="true"] { background: var(--green-700); transform: scale(1.2); }
.udhaas-dots button:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

/* The list column: four cards sharing the column's height. */
.udhaas-recent { min-width: 0; }

.udhaas-recent ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.udhaas-recent li {
  flex: 1;
  display: flex;
  min-height: 0;
}

.udhaas-recent-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--green-900);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.udhaas-recent-card:hover { background: var(--card-bg); transform: translateX(-3px); }
.udhaas-recent-card:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

.udhaas-recent-title {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.udhaas-recent-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--muted-ink);
}

.udhaas-recent-meta .udhaas-place { font-size: 11px; }

:root[data-theme="dark"] .udhaas-recent-card { background: rgba(255, 255, 255, 0.06); color: #d9efe2; }

/* The send card is the fourth card: a light tint, green text, big icon. */
.udhaas-send {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(27, 106, 79, 0.18);
  background: rgba(63, 178, 127, 0.16);
  color: var(--green-900);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.udhaas-send:hover { background: rgba(63, 178, 127, 0.28); transform: translateY(-2px); }
.udhaas-send:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.udhaas-send svg {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 13px;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  box-sizing: border-box;
}

.udhaas-send strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.udhaas-send span { font-size: 13px; color: var(--muted-ink); }

:root[data-theme="dark"] .udhaas-send { color: #d9efe2; background: rgba(63, 178, 127, 0.14); }

@media (max-width: 1023px) {
  .udhaas-home-grid { grid-template-columns: 1fr; padding-bottom: 0; }
  .udhaas-controls { position: relative; top: auto; inset-inline: auto; }
  .udhaas-recent li { flex: none; }
}

@media (max-width: 640px) {
  .udhaas-home { margin-top: 32px; padding: 20px 16px; }
  .udhaas-home-title { font-size: 22px; }
  .udhaas-feature { padding: 26px 20px 20px; }
  .udhaas-feature .quote-mark { width: 34px; height: 34px; }
  .udhaas-feature .quote-open { top: 14px; inset-inline-start: 14px; }
  .udhaas-feature .quote-close { bottom: 70px; inset-inline-end: 14px; }
  .udhaas-feature-title { padding-inline-start: 34px; font-size: 20px; }
  .udhaas-feature-text { padding: 0 0 0 30px; font-size: 16px; }
}

/* ======================================================================
   Report: a timeline of long-form pieces, photo and text alternating sides
   ====================================================================== */

.report-rotator {
  position: relative;
  margin-top: 32px;
}

/* All panels share one grid cell, so they stack; only the active one shows. */
.report-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.report-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.report-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
}

/* The line between the columns, with a dot per report. */
.report-rail {
  position: absolute;
  isolation: isolate;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
  background: var(--card-border);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* The dots sit over the line's fill; their rings in the page colour keep the
   gaps round them. */
.report-rail button {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card-border);
  box-shadow: 0 0 0 5px var(--page-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.report-rail button:hover { background: var(--green-500); }
.report-rail button[aria-selected="true"] { background: var(--green-500); transform: scale(1.35); }
.report-rail button:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; }

/* While the reports advance by themselves, the line fills from the dot on
   show to the next one, and the next report shows when it gets there. The
   script places it and runs it (js/header.js). */
.report-progress {
  position: absolute;
  background: var(--green-500);
  pointer-events: none;
}

.report-media { order: 2; }

.report-media {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--card-border);
  box-shadow: var(--card-shadow);
}

.report-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.report-media:hover img { transform: scale(1.03); }

.report-text { min-width: 0; }

.report-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(42, 106, 63, 0.1);
  color: var(--green-700);
  font-size: 12px;
  line-height: 1.6;
}

/* A report is a long read, so its headline is the largest on the home
   page. */
.report-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 54px;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}

.report-title a { color: var(--green-900); text-decoration: none; }
.report-title a:hover { color: var(--green-700); }

.report-excerpt {
  margin: 0 0 14px;
  font-family: var(--font-article);
  font-size: 16px;
  line-height: 2;
  color: var(--muted-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.report-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-700);
  text-decoration: none;
  font-size: 15px;
}

.report-more svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.report-more:hover svg { transform: translateX(-4px); }

:root[data-theme="dark"] .report-title a { color: #d9efe2; }

/* ======================================================================
   World: a teal panel with a globe watermark and region-tagged headlines
   ====================================================================== */

.world {
  position: relative;
  margin-top: 48px;
  padding: 32px;
  border-radius: 18px;
  color: var(--green-900);
  background: linear-gradient(135deg, #dcefe8 0%, #cfe8df 55%, #d8eee6 100%);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

:root[data-theme="dark"] .world { color: #d9efe2; background: linear-gradient(135deg, #17302a 0%, #1a3a33 55%, #18332d 100%); }

/* The globe sits behind the list, part of it off the panel, in the teal of
   the header photo at low strength so it reads as part of the background. */
.world-globe {
  position: absolute;
  top: -70px;
  inset-inline-end: -90px;
  width: 480px;
  height: 480px;
  opacity: 0.3;
  /* Fades out towards the panel's middle so it sits under the text rather
     than against it. */
  -webkit-mask-image: radial-gradient(circle at 30% 35%, #000 30%, rgba(0, 0, 0, 0.35) 60%, transparent 85%);
  mask-image: radial-gradient(circle at 30% 35%, #000 30%, rgba(0, 0, 0, 0.35) 60%, transparent 85%);
  pointer-events: none;
}

:root[data-theme="dark"] .world-globe { opacity: 0.22; }

.world-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}

.world-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.world-more { margin-inline-start: auto; color: var(--green-700); }
.world-more:hover { color: var(--green-900); }

.world-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.world-lead {
  position: relative;
  display: block;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}

.world-lead img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.world-lead:hover img { transform: scale(1.03); }
.world-lead:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.world-lead-body {
  position: absolute;
  inset: auto 0 0;
  padding: 100px 24px 22px;
  background: linear-gradient(180deg, rgba(8, 40, 32, 0) 0%, rgba(8, 40, 32, 0.9) 100%);
}

.world-lead-body strong {
  display: block;
  margin: 10px 0 6px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.7;
}

.world-lead-body time { font-size: 13px; opacity: 0.85; }

.world-region {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(20, 131, 107, 0.12);
  border: 1px solid rgba(20, 131, 107, 0.35);
  color: #0f5c4a;
  font-size: 12px;
  line-height: 1.6;
}

/* On the lead photo the pill stays light. */
.world-lead .world-region {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

:root[data-theme="dark"] .world-list .world-region { color: #d9efe2; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); }

.world-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.world-list li + li { border-top: 1px solid rgba(20, 131, 107, 0.18); }

/* A photo beside each story; the title, then its region and time under it. */
.world-list a {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  padding: 12px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.world-list a:hover { background: rgba(255, 255, 255, 0.55); }
.world-list a:focus-visible { outline: 2px solid var(--green-700); outline-offset: -2px; }

:root[data-theme="dark"] .world-list a:hover { background: rgba(255, 255, 255, 0.06); }

.world-thumb {
  grid-row: span 2;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--card-bg-2);
}

.world-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.world-list a:hover .world-thumb img { transform: scale(1.05); }

/* A story without a photo keeps the text across the whole row. */
.world-list a.is-text { grid-template-columns: minmax(0, 1fr); }

.world-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.world-title {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.7;
}

.world-time {
  font-size: 12px;
  color: var(--muted-ink);
}

/* ======================================================================
   Sports: scoreboard strip, then a lead beside compact stories
   ====================================================================== */

/* The Sports section is the positioning context for its background. */
.sports {
  position: relative;
  isolation: isolate;
}

/* Only part of the objects shows: they hang off the section's top-left
   corner and this layer crops them to the panel, the way the World panel
   crops its globe. It sits on the padding box, just inside the border. */
.sports-bg-clip {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: 13px;
  pointer-events: none;
}

.sports-bg {
  position: absolute;
  top: -96px;
  left: -124px;
  width: 520px;
  height: 520px;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(circle at 45% 45%, #000 30%, rgba(0, 0, 0, 0.35) 62%, transparent 86%);
  mask-image: radial-gradient(circle at 45% 45%, #000 30%, rgba(0, 0, 0, 0.35) 62%, transparent 86%);
}

:root[data-theme="dark"] .sports-bg { opacity: 0.22; }

.sports-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

/* The lead: a wide photo with the text beneath it, both on a card. */
.sports-lead {
  display: flex;
  flex-direction: column;
  color: var(--green-900);
  text-decoration: none;
  transition: transform 0.3s ease;
}

.sports-lead:hover { transform: translateY(-3px); }
.sports-lead:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.sports-lead-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--card-border);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.sports-lead-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sports-lead:hover .sports-lead-media img { transform: scale(1.03); }

.sports-lead-body { display: block; padding: 16px 4px 0; }

.sports-lead-body strong {
  display: block;
  margin: 10px 0 8px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.7;
}

.sports-lead-standfirst {
  display: block;
  font-family: var(--font-article);
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted-ink);
}

/* Three cards: text on the start side, a small photo on the other. */
.sports-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sport-card { flex: 1; display: flex; }

.sport-card a {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 124px;
  gap: 16px;
  align-items: center;
  padding: 4px 0;
  color: var(--green-900);
  text-decoration: none;
  transition: transform 0.3s ease;
}

.sport-card + .sport-card { border-top: 1px solid var(--card-border); padding-top: 10px; }
.sport-card a:hover { transform: translateX(-3px); }
.sport-card a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.sport-body { min-width: 0; }

.sport-thumb {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--card-border);
  box-shadow: var(--card-shadow);
}

.sport-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sport-card a:hover .sport-thumb img { transform: scale(1.04); }

.sport-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted-ink);
}

.sport-kicker .pill {
  background: rgba(42, 106, 63, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--green-700);
}

.sport-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sports-lead:hover strong,
.sport-card a:hover .sport-title { color: var(--green-700); }

:root[data-theme="dark"] .sports-lead,
:root[data-theme="dark"] .sport-card a { color: #d9efe2; }

/* ---------- Search results (archive page, ?s=) ---------- */

/* Search again from the results, without opening the header box. */
.archive-search {
  display: flex;
  gap: 6px;
  max-width: 560px;
  margin-top: 16px;
  padding: 5px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  transition: border-color 0.15s ease;
}

.archive-search[hidden] { display: none; }
.archive-search:focus-within { border-color: var(--green-500); }
.archive-search .search-input { color: var(--page-ink); }
.archive-search .search-label { color: var(--muted-ink); opacity: 1; }

.search-results {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-result {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 20px 0;
}

.search-result + .search-result { border-top: 1px solid var(--card-border); }
.search-result.is-text { grid-template-columns: minmax(0, 1fr); }

.search-result-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: var(--card-bg-2);
}

.search-result-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.search-result:hover .search-result-media img { transform: scale(1.03); }

.search-result-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.search-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted-ink);
  font-size: 13px;
}

.search-result-kind {
  padding: 1px 10px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg-2);
  color: var(--green-900);
}

.search-result-kind:empty { display: none; }

.search-result-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.7;
}

.search-result-title a { color: var(--page-ink); text-decoration: none; }
.search-result-title a:hover { color: var(--green-700); }
.search-result-title a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.search-result-snippet {
  margin: 0;
  color: var(--muted-ink);
  font-size: 16px;
  line-height: 2;
}

/* The words searched for. */
.search-results mark {
  padding: 0 2px;
  background: color-mix(in srgb, var(--green-500) 24%, transparent);
  color: inherit;
}

:root[data-theme="dark"] .search-result-kind { color: #d9efe2; }
:root[data-theme="dark"] .search-results mark { background: color-mix(in srgb, var(--green-500) 34%, transparent); }

@media (max-width: 640px) {
  .search-result { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .search-result-title { font-size: 18px; }
  .search-result-snippet { font-size: 15px; line-height: 1.9; }
}

@media (prefers-reduced-motion: reduce) {
  .search-result-media img { transition: none; }
}

/* ---------- Responsive: report, world, sports ---------- */

@media (max-width: 1023px) {
  .report-panel { gap: 48px; }
  .report-title { font-size: 34px; }
  .world-grid { grid-template-columns: 1fr; }
  .world-lead { min-height: 280px; }
  .sports-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding: 14px 12px 16px; }
  .cat-bg { width: 270px; height: 270px; top: -34px; left: -64px; }
  .sports-bg {
    width: 330px;
    height: 330px;
    top: auto;
    left: auto;
    bottom: -76px;
    right: -88px;
    -webkit-mask-image: radial-gradient(circle at 62% 62%, #000 30%, rgba(0, 0, 0, 0.35) 62%, transparent 86%);
    mask-image: radial-gradient(circle at 62% 62%, #000 30%, rgba(0, 0, 0, 0.35) 62%, transparent 86%);
  }
  .report-rotator { margin-top: 22px; padding-bottom: 34px; }
  .report-panel { grid-template-columns: 1fr; gap: 12px; }
  .report-panel .report-media { order: -1; }
  /* On phones the rail lies along the bottom instead of between the columns. */
  .report-rail {
    top: auto;
    bottom: 0;
    left: 10%;
    right: 10%;
    width: auto;
    height: 2px;
    margin: 0;
    flex-direction: row;
  }
  .report-title { font-size: 28px; }
  .world { margin-top: 32px; padding: 20px 16px; }
  .world-heading { font-size: 22px; }
  /* On phones the globe hangs off the bottom-right corner, under the last
     rows of the list, fading up towards the panel. */
  .world-globe {
    width: 320px;
    height: 320px;
    top: auto;
    bottom: -110px;
    inset-inline-end: auto;
    right: -90px;
    -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 30%, rgba(0, 0, 0, 0.35) 60%, transparent 85%);
    mask-image: radial-gradient(circle at 70% 70%, #000 30%, rgba(0, 0, 0, 0.35) 60%, transparent 85%);
  }
  .world-lead { min-height: 220px; }
  .world-lead-body { padding: 70px 16px 16px; }
  .world-lead-body strong { font-size: 19px; }
  .sports-lead-body { padding: 14px 2px 0; }
  .sports-lead-body strong { font-size: 20px; }
  .sport-card a { grid-template-columns: 1fr 96px; gap: 12px; }
  .sport-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .report-media img, .world-lead img, .world-thumb img, .sports-lead-media img, .sport-thumb img, .sports-slide-media img, .report-more svg, .report-panel, .sports-lead, .sport-card a, .sports-slide a { transition: none; }
  .world-globe, .sports-bg-clip, .cat-bg { display: none; }
  .chart-rail, .reel-rail { scroll-behavior: auto; }
}

/* ======================================================================
   Albums (multimedia archive) and the single album page
   ====================================================================== */

.album-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 24px;
}

.archive-grid.album-grid,
#archive-albums { margin-top: 0; }

.album a {
  display: block;
  color: var(--green-900);
  text-decoration: none;
}

/* The cover sits on two offset sheets, like a small pile of prints. */
.album-cover {
  position: relative;
  display: block;
  margin: 12px 0 14px;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  background: var(--card-border);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease;
}

.album-cover::before,
.album-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  z-index: -1;
  transition: transform 0.3s ease;
}

.album-cover::before { transform: translateY(-6px) scale(0.96); }
.album-cover::after { transform: translateY(-12px) scale(0.92); }

.album a:hover .album-cover { transform: translateY(-3px); }
.album a:hover .album-cover::before { transform: translateY(-10px) scale(0.96); }
.album a:hover .album-cover::after { transform: translateY(-18px) scale(0.92); }

.album-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.album-count {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  color: var(--green-900);
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  direction: ltr;
}

.album-count svg { width: 15px; height: 15px; }

.album-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color 0.2s ease;
}

.album a:hover .album-title { color: var(--green-700); }

.album-date {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted-ink);
}

:root[data-theme="dark"] .album a { color: #d9efe2; }

/* ---------- Single album ---------- */

.gallery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted-ink);
}

.gallery-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gallery-meta-item svg {
  width: 18px;
  height: 18px;
  color: var(--green-700);
}

.gallery-intro {
  max-width: 900px;
  margin: 16px 0 0;
  font-family: var(--font-article);
  font-size: 17px;
  line-height: 2;
  color: var(--muted-ink);
}

/* Two columns; every third photo spans both. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 32px 0;
}

.photo { margin: 0; }

.photo:nth-child(3n + 1) { grid-column: span 2; }

.photo-link {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-border);
  box-shadow: var(--card-shadow);
  cursor: zoom-in;
}

.photo-link:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.photo-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.photo-link:hover img { transform: scale(1.02); }

.photo figcaption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted-ink);
}

.photo-num {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--green-500);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.gallery-page .article-share { border-bottom: 0; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 24, 18, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox-figure {
  max-width: min(1400px, 100%);
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox-figure figcaption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 900px;
  color: #fff;
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
}

.lightbox-count {
  flex: none;
  padding: 1px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-family: var(--font-latin);
  font-size: 13px;
  line-height: 24px;
  direction: ltr;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease;
}

.lightbox-close:hover,
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lightbox-close { top: 18px; left: 18px; }
.lightbox-close svg { width: 24px; height: 24px; }

.lightbox-arrow { top: 50%; transform: translateY(-50%); }
.lightbox-arrow svg { width: 26px; height: 26px; }
.lightbox-prev { right: 18px; }
.lightbox-next { left: 18px; }

body.has-lightbox { overflow: hidden; }

@media (max-width: 1023px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .album-title { font-size: 16px; }
  .photo-grid { grid-template-columns: 1fr; gap: 22px; margin: 22px 0; }
  .photo:nth-child(3n + 1) { grid-column: auto; }
  .photo figcaption { font-size: 14px; }
  .gallery-intro { font-size: 16px; }
  .lightbox { padding: 12px; }
  .lightbox-figure img { max-height: calc(100vh - 170px); }
  .lightbox-figure figcaption { font-size: 14px; }
  .lightbox-close, .lightbox-arrow { width: 40px; height: 40px; }
  .lightbox-arrow { top: auto; bottom: 14px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .album-cover, .album-cover::before, .album-cover::after, .photo-link img { transition: none; }
}

/* Breaking stories keep their category and time separate from the alert. */
.story-media > .pill-breaking {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  border-radius: 7px;
  background: #fff2f0;
  color: #b3261e;
}
.breaking-title, .breaking-title a { color: #b3261e !important; }
.breaking-title:hover, .breaking-title a:hover { color: #8f2019 !important; }
[data-theme="dark"] .breaking-title, [data-theme="dark"] .breaking-title a { color: #ff9189 !important; }
/* The World lead sits on a photo, so its breaking headline stays white. */
.world-lead .breaking-title, .world-lead .breaking-title a, .world-lead .breaking-title a:hover,
[data-theme="dark"] .world-lead .breaking-title, [data-theme="dark"] .world-lead .breaking-title a { color: #fff !important; }
.reel-media { background: var(--brand, #1b6b50); }
.reel-title {
  position: absolute;
  inset: auto 0 0;
  padding: 36px 14px 16px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  font-size: 17px;
  line-height: 1.8;
}
.article-video { background: #102b23; }
.article-video video { display: block; width: 100%; max-height: 75vh; }
.article-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ======================================================================
   Laptops: the desktop layout from 1024px up, scaled to the window
   ====================================================================== */

/* The page is drawn for a 1920px screen. A laptop gets the same layout and
   columns, with its type, gaps and fixed sizes scaled to the window: each
   value runs from its laptop size at 1024px to its full size at 1920px.
   --fluid is 0px at 1024px and 1px at 1920px and wider, so
   calc(22px + 8 * var(--fluid)) is 22px at 1024px and 30px at 1920px.
   Below 1024px the tablet and phone rules above apply instead. */
@media (min-width: 1024px) {
  :root {
    --fluid: clamp(0px, (100vw - 1024px) / 896, 1px);
    --nav-h: calc(60px + 20 * var(--fluid));
  }

  /* Header: the logo and all eleven links on one row. */
  .header-main {
    padding: calc(16px + 8 * var(--fluid)) calc(24px + 42 * var(--fluid));
    column-gap: calc(18px + 10 * var(--fluid));
  }
  .brand-logo { width: calc(124px + 60 * var(--fluid)); }
  .topnav a {
    gap: calc(6px + 4 * var(--fluid));
    padding: 0 calc(6px + 2 * var(--fluid));
    font-size: calc(15px + 5 * var(--fluid));
  }
  .topnav .icon {
    width: calc(20px + 10 * var(--fluid));
    height: calc(20px + 10 * var(--fluid));
  }
  .ticker {
    min-height: calc(42px + 6 * var(--fluid));
    padding: calc(6px + 2 * var(--fluid)) calc(24px + 4 * var(--fluid));
  }
  .ticker-headline { font-size: calc(16px + 2 * var(--fluid)); }
  .ticker-list li::after { margin-inline: calc(16px + 6 * var(--fluid)); }
  .ticker-social { gap: calc(14px + 2 * var(--fluid)); }
  .ticker-social svg {
    width: calc(18px + 2 * var(--fluid));
    height: calc(18px + 2 * var(--fluid));
  }

  /* Page gutters, the same on the header, the page and the footer. */
  .page { padding: calc(28px + 12 * var(--fluid)) calc(24px + 42 * var(--fluid)) calc(36px + 12 * var(--fluid)); }
  .site-foot { padding: 0 calc(24px + 42 * var(--fluid)) calc(28px + 12 * var(--fluid)); }

  /* Featured stories and the portrait ad. The slides stay 36px apart, as
     js/header.js moves them by that much. */
  .hero {
    grid-template-columns: minmax(0, 1fr) calc(240px + 80 * var(--fluid));
    gap: calc(20px + 12 * var(--fluid));
    margin-bottom: calc(28px + 12 * var(--fluid));
  }
  .featured { --featured-pad: calc(20px + 8 * var(--fluid)); }
  .featured-slide {
    gap: calc(24px + 12 * var(--fluid));
    min-height: calc((100cqw - 60px - 12 * var(--fluid)) * 1.1 / 2.1 * 0.75);
  }
  .featured-title {
    margin-bottom: calc(12px + 6 * var(--fluid));
    font-size: calc(36px + 18 * var(--fluid));
  }
  .featured-meta {
    gap: calc(10px + 4 * var(--fluid));
    margin-bottom: calc(14px + 8 * var(--fluid));
    font-size: calc(14px + 1 * var(--fluid));
  }
  .featured-excerpt { font-size: calc(15px + 2 * var(--fluid)); }

  /* Titled sections and story cards */
  .section {
    margin-top: calc(36px + 12 * var(--fluid));
    padding: calc(14px + 4 * var(--fluid)) calc(16px + 4 * var(--fluid)) calc(18px + 4 * var(--fluid));
  }
  .ad-between { margin-top: calc(36px + 12 * var(--fluid)); }
  .section-title {
    padding: calc(8px + 2 * var(--fluid)) calc(20px + 8 * var(--fluid)) calc(6px + 2 * var(--fluid));
    font-size: calc(19px + 3 * var(--fluid));
  }
  .section-more { font-size: calc(15px + 2 * var(--fluid)); }
  .section .story-grid,
  .section .album-grid { margin-top: calc(20px + 6 * var(--fluid)); }
  .story-grid { gap: calc(28px + 12 * var(--fluid)) calc(20px + 8 * var(--fluid)); }
  .story-title { font-size: calc(17px + 4 * var(--fluid)); }

  /* Weather */
  .forecast {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 3.2fr);
    margin-top: calc(20px + 6 * var(--fluid));
  }
  .forecast-now {
    gap: 6px calc(12px + 6 * var(--fluid));
    padding: calc(16px + 4 * var(--fluid)) calc(18px + 8 * var(--fluid));
  }
  .forecast-place { font-size: calc(16px + 2 * var(--fluid)); }
  .forecast-now-icon {
    width: calc(50px + 14 * var(--fluid));
    height: calc(50px + 14 * var(--fluid));
  }
  .forecast-now-temp { font-size: calc(30px + 8 * var(--fluid)); }
  .forecast-now-text { font-size: calc(15px + 2 * var(--fluid)); }
  .forecast-day {
    gap: calc(6px + 2 * var(--fluid));
    padding: calc(12px + 4 * var(--fluid)) 4px calc(14px + 4 * var(--fluid));
  }
  .forecast-name { font-size: calc(14px + 2 * var(--fluid)); }
  .forecast-icon {
    width: calc(26px + 4 * var(--fluid));
    height: calc(26px + 4 * var(--fluid));
  }
  .forecast-range {
    gap: calc(8px + 2 * var(--fluid));
    font-size: calc(13px + 2 * var(--fluid));
  }

  /* Reels and the lifestyle rail */
  .reel-rail {
    gap: calc(12px + 4 * var(--fluid));
    margin-top: calc(20px + 8 * var(--fluid));
  }
  .reel { flex-basis: calc(164px + 36 * var(--fluid)); }
  .reel-title { font-size: calc(15px + 2 * var(--fluid)); }
  .chart-rail {
    gap: calc(16px + 4 * var(--fluid));
    margin-top: calc(20px + 8 * var(--fluid));
  }
  .chart-card { flex-basis: calc(180px + 32 * var(--fluid)); }
  .chart-title {
    margin-top: calc(12px + 4 * var(--fluid));
    font-size: calc(15px + 2 * var(--fluid));
  }

  /* Report */
  .report-rotator { margin-top: calc(24px + 8 * var(--fluid)); }
  .report-panel { gap: calc(48px + 24 * var(--fluid)); }
  .report-title { font-size: calc(36px + 18 * var(--fluid)); }
  .report-excerpt { font-size: calc(15px + 1 * var(--fluid)); }

  /* World */
  .world {
    margin-top: calc(36px + 12 * var(--fluid));
    padding: calc(22px + 10 * var(--fluid));
  }
  .world-globe {
    top: calc(-52px - 18 * var(--fluid));
    inset-inline-end: calc(-68px - 22 * var(--fluid));
    width: calc(360px + 120 * var(--fluid));
    height: calc(360px + 120 * var(--fluid));
  }
  .world-head { margin-bottom: calc(16px + 6 * var(--fluid)); }
  .world-heading { font-size: calc(22px + 4 * var(--fluid)); }
  .world-grid { gap: calc(18px + 6 * var(--fluid)); }
  .world-lead { min-height: calc(260px + 80 * var(--fluid)); }
  .world-lead-body { padding: calc(80px + 20 * var(--fluid)) calc(18px + 6 * var(--fluid)) calc(18px + 4 * var(--fluid)); }
  .world-lead-body strong { font-size: calc(20px + 4 * var(--fluid)); }
  .world-list a {
    grid-template-columns: calc(88px + 16 * var(--fluid)) minmax(0, 1fr);
    padding: calc(9px + 3 * var(--fluid)) 8px;
  }
  .world-title { font-size: calc(15px + 1 * var(--fluid)); }

  /* People */
  .people {
    margin-top: calc(36px + 12 * var(--fluid));
    padding: calc(22px + 6 * var(--fluid)) calc(24px + 8 * var(--fluid)) calc(18px + 4 * var(--fluid));
  }
  .people-head { margin-bottom: calc(16px + 6 * var(--fluid)); }
  .people-title { font-size: calc(22px + 4 * var(--fluid)); }
  .people-track { gap: calc(16px + 4 * var(--fluid)); }
  .person { flex-basis: calc(200px + 50 * var(--fluid)); }
  .person-body { padding: calc(70px + 20 * var(--fluid)) calc(12px + 4 * var(--fluid)) calc(12px + 4 * var(--fluid)); }
  .person-body strong { font-size: calc(16px + 2 * var(--fluid)); }

  /* Photo albums */
  .gallery {
    margin-top: calc(36px + 12 * var(--fluid));
    padding: calc(22px + 6 * var(--fluid)) calc(24px + 8 * var(--fluid)) calc(24px + 8 * var(--fluid));
  }
  .gallery-head { margin-bottom: calc(16px + 6 * var(--fluid)); }
  .gallery-title { font-size: calc(22px + 4 * var(--fluid)); }
  .gallery-title svg {
    width: calc(22px + 4 * var(--fluid));
    height: calc(22px + 4 * var(--fluid));
  }
  .gallery-grid { gap: calc(20px + 8 * var(--fluid)); }
  .gallery-stage { min-height: calc(300px + 60 * var(--fluid)); }
  .gallery-lead-body { padding: calc(20px + 8 * var(--fluid)) calc(22px + 8 * var(--fluid)) calc(18px + 6 * var(--fluid)); }
  .gallery-lead-title { font-size: calc(21px + 9 * var(--fluid)); }
  .gallery-item {
    grid-template-columns: calc(116px + 34 * var(--fluid)) minmax(0, 1fr);
    gap: calc(12px + 4 * var(--fluid));
    padding: calc(9px + 3 * var(--fluid)) 0;
  }
  .gallery-item-title { font-size: calc(15px + 2 * var(--fluid)); }

  /* Sports */
  .sports-bg {
    top: calc(-74px - 22 * var(--fluid));
    left: calc(-96px - 28 * var(--fluid));
    width: calc(400px + 120 * var(--fluid));
    height: calc(400px + 120 * var(--fluid));
  }
  .sports-grid {
    gap: calc(18px + 6 * var(--fluid));
    margin-top: calc(24px + 8 * var(--fluid));
  }
  .sports-lead-body { padding: calc(12px + 4 * var(--fluid)) 4px 0; }
  .sports-lead-body strong { font-size: calc(20px + 4 * var(--fluid)); }
  .sports-lead-standfirst { font-size: calc(14px + 1 * var(--fluid)); }
  .sport-card a {
    grid-template-columns: 1fr calc(100px + 24 * var(--fluid));
    gap: calc(12px + 4 * var(--fluid));
  }
  .sport-title { font-size: calc(15px + 2 * var(--fluid)); }

  /* Udhaas */
  .udhaas-home {
    margin-top: calc(36px + 12 * var(--fluid));
    padding: calc(22px + 10 * var(--fluid));
  }
  .udhaas-home-head { margin-bottom: calc(18px + 6 * var(--fluid)); }
  .udhaas-home-title { font-size: calc(22px + 4 * var(--fluid)); }
  .udhaas-home-grid { gap: calc(18px + 6 * var(--fluid)); }
  .udhaas-feature { padding: calc(26px + 8 * var(--fluid)) calc(26px + 8 * var(--fluid)) calc(20px + 6 * var(--fluid)); }
  .udhaas-feature-title { font-size: calc(20px + 3 * var(--fluid)); }
  .udhaas-feature-text { font-size: calc(16px + 1 * var(--fluid)); }
  .udhaas-recent-card { padding: calc(11px + 3 * var(--fluid)) calc(14px + 4 * var(--fluid)); }
  .udhaas-recent-title { font-size: calc(15px + 2 * var(--fluid)); }
  .udhaas-send { padding: calc(14px + 4 * var(--fluid)) calc(16px + 4 * var(--fluid)); }
  .udhaas-send strong { font-size: calc(16px + 2 * var(--fluid)); }

  /* Category, search and album pages */
  .archive-head { margin-bottom: calc(20px + 8 * var(--fluid)); }
  .archive-title { font-size: calc(27px + 7 * var(--fluid)); }
  .cat-bg {
    top: calc(-54px - 16 * var(--fluid));
    left: calc(-86px - 24 * var(--fluid));
    width: calc(360px + 100 * var(--fluid));
    height: calc(360px + 100 * var(--fluid));
  }
  .search-result { grid-template-columns: calc(168px + 32 * var(--fluid)) minmax(0, 1fr); }
  .search-result-title { font-size: calc(18px + 3 * var(--fluid)); }
  .album-grid { gap: calc(28px + 8 * var(--fluid)) calc(20px + 4 * var(--fluid)); }
  .album-title { font-size: calc(17px + 2 * var(--fluid)); }

  /* The side column of category and article pages */
  .archive-layout,
  .article-layout {
    grid-template-columns: minmax(0, 1fr) calc(260px + 40 * var(--fluid));
    gap: calc(28px + 12 * var(--fluid));
  }
  .article-head {
    grid-template-columns: minmax(0, 1fr) calc(260px + 40 * var(--fluid));
    column-gap: calc(28px + 12 * var(--fluid));
  }

  /* Article pages keep room on each side for the share toolbar, which is
     fixed to the right edge of the window. */
  .article-page { width: calc(100% - 2 * (88px + 37 * var(--fluid))); }
  .article-title { font-size: calc(27px + 7 * var(--fluid)); }
}

/* The sports section's side column, beside the stories on wider laptops. */
@media (min-width: 1281px) {
  .sports-grid:has(> .sports-side) { grid-template-columns: 1.25fr 1fr calc(240px + 60 * var(--fluid)); }
}