/* ============================================================
   SecretGarden — Hydrangea palette · quieter, more elegant
   ============================================================ */

:root {
  /* —— 黛芋 · 雪顶 · 仙鹿 ——
     warm cream · taro lavender · dusty petrol · soft blush
     —— sophisticated romantic, saturated for presence       */
  --paper:        #fbf6ec;   /* warm cream */
  --paper-warm:   #f1e8d4;
  --paper-deep:   #e6d8be;

  --ink:          #1c0e2e;   /* near-black plum — strong contrast on cream */
  --ink-soft:     #5a4470;

  --hydrangea:    #8da5ab;   /* dusty petrol blue */
  --hydrangea-d:  #3d6470;   /* deep saturated teal */
  --periwinkle:   #b1a8c5;
  --lavender:     #b5a4cb;
  --lavender-d:   #6e4a96;

  --mauve:        #a691c0;   /* taro lavender — soft accent */
  --mauve-d:      #4a2c66;   /* deep saturated taro — for emphasis on cream */

  --candy:        #ff7aa9;   /* candy rose — saturated pink pop */
  --candy-d:      #d83f7a;   /* deep candy rose — emphasis */

  --sage:         #c8a48c;   /* warm dusty blush */
  --sage-d:       #7a5538;   /* deep warm caramel */
  --sage-soft:    #e2cbbb;
  --leaf:         #7a5538;

  --rose:         var(--mauve);
  --rose-deep:    var(--mauve-d);

  --moss:         #3e2c4e;
  --moss-deep:    #4c355d;   /* deep aubergine — for dark panels */

  /* —— type —— */
  --serif:    "Cormorant Garamond", "Noto Serif SC", "Source Han Serif", Georgia, serif;
  --sans:     "DM Sans", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, monospace;
  --hanserif: "Noto Serif SC", "Source Han Serif", "Songti SC", serif;

  /* —— motion —— */
  --ease:  cubic-bezier(.22,.7,.18,1);
  --slow:  1.6s var(--ease);
  --med:   .7s  var(--ease);
  --fast:  .4s  var(--ease);
}

/* ============================================================
   reset
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (max-width: 600px) {
  body { font-size: 16px; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }

::selection { background: var(--hydrangea); color: var(--paper); }

/* ============================================================
   utility
   ============================================================ */
.serif    { font-family: var(--serif); font-weight: 400; }
.han      { font-family: var(--hanserif); font-weight: 400; }
.mono     { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.italic   { font-style: italic; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hydrangea-d);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: .6;
}

.muted { color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ============================================================
   top nav — gossamer
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(243,236,222,.86) 0%, rgba(243,236,222,.55) 60%, transparent 100%);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar > * { pointer-events: auto; }
.topbar.on-dark {
  color: var(--paper);
  background: linear-gradient(180deg, rgba(46,31,61,.72) 0%, rgba(46,31,61,.42) 60%, transparent 100%);
  border-bottom-color: rgba(243,236,222,.06);
}
.topbar.on-dark .brand .ornament,
.topbar.on-dark .brand .dot { background: var(--candy); }
.topbar .brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: .005em;
  display: inline-block;
  color: inherit;
}
.topbar .brand .ornament,
.topbar .brand .dot { display: none; }
.topbar nav {
  display: flex;
  gap: 30px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .01em;
}
.topbar nav a {
  position: relative;
  padding: 4px 0;
  opacity: .8;
  transition: opacity var(--fast);
  color: inherit;
}
.topbar nav a:hover { opacity: 1; }
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: left .55s var(--ease), right .55s var(--ease);
  opacity: .6;
}
.topbar nav a:hover::after,
.topbar nav a.active::after { left: 0; right: 0; }
.topbar nav a.active { opacity: 1; }

