/* Keepsake by THYM Studio – design tokens and components (demo build) */
:root {
  /* colour */
  --paper: #f6f4f0;
  --paper-2: #efebe5;
  --paper-3: #e6e1d9;
  --ink: #161514;
  --ink-2: #2c2a28;
  --stone: #5c5853;      /* body-secondary text, 6.2:1 on paper */
  --mist: #8c8781;       /* large text, rules and icons only (3.5:1) */
  --line: #d6d0c8;
  --blush: #efdccb;
  --blush-2: #f6e9de;
  --blush-deep: #dcbfa8;
  --rose-ink: #5b4031;   /* text on blush, 7.0:1 */
  --error: #8e2b22;
  --ok: #2f5a44;
  --focus: #1e1d1b;

  /* type */
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --f-script: "Mrs Saint Delafield", cursive;
  --f-body: "Newsreader", Georgia, serif;
  --f-ui: "Albert Sans", "Helvetica Neue", sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.9rem, 3.4vw, 2.75rem);
  --fs-2xl: clamp(2.6rem, 6vw, 5rem);
  --fs-3xl: clamp(4.4rem, 10.5vw, 9.5rem);
  --track: .18em;

  /* space (4px base) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1320px;

  /* shape & motion */
  --r-0: 0; --r-1: 2px; --r-2: 6px;
  --arch: 999px 999px 999px 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: .5s;
  --demo-h: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--demo-h) + 84px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-md)/1.6 var(--f-body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 200; background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); font: 500 var(--fs-sm) var(--f-ui); }
