/* Hallmark · shape: Narrative Workflow · genre: editorial · theme: custom (by request: soft beige and dusty rose, modern, after the couple's Joy example) · job: attend · draw: 474eb1
 * hero: Split, an inset rounded photo beside a calm panel · nav: translucent wordmark bar with RSVP · footer: colophon block · imagery: photographs · signature: names, date and countdown beside a blush bouquet · custom: beige/rose, soft cards
 * axes: light/old-style-serif/dusty-rose · posture: quiet · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, practical guest text is long; grouped into soft cards, FAQ folded into details */
/* waive 58: a wedding guest page must carry schedule, dress code, stay and RSVP; words kept per section under 80 */
@import url("./tokens.css");
@import url("./base.css");

/* pen.dev better-ui: images get a neutral 10% outline and a soft radius */
[data-slot] { border-radius: var(--radius-media); }
[data-slot] > img { filter: saturate(0.95) brightness(1.02); }
[data-slot]::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; outline: 1px solid var(--color-image-outline); outline-offset: -1px; pointer-events: none; }

html { scroll-padding-top: 72px; }
@media (max-width: 75rem) { html { scroll-padding-top: 120px; } }
body { color: var(--color-ink-2); }
h1, h2, h3 { font-weight: 500; line-height: 1.1; color: var(--color-ink); }
h1, h2 { letter-spacing: -0.01em; }
/* Korean: Gowun Batang for every hangul line, a quiet bilingual subtitle under each heading */
:lang(ko) { word-break: keep-all; }
html:lang(ko) body { font-family: var(--font-body-ko); }
[lang="ko"]:not(html) { font-family: var(--font-ko); }
.ko { margin-top: var(--space-xs); font-size: var(--text-lg); color: var(--color-accent-deep); }
.hero__ko { font-size: var(--text-xl); color: var(--color-ink-2); }
.section__lead { margin-top: var(--space-sm); font-size: var(--text-lead); max-width: 52ch; text-wrap: pretty; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1.5px solid var(--color-accent); border-radius: var(--radius-control); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), scale var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--secondary { background: transparent; color: var(--color-accent-deep); }
.btn--secondary:hover { background: color-mix(in oklab, var(--color-accent) 10%, transparent); }
.btn:active { scale: 0.96; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; scale: 1; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--small { min-height: 44px; padding: 0 var(--space-md); }
a { text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* icons: one Lucide set, drawn as masks in the rose ink (pen.dev better-ui: one stroke, currentColor-style recolouring) */
[data-icon]::before { content: ""; display: block; width: 28px; height: 28px; background-color: var(--color-accent-deep); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
[data-icon="clock"] { --icon: var(--icon-clock); }
[data-icon="heart"] { --icon: var(--icon-heart); }
[data-icon="coffee"] { --icon: var(--icon-coffee); }
[data-icon="wine"] { --icon: var(--icon-wine); }
[data-icon="mountain"] { --icon: var(--icon-mountain); }
[data-icon="shirt"] { --icon: var(--icon-shirt); }
[data-icon="flower"] { --icon: var(--icon-flower); }
[data-icon="footprints"] { --icon: var(--icon-footprints); }
[data-icon="cloudsun"] { --icon: var(--icon-cloudsun); }
[data-icon="plane"] { --icon: var(--icon-plane); }
[data-icon="car"] { --icon: var(--icon-car); }
[data-icon="bus"] { --icon: var(--icon-bus); }
[data-icon="building"] { --icon: var(--icon-building); }
[data-icon="waves"] { --icon: var(--icon-waves); }
[data-icon="house"] { --icon: var(--icon-house); }
[data-icon="play"] { --icon: var(--icon-play); }
[data-icon="utensils"] { --icon: var(--icon-utensils); }
[data-icon="smartphone"] { --icon: var(--icon-smartphone); }
[data-icon="idcard"] { --icon: var(--icon-idcard); }
[data-icon="landmark"] { --icon: var(--icon-landmark); }
[data-icon="sunset"] { --icon: var(--icon-sunset); }
/* Korean wedding symbols drawn for this site (public/images/symbols) */
[data-icon="ducks"] { --icon: url("/images/symbols/mandarin-ducks.svg"); }
[data-icon="hallasan"] { --icon: url("/images/symbols/hallasan-wave.svg"); }
[data-icon="peony"] { --icon: url("/images/symbols/peony.svg"); }
[data-icon="goose"] { --icon: url("/images/symbols/goose.svg"); }
[data-icon="camellia"] { --icon: url("/images/symbols/camellia.svg"); }
.rsvp__intro[data-icon]::before { width: 40px; height: 40px; }
.footer__mark[data-icon] { display: flex; align-items: center; gap: var(--space-sm); }
.footer__mark[data-icon]::before { width: 24px; height: 24px; }
.ornament { width: min(320px, 70%); margin-inline: auto; background-color: var(--color-accent); -webkit-mask: var(--ornament) center / contain no-repeat; mask: var(--ornament) center / contain no-repeat; }
.ornament--peony { --ornament: url("/images/symbols/divider-peony.svg"); aspect-ratio: 240 / 24; }
.ornament--clouds { --ornament: url("/images/symbols/cloud-band.svg"); aspect-ratio: 240 / 32; margin-bottom: var(--space-lg); }
main > .ornament { margin-bottom: var(--section-gap-s); }

/* details: monogram, heart dividers, thank-you close */
.monogram { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--space-xs); border: 1px solid var(--color-accent); border-radius: 50%; font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--color-accent-deep); }
.divider { display: flex; align-items: center; gap: var(--space-md); width: min(240px, 60%); margin-inline: auto; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-accent); opacity: 0.5; }
.divider > span { width: 18px; height: 18px; background-color: var(--color-accent); -webkit-mask: var(--icon-heart) center / contain no-repeat; mask: var(--icon-heart) center / contain no-repeat; }
.thanks { padding-block: var(--section-gap); background: var(--color-paper-3); text-align: center; }
.thanks__inner { display: grid; justify-items: center; gap: var(--space-md); }
.thanks h2 { margin-top: var(--space-lg); font-size: var(--text-display-s); }
.thanks__text { max-width: 34ch; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.3; color: var(--color-ink); text-wrap: balance; }
.thanks__sign { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; color: var(--color-accent-deep); }
.letter__sign { font-style: italic; }

