html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { line-height: 1.55; font-size: 17px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--night); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 72px 20px; }
h2 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin: 0 0 28px; color: var(--gold); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px;
  background: rgba(11, 18, 51, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.brand img { background: #fff; border-radius: 8px; padding: 2px; }
.top nav { display: flex; gap: 4px; }
.top nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.top nav a:hover { color: var(--ink); background: var(--card); }
.top nav .nav-cta { background: var(--red); color: #fff; font-weight: 700; }
.top nav .nav-cta:hover { background: #f03a42; }
@media (max-width: 760px) {
  .brand span { display: none; }
  .top nav a:not(.nav-cta):nth-child(3) { display: none; }
  .top nav a { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 400px) { .top nav a:nth-child(2) { display: none; } }

/* Language flags */
.langs { display: flex; gap: 6px; margin-left: 4px; }
.langs button {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: none; opacity: .55; transition: opacity .15s, border-color .15s, transform .15s;
}
.langs button svg { display: block; width: 100%; height: 100%; }
.langs button:hover { opacity: .9; transform: scale(1.08); }
.langs button[aria-pressed="true"] { opacity: 1; border-color: var(--gold); }
.top { justify-content: flex-start; }
.top nav { margin-left: auto; }
@media (max-width: 760px) { .langs { gap: 4px; } .langs button { width: 24px; height: 24px; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 700 16px/1 var(--body); text-decoration: none; cursor: pointer; border: 0;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, #ffd768, var(--gold-deep)); color: #2a1600; box-shadow: 0 6px 24px rgba(255, 180, 40, .35); }
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after { /* glossy sheen */
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .05)); pointer-events: none;
}
/* Frosted glass: blurs whatever floats behind it (the lanterns), with a soft inner gloss and glow */
.btn-glass {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -8px 16px rgba(255, 255, 255, .04), 0 0 22px rgba(160, 180, 255, .18), 0 8px 24px rgba(0, 0, 0, .25);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.btn-glass:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 28px rgba(160, 180, 255, .3), 0 8px 24px rgba(0, 0, 0, .25); }
.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 15px; }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: min(88vh, 820px); display: flex; align-items: center; padding: 120px 20px 80px; }
.hero-sky {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 70% 10%, #2a3a8c 0%, transparent 60%),
    radial-gradient(ellipse at 10% 100%, #3a1450 0%, transparent 55%),
    linear-gradient(180deg, #0b1233 0%, #121d52 60%, #1d1450 100%);
}
/* Stars for the whole page (site.js): fixed layers that drift even less than the moon */
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.starfield > div { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.starfield canvas { display: block; width: 100%; }
.starfield i {
  position: absolute; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8), 0 0 14px 2px rgba(255, 220, 150, .35);
}
@media (prefers-reduced-motion: no-preference) {
  .starfield i { animation: twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite alternate; }
}
@keyframes twinkle { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: scale(1.15); } }
.hero .hang { z-index: 1; }
/* The moon hangs in the sky of the whole page: fixed to the screen, drifting only a little as
   you scroll (site.js), behind the content and the rising lanterns. */
.hero .hero-moon { position: fixed; z-index: 0; will-change: transform, opacity; }
.hero::after { /* soft hill of warm light at the bottom */
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(224, 38, 47, .35), transparent 65%);
  pointer-events: none;
}
.hero-moon { position: absolute; width: clamp(200px, 34vw, 420px); aspect-ratio: 1; right: 8%; top: 12%; }
.hero-inner { position: relative; z-index: 2; max-width: 1080px; width: 100%; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; font-weight: 700; color: var(--pink); margin: 0; }
.hero h1 {
  font-family: var(--display); font-weight: 900; margin: 0; padding-top: .3em; /* room for the stacked accent on “Tết” */
  font-size: clamp(52px, 11vw, 124px); line-height: .95;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.hero h1 span { display: block; color: var(--gold); }
/* Info is plain text; everything clickable is a .btn (gold = main action, ghost = the rest). */
.when { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 26px 0 0; font-size: 22px; color: var(--ink); }
.when p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.when b { font-weight: 700; }
.when i { font-style: normal; color: var(--pink); }
.where .pin { flex: none; margin-left: -4px; }
@media (prefers-reduced-motion: no-preference) { .where .pin { animation: drop 2.4s ease-in-out infinite; } }
@keyframes drop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-5px); } 90% { transform: translateY(0); } }
.hero .cta { margin-top: 30px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
  .hero { padding-top: 220px; align-items: flex-end; }
  .hero-moon { right: -40px; top: 40px; }
}

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 86px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--gold), var(--red), var(--pink)); opacity: .5; }
.timeline > li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 34px; padding: 14px 0; }
.timeline > li::before { content: ""; position: absolute; left: 80px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--night), 0 0 18px var(--gold); }
.timeline time { font-weight: 700; font-size: 20px; color: var(--gold); padding-top: 12px; font-variant-numeric: tabular-nums; }
.timeline .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 20px; padding-right: 120px; backdrop-filter: blur(2px); }
.card-stk { position: absolute; right: 14px; top: -16px; display: flex; }
.card-stk .stk { width: 58px; height: 58px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.card-stk .stk + .stk { margin-left: -14px; }
.card-stk .stk:nth-child(odd) { transform: rotate(-8deg); }
.card-stk .stk:nth-child(even) { transform: rotate(10deg) translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
  .card-stk { animation: bob 3.2s ease-in-out infinite alternate; }
  .timeline > li:nth-child(even) .card-stk { animation-duration: 2.7s; animation-delay: -1s; }
}
@keyframes bob { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -7px; rotate: 3deg; } }
.timeline ul li { display: flex; align-items: flex-start; gap: 8px; }
.li-stk { display: inline-flex; flex: none; gap: 2px; margin-top: 1px; }
.li-stk:empty { display: none; }
.li-stk .stk { width: 24px; height: 24px; }
.timeline h3 { margin: 0; font-size: 20px; }
.timeline ul { margin: 8px 0 0; padding: 0; color: var(--ink-soft); list-style: none; display: grid; gap: 4px; }
@media (max-width: 560px) {
  .timeline::before { left: 7px; }
  .timeline > li { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; }
  .timeline > li::before { left: 0; top: 22px; }
  .timeline time { padding-top: 0; }
  .timeline .card { padding-right: 16px; padding-top: 40px; }
  .card-stk .stk { width: 50px; height: 50px; }
}

