/* ==========================================================
   MMCO — the public site.

   THE IDEA. MMCO's mark is a record: concentric arcs rising over the Yangon
   skyline. So the whole site is built from grooves. They sit behind the
   masthead, they turn slowly beside the headline, they mark each section, and
   they are the only decorative device anywhere. One idea, used everywhere,
   beats five ideas used once each.

   THE CONSTRAINT. This is an official body's website, read by musicians in
   their sixties on cheap phones over slow connections, and by lawyers and
   foreign societies on desktops. So: no hidden navigation, no hover-only
   anything, no carousel, no modal. Type is large, contrast is high, targets
   are wide, and every page is readable the moment the HTML arrives — the
   stylesheet and the fonts are the only blocking requests, and there are no
   frameworks at all.

   RELATION TO THE FORMS. The member form at /m/ is the same institution and
   shares its navy, its seal and Pyidaungsu. This is its public face, so it is
   warmer (paper rather than desk grey), larger, and set on an editorial grid
   instead of a single sheet.
   ========================================================== */

:root {
  color-scheme: light;

  /* surfaces — warm paper, so the navy reads as ink and not as chrome */
  --paper: #f7f5f0;
  --paper-lift: #fffefb;
  --paper-sunk: #efece4;

  /* ink */
  --ink: #12131a;
  --ink-mid: #474a57;
  --ink-soft: #6c707e;
  --on-navy: #eceaf4;
  --on-navy-soft: #a9adc9;

  /* MMCO's navy, sampled from the seal artwork — the only colour on the site */
  --navy: #252d5e;
  --navy-deep: #161b3c;
  --navy-soft: #4a5183;
  --navy-wash: #e9e9f1;

  /* structure */
  --hair: rgba(18, 19, 26, .10);
  --hair-strong: rgba(18, 19, 26, .22);
  --hair-navy: rgba(255, 255, 255, .16);

  --sans: "Pyidaungsu", "Padauk", "Myanmar Text", system-ui, sans-serif;
  --serif: "Newsreader", Iowan Old Style, Charter, Georgia, serif;
  --mono: "MMCO Mono", ui-monospace, SFMono-Regular, monospace;

  /* one measure, one rhythm */
  --page: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-gap: clamp(64px, 11vw, 148px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* PROJECT RULE — a logo is never distorted, anywhere, for any reason.
   width/height attributes on <img> exist to reserve space; this keeps them
   from being read as a fixed box. */
img { max-width: 100%; display: block; height: auto; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* English sets in Newsreader: an editorial serif with real optical sizing,
   which is what gives a long legal page its authority. Myanmar never changes
   face — Pyidaungsu is the only Myanmar text face on the site. */
.lang-en {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.68;
  font-optical-sizing: auto;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.32; }
.lang-en h1, .lang-en h2, .lang-en h3 { font-weight: 600; line-height: 1.14; letter-spacing: -.012em; }
p { margin: 0; }
/* Stops a paragraph ending on a single stranded word. Browsers without it
   simply wrap as before, so there is nothing to fall back to. */
.doc-p, .clause-text, .person-duty, .obj-text, .notice { text-wrap: pretty; }
/* Short standfirsts are balanced instead: three even lines read better than
   two full ones and a stub. */
.hero-lede, .sec-lede, .page-lede, .rule-text, .join-text { text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration-color: var(--hair-strong); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--navy); color: #fff; padding: 12px 22px;
  text-decoration: none; border-radius: 0 0 4px 4px; font-size: 15px;
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- the groove: the one device ---------- */

.grooves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--navy);
  stroke-width: .35;
  opacity: .14;
  overflow: visible;
}
.grooves circle {
  transform-origin: 50% 50%;
  animation: groove-turn 42s linear infinite;
  animation-delay: calc(var(--i) * -3.5s);
}
/* Perfect circles cannot be seen to rotate, so each ring carries a gap: the
   gaps drift against each other and the mark reads as a record turning. */
.grooves circle:nth-child(odd) { stroke-dasharray: 44 210; }
.grooves circle:nth-child(even) { stroke-dasharray: 96 190; animation-direction: reverse; }
/* Longer arcs and wider gaps read as a record's rim rather than as dashes. */
.hero-grooves circle { animation-duration: 64s; }
.hero-grooves circle:nth-child(odd) { stroke-dasharray: 150 128; }
.hero-grooves circle:nth-child(even) { stroke-dasharray: 96 190; }

@keyframes groove-turn { to { transform: rotate(360deg); } }

/* ---------- top strip ---------- */

.strip {
  background: var(--navy-deep);
  color: var(--on-navy);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: .005em;
}
.lang-en .strip { font-family: var(--sans); }
.strip-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.strip-mark {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--on-navy-soft);
  flex: none;
}
.strip-text { flex: 1 1 auto; min-width: 0; }