.skip:focus { top: var(--s2); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ---------- labels & type helpers ---------- */
.lbl { font: 600 .8125rem/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.muted { color: var(--stone); }
.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -.01em; line-height: .92; }
.script { font-family: var(--f-script); font-weight: 400; line-height: 1; -webkit-text-stroke: .018em currentColor; }
.num { font-family: var(--f-display); font-variant-numeric: lining-nums; }

/* ---------- demo bar ---------- */
.demo-bar { position: sticky; top: 0; z-index: 90; min-height: var(--demo-h); background: var(--ink); color: var(--paper); display: flex; align-items: center; gap: var(--s4); padding: var(--s2) var(--gut); font: 400 var(--fs-sm)/1.35 var(--f-ui); }
.demo-bar strong { font-weight: 600; }
.demo-bar .grow { flex: 1; }
.demo-bar button { background: transparent; border: 1px solid #6d6862; color: var(--paper); padding: .35rem .8rem; min-height: 32px; border-radius: var(--r-1); cursor: pointer; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.demo-bar button:hover { border-color: var(--paper); }
@media (max-width: 720px) { .demo-bar .hide-sm { display: none; } }

/* ---------- masthead ---------- */
.mast { position: sticky; top: var(--demo-h); z-index: 80; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease); }
.mast.scrolled { border-bottom-color: var(--line); }
.mast .wrap { display: flex; align-items: center; gap: var(--s6); min-height: 76px; }
.mono { font: 600 1.6rem/1 var(--f-display); letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.mono span { font-style: italic; color: var(--stone); margin: 0 .08em; }
.nav { display: flex; gap: var(--s6); margin-left: var(--s6); }
.nav a { font: 600 .8125rem var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; padding: var(--s3) 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 1px; background: currentColor; transition: right .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.mast .end { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.arrow-link { font: 500 var(--fs-xs) var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: .6em; min-height: 44px; }
.arrow-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.who { font: 500 var(--fs-xs) var(--f-ui); letter-spacing: .08em; display: none; align-items: center; gap: .5em; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--r-1); }
.who.on { display: inline-flex; }
@media (max-width: 640px) { .who.on { display: none; } }
.who button { background: none; border: 0; padding: 0 0 0 .3em; cursor: pointer; text-decoration: underline; font: inherit; min-height: 28px; }
.menu-btn { display: none; background: none; border: 1px solid var(--ink); border-radius: var(--r-1); min-height: 44px; padding: 0 var(--s4); font: 500 var(--fs-xs) var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
@media (max-width: 980px) {
  .nav, .mast .end .arrow-link { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}
.drawer { position: fixed; inset: 0; z-index: 120; background: var(--paper); display: none; flex-direction: column; padding: calc(var(--demo-h) + var(--s5)) var(--gut) var(--s7); }
.drawer.open { display: flex; animation: fadeIn .35s var(--ease); }
.drawer nav { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s7); }
.drawer nav a { font: 500 clamp(2.2rem, 9vw, 3.2rem)/1.15 var(--f-display); text-decoration: none; padding: var(--s1) 0; }
.drawer nav a i { font: 400 var(--fs-sm) var(--f-ui); color: var(--stone); font-style: normal; margin-right: var(--s3); letter-spacing: .1em; }
.drawer .close { align-self: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px; padding: 0 var(--s6); background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-1); font: 600 .8125rem var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
.btn:hover { background: var(--ink-2); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.small { min-height: 44px; padding: 0 var(--s4); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn .spin { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.btn.busy .spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; min-height: 44px; font: 500 var(--fs-sm) var(--f-ui); }

.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.field > label, .field > .lbl-row { font: 500 var(--fs-sm) var(--f-ui); }
.field .hint { font: 400 var(--fs-sm)/1.45 var(--f-ui); color: var(--stone); }
.input, .select, .textarea { width: 100%; min-height: 50px; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-1); padding: .7rem .9rem; font: 400 var(--fs-md) var(--f-body); }
.on-blush .input, .on-blush .select, .on-blush .textarea { background: #fbf6f1; border-color: #a58a78; }
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--error); border-width: 2px; }
.err-msg { font: 500 var(--fs-sm)/1.4 var(--f-ui); color: var(--error); display: none; }
.field.has-error .err-msg { display: block; }
.err-summary { border: 2px solid var(--error); background: #fbf0ee; padding: var(--s4) var(--s5); margin-bottom: var(--s6); border-radius: var(--r-1); }
.err-summary h3 { font: 600 var(--fs-md) var(--f-ui); color: var(--error); margin-bottom: var(--s2); }
.err-summary ul { margin: 0; padding-left: 1.1em; font: 400 var(--fs-sm)/1.6 var(--f-ui); }
.err-summary a { color: var(--error); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font: 400 var(--fs-sm)/1.5 var(--f-ui); cursor: pointer; padding: var(--s2) 0; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s6); min-width: 0; }
legend { padding: 0; margin-bottom: var(--s3); font: 500 var(--fs-sm) var(--f-ui); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- cover (save the dates) ---------- */
.cover { padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); position: relative; overflow: hidden; }
.cover .wrap > * { min-width: 0; }
.cover .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.cover h1 { font-size: var(--fs-3xl); display: flex; flex-direction: column; }
.cover h1 span { display: block; background: linear-gradient(100deg, var(--ink) 0%, var(--ink-2) 45%, var(--stone) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover h1 span:nth-child(2) { padding-left: .02em; }
.cover .meta { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.cover .meta .script { font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--ink-2); }
.cover .meta .lbl { color: var(--stone); }
.arches { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2.5rem); padding-top: clamp(1rem, 3vw, 3rem); }
.arch { position: relative; text-align: center; margin: 0; }
.arch .frame { position: relative; aspect-ratio: 9 / 16.5; border-radius: var(--arch); overflow: hidden; background: var(--paper-3); }
.arch img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transform: scale(1.06); transition: transform 1.4s var(--ease); }
.arch:hover img { transform: scale(1); }
.arch .fw { position: relative; }
.arch .n { position: absolute; right: -.22em; bottom: -.12em; font: 500 clamp(3rem, 6.5vw, 6rem)/.8 var(--f-display); color: var(--ink); letter-spacing: -.04em; pointer-events: none; text-shadow: 0 0 1px var(--paper); }
.arch .n::after { content: "."; }
.arch .stalk { width: 1px; height: clamp(40px, 6vw, 80px); background: var(--line); margin: var(--s4) auto; }
.arch figcaption .lbl { color: var(--stone); display: block; margin-bottom: var(--s2); }
.arch figcaption .t { font: 600 clamp(1.05rem, 1.6vw, 1.45rem)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.arch:nth-child(2) { margin-top: clamp(0rem, 3vw, 2.5rem); }

.unlock { margin-top: var(--s7); max-width: 430px; }
.unlock .row { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); }
.unlock input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .8rem 0; font: 600 1.35rem var(--f-display); letter-spacing: .28em; text-transform: uppercase; }
.unlock input::placeholder { letter-spacing: .06em; font: italic 400 1.05rem var(--f-body); color: var(--stone); text-transform: none; }
.unlock input:focus { outline: none; }
.unlock .row:focus-within { box-shadow: 0 2px 0 0 var(--ink); }
.unlock button[type=submit] { background: none; border: 0; padding: 0 0 0 var(--s4); cursor: pointer; display: inline-flex; align-items: center; gap: .5em; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; min-height: 50px; min-width: 44px; }
.unlock .msg { min-height: 1.5em; margin-top: var(--s3); font: 400 var(--fs-sm)/1.45 var(--f-ui); }
.unlock .msg.err { color: var(--error); }
.unlock .msg.ok { color: var(--ok); }
.unlock label { display: block; margin-bottom: var(--s2); }

.lead-col { position: relative; }

@media (max-width: 900px) {
  .cover .wrap { grid-template-columns: 1fr; gap: var(--s6); }
  .arches { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s4); padding-bottom: var(--s3); margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); scrollbar-width: none; }
  .arches::-webkit-scrollbar { display: none; }
  .arch { flex: 0 0 62%; scroll-snap-align: center; }
  .arch:nth-child(2) { margin-top: 0; }
  .arch .n { font-size: 3.6rem; right: 0; }
}

/* ---------- prelude (blush invitation card) ---------- */
.prelude { position: relative; background: var(--blush); color: var(--rose-ink); overflow: hidden; padding: clamp(5rem, 11vw, 9rem) 0; }
.prelude .wrap { position: relative; z-index: 2; }
.prelude .card { max-width: 760px; }
.prelude .serif { font: 400 1.15rem/1.5 var(--f-body); color: var(--ink-2); }
.prelude .names { font-size: clamp(5rem, 14vw, 11rem); color: var(--ink); margin: .1em 0 .05em -.05em; line-height: .9; }
.prelude .names .amp { display: inline-block; margin: 0 .05em; }
.prelude .date { font: italic 500 clamp(1.8rem, 3.4vw, 2.6rem) var(--f-display); color: var(--ink); letter-spacing: .02em; margin-top: var(--s5); }
.prelude .loc { margin-top: var(--s2); }
.floral { position: absolute; pointer-events: none; z-index: 1; }
.floral svg { width: 100%; height: 100%; display: block; }
.floral.tr { right: -6%; top: -8%; width: min(52vw, 620px); }
.floral.bl { left: -8%; bottom: -14%; width: min(30vw, 340px); transform: scale(-1, -1); }
.floral.br { right: -4%; bottom: -10%; width: min(34vw, 380px); transform: scaleY(-1); }
.floral.tl { left: -6%; top: -10%; width: min(34vw, 380px); transform: scaleX(-1); }
@media (max-width: 700px) { .floral.tr { width: 92vw; right: -38%; top: -4%; opacity: .55; } .floral.bl { width: 60vw; } }

/* ---------- chapters ---------- */
.chapter { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.chapter + .chapter { border-top: 1px solid var(--line); }
.ch-head { display: grid; grid-template-columns: auto 1fr; gap: var(--s5) var(--s6); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.ch-head .roman { font: italic 500 clamp(3.5rem, 8vw, 7rem)/.8 var(--f-display); color: var(--mist); }
.ch-head h2 { font: 500 var(--fs-2xl)/.95 var(--f-display); letter-spacing: -.015em; }
.ch-head .lbl { grid-column: 2; color: var(--stone); order: -1; align-self: end; }
.ch-head .dek { grid-column: 2; max-width: 56ch; font-size: 1.15rem; color: var(--stone); margin: 0; }
@media (max-width: 640px) { .ch-head { grid-template-columns: 1fr; } .ch-head .lbl, .ch-head .dek { grid-column: 1; } .ch-head .roman { font-size: 3rem; } }

/* narrative – asymmetric magazine grid */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) clamp(1rem, 2.5vw, 2.5rem); align-items: start; }
.story .lead { grid-column: 1 / span 6; font-size: 1.3rem; line-height: 1.55; }
.story .lead::first-letter { font: 500 5.4em/.8 var(--f-display); float: left; margin: .06em .08em 0 -.02em; }
.story .tall { grid-column: 8 / span 5; grid-row: span 2; }
.story .tall .frame { aspect-ratio: 4 / 5.6; border-radius: 999px 999px var(--r-1) var(--r-1); overflow: hidden; }
.story .tall img, .story .wide img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.story figcaption { margin-top: var(--s3); font: italic 400 var(--fs-sm) var(--f-body); color: var(--stone); }
.story .pull { grid-column: 2 / span 5; font: italic 500 clamp(1.7rem, 3vw, 2.5rem)/1.2 var(--f-display); border-left: 1px solid var(--ink); padding-left: var(--s5); margin: var(--s4) 0; }
.story .wide { grid-column: 1 / span 7; }
.story .wide .frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-1); }
.story .cols { grid-column: 8 / span 5; columns: 1; }
.qa { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); border-top: 1px solid var(--ink); padding-top: var(--s6); margin-top: var(--s6); }
.qa h3 { font: italic 600 1.5rem/1.2 var(--f-display); margin-bottom: var(--s3); }
.qa .lbl { color: var(--stone); margin-bottom: var(--s3); display: block; }
@media (max-width: 900px) {
  .story > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .story .tall .frame { aspect-ratio: 4 / 4.6; }
  .qa { grid-template-columns: 1fr; }
}

