.elementor-kit-6985{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6985 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ================= niyo-fonts.css ================= */
/* ==========================================================================
   FONTS
   Pyidaungsu is not on any public CDN, so it is self-hosted here. Readers who
   already have the family installed get the real thing through local(); the
   rest get the subsetted woff2. Inter, Noto Sans Myanmar and Padauk come from
   Google Fonts, exactly as the original build requested them.

   Both weights are now real. Pyidaungsu 2.5.3 Regular and Bold are self-hosted
   as woff2; the 700 face carries its own outlines, so nothing is synthesised
   and bold Myanmar body copy finally has the wider, heavier strokes the
   typeface actually draws.
   ========================================================================== */
@font-face {
  font-family: "Pyidaungsu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Pyidaungsu"),
       url("/wp-content/themes/hello-elementor-child/assets/fonts/pyidaungsu-regular.woff2") format("woff2");
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "Pyidaungsu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Pyidaungsu Bold"), local("Pyidaungsu-Bold"),
       url("/wp-content/themes/hello-elementor-child/assets/fonts/pyidaungsu-bold.woff2") format("woff2");
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200B-200D, U+25CC;
}


/* ================= niyo-tokens.css ================= */
/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --font-body: "Inter", "Pyidaungsu", "Noto Sans Myanmar", "Padauk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-lg:  1rem;
  --fs-xl:  1.125rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  /* Myanmar script needs taller leading and zero tracking */
  --lh-tight: 1.4;
  --lh-mm: 1.75;
  --tracking-caps: 0.08em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 56px; --sp-16: 72px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  --shell: 1440px;
  --gutter: 16px;

  /* Row heights — mobile first. Body padding always equals --h-header. */
  --h-breaking: 44px;
  --h-masthead: 56px;
  --h-nav: 0px;
  --h-chiprail: 40px;
  --h-header: calc(var(--h-breaking) + var(--h-masthead) + var(--h-chiprail));

  --t-fast: 150ms;
  --t-normal: 250ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layers. Inside the header: masthead 3 > navbar 2 > breaking 1, so the
     language menu can never be painted under the navigation row. */
  --z-header: 100;
  --z-drawer: 200;
  --z-search: 300;
  --z-skip: 400;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --background: #ffffff;
  --surface: #f6f7f8;
  --surface-2: #ecedf0;
  --surface-invert: #101114;
  --text-primary: #101114;
  --text-secondary: #565c66;
  --text-invert: #ffffff;
  --border: #dcdfe4;
  --border-strong: #b9bec7;

  --accent-breaking: #c8102e;
  --accent-trust:    #0a4fcc;
  --accent-life:     #0f7a4d;
  --accent-premium:  #8a6a12;
  --gold-line:       #c9a227;

  --focus: #0a4fcc;
  --shadow-panel: 0 18px 40px -18px rgb(16 17 20 / 0.28), 0 2px 6px rgb(16 17 20 / 0.06);
  --skeleton: linear-gradient(90deg, #ecedf0 25%, #f6f7f8 50%, #ecedf0 75%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: #0b0c0e;
  --surface: #141619;
  --surface-2: #1e2126;
  --surface-invert: #ffffff;
  --text-primary: #f3f4f6;
  --text-secondary: #a4abb6;
  --text-invert: #0b0c0e;
  --border: #2b2f36;
  --border-strong: #454b55;

  --accent-breaking: #ff5468;
  --accent-trust:    #6ba4ff;
  --accent-life:     #3fcb92;
  --accent-premium:  #e6c65c;
  --gold-line:       #e6c65c;

  --focus: #6ba4ff;
  --shadow-panel: 0 18px 40px -18px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.4);
  --skeleton: linear-gradient(90deg, #1e2126 25%, #262a31 50%, #1e2126 75%);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --background: #0b0c0e;
    --surface: #141619;
    --surface-2: #1e2126;
    --surface-invert: #ffffff;
    --text-primary: #f3f4f6;
    --text-secondary: #a4abb6;
    --text-invert: #0b0c0e;
    --border: #2b2f36;
    --border-strong: #454b55;
    --accent-breaking: #ff5468;
    --accent-trust:    #6ba4ff;
    --accent-life:     #3fcb92;
    --accent-premium:  #e6c65c;
    --gold-line:       #e6c65c;
    --focus: #6ba4ff;
    --shadow-panel: 0 18px 40px -18px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.4);
    --skeleton: linear-gradient(90deg, #1e2126 25%, #262a31 50%, #1e2126 75%);
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* WCAG 2.4.11 — keeps focused elements clear of the fixed header */
  scroll-padding-top: calc(var(--h-header) + 8px);
}

/* Flex column so the footer sits at the bottom of short pages, and
   padding-top reserves the fixed header's height so nothing shifts. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--h-header);
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  letter-spacing: 0;              /* never letter-space Myanmar */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
body.is-locked { overflow: hidden; }

h1, h2 { margin: 0; line-height: var(--lh-tight); font-weight: 700; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }

button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }

kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-2xs);
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface);
  line-height: 1;
}

.sprite { display: none; }

.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 17px; height: 17px; }
.icon--xs { width: 15px; height: 15px; }
/* Social glyphs are solid paths */
.social .icon { fill: currentColor; stroke: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--sp-2); left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent-breaking);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Shared wordmark, used in the masthead, the drawer and the colophon */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  position: relative;
  flex: none;
  font-size: var(--fs-2xl);
  line-height: 1;
  white-space: nowrap;
}
.logo__mark {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.logo__word {
  font-family: "Inter", sans-serif;
  font-size: 0.52em;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.logo__rule {
  position: absolute;
  left: 0; bottom: -7px;
  width: 34px; height: 3px;
  background: var(--gold-line);
}



/* ================= niyo-shell.css ================= */
/* ==========================================================================
   3. HEADER SHELL
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: var(--background);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}

.breaking__inner,
.masthead__inner,
.navbar__inner,
.explorer__inner,
.chiprail__list,
.page__inner,
.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   4. BREAKING NEWS
   ========================================================================== */
.breaking {
  position: relative;
  z-index: 1;
  height: var(--h-breaking);
  background: var(--surface-invert);
  color: var(--text-invert);
  overflow: hidden;
}
.breaking__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.breaking__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-xs);
  background: var(--accent-breaking);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
[data-theme="dark"] .breaking__badge { color: #180209; }

.breaking__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

.breaking__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
/* Two identical groups → translateX(-50%) lands exactly on the seam */
.breaking__track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.breaking__group {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
}
.breaking:hover .breaking__track,
.breaking:focus-within .breaking__track,
.breaking.is-paused .breaking__track,
.header[data-stuck="true"] .breaking__track { animation-play-state: paused; }

@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.breaking__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  white-space: nowrap;
}
/* State travels with the headline it belongs to */
.breaking__state {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-xs);
  line-height: 1.5;
}
.breaking__state[data-state="urgent"]  { background: var(--accent-breaking); color: #fff; }
.breaking__state[data-state="live"]    { background: var(--accent-breaking); color: #fff; }
.breaking__state[data-state="updated"] { background: var(--accent-trust); color: #fff; }
.breaking__state[data-state="breaking"] { display: none; }
[data-theme="dark"] .breaking__state { color: #10020a; }

.breaking__time {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 0.66);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .breaking__time { color: rgb(11 12 14 / 0.66); }

.breaking__controls { flex: none; display: flex; align-items: center; gap: var(--sp-1); }

/* Always available — WCAG 2.2.2 Pause, Stop, Hide */
.breaking__ctrl {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: inherit;
  opacity: 0.75;
}
.breaking__ctrl:hover { opacity: 1; background: rgb(255 255 255 / 0.14); }
[data-theme="dark"] .breaking__ctrl:hover { background: rgb(0 0 0 / 0.14); }

.breaking__ctrl-glyph {
  width: 10px; height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
#breaking-toggle[aria-pressed="true"] .breaking__ctrl-glyph {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

.breaking__more {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0.85;
}
.breaking__more:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   5. MASTHEAD
   ========================================================================== */
.masthead {
  position: relative;
  z-index: 3;                 /* above .navbar — keeps the dropdown on top */
  height: var(--h-masthead);
}
.masthead__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.masthead__mobile { display: flex; align-items: center; gap: var(--sp-1); }

.utility {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.utility__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.utility__btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface); }
.utility__kbd { margin-left: var(--sp-1); }

.iconbtn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: background-color var(--t-fast) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn--bordered { width: 38px; height: 38px; border: 1px solid var(--border); }
.iconbtn--bordered:hover { border-color: var(--border-strong); }

/* ---------- Language menus (header drops down, footer pops up) ---------- */
.lang { position: relative; }
.lang__caret { transition: transform var(--t-fast) var(--ease); }
#lang-btn[aria-expanded="true"] .lang__caret,
#footer-lang-btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }
#lang-btn[aria-expanded="true"] { color: var(--text-primary); border-color: var(--border-strong); }

.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--sp-2);
  background: var(--background);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  animation: pop var(--t-fast) var(--ease);
}
.lang__menu[hidden] { display: none; }
@keyframes pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* In the black cap bar the menu opens upward and reverts to page colours */
.cap .lang__menu {
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 0;
  animation-name: pop-up;
}
@keyframes pop-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 42px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  text-align: left;
}
.lang__item:hover { background: var(--surface-2); }
.lang__name { font-weight: 600; white-space: nowrap; }
.lang__sub  { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.lang__tag {
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-premium) 18%, transparent);
  color: var(--accent-premium);
  white-space: nowrap;
}
.lang__check { margin-left: auto; color: var(--accent-trust); opacity: 0; }
.lang__item[aria-checked="true"] .lang__check { opacity: 1; }

/* ---------- Social ---------- */
.social { display: flex; align-items: center; gap: 2px; }
.social a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.social a:hover { color: var(--text-primary); background: var(--surface-2); }

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
.navbar {
  display: none;
  position: relative;
  z-index: 2;
  height: var(--h-nav);
  border-top: 1px solid var(--border);
}
.navbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.navbar__list {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;          /* safety valve, never normally triggered */
  scrollbar-width: none;
}
.navbar__list::-webkit-scrollbar { display: none; }
/* Set by the fit routine when a desk cannot be shown at this width.
   It is never lost — it stays in the explorer, the chip rail and the drawer. */
.navbar__list li[hidden] { display: none; }

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
/* Section rail encodes the desk, it is not decoration */
.navbar__link::after {
  content: "";
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 4px;
  height: 3px;
  background: var(--rail, var(--text-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal) var(--ease);
}
.navbar__link:hover::after,
.navbar__link[aria-current="page"]::after { transform: scaleX(1); }
.navbar__link[aria-current="page"] { color: var(--rail, var(--text-primary)); }

.navbar__explore {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 34px;
  margin-left: var(--sp-3);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.navbar__explore:hover { background: var(--surface-2); border-color: var(--border-strong); }
.navbar__explore[aria-expanded="true"] {
  background: var(--surface-invert);
  color: var(--text-invert);
  border-color: var(--surface-invert);
}
.navbar__caret { transition: transform var(--t-normal) var(--ease); }
.navbar__explore[aria-expanded="true"] .navbar__caret { transform: rotate(180deg); }

.navbar__logo,
.navbar__compact { display: none; }
.navbar__logo {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  flex: none;
}
.navbar__compact { gap: var(--sp-1); }

/* ==========================================================================
   7. STICKY COMPACT
   visibility:hidden also removes the collapsed rows from the tab order.
   ========================================================================== */
.breaking, .masthead {
  transition: height var(--t-normal) var(--ease), opacity var(--t-fast) var(--ease);
}
.header[data-stuck="true"] .breaking {
  height: 0; opacity: 0; visibility: hidden; overflow: hidden;
}

@media (min-width: 1024px) {
  .header[data-stuck="true"] .masthead {
    height: 0; opacity: 0; visibility: hidden; overflow: hidden;
  }
  .header[data-stuck="true"] .navbar { border-top-color: transparent; }
  .header[data-stuck="true"] .navbar__inner { justify-content: space-between; }
  .header[data-stuck="true"] .navbar__logo,
  .header[data-stuck="true"] .navbar__compact { display: flex; align-items: center; }
  .header[data-stuck="true"] .navbar__explore { margin-left: auto; }
}

/* ==========================================================================
   8. CATEGORY EXPLORER
   ========================================================================== */
.explorer {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--background);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  animation: drop var(--t-normal) var(--ease);
}
.explorer[hidden] { display: none; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explorer__inner { padding-block: var(--sp-6) var(--sp-5); }

.explorer__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}
.explorer__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }

.explorer__col { border-top: 3px solid var(--rail); padding-top: var(--sp-3); }
.explorer__col-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail);
  margin-bottom: var(--sp-3);
}

.explorer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  font-size: var(--fs-md);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.explorer__link::before {
  content: "";
  width: 0; height: 1px;
  background: var(--rail);
  transition: width var(--t-fast) var(--ease);
}
.explorer__link:hover { color: var(--rail); padding-left: var(--sp-2); background: var(--surface); }
.explorer__link:hover::before { width: 10px; }

.explorer__hint {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.explorer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgb(8 9 11 / 0.4);
  animation: fade var(--t-fast) var(--ease);
}
.explorer-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   9. CHIP RAIL
   ========================================================================== */
.chiprail {
  height: var(--h-chiprail);
  border-top: 1px solid var(--border);
  background: var(--background);
}
.chiprail__list {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.chiprail__list::-webkit-scrollbar { display: none; }

.chiprail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
}
.chiprail__link::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rail, var(--text-secondary));
}
.chiprail__link[aria-current="page"] {
  background: var(--surface-invert);
  color: var(--text-invert);
  border-color: var(--surface-invert);
}

/* ==========================================================================
   10. SEARCH
   ========================================================================== */
.search { position: fixed; inset: 0; z-index: var(--z-search); }
.search[hidden] { display: none; }

.search__backdrop {
  position: absolute; inset: 0;
  background: rgb(8 9 11 / 0.55);
  animation: fade var(--t-fast) var(--ease);
}