/* Myanmar stacks marks above and below, so this pill is given room for them:
   at a tighter padding the upper diacritic of မြန်မာ sat on the border. */
.lang {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1.85;
  text-decoration: none;
  padding: 2px 13px 4px;
  border: 1px solid var(--hair-navy);
  border-radius: 999px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lang:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .34); }
.lang-key {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}
.lang-val { font-weight: 700; }
.lang-en .lang-val { font-family: var(--sans); font-weight: 400; }

/* ---------- masthead ----------
   Two rows, the way an official paper sets its front page: the name of the
   body, then a ruled line, then the sections. One row cannot hold eight
   sections and a bilingual wordmark without crushing one of them, and the
   wordmark is not the part that may give way. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--hair);
}
.masthead-top { border-bottom: 1px solid var(--hair); }
.masthead-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
}
.brand img { width: 44px; flex: none; transition: transform .5s var(--ease-out); }
.brand:hover img { transform: rotate(-6deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-en {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.45;
  white-space: nowrap;
}
.brand-my {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
}

.masthead-call {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}
.masthead-call-label { color: var(--ink-soft); }
.lang-my .masthead-call-label { font-size: 13.5px; }
.masthead-call a {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.masthead-call a:hover { text-decoration: underline; }

.sitenav-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 30px);
}
.sitenav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.lang-en .sitenav a { font-family: var(--sans); font-size: 14.5px; }
.sitenav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--ease-out);
}
.sitenav a:hover { color: var(--ink); }
.sitenav a:hover::after { transform: scaleX(1); }
.sitenav a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.sitenav a[aria-current="page"]::after { transform: scaleX(1); }

.menu-btn { display: none; }

/* ---------- layout ---------- */

.main { display: block; }

.sec {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--sec-gap) var(--gutter);
}
.sec + .sec { padding-top: 0; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-soft);
  line-height: 1.6;
}
.lang-my .kicker { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; text-transform: none; font-weight: 700; }

