/* ===================================================================
   Masthead (utility strip + brand row) + section bar + breaking-news bar.

   Like the footer, this is a deliberate departure from the .NET markup and
   uses its own `sp-*` class names, so every original rule in globals.css and
   home.css stays untouched and unused. Reverting = revert the components and
   drop this import.

   Design intent:
     - THREE BANDS, each with one job. A grey utility strip for the things a
       reader looks for once (who you are, where to follow you, which edition);
       a white brand row for the masthead itself; a dark bar for the sections.
     - The dark bar is the whole point of the layout. The masthead above it is
       white and the story grid below it is white, so the bar is the only
       horizontal band on the page — the eye lands on the navigation without
       needing a rule, a shadow or a border to be told where it is.
     - Everything that is a control gets a shape: the date is a card, the
       YouTube link is a pill, home is a tile. Loose text in a masthead reads
       as a caption for whatever is nearest to it.
     - One accent (var(--sp-red)) throughout, matching the footer. On the dark
       bar it lifts to --sp-bar-red, because #d90000 on #14181f is 2.1:1 and
       unreadable.
   =================================================================== */

.sp-head {
  --sp-red: #d90000;
  --sp-red-hi: #f0342b; /* gradient top / hover                     */
  --sp-ink: #14181d;
  --sp-muted: #6b7480;
  --sp-line: #e7eaee;
  --sp-surface: #fff;

  /* utility strip */
  --sp-strip: #f3f5f8;

  /* dateline card */
  --sp-tint: #fdeff1;
  --sp-tint-line: #f8dfe3;
  --sp-tint-chip: #fff;

  /* section bar */
  --sp-bar: #14181f;
  --sp-bar-hi: #1e242e; /* gradient top — a flat black bar looks printed */
  --sp-bar-ink: #e3e8ef;
  --sp-bar-red: #ff4d4d;
  --sp-bar-edge: rgba(255, 255, 255, 0.09);

  background: var(--sp-surface);
}

/* ---------------- ① utility strip ---------------- */
.sp-utility {
  background: var(--sp-strip);
  border-bottom: 1px solid var(--sp-line);
  font-size: 12.5px;
  color: var(--sp-muted);
}

.sp-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
}

.sp-utility-tagline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.2px;
  min-width: 0;
}

.sp-utility-tagline svg {
  color: var(--sp-red);
  flex: 0 0 auto;
}

.sp-utility-tagline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-utility-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.sp-utility-follow {
  font-weight: 600;
  color: var(--sp-ink);
  letter-spacing: 0.2px;
}

.sp-utility-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Brand colours, not a uniform grey. These four marks are recognised by their
   colour before their shape, and a row of grey squares makes the reader stop
   and read each glyph. The icons come from partials/brand_icon, so they are
   `height:1em` — font-size is what sizes them. */
.sp-utility-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.sp-utility-social a:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 14px rgba(16, 24, 36, 0.22);
}

.sp-utility-social .is-yt {
  background: #ff0000;
}

.sp-utility-social .is-fb {
  background: #1877f2;
  border-radius: 50%;
}

.sp-utility-social .is-x {
  background: #0f1419;
}

.sp-utility-social .is-ig {
  background: linear-gradient(45deg, #f9ce34 5%, #ee2a7b 50%, #6228d7 95%);
}

.sp-utility-sep {
  width: 1px;
  height: 18px;
  background: #d8dde4;
  flex: 0 0 auto;
}

.sp-utility-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--sp-ink);
  white-space: nowrap;
}

.sp-utility-lang svg {
  color: var(--sp-muted);
  flex: 0 0 auto;
}

/* ---------------- ② brand row: logo / date / CTA ---------------- */
.sp-head-top {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: 12px 0;
}

.sp-head-logo {
  flex: 0 0 auto;
}

.sp-head-logo img {
  /* 72px. 60 was inherited from the .NET markup (its <img height="60">) — a
     parity number, not a design one. The logo shares this row with a dateline
     card and a call-to-action pill, and under 68 it stopped reading as the
     thing the row is FOR. Ratio untouched (width:auto). */
  height: 72px;
  width: auto;
  display: block;
}

/* Hairline between the brand and the dateline. Not decoration: it is what says
   the date belongs to the paper rather than being the first line of the page. */
.sp-head-rule {
  width: 1px;
  align-self: stretch;
  margin: 10px 0;
  background: var(--sp-line);
  flex: 0 0 auto;
}