/* Korean artworks: museum pieces with their meaning in the caption */
.art { margin: 0; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-media); outline: 1px solid var(--color-image-outline); outline-offset: -1px; }
.art--geese { margin-top: var(--space-xl); max-width: 22rem; }
.art--geese img { aspect-ratio: 3 / 4; object-position: 50% 8%; }
.art--ducks { width: 152px; }
.art--ducks img { aspect-ratio: 1; border-radius: 50%; }
.art--ducks { overflow: hidden; border-radius: 50%; box-shadow: var(--shadow-card); }
@media (max-width: 60rem) { .art--geese img { aspect-ratio: 4 / 3; object-position: 50% 12%; } }

/* brand marks (Simple Icons, CC0; trademarks of their owners) in the button's own colour */
[data-brand] { gap: var(--space-xs); }
[data-brand]::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--brand) center / contain no-repeat; mask: var(--brand) center / contain no-repeat; }
[data-brand="naver"] { --brand: url("/images/brands/naver.svg"); }
[data-brand="kakao"] { --brand: url("/images/brands/kakao.svg"); }
[data-brand="googlemaps"] { --brand: url("/images/brands/googlemaps.svg"); }
[data-brand="googlecalendar"] { --brand: url("/images/brands/googlecalendar.svg"); }
[data-brand="apple"] { --brand: url("/images/brands/apple.svg"); }
.place__map[data-brand]::before { -webkit-mask-image: var(--brand); mask-image: var(--brand); }
.hotel__link[data-brand] { display: inline-flex; align-items: center; }
.cal__save-label { margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.cal__save { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-sm); }

