/* ---------------------------------------------------------------
   Wedding site — shared stylesheet
   Open-editorial restyle matched to the announcement page:
   hairline rules instead of boxes, no corner radius, lighter
   serif headings, Classical tokens (#f3f2f2 / #201f1d / #b68235).

   Google Fonts link for every page head:
   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=Courier+Prime&display=swap
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Classical tokens — the welcome page's inline styles read these too */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 5%, transparent);
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;
  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;
  --space-1: 4.6px;  --space-2: 9.2px;  --space-3: 13.8px; --space-4: 18.4px;
  --space-5: 23px;   --space-6: 27.6px; --space-7: 32.2px; --space-8: 36.8px; --space-10: 48px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* aliases used by the older selectors below */
  --ink: var(--color-text);
  --ink-soft: var(--color-neutral-700);
  --cream: var(--color-bg);
  --parchment: var(--color-neutral-100);
  --stone: var(--color-surface);
  --gold: var(--color-accent);
  --gold-deep: var(--color-accent-700);
  --gold-dark: var(--color-accent-800);
  --line: var(--color-divider);

  /* Domaine Display Narrow is licensed — it renders where installed,
     Cormorant Garamond carries it everywhere else */
  --font-display: "Domaine Display Narrow", "Cormorant Garamond", "Garamond", "Georgia", serif;
  --font-heading: var(--font-display);
  --font-heading-weight: 500;
  --font-body: "Lora", "Georgia", serif;
  --font-mono: "Courier Prime", ui-monospace, monospace;
}

@font-face {
  font-family: "Domaine Display Narrow";
  src: local("Domaine Display Narrow Medium"), local("DomaineDispNarrow-Medium");
  font-weight: 500;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--gold) 24%, transparent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ----- Site header (fixed hairline bar, no blur) ------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem 2.5rem;
  margin: 0 -1.25rem;
  padding: 0.9rem 1.5rem;
  background: var(--cream);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

/* groups nav + language picker so the brand/menu gap can grow independently
   of the gap between nav links */
.site-header-menu {
  display: flex;
  align-items: baseline;
  gap: 0.5rem 1.75rem;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.35rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--gold-deep);
}

.site-nav a.active::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--gold);
}

/* ----- Language picker --------------------------------------------- */

.lang-button {
  anchor-name: --lang-button;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-button:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-deep);
}

.lang-menu {
  position: fixed;
  inset: auto 1rem auto auto;
  top: 3.9rem;
  margin: 0;
  min-width: 11rem;
  padding: 0.4rem 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--parchment);
  box-shadow: var(--shadow-md);
}

@supports (anchor-name: --a) {
  .lang-menu {
    inset: auto;
    position-anchor: --lang-button;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline;
    margin: 0.45rem 0 0;
  }
}

.lang-menu::backdrop {
  background: transparent;
}

.lang-menu a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
  text-decoration: none;
}

.lang-menu a:hover {
  background: var(--stone);
  color: var(--ink);
}

.lang-menu a.active {
  color: var(--gold-deep);
}

/* ----- Hamburger menu (shared: welcome page always shows it; other
   pages swap to it from .site-header once the inline menu can't fit) --- */

.menu-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 46px; height: 46px; padding: 0;
  background: color-mix(in srgb, var(--color-neutral-900) 5%, transparent);
  border: none; border-radius: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: none; cursor: pointer; transition: background-color .25s ease, opacity .35s ease;
}
.menu-toggle::after { content: none; animation: none; }
.menu-toggle:hover { background: color-mix(in srgb, var(--color-neutral-900) 10%, transparent); transform: none; box-shadow: none; border: none; }
.menu-toggle span { display: block; width: 18px; height: 1px; background: var(--color-text); transition: width .25s ease; }
.menu-toggle span:nth-child(2) { width: 13px; }
.menu-toggle:hover span { width: 18px; }
.menu-panel {
  position: fixed; inset: auto 18px auto auto; top: 72px; z-index: 60;
  margin: 0; min-width: 14.5rem; padding: 0.75rem 0.5rem;
  border: none; border-radius: 4px; background: var(--color-neutral-100);
  box-shadow: var(--shadow-lg);
}
@supports (anchor-name: --a) {
  .menu-toggle { anchor-name: --menu-toggle; }
  .menu-panel {
    inset: auto; position-anchor: --menu-toggle;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline;
    margin: 0.5rem 0 0;
  }
}
.menu-panel::backdrop { background: transparent; }
.menu-panel a {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem 1rem; border-radius: 4px;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-700); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.menu-panel a svg { flex: none; stroke: var(--color-accent-600); transition: stroke .2s ease; }
.menu-panel a:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); }
.menu-panel a:hover svg { stroke: var(--color-accent-700); }
.menu-panel a.active { color: var(--color-accent-700); }
.menu-panel a.active svg { stroke: var(--color-accent-700); }
.menu-panel .menu-langs {
  display: flex; gap: 0; justify-content: space-around; margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px solid var(--color-divider);
}
.menu-panel .menu-langs a { padding: 0.55rem 1rem; color: var(--color-neutral-600); }
.menu-panel .menu-langs a.active { color: var(--color-accent-700); }

