/* ============================================================
   Lydia & James · 珠海婚礼电子请柬
   The design's inline styles, factored into classes.
   Authored at a 460px card; everything below that scales down.
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────────
   中文三款走 ZeoSeven CDN（<link> 在 index.html 里，国内可达）。
   拉丁字体全部自托管 —— Google Fonts 在国内打不开，微信里
   会直接退回系统衬线体，标题就没有手写感了。              */

@font-face {
  font-family: "Brittany Signature";
  src: url("art/fonts/BrittanySignature.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Signatie";
  src: url("art/fonts/Signatie.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("art/fonts/EBGaramond-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Dancing Script";
  src: url("art/fonts/DancingScript-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
/* ZSFT-fz（小标拉丁）在 ZeoSeven 上是单独一个文件，不在任何 result.css 里。
   本地那份就是同一个文件：跨域引用时浏览器会报 NetworkError（文件本身合法、
   CORS 头也正常），同源自托管才稳。CDN 地址留作第二个 src 备用。 */
@font-face {
  font-family: "ZSFT-fz";
  src: url("art/fonts/ZSFT-fz.woff2") format("woff2"),
       url("https://fontsapi.zeoseven.com/fz/main.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────── */

:root {
  --ink-deep:     #1E3D5C;
  --sea-blue:     #4E86AE;
  --sea-blue-alt: #4E86AF;
  --paper:        #F7F4EC;
  --text-primary: #2C3743;
  --text-body:    #4C5A68;
  --text-title:   #4F6275;
  --text-muted:   #6E7C8A;
  --text-faint:   #8D9AA6;
  --text-ghost:   #A3AFB9;
  --hairline:     rgba(30, 61, 92, 0.10);
  --field-line:   rgba(44, 55, 67, 0.18);
  --chip-idle:    rgba(44, 55, 67, 0.16);
  --chip-active:  rgba(78, 134, 174, 0.16);

  --font-body:   "ChillHuoSong_F", "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
  --font-title:  "youyou-yisong", var(--font-body);
  --font-latin:  "ZSFT-fz", "EB Garamond", serif;
  --font-script: "Brittany Signature", "Dancing Script", cursive;
  --font-serif:  "Noto Serif SC", "Songti SC", serif;

  /* 40px gutter at the 460px design width, easing in on narrow phones. */
  --gutter: clamp(20px, 8.7vw, 40px);

  --art-opacity: 0.65;
}

/* ── Frame ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* `display: flex` on .form outranks the UA's [hidden] rule, which would leave
   the form on screen underneath the thank-you panel after a successful submit. */
[hidden] { display: none !important; }

/* 分享缩略图只给爬虫看，不参与版面。不能用 display:none —— 那样微信取不到。 */
.share-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #E8E3D8;
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

.card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: var(--paper);
  background-image: url("art/paper.jpg");
  background-size: 480px auto;
  background-repeat: repeat;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.sheet { position: relative; }
.sheet--main   { padding: 8px var(--gutter) 0; }
.sheet--agenda { padding: 16px var(--gutter) 42px; background-color: rgba(255, 255, 255, 0.07); }
.sheet--dress  { padding: 40px var(--gutter) 44px; }
.sheet--rsvp   { padding: 31px var(--gutter) 48px; background-color: rgba(255, 255, 255, 0.07); overflow: hidden; }

/* Line art is tinted by masking a flat colour with the artwork's alpha. */
.icon {
  display: inline-block;
  background-color: var(--sea-blue);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 1 · Hero ────────────────────────────────────────────── */

.hero {
  position: relative;
  margin-top: 26px;
  height: clamp(200px, 57.2vw, 263px);
}

.hero__photo {
  position: absolute;
  top: clamp(38px, 12vw, 55px);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 87.4%;
  aspect-ratio: 332 / 203;
  border: 2px solid #FFFFFF;
  object-fit: cover;
  object-position: center;
}

.hero__script {
  position: absolute;
  left: 40%;
  top: 3px;
  font-family: var(--font-script);
  font-size: clamp(32px, 9.8vw, 45px);
  line-height: 1;
  color: #568BB2;
  white-space: nowrap;
}

/* ── 2 · 欢迎回岛 ────────────────────────────────────────── */

.welcome__script {
  margin-top: 42px;
  text-align: center;
  font-family: var(--font-script);
  font-weight: 800;
  font-size: 15px;
  line-height: 0.35;
  letter-spacing: 3.2px;
  text-indent: 3.2px;
  color: var(--sea-blue-alt);
  margin-bottom: 8px;
}

.welcome__title {
  margin-top: 17px;
  text-align: center;
  font-family: var(--font-title);
  font-size: 21px;
  letter-spacing: 9.7px;
  text-indent: 9.7px;
  color: var(--text-title);
}

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.rule__line { width: 44px; height: 1px; background: rgba(30, 61, 92, 0.35); }
.icon--pearl { width: 36px; height: 36px; }

.welcome__kicker {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  text-indent: 1px;
  color: var(--text-title);
}

/* ── 3 · 新人 ────────────────────────────────────────────── */

.couple {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.couple__side  { text-align: center; }
.couple__role  { font-size: 11px; color: var(--sea-blue); }
.couple__name  { margin-top: 4px; font-family: var(--font-title); font-size: 22px; letter-spacing: 2px; text-indent: 2px; color: #58626D; }
.couple__latin { margin-top: 2px; font-family: var(--font-latin); font-size: 15px; color: var(--sea-blue); }
.icon--rings   { width: 46px; height: 46px; flex: none; }

/* Cut-outs sit on the paper itself — no plate, no border. */
/* The badges tuck behind the names by ~10px at the design's 460px. The names
   themselves do not shrink, so the badges have to give way as the card narrows —
   and below 360px there is simply no room left for them. */
.couple__badge { position: absolute; top: -6px; width: clamp(44px, calc(40.2vw - 101px), 82px); height: auto; }
.couple__badge--bride { left: 1.3%; }
.couple__badge--groom { right: 2.4%; }

@media (max-width: 359px) {
  .couple__badge { display: none; }
}

/* ── 4 · 故事 ────────────────────────────────────────────── */

.poem {
  margin-top: 40px;
  text-align: center;
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.poem__script {
  margin-top: 42px;
  text-align: center;
  font-family: var(--font-script);
  font-size: 19px;
  color: var(--sea-blue);
}
.poem--close { margin-top: 42px; margin-bottom: -35px; line-height: 2.1; text-shadow: none; }
.poem--sail  { margin-top: 8px; text-shadow: none; }

/* ── 5 · 照片 ────────────────────────────────────────────── */

.pair {
  display: grid;
  gap: 7px;
  align-items: start;
  margin-top: 52px;
}
.pair--wide-left  { grid-template-columns: 1.15fr 1fr; }
.pair--wide-right { grid-template-columns: 1fr 1.15fr; }
.pair img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border: 2px solid #FFFFFF;
}
.pair__caption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 3.5px;
  text-indent: 3.5px;
  color: var(--text-ghost);
}

/* Free-standing illustrations, centred between sections. */
.ornament { display: block; margin: 18px auto 0; height: auto; }
.ornament--footer { margin-top: 44px; }
.ornament--hug    { margin-top: 26px; }

/* ── Section headers ─────────────────────────────────────── */

.head__label {
  text-align: center;
  font-family: var(--font-latin);
  font-size: 15.5px;
  letter-spacing: 3.5px;
  text-indent: 3.5px;
  color: var(--sea-blue);
}
.head__title {
  margin-top: 7px;
  text-align: center;
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: 5px;
  text-indent: 5px;
  color: var(--text-title);
}
.head__title--deep { color: var(--ink-deep); }

.block { margin-top: 62px; }
.block--time  { margin-top: 10px; text-align: center; }
.block--venue { text-align: center; }

/* ── 6 · 婚礼时间 ────────────────────────────────────────── */

.time__date  { margin-top: 14px; font-size: 25px; line-height: 1; letter-spacing: 2px; text-indent: 2px; color: var(--sea-blue-alt); }
.time__lunar { margin-top: 9px; font-size: 12px; letter-spacing: 1.5px; text-indent: 1.5px; color: var(--text-faint); }
.time__slots {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.time__slots strong { font-weight: 500; color: var(--sea-blue-alt); }
.time__inf { font-family: var(--font-serif); font-size: 22.5px; font-weight: 900; line-height: 0.7; }

/* ── 7 · 婚礼地址 ────────────────────────────────────────── */

.venue__name { margin-top: 14px; padding: 3px 0 8px; font-size: 17px; line-height: 1.6; letter-spacing: 2px; text-indent: 2px; color: var(--sea-blue-alt); }
.venue__addr { margin-top: 2px; font-size: 12px; line-height: 2; letter-spacing: 0.5px; color: var(--text-faint); }

/* ── 8 · 到达指南 ────────────────────────────────────────── */

.ways { margin-top: 24px; }
.way {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 15px 2px;
  border-bottom: 1px solid var(--hairline);
}
.way__icon { width: 34px; flex: none; display: flex; align-items: center; justify-content: center; }
.icon--way { width: 34px; height: 34px; }
.way__text  { flex: 1; }
.way__title { display: block; font-size: 12px; letter-spacing: 1.5px; color: var(--text-title); }
.way__note  { display: block; margin-top: 3px; font-size: 11px; line-height: 1.9; color: var(--text-muted); }

.sail { display: flex; justify-content: center; margin-top: 45px; }
.icon--sail { width: 64px; height: 64px; }

.signoff {
  margin-top: 34px;
  text-align: center;
  font-family: "Signatie", var(--font-script);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 1.5px;
  color: var(--sea-blue);
}

/* ── 9 · 当日流程 ────────────────────────────────────────── */

.agenda { margin-top: 26px; }
.agenda__row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.agenda__icon { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; }
.agenda__icon .icon { width: 100%; height: 100%; opacity: var(--art-opacity); }
.agenda__text  { flex: 1; }
.agenda__time  { display: block; font-family: "EB Garamond", serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--sea-blue); }
.agenda__title { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: 1px; color: var(--text-title); }
.agenda__note  { display: block; margin-top: 4px; font-size: 12px; line-height: 1.8; color: var(--text-faint); }

/* ── 10 · 着装建议 ───────────────────────────────────────── */

.dress__who {
  margin-top: 26px;
  font-family: var(--font-script);
  font-size: 18px;
  font-weight: 500;
  color: var(--sea-blue);
}
.dress__who--second { margin-top: 34px; }
.dress__copy { margin-top: 6px; font-size: 12px; line-height: 2.1; color: var(--text-body); }

.swatches { display: flex; gap: 8px; margin-top: 14px; }
.swatches span { flex: 1; height: 26px; }
.swatches--cream { border: 1px solid #C9B8A3; }

.figures { display: flex; gap: 8px; margin-top: 18px; }
.figures img {
  flex: 1;
  width: 0;
  height: clamp(118px, 37vw, 170px);
  object-fit: cover;
  object-position: center;
}

.dress__avoid { margin-top: 26px; font-size: 11px; line-height: 2; color: var(--text-faint); }
.dress__avoid span { color: var(--ink-deep); }

/* ── 11 · 出席回执 ───────────────────────────────────────── */

.rsvp__flutes {
  position: absolute;
  left: -86px;
  top: 250px;
  width: 190px;
  height: 190px;
  opacity: 0.14;
  transform: rotate(-12deg);
  pointer-events: none;
}

.rsvp__photo-wrap { display: flex; justify-content: center; }
.rsvp__photo {
  display: block;
  width: 100%;
  max-width: 345px;
  height: 199px;
  object-fit: cover;
  object-position: 50% 30%;
  border: 2px solid #FFFFFF;
}

.head--rsvp { padding-top: 24px; }

.rsvp__intro { margin-top: 12px; text-align: center; font-size: 12px; line-height: 2; color: var(--text-faint); }
.rsvp__intro span { color: var(--sea-blue-alt); }

.form { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; position: relative; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field--row { flex-direction: row; gap: 16px; }
.field--row .field { flex: 1; min-width: 0; }

.field__label { font-size: 12px; letter-spacing: 1.5px; color: var(--text-title); }
.field__label--gap { margin-top: 2px; }
.field__hint  { margin-top: -4px; font-size: 12px; line-height: 1.8; color: var(--text-title); }

.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 2px;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
}
/* 表单里两种视觉：下划线 = 自己输入，方框 = 点一下弹选择器。
   方框这套和住宿选项、参加/不参加的样式一致，客人一眼能归类。 */
.field__input--sm {
  position: relative;
  font-size: 13px;
  border: 1px solid var(--chip-idle);
  padding: 11px 30px 11px 13px;
  color: var(--text-title);
  cursor: pointer;
}

/* 日期/时间的空状态。iOS Safari（微信用的就是它）在没填值的时候整个框是
   全空的，不像桌面 Chrome 会自带 dd/mm/yyyy —— 所以这行灰字得自己画。 */
.pick { position: relative; display: block; }
.pick__ph {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  pointer-events: none;
}
.pick[data-filled] .pick__ph { display: none; }

/* 填了值就让浏览器自己显示，空着就把它那份藏起来，只留上面那行灰字，
   否则桌面 Chrome 的 dd/mm/yyyy 会和我们的重叠。 */
.pick:not([data-filled]) .field__input--sm::-webkit-datetime-edit { opacity: 0; }

/* 把系统那个日历/时钟小图标铺满整个框并透明化：一是让整框可点（桌面 Chrome
   默认只有那个小图标能唤起选择器），二是腾出右边给我们自己的箭头。 */
.field__input--sm::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* 向下的小箭头 —— 纯 CSS 画的，不额外加图片。 */
.pick__caret {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid var(--sea-blue);
  border-bottom: 1.5px solid var(--sea-blue);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__input--num { width: 80px; flex: none; }

.field__area {
  width: 100%;
  background: transparent;
  border: 1px solid var(--field-line);
  border-radius: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.8;
  padding: 10px;
  outline: none;
  resize: none;
  -webkit-appearance: none;
}

.field__input::placeholder, .field__area::placeholder { color: var(--text-ghost); }
/* 只缩占位提示，客人真填进去的姓名手机仍然是 14px，好认。 */
.field__input::placeholder { font-size: 12px; }
.field__input:focus, .field__area:focus { border-color: var(--sea-blue); }

.options { display: flex; flex-direction: column; gap: 8px; }
.option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--chip-idle);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.option__dot {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--sea-blue);
  box-shadow: inset 0 0 0 2.5px var(--paper);
  background: transparent;
}
.option[aria-pressed="true"] { border-color: var(--sea-blue); background: var(--chip-active); }
.option[aria-pressed="true"] .option__dot { background: var(--sea-blue); }

.chips { display: flex; gap: 8px; }
.chip {
  flex: 1;
  padding: 11px 0;
  border: 1px solid var(--chip-idle);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.chip[aria-pressed="true"] { border-color: var(--sea-blue); background: var(--chip-active); }

.submit {
  margin-top: 6px;
  padding: 15px 0;
  border: none;
  border-radius: 0;
  background: var(--ink-deep);
  color: var(--paper);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 4px;
  text-indent: 4px;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.submit[disabled] { opacity: 0.6; cursor: default; }

.form__error { text-align: center; font-size: 11px; line-height: 1.8; color: var(--ink-deep); }

.thanks { text-align: center; padding: 40px 10px 10px; animation: fadeUp 0.5s ease both; }
.thanks__icon  { display: block; width: 56px; height: 56px; margin: 0 auto; }
.thanks__title { margin: 12px 0 10px; font-family: "Dancing Script", var(--font-script); font-size: 26px; color: var(--sea-blue); }
.thanks__note  { font-size: 13px; line-height: 2.1; color: var(--text-body); }

.rsvp__sign { margin-top: 40px; text-align: center; font-family: var(--font-script); font-size: 20px; color: var(--sea-blue); }

/* Artwork that failed to load keeps its footprint instead of collapsing. */
img.is-missing { background: rgba(78, 134, 174, 0.10); }

@media (prefers-reduced-motion: reduce) {
  .thanks { animation: none; }
}