/* ==========================================================================
   ARTICLE

   The master design covers the shell and the homepage; it never drew a story
   page. This file adds one, and it adds nothing else: every value below is a
   token the design already defines, and every pattern is one the design
   already uses — the .eyebrow caps, the dek at --fs-lg/--text-secondary/64ch,
   the 1px --border hairline as the structural device, --lh-mm for Myanmar
   copy. No new colour, font, radius or spacing value enters the site.

   The wrapper carries `home`, so the article inherits the same display face
   and title leading the homepage uses (--font-display, --t-hero, --lh-title).
   That is deliberate: a headline should read the same on the front page and
   on the story, and reusing the scope means the numbers live in exactly one
   place instead of being copied here and drifting later.

   Kept out of the four design stylesheets so the original build can always be
   diffed against its source.
   ========================================================================== */

.article { padding-bottom: var(--sp-16); }

/* ---------- Header ---------- */
.article__head {
  padding-block: var(--sp-10) var(--sp-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}

.article__kicker { color: var(--rail, var(--text-secondary)); }

.article__title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: var(--lh-title);
  font-weight: 700;
  letter-spacing: 0;
  max-width: 26ch;
  margin: var(--sp-3) 0 0;
}

.article__dek {
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
  max-width: 64ch;
  margin-top: var(--sp-4);
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.article__byline b { font-weight: 600; color: var(--text-primary); }

/* ---------- Lead image ---------- */
.article__media { margin: 0 0 var(--sp-8); }
.article__pic { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.article__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* ==========================================================================
   BODY

   Everything below is scoped to .article__body so it can only ever style
   editor output, never the shell.
   ========================================================================== */
.article__body {
  max-width: 68ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-primary);
}

.article__body > * + * { margin-top: var(--sp-6); }

/* Only the bottom is reset. `margin: 0` here was (0,1,1) and quietly beat the
   (0,1,0) flow rule above it, so every paragraph - and every image pasted
   between them - sat flush against the next with no gap at all. */
.article__body p { margin-bottom: 0; }
.article__body > :first-child { margin-top: 0; }

/* Much of this archive was pasted in from social posts, so its paragraphs
   arrive as <div dir="auto"> inside a wrapper div rather than as <p>. They are
   paragraphs in every way that matters to a reader, so they are spaced like
   paragraphs — without this the whole story runs together as one block. */
.article__body div[dir] + div[dir],
.article__body > div > * + * { margin-top: var(--sp-6); }

/* Those pasted wrappers also carry the source site's own class names, which
   can bring stray flex or width rules with them. Neutralise the layout and
   let the measure above stay in charge. */
.article__body > div[class*="x"] {
  display: block;
  width: auto;
  max-width: 100%;
}

.article__body a {
  color: var(--accent-trust);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article__body a:hover { text-decoration-thickness: 2px; }

.article__body h2,
.article__body h3 {
  font-family: var(--font-display);
  line-height: var(--lh-title);
  font-weight: 700;
  letter-spacing: 0;
  margin-top: var(--sp-10);
}
.article__body h2 { font-size: var(--t-lg); }
.article__body h3 { font-size: var(--t-md); }

.article__body ul,
.article__body ol { padding-left: var(--sp-6); }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: var(--sp-2); }
.article__body li::marker { color: var(--text-secondary); }

/* The desk's own accent carries the quote, the way the rails carry the
   navigation and the footer index. */
.article__body blockquote {
  margin: var(--sp-10) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-6);
  border-left: 3px solid var(--rail, var(--border-strong));
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: var(--lh-title);
  color: var(--text-primary);
}
.article__body blockquote p + p { margin-top: var(--sp-4); }
.article__body blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.article__body img,
.article__body iframe,
.article__body video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.article__body figure { margin: var(--sp-10) 0; }

/* This archive was pasted from social posts: the images arrive as bare <img>
   tags separated by a space, so wpautop folds a run of them into a single
   <p> and the flow rule - which only reaches direct children of
   .article__body - never sees them. 2,560 photographs across 403 stories
   were stacking 16px apart while two lines of text got 24px, so a run of
   pictures read as one grey mass. A photograph needs more air than a
   paragraph, not less.

   This file loads after the Elementor kit, so the same three rules live in
   both and have to agree; changing one alone changes nothing. */