.menu-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  pointer-events: auto;
}
.menu-toggle span {
  width: 22px; height: 1px; background: currentColor;
  transition: transform var(--fast), opacity var(--fast);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer a {
  color: var(--ink);
  display: block;
  padding: 4px 0;
}
.mobile-drawer .han {
  font-family: var(--hanserif);
  font-style: normal;
  font-size: 13px;
  letter-spacing: .25em;
  color: var(--hydrangea-d);
  display: block;
  margin-top: 2px;
}

@media (max-width: 860px) {
  .topbar { padding: 16px 20px; }
  .topbar nav { display: none; }
  .menu-toggle { display: flex; }
}

/* ============================================================
   page intro loading mask — rotating poetic copy
   ============================================================ */
.page-mask {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 9999;
  transform-origin: top;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 36px;
}
.page-mask .pm-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--mauve-d);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: .9;
}
.page-mask .pm-mark::before,
.page-mask .pm-mark::after {
  content: "";
  width: 32px; height: 1px;
  background: currentColor;
  opacity: .6;
  display: inline-block;
}
.page-mask .pm-rota {
  position: relative;
  min-height: 86px;
  width: min(640px, 88vw);
  text-align: center;
}
.page-mask .pm-line {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  pointer-events: none;
}
.page-mask .pm-line.is-on {
  opacity: 1;
  transform: translateY(0);
}
.page-mask .pm-line .en {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.page-mask .pm-line .zh {
  font-family: var(--hanserif);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.page-mask .pm-dots {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--hydrangea-d);
  opacity: .7;
}
.page-mask .pm-dots .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mauve);
  animation: maskPulse 1.4s ease-in-out infinite;
}
@keyframes maskPulse {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1); }
}
.page-mask.lift {
  animation: maskLift 1s var(--ease) forwards;
}
@keyframes maskLift {
  0%   { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
@media (max-width: 600px) {
  .page-mask { gap: 22px; padding: 26px; }
  .page-mask .pm-mark { font-size: 17px; }
  .page-mask .pm-line .en { font-size: 20px; }
  .page-mask .pm-line .zh { font-size: 13px; }
}

/* ============================================================
   scroll reveal — Apple-style, blur-to-clear + scale-up
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px) scale(.985);
  filter: blur(8px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
  will-change: opacity, transform, filter;
}
[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
[data-reveal-delay="1"].in { transition-delay: .12s; }
[data-reveal-delay="2"].in { transition-delay: .24s; }
[data-reveal-delay="3"].in { transition-delay: .36s; }
[data-reveal-delay="4"].in { transition-delay: .48s; }
[data-reveal-delay="5"].in { transition-delay: .60s; }

/* stagger — children of a [data-reveal-stagger] container appear in sequence */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(36px) scale(.99);
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
[data-reveal-stagger].in > *           { opacity: 1; transform: none; filter: blur(0); }
[data-reveal-stagger].in > *:nth-child(1)  { transition-delay: .00s; }
[data-reveal-stagger].in > *:nth-child(2)  { transition-delay: .08s; }
[data-reveal-stagger].in > *:nth-child(3)  { transition-delay: .16s; }
[data-reveal-stagger].in > *:nth-child(4)  { transition-delay: .24s; }
[data-reveal-stagger].in > *:nth-child(5)  { transition-delay: .32s; }
[data-reveal-stagger].in > *:nth-child(6)  { transition-delay: .40s; }
[data-reveal-stagger].in > *:nth-child(7)  { transition-delay: .48s; }
[data-reveal-stagger].in > *:nth-child(8)  { transition-delay: .56s; }
[data-reveal-stagger].in > *:nth-child(9)  { transition-delay: .64s; }
[data-reveal-stagger].in > *:nth-child(10) { transition-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important;
  }
}

/* hand-drawn underline that grows */
.stem {
  position: relative;
  display: inline-block;
}
.stem::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.18em;
  height: 1px;
  background: var(--hydrangea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease);
}
[data-reveal].in .stem::after,
.stem.bloom::after { transform: scaleX(1); }

