/* ============================================================
   Race to Forever — Trường Sơn & Thùy Dương
   Mobile first. Base = 360px. Breakpoints: 640px (sm), 768px (md)
   ============================================================ */

:root {
  --bg: #f3efe7;
  --fg: #161514;
  --card: #fbf9f4;
  --muted: #e7e1d6;
  --muted-fg: #5f5a53;
  --border: #d8d1c4;
  --input: #cfc7b9;

  /* Brief: red -> soft green. Primary must stay readable on --bg. */
  --primary: #3f8250;
  --primary-hover: #2f6a40;
  --primary-fg: #fbf9f4;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 64rem;
  --gutter: 1.25rem;
  --topbar-h: 3.5rem;
  --radius: 0.25rem;
}

@media (min-width: 768px) { :root { --gutter: 2rem; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, fieldset, ol, ul { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: block; } }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.accent { color: var(--primary); }
.display { font-family: var(--font-display); }

.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--pin { width: 1rem; height: 1rem; color: var(--primary); }
.icon--check { width: 1.75rem; height: 1.75rem; stroke-width: 3; }

/* ---------- Checkered flag pattern ---------- */
.checkered {
  --sq: var(--fg);
  background-image: conic-gradient(var(--sq) 25%, transparent 0 50%, var(--sq) 0 75%, transparent 0);
  background-size: 12px 12px;
}
.checkered--sm { display: inline-block; width: 0.75rem; height: 0.75rem; }
.checkered--primary { --sq: var(--primary); background-size: 10px 10px; }
.checkered--light { --sq: var(--bg); }

/* ---------- Skewed buttons ---------- */
.btn-skew {
  display: inline-flex; align-items: center; justify-content: center;
  transform: skewX(-6deg);
  transition: background-color .15s, transform .15s;
}
.btn-skew > span, .btn-skew__inner { display: inline-flex; transform: skewX(6deg); }
.btn-skew--dark { background: var(--fg); color: var(--bg); padding: .375rem .75rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.btn-skew--dark:hover { background: var(--primary); }
.btn-skew--primary { background: var(--primary); color: var(--primary-fg); }
.btn-skew--primary:hover { background: var(--fg); }
.btn-skew__inner { align-items: center; gap: .75rem; }
.btn-skew__label { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.btn-skew__vi { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.btn-skew__en { font-size: .6875rem; text-transform: uppercase; letter-spacing: .15em; opacity: .85; }
.btn-skew:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset-inline: 0; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(216, 209, 196, .6);
  background: rgba(243, 239, 231, .85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); }
.topbar__brand { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }
.topbar__nav { list-style: none; padding: 0; display: flex; align-items: center; gap: 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.topbar__nav a:not(.btn-skew) { transition: color .15s; }
.topbar__nav a:not(.btn-skew):hover { color: var(--primary); }
@media (min-width: 768px) { .topbar__nav { gap: 1.5rem; } }

/* ---------- Section heads ---------- */
.section-head { display: flex; flex-direction: column; gap: .75rem; }
.eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-fg); }
.eyebrow__page { font-family: var(--font-display); font-size: 1rem; font-weight: 700; font-style: italic; color: var(--primary); }
.eyebrow__line { width: 2rem; height: 1px; background: currentColor; opacity: .5; }
.eyebrow--light { color: rgba(243, 239, 231, .8); }
.section-title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .9; letter-spacing: -.025em; }
.section-title--xl { font-size: 3rem; line-height: .88; }
.section-sub { font-size: .875rem; color: var(--muted-fg); }
@media (min-width: 768px) {
  .section-title, .section-title--xl { font-size: 3.75rem; }
  .section-sub { font-size: 1rem; }
}

/* ---------- PAGE 1 — Cover ---------- */
.cover { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.cover__main { display: flex; flex: 1; flex-direction: column; padding-top: 5rem; }
.cover__text { display: flex; flex-direction: column; }
.cover__title { font-family: var(--font-display); font-size: 22vw; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .82; letter-spacing: -.025em; }
.cover__title-row { display: flex; align-items: flex-end; gap: .75rem; }
.cover__to { font-size: .38em; font-weight: 700; line-height: 1; margin-bottom: .12em; color: var(--primary); }
.cover__forever { display: block; color: var(--primary); }
.cover__tagline { display: flex; flex-direction: column; gap: .25rem; margin-top: 1.25rem; }
.cover__tagline-vi { font-weight: 500; line-height: 1.375; }
.cover__tagline-en { font-size: .875rem; font-style: italic; color: var(--muted-fg); }
.cover__stripes { display: none; align-items: center; gap: .25rem; margin-top: 1.5rem; }
.cover__stripe-flag { display: block; width: 2rem; height: 1.25rem; transform: skewX(-12deg); }
.cover__stripe { display: block; height: .25rem; transform: skewX(-12deg); background: var(--primary); }
.cover__stripe--long { width: 2.5rem; }
.cover__stripe--short { width: 1.25rem; opacity: .6; }
.cover__photo { position: relative; margin: 2rem calc(-1 * var(--gutter)) 0; aspect-ratio: 4 / 3; overflow: hidden; }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.cover__photo-fade { position: absolute; inset-inline: 0; bottom: 0; height: 33%; background: linear-gradient(to top, var(--bg), transparent); }
.cover__footer { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-top: 1.5rem; padding-bottom: 2.5rem; text-align: center; }
.cover__names { display: flex; flex-direction: column; gap: .25rem; }
.cover__couple { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.cover__sub { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-fg); }
.cover__date { font-family: var(--font-display); font-size: 2.25rem; font-weight: 900; font-style: italic; letter-spacing: -.025em; }
.btn-skew--cta { width: 100%; max-width: 20rem; margin-top: 1rem; padding: .875rem 1.5rem; }
.btn-skew--cta .btn-skew__inner { width: 100%; justify-content: space-between; gap: 1rem; }
.btn-skew--cta:hover { background: var(--primary); transform: skewX(-6deg) translateX(.25rem); }
.btn-skew--cta:hover .icon--arrow { transform: translateX(.25rem); }
.icon--arrow { transition: transform .15s; }

@media (min-width: 768px) {
  .cover__main { flex-direction: row; align-items: center; gap: 3rem; padding-top: 6rem; }
  .cover__text { width: 50%; padding-block: 3rem; }
  .cover__title { font-size: 8.5rem; }
  .cover__tagline-vi { font-size: 1.125rem; }
  .cover__tagline-en { font-size: 1rem; }
  .cover__stripes { display: flex; }
  .cover__photo { width: 50%; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .cover__photo-fade { display: none; }
  .cover__footer { flex-direction: row; justify-content: space-between; text-align: left; }
  .cover__couple { font-size: 1.875rem; }
  .cover__date { font-size: 3rem; }
  .btn-skew--cta { width: auto; margin-top: 0; }
}

/* ---------- PAGE 2 — Our Route ---------- */
.stage { display: flex; flex-direction: column; justify-content: center; gap: 2rem; min-height: 100vh; min-height: 100svh; padding-block: 4rem; border-top: 1px solid var(--border); scroll-margin-top: var(--topbar-h); }
.stage__body { display: flex; flex-direction: column; gap: 1.5rem; }
.stage__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.stage__photo img { width: 100%; height: 100%; object-fit: cover; }
.stage__badge { position: absolute; left: 0; top: 0; transform: skewX(-12deg); background: var(--primary); color: var(--primary-fg); padding: .25rem .75rem; font-family: var(--font-display); font-size: .875rem; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .05em; }
.stage__text { display: flex; flex-direction: column; gap: 1rem; }
.stage__heading { display: flex; align-items: baseline; gap: .75rem; }
.stage__num { font-family: var(--font-display); font-size: 3.75rem; font-weight: 900; font-style: italic; line-height: 1; color: var(--primary); }
.stage__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .025em; line-height: 1.25; }
.stage__lead { font-size: 1.125rem; font-weight: 600; line-height: 1.375; text-wrap: pretty; }
.stage__vi { line-height: 1.625; text-wrap: pretty; }
.stage__en { border-left: 2px solid var(--primary); padding-left: 1rem; font-size: .875rem; font-style: italic; line-height: 1.625; color: var(--muted-fg); text-wrap: pretty; }
@media (min-width: 768px) {
  .stage { padding-block: 5rem; }
  .stage__body { flex-direction: row; align-items: center; gap: 3rem; }
  .stage--reverse .stage__body { flex-direction: row-reverse; }
  .stage__photo, .stage__text { width: 50%; }
  .stage__num { font-size: 4.5rem; }
  .stage__title { font-size: 1.875rem; }
}

/* ---------- PAGE 3 — Race Day ---------- */
.raceday { display: flex; flex-direction: column; gap: 2rem; padding-block: 4rem; border-top: 1px solid var(--border); scroll-margin-top: var(--topbar-h); }
.raceday__grid { display: grid; gap: 1.5rem; }
.card-route { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--fg); color: var(--bg); }
.card-route__strip { height: .75rem; width: 100%; }
.card-route__body { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
.card-route__head { display: flex; flex-direction: column; gap: .5rem; }
.card-route__label { font-family: var(--font-display); font-size: .875rem; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .2em; color: var(--primary); }
.card-route__title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; }
.card-route__sub { font-size: .875rem; text-transform: uppercase; letter-spacing: .15em; color: rgba(243, 239, 231, .7); }
.card-route__meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; padding-block: 1rem; border-block: 1px solid rgba(243, 239, 231, .15); }
.card-route__date { font-family: var(--font-display); font-size: 1.875rem; font-weight: 900; font-style: italic; line-height: 1; }
.card-route__weekday { margin-top: .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(243, 239, 231, .6); }
.card-route__place { display: flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding-left: 2rem; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: .5rem; bottom: .5rem; border-left: 2px dashed rgba(243, 239, 231, .3); }
.timeline li { position: relative; display: flex; flex-direction: column; gap: .125rem; }
.timeline li::before { content: ""; position: absolute; left: -2rem; top: .25rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--fg); }
.timeline__finish::after { content: ""; position: absolute; left: calc(-2rem + .3rem); top: calc(.25rem + .3rem); width: .4rem; height: .4rem; background: var(--primary-fg); clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); }
.timeline__time { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; font-style: italic; line-height: 1; color: var(--primary); }
.timeline__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.timeline__sub { font-size: .875rem; color: rgba(243, 239, 231, .7); }
.card-route__venue { display: flex; flex-direction: column; gap: .25rem; padding-top: 1rem; border-top: 1px solid rgba(243, 239, 231, .15); }
.card-route__venue-name { font-weight: 600; }
.card-route__venue-addr { font-size: .875rem; color: rgba(243, 239, 231, .7); }
.card-route__map { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; min-height: 2.75rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); }
.card-route__map:hover .icon--arrow { transform: translateX(.25rem); }
.card-route__map .icon { width: 1rem; height: 1rem; }
@media (min-width: 768px) {
  .raceday { padding-block: 6rem; }
  .raceday__grid { grid-template-columns: 1fr 1fr; }
  .card-route__body { padding: 2rem; }
  .card-route__title { font-size: 3rem; }
}

