/* =====================================================================
   Frank & Seoyun — Wedding site styles
   Botanical editorial: muted garden green, champagne gold, deep ink,
   warm ivory. Mobile-first. All colours meet WCAG AA contrast.
   ---------------------------------------------------------------------
   QUICK-EDIT MAP
   - Colours ........ :root tokens, immediately below
   - Hero photo ..... .hero   (search "HERO")
   - Banner photo ... .banner (search "BANNER")
   - Fonts .......... --display / --body tokens + <link> in index.html
   ===================================================================== */

/* ---------- Design tokens ------------------------------------------- */
:root {
  /* Surfaces */
  --ivory:      #FAF7F0;
  --ivory-2:    #F5EFE3;
  --champagne:  #EFE4D0;
  --sand:       #E3D4BC;

  /* Text-safe colours (all AA on their intended background) */
  --gold:       #8A6E2F;   /* gold TEXT + buttons  (4.5:1 on ivory)  */
  --gold-deco:  #A9893F;   /* decorative only — rules, swatches      */
  --gold-light: #D0B274;   /* gold text on the dark green section    */
  --green:      #4A5640;   /* 7.3:1 on ivory                         */
  --green-deep: #3E4836;   /* dark section background                */
  --ink:        #2B2722;   /* headings — 13.9:1                      */
  --taupe:      #6B6154;   /* secondary text — 5.7:1                 */
  --line:       rgba(43, 39, 34, 0.14);

  /* Type stacks — CJK families load on demand (see script.js) */
  --display: "Cormorant Garamond", "Noto Serif KR", "Noto Serif SC",
             "Apple SD Gothic Neo", "Songti SC", Georgia, serif;
  --body:    "Jost", "Noto Sans KR", "Noto Sans SC", "Apple SD Gothic Neo",
             "Malgun Gothic", "PingFang SC", "Microsoft YaHei",
             system-ui, sans-serif;

  /* Rhythm */
  --section-y: clamp(4.5rem, 11vw, 9rem);
  --gutter:    clamp(1.5rem, 6vw, 4rem);
  --maxw:      72rem;
  --measure:   38rem;
}

/* ---------- Reset / base -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .25vw, 1.075rem);
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

:lang(ko) { line-height: 1.85; }
:lang(zh) { line-height: 1.9; letter-spacing: .02em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Skip link (keyboard users) */
.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: var(--ivory);
  padding: .8rem 1.4rem; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; border-radius: 0 0 4px 4px;
  transition: transform .25s ease;
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- Typography ---------------------------------------------- */
.eyebrow {
  font-weight: 500; font-size: .74rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 1.25rem;
}
:lang(ko) .eyebrow, :lang(zh) .eyebrow { letter-spacing: .18em; }

.section-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.05rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.08; margin: 0 0 1.5rem; color: var(--ink);
}