/* itinerary */
.locked { position: relative; border: 1px solid var(--line); padding: clamp(2rem, 5vw, 4rem); overflow: hidden; background: var(--paper-2); }
.locked .ghost { filter: blur(5px); opacity: .5; user-select: none; pointer-events: none; }
.locked .ghost .row { height: 18px; background: var(--paper-3); margin: 14px 0; border-radius: 2px; }
.locked .ghost .row.s { width: 40%; } .locked .ghost .row.m { width: 65%; } .locked .ghost .row.l { width: 88%; }
.locked .panel { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s5); }
.locked .panel > div { max-width: 460px; background: var(--paper); border: 1px solid var(--ink); padding: var(--s6); }
.locked .panel h3 { font: 600 1.9rem/1.1 var(--f-display); margin-bottom: var(--s3); }
.locked .panel .unlock { margin: var(--s5) auto 0; text-align: left; }

.hello { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s7); }
.hello .script { font-size: clamp(3rem, 6vw, 4.6rem); }
.day { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 10fr); gap: var(--s6); padding: var(--s6) 0; border-top: 1px solid var(--ink); }
.day h3 { font: italic 600 1.7rem/1.1 var(--f-display); }
.day h3 small { display: block; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; font-style: normal; color: var(--stone); margin-top: var(--s2); }
.ev { display: grid; grid-template-columns: 110px minmax(0, 1fr) 200px; gap: var(--s5); padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ev .time { font: 600 2rem/1 var(--f-display); }
.ev .time small { display: block; font: 400 var(--fs-sm) var(--f-ui); color: var(--stone); margin-top: var(--s2); }
.ev h4 { font: 600 1.75rem/1.15 var(--f-display); margin-bottom: var(--s2); }
.ev .venue { font: 500 var(--fs-sm) var(--f-ui); margin-bottom: var(--s3); }
.ev .dress { display: inline-block; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink); padding: .35rem .6rem; margin-bottom: var(--s3); }
.ev .acts { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2); }
.ev .acts a, .ev .acts button { display: inline-flex; align-items: flex-end; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid currentColor; padding: .7rem 0 .2rem; cursor: pointer; text-decoration: none; min-height: 44px; }
.ev .pic { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--r-1) var(--r-1); overflow: hidden; }
.ev .pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
@media (max-width: 900px) {
  .day { grid-template-columns: 1fr; gap: var(--s4); }
  .ev { grid-template-columns: 80px minmax(0, 1fr); }
  .ev .pic { display: none; }
  .ev .time { font-size: 1.5rem; }
}