/* language switch */
.lang { display: inline-flex; gap: var(--space-3xs); padding: var(--space-2xs); border-radius: var(--radius-control); background: var(--color-paper-2); }
.lang button { min-width: 44px; min-height: 44px; padding: 0 var(--space-xs); border: 0; border-radius: calc(var(--radius-control) - var(--space-2xs)); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lang button:lang(ko) { font-family: var(--font-ko); }
.lang button:hover { color: var(--color-ink); }
.lang button[aria-pressed="true"] { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); }
.lang button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.hero--login .lang { justify-self: end; margin-bottom: var(--space-lg); }
html[lang="ko"] .ko { display: none; }

/* nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule); }
.nav__row { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.nav__mark { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); text-decoration: none; margin-right: auto; }
.nav__links { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); font-weight: 500; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 1.5px; border-radius: 1px; background: var(--color-accent); opacity: 0; scale: 0.4 1; transition: opacity var(--dur-short) var(--ease-out), scale var(--dur-short) var(--ease-out); }
.nav__links a[aria-current] { color: var(--color-accent-deep); }
.nav__links a[aria-current]::after { opacity: 1; scale: 1 1; }
.nav__links a:hover { color: var(--color-ink); }
/* below 75rem the section links move to a swipeable second row */
@media (max-width: 75rem) {
  .nav__row { flex-wrap: wrap; row-gap: 0; }
  .nav nav { order: 3; flex-basis: 100%; min-width: 0; margin-inline: calc(var(--gutter) * -1); }
  .nav__links { gap: var(--space-lg); overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--gutter), var(--color-ink) calc(100% - var(--gutter)), transparent); }
  .nav__links::-webkit-scrollbar { display: none; }
}
.nav__mark { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .nav__links a::after { transition: none; } }
@media (max-width: 30rem) { .nav__row { gap: var(--space-sm); } .nav__mark { font-size: var(--text-lg); } .nav .btn--small { display: none; } }

/* hero: an inset rounded photo beside a calm panel */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg); min-height: min(calc(100svh - 64px), 880px); padding: var(--space-lg); }
.hero__photo { margin: 0; min-height: 420px; }
.hero__panel { display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-3xl) var(--space-xl); border-radius: var(--radius-media); background: var(--color-paper-2); text-align: center; }
.hero h1 { max-width: 10ch; font-size: var(--text-display); }
.hero__date { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.hero__place { font-size: var(--text-lg); }
.hero__count { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }
.hero__count::before { content: ""; width: 14px; height: 14px; background-color: var(--color-accent-deep); -webkit-mask: var(--icon-heart) center / contain no-repeat; mask: var(--icon-heart) center / contain no-repeat; }
.hero .actions { justify-content: center; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
@media (max-width: 60rem) { .hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-sm); gap: var(--space-sm); } .hero__photo { aspect-ratio: 4 / 3; min-height: 0; max-height: 70svh; } .hero__panel { padding: var(--space-2xl) var(--space-lg); } }

/* login: the same split, with the password form in the panel */
.hero--login { min-height: 100svh; }
.login { display: grid; gap: var(--space-xs); width: min(100%, 26rem); margin-top: var(--space-xl); text-align: left; }
.login label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.login__row { display: flex; gap: var(--space-xs); }
.login input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-short) var(--ease-out); }
.login input:hover { border-color: var(--color-ink-2); }
.login input:focus-visible { outline-color: var(--color-focus); }
.login input[aria-invalid="true"] { border-color: var(--color-error); }
.login__help { font-size: var(--text-sm); color: var(--color-muted); }
.login__help--error { color: var(--color-error); }
.hero--login .footer__credit { margin-top: var(--space-2xl); font-size: var(--text-xs); }

/* letter */
.letter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--section-gap); }
.letter__body { display: grid; align-content: start; gap: var(--space-md); font-size: var(--text-lead); line-height: 1.55; }
.letter__sign { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
@media (max-width: 60rem) { .letter { grid-template-columns: minmax(0, 1fr); } }

/* our story: two films */
main > .divider { margin-bottom: var(--section-gap-s); }
.story { padding-bottom: var(--section-gap-s); }
.films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.film { display: grid; gap: var(--space-md); align-content: start; margin: 0; }
.film__frame { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-sm); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-media); background: var(--color-paper-3); }
.film__frame > video, .film__frame > iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.film__frame::before { width: 44px; height: 44px; }
.film__frame:has(> video, > iframe)::before { display: none; }
.film__soon { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink-2); }
.film h3 { font-size: var(--text-2xl); }
.film figcaption { display: grid; gap: var(--space-xs); }
@media (max-width: 48rem) { .films { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); } }