/* ---------- Layout helpers ------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tint   { background: var(--ivory-2); }
.section--green  { background: var(--green-deep); color: #F1ECE0; }
.section--center { text-align: center; }

.rule { width: 56px; height: 1px; background: var(--sand); border: 0; margin: 0 0 1.75rem; }
.section--center .rule { margin-inline: auto; }

/* ---------- Buttons -------------------------------------------------- */
.btn {
  --bg: var(--ink); --fg: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 2.1rem; font-family: var(--body); font-weight: 500;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--fg); background: var(--bg);
  border: 1px solid var(--bg); border-radius: 999px; cursor: pointer;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold  { --bg: var(--gold); --fg: #fff; }
.btn--gold:hover { --bg: #755C26; }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.section--green .btn--ghost { --fg: #F1ECE0; border-color: rgba(255,255,255,.35); }
.section--green .btn--ghost:hover { background: #F1ECE0; color: var(--green-deep); }

/* ---------- Nav ------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem var(--gutter);
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.is-scrolled {
  background: rgba(250,247,240,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line); padding-block: .8rem;
}
.nav__mark {
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: .04em; color: #fff; text-decoration: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.45); transition: color .4s ease, text-shadow .4s ease;
}
.nav.is-scrolled .nav__mark { color: var(--ink); text-shadow: none; }
.nav__right { display: flex; align-items: center; gap: .85rem; }

/* Language switcher */
.lang { display: inline-flex; align-items: center; gap: .1rem; font-size: .76rem; letter-spacing: .05em; }
.lang__btn {
  appearance: none; background: none; border: 0; padding: .4rem .55rem;
  color: rgba(255,255,255,.88); cursor: pointer; border-radius: 999px;
  font: inherit; line-height: 1; text-shadow: 0 1px 10px rgba(0,0,0,.5);
  transition: color .3s ease, background .3s ease;
}
.nav.is-scrolled .lang__btn { color: var(--taupe); text-shadow: none; }
.lang__btn:hover { color: #fff; }
.nav.is-scrolled .lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.24); }
.nav.is-scrolled .lang__btn[aria-pressed="true"] { color: var(--ink); background: var(--champagne); }
.lang__sep { color: rgba(255,255,255,.45); }
.nav.is-scrolled .lang__sep { color: var(--line); }

.nav__rsvp { display: none; }
@media (min-width: 760px) {
  .nav__rsvp {
    display: inline-block; font-size: .74rem; letter-spacing: .18em;
    text-transform: uppercase; text-decoration: none; color: #fff;
    padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.55);
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
    transition: color .4s ease, border-color .4s ease;
  }
  .nav.is-scrolled .nav__rsvp { color: var(--ink); border-color: var(--gold); text-shadow: none; }
}

/* ---------- HERO ----------------------------------------------------- */
/* EDIT HERO PHOTO: replace images/hero-tall.jpg (portrait screens)
   and images/hero-wide.jpg (landscape screens). Keep both for best results. */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center; color: #fff;
  padding: 7rem var(--gutter) 5.5rem;
  background-color: var(--green-deep);
  background-image:
    linear-gradient(to bottom, rgba(26,22,18,.38), rgba(26,22,18,.20) 38%, rgba(26,22,18,.58)),
    url("images/hero-tall.jpg");
  background-size: cover; background-position: center 45%;
}
@media (min-aspect-ratio: 1/1) {
  .hero {
    background-image:
      linear-gradient(to bottom, rgba(26,22,18,.38), rgba(26,22,18,.20) 38%, rgba(26,22,18,.58)),
      url("images/hero-wide.jpg");
    background-position: center 42%;
  }
}
@supports (background-image: image-set(url("images/hero-tall.webp") type("image/webp"))) {
  .hero {
    background-image:
      linear-gradient(to bottom, rgba(26,22,18,.38), rgba(26,22,18,.20) 38%, rgba(26,22,18,.58)),
      image-set(url("images/hero-tall.webp") type("image/webp"),
                url("images/hero-tall.jpg")  type("image/jpeg"));
  }
  @media (min-aspect-ratio: 1/1) {
    .hero {
      background-image:
        linear-gradient(to bottom, rgba(26,22,18,.38), rgba(26,22,18,.20) 38%, rgba(26,22,18,.58)),
        image-set(url("images/hero-wide.webp") type("image/webp"),
                  url("images/hero-wide.jpg")  type("image/jpeg"));
    }
  }
}

.hero__inner { max-width: 42rem; }
.hero__eyebrow {
  font-size: .76rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.93); margin: 0 0 1.6rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
:lang(ko) .hero__eyebrow, :lang(zh) .hero__eyebrow { letter-spacing: .18em; }
.hero__names {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, 1.6rem + 8.5vw, 6.6rem);
  line-height: 1; margin: 0; text-shadow: 0 2px 34px rgba(0,0,0,.38);
}
.hero__amp { font-style: italic; font-weight: 400; color: #E4CE97; }
.hero__date {
  font-size: .9rem; letter-spacing: .2em; text-transform: uppercase;
  margin: 1.8rem 0 0; color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.45);
}
:lang(ko) .hero__date, :lang(zh) .hero__date { letter-spacing: .1em; }
.hero__sub {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  color: #fff; margin: 1.3rem auto 0; max-width: 30rem;
  text-shadow: 0 1px 20px rgba(0,0,0,.45);
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.9); text-decoration: none;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hero__scroll::after {
  content: ""; width: 1px; height: 38px;
  background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0));
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- Invitation ----------------------------------------------- */
.invite__grid { display: grid; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.invite__body p { margin: 0 0 1.1rem; max-width: var(--measure); color: var(--taupe); }
.invite__signoff {
  font-family: var(--display); font-style: italic; font-size: 1.5rem;
  color: var(--green); margin-top: 1.6rem;
}
.invite__photo { position: relative; aspect-ratio: 4/5; overflow: hidden; margin: 0; }
.invite__photo img { width: 100%; height: 100%; object-fit: cover; }
.invite__photo::after {
  content: ""; position: absolute; inset: .7rem;
  border: 1px solid rgba(255,255,255,.6); pointer-events: none;
}
@media (min-width: 880px) { .invite__grid { grid-template-columns: 1.05fr .95fr; } }

/* ---------- Countdown ------------------------------------------------ */
.countdown { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 3.5rem); margin-top: 2.5rem; }
.count__unit { min-width: 3.4rem; }
.count__num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 1.8rem + 4vw, 4.5rem);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.count__label { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin-top: .7rem; }
.countdown--done {
  display: block; font-family: var(--display); font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem); color: var(--green);
}
.count__cta { margin-top: 2.6rem; }

