/* Invitation page: one phone-width column that opens into a scroll.
   Shared by every kit. A kit is a token set (html[data-kit]) plus its content in js/invitation-data.js.
   Motion pattern follows the Yana and Dylan invitation: a staged cover entrance, reveals as sections
   scroll into view, and a timeline whose line draws as you scroll. */

@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-italic.woff2") format("woff2"); }
@font-face { font-family: "Tangerine"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tangerine.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/marcellus.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/lora-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("../fonts/lora-italic.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pinyon.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("../fonts/jost-normal.woff2") format("woff2"); }

:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: 28px;

  --bg-a: #f6f1ec;
  --bg-b: #fefefe;
  --bg-c: #fdfdfd;
  --bg-foot: #d0c7be;
  --hero-bg: #ad9c91;
  --ink: #4d4d4d;
  --ink-soft: #77716b;
  --line: #d8d1c9;
  --accent: #a0a0a0;
  --foot-ink: #4a4540;

  --f-head: "Cormorant", Georgia, serif;
  --f-ital: "Cormorant", Georgia, serif;
  --f-body: "Cormorant", Georgia, serif;
  --f-time: "Cormorant", Georgia, serif;
  --f-script: "Tangerine", "Brush Script MT", cursive;

  --h-size: 21px;
  --h-weight: 500;
  --h-track: .2em;
  --body-size: 22px;
  --body-lh: 1.38;
  --eyebrow-track: 0;
  --eyebrow-caps: none;

  --trim-h: 58px;
  --loc-w: 124%;
  --loc-ml: -12%;
  --loc-inset: 17% 24% 15%;
  --btn-radius: 999px;
  --tl-x: 44%;
  --t-size: 30px;
  --sub-size: 23px;
}

/* ---------- kit tokens ---------- */
html[data-kit="christmas-dinner"] {
  --bg-a: #ede8e0; --bg-b: #faf9f6; --bg-c: #f6f5f2; --bg-foot: #2f4737; --hero-bg: #2b4636;
  --foot-ink: #d9e0d6; --eyebrow-track: .1em;
  --tl-x: 40%; --trim-h: 56px; --loc-w: 94%; --loc-ml: 3%; --loc-inset: 17% 17% 11%;
}
html[data-kit="kids-birthday"] {
  --bg-a: #f0ece6; --bg-b: #fbfbfb; --bg-c: #f1efe6; --bg-foot: #8a979f; --hero-bg: #7f8c94;
  --foot-ink: #1f2a30; --eyebrow-track: .1em;
  --tl-x: 40%; --trim-h: 48px; --loc-w: 100%; --loc-ml: 0; --loc-inset: 19% 15% 13%;
}
html[data-kit="business-event"] {
  --bg-a: #f8f7f2; --bg-b: #fbfaf6; --bg-c: #fcfbf9; --bg-foot: #a4633f; --hero-bg: #b8704f;
  --foot-ink: #ffffff; --accent: #bf6a43;
  --f-head: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-time: "Jost", "Helvetica Neue", Arial, sans-serif;
  --h-size: 18px; --h-weight: 400; --h-track: .32em;
  --eyebrow-track: .26em; --eyebrow-caps: uppercase;
  --tl-x: 38%; --trim-h: 22px; --loc-w: 90%; --loc-ml: 5%; --loc-inset: 12% 13% 9%; --btn-radius: 0px;
}

/* Branded example: a made-up planner's own colours and fonts (Juniper & Gray) */
html[data-kit="juniper-gray"] {
  --bg-a: #eef0e8; --bg-b: #fbfbf8; --bg-c: #fbfbf8; --bg-foot: #3f5246; --hero-bg: #6c8470;
  --ink: #2f3a36; --ink-soft: #5d6862; --line: #d3d9cf; --accent: #b0715a; --foot-ink: #eef0e8; --line-btn: #4f6355;
  --f-head: "Marcellus", Georgia, serif; --f-ital: "Lora", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-time: "Marcellus", Georgia, serif;
  --f-script: "Pinyon Script", "Brush Script MT", cursive;
  --h-size: 17px; --h-track: .26em; --h-weight: 400; --body-size: 18px; --body-lh: 1.55;
  --t-size: 23px; --sub-size: 20px; --eyebrow-track: .04em;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg-a); overscroll-behavior: contain; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--bg-a); color: var(--ink); font-family: var(--f-body); }