.search__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background);
  animation: slideup var(--t-normal) var(--ease);
}
@keyframes slideup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.search__icon { color: var(--text-secondary); }
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  font-size: var(--fs-xl);
  font-weight: 500;
  outline: none;
}
.search__input::placeholder { color: var(--text-secondary); font-weight: 400; }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.search__close {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 36px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.search__close:hover { background: var(--surface-2); color: var(--text-primary); }
.search__close kbd { display: none; }

.search__filters { flex: none; border-bottom: 1px solid var(--border); overflow: hidden; }
.search__filters-track {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.search__filters-track::-webkit-scrollbar { display: none; }

.filter {
  height: 30px;
  flex: none;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.filter:hover { border-color: var(--border-strong); color: var(--text-primary); }
.filter[aria-pressed="true"] {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
  color: var(--text-invert);
}

.search__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5) var(--gutter) var(--sp-10);
  -webkit-overflow-scrolling: touch;
}

.search__block { margin-bottom: var(--sp-6); }
.search__block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.search__block-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.search__textbtn { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-trust); }
.search__textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.chip__rank {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent-premium);
  font-variant-numeric: tabular-nums;
}

.results { display: grid; gap: 2px; }
.result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease);
}
.result:hover { background: var(--surface); }
.result__meta {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail, var(--text-secondary));
}
.result__title { display: block; font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-mm); }
.result__title mark {
  background: color-mix(in srgb, var(--accent-premium) 26%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.result__time { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; padding-top: 2px; }
.search__count { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--sp-3); }

.skel { padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.skel__line {
  display: block;
  height: 10px;
  border-radius: var(--radius-xs);
  background: var(--skeleton);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skel__line--sm { width: 22%; }
.skel__line--lg { width: 82%; height: 14px; }
.skel__line--md { width: 46%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.search__message {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
}
.search__message[hidden] { display: none; }
.search__message-icon {
  width: 40px; height: 40px;
  fill: none; stroke: var(--text-secondary);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.search__message--error .search__message-icon { stroke: var(--accent-breaking); }
.search__message-title { font-size: var(--fs-xl); }
.search__message-text { font-size: var(--fs-md); color: var(--text-secondary); max-width: 42ch; }

.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  border: 1px solid transparent;
  transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.btn--solid { background: var(--surface-invert); color: var(--text-invert); }
.btn--solid:hover { opacity: 0.88; }
.btn--ghost { border-color: var(--border); color: var(--text-primary); }
.btn--ghost:hover { background: var(--surface-2); }

/* ==========================================================================
   11. DRAWER
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer[hidden] { display: none; }

.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgb(8 9 11 / 0.55);
  animation: fade var(--t-fast) var(--ease);
}
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-10);
  background: var(--background);
  animation: slidein var(--t-slow) var(--ease);
}
@keyframes slidein {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.logo--drawer { font-size: 1.375rem; }

.drawer__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  text-align: left;
}

/* ---------- Drawer navigation --------------------------------------------
   Twelve identical full-width rows made the drawer a long scroll of equal
   choices, and the rail colour only ever showed on a 20px icon. The desks
   that sit in the top bar are a tile grid instead: the same twelve fit in
   four rows rather than twelve, and the colour has room to read.

   What is left over keeps its column groups, but a group's desks are chips
   rather than a stacked list — six of them take two rows instead of six. A
   group left holding a single desk is not a group at all; it joins the grid
   as its own tile, in niyo_render_drawer_accordion() and its JS twin.
   ------------------------------------------------------------------------ */
.drawer__title--gap { margin-top: var(--sp-8); }

.drawer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.drawer__tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  min-height: 88px;
  padding: var(--sp-3) 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.drawer__tile .icon { width: 22px; height: 22px; color: var(--rail); }
.drawer__tile span { font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; }
.drawer__tile:hover { border-color: var(--rail); background: var(--background); }
/* Below 360 the gutter drops to 12px, and three columns would leave 79px a
   tile — enough to wrap every Myanmar label onto two lines. */
@media (max-width: 359px) {
  .drawer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.drawer__groups { display: grid; }
.drawer__groups .drawer__group { border-top: 1px solid var(--border); border-bottom: 0; }
.drawer__groups .drawer__group:last-child { border-bottom: 1px solid var(--border); }
.drawer__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: left;
}
.drawer__trigger > .icon:first-child { color: var(--rail); flex: none; }
.drawer__trigger > span { flex: 1; }
/* The count says what the arrow is hiding, so the reader can decide whether
   the tap is worth it. */
.drawer__n {
  font-style: normal;
  min-width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-secondary);
}
.drawer__caret { color: var(--text-secondary); transition: transform var(--t-normal) var(--ease); }
.drawer__trigger[aria-expanded="true"] .drawer__caret { transform: rotate(180deg); }

.drawer__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-4); }
.drawer__chips[hidden] { display: none; }
.drawer__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.drawer__chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rail);
  flex: none;
}
.drawer__chip:hover { color: var(--text-primary); border-color: var(--rail); }

.drawer__section { margin-top: var(--sp-6); }
.drawer__section--first { margin-top: 0; margin-bottom: var(--sp-2); }
.drawer__title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.drawer__langs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.langpill {
  min-height: 42px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.langpill[aria-checked="true"] {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
  color: var(--text-invert);
}
.drawer__account { display: grid; gap: var(--sp-2); }
.social--drawer a { width: 42px; height: 42px; border: 1px solid var(--border); }

/* ==========================================================================


/* ================= niyo-content.css ================= */
   12. HOMEPAGE
   A typographic front page.

   The shell already downloads Padauk at 400 and 700 but never uses it —
   it sits last in --font-body, behind Pyidaungsu and Noto Sans Myanmar,
   so in practice no glyph ever resolves to it. Promoting it to a display
   role gives the Myanmar headlines a calligraphic texture the rest of the
   site does not have, at no extra network cost and without touching the
   font link. Latin still resolves to Inter, because Padauk's Latin is
   plain; only the Myanmar glyphs fall through to Padauk.

   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 → Padauk. Both are already downloaded. */
  --font-display: "Inter", "Padauk", "Noto Sans Myanmar", 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; }
.wire__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  min-width: 0;
}
.wire__meta {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: 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; }
.wire__headline {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: var(--lh-title);
}
.wire__row:hover .wire__headline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- 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 ----------
   Third pass: the lead is a contained picture card with its headline set
   on the image over a gradient — the same idea as the hero above, kept to
   its own rounded frame instead of breaking out to the viewport edge. The
   other four stories are a rail of small cards that scrolls sideways on a
   narrow screen, since swiping is the natural gesture there, and settles
   into a plain row once there is enough width to show all four at once.

   Phone/tablet: the rail scrolls horizontally, one card snapping into
   place at a time.
   1024px+: the rail becomes a static four-column row — nothing to scroll.
   ========================================================================= */
.local { display: grid; gap: var(--sp-6); }

.local__feature { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.local__frame { display: block; }
.local__pic { aspect-ratio: 16 / 9; border-radius: 0; }
.local__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;
}
.local__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: #fff;
}
.local__title { font-size: var(--t-xl); }
.local__feature:hover .local__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.local__feature:hover .pic__inner { transform: scale(1.03); }
.local__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: rgb(255 255 255 / 0.8); }
.local__meta b { font-weight: 600; color: #fff; }

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

.local__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 78%);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.local__rail::-webkit-scrollbar { display: none; }
.local__card { scroll-snap-align: start; min-width: 0; }
.local__card a { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.local__card-pic { aspect-ratio: 4 / 3; }
.local__card-title { font-size: var(--t-sm); min-width: 0; }
.local__card a:hover .local__card-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.local__card a:hover .pic__inner { transform: scale(1.05); }
.local__card-at { font-size: var(--fs-xs); color: var(--text-secondary); }


/* ---------- 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); }

/* ---------- 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); }

/* ---------- 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 ---------- */
.slot {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 96px;
  padding: var(--sp-5);
  border-block: 1px solid var(--border);
  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__size { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ==========================================================================
   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 */
}

/* ==========================================================================


/* ================= niyo-footer.css ================= */
   13. FOOTER
   ========================================================================== */
.footer {
  flex: none;
  background: var(--background);
  border-top: 3px solid var(--surface-invert);   /* heavy folio rule */
}

/* Small caps label on a hairline — the repeating structural device */
.rule-label {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Colophon ---------- */
.colophon {
  display: grid;
  gap: var(--sp-10);
  padding-block: var(--sp-10);
}
.logo--footer { font-size: var(--fs-3xl); }
.colophon__mission {
  margin-top: var(--sp-6);
  max-width: 40ch;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* ---------- Slim newsletter ---------- */
.signup__title { font-size: var(--fs-lg); }
.signup__note { margin-top: var(--sp-1); font-size: var(--fs-md); color: var(--text-secondary); }

.signup__form {
  display: flex;
  align-items: stretch;
  margin-top: var(--sp-4);
  border-bottom: 2px solid var(--text-primary);
  transition: border-color var(--t-fast) var(--ease);
}
.signup__form:focus-within { border-bottom-color: var(--gold-line); }

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--sp-2) 0 0;
  border: 0;
  background: none;
  font-size: var(--fs-md);
  outline: none;
}
.signup__input::placeholder { color: var(--text-secondary); }
.signup__input[aria-invalid="true"] { color: var(--accent-breaking); }

.signup__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: 0 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.signup__submit:hover { color: var(--accent-premium); }
.signup__submit[data-busy="true"] { opacity: 0.55; pointer-events: none; }

.signup__status {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
}
.signup__status[data-state="loading"],
.signup__status[data-state="success"],
.signup__status[data-state="error"] { display: flex; }
.signup__status[data-state="loading"] { color: var(--text-secondary); }
.signup__status[data-state="success"] { color: var(--accent-life); }
.signup__status[data-state="error"]   { color: var(--accent-breaking); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Index: dense editorial columns ---------- */
.index { border-top: 1px solid var(--border); }
.index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

.index__col { min-width: 0; }
.index__title {
  padding-top: var(--sp-2);
  border-top: 2px solid var(--rail);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail);
}
.index__list { display: grid; gap: 0; }
.index__link {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}
.index__link:hover { color: var(--rail); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Imprint ---------- */
.imprint { border-top: 1px solid var(--border); }
.imprint__grid {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-8);
}

.imprint__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.imprint__links a {
  font-size: var(--fs-md);
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.imprint__links a:hover { color: var(--accent-trust); text-decoration: underline; text-underline-offset: 4px; }

.social--footer { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.social--footer a { width: 40px; height: 40px; }

/* ---------- Black cap ---------- */
.cap {
  background: var(--surface-invert);
  color: var(--text-invert);
}
.cap__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  min-height: 56px;
  padding-block: var(--sp-3);
}

.cap__copy {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: color-mix(in srgb, currentColor 68%, transparent);
}
.cap__wordmark {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: -0.02em;
  color: var(--text-invert);
}

.cap__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.cap__legal a {
  font-size: var(--fs-xs);
  color: color-mix(in srgb, currentColor 72%, transparent);
  transition: color var(--t-fast) var(--ease);
}
.cap__legal a:hover { color: var(--text-invert); text-decoration: underline; text-underline-offset: 3px; }

.cap__prefs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-left: auto; }

.capbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: color-mix(in srgb, currentColor 76%, transparent);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.capbtn:hover { color: var(--text-invert); background: color-mix(in srgb, currentColor 12%, transparent); }
.capbtn--top { border: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
.capbtn--top:hover { border-color: var(--gold-line); color: var(--gold-line); }

/* ==========================================================================
   14. BREAKPOINTS
   ========================================================================== */

/* ---------- Tablet 768–1023 ---------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; --h-masthead: 64px; }

  .breaking__more { display: inline-flex; }
  .logo { font-size: 1.75rem; }

  .search__panel {
    height: auto;
    max-height: min(78vh, 680px);
    width: min(720px, calc(100% - 48px));
    margin: 8vh auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
  }
  .search__close kbd { display: inline-block; }
  .drawer__panel { padding-inline: var(--sp-6); }

  .colophon {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: start;
    gap: var(--sp-12);
    padding-block: var(--sp-12);
  }
  .index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .imprint__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* ---------- Desktop 1024+ ---------- */
@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --h-masthead: 80px;
    --h-nav: 48px;
    --h-chiprail: 0px;
    --h-header: calc(var(--h-breaking) + var(--h-masthead) + var(--h-nav));
  }
  .masthead__mobile { display: none; }
  .utility { display: flex; }
  .navbar { display: block; }
  .chiprail { display: none; }
  .logo { font-size: var(--fs-3xl); }
  .breaking__item { font-size: var(--fs-lg); }

  /* Five columns divided by hairline gutters, like a printed index */
  .index__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .index__col { padding-inline: var(--sp-5); border-left: 1px solid var(--border); }
  .index__col:first-child { padding-left: 0; border-left: 0; }
  .index__col:last-child { padding-right: 0; }

  .colophon { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}

/* 1024–1279: Myanmar labels are wide, so tighten before anything overflows */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar__link { padding-inline: var(--sp-2); font-size: var(--fs-sm); }
  .navbar__link::after { left: var(--sp-2); right: var(--sp-2); }
  .navbar__explore { margin-left: var(--sp-2); }
  .social__extra { display: none; }
  .utility__kbd { display: none; }
  .logo { font-size: var(--fs-2xl); }
  .logo--footer { font-size: var(--fs-3xl); }   /* footer keeps full size */
}

/* ---------- Large desktop 1440+ ---------- */
@media (min-width: 1440px) {
  :root { --gutter: 40px; }
  .navbar__list { gap: var(--sp-1); }
  .navbar__link { padding-inline: var(--sp-4); }
  .colophon { padding-block: var(--sp-16); }
}

/* ---------- Small mobile ≤359 ---------- */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .logo { font-size: 1.375rem; }
  .logo__word { display: none; }
  .logo--footer { font-size: var(--fs-2xl); }
  .logo--footer .logo__word { display: inline; }
  .iconbtn { width: 36px; }
  .breaking__inner { gap: var(--sp-2); }
  .index__grid { grid-template-columns: 1fr; }
  .cap__prefs { margin-left: 0; }
}


/* ---------- Homepage breakpoints ----------
   Kept beside the block they belong to so the homepage can be lifted into
   a WordPress template on its own. Everything is one column by default and
   gains columns as width allows; nothing scrolls sideways, and every grid
   divides into columns of equal width at each step. */

