/* ==========================================================================
   Tơ Hồng · Nam & Trang
   Hệ hai mực: --n = 0 ban ngày (mực chàm trên giấy), 1 ban đêm (ánh trăng trên nền chàm đêm).
   Màu nhấn duy nhất là đỏ son của sợi tơ hồng. Mọi nét vẽ cùng một độ dày, cùng một mực.
   --n do js/core.js đặt: theo nút Ngày/Đêm và theo hoàng hôn ở Hồi V.
   ========================================================================== */
:root {
  --n: 0;
  --paper-d: #f1ece1; --paper-n: #0b1130;
  --ink-d: #23306b;   --ink-n: #efe7d3;
  --red-d: #c8382a;   --red-n: #ff6b4e;
  --paper: color-mix(in oklab, var(--paper-d), var(--paper-n) calc(var(--n) * 100%));
  --ink: color-mix(in oklab, var(--ink-d), var(--ink-n) calc(var(--n) * 100%));
  --red: color-mix(in oklab, var(--red-d), var(--red-n) calc(var(--n) * 100%));
  --dim: color-mix(in oklab, var(--ink) 64%, transparent);
  --line: color-mix(in oklab, var(--ink) 24%, transparent);
  --hair: color-mix(in oklab, var(--ink) 12%, transparent);
  --card: #f6f1e6; --card-ink: #23306b; --card-line: rgba(35, 48, 107, .2);
  --light: #f3ede0;                     /* chữ in lên ảnh */

  --display: 'Noto Serif Display', 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --script: 'Ms Madi', cursive;

  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --bar: calc(64px + var(--st));
  --pad: max(clamp(20px, 5.4vw, 92px), var(--sl), var(--sr));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(20, 24, 60, .12), 0 18px 40px -18px rgba(20, 24, 60, .45);
  color-scheme: light;
}
:root.is-night { color-scheme: dark; }
@supports not (color: color-mix(in oklab, red, blue)) {
  :root { --paper: var(--paper-d); --ink: var(--ink-d); --red: var(--red-d); --dim: rgba(35, 48, 107, .64); --line: rgba(35, 48, 107, .24); --hair: rgba(35, 48, 107, .12); }
  :root.is-night { --paper: var(--paper-n); --ink: var(--ink-n); --red: var(--red-n); --dim: rgba(239, 231, 211, .64); --line: rgba(239, 231, 211, .24); --hair: rgba(239, 231, 211, .12); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, label, input, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1.5px solid var(--red); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--red); color: var(--light); }
.js body.is-loading { overflow: hidden; }
.js .hero-in { visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 99px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: calc(12px + var(--st)); }