/* gallery: placeholders for the official photos */
.gallery { padding-bottom: var(--section-gap); }
.gallery__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md); margin-top: var(--space-2xl); }
.gallery__grid > figure { margin: 0; aspect-ratio: 4 / 5; }
.gallery__grid > figure:first-child { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.gallery__grid > figure:nth-child(n + 2) { aspect-ratio: 5 / 4; }
@media (max-width: 48rem) { .gallery__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gallery__grid > figure:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; } }

/* the day: soft cards on a beige band */
.day { background: var(--color-paper-2); padding-block: var(--section-gap); }
.day__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-md); align-items: start; margin-top: var(--space-2xl); }
.schedule { list-style: none; display: grid; gap: var(--space-sm); margin: 0; padding: 0; }
.schedule__time { grid-area: time; }
.schedule > li::before { grid-area: icon; align-self: start; }
.schedule h3 { grid-area: title; }
.schedule > li > p:last-child { grid-area: text; }
.cal { position: sticky; top: calc(64px + var(--space-lg)); display: grid; justify-items: center; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); text-align: center; }
.cal__month { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.cal .ko { margin-top: 0; font-size: var(--text-sm); }
.cal__table { width: 100%; max-width: 20rem; margin-top: var(--space-lg); border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.cal__table th { padding-bottom: var(--space-sm); font-weight: 500; color: var(--color-muted); }
.cal__table td { height: 40px; text-align: center; }
.cal__table th:first-child, .cal__table td:first-child { color: var(--color-accent-deep); }
.cal__day { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.cal__dday { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-deep); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 60rem) { .day__grid { grid-template-columns: minmax(0, 1fr); } .cal { position: static; } }
.schedule > li { display: grid; grid-template-columns: 28px minmax(0, 3fr) minmax(0, 7fr); grid-template-areas: "icon time title" "icon time text"; column-gap: var(--gap-columns); row-gap: var(--space-2xs); align-items: baseline; padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.schedule__time { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-deep); font-variant-numeric: lining-nums tabular-nums; }
.schedule h3 { font-size: var(--text-2xl); }
@media (max-width: 48rem) { .schedule > li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "time" "title" "text"; gap: var(--space-xs); padding: var(--space-lg); } }

/* dress code: a blush band with four soft tiles */
.band--cream { background: var(--color-paper-3); padding-block: var(--section-gap); }
.dress { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.dress h2 { font-size: var(--text-display-s); }
.dress__note { margin-top: var(--space-lg); font-size: var(--text-lead); }
.dress__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; }
.dress__list > div { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); }
.dress__list dt { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
.dress__list dd { margin: 0; }
@media (max-width: 60rem) { .dress { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }
@media (max-width: 30rem) { .dress__list { grid-template-columns: minmax(0, 1fr); } }

/* venue */
.venue { padding-block: var(--section-gap); }
.venue__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.venue__facts { display: grid; gap: var(--space-lg); align-content: start; }
.venue__name { font-size: var(--text-3xl); }
.venue__alt { margin-top: calc(var(--space-lg) * -1 + var(--space-2xs)); font-size: var(--text-sm); color: var(--color-muted); }
.facts { display: grid; gap: var(--space-sm); margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-md); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.taxi { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.taxi__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.taxi__address { font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); word-break: keep-all; }
.venue__map { position: sticky; top: calc(64px + var(--space-lg)); align-self: start; height: 480px; min-height: 480px; overflow: hidden; border-radius: var(--radius-media); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.venue__map iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; filter: grayscale(0.2) sepia(0.06); }
.venue .actions { margin-top: 0; }
.evening { display: grid; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.evening h3 { font-size: var(--text-2xl); }
.evening .venue__alt { margin-top: calc(var(--space-md) * -1 + var(--space-2xs)); }
@media (max-width: 60rem) { .venue__grid { grid-template-columns: minmax(0, 1fr); } .venue__map { position: relative; top: auto; height: 320px; } .venue__map, .venue__map iframe { min-height: 320px; } }

/* travel */
.travel { padding-bottom: var(--section-gap); }
.route { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.route > li { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.route__step { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent-deep); }
.route h3 { font-size: var(--text-2xl); }
.note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .route { grid-template-columns: minmax(0, 1fr); } }

/* good to know: a calm two-column list, icon beside each tip */
.tips { margin-top: var(--space-2xl); }
.tips h3 { font-size: var(--text-3xl); }
.tips__list { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.tips__list > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-2xs); align-content: start; }
.tips__list > li::before { grid-row: span 2; }
.tips__title { font-weight: 700; color: var(--color-ink); }
.tips__list > li:first-child { grid-column: 1 / -1; }
.tips__list > li:first-child p:last-child { max-width: 75ch; }
@media (max-width: 48rem) { .tips__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* stay */
.stay { background: var(--color-paper-2); padding-block: var(--section-gap); }
.hotels { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.hotel { display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); transition: box-shadow var(--dur-short) var(--ease-out); }
.hotel:hover { box-shadow: var(--shadow-card-hover); }
.hotel--pick { outline: 1.5px solid var(--color-accent); outline-offset: -1.5px; }
.hotel__tag { justify-self: start; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.hotel--pick .hotel__tag { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-accent-deep); }
.hotel h3 { font-size: var(--text-2xl); }
.hotel .venue__alt { margin-top: 0; }
.hotel__addr { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.hotel__link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--text-sm); color: var(--color-accent-deep); }
.stay__guide { margin-top: var(--space-xl); max-width: 60ch; }
@media (max-width: 60rem) { .hotels { grid-template-columns: minmax(0, 1fr); } }

/* discover jeju */
.jeju { padding-block: var(--section-gap); }
.jeju__intro { display: grid; gap: var(--space-md); max-width: 60ch; }
.jeju__intro .ko { margin-top: calc(var(--space-md) * -1 + var(--space-xs)); }
.jeju__label { margin-top: var(--space-2xl); font-size: var(--text-2xl); }
.jeju__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.jeju__list > li { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.jeju__list h3 { font-size: var(--text-2xl); }
/* place cards: photo bleeds to the card edge, text and map link below */
.jeju__list > li.place { padding: 0 0 var(--space-lg); overflow: hidden; grid-template-rows: auto auto 1fr auto; }
.place > :not(figure) { padding-inline: var(--space-lg); }
.place__photo { position: relative; margin: 0 0 var(--space-xs); aspect-ratio: 4 / 3; overflow: hidden; }
.place__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--ease-out); }
.place__photo::after { content: ""; position: absolute; inset: 0; outline: 1px solid var(--color-image-outline); outline-offset: -1px; pointer-events: none; }
@media (hover: hover) { .place:hover .place__photo img { scale: 1.03; } }
@media (prefers-reduced-motion: reduce) { .place__photo img { transition: none; } .place:hover .place__photo img { scale: 1; } }
.place > .place__map { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-inline: var(--space-lg); padding-inline: 0; font-weight: 700; font-size: var(--text-sm); color: var(--color-accent-deep); }
.place__map::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon-pin) center / contain no-repeat; mask: var(--icon-pin) center / contain no-repeat; }
.jeju__plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-3); }
.jeju__plan h3 { font-size: var(--text-2xl); }
.jeju__plan p { margin-top: var(--space-xs); max-width: 48ch; }
.jeju__close { margin-top: var(--space-2xl); font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; color: var(--color-accent-deep); text-align: center; text-wrap: balance; }
.jeju__list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) { .jeju__list, .jeju__list--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* seoul */
.seoul { padding-block: var(--section-gap); }
.seoul__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.seoul__photo { margin: 0; aspect-ratio: 4 / 3; }
.seoul__text { display: grid; gap: var(--space-md); }
.caption { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .seoul__grid { grid-template-columns: minmax(0, 1fr); } }

/* rsvp: the form on one soft card */
.rsvp { background: var(--color-paper-2); padding-block: var(--section-gap); }
.rsvp__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
.rsvp__intro { display: grid; gap: var(--space-md); align-content: start; }
.rsvp__intro h2 { font-size: var(--text-display-s); }
.form { position: relative; display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-media); background: var(--color-paper); box-shadow: var(--shadow-card); }
.field { display: grid; gap: var(--space-xs); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.field label, .seg legend { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.form input:not([type="radio"]), .form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); color-scheme: light; outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.form input::placeholder, .form textarea::placeholder { color: var(--color-muted); }
.form input:hover, .form textarea:hover { border-color: var(--color-ink-2); }
.form input:focus-visible, .form textarea:focus-visible { outline-color: var(--color-focus); background: var(--color-paper); }
.form [aria-invalid="true"] { border-color: var(--color-error); }
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg legend { padding: 0; margin-bottom: var(--space-xs); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.seg label:hover { border-color: var(--color-accent); }
.seg input:checked + label { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input[aria-invalid="true"] + label { border-color: var(--color-error); }
.form .btn { justify-self: start; }
.form textarea { resize: vertical; min-height: 112px; }
.form input[type="date"] { display: block; min-width: 0; -webkit-appearance: none; appearance: none; text-align: start; }
.form input[type="date"]::-webkit-date-and-time-value { text-align: start; }
.seg label, .lang button, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (max-width: 40rem) {
  .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
  .seg legend { grid-column: 1 / -1; }
  .seg label { justify-content: center; min-height: 48px; padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); line-height: 1.25; text-align: center; }
  .form .btn { justify-self: stretch; }
  .form { gap: var(--space-md); }
}
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink); }
.form__help[data-kind="error"] { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: color-mix(in oklab, var(--color-error) 10%, var(--color-paper)); color: var(--color-error); font-weight: 500; }

