/* ==========================================================================
   12. HOMEPAGE
   A typographic front page.

   Headlines are set in Pyidaungsu, the one Myanmar face this site actually
   serves. An earlier note here claimed the shell downloaded Padauk; it did
   not, and the headings quietly fell through to whatever each reader's
   device provided. Latin still resolves to Inter; only the Myanmar glyphs
   fall through to Pyidaungsu.

   Structure is carried by hairlines and white space rather than by cards.
   There is no accent colour except the red already reserved for live
   copy, no filled buttons, and no rounded card shells — the page is set,
   not assembled.
   ========================================================================== */
.page { flex: 1 0 auto; }
.page:focus { outline: none; }

.home {
  /* Latin -> Inter, Myanmar -> Pyidaungsu.
     This used to name Padauk, on the belief that the shell downloaded it. It
     does not, and never has: assets/fonts holds pyidaungsu-regular.woff2 and
     pyidaungsu-bold.woff2 and nothing else, and niyo-fonts.css declares only
     those two faces. Neither Padauk nor Noto Sans Myanmar is served, so every
     Myanmar headline on this site resolved to whatever the reader's device
     happened to have installed -- Padauk on a designer's Mac, Noto on Android,
     something else again on iOS, and serif where there was nothing. The
     largest type on the page was the only type nobody controlled.
     Pyidaungsu is shipped, so it renders the same everywhere at no extra
     download. Same order as --font-body, which was right all along; the two
     other families stay as local fallbacks for anyone who does have them. */
  --font-display: "Inter", "Pyidaungsu", "Noto Sans Myanmar", "Padauk", serif;

  --t-hero:  clamp(1.4375rem, 1.16rem + 1.38vw, 2.375rem);
  --t-xl:    clamp(1.375rem, 1.16rem + 0.95vw, 1.9375rem);
  --t-lg:    clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --t-md:    clamp(1rem, 0.96rem + 0.24vw, 1.1875rem);
  --t-sm:    clamp(0.9375rem, 0.91rem + 0.16vw, 1.0625rem);

  /* Padauk sits low on the line, so its headings need more room than
     --lh-tight and slightly less than body copy. */
  --lh-title: 1.52;
}

.home h1, .home h2, .home h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: 0;
}

/* ---------- Bands ---------- */
.band__inner { padding-block: var(--sp-10); }
.band--soft { background: var(--surface); }
.band--ink {
  background: var(--surface-invert);
  color: var(--text-invert);
  /* Inverts with the theme exactly as the footer cap does, so hairlines
     and muted text are mixed from the band's own colour. */
  --border: color-mix(in srgb, currentColor 22%, transparent);
  --text-secondary: color-mix(in srgb, currentColor 66%, transparent);
}

/* ---------- Section mark: title, hairline, link ----------
   The rule stretches to fill whatever space the title and link leave, so
   it reads as a single ruled line at every width. */
.mark {
  display: grid;
  grid-template-columns: auto minmax(var(--sp-4), 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.mark__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: var(--lh-title);
}
.mark__rule { height: 1px; background: var(--border); }
.mark__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.mark__link:hover { color: var(--text-primary); }
.band--ink .mark__link:hover { color: var(--text-invert); }
.mark__note {
  grid-column: 1 / -1;
  margin-top: calc(var(--sp-2) * -1);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: var(--lh-mm);
  max-width: 62ch;
}

/* ---------- Kicker ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Picture ----------
   No external assets: each picture is a two-stop wash, so the page looks
   the same offline, in CodePen and on a slow connection. */
.pic {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 10;
  background-color: var(--surface-2);
  background-image: linear-gradient(150deg, var(--a, #39404d), var(--b, #14171c));
}
.pic--wide { aspect-ratio: 16 / 9; }
.pic--tall { aspect-ratio: 3 / 4; }
.pic--sq   { aspect-ratio: 1 / 1; }
.pic__inner {
  position: absolute;
  inset: 0;
  background-image: inherit;
  transition: transform var(--t-slow) var(--ease);
}
.pic__len {
  position: absolute;
  z-index: 1;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: 3px var(--sp-2);
  border-radius: var(--radius-xs);
  background: rgb(16 17 20 / 0.76);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.6;
}

/* ---------- Story ---------- */
.story { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.story > a { display: block; }
.story__title { font-size: var(--t-md); }
.story__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.7;
}
.story__meta b { font-weight: 600; color: var(--text-primary); }
.band--ink .story__meta b { color: var(--text-invert); }
.story:hover .story__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.story:hover .pic__inner { transform: scale(1.035); }

/* ---------- Hero ----------
   Fourth pass, kept deliberately simple: one full-bleed photograph with
   the headline set directly on it over a dark gradient — the classic,
   modern treatment for a single lead story, and there is nothing else in
   the frame to compete with it. Four more headlines follow underneath as
   one plain row of text links: no thumbnails, no cards. A <ul>, not an
   <ol> — nothing here is numbered.

   Most of the sizing is already fluid (clamp()) from the base type scale
   and the shared --gutter custom property, so this needs very few
   breakpoint rules of its own.

   Phone: links stack one column under the photo.
   600px+: links become two columns.
   1024px+: links become one row of four; the photo turns a touch more
   panoramic now that it has the full width to itself.
   ========================================================================= */
/* The header is fixed and the body only reserves its exact height, so the
   hero has to open its own clearance — without it the lead photograph sits
   flush against the chip rail. */
.hero__media { position: relative; overflow: hidden; }
.hero__frame { display: block; }
.hero__pic { aspect-ratio: 16 / 10; border-radius: 0; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.25) 55%, transparent 80%);
  pointer-events: none;
}
.hero__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: #fff;
}
.hero__kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.18);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.hero__headline {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.3;
  max-width: 24ch;
}
.hero__media:hover .hero__headline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hero__media:hover .pic__inner { transform: scale(1.03); }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 0.8);
}
.hero__meta b { font-weight: 600; color: #fff; }

.hero__foot { padding-block: var(--sp-8) var(--sp-2); }
.hero__dek {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  line-height: var(--lh-mm);
  max-width: 64ch;
  margin-bottom: var(--sp-6);
}

/* Shared summary type — the home desk lead borrows it. */
.dek {
  font-size: var(--fs-xl);
  color: var(--text-secondary);
  line-height: var(--lh-mm);
  max-width: 56ch;
}

/* --- the row of four, each with a small thumbnail --- */
.hero__links {
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.hero__links li { min-width: 0; }
.hero__links a { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.hero__link-pic { flex: none; width: 3.75rem; aspect-ratio: 1 / 1; }
.hero__link-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero__link-title { font-size: var(--t-sm); min-width: 0; }
.hero__links a:hover .hero__link-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hero__links a:hover .pic__inner { transform: scale(1.05); }
.hero__link-at { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---------- Latest ----------
   Rebuilt as a plain news wire — no thumbnails, no note under the mark. A
   real wire is read by its clock, not looked at, so the time and desk lead
   each row and the headline follows; a hairline separates one update from
   the next, and nothing is numbered.

   Phone: stacked — time/desk on one line, headline on the next.
   600px+: two columns of rows.
   768px+: each row turns sideways, time/desk as a fixed-width column
   beside the headline, the way a ticker prints.
   1024px+: that column widens a touch further.
   ========================================================================= */
.wire { display: grid; }
.wire__row { border-top: 1px solid var(--border); min-width: 0; }
.wire__row:first-child { border-top: 0; }
/* Tighter than the rest of the page on purpose. The hero is where size lives;
   here what matters is how many stories fit above the fold, so the row loses
   4px of leading and the headline drops from --t-sm (up to 18px) to a 15-16px
   clamp. Eight rows now occupy about what six did. */
.wire__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: var(--sp-3);
  min-width: 0;
}
/* Brought into line with the hero, 2026-08-16. Every value below is copied
   from what the hero settled on rather than chosen again: the date at 12px
   Regular in secondary, the desk at 12px Bold in its own colour. 11px was too
   small for a script that stacks marks, and --tracking-caps was letter-spacing
   Myanmar, which the rest of the site is careful never to do. uppercase went
   with it: it does nothing to Burmese and shouted the English date. */
.wire__meta {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;   /* reset, not omit: the kit's stale copy still says uppercase */
  color: var(--text-secondary);
}
.wire__at {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wire__row--now .wire__at { color: var(--accent-breaking); }
.wire__beat {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: latest-beat 1.9s var(--ease) infinite;
}
@keyframes latest-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.6); }
}
.wire__cat {
  white-space: nowrap;
  font-weight: 700;
  color: var(--desk, var(--text-secondary));
}
.wire__row[data-rail="ink"]     { --desk: color-mix(in srgb, var(--text-primary) 88%, var(--background)); }
.wire__row[data-rail="trust"]   { --desk: var(--accent-trust); }
.wire__row[data-rail="life"]    { --desk: var(--accent-life); }
.wire__row[data-rail="premium"] { --desk: var(--accent-premium); }
.wire__headline {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1rem);
  font-weight: 400;
  line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
}
.wire__row:hover .wire__headline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* =========================================================================
   နောက်ဆုံးရ — the day rail
   Replaces the flat clock-time list. The newsroom files in bursts: two to
   eleven stories on a day, then five to ten days of nothing. A column of
   timestamps hides that; a large day numeral states it, once, and everything
   filed under that day follows. It also gives the band a piece of graphic
   furniture, which a page of Myanmar headlines badly needs between the hero's
   photographs and the bands below.
   ========================================================================= */