/* Phone landscape / small tablet */
@media (min-width: 600px) {
  .hero__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wire { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
  .wire > .wire__row:nth-child(2) { border-top: 0; }
  .world { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .local__rail { grid-auto-columns: 45%; }
  .desks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}

/* Tablet */
@media (min-width: 768px) {
  .band__inner { padding-block: var(--sp-12); }
  .hero__copy { padding-block: var(--sp-8) var(--sp-10); }
  .hero__links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
  .hero__link-title { font-size: var(--t-md); }
  .wire__link { flex-direction: row; align-items: baseline; gap: var(--sp-5); }
  .wire__meta { width: 8.5rem; }
  .wire__headline { font-size: var(--t-md); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .local__card-title { font-size: var(--t-md); }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero__pic { aspect-ratio: 21 / 9; }
  .hero__headline { max-width: 30ch; }
  .hero__link-pic { width: 4.5rem; }
  .hero__links { gap: var(--sp-8); }
  .wire { column-gap: var(--sp-10); }
  .wire__meta { width: 9.5rem; }
  .desks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
  /* Wide enough now to show all four at once — the rail stops scrolling
     and settles into a plain row. */
  .local__pic { aspect-ratio: 21 / 9; }
  .local__rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; }
  .gallery__pic { aspect-ratio: 3 / 4; }
  .world { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .world__title { font-size: var(--t-md); }
  .world__dek { -webkit-line-clamp: 3; }
  .reels { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
  .reel-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* Wide desktop */
@media (min-width: 1280px) {
  .hero__links { gap: var(--sp-10); }
  .slot { min-height: 120px; }
}

/* Very wide: more air rather than more columns */
@media (min-width: 1600px) {
  .band__inner { padding-block: var(--sp-16); }
}

/* Small phone */
@media (max-width: 359px) {
  .hero__links { gap: var(--sp-5); }
  .mark { gap: var(--sp-3); }
}

/* ==========================================================================
   15. REDUCED MOTION
   The ticker becomes a list the reader scrolls themselves.
   ========================================================================== */
@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;
  }
  .breaking__track { animation: none !important; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .breaking__viewport { -webkit-mask-image: none; mask-image: none; }
  .breaking__ctrl { display: none !important; }
  .skel__line { background: var(--surface-2); }
  .spinner { border-top-color: currentColor; opacity: 0.5; }
}

/* ==========================================================================
   16. PRINT
   ========================================================================== */
@media print {
  .header, .search, .drawer, .skip-link, .explorer-backdrop,
  .signup, .cap__prefs { display: none !important; }
  body { padding-top: 0; }
  .cap { background: none; color: #000; }
}


/* ================= niyo-article.css ================= */
/* ==========================================================================
   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. */
.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);
}


/* ================= niyo-wp.css ================= */
/* ==========================================================================
   WORDPRESS + ELEMENTOR BRIDGE

   Nothing in this file changes the NIYO design. It only reconciles the
   design's own assumptions — body is a flex column, the header is fixed and
   its height is reserved as body padding — with the extra wrappers
   WordPress, Hello Elementor and Elementor Pro put on the page.

   If a rule here is doing visual work rather than reconciling, it belongs in
   one of the four design stylesheets instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ADMIN BAR
   The design reserves --h-header as body padding and pins .header to top: 0.
   The admin bar sits above both, so both offsets move by its height.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
  body.admin-bar { padding-top: calc(var(--h-header) + 46px); }
  body.admin-bar .header { top: 46px; }
  html { scroll-padding-top: calc(var(--h-header) + 46px + 8px); }
}
@media screen and (min-width: 783px) {
  body.admin-bar { padding-top: calc(var(--h-header) + 32px); }
  body.admin-bar .header { top: 32px; }
  html { scroll-padding-top: calc(var(--h-header) + 32px + 8px); }
}

/* --------------------------------------------------------------------------
   2. ELEMENTOR LOCATION WRAPPERS
   Elementor wraps every Theme Builder template in a div. Those divs would
   become the flex children of body instead of .header / .page / .footer, so
   the footer would stop sitting at the bottom of short pages. display:contents
   passes them through and leaves the design's own flex rules in charge.
   -------------------------------------------------------------------------- */
.elementor-location-header,
.elementor-location-footer { display: contents; }

/* With the location wrappers passing through, Elementor's own container is
   what body sees as a flex item — not .header or .footer. The design gave both
   of those `flex: none`, and that rule now lands on an element that is no
   longer a flex item, so the intent is restored one level out. Without this the
   footer is allowed to shrink and its columns compress on short pages. */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* The content locations are the flex-growing middle, matching .page */
.elementor-location-single,
.elementor-location-archive,
main.site-main { flex: 1 0 auto; min-width: 0; }

/* --------------------------------------------------------------------------
   3. HELLO ELEMENTOR RESETS
   The parent theme ships a light layout of its own. The NIYO shell owns the
   measure and the rhythm, so the parent's container must not add a second
   max-width or a second gutter on top.
   -------------------------------------------------------------------------- */
.site-header,
.site-footer { display: none; }

.page-content > .entry-content,
.site-main > .page-content { max-width: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   4. ELEMENTOR CONTAINERS INSIDE THE NIYO SHELL
   Sections built in Elementor sit inside .band / .page__inner, which already
   carry the shell width and the gutter. A boxed Elementor container would
   apply both again and the columns would drift narrower than the design.
   -------------------------------------------------------------------------- */
.page__inner > .e-con,
.band__inner > .e-con,
.footer__inner > .e-con {
  --container-max-width: 100%;
  --container-default-padding-inline: 0px;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

/* Elementor widgets inherit the design's type, not the kit's defaults */
.niyo-widget > .elementor-widget-container { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   5. WORDPRESS CORE CLASSES INSIDE ARTICLE BODIES
   -------------------------------------------------------------------------- */
.alignleft  { float: left;  margin: 0 var(--sp-6) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. FEATURED IMAGES INSIDE THE DESIGN'S PICTURE FRAMES
   .pic is a gradient placeholder in the standalone build. With a real
   featured image behind it the gradient becomes the loading state and the
   photograph covers it, so the framing and aspect ratios stay identical.
   -------------------------------------------------------------------------- */
.pic > img,
.pic__inner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================================================
   17. ELEMENTOR - SPLIT HEADER / FOOTER ROWS

   New. Everything above is the design, unedited. These rules exist only
   because the header and the footer stopped being one opaque shortcode and
   became a row of Elementor containers, so that the masthead and the footer
   colophon can be edited in the builder.
   ========================================================================== */

/* A widget marked niyo-pass leaves no box behind: the markup its shortcode
   prints becomes a direct child of the container, so the design's own
   parent/child chains - .breaking height -> .breaking__inner height:100% -
   are never interrupted. */
.niyo-pass,
.niyo-pass > .elementor-widget-container,
.niyo-pass .elementor-shortcode { display: contents; }

/* Elementor puts 20px between every child of every container and lets rows
   wrap. The shell does neither. */
.niyo-tpl,
.niyo-tpl .e-con,
.niyo-tpl .e-con-inner { --gap: 0px; flex-wrap: nowrap; }

/* A boxed container is already the design's two-level row: the outer .e-con
   takes the height, the inner div takes the measure and the gutter. That is
   exactly .masthead + .masthead__inner, so the row maps onto it 1:1 and the
   builder can own it without a single change to the design's own CSS. */
.e-con.masthead > .e-con-inner {
  height: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
/* .footer__inner is the same two-level shape as .masthead: the outer .e-con
   carries nothing, the inner div carries the measure and the gutter. */
.niyo-fin > .e-con-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The colophon keeps its own grid. Elementor's .e-con.e-flex sets gap from a
   variable at two-class strength, so the gap - and only the gap - is stated
   again here; the column tracks and the padding are still §13's and §14's. */
.e-con.colophon { display: grid; gap: var(--sp-10); }
@media (min-width: 768px) { .e-con.colophon { gap: var(--sp-12); } }

/* .e-con = <section class="imprint"> · .e-con-inner = .footer__inner.imprint__grid */
.e-con.imprint > .e-con-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-8);
}
@media (min-width: 768px) {
  .e-con.imprint > .e-con-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* These two are plain blocks in the design. As Elementor containers they
   would become flex columns, and an inline-flex child - the footer wordmark,
   whose rule underlines exactly the width of the words - would stretch to the
   full column. Block flow is the faithful mapping. */
.e-con.colophon__identity,
.e-con.signup { display: block; }


/* The utility cluster is now a container of its own so the social links can
   be edited without opening the language menu and the theme toggle with them.
   Elementor gives every container width:100%, which would push the cluster off
   the row; and .e-con.e-flex forces display:flex, which would show the cluster
   on phones where the design hides it. */
.e-con.utility {
  display: none;
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}
@media (min-width: 1024px) { .e-con.utility { display: flex; } }


/* ==========================================================================
   18. BRAND MARK

   New. The design shipped a typographic wordmark only. The real NIYO mark is
   a pictorial logo at 560x433 - 1.29:1 - while the wordmark's slot is about
   5:1, so it cannot be dropped in as a replacement: at the wordmark's height
   it would be 39px wide and unreadable, and at the wordmark's width it would
   be 115px tall in a masthead that is 80px.

   It is set beside the wordmark instead, sized from the wordmark's own
   font-size, so every breakpoint the design already defines for .logo scales
   the mark with it and no new numbers are introduced.
   ========================================================================== */
.logo__img {
  flex: none;
  align-self: center;      /* .logo aligns to the baseline; a picture must not */
  height: 1.15em;
  width: auto;
  max-width: none;
}

/* The gold rule is anchored left at a fixed 34px and underlines the word
   NIYO. With the mark in front of it, it moves past the mark's width. */
.logo--brand .logo__rule { left: calc(1.487em + 0.32em); }

/* Colour mark on light, white cut on dark - the two files the brand ships.
   Both keep their srcset, so this is a display swap, not a content hack. */
.logo__img--dark { display: none; }
[data-theme='dark'] .logo__img--light { display: none; }
[data-theme='dark'] .logo__img--dark  { display: block; }
@media (prefers-color-scheme: dark) {
  [data-theme='system'] .logo__img--light { display: none; }
  [data-theme='system'] .logo__img--dark  { display: block; }
}


/* ==========================================================================
   19. ABOUT PAGE

   Third pass. The page had grown into a summary of the whole site: a short
   version of the six editorial principles, a short version of the six
   fact-check verdicts, and a full contact block with all three addresses -
   about 6,200 bytes that the Standards (§21) and Contact (§22) pages now own
   and say properly. Duplicated policy is worse than none, because the copies
   drift and the reader cannot tell which one is current.

   So the page answers one question - who is NIYO Media - and hands the other
   two off at the end as pointers rather than copies. What that removed here:
   .rules/.rule (principles), .fc/.fc__chip (verdicts) and .reach (contact),
   all of which were used by this page and nothing else. What it added:
   .handoff.

   .cover became .beats. The rename was not cosmetic - the homepage already
   ships .desk/.desks/.desk__head/.desk__list for its column widget, and the
   first draft of this section reused those names by accident, which pulled
   the category list into the homepage's three-column grid and squeezed it to
   208px on desktop.

   Still no new colour, font, radius or spacing value: every number resolves
   to a token the design already ships, which is why the page inverts with
   the theme without a single dark-mode rule.

   The band's inner box carries the shell measure and the gutter, the same
   way .page__inner does in the hand-built markup.
   ========================================================================== */
.e-con.band > .e-con-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 1. Dark opening ---------- */
.open__inner { padding-block: var(--sp-16) var(--sp-12); }
img.open__logo {
  height: 84px;
  width: auto;
  display: block;
  align-self: flex-start; /* not stretch - Elementor containers default to flex-direction:
     column with align-items:stretch, which would otherwise widen an auto-width
     child to the full container, same failure mode as the header/footer marks. */
}
.open__line {
  margin-top: var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  max-width: 40ch; /* One line at every width the design ships (359-1920): the
     clamp() driving --t-hero shrinks the type enough on narrow screens that
     the phrase never needs a manual break, matching how .hero__headline on
     the homepage wraps by width rather than a hard-coded <br>. */
}
.open__sub {
  margin-top: var(--sp-5);
  max-width: 54ch;
  font-size: var(--fs-xl);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}
.open__rule {
  display: block;
  width: 72px; height: 4px;
  background: var(--gold-line);
  margin-top: var(--sp-8);
}

/* ---------- 2. Numbers, on the same dark band ---------- */
.figures {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
.figure__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  /* line-height:1 crops Myanmar numerals by ~3px at every size - the glyphs
     need more than the em box. Same fault as the contact poster's title. */
  line-height: 1.2;
  color: var(--rail, currentColor);
}
.figure__l {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
/* The languages figure used to be one label with a <br> inside it. A
   data-i18n node is rewritten via textContent, which would have eaten the
   break, so it is two labels now - the second sits directly under the
   first rather than a step below it. */
.figure__l + .figure__l { margin-top: 0; }

/* ---------- 3. Mission, set as a statement ---------- */
.creed__inner { padding-block: var(--sp-16); }
.creed__text {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: var(--lh-title);
  max-width: 30ch;
}
/* The rule sits under the statement, not above it, so it underlines the
   claim instead of reading as a second eyebrow. Its own bottom margin is
   what separates the statement from the paragraph - .creed__body carries no
   top margin, or the two would stack. */
.creed__rule {
  display: block;
  width: 48px; height: 3px;
  background: var(--gold-line);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.creed__body {
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- 4. Beats ------------------------------------------------------
   The figures band above prints the category count; this list prints the
   categories. Both come from niyo_categories() via [niyo_about_beats], after
   a hand-typed list showed 14 of 27 under four names the site does not use.

   The four beats are deliberately uneven - 10 / 3 / 9 / 5 - so each is laid
   out as a row rather than a column. A four-column grid would leave three of
   them nearly empty and force the ten-item list to wrap five times.
   ------------------------------------------------------------------------ */
.beats { display: grid; gap: var(--sp-8); }
.beat {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 3px solid var(--rail);
}
.beat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
/* A desk group's name is a heading in Burmese, and it was set as a 12px
   Latin eyebrow: caps tracking pulls apart the script's stacked marks (the
   same fault §40 fixed on .tm__cl) and uppercase does nothing to Burmese at
   all. Size and weight carry it now, and the rail colour still says which
   desk it is. */
.beat__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--rail);
}
.beat__count {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.beat__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-md);
  line-height: 1.9;
}
.beat__list a { color: var(--text-secondary); transition: color var(--t-fast) var(--ease); }
.beat__list a:hover {
  color: var(--rail);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* ---------- 5. Team, now the centrepiece rather than a footnote ---------- */
.team { display: grid; gap: var(--sp-10); }
.member { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-5); align-items: start; }
.member__mono {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border: 2px solid var(--rail);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.2; /* same crop as .figure__n, for the same reason */
  color: var(--rail);
}
.member__name { font-size: var(--t-md); }
.member__role {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail);
}
/* 16px, not 14: this is prose, and the rest of the site reserves 14 for
   labels and metadata. Burmese needs the extra size more than Latin does -
   the stacked marks are what get lost first. */
.member__bio {
  margin-top: var(--sp-3);
  max-width: 46ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- 6. Hand-off: two pointers, not two copies ---------- */
.handoff__inner { padding-block: var(--sp-12); }
.handoff { display: grid; gap: 0; margin-top: var(--sp-6); border-top: 1px solid var(--border); }
.handoff__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--border);
  transition: padding-inline var(--t-normal) var(--ease);
}
.handoff__item:hover { padding-inline: var(--sp-3) 0; }
/* This label is a Burmese question, not an English eyebrow. Caps tracking
   pulls apart the script's stacked marks - the same fault §40 fixed on
   .tm__cl - and 11px left it unreadable on a phone. Weight and colour carry
   it instead. uppercase is dropped with the tracking: it does nothing to
   Burmese and shouting is not what this line is for. */
.handoff__q {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-secondary);
}
.handoff__a {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: var(--lh-title);
}
.handoff__item:hover .handoff__a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.handoff__go {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  flex: none;
  transition: transform var(--t-normal) var(--ease);
}
.handoff__item:hover .handoff__go { transform: translateX(6px); }
.handoff__go .icon { width: 20px; height: 20px; }

@media (min-width: 600px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  /* The beat name moves beside its categories once there is room for both. */
  .beat { grid-template-columns: 200px 1fr; gap: var(--sp-6); align-items: start; }
  .beat__head { display: grid; gap: var(--sp-1); }
}
@media (min-width: 1024px) {
  img.open__logo { height: 104px; }
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .creed__text { font-size: var(--t-hero); max-width: 24ch; }
  .handoff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
}

/* ==========================================================================
   20. STANDARDS PAGE

   New. Shares every band/mark/rule/figures/fc pattern the About page (§19)
   established - the two are meant to read as one family. Three pieces are
   genuinely new here: .prin (the full-length version of About's .rule, with
   room for a paragraph instead of a one-liner), .callout (the fact-check
   .verdict card repurposed as a corrections notice), and .vdef (the six
   verdict chips, defined instead of just named).
   ========================================================================== */
/* ==========================================================================
   STANDARDS — first pass.

   Reuses every band/mark/rule/figures/fc/reach class the About page already
   established, so the two read as one family. Three things are genuinely
   new to this page: a longer-form numbered principle (.prin — the About
   page's .rule is a teaser, this is the full version with room for a
   paragraph), a callout that repurposes the fact-check .verdict left-border
   card for a corrections notice, and a definition list for the six verdicts
   (About only showed the chips; this page is where they get defined).

   No new colour, font, radius or spacing token — everything below resolves
   to a value the design already ships.
   ========================================================================== */



/* ---------- Dark opening (shared shape with About) ---------- */
.sopen__inner { padding-block: var(--sp-16) var(--sp-12); }
.sopen__line {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  max-width: 40ch;
}
.sopen__sub {
  margin-top: var(--sp-5);
  max-width: 58ch;
  font-size: var(--fs-xl);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}
.sopen__rule {
  display: block;
  width: 72px; height: 4px;
  background: var(--gold-line);
  margin-top: var(--sp-8);
}

/* ---------- Numbered principles — the full-length version of About's .rule ---------- */
.prins { display: grid; gap: var(--sp-10); counter-reset: p; }
.prin { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-5); }
.prin::before {
  counter-increment: p;
  content: counter(p, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--border-strong);
  line-height: var(--lh-title);
}
.prin__t { font-size: var(--t-lg); }
.prin__d {
  margin-top: var(--sp-3);
  max-width: 68ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- Corrections callout — reuses the fact-check verdict card ---------- */
.callout {
  margin-top: var(--sp-8);
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-trust);
  border-radius: var(--radius-sm);
}
.callout__t { font-size: var(--t-sm); font-weight: 700; }
.callout__d { font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }
.callout__d a { color: var(--accent-trust); font-weight: 600; }
.callout__d a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Verdict definitions — the fact-check chip, explained ---------- */
.vdefs { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.vdef { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: baseline; }
.vdef__chip {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--v);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.vdef__d { font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }

/* ---------- Dark close (shared shape with About) ---------- */
.sreach__inner { padding-block: var(--sp-12); }
.sreach__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sreach__mail {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--t-md);
  font-weight: 600;
  word-break: break-all;
}
.sreach__note {
  margin-top: var(--sp-3);
  max-width: 52ch;
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}
.sreach__links { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.sreach__links a { font-size: var(--fs-md); font-weight: 600; }
.sreach__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .vdef { grid-template-columns: 12rem 1fr; }
}


/* ==========================================================================
   21. STANDARDS PAGE (redesign)

   Replaces §20 in spirit, not in the stylesheet - the old rules are left in
   place in case anything still references them, but the live page no longer
   uses .sopen__* / .prin / .vdef / .sreach__* / .callout. This is the
   approved second pass: a hairline-separated reference document instead of
   About's magazine bands, with a sticky contents list on desktop.

   Two corrections made during the Elementor build that the static preview
   could not catch: .doc__layout needed `.e-con` in its own .elementor-kit-6985 to
   out-rank Elementor's `.e-con.e-flex { display: flex }` (the same fix
   .masthead and .colophon needed), and .doc__section's scroll-margin-top had
   to add --h-header - the preview had no fixed header to clear.
   ========================================================================== */
/* ==========================================================================
   STANDARDS — second pass, a different genre.

   Design 1 borrowed the About page's magazine bands (dark open, alternating
   light/soft, dark close). A standards page is not a story — it is a
   reference document a reader returns to and jumps around in. This pass
   reads that way instead: one continuous page, sections separated by
   hairlines rather than colour blocks, a small ghost section-mark (§1, §2…)
   standing in the margin the way a spec or a charter numbers its clauses,
   and a contents list that stays on screen on desktop so a returning reader
   can jump straight to "ပြင်ဆင်ချက် မူဝါဒ" without scrolling past everything
   else. No dark bands at all - restraint is the point.

   Still no new colour, font, radius or spacing value beyond one literal
   (999px, for a fully-rounded mobile pill - a shape, not a design decision).
   ========================================================================== */



/* ---------- Intro ---------- */
.doc__intro { padding-block: var(--sp-16) var(--sp-10); }
.doc__title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  max-width: 26ch;
}
.doc__lead {
  margin-top: var(--sp-5);
  max-width: 62ch;
  font-size: var(--fs-xl);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- Mobile contents: a horizontal chip row ---------- */
.doc__toc-m {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
}
/* This row was a single-line horizontal scroller in the approved mock-up.
   It had to wrap instead: a nowrap flex row of six fixed-size chips has a
   min-content width of 566px, and because .page__inner is an Elementor
   container that sizes itself from its contents, that 566px became the
   minimum width of the whole page - on a 390px phone the browser zoomed the
   layout viewport out to 582px to fit it. overflow-x:auto does not help:
   a scroll container still contributes its content width to an intrinsically
   sized ancestor. Wrapping removes the intrinsic floor entirely, and on a
   phone it also shows all six sections at once rather than hiding half of
   them behind a scroll gesture with no visible scrollbar. */
.doc__toc-m a {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---------- Layout: sidebar contents + document column ---------- */
.e-con.doc__layout { display: grid; gap: var(--sp-10); padding-block: var(--sp-10); }
.doc__toc-d { display: none; }

/* ---------- Sections, hairline-separated, no colour blocking ---------- */
.doc__sections { display: grid; }
.doc__section {
  padding-block: var(--sp-12);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--h-nav) + var(--sp-4)); /* compact/stuck header height, not the full one - see build note above */
}
.doc__section:first-child { border-top: 0; padding-top: 0; }
/* The section number carried the eye down the page; with it gone the
   heading has to do that work alone, so it takes the short gold rule the
   opening band and the About page's creed already use as their mark. */
.doc__h {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: var(--lh-title);
}
.doc__h::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gold-line);
  margin-bottom: var(--sp-5);
}
.doc__body {
  margin-top: var(--sp-5);
  max-width: 68ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- Clauses: the six principles as a hairline list, not a grid ---------- */
.clauses { margin-top: var(--sp-8); display: grid; }
.clause {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
}
.clause:first-child { border-top: 0; padding-top: 0; }
.clause__n { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-secondary); }
.clause__t { font-size: var(--t-md); }
.clause__d { margin-top: var(--sp-2); max-width: 62ch; font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }

/* ---------- Verdict table ---------- */
.vtable { margin-top: var(--sp-8); display: grid; }
.vrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--border);
}
.vrow:first-child { border-top: 0; padding-top: 0; }
.vrow__k { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: 700; }
.vrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v); flex: none; }
.vrow__d { font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }

/* ---------- Notice (corrections callout, quieter than Design 1) ---------- */
.notice {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-trust);
  border-radius: var(--radius-sm);
}
.notice__t { font-size: var(--t-sm); font-weight: 700; color: var(--accent-trust); }
.notice__d { margin-top: var(--sp-2); font-size: var(--fs-md); line-height: var(--lh-mm); color: var(--text-secondary); }
.notice__d a { color: var(--accent-trust); font-weight: 600; }
.notice__d a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Document foot (light, no dark bookend) ---------- */
.doc__foot {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.doc__foot a { color: var(--text-primary); font-weight: 600; }
.doc__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .vrow { grid-template-columns: 12rem 1fr; align-items: baseline; }
}
@media (min-width: 1024px) {
  .doc__toc-m { display: none; }
  .e-con.doc__layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--sp-12); }
  .doc__toc-d {
    display: grid;
    gap: var(--sp-1);
    position: sticky;
    top: calc(var(--h-header) + var(--sp-8));
  }
  .doc__toc-d p {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
  }
  .doc__toc-d a {
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    border-left: 2px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
  }
  .doc__toc-d a:hover { color: var(--text-primary); border-left-color: var(--accent-trust); }
}


/* Chrome infers scroll-padding-top from any sticky element in the scroll
   container when none is set explicitly - it was treating .doc__toc-d's own
   sticky offset (--h-header + --sp-8 = 212px) as an obstruction for anchor
   jumps too, even though the sidebar sits in a different grid column and
   never actually overlaps the content. An explicit value on the scrolling
   box overrides that inference. Scoped to this page's body class only. */
html:has(body.page-id-7042) { scroll-padding-top: calc(var(--h-nav) + var(--sp-4)); }
/* scroll-padding-top only has effect on the element that scrolls the page -
   :root/<html> - never on <body>. WordPress only ever classes <body>, so
   :has() is what reaches the actual scroller from a page-specific class. */

/* ==========================================================================
   22. CONTACT PAGE

   A poster, not a page - see the note the design was approved with. It is
   deliberately the loudest surface on the site: one dark field, the title at
   roughly three times the shared hero size, and three address rows that
   flood with their desk colour on hover.

   Four .elementor-kit-6985s below carry `.e-con` on purpose. Elementor gives every
   container `display: flex` at two-class strength, so any container of ours
   that needs grid, block or a non-default overflow has to match that weight
   or lose - the same correction .masthead, .colophon and .doc__layout each
   needed. Everything else is plain design CSS.

   --t-poster is the one value here that is not an existing token: the shared
   --t-hero tops out at 38px and a poster needs about three times that.
   ========================================================================== */
/* ==========================================================================
   CONTACT — fourth pass. A poster, not a page.

   Passes 1-3 all stayed inside the site's editorial manners: modest type,
   hairlines, a heading followed by a paragraph. That vocabulary is right for
   an archive of 400 stories. It is wrong for a page with three addresses on
   it, because there is nothing to be modest about - the page has almost no
   content, so restraint reads as emptiness.

   So this one is loud on purpose. The page is one dark field. The title is
   set at poster scale - big enough that it stops being a heading and starts
   being an image. The three addresses are enormous rows that flood with
   their desk colour as you move down them. The logo sits oversized and
   half-bled off the right edge, cropped, the way a printed poster crops its
   own artwork rather than centring it politely.

   The one thing this page does NOT do is hide anything behind interaction:
   all three addresses are readable at rest. The colour is decoration, never
   the only signal.

   The display size is the single value here that is not already a token -
   a page-specific clamp, because the shared --t-hero tops out at 38px and a
   poster needs roughly three times that. It is declared once, below.
   ========================================================================== */



/* ---------- The dark field ---------- */
.e-con.poster {
  position: relative;
  overflow: hidden;
  background: var(--surface-invert);
  color: var(--text-invert);
  --border: color-mix(in srgb, currentColor 20%, transparent);
  --text-secondary: color-mix(in srgb, currentColor 62%, transparent);
  /* poster scale: roughly 3x the shared hero size, still fluid */
  --t-poster: clamp(3rem, 1.2rem + 9vw, 7.5rem);
}

/* the mark, oversized and cropped by the right edge */
.poster__mark {
  position: absolute;
  right: calc(var(--gutter) * -1);
  top: var(--sp-10);
  width: min(46vw, 420px);
  height: auto;
  opacity: 0.16;
  pointer-events: none;
  transform: rotate(-6deg);
}

