/* =========================================================
   VTM 2027 — COMING SOON · "A Shared Horizon"
   xanh lúa mùa lúa — rice-field green, lantern amber.
   Boutique, literary, cinematic. No pure black, no red.
   ========================================================= */

:root {
  /* Brief palette */
  --rice-mist:  #F5F0E8;   /* page base, breathing room */
  --parchment:  #EDE6D6;   /* section surfaces */
  --lua:        #6B7C4A;   /* ripe rice green — headings, accents, borders */
  --lua-soft:   #8A9A66;   /* lighter green for hairlines on dark */
  --reu:        #3D4F2E;   /* moss shadow — heavy text, dark overlays */
  --reu-deep:   #2E3C22;   /* deepest moss, lead-capture ground */
  --amber:      #C98A3A;   /* lantern — the single tiny warm spark, used sparingly */
  --amber-lo:   #B6792C;   /* amber pressed */
  --brocade:    #55672E;   /* deep rice green — primary accent, in family with lúa */
  --brocade-lo: #3D4F2E;   /* pressed — moss shadow */
  --accent:     #55672E;   /* primary accent = deep rice green */
  --ink:        #2B2318;   /* body text (never pure black) */
  --ink-soft:   #6B6354;   /* muted body */
  --mist:       rgba(245,240,232,0.86);  /* text over photography */
  --mist-dim:   rgba(245,240,232,0.62);

  --maxw: 1200px;
  --gutter: clamp(22px, 5vw, 72px);
  --section-y: clamp(96px, 14vw, 196px);

  --display: "Playfair Display", Georgia, serif;
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.24,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--rice-mist);
  line-height: 1.72;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Shared type ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .36em;
  font-size: clamp(10px, 1vw, 12px);
  color: var(--lua);
  margin: 0 0 1.6em;
}
.eyebrow--mist { color: var(--mist-dim); }
.eyebrow--amber { color: var(--lua-soft); }

h1, h2, h3 { margin: 0; font-weight: 400; }

.serif-h {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  font-size: clamp(2.05rem, 5vw, 3.7rem);
  color: var(--reu);
}
.serif-h em { font-style: italic; font-weight: 500; color: var(--lua); }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.34;
  color: var(--reu);
}

p { margin: 0 0 1.15em; }
.body-lg { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

.section { padding: var(--section-y) 0; position: relative; }
/* Teaser ("Something is being prepared.") — giảm 30% khoảng cách phía trên */
#coming { padding-top: calc(var(--section-y) * 0.7); }
/* Giảm 20% khoảng cách giữa Teaser (#coming) và Hội An Gallery (#hoian) */
#coming { padding-bottom: calc(var(--section-y) * 0.8); }
#hoian { padding-top: calc(var(--section-y) * 0.8); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.bg-parchment { background: var(--parchment); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.1em 2em;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .55s var(--ease), color .55s var(--ease),
              border-color .55s var(--ease), transform .55s var(--ease),
              box-shadow .55s var(--ease);
}
.btn .arr { transition: transform .5s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

.btn--amber {
  background: var(--brocade);
  border-color: var(--brocade);
  color: #f4f8f0;
}
.btn--amber:hover {
  background: var(--brocade-lo);
  border-color: var(--brocade-lo);
  transform: translateY(-2px);
}
/* gentle idle glow on the primary CTA */
.btn--glow { animation: amberGlow 4.2s var(--ease) infinite; }
@keyframes amberGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85,103,46,0); }
  50%      { box-shadow: 0 0 34px -4px rgba(85,103,46,.5); }
}

.btn--ghost-mist { border-color: rgba(245,240,232,.5); color: var(--mist); }
.btn--ghost-mist:hover { background: rgba(245,240,232,.95); color: var(--reu); border-color: transparent; }

.arrow-link {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: var(--lua);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: gap .45s var(--ease), border-color .45s var(--ease);
}
.arrow-link:hover { gap: 1em; border-color: var(--lua); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .26s; }
.reveal.d3 { transition-delay: .40s; }
.reveal.d4 { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* =========================================================
   MINIMAL HEADER (no nav menu — single CTA only)
   ========================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
}
.topbar.scrolled {
  background: rgba(245,240,232,.9);
  backdrop-filter: blur(12px);
  padding: 13px var(--gutter);
  box-shadow: 0 1px 0 rgba(43,35,24,.08);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--mist); transition: color .6s var(--ease); }
.topbar.scrolled .brand { color: var(--reu); }
.brand__mark { width: 24px; height: 39px; flex: none; }
.brand__txt { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; line-height: 1.25; }
.brand__txt b { font-weight: 700; }