/* ============================================================
   image plates — hydrangea-toned, softer
   ============================================================ */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,245,225,.18), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* image-cycling plate — use <div class="plate" data-img="a.jpg|b.jpg|c.jpg" data-cycle="4500">.
   JS in assets/app.js converts the data-img list into stacked .plate-layer divs that
   crossfade. Single image: just set background. */
.plate.has-img { background: var(--moss-deep); }
.plate.has-img .label { display: none; }
.plate-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.plate .label {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243,236,222,.45);
  z-index: 2;
}
.plate .label-tr {
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(243,236,222,.4);
  z-index: 2;
}

/* photographic placeholders — hydrangea-tuned */
.bg-bride    { background: radial-gradient(ellipse at 50% 35%, #e9dccc 0%, #b0a092 40%, #5e5260 72%, #2a2434 100%); }
.bg-vow      { background: radial-gradient(ellipse at 65% 40%, #c4b5b8 0%, #7e7787 45%, #2c2c40 80%); }
.bg-garden   { background: radial-gradient(ellipse at 40% 60%, #9eb3a8 0%, #506d6f 50%, #1f2a32 100%); }
.bg-flora    { background: radial-gradient(ellipse at 50% 50%, #c7a8b5 0%, #6e6488 50%, #2a2434 100%); }
.bg-veil     { background: linear-gradient(150deg, #efe2cf 0%, #b8b5c8 40%, #6e7290 75%, #292c44 100%); }
.bg-ceremony { background: radial-gradient(ellipse at 30% 70%, #b69cb0 0%, #5d6586 50%, #1c2237 100%); }
.bg-kiss     { background: radial-gradient(ellipse at 50% 45%, #d6b9bd 0%, #847790 45%, #2c2a40 80%); }
.bg-rings    { background: radial-gradient(circle at 50% 50%, #d9c9b8 0%, #91829c 45%, #29263f 90%); }
.bg-table    { background: linear-gradient(180deg, #2c2a3d 0%, #574e60 50%, #1a1828 100%); }
.bg-night    { background: radial-gradient(ellipse at 50% 70%, #5b637e 0%, #2a2c44 60%, #0f1224 100%); }
.bg-meadow   { background: linear-gradient(180deg, #a8b6a2 0%, #4d6068 55%, #1a2026 100%); }
.bg-mist     { background: linear-gradient(180deg, #d8d4c4 0%, #8b8d9c 50%, #34384a 100%); }
.bg-portrait { background: radial-gradient(ellipse at 55% 35%, #dccaca 0%, #8e89a8 45%, #2e2c44 85%); }
.bg-hands    { background: radial-gradient(ellipse at 60% 60%, #c9b5b8 0%, #80798e 50%, #2a2434 90%); }
.bg-dance    { background: radial-gradient(ellipse at 50% 40%, #b095a6 0%, #5d5274 50%, #1a1830 90%); }
.bg-petal    { background: radial-gradient(ellipse at 50% 50%, #e3c7d1 0%, #9a7a8a 40%, #3a2638 85%); }
.bg-window   { background: linear-gradient(120deg, #e8dac5 0%, #b8b9c8 40%, #6c7390 75%, #2c2c44 100%); }
.bg-letter   { background: linear-gradient(160deg, #ede0c8 0%, #c4bab0 50%, #6d6a78 100%); }

/* ============================================================
   buttons & links — slow, no fill-up rectangle
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: gap var(--med), color var(--fast);
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--med);
}
.btn:hover { gap: 22px; }
.btn:hover .arrow { transform: translateX(4px); }
.btn.dark { color: var(--paper); }
.btn.accent { color: var(--mauve-d); }

.link-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .005em;
  position: relative;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.link-line:hover::after { transform: scaleX(0); }

/* ============================================================
   editorial emphasis — italic word with an inline SVG squiggle
   that draws on reveal and ends in a wonky little heart.
   Inject the SVG via assets/app.js into every `.mark` element.
     <em class="mark">…</em>        rose / lavender (default)
     <em class="mark sky">…</em>    petrol blue
     <em class="mark warm">…</em>   warm blush
     <em class="mark deep">…</em>   deep taro
   ============================================================ */
.mark {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: var(--mauve-d) !important;
  padding-right: 0.55em;          /* makes room for the trailing heart */
}
em.mark, em.mark.sky, em.mark.warm, em.mark.deep, em.mark.candy { font-style: italic; }
.mark.sky    { color: var(--hydrangea-d) !important; }
.mark.warm   { color: var(--sage-d) !important; }
.mark.deep   { color: var(--moss-deep) !important; }
.mark.candy  { color: var(--candy-d) !important; }

/* lighter tones on dark panels */
[data-tone="dark"] .mark,
.reserve-aside .mark,
.site-footer .mark { color: var(--mauve) !important; }
[data-tone="dark"] .mark.sky,
.reserve-aside .mark.sky,
.site-footer .mark.sky { color: var(--hydrangea) !important; }
[data-tone="dark"] .mark.warm,
.reserve-aside .mark.warm,
.site-footer .mark.warm { color: var(--sage) !important; }
[data-tone="dark"] .mark.deep,
.reserve-aside .mark.deep,
.site-footer .mark.deep { color: var(--lavender) !important; }
[data-tone="dark"] .mark.candy,
.reserve-aside .mark.candy,
.site-footer .mark.candy { color: var(--candy) !important; }

.mark-svg {
  position: absolute;
  left: -4%;
  right: 0;
  width: 108%;
  bottom: -0.55em;
  height: 0.85em;
  overflow: visible;
  pointer-events: none;
  color: currentColor;
}
.mark-svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark-svg .heart { fill: currentColor; stroke: none; }

/* Initial state — line not drawn, heart hidden. Animations only run
   once the element is in view (.mark.draw added by IntersectionObserver
   in assets/app.js). Per-mark `--draw-dur` / `--heart-delay` can be set
   inline to give each one its own rhythm. */
.mark-svg .line {
  stroke-dasharray: var(--mark-dash, 260);
  stroke-dashoffset: var(--mark-dash, 260);
}
.mark-svg .heart {
  opacity: 0;
  transform-origin: 203px 22px;
  transform: scale(0.2) rotate(-12deg);
}
.mark.draw .mark-svg .line {
  animation: drawSquiggle var(--draw-dur, 1.35s) var(--ease) forwards;
}
.mark.draw .mark-svg .heart {
  animation: popHeart var(--heart-dur, 0.55s) var(--heart-delay, 1.15s) var(--ease) forwards;
}
.mark.draw:hover .mark-svg .line {
  animation: drawSquiggle 0.85s var(--ease) forwards;
}
.mark.draw:hover .mark-svg .heart {
  animation: popHeart 0.4s 0.7s var(--ease) forwards;
}
@keyframes drawSquiggle {
  to { stroke-dashoffset: 0; }
}
@keyframes popHeart {
  0%   { opacity: 0; transform: scale(0.2) rotate(-18deg); }
  55%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mark-svg .line { stroke-dashoffset: 0; animation: none !important; }
  .mark-svg .heart { opacity: 1; transform: none; animation: none !important; }
}


/* ============================================================
   shared section paddings
   ============================================================ */
section { position: relative; }
.section-pad { padding: 110px 44px; }
.section-pad-sm { padding: 72px 44px; }
@media (max-width: 800px) {
  .section-pad { padding: 70px 22px; }
  .section-pad-sm { padding: 48px 22px; }
}

/* ============================================================
   legacy decorative rails (deprecated — hidden globally)
   ============================================================ */
body > .rail.left,
body > .rail.right,
body > .corner.left,
body > .corner.right { display: none !important; }

/* ============================================================
   footer — quieter
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 84px 40px 32px;
  position: relative;
  overflow: hidden;
}
.site-footer .huge {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 92px);
  line-height: 1;
  letter-spacing: -.018em;
  margin: 0 0 50px;
  color: var(--paper);
  max-width: 1100px;
  text-wrap: balance;
}
.site-footer .huge em {
  font-style: normal;
  color: var(--paper-warm);
  font-family: var(--hanserif);
  opacity: .95;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(243,236,222,.15);
}
.footer-grid h6 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--paper-warm);
  margin: 0 0 18px;
  font-weight: 400;
  opacity: .8;
  display: inline-block;
  position: relative;
}
.footer-grid h6::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 22px;
  height: 1px;
  background: var(--candy);
  opacity: .55;
  transition: width .55s var(--ease), opacity .55s var(--ease);
}
.footer-grid > div:hover h6 { opacity: 1; }
.footer-grid > div:hover h6::after { width: 38px; opacity: .9; }

.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--serif); font-style: italic; font-size: 17px; }
.footer-grid ul a {
  position: relative;
  display: inline-block;
  padding: 4px 0 4px 0;
  transition: color var(--fast), padding-left var(--med);
  color: var(--paper);
  opacity: .85;
}
.footer-grid ul a::before {
  content: "→";
  position: absolute;
  left: -22px;
  top: 4px;
  opacity: 0;
  color: var(--candy);
  font-style: italic;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transform: translateX(-8px);
}
.footer-grid ul a:hover {
  padding-left: 18px;
  color: var(--candy);
  opacity: 1;
}
.footer-grid ul a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.footer-grid p { font-family: var(--serif); font-size: 15px; line-height: 1.65; margin: 0 0 6px; opacity: .78; }
.footer-grid .newsletter {
  display: flex;
  margin-top: 16px;
  border-bottom: 1px solid rgba(243,236,222,.3);
  padding-bottom: 8px;
  transition: border-color var(--fast);
}
.footer-grid .newsletter:hover { border-bottom-color: var(--candy); }
.footer-grid .newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--paper);
  font: inherit;
  font-style: italic;
  font-size: 16px;
  outline: none;
}
.footer-grid .newsletter input::placeholder {
  color: rgba(243,236,222,.45);
  transition: color var(--fast);
}
.footer-grid .newsletter:hover input::placeholder { color: rgba(255,122,169,.7); }
.footer-grid .newsletter button {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--paper-warm);
  transition: color var(--fast), transform var(--med);
  cursor: pointer;
}
.footer-grid .newsletter button:hover { color: var(--candy); transform: translateX(4px); }

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(243,236,222,.55);
}
.footer-meta .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--candy);
  opacity: .95;
}
.footer-meta .tagline .han {
  font-family: var(--hanserif);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255,122,169,.6);
  margin-left: 8px;
}
.footer-meta .copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(243,236,222,.45);
  font-style: normal;
}
.footer-meta .domain {
  color: var(--paper-warm);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--fast), border-color var(--fast);
}
.footer-meta .domain:hover {
  color: var(--candy);
  border-bottom-color: var(--candy);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .site-footer { padding: 80px 22px 28px; }
  .site-footer .huge { margin-bottom: 50px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-meta { flex-direction: column; gap: 12px; align-items: flex-start; font-size: 13px; }
  .footer-grid ul { font-size: 18px; }
}

/* ============================================================
   form
   ============================================================ */
.field {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding: 6px 0 10px;
  transition: border-color var(--med);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field:focus-within { border-color: var(--hydrangea-d); }
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
  transition: color var(--med);
}
.field:focus-within label,
.field.filled label { color: var(--hydrangea-d); }
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  padding: 0;
  margin: 0;
  color: var(--ink);
}
.field textarea { resize: none; min-height: 64px; }

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.pill:hover { border-color: var(--hydrangea-d); }
.pill.active { background: var(--hydrangea); color: var(--paper); border-color: var(--hydrangea); }

/* ============================================================
   page intro
   ============================================================ */
.page-intro {
  padding: 110px 40px 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: end;
}
.page-intro h1 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: .95;
  margin: 0;
  letter-spacing: -.02em;
  font-weight: 400;
}
.page-intro h1 .han {
  font-style: normal;
  font-family: var(--hanserif);
  display: block;
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: .26em;
  color: var(--hydrangea-d);
  margin-top: 14px;
  font-weight: 400;
}
.page-intro p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .page-intro { grid-template-columns: 1fr; padding: 92px 22px 36px; gap: 18px; }
}

/* ============================================================
   floating petal decorations — varied, slow, dreamy
   ============================================================ */
.petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -10vh;
  will-change: transform, opacity;
  animation: petalFall linear infinite,
             petalBreathe ease-in-out infinite alternate;
  filter: blur(.4px);
}
.petal svg { width: 100%; height: 100%; display: block; }
.petal.spin   { animation-name: petalFall, petalSpin; }
.petal.sway   { animation-name: petalFallSway, petalBreathe; }
.petal.gentle { animation-name: petalDrift, petalBreathe; }

@keyframes petalFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  100% { transform: translate3d(40px, 115vh, 0) rotate(140deg); }
}
@keyframes petalFallSway {
  0%   { transform: translate3d(-20px, -10vh, 0) rotate(-12deg); }
  25%  { transform: translate3d(40px, 25vh, 0) rotate(40deg); }
  50%  { transform: translate3d(-30px, 55vh, 0) rotate(-25deg); }
  75%  { transform: translate3d(30px, 85vh, 0) rotate(60deg); }
  100% { transform: translate3d(0, 118vh, 0) rotate(180deg); }
}
@keyframes petalSpin {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-20px, 55vh, 0) rotate(220deg) scale(1.06); }
  100% { transform: translate3d(15px, 118vh, 0) rotate(440deg) scale(.94); }
}
@keyframes petalDrift {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  50%  { transform: translate3d(60px, 55vh, 0) rotate(80deg); }
  100% { transform: translate3d(-20px, 118vh, 0) rotate(160deg); }
}
@keyframes petalBreathe {
  0%   { opacity: .08; }
  40%  { opacity: .45; }
  70%  { opacity: .22; }
  100% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}

/* ============================================================
   v1.26 — gown gallery lightbox (lookbook detail)
   ============================================================ */
.plate.has-gallery { cursor: zoom-in; }
.lb-gallery-hint {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: rgba(20,16,18,.55); backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 999px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.25);
}
.sg-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(18,14,16,.94); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: lbfade .28s var(--ease, ease);
}
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.sg-lightbox .lb-stage {
  margin: 0; max-width: 88vw; max-height: 86vh; display: flex; align-items: center; justify-content: center;
}
.sg-lightbox .lb-stage img {
  max-width: 88vw; max-height: 86vh; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); background: var(--paper-warm, #efe9e2);
}
.sg-lightbox button {
  position: absolute; background: none; border: none; color: var(--paper);
  cursor: pointer; opacity: .8; transition: opacity .2s ease; font-family: var(--serif, serif);
}
.sg-lightbox button:hover { opacity: 1; }
.sg-lightbox .lb-close { top: 24px; right: 28px; font-size: 34px; line-height: 1; }
.sg-lightbox .lb-prev, .sg-lightbox .lb-next {
  top: 50%; transform: translateY(-50%); font-size: 56px; width: 64px; height: 64px;
}
.sg-lightbox .lb-prev { left: 12px; }
.sg-lightbox .lb-next { right: 12px; }
.sg-lightbox .lb-count {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 12px; letter-spacing: .18em; color: rgba(255,255,255,.7);
}
@media (max-width: 720px) {
  .sg-lightbox .lb-prev, .sg-lightbox .lb-next { font-size: 40px; width: 44px; height: 44px; }
  .sg-lightbox .lb-stage img { max-width: 94vw; }
}