/* The dateline is a CARD. As loose text with a red rule beside it, it read as a
   caption for the logo; boxed, it reads as the one live thing in the masthead. */
.sp-head-date {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--sp-tint-line);
  border-radius: 14px;
  background: var(--sp-tint);
  flex: 0 1 auto;
  min-width: 0;
}

.sp-head-date-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--sp-tint-chip);
  color: var(--sp-red);
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(217, 0, 0, 0.12);
}

.sp-head-date-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
  min-width: 0;
}

.sp-head-date-day {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-ink);
  white-space: nowrap;
}

/* Desktop shows the full month; the compact span is mobile-only. */
.sp-head-date-full {
  display: inline;
}

.sp-head-date-compact {
  display: none;
}

/* `tabular-nums` so the seconds do not shuffle the card's width once a second —
   proportional digits make a running clock visibly breathe. */
.sp-head-date-time {
  font-size: 12.5px;
  color: var(--sp-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Solid CTA — it is the only button up here, so it can carry weight. The ring
   plus the long shadow are what make it read as lit rather than merely filled;
   both are colour on colour, so neither costs a layer at paint time. */
.sp-head-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 8px 20px 8px 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sp-red-hi), #b60000);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.14), 0 10px 22px -10px rgba(217, 0, 0, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.sp-head-cta:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(217, 0, 0, 0.2), 0 14px 26px -10px rgba(217, 0, 0, 0.95);
}

.sp-head-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: #e00000;
  flex: 0 0 auto;
}

/* Brand-row theme toggle — hidden on desktop (the toggle lives in the section
   bar there); shown on mobile/tablet where it replaces the YouTube CTA. */
.sp-head-theme {
  display: none;
  flex: 0 0 auto;
}

/* ---------------- ③ section bar ---------------- */
.sp-nav {
  background: var(--sp-surface);
  padding-bottom: 14px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: box-shadow 0.25s ease;
}

.sp-nav-bar {
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  /* Not flat black: a single value reads as printed ink, the two-stop gradient
     reads as a surface with a light source, which is what lets the red home
     tile and the white toggle sit ON it rather than in it. */
  background: linear-gradient(180deg, var(--sp-bar-hi), var(--sp-bar));
  box-shadow: 0 12px 28px -20px rgba(8, 12, 20, 0.95);
  /* Clips the home tile's square corners to the bar's radius, so the tile does
     not need corner-by-corner radii that would then have to be undone when the
     bar goes sticky and square. */
  overflow: hidden;
}

/* Sticky: the bar stops being an inset object and becomes a full-width band.
   Radius and inset both go, otherwise a rounded rectangle appears to be
   floating in front of the page while the reader scrolls under it. */
.sp-nav.sticky-nav {
  position: fixed;
  left: 0;
  padding-bottom: 0;
  background: var(--sp-bar);
  box-shadow: 0 6px 20px rgba(8, 12, 20, 0.35);
  transform: translateY(-100%);
  animation: slideDown 0.35s forwards;
}

.sp-nav.sticky-nav .sp-nav-bar {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The home TILE. Full-height, welded to the left end, and the only red on the
   bar — so "back to the front page" is findable without reading. */
.sp-nav-home {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  min-width: 76px;
  padding: 7px 16px;
  background: linear-gradient(135deg, var(--sp-red-hi), #c00d0d);
  color: #fff;
  text-decoration: none;
  transition: filter 0.18s ease;
}

.sp-nav-home:hover {
  color: #fff;
  filter: brightness(1.08);
}

.sp-nav-home span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.sp-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  /* CENTRED on desktop. Left-aligned, all the slack piled up before the theme
     toggle and the bar looked like it had been pushed sideways. `justify-content`
     is ignored once the items overflow (mobile), where the row correctly stays
     scrollable from the left — `safe center` keeps the first item reachable in
     browsers that support it. */
  justify-content: safe center;
}

.sp-nav-links::-webkit-scrollbar {
  display: none;
}

.sp-nav-links a {
  position: relative;
  flex: 0 0 auto;
  padding: 15px 13px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--sp-bar-ink);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.18s ease, background 0.18s ease;
}

/* A barely-there wash on hover, under the underline. On its own the colour
   change left the pointer with no sense of the item's bounds; the wash gives
   the row a hit area without drawing a box around every section. */
.sp-nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