/* Ngày + địa điểm canh GIỮA topbar — chỉ hiện khi sticky (scrolled) */
.topbar__meta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; color: var(--reu);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.topbar.scrolled .topbar__meta { opacity: 1; visibility: visible; }
.topbar__meta .sep { opacity: .45; margin: 0 .55em; }
@media (max-width: 640px) { .topbar__meta { display: none; } }

.topbar__cta {
  font-family: var(--sans); font-weight: 500; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--mist); display: inline-flex; align-items: center; gap: .55em;
  border: 1px solid rgba(245,240,232,.55); border-radius: 2px; padding: .72em 1.3em;
  background: rgba(46,60,34,.32); backdrop-filter: blur(6px);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.topbar__cta:hover { background: rgba(245,240,232,.95); color: var(--reu); border-color: transparent; }
.topbar.scrolled .topbar__cta { color: var(--reu); border-color: var(--lua); background: transparent; }
.topbar.scrolled .topbar__cta:hover { background: var(--lua); color: var(--rice-mist); border-color: var(--lua); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; width: 100%; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--reu-deep); overflow: hidden;
}
/* TEXT PANEL — centered on its own ground, fully legible */
.hero__panel {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(116px,15vh,184px) var(--gutter) clamp(48px,7vh,84px);
  background: var(--reu-deep);
}
.hero__panel::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(440px, 64%); height: 1px;
  background: linear-gradient(to right, transparent, rgba(138,154,102,.55), transparent);
}
.hero__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 80% at 50% 100%, rgba(138,154,102,.10), transparent 62%);
}
.hero__panel > * { position: relative; z-index: 1; }
.hero__save {
  font-family: var(--sans); font-weight: 500; font-size: clamp(10px,1vw,11.5px);
  letter-spacing: .38em; text-transform: uppercase; color: var(--lua-soft);
  display: inline-flex; align-items: center; gap: 1em; margin: 0 0 1.5em;
}
.hero__save::before, .hero__save::after {
  content: ""; width: clamp(20px,4vw,34px); height: 1px;
  background: rgba(138,154,102,.55);
}
.hero__eyebrow { color: var(--lua-soft); margin-bottom: 1.7em; }
.hero__h {
  font-family: var(--display); font-weight: 500;
  color: #fbf7ee;
  font-size: clamp(2.5rem, 5.4vw, 4.7rem);
  line-height: 1.05; letter-spacing: 0;
  max-width: 17ch; margin: 0;
}
.hero__h .line { display: block; overflow: hidden; }
.hero__h .line > span { display: inline-block; transform: translateY(102%); transition: transform 1.1s var(--ease); }
.hero.lit .hero__h .line:nth-child(1) > span { transition-delay: .15s; }
.hero.lit .hero__h .line:nth-child(2) > span { transition-delay: .42s; }
.hero.lit .hero__h .line > span { transform: none; }

.hero__sub {
  font-family: var(--sans); font-weight: 400;
  color: var(--mist); margin: 1.6em 0 0;
  font-size: clamp(.92rem, 1.5vw, 1.06rem);
  letter-spacing: .04em;
  opacity: 0; transition: opacity 1s var(--ease) .8s;
}
.hero__sub .dot { color: var(--amber); margin: 0 .55em; }
.hero__sub .sep { color: rgba(245,240,232,.4); margin: 0 .7em; font-weight: 300; }
.hero.lit .hero__sub { opacity: 1; }

.hero__cta { margin-top: 2.4em; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) 1s, transform 1s var(--ease) 1s; }
.hero.lit .hero__cta { opacity: 1; transform: none; }

/* MEDIA BAND — wide cinematic image below the text, gentle ken-burns parallax */
.hero__media { position: relative; flex: 1 1 auto; min-height: 52vh; overflow: hidden; background: var(--reu-deep); }
.hero-banner { position: absolute; inset: 0; display: flex; flex-wrap: nowrap; transition: transform 1.1s var(--ease); will-change: transform; }
.hero-banner__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.hero__img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; object-position: center 46%;
}
.hero__video { animation: none !important; background: #2E3C22; }
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: kenburns 26s ease-in-out infinite alternate; }
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.15) translate3d(-1.4%, -2%, 0); }
}
.hero__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(46,60,34,.55) 0%, transparent 22%, transparent 68%, rgba(34,28,18,.5) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__h .line > span, .hero__sub, .hero__cta { transform: none !important; opacity: 1 !important; transition: none; }
}