/* travel */
.tabs { display: flex; gap: var(--s2); border-bottom: 1px solid var(--ink); margin-bottom: var(--s7); overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--s4) var(--s4) var(--s3); min-height: 48px; cursor: pointer; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; color: var(--stone); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs button:first-child { padding-left: 0; }
.panel-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }
.map { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.map svg { width: 100%; height: 100%; display: block; }
.pin { position: absolute; transform: translate(-50%, -100%); background: none; border: 0; cursor: pointer; padding: 0; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); display: block; transition: transform .25s; }
.pin span { font: 500 11px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; background: var(--paper); padding: 2px 6px; margin-bottom: 4px; white-space: nowrap; border: 1px solid var(--line); }
.pin[aria-pressed="true"] i { transform: scale(1.35); background: var(--rose-ink); }
.place { border-top: 1px solid var(--ink); padding: var(--s5) 0; }
.place h3 { font: 600 1.6rem/1.15 var(--f-display); margin-bottom: var(--s2); }
.place.active h3 { font-style: italic; }
.stays { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.stay { border-top: 1px solid var(--ink); padding-top: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.stay h3 { font: 600 1.55rem/1.15 var(--f-display); }
.stay .price { font: 500 var(--fs-sm) var(--f-ui); margin-top: auto; padding-top: var(--s3); }
@media (max-width: 900px) { .stays { grid-template-columns: 1fr; } }
.tbl { width: 100%; border-collapse: collapse; font: 400 var(--fs-sm)/1.45 var(--f-ui); }
.tbl th, .tbl td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-xs); border-bottom-color: var(--ink); }
.tbl td.t { font: 600 1.3rem var(--f-display); white-space: nowrap; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s4) 0; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); font: 600 1.3rem/1.25 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.6rem var(--f-ui); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--stone); padding-bottom: var(--s4); max-width: 62ch; }