/* Underline grows from the centre — reads as a deliberate pointer rather
   than a rectangle appearing under the word. */
.sp-nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 8px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--sp-bar-red);
  transition: left 0.22s ease, right 0.22s ease;
}

.sp-nav-links a:hover::after {
  left: 12px;
  right: 12px;
}

/* ---------------- current section ----------------
   This styling used to be `.sp-nav-pill`, hard-coded onto the LAST nav item as
   decoration. A filled pill in a navigation bar reads as "you are here", so the
   masthead told every reader they were in अर्थ-व्यापार no matter what page they
   were on. It is now driven by the route.

   Marked up as `[aria-current="page"]` rather than by class alone, so the
   painted state and the state announced to a screen reader cannot drift apart. */
.sp-nav-links a.sp-nav-current,
.sp-nav-links a[aria-current="page"] {
  color: var(--sp-bar-red);
  font-weight: 700;
}

/* The hover underline, made permanent for the current section — the same
   affordance the reader already learned by hovering, rather than a second
   unrelated visual language. */
.sp-nav-links a.sp-nav-current::after,
.sp-nav-links a[aria-current="page"]::after {
  left: 12px;
  right: 12px;
}

/* The home tile is already solid red, so "current" cannot be carried by colour
   there. A hairline under the label does it without changing the tile. */
.sp-nav-home[aria-current="page"] span {
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.85);
}

.sp-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 10px;
}

/* Base toggle. `.sp-nav-toggle` is also used by the brand row on mobile and by
   the settings sheet in the bottom bar, so the light-surface styling stays
   here and only the ON-THE-DARK-BAR variant is scoped to `.sp-nav-bar`. */
.sp-nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--sp-line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sp-nav-toggle:hover {
  background: #f4f6f8;
  border-color: #d7dce2;
}

/* On the dark bar the same button has to be a light disc — a transparent
   circle with a hairline disappears into the gradient. */
.sp-nav-bar .sp-nav-toggle {
  width: 40px;
  height: 40px;
  background: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.sp-nav-bar .sp-nav-toggle:hover {
  background: #fff;
  filter: brightness(0.96);
}

/* The theme icons carry a colour that matches what they stand for — a warm
   golden sun for light mode, a cool moonlit blue for dark — instead of the
   flat grey they inherited from currentColor. */
.sp-nav-toggle .bi-sun-fill {
  color: #f5a623;
}

.sp-nav-toggle .bi-moon-stars {
  color: #8ab0f0;
}

/* ---------------- breaking news ---------------- */
/* The breaking bar lives in the page body, NOT inside .sp-head, so it cannot
   inherit the variables declared there — it has to declare its own. */
.sp-breaking {
  --sp-red: #d90000;

  display: flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  /* Royal blue, not the near-black navy (#04182a) this shipped with. Checked
     before switching, because the strip carries the only light-on-dark text on
     the homepage: #eaf1f7 headlines on this blue measure 8.85:1, still past
     WCAG AAA (7:1) for body text, so the Lighthouse contrast audit is untouched
     by the change. */
  background: var(--sp-blue-deep);
  box-shadow: 0 4px 16px rgba(4, 24, 42, 0.18);
}

.sp-breaking-label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--sp-red);
  color: #fff;
  font-size: 13px;
  /* 700, not 800: only the 400/500/600/700 cuts are loaded, so 800 would be
     synthesised by the browser and render slightly smeared. */
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* The broadcast icon is the mobile-only stand-in for the words; hidden on
   desktop where there is room to spell it out. A gentle "transmitting" pulse
   gives it the live feel the dropped dot used to carry. Only transform +
   opacity animate — both GPU-composited, so no layout work and no perf cost. */
.sp-breaking-icon {
  display: none;
  flex: 0 0 auto;
  transform-origin: center;
  animation: sp-breaking-wave 1.8s ease-in-out infinite;
}

@keyframes sp-breaking-wave {
  0%,
  100% {
    transform: scale(0.86);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* Respect users who ask the OS to reduce motion — Best Practices expects it. */
@media (prefers-reduced-motion: reduce) {
  .sp-breaking-icon {
    animation: none;
  }
}

/* A pulsing dot signals "live" better than a static icon — motion is what
   peripheral vision picks up. */
.sp-breaking-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  animation: sp-pulse 1.6s ease-in-out infinite;
}

@keyframes sp-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65);
  }
  70% {
    opacity: 0.75;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
}