/* rsvp success: replaces the form so the confirmation cannot be missed */
.rsvp__done { display: grid; justify-items: center; align-content: center; gap: var(--space-md); min-height: 360px; padding: var(--space-3xl) var(--space-xl); border-radius: var(--radius-media); background: var(--color-paper); box-shadow: var(--shadow-card); text-align: center; animation: rise-in 600ms var(--ease-out) both; }
.rsvp__done:focus { outline: none; }
.rsvp__done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rsvp__done-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--color-paper-3); }
.rsvp__done-icon::before { content: ""; width: 36px; height: 36px; background-color: var(--color-accent); -webkit-mask: var(--icon-heart) center / contain no-repeat; mask: var(--icon-heart) center / contain no-repeat; }
.rsvp__done h3 { font-size: var(--text-display-s); }
.rsvp__done p { max-width: 34ch; font-size: var(--text-lead); }
.rsvp__done .btn { margin-top: var(--space-sm); }
@media (prefers-reduced-motion: reduce) { .rsvp__done { animation: none; } }

/* stay range picker (flatpickr) in the site's palette */
:root .flatpickr-calendar { border: 0; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card-hover); font-family: var(--font-body); }
:root .flatpickr-calendar::before, :root .flatpickr-calendar::after { display: none; }
:root .flatpickr-months .flatpickr-month, :root .flatpickr-current-month { color: var(--color-ink); fill: var(--color-ink); font-family: var(--font-display); }
:root .flatpickr-months .flatpickr-prev-month, :root .flatpickr-months .flatpickr-next-month { color: var(--color-accent-deep); fill: var(--color-accent-deep); }
:root span.flatpickr-weekday { color: var(--color-muted); font-weight: 500; }
:root .flatpickr-day { color: var(--color-ink); border-radius: var(--radius-control); }
:root .flatpickr-day:hover, :root .flatpickr-day:focus { background: var(--color-paper-2); border-color: var(--color-paper-2); }
:root .flatpickr-day.today { border-color: var(--color-control-border); }
:root .flatpickr-day.flatpickr-disabled, :root .flatpickr-day.prevMonthDay, :root .flatpickr-day.nextMonthDay { color: var(--color-rule); }
:root .flatpickr-day.inRange { background: var(--color-paper-3); border-color: var(--color-paper-3); box-shadow: -5px 0 0 var(--color-paper-3), 5px 0 0 var(--color-paper-3); }
:root .flatpickr-day.selected, :root .flatpickr-day.startRange, :root .flatpickr-day.endRange, :root .flatpickr-day.selected:hover, :root .flatpickr-day.startRange:hover, :root .flatpickr-day.endRange:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
:root .flatpickr-day.is-wedding:not(.selected):not(.startRange):not(.endRange) { color: var(--color-accent-deep); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--color-accent); }
#stay-range { cursor: pointer; }
@media (max-width: 60rem) { .rsvp__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }
@media (max-width: 30rem) { .field-row { grid-template-columns: minmax(0, 1fr); } .form { padding: var(--space-lg); } }