.article__body img + img { margin-top: var(--sp-8); }
.article__body p > img:first-child { margin-top: 0; }
.article__body p > img:last-child { margin-bottom: 0; }

/* A paragraph carrying only photographs stands further from the text around
   it than two paragraphs of text stand from each other. */
.article__body > p:has(> img) { margin-top: var(--sp-10); }
.article__body > p:has(> img) + p { margin-top: var(--sp-10); }

/* Once there is room beside the measure, the photographs take it. The text
   stays at 68ch because that is what is comfortable to read; the pictures
   were never shot to that width. Measured room beside the column is 131px a
   side at 900 and 417px at 1440, so 72px never reaches the viewport edge.
   Below 900 the column already fills the screen and nothing moves. */
@media (min-width: 900px) {
  .article__body > p:has(> img) { margin-inline: -72px; }
}

.article__body hr {
  height: 1px;
  border: 0;
  background: var(--border);
  margin-block: var(--sp-10);
}

.article__body strong, .article__body b { font-weight: 700; }

.article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  display: block;
  overflow-x: auto;
}
.article__body th,
.article__body td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.article__body th {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.article__body code,
.article__body pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-md);
}
.article__body pre {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow-x: auto;
}

/* ---------- Breakpoints, in the design's own steps ---------- */
@media (min-width: 768px) {
  .article__head { padding-block: var(--sp-12) var(--sp-8); }
  .article__title { max-width: 24ch; }
}

/* The lead was cropped to 21:9 above 1024px. WordPress has already hard
   cropped the file to 16:9 for the niyo-hero size, so this was a second crop
   on top of the first - it cut roughly a quarter of the height back out of
   pictures that are mostly faces and pasted-together social graphics. 16:9 is
   the design's own base value and is left to stand at every width. */


/* ==========================================================================
   SHARE + RELATED

   Two blocks the story page did not have. Both are assembled from vocabulary
   that already exists: .rule-label is the footer's caps-on-a-hairline device,
   .social is the icon row from the masthead, and the related grid is the very
   same .band / .mark / .world the international block uses on the front page.
   No new tokens, and no new shapes to learn.
   ========================================================================== */

.article__share { margin-top: var(--sp-10); }

/* Mirrors .social--footer; named for where it is used, not for the footer. */
.social--share { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.social--share a { width: 40px; height: 40px; }

/* The related band is full-bleed like every other band, so it must escape the
   article's own measure rather than sit inside it. */
.article__related { margin-top: var(--sp-12); }


/* ==========================================================================
   FACT-CHECK VERDICT

   The answer, stated before the reasoning. The accent arrives as --verdict on
   the element itself, the same way the desk rail arrives as --rail, so the
   badge carries no colour of its own and inherits every theme automatically.
   ========================================================================== */
.verdict {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--verdict);
  border-radius: var(--radius-sm);
}
.verdict__tag {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.verdict__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--verdict);
}


/* ==========================================================================
   26. STORY PAGE  —  [niyo_article]
   Replaces the single-column article that shipped before. The reading column
   is capped at 720px: filling the shell it ran 1008px wide and set Myanmar
   body copy at ~100 characters a line, against the 45-75 newspapers work to.
   ========================================================================== */
/* ══════════════════════════════════════════════════════════════════════
   SINGLE POST — reading first
   Built to the reference: headline, desk, photograph, one published line,
   then the story at full column width. The long measure is deliberate and
   is what the reference does; it works because the leading is opened to 2.0
   and the paragraph gap is large, which is how Myanmar copy wants to be set.
   ══════════════════════════════════════════════════════════════════════ */

/* the page sits on --surface; the story sits on a card, as in the reference */
.n__wrap { padding-block: var(--sp-6) var(--sp-12); }
.n__grid { display: grid; gap: var(--sp-6); align-items: start; }
/* The page fills the shell; the *text* does not. Left to stretch, the body ran
   1008px wide and set Myanmar copy at ~100 characters a line against the 45-75
   newspapers work to. So the grid takes the full width — the photograph, the
   read-next cards and the sidebar all get the room — and only the runs of
   prose are held to a measure and centred under the furniture above them. */