/* chữ */
.lbl { margin: 0; font: 600 11px/1.35 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.lbl small { font-size: 10px; letter-spacing: .04em; text-transform: none; }
.sec-title { margin: .1em 0 0; font: 200 clamp(54px, 8.2vw, 148px)/.96 var(--display); letter-spacing: -.02em; }
.sec-title em { font-style: italic; color: var(--red); }
.sec-sub { max-width: 46ch; margin: 22px 0 0; font: 300 clamp(17px, 1.3vw, 20px)/1.55 var(--sans); color: var(--dim); }
.sec-head { max-width: 1280px; margin: 0 auto 8svh; }
.ch-mask { padding: .2em .04em .14em; margin: -.2em -.04em -.14em; }
/* viết tay: mỗi từ hiện bằng một mặt nạ quét trái → phải (--p: 0 → 1, TH.write) */
.w-ink { padding: .4em .35em .3em; margin: -.4em -.35em -.3em; text-indent: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p, 1) * (100% + 1.6em) - 1.6em), transparent calc(var(--p, 1) * (100% + 1.6em)));
          mask-image: linear-gradient(90deg, #000 calc(var(--p, 1) * (100% + 1.6em) - 1.6em), transparent calc(var(--p, 1) * (100% + 1.6em))); }
em { font-style: italic; }

/* ký hiệu sao, sợi chỉ */
.st-ico, .st-dot { fill: currentColor; stroke: currentColor; }
.th-base { fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; }
.th-sheen { fill: none; stroke: rgba(255, 236, 222, .55); stroke-width: .7; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }

/* nút */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid var(--ink); border-radius: 99px; background: var(--ink); color: var(--paper); font: 600 12px/1 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.btn-ghost { background: transparent; color: var(--ink); }
@media (hover: hover) {
  .btn:hover { background: var(--red); border-color: var(--red); color: var(--light); }
}
.link { font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }

/* mỗi hồi tự cắt phần thò ra ngang (con thoi chạy quá mép, đuôi sợi tơ…), kể cả hồi đang ghim (nằm trong .pin-spacer),
   để điện thoại không bị kéo ngang hay tự thu nhỏ trang */
main > section, main > .pin-spacer > section, .foot { overflow-x: clip; }

/* ---------- nền trời (WebGL) ---------- */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ==========================================================================
   Màn chờ
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 120; background: var(--paper-n); color: var(--ink-n);
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--dawn, 0) * 130% - 30%), #000 calc(var(--dawn, 0) * 130%));
          mask-image: linear-gradient(to top, transparent calc(var(--dawn, 0) * 130% - 30%), #000 calc(var(--dawn, 0) * 130%)); }
.no-loader .loader, .loader.is-done { display: none; }
.ld-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld-svg .ld-star { color: var(--ink-n); }
.ld-svg .ld-dot { fill: var(--ink-n); }
.ld-svg .th-base { stroke: var(--red-n); }
.ld-svg text { fill: var(--ink-n); font: 600 11px var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.ld-mid { position: absolute; left: 0; right: 0; top: 64%; display: grid; justify-items: center; gap: 4px; }
.ld-pct { margin: 0; font: italic 200 clamp(56px, 7vw, 96px)/1 var(--display); font-variant-numeric: tabular-nums; }
.ld-pct small { font: 300 .32em var(--sans); margin-left: .12em; vertical-align: .9em; }
.ld-cap { margin: 0; font: 600 11px/1 var(--sans); font-stretch: 72%; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.ld-brand { position: absolute; left: 0; right: 0; bottom: calc(5svh + var(--sb)); margin: 0; text-align: center; font: italic 200 20px/1 var(--display); opacity: .75; }
.ld-brand i { color: var(--red-n); font-style: normal; }

/* ==========================================================================
   Thanh trên cùng, menu, sợi chỉ dọc
   ========================================================================== */
.bar { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding: var(--st) max(clamp(16px, 2.6vw, 40px), var(--sr)) 0 max(clamp(16px, 2.6vw, 40px), var(--sl)); }
.bar::before { content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; background: linear-gradient(var(--paper) 42%, transparent); opacity: var(--bar-bg, 0); transition: opacity .4s; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 300 21px/1 var(--display); }
.brand svg { width: 46px; height: 23px; overflow: visible; fill: currentColor; stroke: currentColor; }
.brand .br-th { fill: none; stroke: var(--red); stroke-width: 1.6; }
.brand i { color: var(--red); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font: 600 11.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav .nav-cta { padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); }
.nav .nav-cta::after { display: none; }
.nav .nav-cta.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) { .nav a:hover { color: var(--ink); } }
.theme { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 11px/1 var(--sans); font-stretch: 72%; letter-spacing: .14em; text-transform: uppercase; }
.t-k { position: relative; width: 36px; height: 20px; border: 1px solid currentColor; border-radius: 99px; }
.t-k::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: translate .5s var(--ease), box-shadow .5s; }
[data-theme="night"] .t-k::after { translate: 16px 0; box-shadow: inset -4px 2px 0 0 var(--paper); }
.t-d, .t-n { opacity: .45; transition: opacity .3s; }
[data-theme="day"] .t-d, [data-theme="night"] .t-n { opacity: 1; }
.menu-btn { display: none; margin-left: auto; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; font: 600 11.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .14em; text-transform: uppercase; }

.menu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(14px + var(--st)) max(20px, var(--sr)) calc(24px + var(--sb)) max(20px, var(--sl)); background: var(--paper); }
.menu-head { display: flex; justify-content: space-between; align-items: center; }
.menu-head button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; font: 600 11.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .14em; text-transform: uppercase; }
.menu nav { margin: auto 0; display: grid; gap: 2px; padding: 24px 0; }
.menu nav a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font: italic 200 clamp(32px, min(10vw, 6.6svh), 60px)/1.18 var(--display); }
.menu nav a i { min-width: 2.6em; font: 600 11px/1 var(--sans); font-style: normal; font-stretch: 72%; letter-spacing: .14em; color: var(--red); }
.theme-lg { align-self: flex-start; }

.rail { position: fixed; left: max(22px, var(--sl)); top: 22svh; bottom: 22svh; z-index: 50; width: 24px; pointer-events: none; }
.rail-th { position: absolute; left: 11px; top: 0; bottom: 0; width: 1.5px; background: var(--red); opacity: .55; }
.rail-knots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rail-knots li { position: absolute; left: 7px; width: 10px; height: 10px; top: var(--y); translate: 0 -50%; border-radius: 50%; border: 1.5px solid var(--red); background: var(--paper); }
.rail-bead { position: absolute; left: 4px; top: calc(var(--rp, 0) * 100%); width: 16px; height: 16px; translate: 0 -50%; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px color-mix(in oklab, var(--red) 18%, transparent); }
.rail-lab { position: absolute; left: 0; bottom: calc(100% + 18px); margin: 0; writing-mode: vertical-rl; rotate: 180deg; display: flex; gap: 10px; white-space: nowrap; font: 600 10.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.rail-lab span:first-child { color: var(--red); }

.cursor-th { position: fixed; inset: 0; z-index: 110; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sb)); z-index: 90; translate: -50% 0; margin: 0; padding: 12px 20px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 14px; }

/* ==========================================================================
   Hồi I · Hai bờ Ngân Hà
   Hai nửa của một tấm ảnh đứng ở hai bờ; khoảng cách = --g0 × --gp (js/hero.js kéo --gp từ 1 về 0).
   ========================================================================== */
.hero { position: relative; height: 100svh; min-height: 560px; }
.hero-in { position: absolute; inset: 0; overflow: clip;
  --H: min(64svh, 620px, (100vw - 2 * var(--pad)) * .75); --half: calc(var(--H) / 3); --g0: clamp(150px, 21vw, 360px); --gp: 1;
  --top: calc(50% - var(--H) / 2 + 3svh); }
.hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); opacity: .55; }
.hero-grid path, .hero-grid line { fill: none; stroke: currentColor; stroke-width: .6; opacity: .3; }
.hero-grid text { fill: currentColor; font: 500 9.5px var(--mono); letter-spacing: .06em; opacity: .5; }