@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero__media { min-height: 44vh; }
  .hero__panel { padding: clamp(104px,16vh,140px) var(--gutter) clamp(40px,7vh,64px); }
  .hero__h { max-width: 18ch; }
}

.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--mist); font-family: var(--sans); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
}
.scroll-cue__line { width: 1px; height: 42px; background: linear-gradient(to bottom, rgba(245,240,232,.7), transparent); animation: cue 2.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100%{ transform: scaleY(.35); opacity:.35 } 50%{ transform: scaleY(1); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .scroll-cue__line { animation: none; } }
@media (max-width: 640px) { .scroll-cue { display: none; } }

/* =========================================================
   POETIC INTERLUDE
   ========================================================= */
/* STORY PAUSE — emotional breather between hero and triptych */
.pause { background: var(--parchment); text-align: center; }
.pause__mark { display: block; width: 26px; height: 42px; margin: 0 auto clamp(28px,4vw,48px); color: var(--lua); opacity: .85; }
.pause__eyebrow { color: var(--lua); margin-bottom: 1.4em; }
.pause__lede { color: var(--reu); margin: 0 auto; text-wrap: balance; }
/* Nội dung mới (font text body) dưới Title */
.pause__body { margin: 1.6em auto 0; max-width: 60ch; color: var(--ink-soft); line-height: 1.7; text-wrap: pretty; }

/* POETIC INTERLUDE — image triptych, taglines over imagery */
.interlude { background: var(--reu-deep); }
.interlude__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.interlude__row { position: relative; margin: 0; aspect-ratio: 3/4; overflow: hidden; }
.interlude__img { position: absolute; inset: 0; height: 100%; width: 100%; }
.interlude__img img { width: 100%; height: 100%; object-fit: cover; }
.interlude__cap {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end;
  padding: clamp(24px,3vw,44px);
  background: linear-gradient(to top, rgba(34,28,18,.82), rgba(34,28,18,.12) 52%, transparent 78%);
  pointer-events: none;
}
.interlude__cap span {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 2.1vw, 2.1rem); line-height: 1.2; color: var(--mist);
  text-shadow: 0 2px 24px rgba(30,24,14,.5);
}
@media (max-width: 760px) {
  .interlude__rows { grid-template-columns: 1fr; }
  .interlude__row { aspect-ratio: 16/10; }
}

/* =========================================================
   SPLIT (teaser / about)
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 96px); }
.split--rev .split__media { order: 2; }
/* Không có ảnh (để trống) → 1 cột, chữ full width thay vì để khoảng trống */
.split--solo { grid-template-columns: 1fr; }
.split--solo .split__body { max-width: 70ch; }
.split__body { max-width: 500px; }
.split__body .serif-h { margin-bottom: .55em; }
.split__media { width: 100%; aspect-ratio: 4/5; }
.split__quote { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--lua); margin-top: 1.4em; }
@media (max-width: 840px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--rev .split__media { order: 0; }
  .split__media { aspect-ratio: 16/11; }
}

/* =========================================================
   IMAGE SLOTS — base styling
   ========================================================= */
image-slot {
  display: block; width: 100%;
  background: var(--parchment);
}
.mosaic image-slot, .tango__cell image-slot { height: 100%; }

/* =========================================================
   HOI AN GALLERY — asymmetric mosaic
   ========================================================= */
.gallery { background: var(--rice-mist); }
.gallery__head { max-width: 680px; margin: 0 auto clamp(46px,6vw,72px); text-align: center; }
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(86px, 11vw, 150px);
  gap: clamp(12px, 1.5vw, 20px);
}
.mosaic > * { position: relative; overflow: hidden; }
.m1 { grid-column: 1 / 4; grid-row: 1 / 4; }   /* tall, wide left */
.m2 { grid-column: 4 / 7; grid-row: 1 / 3; }   /* wide top-right */
.m3 { grid-column: 4 / 6; grid-row: 3 / 5; }
.m4 { grid-column: 6 / 7; grid-row: 3 / 5; }
.m5 { grid-column: 1 / 4; grid-row: 4 / 6; }
.m6 { grid-column: 4 / 7; grid-row: 5 / 6; }

.mosaic__cap {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  padding: 26px 24px 20px;
  background: linear-gradient(to top, rgba(46,60,34,.82), rgba(46,60,34,0));
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--mist); line-height: 1.3; pointer-events: none;
}
@media (max-width: 720px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40vw; }
  .m1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .m2 { grid-column: 1 / 3; grid-row: 2 / 3; }
  .m3 { grid-column: 1 / 2; grid-row: 3 / 4; }
  .m4 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .m5 { grid-column: 1 / 3; grid-row: 4 / 5; }
  .m6 { grid-column: 1 / 3; grid-row: 5 / 6; }
}

