/* ==========================================================================
   MARQUEE — the dark panel opening
   One rounded dark panel: the lead photograph on the left under a heavy
   scrim with the headline standing on it, four stories in a ruled column on
   the right, and a row of desk cards underneath on the light page.

   Two decisions worth knowing:

   1. The panel is dark in BOTH themes. --surface-invert flips (black on a
      light page, white on a dark one), which would turn this panel white
      the moment a reader switches — so the panel carries the design's own
      dark-theme values directly instead. No new colours: #101114, #ff5468,
      #6ba4ff, #3fcb92 and #e6c65c are all lifted from the kit's own
      [data-theme="dark"] block.
   2. Myanmar type does sit on the photograph here, which the earlier
      designs avoided. It is legible because the scrim reaches 95% opacity
      on the left third — the text is effectively on solid ground, not on a
      picture. That only holds while the scrim stays this heavy.
   ========================================================================== */

/* The band runs to the edge of the window and the content inside it is capped
   at --shell. That is the house rule the rest of the site already follows —
   backgrounds full-bleed, content 1440 — and it is what the phone was already
   doing. Floating the panel with 40px at the sides and 23px on top read as
   detached because those margins are not equal: a card only looks like a card
   when its margins match, and matching them would have meant more space, not
   less. niyo-shell.css gives every <section> 24px on top and Elementor's flex
   parent does not collapse it, hence margin-block: 0. */
.marquee {
  max-width: none;
  margin-block: 0;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 0 var(--sp-8);
}

/* the content cap, without needing an extra wrapper in the markup */
.marquee__panel { padding-inline: max(0px, calc((100% - var(--shell)) / 2)); }

