/* ==========================================================================
   NNP RAISINS — NEWS POST, INC CONGRESS MACAO 2026: MACAO THROUGH THE LETTERS
   (v1, 2026-10-07). Loaded by news/inc-congress-macao-2026/ only, after site.css.

   The city is seen only inside the word: MACAO set huge on the variable
   Bricolage with the night skyline as its fill (`background-clip: text`);
   the letters' weight is `--ml-w` and the city's position inside them
   `--ml-px`, both written by post-letters.js. On arrival the letters
   thicken from a hairline; the scroll moves the city through them; then
   the word grows past the screen and the city is seen whole. Below, the
   two phone clips at their true size (464px) and the card.

   ⚠ THE BASE STATE IS THE READABLE DOCUMENT: the word with the city in
     it (pure CSS), the sentences, the facts, the screens, the next show.
     `.ml-live` (desktop, one pinned scene) / `.ml-flat` (phone) come from
     post-letters.js.
   ⚠ The word's fill is the 1536 webp as a CSS background; the full-bleed
     reveal is the <img> behind it. Same file, one fetch.
   ⚠ The clips are 464×848 phone files: `.ml-screen` caps them at 464px
     and never lets them grow. That rule is the whole reason this page
     replaced the three windows.
   ⚠ NO CSS TRANSITION on anything the script tweens. Grain at a trace.
   ========================================================================== */

.ml-dark-page, .ml-dark-page body { background: #07060d; }
.ml-dark-page body { padding-top: 0; }
.ml { --ml-bg: #07060d; --ml-gold: #f3c46b; --ml-w: 800; --ml-px: 50%;
      position: relative; background: var(--ml-bg); color: var(--chalk); overflow-x: clip; }

/* ------------------------------------------------------- masthead ---- */
.ml-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.ml-dark-page .masthead.is-stuck { background: rgba(7,6,13,.92); border-bottom-color: rgba(242,237,248,.12); }
.ml-dark-page .masthead .brand { color: #fff; }
.ml-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .ml-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .ml-dark-page .masthead .mainnav a:not(.btn):hover,
  .ml-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .ml-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .ml-dark-page .masthead .btn-primary::before { background: #fff; }
  .ml-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.ml-kick { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ml-gold); margin: 0 0 18px; }
.ml-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(40px, 5.4vw, 92px); line-height: .94; letter-spacing: -.05em; margin: 0; text-wrap: balance; }
.ml-h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.ml-h2 .w > span { display: inline-block; }
.ml-lead { margin: 0; max-width: 44ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: var(--chalk); text-shadow: 0 2px 18px rgba(7,6,13,.8); }
.ml-p { position: relative; margin: 0; padding-left: 52px; max-width: 44ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--chalk); text-shadow: 0 2px 18px rgba(7,6,13,.85); }
.ml-n { position: absolute; left: 0; top: .55em; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .18em; color: var(--ml-gold); }
.ml-n::after { content: ''; position: absolute; left: 0; top: 1.9em; width: 24px; height: 1px; background: var(--ml-gold); opacity: .6; }
.ml-facts { margin: 24px 0 0 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.ml-facts > div { display: grid; gap: 3px; padding: 8px 0 0; border-top: 1px solid rgba(242,237,248,.2); }
.ml-facts dt { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ml-gold); }
.ml-facts dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.15; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 14px rgba(7,6,13,.85); }

/* ============================================== THROUGH THE LETTERS (base) */
.ml-scene { position: relative; }
.ml-stage { position: relative; display: flex; flex-direction: column; gap: 30px; padding: calc(var(--mast-h, 90px) + 24px) var(--spine) 60px; overflow: hidden; }
.ml-col { display: contents; }
.ml-kick[data-ml-kick] { order: 1; margin: 0; } .ml-word { order: 2; } .ml-city { order: 3; } [data-ml-slot="head"] { order: 4; } [data-ml-slot="p1"] { order: 5; } [data-ml-slot="p2"] { order: 6; } .ml-end { order: 7; }
/* the word: the city inside the letters */
.ml-word { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wght' var(--ml-w), 'opsz' 96; line-height: .8; letter-spacing: -.04em; white-space: nowrap;
  font-size: clamp(64px, 22vw, 420px); color: transparent; -webkit-text-fill-color: transparent;
  background-image: url("../img/news-inc26-macao-1536.webp"); background-size: cover; background-position: var(--ml-px) 56%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; padding: .06em 0 .02em; }
.ml-city { position: relative; margin: 0 calc(-1 * var(--spine)); overflow: hidden; }
.ml-city-img { display: block; width: 100%; height: auto; }
.ml-city-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,6,13,.3) 0%, rgba(7,6,13,0) 30%, rgba(7,6,13,0) 70%, rgba(7,6,13,.7) 100%); }
.ml-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .015; background: url("../img/grain-256.png") repeat; background-size: 160px 160px; }
.ml-col > *, .ml-kick, .ml-word { position: relative; z-index: 2; }
.ml-hint { display: none; }