/* =========================================================
   SHARED HORIZON — horizontal slider
   ========================================================= */
.hzslider { background: var(--reu-deep); color: var(--mist); padding: clamp(72px,9vw,120px) 0 clamp(56px,7vw,92px); overflow: hidden; }
.hzslider__head { max-width: 760px; margin: 0 auto clamp(40px,5vw,60px); text-align: center; }
.hzslider__head .serif-h { color: #fbf7ee; margin: .35em 0 .55em; }
.hzslider__head .serif-h em { color: var(--lua-soft); }
.hzslider__head .body-lg { color: var(--mist-dim); font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem,1.9vw,1.5rem); }

.hzslider__viewport { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.hzslider__frame { position: relative; overflow: hidden; }
.hzslider__track { display: flex; position: relative; transition: transform .8s var(--ease); will-change: transform; }
.hzslide {
  position: relative; flex: 0 0 76%; margin: 0 1.2%;
  aspect-ratio: 16/9; overflow: hidden; border-radius: 3px;
  opacity: .32; transform: scale(.93);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.hzslide.is-active { opacity: 1; transform: scale(1); }
.hzslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hzslide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 30px 24px;
  background: linear-gradient(to top, rgba(34,28,18,.8), transparent);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,1.7vw,1.4rem); color: var(--mist);
}
@media (max-width: 640px) { .hzslide { flex: 0 0 86%; aspect-ratio: 4/3; } }

.hzslider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46,60,34,.55); color: #fbf7ee; border: 1px solid rgba(245,240,232,.35);
  font-family: var(--display); font-size: 28px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.hzslider__arrow:hover { background: var(--brocade); border-color: var(--brocade); color: #f4f8f0; }
.hzslider__arrow--prev { left: calc(var(--gutter) + 14px); }
.hzslider__arrow--next { right: calc(var(--gutter) + 14px); }
.hzslider__arrow span { transform: translateY(-2px); }

.hzslider__dots { display: flex; gap: 11px; justify-content: center; margin-top: clamp(26px,3vw,36px); }
.hzslider__dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(245,240,232,.28); transition: background .4s var(--ease), transform .4s var(--ease);
}
.hzslider__dot.active { background: var(--lua-soft); transform: scale(1.25); }
@media (max-width: 560px) {
  .hzslider__arrow { width: 42px; height: 42px; font-size: 22px; }
  .hzslider__arrow--prev { left: 14px; } .hzslider__arrow--next { right: 14px; }
}

/* =========================================================
   PAST EDITIONS — horizontal scroll rail
   ========================================================= */
.editions { background: var(--rice-mist); overflow: hidden; }
.editions__head { max-width: 680px; margin: 0 auto clamp(40px,5vw,60px); text-align: center; }
.editions__head .serif-h { margin: .3em 0 .5em; }
/* Story So Far — draggable rail, mixed portrait + landscape */
.story-rail {
  display: flex; gap: clamp(14px,1.6vw,22px);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px var(--gutter) 22px; margin: 0 calc(-1 * var(--gutter));
  cursor: grab; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--lua) transparent;
}
.story-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.story-rail::-webkit-scrollbar { height: 6px; }
.story-rail::-webkit-scrollbar-thumb { background: var(--lua); border-radius: 4px; }
.story-rail::-webkit-scrollbar-track { background: rgba(107,124,74,.14); }
.story-item {
  flex: 0 0 auto; height: clamp(248px, 36vw, 440px);
  overflow: hidden; border-radius: 2px; scroll-snap-align: center;
  background: var(--parchment);
}
.story-item image-slot { height: 100%; }
.story-item--port { aspect-ratio: 4/5; }
.story-item--land { aspect-ratio: 3/2; }
.story-rail img { pointer-events: none; }
@media (max-width: 720px) {
  .story-item { height: clamp(220px, 60vw, 320px); }
}
.editions__rail {
  display: flex; gap: clamp(18px,2vw,26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) 30px;
  margin: 0 calc(-1 * var(--gutter));
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--lua) transparent;
}
.editions__rail::-webkit-scrollbar { height: 6px; }
.editions__rail::-webkit-scrollbar-thumb { background: var(--lua); border-radius: 4px; }
.editions__rail::-webkit-scrollbar-track { background: rgba(107,124,74,.14); }
.ed-card { flex: 0 0 clamp(248px, 30vw, 320px); scroll-snap-align: start; }
.ed-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 2px; }
.ed-card__media image-slot { height: 100%; }
.ed-card__num {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  font-family: var(--display); font-weight: 500; font-style: italic; font-size: 1.5rem;
  color: #fbf7ee; text-shadow: 0 1px 12px rgba(34,28,18,.7); letter-spacing: .02em;
}
.ed-card__meta { display: flex; align-items: baseline; gap: 12px; padding: 16px 2px 0; }
.ed-card__yr { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--reu); }
.ed-card__city { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lua); }
.ed-card__city.future { color: var(--amber); }
.ed-card--next .ed-card__media { box-shadow: inset 0 0 0 2px var(--amber); }
.editions__hint { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; display: inline-flex; align-items: center; gap: .6em; }