.poster__head { position: relative; padding-block: var(--sp-12) var(--sp-10); }
.poster__title {
  font-family: var(--font-display);
  font-size: var(--t-poster);
  font-weight: 800;
  /* 1.12 is a Latin poster's line-height and it cropped the Myanmar
     diacritics clean off the top - the glyphs need 1.15 of the em box
     before the stacked marks even fit, which is why the design's own
     --lh-title sits at 1.52. 1.3 keeps the poster tight without cutting. */
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.poster__sub {
  margin-top: var(--sp-6);
  max-width: 40ch;
  font-size: var(--fs-xl);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- The three addresses: full-bleed flooding rows ---------- */
.e-con.doors { position: relative; border-top: 1px solid var(--border); display: block; }

.door {
  position: relative;
  display: block;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
/* the flood: a tint of the desk colour, wiped in from the left */
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  z-index: -1;
  background: color-mix(in srgb, var(--rail) 20%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal) var(--ease);
}
.door:hover::before, .door:focus-visible::before { transform: scaleX(1); }

/* the solid bar that is always there, so colour is never the only cue */
.door__bar {
  display: block;
  width: 56px; height: 6px;
  background: var(--rail);
  margin-bottom: var(--sp-5);
}

.door__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-5); }
.door__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.door__mail {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 0.9rem + 2.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.door:hover .door__mail { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.door__what {
  margin-top: var(--sp-4);
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}
.door__what b { font-weight: 600; color: var(--text-invert); }

.door__go {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  flex: none;
  transition: transform var(--t-normal) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.door:hover .door__go { transform: translateX(8px); background: var(--rail); border-color: var(--rail); }
.door__go .icon { width: 22px; height: 22px; }

/* ---------- Foot strip ---------- */
.e-con.poster__foot {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-10) var(--sp-16);
}
.poster__k {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.poster__v { margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: var(--lh-mm); }
.poster__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.poster__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.poster__social a:hover { background: var(--text-invert); color: var(--surface-invert); transform: translateY(-3px); }
.poster__social .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }

@media (min-width: 768px) {
  .e-con.poster__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .poster__head { padding-block: var(--sp-16) var(--sp-12); }
  .door { padding: var(--sp-10) 0; }
  .poster__mark { width: min(38vw, 520px); top: var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) {
  .door::before, .door__go { transition: none; }
}


/* ==========================================================================
   23. ELEMENTOR TYPOGRAPHY LEAK

   Elementor gives every text widget its own font-family from the global kit
   typography:

     .elementor-widget-text-editor { font-family: var( --e-global-typography-text-font-family ), Sans-serif }

   That variable is "Roboto" out of the box and was never changed, so every
   text widget on the site - all sixteen on the privacy page, the four in the
   footer, and the body prose of About, Standards, Contact and Terms - was
   being set in a Latin-only face. Roboto carries no Myanmar glyphs, so the
   Burmese fell straight past Pyidaungsu and Noto Sans Myanmar to whatever
   generic sans the device happened to pick, while the headings beside it
   kept the design's stack. Body text and headings were rendering in two
   different typefaces on the same page.

   The design sets type once on <body> and lets it inherit, which is what the
   widget should do too. Two classes, because Elementor's own rule lives in
   the per-page stylesheet that loads after this file and one class would
   lose the tie.
   ========================================================================== */
.elementor .elementor-widget-text-editor { font-family: inherit; }

/* ==========================================================================
   24. WIDE SCREENS

   A first pass boxed the whole page at 1440 — backgrounds included — so the
   header bar and the coloured bands ended in mid-air with the page showing
   either side. That is the boxed-theme look of about 2010; newsrooms run the
   background to the window edge and stop the content instead, which is what
   this design already did through --shell and .page__inner. So that pass is
   gone and only the two parts worth keeping remain.
   ========================================================================== */

/* No image, video or embed may push its container wider than the container
   itself. box-sizing is already global in §2, so padding and borders never
   add to a width either. */
img, video, iframe, canvas { max-width: 100%; }

@media (min-width: 1441px) {
  /* The lead photograph is the one piece of media with no measure of its
     own. Unbounded it kept scaling with the window — at 2560 it was drawn
     at nearly twice the width the file was cut for. Its caption block was
     already inside the shell; this lines the two up. */
  .hero__media { max-width: var(--shell); margin-inline: auto; }
}


/* ==========================================================================
   25. LOOP GRID MAPPING
   Elementor renders a Loop Grid inside wrappers of its own, and puts a
   widget's CSS class on the widget's wrapper div rather than on the element
   the widget actually prints. These rules hand the design's own boxes back
   their meaning so a Loop Grid measures the same as the hand-written markup
   it replaces. Nothing here is new design — every value is read from §12.
   ========================================================================== */

/* ---------- the grid ----------
   The widget class lands two levels above the real item list, so the grid
   rules are re-pointed at .elementor-loop-container. Two classes on the
   element itself keep this above Elementor's own
   .elementor-widget-loop-grid-3 .elementor-grid, which is also (0,2,0). */
.world-grid.elementor-widget > .elementor-widget-container { display: contents; }

.world-grid.elementor-widget .elementor-loop-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* The item wrapper is skipped so .world__card is the grid item itself and
   still stretches to the tallest card in its row — without this, cards in a
   row stop sharing a bottom edge and .world__at loses its margin-top:auto. */
.world-grid .e-loop-item { display: contents; }

/* Elementor breaks every word inside a loop item. Myanmar has no word
   spaces, so that rule decides where lines fall; the design's own wrapping
   is restored and long latin strings still break rather than overflow. */
.world-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

/* ---------- the heading widget ----------
   .world__title sits on the wrapper, so the <h3> inside keeps the browser's
   own 1.17em and loses the margin every other h3 in this design has
   (nothing resets h3 — see §2, which resets only h1 and h2). Both are
   handed back, in that order. */
.world__title.elementor-widget > .elementor-heading-title {
  font-size: inherit;
  margin: 1em 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-title);
  color: inherit;
}

/* The same hand-back for the excerpt. Elementor's kit paints every
   text-editor widget in --e-global-color-text (#7A7A7A) at (0,1,0), which
   ties with .world__dek and wins on load order; two classes settle it. */
/* Raised to (0,3,0) when §43 made the same correction for every other
   text-editor widget at (0,2,0): that rule is later in this file and would
   otherwise take this excerpt back to inherit. */
.elementor .world__dek.elementor-widget {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-secondary);
}

@media (min-width: 600px) {
  .world-grid.elementor-widget .elementor-loop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .world-grid.elementor-widget .elementor-loop-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}


/* ==========================================================================
   26. LEDE — the front page's opening
   A lead photograph running to the shell edge and dissolving on its right and
   lower edges, the headline standing in the dissolve, and four secondary
   stories in a ruled column beside it.

   Tuned to the first screen. The header is 172px on a desktop, so a 900px
   laptop leaves 728px, and every part of this section — picture, headline,
   rule, caption and all four cards — is measured to land inside it. Two
   numbers carry that and should not be changed casually: the picture's
   1.85:1 and the headline's 1.32 leading. There are about 10px of slack, so
   a lead headline that runs to four lines will push the caption through the
   fold; three lines is the house limit.

   No new colours. --t-mega is the one new size, declared on the band.
   ========================================================================== */

.lede-band {
  background: var(--surface-2);
  --desk: var(--accent-breaking);
  --t-mega: clamp(1.875rem, 1.3rem + 3vw, 4rem);
}

/* Each desk owns a colour: the site already sorts its 27 categories into
   four rails, and the kicker and the rule read from the rail of the story
   they belong to rather than being red for everything. */
.lede-band[data-rail="ink"],     .lede__list li[data-rail="ink"]     { --desk: var(--text-primary); }
.lede-band[data-rail="trust"],   .lede__list li[data-rail="trust"]   { --desk: var(--accent-trust); }
.lede-band[data-rail="life"],    .lede__list li[data-rail="life"]    { --desk: var(--accent-life); }
.lede-band[data-rail="premium"], .lede__list li[data-rail="premium"] { --desk: var(--accent-premium); }

.lede {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-10);
}

/* ---------- the photograph ----------
   <figure> carries a browser default margin of 1em 40px and §2 resets only
   h1, h2, p and ul — without this the picture sits 40px in from the edge. */
.lede__media { display: block; min-width: 0; margin: 0; }

.lede__pic {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.lede__media:hover .pic__inner { transform: scale(1.03); }

/* The dissolve needs a photograph whose weight sits on the left. A bright,
   evenly lit picture fades into nothing, so editors can switch it off per
   story from the post sidebar and get a hard edge instead. */
.lede--hard .lede__pic {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ---------- the headline block ---------- */
.lede__copy {
  display: grid;
  gap: var(--sp-4);
  padding-inline: var(--gutter);
  min-width: 0;
}
.lede__headline { font-size: var(--t-mega); letter-spacing: 0; }
.lede__headline a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.lede__rule { width: 7.5rem; height: 3px; background: var(--desk); }

.lede__caption {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
  max-width: 34rem;
}
.lede__caption b { font-weight: 600; color: var(--text-primary); }

/* ---------- the second column ----------
   On a phone the wrapper dissolves so the label can travel to the very top
   of the page as a dateline. It costs 24px there instead of 54px between
   the lead and the list, which is what was keeping the first secondary
   headline off the first screen. */
.lede__aside { display: contents; }

.lede__label {
  order: -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--gutter);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--desk);
}
.lede__label time {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.lede__list {
  display: grid;
  gap: var(--sp-4);
  padding-inline: var(--gutter);
}

.lede__card {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  background: var(--background);
  box-shadow: var(--shadow-panel);
  border-radius: var(--radius-xs);
  overflow: hidden;
  min-width: 0;
  transition: transform var(--t-normal) var(--ease);
}
.lede__card:hover { transform: translateY(-3px); }

/* --shadow-panel is a black shadow. On a dark page it falls on darkness and
   the card stops having an edge, so there it earns a hairline instead. */
[data-theme="dark"] .lede__card { border: 1px solid var(--border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lede__card { border: 1px solid var(--border); }
}

.lede__card-pic { height: 100%; aspect-ratio: auto; border-radius: 0; }
.lede__card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
}
.lede__kicker {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0;        /* never letter-space Myanmar */
  color: var(--desk);
}
.lede__card-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--lh-title);
}
.lede__card:hover .lede__card-t {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.lede__card:hover .pic__inner { transform: scale(1.04); }

.lede__card:focus-visible,
.lede__media a:focus-visible,
.lede__headline a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  .lede__card { transition: none; }
  .lede__card:hover { transform: none; }
  .lede__card:hover .pic__inner,
  .lede__media:hover .pic__inner { transform: none; }
}