/* questions: rounded rows, grouped by space */
.questions { padding-block: var(--section-gap); }
.faq { display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); max-width: 52rem; }
.faq details { border-radius: var(--radius-card); background: var(--color-paper-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); list-style: none; padding: var(--space-lg) var(--space-xl); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); cursor: pointer; border-radius: var(--radius-card); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; background-color: var(--color-accent-deep); -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; transition: rotate var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { rotate: 180deg; }
.faq summary:hover { color: var(--color-accent-deep); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding: 0 var(--space-xl) var(--space-lg); max-width: 60ch; }

/* footer */
.footer { padding-block: var(--space-3xl); background: var(--color-paper-2); font-size: var(--text-sm); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.footer__mark { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.footer__credit { color: var(--color-muted); }
@media (max-width: 60rem) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* motion: one staged hero entrance, one scroll reveal, quiet hovers (transform and opacity only) */
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; translate: 0 12px; } }
.hero__photo { animation: fade-in 900ms var(--ease-out) both; }
.hero__panel > * { animation: rise-in 700ms var(--ease-out) both; animation-delay: calc(150ms + var(--i, 0) * 100ms); }
.hero__panel > :nth-child(2) { --i: 1; }
.hero__panel > :nth-child(3) { --i: 2; }
.hero__panel > :nth-child(4) { --i: 3; }
.hero__panel > :nth-child(5) { --i: 4; }
.hero__panel > :nth-child(6) { --i: 5; }