/* =========================================================
   ABOUT THE GATHERING (already uses .split--rev)
   ========================================================= */
.about { background: var(--parchment); }

/* =========================================================
   TANGO IMAGES — staggered, with overlay line
   ========================================================= */
.tango { background: var(--rice-mist); }
.tango__stack { display: flex; flex-direction: column; gap: clamp(18px, 2.5vw, 30px); }
.tango__row { display: grid; gap: clamp(18px, 2.5vw, 30px); }
.tango__row--a { grid-template-columns: 1.55fr 1fr; }
.tango__row--b { grid-template-columns: 1fr; }
.tango__cell { position: relative; overflow: hidden; }
.tango__cell--tall { aspect-ratio: 4/3; }
.tango__cell--sq { aspect-ratio: 1/1; }
.tango__cell--wide { aspect-ratio: 21/8; }
.tango__overlay {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background: linear-gradient(90deg, rgba(46,60,34,.5), rgba(34,28,18,.3));
  pointer-events: none;
}
.tango__overlay span {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem); color: #fbf7ee; line-height: 1.18;
  text-shadow: 0 2px 30px rgba(30,24,14,.45);
}
@media (max-width: 720px) {
  .tango__row--a { grid-template-columns: 1fr; }
  .tango__cell--tall, .tango__cell--sq { aspect-ratio: 4/3; }
  .tango__cell--wide { aspect-ratio: 16/9; }
}

/* =========================================================
   LEAD CAPTURE — the funnel
   ========================================================= */
.capture { background: var(--reu-deep); color: var(--mist); overflow: hidden; }
.capture::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 85% 0%, rgba(138,154,102,.14), transparent 55%);
}
.capture .wrap { position: relative; }
.capture__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 96px); align-items: start; }
.capture__h { color: #fbf7ee; margin-bottom: .9em; }   /* tăng khoảng cách PHÍA DƯỚI tiêu đề */
.capture .eyebrow { margin-bottom: .8em; }              /* giảm khoảng cách PHÍA TRÊN tiêu đề (từ 1.6em) */
.capture__h em { color: var(--lua-soft); font-style: italic; }
.capture__sub { color: var(--mist-dim); max-width: 30ch; }
.capture__note {
  margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid rgba(245,240,232,.16);
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--lua-soft);
}

.lead-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
  font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mist-dim);
}
.field label .opt { color: var(--lua-soft); letter-spacing: .12em; }
.field input, .field select {
  background: transparent; border: 0; border-bottom: 1px solid rgba(245,240,232,.28);
  color: #fbf7ee; font-family: var(--sans); font-size: 1.02rem; padding: 11px 2px; outline: none;
  border-radius: 0; transition: border-color .4s var(--ease);
  min-height: 46px;
}
.field input::placeholder { color: rgba(245,240,232,.35); }
.field input:focus, .field select:focus { border-color: var(--lua-soft); }
.field select option { color: #2B2318; }
.lead-form .btn--amber { margin-top: 8px; align-self: flex-start; }
.lead-form__micro { font-size: .82rem; color: var(--mist-dim); letter-spacing: .01em; margin: 4px 0 0; }
.lead-form.sent .field, .lead-form.sent .lead-form__micro { display: none; }
.lead-thanks { display: none; }
.lead-form.sent + .lead-thanks {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--lua-soft); line-height: 1.3;
}
@media (max-width: 820px) { .capture__grid { grid-template-columns: 1fr; gap: 40px; } }

/* =========================================================
   FOOTER — minimal
   ========================================================= */