.dd { display: grid; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }
.dd__day { display: grid; gap: var(--sp-3); }

.dd__date {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.dd__date b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.25rem; line-height: 1;
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
  font-variant-numeric: tabular-nums;
}
.dd__date span { font-size: var(--fs-xs); color: var(--text-secondary); }
/* the only live signal left, and it cannot lie: driven by the date itself */
.dd__day--now .dd__date b { color: var(--accent-breaking); }

.dd__items { display: grid; margin: 0; padding: 0; list-style: none; }
.dd__items li { border-top: 1px solid var(--border); min-width: 0; }
.dd__items li:first-child { border-top: 0; }
.dd__link { display: grid; gap: 3px; padding-block: var(--sp-3); min-width: 0; }

.dd__cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; color: var(--desk, var(--text-secondary)); }
.dd__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);
  line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
}
.dd__link:hover .dd__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.dd__items li[data-rail="ink"]     { --desk: color-mix(in srgb, var(--text-primary) 88%, var(--background)); }
.dd__items li[data-rail="trust"]   { --desk: var(--accent-trust); }
.dd__items li[data-rail="life"]    { --desk: var(--accent-life); }
.dd__items li[data-rail="premium"] { --desk: var(--accent-premium); }
/* ပြည်တွင်း carries its own colour here as it does in the hero. Keyed on the
   desk, not the rail: ink also holds politics, national, military and six
   more, and none of them should move. Must follow the rail rules. */
.dd__items li[data-desk="local"]   { --desk: var(--accent-premium); }

@media (min-width: 768px) {
  .dd__day { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .dd__date {
    display: block; text-align: right;
    border-bottom: 0; border-right: 1px solid var(--border);
    padding: 0 var(--sp-4) 0 0;
  }
  .dd__date b { display: block; font-size: 2.75rem; }
}


/* ---------- Sport gallery ----------
   Four poster tiles instead of photo-and-caption rows: each headline sits
   on its own photograph over a gradient, all four the same size — a
   scoreboard's worth of energy without ranking any one match above the
   others.
   ========================================================================= */
.gallery { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.gallery__tile { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.gallery__frame { display: block; }
.gallery__pic { aspect-ratio: 4 / 5; border-radius: 0; }
.gallery__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.82) 0%, rgb(0 0 0 / 0.15) 55%, transparent 80%);
  pointer-events: none;
}
.gallery__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  color: #fff;
}
.gallery__title { font-size: var(--t-sm); }
.gallery__tile:hover .gallery__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.gallery__tile:hover .pic__inner { transform: scale(1.05); }
.gallery__at { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.8); }

/* ---------- Home desk ----------
   A lead beside a list: the shape every section front uses, with the details
   this site has settled on. Type never sits on the photograph -- that device
   belongs to the hero, and reading it twice on one page makes the second one
   look like a mistake. The lead therefore carries picture, headline, date, and
   the picture's own caption if an editor wrote one; never the excerpt, which
   in Myanmar opens with a run of place names and reads as a wall.

   Sizes are not chosen here, they are matched: the heading is the site's own
   .mark at 31px, the row headline is နောက်ဆုံးရ's clamp, the date is 12px
   secondary. A section that invents its own scale is the thing that makes a
   front page look assembled rather than designed.
   ---------------------------------------------------------------------- */
.mark--desk { position: relative; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.mark--desk::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 64px; height: 3px; background: var(--accent-trust);
}
.mark__cta {
  font-size: var(--fs-md); font-weight: 700; white-space: nowrap; justify-self: end;
  color: var(--accent-trust);
  border: 1px solid var(--accent-trust);
  border-radius: var(--radius-pill);
  padding: 8px var(--sp-4);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mark__cta:hover { background: var(--accent-trust); color: var(--background); }

/* The .mark grid is title / rule / cta on one line, and the cta is nowrap so it
   cannot give way. ပြည်တွင်း fitted at 320px with 12px to spare -- by luck.
   လွွတ်တော်ရေးရာ is 43px wider and pushed 37px off the screen. The label length is
   the newsroom's to choose, so the layout has to survive any of them:
   mark--desk stacks below 600px and the cta may wrap as a last resort. */
@media (max-width: 599px) {
  .mark--desk { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .mark--desk .mark__rule { display: none; }
  .mark__cta { justify-self: start; white-space: normal; max-width: 100%; }
}

.dd2 { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }

.dl__t {
  font-family: var(--font-display); font-weight: 700;
  line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
  transition: color var(--t-fast) var(--ease);
}
.dl__at { font-size: var(--fs-xs); color: var(--text-secondary); }
.dl__cap { font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }

.dl__lead { display: grid; gap: var(--sp-3); }
.dl__lead-pic { aspect-ratio: 16 / 9; }
.dl__lead-body { display: grid; gap: var(--sp-2); }
.dl__lead-t { font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.625rem); }

.dl__list { display: grid; margin: 0; padding: 0; list-style: none; }
.dl__list li { border-top: 1px solid var(--border); }
.dl__list li:first-child { border-top: 0; }
.dl__row {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--sp-4); align-items: start;
  padding-block: var(--sp-4);
  border-left: 3px solid transparent;
  transition: border-color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.dl__row:hover { border-left-color: var(--accent-trust); padding-left: var(--sp-3); }
.dl__thumb { aspect-ratio: 4 / 3; }
.dl__body { display: grid; gap: 4px; min-width: 0; }
.dl__row .dl__t { font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); }

/* Touched: the words take the section's blue and the underline goes. Blue and
   not a second hue -- the tick, the button and the row marker are already this
   colour, so hovering produces one response instead of two. */
.dl__lead:hover .dl__t,
.dl__row:hover .dl__t { color: var(--accent-trust); text-decoration: none; }

@media (min-width: 1024px) {
  /* The two columns move in opposite directions as the window widens: the
     lead's 16/9 picture gets taller, while the rail's headlines wrap onto
     fewer lines and it gets shorter. Measured on the live page, the lead
     minus the rail runs -71px at 1024, +89px at 1280 and +124px at 1440 --
     the overhang changes sides, so no fixed number of rail items can level
     them and headline lengths would move it again with every new post.
     Stretch makes the row as tall as the taller column; the two rules below
     say which half absorbs the slack in each direction. */
  .dd2 { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: var(--sp-8); align-items: stretch; }

  /* When the rail is the taller one, the picture takes the difference. The
     minmax floor is `auto`, which is the 16/9 height, so it can only ever
     grow -- never squash into a letterbox. The img already carries
     object-fit: cover, so a taller frame simply crops less width. */
  .dl__lead { grid-template-rows: minmax(auto, 1fr) auto; }
  .dl__lead-pic { height: 100%; }

  /* When the lead is the taller one, the four rows share the difference
     equally. `stretch` and not `space-between`: these rows are separated by
     hairlines, and spacing them apart would leave each rule floating in the
     gap instead of sitting against the row it divides. */
  .dl__list { align-content: stretch; }
  .dl__list li:first-child .dl__row { padding-top: 0; }
}