/* .site-header pages: nav + lang picker fit inline until the header runs
   out of room, then swap to the same burger the welcome page always shows.
   The header partial's script measures the inline menu and toggles
   .is-compact — the inline menu never wraps, whatever the locale. While
   compact, the menu stays laid out (absolute + invisible) so its natural
   width can still be measured to decide when it fits again. */
.site-header .menu-toggle { display: none; }

.site-header.is-compact {
  /* the hidden inline menu keeps its natural width for measuring; clip it
     so it can't widen the page and cause a horizontal scrollbar */
  overflow: clip;
}

.site-header.is-compact .site-header-menu {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.site-header.is-compact .menu-toggle { display: flex; }

/* inside the sticky header the burger sits in the bar itself, vertically
   centred on the brand (the welcome page keeps it fixed top-right) */
.site-header .menu-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5rem;
  margin: auto 0;
}

/* no-JS fallback */
@media (max-width: 760px) {
  .site-header:not(.has-fit-check) .site-header-menu { display: none; }
  .site-header:not(.has-fit-check) .menu-toggle { display: flex; }
}

/* ----- Hero (unboxed — the rules carry it) -------------------------- */

.hero {
  max-width: 46rem;
  margin: 4.5rem auto 0;
  padding: 0 0 2.75rem;
  border: 0;
  outline: none;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero-meta {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}

/* ----- Ornamental divider ------------------------------------------ */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.75rem auto;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}

.ornament::before,
.ornament::after {
  content: "";
  width: 4.5rem;
  height: 1px;
  background: var(--line);
}

/* ----- Main content (open sections, hairline-parted) ----------------- */

main {
  max-width: 40rem;
  margin: 0 auto;
}

.card {
  margin-top: 0;
  padding: 3.5rem 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.card + .card {
  border-top: 1px solid var(--line);
}

main h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.01em;
}

.lead {
  margin: 0 auto;
  color: var(--ink-soft);
}

/* ----- Detail list --------------------------------------------------- */

.details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 3rem;
  margin: 2rem 0;
  padding: 1.75rem 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.details div {
  min-width: 10rem;
}

.details dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.details dd {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-feature-settings: "tnum";
}

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

.day-tagline {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.schedule {
  display: grid;
  grid-template-columns: max-content 1fr;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  text-align: left;
}

/* rows share the list's columns (subgrid) so "late morning" and "14:00"
   line up within a day; a row without a time spans the full width */
.schedule li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 1.5rem;
  padding: 0.9rem 0.25rem;
}

.schedule li:not(:has(.time)) .event {
  grid-column: 1 / -1;
}

.schedule li + li {
  border-top: 1px solid var(--line);
}

.schedule .time {
  min-width: 3.6rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}

.program-note {
  margin-top: 3.25rem !important;
}

