/* DettoSì — pagine matrimonio statiche.
 *
 * Questo file è la somma di tre parti, in quest'ordine:
 *   1. il preambolo qui sotto: font self-hosted, token e reset minimo;
 *   2. shopify-theme/assets/demo.css, copiato senza modifiche — è la fonte
 *      visiva approvata, e riscriverla significherebbe ridisegnare le pagine;
 *   3. un'appendice per i pochi elementi che le demo non avevano.
 *
 * I font sono locali: nessuna richiesta a Google Fonts o alla CDN Shopify, in
 * fase di build o di visita. Tutti i percorsi sono relativi alla cartella del
 * matrimonio, così la pagina funziona sotto pagine.dettosi.it/<slug>/.
 */

/* ---------- Font ---------- */

@font-face {
  font-family: 'Kalnia';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('./fonts/kalnia-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kalnia';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('./fonts/kalnia-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Token ---------- */

:root {
  --font-display--family: 'Kalnia', Georgia, 'Times New Roman', serif;
  --font-body--family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight--semibold: 600;

  --color-surface: #fffdf9;
  --color-foreground: #171513;

  --text-sm: 0.875rem;
  --radius-sm: 6px;
  --space-2xs: 0.5rem;
  --space-sm: 1rem;
}

/* ---------- Reset ---------- */

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body--family);
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  font: inherit;
}

p,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

.skip-to-content {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-surface);
  color: var(--color-foreground);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight--semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-sm) * 2));
}

.skip-to-content:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
 * Da qui in avanti: copia integrale di shopify-theme/assets/demo.css,
 * la fonte visiva approvata. Non modificare a mano: rigenerare con
 * `npm run build:css`.
 * ================================================================== */

/* DettoSì — demo wedding pages.
 *
 * One stylesheet, three worlds. Every component is written once against a set
 * of role variables; .demo--carta, .demo--scena and .demo--luce redefine those
 * roles and, where the composition genuinely differs, override the grid. That
 * is what makes the three demos look unrelated without triplicating the CSS.
 *
 * Fonts and the brand palette come from snippets/css-variables.liquid, which
 * the layout already loads. Nothing here re-declares a font.
 */

/* ---------- Roles ---------- */

.demo {
  --d-page: #f4efe6;
  --d-surface: #fffdf9;
  --d-ink: #171513;
  --d-accent: #171513;
  --d-on-accent: #fffdf9;
  --d-muted: color-mix(in oklab, #171513 62%, #f4efe6);
  --d-line: color-mix(in oklab, #171513 18%, #f4efe6);

  --d-radius: 16px;
  --d-radius-lg: 24px;
  --d-cta-radius: 8px;

  --d-gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  --d-pad: clamp(1.25rem, 0.75rem + 2.5vw, 4rem);

  background-color: var(--d-page);
  color: var(--d-ink);
  font-family: var(--font-body--family);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

.demo ::selection {
  background-color: color-mix(in oklab, var(--d-accent) 22%, transparent);
  color: var(--d-ink);
}

.demo :focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.demo--scena {
  --d-accent: #3155ff;
  --d-on-accent: #fffdf9;
  --d-line: color-mix(in oklab, #171513 22%, #f4efe6);
  --d-radius: 20px;
  --d-radius-lg: 24px;
  --d-cta-radius: 999px;
}

.demo--luce {
  --d-page: #fffdf9;
  --d-surface: #fffdf9;
  --d-accent: #f2b7c6;
  --d-on-accent: #171513;
  --d-muted: color-mix(in oklab, #171513 55%, #fffdf9);
  --d-line: color-mix(in oklab, #f2b7c6 70%, #fffdf9);
  --d-radius: 28px;
  --d-radius-lg: 32px;
  --d-cta-radius: 999px;
}

/* ---------- Shell ---------- */

.demo-shell {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--d-pad);
}

.demo-main > section {
  padding-block: var(--d-gap);
}

.demo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.demo h1,
.demo h2,
.demo h3 {
  font-family: var(--font-display--family);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

.demo p,
.demo blockquote,
.demo ol {
  margin: 0;
}

.demo-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin-block-end: 1rem;
}

/* ---------- Shared action ---------- */

.demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--d-accent);
  border-radius: var(--d-cta-radius);
  background-color: var(--d-accent);
  color: var(--d-on-accent);
  font-family: var(--font-body--family);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.demo-cta--secondary {
  background-color: transparent;
  border-color: currentcolor;
  color: inherit;
}

.demo-cta:hover {
  background-color: color-mix(in oklab, var(--d-accent) 82%, var(--d-ink));
  border-color: color-mix(in oklab, var(--d-accent) 82%, var(--d-ink));
  color: var(--d-on-accent);
}

.demo-cta--secondary:hover {
  background-color: color-mix(in oklab, currentcolor 12%, transparent);
  border-color: currentcolor;
  color: inherit;
}

/* ---------- Header ---------- */

.demo-header {
  position: relative;
  z-index: 2;
  background-color: var(--d-page);
}

.demo-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--d-line);
}

.demo-header__couple {
  flex: 1 1 auto;
  font-family: var(--font-display--family);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Mobile carries the masters' "Menu" control, but as a real disclosure rather
   than a label with nothing behind it. No JavaScript: <summary> is already a
   button that reports its own expanded state. */
.demo-menu {
  order: 3;
  flex-basis: 100%;
}

.demo-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-menu__button::-webkit-details-marker {
  display: none;
}

.demo-menu__icon {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
}

.demo-menu__icon::before,
.demo-menu__icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1.5px;
  background-color: currentcolor;
}

.demo-menu__icon::after {
  rotate: 90deg;
  transition: rotate 180ms ease;
}

.demo-menu[open] .demo-menu__icon::after {
  rotate: 0deg;
}

.demo-header__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.5rem 0.25rem;
}

.demo-header__link {
  padding-block: 0.5rem;
}

.demo-header__link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.demo-header__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.demo-header__cta {
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  font-size: 0.875rem;
}

@media (min-width: 62rem) {
  /* The disclosure is open in the markup, so on desktop it is enough to hide
     the button and let the nav lay itself out inline. No script involved. */
  .demo-menu {
    order: 0;
    flex-basis: auto;
  }

  .demo-menu__button {
    display: none;
  }

  .demo-header__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.75rem;
    padding-block: 0;
  }

  .demo-header__link {
    padding-block: 0;
  }
}

.demo--scena .demo-header {
  background-color: var(--d-accent);
  color: var(--d-on-accent);
}

.demo--scena .demo-header__inner {
  border-bottom: 0;
}

.demo--scena .demo-header__couple {
  font-family: var(--font-body--family);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo--scena .demo-header__link {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo--scena .demo-header__cta {
  background-color: var(--d-surface);
  border-color: var(--d-surface);
  color: var(--d-ink);
}

.demo--luce .demo-header__inner {
  border-bottom: 0;
}

/* ---------- Figures ---------- */

.demo-figure {
  margin: 0;
}

.demo-figure__img {
  width: 100%;
  object-fit: cover;
  object-position: var(--demo-focus, 50% 50%);
}

.demo--luce .demo-figure__img {
  border-radius: var(--d-radius-lg);
}

/* ---------- Hero ---------- */

.demo-hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

.demo-hero__names {
  font-size: clamp(3rem, 1.9rem + 7.4vw, 5.75rem);
  line-height: 0.98;
  margin-block: 0 1.5rem;
}

.demo-hero__intro {
  max-width: 34ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--d-muted);
}

.demo-hero__cta {
  margin-block-start: 2rem;
}

.demo-hero__scroll {
  margin-block-start: 2.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.demo-hero__figure .demo-figure__img {
  aspect-ratio: 6 / 7;
}

@media (min-width: 62rem) {
  .demo-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .demo-hero__figure .demo-figure__img {
    aspect-ratio: 5 / 6;
  }
}

/* Scena: full-bleed cobalt panel beside the photo. */
.demo--scena .demo-hero {
  padding-block: 0;
}

.demo--scena .demo-hero__inner {
  gap: 0;
}

.demo--scena .demo-hero__copy {
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--d-pad);
  background-color: var(--d-accent);
  color: var(--d-on-accent);
}

.demo--scena .demo-hero__intro,
.demo--scena .demo-hero__copy .demo-kicker {
  color: color-mix(in oklab, var(--d-on-accent) 86%, var(--d-accent));
}

.demo--scena .demo-hero__names {
  font-size: clamp(3.25rem, 1.9rem + 9vw, 7rem);
}

.demo--scena .demo-hero__cta {
  background-color: var(--d-surface);
  border-color: var(--d-surface);
  color: var(--d-ink);
  border-radius: var(--d-cta-radius);
}

.demo--scena .demo-hero__figure .demo-figure__img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 62rem) {
  .demo--scena .demo-hero__inner {
    grid-template-columns: 45% 55%;
    align-items: stretch;
  }

  .demo--scena .demo-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .demo--scena .demo-hero__figure,
  .demo--scena .demo-hero__figure .demo-figure__img {
    height: 100%;
  }

  .demo--scena .demo-hero__figure .demo-figure__img {
    aspect-ratio: auto;
    min-height: 34rem;
  }
}

/* Luce: centred, with a rose field behind. The hero opens its own stacking
   context so the field can sit behind the content without falling behind the
   page background. */
.demo--luce .demo-hero {
  position: relative;
  z-index: 0;
}

.demo--luce .demo-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* The rose field is the hero: a large disc the names sit across and the
   photograph overlaps, exactly as in master 32:2 / 35:49. */
.demo--luce .demo-hero__field {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  translate: -50% 0;
  width: min(21rem, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #f2b7c6;
  z-index: -1;
}

.demo--luce .demo-hero__names {
  font-size: clamp(2.75rem, 1.2rem + 8vw, 8.25rem);
  line-height: 0.95;
  margin-block: 0.5rem 1rem;
  max-width: none;
}

.demo--luce .demo-hero__intro {
  max-width: 62ch;
  margin-block-end: clamp(2rem, 1rem + 4vw, 4rem);
  color: var(--d-ink);
}

/* Mobile keeps the master's capsule; desktop is a full circle. */
.demo--luce .demo-hero__figure {
  width: min(17rem, 72%);
}

.demo--luce .demo-hero__figure .demo-figure__img {
  aspect-ratio: 274 / 358;
  border-radius: 999px;
}

@media (min-width: 62rem) {
  .demo--luce .demo-hero__field {
    top: 4rem;
    width: min(55rem, 62vw);
  }

  .demo--luce .demo-hero__figure {
    width: min(34.5rem, 40vw);
    margin-block-start: -2rem;
  }

  .demo--luce .demo-hero__figure .demo-figure__img {
    aspect-ratio: 1;
    border-radius: 50%;
  }
}

/* The hero CTA lands on the rose disc, where a rose fill would vanish. */
.demo--luce .demo-hero__cta {
  margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--d-ink);
  border-color: var(--d-ink);
  color: #fffdf9;
}