/* ---------- World ----------
   Second pass: a plain, even card grid. No lead story, no clock strip, no
   region tag — six identical dispatch cards sitting on the page's base
   surface against the section's soft backdrop, each a self-contained unit
   (image, headline, dek, time). A card is the most reliably responsive
   shape available: the same unit just re-flows from one column to three as
   the viewport grows, with nothing asymmetric to break at an odd width.

   Phone: single column, full-width cards.
   600px+: two columns.
   1024px+: three columns, a touch more air and a larger title.
   ========================================================================= */
.world { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
.world__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-normal) var(--ease),
              transform var(--t-normal) var(--ease);
}
.world__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-panel);
  transform: translateY(-3px);
}
.world__frame { display: block; }
.world__pic { aspect-ratio: 16 / 10; border-radius: 0; }
.world__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.world__title { font-size: var(--t-sm); }
.world__card:hover .world__title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.world__card:hover .pic__inner { transform: scale(1.04); }
.world__dek {
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.world__at { margin-top: auto; padding-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---------- Photo grid (wire desk) ----------
   An even N-up grid of photographed dispatches, brought into the same
   grammar as the desk section above it: mark--desk header (no badge),
   gapped bordered cards like .world__card, regular-weight titles at the
   softened text-primary tint dl__t uses. Each cell is image, headline,
   share mark -- no dek, so the rhythm stays even whether the story is
   two lines or twelve words.

   Phone: single column.
   600px+: two columns.
   1024px+: four columns.
   ========================================================================= */
.pgrid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.pgrid__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pgrid__pic { aspect-ratio: 2 / 1; border-radius: 0; }
.pgrid__card:hover .pic__inner { transform: scale(1.035); }
.pgrid__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); }
.pgrid__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);
  line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
  margin-bottom: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease);
}
.pgrid__card:hover .pgrid__title { color: var(--accent-trust); }
.pgrid__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pgrid__at { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.pgrid__share {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}
.pgrid__card:hover .pgrid__share { color: var(--accent-trust); }

.pgrid__more { display: flex; justify-content: center; margin-top: var(--sp-8); }
.pgrid__cta {
  font-weight: 700;
  font-size: var(--fs-md);
  color: #fff;
  /* fixed, not var(--accent-trust): the dark-theme accent lightens for use
     as text-on-dark, which drops white-on-fill to 2.5:1. This chip is its
     own contrast pair in both themes and needs to stay this deep. */
  background: #0f57d6; /* 3.1:1 vs dark page bg, 6.3:1 vs white text -- clears both */
  border-radius: var(--radius-pill);
  padding: 14px var(--sp-8);
  transition: filter var(--t-fast) var(--ease);
}
.pgrid__cta:hover { filter: brightness(1.15); }

@media (min-width: 600px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pgrid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Sports hub: lead card + list + compact read-more list ----------
   Card foot mirrors .pgrid__foot; card title weight/size mirrors
   .pgrid__title; images use the shared .pic frame. Own hover accent
   (--accent-life) is layered on top, the shared .mark--desk header is
   untouched. */
.shub { display: grid; gap: var(--sp-8) var(--sp-10); grid-template-columns: 1fr; grid-template-areas: "hero" "col1" "col3"; }
.s-col1 { grid-area: col1; }
.s-col2 { grid-area: hero; }
.s-col3 { grid-area: col3; }

@media (min-width: 600px) {
  .shub { grid-template-columns: 1fr 1fr; grid-template-areas: "hero hero" "col1 col3"; }
}
@media (min-width: 1024px) {
  .shub { grid-template-columns: 1.05fr 1.7fr 1.05fr; grid-template-areas: "col1 hero col3"; }
}

.sfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); }
.sfoot__at { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.sfoot__share { display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-secondary); transition: color var(--t-fast) var(--ease); }

.s-col1__list { border-top: 1px solid var(--border); }
.scard { display: flex; flex-direction: column; padding-block: var(--sp-5); border-bottom: 1px solid var(--border); }
.scard__pic { aspect-ratio: 2 / 1; border-radius: 0; margin-bottom: var(--sp-4); }
.scard__body { display: flex; flex-direction: column; flex: 1; }
.scard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);
  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;
  transition: color var(--t-fast) var(--ease);
}
.scard:hover .scard__title, .scard:hover .sfoot__share { color: var(--accent-life); }

.shero { display: block; }
.shero__pic { aspect-ratio: 2 / 1; border-radius: 0; margin-bottom: var(--sp-5); }
.shero__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background)); margin: 0;
  transition: color var(--t-fast) var(--ease);
}
.shero:hover .shero__title, .shero:hover .sfoot__share { color: var(--accent-life); }

.ssubs { display: flex; flex-direction: column; margin-top: var(--sp-2); border-top: 1px solid var(--border); }
.ssub { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--border); }
.ssub__pic { border-radius: 0; }
.ssub__body { display: flex; flex-direction: column; min-width: 0; }
.ssub__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast) var(--ease);
}
.ssub:hover .ssub__title, .ssub:hover .sfoot__share { color: var(--accent-life); }

.s-col3__scope { display: none; }
.s-col3__list { border-top: 1px solid var(--border); }
.strend { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--border); }
.strend__pic { border-radius: 0; }
.strend__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); 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;
  transition: color var(--t-fast) var(--ease);
}
.strend:hover .strend__title { color: var(--accent-life); }

/* Phone: the reference sports front gives every card the same shape -- a
   full-width picture with the headline under it. The sub and trending lists
   are picture-left only because they sit in narrow desktop columns; at
   one-column width they take the lead's stacked shape too, so the whole desk
   reads as one rhythm instead of three different card styles. */
@media (max-width: 599px) {
  .ssub,
  .strend {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .ssub .ssub__pic,
  .strend .strend__pic {
    width: 100%;
    aspect-ratio: 5 / 3;
    margin-bottom: var(--sp-4);
  }
  /* ...and the lead and list pictures take the same 5:3 crop, so all four
     card types are one shape once they stack. They were 2:1 here, which
     read as two different card families in a single column. */
  .shero__pic,
  .scard__pic { aspect-ratio: 5 / 3; }
  /* The lead headline is sized for a wide desktop column; at phone width its
     --t-hero clamp bottomed out at ~24px against 15px on every card under it,
     which read as two different sections. So it comes down to the desk's own
     size here -- but only to the top of that clamp, not into it, which leaves
     one clear step (17px against 15px) instead of the old jump.

     The note that used to sit here said the lead 'keeps its heavier weight to
     stay the lead'. It did not: both were 700, and on a phone the lead was
     indistinguishable from the cards under it -- same 5/3 picture, same size,
     same weight. Weight cannot carry it either. Pyidaungsu is self-hosted at
     400 and 700 only, so 800 would thicken the Latin words in a headline and
     leave the Myanmar ones alone. The picture does the work instead: 4/3 for
     the lead against 5/3 for everything below it. */
  .shero__title {
    font-size: 1.0625rem;
    line-height: var(--lh-title);
  }
  .shero__pic { aspect-ratio: 4 / 3; }
  /* The desk name is redundant beside the section header on a wide screen,
     but once the columns stack it sits far below it, so the scope is
     spelled out here. Slightly smaller so the longer wording still holds
     one line at 320px. */
  .s-col3__scope { display: inline; }
  .s-col3 .mark__title { font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem); }

}