/* ============================================== THROUGH THE LETTERS (live) */
.ml-live .ml-scene { height: 560vh; }
.ml-live .ml-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ml-live .ml-stage { display: block; height: 100%; padding: 0; overflow: hidden; }
.ml-live .ml-city { position: absolute; inset: 0; z-index: 0; margin: 0; opacity: 0; }
.ml-live .ml-city-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ml-live .ml-city-veil { background:
  linear-gradient(180deg, rgba(7,6,13,.45) 0%, rgba(7,6,13,0) 26%, rgba(7,6,13,0) 60%, rgba(7,6,13,.82) 100%),
  linear-gradient(90deg, rgba(7,6,13,.4) 0%, rgba(7,6,13,0) 45%); }
.ml-live .ml-kick[data-ml-kick] { position: absolute; z-index: 2; left: 50%; top: 20vh; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.ml-live .ml-word { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -56%); font-size: min(26vw, 58vh); padding: .08em .04em .04em; transform-origin: 50% 50%; will-change: transform, opacity; }
.ml-live .ml-col { display: grid; position: absolute; z-index: 5; left: max(var(--gut), calc(50vw - 760px)); right: max(var(--gut), calc(50vw - 760px)); bottom: 7vh; pointer-events: none; }
.ml-live .ml-col > * { grid-area: 1 / 1; align-self: end; margin: 0; }
.ml-live .ml-lead { max-width: 52ch; text-align: center; justify-self: center; }
.ml-live .ml-end { display: grid; grid-template-columns: minmax(0, 44ch) auto; column-gap: 5vw; align-items: end; }
.ml-live .ml-end .ml-facts { margin: 0 0 .3em; grid-template-columns: repeat(2, auto); gap: 10px 36px; }
.ml-live .ml-end .ml-facts dd { white-space: nowrap; }
.ml-live .ml-hint { display: block; position: fixed; left: 50%; bottom: 14px; z-index: 6; margin: 0; transform: translateX(-50%); white-space: nowrap; opacity: 0;
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,237,248,.7); }
.ml-live .ml-hint i { display: inline-block; width: 1px; height: 18px; margin-right: 12px; vertical-align: middle; background: rgba(242,237,248,.5); }

/* the phone: the word at full width, the city as a band under it */
.ml-flat .ml-word { font-size: 23.5vw; letter-spacing: -.045em; }
.ml-flat .ml-city { aspect-ratio: 3 / 2; }
.ml-flat .ml-city-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- the screens ---- */
.ml-screens { position: relative; padding: clamp(70px, 10vh, 140px) 0 0; }
.ml-screens-head .ml-h2 { max-width: 13ch; }
.ml-shelf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3.4vw, 56px); align-items: end; margin-top: clamp(30px, 4vh, 56px); }
.ml-screen { margin: 0; width: min(464px, 24vw, 56vh); }
.ml-screen-in { position: relative; aspect-ratio: 464 / 848; overflow: hidden; border-radius: 10px; background: #000;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.12), 0 0 60px -10px rgba(243,196,107,.18); }
.ml-screen-in video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-screen figcaption, .ml-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 14px 2px 0;
  font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,237,248,.55); }
.ml-screen figcaption span:first-child, .ml-card figcaption span:first-child { color: #fff; }
.ml-card { margin: 0 0 8vh; }
.ml-card-in { overflow: hidden; border-radius: 6px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1); }
.ml-card-in img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------ the next show ---- */
.ml-next { position: relative; padding: clamp(80px, 12vh, 160px) 0 clamp(100px, 15vh, 180px); }
.ml-next-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 5vw, 96px); }
.ml-addr { margin: clamp(26px, 3.4vw, 44px) 0 0; max-width: 460px; display: grid; }
.ml-addr > div { display: grid; gap: 4px; padding: 12px 0 11px; border-top: 1px solid rgba(242,237,248,.14); }
.ml-addr > div:last-child { border-bottom: 1px solid rgba(242,237,248,.14); }
.ml-addr dt { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ml-gold); }
.ml-addr dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.12; letter-spacing: -.03em; color: #fff; }
.ml-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.4vw, 40px); }
.ml-btn-ghost { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); }
.ml-btn-ghost:hover, .ml-btn-ghost:focus-visible { border-color: #fff; color: #fff; }
.ml-tilt-room { perspective: 1400px; }
.ml-poster { position: relative; margin: 0; border-radius: 8px; overflow: hidden; clip-path: inset(0 round 8px); transform-style: preserve-3d;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1) inset; }
.ml-poster img { display: block; width: 100%; height: auto; }
.ml-poster-sheen { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 58%); }

/* ------------------------------------------------------------ phone ---- */
@media (max-width: 900px) {
  .ml-stage { padding-top: calc(var(--mast-h, 74px) + 16px); gap: 26px; }
  .ml-word { font-size: 23.5vw; }
  .ml-lead { font-size: 16px; }
  .ml-p { padding-left: 40px; font-size: 16px; max-width: none; }
  .ml-facts { margin-left: 40px; grid-template-columns: 1fr; }
  .ml-city { margin: 0 calc(-1 * var(--gut, 20px)); }
  .ml-shelf { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ml-screen { width: min(464px, 100%); }
  .ml-card { width: 100%; margin: 0; }
  .ml-next-grid { grid-template-columns: minmax(0, 1fr); }
  .ml-tilt-room { order: -1; }
}