/* ---------- Schedule -------------------------------------------------- */
.timeline { max-width: 40rem; margin: 2.5rem auto 0; text-align: left; }
.tl { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 1.6rem); padding: 1.6rem 0; border-top: 1px solid var(--line); }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl__time { font-family: var(--display); font-size: 1.45rem; color: var(--green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl__title { font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: .25rem 0 .5rem; }
.tl__venue {
  margin: 0 0 .35rem; font-family: var(--display); font-size: 1.12rem;
  color: var(--green); line-height: 1.3;
}
.tl__desc { margin: 0; color: var(--taupe); font-size: .96rem; }
.tl__transition {
  margin: 0;
  padding: 1.5rem 0 1.5rem clamp(0, 4vw, 1rem);
  border-top: 1px solid var(--line);
  color: var(--taupe);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---------- BANNER ---------------------------------------------------- */
/* EDIT BANNER PHOTO: images/banner-tall.jpg + images/banner-wide.jpg */
.banner {
  position: relative; min-height: 62svh; display: grid; place-items: center;
  text-align: center; color: #fff; padding: 5rem var(--gutter);
  background-color: var(--green-deep);
  background-size: cover; background-position: center 40%;
  background-image: linear-gradient(rgba(26,22,18,.36), rgba(26,22,18,.48)), url("images/banner-tall.jpg");
}
@media (min-aspect-ratio: 1/1) {
  .banner { background-image: linear-gradient(rgba(26,22,18,.36), rgba(26,22,18,.48)), url("images/banner-wide.jpg"); }
}
@supports (background-image: image-set(url("images/banner-tall.webp") type("image/webp"))) {
  .banner {
    background-image: linear-gradient(rgba(26,22,18,.36), rgba(26,22,18,.48)),
      image-set(url("images/banner-tall.webp") type("image/webp"), url("images/banner-tall.jpg") type("image/jpeg"));
  }
  @media (min-aspect-ratio: 1/1) {
    .banner {
      background-image: linear-gradient(rgba(26,22,18,.36), rgba(26,22,18,.48)),
        image-set(url("images/banner-wide.webp") type("image/webp"), url("images/banner-wide.jpg") type("image/jpeg"));
    }
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .banner { background-attachment: fixed; }
}
.banner__line {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 3.5vw, 3.6rem); line-height: 1.15;
  margin: 0; text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.banner__names {
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  margin: 1.4rem 0 0; color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.45);
}

/* ---------- Location (logistics only, no photo) ---------------------- */
.location__text { max-width: 40rem; margin-inline: auto; }
.location__body { color: var(--taupe); margin: 0 0 1rem; }
.location__body:last-child { margin-bottom: 0; }
.location__actions {
  margin-top: 2.2rem; display: flex; flex-wrap: wrap;
  gap: .8rem; justify-content: center;
}

/* ---------- Gallery: quiet editorial carousel ------------------------- */
.carousel { position: relative; margin-top: 2.5rem; }

.carousel__viewport { overflow: hidden; }
/* Without JS it stays a swipeable strip rather than a dead row */
.no-js .carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }

.carousel__track {
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.125rem);   /* 12-18px; 18px at desktop widths */
  margin: 0; padding: 0; list-style: none;
  will-change: transform;
}
.carousel__slide {
  /* Mobile: one photo at the SAME content width as the story feature photo.
     No peek — a cramped active image was the worse trade. */
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 760px) {
  .carousel__slide { flex-basis: calc((100% - 2 * clamp(.75rem, 1.5vw, 1.125rem)) / 3); }
}

.carousel__open {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: var(--champagne); cursor: zoom-in;
  aspect-ratio: 4 / 5; overflow: hidden;
}
.carousel__open img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* per-photo framing, set inline so faces are never blindly cropped */
  object-position: center var(--pos, 50%);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .carousel__open:hover img { transform: scale(1.04); } }
.carousel__track.is-dragging { cursor: grabbing; }
.carousel__track.is-dragging .carousel__open { cursor: grabbing; }

/* Understated controls — desktop only, touch devices swipe */
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: none;
  appearance: none; background: rgba(250,247,240,.86); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 1.35rem; line-height: 1; cursor: pointer; font-family: var(--body);
  transition: background .25s ease, opacity .25s ease;
}
.carousel__nav:hover { background: var(--ivory); }
/* Reachable for keyboard and assistive tech everywhere; only drawn where
   there is a pointer. Focus reveals it so keyboard users can see it. */