/* Inside a band, .mark__title is a rail label, not a section heading -- on the
   front page the only one is the sports most-read rail, and --t-xl put it at
   31px directly under the band's own 32px heading, so the two read as equals
   rather than as parent and child. --t-lg is the step the design already uses
   for sub-headings. Scoped to .mark--desk, which exists only here: on an
   archive .mark__title is the page's top-level heading and 31px is right.

   It belongs OUTSIDE the phone media query above: written next to the
   .s-col3 rule it reads with, it applied under 600px only and the desktop
   label stayed at 31px. Second time an anchored insert landed in the wrong
   scope -- check the computed value at two widths, not one. */
.mark--desk .mark__title { font-size: var(--t-lg); }


/* ---------- Local desk: photo-lead pair (66/33, scrim text) + a
   client-side-paginated row of three plain cards. Colours/spacing are
   NIYO's own tokens; only the layout shape and the 5:3 / 4:5 image ratios
   are matched to the approved Chiang Rai Times reference. ---------- */
.ldesk__mark { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); border-bottom: 2px solid var(--accent-trust); padding-bottom: var(--sp-3); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.ldesk__mark-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -0.01em; margin: 0; color: var(--text-primary); }
.ldesk__mark-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: var(--fs-sm); color: #fff;
  /* Same fixed chip colour as .pgrid__cta, not var(--accent-trust): the
     dark-theme accent lightens for text-on-dark, which drops white-on-fill
     contrast to 2.5:1. This pill is its own pair in both themes. */
  background: #0f57d6;
  border-radius: var(--radius-pill);
  padding: 8px var(--sp-5);
  transition: filter var(--t-fast) var(--ease);
}
.ldesk__mark-link:hover { filter: brightness(1.15); }

.ldesk__top { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-bottom: var(--sp-6); }
@media (min-width: 860px) { .ldesk__top { grid-template-columns: 2fr 1fr; } }
.ldesk__hero { position: relative; display: block; overflow: hidden; }
.ldesk__hero-pic { aspect-ratio: 5 / 3; border-radius: 0; }
/* The 4:5 portrait crop only makes sense for the side card's narrow desktop
   column. Below 860px .ldesk__top drops to one column and the side card
   goes full-width -- keeping 4:5 there stretched it to ~785px tall on a
   375px phone, which is what made the section read as endless scrolling.
   It matches the main card's landscape ratio at every width the two cards
   are ever stacked. */
@media (min-width: 860px) {
  .ldesk__hero--side .ldesk__hero-pic { aspect-ratio: 4 / 5; }
}
/* Below ~480px even 5:3 is short for a 3-line headline plus byline without
   the copy block overflowing past the image's own top edge (.ldesk__hero's
   overflow:hidden then clips it there). A taller crop on small phones gives
   the same content real room. */
@media (max-width: 480px) {
  .ldesk__hero-pic { aspect-ratio: 4 / 3; }
}
.ldesk__hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.35) 55%, transparent 85%); pointer-events: none; }
.ldesk__hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; color: #fff; }
.ldesk__hero-title {
  /* weight 400, matching .dl__t (the parliament section's title) -- the
     800 this started at read as shouting at this size. */
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 0.85rem + 1.1vw, 1.5rem); line-height: var(--lh-title);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ldesk__hero--side .ldesk__hero-title { font-size: clamp(0.875rem, 0.78rem + 0.7vw, 1.1875rem); -webkit-line-clamp: 4; }
/* The cards in this same band already answer a touch with colour
   (.ldesk__card:hover takes --accent-trust); the two heroes were still
   underlining, so one band gave two different answers. The hero titles sit
   white on a photograph under a 0.92 scrim, where --accent-trust is only
   2.70:1 and fails -- #6ba4ff is 7.53:1 and is the same blue the marquee
   panel uses on dark ground. An underline is also the response that sticks
   after a tap on a phone and leaves a rule under a headline nobody is
   pointing at. */
.ldesk__hero:hover .ldesk__hero-title { color: #6ba4ff; text-decoration: none; }
.ldesk__hero:hover .pic__inner { transform: scale(1.03); }
.ldesk__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: rgb(255 255 255 / 0.82); margin-top: var(--sp-3); }
.ldesk__meta b { color: #fff; font-weight: 600; }
.ldesk__meta-dot { opacity: 0.6; }
.ldesk__meta-share { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; }

.ldesk__bottom { position: relative; }
.ldesk__grid-page { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.ldesk__grid-page[hidden] { display: none; }
@media (min-width: 640px) { .ldesk__grid-page { grid-template-columns: repeat(3, 1fr); } }
.ldesk__card { display: flex; gap: var(--sp-4); color: var(--text-primary); }
.ldesk__card-pic { aspect-ratio: 4 / 3; border-radius: 0; width: 130px; flex: none; }
.ldesk__card-body { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.ldesk__card-title {
  /* weight 400 + softened tone, matching .dl__t / .pgrid__title -- the same
     card-title treatment every other section on the page uses. */
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); 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;
  transition: color var(--t-fast) var(--ease);
}
.ldesk__card:hover .ldesk__card-title { color: var(--accent-trust); }

.ldesk__page-nav { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
/* Inverted, like .band--ink: a solid, unmistakable button in both themes
   (dark chip / light icon in light mode, and the reverse in dark mode)
   instead of the barely-there tinted-grey outline it started as. */
.ldesk__page-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; background: var(--text-primary); color: var(--background); border: none; cursor: pointer; transition: filter var(--t-fast) var(--ease); }
.ldesk__page-btn:hover { filter: brightness(1.25); }

/* The 36px chip above is a deliberate size and is left alone; this only grows
   what a finger can land on to the 44px minimum. inset: -4px on each side of
   36 gives exactly 44, verified by hit-testing +/-21px (hits) and +/-24px
   (misses). The disabled button keeps pointer-events: none below, so the
   larger area never makes a dead control clickable. */
.ldesk__page-btn::after { content: ""; position: absolute; inset: -4px; }
.ldesk__page-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.ldesk__page-btn--prev .icon { transform: rotate(90deg); }
.ldesk__page-btn--next .icon { transform: rotate(-90deg); }

/* ---------- Desk columns ---------- */
.desks { display: grid; gap: var(--sp-10); }
.desk { min-width: 0; display: grid; gap: var(--sp-5); align-content: start; }
.desk__head {
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: var(--lh-title);
}
.desk__list { display: grid; }
.desk__item {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}
.desk__item:last-child { padding-bottom: 0; }
.desk__title { font-size: var(--t-sm); }
.desk__item:hover .desk__title { text-decoration: underline; text-underline-offset: 3px; }
.desk__at { font-size: var(--fs-xs); color: var(--text-secondary); }
.desk__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}
.desk__more:hover { color: var(--text-primary); }

/* The three desks are peers of the full-width desks above, just shown
   three-up, so they carry the same header: title, blue rule, blue pill.
   Both are scaled down here -- a 32px title and a full-size pill are
   built for a full-width band and would crowd a ~380px column. */
.desk .ldesk__mark { margin-bottom: 0; }
.desk .ldesk__mark-title { font-size: var(--t-lg); font-weight: 700; }
.desk .ldesk__mark-link { font-size: var(--fs-xs); padding: 6px var(--sp-4); }

/* Lead and list headlines take the weight and tone every other card on
   the page uses. That is 700 across the board since 2026-08-20; this rule
   used to force 400 back down, which now leaves three headlines lighter
   than the other 52 on the page. */
/* Still .desk-scoped so it outranks `.home h1, .home h2, .home h3 {
   font-weight: 700 }`, which a bare .story__title cannot -- the scoping is
   what lets this rule decide the weight either way. */
.desk .story__title { font-weight: 700; color: color-mix(in srgb, var(--text-primary) 88%, var(--background)); line-height: var(--lh-title); }
.desk .story__title a { color: inherit; }
/* The three items under this lead already answer a touch with colour alone
   (.desk__item:hover .desk__title sets text-decoration: none right below).
   The lead was getting both -- this rule's blue AND the underline from the
   unscoped .story:hover .story__title, because nothing cancelled it. That is
   the 'one response instead of two' the .dl__ note argues for, and it is also
   the response that outstays a tap on a phone, where :hover sticks after the
   finger lifts. */
.desk .story:hover .story__title { color: var(--accent-trust); text-decoration: none; }
.desk__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);
  line-height: var(--lh-title);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--background));
  transition: color var(--t-fast) var(--ease);
}
.desk__item:hover .desk__title { color: var(--accent-trust); text-decoration: none; }