.demo--luce .demo-hero__cta:hover {
  background-color: color-mix(in oklab, var(--d-ink) 86%, #fffdf9);
  border-color: color-mix(in oklab, var(--d-ink) 86%, #fffdf9);
}

.demo--luce .demo-hero__scroll {
  margin-block-start: 1.5rem;
}

/* ---------- Intro ---------- */

.demo-intro__inner {
  display: grid;
  gap: 2rem;
}

.demo-intro__title {
  font-size: clamp(1.875rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.1;
  max-width: 22ch;
}

.demo-intro__text {
  max-width: 46ch;
  color: var(--d-muted);
}

@media (min-width: 62rem) {
  .demo-intro__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
  }
}

/* ---------- Story ---------- */

.demo-story__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}

.demo-story__figure .demo-figure__img {
  aspect-ratio: 4 / 5;
}

.demo-story__title {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.12;
  margin-block-end: 1.5rem;
  max-width: 18ch;
}

.demo-story__text {
  max-width: 48ch;
  color: var(--d-muted);
  margin-block-end: 1.25rem;
}

.demo-story__quote {
  margin-block-start: 2rem;
  padding: 0;
  font-family: var(--font-display--family);
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  color: var(--d-ink);
  max-width: 24ch;
}

@media (min-width: 62rem) {
  .demo-story__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- Numbered sequence (Scena) ---------- */

.demo-numbered__inner {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.demo-numbered__figure {
  font-family: var(--font-display--family);
  font-size: clamp(4rem, 2rem + 12vw, 11.25rem);
  line-height: 0.85;
  color: var(--d-accent);
  letter-spacing: -0.04em;
  /* Two digits at this size are wider than a narrow column: never let them
     break onto two lines. */
  white-space: nowrap;
}

@media (min-width: 62rem) {
  .demo-numbered__inner {
    grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) minmax(0, 0.75fr);
    align-items: start;
    column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  }
}

.demo-slash {
  margin-block-start: clamp(2rem, 1rem + 3vw, 4rem);
  padding: 1.25rem var(--d-pad);
  background-color: var(--d-accent);
  color: var(--d-on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Ticker (Scena) ---------- */

.demo-ticker {
  background-color: var(--d-ink);
  color: var(--d-on-accent);
}

.demo-main > .demo-ticker {
  padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.demo-ticker__text {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--d-pad);
  font-family: var(--font-display--family);
  font-size: clamp(1.0625rem, 0.85rem + 1vw, 1.75rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  overflow-wrap: break-word;
}

/* ---------- Programme ---------- */

.demo-programme__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.demo-programme__title {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.1;
  margin-block-end: 1.25rem;
  max-width: 16ch;
}

.demo-programme__intro {
  max-width: 40ch;
  color: var(--d-muted);
}

.demo-programme__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  min-width: 0;
}

.demo-moment {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  gap: 0.75rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--d-line);
}

.demo-moment:last-child {
  border-bottom: 1px solid var(--d-line);
}

.demo-moment__time {
  font-family: var(--font-display--family);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.demo-moment__title {
  font-family: var(--font-body--family);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-block-end: 0.35rem;
}

.demo-moment__detail {
  font-size: 0.875rem;
  color: var(--d-muted);
  max-width: 42ch;
}

@media (min-width: 62rem) {
  .demo-programme__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(2rem, 1rem + 4vw, 6rem);
    align-items: start;
  }
}

/* Carta gives the programme a paler ground. The desktop master draws each
   moment as a bordered card; the mobile master separates them with a rule.
   Both are honoured at their own width. */
.demo--carta .demo-programme {
  background-color: var(--d-surface);
}

@media (min-width: 62rem) {
  .demo--carta .demo-programme__list {
    gap: 0.75rem;
  }

  .demo--carta .demo-moment {
    padding: 1.25rem;
    border: 1px solid var(--d-line);
    align-items: center;
  }

  .demo--carta .demo-moment:last-child {
    border-bottom: 1px solid var(--d-line);
  }
}

/* Scena turns it into a cobalt band of cards. */
.demo--scena .demo-programme {
  background-color: var(--d-accent);
  color: var(--d-on-accent);
}

.demo--scena .demo-programme .demo-kicker,
.demo--scena .demo-programme__intro,
.demo--scena .demo-moment__detail {
  color: color-mix(in oklab, var(--d-on-accent) 84%, var(--d-accent));
}

.demo--scena .demo-programme .demo-numbered__figure {
  color: var(--d-on-accent);
}

.demo--scena .demo-programme__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.demo--scena .demo-moment {
  display: block;
  padding: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--d-on-accent) 45%, var(--d-accent));
  border-radius: var(--d-radius-lg);
}

.demo--scena .demo-moment:last-child {
  border-bottom: 1px solid color-mix(in oklab, var(--d-on-accent) 45%, var(--d-accent));
}

.demo--scena .demo-moment__time {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  margin-block-end: 0.75rem;
}

.demo--scena .demo-moment__title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 62rem) {
  .demo--scena .demo-programme__inner {
    grid-template-columns: minmax(8rem, 15rem) minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* Luce draws a timeline. */
.demo--luce .demo-timeline {
  position: relative;
  padding-inline-start: 2.25rem;
}

.demo--luce .demo-timeline::before {
  content: "";
  position: absolute;
  inset-block: 1.75rem;
  inset-inline-start: 0.625rem;
  width: 1px;
  background-color: var(--d-line);
}

.demo--luce .demo-moment {
  position: relative;
  border-top: 0;
  padding-block: 1.125rem;
}

.demo--luce .demo-moment:last-child {
  border-bottom: 0;
}

.demo--luce .demo-moment__dot {
  position: absolute;
  inset-inline-start: -2.25rem;
  inset-block-start: 1.75rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background-color: var(--d-accent);
}

/* ---------- Venue and Maps ---------- */

.demo-venue__inner {
  display: grid;
  gap: 2rem;
}

.demo-maps {
  display: grid;
  gap: clamp(1.25rem, 0.75rem + 2vw, 1.75rem);
  padding: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
  color: var(--d-ink);
  min-width: 0;
}

.demo-maps__preview {
  position: relative;
  border-radius: var(--d-radius);
  overflow: hidden;
  background-color: var(--d-accent);
}

/* Luce keeps the rose ground. Its copy of the map artwork carries the inverted
   palette — ink pin, ink roads — so the pin stays dark and legible on rose
   instead of the card going black. */
.demo--luce .demo-maps__preview {
  background-color: color-mix(in oklab, var(--d-accent) 78%, #fffdf9);
}

.demo-maps__artwork {
  width: 100%;
  aspect-ratio: 470 / 382;
  object-fit: cover;
}

.demo-maps__badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fffcf7;
}

.demo-maps__details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
}

.demo-maps__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.demo-maps__name {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.15;
}

.demo-maps__address,
.demo-maps__travel {
  font-size: 0.875rem;
  line-height: 1.5;
}

.demo-maps__address {
  color: var(--d-muted);
}

.demo-maps__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

@media (min-width: 48rem) {
  .demo-maps {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.demo-venue__shuttle {
  display: grid;
  gap: 0.5rem 2rem;
  margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-block-start: 1.25rem;
  border-top: 1px solid var(--d-line);
}

.demo-venue__shuttle-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.demo-venue__shuttle-text {
  max-width: 52ch;
}

@media (min-width: 48rem) {
  .demo-venue__shuttle {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

.demo--scena .demo-venue__shuttle {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--d-pad);
}

/* ---------- Dinner ---------- */

.demo-dinner__inner {
  display: grid;
  gap: 2rem;
}

.demo-dinner__figure {
  position: relative;
}

.demo-dinner__title {
  font-family: var(--font-display--family);
  font-size: clamp(1.625rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.demo-dinner__text {
  max-width: 46ch;
  color: var(--d-muted);
}

/* Carta lays the title over the photograph, as in the master. */
.demo--carta .demo-dinner__figure .demo-figure__img {
  aspect-ratio: 3 / 2;
}

.demo--carta .demo-dinner__title {
  position: absolute;
  inset-inline-start: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  inset-block-end: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  color: #fffdf9;
  text-shadow: 0 1px 24px rgb(0 0 0 / 55%);
}

@media (min-width: 62rem) {
  .demo--carta .demo-dinner__figure .demo-figure__img {
    aspect-ratio: 21 / 9;
  }
}

/* Scena keeps the long table whole and horizontal at every width. */
.demo--scena .demo-dinner {
  background-color: var(--d-ink);
  color: var(--d-on-accent);
}

.demo--scena .demo-dinner__text {
  color: color-mix(in oklab, var(--d-on-accent) 84%, var(--d-ink));
}

.demo--scena .demo-dinner__title {
  font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.75rem);
}

.demo--scena .demo-dinner__figure .demo-figure__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (min-width: 62rem) {
  .demo--scena .demo-dinner__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  }
}

/* ---------- Logistics ---------- */

.demo-logistics__title {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.1;
  margin-block-end: 1.25rem;
  max-width: 18ch;
}

.demo-logistics__intro {
  max-width: 46ch;
  color: var(--d-muted);
  margin-block-end: 2rem;
}

.demo-logistics__cards {
  display: grid;
  gap: 1rem;
  margin-block-start: 2rem;
}

.demo-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 1.75rem);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  background-color: var(--d-surface);
  min-width: 0;
}

.demo-card__title {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.875rem);
  line-height: 1.2;
}

.demo-card__text {
  font-size: 0.9375rem;
  color: var(--d-muted);
}

.demo-card__link {
  margin-block-start: auto;
  font-size: 0.875rem;
  font-weight: 600;
}

.demo-card__iban {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.demo-card__note {
  font-size: 0.75rem;
  color: var(--d-muted);
}

.demo-card--gift {
  background-color: var(--d-ink);
  border-color: var(--d-ink);
  color: #fffdf9;
}

.demo-card--gift .demo-card__text,
.demo-card--gift .demo-card__note {
  color: color-mix(in oklab, #fffdf9 82%, #171513);
}

@media (min-width: 48rem) {
  .demo-logistics__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.demo--scena .demo-logistics {
  background-color: var(--d-accent);
  color: var(--d-on-accent);
}

.demo--scena .demo-logistics .demo-kicker,
.demo--scena .demo-logistics__intro {
  color: color-mix(in oklab, var(--d-on-accent) 86%, var(--d-accent));
}

.demo--scena .demo-logistics__title {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.demo--scena .demo-card {
  background-color: transparent;
  border-color: color-mix(in oklab, var(--d-on-accent) 45%, var(--d-accent));
  color: var(--d-on-accent);
}

.demo--scena .demo-card__text {
  color: color-mix(in oklab, var(--d-on-accent) 84%, var(--d-accent));
}

/* The logistics rows sit on the cobalt band, so their muted ink tone would be
   unreadable there. Tint them from the band instead. */
.demo--scena .demo-logistics__row {
  border-top-color: color-mix(in oklab, var(--d-on-accent) 40%, var(--d-accent));
}

.demo--scena .demo-logistics__row:last-child {
  border-bottom-color: color-mix(in oklab, var(--d-on-accent) 40%, var(--d-accent));
}

.demo--scena .demo-logistics__kind,
.demo--scena .demo-logistics__detail {
  color: color-mix(in oklab, var(--d-on-accent) 86%, var(--d-accent));
}

.demo--scena .demo-logistics__name {
  color: var(--d-on-accent);
}

.demo--scena .demo-card--gift {
  background-color: var(--d-ink);
  border-color: var(--d-ink);
}

.demo-logistics__rows {
  display: grid;
  gap: 0;
  margin-block: 2rem;
}

.demo-logistics__row {
  display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--d-line);
}

.demo-logistics__row:last-child {
  border-bottom: 1px solid var(--d-line);
}

.demo-logistics__kind {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.demo-logistics__name {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-block-end: 0.35rem;
}

.demo-logistics__detail {
  font-size: 0.9375rem;
  color: var(--d-muted);
}

/* ---------- Invitation, pause and gift (Luce) ---------- */

.demo-invite__inner,
.demo-gift__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-invite__title,
.demo-gift__title {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.15;
  max-width: 18ch;
  margin-block-end: 1.5rem;
}

.demo-invite__text,
.demo-gift__text {
  max-width: 44ch;
  color: var(--d-muted);
}

.demo-gift__inner .demo-card {
  margin-block-start: 2rem;
  width: min(28rem, 100%);
  text-align: start;
}

.demo-pause__inner {
  display: grid;
  gap: 2rem;
}

/* "Le partenze lente…" is a circular portrait at every width, as in Figma. */
.demo-pause__figure .demo-figure__img {
  aspect-ratio: 1;
  border-radius: 50%;
}

.demo-pause__figure {
  width: min(26rem, 88%);
  margin-inline: auto;
}

.demo-pause__title {
  font-size: clamp(1.625rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  margin-block-end: 1.25rem;
  max-width: 16ch;
}

.demo-pause__text {
  max-width: 44ch;
  color: var(--d-muted);
}

@media (min-width: 62rem) {
  .demo-pause__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 4rem;
  }
}

/* ---------- RSVP ---------- */

.demo-rsvp-band {
  background-color: var(--d-ink);
}

.demo--scena .demo-rsvp-band,
.demo--luce .demo-rsvp-band {
  background-color: color-mix(in oklab, var(--d-accent) 12%, var(--d-page));
}

.demo-rsvp {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.25rem);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
  color: var(--d-ink);
  min-width: 0;
}

.demo-rsvp__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.demo-rsvp__title {
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
}

.demo-rsvp__lead {
  max-width: 60ch;
  font-size: 0.875rem;
  color: var(--d-muted);
}

.demo-rsvp__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .demo-rsvp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.demo-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.demo-field__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.demo-field__input {
  width: 100%;
  min-height: 3.5rem;
  padding-inline: 1rem;
  border: 1px solid var(--d-line);
  border-radius: var(--d-cta-radius);
  background-color: var(--d-surface);
  color: var(--d-ink);
  font-family: inherit;
  font-size: 1rem;
}

.demo-field__input:focus {
  border-color: var(--d-accent);
}

.demo-field__help {
  font-size: 0.75rem;
  color: var(--d-muted);
}

.demo-rsvp__choices {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .demo-rsvp__choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.demo-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.demo-choice__legend {
  padding: 0;
  margin-block-end: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.demo-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demo-choice__option {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.demo-choice__option::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
}

.demo-choice__input:checked + .demo-choice__option {
  background-color: var(--d-accent);
  border-color: var(--d-accent);
  color: var(--d-on-accent);
}

.demo-choice__input:checked + .demo-choice__option::before {
  background-color: currentcolor;
  box-shadow: inset 0 0 0 3px var(--d-accent);
}

.demo-choice__input:focus-visible + .demo-choice__option {
  outline: 2px solid var(--d-accent);
  outline-offset: 3px;
}

.demo-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.demo-consent__input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.15rem;
  accent-color: var(--d-accent);
}

.demo-consent__label {
  font-size: 0.8125rem;
  color: var(--d-muted);
  max-width: 66ch;
}

.demo-rsvp__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 0.5rem;
}

.demo-rsvp__note,
.demo-rsvp__done {
  font-size: 0.75rem;
  color: var(--d-muted);
}

.demo-rsvp__done {
  padding: 0.75rem 1rem;
  border-radius: var(--d-cta-radius);
  background-color: color-mix(in oklab, var(--d-accent) 12%, var(--d-surface));
  color: var(--d-ink);
  font-size: 0.875rem;
}

/* ---------- FAQ ---------- */

.demo-faq-band__inner {
  display: grid;
  gap: 2rem;
}

.demo-faq-band__title {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.125rem);
  line-height: 1.12;
  max-width: 14ch;
}

.demo-faq-band__intro {
  margin-block-start: 1rem;
  max-width: 40ch;
  color: var(--d-muted);
}

.demo-faq {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.demo-faq__item {
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  background-color: var(--d-surface);
  padding: 1rem clamp(1rem, 0.75rem + 1vw, 1.25rem);
}

.demo-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.demo-faq__question::-webkit-details-marker {
  display: none;
}

.demo-faq__marker {
  flex: 0 0 auto;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.demo-faq__marker::before,
.demo-faq__marker::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1.5px;
  background-color: currentcolor;
}

.demo-faq__marker::after {
  rotate: 90deg;
  transition: rotate 180ms ease;
}

.demo-faq__item[open] .demo-faq__marker::after {
  rotate: 0deg;
}

.demo-faq__answer {
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--d-muted);
  max-width: 62ch;
}

@media (min-width: 62rem) {
  .demo-faq-band__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
}

.demo--carta .demo-faq-band {
  background-color: var(--d-surface);
}

.demo--scena .demo-faq__item {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-on-accent);
  border-radius: 0;
}

.demo--scena .demo-faq__item:nth-child(even) {
  background-color: var(--d-ink);
  border-color: var(--d-ink);
}

.demo--scena .demo-faq__question {
  font-family: var(--font-display--family);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
}

.demo--scena .demo-faq__answer {
  color: color-mix(in oklab, var(--d-on-accent) 86%, var(--d-accent));
}

.demo--scena .demo-faq__item:nth-child(even) .demo-faq__answer {
  color: color-mix(in oklab, var(--d-on-accent) 86%, var(--d-ink));
}

/* ---------- Footer ---------- */

.demo-footer {
  background-color: var(--d-ink);
  color: #fffdf9;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.demo--luce .demo-footer {
  background-color: color-mix(in oklab, var(--d-accent) 30%, #fffdf9);
  color: var(--d-ink);
}

.demo-footer__inner {
  display: grid;
  gap: 2rem;
}

.demo-footer__closing {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.15;
  margin-block-end: 1rem;
  max-width: 16ch;
}

.demo-footer__couple {
  font-family: var(--font-display--family);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.demo-footer__date {
  margin-block-start: 0.75rem;
  font-size: 0.9375rem;
  color: color-mix(in oklab, currentcolor 78%, transparent);
}

.demo-footer__contact {
  display: inline-block;
  margin-block-start: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.demo-footer__contact:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.demo-footer__cta {
  margin-block-start: 1.75rem;
}

.demo--luce .demo-footer__cta {
  background-color: var(--d-ink);
  border-color: var(--d-ink);
  color: #fffdf9;
}

.demo-footer__qr {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.demo-footer__qr-img {
  width: 8rem;
  height: 8rem;
}

.demo-footer__qr-caption {
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklab, currentcolor 78%, transparent);
}

.demo-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.demo-signature {
  font-size: 0.75rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
}

.demo-signature:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.demo-footer__note {
  font-size: 0.75rem;
  color: color-mix(in oklab, currentcolor 70%, transparent);
}

@media (min-width: 48rem) {
  .demo-footer__inner {
    grid-template-columns: minmax(0, 1.6fr) auto;
    align-items: start;
    column-gap: 3rem;
  }

  .demo-footer__meta {
    grid-column: 1 / -1;
    padding-block-start: 1.5rem;
    border-top: 1px solid color-mix(in oklab, currentcolor 24%, transparent);
    width: 100%;
  }
}

/* ---------- Demo picker ---------- */

.demo-index__title {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem);
  line-height: 1.08;
  max-width: 16ch;
  margin-block-end: 1.5rem;
}

.demo-index__intro {
  margin-block-start: 0.5rem;
  max-width: 52ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--d-muted);
}

.demo-index__grid {
  display: grid;
  gap: 1.25rem;
  margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 2rem;
}

.demo-index__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
  min-width: 0;
}

.demo-index__name {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.1;
}

.demo-index__text {
  font-size: 0.9375rem;
  color: var(--d-muted);
}

.demo-index__link {
  margin-block-start: auto;
}

.demo-index__note {
  font-size: 0.8125rem;
  color: var(--d-muted);
}

@media (min-width: 48rem) {
  .demo-index__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .demo *,
  .demo *::before,
  .demo *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ---------- Appendice: elementi che le demo non avevano ---------- *
 *
 * Le demo Shopify tenevano codice prenotazione, nota alimentare e testi di
 * privacy dentro campi generici o hardcoded. Il contratto A li rende dati
 * distinti, quindi servono poche regole in piu'. Sono scritte nello stesso
 * idioma del foglio approvato e non introducono ne' token ne' colori nuovi.
 *
 * Il colore secondario si ottiene mescolando currentcolor con il trasparente,
 * come fa gia' .demo-footer__qr-caption: cosi' la stessa regola regge su avorio,
 * su cobalto e sul footer inchiostro senza che ogni stile debba riscriverla.
 */

.demo-card__code {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentcolor 76%, transparent);
  margin-block-start: 0.75rem;
}

.demo-dinner__note {
  max-width: 46ch;
  font-size: 0.9375rem;
  color: color-mix(in oklab, currentcolor 78%, transparent);
  margin-block-start: 0.75rem;
}

/* Carta posa il titolo della cena sopra la fotografia, in bianco. Senza
   fotografia la composizione passa a sola tipografia, come vuole la regola C.1,
   e il titolo deve tornare nel flusso con il colore del testo: bianco su avorio
   non si legge. */
.demo--carta .demo-dinner__title--plain {
  position: static;
  color: inherit;
  text-shadow: none;
}

/* La privacy chiude il footer: e' obbligatoria, quindi ha una riga propria e non
   compete con i nomi degli sposi. */
.demo-footer__privacy {
  grid-column: 1 / -1;
  border-block-start: 1px solid color-mix(in oklab, currentcolor 30%, transparent);
  padding-block-start: 1.5rem;
  margin-block-start: 0.5rem;
  display: grid;
  gap: 0.5rem;
  max-width: 68ch;
}

.demo-footer__privacy-title {
  font-family: var(--font-body--family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentcolor 72%, transparent);
}

.demo-footer__privacy-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: color-mix(in oklab, currentcolor 80%, transparent);
}

/* Il consenso porta l'unico link dentro un'etichetta di form. Senza questa regola
   uscirebbe con il blu di default del browser, l'unico colore fuori palette in
   tutta la pagina. */
.demo-consent__label a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Su viewport stretti nome e CTA non possono condividere in sicurezza la
   prima riga: il testo ha una larghezza intrinseca diversa per ogni coppia.
   La sola testata mobile usa quindi due righe, mantenendo il CTA visibile e il
   menu disclosure subito sotto. */
@media (max-width: 30rem) {
  .demo-header__couple {
    flex: 1 1 100%;
    min-width: 0;
  }

  .demo-header__cta {
    order: 2;
    max-width: 100%;
  }
}
.demo-rsvp__trap { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.demo-rsvp__error { color: #8d1717; font-weight: 700; }

/* Authored compositions use the exact existing frame, including fluid Scena heights. */
.demo-photo-adjusted { display:block; position:relative; overflow:hidden; background:var(--demo-bg, #f6f0e5); }
.demo-photo-adjusted > svg { position:absolute; inset:0; display:block; width:100%; height:100%; }
.demo [hidden] { display:none!important; }
.demo-photo--desktop { display:none; }
@media (min-width:62rem) { .demo-photo--mobile {display:none;} .demo-photo--desktop {display:block;} }

/* Structural corrections reuse the approved section tokens and typography. */
.demo-logistics__cards:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.demo-logistics__cards:empty{display:none}
.demo-gift-section .demo-card--gift{max-width:760px;width:100%;margin-inline:auto}
.demo-gift-section .demo-card__title{font-family:var(--font-display--family);font-size:clamp(1.7rem,4vw,3rem)}
.demo-maps__parking{margin-block:1rem}.demo-maps__parking h4{font-size:1rem;margin:0 0 .4rem}.demo-maps__parking p{margin:0}
.demo-dinner__inner:not(:has(.demo-dinner__copy)) .demo-dinner__figure{grid-column:1/-1}
.demo-header__nav{flex-wrap:wrap}
.demo-back-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;min-height:44px;padding:12px 16px;background:#fffaf0;color:#171513;border:1px solid #171513;border-radius:30px;font:600 14px var(--font-body--family);text-decoration:none;box-shadow:0 3px 12px #0002}
.demo-back-top[hidden]{display:none!important}.demo-back-top:focus-visible{outline:3px solid #3155ff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

.demo-photo-rendered > img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:var(--demo-focus,50% 50%); border-radius:0; }

/* Public wedding pages only. The historical storefront stays independent.
   Keep every photo frame ratio, focal point and rendered derivative intact. */
.demo {
  --d-pad: clamp(1.5rem, 5vw, 5.5rem);
  --d-gap: clamp(4.5rem, 8vw, 8rem);
  overflow: clip;
  -webkit-font-smoothing: antialiased;
}
.demo :is(h1, h2, h3, p, a, summary) { overflow-wrap: anywhere; }
.demo :is(.demo-shell, .demo-hero__copy, .demo-numbered__copy, .demo-programme__copy) { min-width: 0; }
.demo-main > section[id], .demo-footer__privacy { scroll-margin-top: 10rem; }
.demo a { text-underline-offset: .25em; }
.demo-card__link { color: inherit; }
.demo :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.demo-cta { min-height: 3.25rem; padding: .9rem 1.5rem; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.demo-cta:active { transform: translateY(1px); }
.demo-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--d-line); }
.demo-header__inner { gap: .5rem 1.25rem; padding-block: .875rem; border: 0; }
.demo-header__couple { font-size: 1.125rem; flex: 1 1 10rem; }
.demo-header__cta { min-height: 2.75rem; font-size: .75rem; padding: .65rem 1rem; }
.demo-header__link { min-height: 2.75rem; display: flex; align-items: center; position: relative; }
.demo-header__link[aria-current="location"] { text-decoration: underline; text-decoration-thickness: 2px; }
.demo-menu__button { min-height: 2.75rem; padding: .6rem 0; }
.demo-menu__icon { transition: transform .25s; }
.demo-menu[open] .demo-menu__icon { transform: rotate(180deg); }
.demo-header__nav { gap: .2rem 1rem; }
.demo-kicker, .demo-rsvp__eyebrow { font-size: .6875rem; letter-spacing: .18em; }
.demo-hero__intro { font-size: 1rem; line-height: 1.8; }
.demo-hero__copy .demo-hero__names { margin-bottom: 1.5rem; }
.demo-hero__scroll { display: flex; align-items: center; gap: 1rem; }
.demo-hero__scroll::before { content: ''; width: 2.5rem; height: 1px; background: currentColor; }
.demo-story__text, .demo-pause__text { line-height: 1.85; }
.demo-story__text + .demo-story__text, .demo-pause__text + .demo-pause__text { margin-top: 1rem; }
.demo-maps { padding: clamp(1rem, 3vw, 2.5rem); gap: clamp(1.5rem, 4vw, 4rem); }
.demo-maps__details { align-self: center; gap: .9rem; }
.demo-maps__badge { color: #fffdf9; background: #28231f; padding: .5rem .75rem; border-radius: 3px; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); }
.demo-maps__artwork { object-fit: contain; }
.demo-maps__parking { font-size: .875rem; margin-block: .25rem; }
.demo-maps__parking h4 { font-size: .75rem; }
.demo-rsvp { max-width: 60rem; margin-inline: auto; padding: clamp(1.5rem, 5vw, 4.5rem); gap: 1.75rem; }
.demo-rsvp__title { font-size: clamp(2.25rem, 4vw, 3.75rem); max-width: 18ch; }
.demo-rsvp__lead { font-size: .9375rem; line-height: 1.75; }
.demo-rsvp__grid { gap: 1.5rem 2rem; }
.demo-field__input { border-color: #958a80; border-radius: 4px; background: #fffcf7; color: #28231f; transition: border-color .18s, box-shadow .18s; }
.demo-field__input:focus { border-color: var(--d-accent); box-shadow: 0 0 0 1px var(--d-accent); }
.demo-field__label { font-size: .8125rem; }
.demo-field__help, .demo-rsvp__note { line-height: 1.65; }
.demo-consent__input { width: 1.5rem; height: 1.5rem; margin: 0; }
.demo-consent__label { line-height: 1.75; }
.demo-choice__option { border-color: #958a80; min-height: 3.25rem; }
.demo-choice__input:focus-visible + .demo-choice__option { outline: 2px solid var(--d-ink); outline-offset: 4px; }
.demo-rsvp__submit { gap: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--d-line); }
.demo-rsvp__error { scroll-margin-top: 11rem; }
.demo-rsvp :is(input, button) { scroll-margin-top: 11rem; }
.demo-faq__item { padding: 1.5rem 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.demo-faq__item:last-child { border-bottom-width: 1px; }
.demo-faq__question { min-height: 2.75rem; }
.demo-faq__answer { line-height: 1.8; padding-right: 1.75rem; }
.demo-faq { gap: 0; }
.demo-footer { padding-block: clamp(3.5rem, 7vw, 7rem); }
.demo-footer__privacy { max-width: none; padding-top: 2rem; margin-top: 2rem; }
.demo-footer__privacy-text { max-width: 90ch; }

/* CARTA — cream paper, wine ink, generous editorial margins. */
.demo--carta {
  --d-page: #f6f0e6; --d-surface: #fffaf2; --d-ink: #40262d;
  --d-accent: #702b3e; --d-on-accent: #fffaf2; --d-muted: #6c5558;
  --d-line: #cdbbb6; --d-radius: 0px; --d-radius-lg: 0px; --d-cta-radius: 0px;
}
.demo--carta .demo-header { background: #f6f0e6; }
.demo--carta .demo-header__couple { color: var(--d-accent); }
.demo--carta .demo-hero { padding-top: clamp(3rem, 7vw, 7rem); }
.demo--carta .demo-hero__names { font-size: clamp(3.3rem, 6.1vw, 5.8rem); line-height: 1.04; font-weight: 400; color: var(--d-accent); letter-spacing: -.055em; }
.demo--carta .demo-hero__copy .demo-kicker { border-top: 1px solid var(--d-line); padding-top: 1.25rem; margin-bottom: 2rem; }
.demo--carta .demo-hero__figure { position: relative; padding: .65rem; border: 1px solid var(--d-line); }
.demo--carta .demo-hero__figure::after { content: ''; position: absolute; inset: -.6rem .6rem; border: 1px solid var(--d-line); pointer-events: none; }
.demo--carta .demo-hero__scroll { color: var(--d-accent); margin-top: 2.75rem; }
.demo--carta .demo-story { border-top: 1px solid var(--d-line); }
.demo--carta .demo-story__figure { padding: 0 1rem 1rem 0; border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }
.demo--carta .demo-story__title { font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.3rem); }
.demo--carta .demo-story__quote { font-family: Georgia, serif; font-style: italic; color: var(--d-accent); border-left: 1px solid currentColor; padding-left: 1.5rem; }
.demo--carta .demo-programme { background: #ece1d7; border-block: 1px solid var(--d-line); }
.demo--carta .demo-programme__list { gap: 0; }
.demo--carta .demo-moment { padding: 1.75rem 0; border-width: 1px 0 0; }
.demo--carta .demo-moment__time { color: var(--d-accent); }
.demo--carta .demo-maps { background: transparent; }
.demo--carta .demo-maps__preview { background: #702b3e; }
.demo--carta .demo-dinner__figure { display: flex; flex-direction: column; gap: 1.75rem; }
.demo--carta .demo-dinner__title { position: static; color: var(--d-accent); text-shadow: none; max-width: 24ch; font-size: clamp(2.2rem, 4.5vw, 4rem); }
.demo--carta .demo-rsvp-band { background: #702b3e; }
.demo--carta .demo-rsvp { border: 1px solid #e0c7bf; outline: 1px solid #e0c7bf; outline-offset: .65rem; }
.demo--carta .demo-logistics__title { max-width: 22ch; }
.demo--carta .demo-card { padding: 2rem; }
.demo--carta .demo-card--gift { color: #fffaf2; background: #702b3e; border-color: #702b3e; }
.demo--carta .demo-gift-section { padding-top: 0; }
.demo--carta .demo-faq-band { background: #ece1d7; }
.demo--carta .demo-footer { background: #40262d; color: #fffaf2; }

/* SCENA — an opening title, ink and electric chartreuse, sharp cuts. */
.demo--scena {
  --d-page: #f2f0e8; --d-surface: #fbfaf5; --d-ink: #20231f;
  --d-accent: #d4ed64; --d-on-accent: #20231f; --d-muted: #585d54;
  --d-line: #b2b7a8; --d-radius: 0px; --d-radius-lg: 0px; --d-cta-radius: 0px;
}
.demo--scena :is(h1, h2, h3, .demo-numbered__figure, .demo-moment__time) { font-family: var(--font-body--family); font-weight: 600; }
.demo--scena h2 { letter-spacing: -.05em; }
.demo--scena .demo-header { background: #20231f; color: #fbfaf5; border-color: #62665a; }
.demo--scena .demo-header__couple { font-size: .75rem; }
.demo--scena .demo-header__link { letter-spacing: .04em; font-size: .6875rem; }
.demo--scena .demo-header__cta { background: #d4ed64; border-color: #d4ed64; color: #20231f; }
.demo--scena .demo-hero__copy { background: #20231f; color: #fbfaf5; }
.demo--scena .demo-hero__copy .demo-kicker { color: #d4ed64; border-left: 2px solid currentColor; padding-left: 1rem; }
.demo--scena .demo-hero__intro { color: #d9dacf; }
.demo--scena .demo-hero__names { font-size: clamp(3.75rem, 6.5vw, 6.5rem); font-weight: 600; line-height: .98; text-transform: uppercase; letter-spacing: -.065em; }
.demo--scena .demo-hero__cta { background: #d4ed64; border-color: #d4ed64; color: #20231f; align-self: flex-start; }
.demo--scena .demo-main > .demo-ticker { background: #d4ed64; color: #20231f; padding-block: 1.4rem; border-bottom: 1px solid #20231f; }
.demo--scena .demo-ticker__text { font-family: var(--font-body--family); text-transform: uppercase; font-size: .8125rem; letter-spacing: .16em; font-weight: 600; }
.demo--scena .demo-numbered__figure { color: #7a806f; font-size: clamp(4rem, 9vw, 9rem); letter-spacing: -.08em; }
.demo--scena .demo-story__title { font-size: clamp(2.25rem, 3.8vw, 4rem); line-height: 1.04; }
.demo--scena .demo-story__quote { font-family: var(--font-body--family); font-size: 1rem; border-top: 2px solid var(--d-ink); padding-top: 1.5rem; }
.demo--scena .demo-slash { background: #20231f; color: #d4ed64; margin-top: 3rem; padding-block: 1.5rem; }
.demo--scena .demo-programme { background: #d4ed64; }
.demo--scena .demo-moment { border-color: #717e35; border-radius: 0; padding: 1.5rem; }
.demo--scena .demo-moment:last-child { border-color: #717e35; }
.demo--scena .demo-programme .demo-numbered__figure { color: #4b5429; }
.demo--scena .demo-programme :is(.demo-kicker, .demo-programme__intro, .demo-moment__detail) { color: #40482b; }
.demo--scena .demo-moment__time { font-size: clamp(2.25rem, 3vw, 3.5rem); letter-spacing: -.06em; }
.demo--scena .demo-maps { border: 1px solid #a8ad9e; }
.demo--scena .demo-maps__preview { background: #20231f; }
.demo--scena .demo-dinner { background: #20231f; color: #fbfaf5; }
.demo--scena .demo-dinner__text, .demo--scena .demo-dinner__note { color: #d9dacf; }
.demo--scena .demo-dinner__title { text-transform: uppercase; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.02; }
.demo--scena .demo-rsvp-band { background: #f2f0e8; }
.demo--scena .demo-rsvp { border: 1px solid #20231f; border-top: .75rem solid #20231f; }
.demo--scena .demo-rsvp__eyebrow { color: #484e3b; }
.demo--scena .demo-rsvp__title { text-transform: uppercase; }
.demo--scena .demo-logistics { background: #d4ed64; }
.demo--scena .demo-logistics :is(.demo-kicker,.demo-card__text,.demo-card__note,.demo-venue__shuttle-label,.demo-logistics__kind,.demo-logistics__detail) { color: #40482b; }
.demo--scena .demo-logistics .demo-card { border-color: #717e35; }
.demo--scena .demo-gift-section { background: #20231f; }
.demo--scena .demo-gift-section .demo-card--gift { color: #fbfaf5; border: 0; padding: 0; max-width: 65rem; }
.demo--scena .demo-gift-section :is(.demo-card__text,.demo-card__note) { color: #d9dacf; }
.demo--scena .demo-gift-section .demo-card__iban { color: #d4ed64; }
.demo--scena .demo-footer { background: #20231f; color: #fbfaf5; border-top: 1px solid #62665a; }
.demo--scena .demo-footer__couple { font-family: var(--font-body--family); text-transform: uppercase; letter-spacing: -.05em; }
.demo--scena .demo-faq__item, .demo--scena .demo-faq__item:nth-child(even) { background: transparent; color: #20231f; border-color: #b2b7a8; }
.demo--scena .demo-faq__question { font-family: var(--font-body--family); font-size: 1rem; font-weight: 600; }
.demo--scena .demo-faq__answer, .demo--scena .demo-faq__item:nth-child(even) .demo-faq__answer { color: #585d54; }

/* LUCE — warm daylight, honey and olive, open organic shapes. */
.demo--luce {
  --d-page: #fffcf5; --d-surface: #fffef9; --d-ink: #383e2e;
  --d-accent: #eaccaa; --d-on-accent: #383e2e; --d-muted: #606650;
  --d-line: #c6c7af; --d-radius: 1.5rem; --d-radius-lg: 2rem; --d-cta-radius: 999px;
}
.demo--luce .demo-header { background: #fffcf5; border-color: #dedccb; }
.demo--luce .demo-header__cta { background: #383e2e; color: #fffef9; border-color: #383e2e; }
.demo--luce .demo-hero { padding-block: 3rem 4rem; }
.demo--luce .demo-hero__inner { gap: .35rem; }
.demo--luce .demo-hero__field { background: #f1dfc5; width: min(35rem, 92%); top: 5rem; border-radius: 48% 52% 40% 60% / 42% 40% 60% 58%; }
.demo--luce .demo-hero__names { font-weight: 400; font-size: clamp(2.9rem, 7vw, 6.8rem); line-height: 1.1; letter-spacing: -.05em; max-width: 12ch; }
.demo--luce .demo-hero__intro { max-width: 36ch; margin-bottom: 2rem; color: #4d523e; }
.demo--luce .demo-hero__figure { width: min(22rem, 82%); margin-top: .5rem; position: relative; }
.demo--luce .demo-hero__figure::after { content: ''; position: absolute; inset: -.65rem; border: 1px solid #8f967c; border-radius: 999px; pointer-events: none; }
.demo--luce .demo-hero__scroll { color: #606650; margin-top: 1.5rem; }
.demo--luce .demo-invite { background: #eff0e4; border-radius: 50% 50% 0 0 / 3rem 3rem 0 0; }
.demo--luce .demo-invite__inner::before { content: ''; width: 1rem; height: 2rem; border: 1px solid #7c8665; border-radius: 100% 0 100% 0; margin-bottom: 1.75rem; transform: rotate(25deg); }
.demo--luce .demo-invite__title { font-weight: 400; }
.demo--luce .demo-programme { background: #eff0e4; padding-top: 1rem; }
.demo--luce .demo-moment__dot { background: #6d7854; box-shadow: 0 0 0 6px #eff0e4; }
.demo--luce .demo-timeline::before { background: #a9b095; }
.demo--luce .demo-moment { padding-block: 1.5rem; }
.demo--luce .demo-maps { border: 0; background: #f5ebdc; }
.demo--luce .demo-maps__preview { background: #eaccaa; border-radius: 6rem 6rem 1rem 1rem; }
.demo--luce .demo-maps__badge { background: #383e2e; }
.demo--luce .demo-maps__action { background: #383e2e; border-color: #383e2e; color: #fffef9; }
.demo--luce .demo-logistics { border-top: 1px solid #dedccb; }
.demo--luce .demo-dinner { background: #f1dfc5; border-radius: 4rem 4rem 0 0; }
.demo--luce .demo-dinner__inner { text-align: center; justify-items: center; }
.demo--luce .demo-dinner__title { max-width: 25ch; margin: 0 auto 1.5rem; font-size: clamp(2rem, 3.6vw, 3.5rem); }
.demo--luce .demo-dinner__text, .demo--luce .demo-dinner__note { margin-inline: auto; }
.demo--luce .demo-rsvp-band { background: #f1dfc5; }
.demo--luce .demo-rsvp { border: 0; border-radius: clamp(1.5rem, 4vw, 4rem); }
.demo--luce .demo-rsvp .demo-cta { background: #383e2e; border-color: #383e2e; color: #fffef9; }
.demo--luce .demo-field__input { border-radius: .75rem; }
.demo--luce .demo-pause__figure { position: relative; padding: .6rem; border: 1px solid #a9b095; border-radius: 50%; }
.demo--luce .demo-pause__inner:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.demo--luce .demo-pause__title { font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.3rem); }
.demo--luce .demo-story__quote { color: #596244; font-family: Georgia, serif; font-style: italic; }
.demo--luce .demo-gift { background: #eff0e4; border-radius: 50% 50% 0 0 / 3rem 3rem 0 0; }
.demo--luce .demo-gift__inner .demo-card { background: #fffef9; border-color: #c6c7af; color: #383e2e; }
.demo--luce .demo-gift .demo-card__note { color: #606650; }
.demo--luce .demo-faq-band { background: #eff0e4; }
.demo--luce .demo-footer { background: #383e2e; color: #fffef9; }
.demo--luce .demo-footer .demo-cta { color: #383e2e; background: #eaccaa; border-color: #eaccaa; }

@media (min-width: 48rem) {
  .demo--carta .demo-story__inner { column-gap: clamp(3rem, 7vw, 7rem); }
  .demo--carta .demo-story__figure { max-width: 28rem; }
}
@media (min-width: 62rem) {
  .demo-header__inner { flex-wrap: wrap; }
  .demo-header__nav { flex-wrap: wrap; justify-content: flex-end; gap: 0 1rem; }
  .demo-menu { flex: 1 1 100%; order: 3; }
  .demo-header__cta { order: 2; }
  .demo--carta .demo-hero__inner { gap: clamp(2rem, 5vw, 6rem); }
  .demo--carta .demo-hero__figure { max-width: 32rem; justify-self: end; width: 100%; }
  .demo--scena .demo-numbered__inner { grid-template-columns: 6rem minmax(0, 1.2fr) minmax(0, .9fr); column-gap: 3rem; }
  .demo--scena .demo-programme__inner { grid-template-columns: 6rem minmax(0, .8fr) minmax(0, 1.4fr); }
  .demo--scena .demo-venue__inner { grid-template-columns: 6rem minmax(0, 1fr); }
  .demo--scena .demo-numbered__figure { font-size: 6rem; }
  .demo--scena .demo-story__figure { margin-top: 4rem; }
  .demo--luce .demo-hero__inner { gap: .5rem; padding-top: 1rem; }
  .demo--luce .demo-hero__names { font-size: clamp(4rem, 6.5vw, 6.5rem); margin: 0 0 1rem; max-width: 100%; }
  .demo--luce .demo-hero__intro { max-width: 50ch; margin: 0 0 2rem; }
  .demo--luce .demo-hero__cta { margin-top: 2rem; }
  .demo--luce .demo-hero__figure { width: min(30rem, 40vw); margin: .5rem 0 0; }
  .demo--luce .demo-hero__field { width: min(44rem, 68%); top: 10rem; aspect-ratio: 1; }
}
@media (min-width: 80rem) {
  .demo-menu { flex: 0 1 auto; order: 0; }
  .demo-header__nav { gap: 0 1rem; }
  .demo-header__couple { flex: 1 1 10rem; }
}
@media (max-width: 61.999rem) {
  /* Keep native details in its own box. Flattening it with display:contents
     lets browser disclosure layout squeeze the header and nav into columns. */
  .demo-header { padding-top: env(safe-area-inset-top, 0px); }
  .demo-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; padding-inline: max(var(--d-pad), env(safe-area-inset-left)) max(var(--d-pad), env(safe-area-inset-right)); }
  .demo-header__couple { grid-column: 1; grid-row: 1; min-width: 0; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  .demo .demo-header__cta { grid-column: 1 / -1; grid-row: 2; justify-self: start; width: max-content; max-width: 100%; white-space: nowrap; word-break: normal; overflow-wrap: normal; font-size: .875rem; }
  .demo-menu, .demo-menu[open] { display: block; position: static; grid-column: 2; grid-row: 1; align-self: center; min-width: 6rem; }
  .demo-menu__button { justify-content: flex-end; width: 100%; min-height: 44px; white-space: nowrap; }
  .demo-menu__close { display: none; }
  .demo-menu[open] .demo-menu__label { display: none; }
  .demo-menu[open] .demo-menu__close { display: inline; }
  .demo-menu[open] .demo-menu__icon { transform: rotate(45deg); }
  .demo-menu[open] .demo-menu__icon::after { rotate: 90deg; }
  .demo .demo-header__nav { position: absolute; inset: 100% 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: .125rem; width: 100%; box-sizing: border-box; padding: .75rem max(1.5rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); border-block: 1px solid var(--d-line); background: var(--d-page); max-height: calc(100svh - var(--demo-header-height, 8.5rem)); max-height: calc(100dvh - var(--demo-header-height, 8.5rem)); overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-block: .75rem; }
  .demo .demo-menu .demo-header__link { flex: 0 0 auto; width: 100%; min-width: 0; min-height: 44px; padding: .65rem .25rem; font-size: 1rem; line-height: 1.5; letter-spacing: normal; white-space: normal; word-break: normal; overflow-wrap: normal; }
  .demo--scena .demo-header__nav { border-color: #62665a; }
  .demo--scena .demo-hero__copy { padding-block: 3.5rem; }
  .demo--scena .demo-numbered__figure { font-size: 4.5rem; }
  .demo--scena .demo-story__figure { max-width: 28rem; width: 84%; justify-self: end; }
  .demo--scena .demo-moment { padding: 1.25rem; }
}
.demo-header__initials, .demo-menu__close { display: none; }
@media (max-width: 30rem) {
  .demo-header__names { display: none; }
  .demo-header__initials { display: inline; }
}
@media (max-width: 30rem) {
  .demo-rsvp__submit .demo-cta { width: 100%; }
  .demo--scena .demo-programme__list { grid-template-columns: minmax(0, 1fr); }
  .demo--scena .demo-moment { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 1rem; }
  .demo--scena .demo-moment__time { font-size: 2rem; margin: 0; }
  .demo--scena .demo-hero__names { font-size: clamp(3rem, 12.5vw, 4.8rem); }
  .demo--carta .demo-hero__names { font-size: clamp(2.8rem, 11vw, 4.25rem); }
  .demo--luce .demo-moment { grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr); gap: .75rem; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .demo-cta:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.demo) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { animation: none !important; transition: none !important; }
}

/* Archived DettoSi fonts, losslessly packaged as WOFF2. Isolated family names. */
@font-face{font-family:'Scena Kalnia';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/scena-kalnia-medium.woff2') format('woff2')}
@font-face{font-family:'Scena Kalnia';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/scena-kalnia-semibold.woff2') format('woff2')}
@font-face{font-family:'Scena DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/scena-dmsans-regular.woff2') format('woff2')}
@font-face{font-family:'Scena DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/scena-dmsans-medium.woff2') format('woff2')}
@font-face{font-family:'Scena DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/scena-dmsans-semibold.woff2') format('woff2')}
/* Scena: selective adaptation of archived v2/v2.css .dettosi / .brand-hero.
   No registry, data, event handlers or photo adjustment rules are imported. */
.demo--scena {
  --d-page:#f4f0e7; --d-surface:#fffdf8; --d-ink:#181714; --d-muted:#696256;
  --d-accent:#414dff; --d-on-accent:#fff; --d-line:#18171430;
  --d-radius:7px; --d-radius-lg:12px; --d-cta-radius:7px;
  --font-body--family:'Scena DM Sans',Arial,sans-serif;
  --font-heading--family:'Scena Kalnia',Georgia,serif;
  --scena-pink:#efb7c8; --scena-display:'Scena Kalnia',Georgia,serif;
  background:var(--d-page); color:var(--d-ink); font-family:var(--font-body--family);
}
.demo--scena :is(h1,h2,h3,.demo-numbered__figure,.demo-moment__time,.demo-footer__couple) { font-family:var(--scena-display); font-weight:500; text-transform:none; }
.demo--scena h2 { font-size:clamp(2.4rem,4.4vw,4.1rem); line-height:1.2; letter-spacing:-.055em; }
.demo--scena h3 { font-size:1.625rem; line-height:1.25; letter-spacing:-.04em; }
.demo--scena .demo-header { background:var(--d-page); color:var(--d-ink); border-color:var(--d-line); }
.demo--scena .demo-header__inner { padding-block:1rem; }
.demo--scena .demo-header__couple { font:500 1.875rem/1.2 var(--scena-display); letter-spacing:-.06em; text-transform:none; white-space:nowrap; }
.demo--scena .demo-header__couple em { color:var(--d-accent); font-style:normal; }
.demo--scena .demo-header__link { color:var(--d-ink); font-size:.75rem; letter-spacing:0; text-transform:none; }
.demo--scena .demo-header__nav { border-color:var(--d-line); }
.demo--scena .demo-cta { background:var(--d-accent); border-color:var(--d-accent); color:#fff; border-radius:7px; font-weight:500; letter-spacing:0; text-transform:none; }
.demo--scena .demo-header__cta { color:var(--d-accent); border-color:var(--d-accent); background:transparent; }
.demo--scena .demo-hero { padding:0; }
.demo--scena .demo-hero__inner { position:relative; isolation:isolate; max-width:82rem; margin:auto; padding:4.375rem var(--d-pad) 6.25rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:3.75rem; }
.demo--scena .demo-hero__copy { background:transparent; color:var(--d-ink); padding:0; display:flex; flex-direction:column; align-items:flex-start; min-width:0; z-index:1; }
.demo--scena .demo-hero__copy .demo-hero__names { font:600 clamp(3.5rem,6vw,6rem)/1.08 var(--scena-display); letter-spacing:-.065em; text-transform:none; margin:0 0 1.75rem; }
.demo--scena .demo-hero__names span { display:block; }
.demo--scena .demo-hero__names em { display:block; font-style:normal; font-size:0; color:var(--d-accent); margin:10px 0; }
/* The requested ampersand is a graphic glyph; the authored joiner is retained
   in the data/DOM and in the heading's accessible name. */
.demo--scena .demo-hero__names em::before { content:'&'; font-size:clamp(2.45rem,4.2vw,4.2rem); }
.demo--scena .demo-hero__intro { color:var(--d-ink); font-size:1rem; line-height:1.75; max-width:33ch; margin:0 0 1.75rem; }
.demo--scena .demo-hero__copy .demo-kicker { color:var(--d-muted); border:0; padding:0; margin:1.875rem 0 0; font:500 .9375rem/1.7 var(--font-body--family); text-transform:none; letter-spacing:0; max-width:32ch; }
.demo--scena .demo-hero__figure { height:36.25rem; margin:0; position:relative; z-index:0; }
.demo--scena .demo-hero__figure .demo-figure__img { height:100%; min-height:0; border-radius:140px 140px 4px 4px; background:var(--scena-pink); }
.demo--scena .scena-brand-plus { position:absolute; right:2rem; bottom:3.4375rem; background:var(--d-accent); color:#fff; width:105px; height:105px; border-radius:50%; display:grid; place-items:center; font:400 72px/1 var(--font-body--family); z-index:2; pointer-events:none; }
.demo--scena .scena-brand-petal { position:absolute; right:43%; top:2rem; width:6rem; height:6rem; background:var(--scena-pink); border-radius:50% 50% 0 50%; transform:rotate(-15deg); z-index:-1; pointer-events:none; }
.demo--scena .demo-hero__inner:not(:has(.demo-hero__figure)) { grid-template-columns:minmax(0,1fr); }
.demo--scena .demo-main > .demo-ticker { background:var(--scena-pink); color:var(--d-ink); padding:1.5rem var(--d-pad); border:0; }
.demo--scena .demo-ticker__text { font:500 .875rem/1.65 var(--font-body--family); letter-spacing:.06em; }
.demo--scena .demo-numbered__figure { color:var(--d-accent); font-size:clamp(3rem,6vw,6rem); line-height:1; letter-spacing:-.065em; }
.demo--scena .demo-story__title { font-size:clamp(2.4rem,4.4vw,4.1rem); line-height:1.2; }
.demo--scena .demo-story__quote { font:500 1.25rem/1.65 var(--scena-display); color:var(--d-ink); border-color:var(--d-line); }
.demo--scena .demo-story__figure .demo-figure__img { border-radius:4px 90px 4px 4px; }
.demo--scena .demo-slash { background:var(--d-page); color:var(--d-accent); border-block:1px solid var(--d-line); margin-top:4rem; padding:2rem var(--d-pad); font-family:var(--scena-display); letter-spacing:-.035em; text-transform:none; }
.demo--scena .demo-programme { background:var(--d-accent); color:#fff; }
.demo--scena .demo-programme :is(.demo-numbered__figure,.demo-kicker,.demo-programme__intro,.demo-moment__detail) { color:#fff; }
.demo--scena .demo-programme__list { grid-template-columns:minmax(0,1fr); gap:0; }
.demo--scena .demo-moment { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1.5rem; padding:1.75rem 0; border:0; border-top:1px solid #ffffff60; border-radius:0; }
.demo--scena .demo-moment:last-child { border-bottom:1px solid #ffffff60; }
.demo--scena .demo-moment__time { font-size:2.375rem; margin:0; letter-spacing:-.055em; white-space:nowrap; }
.demo--scena .demo-moment__title { font-size:1.625rem; text-transform:none; letter-spacing:-.04em; }
.demo--scena .demo-moment__detail { line-height:1.7; }
.demo--scena .demo-venue { background:var(--d-page); }
.demo--scena .demo-maps { background:var(--d-surface); border:1px solid var(--d-line); border-radius:12px; }
.demo--scena .demo-maps + .demo-maps { margin-top:1.5rem; }
.demo--scena .demo-maps__preview { background:var(--scena-pink); border-radius:8px; }
.demo--scena .demo-maps__badge { background:var(--d-ink); color:var(--d-page); }
.demo--scena .demo-maps__title { font-family:var(--scena-display); letter-spacing:-.045em; }
.demo--scena .demo-maps__action { background:var(--d-accent); color:#fff; border-color:var(--d-accent); }
.demo--scena .demo-dinner { background:var(--scena-pink); color:var(--d-ink); }
.demo--scena .demo-dinner__title { font-size:clamp(2.4rem,4.4vw,4.1rem); line-height:1.2; text-transform:none; }
.demo--scena :is(.demo-dinner__text,.demo-dinner__note) { color:var(--d-ink); }
.demo--scena .demo-dinner__figure .demo-figure__img { border-radius:12px; }
.demo--scena .demo-rsvp-band { background:var(--d-page); }
.demo--scena .demo-rsvp { background:var(--d-surface); border:1px solid var(--d-line); border-radius:16px; box-shadow:0 12px 40px #18171405; }
.demo--scena .demo-rsvp__eyebrow { color:var(--d-accent); }
.demo--scena .demo-rsvp__title { text-transform:none; }
.demo--scena .demo-field__input { background:var(--d-surface); color:var(--d-ink); border-color:#8a847b; border-radius:7px; }
.demo--scena .demo-choice__option { border-color:#8a847b; border-radius:7px; }
.demo--scena .demo-choice__input:checked + .demo-choice__option { background:var(--d-accent); border-color:var(--d-accent); color:#fff; }
.demo--scena :is(input,textarea) { accent-color:var(--d-accent); }
.demo--scena [aria-invalid=true] { border-color:#a12546; box-shadow:0 0 0 1px #a12546; }
.demo--scena .demo-rsvp__error { color:#812039; background:#f9e5e8; padding:1rem; border-radius:7px; }
.demo--scena [data-demo-done] { color:#253380; background:#ebedff; border:1px solid #414dff; padding:1.25rem; border-radius:7px; }
.demo--scena [aria-busy=true] { opacity:.75; cursor:progress; }
.demo--scena .demo-logistics { background:var(--d-page); color:var(--d-ink); border-top:1px solid var(--d-line); }
.demo--scena .demo-logistics :is(.demo-kicker,.demo-card__text,.demo-card__note,.demo-venue__shuttle-label,.demo-logistics__kind,.demo-logistics__detail) { color:var(--d-muted); }
.demo--scena .demo-logistics .demo-card { background:var(--d-surface); color:var(--d-ink); border:1px solid var(--d-line); border-radius:12px; }
.demo--scena .demo-card__code { color:var(--d-muted); }
.demo--scena .demo-venue__shuttle { background:var(--scena-pink); color:var(--d-ink); padding:1.75rem; border-radius:4px 3rem 4px 4px; }
.demo--scena .demo-logistics .demo-venue__shuttle-label { color:var(--d-ink); }
.demo--scena .demo-gift-section { background:var(--d-ink); color:var(--d-page); }
.demo--scena .demo-gift-section .demo-card--gift { color:var(--d-page); background:transparent; border:0; border-radius:0; }
.demo--scena .demo-gift-section :is(.demo-card__text,.demo-card__note) { color:var(--d-page); }
.demo--scena .demo-gift-section .demo-card__title { color:var(--scena-pink); font-size:clamp(2rem,3.6vw,3.5rem); }
.demo--scena .demo-gift-section .demo-card__iban { color:var(--d-ink); background:var(--d-page); border-radius:7px; display:table; padding:1rem 1.25rem; max-width:100%; font-family:var(--font-body--family); font-size:1rem; }
.demo--scena .demo-faq-band { background:var(--d-page); }
.demo--scena .demo-faq__item,.demo--scena .demo-faq__item:nth-child(even) { background:transparent; color:var(--d-ink); border-color:var(--d-line); }
.demo--scena .demo-faq__question { font:500 1.125rem/1.5 var(--font-body--family); }
.demo--scena .demo-faq__question::after { color:var(--d-accent); }
.demo--scena .demo-faq__answer,.demo--scena .demo-faq__item:nth-child(even) .demo-faq__answer { color:var(--d-muted); }
.demo--scena .demo-footer { background:var(--scena-pink); color:var(--d-ink); border-color:var(--d-line); }
.demo--scena .demo-footer__couple { font:500 clamp(3rem,6vw,5.5rem)/1.2 var(--scena-display); text-transform:none; letter-spacing:-.055em; }
.demo--scena .demo-footer__privacy { border-color:#18171435; }
.demo--scena :focus-visible { outline:3px solid currentColor; outline-offset:5px; }
@media (min-width:62rem) {
  .demo--scena .demo-numbered__inner { grid-template-columns:4rem minmax(0,1.2fr) minmax(0,.9fr); gap:3rem; }
  .demo--scena .demo-programme__inner { grid-template-columns:4rem minmax(0,.85fr) minmax(0,1.4fr); }
  .demo--scena .demo-venue__inner { grid-template-columns:4rem minmax(0,1fr); }
  .demo--scena .demo-numbered__figure { font-size:4rem; }
}
@media (max-width:68.75rem) {
  .demo--scena .demo-hero__inner { gap:2rem; padding-inline:30px; }
  .demo--scena .demo-hero__figure { height:31.25rem; }
  .demo--scena .demo-hero__copy .demo-hero__names { font-size:6.3vw; }
}
@media (max-width:47.5rem) {
  .demo--scena .demo-hero__inner { grid-template-columns:minmax(0,1fr); padding:2rem 22px 4.0625rem; gap:35px; }
  .demo--scena .demo-hero__copy .demo-hero__names { font-size:clamp(3rem,11vw,5.8rem); }
  .demo--scena .demo-hero__names em { display:inline; margin:0 0 0 .1em; }
  .demo--scena .demo-hero__names em::before { font-size:clamp(2.4rem,8.8vw,4.64rem); }
  .demo--scena .demo-hero__names span:first-child { display:inline; }
  .demo--scena .demo-hero__names span:last-child { display:block; }
  .demo--scena .demo-hero__figure { height:25.625rem; margin:0 12px; }
  .demo--scena .demo-hero__figure .demo-figure__img { border-radius:100px 100px 4px 4px; }
  .demo--scena .scena-brand-plus { width:75px; height:75px; font-size:52px; right:17px; bottom:33px; }
  .demo--scena .scena-brand-petal { width:4.5rem; height:4.5rem; right:1rem; top:19rem; }
  .demo--scena h2,.demo--scena .demo-story__title,.demo--scena .demo-dinner__title { font-size:clamp(2rem,8vw,3rem); }
  .demo--scena .demo-moment { grid-template-columns:6rem minmax(0,1fr); gap:1rem; padding:1.5rem 0; }
  .demo--scena .demo-moment__title { font-size:23px; }
  .demo--scena .demo-moment__time { font-size:31px; }
}
@media (max-width:25rem) { .demo--scena .demo-hero__figure { height:22.5rem; } }
/* Preserve the contracted 4:3 mobile frame; covered derivatives fill each frame. */
@media (max-width:61.999rem) {
  .demo--scena .demo-hero__figure:has(.demo-photo-adjusted) { height:auto; }
  .demo--scena .demo-hero__figure .demo-photo-adjusted { height:auto; aspect-ratio:4 / 3; border-radius:12px 5rem 12px 12px; }
}
@media (hover:hover) {
  .demo--scena .demo-cta:hover { background:#2e39dc; border-color:#2e39dc; color:#fff; }
  .demo--scena .demo-header__link:hover { color:var(--d-accent); }
}
@media (prefers-reduced-motion:no-preference) {
  .demo--scena .demo-faq__item[open] .demo-faq__answer,.demo--scena .demo-menu[open] .demo-header__nav { animation:scena-disclose .3s cubic-bezier(.2,.7,.2,1); }
  @keyframes scena-disclose { from { opacity:.4; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
}

/* Static information bars: spread the existing pieces across the available
   width, wrapping whole words on phones. No duplicated accessible content. */
.demo--scena .demo-ticker { overflow:hidden; }
.demo--scena .demo-ticker__text { display:flex; flex-wrap:wrap; justify-content:space-evenly; align-items:center; gap:.5rem 2rem; max-width:none; margin:0; padding:0; text-align:center; }
.demo--scena .demo-ticker__text > span { min-width:0; word-break:normal; overflow-wrap:normal; }
.demo--scena .demo-slash { overflow:hidden; text-align:center; line-height:1.65; word-break:normal; overflow-wrap:normal; }
.demo--scena .demo-programme__title { font-size:clamp(2rem,3.2vw,3rem); max-width:100%; word-break:normal; overflow-wrap:normal; hyphens:none; }
.demo--scena .demo-programme__title > span { display:block; }
@media (min-width:62rem) { .demo--scena .demo-programme__inner { grid-template-columns:6rem minmax(0,1.15fr) minmax(0,1.05fr); } }

/* One native motion system, including the private preview where JS is blocked.
   Entrances use play-once; photo/line timelines follow scroll continuously.
   Unsupported features leave the complete resting composition visible. */
.demo { --motion-ease:cubic-bezier(.22,.75,.18,1); --motion-distance:36px; }
.demo--carta { --motion-time:1050ms; }
.demo--scena { --motion-time:800ms; }
.demo--luce { --motion-time:1350ms; }
.demo--carta .motion-name-line { display:block; }
.demo--luce .motion-name-line,.demo--luce .motion-name-joiner { display:inline-block; }
.demo .demo-hero__names { overflow-wrap:normal; word-break:normal; }
/* Clip a complete name box, never fragmented inline lines or a zero-height &. */
.demo--scena .demo-hero__names span:first-child { display:block; }
.demo--scena .demo-hero__names em { display:block; line-height:1; margin:.35rem 0; }
.demo--scena .demo-hero__names em::before { display:block; }
.demo :is(.demo-story__figure,.demo-pause__figure,.demo-dinner__figure) { position:relative; }
.demo :is(.demo-photo-rendered,.demo-photo-adjusted) { overflow:clip; }
.motion-photo-raw { display:block; position:relative; aspect-ratio:var(--photo-natural-ratio); }
.demo :is(.demo-story__figure,.demo-pause__figure) :is(.demo-photo-rendered,.demo-photo-adjusted) { position:relative; z-index:1; }
.demo :is(.demo-story__figure,.demo-pause__figure)::before { content:''; position:absolute; inset:-12px 12px 12px -12px; border:1px solid var(--d-accent); pointer-events:none; }
.demo--scena .demo-story__figure::before { background:var(--scena-pink); border:0; inset:20px -18px -20px 18px; border-radius:0 100px 0 0; }
.demo--luce .demo-pause__figure::before { border-radius:46% 54% 55% 45%; inset:-15px; border-color:#a9b095; }
.demo-programme__list { position:relative; isolation:isolate; }
.demo .demo-programme__list::after { content:''; position:absolute; inset:0 auto 0 0; width:2px; background:currentColor; transform-origin:top; pointer-events:none; }
.demo--carta .demo-programme__list { padding-left:2rem; }
.demo--carta .demo-programme__list::after { color:var(--d-accent); }
.demo .demo-moment { position:relative; }
.motion-moment-index { display:none; }
.demo--scena .demo-programme__list { padding-left:1.75rem; }
.demo--scena .demo-programme__list::after { color:var(--scena-pink); width:3px; }
.demo--scena .demo-moment::before { content:''; position:absolute; width:13px; height:13px; left:-1.75rem; top:2.25rem; translate:-5px 0; background:var(--scena-pink); border-radius:50%; }
.demo--scena .demo-moment { padding:2.25rem 1rem; margin:0; }
.demo--scena .motion-moment-index { display:block; position:absolute; right:.5rem; top:.35rem; font:500 .7rem/1.2 var(--font-body--family); letter-spacing:.15em; }
.demo--luce .demo-programme__list::after { left:.625rem; background:#6d7854; width:3px; border-radius:100%; }
.demo--luce .demo-moment { border-radius:2rem; padding-inline:1.5rem; margin-left:1rem; }
.demo--luce .demo-moment:nth-child(even) { margin-left:3rem; }
.demo--luce .demo-moment__dot { left:-3.0625rem; }
.demo--luce .demo-moment:nth-child(even) .demo-moment__dot { left:-5.0625rem; }
.demo--luce .demo-moment::after { content:''; position:absolute; left:-2.625rem; top:2.15rem; width:2rem; height:1rem; border-top:1px solid #a9b095; border-radius:50%; pointer-events:none; }
.demo--luce .demo-moment:nth-child(even)::after { left:-4.625rem; width:4rem; }
.demo .demo-maps { position:relative; isolation:isolate; }
.demo--carta .demo-maps { border:1px solid var(--d-line); margin-top:2rem; }
.demo--scena .demo-maps { margin-inline:0 2rem; }
.demo--scena .demo-maps:nth-of-type(even) { margin-inline:2rem 0; }
.demo--luce .demo-maps { border-radius:3rem 1rem 3rem 1rem; }
.demo--scena .demo-dinner__figure { background:var(--scena-pink); padding:clamp(.75rem,2vw,2rem); border-radius:12px; }
.demo--scena .demo-dinner__figure::before { content:''; position:absolute; inset:0; background:var(--d-accent); border-radius:inherit; pointer-events:none; }
.demo--luce .demo-pause { position:relative; isolation:isolate; }
.demo--luce .demo-pause::before { content:''; position:absolute; width:70%; height:80%; inset:10% auto auto -15%; border-radius:44% 56% 62% 38%; background:#f5ebdc; z-index:-1; }
.demo .demo-footer__identity { position:relative; padding-block:2rem; }
.demo .demo-footer__identity::before,.demo .demo-footer__identity::after { content:''; position:absolute; inset:0 0 auto; height:1px; background:currentColor; transform-origin:left; pointer-events:none; }
.demo .demo-footer__identity::after { inset:auto 0 0; transform-origin:right; }
.demo--scena .demo-footer__identity { isolation:isolate; }
.demo--scena .demo-footer__identity::before { width:clamp(5rem,15vw,12rem); height:auto; aspect-ratio:1; inset:-1rem 0 auto auto; border:15px solid var(--d-accent); background:transparent; border-radius:50% 50% 0 0; z-index:-1; opacity:.3; }
.demo--scena .demo-footer__identity::after { width:4rem; height:4rem; border-radius:50%; background:var(--d-accent); inset:auto auto 0 -2rem; z-index:-1; opacity:.3; }
.demo--scena .demo-footer__couple { font-size:clamp(3.1rem,7vw,7rem); }
.demo--luce .demo-footer__identity::before { height:100%; inset:0 -1rem; border:1px solid #eaccaa; background:none; border-radius:47% 53% 60% 40%; }
.demo--luce .demo-footer__identity::after { display:none; }
.demo--luce .demo-footer__identity { padding:3rem 1.5rem; }
.demo-rsvp { position:relative; }
.demo-rsvp::after { content:''; position:absolute; inset:8px; border:1px solid currentColor; opacity:.25; pointer-events:none; transform-origin:top left; }
.demo--luce .demo-rsvp::after { border-radius:2rem; }
.demo .demo-faq__marker { transition:rotate .35s var(--motion-ease); }
.demo .demo-faq__item[open] .demo-faq__marker { rotate:90deg; }
@supports (interpolate-size:allow-keywords) {
 .demo .demo-faq__item { interpolate-size:allow-keywords; }
 .demo .demo-faq__item::details-content { height:0; overflow:clip; transition:height .4s var(--motion-ease),content-visibility .4s allow-discrete; }
 .demo .demo-faq__item[open]::details-content { height:auto; }
}
.demo--scena .demo-ticker__track { display:flex; width:max-content; }
.demo--scena .demo-ticker__text { flex:0 0 auto; width:max-content; min-width:100vw; flex-wrap:nowrap; padding-inline:clamp(1rem,3vw,3rem); gap:3rem; }
.demo--scena .demo-ticker__text > span { flex:none; white-space:nowrap; }
.demo--scena .demo-main > .demo-ticker { padding-inline:0; }
.demo-ticker__control { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; padding:.65rem var(--d-pad) 0; font:500 .8125rem/1.5 var(--font-body--family); cursor:pointer; }
.demo-ticker__control input { width:1.1rem; height:1.1rem; accent-color:var(--d-accent); }
.demo-ticker__control:focus-within { outline:2px solid currentColor; outline-offset:-2px; }
@keyframes carta-type { from { clip-path:inset(0 0 100%); translate:0 26px; } to { clip-path:inset(-10%); translate:0; } }
@keyframes scena-type { from { clip-path:inset(0 0 100%); translate:-.15em .45em; rotate:-3deg; } to { clip-path:inset(-15%); translate:0; rotate:0deg; } }
@keyframes luce-type { from { translate:0 28px; } to { translate:0; } }
@keyframes carta-mask { from { clip-path:inset(12% 12% 30% 12%); } to { clip-path:inset(0); } }
@keyframes scena-arch { from { clip-path:inset(40% 12% 0 round 50% 50% 0 0); } to { clip-path:inset(0 round 0); } }
@keyframes luce-open { from { clip-path:inset(15% 14% round 50%); scale:.92; } to { clip-path:inset(0 round 0); scale:1; } }
@keyframes rule-draw { from { scale:0 1; } to { scale:1; } }
@keyframes route-draw { from { scale:1 0; } to { scale:1; } }
@keyframes frame-draw { from { clip-path:polygon(0 0,0 0,0 0,0 0); } to { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } }
@keyframes pink-arrive { from { translate:40px -30px; rotate:35deg; scale:.55; } to { translate:0; rotate:0deg; scale:1; } }
@keyframes blue-arrive { from { translate:25px 35px; rotate:-90deg; scale:.5; } to { translate:0; rotate:0deg; scale:1; } }
@keyframes paper-arrive { from { translate:0 45px; rotate:-3deg; } to { translate:0; rotate:0deg; } }
@keyframes poster-arrive { from { translate:35px 45px; rotate:3deg; } to { translate:0; rotate:0deg; } }
@keyframes soft-arrive { from { translate:0 38px; border-radius:5rem; } to { translate:0; } }
@keyframes type-arrive { from { translate:0 var(--motion-distance); } to { translate:0; } }
@keyframes photo-travel { from { scale:1.16; translate:0 2%; } to { scale:1.03; translate:0 -1%; } }
@keyframes editorial-plane { from { translate:0 24px; } to { translate:0 -24px; } }
@keyframes counter-plane { from { translate:0 -20px; rotate:-3deg; } to { translate:0 20px; rotate:2deg; } }
@keyframes number-track { from { translate:0 50px; } to { translate:0 -45px; } }
@keyframes scena-panel { from { clip-path:inset(0 0 0 0); } to { clip-path:inset(0 0 0 100%); } }
@keyframes carta-emphasis { 0% { translate:0 8px; scale:.94; } 45% { translate:0; scale:1.06; } 100% { translate:0; scale:1; } }
@keyframes scena-emphasis { 0%,43%,67%,100% { background:transparent; } 50%,60% { background:#ffffff24; } }
@keyframes luce-emphasis { 0%,100% { background:transparent; } 30%,65% { background:#ffffffb0; } }
@keyframes dot-emphasis { 0%,43%,67%,100% { scale:.6; } 50%,60% { scale:1.4; } }
@keyframes soft-field { from { scale:.83; rotate:-7deg; } to { scale:1.04; rotate:5deg; } }
@keyframes wedding-ticker { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:no-preference) {
 .demo--carta .motion-name-line { animation:carta-type 1050ms var(--motion-ease) both; }
 .demo--carta .motion-name-line + .motion-name-line { animation-delay:170ms; }
 .demo--scena .demo-hero__names > * { animation:scena-type 900ms var(--motion-ease) both; }
 .demo--scena .demo-hero__names > :nth-child(2) { animation-delay:100ms; }
 .demo--scena .demo-hero__names > :nth-child(3) { animation-delay:210ms; }
 .demo--luce .demo-hero__names > * { animation:luce-type 1200ms var(--motion-ease) both; }
 .demo--luce .demo-hero__names > :nth-child(2) { animation-delay:160ms; }
 .demo--luce .demo-hero__names > :nth-child(3) { animation-delay:280ms; }
 .demo .demo-hero__intro { animation:type-arrive 1000ms var(--motion-ease) 180ms both; }
 .demo--carta .demo-hero__figure :is(.demo-photo-rendered,.demo-photo-adjusted) { animation:carta-mask 1400ms var(--motion-ease) both; }
 .demo--carta .demo-hero__figure::after { animation:frame-draw 1500ms var(--motion-ease) both; }
 .demo--carta .demo-hero__scroll::before { animation:rule-draw 1100ms var(--motion-ease) both; }
 .demo--scena .demo-hero__figure :is(.demo-photo-rendered,.demo-photo-adjusted) { animation:scena-arch 1250ms var(--motion-ease) 100ms both; }
 .demo--scena .scena-brand-petal { animation:pink-arrive 1200ms var(--motion-ease) 120ms both; }
 .demo--scena .scena-brand-plus { animation:blue-arrive 1200ms var(--motion-ease) 200ms both; }
 .demo--luce .demo-hero__figure :is(.demo-photo-rendered,.demo-photo-adjusted) { animation:luce-open 1600ms var(--motion-ease) both; }
 .demo--luce .demo-hero__field { animation:soft-field 1800ms var(--motion-ease) both; }
 .demo--scena .demo-ticker__track { animation:wedding-ticker 32s linear infinite; }
 .demo--scena .demo-ticker:is(:hover,:focus-within,:has(input:checked)) .demo-ticker__track { animation-play-state:paused; }
 .demo .demo-cta { transition:background-color .25s,color .25s,box-shadow .25s; }
 .demo--carta .demo-cta:hover { box-shadow:4px 4px 0 var(--d-line); }
 .demo--scena .demo-cta:hover { box-shadow:inset 0 -4px 0 #efb7c8; }
 .demo--luce .demo-cta:hover { box-shadow:0 0 0 4px #a9b09540; }
 .demo-menu[open] .demo-header__nav { animation:type-arrive 350ms var(--motion-ease); --motion-distance:10px; }
 @supports (animation-trigger:--enter play-once) {
  .demo :is(.demo-maps,.demo-story__title,.demo-invite__title,.demo-pause__title,.demo-dinner__title,.demo-programme__title,.demo-logistics__title,.demo-faq-band__title,.demo-card,.demo-gift__inner,.demo-logistics__row,.demo-venue__shuttle,.demo-footer__couple,.demo-rsvp__title) {
   trigger-scope:--enter; timeline-trigger:--enter view() entry 12% exit 100%;
   animation:type-arrive var(--motion-time) var(--motion-ease) both;
   animation-trigger:--enter play-once;
  }
  .demo--carta .demo-maps { animation-name:paper-arrive; }
  .demo--scena .demo-maps { animation-name:poster-arrive; }
  .demo--luce .demo-maps { animation-name:soft-arrive; }
  .demo--carta :is(.demo-card,.demo-venue__shuttle) { animation-name:paper-arrive; }
  .demo--scena :is(.demo-card,.demo-venue__shuttle) { animation-name:poster-arrive; }
  .demo--luce :is(.demo-gift__inner,.demo-logistics__row,.demo-venue__shuttle) { animation-name:soft-arrive; }
  .demo-gift__inner .demo-card { animation:none; }
  .demo--scena :is(.demo-story__title,.demo-programme__title,.demo-footer__couple) { animation-name:scena-type; }
  .demo--carta :is(.demo-story__title,.demo-footer__couple) { animation-name:carta-type; }
 }
 @supports (animation-timeline:view()) {
  .demo :is(.demo-story__figure,.demo-pause__figure,.demo-dinner__figure) { view-timeline:--photograph; }
  .demo :is(.demo-story__figure,.demo-pause__figure,.demo-dinner__figure) :is(.demo-photo-rendered,.demo-photo-adjusted) :is(img,svg) { animation:photo-travel 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% exit 100%; }
  .demo--carta .demo-dinner__figure :is(.demo-photo-rendered,.demo-photo-adjusted) { animation:carta-mask 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% entry 100%; }
  .demo--scena .demo-dinner__figure :is(.demo-photo-rendered,.demo-photo-adjusted) { animation:scena-arch 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% entry 100%; }
  .demo--scena .demo-dinner__figure::before { animation:scena-panel 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% entry 100%; }
  .demo--luce .demo-pause__figure :is(.demo-photo-rendered,.demo-photo-adjusted) { animation:luce-open 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% entry 100%; }
  .demo :is(.demo-story__figure,.demo-pause__figure)::before { animation:frame-draw 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% entry 100%; }
  .demo--scena .demo-story__figure::before { animation:counter-plane 1ms linear both; animation-timeline:--photograph; animation-range:entry 0% exit 100%; }
  .demo :is(.demo-story__copy,.demo-numbered__copy,.demo-pause__copy,.demo-invite__inner) { animation:editorial-plane 1ms linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  .demo--scena #storia .demo-numbered__figure { animation:number-track 1ms linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  .demo-programme__list { view-timeline:--programme; }
  .demo .demo-programme__list::after { animation:route-draw 1ms linear both; animation-timeline:--programme; animation-range:entry 60% exit 10%; }
  .demo-moment { view-timeline:--moment; }
  .demo--carta .demo-moment__time { animation:carta-emphasis 1ms linear both; animation-timeline:--moment; animation-range:entry 0% exit 100%; }
  .demo--scena .demo-moment { animation:scena-emphasis 1ms linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  .demo--luce .demo-moment { animation:luce-emphasis 1ms linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  .demo--scena .demo-moment::before,.demo--luce .demo-moment__dot { animation:dot-emphasis 1ms linear both; animation-timeline:--moment; animation-range:entry 0% exit 100%; }
  .demo--luce .demo-maps__preview { animation:luce-open 1ms linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
  .demo--luce .demo-pause::before { animation:soft-field 1ms linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  .demo-footer__identity { view-timeline:--signature; }
  .demo .demo-footer__identity::before,.demo .demo-footer__identity::after { animation:rule-draw 1ms var(--motion-ease) both; animation-timeline:--signature; animation-range:entry 0% entry 100%; }
  .demo--scena .demo-footer__identity::before { animation-name:blue-arrive; }
  .demo--scena .demo-footer__identity::after { animation-name:pink-arrive; }
  .demo--luce .demo-footer__identity::before { animation-name:soft-field; }
  .demo-rsvp { view-timeline:--reply; }
  .demo-rsvp::after { animation:frame-draw 1ms linear both; animation-timeline:--reply; animation-range:entry 0% entry 65%; }
 }
 .demo :is(.demo-maps,.demo-card,.demo-gift__inner,.demo-logistics__row,.demo-venue__shuttle):focus-within { animation:none; translate:none; rotate:none; }
 .demo-rsvp:focus-within::after { animation:none; }
}
@media (min-width:62rem) and (prefers-reduced-motion:no-preference) {
 .demo--carta .demo-programme__copy,.demo--scena .demo-programme__copy,.demo--scena .demo-programme .demo-numbered__figure { position:sticky; top:9rem; align-self:start; }
 .demo--scena .demo-programme__inner { align-items:start; }
}
@media (max-width:61.999rem) {
 .demo { --motion-distance:22px; }
 .demo--scena .demo-maps,.demo--scena .demo-maps:nth-of-type(even) { margin-inline:0; }
 .demo--scena .demo-moment { grid-template-columns:5.1rem minmax(0,1fr); gap:.75rem; padding:2rem .5rem; }
 .demo--scena .demo-moment__time { font-size:1.8rem; }
 .demo--luce .demo-moment { margin-left:.5rem; padding-inline:.75rem; }
 .demo--luce .demo-moment:nth-child(even) { margin-left:1.25rem; }
 .demo--luce .demo-moment__dot { left:-2.5625rem; }
 .demo--luce .demo-moment:nth-child(even) .demo-moment__dot { left:-3.3125rem; }
 .demo--luce .demo-moment::after { left:-2.125rem; width:1.5rem; }
 .demo--luce .demo-moment:nth-child(even)::after { left:-2.875rem; width:2.25rem; }
 .demo--luce .demo-footer__identity { padding-inline:0; }
 @keyframes editorial-plane { from { translate:0 10px; } to { translate:0 -10px; } }
 @keyframes photo-travel { from { scale:1.1; translate:0 1%; } to { scale:1.02; translate:0 -1%; } }
 @keyframes poster-arrive { from { translate:0 28px; rotate:1deg; } to { translate:0; rotate:0deg; } }
}
@media (prefers-reduced-motion:reduce) {
 .demo *, .demo *::before,.demo *::after,.demo details::details-content { animation:none!important; transition:none!important; }
 .demo--scena .demo-ticker__track { width:100%; }
 .demo--scena .demo-ticker__text { width:100%; min-width:0; flex-wrap:wrap; gap:.5rem 2rem; }
 .demo--scena .demo-ticker__text > span { white-space:normal; flex:0 1 auto; }
 .demo--scena .demo-ticker__text[aria-hidden],.demo-ticker__control { display:none; }
}