/* ---------- RSVP ---------- */
.response { background: var(--blush); color: var(--ink); position: relative; overflow: hidden; }
.response .ch-head .roman { color: #a7866f; }
.response .ch-head .lbl, .response .ch-head .dek, .response .muted, .response .hint { color: var(--rose-ink); }
.response .wrap { position: relative; z-index: 2; }
.rsvp-shell { max-width: 820px; background: #fbf6f1; border: 1px solid var(--blush-deep); padding: clamp(1.5rem, 5vw, 4rem); position: relative; }
.rsvp-shell h3 { font: 600 2rem/1.1 var(--f-display); margin-bottom: var(--s3); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.choice label { position: relative; display: block; border: 1px solid #a58a78; padding: var(--s5); cursor: pointer; background: #fffaf6; min-height: 120px; transition: border-color .2s, background .2s; }
.choice input { position: absolute; opacity: 0; }
.choice .script { font-size: 2.8rem; display: block; color: var(--ink); }
.choice small { font: 400 var(--fs-sm) var(--f-ui); color: var(--rose-ink); }
.choice input:checked + span { outline: 0; }
.choice label:has(input:checked) { border: 2px solid var(--ink); background: #fff; padding: calc(var(--s5) - 1px); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.choice label::after { content: ""; position: absolute; top: var(--s4); right: var(--s4); width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rose-ink); }
.choice label:has(input:checked)::after { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 4px #fff; }
@media (max-width: 600px) { .choice { grid-template-columns: 1fr; } }
.evpick { display: flex; flex-direction: column; gap: var(--s2); }
.evpick label { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s3); align-items: center; border-bottom: 1px solid var(--blush-deep); padding: var(--s3) 0; cursor: pointer; min-height: 56px; }
.evpick input { width: 22px; height: 22px; accent-color: var(--ink); margin: 0; }
.evpick b { font: 600 1.2rem var(--f-display); }
.evpick span.w { font: 400 var(--fs-sm) var(--f-ui); color: var(--rose-ink); text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid #a58a78; border-radius: var(--r-1); font: 500 var(--fs-sm) var(--f-ui); background: #fffaf6; }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid #a58a78; background: #fffaf6; }
.stepper button { width: 48px; min-height: 48px; background: none; border: 0; cursor: pointer; font: 400 1.4rem var(--f-ui); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 48px; display: grid; place-items: center; font: 600 1.4rem var(--f-display); border-left: 1px solid #a58a78; border-right: 1px solid #a58a78; }
.plus-card { border: 1px dashed #a58a78; padding: var(--s5); margin-top: var(--s4); }
.plus-card h4 { font: italic 600 1.3rem var(--f-display); margin-bottom: var(--s3); }
.consent { background: var(--blush-2); border: 1px solid var(--blush-deep); padding: var(--s5); margin-bottom: var(--s5); }
.consent p { font: 400 var(--fs-sm)/1.55 var(--f-ui); color: var(--rose-ink); margin-bottom: var(--s3); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); justify-content: space-between; border-top: 1px solid var(--blush-deep); padding-top: var(--s5); }
.status-pill { display: inline-flex; align-items: center; gap: .5em; font: 600 var(--fs-xs) var(--f-ui); letter-spacing: .14em; text-transform: uppercase; padding: .45rem .7rem; border: 1px solid currentColor; border-radius: var(--r-1); }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-Attending { color: var(--ok); } .st-Declined { color: var(--error); } .st-Pending { color: var(--stone); }
.done { text-align: center; padding: var(--s5) 0; }
.done .script { font-size: clamp(3.4rem, 8vw, 5rem); display: block; margin-bottom: var(--s3); }
.summary { text-align: left; border-top: 1px solid var(--blush-deep); margin-top: var(--s6); padding-top: var(--s5); font: 400 var(--fs-sm)/1.6 var(--f-ui); }
.summary dt { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-xs); margin-top: var(--s4); color: var(--rose-ink); }
.summary dd { margin: var(--s1) 0 0; }
.banner { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) var(--s5); border: 1px solid; margin-bottom: var(--s6); font: 400 var(--fs-sm)/1.5 var(--f-ui); border-radius: var(--r-1); }
.banner.info { border-color: var(--blush-deep); background: var(--blush-2); color: var(--rose-ink); }
.banner.warn { border-color: var(--error); background: #fbf0ee; color: var(--error); }
.skel { display: grid; gap: var(--s3); }
.skel i { display: block; height: 16px; background: linear-gradient(90deg, var(--blush-2), #fff, var(--blush-2)); background-size: 200% 100%; animation: sh 1.2s infinite linear; border-radius: 2px; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding: clamp(4rem, 8vw, 7rem) 0 calc(var(--s7) + 40px); }
.foot .script { font-size: clamp(3.6rem, 9vw, 7rem); color: var(--paper); }
.foot .grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s7); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid #45423e; }
.foot h2 { font: 500 var(--fs-xs) var(--f-ui); letter-spacing: var(--track); text-transform: uppercase; color: #c9c3bb; margin-bottom: var(--s4); }
.foot a { color: var(--paper); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font: 400 var(--fs-sm) var(--f-ui); }
.foot ul a { display: inline-flex; min-height: 40px; align-items: center; }
.foot p { color: #d9d4cd; font: 400 var(--fs-sm)/1.6 var(--f-ui); }
.foot .tools { display: grid; gap: var(--s2); }
.foot .tools .check { color: #e9e5df; padding: var(--s1) 0; }
.foot .tools .check input { accent-color: var(--blush); }
.foot .tools button { justify-self: start; background: none; border: 1px solid #6d6862; color: var(--paper); padding: .5rem .9rem; min-height: 40px; cursor: pointer; font: 500 var(--fs-xs) var(--f-ui); letter-spacing: .12em; text-transform: uppercase; border-radius: var(--r-1); margin-top: var(--s2); }
.foot .credit { margin-top: var(--s7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); font: 400 var(--fs-xs) var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #bdb7af; }
@media (max-width: 900px) { .foot .grid { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- dialog & toast ---------- */
dialog { border: 1px solid var(--ink); border-radius: var(--r-1); padding: 0; max-width: min(620px, calc(100vw - 2rem)); width: 100%; background: var(--paper); color: var(--ink); max-height: calc(100dvh - 2rem); }
dialog::backdrop { background: rgba(22, 21, 20, .55); }
dialog .d-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) var(--s5) var(--s3); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 2; }
dialog .d-head h2 { font: 600 1.6rem/1.1 var(--f-display); }
dialog .d-body { padding: var(--s5); }
dialog .x { background: none; border: 1px solid var(--line); width: 44px; height: 44px; cursor: pointer; font-size: 1.3rem; border-radius: var(--r-1); flex: none; }
.codes { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.codes button { display: grid; grid-template-columns: 110px 1fr; gap: var(--s4); align-items: center; text-align: left; background: var(--paper-2); border: 1px solid var(--line); padding: var(--s3) var(--s4); cursor: pointer; min-height: 56px; font: 400 var(--fs-sm)/1.4 var(--f-ui); border-radius: var(--r-1); }
.codes button:hover { border-color: var(--ink); }
.codes b { font: 600 1.25rem var(--f-display); letter-spacing: .2em; }
.toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: var(--s3) var(--s5); font: 500 var(--fs-sm) var(--f-ui); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: calc(100vw - 2rem); border-radius: var(--r-1); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.still .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- couple's desk (dashboard) ---------- */
.desk-head { padding: var(--s7) 0 var(--s6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s5); border-bottom: 1px solid var(--ink); }
.desk-head h1 { font: 500 var(--fs-2xl)/.95 var(--f-display); }
.desk-head .acts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.kpi { padding: var(--s5) var(--s4) var(--s5) 0; border-right: 1px solid var(--line); }
.kpi + .kpi { padding-left: var(--s5); }
.kpi:last-child { border-right: 0; }
.kpi b { display: block; font: 500 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-display); margin-top: var(--s2); }
.kpi small { font: 400 var(--fs-sm) var(--f-ui); color: var(--stone); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0 !important; } }
.desk-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); padding: var(--s7) 0; }
@media (max-width: 1000px) { .desk-grid { grid-template-columns: 1fr; } }
.pane h2 { font: 600 1.8rem/1.1 var(--f-display); margin-bottom: var(--s2); }
.pane > .muted { font: 400 var(--fs-sm) var(--f-ui); margin-bottom: var(--s5); }
.bars { display: grid; gap: var(--s4); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); font: 400 var(--fs-sm) var(--f-ui); }
.bar .track { grid-column: 1 / -1; height: 10px; background: var(--paper-3); position: relative; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 0; transition: width .8s var(--ease); }
.bar .fill.p { background: repeating-linear-gradient(135deg, var(--mist) 0 3px, var(--paper-3) 3px 6px); }
.bar b { font: 600 1.1rem var(--f-display); }
.legend { display: flex; gap: var(--s5); font: 400 var(--fs-xs) var(--f-ui); color: var(--stone); margin-top: var(--s4); }
.legend i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; background: var(--ink); }
.legend i.p { background: repeating-linear-gradient(135deg, var(--mist) 0 3px, var(--paper-3) 3px 6px); }
.diet { list-style: none; padding: 0; margin: 0; }
.diet li { display: flex; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font: 400 var(--fs-sm) var(--f-ui); }
.diet li b { font: 600 1.2rem var(--f-display); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-bottom: var(--s4); }
.toolbar .field { margin: 0; }
.toolbar .input, .toolbar .select { min-height: 44px; font-family: var(--f-ui); font-size: var(--fs-sm); }
.scroll { overflow-x: auto; position: relative; }
.gt td .code { font: 600 1rem var(--f-display); letter-spacing: .16em; }
.gt td button.name { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: 500 var(--fs-sm) var(--f-ui); text-decoration: underline; text-underline-offset: .2em; min-height: 40px; }
.gt .tier { display: inline-block; font: 600 10px var(--f-ui); letter-spacing: .08em; border: 1px solid var(--line); padding: 2px 5px; margin: 1px 2px 1px 0; }
.empty { text-align: center; padding: var(--s7) var(--s4); border: 1px dashed var(--line); font: 400 var(--fs-sm) var(--f-ui); color: var(--stone); }
.empty b { display: block; font: italic 600 1.5rem var(--f-display); color: var(--ink); margin-bottom: var(--s2); }
.songs { list-style: none; padding: 0; margin: 0; font: 400 var(--fs-sm) var(--f-ui); }
.songs li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s3); }
.songs li span { color: var(--stone); white-space: nowrap; }
.wa { background: #f1efe9; border: 1px solid var(--line); padding: var(--s4); font: 400 var(--fs-sm)/1.55 var(--f-ui); white-space: pre-wrap; border-radius: var(--r-2); }
.wa-list { display: grid; gap: var(--s3); max-height: 280px; overflow: auto; margin: var(--s4) 0; }
.wa-list label { display: flex; gap: var(--s3); align-items: center; font: 400 var(--fs-sm) var(--f-ui); min-height: 40px; }
.wa-list input { width: 20px; height: 20px; accent-color: var(--ink); }

/* ---------- Keepsake product page ---------- */
.p-hero { padding-top: clamp(3rem, 8vw, 7rem); padding-bottom: clamp(3rem, 8vw, 7rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: end; }
.p-hero h1 { font: 500 var(--fs-3xl)/.9 var(--f-display); letter-spacing: -.02em; }
.p-hero h1 em { font-family: var(--f-script); font-style: normal; font-size: .62em; display: block; margin-top: .1em; color: var(--ink-2); }
@media (max-width: 900px) { .p-hero { grid-template-columns: 1fr; } }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.feat article { border-top: 1px solid var(--ink); padding-top: var(--s5); }
.feat .num { font-size: 2.4rem; color: var(--mist); display: block; margin-bottom: var(--s3); font-style: italic; }
.feat h3 { font: 600 1.5rem/1.15 var(--f-display); margin-bottom: var(--s3); }
.feat p { color: var(--stone); font-size: 1rem; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); }
.plan { padding: var(--s6); border-right: 1px solid var(--ink); display: flex; flex-direction: column; gap: var(--s3); }
.plan:last-child { border-right: 0; }
.plan.feature { background: var(--blush); }
.plan h3 { font: 600 2rem var(--f-display); }
.plan .price { font: 600 2.6rem/1 var(--f-display); margin: var(--s3) 0 0; }
.plan .price small { font: 400 var(--fs-sm) var(--f-ui); color: var(--stone); display: block; margin-top: var(--s2); }
.plan.feature .price small, .plan.feature .muted { color: var(--rose-ink); }
.plan ul { padding: 0; margin: var(--s4) 0; list-style: none; font: 400 var(--fs-sm)/1.5 var(--f-ui); display: grid; gap: var(--s2); }
.plan li { padding-left: 1.3em; position: relative; }
.plan li::before { content: "—"; position: absolute; left: 0; }
.plan .btn { margin-top: auto; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan { border-right: 0; border-bottom: 1px solid var(--ink); } .plan:last-child { border-bottom: 0; } }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; border-top: 1px solid var(--line); padding-top: var(--s4); font: 400 var(--fs-sm)/1.55 var(--f-ui); color: var(--stone); }
.steps li::before { content: "0" counter(s) "."; display: block; font: 600 2rem var(--f-display); color: var(--ink); margin-bottom: var(--s2); }
.steps b { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--s1); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
.legal { max-width: 760px; padding: var(--s7) 0 var(--s9); }
.legal h1 { font: 500 var(--fs-2xl)/1 var(--f-display); margin-bottom: var(--s5); }
.legal h2 { font: 600 1.7rem var(--f-display); margin: var(--s7) 0 var(--s3); }
.legal p, .legal li { color: var(--ink-2); }

/* ================= v2: intro, reveals, blush interactions ================= */
:root { --spring: cubic-bezier(.34, 1.4, .64, 1); --blush-hi: #f3e2d3; }

/* --- cover: full first screen, names mark, scroll cue --- */
.cover { min-height: calc(100svh - var(--demo-h) - 76px); display: flex; flex-direction: column; justify-content: center; }
.cover > .wrap { width: 100%; }
.names-mark { margin: 0; line-height: 0; }
.names-mark svg { height: clamp(3.1rem, 5.6vw, 4.4rem); width: auto; max-width: 100%; overflow: visible; }
.names-mark path { fill: var(--ink-2); }
.scroll-cue { position: fixed; right: max(.5rem, calc((100vw - var(--max)) / 2 - 1.5rem)); bottom: 5.5rem; background: none; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer; color: var(--ink); font: 600 .75rem var(--f-ui); letter-spacing: .2em; text-transform: uppercase; min-width: 44px; min-height: 44px; padding: .25rem .5rem; transition: opacity .5s var(--ease), color .25s; z-index: 3; }
.scroll-cue .line { position: relative; width: 1px; height: 46px; background: var(--line); overflow: hidden; }
.scroll-cue .line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: cue 1.8s var(--ease) infinite; }
.scroll-cue svg { width: 14px; height: 14px; transition: transform .3s var(--spring); }
.scroll-cue:hover { color: var(--rose-ink); }
.scroll-cue:hover svg { transform: translateY(4px); }
.scroll-cue.gone { opacity: 0; pointer-events: none; }
@keyframes cue { to { top: 100%; } }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* --- intro overlay --- */
.intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; pointer-events: auto; }
.intro .bg { position: absolute; inset: 0; background: var(--paper); }
.intro .stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vh, 2rem); padding: 0 var(--gut); }
.intro .names svg { width: min(82vw, 880px); height: auto; overflow: visible; display: block; transform-origin: 0 0; }
.intro .names path { fill: var(--ink); fill-opacity: 0; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.intro .when { text-align: center; opacity: 0; transform: translateY(10px); }
.intro .when .d { font: italic 500 clamp(1.4rem, 2.6vw, 2rem) var(--f-display); letter-spacing: .04em; display: block; }
.intro .when .l { margin-top: .5rem; display: block; color: var(--stone); }
.intro .skip-intro { position: absolute; top: 1.25rem; right: var(--gut); background: none; border: 1px solid var(--line); border-radius: var(--r-1); min-height: 44px; padding: 0 1rem; font: 600 .75rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.intro .skip-intro:hover { background: var(--blush); color: var(--ink); border-color: var(--ink); }
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .demo-bar, html.intro-on .mast, html.intro-on .cover .wrap > *, html.intro-on .scroll-cue, html.intro-on .prelude, html.intro-on main > section:not(.cover) { opacity: 0; }
.build { opacity: 0; transform: translateY(26px); }
.build.on { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.drop { opacity: 0; transform: translateY(-14px); }
.drop.on { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* --- scroll reveals --- */
.rv { transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.rv .frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) var(--d, 0s); }
.rv.in .frame { clip-path: inset(0 0 0 0); }
.rv .frame img { transform: scale(1.14); transition: transform 1.8s var(--ease) var(--d, 0s); }
.rv.in .frame img { transform: scale(1.04); }
.ch-head.rv .roman { display: inline-block; transform: translateX(-24px); opacity: 0; transition: transform 1.2s var(--ease) .15s, opacity 1.2s var(--ease) .15s; }
.ch-head.rv.in .roman { transform: none; opacity: 1; }
html.still .rv .frame, html.still .ch-head.rv .roman { clip-path: none; transform: none; opacity: 1; }

/* --- micro-interactions: buttons (blush sweep) --- */
.btn { position: relative; isolation: isolate; overflow: hidden; transition: color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--spring), background .35s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blush); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--ink); background: var(--ink); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: transparent; }
.btn:active { transform: scale(.97); }
.btn[disabled]::before { display: none; }
.plan.feature .btn:not(.ghost)::before, .response .btn::before { background: #fff; }
.demo-bar button { transition: background .25s, color .25s, border-color .25s, transform .2s var(--spring); }
.demo-bar button:hover { background: var(--blush); color: var(--ink); border-color: var(--blush); }
.demo-bar button:active { transform: scale(.96); }
.menu-btn { transition: background .25s, transform .2s var(--spring); }
.menu-btn:hover { background: var(--blush); }
.menu-btn:active { transform: scale(.96); }

/* links */
.nav a::after { height: 2px; background: var(--blush-deep); bottom: 4px; }
.arrow-link { position: relative; transition: color .25s; }
.arrow-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: .55em; background: var(--blush); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.arrow-link:hover::after, .arrow-link:focus-visible::after { transform: scaleX(1); }
.arrow-link { isolation: isolate; }
.foot .arrow-link::after { background: #5b4031; }
main p a:not(.btn), .legal a, .consent a, .dek a { background: linear-gradient(var(--blush), var(--blush)) no-repeat 0 100% / 0 40%; transition: background-size .35s var(--ease); }
main p a:not(.btn):hover, .legal a:hover, .consent a:hover, .dek a:hover { background-size: 100% 40%; }
.linkbtn { background: linear-gradient(var(--blush), var(--blush)) no-repeat 0 85% / 0 40%; transition: background-size .35s var(--ease); }
.linkbtn:hover { background-size: 100% 40%; }
.foot ul a { position: relative; transition: color .25s, padding-left .3s var(--ease); }
.foot ul a:hover { color: var(--blush); padding-left: .4rem; }

/* fields & choices */
.input, .select, .textarea { transition: border-color .2s, box-shadow .25s, background .25s; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px var(--blush); }
.choice label { transition: border-color .25s, background .25s, transform .3s var(--spring), box-shadow .3s; }
.choice label:hover { border-color: var(--ink); background: var(--blush-hi); transform: translateY(-3px); box-shadow: 0 10px 0 -6px var(--blush-deep); }
.chips span { transition: background .2s, border-color .2s, transform .25s var(--spring); }
.chips label:hover span { border-color: var(--ink); background: var(--blush-hi); }
.chips input:checked + span { animation: pop .35s var(--spring); }
.chips label:hover input:checked + span { background: var(--ink); }
@keyframes pop { 50% { transform: scale(1.08); } }
.evpick label { transition: background .25s, padding .3s var(--ease); }
.evpick label:hover { background: var(--blush-hi); padding-left: .6rem; padding-right: .6rem; }
.check input, .evpick input { transition: transform .2s var(--spring); }
.check input:active, .evpick input:active { transform: scale(.85); }
.stepper button { transition: background .2s, transform .15s var(--spring); }
.stepper button:not(:disabled):hover { background: var(--blush); }
.stepper button:not(:disabled):active { transform: scale(.88); }
.stepper output { transition: transform .3s var(--spring); }
.stepper output.bump { animation: pop .35s var(--spring); }
.unlock button[type=submit] svg { transition: transform .3s var(--spring); }
.unlock button[type=submit]:hover svg { transform: translateX(5px); }
.unlock .row { transition: box-shadow .3s; }
.unlock .row:focus-within { box-shadow: 0 2px 0 0 var(--ink), 0 10px 0 -4px var(--blush); }
.unlock.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* cards, arches, images */
.arch .fw { transition: transform .6s var(--ease); }
.arch .frame { transition: box-shadow .5s var(--ease), clip-path 1.3s var(--ease) var(--d, 0s); }
.arch:hover .fw { transform: translateY(-8px); }
.arch:hover .frame { box-shadow: 0 0 0 8px var(--blush); }
.arch .n { transition: transform .6s var(--ease); }
.arch:hover .n { transform: translateX(6px); }
.ev .pic img, .story figure img { transition: transform 1.2s var(--ease); }
.ev:hover .pic img { transform: scale(1.06); }
.ev .acts a, .ev .acts button { background-image: linear-gradient(var(--blush), var(--blush)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0; transition: background-size .3s var(--ease); }
.ev .acts a:hover, .ev .acts button:hover { background-size: 100% 45%; }
.stay, .feat article, .place, .steps li, .qa > div { position: relative; transition: transform .45s var(--ease); }
.stay::before, .feat article::before, .place::before, .steps li::before { pointer-events: none; }
.stay::after, .feat article::after, .place::after, .qa > div::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--blush-deep); transition: width .5s var(--ease); }
.stay:hover::after, .feat article:hover::after, .place:hover::after, .place.active::after, .qa > div:hover::after { width: 100%; }
.stay:hover, .feat article:hover { transform: translateY(-4px); }
.plan { transition: background .4s var(--ease); }
.plan:not(.feature):hover { background: var(--blush-hi); }
.tabs button { position: relative; transition: color .25s; }
.tabs button:hover { color: var(--ink); background: linear-gradient(var(--blush), var(--blush)) no-repeat 0 100% / 100% 3px; }
.faq summary { transition: padding .3s var(--ease), background .3s; }
.faq summary:hover { padding-left: .6rem; background: var(--blush-hi); }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: var(--blush-hi); }
.pin i { transition: transform .3s var(--spring), background .25s; }
.pin:hover i { transform: scale(1.4); background: var(--rose-ink); }
.pin span { transition: background .25s; }
.pin:hover span, .pin[aria-pressed="true"] span { background: var(--blush); border-color: var(--blush-deep); }
.codes button { transition: background .25s, border-color .25s, transform .25s var(--spring); }
.codes button:hover { background: var(--blush); border-color: var(--ink); transform: translateX(4px); }
dialog .x { transition: background .25s, transform .35s var(--spring); }
dialog .x:hover { background: var(--blush); transform: rotate(90deg); }
dialog[open] { animation: dlg .45s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.who button { transition: background .25s; }
.who button:hover { background: var(--blush); }
.kpi { transition: background .3s; }
.kpi:hover { background: linear-gradient(var(--blush-hi), var(--blush-hi)) no-repeat 0 0 / 100% 100%; }
.status-pill { transition: transform .25s var(--spring); }
tr:hover .status-pill { transform: scale(1.04); }
.copied { color: var(--ok) !important; }

/* currency switcher */
.cur { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--r-1); padding: 3px; gap: 3px; margin: 0; }
.cur legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cur label { position: relative; cursor: pointer; }
.cur input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cur span { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 40px; padding: 0 .8rem; font: 600 .8125rem var(--f-ui); letter-spacing: .1em; border-radius: 1px; transition: background .25s, color .25s; }
.cur label:hover span { background: var(--blush); }
.cur input:checked + span { background: var(--ink); color: var(--paper); }
.cur input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.plans-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.plans-bar p { margin: 0; font: 400 var(--fs-sm)/1.5 var(--f-ui); color: var(--stone); }
.price .amt { display: inline-block; }
.price .amt.swap { animation: swap .45s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }

/* ---------- v3: mobile optimisation (phones, <= 720px) ---------- */
@media (max-width: 720px) {
  :root { --demo-h: 36px; --fs-2xl: clamp(2.3rem, 11vw, 3.25rem); }
  html { scroll-padding-top: calc(var(--demo-h) + 64px); }
  .demo-bar { padding: var(--s1) var(--gut); min-height: var(--demo-h); }
  .demo-bar button { min-height: 36px; }
  .mast .wrap { min-height: 60px; gap: var(--s4); }
  .mono { font-size: 1.4rem; }
  .menu-btn { min-height: 44px; }
  .p-hero { padding-top: var(--s7); padding-bottom: var(--s7); gap: var(--s5); }
  .p-hero h1 { font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .p-hero .btn { flex: 1 1 100%; min-height: 56px; }
  .chapter { padding: var(--s8) 0; }
  .prelude { padding: var(--s8) 0 !important; }
  .ch-head { margin-bottom: var(--s6); }
  .ch-head .dek { font-size: var(--fs-sm); }
  .feat article { padding: var(--s5) 0; }
  .btn { min-height: 52px; padding: 0 var(--s5); }
  .lbl { letter-spacing: .12em; }
  .cover .wrap, .wrap { padding-left: max(var(--gut), 1.25rem); padding-right: max(var(--gut), 1.25rem); }
}