/* ---------- Video ----------
   The channel bar names the source and links out to it, since every clip
   below is pulled from that one feed. The latest upload then runs as one
   large feature with a short "up next" queue of three beside it, echoing
   how the channel's own page is read, rather than four equal tiles with no
   sense of order. The play mark is a plain triangle drawn in CSS instead
   of a borrowed arrow glyph, and the running time still sits in the
   frame's corner.

   Phone: channel bar, feature, then the queue stacked underneath.
   600px+: the queue becomes a row of three under the feature.
   1024px+: the feature and the queue sit side by side, like a channel's
   "up next" sidebar.
   ========================================================================= */
.ytbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ytbar:hover { border-color: var(--border-strong); background: color-mix(in srgb, currentColor 6%, transparent); }
.ytbar__icon { flex: none; color: #ff0000; }
.ytbar__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ytbar__name { font-size: var(--fs-md); font-weight: 700; }
.ytbar__handle { font-size: var(--fs-xs); color: var(--text-secondary); }
.ytbar__cta {
  flex: none;
  margin-left: auto;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--text-invert);
  color: var(--surface-invert);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.reels { display: grid; gap: var(--sp-6); }
.reel-list { display: grid; gap: var(--sp-6); }

.reel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.reel__frame { display: block; }
.reel__pic { aspect-ratio: 16 / 9; }
.reel__play {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.92);
  transition: transform var(--t-normal) var(--ease), background-color var(--t-fast) var(--ease);
}
.reel__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #101114;
}
.reel:hover .reel__play { transform: scale(1.09); background: #fff; }
.reel:hover .pic__inner { transform: scale(1.04); }
.reel__title { font-size: var(--t-sm); }
.reel:hover .reel__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

.reel--feature .reel__play { width: 60px; height: 60px; }
.reel--feature .reel__play::before { border-width: 11px 0 11px 18px; margin-left: 4px; }
.reel--feature .reel__title { font-size: var(--t-lg); }

/* ---------- Most read ----------
   Five headings in five columns read as a widget, so they are set as
   full-width rows with hairlines between instead. No position numbers:
   the order carries the ranking on its own. */
.ranked { display: grid; }
.ranked__row {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.ranked li:first-child .ranked__row { border-top: 0; padding-top: 0; }
.ranked li:last-child .ranked__row { padding-bottom: 0; }
.ranked__text { min-width: 0; display: grid; gap: var(--sp-1); }
.ranked__title { font-size: var(--t-md); }
.ranked__row:hover .ranked__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ranked__desk { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---------- Advertising ----------
   A dashed, tinted panel rather than two hairlines: the old strip read as a
   divider people scrolled past, not as space somebody could buy. Heights
   are the IAB creative each width can actually hold (320x100 phone,
   728x90 tablet, 970x90 desktop) plus room for the invitation, so the
   reserved box does not jump when a real banner replaces this. */
.slot {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  min-height: 190px;
  padding: var(--sp-6) var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}
.slot__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.slot__head {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--text-primary);
  max-width: 34ch;
}
.slot__sub {
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
  max-width: 52ch;
}
.slot__cta {
  margin-top: var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff;
  background: #0f57d6;
  border-radius: var(--radius-pill);
  padding: 9px var(--sp-6);
  transition: filter var(--t-fast) var(--ease);
}
.slot__cta:hover { filter: brightness(1.15); }
.slot__size { font-size: var(--fs-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* one size label per width -- the others are never the truth on that screen */
.slot__size--d, .slot__size--t { display: none; }
.slot__size--m { display: inline; }
@media (min-width: 600px) {
  .slot { min-height: 200px; }
  .slot__size--m, .slot__size--d { display: none; }
  .slot__size--t { display: inline; }
}
@media (min-width: 1024px) {
  .slot { min-height: 210px; }
  .slot__size--m, .slot__size--t { display: none; }
  .slot__size--d { display: inline; }
}

/* Compact variant: used where a slot sits between two news bands high on
   the page. The full pitch is a house ad -- running it twice reads as a
   second sales panel interrupting the news, so the upper slot states the
   offer in one line and leaves the pitch to the one further down. */
.slot--compact { min-height: 150px; gap: var(--sp-2); }
.slot__inline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.93rem + 0.35vw, 1.1875rem);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--text-primary);
  max-width: 46ch;
}
/* the compact slot's button is one step down -- it supports a single
   line of copy rather than a full pitch */
.slot__cta--sm { font-size: var(--fs-xs); padding: 7px var(--sp-5); }
@media (min-width: 600px) { .slot--compact { min-height: 158px; } }
@media (min-width: 1024px) { .slot--compact { min-height: 162px; } }

/* ==========================================================================
   12b. CHROME TYPE SCALE
   The header, its menus and the footer are set one step up the existing
   scale so their labels and links read comfortably, particularly in
   Myanmar where the small sizes lose their stacked marks first.

   Nothing in sections 2–11 or 13 is edited to achieve this. Every rule in
   the chrome already sizes itself from --fs-*, so redefining those four
   custom properties on the chrome's own roots raises the type through the
   cascade and leaves the layout rules untouched — one edit to revert, and
   no risk of the two halves of the file drifting apart.

   --fs-lg and above are left alone on purpose: the wordmark is set in
   --fs-2xl and the search field in --fs-xl, and neither should grow. The
   fixed row heights (breaking 44px, masthead 56px, chip rail 40px) all
   absorb a single step without reflowing.
   ========================================================================== */
.header,
.drawer,
.search,
.footer {
  --fs-2xs: 0.75rem;    /* was 0.6875rem — 11 → 12px */
  --fs-xs:  0.8125rem;  /* was 0.75rem   — 12 → 13px */
  --fs-sm:  0.875rem;   /* was 0.8125rem — 13 → 14px */
  --fs-md:  0.9375rem;  /* was 0.875rem  — 14 → 15px */
}


/* ==========================================================================
   25. LATEST + POPULAR  —  [niyo_latest_popular]
   The band that replaces the day-grouped wire under the hero. Shape follows
   the approved reference (two-tone angled slab, 2-up card grid, ranked
   sidebar); every colour, size, radius and easing is a NIYO token, so it
   sits with the bands already on the page.
   ========================================================================== */
.lpb {
  /* Fixed pair, exactly like .ldesk__mark-link / .pgrid__cta: var(--accent-trust)
     lightens in dark mode and would drop white-on-fill to ~2.5:1. */
  --slab-blue: #0f57d6;
  --slab-h: 60px;
}
/* In dark mode a card painted --background sits *darker* than the band it
   is on, so the cards read as holes. --surface-2 is one step lighter than
   the band, which is the same figure/ground relation as white-on-grey. */
[data-theme="dark"] .lpb { --card-bg: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .lpb { --card-bg: var(--surface-2); }
}

.lpb__inner { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 1024px) {
  .lpb__inner { grid-template-columns: minmax(0, 1fr) 336px; gap: var(--sp-10); align-items: stretch; }
  /* The sidebar is one item shorter than the grid on purpose, so its four
     rows share whatever is left over and both columns end on the same
     line whatever the headlines do. */
  .lpb__side { display: flex; flex-direction: column; }
  .pop { flex: 1; grid-template-rows: auto repeat(3, minmax(min-content, 1fr)); }
  .pop__row { height: 100%; align-content: center; }

  /* The same treatment the sidebar above already gets, which .lpb__main never
     did -- it stayed a plain block, so .lgrid sat at its own content height
     and left the slack underneath it. The two columns' boxes were already
     level; it was the content inside the left one that stopped short, by a
     measured 60px at 1024, 62px at 1280 and 61px at 1440. It does not swing
     the way the parliament band's does, because every title in both columns
     is line-clamped and neither side changes height with width.

     space-between, not stretch: these are bordered cards, and space is what
     separates them, so each card keeps its exact height and its 4/3 thumbnail
     and only the rows move apart. The parliament rail needed the opposite for
     the opposite reason -- its rows are divided by hairlines, which spacing
     apart would have left floating in the gap instead of against a row. */
  .lpb__main { display: flex; flex-direction: column; }
  .lgrid { flex: 1 1 0; align-content: space-between; }
}

/* ---------- the slab ---------- */
/* One flat blue bar: title left, pill right. The two-tone diagonal was
   dropped in favour of a single colour -- it read as a second, competing
   accent next to the plain marks every other band on the page uses. */
.slab { display: flex; align-items: stretch; gap: var(--sp-4); overflow: hidden;
        min-height: var(--slab-h); background: var(--slab-blue); color: #fff;
        border-radius: var(--radius-xs); }
.slab__ink { margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
             padding-right: var(--sp-5); }
/* The popular bar carries no pill, so its right-hand slot renders nothing. */
.slab__ink--deco { display: none; }
.lpb__side .slab__title { white-space: nowrap; }
.slab__title { align-self: center; margin: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
               font-family: var(--font-display); font-weight: 800; color: #fff;
               font-size: clamp(1.375rem, 1.375rem + 0.3125vw, 1.75rem); line-height: 1.4;
               letter-spacing: 0; }
.slab__link { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
              font-size: var(--fs-sm); font-weight: 700; color: #fff;
              background: #fff; border: 1px solid #fff; color: var(--slab-blue);
              border-radius: var(--radius-pill); min-height: 44px; padding: 7px var(--sp-4);
              transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.slab__link:hover { background: rgb(255 255 255 / 0.86); }
.slab__arrow { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
               stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
               transition: transform var(--t-fast) var(--ease); }
.slab__link:hover .slab__arrow { transform: translateX(3px); }
/* Phones: the bar stays one 52px row. What gives way is the label, in two
   steps -- the full wording shortens, and under 340px, where even the short
   form will not fit beside the title, it becomes an arrow button. Both
   steps keep the full name in the accessibility tree. */
@media (max-width: 560px) {
  .slab { min-height: 52px; gap: var(--sp-2); }
  /* 1rem put this section heading at the same size as the card titles under
     it, and below every other section heading on the page. The bar's one-row
     rule is what forced it down, but the row was never the constraint:
     measured at 320px with the arrow-only link, 18px still leaves 72px of
     slack. 18px is the desktop relationship carried over -- the slab sits at
     0.81 of the main headings there (26 of 32), and 0.81 of 22px is 18. */
  .slab__title { font-size: 1.125rem; padding-left: var(--sp-4); }
  .slab__ink { padding-right: var(--sp-3); }
  .slab__link { min-height: 44px; padding: 6px var(--sp-3); gap: 6px; }

  .slab__link .slab__arrow { width: 17px; height: 17px; }
  .slab__link-more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                     overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 400px) {
    .slab__ink { padding-right: var(--sp-2); }
}
@media (max-width: 340px) {
  .slab__link { width: 44px; height: 44px; min-height: 0; padding: 0; gap: 0;
                border-radius: 50%; justify-content: center; }
  .slab__link .slab__arrow { width: 19px; height: 19px; }
  .slab__link-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                     overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ---------- latest: 2-up cards ---------- */
.lgrid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 700px) { .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }

.lcard { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); background: var(--card-bg, var(--background));
         border: 1px solid var(--border); border-radius: var(--radius-sm);
         transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
                     transform var(--t-fast) var(--ease); }
.lcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
.lcard__pic { flex: none; width: 132px; aspect-ratio: 4 / 3; border-radius: var(--radius-xs); }
.lpb .pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lcard:hover .pic__inner { transform: scale(1.045); }

/* no featured photo: keep the card's rhythm instead of collapsing the row.
   Mixed from the card's own surface so it stays one step off the card in
   both themes -- --surface-2 lands exactly on the dark card colour. */
.lcard__pic--none { display: grid; place-items: center; background-image: none;
                    background-color: color-mix(in srgb, var(--text-primary) 8%, var(--card-bg, var(--background)));
                    border: 1px dashed var(--border); }
.lcard__none { font-family: "Inter", sans-serif; font-weight: 800; font-size: var(--fs-2xs);
               letter-spacing: 0.16em; color: var(--text-secondary); }

.lcard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* same desk-to-colour map the wire and the day-list already use */
.lcard[data-rail="ink"]     { --desk: color-mix(in srgb, var(--text-primary) 88%, var(--background)); }
.lcard[data-rail="trust"]   { --desk: var(--accent-trust); }
.lcard[data-rail="life"]    { --desk: var(--accent-life); }
.lcard[data-rail="premium"] { --desk: var(--accent-premium); }
.lcard__cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0;
              color: var(--desk, var(--text-secondary)); line-height: 1.5; }
