/* tangled.ttf maps digits 1-8, C D G H I M O Q S U W X and every accented letter to EMPTY glyphs (cmap ≠ outlines).
   Tangled ES (built by .kc/tools/tangled-es.py) adds the accents and ¡ ¿; the unicode-range lists only inked glyphs,
   so anything else falls to Cormorant instead of vanishing. Digits never use it. The gate keeps the original "Tangled". */
@font-face {
  font-family: "Tangled ES";
  src: url("../../assets/font/tangled-es.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0021-002F, U+003A-0042, U+0045-0046, U+004A-004C, U+004E, U+0050, U+0052, U+0054, U+0056, U+0059-005A, U+005F-007E, U+00A1, U+00B4, U+00B7, U+00BF, U+00E0-00E1, U+00E8-00E9, U+00EC-00ED, U+00EF, U+00F1-00F3, U+00F9-00FA, U+00FC-00FD, U+2013-2014, U+2018-201A, U+201C-201E, U+2026;
}
/* Itinerary + pass voices: Cinzel carves the inscription, Italianno writes the hour by hand. Both OFL. */
@font-face { font-family: "Cinzel"; src: url("../../assets/font/cinzel-400-latin.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Italianno"; src: url("../../assets/font/italianno-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.kc-content h1, .kc-content h2 { font-family: "Tangled ES", "Cormorant Garamond", Georgia, serif; font-weight: 400; }

.kc-content {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  background-color: var(--canvas-night);
  background-image:
    radial-gradient(ellipse 78% 22% at 8% 3%, rgba(255, 239, 192, .75), transparent 78%),
    radial-gradient(ellipse 52% 17% at 86% 12%, rgba(234, 157, 99, .28), transparent 78%),
    linear-gradient(180deg, var(--canvas-day-lit) 0%, var(--canvas-day) 15%, #e9c39b 28%, #e3b39a 40%, var(--canvas-dusk) 51%, #c28c9a 61%, #97728e 72%, #604565 82%, #2a1a33 91%, var(--canvas-night) 100%);
}

.kc-content::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../../assets/page/grain.webp") repeat;
  background-size: 20rem 20rem;
  content: "";
  opacity: .18;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.kc-content > * { position: relative; z-index: 1; }
.kc-art-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.kc-container { width: min(100% - 2 * var(--kc-page-gutter), 72rem); }
.kc-section { position: relative; padding: clamp(3.75rem, 8vw, 7rem) 0; }
.kc-section h2 { max-width: 17ch; margin: 0 auto clamp(1.5rem, 4vw, 2.6rem); color: #875816; font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.04; text-align: center; text-wrap: balance; }
.kc-content p, .kc-content li, .kc-content blockquote, .kc-content dt, .kc-content dd, .kc-content label, .kc-content legend { font-family: "Cormorant Garamond", Georgia, serif; }
.kc-content p, .kc-content li, .kc-content blockquote { font-size: clamp(1.125rem, 2vw, 1.3rem); line-height: 1.6; }
.kc-content a { text-decoration-thickness: .08em; text-underline-offset: .2em; }
.kc-content :focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kc-content .kc-button { min-height: 3rem; border: 0; border-radius: 999px; padding: .72rem 1.5rem; color: var(--cta-ink); background: var(--cta-background); box-shadow: inset 0 1px rgba(255,255,255,.75), 0 3px 0 rgba(98,61,25,.25); font: 600 1.05rem/1.2 "Cormorant Garamond", Georgia, serif; cursor: pointer; }
.kc-content .kc-button:disabled { opacity: .55; cursor: not-allowed; }

/* Reveal with a ragged watercolor edge. */
body.has-page-reveal [data-reveal] {
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 2%, 94% 4%, 88% 2%, 80% 5%, 72% 2%, 64% 4%, 55% 2%, 46% 5%, 37% 2%, 28% 4%, 19% 2%, 10% 5%, 4% 2%, 0 4%);
  transition: opacity 900ms ease, clip-path 1100ms cubic-bezier(.2,.65,.35,1);
}
body.has-page-reveal [data-reveal].is-revealed { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
[data-loop] { --loop-state: paused; }
[data-loop].is-visible { --loop-state: running; }

.kc-sun { display: block; color: currentColor; }

/* The tower: Hero, letter, window and plaque share one painted wall. The wall tile (a beam at its foot, so the seam hides in
   its shadow) starts right under the Hero plate's floor beam: one continuous tapestry down to the dusk scenes. */
.kc-tower { --stage-w: min(100vw, 62svh); --plate-h: calc(var(--stage-w) * 1800 / 1080); position: relative; background: url("../../assets/page/wall-p.webp") center var(--plate-h) / 100% auto repeat-y, #3a2416; }
/* Hero: her portrait alone on the room's wall (plate 1080x1800 / 1920x1200, boxes from .kc/anidoodle/out/page/hero-room.json):
   every layer is a % box of the plate. "Mis XV años" rides the lintel, the name lights up under the frame. */
.kc-section.kc-hero { display: grid; padding: 0; place-items: start center; overflow: clip; color: var(--ink-inverse); }
.kc-room { position: relative; width: var(--stage-w); aspect-ratio: 1080 / 1800; container-type: inline-size; }
.kc-room > * { position: absolute; margin: 0; }
.kc-room__plate { inset: 0; }
.kc-room__plate img { width: 100%; height: 100%; }
/* multiply: the illustration's white ground takes the warm parchment of the painted niche, her colours stay */
.kc-room__portrait { left: 18.287%; top: 17.083%; width: 63.426%; height: 47.5%; object-fit: contain; mix-blend-mode: multiply; }
.kc-room__frame { left: 10.185%; top: 9.639%; width: 79.63%; height: 59.389%; }
.kc-room__frame img { width: 100%; height: 100%; }

/* the words land here from the gate (hero-handoff FLIPs eyebrow and date onto these; the name lights itself, page.mjs) */
.kc-hero__eyebrow { left: 0; right: 0; top: 7.9%; color: #fff1d6; font-size: max(1.05rem, 5.2cqw); font-style: italic; letter-spacing: .08em; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px rgba(20,8,10,.9), 0 0 14px rgba(20,8,10,.7); transform: translateY(-50%); }
/* a soft dark wash where the words cross the lintel's grain */
.kc-hero__eyebrow { left: 22%; right: 22%; padding: .2em 0; background: radial-gradient(closest-side, rgba(26,12,8,.72), rgba(26,12,8,.45) 60%, transparent); }
.kc-hero__copy { left: 5%; right: 5%; top: 70.2%; display: grid; justify-items: center; gap: .4cqw; text-align: center; }
.kc-hero h1 { display: grid; justify-items: inherit; gap: 1.2cqw; margin: 0; line-height: .9; }
.kc-hero__first { color: #f7db8c; font-size: 17.5cqw; letter-spacing: -.01em; line-height: .95; padding-bottom: 1.2cqw; text-shadow: 0 .02em 0 rgba(86,53,24,.9), 0 0 .35em rgba(255,186,90,.28), 0 .08em .3em rgba(16,6,10,.75); }
.kc-hero__last { color: #fbf1d8; font-family: "Cormorant Garamond", Georgia, serif; font-size: max(.95rem, 4.6cqw); font-variant: small-caps; letter-spacing: .22em; line-height: 1.2; }
.kc-hero__date { color: #fbf1d8; font-size: max(.95rem, 4.5cqw); font-variant: small-caps; letter-spacing: .16em; line-height: 1.3; white-space: nowrap; }

@media (min-aspect-ratio: 1/1) {
  .kc-tower { --stage-w: min(100vw, 160svh); --plate-h: calc(var(--stage-w) * 1200 / 1920); background-image: url("../../assets/page/wall-l.webp"); }
  .kc-room { aspect-ratio: 1920 / 1200; }
  /* when the stage is narrower than the screen its painted edges melt into the wall beside it */
  .kc-room__plate { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); }
  .kc-room__portrait { left: 21.302%; top: 29.292%; width: 24.063%; height: 48.083%; }
  .kc-room__frame { left: 18.125%; top: 21.458%; width: 30.417%; height: 60.583%; }
  .kc-hero__eyebrow { left: 64%; right: 3%; top: 26.5%; padding: 0; font-size: max(1rem, 2.3cqw); text-align: left; background: none; transform: none; }
  .kc-hero__copy { left: 64%; right: -14%; top: 33.5%; justify-items: start; gap: .3cqw; text-align: left; }
  .kc-hero__first { font-size: 9.6cqw; }
  .kc-hero__last, .kc-hero__date { font-size: max(.9rem, 1.7cqw); }
}

/* Dedication: a quiet letter laid into the plaster. */
.kc-dedication { padding-block: clamp(1.5rem, 4vw, 3rem); }
.kc-letter { position: relative; max-width: 51rem; padding: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 8vw, 5.5rem); background: radial-gradient(ellipse at 12% 18%, rgba(255,244,212,.8), transparent 48%), radial-gradient(ellipse at 93% 100%, rgba(154,97,38,.2), transparent 46%), linear-gradient(132deg, rgba(247,228,194,.94), rgba(239,211,166,.88) 58%, rgba(217,176,122,.9)); clip-path: polygon(0 2%, 7% 1%, 13% 2.5%, 20% 1%, 29% 2.4%, 38% 1%, 47% 2.6%, 57% 1%, 66% 2.4%, 77% 1%, 87% 2.6%, 94% 1%, 100% 2%, 99% 96%, 92% 97%, 84% 95%, 75% 97%, 65% 95%, 56% 97%, 47% 95%, 37% 97%, 28% 95%, 19% 97%, 10% 95%, 0 97%); }
.kc-letter h2 { margin-bottom: 1rem; }
.kc-dedication__seal { position: absolute; top: 1.1rem; right: 1.2rem; width: 2.7rem; height: 2.7rem; color: var(--p-sienna); }
.kc-letter blockquote { margin: 0; color: var(--ink); font-style: italic; }
.kc-letter blockquote::first-letter { float: left; margin: -.1em .12em -.12em 0; color: var(--p-ochre); font-family: "Tangled ES", "Cormorant Garamond", Georgia, serif; font-size: 3.7em; line-height: .9; }

/* Counter: the window from the Hero, lower down the tower. Lanterns rise behind its frame; the carved clock hangs from the
   mantel on two ropes (its top tucks behind the corbels) and the page writes the digits into its painted panes. */
.kc-counter { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
/* the title and the line under it sit in a pool of lit plaster: the wall's beams may pass behind them */
.kc-counter h2, .kc-counter__place, .kc-countdown-status { width: fit-content; padding: .3em 1.2em; background: radial-gradient(closest-side, rgba(250,234,200,.95), rgba(250,234,200,.82) 62%, rgba(250,234,200,0)); }
.kc-counter h2 { max-width: none; margin-bottom: .2rem; color: #4a2610; font-size: clamp(1.7rem, 7.4vw, 3rem); white-space: nowrap; }
.kc-content .kc-counter__place, .kc-countdown-status { margin: 0 auto .6rem; color: var(--ink); font-style: italic; font-weight: 600; text-align: center; }
.kc-countdown-status:empty { display: none; }
.kc-shelf { --guide-walk-w: 88px; position: relative; width: min(100%, 36rem); margin: 0 auto; }
.kc-window { position: relative; z-index: 2; aspect-ratio: 1080 / 900; pointer-events: none; }
.kc-window > * { position: absolute; }
.kc-window__sky { left: 34.815%; top: 15.333%; width: 30.37%; height: 60%; object-fit: cover; }
.kc-window__lamps { left: 34.907%; top: 15.4%; width: 30.185%; height: 59.6%; overflow: hidden; }
.kc-window__art { inset: 0; width: 100%; height: 100%; }
/* the ledge: one straight beam across the whole wall, centred on the mantel's body, so the window sits on wood, level */
.kc-window__ledge { top: 80%; left: 50%; width: 100vw; max-width: none; height: clamp(2.8rem, 13vw, 4.6rem); object-fit: cover; transform: translate(-50%, -50%); }
/* lanterns rising behind the window frame, out of the hills; each rides a full-window track so translateY is in window units */
.kc-window__lamp { position: absolute; inset: 0; opacity: 0; animation: kc-window-lamp var(--d, 18s) linear var(--t, 0s) infinite; animation-play-state: var(--loop-state, paused); will-change: transform, opacity; }
.kc-window__lamp img { position: absolute; bottom: 30%; left: var(--x); width: var(--w); height: auto; filter: drop-shadow(0 0 .35rem rgba(255,196,110,.75)); }
.kc-window__lamp:nth-child(1) { --x: 16%; --w: 13%; --d: 19s; --t: -3s; }
.kc-window__lamp:nth-child(2) { --x: 62%; --w: 10%; --d: 23s; --t: -11s; }
.kc-window__lamp:nth-child(3) { --x: 38%; --w: 16%; --d: 17s; --t: -8s; }
.kc-window__lamp:nth-child(4) { --x: 78%; --w: 8%; --d: 26s; --t: -19s; }
.kc-window__lamp:nth-child(5) { --x: 6%; --w: 7%; --d: 29s; --t: -24s; }
@keyframes kc-window-lamp { 0% { transform: translate3d(0, 6%, 0); opacity: 0; } 10% { opacity: .95; } 82% { opacity: .9; } 100% { transform: translate3d(2%, -78%, 0); opacity: 0; } }
.kc-clock { position: relative; z-index: 1; aspect-ratio: 1000 / 640; margin-top: -10.5%; }
.kc-clock__art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* each tile covers its pane (36.9%-78.1%) and the label groove under it (80%-90.3%), in the clock's own coordinates */
.kc-countdown { position: absolute; inset: 0; margin: 0; padding: 0; }
.kc-countdown .kc-countdown__tile { padding: 0; background: none; }
.kc-countdown__tile { position: absolute; top: 36.875%; height: 53.4%; width: 17.4%; display: grid; grid-template-rows: 77.2% 1fr; justify-items: center; align-items: center; min-width: 0; text-align: center; }
.kc-countdown__tile--days { left: 7.4%; } .kc-countdown__tile--hours { left: 30%; } .kc-countdown__tile--minutes { left: 52.6%; } .kc-countdown__tile--seconds { left: 75.2%; }
.kc-countdown dd { grid-row: 1; margin: 0; color: var(--p-umber); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.7rem, 8.4vw, 3.4rem); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; line-height: 1; text-shadow: 0 1px 0 rgba(255,250,235,.7); }
.kc-countdown dt { grid-row: 2; color: #fbefd2; font-size: clamp(.74rem, 3.2vw, 1.1rem); letter-spacing: .04em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px rgba(18,9,5,.9); }
/* spots: the entrance along the window's beam (off the left edge), the mantel top (curtains at its ends), the clock's top edge,
   the sills of two panes (he blends into the glass), the pot */
.kc-guide-spot[data-guide-spot="ledge-in"] { top: 73.5%; left: -14%; }
.kc-guide-spot { position: absolute; display: block; width: 0; height: 0; }
.kc-guide-spot[data-guide-spot="behind-curtain-l"] { --guide-tone: #7d1f33; top: 73.5%; left: 31.5%; }
.kc-guide-spot[data-guide-spot="beam-1-start"] { top: 73.5%; left: 41%; }
.kc-guide-spot[data-guide-spot="beam-1-end"] { top: 73.5%; left: 59%; }
.kc-guide-spot[data-guide-spot="behind-curtain-r"] { --guide-tone: #7d1f33; top: 73.5%; left: 70.4%; }
.kc-guide-spot[data-guide-spot="beam-2-start"] { top: 29.7%; left: 10%; }
.kc-guide-spot[data-guide-spot="beam-2-end"] { top: 29.7%; left: 40%; }
.kc-guide-spot[data-guide-spot="clock-top"] { top: 29.7%; left: 63%; }
.kc-guide-spot[data-guide-spot="pane-days"] { --guide-tone: #d29a38; top: 78.2%; left: 16.1%; }
.kc-guide-spot[data-guide-spot="pane-seconds"] { --guide-tone: #8fb14e; top: 78.2%; left: 83.9%; }
.kc-guide-spot[data-guide-spot="pot"] { top: 29.7%; left: 90%; }
/* the pot stands on the clock's top edge, at its right end (clear of the rope at 75%) */
.kc-pot { position: absolute; z-index: 2; left: 83.5%; bottom: 70.3%; width: 13%; height: auto; aspect-ratio: 104 / 112; overflow: visible; }

/* Parents: a small carved plaque, not a repeated information card. */
.kc-parents { padding-block: clamp(1rem, 3vw, 2rem) 4rem; }
.kc-plaque { position: relative; display: grid; max-width: 49rem; min-height: 13rem; justify-items: center; align-content: center; gap: .65rem; padding: 2.5rem clamp(2rem, 8vw, 6rem) 3.3rem; border: .35rem double #795033; background: radial-gradient(ellipse at 50% 0, rgba(255,241,201,.9), transparent 55%), linear-gradient(165deg, #e3bc83, #c8945c 58%, #b68658); box-shadow: inset 0 0 1.5rem rgba(74,47,30,.17), 0 .5rem 1.2rem rgba(64,42,25,.12); clip-path: polygon(4% 0, 96% 0, 100% 10%, 99% 89%, 95% 100%, 5% 100%, 0 89%, 1% 9%); }
.kc-plaque h2 { max-width: none; margin: 0; color: var(--ink); font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.kc-plaque .kc-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem clamp(1.2rem, 4vw, 3rem); margin: .25rem 0 0; padding: 0; list-style: none; }
.kc-plaque .kc-list li { color: var(--ink); font-size: clamp(1.5rem, 4vw, 2.3rem); }
.kc-plaque__sun { position: absolute; top: 1rem; width: 2.25rem; height: 2.25rem; color: #8a5624; }
.kc-plaque__sun:first-of-type { left: 1rem; }
.kc-plaque__sun:nth-of-type(2) { right: 1rem; }
.kc-braid-mark { position: absolute; bottom: 1rem; width: min(11rem, 46%); height: .8rem; background-image: var(--kc-braid-paint); background-position: center; background-repeat: repeat-x; background-size: 2rem 3rem; }

/* Locations: overlapping paper postals on the peach dusk wall. */
.kc-locations { color: var(--ink); }
.kc-locations h2, .kc-itinerary h2 { color: #3a2719; }
.kc-locations::before, .kc-itinerary::before, .kc-dress::before, .kc-gallery-scene::before { position: absolute; z-index: 0; inset: -.7rem 0; pointer-events: none; content: ""; clip-path: polygon(0 2%, 5% 1%, 10% 2%, 17% 1%, 25% 2%, 33% 1%, 42% 2%, 51% 1%, 61% 2%, 70% 1%, 79% 2%, 88% 1%, 95% 2%, 100% 1%, 100% 98%, 94% 97%, 86% 99%, 77% 97%, 67% 99%, 57% 97%, 48% 99%, 38% 97%, 28% 99%, 18% 97%, 9% 99%, 0 97%); }
.kc-locations::before { background: url("../../assets/page/scene-dusk.webp") center top / cover no-repeat; }
.kc-location-deck { position: relative; display: grid; max-width: 62rem; margin: 0 auto; gap: 1.4rem; }
.kc-location { position: relative; width: min(92%, 39rem); padding: .75rem .75rem 1.1rem; background: radial-gradient(ellipse at 15% 0, rgba(255,255,255,.86), transparent 51%), linear-gradient(150deg, #fff1d4, #f2dfbd 62%, #dfc297); box-shadow: .15rem .45rem .8rem rgba(65,43,29,.2), inset 0 0 0 1px rgba(126,82,45,.22); }
.kc-location:first-child { z-index: 2; transform: rotate(-1.6deg); }
.kc-location:nth-child(2) { z-index: 1; justify-self: end; margin-top: -1.2rem; transform: rotate(1.8deg); }
.kc-location__photo { position: relative; height: clamp(11rem, 48vw, 19rem); overflow: hidden; background: linear-gradient(135deg, #e7c593, #9c6757); clip-path: polygon(0 1%, 9% 0, 18% 1.5%, 29% 0, 42% 1.2%, 53% 0, 64% 1.5%, 77% 0, 88% 1.2%, 100% 0, 99% 97%, 90% 100%, 81% 98%, 72% 100%, 60% 98%, 50% 100%, 39% 98%, 27% 100%, 16% 98%, 7% 100%, 0 98%); }
.kc-location__photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.13) saturate(.83) contrast(.96); }
.kc-location:first-child .kc-location__photo img { object-position: center 55%; }
.kc-location__stamp { position: absolute; top: .55rem; right: .6rem; display: grid; width: 4.7rem; height: 4.7rem; place-items: center; border: 1px dashed rgba(86,53,40,.75); border-radius: 50%; color: var(--p-umber-mid); background: radial-gradient(circle, rgba(251,241,216,.92), rgba(226,194,151,.78)); font-size: .78rem; line-height: 1.1; text-align: center; transform: rotate(7deg); }
.kc-location__stamp svg { width: 1.55rem; height: 1.55rem; color: var(--p-sienna); }
.kc-location h3 { margin: .85rem .25rem .1rem; color: var(--p-umber); font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 400; line-height: 1.1; }
.kc-location p { margin: .1rem .25rem .45rem; color: var(--p-umber-mid); }
.kc-map-link { display: inline-flex; min-height: 3rem; align-items: center; margin: .25rem 0 0 .15rem; padding: .45rem 1rem; border: 1px solid rgba(86,53,40,.4); border-radius: 999px; color: var(--p-plum-ink); background: var(--map-link-background); font-size: 1rem; line-height: 1.2; text-decoration: none; box-shadow: inset 0 1px rgba(255,255,255,.72); }
.kc-map-fallback { display: none; }

/* Itinerary: the painted braid descends through a longer dusk wall. */
/* clip: the climbing lantern must never show over the scenes around it (clip keeps sticky working) */
.kc-itinerary { min-height: 130svh; color: var(--ink); overflow: clip; }
.kc-itinerary::before { background: url("../../assets/page/scene-dusk.webp") center top / cover no-repeat; }
/* the dusk wall carries a painted tower beam across its top (≈8% of its width): the scene starts below it, the beam reads as the divider */
.kc-section.kc-locations, .kc-section.kc-itinerary { padding-top: calc(max(8.5vw, 2.6rem) + clamp(2.2rem, 5vw, 3.6rem)); }
.kc-itinerary__track { position: relative; min-height: 101svh; max-width: 44rem; margin-inline: auto; }
/* the braid grows down with the scroll (--hair from page.mjs); its tip carries a soft light */
.kc-itinerary__track::before { position: absolute; top: 1rem; bottom: 1rem; left: 1.15rem; width: 2.3rem; background-image: var(--kc-braid-paint); background-position: center top; background-repeat: repeat-y; background-size: 2.3rem 3.45rem; content: ""; clip-path: inset(0 0 calc((1 - var(--hair, 0)) * 100%) 0); filter: drop-shadow(0 0 .35rem rgba(255,226,160,.55)); }
.kc-itinerary__track .kc-list { position: relative; display: grid; gap: clamp(2.4rem, 7vh, 4.2rem); margin: 0; padding: 1rem 0 2rem 4.5rem; list-style: none; }
.kc-stop { position: relative; isolation: isolate; display: grid; gap: .1rem; color: #3a2719; opacity: 0; transform: translate3d(-.6rem, .8rem, 0); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.25,1), color 450ms ease, text-shadow 450ms ease; }
.kc-stop.is-reached { opacity: 1; transform: none; }
/* a candlelit halo keeps the words readable on the dusk wall */
.kc-stop::after { position: absolute; z-index: -1; inset: -.5rem -1rem -.6rem -1.2rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,206,.62), rgba(255,240,206,.28) 60%, transparent); content: ""; pointer-events: none; }
.kc-stop::before { position: absolute; top: .5rem; left: -3.95rem; width: 1.3rem; height: 1.3rem; border: .22rem solid #8e682f; border-radius: 50%; background: radial-gradient(circle, #e1bd76, #9f793e 64%, #684a2e); content: ""; transition: transform 450ms ease; }
.kc-stop.is-lit { color: var(--ink); text-shadow: 0 0 .65rem rgba(255,228,163,.65); }
.kc-stop.is-lit::before { border-color: #fff0c7; background: radial-gradient(circle, #fff1bd, #f7db8c 47%, #bd8128); transform: scale(1.18); }
.kc-stop span:first-child { order: 2; font: 400 clamp(1rem, 3.2vw, 1.3rem)/1.3 "Cinzel", "Cormorant Garamond", serif; letter-spacing: .08em; text-wrap: balance; }
.kc-stop span:last-child { order: 1; color: #9a6126; font: 400 clamp(2rem, 7vw, 2.6rem)/.95 "Italianno", "Cormorant Garamond", serif; text-shadow: 0 0 .8rem rgba(255,226,160,.7); }
.kc-stop.is-lit span:last-child { color: #7d4a12; }
.kc-rise { position: sticky; z-index: 3; top: 42svh; width: 2.5rem; height: 3.5rem; margin: 0 0 -3.5rem calc(1.05rem); pointer-events: none; }

/* Dress and gallery sit in a lilac evening wash. */
.kc-dress { color: var(--ink); }
.kc-dress::before { background: url("../../assets/page/scene-evening.webp") center top / cover no-repeat; }
.kc-dress h2, .kc-gallery-scene h2 { color: #3b2140; }
.kc-palette { width: min(88vw, 30rem); margin: 0 auto 1.6rem; filter: drop-shadow(0 .6rem .9rem rgba(59,33,64,.35)); }
.kc-palette img { width: 100%; height: auto; transform: rotate(-4deg); }
/* each swatch: the drop on the left, its two lines beside it; the pair sits centred under the palette */
.kc-swatches { display: grid; grid-template-columns: 1fr; gap: 1.4rem; width: fit-content; max-width: 22rem; margin: 0 auto; }
.kc-swatch { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; column-gap: 1rem; min-height: 0; padding: 0; background: none; }
.kc-swatch h3, .kc-swatch p { grid-column: 2; }
.kc-swatch h3 { margin: 0; color: var(--p-plum-ink); font-size: 1.4rem; font-weight: 400; }
.kc-swatch p { margin: .15rem 0 0; color: var(--p-umber); }
.kc-swatch__drop { position: relative; grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; border-radius: 52% 48% 54% 46% / 47% 45% 55% 53%; background: radial-gradient(ellipse at 35% 28%, rgba(255,255,255,.6), transparent 40%), linear-gradient(145deg, #e0c2fe, #c8a2e0 55%, #a96dac); box-shadow: .1rem .14rem .2rem rgba(71,41,75,.25); }
.kc-swatch--family .kc-swatch__drop { width: 2.6rem; height: 2.6rem; border-radius: 47% 53% 58% 42% / 54% 48% 52% 46%; background: radial-gradient(circle at 34% 32%, #f5f1e9, transparent 38%), linear-gradient(120deg, #c8c5c1 0 48%, #805777 51% 100%); transform: rotate(-8deg); }
.kc-swatch--guests .kc-swatch__drop { background: radial-gradient(ellipse at 35% 28%, rgba(255,255,255,.56), transparent 36%), linear-gradient(145deg, #e0c2fe, #c489cd 62%, #8d5798); }
.kc-swatch--guests .kc-swatch__drop::after { position: absolute; top: 48%; left: -18%; width: 138%; height: .35rem; background: repeating-linear-gradient(90deg, rgba(86,53,40,.92) 0 12px, rgba(86,53,40,.56) 12px 16px, transparent 16px 19px); content: ""; transform: rotate(-23deg); }
.kc-gallery-scene::before { background: url("../../assets/page/scene-evening.webp") center bottom / cover no-repeat; }
.kc-gallery { display: flex; gap: 1rem; width: auto; margin-inline: calc(-1 * var(--kc-page-gutter)); padding: 1.1rem var(--kc-page-gutter) 2rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; scrollbar-color: rgba(86,53,40,.5) transparent; scrollbar-width: thin; }
.kc-gallery figure { position: relative; flex: 0 0 min(82vw, 27rem); margin: 0; padding: .85rem .85rem 1.1rem; background: radial-gradient(ellipse at 16% 4%, rgba(255,255,255,.78), transparent 46%), linear-gradient(150deg, #fff0d8, #e8d5bb 62%, #d9bc96); box-shadow: .15rem .4rem .8rem rgba(59,42,45,.2); scroll-snap-align: center; }
.kc-gallery figure:nth-child(2) { transform: rotate(1deg); }
.kc-gallery figure:nth-child(3) { transform: rotate(-.8deg); }
.kc-gallery figure:nth-child(4) { transform: rotate(.6deg); }
.kc-gallery figure:nth-child(-n+2) img { object-position: 50% 12%; }
.kc-gallery figure:nth-child(n+3)::after { position: absolute; z-index: 2; top: .85rem; right: .85rem; left: .85rem; height: clamp(16rem, 62vw, 27rem); background: rgba(210,154,56,.38); clip-path: polygon(0 1%, 10% 0, 21% 1%, 32% 0, 45% 1%, 58% 0, 70% 1%, 82% 0, 92% 1%, 100% 0, 99% 99%, 88% 98%, 78% 100%, 68% 98%, 56% 100%, 44% 98%, 33% 100%, 20% 98%, 9% 100%, 0 98%); content: ""; mix-blend-mode: multiply; pointer-events: none; }
.kc-gallery img { width: 100%; height: clamp(16rem, 62vw, 27rem); object-fit: cover; background: #d9b07a; clip-path: polygon(0 1%, 10% 0, 21% 1%, 32% 0, 45% 1%, 58% 0, 70% 1%, 82% 0, 92% 1%, 100% 0, 99% 99%, 88% 98%, 78% 100%, 68% 98%, 56% 100%, 44% 98%, 33% 100%, 20% 98%, 9% 100%, 0 98%); }
.kc-gallery figure:nth-child(n+3) img { filter: grayscale(1) sepia(.26) contrast(.94); }
.kc-gallery figcaption { padding: .55rem .2rem 0; color: var(--p-umber-mid); font-size: 1.35rem; font-style: italic; text-align: center; }

/* Gifts: one sealed envelope while its little copies rain behind it. */
.kc-gifts { color: var(--ink-inverse); padding-block: clamp(3rem, 7vw, 5rem); }
.kc-gifts .kc-container { position: relative; z-index: 1; }
.kc-gift-rain { position: absolute; z-index: 0; inset: 0; overflow: clip; pointer-events: none; }
/* each <i> is a full-height lane with its envelope at the bottom: translateY(%) of the lane = section height, compositor only */
.kc-gift-rain i { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--s); opacity: .72; transform: translateY(calc(var(--y) - 100%)); animation: kc-envelope-fall var(--t) linear var(--d) infinite; }
.kc-gift-rain i::before { position: absolute; bottom: 0; left: 0; width: 100%; aspect-ratio: 520 / 360; background: url("../../assets/page/prop-seal.webp") 50% 59.4% / 26% auto no-repeat, url("../../assets/page/prop-envelope.webp") center / contain no-repeat; filter: drop-shadow(0 .25rem .3rem rgba(6,3,10,.45)); content: ""; transform: rotate(var(--r)); animation: kc-envelope-sway 2.8s ease-in-out infinite alternate; }
@keyframes kc-envelope-fall { from { transform: translateY(-100%); } to { transform: translateY(8%); } }
@keyframes kc-envelope-sway { from { transform: translateX(-.45rem) rotate(var(--r)); } to { transform: translateX(.45rem) rotate(calc(var(--r) * -1)); } }
.kc-gifts::before { position: absolute; z-index: 0; inset: -.7rem 0 0; background: url("../../assets/page/scene-night.webp") center top / cover no-repeat; clip-path: polygon(0 1.2%, 8% .4%, 17% 1.4%, 26% .3%, 35% 1.1%, 45% .4%, 55% 1.4%, 65% .3%, 74% 1.2%, 83% .4%, 92% 1.3%, 100% .4%, 100% 100%, 0 100%); content: ""; pointer-events: none; }
.kc-gifts h2, .kc-rsvp h2, .kc-footer h2 { color: var(--p-honey-light); }
.kc-gift-list { display: grid; grid-template-columns: minmax(0, 1fr); max-width: min(72vw, 21rem); margin: 0 auto; padding: 1rem 0 0; list-style: none; }
.kc-gift { position: relative; display: grid; aspect-ratio: 520 / 360; align-content: end; justify-items: center; padding: 0 .4rem .7rem; color: var(--p-umber); text-align: center; background: url("../../assets/page/prop-envelope.webp") center / contain no-repeat; filter: drop-shadow(0 .5rem .7rem rgba(6,3,10,.5)); transition: transform 900ms cubic-bezier(.2,.72,.28,1), opacity 700ms ease; animation: kc-gift-levitate 4.6s ease-in-out infinite alternate; }
/* the envelope floats like the lanterns: translate is its own property, so the reveal transform stays free */
@keyframes kc-gift-levitate { from { translate: 0 .15rem; filter: drop-shadow(0 .5rem .7rem rgba(6,3,10,.5)); } to { translate: 0 -.55rem; filter: drop-shadow(0 1.1rem 1rem rgba(6,3,10,.32)); } }
.kc-gift:first-child { transform: rotate(-1deg); }
/* the reveal clip ends at the envelope's edge; open it wide so the label hanging below stays visible */
body.has-page-reveal .kc-gift[data-reveal].is-revealed { clip-path: polygon(-20% -20%, 120% -20%, 120% 160%, -20% 160%); }
.kc-gift__seal { position: absolute; z-index: 3; top: 59.4%; left: 50%; width: 26%; aspect-ratio: 1; background: url("../../assets/page/prop-seal.webp") center / contain no-repeat; transform: translate(-50%, -50%) rotate(-8deg); }
.kc-gift__seal use { display: none; } /* the seal is the painted wax, not the line sun */
.kc-gift__label { position: absolute; top: 100%; left: 0; right: 0; margin-top: .55rem; color: var(--ink-inverse); font-size: 1.25rem; text-shadow: 0 1px 3px rgba(8,4,14,.9); }
.kc-gift-list { padding-bottom: 2.4rem; }
/* a soft night halo keeps the words readable while paper envelopes fall behind them */
.kc-gift__note { max-width: 22rem; margin: 1.2rem auto 0; padding: .9rem 1.4rem; color: var(--ink-inverse); font-size: 1.35rem; font-style: italic; line-height: 1.3; text-align: center; text-wrap: balance; text-shadow: 0 1px 3px rgba(8,4,14,.9); background: radial-gradient(closest-side, rgba(16,8,26,.82), rgba(16,8,26,.6) 70%, transparent); }

/* RSVP: a plum lantern night around a readable paper letter. */
.kc-rsvp { position: relative; overflow: hidden; color: var(--ink-inverse); padding-block: clamp(4rem, 10vw, 8rem); }
.kc-rsvp::before { position: absolute; z-index: 0; inset: 0; background: url("../../assets/page/scene-night.webp") center 30% / cover no-repeat; content: ""; pointer-events: none; }
.kc-rsvp__content { position: relative; z-index: 1; }
.kc-rsvp h2 { max-width: 19ch; }
.kc-rsvp #rsvp-setup-state, .kc-rsvp #rsvp-status, .kc-rsvp #rsvp-error { max-width: 44rem; margin: .6rem auto; color: var(--ink-inverse); text-align: center; }
.kc-rsvp #rsvp-error { color: #ffd0b7; }
/* before a personal invitation opens the form, the notice itself is written on the acceptance letter */
.kc-rsvp #rsvp-setup-state:not(:empty) { max-width: 30rem; padding: 2.4rem 2rem 2.2rem; color: var(--p-umber); font-size: 1.2rem; font-style: italic; background: url("../../assets/page/prop-letter.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 .8rem 1.2rem rgba(8,4,14,.45)); }
.kc-rsvp form { max-width: 44rem; margin: 1.4rem auto 0; padding: clamp(1.6rem, 6vw, 3.4rem) clamp(1.3rem, 5.5vw, 3.2rem); color: var(--ink); background: url("../../assets/page/prop-letter.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 .9rem 1.4rem rgba(8,4,14,.45)); }
.kc-rsvp #rsvp-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.kc-rsvp .kc-field { gap: .35rem; margin: 0 0 1.2rem; }
.kc-rsvp .kc-field label, .kc-rsvp .kc-fieldset legend { color: var(--p-umber); font-size: 1.12rem; }
.kc-rsvp .kc-field input, .kc-rsvp .kc-field select, .kc-rsvp .kc-field textarea { min-height: 3rem; border: 1px solid rgba(86,53,40,.6); border-radius: .25rem; color: var(--p-umber); background: var(--field-paper); font: 16px/1.4 system-ui, sans-serif; }
.kc-rsvp .kc-fieldset { display: grid; gap: .7rem; margin: .2rem 0 1.2rem; padding: .7rem 0 0; border: 0; }
.kc-rsvp .kc-fieldset legend { margin-bottom: .45rem; }
.kc-rsvp .kc-fieldset label { position: relative; display: flex; min-height: 3.25rem; align-items: center; gap: .8rem; padding: .55rem .85rem; border: 1px solid rgba(86,53,40,.43); background: linear-gradient(145deg, rgba(255,248,231,.82), rgba(229,207,171,.68)); cursor: pointer; }
.kc-rsvp .kc-fieldset label:has(input:checked) { border-color: #a8721f; background: linear-gradient(145deg, #fff0c7, #e7c580); box-shadow: inset .25rem 0 #a8721f; }
.kc-rsvp .kc-fieldset input { width: 1.3rem; height: 1.3rem; min-height: 1.3rem; accent-color: #8a5922; }
.kc-rsvp .kc-fieldset input:focus-visible { outline: 3px solid var(--p-plum-ink); outline-offset: 3px; }
.kc-rsvp #rsvp-submit, .kc-rsvp #rsvp-update { min-height: 3rem; }
.kc-rsvp .kc-rsvp-hint { margin: .2rem 0 0; color: var(--p-umber-mid); font-size: 1.05rem; font-style: italic; line-height: 1.4; text-align: center; text-wrap: balance; }

/* KC-RSVP eyebrow: the house mark, a painted star instead of an emoji. */
.kc-rsvp .kc-rsvp-eyebrow { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 auto .6rem; color: var(--p-honey-light); font: 600 .82rem/1 "Cinzel", "Cormorant Garamond", serif; letter-spacing: .32em; text-shadow: 0 1px 3px rgba(8,4,14,.85); }
.kc-rsvp-star { width: 1.35rem; height: 1.35rem; overflow: visible; }
.kc-rsvp-star__halo { fill: none; stroke: rgba(247,219,140,.55); stroke-width: 6; filter: blur(2.5px); }
.kc-rsvp-star__face { fill: url(#kc-star-honey); stroke: #a8721f; stroke-width: 1.4; stroke-linejoin: round; }
.kc-rsvp-star__glint { stroke: #fffaf0; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }

/* The reservation plaque: who the lanterns are lit for, outside the yes/no letter. */
/* open, no frame: a pool of night under the lanterns holds the words */
.kc-reservation { display: grid; justify-items: center; gap: .15rem; max-width: 28rem; margin: 0 auto 1.4rem; padding: 1.3rem 1.6rem 1.4rem; text-align: center; background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(18,10,26,.78), rgba(18,10,26,.45) 55%, transparent 100%); }
.kc-reservation p { text-shadow: 0 1px 2px rgba(8,4,14,.9), 0 0 1.1rem rgba(8,4,14,.75); }
.kc-reservation .kc-reservation__eyebrow { margin: 0; color: rgba(251,241,216,.72); font: .72rem/1.4 "Cinzel", serif; letter-spacing: .26em; text-transform: uppercase; }
.kc-reservation .kc-reservation__name { margin: .2rem 0 0; color: var(--p-name-cream); font: 400 clamp(1.75rem, 7vw, 2.2rem)/1.15 "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; text-wrap: balance; }
.kc-reservation .kc-reservation__passes { margin: .25rem 0 0; color: var(--p-honey-light); font: .78rem/1.4 "Cinzel", serif; letter-spacing: .2em; }
.kc-reservation .kc-reservation__deadline { margin: .7rem 0 0; padding-top: .7rem; background: linear-gradient(90deg, transparent, rgba(247,219,140,.5), transparent) top center / 60% 1px no-repeat; color: var(--ink-inverse); font-size: 1.05rem; font-style: italic; }

/* The pass: a lit tower window that fits in a pocket. */
.kc-ticket-result { display: grid; justify-items: center; margin-top: 2rem; }
.kc-pass { position: relative; display: grid; justify-items: center; width: min(100%, 22.5rem); padding: 1.6rem 1.4rem 0; overflow: hidden; border-radius: 11.25rem 11.25rem 1rem 1rem; color: var(--ink-inverse); text-align: center; background: radial-gradient(ellipse 70% 38% at 50% 0, rgba(247,219,140,.32), transparent 70%), var(--ticket-paper); box-shadow: inset 0 0 0 .32rem #1a1024, inset 0 0 0 .42rem #d29a38, inset 0 0 0 .62rem #1a1024, inset 0 0 0 .68rem rgba(247,219,140,.55), 0 1rem 2.2rem rgba(7,4,12,.5); }
.kc-pass .kc-pass__glow { position: absolute; z-index: 0; top: -3rem; left: 50%; width: 15rem; height: 11rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,228,163,.42), transparent); transform: translateX(-50%); pointer-events: none; }
.kc-pass > * { position: relative; z-index: 1; }
.kc-pass .kc-pass__crest { width: 4.6rem; height: 4.6rem; margin-top: .5rem; filter: drop-shadow(0 0 .9rem rgba(255,214,140,.55)); }
.kc-pass .kc-pass__eyebrow { margin: .55rem 0 0; color: rgba(251,241,216,.75); font: .7rem/1.3 "Cinzel", serif; letter-spacing: .3em; text-transform: uppercase; }
.kc-pass .kc-pass__name { margin: .1rem 0 0; color: var(--p-honey-light); font: 400 2.6rem/1 "Tangled ES", "Cormorant Garamond", serif; text-shadow: 0 0 1rem rgba(247,219,140,.35); }
.kc-pass .kc-pass__event { margin: .2rem 0 0; color: var(--p-lavender); font: .82rem/1.3 "Cinzel", serif; letter-spacing: .24em; }
.kc-pass__braid { width: 9rem; height: .7rem; margin: .8rem 0 .5rem; background-image: var(--kc-braid-paint); background-position: center; background-repeat: repeat-x; background-size: 1.8rem 2.7rem; }
.kc-pass .kc-pass__label { margin: 0; color: rgba(251,241,216,.66); font: .66rem/1.3 "Cinzel", serif; letter-spacing: .26em; text-transform: uppercase; }
.kc-pass .kc-pass__guest { margin: .25rem 0 0; color: var(--p-name-cream); font: 1.2rem/1.25 "Cinzel", serif; letter-spacing: .06em; text-wrap: balance; }
.kc-pass .kc-pass__count { margin: .1rem 0 0; color: var(--p-honey-light); font: 400 1.9rem/1.1 "Italianno", "Cormorant Garamond", serif; }
.kc-pass .kc-pass__facts { display: grid; gap: .05rem; margin: .35rem 0 0; color: rgba(251,241,216,.82); font: .7rem/1.5 "Cinzel", serif; letter-spacing: .14em; }
.kc-pass__window { position: relative; width: 11.5rem; aspect-ratio: 1; margin: 1rem 0 .2rem; padding: .7rem; border-radius: .35rem; background: #f5e6d1; box-shadow: 0 0 0 1px #a8721f, 0 0 1.4rem rgba(255,214,140,.25); }
/* gold corner ticks, like the frame of the tower window */
.kc-pass__window::before { --t: linear-gradient(#d29a38, #d29a38); position: absolute; inset: -.45rem; content: ""; pointer-events: none; background: var(--t) 0 0 / 1.5rem 2px, var(--t) 0 0 / 2px 1.5rem, var(--t) 100% 0 / 1.5rem 2px, var(--t) 100% 0 / 2px 1.5rem, var(--t) 0 100% / 1.5rem 2px, var(--t) 0 100% / 2px 1.5rem, var(--t) 100% 100% / 1.5rem 2px, var(--t) 100% 100% / 2px 1.5rem; background-repeat: no-repeat; }
.kc-pass__window img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kc-pass__stub { position: relative; width: calc(100% + 2.8rem); margin-top: 1.1rem; padding: 1rem 1.4rem 1.3rem; border-top: 2px dashed rgba(247,219,140,.38); background: rgba(10,6,16,.35); }
.kc-pass__stub::before, .kc-pass__stub::after { position: absolute; top: -.75rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #120a19; content: ""; }
.kc-pass__stub::before { left: -.7rem; } .kc-pass__stub::after { right: -.7rem; }
.kc-pass__stub p { margin: 0; color: rgba(251,241,216,.82); font-size: 1rem; font-style: italic; }
.kc-pass__stub .kc-pass__id { margin-top: .25rem; color: var(--p-honey-light); font: .66rem/1.3 "Cinzel", serif; font-style: normal; letter-spacing: .3em; }
/* capture mode: the PNG keeps the frame (inset shadows) and drops outer glows that rasterise as grey smears */
.kc-pass.is-capturing { box-shadow: inset 0 0 0 .32rem #1a1024, inset 0 0 0 .42rem #d29a38, inset 0 0 0 .62rem #1a1024, inset 0 0 0 .68rem rgba(247,219,140,.55); }
.kc-pass.is-capturing .kc-pass__window { box-shadow: 0 0 0 1px #a8721f; }
.kc-pass.is-capturing .kc-pass__crest, .kc-pass.is-capturing .kc-pass__name { filter: none; text-shadow: none; }
.kc-rsvp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.4rem; }
.kc-rsvp-actions:not(:has(button:not([hidden]))) { display: none; }
.kc-content .kc-button--ghost { color: var(--p-honey-light); background: transparent; box-shadow: inset 0 0 0 1px rgba(247,219,140,.6); }

/* Footer: a short rest below the tower lights. */
.kc-footer { position: relative; overflow: hidden; min-height: min(68vw, 23rem); padding: 2rem var(--kc-page-gutter) 1.2rem; border: 0; color: var(--ink-inverse); text-align: center; background: url("../../assets/page/scene-footer.webp") center bottom / cover no-repeat, #120a19; display: grid; align-content: end; }
.kc-footer__inner p, .kc-footer__inner a { text-shadow: 0 1px 3px rgba(8,4,14,.95), 0 0 14px rgba(8,4,14,.8); }
.kc-footer__mark { display: flex; align-items: center; gap: .4rem; margin: 0 auto .6rem; color: var(--p-honey-light); font-size: .95rem; letter-spacing: .18em; }
.kc-footer__mark svg { width: 1.2rem; height: 1.2rem; }
.kc-inline-sun { display: inline-block; width: 1.25em; height: 1.25em; margin: 0 .08em; vertical-align: -.28em; filter: drop-shadow(0 0 .35rem rgba(255,214,140,.55)); }
.kc-footer__inner { display: grid; justify-items: center; gap: .3rem; max-width: 50rem; }
.kc-footer .kc-footer__inner p { font-size: 1.02rem; line-height: 1.4; }
.kc-footer .kc-footer__inner a { font-size: 1rem; }
/* the last lanterns: the invitation's own sun lantern, lifting off the hill and breathing light */
.kc-footer__sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.kc-footer__lantern { position: absolute; bottom: 18%; left: var(--x); width: var(--s); aspect-ratio: 400 / 497; background: url("../../assets/gate/lantern-s.webp") center / contain no-repeat; filter: drop-shadow(0 0 .55rem rgba(255,205,120,.75)); opacity: 0; animation: kc-lantern-lift var(--t) linear var(--d) infinite, kc-lantern-breathe 2.6s ease-in-out var(--d) infinite alternate; }
.kc-footer__lantern::before { position: absolute; inset: -70% -60%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,140,.38), transparent); content: ""; }
@keyframes kc-lantern-lift { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-3deg); } 12% { opacity: .95; } 50% { transform: translate3d(.6rem, -9rem, 0) rotate(3deg); } 85% { opacity: .8; } 100% { opacity: 0; transform: translate3d(-.3rem, -18rem, 0) rotate(-2deg); } }
@keyframes kc-lantern-breathe { from { filter: drop-shadow(0 0 .4rem rgba(255,205,120,.6)); } to { filter: drop-shadow(0 0 .9rem rgba(255,214,140,.95)); } }
.kc-footer__mark, .kc-footer__inner { position: relative; z-index: 1; }
.kc-footer__inner p { margin: 0; color: var(--ink-inverse); }
.kc-footer__inner a { display: inline-flex; min-height: 3rem; align-items: center; gap: .5rem; color: var(--p-honey-light); text-decoration: none; }
.kc-footer__peek { position: absolute; right: 12%; bottom: 1.5rem; width: 2rem; height: 2rem; }
.footer-reveal { opacity: 1; transform: none; transition: opacity 240ms ease, transform 240ms ease; }
.footer-reveal.is-reveal-pending { opacity: 0; transform: translateY(.5rem); }
.footer-reveal.appeared { opacity: 1; transform: none; }
.kc-instagram-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

/* Music: Azula's sun seal is the switch. It turns slowly while the song plays. */
.kc-music-control { width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; -webkit-tap-highlight-color: transparent; }
.kc-music-control:focus-visible { outline: 2px solid var(--p-honey-light); outline-offset: 3px; }
.kc-music-control__sun { width: 100%; height: 100%; filter: drop-shadow(0 .12rem .12rem rgba(60,30,8,.55)) drop-shadow(0 .35rem .6rem rgba(21,12,26,.5)) saturate(.85) brightness(.94); transition: filter 600ms ease; }
.kc-music-control[data-kc-state="playing"] .kc-music-control__sun { filter: drop-shadow(0 .12rem .12rem rgba(60,30,8,.5)) drop-shadow(0 0 .8rem rgba(255,214,140,.6)) drop-shadow(0 .35rem .6rem rgba(21,12,26,.45)); animation: kc-sun-turn 28s linear infinite; }
@keyframes kc-sun-turn { to { transform: rotate(1turn); } }
.kc-music-toast { position: fixed; z-index: 50; inset-inline-end: calc(max(1rem, env(safe-area-inset-right)) + 4.2rem); inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + .55rem); max-width: min(15rem, calc(100vw - 7rem)); margin: 0; padding: .55rem .9rem; border: 1px solid rgba(247,219,140,.45); border-radius: 1rem 1rem .2rem 1rem; color: var(--ink-inverse); font: italic 1rem/1.3 "Cormorant Garamond", Georgia, serif; background: rgba(26,16,36,.9); box-shadow: 0 .5rem 1.2rem rgba(7,4,12,.45); opacity: 0; transform: translateY(.4rem); transition: opacity 450ms ease, transform 450ms ease; pointer-events: none; }
.kc-music-toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 430px) {
  .kc-section { padding-block: 3.5rem; }
  /* the tower scenes sit close: letter, window and plaque follow each other down one wall */
  .kc-dedication { padding-block: 1.25rem .75rem; }
  .kc-counter { padding-block: .75rem .5rem; }
  .kc-parents { padding-block: .75rem 3rem; }
  .kc-letter { padding: 3rem 1.45rem 2.7rem; }
  .kc-gallery { scroll-padding-inline: var(--kc-page-gutter); }
  .kc-gallery figure { flex-basis: 82vw; }
  .kc-gift { min-height: 8.3rem; padding-inline: .3rem; }
  .kc-rsvp form { padding: 1.25rem 1rem; }
}

@media (max-width: 430px) and (orientation: landscape) {
}

@media (min-width: 768px) {
  .kc-container { width: min(100% - 2 * var(--kc-page-gutter), 72rem); }
  .kc-shelf { --guide-walk-w: 112px; }
  .kc-countdown dd { font-size: 3.4rem; }
  .kc-countdown dt { font-size: 1.1rem; }
  .kc-plaque { min-height: 15rem; }
  .kc-location-deck { grid-template-columns: 1.08fr .92fr; align-items: start; gap: 0; }
  .kc-location { width: min(100%, 37rem); }
  .kc-location:nth-child(2) { width: min(100%, 33rem); margin-top: 4rem; margin-left: -2.3rem; }
  .kc-itinerary__track { min-height: 108svh; }
  .kc-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); max-width: 40rem; }
  .kc-gallery { scroll-snap-type: x mandatory; }
  .kc-gallery figure { flex-basis: min(36vw, 28rem); }
}

@media (prefers-reduced-motion: reduce) {
  body.has-page-reveal [data-reveal], body.has-page-reveal [data-reveal].is-revealed { opacity: 1; clip-path: none; transition: none; }
  .kc-gift__flap { transition: none; }
  /* the rain holds still, scattered where each envelope was caught */
  .kc-gift-rain i, .kc-gift-rain i::before, .kc-gift, .kc-music-control__sun, .kc-footer__lantern { animation: none !important; }
  .kc-footer__lantern { opacity: .9; transform: translate3d(0, var(--rest, -6rem), 0); }
  .kc-stop { opacity: 1; transform: none; }
  /* the lanterns hold still mid-climb */
  .kc-content .kc-window__lamp { animation: none !important; opacity: .9; transform: translate3d(0, var(--rest, -30%), 0); }
  .kc-window__lamp:nth-child(2) { --rest: -52%; } .kc-window__lamp:nth-child(3) { --rest: -14%; } .kc-window__lamp:nth-child(4) { --rest: -64%; } .kc-window__lamp:nth-child(5) { --rest: -40%; }
  .kc-content *,.kc-content *::before, .kc-content *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Guide: the lantern keeps its rise inside the existing braid track. */
/* the lantern rises in the open wall to the right of the stops, not over the braid */
.kc-rise { width: clamp(6rem, 30vw, 7.5rem); height: 18rem; margin: 0 4% -18rem auto; }
.kc-rise__flight { position: absolute; top: 0; left: 0; width: 100%; height: 18rem; pointer-events: none; }
.kc-rise__glow, .kc-rise__lantern, .kc-rise__string, .kc-rise__guide { position: absolute; }
.kc-rise__glow { z-index: 0; top: -.5rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 225, 156, .52), rgba(247, 219, 140, .18) 42%, transparent 72%); pointer-events: none; }
.kc-rise__string { z-index: 1; top: 0; left: 0; overflow: visible; pointer-events: none; }
.kc-rise__lantern { z-index: 2; top: 0; left: 50%; height: auto; transform: translateX(-50%); }
.kc-rise__guide { z-index: 3; pointer-events: none; }
/* phone: eight stops with long names, so the words keep their own lane and the lantern climbs in the gutter beside them */
@media (max-width: 430px) {
  .kc-rise { margin-right: -.6rem; }
  .kc-itinerary__track .kc-list { padding-right: 6.6rem; }
  .kc-stop span:first-child { font-size: 1.3rem; line-height: 1.2; }
}
.kc-footer__peek { overflow: hidden; pointer-events: none; }