.foot { background: var(--reu); color: var(--mist-dim); }
/* Hàng 1: thương hiệu (trái) + social/email (phải) */
.foot__inner {
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between;
  padding: clamp(44px, 6vw, 68px) var(--gutter) clamp(26px, 3vw, 34px);
}
.foot__brand { display: flex; align-items: center; gap: 14px; color: var(--mist); }
.foot__brand .brand__mark { width: 26px; height: 42px; }
.foot__lines { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.95; }
.foot__social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.foot__social a {
  font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist); transition: color .4s var(--ease);
}
.foot__social a:hover { color: var(--lua-soft); }
.foot__mail { color: var(--lua-soft); text-transform: none; letter-spacing: .03em; }
.foot__mail:hover { color: #fbf7ee; }
/* Hàng 2 (gạch ngang): tên miền (trái) + bản quyền (phải) */
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 22px) var(--gutter) clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(245,240,232,.13);
}
.foot__domains { font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; color: var(--mist-dim); }
.foot__copy { font-family: var(--sans); font-size: 10.5px; letter-spacing: .08em; color: var(--mist-dim); opacity: .75; }
/* Mobile: căn giữa, xếp dọc */
@media (max-width: 700px) {
  .foot__inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .foot__brand { flex-direction: column; gap: 12px; }
  .foot .foot__brand .wordmark { align-items: center; }
  .foot__lines { text-align: center; font-size: 12px; }
  .foot__social { justify-content: center; }
  .foot__social a { font-size: 12.5px; }
  .foot__bar { flex-direction: column; align-items: center; text-align: center; gap: 9px; }
}

/* =========================================================
   ADDITIONS (port) — green image placeholder, intl phone, preview note
   ========================================================= */
/* Ô ảnh trống → nền gradient xanh lúa thay vì để trắng (on-brand, không ảnh ngoài) */
.imgph { width: 100%; height: 100%; min-height: 100%;
  background: linear-gradient(150deg, #6B7C4A 0%, #3D4F2E 58%, #2E3C22 100%);
  position: relative; }
.split__media .imgph, .ed-card__media .imgph, .tango__cell .imgph,
.story-item .imgph, .mosaic > * .imgph, .interlude__row .imgph { position: absolute; inset: 0; }
.imgph::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 18%, rgba(245,240,232,.10), transparent 60%); }
img.hero__img, .interlude__img img, .mosaic img, .hzslide img, .story-item img,
.split__media img, .tango__cell img, .ed-card__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media img, .tango__cell img, .ed-card__media img, .story-item img,
.mosaic > * img, .interlude__row img { position: absolute; inset: 0; }

/* Số điện thoại quốc tế — mã vùng TỰ điền từ ô Country (datalist search) + ô số.
   Bỏ <select> 71 dòng phải scroll; mã vùng hiện dưới dạng prefix màu xanh. */
.field--phone .phone-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: stretch; }
.field--phone .dial { display: flex; align-items: center; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: 1.02rem; color: var(--lua-soft);
  padding: 11px 2px; min-height: 46px; border-bottom: 1px solid rgba(245,240,232,.28); }

/* Combobox Country (tự thân) — KHÔNG hiện list khi click, chỉ lọc khi gõ; tông xanh */
.cc-combo { position: relative; }
.cc-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 6px 0 0; padding: 4px 0;
  list-style: none; max-height: 264px; overflow-y: auto; background: #28331D;
  border: 1px solid rgba(138,154,102,.4); box-shadow: 0 18px 44px rgba(16,12,6,.55);
  scrollbar-width: thin; scrollbar-color: var(--lua) transparent; }
.cc-list[hidden] { display: none; }
.cc-list::-webkit-scrollbar { width: 8px; }
.cc-list::-webkit-scrollbar-thumb { background: var(--lua); border-radius: 4px; }
.cc-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 16px; cursor: pointer; font-family: var(--sans); font-size: .96rem; color: var(--mist); }
.cc-opt[hidden] { display: none; }
.cc-opt .cc-dial { color: var(--lua-soft); font-size: .86rem; flex: none; }
.cc-opt:hover, .cc-opt.active { background: rgba(138,154,102,.2); }

/* Ghi chú "chế độ xem trước" khi chưa gắn endpoint */
.lead-form__preview { margin: 14px 0 0; font-size: .72rem; letter-spacing: .04em;
  color: var(--lua-soft); border: 1px dashed rgba(138,154,102,.5);
  background: rgba(138,154,102,.1); padding: 9px 13px; display: inline-block; }

/* FIX: các container giữ ảnh/placeholder phải position:relative để con absolute không thoát ra ngoài */
.split__media, .story-item { position: relative; }