.lcard__title { font-family: var(--font-display); font-weight: 700;
                font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); 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;
                transition: color var(--t-fast) var(--ease); }
.lcard:hover .lcard__title { color: var(--accent-trust); }
/* From the 2-up breakpoint the title always occupies its three clamped
   lines, so a row of short headlines cannot shorten the whole grid. */
@media (min-width: 700px) { .lcard__title { min-height: calc(3 * var(--lh-title) * 1em); } }
.lcard__at { font-size: var(--fs-xs); color: var(--text-secondary); }

/* Phones: one column, so the thumbnail becomes the card. A 132px crop of a
   news photograph is unreadable on a phone; 16/9 full-bleed is the same
   ratio the popular lead and .pic--wide already use. */
@media (max-width: 699px) {
  .lcard { display: block; padding: 0; overflow: hidden; }
  .lcard__pic { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
  .lcard__body { padding: var(--sp-4); gap: 6px; }
  /* A full-width "no photograph" panel is 200px of empty grey on a phone.
     The story simply runs as a text card there. */
  .lcard__pic--none { display: none; }
}

/* ---------- popular: ranked list ---------- */
.pop { display: grid; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.pop__item { border-top: 1px solid var(--border); }
.pop__item:first-child { border-top: 0; }
.pop__item[data-rail="ink"]     { --desk: color-mix(in srgb, var(--text-primary) 88%, var(--background)); }
.pop__item[data-rail="trust"]   { --desk: var(--accent-trust); }
.pop__item[data-rail="life"]    { --desk: var(--accent-life); }
.pop__item[data-rail="premium"] { --desk: var(--accent-premium); }

.pop__row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3);
            align-items: start; padding: var(--sp-4) 0; border-left: 3px solid transparent;
            transition: border-color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.pop__row:hover { border-left-color: var(--desk, var(--accent-trust)); padding-left: var(--sp-3); }
.pop__pic { aspect-ratio: 4 / 3; border-radius: var(--radius-xs); }
.pop__row:hover .pic__inner { transform: scale(1.045); }
.pop__body { display: grid; gap: 4px; min-width: 0; }
.pop__title { font-family: var(--font-display); font-weight: 700;
              font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); 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;
              transition: color var(--t-fast) var(--ease); }
.pop__row:hover .pop__title { color: var(--accent-trust); }
.pop__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
             font-size: var(--fs-xs); color: var(--text-secondary); }
.pop__views { font-weight: 600; }
.pop__dot { opacity: 0.55; }

/* Phones: #1 already runs a full-width photograph; the three rows under it
   stay a scannable list, but at 84px their pictures were thumbnails of a
   thumbnail, so they step up with the cards. */
@media (max-width: 699px) {
  .pop__row { grid-template-columns: 116px minmax(0, 1fr); }
}