.page { position: relative; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3 { margin: 0; }
.mx { mix-blend-mode: multiply; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--hero-bg); container-type: size; }
.frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * 9 / 16));
  height: max(100cqh, calc(100cqw * 16 / 9));
}
@container (min-aspect-ratio: 9/16) {
  .frame { width: min(100cqw, calc(100cqh * 9 / 16)); height: min(100cqh, calc(100cqw * 16 / 9)); }
}
.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel {
  position: absolute; left: var(--pl, 22%); width: var(--pw, 55.5%); top: var(--pt, 19%); height: var(--ph, 65.5%);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  text-align: center; color: var(--hero-ink, var(--ink));
}
.h-eyebrow {
  font-family: var(--f-ital); font-style: italic; letter-spacing: var(--eyebrow-track); text-transform: var(--eyebrow-caps);
  font-size: clamp(14px, 3.6cqh, 24px); line-height: 1.25;
}
html[data-kit="business-event"] .h-eyebrow { font-family: var(--f-head); font-style: normal; font-size: clamp(14px, 1.7cqh, 16px); padding-left: var(--eyebrow-track); }
.names { font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; font-size: clamp(22px, 4.9cqh, 38px); line-height: 1.12; margin: 0; }
html[data-kit="christmas-dinner"] .names { font-size: clamp(14px, 2.3cqh, 22px); letter-spacing: .14em; padding-left: .14em; }
html[data-kit="business-event"] .names { font-weight: 400; font-size: clamp(16px, 3.3cqh, 26px); letter-spacing: .16em; padding-left: .16em; }
.names span { display: block; }
.amp { font-family: var(--f-script); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); font-size: 2.15em; line-height: 0; margin-left: .06em; position: relative; top: .08em; }
.h-sub { font-family: var(--f-ital); font-style: italic; font-size: clamp(14px, 3.4cqh, 23px); letter-spacing: var(--eyebrow-track); line-height: 1.25; }
html[data-kit="business-event"] .h-sub { letter-spacing: 0; font-size: clamp(16px, 3.4cqh, 24px); }
.h-art { width: 100%; }
.h-art img { width: 106%; max-width: none; margin-inline: -3%; }
.h-venue { font-family: var(--f-ital); font-style: italic; font-size: clamp(13px, 2.8cqh, 21px); line-height: 1.25; letter-spacing: calc(var(--eyebrow-track) / 2); }
.h-date { font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; padding-left: .22em; font-size: clamp(14px, 2.5cqh, 19px); font-variant-numeric: tabular-nums; }
html[data-kit="business-event"] .h-date { font-weight: 400; font-size: clamp(14px, 2.1cqh, 16px); }
.hint { position: absolute; left: 50%; bottom: 0; width: 1px; height: 38px; overflow: hidden; opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; }
.hint::after { content: ""; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: var(--hero-hint, #fff); animation: hint 2.2s var(--ease) infinite; animation-play-state: paused; }
.hero.on .hint { opacity: .7; transition-delay: 3.4s; }
.hero.on .hint::after { animation-play-state: running; }
@keyframes hint { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(200%); } }

/* ---------- sections ---------- */
.sec { position: relative; padding-inline: var(--gutter); text-align: center; background: var(--bg-b); }
.sec.bg-a { background: var(--bg-a); }
.sec.bg-c { background: var(--bg-c); }
.sec.note { padding-block: 64px 118px; }
.sec.day { padding-block: 88px 36px; }
.sec.feature { padding-block: 64px 80px; }
.sec.rsvp { padding-block: 24px 64px; }
.sec.close { padding-block: 96px 150px; }
.foot { background: var(--bg-foot); color: var(--foot-ink); text-align: center; padding: 22px var(--gutter); font-family: var(--f-head); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.foot span { padding-left: .18em; }

.hd { font-family: var(--f-head); font-weight: var(--h-weight); font-size: var(--h-size); letter-spacing: var(--h-track); padding-left: var(--h-track); text-transform: uppercase; line-height: 1.3; text-wrap: balance; }
.sub { font-family: var(--f-ital); font-style: italic; font-weight: 400; font-size: var(--sub-size); line-height: 1.3; }
.copy { font-size: var(--body-size); line-height: var(--body-lh); text-wrap: balance; }
.stack { display: flex; flex-direction: column; align-items: center; }
.stack > .hd + .copy, .note .hd { margin-top: 0; }

.note .lead-art { width: 72%; margin: 0 auto 30px; }
.note .lead-art.small { width: 34%; margin-bottom: 18px; }
.note .lead-art.wide { width: 100%; margin-bottom: 34px; }
.note .hd { margin-bottom: 26px; }
.fl { position: absolute; z-index: 3; pointer-events: none; width: var(--w, 170px); }
.fl.br { right: -26px; bottom: -46px; }
.fl.tr { right: -40px; top: 14px; }
.fl.bl { left: -50px; bottom: 6px; }

.trim { position: absolute; left: 50%; width: 160%; height: var(--trim-h); z-index: 2; pointer-events: none; transform: translate(-50%, 0); bottom: calc(var(--trim-h) / -2); background-repeat: repeat-x; background-position: center; background-size: auto 100%; }

/* timeline */
.tl { position: relative; margin-top: 40px; --p: 0px; text-align: left; }
.tl::before, .tl::after { content: ""; position: absolute; left: var(--tl-x); top: 0; width: 1px; }
.tl::before { bottom: 0; background: var(--line); }
.tl::after { height: var(--p); background: var(--accent); }
.entry { position: relative; height: 128px; display: grid; grid-template-columns: var(--tl-x) 1fr; align-items: center; }
.ico { width: 124px; height: 124px; justify-self: center; }
.dot { position: absolute; left: var(--tl-x); top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3px; border-radius: 50%; background: var(--bg-b); box-shadow: 0 0 0 1px var(--line); transition: background .4s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease); }
.txt { padding-left: 24px; }
.t { font-family: var(--f-ital); font-style: italic; font-size: var(--t-size); line-height: 1.15; display: block; }
.tm { display: block; margin-top: 6px; font-family: var(--f-time); font-size: 16px; letter-spacing: .22em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.entry.hit .dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); transform: scale(1.5); }