.sec-head { max-width: 46rem; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-title {
  font-size: clamp(25px, 3.4vw, 40px);
  margin-top: 14px;
  letter-spacing: -.005em;
}
.lang-my .sec-title { line-height: 1.5; }
.sec-lede {
  margin-top: 16px;
  color: var(--ink-mid);
  font-size: 17.5px;
  max-width: 38rem;
}
.lang-en .sec-lede { font-size: 19px; }

.sec-more { margin-top: clamp(26px, 3vw, 40px); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 92px) var(--gutter) 0;
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .78fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.hero-kicker { margin-bottom: 20px; }
/* Sized so that each authored line actually fits its column. At 74px
   "Protecting the rights" broke after "the", which turned a two-line headline
   into four ragged ones — the line breaks here are written deliberately and
   the type is set to respect them. */
.hero-title {
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.lang-my .hero-title { font-size: clamp(27px, 4.3vw, 53px); line-height: 1.44; letter-spacing: 0; }
.hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(.42em);
  animation: rise .95s var(--ease-out) forwards;
  animation-delay: calc(140ms + var(--d));
}
.hero-title .line:last-child { color: var(--navy); }

@keyframes rise { to { opacity: 1; transform: none; } }

.hero-lede {
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 34rem;
  color: var(--ink-mid);
  font-size: 17.5px;
  opacity: 0;
  animation: rise .9s var(--ease-out) .42s forwards;
}
.lang-en .hero-lede { font-size: 20px; line-height: 1.6; }

.hero-actions {
  margin-top: clamp(26px, 3.4vw, 42px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  opacity: 0;
  animation: rise .9s var(--ease-out) .56s forwards;
}

/* The seal is the organisation's face and the largest thing on the page after
   the headline. It is given room to be that: the mark runs past the measure on
   one side and the grooves are allowed to escape the box entirely, so the
   record reads as bigger than the page rather than as an icon dropped in a
   corner. Never cropped, never distorted — only scaled. */
.hero-mark {
  position: relative;
  aspect-ratio: 1;
  width: calc(100% + clamp(0px, 4vw, 70px));
  margin-inline-start: auto;
}
/* A halo, not a background: four rings in a band outside the seal, turning
   slowly against each other. Nothing crosses the artwork. */
.hero-grooves {
  opacity: .3;
  stroke-width: .22;
  transform: scale(1.04);
}
.hero-seal {
  position: absolute;
  left: 50%; top: 50%;
  width: 78%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: seal-in 1.5s var(--ease-out) .28s forwards;
}
@keyframes seal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to { opacity: .96; transform: translate(-50%, -50%) scale(1); }
}

.hero-facts {
  margin-top: clamp(48px, 7vw, 92px);
  border-top: 1px solid var(--hair);
  padding-top: clamp(22px, 2.6vw, 34px);
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin: 0;
}
.fact dt {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.lang-my .fact dt { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.fact dd {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.lang-my .fact dd { line-height: 1.9; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .3s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang-en .btn { font-family: var(--sans); font-weight: 500; font-size: 15.5px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-deep); }
.btn-quiet { border-color: var(--hair-strong); color: var(--ink); }
.btn-quiet:hover { border-color: var(--navy); color: var(--navy); }
.btn-on-navy { background: var(--paper); color: var(--navy); }
.btn-on-navy:hover { background: #fff; }

.arrow {
  width: 18px; height: 8px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 42%, 68% 42%, 68% 0, 100% 50%, 68% 100%, 68% 58%, 0 58%);
  transition: transform .34s var(--ease-out);
}
.btn:hover .arrow, .link-arrow:hover .arrow, .rule-card:hover .arrow { transform: translateX(5px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--navy-wash);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease);
}
.link-arrow:hover { border-color: var(--navy); }
.lang-en .link-arrow { font-family: var(--sans); font-weight: 500; }

/* ---------- objectives ---------- */

.objs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 34px);
  counter-reset: obj;
}
.obj {
  position: relative;
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  background: var(--paper-lift);
  border: 1px solid var(--hair);
  border-radius: 3px;
  transition: border-color .3s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.obj:hover {
  border-color: var(--navy-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(18, 19, 26, .5);
}
.obj-key {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.lang-en .obj-key { font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.obj-text { font-size: 16.5px; line-height: 1.95; color: var(--ink-mid); }
.lang-en .obj-text { font-size: 18px; line-height: 1.62; }

/* ---------- rule cards ---------- */

.rule-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}
.rule-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--paper-lift);
  border: 1px solid var(--hair);
  border-radius: 3px;
  text-decoration: none;
  isolation: isolate;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s var(--ease);
}
.rule-card:hover {
  transform: translateY(-4px);
  border-color: var(--navy-soft);
  box-shadow: 0 30px 60px -40px rgba(18, 19, 26, .6);
}
.rule-grooves {
  left: auto; right: -28%;
  top: -18%;
  width: 78%; height: auto;
  aspect-ratio: 1;
  opacity: .1;
  z-index: -1;
  transition: opacity .45s var(--ease);
}
.rule-card:hover .rule-grooves { opacity: .2; }
.rule-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.lang-my .rule-label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.rule-title { font-size: clamp(21px, 2.3vw, 28px); }
.rule-text { color: var(--ink-mid); font-size: 16.5px; max-width: 26rem; }
.rule-more {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 700;
  font-size: 15.5px;
}
.lang-en .rule-more { font-family: var(--sans); font-weight: 500; }

/* ---------- join panel ---------- */

.join-panel {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-navy);
  border-radius: 4px;
  padding: clamp(36px, 6vw, 84px) clamp(26px, 5vw, 76px);
}
.join-grooves {
  left: auto; right: -14%;
  top: -60%;
  width: 62%; height: auto;
  aspect-ratio: 1;
  stroke: #fff;
  opacity: .16;
}
.join-copy { position: relative; max-width: 38rem; }
.join-title { font-size: clamp(24px, 3.2vw, 38px); color: #fff; }
.join-text { margin: 18px 0 30px; color: var(--on-navy); font-size: 17.5px; }
.lang-en .join-text { font-size: 19px; }

/* ---------- plain pages ---------- */

.sec-plain { min-height: 46vh; }
.page-head { max-width: 46rem; }
.page-title { margin-top: 14px; font-size: clamp(28px, 4.4vw, 48px); }
.lang-my .page-title { line-height: 1.45; }

.notice {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--navy-wash);
  border-left: 3px solid var(--navy);
  border-radius: 0 3px 3px 0;
  color: var(--ink-mid);
  font-size: 16.5px;
  max-width: 44rem;
}
.notice-mark {
  flex: none;
  margin-top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
}

/* ---------- document pages ----------
   Rules, constitution, membership: pages people arrive at looking for one
   clause. Everything here serves that — numbered sections, an anchor on each,
   and a contents list that stays put while you read. */

.sec-doc { padding-top: clamp(38px, 5vw, 64px); }

.page-head { max-width: 44rem; }
.page-title { margin-top: 12px; font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -.015em; }
.lang-my .page-title { line-height: 1.42; letter-spacing: 0; }
.page-lede {
  margin-top: 18px;
  font-size: 18px;
  color: var(--ink-mid);
}
.lang-en .page-lede { font-size: 21px; line-height: 1.55; }

/* Said plainly on every English page: this is a translation, and the Myanmar
   is the text that governs. */
.authoritative {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--navy-soft);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34rem;
}