.sp-breaking-track {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.sp-breaking-items {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: sp-marquee 55s linear infinite;
  padding-left: 18px;
}

.sp-breaking-track:hover .sp-breaking-items {
  animation-play-state: paused;
}

@keyframes sp-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.sp-breaking-items a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #eaf1f7;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding-right: 20px;
  transition: color 0.18s ease;
}

.sp-breaking-items a:hover {
  color: #fff;
}

/* The SP mark separates headlines (it replaced a 5px red dot).
 *
 * A ::before BACKGROUND, not an <img>, and that is the whole reason this costs
 * nothing on any of the three scores:
 *
 *   ACCESSIBILITY — a pseudo-element with empty `content` never enters the
 *     accessibility tree, so a screen reader is not made to announce a logo
 *     between every headline. An <img> would need alt="" + aria-hidden on ~10
 *     nodes to get back to where this already is, and it would put ~10 more
 *     elements in reach of the image-alt and unsized-images audits.
 *   PERFORMANCE — one 2.79 KB request, shared by every separator on the page.
 *     The source logo, public/Content/cust_img/SP_logo.png, is 134×134 and
 *     27.3 KB; at an 18px slot that is ~10x more bytes than the strip can use,
 *     and it would be competing for bandwidth with the LCP hero on a throttled
 *     connection — the metric with the least headroom here. icon-32.png is the
 *     same artwork resampled to 54px, which still covers a 3x display.
 *   BEST PRACTICES — no new script, no new DOM, nothing deprecated.
 *
 * 18px is the largest mark the strip absorbs for free: the headlines set a
 * 21.7px line box (14.5px x 1.5), so the bar's height does not move.
 */
.sp-breaking-items a::before {
  content: "";
  width: 18px;
  height: 18px;
  /* No border-radius — the artwork is already a circle on a transparent field,
     so rounding would only clip its edge. */
  background: url("/assets/brand/icon-32.png") center / contain no-repeat;
  flex: 0 0 auto;
  margin-right: 3px;
}