/* #1 leads with a wide photograph -- the rest stay as compact rows */
.pop__item--lead .pop__row { grid-template-columns: minmax(0, 1fr); padding-top: 0; row-gap: var(--sp-3); }
.pop__item--lead .pop__pic { grid-column: 1 / -1; order: -1; width: 100%; aspect-ratio: 16 / 9; }
.pop__item--lead .pop__title { font-size: clamp(1rem, 0.93rem + 0.35vw, 1.1875rem); -webkit-line-clamp: 4; }

/* tablet: the sidebar sits under the grid, so it reads two-up instead of
   as one very long column */
@media (min-width: 700px) and (max-width: 1023px) {
  .pop { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
  .pop__item:nth-child(2) { border-top: 0; }
  /* Under the 2-up card grid the four rows read best as a plain 2x2, so
     #1 drops its wide photograph and takes the same compact row as the
     rest -- a full-width lead here would leave the fourth row orphaned. */
  .pop__item--lead .pop__row { grid-template-columns: 84px minmax(0, 1fr); padding-top: var(--sp-4); }
  .pop__item--lead .pop__pic { grid-column: auto; order: 0; width: auto; aspect-ratio: 4 / 3; }
  .pop__item--lead .pop__title { font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem); -webkit-line-clamp: 3; }
}

/* ==========================================================================
   ELEMENTOR BUTTON TOUCH SIZE
   ========================================================================== */

/* Every band's "see all" control is a native Elementor Button widget -- the
   band mapping forbids putting a design class on it -- and Elementor sizes
   them from padding alone, which produced 33, 35, 39 and 41px across the ten
   on the front page. None reached the 44px touch minimum.

   inline-flex rather than min-height on its own: the widget is inline-block,
   so the extra height would collect under the label instead of centring it.

   This lives at the end of the file, at top level, on purpose. It was first
   written next to the .slab__link rule it belongs with -- which sits inside
   @media (max-width: 560px), so it silently applied to phones only and the
   desktop buttons stayed at 39px. Verifying at one width is what missed it. */
main .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* ==========================================================================
   LINE CLAMP ON CONVERTED CARD TITLES
   ========================================================================== */

/* Every card title in the design clamps to two or three lines. When the band
   became an Elementor Loop Grid the design class moved onto the heading
   *widget wrapper*, and the text ended up in the .elementor-heading-title
   inside it. The wrapper kept `overflow: hidden` and the height of the box
   the clamp used to make, but -webkit-line-clamp needs -webkit-box on the
   element that holds the text -- so the clamp stopped working and the
   overflow cut the headline at a pixel instead of a line, with no ellipsis.
   Measured on the front page before this rule: 16 titles cut at 1280px and 6
   at 375px, the worst of them a four-line headline showing two.

   line-clamp: inherit rather than a number, so each title keeps the count the
   design gave it (2 for .pgrid__title and .ssub__title, 3 for the rest) and
   there is one place to look when a count changes.

   The existing kit rule beside these selectors already passes font-family,
   size, weight and colour down to the same element; the clamp was the one
   property it missed. .shero__title is deliberately absent -- it clamps
   nothing. Top level on purpose: these titles exist at every width. */
.pgrid__title.elementor-widget > .elementor-heading-title,
.ldesk__card-title.elementor-widget > .elementor-heading-title,
.ldesk__hero-title.elementor-widget > .elementor-heading-title,
.scard__title.elementor-widget > .elementor-heading-title,
.ssub__title.elementor-widget > .elementor-heading-title,
.strend__title.elementor-widget > .elementor-heading-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: inherit;
  overflow: hidden;
}

/* ── youtube channel strip ────────────────────────────────────────────────
   Added 2026-08-23, overriding the .ytbar block earlier in this file.

   The "see all" pill was invisible in both themes: it was painted
   background:var(--text-invert) / color:var(--surface-invert), and those
   two are the wrong way round — in light that is a white pill on a white
   page, in dark a #0b0c0e pill on a #0b0c0e page. Swapping them back gives
   a dark pill with white text in light and the reverse in dark, 18.9:1
   either way. It stays a token pair rather than a red so it cannot clash
   with the #ff0000 YouTube glyph sitting three elements to its left.

   The strip itself becomes a filled chip instead of an outlined one; the
   1px border is kept and only made transparent, so nothing shifts, and the
   hover keeps that border transparent too rather than flashing one in.
   ======================================================================== */

.ytbar {
  background: var(--surface);
  border-color: transparent;
  padding-inline: var(--sp-5);
}

.ytbar:hover {
  background: var(--surface-2);
  border-color: transparent;
}

.ytbar__cta {
  background: var(--surface-invert);
  color: var(--text-invert);
  padding: 9px var(--sp-5);
}

/* .ytbar is a native Elementor container, so its inline padding is not ours
   to set: `.page__inner > .ytbar.e-con` (three classes) beats a bare .ytbar
   and drives the padding through Elementor's own custom properties. Setting
   the properties works with that machinery instead of out-specifying it. */

.ytbar {
  --padding-inline-start: var(--sp-5);
  --padding-inline-end: var(--sp-5);
}

/* ── category / archive listing ───────────────────────────────────────────
   2026-08-23, approved as design A ("editorial lead").

   EVERY rule here is scoped to `.archive` and that is not decoration: the
   same .world__* and .mark__* classes build the homepage's international
   band (inc/homepage.php) and the Elementor loop template #7101. An
   unscoped .world__card rule would silently restyle the front page. `body`
   carries `.archive` on category, tag, author and date listings and never
   on the front page or a single post.

   The five things measured wrong before this:
     1. .world__title had NO line-clamp, so titles ran 2, 3 and 5 lines and
        the ten cards came out 595 / 538 / 514 tall. Clamped to 3, the nine
        non-lead cards now measure 515 to the pixel, all of them.
     2. Ten identical cards, no hierarchy — hence the lead.
     3. The header was a 31px title and a 1px hairline. It gains a 56×3 rail
        in the desk colour and a fluid 26→36px title.
     4. No resting shadow; the cards read as flat outlines.
     5. Mobile ran 7,039px for ten cards. The non-lead cards become compact
        116px-thumbnail rows below 600px: 4,389px, and 4.7 headlines per
        screen instead of 1.8.

   The lead has three regimes, and the breakpoints come from image geometry,
   not from round numbers. The source images are 800×450 (16:9 = 1.78):
     ≥1100  side-by-side. `min-height: clamp(320px, 30vw, 420px)` keeps the
            picture at 1.63 at 1100 and 1.77 at 1440 — at a flat 420px it
            measured 1.11 at 900px wide, a near-square crop, which is what
            ruled the 900px breakpoint out.
     600–1099  full-width, picture forced back to 16/9 so nothing is cropped
            at all (measured 1.78).
     ≤599   the lead stays a normal card and only its title grows to 20px,
            which separates it from the 15px compact rows below it.

   In dark the drop shadow is invisible and the card background equals the
   page, so the card is lifted with --surface there and only there; light
   keeps its white card and lets the shadow do the work.
   ======================================================================== */

.archive .mark { position: relative; padding-top: 22px; }

.archive .mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--rail, var(--accent-trust));
}

.archive .mark__title { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.25rem); font-weight: 800; }

.archive .world__card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(16 17 20 / .05), 0 10px 24px -12px rgb(16 17 20 / .12);
}

.archive .world__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive .world__dek { -webkit-line-clamp: 2; }

:root[data-theme="dark"] .archive .world__card { background: var(--surface); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .archive .world__card { background: var(--surface); }
}

@media (min-width: 1100px) {

  .archive .world__card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(320px, 30vw, 420px);
  }

  .archive .world__card:first-child .world__frame { display: block; height: 100%; }
  .archive .world__card:first-child .world__pic { height: 100%; aspect-ratio: auto; }

  .archive .world__card:first-child .world__body {
    justify-content: center;
    padding: var(--sp-8);
    gap: var(--sp-3);
  }

  .archive .world__card:first-child .world__title { font-size: 26px; -webkit-line-clamp: 3; }
  .archive .world__card:first-child .world__dek { font-size: 16px; -webkit-line-clamp: 3; }
}