@media (min-width: 768px) {
  .lede__copy, .lede__label, .lede__list { padding-inline: var(--sp-6); }
  .lede__card { grid-template-columns: 8rem minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .lede {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "media aside"
      "copy  aside";
    align-items: start;
    gap: var(--sp-5) var(--sp-10);
    padding-block: 0 var(--sp-12);
  }
  .lede__media { grid-area: media; }
  .lede__copy  { grid-area: copy; margin-top: calc(var(--sp-8) * -1); padding-inline: var(--sp-8); }

  /* auto for the label, 1fr for the list, so the four cards divide whatever
     height the picture-and-headline column leaves them */
  .lede__aside {
    grid-area: aside;
    display: grid;
    grid-template-rows: auto 1fr;
    align-self: stretch;
    gap: var(--sp-4);
    padding-block: var(--sp-8);
    padding-inline: var(--sp-8);
  }
  .lede__label {
    order: 0;
    padding-inline: 0;
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: var(--lh-title);
    color: var(--text-primary);
  }
  .lede__list { padding-inline: 0; grid-auto-rows: 1fr; }
  .lede__list li { display: grid; }

  /* 1.85:1 gives the picture about three fifths of its column. A shorter
     crop left the other half reading as blank paper; a taller one pushes
     the caption through the fold. */
  .lede__pic {
    aspect-ratio: 1.85 / 1;
    -webkit-mask-image:
      linear-gradient(to right, #000 72%, transparent 100%),
      linear-gradient(to bottom, #000 64%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, #000 72%, transparent 100%),
      linear-gradient(to bottom, #000 64%, transparent 100%);
    mask-composite: intersect;
  }

  /* .home h1 sets 1.52, which Padauk needs at reading sizes. At poster size
     that much leading pushed the last line through the fold, so the lines
     close up here. Measured consequence: the ink then hangs 26.7px below the
     h1's own box at 64px — nothing is clipped, but the rule underneath was
     being overlapped, so the padding below is that hang, in em so it tracks
     the clamp rather than being a number that only works at 1440. */
  /* two classes on purpose: .home h1 is (0,1,1) and beats a lone class,
     so .lede__headline alone silently kept 1.52 and pushed the caption
     through the fold. */
  .lede .lede__headline { line-height: 1.32; padding-bottom: 0.45em; }

  .lede__card { grid-template-columns: 10rem minmax(0, 1fr); }
  .lede__card-body { padding: var(--sp-5); }
  .lede__card-t { font-size: var(--t-sm); }
}

@media (min-width: 1200px) {
  .lede__copy, .lede__aside { padding-inline: var(--sp-10); }
  .lede__card { grid-template-columns: 13rem minmax(0, 1fr); }
}

/* =========================================================================
   26. AD SLOT MAPPING - what a native Elementor ad band needs handed back.
   Three things sit above the design here, and each needs its own answer:
     a) Elementor kit typography paints the tag a widget prints.
     b) .elementor.elementor .e-con > .elementor-widget is (0,4,0) and caps
        every widget measure at 100%.
     c) niyo-wp.css zeroes padding-inline on any .e-con inside a band, which
        also kills Elementor own padding control on that container.
   ========================================================================= */

/* a) The class lands on the wrapper; the tag inside keeps the kit type.
      Hand family, size, leading, weight, tracking and colour back. */
.slot .elementor-widget-heading .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}

/* b) Beat Elementor (0,4,0) measure cap with (0,5,0), mirroring the shape of
      its own .elementor-kit-6985 rather than reaching for !important. */
.elementor.elementor .e-con > .elementor-widget.slot__inline { max-width: 46ch; }
.elementor.elementor .e-con > .elementor-widget.slot__head   { max-width: 34ch; }
.elementor.elementor .e-con > .elementor-widget.slot__sub    { max-width: 52ch; }

/* c) Give the slot container its inline padding back THROUGH Elementor own
      custom properties, so the padding control in the editor still works.
      (0,3,0) clears the (0,2,0) reset in niyo-wp.css. */
.page__inner > .slot.e-con {
  padding-inline: var(--padding-inline-start, var(--sp-5)) var(--padding-inline-end, var(--sp-5));
}

/* d) The CTA is a native Button widget - colour, radius, padding and size all
      come from Elementor controls. Only the family has to be handed back, or
      the kit paints it Roboto, which carries no Myanmar glyphs at all. */
.slot .elementor-widget-button .elementor-button { font-family: inherit; }

/* =========================================================================
   27. DESK HEADER MAPPING (.ldesk__mark as native Elementor widgets)
   The hand-written <h2> takes its SIZE from .ldesk__mark-title and its
   weight, leading and tracking from .home h1,h2,h3 - the (0,1,1) rule that
   outranks the (0,1,0) class. Elementor kit typography is (0,2,0) and beats
   both, so it has to be answered explicitly.
   ========================================================================= */

.ldesk__mark .elementor-widget-heading .elementor-heading-title {
  /* from the wrapper, which carries .ldesk__mark-title - keeps the clamp() */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  margin: 0;
  /* NOT inherit: the wrapper carries .ldesk__mark-title own 800 and -0.01em,
     which is not what the design renders. These three are what .home h1,h2,h3
     puts on the real <h2>, restated because Elementor outranks that rule. */
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--lh-title);
}

/* Same Roboto trap as SS26 d) - Roboto carries no Myanmar glyphs. */
.ldesk__mark .elementor-widget-button .elementor-button { font-family: inherit; }

/* A band inner that Elementor owns is a flex column, and that changes two
   things the hand-written block layout got for free:
     - Elementor never emits a zero gap, so the kit 20px gap shows through;
     - flex does not collapse margins, so .ldesk__mark 24px bottom margin and
       .dd2 20px top margin would sum to 44 instead of collapsing to 24.
   Answer both, so the mark-to-content distance stays the 24px the design
   actually renders. */
/* The video band inner is .page__inner alone - it carries no .band__inner -
   so the .elementor-kit-6985 has to cover both or the kit 20px gap reappears there. */
/* :not(.desks) - the ကဏ္ဍအလိုက် band inner IS .desks, which declares its own
   responsive gap (40 / 32 / 40). This rule is (0,2,0) and would beat it. */
.band__inner.e-con:not(.desks),
.page__inner.e-con:not(.desks) { gap: 0; }
.band__inner.e-con .dd2 { margin-top: 0; }

/* =========================================================================
   30. PHOTO GRID LOOP MAPPING (.pgrid as an Elementor Loop Grid)
   Same three shapes as SS25: the widget class lands two levels above the
   real item list, the item wrapper has to be skipped so the card is the
   grid cell, and Elementor Pro breaks every word inside a loop item.
   Nothing here is new design - every value is read from the .pgrid block.
   ========================================================================= */

.pgrid-grid.elementor-widget > .elementor-widget-container { display: contents; }

/* .pgrid has no gap - the cards are separated by hairlines, top and left on
   the grid, right and bottom on each card. */
.pgrid-grid.elementor-widget .elementor-loop-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

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

/* Skipped so .pgrid__card is the grid cell itself and still stretches to the
   tallest card in its row - without this .pgrid__foot loses margin-top:auto. */
.pgrid-grid .e-loop-item { display: contents; }

/* Myanmar has no word spaces, so Elementor own break-word decides where lines
   fall. Restore the design wrapping; long latin strings still break. */
.pgrid-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

/* .pic has no in-flow content - its height comes only from aspect-ratio, and
   that needs a definite width. Reached through the niyo-pass display:contents
   chain the stretched width is not definite, so the frame collapsed to zero
   height and took the whole card with it. Measured: 0 -> 178px at 390. */
.pgrid-grid .pgrid__pic { width: 100%; }

/* Elementor never emits a zero gap, and neither of these two boxes has one.
   .pgrid__foot is NOT in this list - it carries a real 8px gap of its own. */
.pgrid__card.e-con,
.pgrid__body.e-con { gap: 0; }

/* Inside a flex container Elementor zeroes every widget margin at (0,2,0),
   which takes the headline's 16px away from the foot. Hand it back above it. */
.pgrid__body.e-con > .pgrid__title { margin-bottom: var(--sp-4); }

/* .pgrid__body { flex: 1 } is what pushes .pgrid__foot to the card's bottom
   edge; Elementor's own flex custom properties override it. */
.pgrid__card.e-con > .pgrid__body { flex: 1; }

/* The class sits on the heading wrapper; the span Elementor prints inside it
   otherwise keeps the kit typography (the Roboto trap again). */
.pgrid__title.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* =========================================================================
   31. LOCAL DESK LOOP MAPPING (.ldesk__card as an Elementor Loop Grid)
   The design paginates by wrapping three cards in each .ldesk__grid-page. A
   Loop Grid prints one flat run, so the grid moves onto the loop container
   and the paging script hides cards by index instead - which is why
   .ldesk__card needs a [hidden] rule of its own: its own display:flex would
   otherwise beat the browser default for [hidden].
   ========================================================================= */

.ldesk-grid.elementor-widget > .elementor-widget-container { display: contents; }

.ldesk-grid.elementor-widget .elementor-loop-container {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  /* repeat(3, 1fr), not minmax(0,1fr): .ldesk__card has no min-width:0 of its
     own, so a column may exceed its equal share on its content - which is why
     the design's three columns are measurably uneven. Copy the value. */
  .ldesk-grid.elementor-widget .elementor-loop-container { grid-template-columns: repeat(3, 1fr); }
}

.ldesk-grid .e-loop-item { display: contents; }
.ldesk-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

/* .ldesk__card { display: flex } is (0,1,0) and outranks the UA rule for
   [hidden], so a hidden card would still be drawn. */
.ldesk__card[hidden] { display: none; }

/* Elementor gives every container min-width: 0. A grid item's `auto` minimum is
   what makes the design's three columns measurably uneven (225.805 / 223.852 /
   230.344 at 768, not an even 226.664), so hand it back. */
.ldesk-grid .e-loop-item > .ldesk__card { min-width: auto; }

/* This band's inner has to stay block, the way the design writes it. As an
   Elementor flex column it squashed the shortcode widget that prints
   .ldesk__top from 557px to 44px and the whole band lost 537px - the other
   converted bands survive as flex only because their widget holds a single
   child. Scoped, so nothing else changes. */
.band__inner.ldesk-inner.e-con { display: block; }

/* .ldesk__card carries a real 16px gap - only the body has none. */
.ldesk__card-body.e-con { gap: 0; }

/* The class sits on the heading wrapper; the span inside keeps kit typography. */
.ldesk__card-title.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* =========================================================================
   32. SPORTS MOST-READ LOOP MAPPING (.strend as an Elementor Loop Grid)
   .shub and .strend both declare display in the design, so they keep grid on
   their own - only the containers the design leaves as plain blocks need
   answering here.
   ========================================================================= */

.strend-grid.elementor-widget > .elementor-widget-container { display: contents; }

/* .s-col3__list is a plain block div with one hairline on top. The class sits
   on the widget wrapper, which is display:contents, so the rule has to be
   restated on the loop container itself - the one duplicated design value
   this mapping needs. */
.strend-grid.elementor-widget .elementor-loop-container {
  display: block;
  border-top: 1px solid var(--border);
}

.strend-grid .e-loop-item { display: contents; }
.strend-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }
.strend-grid .e-loop-item > .strend { min-width: auto; }

/* .s-col3 is a plain block in the design; as an Elementor flex column it would
   add the kit 20px gap between the header and the list. */
.s-col3.e-con { gap: 0; }

.strend__title.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* =========================================================================
   33. SPORTS CARD LOOPS (.scard, .shero, .ssub as Elementor Loop Grids)
   All three cards declare display in the design, so they keep their own box.
   What needs answering is the wrappers Elementor inserts and the two rules
   its own (0,2,0) .elementor-kit-6985s outrank.
   ========================================================================= */

/* --- the three loop containers ---
   .s-col1__list is a plain block with a hairline on top; .ssubs is already a
   flex column, so that loop container has to vanish entirely or the .ssub
   cards stop being its children. */
.scard-grid.elementor-widget > .elementor-widget-container,
.shero-grid.elementor-widget > .elementor-widget-container,
.ssub-grid.elementor-widget  > .elementor-widget-container { display: contents; }

.scard-grid.elementor-widget .elementor-loop-container {
  display: block;
  border-top: 1px solid var(--border);
}
.shero-grid.elementor-widget .elementor-loop-container { display: block; }
.ssub-grid.elementor-widget  .elementor-loop-container { display: contents; }

.scard-grid .e-loop-item,
.shero-grid .e-loop-item,
.ssub-grid  .e-loop-item { display: contents; }

.scard-grid .e-loop-item *,
.shero-grid .e-loop-item *,
.ssub-grid  .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

.scard-grid .e-loop-item > .scard { min-width: auto; }

/* --- the two columns and the sub wrapper are plain blocks in the design --- */
.s-col1.e-con, .s-col2.e-con { gap: 0; }

/* --- .scard__body carries flex: 1 so .sfoot can sit at the bottom of the
       tallest card in the row. Elementor .e-con.e-flex { flex: var(...) } is
       (0,2,0) and would replace it with 0 1 auto. --- */
.scard .scard__body.e-con { flex: 1; }
/* gap: normal, not 0 - it is exactly what the design computes and behaves the
   same, so a computed-style comparison against the shortcode stays clean.
   .scard is a real flex column, so its gap is the one that actually showed:
   the kit 20px added 60px across the three cards. On .shero (block) and the
   bodies it is inert, and set only to keep the two sides comparable. */
.scard.e-con, .shero.e-con { gap: normal; }
.scard__body.e-con, .ssub__body.e-con { gap: normal; }

/* the design leaves .scard__body at the flex default min-width: auto */
.scard .scard__body.e-con { min-width: auto; }

/* --- .pic has no in-flow content: its height comes from aspect-ratio, which
       needs a definite width. Reached through the niyo-pass display:contents
       chain the stretched width is not definite. Same fix as SS29. --- */
.scard-grid .scard__pic,
.shero-grid .shero__pic,
.ssub-grid  .ssub__pic { width: 100%; }

/* --- the class sits on the heading wrapper --- */
.scard__title.elementor-widget  > .elementor-heading-title,
.ssub__title.elementor-widget   > .elementor-heading-title,
.shero__title.elementor-widget  > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* =========================================================================
   34. DESK COLUMN LOOPS (the ကဏ္ဍအလိုက် band)
   .desks, .desk, .desk__list, .desk__item and .story all declare display and
   gap in the design, so the containers keep their own boxes. Only the two
   loop containers and the two heading wrappers need answering.
   ========================================================================= */

.story-grid.elementor-widget > .elementor-widget-container,
.deskitem-grid.elementor-widget > .elementor-widget-container { display: contents; }

/* The lead has no wrapper of its own in the design - .story is a direct grid
   child of .desk - so this loop container has to disappear completely. */
.story-grid.elementor-widget .elementor-loop-container { display: contents; }

/* .desk__list is a real element and is display: grid. */
.deskitem-grid.elementor-widget .elementor-loop-container { display: grid; }

.story-grid .e-loop-item,
.deskitem-grid .e-loop-item { display: contents; }

.story-grid .e-loop-item *,
.deskitem-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

.deskitem-grid .e-loop-item > .desk__item { min-width: auto; }

/* the class sits on the heading wrapper; .story__title also carries a link */
.story__title.elementor-widget > .elementor-heading-title,
.desk__title.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* .desk__title is a <span> and has no margin. .story__title is a real <h3>,
   and nothing in this design resets h3 (SS2 resets only h1 and h2), so it
   carries the UA margin: 1em 0 - measured 18.816px each side at 1440, which
   is 37.63px of the .story column. Hand it back or the lead sits short. */
.desk__title.elementor-widget > .elementor-heading-title { margin: 0; }
.story__title.elementor-widget > .elementor-heading-title { margin: 1em 0; }

/* .desk__list declares display: grid and no gap; the loop container would
   otherwise take the kit 30px. */
.deskitem-grid.elementor-widget .elementor-loop-container { gap: normal; }

/* display: contents does not change the DOM tree, so every .desk__item is the
   only child of its own .e-loop-item and :last-child matches all three. Move
   the rule onto the loop item, where last really means last. */
.deskitem-grid .e-loop-item .desk__item:last-child { padding-bottom: var(--sp-4); }
.deskitem-grid .e-loop-item:last-child .desk__item { padding-bottom: 0; }

/* =========================================================================
   35. VIDEO CHANNEL STRIP (.ytbar as Elementor containers)
   The queue and the player stay in PHP - their buttons carry per-post
   data-yt / data-title / data-meta / data-dur that drive the player, plus a
   Myanmar numeral taken from the loop index, and Elementor has no dynamic tag
   for either. This strip is the part that is actually static and worth having
   in the editor: channel URL, name, handle and the CTA label.
   ========================================================================= */

/* Same trap as SS26 c): niyo-wp.css zeroes padding-inline on any .e-con
   inside a .page__inner, and .ytbar is a direct child of one. Answer through
   Elementor's own custom properties so the padding control still works. */
.page__inner > .ytbar.e-con {
  padding-inline: var(--padding-inline-start, var(--sp-4)) var(--padding-inline-end, var(--sp-4));
}

/* .ytbar__body shrinks to its content in the design and lets .ytbar__cta take
   the free space with margin-left: auto. Elementor's --width: 100% fills the
   row instead, which leaves the pill nothing to be pushed by. */
.ytbar .ytbar__body.e-con { width: auto; }

/* the class sits on the heading wrapper; the span inside keeps kit type */
.ytbar__name.elementor-widget > .elementor-heading-title,
.ytbar__handle.elementor-widget > .elementor-heading-title,
.ytbar__cta.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* =========================================================================
   36. RAIL LEAD LOOP (.dl__lead as an Elementor Loop Grid)
   Only the lead card moves. The rail beside it stays in PHP because it is a
   real <ul>/<li> list with li:first-child rules, and a Loop Grid wraps every
   item in its own div - the list would stop being a list for a screen
   reader, which is not a trade worth making for card editability.
   ========================================================================= */

/* The widget div goes too, not just its container - .dd2 is a grid, so a
   surviving box becomes the grid item and .dl__lead would stop stretching to
   the row. It happens to be the taller item today, so nothing moves; this is
   here so a shorter lead never breaks it silently. */
.dllead-grid.elementor-widget,
.dllead-grid.elementor-widget > .elementor-widget-container { display: contents; }

/* .dl__lead is a direct grid child of .dd2 in the design, so the loop
   container has to disappear entirely. */
.dllead-grid.elementor-widget .elementor-loop-container { display: contents; }
.dllead-grid .e-loop-item { display: contents; }
.dllead-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

/* SS29 again: .pic takes its height from aspect-ratio and needs a definite
   width, which the niyo-pass display:contents chain does not hand it. */
.dllead-grid .dl__lead-pic { width: 100%; }

.dl__lead-t.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* =========================================================================
   37. LOCAL DESK HERO PAIR (.ldesk__hero as two Loop Grids)
   Two grids of one post each - the main card and the narrow one beside it -
   because they differ only by class and image size, which are template
   settings, not anything a single loop could vary.
   ========================================================================= */

/* The widget div itself has to go too, not just its container: .ldesk__top is
   a grid, so whichever box survives becomes the grid item. Left as a box it
   is the div that gets stretched to the row height while .ldesk__hero keeps
   its own 535.99 - the scrim then stops 22px short of the row. Same three-
   .elementor-kit-6985 shape niyo-pass uses. */
.ldhero-grid.elementor-widget,
.ldside-grid.elementor-widget,
.ldhero-grid.elementor-widget > .elementor-widget-container,
.ldside-grid.elementor-widget > .elementor-widget-container { display: contents; }

/* .ldesk__hero is a direct grid child of .ldesk__top, so both loop
   containers have to disappear. */
.ldhero-grid.elementor-widget .elementor-loop-container,
.ldside-grid.elementor-widget .elementor-loop-container { display: contents; }
.ldhero-grid .e-loop-item,
.ldside-grid .e-loop-item { display: contents; }
.ldhero-grid .e-loop-item *,
.ldside-grid .e-loop-item * { word-break: normal; overflow-wrap: break-word; }

/* .ldesk__hero-copy is a plain flex column in the design with no gap. */
.ldesk__hero-copy.e-con { gap: normal; }

.ldesk__hero-title.elementor-widget > .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}