.js .reveal { opacity: 0; translate: 0 16px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

[data-slot] > img { transition: scale 700ms var(--ease-out); }
.hotel { transition: box-shadow var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
@media (hover: hover) {
  .gallery__grid > figure:hover > img, .seoul__photo:hover > img { scale: 1.03; }
  .hotel:hover { translate: 0 -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo, .hero__panel > * { animation: none; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
  [data-slot] > img, .hotel { transition: none; }
  .gallery__grid > figure:hover > img, .seoul__photo:hover > img { scale: 1; }
  .hotel:hover { translate: none; }
}

/* phones: card groups become swipeable rails; the next card peeks in so the row reads as scrollable */
@media (max-width: 48rem) {
  .films, .gallery__grid, .dress__list, .route, .hotels, .jeju__list {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: var(--space-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: var(--space-xs); scrollbar-width: none;
  }
  .films::-webkit-scrollbar, .gallery__grid::-webkit-scrollbar, .dress__list::-webkit-scrollbar, .route::-webkit-scrollbar, .hotels::-webkit-scrollbar, .jeju__list::-webkit-scrollbar { display: none; }
  .films > *, .gallery__grid > *, .dress__list > *, .route > *, .hotels > *, .jeju__list > * { scroll-snap-align: start; }
  .films:focus-visible, .gallery__grid:focus-visible, .dress__list:focus-visible, .route:focus-visible, .hotels:focus-visible, .jeju__list:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .gallery__grid > figure:first-child, .gallery__grid > figure:nth-child(n + 2) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; min-height: 0; }
  .dress__list { grid-auto-columns: 70%; }
  .hotels { padding-block: var(--space-xs) var(--space-md); }
  .js :is(.films, .gallery__grid, .dress__list, .route, .hotels, .jeju__list) > .reveal { opacity: 1; translate: none; transition: none; }
}