@media (min-width: 1120px) {
  .n__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-12); }
}
/* One left edge. The headline, the kicker, the photograph, the caption, the
   byline, every paragraph and the read-next cards all begin and end on the
   same two lines. The previous pass capped the prose at 720px and let the
   photograph run wider, which put two different left edges on the page — the
   thing the reference does not do and the first thing that read as untidy. */
/* No card, no border, no radius: the reference puts white under the story
   and runs it to the edge of the screen. The only inset is the page gutter. */
.n__card { background: var(--background); }
@media (min-width: 1120px) { .n__card { padding-right: var(--sp-6); } }

/* 1 ── headline, then the desk label under it */
/* The clamp used to bottom out at 1.5rem, so every phone from 320px up got
   essentially the same 24-25px headline. Set bold, in Myanmar, that carries
   more weight on a 390px screen than the 32px regular the reference uses.
   The floor drops and the slope steepens instead: 22px at 390, 21px at 360,
   and it still reaches the same 36px cap from 1150px up, so the desktop
   headline is unchanged.

   Do not reach for a middle weight here: the site loads Pyidaungsu in 400 and
   700 only, so 500 or 600 resolves back to 700 for Myanmar text while genuinely
   lightening the Latin words, which come from Inter — a headline set in two
   different weights at once. Bold-and-smaller, or regular-and-larger, are the
   only two real options, and bold was chosen. */
.n__title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; margin: 0;
            font-size: clamp(1.25rem, 0.8875rem + 2vw, 2.25rem); line-height: 1.45; }
.n__desk { display: inline-flex; align-items: center; min-height: 24px; margin-top: var(--sp-3);
           font-size: var(--fs-md); font-weight: 700; color: var(--rail, var(--accent-trust)); }

/* 2 ── photograph, full card width */
.n__fig { margin: var(--sp-5) 0 0; }
.n__fig .pic { aspect-ratio: 16 / 9; border-radius: 0; }
.n__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The picture's own line, lifted out of the body where the editors write it.
   A size below the copy so it never reads as the story's first sentence, and
   the credit a shade quieter again — it is provenance, not reporting. */
.n__cap { margin-top: var(--sp-3); font-size: var(--fs-md); line-height: 1.65;
          color: var(--text-secondary); }
/* The credit is quieter than the caption but still has to be readable: at a
   72% mix it measured 3.49 against the page, under the 4.5 a body-sized run
   of text needs. 88% keeps the step down and clears it. */
.n__cap-credit { color: color-mix(in srgb, var(--text-secondary) 88%, var(--background)); }
.n__cap-dot { opacity: 0.5; padding-inline: 4px; }
/* the hero runs to the screen edge on a phone; its caption must not */
@media (max-width: 699px) { .n__cap { padding-inline: var(--gutter); } }

/* 3 ── the published line: when it was written and how long it takes. The
   sharing that used to sit here has gone — the same five buttons wait at the
   foot of the story, and a reader who has not read it yet has nothing to
   share. The desk-coloured stub went with them: the kicker above already
   names the desk in that colour. */
.n__pub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
          margin-top: var(--sp-5); padding-block: var(--sp-4);
          border-top: 1px solid var(--border);
          font-size: var(--fs-md); }
/* Who filed it, when, and how long it runs — the three things a reader checks
   before committing. The date is a <time datetime> so machines read it too;
   .n__pub-edit only appears on a story that has actually been revised. */
.n__pub-by { font-weight: 700; color: var(--text-primary); }
.n__pub-date { font-weight: 700; color: var(--text-primary); }
.n__pub-edit { color: var(--text-secondary); font-style: normal; }
.n__pub-read { color: var(--text-secondary); }
.n__dot { opacity: 0.4; }
.n__share { display: flex; align-items: center; gap: var(--sp-2); }
/* Five solid brand blocks are the loudest thing on a reading page and they
   are also everyone else's row of buttons. The platform colour stays — that
   is what makes them recognisable — but it sits in the glyph on an outlined
   circle, and only fills in on hover, when the reader has aimed at it. */