/* Slideshow embed */
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.row-head h2 { margin: 0; }
.embed { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); background: #000; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* About + gallery */
.lede { font-size: 19px; color: var(--ink-soft); max-width: 60ch; margin: -10px 0 28px; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 10px; grid-auto-flow: dense; }
.gallery li { border-radius: 14px; overflow: hidden; background: var(--night-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery li:hover img { transform: scale(1.04); }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
/* Gallery photos open in the lightbox */
.g-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(6, 9, 28, .88); color: var(--ink); overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lightbox[open] { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; animation: lb-in .25s ease-out; }
html.lb-open { overflow: hidden; }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 0 50px; min-width: 0; }
.lb-img { max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); user-select: none; -webkit-user-drag: none; }
.lb-img.from-right { animation: lb-slide-r .35s cubic-bezier(.2, .7, .2, 1); }
.lb-img.from-left { animation: lb-slide-l .35s cubic-bezier(.2, .7, .2, 1); }
.lightbox figcaption { max-width: 60ch; text-align: center; color: var(--ink-soft); font-size: 15px; padding: 0 12px; }
.lb-count { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lb-btn {
  width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lb-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1)); }
.lb-close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; z-index: 2; }
@media (max-width: 700px) {
  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox figure { padding: 64px 10px 120px; }
  .lb-img { max-height: calc(100dvh - 240px); }
  .lightbox figcaption { font-size: 14px; }
  .lb-prev, .lb-next { position: absolute; bottom: 30px; z-index: 2; }
  .lb-prev { left: calc(50% - 70px); } .lb-next { left: calc(50% + 18px); }
  .lb-count { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lightbox[open], .lb-img.from-right, .lb-img.from-left { animation: none; } }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-slide-r { from { opacity: 0; transform: translateX(40px); } }
@keyframes lb-slide-l { from { opacity: 0; transform: translateX(-40px); } }

@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } }

/* Membership */
.member {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  padding: 40px; border-radius: 28px;
  background: radial-gradient(circle at 0% 0%, rgba(224, 38, 47, .45), transparent 60%), linear-gradient(135deg, #2a1658, #16225a);
  border: 1px solid var(--line);
}
.member h2 { margin-bottom: 8px; }
/* The jade rabbit's pen (rabbit.js) */
.member { position: relative; overflow: hidden; }
.rabbit-pen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.member.rabbit-hover { cursor: grab; }
.member.rabbit-grabbing, .member.rabbit-grabbing * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.price { font-size: 22px; margin: 0 0 22px; }
.price b { font-family: var(--display); font-weight: 900; font-size: 52px; color: var(--ink); }
.pay { margin: 0 0 24px; display: grid; gap: 10px; }
.pay div { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pay dt { width: 90px; color: var(--ink-soft); font-size: 15px; }
.pay dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; gap: 10px; align-items: center; }
.copy { font: 400 14px var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
.copy:hover { background: rgba(255, 255, 255, .14); }
.note { min-height: 1.5em; margin: 10px 0 0; color: var(--teal); font-size: 15px; }
.qr { width: 240px; height: auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.swish-btn { display: none; }
@media (hover: none) and (pointer: coarse) { .swish-btn { display: inline-flex; } }
@media (max-width: 700px) {
  .member { grid-template-columns: 1fr; padding: 28px 22px; text-align: left; }
  .qr { width: min(240px, 70%); margin: 0 auto; }
}

/* Footer */
.foot { padding-top: 10px; padding-bottom: 48px; border-top: 1px solid var(--line); }
.foot ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--ink-soft); font-size: 15px; }
.foot a { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

/* Lantern layers (lanterns.js). Back layer sits between the hero sky and the content,
   front layer drifts over everything except the header. */
.lanterns { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lanterns-back { z-index: 0; }
.lanterns-front { z-index: 15; }
main > section:not(.hero), main > .bunting, .foot { position: relative; z-index: 1; }
.hero-inner { z-index: 2; }

/* Bunting of star lanterns */
.bunting { position: relative; height: 120px; margin: 0 0 -40px; overflow: visible; }
.bunting .b-line { position: absolute; inset: 0 0 auto; width: 100%; height: 60px; }
.bunting span { position: absolute; width: 0; transform-origin: top center; }
.bunting span::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 14px; background: #ffd77a80; }
.bunting svg { position: absolute; left: -26px; top: 12px; width: 52px; height: 52px; filter: drop-shadow(0 0 12px rgba(255, 90, 60, .55)); }
@media (prefers-reduced-motion: no-preference) {
  .bunting span { animation: swing var(--dur) ease-in-out var(--d) infinite alternate; }
}
@media (max-width: 640px) { .bunting svg { width: 38px; height: 38px; left: -19px; } .bunting span:nth-child(even of span) { display: none; } }
@media (max-width: 640px) { .when p i:last-child { display: none; } }