.sp-breaking-close {
  flex: 0 0 auto;
  /* Centred in a ≥24px box so it meets the WCAG target-size minimum. The ×
     glyph is unchanged; only the tappable area grows. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: #7d93a6;
  font-size: 20px;
  line-height: 1;
  padding: 0 12px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.sp-breaking-close:hover {
  color: #fff;
}

/* ---------------- dark mode ---------------- */
/* `.sp-nav` is inside `.sp-head`, so it inherits these — it is listed anyway
   because the sticky bar is painted while the masthead is scrolled away and a
   future refactor that lifts it out of the header should not silently unstyle
   it. */
.dark-mode .sp-head,
.dark-mode .sp-nav {
  --sp-ink: #e6e9ed;
  --sp-muted: #9aa6b2;
  --sp-line: #2a3038;
  --sp-surface: #121212;
  --sp-strip: #171b21;

  /* The dateline card keeps its red cast, at the strength a dark surface can
     carry: #fdeff1 on #121212 is a white slab. */
  --sp-tint: #241a1c;
  --sp-tint-line: #3a2a2d;
  --sp-tint-chip: #1c2128;

  /* Barely lighter than the page, not darker — the bar has to stay findable
     against a #121212 body, and going darker would make it a hole. */
  --sp-bar: #1a1f27;
  --sp-bar-hi: #232935;
}

.dark-mode .sp-utility-sep {
  background: #2c333c;
}

/* Light mode gets the bar's edge from the contrast alone; dark mode needs a
   hairline, or the bar and the page melt into one another. */
.dark-mode .sp-nav-bar {
  box-shadow: 0 0 0 1px var(--sp-bar-edge), 0 12px 28px -20px #000;
}

.dark-mode .sp-nav.sticky-nav .sp-nav-bar {
  box-shadow: none;
}

.dark-mode .sp-head-date-icon {
  box-shadow: none;
}

.dark-mode .sp-nav-toggle:hover {
  background: #1e242b;
  border-color: #333b44;
}

/* A white disc holding a moon is the wrong way round — in dark mode the
   toggle becomes a raised dark disc. */
.dark-mode .sp-nav-bar .sp-nav-toggle {
  background: #2b323c;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.dark-mode .sp-nav-bar .sp-nav-toggle:hover {
  background: #343c48;
  filter: none;
}

/* ---------------- responsive ---------------- */

/* Breaking-news label — phones AND tablets (≤1024px).
   On both, the words "Breaking News" crowd out the headline, so the label
   collapses to just the broadcast icon. The pulsing dot is dropped here too:
   at this size the dot + icon sat cramped together and read as clutter, while
   the icon alone already signals "live broadcast". Desktop keeps the words
   and the dot (they have room and the dot's motion earns its place there). */
@media (max-width: 1024px) {
  /* "Follow Us :" goes; the marks say it themselves and the strip is tight. */
  .sp-utility-follow {
    display: none;
  }

  /* YouTube CTA moves to the bottom bar; the theme toggle takes its place in
     the masthead, and the section-bar toggle is dropped. */
  .sp-head-cta {
    display: none;
  }

  .sp-head-theme {
    display: inline-flex;
    margin-left: auto;
  }

  .sp-head-logo img {
    height: 62px;
  }

  /* The theme toggle lives in the brand row at the very top. Once the reader
     scrolls and the bar sticks (the brand row has scrolled away), the toggle
     would be out of reach — so it slides into the sticky bar, then slides back
     out when they return to the top and the masthead toggle is visible again.
     Collapsed via width/opacity/visibility (NOT display) so BOTH directions
     animate; visibility:hidden also keeps the collapsed button out of the
     accessibility tree at the top. */
  .sp-nav-bar .sp-nav-actions {
    width: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .sp-nav.sticky-nav .sp-nav-bar .sp-nav-actions {
    width: 40px;
    padding: 0 9px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sp-breaking-label {
    gap: 0;
    padding: 10px 13px;
  }

  .sp-breaking-dot {
    display: none;
  }

  .sp-breaking-label-text {
    display: none;
  }

  .sp-breaking-icon {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  /* The strip keeps the two halves that still carry meaning at this width:
     who the paper is, and where to follow it. The edition marker goes — it is
     the least-used thing up here and it is the only one that is not a link. */
  .sp-utility {
    font-size: 11.5px;
  }

  .sp-utility-inner {
    min-height: 34px;
    gap: 10px;
  }

  .sp-utility-sep,
  .sp-utility-lang {
    display: none;
  }

  .sp-utility-social {
    gap: 6px;
  }

  .sp-utility-social a {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 12.5px;
  }

  /* One row: brand, then the dateline card taking the slack, then the toggle.
     The hairline goes — at this width the card's own border is doing that job
     and a second vertical line beside it reads as a glitch. */
  .sp-head-top {
    gap: 9px;
    padding: 9px 0;
  }

  .sp-head-rule {
    display: none;
  }

  .sp-head-logo img {
    /* 52px. On a 390px phone the mark at 40 rendered 85×40 — small enough that
       the tagline under it was unreadable and the masthead looked like a
       placeholder. The card beside it shrinks with clamp() instead. */
    height: 52px;
  }

  /* The card holds its shape and only its contents shrink, so it still reads
     as one object rather than as two lines of loose text. min-width:0 lets it
     shrink below its content, and ellipsis is a last-resort safety net. */
  .sp-head-date {
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 11px;
    overflow: hidden;
  }

  .sp-head-date-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .sp-head-date-icon svg {
    width: 15px;
    height: 15px;
  }

  .sp-head-date-day {
    font-size: clamp(10.5px, 2.9vw, 13px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sp-head-date-time {
    font-size: clamp(9.5px, 2.6vw, 11.5px);
  }

  .sp-head-date-full {
    display: none;
  }

  .sp-head-date-compact {
    display: inline;
  }

  /* Section bar: the tile shrinks to an icon over a label, the sections keep
     the tap target they had, and the whole bar loses a little radius so it
     does not look like a pill at 360px. */
  .sp-nav {
    padding-bottom: 10px;
  }

  .sp-nav-bar {
    border-radius: 12px;
  }

  .sp-nav-home {
    min-width: 60px;
    padding: 6px 12px;
  }

  .sp-nav-home svg {
    width: 18px;
    height: 18px;
  }

  .sp-nav-home span {
    font-size: 10px;
  }

  /* Fade the right edge so the horizontal scroll is discoverable. */
  .sp-nav-links {
    padding: 0 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }

  .sp-nav-links a {
    font-size: 14.5px;
    padding: 12px 9px;
  }

  .sp-breaking-items a {
    font-size: 13.5px;
  }
}