/* Logo giống trang Home — branding.logo (ảnh) hoặc wordmark chữ "VIETNAM TANGO MARATHON".
   Cỡ +20% so với mặc định. */
.wordmark { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.04;
  letter-spacing: .32em; font-family: var(--sans); font-weight: 400; font-size: .72rem;
  text-transform: uppercase; white-space: nowrap; }
.wordmark b { font-weight: 800; letter-spacing: .14em; font-size: 1.03rem; }
.logo-img { height: 48px; width: auto; display: block; }
/* Topbar: trắng trên hero tối → xanh đậm khi cuộn (nền sáng) */
.topbar .wordmark { color: rgba(245,240,232,.82); transition: color .6s var(--ease); }
.topbar .wordmark b { color: #fbf7ee; transition: color .6s var(--ease); }
.topbar.scrolled .wordmark { color: var(--ink-soft); }
.topbar.scrolled .wordmark b { color: var(--brocade); }
.topbar .logo-img { filter: brightness(0) invert(1); transition: filter .6s var(--ease); }
.topbar.scrolled .logo-img { filter: brightness(0); }
/* Footer (nền moss tối) */
.foot .wordmark { color: var(--mist-dim); }
.foot .wordmark b { color: #fbf7ee; }
.foot .logo-img { filter: brightness(0) invert(1); }

/* ---- HERO restructure ----
   "Save the Date" = Playfair italic (như trang coming soon); headline = tên + năm;
   tagline "A Shared Horizon"; câu thơ chuyển xuống overlay trên ảnh; ảnh cao hơn. */
.hero__save { font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: .005em; text-transform: none;
  color: var(--mist); gap: 0; margin: 0 0 .65em; }
.hero__save::before, .hero__save::after { content: none; }
/* Ngày + địa điểm ngay dưới "Save the Date", màu xanh lúa */
.hero__save { margin-bottom: .5em; }
.hero__sub { color: var(--lua-soft); margin: 0 0 1.4em; transition-delay: .3s; font-weight: 500; }
.hero__sub .sep { color: rgba(138,154,102,.55); }
/* Headline = 1 khối, fade-up sạch (bỏ mask theo dòng → hết "nhảy 2 lần") */
.hero__h { max-width: 22ch; font-size: clamp(2.1rem, 5.6vw, 4.7rem);
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.1s var(--ease) .2s, transform 1.1s var(--ease) .2s; }
.hero.lit .hero__h { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero__h { opacity: 1; transform: none; transition: none; } }
.hero__tagline { font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  letter-spacing: .34em; font-size: clamp(11px, 1.3vw, 14px); color: var(--lua-soft);
  margin: 1.1em 0 0; }
/* Hero image cao hơn ~135% desktop; mobile rút còn 50% màn hình */
.hero__media { min-height: 88vh; }
@media (max-width: 860px) { .hero__media { min-height: 64vh; } }
@media (max-width: 600px) { .hero__media { min-height: 50vh; } }
.hero__media-cap { position: absolute; inset: 0; z-index: 3; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(30px, 6vw, 80px); pointer-events: none; }
.hero__media-cap span { font-family: var(--display); font-style: italic; font-weight: 500;
  color: #fbf7ee; font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1.16; max-width: 20ch;
  text-shadow: 0 2px 30px rgba(20,16,8,.62); }

/* ---- DẢI ẢNH GHIM (pinned horizontal scroll-jack) ----
   Section cao; khối bên trong GHIM full màn hình; cuộn dọc → dịch ngang (JS).
   Ảnh full-height, căn giữa, KHÔNG thanh scroll → khác kiểu rail "The Story So Far".
   overflow-x:clip (không phải hidden) để position:sticky không bị vô hiệu. */
body { overflow-x: clip; }
.hpin { position: relative; background: var(--reu-deep); }
/* Desktop: thêm khoảng cách phía dưới dải ảnh (margin ngoài height → không ảnh hưởng ghim) */
@media (min-width: 761px) { .hpin { margin-bottom: clamp(72px, 9vw, 150px); } }
.hpin__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; }
.hpin__track { display: flex; gap: clamp(14px,2vw,28px); padding: 0 var(--gutter);
  will-change: transform; }
.hpin__item { position: relative; flex: 0 0 auto; height: min(74vh, 760px);
  overflow: hidden; border-radius: 3px; background: var(--parchment); }
/* Tỉ lệ THẬT: cùng chiều cao, chiều rộng tự theo ảnh (không ép khung, không cắt). */
.hpin__item--port, .hpin__item--land { aspect-ratio: auto; }
.hpin__item img { width: auto; height: 100%; object-fit: cover; display: block; user-select: none; }
.hpin__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(22px,2.6vw,40px); pointer-events: none;
  /* lớp darken mờ đậm hơn dưới đáy ảnh để chữ dễ đọc trên ảnh sáng */
  background: linear-gradient(to top, rgba(16,12,6,.92) 0%, rgba(16,12,6,.62) 36%, rgba(16,12,6,.16) 70%, transparent 100%); }