@media (min-width: 600px) and (max-width: 1099px) {
  .archive .world__card:first-child { grid-column: 1 / -1; }
  .archive .world__card:first-child .world__pic { aspect-ratio: 16 / 9; }
  .archive .world__card:first-child .world__title { font-size: 22px; }
  .archive .world__card:first-child .world__dek { font-size: 15px; -webkit-line-clamp: 3; }
}

@media (max-width: 599px) {

  .archive .world__card:first-child .world__title { font-size: 20px; }

  .archive .world__card:not(:first-child) {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    border-radius: 12px;
  }

  .archive .world__card:not(:first-child) .world__frame { border-radius: 8px; overflow: hidden; }
  .archive .world__card:not(:first-child) .world__body { padding: 0; gap: 4px; }
  .archive .world__card:not(:first-child) .world__dek { display: none; }
  .archive .world__card:not(:first-child) .world__title { font-size: 15px; -webkit-line-clamp: 3; }
}

/* ── archive pager ────────────────────────────────────────────────────────
   2026-08-23. niyo_archive_pagination() prints numbers now, so the inline
   flex it used to carry on the wrapper moved here where it can be read.

   The set printed is first · last · current ±1, with one ellipsis per gap —
   that is what lets a 26-page desk fit in seven controls instead of 26.

   Every number is a 44px target. The pager it replaces had two buttons and a
   line of static text, so nothing here shrinks a hit area.
   ======================================================================== */

.archive .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-block: var(--sp-10);
}

.archive .pager__nums {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive .pager__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.archive a.pager__n:hover { background: var(--surface-2); }

.archive .pager__n.is-current { background: var(--surface-invert); color: var(--text-invert); }

.archive .pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 44px;
  color: var(--text-secondary);
}

/* ── archive pager, second pass ───────────────────────────────────────────
   2026-08-23. Rebuilt to the reference the newsroom supplied: two arrow
   buttons around a run of five consecutive numbers, and a jump box beneath.

   The window replaces the first · last · ellipsis set. With an ellipsis a
   reader could reach only four destinations; with a jump box every one of
   the 26 pages is one keystroke away, so the ellipsis had nothing left to do.

   .pager__input is 16px and that is not a style choice — iOS Safari zooms
   the whole page when it focuses any field under 16px, and this one sits at
   the very bottom of a long archive where a zoom is most disorienting.
   ======================================================================== */

.archive .pager { flex-direction: column; gap: var(--sp-5); }

.archive .pager__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.archive .pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.archive a.pager__arrow:hover { background: var(--surface-2); border-color: var(--border-strong); }

.archive .pager__arrow.is-off { opacity: .3; }

.archive .pager__arrow--prev .icon { transform: rotate(180deg); }

.archive .pager__jump {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.archive .pager__label,
.archive .pager__of {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.archive .pager__input {
  width: 76px;
  height: 44px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.archive .pager__input::-webkit-outer-spin-button,
.archive .pager__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.archive .pager__input:focus-visible { outline: 2px solid var(--accent-trust); outline-offset: 2px; }

.archive .pager__go {
  min-height: 44px;
  padding-inline: var(--sp-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-invert);
  color: var(--text-invert);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}

.archive .pager__go:hover { opacity: .88; }

/* Below 400px the seven controls need 340px and only 296 exist, so the row
   wrapped onto a second line. Only the horizontal measure is tightened —
   every control keeps its 44px height, which is the axis a thumb actually
   needs. Measured at 320: 340 -> 284px, one line, min tap height still 44. */

@media (max-width: 399px) {
  .archive .pager__row { gap: 4px; }
  .archive .pager__n { min-width: 36px; padding-inline: 6px; }
  .archive .pager__arrow { width: 40px; }
}

/* ── category listing, second pass: rail + rows ───────────────────────────
   2026-08-23. Rebuilt from a reference the newsroom supplied
   (thethaiger.com/news/bangkok): a main column of horizontal rows beside a
   sticky rail. Measured on that page first, so the comparisons below are
   real numbers, not impressions.

   What the reference does badly and this does not:
     • Its rows run 181–233px because the excerpt is never clamped. Here the
       title and the dek are each pinned to two lines, so all nineteen rows
       measure 187px — exactly.
     • It has no lead story; thirty identical rows. The first card keeps the
       side-by-side lead treatment.
     • 8,093px for thirty stories (270 each). This is 4,356px for twenty
       (218 each), rail included.
     • Square corners, no shadow, no dark mode.

   The rail reuses the article page's own widget components — .n__w,
   .n__whead, .n__wlist, .n__wrow — so it needed no new CSS of its own and
   the archive now matches the single post it links to.

   Rows collapse to the 116px-thumbnail layout below 600px, which the mobile
   block further up already defines; nothing here repeats it.
   ======================================================================== */

.archive .arch { display: block; }

@media (min-width: 1100px) {

  .archive .arch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-8);
    align-items: start;
  }

  .archive .arch__side { position: sticky; top: var(--sp-6); }
}

@media (max-width: 1099px) {
  .archive .arch__side { margin-top: var(--sp-10); }
}

.archive .world { display: flex; flex-direction: column; gap: var(--sp-4); }

@media (min-width: 700px) {

  .archive .world__card:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
  }

  .archive .world__card:first-child .world__frame { display: block; height: 100%; }
  .archive .world__card:first-child .world__pic { height: 100%; aspect-ratio: auto; }

  .archive .world__card:first-child .world__body {
    justify-content: center;
    padding: var(--sp-6);
    gap: var(--sp-2);
  }

  .archive .world__card:first-child .world__title { font-size: 24px; -webkit-line-clamp: 3; }
  .archive .world__card:first-child .world__dek { font-size: 15px; -webkit-line-clamp: 3; }
}

@media (min-width: 600px) {

  .archive .world__card:not(:first-child) {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3);
  }

  .archive .world__card:not(:first-child) .world__frame { border-radius: 10px; overflow: hidden; }
  .archive .world__card:not(:first-child) .world__pic { aspect-ratio: 16 / 9; }
  .archive .world__card:not(:first-child) .world__body { padding: 0; gap: 6px; }

  /* Both are pinned, not just clamped. A clamp alone still lets a one-line
     title or a short excerpt shorten the row — that is exactly why the
     reference's rows are ragged. Pinning both is what makes all of them 187. */
  .archive .world__card:not(:first-child) .world__title {
    font-size: 19px;
    line-height: 1.5;
    min-height: 57px;
    -webkit-line-clamp: 2;
  }

  .archive .world__card:not(:first-child) .world__dek {
    font-size: 14px;
    line-height: 1.5;
    min-height: 42px;
    -webkit-line-clamp: 2;
  }
}

/* ── category heading, second pass ────────────────────────────────────────
   2026-08-23. The newsroom rejected the first version and this replaces it.

   The fault was proportion, not taste. `.mark` is the homepage's desk
   heading, where the hairline runs from the title across to a "see all"
   link at the far right. An archive has no trailing element, so the line
   simply ran to the edge: at 1440 that is a **1,192px rule beside a 136px
   title** — nine parts line to one part word, and only 1px thick, so it
   read as stranded rather than deliberate.

   The rule and the 56px rail above it are both switched off; the title now
   carries a 4px accent underline exactly as wide as the word itself. That
   is the same device the homepage's own desk marks use, so the archive
   heading and the section headings finally agree.

   The rail rule further up is left in place rather than deleted: reverting
   this block alone restores the previous heading exactly.
   ======================================================================== */

.archive .mark { display: block; padding: 0; }

.archive .mark::before { display: none; }

.archive .mark__rule { display: none; }

.archive .mark__title {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--accent-trust);
}

/* Only two of the thirty categories carry a description, so this is a rule
   most archives never use — it exists so the two that do are not cramped
   against the underline, and so a long one keeps a readable measure. */
.archive .mark__note { margin: var(--sp-4) 0 0; max-width: 68ch; }