/* location */
.loc { position: relative; padding: 48px 0 36px; background: var(--bg-c); }
.loc-wrap { position: relative; width: var(--loc-w); margin-left: var(--loc-ml); aspect-ratio: var(--loc-ar, 1000 / 1506); }
.loc-card { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(60, 50, 40, .12)); }
.loc-in { position: absolute; inset: var(--loc-inset); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.loc-in .art { width: 100%; }
.addr { font-size: 21px; line-height: 1.4; }
.addr span { display: block; }
.loc-note { font-family: var(--f-ital); font-style: italic; font-size: 19px; line-height: 1.3; text-wrap: balance; }

/* plain location block (no paper card) */
.loc.plain { padding: 64px var(--gutter) 72px; text-align: center; }
.loc.plain .stack { gap: 0; }
.loc.plain .sub { margin-top: 14px; }
.loc.plain .art { width: 100%; margin: 26px 0 22px; }

/* feature blocks (dress code, secret santa, what to wear, presents, registration) */
.feature .stack { gap: 0; }
.feature .sub { margin-top: 14px; }
.feature-art { width: 70%; margin: 26px auto 26px; }
.feature-art.wide { width: 84%; }
.feature-art.narrow { width: 34%; margin-bottom: 18px; }

/* rsvp */
.rsvp-card { position: relative; width: 100%; max-width: 360px; margin: 0 auto 26px; }
.rsvp-card > img { width: 100%; height: auto; }
.rsvp-in { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.rsvp-card[data-kind="tag"] .rsvp-in { inset: 20% 8% 20% 31%; }
.rsvp-card[data-kind="tag"] .rsvp-line { font-size: 20px; }
.rsvp-card[data-kind="ticket"] .rsvp-in { inset: 16% 33% 16% 7%; }
.rsvp-card[data-kind="reserve"] .rsvp-in { inset: 14% 8% 14% 8%; }
.rsvp-card[data-kind="reserve"] .rsvp-eyebrow { color: #a49363; font-size: 22px; }
.rsvp-card[data-kind="reserve"] .rsvp-line { color: #e7dfca; font-size: 20px; }
.rsvp-card[data-kind="badge"] .rsvp-in { inset: 36% 8% 12% 8%; }
.rsvp-eyebrow { font-family: var(--f-head); font-weight: 500; font-size: 26px; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; line-height: 1; }
.rsvp-card[data-kind="badge"] .rsvp-eyebrow { font-size: 14px; font-weight: 400; letter-spacing: .3em; }
.rsvp-line { font-family: var(--f-ital); font-style: italic; font-size: 22px; line-height: 1.2; text-wrap: balance; }
.btn {
  appearance: none; min-height: 46px; padding: 0 34px; border: 1px solid var(--line-btn, #9a9289); border-radius: var(--btn-radius);
  background: transparent; color: var(--ink); font: 400 22px/1 var(--f-ital); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease);
}
html[data-kit="business-event"] .btn { font: 400 15px/1 var(--f-head); letter-spacing: .24em; border-color: var(--ink); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ink); color: var(--bg-b); } }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* planner brand: logo on the cover and in the footer, contact lines, plain reply block */
html[data-kit="juniper-gray"] .amp { font-family: var(--f-ital); font-style: italic; font-size: 1.5em; top: .12em; margin-left: .12em; }
html[data-kit="juniper-gray"] .names { font-size: clamp(20px, 4.4cqh, 34px); }
html[data-kit="juniper-gray"] .h-venue { font-size: clamp(14px, 2.4cqh, 18px); }
.h-logo.wide img { height: auto; width: 68%; }
.h-art.plain img { mix-blend-mode: normal; width: 100%; margin-inline: 0; }
.h-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.h-logo img { height: clamp(30px, 6cqh, 52px); width: auto; }
.h-logo span { font-family: var(--f-head); font-size: clamp(14px, 1.5cqh, 16px); letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; color: var(--ink); }
.foot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-mark { height: 38px; width: auto; }
.foot-mark.logo { height: 46px; }
.foot-line { font-family: var(--f-body); letter-spacing: .2em; }
.rsvp-card[data-kind="plain"] { margin-top: 36px; border: 1px solid var(--line); background: var(--bg-b); padding: 28px 20px 26px; }
.rsvp-card[data-kind="plain"] .rsvp-in { position: static; }
.contact { margin-top: 22px; display: grid; gap: 2px; font-size: 17px; color: var(--ink-soft); }
.contact span { display: block; }

/* closing */
.close .stack { padding-top: 6px; }
.close .hd { margin-bottom: 26px; }
.close-art { width: 62%; margin: 0 auto 36px; }
.close-art.wide { width: 100%; }
.sign { margin-top: 30px; font-family: var(--f-ital); font-style: italic; font-size: 28px; line-height: 1.3; }
.sign.script { font-family: var(--f-script); font-style: normal; font-size: 34px; }

/* rsvp sheet (sample only) */
.sheet { width: min(92vw, 380px); padding: 28px 24px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-b); color: var(--ink); font-family: var(--f-body); }
.sheet::backdrop { background: rgba(30, 28, 26, .45); }
.sheet h2 { font-family: var(--f-head); font-weight: var(--h-weight); font-size: 18px; letter-spacing: .2em; text-transform: uppercase; text-align: center; margin-bottom: 6px; }
.sheet .fine { text-align: center; font-style: italic; font-size: 18px; color: var(--ink-soft); margin-bottom: 18px; }
.sheet .fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sheet label { display: block; font-size: 20px; margin: 14px 0 4px; }
.sheet input[type="text"] { width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid #9a9289; background: transparent; font: 400 22px var(--f-body); color: var(--ink); border-radius: 0; }
.sheet .choice { display: flex; gap: 22px; margin-top: 8px; font-size: 22px; }
.sheet .choice label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; }
.sheet .choice label, .sheet .plus { min-height: 44px; }
.sheet .plus { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.sheet .row { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.sheet .thanks { text-align: center; font-size: 22px; line-height: 1.35; }

/* ---------- motion ---------- */
@media (scripting: enabled) {
  .h { opacity: 0; transform: translateY(10px); }
  .hero.on .h { opacity: 1; transform: none; transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); transition-delay: var(--d, 0s); }
  .hero.noanim .h { transition: none !important; }
  .rv { opacity: 0; transform: translateY(var(--ty, 22px)) scale(var(--s0, 1)) rotate(var(--rot, 0deg)); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
  .rv.in { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
  .rv.noanim { transition: none !important; }
  .fl.rv { --s0: .97; }
  .loc-card.rv { --ty: 34px; }
  .entry .ico, .entry .txt { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .entry .ico { transform: translateX(-14px); }
  .entry .txt { transform: translateX(14px); transition-delay: .15s; }
  .entry.hit .ico, .entry.hit .txt { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .h, .rv, .entry .ico, .entry .txt { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rv.fl { transform: rotate(var(--rot, 0deg)) !important; }
  .hint::after { animation: none; }
}

/* ?kit= that matches no invitation (js/invitation.js). */
.inv-missing {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 32px var(--gutter);
  background: var(--bg-a);
  color: var(--foot-ink);
  font-family: var(--f-body);
  text-align: center;
}
.inv-missing h1 { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.2; }
.inv-missing p { margin: 0; max-width: 30ch; font-size: 20px; line-height: 1.4; }
.inv-missing a { padding-block: 12px; font: 500 14px/1.2 "Jost", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--foot-ink); text-underline-offset: 4px; }