.marquee__desks {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.marquee__panel {
  background: #101114;
  color: #fff;
  border-radius: 0;
  overflow: hidden;
  display: grid;
  min-width: 0;
  --desk: #ff5468;
}
.marquee__panel [data-rail="ink"]     { --desk: #f3f4f6; }
.marquee__panel [data-rail="trust"]   { --desk: #6ba4ff; }
.marquee__panel [data-rail="life"]    { --desk: #3fcb92; }
.marquee__panel [data-rail="premium"] { --desk: #e6c65c; }

/* One desk out of the eleven on the ink rail gets a colour of its own.
   ပြည်တွင်း is more than a third of everything the newsroom files, so on the
   front page it stops reading as a label and starts reading as the default.
   Gold separates it without inventing a colour: it is the premium rail's own
   value, already in the kit. Keyed on data-desk, not data-rail -- ink also
   carries politics, national, military, crime and six more, and none of them
   should move. Must sit after the rail rules: same (0,2,0), so order wins. */
.marquee__panel [data-desk="local"] { --desk: #e6c65c; }

/* ---------- the lead ---------- */
.marquee__lead {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  gap: var(--sp-4);
  padding: var(--sp-6);
  min-height: 22rem;
  min-width: 0;
}
/* two classes so the theme's own .pic { aspect-ratio: 16/10 } cannot win */
.marquee__lead .marquee__pic {
  position: absolute; inset: 0; z-index: -2;
  height: 100%; aspect-ratio: auto; border-radius: 0;
}
.marquee__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Tuned 2026-08-16. The first version was built for the type and forgot
       the picture: it left the headline at 14.5:1 where 4.5:1 is the bar, and
       paid for that surplus with the photograph, which showed at 30% of its
       own light (measured mean luminance 0.105 against the file's own 0.354).
       The plateau also ran to 68%, which on a 950px lead is the middle of the
       frame -- on this newsroom's pictures, the subject's face.

       These stops hold the dark ground across the headline column, then clear
       fast: the photograph is fully visible over the right 22% and reads at
       0.212 mean luminance, twice what it was. Paired with the smaller lead
       headline below -- the two changes are one change and must not be
       separated. Alone, this scrim drops the longest headline to 3.1:1 at
       1024px. */
    linear-gradient(90deg,
      rgb(16 17 20 / 0.94) 0%,
      rgb(16 17 20 / 0.90) 38%,
      rgb(16 17 20 / 0.34) 60%,
      rgb(16 17 20 / 0.03) 78%,
      rgb(16 17 20 / 0) 100%),
    linear-gradient(0deg,
      rgb(16 17 20 / 0.78) 0%,
      rgb(16 17 20 / 0) 38%);
  pointer-events: none;
}
.marquee__lead:hover .pic__inner { transform: scale(1.03); }

.marquee__kicker {
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0;                      /* never letter-space Myanmar */
  color: var(--desk);
}
.marquee__kicker[lang="en"] { text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* The size lives in a custom property so the length steps below can scale it
   without restating the clamp, and so the desktop block can redefine it in one
   place. */
.marquee__headline {
  --hl: clamp(1.625rem, 1.05rem + 2.5vw, 3rem);
  font-size: var(--hl);
  line-height: 1.34;   /* inert: .home h1, .home h2, .home h3 is (0,1,1) and wins with 1.52 */
  color: #e3e6ea;      /* 15.08:1. #fff was 18.88:1 and glared. */
  max-width: 18ch;
}

/* Two classes, because .home h1, .home h2, .home h3 sets 700 at (0,1,1).
   Only the lead: the side list and the desk cards are small, and small Myanmar
   needs the weight to stay legible. */
.marquee__lead .marquee__headline { font-weight: 400; }

/* Length steps. The class is written by niyo_marquee_len() in inc/marquee.php
   because CSS cannot count characters -- and because shrinking the type alone
   does nothing here: the measure is in ch, so a smaller font shrinks the column
   by the same factor and the line count never moves. Size and measure have to
   change together, which is what these rules and the per-breakpoint max-widths
   below do.

   Bands from the archive: 403 posts, median 90 characters, longest 282. */
.marquee__slide.is-long  .marquee__headline { font-size: calc(var(--hl) * 0.92); }
.marquee__slide.is-xlong .marquee__headline { font-size: calc(var(--hl) * 0.86); }

/* The leading stays at the site-wide 1.52 that .home h1, .home h2, .home h3
   sets. 1.34 was tried on 2026-08-16 and taken straight back out: it was chosen
   against line counts and panel height, and Myanmar read cramped at it. A script
   that stacks marks above and below the line needs the room. If the panel has to
   get shorter, take it out of the type size, not out of the leading. */


.marquee__headline a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }

.marquee__dek {
  font-size: var(--fs-lg); line-height: var(--lh-mm);
  color: rgb(255 255 255 / 0.74);
  max-width: 44ch;
}
.marquee__meta { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.52); }

/* The picture's caption. Quieter than a standfirst on purpose — it is a note
   about the photograph, not a second headline — and ruled off from the type
   above it the way a caption is in print. */
.marquee__caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-mm);
  color: rgb(255 255 255 / 0.7);
  max-width: 46ch;
  padding-top: var(--sp-3);
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
.marquee__caption b { font-weight: 600; color: #fff; }

/* The button does NOT take the desk colour. Measured: white on the gold rail
   is 1.67:1 and on the green 2.4:1 — both far under the 4.5:1 that 14px bold
   text needs. A call to action also has no reason to change hue per story.
   #c8102e is the kit's own light-theme --accent-breaking and gives 5.9:1. */
.marquee__cta {
  justify-self: start;
  background: #c8102e;
  color: #fff;
  border: 0;
  font-weight: 700;
  gap: var(--sp-2);
}
.marquee__cta:hover { opacity: 0.9; }
.marquee__cta svg { width: 18px; height: 18px; }

.marquee__dots {
  display: flex; gap: var(--sp-2);
  justify-content: flex-start;
  margin-inline-start: -5px;
  padding-top: var(--sp-4);
}
/* The bar a reader sees is still 4px tall. The button around it is 44x44 --
   the old control was 34x4, which is under the 24x24 WCAG 2.5.8 minimum and
   effectively untappable with a thumb. The bar is painted by ::before so the
   target can grow without the design changing, and the negative margins give
   back the 34px the taller row would otherwise add to the panel. */
.marquee__dots { gap: 0; padding-top: 0; margin-block: -14px -20px; }
.marquee__dots button:not(.marquee__hold) {
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 0; background: none;
  display: grid; place-items: center;
  cursor: pointer;
}
.marquee__dots button:not(.marquee__hold)::before {
  content: ""; width: 26px; height: 4px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.28);
  transition: width var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.marquee__dots button:not(.marquee__hold)[aria-current="true"]::before { background: var(--desk); width: 34px; }

/* The pause control. The lead advances on its own every seven seconds, and
   WCAG 2.2.2 requires a way to stop anything that moves by itself for longer
   than five. Same glyph and same behaviour as the breaking bar's own control
   in niyo-shell.css, so the two read as one site. */
.marquee__hold {
  width: 44px; height: 44px; padding: 0;
  border: 0; background: none;
  display: grid; place-items: center;
  margin-inline-start: var(--sp-2);
  border-radius: var(--radius-sm);
  color: rgb(255 255 255 / 0.52);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.marquee__hold:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.marquee__hold-glyph {
  width: 9px; height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
/* paused -> the button offers play */
.marquee__hold[aria-pressed="true"] .marquee__hold-glyph {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

/* The swap fades so it reads as a change rather than a glitch. The scrim is
   deliberately left out: fading it in would show the photograph undimmed for
   the first frames, which is exactly the moment the type needs it most. */
@media (prefers-reduced-motion: no-preference) {
  .marquee__slide[data-on="1"] > *:not(.marquee__scrim) {
    animation: marquee-in 420ms var(--ease) both;
  }
  @keyframes marquee-in { from { opacity: 0; } to { opacity: 1; } }
}

.marquee__slide { display: none; }
.marquee__slide[data-on="1"] { display: contents; }

/* ---------- the side column ---------- */
.marquee__side { display: grid; align-content: start; border-top: 1px solid rgb(255 255 255 / 0.12); }
.marquee__side li { border-top: 1px solid rgb(255 255 255 / 0.12); min-width: 0; }
.marquee__side li:first-child { border-top: 0; }
.marquee__side a {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4); min-width: 0;
}
.marquee__side .marquee__thumb { aspect-ratio: 16 / 10; border-radius: var(--radius-xs); }
.marquee__side-body { min-width: 0; display: grid; gap: var(--sp-1); }
.marquee__side-t {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-md); line-height: var(--lh-title);
  color: #e3e6ea;
}
.marquee__side a:hover .marquee__side-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.marquee__side a:hover .pic__inner { transform: scale(1.05); }
.marquee__side-at { font-size: var(--fs-2xs); color: rgb(255 255 255 / 0.52); }

/* ---------- the desk row, on the light page ---------- */
.marquee__desks { display: grid; gap: var(--sp-4); padding-top: var(--sp-6); }
.marquee__desk {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.marquee__desk:hover { border-color: var(--border-strong); }
.marquee__desk-top { display: flex; align-items: center; gap: var(--sp-2); }
.marquee__desk-name { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0; color: var(--desk, var(--accent-breaking)); }
.marquee__desk-top svg { width: 16px; height: 16px; margin-left: auto; color: var(--text-secondary); }
.marquee__desk .marquee__desk-pic { aspect-ratio: 16 / 10; border-radius: var(--radius-xs); }
.marquee__desk-t {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-md); line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserves exactly 3 line-boxes so a 1-line and a 3-line caption occupy
     the same footprint -- clamp alone only caps the ceiling, not the floor. */
  min-height: calc(var(--lh-title) * 3em);
}
.marquee__desk:hover .marquee__desk-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.marquee__desks li[data-rail="ink"]     { --desk: var(--text-primary); }
.marquee__desks li[data-rail="trust"]   { --desk: var(--accent-trust); }
.marquee__desks li[data-rail="life"]    { --desk: var(--accent-life); }
.marquee__desks li[data-rail="premium"] { --desk: var(--accent-premium); }
/* On the light page the same idea needs the light-theme gold: #e6c65c is
   1.67:1 on white and unreadable, --accent-premium is #8a6a12 there (5.06:1)
   and flips back to #e6c65c in dark. */
.marquee__desks li[data-desk="local"] { --desk: var(--accent-premium); }

@media (min-width: 600px) {
  .marquee__desks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .marquee__desks { padding-inline: var(--sp-6); }
  .marquee__lead { padding: var(--sp-8); }
  /* two, so four cards make two even rows instead of three and an orphan */
  .marquee__desks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .marquee__desks { padding-inline: var(--sp-8); }
  /* 62/38 here, not 66/34. Measured at 1024 the narrower split left the side
     headline only 141px of column — four or five lines of Myanmar for a
     one-line story. The wider split gives it 229px. */
  .marquee__panel { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); min-height: 37rem; }   /* 592px: keeps the panel inside the fold on a 1280x800 laptop too, where 38rem overshot by 4px */
  .marquee__lead { padding: var(--sp-10); min-height: 0; }

  /* The lead headline is smaller than the mobile clamp would give it, and the
     size is scoped here on purpose -- below 1024 the picture is not a
     background, the scrim is off, and the phone was already right.

     Two jobs, one rule. At 48px the longest headline in the archive (182
     characters) wrapped to 13 lines and grew the panel to 1,020px, 428px past
     its 592px floor and well past the fold. At 36px it is 11 lines and 731px.
     The narrower measure also pulls the ink back inside the scrim's dark
     ground: worst case across 1024/1100/1280/1440 and all three slides goes
     from 3.1:1 to 4.57:1. */
  /* The ch cap alone is not safe: ch is a property of the font, and changing
     the display family from Padauk to Pyidaungsu widened 21ch from 336px to
     453px at 1024 -- straight past the scrim's 0.60 falloff and into the clear
     part of the photograph, where one line measured 1.59:1. The percentage is
     the real constraint, because it is the one tied to where the scrim goes
     light; ch only sets a comfortable measure when there is room for it.
     56% of the content box puts the last glyph at u=0.55, where the scrim is
     still at 0.45 -- dark enough to hold white type over any photograph, not
     just this one. */
  .marquee__lead .marquee__headline {
    --hl: clamp(2rem, 0.85rem + 1.8vw, 2.25rem);
    max-width: min(21ch, 56%);
  }
  /* Here the measure cannot simply be let go -- it is what keeps the headline
     on the scrim's dark ground. So it widens in ch just enough to cancel the
     smaller type: the column stays about 375px either way, and the extra
     characters per line are what remove the lines. Measured at 1024, the
     longest headline in the archive went from 4.36:1 -- a fail -- to 7.76:1. */
  .marquee__lead .is-long  .marquee__headline { max-width: min(23ch, 56%); }
  .marquee__lead .is-xlong .marquee__headline { max-width: min(24ch, 56%); }
  .marquee__side { border-top: 0; border-left: 1px solid rgb(255 255 255 / 0.12); align-content: stretch; }
  .marquee__side li { display: grid; }
  .marquee__side a { padding: var(--sp-4); grid-template-columns: 5.5rem minmax(0, 1fr); }
  /* Four, and four all the way up. Five cards left each headline 142px of
     column at 1024 -- 17 Myanmar characters a line -- and read as a strip of
     tiles rather than a row of stories. Four gives 225px here and 318px at
     1440, and the row stops competing with the panel above it. */
  .marquee__desks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
}
@media (min-width: 1280px) {
  /* only once there is room for it does the picture column widen again */
  .marquee__desks { padding-inline: var(--sp-10); }
  .marquee__panel { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); }
  .marquee__side a { padding: var(--sp-5); grid-template-columns: 8rem minmax(0, 1fr); }
}

/* craft */
.marquee a:focus-visible, .marquee button:focus-visible {
  outline: 3px solid #6ba4ff; outline-offset: 3px; border-radius: var(--radius-xs);
}
@media (prefers-reduced-motion: reduce) {
  .marquee__lead:hover .pic__inner, .marquee__side a:hover .pic__inner { transform: none; }
}

/* ==========================================================================
   PHONE AND TABLET — the three things the desktop design cannot carry down
   ========================================================================== */
@media (max-width: 1023px) {

  /* 1. The type comes off the photograph entirely.
     The scrim is a left-to-right gradient because on a wide panel the type
     occupies only the left 45%. On a 343px phone it runs the full width, and
     the right-hand end of every line was sitting on 0.23-0.46 alpha - more
     than half the photograph showing through behind Myanmar diacritics.
     Turning the gradient vertical only got the kicker to 0.65, because a
     560px box holding 346px of type leaves no room for a fade that is both
     gentle and complete. So on a phone the picture stops being a background
     and becomes a picture: full width at the top, type underneath on the
     panel's own solid black. Both halves are then clean. */
  .marquee__lead { padding-top: var(--sp-6); }
  /* relative, not static: .pic__inner is absolutely positioned and takes its
     containing block from the nearest positioned ancestor. Made static, it
     escaped to .marquee__lead and painted the photograph over the whole
     panel, hiding every word of the lead. */
  .marquee__lead .marquee__pic {
    position: relative; z-index: auto; height: auto;
    aspect-ratio: 16 / 9;
    margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-2);
  }
  .marquee__scrim { display: none; }
  /* No scrim here, so nothing needs the type held over the dark ground and the
     measure is simply the screen. 18ch was 236px of the 327px available on a
     375px phone -- 28% of the width thrown away, which is what turned a long
     headline into 17 lines and a 1,023px panel. */
  .marquee__lead .marquee__headline { max-width: none; }
  .marquee__dek {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 2. The panel stops pretending to be a card. It is taller than the first
     screen, so its top and bottom edges are never visible together and the
     rounded corners and side margins only cost width. */
  .marquee { padding-inline: 0; }
  .marquee__panel { border-radius: 0; }
  .marquee__side a { padding-inline: var(--gutter); }
  .marquee__desks { padding-inline: var(--gutter); }

  /* 3. The desk cards become a list. Five 292px cards is 1,546px of
     scrolling for five headlines; five 106px rows is about 600. */
  .marquee__desk {
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-areas:
      "pic top"
      "pic title";
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
    padding: var(--sp-3);
  }
  .marquee__desk-top { grid-area: top; }
  /* width from the column, never from the row. aspect-ratio 1/1 together with
     height:100% makes the width follow the height, and a four-line Myanmar
     headline makes the row 200px tall — the thumbnail then grew to 200px wide
     and painted straight over the words. */
  .marquee__desk .marquee__desk-pic {
    grid-area: pic;
    width: 5rem; height: auto;
    aspect-ratio: 1 / 1;
    align-self: start;
  }
  /* No clamp on these titles.
     line-clamp keeps the next line in the layout and only clips it, so the
     tops of its Myanmar characters show as a broken half-row. A mask does not
     clear it (at the top of the fade the mask is still ~85% opaque) and a
     background overlay does not either (a pseudo-element inside a -webkit-box
     is laid out as a child, not painted over it). All three were tried and
     measured. The honest fix is to stop cutting: the headline runs its full
     four or five lines and the row grows to about 150px. That costs roughly
     130px of scrolling across the five rows and buys a list with no broken
     text in it. The lead's standfirst is different — inc/marquee.php already
     trims it to 28 words, so it ends on a real word and needs no clamp. */
  .marquee__desk-t { grid-area: title; }
}

@media (max-width: 599px) {
  .marquee__desks { gap: var(--sp-3); }
}

/* ---------- small type ----------
   11px is --fs-2xs. That is fine for Latin small caps and too small for a
   script that stacks marks above and below the line, so the hero's three
   smallest labels go to 12px.

   At the end of the file on purpose: .marquee__side-at and .marquee__desk-name
   set --fs-2xs in their own rules above, at the same specificity, so anything
   placed earlier loses on source order. */
.marquee__kicker,
.marquee__side-at,
.marquee__desk-name { font-size: var(--fs-xs); }

/* ==========================================================================
   SMALL TITLES, AND THE TOUCHED STATE
   ========================================================================== */

/* The note further up says the side list and the desk cards are small and
   that small Myanmar needs the weight to stay legible. Both are <span>, so
   `.home h1, .home h2, .home h3 { font-weight: 700 }` never reached them and
   they rendered at 400. Every other card title on this page is 700 --
   .vq__t at the very same 14px included -- so these two were the headlines
   the content stylesheet warns about being lighter than all the others.
   The lead headline keeps its 400: that one is deliberate, and large. */
.marquee__side-t,
.marquee__desk-t { font-weight: 700; }

/* Touched: the words lift and the underline goes. An underline is the one
   response that outstays its welcome on a phone -- :hover sticks after the
   finger lifts, so a tap leaves a rule drawn under a headline nobody is
   pointing at any more. The site already answers a touch this way twice:
   .vlead:hover .vlead__t brightens to #fff on dark ground and
   .dl__row:hover .dl__t takes the blue on light. Neither adds a colour. */
/* #fff was the wrong lift. Against the resting #e3e6ea it is a 1.25 contrast
   step, which reads as no change at all -- the four desk cards below went
   blue on touch while the lead and the side list appeared not to respond.
   #6ba4ff is a 2.00 step from resting and sits at 7.53:1 on the panel, and
   it is not a new colour: the header above lists it among the five this
   panel may use, and the marquee focus ring is already drawn in it. It also
   makes the whole hero answer a touch in one hue -- this blue on the dark
   panel, --accent-trust on the light desk cards underneath. */
.marquee__headline a:hover,
.marquee__side a:hover .marquee__side-t {
  color: #6ba4ff;
  text-decoration: none;
}

.marquee__desk:hover .marquee__desk-t {
  color: var(--accent-trust);
  text-decoration: none;
}