/* ---------- PAGE 4 — RSVP ---------- */
.rsvp { position: relative; border-top: 1px solid var(--border); background: rgba(231, 225, 214, .5); scroll-margin-top: var(--topbar-h); }
.rsvp__inner { display: flex; flex-direction: column; gap: 2.5rem; padding-block: 4rem; }
.rsvp__intro { display: flex; flex-direction: column; gap: 1rem; }
.rsvp__kicker { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--muted-fg); }
.rsvp__lead { font-size: 1.125rem; font-weight: 500; line-height: 1.375; text-wrap: pretty; }
.rsvp__lead-en { font-size: .875rem; font-style: italic; color: var(--muted-fg); }

.form { display: flex; flex-direction: column; gap: 2rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.label { display: flex; flex-direction: column; gap: .125rem; }
legend.label { margin-bottom: .75rem; }
.label__vi { font-size: .875rem; font-weight: 600; }
.label__en { font-size: .75rem; font-style: italic; color: var(--muted-fg); }
.input { width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: rgba(95, 90, 83, .7); }
.input:focus { border-color: var(--fg); }
.input:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.input--area { height: auto; padding: .75rem 1rem; resize: vertical; }
.input--select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161514' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.5rem; }
.input:user-invalid, .form--checked .input:invalid { border-color: #b3170f; }

.choices { display: grid; gap: .5rem; }
.choice { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color .15s; }
.choice:hover { border-color: var(--fg); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__dot { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; border: 2px solid var(--input); border-radius: 50%; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choice__text { display: flex; flex-direction: column; gap: .125rem; }
.choice__vi { font-size: .875rem; font-weight: 600; line-height: 1.375; }
.choice__en { font-size: .75rem; font-style: italic; color: var(--muted-fg); }
.choice:has(input:checked) { border-color: var(--fg); }
.choice:has(input:checked) .choice__dot { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--card); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--primary); }
@media (min-width: 640px) { .choices { grid-template-columns: 1fr 1fr; } }

.field--shuttle { padding: 1rem; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); background: rgba(251, 249, 244, .6); }
.shuttle__vi { font-size: .875rem; line-height: 1.625; }
.shuttle__en { margin-bottom: .5rem; font-size: .8125rem; font-style: italic; line-height: 1.625; color: var(--muted-fg); }
.form__error { font-size: .875rem; font-weight: 600; color: #b3170f; }
.btn-skew--submit { height: 3.5rem; padding: 0 2rem; width: 100%; }
.btn-skew--submit:disabled { opacity: .7; cursor: wait; }
@media (min-width: 640px) { .btn-skew--submit { width: fit-content; } }
@media (min-width: 768px) {
  .rsvp__inner { flex-direction: row; gap: 4rem; padding-block: 6rem; }
  .rsvp__intro { position: sticky; top: 6rem; align-self: flex-start; width: 40%; }
  .form { width: 60%; }
}

/* Thank-you dialog */
.thanks { width: min(92vw, 26rem); margin: auto; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--card); color: var(--fg); }
.thanks::backdrop { background: rgba(22, 21, 20, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.thanks__strip { height: .75rem; width: 100%; }
.thanks__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1.5rem; text-align: center; }
.thanks__close { position: absolute; right: .75rem; top: .75rem; padding: .5rem; color: var(--muted-fg); transition: color .15s; }
.thanks__close:hover { color: var(--fg); }
.thanks__check { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--primary); color: var(--primary-fg); }
.thanks__label { font-family: var(--font-display); font-size: .875rem; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .2em; color: var(--primary); }
.thanks__title { font-size: 1.125rem; font-weight: 600; line-height: 1.375; text-wrap: balance; }
.thanks__en { font-size: .875rem; font-style: italic; color: var(--muted-fg); text-wrap: balance; }
.thanks__ok { margin-top: .5rem; padding: .625rem 1.5rem; font-size: .875rem; }

/* ---------- PAGE 5 — Closing ---------- */
.closing { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; color: var(--bg); }
.closing__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.closing__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(22, 21, 20, .8), rgba(22, 21, 20, .55), rgba(22, 21, 20, .9)); }
.closing__inner { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 3rem; padding-block: 4rem; }
.closing__text { display: flex; flex-direction: column; gap: 1.5rem; max-width: 42rem; }
.closing__title { font-family: var(--font-display); font-size: 3.75rem; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .85; letter-spacing: -.025em; }
.closing__vi { line-height: 1.625; text-wrap: pretty; }
.closing__en { border-left: 2px solid var(--primary); padding-left: 1rem; font-size: .875rem; font-style: italic; line-height: 1.625; color: rgba(243, 239, 231, .8); text-wrap: pretty; }
.closing__sign { display: flex; flex-direction: column; gap: 1rem; }
.closing__see { font-family: var(--font-display); font-size: 1.875rem; font-weight: 900; font-style: italic; text-transform: uppercase; }
.closing__love { font-size: .875rem; text-transform: uppercase; letter-spacing: .2em; color: rgba(243, 239, 231, .7); }
.closing__names { margin-top: .25rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.closing__strip { height: .75rem; width: 100%; opacity: .9; }
.closing .accent { color: #7fbf8e; } /* lighter green on dark photo for contrast */
@media (min-width: 768px) {
  .closing__inner { padding-block: 6rem; }
  .closing__title { font-size: 6rem; }
  .closing__vi { font-size: 1.125rem; }
  .closing__en { font-size: 1rem; }
  .closing__see { font-size: 2.25rem; }
  .closing__names { font-size: 1.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}