/* ==========================================================================
   38. STANDARDS PAGE — third pass, "at a glance"

   §21 treated this page as a reference document read from the top, and the
   second attempt at this pass only redesigned the opening: the head and the
   six principles were rebuilt while the five prose sections below kept §21's
   treatment, so the page read as designed at the top and unfinished from the
   middle down — a heading alone in the left margin, one paragraph under it,
   and half the width empty.

   This block designs the whole page on one spine instead. Every section is
   the same two-column row: a chapter numeral and the section heading on the
   left, everything else on the right. The heading column is sticky on
   desktop, so a reader always knows which section they are in. Because the
   heading and its text now sit side by side, the dead space is gone and the
   left edge reads as a table of contents you can scan in one pass.

   Structure note: each section is ONE html widget holding `.sec`, rather
   than the container's own children. Elementor's container display rules
   (`.e-con.e-flex { display: flex }`) then never enter the picture, and a
   section with three parts — heading, prose and a call to action — cannot
   fall out of the grid. `.doc__section` survives only as the anchor target,
   so its own padding and rule are cleared here.

   §21's `.notice`, `.doc__toc-m`, `.eyebrow` and `.page__inner` are still in
   use and untouched. `.doc__h`, `.doc__body`, `.doc__layout` and
   `.doc__toc-d` are no longer referenced by the markup.

   No new colour, font or radius. The numeral reuses --t-hero so it is tied
   to the page title's own scale, and the verdict keys reuse --accent-life /
   --accent-breaking / --accent-premium exactly as §21 did.
   ========================================================================== */

/* ---------- Head: title, lead, and the trust stamp ---------- */
.std__head { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .std__head {
    grid-template-columns: minmax(0, 1.5fr) minmax(272px, 1fr);
    gap: var(--sp-10);
    align-items: end;
  }
}
.std__title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: var(--sp-4);
  border-radius: 2px;
  background: var(--gold-line);
}
.std__title {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.std__lead {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
  max-width: 48ch;
}
.std__stamp {
  align-self: end;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.std__stamp dt,
.std__stamp dd { margin: 0; }
.std__srow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
}
.std__srow + .std__srow { border-top: 1px solid var(--border); }
.std__sk { color: var(--text-secondary); }
.std__sv { font-weight: 600; text-align: right; }

/* ---------- The spine ---------- */
body.page-id-7042 .doc__section,
body.page-id-7236 .doc__section { padding-block: 0; border-top: 0; margin-block: 0; }
.sec {
  display: grid;
  gap: var(--sp-4) var(--sp-10);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .sec { grid-template-columns: 236px minmax(0, 1fr); }
  .sec__mark { position: sticky; top: var(--sp-6); }
}
.sec__mark { align-self: start; }
.sec__n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  /* --border-strong is a hairline colour and measured 1.87:1 on white:
     at 32px on a phone the Myanmar ၁ stopped reading as a number and started
     reading as a smudge. Mixed against the page instead, it lands near 3:1 in
     both themes - still a watermark beside a heading at 17:1, but legibly a
     numeral. Shared by Standards, Privacy, Terms and About. */
  color: color-mix(in srgb, var(--text-primary) 45%, var(--background));
  font-variant-numeric: tabular-nums;
}
.sec__h {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.sec__body > * + * { margin-top: var(--sp-5); }
.sec__p {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-primary);
  max-width: 68ch;
}

/* ---------- The six principles, as one hairline grid ----------
   Two columns, not three: each cell carries a full clause as well as its
   one-line promise, and at three columns the paragraphs go ragged. */
.std__grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 700px) {
  .std__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.std__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--background);
}
.std__cn {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-line);
  font-variant-numeric: tabular-nums;
}
.std__ct { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-title); }
.std__cs { margin: 0; font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-mm); }
.std__cd { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-mm); color: var(--text-secondary); }

/* ---------- Fact-check verdicts, keyed by colour ---------- */
.std__scale { display: grid; gap: var(--sp-3); }
@media (min-width: 620px)  { .std__scale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .std__scale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.std__vd {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--v, var(--border-strong));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.std__vk {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--v, var(--text-primary));
}
.std__vt {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}

/* ---------- Corrections: the one thing on this page a reader can act on,
   so it gets a real control rather than a coloured left border. ---------- */
.std__cta {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
@media (min-width: 700px) {
  .std__cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; }
}
.std__ctat { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-title); }
.std__ctad {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
  max-width: 52ch;
}
.std__ctab {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  background: var(--surface-invert);
  color: var(--text-invert);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition: opacity var(--t-fast) var(--ease);
}
.std__ctab:hover { opacity: 0.88; }

/* ---------- The link out to the fact-check desk ---------- */
.std__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-lg);
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.std__pill:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* ---------- Closing row ---------- */
.std__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-6) var(--sp-10);
  border-top: 1px solid var(--border);
}
.std__foot a {
  font-size: var(--fs-lg);
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}
.std__foot a:hover { border-bottom-color: var(--text-primary); }
.std__foots { font-size: var(--fs-md); color: var(--text-secondary); }
@media (min-width: 700px) { .std__foots { margin-left: auto; } }


/* ==========================================================================
   39. PRIVACY PAGE — "The Record"

   This page's message is unusual and worth designing for: almost every
   statement on it is a *denial*. No analytics, no ad tracker, no pixel, no
   account. Set as grey prose that reads as boilerplate, which is the one
   thing a privacy page must not be. So it opens with the single sentence
   that matters, then answers the six questions a reader actually has as a
   keyed grid — green for "we don't", gold for "we do, and here is the
   limit". The colour is information, not decoration.

   Below the key the page uses §38's `.sec` spine unchanged, so Privacy and
   Editorial Standards read as the same document family.

   Every claim was checked against the running site before it was written:
   one cookie (pll_language), three localStorage keys under `niyo:`, no
   analytics or tracking code on any page, no third-party iframes, and
   Google Fonts as the only third party that sees a reader's IP.
   ========================================================================== */

/* The spine clears .doc__section's own spacing; Terms (7051) still needs it,
   so this stays scoped, exactly as §38 does. */
body.page-id-3 .doc__section,
body.page-id-7237 .doc__section { padding-block: 0; border-top: 0; margin-block: 0; }

/* ---------- The opening panel ---------- */
.pv__hero {
  margin-top: var(--sp-6);
  padding: clamp(28px, 4.4vw, 56px) clamp(20px, 3.6vw, 44px);
  border-radius: var(--radius-md);
  background: var(--surface-invert);
  color: var(--text-invert);
}
:root[data-theme="dark"] .pv__hero {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pv__hero {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
}
.pv__k {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.6;
}
.pv__h::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: var(--sp-4);
  border-radius: 2px;
  background: #c9a227;
}
.pv__h {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  text-wrap: balance;
}
/* The panel is inverted, so the accent has to be too: --accent-life is tuned
   for the page's own ground and would land dark-on-dark here. These are the
   same two values the token carries, used for the opposite theme. */
.pv__claim {
  margin: var(--sp-5) 0 0;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  max-width: 28ch;
  color: #3fcb92;
}
.pv__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  opacity: 0.74;
  max-width: 54ch;
}

/* ---------- The six answers, keyed by colour ---------- */
.pv__key {
  display: grid;
  gap: 1px;
  margin-top: var(--sp-6);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 640px)  { .pv__key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pv__key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv__kc {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--background);
}
.pv__km {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
}
.pv__kc--no  .pv__km { background: color-mix(in srgb, var(--accent-life) 16%, transparent);    color: var(--accent-life); }
.pv__kc--yes .pv__km { background: color-mix(in srgb, var(--accent-premium) 20%, transparent); color: var(--accent-premium); }
.pv__kt { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-title); }
.pv__kd { margin: var(--sp-1) 0 0; font-size: var(--fs-lg); line-height: var(--lh-mm); color: var(--text-secondary); }

/* The technical cookie name is kept for the few readers who want it, and
   held back from the ones who do not. */
.pv__tech { color: var(--text-secondary); }


/* ==========================================================================
   40. TERMS PAGE — "May / May Not"

   Everyone who opens a terms page wants one answer: *can I use this?* The
   old page buried it in four paragraphs. It is now two columns — green for
   what needs no permission, red for what is never allowed — and the middle
   case ("ask first, and you can") lives in the green column where it belongs,
   because it is a yes with a condition, not a no.

   Under the columns sits the credit line itself, set large enough to read and
   copy. Giving people the exact string to paste is the most useful thing this
   page can do, and almost no newsroom does it.

   Below that the page uses §38's `.sec` spine, so Terms, Privacy and
   Editorial Standards read as one family. `.tm__hero` repeats §39's
   `.pv__hero` declarations rather than sharing a class; if a fourth document
   page appears, merge the two into one `.dochero`.

   Nothing here is new to the token set: the green is --accent-life, the red
   --accent-breaking, and the rule is --gold-line, exactly as the sibling
   pages use them.
   ========================================================================== */

body.page-id-7051 .doc__section,
body.page-id-7238 .doc__section { padding-block: 0; border-top: 0; margin-block: 0; }

/* ---------- Opening panel ---------- */
.tm__hero {
  margin-top: var(--sp-6);
  padding: clamp(28px, 4.4vw, 56px) clamp(20px, 3.6vw, 44px);
  border-radius: var(--radius-md);
  background: var(--surface-invert);
  color: var(--text-invert);
}
:root[data-theme="dark"] .tm__hero {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm__hero {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
}
.tm__h::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: var(--sp-4);
  border-radius: 2px;
  background: #c9a227;
}
.tm__k {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.6;
}
.tm__h {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.tm__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  opacity: 0.74;
  max-width: 56ch;
}

/* ---------- The two columns ---------- */
.tm__split { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 820px) {
  .tm__split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tm__sp {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tm__sph {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-title);
}
/* The mark repeats in the header so the column reads at a glance, before
   any of the words below it are read. Literal glyphs, never CSS escapes:
   update_post_meta() strips the backslash. */
.tm__sph::before { font-size: 0.8em; }
.tm__sp--y .tm__sph::before { content: "✓"; }
.tm__sp--n .tm__sph::before { content: "✕"; }
.tm__sp--y .tm__sph { background: color-mix(in srgb, var(--accent-life) 12%, transparent);     color: var(--accent-life); }
.tm__sp--n .tm__sph { background: color-mix(in srgb, var(--accent-breaking) 12%, transparent); color: var(--accent-breaking); }
.tm__l { list-style: none; margin: 0; padding: 0 var(--sp-5) var(--sp-4); }
.tm__l li {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}
.tm__l li:first-child { border-top: 0; }
.tm__l li b { color: var(--text-primary); font-weight: 700; }
.tm__l li::before {
  position: absolute;
  left: 0;
  top: var(--sp-3);
  font-weight: 700;
  line-height: var(--lh-mm);
}
.tm__sp--y li::before { content: "✓"; color: var(--accent-life); }
.tm__sp--n li::before { content: "✕"; color: var(--accent-breaking); }

/* ---------- The credit line, sized to be read and copied ---------- */
.tm__credit {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
/* No caps tracking on this label: it is Burmese, and letter-spacing breaks
   the script's stacked marks. Weight and colour carry it instead. */
.tm__cl { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-secondary); }
.tm__cb {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-title);
  overflow-x: auto;
}
.tm__cn { margin: var(--sp-3) 0 0; font-size: var(--fs-lg); line-height: var(--lh-mm); color: var(--text-secondary); }


/* ==========================================================================
   41. CONTACT PAGE — into the document family

   Contact was the only one of the five standing pages that was dark from top
   to bottom. Standards, Privacy and Terms each open with a dark panel and
   then run light; About does the same. Contact now matches: the dark ground
   shrinks to the opening panel and the three addresses become cards on the
   page's own surface.

   This is a clean break rather than an override war. The old markup used
   .poster / .door / .poster__* and all of that CSS is tuned for a dark
   ground; the markup now uses .ct__* instead, so none of it applies and
   nothing had to be out-specified. The §20-era .poster rules are left in
   place, unused, exactly as §21's were.

   Colour is information here too: the rail on each card is the desk colour
   the address belongs to — trust blue for the newsroom, breaking red for
   corrections, premium gold for advertising — the same three the fact-check
   scale uses.
   ========================================================================== */