.n__share { gap: var(--sp-2); }
/* The share buttons carry each platform's own colour in the glyph, on an
   outlined circle, and fill with it on hover. Colour in the mark rather than
   in five solid blocks: the row sits at the foot of a reading page, so it
   should be recognisable without shouting. Facebook and Telegram are set a
   shade deeper than their brand values — the published blues measure 4.23
   and 3.02 against white, and these clear it comfortably. */
.n__sbtn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
           border: 1px solid var(--border); color: var(--brand-ink, var(--text-secondary));
           background: var(--background);
           transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
                       border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.n__sbtn:hover { color: #fff; background: var(--brand, var(--text-primary));
                 border-color: var(--brand, var(--text-primary)); transform: translateY(-1px); }
.n__sbtn .icon { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.n__sbtn--tg .icon, .n__sbtn--link .icon { fill: none; stroke: currentColor; }

.n__sbtn--fb   { --brand: #1877f2; --brand-ink: #1362cf; }
.n__sbtn--x    { --brand: #000000; --brand-ink: #000000; }
.n__sbtn--tg   { --brand: #229ed9; --brand-ink: #1a7ba8; }
.n__sbtn--vb   { --brand: #7360f2; --brand-ink: #6247e0; }
/* the link button is not a platform, so it stays the page's own grey */
.n__sbtn--link { --brand: var(--text-primary); --brand-ink: var(--text-secondary); }

/* On a dark page the deepened tones are the wrong way round — they measured
   3.43 (Facebook) and 3.26 (Viber) against #0b0c0e, close to the 3:1 floor,
   while the published brand colours are brighter and clear it easily. So the
   marks go back to their true values in dark. X's is black, which disappears
   there: it becomes the white mark X itself uses on dark, hover inverted. */
[data-theme="dark"] .n__sbtn--fb { --brand-ink: #1877f2; }
[data-theme="dark"] .n__sbtn--tg { --brand-ink: #229ed9; }
[data-theme="dark"] .n__sbtn--vb { --brand-ink: #7360f2; }
[data-theme="dark"] .n__sbtn--x { --brand: #f3f4f6; --brand-ink: #f3f4f6; }
[data-theme="dark"] .n__sbtn--x:hover { color: #000; }
[data-theme="dark"] .n__sbtn--link:hover { color: var(--background); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .n__sbtn--fb { --brand-ink: #1877f2; }
  [data-theme="system"] .n__sbtn--tg { --brand-ink: #229ed9; }
  [data-theme="system"] .n__sbtn--vb { --brand-ink: #7360f2; }
  [data-theme="system"] .n__sbtn--x { --brand: #f3f4f6; --brand-ink: #f3f4f6; }
  [data-theme="system"] .n__sbtn--x:hover { color: #000; }
  [data-theme="system"] .n__sbtn--link:hover { color: var(--background); }
}

/* 4 ── the story.
   No max-width: the column is the measure, exactly as the reference sets it.
   17px with 2.0 leading and a 26px gap between paragraphs — Myanmar stacks
   marks above and below the line, and this is the spacing that keeps a long
   line trackable. */
.n__body { margin-top: var(--sp-7); font-size: 1.0625rem; line-height: 2;
           color: color-mix(in srgb, var(--text-primary) 94%, var(--background)); }
.n__body > * { margin: 0; }
.n__body > * + * { margin-top: 26px; }
.n__body a { color: var(--accent-trust); text-decoration: underline; text-underline-offset: 3px; }
.n__body h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md);
              line-height: var(--lh-title); margin-top: var(--sp-8); }
.n__body ul, .n__body ol { padding-left: 1.35em; }
.n__body ul { list-style: disc; } .n__body ol { list-style: decimal; }
.n__body li + li { margin-top: var(--sp-2); }
.n__body li::marker { color: var(--text-secondary); }
.n__body blockquote { padding-left: var(--sp-5); border-left: 3px solid var(--rail, var(--border-strong));
                      font-family: var(--font-display); }
.n__body figure .pic { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
.n__body figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n__body figcaption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
@media (min-width: 700px) { .n__body { font-size: 1.125rem; } }

/* 5 ── the story ends with sharing again, as the reference does */
/* The foot of the story: sourcing, then the subjects it belongs to, then the
   invitation to share — each separated by space rather than by a panel, so
   the page ends quietly instead of stacking three boxes. */
/* One standing sentence, and it belongs to the paper rather than to the
   story — so it sits a size below the copy and keeps its own rule. The
   sourcing is not here: that is the newsroom's line about this particular
   report, and it stays in the last paragraph where it was written. */
.n__src { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border);
          font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }
.n__src a { color: var(--accent-trust); }
.n__src a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A reader who has turned motion down in their OS gets none of the hover
   zooms or lifts; the colour changes stay, so nothing loses its affordance. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mc:hover .pic__inner, .n__rcard:hover .pic__inner, .n__wrow:hover .pic__inner,
  .n__sbtn:hover { transform: none !important; }
}

.n__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
          margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.n__end-label { font-size: var(--fs-lg); color: var(--text-secondary); }
.n__end .n__share { margin-left: 0; }

/* 6 ── sidebar. Heading with a rule, then rows on a tinted strip with the
       thumbnail on the left — the reference's own shape. */
.n__w + .n__w { margin-top: var(--sp-8); }
/* The front page's own bar, scaled down for a 320px column. Using it here
   rather than inventing a third heading style means the reader meets the
   same mark on the homepage and beside the story, and all three widgets in
   this column are chunked the same way. */
.n__whead { display: flex; align-items: center; min-height: 48px; padding: var(--sp-2) var(--sp-5);
            background: #0f57d6; border-radius: var(--radius-xs); }
.n__whead h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
               line-height: 1.4; letter-spacing: 0; margin: 0; color: #fff; }
/* ── Follow us ───────────────────────────────────────────────────────────
   Same heading, same hairlines, same bordered circle as the share buttons
   further up the page, so it reads as part of this sidebar rather than a
   plugin dropped into it. The platform colour is held back until hover:
   at rest four brand fills would be the loudest thing beside the story. */
.n__follow { list-style: none; margin: 0; padding: 0; display: grid; }
.n__follow li { border-bottom: 1px solid var(--border); }
.n__follow li:last-child { border-bottom: 0; }
.n__frow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: var(--sp-4);
           align-items: center; padding: var(--sp-3) 0;
           border-left: 3px solid transparent;
           transition: border-color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.n__frow:hover { border-left-color: var(--brand); padding-left: var(--sp-3); }
.n__fmark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
            border: 1px solid var(--border); color: var(--text-secondary);
            transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
                        border-color var(--t-fast) var(--ease); }
.n__frow:hover .n__fmark { color: #fff; background: var(--brand); border-color: var(--brand); }
.n__fmark .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.n__fbody { display: grid; gap: 1px; min-width: 0; }
.n__fname { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
            line-height: 1.5; color: var(--text-primary); }
.n__fat { font-size: var(--fs-xs); color: var(--text-secondary); }
.n__fcta { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary);
           white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.n__frow:hover .n__fcta { color: var(--brand); }
.n__f--fb { --brand: #1877f2; }
.n__f--tg { --brand: #229ed9; }
.n__f--yt { --brand: #ff0000; }
.n__f--tt { --brand: #010101; }
[data-theme="dark"] .n__f--tt { --brand: #f3f4f6; }
[data-theme="dark"] .n__frow:hover .n__f--tt .n__fmark,
[data-theme="dark"] .n__f--tt .n__fmark { color: var(--text-primary); }
[data-theme="dark"] .n__frow:hover .n__fmark { color: var(--background); }

/* phones: the sidebar sits under the story, where a four-row list reads as
   filler. Two columns of tiles say the same thing in half the height. */
@media (max-width: 699px) {
  .n__follow { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .n__follow li { border-bottom: 0; }
  .n__frow { grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-3);
             padding: var(--sp-3); border: 1px solid var(--border);
             border-radius: var(--radius-sm); border-left-width: 1px; }
  .n__frow:hover { padding-left: var(--sp-3); border-color: var(--brand); }
  .n__fat, .n__fcta { display: none; }
}

.n__wlist { list-style: none; margin: 0; padding: 0; display: grid; }
.n__wlist li { border-bottom: 1px solid var(--border); }
.n__wlist li:last-child { border-bottom: 0; }

/* Rows sit on the page, not in grey boxes: five tinted panels stacked down a
   column read as five buttons competing with the story. A hairline between
   them and a rail that appears on hover is enough, and it is the same
   hover the desk lists on the front page already use. */
.n__wrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-4);
           align-items: start; padding: var(--sp-4) 0; padding-left: 0;
           border-left: 3px solid transparent;
           transition: border-color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.n__wrow:hover { border-left-color: var(--wcol, var(--accent-trust)); padding-left: var(--sp-3); }

/* The rank rides the corner of the photograph on a dark disc — ink rather
   than the desk colour, so the numeral stays legible over any picture and
   the accent is left to do one job in this column. Room is left above the
   picture for it to sit half outside. */
.n__wthumb { position: relative; padding-top: 6px; padding-left: 6px; }
.n__wpic { aspect-ratio: 4 / 3; border-radius: var(--radius-xs); }
.n__wpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n__wnum { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center;
           width: 30px; height: 30px; border-radius: 50%;
           font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); line-height: 1;
           color: #fff; background: var(--surface-invert);
           box-shadow: 0 0 0 2px var(--background); }
[data-theme="dark"] .n__wnum { color: var(--text-primary); background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .n__wnum { color: var(--text-primary); background: var(--surface-2); }
}
/* Four lines, not the reference's three: at this width Myanmar sets about
   24 characters to a line, and at three every one of the five headlines was
   cut. Four lets the shorter ones finish. */
.n__wtitle { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
             line-height: 1.55; color: var(--text-primary);
             display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
             transition: color var(--t-fast) var(--ease); }
.n__wrow:hover .n__wtitle { color: var(--wcol, var(--accent-trust)); }
.n__wat { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); }

/* ── နောက်ဆုံးရသတင်း: a two-up card grid. The roll used to be a timeline of
   headlines; the pictures earn their place here because this block sits
   below the story on a phone, where a reader scrolling past needs something
   to catch on. Two columns at every width — one column would make the
   sidebar as tall as the article. ── */
.n__rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4);
            margin: 0; padding: 0; list-style: none; }
.n__rcard { display: grid; gap: var(--sp-2); min-width: 0; }
.n__rpic { aspect-ratio: 16 / 10; border-radius: var(--radius-xs); }

/* Two columns need width that a 320px desktop sidebar does not have: measured
   there, a card is 152px, every one of the six headlines overflows its clamp
   and one needs ten lines — Myanmar sets about half the characters per line
   that Latin does at the same size. So the grid keeps its cards but stacks
   them side-on while the column is narrow, and opens into the two-up picture
   grid from 1024px down, where the sidebar runs the full width of the page. */
@media (min-width: 1120px) {
  .n__rgrid { grid-template-columns: 1fr; gap: 0; }
  .n__rgrid li { border-bottom: 1px solid var(--border); }
  .n__rgrid li:last-child { border-bottom: 0; }
  .n__rcard { grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-4);
              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); }
  .n__rcard:hover { border-left-color: var(--accent-trust); padding-left: var(--sp-3); }
  .n__rpic { grid-row: span 2; aspect-ratio: 4 / 3; }
  .n__rtitle { -webkit-line-clamp: 3; align-self: end; }
  .n__rat { align-self: start; }
}
.n__rpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n__rcard:hover .pic__inner { transform: scale(1.05); }
.n__rtitle { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
             line-height: 1.55; color: var(--text-primary);
             display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
             transition: color var(--t-fast) var(--ease); }
.n__rcard:hover .n__rtitle { color: var(--wcol, var(--accent-trust)); }
.n__rat { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ── the latest roll reads as a timeline: a hairline down the column, a dot
   per entry, the time above the headline it belongs to ── */
.n__wlist--text { position: relative; padding-left: var(--sp-5); }
.n__wlist--text::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px;
                          width: 1px; background: var(--border); }
.n__wlist--text li { border-bottom: 0; }
.n__wlist--text .n__wrow { grid-template-columns: minmax(0, 1fr); position: relative;
                           padding: var(--sp-4) 0; border-left: 0; }
.n__wlist--text .n__wrow::before { content: ""; position: absolute; left: calc(var(--sp-5) * -1 + 1px);
                                   top: calc(var(--sp-4) + 8px); width: 7px; height: 7px; border-radius: 50%;
                                   background: var(--background); border: 2px solid var(--wcol, var(--accent-trust));
                                   transition: transform var(--t-fast) var(--ease); }
.n__wlist--text .n__wrow:hover::before { transform: scale(1.35); }
.n__wlist--text .n__wrow:hover { padding-left: 0; }
.n__wago { display: block; margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 700;
           letter-spacing: 0; color: var(--wcol, var(--accent-trust)); }

/* 7 ── ဆက်လက်ဖတ်ရှုရန်: three cards across the foot of the page. Wide
   pictures here rather than the sidebar's side-on rows — this block has the
   full measure to work with, and it is the last thing a finished reader
   sees, so it is allowed to be the most picture-led thing on the page. */
/* Inside the article column, not below the page: measured at 1440 the story
   ended 477px above the foot of the sidebar, and that hole was the first
   thing a reader met after the share row. Three across in a 1008px column
   leaves each card ~318px — wider than the sidebar rows, so a Myanmar
   headline runs three lines here rather than five. */
.n__more { margin-top: var(--sp-10); }
.n__mgrid { display: grid; gap: var(--sp-6) var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 560px) { .n__mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .n__mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mc { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; }
.mc__pic { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
.mc__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc:hover .pic__inner { transform: scale(1.04); }
.mc__cat { font-size: var(--fs-xs); font-weight: 700; color: var(--desk, var(--text-secondary)); }
.mc[data-rail="trust"] { --desk: var(--accent-trust); }
.mc[data-rail="life"] { --desk: var(--accent-life); }
.mc[data-rail="premium"] { --desk: var(--accent-premium); }
.mc[data-rail="ink"] { --desk: color-mix(in srgb, var(--text-primary) 88%, var(--background)); }
/* 700, matching the two sidebar lists: every headline that is a link on this
   page now carries the same weight, and the dates under them stay at 400. */
.mc__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
             line-height: var(--lh-title); color: var(--text-primary);
             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
             transition: color var(--t-fast) var(--ease); }
.mc:hover .mc__title { color: var(--accent-trust); }
.mc__at { font-size: var(--fs-xs); color: var(--text-secondary); }

/* 27 ── breadcrumb ─────────────────────────────────────────────────────────
   The trail was in the JSON-LD from the start but never on the page, so a
   reader landing from search had no way to see which desk they were in. It
   sits above the headline in the same measure as everything else, kept quiet
   enough that the headline is still the first thing the eye lands on. */
.n__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
             margin: 0 0 var(--sp-3); font-size: var(--fs-sm);
             color: var(--ink-3, #565c66); line-height: 1.6; }
.n__crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
               transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.n__crumbs a:hover { color: var(--accent-trust); border-bottom-color: currentColor; }
.n__crumb-sep { color: var(--border-strong, #b9bec7); }

/* the trail is navigation, not reading matter: at phone width it would push
   the headline down the fold, so it keeps one line and clips instead. */
@media (max-width: 559px) {
  .n__crumbs { flex-wrap: nowrap; overflow: hidden; }
  .n__crumbs a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── article header ───────────────────────────────────────────────────────
   2026-08-23, approved as option B.

   The gap between the desk label and the featured image was not a missing
   decision — line 359 already asks for `margin: var(--sp-5) 0 0`, and it
   never reached the element. Elementor's frontend.min.css carries

     .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }

   at specificity (0,4,1) against .n__fig's (0,1,0), so the figure has been
   sitting 1px under the label this whole time. The selector below ties that
   specificity and wins on source order, which is why it needs no
   !important. If Elementor ever drops that reset, line 359 takes over again
   and nothing here breaks.

   The title's clamp keeps its 20px floor and only lowers the ceiling,
   36px -> 30px: this headline goes from 4 lines/219px to 3 lines/137px on
   desktop and is untouched below 790px, where the clamp was already
   scaling.

   The label's rail is `currentColor`, so it picks up each desk's own --rail
   without listing a single colour here.
   ======================================================================== */

.n__title { font-size: clamp(1.25rem, 0.8875rem + 2vw, 1.875rem); }

.elementor .elementor-widget .n__card figure.n__fig { margin-top: var(--sp-6); }

.n__fig .pic { border-radius: var(--radius-sm); }

.n__desk { padding-left: 10px; border-left: 3px solid currentColor; }

/* ── audit fixes ──────────────────────────────────────────────────────────
   2026-08-23. Swept 320 to 1920, both themes, with touch emulation.

   1. Body images sit on the text baseline, so two images in one paragraph
      were separated by an accidental 11px of descender space — spacing
      nobody chose, and it moves with line-height. `vertical-align: middle`
      removes it; a 6px block margin puts a deliberate 12px in its place.
      They stay INLINE on purpose: a scan of 60 posts found 39 paragraphs
      that mix text and an image, and `display: block` would break every one
      of them. Measured on such a paragraph: +2px height, text still
      flowing. Vertical margins work here because an img is a *replaced*
      inline element. The radius matches the featured image.

   2. The related-posts heading was 18px over 16.9px card titles — 1.1px of
      hierarchy, which reads as no hierarchy. The sidebar heading had the
      same problem against its 16px rows.

   3. The breadcrumb link (22px tall) and the desk label (25px) were under
      the 44px touch target. Both are widened with a transparent ::after
      instead of padding, so the tap area becomes 44/47px while the visible
      row height does not move by a single pixel. The horizontal inset is 0,
      so neighbouring breadcrumb links cannot swallow each other's taps.
   ======================================================================== */

.n__body p img {
  vertical-align: middle;
  margin-block: 6px;
  border-radius: var(--radius-sm);
}

.n__more h2 { font-size: 22px; }
.n__side h2 { font-size: 20px; }

@media (pointer: coarse) {

  .n__crumbs a,
  .n__desk { position: relative; }

  .n__crumbs a::after,
  .n__desk::after {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: 0;
    right: 0;
  }
}

/* ── breadcrumb colour ────────────────────────────────────────────────────
   2026-08-23. `--ink-3` is defined nowhere in this theme, so
   `.n__crumbs { color: var(--ink-3, #565c66) }` always fell through to the
   hardcoded grey — a LIGHT-theme grey, pinned in place. On the dark page
   that is #565c66 on #0b0c0e: **2.91:1**, well under the 4.5 a 13px link
   needs. Light was fine at 6.73 only by coincidence, because #565c66 is
   what --text-secondary happens to be there.

   Using the token instead leaves light unchanged and takes dark to 8.46.
   Anything still reaching for --ink-2/--ink-3/--muted in this file is
   falling back the same way; they are all undefined.

   The separator is aria-hidden and decorative, so it is exempt from the
   contrast rule, but at 2.23 it was invisible rather than subtle. It now
   inherits the link colour and steps back with opacity instead of with a
   border token that was never meant to carry text.
   ======================================================================== */

.n__crumbs { color: var(--text-secondary); }

.n__crumbs .n__crumb-sep { color: inherit; opacity: .55; }

/* ── one category label, not two ──────────────────────────────────────────
   2026-08-23. The desk appeared twice on every article: once in the
   breadcrumb and again as the standalone .n__desk badge under the headline.

   The two are merged rather than one simply deleted, because each carried
   something the other did not. The breadcrumb is the visible form of the
   BreadcrumbList already in the page's JSON-LD, and its "home" link is the
   trail out. The badge carried the desk colour — the only per-desk accent
   on an article. So the badge is switched off and its colour moves onto the
   breadcrumb's own category link, which is the same link to the same term.

   niyo_rail_var() maps the four rail families to real tokens — ink to
   --text-primary, and trust / life / premium to their accents — so every
   desk resolves to something defined and theme-aware. Measured on the page
   background: light 5.06 / 5.37 / 6.99 / ~18, dark 7.81 / 9.48 / 11.74 /
   17.78. All four clear 4.5 at 13px in both themes.

   The 44px coarse-pointer target added earlier already covers this link, so
   the tap area does not shrink when the badge goes.
   ======================================================================== */

.n__desk { display: none; }

.n__crumbs a:last-child { color: var(--rail, var(--accent-trust)); font-weight: 700; }