.hero-top { position: absolute; left: var(--pad); top: calc(var(--bar) + 3svh); display: grid; gap: 6px; }
.hero-kicker { color: var(--red); }
.hero-guest { margin: 0; font: italic 300 clamp(18px, 1.5vw, 23px)/1.2 var(--display); }
.hero-date { position: absolute; right: var(--pad); top: calc(var(--bar) + 3svh); display: grid; justify-items: end; gap: 6px; text-align: right; }
.hd-big { margin: 0; font: 200 clamp(26px, 2.3vw, 36px)/1 var(--display); letter-spacing: .02em; font-variant-numeric: lining-nums; }
.hd-big i { font-style: normal; color: var(--red); }
.hd-lunar { margin: 0; font: italic 300 15px/1.3 var(--display); color: var(--dim); }

.half { position: absolute; top: var(--top); width: var(--half); height: var(--H); }
.half-l { left: calc(50% - var(--g0) * var(--gp) / 2 - var(--half)); }
.half-r { left: calc(50% + var(--g0) * var(--gp) / 2); }
.half-photo { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #1a2350; }
.half-l .half-photo { border-radius: 6px 0 0 6px; }
.half-r .half-photo { border-radius: 0 6px 6px 0; }
.half-photo img { position: absolute; top: 0; width: calc(var(--half) * 2); max-width: none; height: 100%; object-fit: cover; }
.half-r .half-photo img { left: calc(var(--half) * -1); }
.half-l .half-photo img { left: 0; }

/* tên: một bản mực bên ngoài, một bản sáng nằm trong khung ảnh (chỗ chữ đè lên ảnh thì đổi màu) */
.hn { position: absolute; z-index: 0; margin: 0; white-space: nowrap; font: italic 200 clamp(96px, 11.6vw, 216px)/.8 var(--display); letter-spacing: -.03em; pointer-events: none; }
.hn-a { right: 62%; top: 4%; }
.hn-b { left: 56%; bottom: 3%; }
.hn-in { color: var(--light); }
.half-photo .hn { z-index: 2; }

.star { position: absolute; z-index: 3; top: -58px; width: 26px; height: 26px; color: var(--ink); }
.star-a { right: -13px; }
.star-b { left: -13px; }
.st-ico { width: 26px; height: 26px; overflow: visible; }
.st-lab { position: absolute; top: 50%; translate: 0 -50%; margin: 0; display: grid; gap: 2px; white-space: nowrap; }
.star-a .st-lab { right: 36px; text-align: right; }
.star-b .st-lab { left: 36px; }
.st-lab b { font: italic 300 19px/1 var(--display); }
.st-lab span { font: 500 10px/1.3 var(--mono); letter-spacing: .04em; color: var(--dim); }

.river-amp { position: absolute; left: 50%; top: calc(var(--top) + var(--H) * .52); z-index: 2; margin: 0; translate: -50% -50%; font: italic 200 clamp(48px, 4.6vw, 80px)/1 var(--display); color: var(--red); }
.river-lab { position: absolute; left: 50%; top: calc(var(--top) + var(--H) + 18px); margin: 0; translate: -50% 0; font: 600 10.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .4em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.hero-thread { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.hero-quote { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hq { position: absolute; margin: 0; font: italic 200 clamp(26px, 2.6vw, 46px)/1.15 var(--display); max-width: calc(50% - var(--half) - var(--pad) - 4vw); }
.hq em { color: var(--red); }
.hq-1 { right: calc(50% + var(--half) + 4vw); top: calc(var(--top) + var(--H) * .18); text-align: right; }
.hq-2 { left: calc(50% + var(--half) + 4vw); top: calc(var(--top) + var(--H) * .56); }

.hero-cue { position: absolute; left: 50%; bottom: calc(3svh + var(--sb)); translate: -50% 0; display: grid; justify-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 600 10.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.hero-cue i { position: relative; width: 1.5px; height: 40px; background: var(--hair); overflow: hidden; }
.hero-cue i::after { content: ''; position: absolute; left: -2px; top: -8px; width: 5.5px; height: 5.5px; border-radius: 50%; background: var(--red); animation: bead 2.2s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes bead { to { top: 100%; } }
.hero-place { position: absolute; left: var(--pad); bottom: calc(3.4svh + var(--sb)); }
.hero-hoi { position: absolute; right: var(--pad); bottom: calc(3.4svh + var(--sb)); }

/* ==========================================================================
   Hồi II · Lời mời (khung cửi)
   ========================================================================== */
.loom { position: relative; height: 100svh; }
.loom-in { position: absolute; inset: 0; }
.loom-head { position: absolute; left: var(--pad); top: calc(var(--bar) + 2svh); }
.loom-head .sec-title { font-size: clamp(44px, 5vw, 86px); }
.loom-frame { position: absolute; left: 50%; top: calc(var(--bar) + 15svh); width: min(1000px, 100vw - 2 * var(--pad)); height: min(64svh, 620px); translate: -50% 0; }
.loom-warp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.loom-warp .wp { fill: none; stroke: currentColor; stroke-width: .7; opacity: .26; }
.loom-warp .beam { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .7; }
.loom-warp .tick { stroke: currentColor; stroke-width: .8; opacity: .5; }
.loom-warp text { fill: currentColor; font: 500 9.5px var(--mono); opacity: .5; }
.loom-lines { position: absolute; inset: 9% 6% 18%; display: grid; align-content: space-evenly; text-align: center; }
.ll { margin: 0; font: italic 200 clamp(25px, 3vw, 50px)/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance;
  clip-path: inset(-30% calc((1 - var(--r, 1)) * 100%) -30% 0); }
.ll.rtl { clip-path: inset(-30% 0 -30% calc((1 - var(--r, 1)) * 100%)); }
.ll-red { color: var(--red); }
.loom-sign { position: absolute; right: 7%; bottom: 3%; margin: 0; font: 400 clamp(46px, 4.6vw, 76px)/1 var(--script); color: var(--red); }
.shuttle { position: absolute; left: 0; top: 0; z-index: 3; width: 92px; height: 24px; margin: -12px 0 0 -46px; color: var(--ink); will-change: transform; }
.shuttle svg { width: 100%; height: 100%; overflow: visible; }
.sh-body { fill: var(--paper); stroke: currentColor; stroke-width: 1.2; }
.sh-spool { fill: var(--red); }
.sh-wind { stroke: rgba(255, 236, 222, .6); stroke-width: .8; }
.loom-meta { position: absolute; left: 50%; bottom: calc(4svh + var(--sb)); translate: -50% 0; display: flex; gap: 24px; white-space: nowrap; }

/* ==========================================================================
   Hồi III · Hai ngôi sao
   ========================================================================== */
.pair { position: relative; padding: 18svh var(--pad) 14svh; }
.pair-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 56px); max-width: 1320px; margin: 0 auto; }
.p-b { margin-top: 20svh; }
.eye { position: relative; width: min(100%, 440px, 74vw); aspect-ratio: 1; margin: 0 auto 30px; }
.eye-photo { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: #1a2350; }
.eye-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.eye-ret { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.eye-ret .r-ring { fill: none; stroke: currentColor; stroke-width: 1; }
.eye-ret .r-tick { fill: none; stroke: currentColor; stroke-width: .8; opacity: .6; }
.eye-ret .r-cross { stroke: var(--light); stroke-width: .9; opacity: .65; }
.eye-ret .r-dot { fill: var(--light); }
.eye-ret text { fill: currentColor; font: 500 10px var(--mono); text-anchor: middle; dominant-baseline: central; opacity: .7; }
.cat { max-width: 420px; margin: 0 auto; }
.cat-star { color: var(--red); }
.cat-name { margin: 10px 0 6px; font: 200 clamp(44px, 4.4vw, 76px)/1 var(--display); letter-spacing: -.02em; }
.cat-coord { margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--dim); }
.cat-dl { margin: 0; }
.cat-dl div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.cat-dl dt { font: 600 10.5px/1.8 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.cat-dl dd { margin: 0; font: 300 16px/1.5 var(--sans); }
.measure { position: relative; align-self: center; display: grid; justify-items: center; text-align: center; padding: 60px 0; }
.m-line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 40px; overflow: visible; color: var(--ink); }
.m-line .ml { stroke: currentColor; stroke-width: 1; }
.m-big { margin: 0; font: italic 200 clamp(26px, 2.2vw, 36px)/1.1 var(--display); }
.m-big b { display: block; font-weight: 200; font-size: clamp(64px, 6vw, 104px); line-height: .95; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.m-sub { margin: 8px 0 0; max-width: 24ch; font: 300 14px/1.45 var(--sans); color: var(--dim); }
.m-km { position: relative; margin: 36px 0 0; display: grid; justify-items: center; }
.m-old { position: relative; font: 200 clamp(40px, 3.6vw, 60px)/1 var(--display); color: var(--dim); }
.m-old::after { content: ''; position: absolute; left: -6%; right: -6%; top: 52%; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(var(--strike, 0)); rotate: -6deg; }
.m-new { margin-top: -6px; font: 400 clamp(56px, 5vw, 84px)/1 var(--script); color: var(--red); }

/* ==========================================================================
   Hồi IV · Tám năm (khung thêu, cảnh ghim)
   ========================================================================== */
.story { position: relative; height: 100svh; }
.story-in { position: absolute; inset: 0; --hd: min(66svh, 44vw, 640px); }
.story-head { position: absolute; left: var(--pad); top: calc(var(--bar) + 2svh); }
.story-head .sec-title { font-size: clamp(40px, 4.4vw, 78px); }
.stitch { position: absolute; left: var(--pad); top: calc(var(--bar) + 2svh + clamp(40px, 4.4vw, 78px) * 1.3 + 60px); width: min(34vw, 420px); overflow: visible; color: var(--ink); }
.stitch .hole { fill: currentColor; opacity: .16; }
.stitch .x { stroke: var(--red); stroke-width: 2.1; stroke-linecap: round; }
.hoop { position: absolute; right: max(var(--pad), 7vw); top: calc(50% - var(--hd) / 2 - 1svh); width: var(--hd); aspect-ratio: 1; }
.hoop-fab { position: absolute; inset: 6.5%; border-radius: 50%; overflow: hidden; background: #d9d1c0; box-shadow: inset 0 0 30px rgba(20, 24, 60, .25); }
.hoop-fab::after { content: ''; position: absolute; inset: 0; background: url(../assets/img/tex-linen.webp) 0 0 / 260px; mix-blend-mode: multiply; opacity: .85; pointer-events: none; }
.hoop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hoop-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.hoop-ring .hr { fill: none; stroke: currentColor; stroke-width: 1.2; }
.hoop-ring .hr-fill { fill: color-mix(in oklab, var(--paper) 80%, var(--ink)); stroke: currentColor; stroke-width: 1.2; }
.hoop-ring .run { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 9; }
.hoop-ring .needle { fill: var(--ink); }
.story-text { position: absolute; left: var(--pad); bottom: calc(14svh + 70px + var(--sb)); width: min(36vw, 460px); }
.st-idx { color: var(--red); }
.st-title { margin: 12px 0 10px; font: italic 200 clamp(38px, 3.6vw, 62px)/1 var(--display); letter-spacing: -.01em; }
.st-body { margin: 0; font: 300 clamp(16px, 1.25vw, 19px)/1.55 var(--sans); }
.story-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(3svh + var(--sb)); display: flex; align-items: center; gap: 3vw; }
.beads { position: relative; flex: 1; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.beads::before { content: ''; position: absolute; left: 22px; right: 22px; top: 22px; height: 1.5px; background: var(--hair); }
.beads::after { content: ''; position: absolute; left: 22px; right: 22px; top: 22px; height: 1.5px; background: var(--red); transform-origin: left; transform: scaleX(var(--bp, 0)); }
.beads li { position: relative; z-index: 1; }
.beads button { display: grid; justify-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding-top: 16px; font: 600 10.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .12em; color: var(--dim); }
.beads button::before { content: ''; position: absolute; top: 16px; left: 50%; width: 13px; height: 13px; translate: -50% 0; border-radius: 50%; border: 1.5px solid var(--red); background: var(--paper); transition: background .3s, scale .3s var(--ease); }
.beads .is-on button::before { background: var(--red); }
.beads .is-cur button::before { scale: 1.45; }
.beads button span { margin-top: 18px; transition: color .3s; }
.beads .is-cur button span { color: var(--ink); }
.ctl { display: flex; gap: 8px; }
.ctl button, .ctl a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; font: 600 11px/1 var(--sans); font-stretch: 72%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.ctl [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ctl [aria-pressed="true"] .off, .ctl [aria-pressed="false"] .on { display: none; }

/* ==========================================================================
   Hồi V · Hoàng hôn (bầu trời thật, cảnh ghim)
   ========================================================================== */
.dusk { position: relative; height: 100svh; }
.dusk-in { position: absolute; inset: 0; }
.dusk-head { position: absolute; left: var(--pad); top: calc(var(--bar) + 2svh); max-width: min(560px, 46vw); }
.dusk-head .sec-title { font-size: clamp(40px, 4.4vw, 78px); }
.dusk-head .sec-sub { margin-top: 14px; font-size: 16px; }
.clock { position: absolute; right: var(--pad); top: calc(var(--bar) + 2svh); margin: 0; font: italic 200 clamp(76px, 9vw, 160px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.dusk-cap { position: absolute; right: var(--pad); top: calc(var(--bar) + 2svh + clamp(76px, 9vw, 160px) + 14px); margin: 0; width: min(420px, 36vw); text-align: right; font: italic 300 clamp(18px, 1.5vw, 23px)/1.35 var(--display); }
.sky-dia { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(5svh + var(--sb)); width: calc(100% - 2 * var(--pad)); height: 56svh; overflow: visible; color: var(--ink); }
.sky-dia .alt { stroke: currentColor; stroke-width: .6; stroke-dasharray: 2 6; opacity: .35; }
.sky-dia .az { stroke: currentColor; stroke-width: .8; opacity: .5; }
.sky-dia text { fill: currentColor; font: 500 10.5px var(--mono); letter-spacing: .06em; }
.sky-dia .dir { font: 600 12px var(--sans); font-stretch: 72%; letter-spacing: .2em; text-transform: uppercase; }
.sky-dia .lab { font: italic 300 18px var(--display); letter-spacing: 0; }
.sky-dia .sun { fill: var(--red); }
.sky-dia .sun-glow { fill: var(--red); opacity: .18; }
.sky-dia .tri { fill: none; stroke: currentColor; stroke-width: .8; stroke-dasharray: 3 5; opacity: .5; }
.sky-dia .ground { fill: var(--paper); }
.moon-note { position: absolute; right: var(--pad); bottom: calc(5svh + 56svh + 18px + var(--sb)); display: flex; align-items: center; gap: 12px; max-width: 360px; }
.moon-note p { margin: 0; font: 300 14px/1.45 var(--sans); color: var(--dim); }
.moon-ico { width: 34px; height: 34px; flex: none; }
.moon-ico .m-dark { fill: color-mix(in oklab, var(--ink) 16%, var(--paper)); stroke: var(--line); stroke-width: .6; }
.moon-ico .m-lit { fill: var(--ink); }

/* ==========================================================================
   Hồi VI · Hôn lễ
   ========================================================================== */
.wed { position: relative; padding: 16svh var(--pad) 12svh; }
.wed > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.knot { position: relative; display: flex; justify-content: center; align-items: baseline; gap: .32em; margin-top: 4svh; font: italic 200 clamp(150px, 24vw, 400px)/.86 var(--display); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.kd { position: relative; z-index: 1; }
.knot-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.wed-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; margin: 7svh auto 12svh; text-align: center; font: italic 300 clamp(19px, 1.6vw, 25px)/1.3 var(--display); }
.sched { position: relative; max-width: 980px; margin-bottom: 12svh; }
.sched-line { position: absolute; left: 0; right: 0; top: calc(clamp(26px, 2.4vw, 38px) - 1.5px); width: 100%; height: 20px; overflow: visible; }
.sched-list { position: relative; height: 120px; margin: 0; padding: 0; list-style: none; }
.sched-list li { position: absolute; top: 0; left: var(--x, 0%); translate: -50% 0; display: grid; justify-items: center; gap: 8px; text-align: center; white-space: nowrap; }
.sched-list li::before { content: ''; order: 1; width: 13px; height: 13px; margin: 2px 0; border-radius: 50%; border: 1.5px solid var(--red); background: var(--paper); }
.sched-list time { order: 0; font: italic 200 clamp(26px, 2.4vw, 38px)/1 var(--display); font-variant-numeric: lining-nums; }
.sched-list span { order: 2; font: 600 11px/1.3 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.sched-list .sched-sun time { color: var(--red); }
.sched-list .sched-sun::before { background: var(--red); }
.count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 860px; margin-bottom: 12svh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.count div { display: grid; justify-items: center; gap: 6px; padding: 22px 0 18px; }
.count div + div { border-left: 1px solid var(--line); }
.count b { font: 200 clamp(42px, 5vw, 80px)/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.count small { font: 600 10.5px/1 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.roll { display: inline-flex; }
.rc { position: relative; display: inline-block; overflow: hidden; height: 1.08em; padding: 0 .01em; vertical-align: top; }
.rc > span { display: block; }
.rc > span + span { position: absolute; left: 0; right: 0; top: 0; }
.venue { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; max-width: 980px; padding: clamp(26px, 3.4vw, 46px); border: 1px solid var(--line); border-radius: 26px; margin-bottom: 10svh; }
.venue-name { margin: 12px 0 8px; font: 200 clamp(36px, 3.4vw, 56px)/1.02 var(--display); }
.venue-name em { color: var(--red); }
.venue-addr { margin: 0 0 8px; font: 300 17px/1.5 var(--sans); }
.venue-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.families { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4vw; max-width: 760px; text-align: center; font: 300 clamp(20px, 1.7vw, 26px)/1.5 var(--display); }
.families p { margin: 0; }
.families .lbl { margin-bottom: 10px; color: var(--red); }
.families svg { width: 22px; height: 22px; fill: var(--ink); stroke: var(--ink); }

/* ==========================================================================
   Hồi VII · Vài điều nhỏ
   ========================================================================== */
.notes { padding: 10svh var(--pad) 12svh; }
.note-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 54px); max-width: 1280px; margin: 0 auto; }
.note { position: relative; padding-top: 22px; }
.note-th { position: absolute; left: 0; top: 0; width: 100%; height: 6px; overflow: visible; }
.note-no { margin: 0 0 6px; font: italic 200 44px/1 var(--display); color: var(--red); }
.note h3 { margin: 0 0 12px; font: 300 clamp(26px, 2.2vw, 34px)/1.1 var(--display); }
.note p:last-of-type { margin: 0; font: 300 17px/1.6 var(--sans); }

/* ==========================================================================
   Hồi VIII · Hồi đáp: cầu Ô Thước
   ========================================================================== */
.rsvp { padding: 14svh var(--pad) 14svh; }
.bridge { display: block; width: min(100%, 1180px); height: clamp(140px, 18vw, 260px); margin: 0 auto 6svh; overflow: visible; color: var(--ink); }
.bridge .bd { fill: currentColor; }
.bridge .bd-me { fill: var(--red); }
.bridge .slot { fill: none; stroke: var(--red); stroke-width: 1; stroke-dasharray: 2 3; }
.bridge .end { color: var(--ink); fill: currentColor; stroke: currentColor; }
.bridge .arc { fill: none; stroke: var(--hair); stroke-width: 1; }
.rsvp-wrap { max-width: 780px; margin: 0 auto; }
.card { background: var(--card); color: var(--card-ink); border-radius: 28px; padding: clamp(24px, 4vw, 52px); box-shadow: var(--shadow);
  --ink: var(--card-ink); --paper: var(--card); --line: var(--card-line); --hair: rgba(35, 48, 107, .1); --dim: rgba(35, 48, 107, .64); --red: var(--red-d); }
.form { display: grid; gap: 28px; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 12px; }
.f-attend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-attend legend { grid-column: 1 / -1; }
.pick { position: relative; cursor: pointer; }
.pick input, .chips input, .check input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: grid; justify-items: start; gap: 4px; min-height: 112px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; transition: background .3s, color .3s, border-color .3s; }
.pick svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; color: var(--red); margin-bottom: 6px; }
.pick b { font: italic 300 26px/1 var(--display); }
.pick small { font: 300 14px/1.3 var(--sans); color: var(--dim); }
.pick input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pick input:checked + span small { color: rgba(246, 241, 230, .75); }
.pick input:focus-visible + span { outline: 1.5px solid var(--red); outline-offset: 3px; }
.f-attend.is-bad .pick span { border-color: var(--red); }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld input, .fld textarea { width: 100%; min-height: 46px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 300 18px/1.4 var(--sans); }
.fld textarea { resize: vertical; min-height: 92px; }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--red); }
.fld ::placeholder { color: var(--dim); opacity: .6; }
.fld.is-bad input { border-bottom: 1.5px solid var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; }
.chips label { cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; font: 400 15px/1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 1.5px solid var(--red); outline-offset: 3px; }
.f-row { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; }
.stepper button { width: 46px; height: 46px; font-size: 20px; }
.stepper input { width: 42px; border: 0; padding: 0; background: transparent; text-align: center; color: var(--ink); font: 300 18px/1 var(--sans); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.check { position: relative; display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 300 16px/1.4 var(--sans); }
.check span::before { content: ''; display: inline-block; vertical-align: -5px; width: 20px; height: 20px; margin-right: 12px; border: 1px solid var(--ink); border-radius: 6px; transition: background .3s; }
.check input:checked + span::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23f6f1e6' stroke-width='2'/%3E%3C/svg%3E") center / contain; }
.check input:focus-visible + span::before { outline: 1.5px solid var(--red); outline-offset: 3px; }
.form.is-no [data-when-yes] { display: none; }
.form-err { margin: -10px 0 0; color: var(--red); font-size: 15px; }
.btn-send { width: 100%; min-height: 56px; }
.btn-send[disabled] { opacity: .6; cursor: progress; }
.form-demo { margin: -12px 0 0; font: 300 13px/1.6 var(--sans); color: var(--dim); }
.form-demo code { font-size: 12px; }
.thanks { display: grid; justify-items: center; gap: 10px; text-align: center; padding-block: clamp(44px, 7vw, 84px); }
.thanks-ico { width: 34px; height: 34px; fill: var(--red); stroke: var(--red); }
.thanks h3 { margin: 6px 0 0; font: italic 200 clamp(40px, 4.4vw, 64px)/1.02 var(--display); }
.thanks p { max-width: 40ch; margin: 0 0 14px; font: 300 17px/1.55 var(--sans); }

/* ==========================================================================
   Hết
   ========================================================================== */
.foot { padding: 14svh var(--pad) calc(30px + var(--sb)); text-align: center; }
.foot-stars { width: min(360px, 70vw); margin: 0 auto 4svh; overflow: visible; color: var(--ink); }
.foot-big { margin: 0; font: italic 200 clamp(84px, 14vw, 250px)/.92 var(--display); letter-spacing: -.03em; }
.foot-note { margin: 4svh 0 0; font: 300 18px/1.5 var(--sans); color: var(--dim); }
.foot-sign { margin: 2svh 0 9svh; font: 400 clamp(54px, 5vw, 84px)/1 var(--script); color: var(--red); }
.foot-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 30px; padding-top: 16px; border-top: 1px solid var(--hair); font: 600 11px/1 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; }
.foot-row .link { display: inline-flex; align-items: center; min-height: 44px; }
.credits { width: min(620px, calc(100vw - 32px)); max-height: calc(100svh - 40px); overflow-y: auto; padding: clamp(24px, 4vw, 44px); border: 0; border-radius: 26px; background: var(--card); color: var(--card-ink); --ink: var(--card-ink); --paper: var(--card); --line: var(--card-line); }
.credits::backdrop { background: rgba(8, 12, 36, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.credits h2 { margin: 0 0 20px; font: italic 200 44px/1 var(--display); }
.credits dl { display: grid; grid-template-columns: 110px 1fr; gap: 14px 18px; margin: 0 0 26px; font: 300 15px/1.55 var(--sans); }
.credits dt { font: 600 10.5px/2 var(--sans); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: rgba(35, 48, 107, .64); }
.credits dd { margin: 0; }

/* ==========================================================================
   Responsive
   · ≤1100px: bỏ sợi chỉ dọc bên trái
   · ≤900px: menu gọn; hộ chiếu, ghi chú, lịch trình xếp một cột
   · MÀN DỌC (điện thoại, tablet dựng đứng, cửa sổ rất hẹp): bố cục dọc cho các cảnh ghim,
     kích thước theo --u = min(1vw, .55svh) nên co theo cả bề ngang lẫn chiều cao
   · MÀN NGANG THẤP (điện thoại xoay ngang): gọn theo chiều cao
   · Chạm: vùng bấm ≥ 44px
   js/core.js dùng đúng câu điều kiện MÀN DỌC cho TH.portrait().
   ========================================================================== */
@media (max-width: 1100px) {
  .rail { display: none; }
}
@media (max-width: 900px) {
  :root { --bar: calc(58px + var(--st)); }
  .nav, .bar > .theme { display: none; }
  .menu-btn { display: inline-flex; }
  .pair-grid { grid-template-columns: 1fr; gap: 6svh; max-width: 560px; }
  .p-b { margin-top: 0; }
  .measure { padding: 70px 0; }
  .m-line { left: 50%; right: auto; top: 0; bottom: 0; width: 40px; height: 100%; translate: -50% 0; }
  .note-list { grid-template-columns: 1fr; max-width: 560px; }
  .sched-list { height: auto; display: grid; gap: 22px; padding-left: 34px; }
  .sched-list li { position: relative; left: auto; translate: none; justify-items: start; grid-template-columns: 90px 1fr; align-items: baseline; gap: 14px; text-align: left; }
  .sched-list li::before { position: absolute; left: -34px; top: .55em; margin: 0; }
  .sched-list time { order: 0; }
  .sched-list span { order: 1; }
  .sched-line { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: 100%; }
  .families { grid-template-columns: 1fr; gap: 20px; }
  .families svg { justify-self: center; }
}
@media (orientation: portrait) and (max-width: 1100px), (max-width: 560px) {
  .hero-in { --H: min(54svh, (100vw - 2 * var(--pad) - var(--g0)) * 1.5); --g0: clamp(48px, 15vw, 140px); --top: calc(52% - var(--H) / 2 + 2svh); }
  .hero-top { top: calc(var(--bar) + 1.5svh); }
  .hero-date { top: calc(var(--bar) + 1.5svh); gap: 4px; }
  .hd-big { font-size: clamp(20px, 5.4vw, 32px); }
  .hd-lunar { font-size: 13.5px; max-width: 44vw; }
  .hn { font-size: min(22vw, 13svh); }
  .hn-a { right: auto; left: 0; top: auto; bottom: 90%; }
  .hn-b { left: auto; right: 0; bottom: auto; top: 92%; }
  .star { top: auto; bottom: calc(100% + min(22vw, 13svh) * .72 + 4px); }
  .star-a .st-lab span, .star-b .st-lab span { display: none; }
  .st-lab b { font-size: 16px; }
  .river-lab { display: none; }
  .hero-quote { inset: auto; left: var(--pad); right: var(--pad); top: calc(var(--top) + var(--H) + 2.4svh); display: grid; gap: .25em; }
  .hq { position: static; max-width: none; text-align: center; font-size: clamp(20px, 5.4vw, 34px); }
  .hero-place { display: none; }
  .hero-hoi { display: none; }
  .hero-cue { left: var(--pad); translate: none; justify-items: start; }

  .loom-frame { top: calc(var(--bar) + 13svh); height: 64svh; }
  .loom-lines { inset: 8% 5% 20%; }
  .ll { font-size: clamp(21px, 5.6vw, 34px); }
  .loom-sign { right: 6%; font-size: clamp(40px, 11vw, 60px); }
  .shuttle { width: 70px; height: 18px; margin: -9px 0 0 -35px; }
  .loom-meta { gap: 14px; }

  .story-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head stitch" "hoop hoop" "text text" "foot foot"; align-content: start; gap: 1.6svh 12px;
    padding: calc(var(--bar) + 1.5svh) var(--pad) calc(2svh + var(--sb)); --hd: min(76vw, 36svh, 520px); }
  .story-head, .stitch, .hoop, .story-text, .story-foot { position: relative; inset: auto; translate: none; }
  .story-head { grid-area: head; align-self: end; }
  .story-head .sec-title { font-size: clamp(28px, 7.4vw, 52px); }
  .stitch { grid-area: stitch; align-self: end; width: min(40vw, 230px); }
  .hoop { grid-area: hoop; justify-self: center; width: var(--hd); }
  .story-text { grid-area: text; width: auto; overflow: hidden; }
  .story-foot { grid-area: foot; }
  .st-title { margin: 8px 0 6px; font-size: clamp(28px, 7.4vw, 44px); }
  .st-body { font-size: 15.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .story-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  /* tám hạt lấn 16px vào lề: hạt đầu và cuối thẳng mép chữ, vùng bấm đủ 44px ở bề ngang 360; hẹp hơn thì hạt tự co */
  .beads { margin-inline: -16px; }
  .beads li { flex: 0 1 44px; min-width: 0; }
  .beads button { width: 100%; min-width: 0; }
  .beads button span { display: none; }
  .beads .is-cur button span { display: block; position: absolute; top: 40px; white-space: nowrap; }
  .ctl { justify-content: center; margin-top: 12px; }

  .dusk-head { right: var(--pad); max-width: none; }
  .dusk-head .sec-title { font-size: clamp(34px, 8.6vw, 58px); }
  .dusk-head .sec-sub { font-size: 14.5px; max-width: none; }
  .clock { right: auto; left: var(--pad); top: calc(var(--bar) + 2svh + clamp(34px, 8.6vw, 58px) * 2.2 + 74px); font-size: clamp(60px, 17vw, 110px); }
  .dusk-cap { left: auto; right: var(--pad); width: 46vw; top: calc(var(--bar) + 2svh + clamp(34px, 8.6vw, 58px) * 2.2 + 82px); font-size: 16px; }
  .sky-dia { height: 42svh; bottom: calc(12svh + var(--sb)); }
  .moon-note { left: var(--pad); right: var(--pad); bottom: calc(3svh + var(--sb)); max-width: none; }
}
@media (orientation: portrait) and (max-height: 720px) {
  .hero-kicker, .hero-date .lbl, .st-lab { display: none; }
  .beads .is-cur button span { display: none; }
  .story-head .lbl { display: none; }
  .st-body { -webkit-line-clamp: 2; }
  .ctl { margin-top: 4px; }
}
@media (orientation: portrait) and (max-width: 560px) {
  .hd-lunar { display: none; }
}
@media (max-width: 600px) {
  .f-attend { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pick span { min-height: 96px; padding: 14px 14px; }
  .pick b { font-size: 22px; }
  .f-row { grid-template-columns: 1fr; gap: 24px; }
  .count b { font-size: 36px; }
  .credits dl { grid-template-columns: 1fr; gap: 2px; }
  .credits dd { margin-bottom: 12px; }
  .knot { gap: .22em; }
  .venue { border-radius: 22px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --bar: calc(50px + var(--st)); }
  .hero-in { --H: min(66svh, 420px); --top: calc(var(--bar) + (100svh - var(--bar) - var(--H)) / 2 + 2svh); }
  .hero-top, .hero-place, .hero-hoi, .river-lab { display: none; }
  .hero-date { top: calc(var(--bar) + 2svh); }
  .hero-date .hd-lunar { display: none; }
  .hn { font-size: 22svh; }
  .star { top: -40px; }
  .st-lab span { display: none; }
  .hq { font-size: 5.6svh; }
  .loom-head .sec-title { font-size: 9svh; }
  .loom-frame { top: calc(var(--bar) + 5svh); height: 70svh; }
  .ll { font-size: 5.2svh; }
  .loom-sign { font-size: 10svh; }
  .loom-meta { display: none; }
  .story-in { --hd: min(62svh, 40vw); }
  .story-head { top: calc(var(--bar) + 1svh); }
  .story-head .sec-title { font-size: 7.4svh; }
  .stitch { top: calc(var(--bar) + 1svh + 7.4svh * 1.3 + 14px); width: 26vw; }
  .hoop { top: calc(var(--bar) + 2svh); }
  .story-text { bottom: calc(60px + var(--sb)); }
  .st-title { font-size: 7svh; margin: 6px 0; }
  .st-body { font-size: 14px; }
  .story-foot { bottom: calc(6px + var(--sb)); }
  .beads button span { display: none; }
  .ctl button, .ctl a { padding: 0 12px; }
  .dusk-head .sec-sub { display: none; }
  .dusk-head .sec-title { font-size: 7.4svh; }
  .clock { font-size: 17svh; }
  .dusk-cap { top: calc(var(--bar) + 2svh + 17svh + 10px); }
  .sky-dia { height: 50svh; }
  .moon-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}