.doc-layout {
  margin-top: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}

.toc {
  position: sticky;
  top: calc(var(--stick, 120px) + 18px);
  border-top: 2px solid var(--navy);
  padding-top: 16px;
}
.toc-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 12px;
}
.lang-my .toc-label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.toc ol { display: grid; gap: 2px; }
.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  color: var(--ink-mid);
  transition: color .2s var(--ease);
}
.toc a:hover { color: var(--navy); }
.toc a.is-current { color: var(--navy); font-weight: 700; }
.toc-n {
  flex: none;
  min-width: 1.4em;
  color: var(--navy-soft);
  font-family: var(--mono);
  font-size: 12.5px;
  padding-top: .18em;
}
.lang-my .toc-n { font-family: var(--sans); font-size: 14px; }

.doc-body { max-width: 44rem; }
.doc-sec { scroll-margin-top: calc(var(--stick, 120px) + 24px); }
.doc-sec + .doc-sec { margin-top: clamp(38px, 5vw, 62px); }

.doc-sec-title {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: clamp(20px, 2.3vw, 27px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.lang-my .doc-sec-title { line-height: 1.5; }
.doc-sec-n {
  flex: none;
  color: var(--navy);
  font-family: var(--mono);
  font-size: .68em;
}
.lang-my .doc-sec-n { font-family: var(--sans); font-size: .8em; }

.doc-p { margin-bottom: 1.1em; color: var(--ink-mid); }
.doc-p:last-child { margin-bottom: 0; }
.lang-en .doc-p { font-size: 18.5px; }

.clauses { display: grid; gap: clamp(13px, 1.6vw, 19px); margin: 6px 0 1.2em; }
.clauses:last-child { margin-bottom: 0; }
.clause { display: flex; gap: clamp(12px, 1.5vw, 18px); }
.clause-key {
  flex: none;
  min-width: 2.6em;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding-top: .1em;
}
.lang-en .clause-key { font-family: var(--mono); font-size: 13px; font-weight: 600; text-transform: uppercase; padding-top: .28em; }
.clause-text { color: var(--ink-mid); }
.lang-en .clause-text { font-size: 18.5px; }

.bullets { display: grid; gap: 9px; margin: 4px 0 1.2em; padding-left: 2.6em; }
.bullets li { position: relative; color: var(--ink-mid); }
.bullets li::before {
  content: '';
  position: absolute;
  left: -1.1em; top: .82em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--navy-soft);
}
.lang-en .bullets li::before { top: .62em; }

.rows { margin: 4px 0 1.2em; display: grid; }
.rows .row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 8px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.rows .row:first-child { border-top: 1px solid var(--hair); }
.rows dt { color: var(--ink-soft); font-size: 15.5px; }
.rows dd { margin: 0; color: var(--ink); }

/* The numbers people actually come to check. */
.rates { margin: 8px 0 1.2em; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; }
.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: baseline;
  padding: 15px 20px;
  background: var(--paper-lift);
}
.rate dt { color: var(--ink-mid); font-size: 16px; }
.rate dd {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  font-size: 17px;
}
.lang-en .rate dd { font-family: var(--mono); font-size: 15.5px; font-weight: 600; }
.rate.is-total { background: var(--navy-wash); }
.rate.is-total dt, .rate.is-total dd { font-weight: 700; color: var(--navy); }