.ct { padding-block: var(--sp-6) var(--sp-10); }

/* ---------- Opening panel ---------- */
.page__inner > .e-con.ct__hero { padding-inline: clamp(20px, 3.6vw, 44px); }
.ct__hero {
  padding: clamp(28px, 4.4vw, 56px) clamp(20px, 3.6vw, 44px);
  border-radius: var(--radius-md);
  background: var(--surface-invert);
  color: var(--text-invert);
}
:root[data-theme="dark"] .ct__hero {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ct__hero {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
}
/* The kicker used to read "NIYO MEDIA" in 11px tracked caps - the reader
   already knows whose site this is. It names the place instead, the way
   About's opening does, and it takes the gold rule with it so the rule still
   leads the panel. Unlike About's .band--ink this panel is dark in BOTH
   themes (§41 overrides --surface-invert to --surface-2 in dark), so one gold
   is correct here and no per-theme value is needed. */
.ct__k::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: var(--sp-4);
  border-radius: 2px;
  background: #e6c65c;
}
.ct__k {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-mm);
  color: #e6c65c;
}
.ct__h {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-title);
  text-wrap: balance;
}
/* 18px, matching About's .open__sub: this is a Burmese sentence on the most
   prominent panel on the page, sitting under a 36px headline. At 16px it read
   as a caption. */
.ct__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-mm);
  opacity: 0.74;
  max-width: 48ch;
}

/* ---------- The three addresses ---------- */
.ct__doors { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 900px) {
  .ct__doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ct__door {
  display: block;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--k, var(--border-strong));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ct__door:hover { background: var(--surface-2); border-color: var(--border-strong); border-left-color: var(--k, var(--border-strong)); }
.ct__dl { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-title); color: var(--k, var(--text-primary)); }
/* The address is the thing a reader came for, so it is the largest type on
   the card and breaks rather than overflowing on a narrow phone. */
.ct__dm {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-title);
  word-break: break-all;
}
.ct__dw { margin: var(--sp-3) 0 0; font-size: var(--fs-lg); line-height: var(--lh-mm); color: var(--text-secondary); }
.ct__dw b { color: var(--text-primary); font-weight: 700; }

/* ---------- Newsroom and social ---------- */
.ct__foot {
  display: grid;
  gap: var(--sp-5) var(--sp-10);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) { .ct__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct__fk { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-secondary); }
.ct__fv { margin: var(--sp-2) 0 0; font-size: var(--fs-lg); line-height: var(--lh-mm); }
.ct__fs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.ct__fs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ct__fs a:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-2); }

/* ==========================================================================
   42. ABOUT PAGE - the body bands ride the spine

   About keeps what it does best: the dark opening panel, the four Burmese
   figures under it, and the dark closing band that hands the reader on to
   Standards and Contact. Only the three middle bands change - creed, desks
   and team now sit on the same spine as Standards, Privacy and Terms, so a
   reader moving between the five pages meets one rhythm.

   The magazine grounds (--soft, --ink) come off those three: on the spine a
   tinted band would fight the hairline that separates the sections.

   .sec sits on an Elementor container here, not a div inside an html widget
   as it does on the other pages, so it needs .e-con to out-rank Elementor's
   own `.e-con.e-flex { display: flex }`.
   ========================================================================== */
.e-con.sec { display: flex; grid-template-columns: none; }
/* max-width has to match what the bands above and below settle on, not be
   switched off. .open__inner and .handoff__inner cap their own inner at
   --shell and centre it, so on a 1920 screen their text starts at 280 while
   an uncapped spine started at 40 - two different left edges down one page.
   Subtracting the gutter here lands the mark on the headline's edge at every
   width, because these containers carry the gutter as padding while the
   bands carry it inside their own inner. */
.e-con.sec > .e-con-inner {
  display: grid;
  gap: var(--sp-4) var(--sp-10);
  width: 100%;
  max-width: calc(var(--shell) - var(--gutter) * 2);
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .e-con.sec > .e-con-inner { grid-template-columns: 236px minmax(0, 1fr); }
}
/* grid items default to min-width:auto and a long Burmese line would push
   the column wider than its track */
.e-con.sec > .e-con-inner > * { min-width: 0; }
body.page-id-1684 .e-con.sec,
body.page-id-7234 .e-con.sec { padding-inline: var(--gutter); }


/* ---------- The opening panel names its place first ----------------------
   Founded in Taunggyi, in southern Shan State. That is the one fact that
   separates this newsroom from the Yangon and exile outlets, and until now it
   was buried in the third sentence of section 1. It reads before the line,
   in the same gold as the rule beneath it and the numerals on the spine. */
.open__rule + .open__place { margin-top: var(--sp-5); }
.open__place {
  margin: var(--sp-8) 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-mm);
  color: var(--panel-gold, #e6c65c);
}
.open__place + .open__line { margin-top: var(--sp-3); }

/* The panel's gold has to invert with the PANEL, not with the page.
   .band--ink takes --surface-invert, so in dark mode it becomes a white card
   - the same flip the footer cap makes, and deliberate - and the light gold
   that reads on black drops to 1.7:1 on white. One custom property, declared
   on the band and read by both the kicker and the rule, keeps the two in
   step; 7a5f10 measures 6.1:1 on the white panel. */
.band--ink { --panel-gold: #e6c65c; }
:root[data-theme="dark"] .band--ink { --panel-gold: #7a5f10; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--ink { --panel-gold: #7a5f10; }
}
.band--ink .open__rule { background: var(--panel-gold, var(--gold-line)); }

/* ---------- The three editions ------------------------------------------
   A numeral cannot tell a Pa-O reader that a Pa-O edition exists, so the
   language count left the figures band and became three named cells. They
   sit on the page's own ground rather than the dark panel, which keeps the
   panel to a single idea, and they ride the spine's left edge - which means
   undoing Elementor's boxed inner exactly the way .sec does above. */
.ab__intro { padding-block: var(--sp-8) 0; }
body.page-id-1684 .e-con.ab__intro,
body.page-id-7234 .e-con.ab__intro { padding-inline: var(--gutter); }
.e-con.ab__intro > .e-con-inner {
  width: 100%;
  max-width: calc(var(--shell) - var(--gutter) * 2);
  margin-inline: auto;
}

.ablangs {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 620px) {
  .ablangs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ablang {
  display: block;
  min-width: 0;
  padding: var(--sp-5);
  background: var(--background);
}
a.ablang { transition: background-color var(--t-fast) var(--ease); }
a.ablang:hover { background: var(--surface-2); }
.ablang.is-here { background: var(--surface); }
.ablang__s {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-title);
}
/* .lang__flag already carries the switcher's border and radius, so only the
   size changes here; flex: none stops a long script name squeezing it. */
.ablang__f { flex: none; width: 24px; height: 17px; }
.ablang__n {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  color: var(--text-secondary);
}
/* An edition with no stories prints its zero and is not a link - an empty
   archive is not worth a click. Dimming the name is the whole treatment:
   anything louder would read as a fault rather than as a desk not yet open. */
.ablang--empty .ablang__s { opacity: 0.5; }

/* ---------- The figures, now on the page's ground ------------------------
   Three figures, not four, and no longer at hero size: on the dark panel
   they were the only thing there, here they follow the editions and should
   not shout over them. */
/* Two figures, not four: the story count moved into the editions band and
   the language count became the band itself. They keep the editions' three
   columns rather than closing up into a pair - sharing one vertical rhythm
   with the band above reads as alignment, where a left-hugged pair under a
   full-width band read as an orphan. */
.ab__intro .figures {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
}
@media (max-width: 619px) {
  .ab__intro .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ab__intro .figure__n { font-size: var(--t-xl); }
/* .eyebrow is a shared class - archive.php prints it too - so About corrects
   only its own copy. 11px with caps tracking is a Latin eyebrow's recipe and
   ဆက်လက်ဖတ်ရှုရန် is not Latin. The same correction is owed on the archives. */
body.page-id-1684 .eyebrow,
body.page-id-7234 .eyebrow {
  font-size: var(--fs-md);
  letter-spacing: normal;
  text-transform: none;
}

/* ==========================================================================
   41b. CONTACT - three addresses, four channels

   The three e-mail cards used to sit side by side as equals, which read as a
   menu with no answer, and the four social accounts sat under them as 20px
   grey sprite glyphs. That ranking is backwards for a Myanmar readership:
   Facebook and Telegram carry more of this newsroom's reach than e-mail
   does. Both are numbered sections now, on the same rhythm as About.

   The e-mails became rows rather than cards for a reason the cards could not
   solve: niyomediacorrections@gmail.com is 31 characters, and in a third of a
   1140px page it either wrapped mid-address or shrank below reading size. A
   full-width row gives the address the line it needs.
   ========================================================================== */

/* ---------- Numbered section heads ---------- */
.ct__sec {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
/* The same watermark numeral §38 uses on the spine, at the smaller size an
   inline head needs. Mixed against the page rather than taken from
   --border-strong, for the reason recorded there. */
.ct__secn {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text-primary) 45%, var(--background));
  font-variant-numeric: tabular-nums;
}
.ct__sech {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-title);
}

/* ---------- The three addresses ---------- */
.ct__rows {
  display: grid;
  gap: 1px;
  margin-top: var(--sp-5);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ct__row {
  display: grid;
  gap: var(--sp-1) var(--sp-6);
  padding: var(--sp-5);
  background: var(--background);
  border-left: 3px solid var(--k, var(--border-strong));
  transition: background-color var(--t-fast) var(--ease);
}
@media (min-width: 760px) {
  .ct__row { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
}
.ct__row:hover { background: var(--surface-2); }
.ct__rl { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-title); color: var(--k, var(--text-primary)); }
.ct__rb { display: block; min-width: 0; }
/* The address is what the reader came for. break-all rather than break-word:
   a Gmail address has no break opportunities, so anything gentler overflows.

   The size steps down below 400px instead, because when this does break it
   breaks BADLY: measured on a 360px screen, niyomediacorrections@gmail.com
   at 18px split as 'niyomediacorrections@gmai / l.com'. break-all, anywhere
   and break-word all chose the same mid-word point, and a <wbr> after the @
   was worse still - it forced two lines even in a 967px column. One size
   down is the only thing that keeps every address on one line, from 360px
   up. Below ~355 the longest one still wraps; the design's stated floor is
   359. */
.ct__rm {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-title);
  word-break: break-all;
}
@media (min-width: 400px) {
  .ct__rm { font-size: var(--fs-xl); }
}
/* The last 14px. On a 320px screen even 16px left one character stranded on
   a second line, which reads worse than a clean two-line break. Trimming the
   row's side padding by 8px on each side buys 16px and puts the longest
   address back on one line. 320 is below this design's stated floor of 359,
   so the trim is scoped there and nothing wider is touched. */
@media (max-width: 359px) {
  .ct__row { padding-inline: var(--sp-3); }
}
.ct__rw { display: block; margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: var(--lh-mm); color: var(--text-secondary); }
.ct__rw b { color: var(--text-primary); font-weight: 700; }

/* ---------- The four channels ---------- */
.ct__soc { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
/* Four across from 768, not 900: between those two the cards were 358-420px
   wide holding a 30px mark and two short lines, which read as four half-empty
   boxes. At 768 each card is 171px and the longest handle (@niyomedia14, 85px)
   still clears the mark and the padding. */
@media (min-width: 480px) { .ct__soc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .ct__soc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ct__s {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: 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);
}
.ct__s:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* Elementor's `.elementor img` reset does not reach inline SVG, but the
   theme's own `svg { display:block }` would collapse the flex baseline, so
   the size is stated here rather than inherited. flex:none keeps a long
   handle from squeezing the mark. */
.ct__slogo { flex: none; width: 30px; height: 30px; }
.ct__st { display: grid; min-width: 0; }
.ct__sn { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-title); }
.ct__sh { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
/* ==========================================================================
   43. ELEMENTOR'S FACTORY TEXT COLOUR

   Elementor generates `.elementor-widget-text-editor { color: var(
   --e-global-color-text) }` on every page, and that global is still its
   out-of-the-box #7A7A7A. It is a class on the widget WRAPPER, so it beats
   inheritance outright: every text-editor widget on this site rendered mid
   grey whatever the theme or the reader's colour scheme said. On the Contact
   hero that left the h1 at 3.76:1 on its own panel; in the footer it froze
   four blocks at a grey that never answered dark mode.

   §25 already found this and beat it in one place - .world__dek.elementor-
   widget, at (0,2,0). That fix stands and still wins over this one; this is
   the same correction made once for everything else. Nothing in this theme
   chose #7A7A7A: colour is governed by the tokens in §1, so the wrapper goes
   back to inheriting and anything wanting its own colour states it on the
   inner element, where the theme's classes already sit.
   ========================================================================== */
/* (0,2,0), not (0,1,0): Elementor's rule lives in the per-PAGE stylesheet
   (post-7045.css and friends), which the browser loads AFTER this kit file.
   At equal weight load order decides and the factory grey wins, so the class
   is doubled up. */
.elementor-widget.elementor-widget-text-editor { color: inherit; }
/* ==========================================================================
   44. THE GAP UNDER THE HEADER, ON THE TWO PANEL DOCUMENTS

   .doc__intro carries padding-block: var(--sp-16) var(--sp-10) - 72px above
   its content. That was written when a document page opened with a kicker
   and a title on white, where 72px is an editorial opening, and Standards
   still opens that way and still wants it.

   Privacy and Terms no longer do. Their intro is a dark panel now, and the
   panel brought its own margin-top: var(--sp-6). Nobody removed the old
   padding, so the two stacked: 72 + 24 = 96px of white between the header
   and the panel, against 24px on Contact and 0 on About. Zeroing the top
   here leaves the panel's own 24px, which is exactly Contact's figure.

   Scoped by page id rather than by class because .doc__intro is shared with
   Standards, whose 72px is correct.
   ========================================================================== */
body.page-id-3 .doc__intro,
body.page-id-7237 .doc__intro,
body.page-id-7051 .doc__intro,
body.page-id-7238 .doc__intro { padding-top: 0; }/* End custom CSS */