.schedule .event strong {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.schedule .event span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ----- Travel & accommodation ----------------------------------------- */

.address {
  margin: 4rem 0 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}

.map {
  margin: 1rem 0 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-link {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.info-list {
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
  text-align: left;
}

.info-list li {
  padding: 1.1rem 0.25rem;
}

.info-list li + li {
  border-top: 1px solid var(--line);
}

.info-list h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.info-list .meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.info-list p {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.note {
  margin: 1.25rem auto 0;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .6rem .6rem;
}

/* ----- Buttons & links ------------------------------------------------ */

.button,
button {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 0.85rem 2.5rem;
  border: 1px solid var(--gold-deep);
  border-radius: 4px;
  background: var(--gold-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease, transform 0.3s ease;
}

.button::after,
button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  left: -60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 100%);
  animation: ctaShimmer 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}

@keyframes ctaShimmer {
  0% { left: -60%; }
  55%, 100% { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .button::after,
  button::after {
    animation: none;
    display: none;
  }
}

.button:hover,
button:hover {
  background: var(--gold-dark);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.button:active,
button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.lang-button,
.lang-button:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.lang-button::after {
  content: none;
}

.text-link {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.1rem;
}

.text-link:hover {
  color: var(--ink);
}

/* ----- Forms ---------------------------------------------------------- */

form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  text-align: left;
}

form[hidden] {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

form label,
form legend {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.hint {
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--gold-deep);
  font-style: italic;
}

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  padding: 0.75rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 4px;
  background: #fdfcfb;
  color: var(--ink);
  caret-color: var(--gold);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-neutral-500);
  font-style: italic;
  opacity: 1;
}

input[type="number"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

textarea {
  resize: vertical;
  min-height: 5.5rem;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
    0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* attendance-dependent fields — hidden when the guest declines */
#attending-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#attending-details[hidden] {
  display: none;
}

.declined-note {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  text-align: center;
  color: var(--gold-deep);
}

.form-error {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
  color: #a63d2a;
}

/* ----- Fill-in-the-blanks sentences ----------------------------------- */

.sentence {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 2.1;
  color: var(--ink);
}

select.blank {
  display: inline-block;
  width: auto;
  field-sizing: content;
  margin: 0 0.1rem;
  padding: 0 1.35rem 0.1rem 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--gold);
  border-radius: 0;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a06f24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 0.3rem center / 0.55rem auto;
  box-shadow: none;
  color: var(--gold-deep);
  font: inherit;
  font-style: italic;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

select.blank:hover {
  color: var(--gold-dark);
  border-color: transparent;
  border-bottom-color: var(--gold-dark);
}

select.blank:focus {
  outline: none;
  border-color: transparent;
  border-bottom-color: var(--gold-dark);
  background-color: color-mix(in srgb, var(--gold) 10%, transparent);
  box-shadow: none;
}

fieldset legend {
  padding: 0;
  margin-bottom: 0.45rem;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.choices label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 4px;
  background: #fdfcfb;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
}

.choices .chip-icon {
  flex: none;
  color: var(--gold-deep);
}

.choices label:hover {
  border-color: var(--gold);
}

.choices input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.choices label:has(input:checked) {
  border-color: var(--gold-deep);
  background: var(--color-accent-100);
  color: var(--gold-dark);
  box-shadow: none;
}

.choices label:has(input:checked) .chip-icon {
  color: var(--gold-dark);
}

.choices label:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

form button {
  align-self: center;
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .button-pop {
    animation: buttonPop 0.35s ease;
  }
}

@keyframes buttonPop {
  50% {
    transform: scale(1.06);
  }
}

/* ----- Song field: notes that dance on focus -------------------------- */

.song-notes {
  display: inline-block;
  margin-left: 0.2rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  font-size: 0.9rem;
}

.song-note {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .field:focus-within .song-note {
    animation: noteBounce 0.7s ease-in-out infinite alternate;
  }

  .field:focus-within .song-note + .song-note {
    animation-delay: 0.35s;
  }
}

@keyframes noteBounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

/* ----- Post-submit confirmation ---------------------------------------- */

.confirmation {
  padding: 1.5rem 0 1rem;
}

.confirmation .lead {
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .confirmation:not([hidden]) {
    animation: vt-fade-in 0.5s ease-out both;
  }

  .flourish {
    animation: fleuronIn 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.1) both;
  }

  .flourish::before,
  .flourish::after {
    animation: lineGrow 1s 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
}

@keyframes fleuronIn {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lineGrow {
  from {
    width: 0;
  }
  to {
    width: 4.5rem;
  }
}

.back-link {
  margin-top: 2rem;
}

/* ----- Confetti --------------------------------------------------------- */

.confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 100;
}

.confetti i {
  position: absolute;
  display: block;
}

/* ----- View transitions ------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: vt-fade-out 0.18s ease-in both;
  }

  ::view-transition-new(root) {
    animation: vt-fade-in 0.32s ease-out 0.1s both;
  }

  .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation: none;
  }

  .site-nav a.active::after {
    view-transition-name: nav-underline;
  }

  ::view-transition-group(nav-underline) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ----- Small screens ----------------------------------------------------- */

@media (max-width: 480px) {
  .hero {
    padding: 0 0 2rem;
    margin-top: 3rem;
  }

  .card {
    padding: 2.5rem 0;
  }

  .details {
    flex-direction: column;
    gap: 1.25rem;
  }
}