.hpin__cap span { font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem,2vw,2rem); line-height: 1.2; color: #fbf7ee;
  text-shadow: 0 1px 2px rgba(10,7,2,.6), 0 2px 26px rgba(10,7,2,.55); }
/* Mobile (≤760): bỏ ghim → CAROUSEL kéo/vuốt ngang, ảnh vừa khung + ló ảnh kế (peek),
   snap từng ảnh; ẩn thanh scroll. Ảnh thấp hơn để ảnh ngang lọt trong màn hình. */
@media (max-width: 760px) {
  .hpin { height: auto !important; }
  .hpin__sticky { position: static; height: auto; padding: clamp(34px,7vw,52px) 0 0; }
  .hpin__track { overflow-x: auto; transform: none !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity; scroll-padding-left: var(--gutter);
    gap: 12px; padding-bottom: 4px; }
  .hpin__track::-webkit-scrollbar { display: none; }
  .hpin__item { height: clamp(190px, 54vw, 300px); scroll-snap-align: center; }
  .hpin__cap { padding: 16px 18px; }
  .hpin__cap span { font-size: 1.2rem; }
}

/* ---- Mobile: chữ to hơn cho dễ đọc ---- */
@media (max-width: 760px) {
  body { font-size: 1.04rem; }
  .body-lg { font-size: 1.1rem; }
  .muted, .split__body p, .editions__head p { font-size: 1.04rem; }
  .eyebrow { font-size: 12px; letter-spacing: .3em; }
  .lede { font-size: clamp(1.75rem, 6.2vw, 2.2rem); }
  .serif-h { font-size: clamp(2.2rem, 8vw, 2.9rem); }
  .split__quote { font-size: 1.35rem; }
  .capture__sub { font-size: 1.08rem; }
  .capture__note { font-size: 1.18rem; }
  .field label { font-size: 12.5px; letter-spacing: .14em; }
  .field input { font-size: 1.06rem; }
  .lead-form__micro { font-size: .9rem; }
  .cc-opt { font-size: 1.02rem; padding: 12px 16px; }
}

/* ---- Carousel dots (chỉ mobile) — báo cho người xem biết vuốt ---- */
.hpin__dots { display: none; }
.hpin__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(138,154,102,.42); transition: background .3s var(--ease), transform .3s var(--ease); }
.hpin__dot.active { background: var(--lua-soft); transform: scale(1.35); }
@media (max-width: 760px) {
  .hpin__dots { display: flex; justify-content: center; gap: 9px; padding: 14px 0 clamp(40px,9vw,64px); }
}

/* ---- Nút "Notify me" trên sticky nav: nền xanh (brocade) ---- */
.topbar__cta, .topbar.scrolled .topbar__cta {
  background: var(--brocade); border-color: var(--brocade); color: #f4f8f0; backdrop-filter: none;
}
.topbar__cta:hover, .topbar.scrolled .topbar__cta:hover {
  background: var(--brocade-lo); border-color: var(--brocade-lo); color: #fff;
}

/* ---- Mobile: chữ hero TO HẾT MỨC ---- */
@media (max-width: 600px) {
  .hero__save { font-size: clamp(1.6rem, 6.4vw, 2.1rem); margin-bottom: .4em; }
  .hero__h { font-size: clamp(2.7rem, 12vw, 3.9rem); max-width: none; line-height: 1.02; }
  .hero__sub { font-size: 1.04rem; margin-bottom: 1.1em; }
  .hero__tagline { font-size: 13px; letter-spacing: .3em; }
  .hero__media-cap span { font-size: clamp(2rem, 7vw, 2.7rem); max-width: 16ch; }
}

/* ---- Slider "We meet on the same horizon": thu nhỏ mũi tên, ẩn trên mobile ---- */
.hzslider__arrow { width: 38px; height: 38px; font-size: 19px; background: rgba(46,60,34,.4); }
@media (max-width: 760px) { .hzslider__arrow { display: none; } }