/* ---------- organisation ---------- */

.org-block { margin-top: clamp(40px, 5.5vw, 72px); }
.org-title {
  font-size: clamp(20px, 2.3vw, 27px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: clamp(20px, 2.4vw, 30px);
  max-width: 44rem;
}
.lang-my .org-title { line-height: 1.5; }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.person {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--paper-lift);
  border: 1px solid var(--hair);
  border-radius: 3px;
  border-top: 2px solid var(--navy);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.person:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -34px rgba(18, 19, 26, .55); }
.person-role {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.lang-my .person-role { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.person-names {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
.lang-en .person-names { font-size: 21px; font-weight: 600; }
.person-names .sep { color: var(--rule-strong, var(--navy-soft)); font-weight: 400; }
.person-duty { margin-top: 12px; font-size: 15.5px; color: var(--ink-mid); line-height: 1.85; }
.lang-en .person-duty { font-size: 17px; line-height: 1.55; }

/* ---------- contact ---------- */

.contact-grid {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.contact-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(26px, 3vw, 38px);
  background: var(--paper-lift);
  border: 1px solid var(--hair);
  border-radius: 3px;
}
/* Anchored into the corner like the rule cards. Floating in the middle of a
   wide card it read as a smudge rather than as the mark. */
.contact-grooves { left: auto; right: -26%; top: -52%; width: 66%; height: auto; aspect-ratio: 1; opacity: .11; z-index: -1; }
.contact-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 14px;
}
.lang-my .contact-label { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.contact-addr { font-size: 18px; line-height: 1.9; max-width: 22rem; }
.contact-person {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.lang-en .contact-person { font-size: 20px; font-weight: 600; }
.contact-phones { display: grid; gap: 10px; }
.contact-phones a {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.contact-phones a:hover { color: var(--navy-deep); text-decoration: underline; }

/* ---------- footer ---------- */

.foot {
  /* No margin of its own: the last section already ends on a full --sec-gap of
     padding, and doubling it left a 300px hole above the footer on short
     pages. */
  margin-top: 0;
  background: var(--navy-deep);
  color: var(--on-navy);
  padding: clamp(44px, 6vw, 76px) 0 26px;
}
.lang-en .foot { font-family: var(--sans); font-size: 15px; }
.foot-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
}
.foot-brand img {
  width: 54px;
  filter: brightness(0) invert(1);
  opacity: .8;
  margin-bottom: 18px;
}
.foot-name { font-weight: 700; color: #fff; }
.foot-addr { margin-top: 10px; color: var(--on-navy-soft); font-size: 15px; line-height: 1.85; max-width: 24rem; }

.foot-nav ul { display: grid; gap: 9px; }
.foot-nav a { text-decoration: none; color: var(--on-navy); font-size: 15.5px; transition: color .2s var(--ease); }
.foot-nav a:hover { color: #fff; text-decoration: underline; }

.foot-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
  margin-bottom: 12px;
}
.lang-my .foot-label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.foot-phones { display: grid; gap: 7px; }
.foot-phones a {
  font-family: var(--mono);
  font-size: 15px;
  text-decoration: none;
  color: #fff;
}
.foot-phones a:hover { text-decoration: underline; }

.foot-rule {
  max-width: var(--page);
  margin: clamp(34px, 4vw, 54px) auto 0;
  height: 1px;
  background: var(--hair-navy);
}
.foot-legal {
  max-width: var(--page);
  margin: 18px auto 0;
  padding: 0 var(--gutter);
  font-size: 13px;
  color: var(--on-navy-soft);
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
/* Nothing may stay invisible because a script did not run. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- narrow screens ---------- */

@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-mark { order: -1; width: 100%; max-width: 300px; margin-inline: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 1020px) {
  body { font-size: 17px; }

  .doc-layout { grid-template-columns: 1fr; }
  .toc { position: static; margin-bottom: 8px; }
  .toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 20px; }

  /* The wordmark must never be squeezed, so at this width the phone number
     leaves the masthead instead — it is in the strip's reach and in the
     footer, and the menu button has to fit. */
  /* An element with backdrop-filter becomes the containing block for its
     position:fixed descendants, which silently collapsed the open menu to
     nothing. The blur is a desktop nicety; a phone keeps the solid bar. */
  .masthead { backdrop-filter: none; background: var(--paper); }
  .masthead-call { display: none; }
  .brand { flex: 1 1 auto; }
  .brand-en, .brand-my { white-space: normal; }
  .brand-en { font-size: 10px; letter-spacing: .1em; }
  .brand-my { font-size: 14px; }
  .brand img { width: 38px; }
  /* The page already declares its language; the masthead does not need to say
     the name twice in a column four lines deep. */
  .lang-my .brand-en { display: none; }
  .lang-en .brand-my { display: none; }
  .objs, .rule-cards { grid-template-columns: 1fr; }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 9px 16px 9px 13px;
    background: none;
    border: 1px solid var(--hair-strong);
    border-radius: 999px;
    font: inherit;
    font-size: 14.5px;
    color: var(--ink);
    cursor: pointer;
  }
  .lang-en .menu-btn { font-family: var(--sans); }
  .menu-bars { display: grid; gap: 4px; width: 17px; }
  .menu-bars i {
    display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }
  .menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .sitenav {
    position: fixed;
    inset: auto 0 0 0;
    top: var(--nav-top, 74px);
    background: var(--paper);
    border-top: 1px solid var(--hair);
    padding: 8px var(--gutter) 40px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease-out), visibility .3s;
  }
  .sitenav.open { visibility: visible; opacity: 1; transform: none; }
  .sitenav-in { display: block; padding: 0 var(--gutter); }
  /* Big, obvious, one per line — the whole point of this site is that someone
     who does not use websites much can still find the rules. */
  .sitenav a {
    padding: 17px 0;
    font-size: 19px;
    border-bottom: 1px solid var(--hair);
    color: var(--ink);
  }
  .lang-en .sitenav a { font-size: 18px; }
  .sitenav a::after { display: none; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; }
  .brand-my { font-size: 13px; }
  .brand img { width: 40px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-title .line, .hero-lede, .hero-actions, .hero-seal { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- print ---------- */

@media print {
  .strip, .masthead, .foot, .hero-mark, .grooves { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .sec { padding: 0 0 18pt; }
  .reveal { opacity: 1; transform: none; }
}