.carousel__nav {
  display: block;
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.carousel__nav:focus-visible {
  width: 40px; height: 40px; clip-path: none; overflow: visible;
}
.carousel__nav--prev { left: -8px; }
.carousel__nav--next { right: -8px; }
@media (min-width: 760px) and (hover: hover) {
  .carousel__nav { width: 40px; height: 40px; clip-path: none; overflow: visible; }
}
.carousel__count {
  margin: 1.4rem 0 0; text-align: center;
  font-size: .74rem; letter-spacing: .22em; color: var(--taupe);
  font-variant-numeric: tabular-nums;
}

/* ---------- Lightbox --------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(24, 21, 17, .96);
  display: grid; place-items: center;
}
.lightbox__track {
  display: flex; gap: 0;
  width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
/* <picture> is display:inline by default, so a percentage max-height on the
   img resolved against an auto-height parent and computed to none — which is
   why only the top of a tall photo was visible. Give it a real box, and size
   the image against the VIEWPORT rather than its parent. */
.lightbox__slide picture {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.lightbox__slide img {
  width: auto; height: auto;
  max-width: 92vw;
  max-height: calc(100vh - 8rem);     /* fallback */
  max-height: calc(100dvh - 8rem);    /* leaves room for close + counter */
  object-fit: contain;                /* never cover in the lightbox */
  object-position: center center;     /* never inherit the carousel framing */
}
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  appearance: none; background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  cursor: pointer; line-height: 1; font-family: var(--body);
  transition: background .25s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }
.lightbox__close {
  top: 1.1rem; right: 1.1rem;
  width: 44px; height: 44px; font-size: 1.5rem;
}
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; font-size: 1.7rem;
  display: none;
}
@media (min-width: 760px) {
  .lightbox__nav { display: block; }
  .lightbox__nav--prev { left: 1.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
}
.lightbox__count {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  margin: 0; color: rgba(255,255,255,.85);
  font-size: .78rem; letter-spacing: .18em; font-variant-numeric: tabular-nums;
}
body.lb-open {
  position: fixed; width: 100%;
  overflow: hidden;
  /* top is set inline to -scrollY so the page keeps its place */
}

/* ---------- Notes -------------------------------------------------------- */
.notes__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; text-align: left; }
.note { background: var(--ivory-2); padding: clamp(1.5rem, 4vw, 2.25rem); }
.note__title { font-weight: 500; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem; }
.note__text { margin: 0; color: var(--taupe); font-size: .96rem; }
@media (min-width: 760px) { .notes__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Family acknowledgement (quiet interstitial) --------------- */
.interstitial {
  background: var(--green-deep);
  color: #F1ECE0;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.family__body {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.6rem); line-height: 1.5;
  max-width: 42rem; margin: 0 auto; color: #F1ECE0;
}

/* ---------- RSVP ---------------------------------------------------------- */
.rsvp__body { max-width: var(--measure); margin: 0 auto 2rem; color: var(--taupe); }
.rsvp__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.rsvp__note { margin-top: 1.7rem; font-size: .88rem; color: var(--taupe); }
.rsvp__note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer --------------------------------------------------------- */
.footer { text-align: center; padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) 3rem; background: var(--ink); color: #E7E0D4; }
.footer__mark { font-family: var(--display); font-size: 2.4rem; font-weight: 500; margin: 0 0 .5rem; }
.footer__amp { font-style: italic; color: #D0B274; }
.footer__date { font-size: .78rem; letter-spacing: .3em; color: #B3AA9C; margin: 0 0 1.8rem; }
.footer__line { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: #E7E0D4; margin: 0; }

/* ---------- Scroll reveal --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* Safety net: if JS never runs, nothing stays invisible */
.no-js .reveal { opacity: 1; transform: none; }


/* ---------- Korean copy is written with intentional line breaks -------------- */
:lang(ko) .hero__sub,
:lang(ko) .invite__body p,
:lang(ko) .location__body,
:lang(ko) .dress__body,
:lang(ko) .note__text,
:lang(ko) .rsvp__body,
:lang(ko) .tl__desc,
:lang(ko) .tl__transition,
:lang(ko) .family__body { white-space: pre-line; }

/* ---------- Focus ------------------------------------------------------------ */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .banner :focus-visible, .nav :focus-visible { outline-color: #fff; }

/* ---------- Print ------------------------------------------------------------- */
@media print {
  .nav, .hero__scroll, .banner, .gallery, .count__cta, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: auto; background: none !important; color: #000; padding: 1rem 0 2rem; }
  .hero__names, .hero__date, .hero__sub, .hero__eyebrow { color: #000; text-shadow: none; }
  .section { padding-block: 1.2rem; break-inside: avoid; }
  .section--green, .footer { background: #fff !important; color: #000 !important; }
  .family__body, .footer__line, .footer__mark, .footer__date { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}