@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..700,30..100&family=Inter:wght@400;500;600&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────── */
/* Letterpress invitation register, ink palette: deep violet identity with
   deep blue as second voice. All neutrals tinted toward violet so paper
   never reads "pure white". Token names preserved so koszty.html and
   zaproszenia.html admin panels inherit the new palette unchanged. */
:root {
  /* Paper — cool off-white, slightly tinted toward the ink hue */
  --bg:           oklch(0.982 0.008 290);   /* the page */
  --white:        oklch(0.992 0.005 290);   /* raised surfaces */
  --paper-deep:   oklch(0.955 0.014 290);   /* section-alt bg */

  /* Ink — near-black with a violet undertone so it harmonizes with accents */
  --text:         oklch(0.22  0.045 285);
  --text-light:   oklch(0.44  0.045 285);   /* AA on paper */
  --ink-faint:    oklch(0.62  0.035 285);

  /* Accents (Committed: violet leads, blue partners) */
  --accent:       oklch(0.40  0.165 295);   /* deep violet — primary identity */
  --accent-soft:  oklch(0.56  0.135 295);   /* hover, secondary emphasis */
  --accent-2:     oklch(0.44  0.135 252);   /* deep blue — the "& Kuba" voice */
  --accent-2-soft: oklch(0.60 0.115 252);
  --moss:         oklch(0.52  0.07  150);   /* status: ok */

  /* Rules & shadows — tinted toward violet */
  --rule:         oklch(0.84  0.025 290);   /* hairline */
  --rule-soft:    oklch(0.93  0.015 290);
  --shadow:       0 1px 0 oklch(0.84 0.025 290 / 0.6);
  --shadow-lg:    0 10px 28px oklch(0.22 0.045 285 / 0.10);

  /* Backward-compat aliases (admin pages reference these by name) */
  --violet-pale:  var(--paper-deep);
  --violet-light: var(--rule);
  --violet-mid:   var(--accent-soft);
  --violet-deep:  var(--accent);
  --blue-pale:    var(--paper-deep);
  --blue-light:   var(--rule);
  --blue-mid:     var(--accent-2-soft);
  --blue-deep:    var(--accent-2);
  --lilac:        var(--accent-soft);
  --pink-pale:    var(--paper-deep);

  /* Geometry */
  --radius:       4px;
  --radius-sm:    2px;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);    /* ease-out-quart */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  color: var(--text);
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Kill any leftover animated-blob system from the previous design. */
.blob-bg, .hero-blob { display: none !important; }

/* ─── VIEW TRANSITIONS ───────────────────────── */
@view-transition { navigation: auto; }
nav { view-transition-name: site-nav; }
::view-transition-old(site-nav),
::view-transition-new(site-nav) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { animation: 200ms var(--ease-out) both vt-page-out; }
::view-transition-new(root) { animation: 340ms var(--ease-out) both vt-page-in; }
@keyframes vt-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-page-in  { from { opacity: 0; transform: translateY(10px); } }
html.pt-loading { opacity: 0 !important; }
html.pt-ready { transition: opacity 280ms var(--ease-out); }

/* ─── NAVIGATION ─────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nav-logo {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.35rem;
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-logo span {
  color: var(--accent-2);
  font-style: italic;
  padding: 0 0.05em;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: baseline;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  transition: color 180ms var(--ease-out);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text);
  transition: transform 220ms var(--ease-out), opacity 200ms ease;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ─── HERO ───────────────────────────────────── */
.hero {
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5rem 2rem 4rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.hero-inner { position: relative; z-index: 1; max-width: 56rem; }

.hero-ornament,
.hero h1,
.hero-date,
.countdown,
.hero-inner .btn {
  animation: heroFadeUp 720ms var(--ease-out) both;
}
.hero-ornament   { animation-delay:  60ms; }
.hero h1         { animation-delay: 140ms; }
.hero-date       { animation-delay: 280ms; }
.countdown       { animation-delay: 420ms; }
.hero-inner .btn { animation-delay: 560ms; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Small-caps eyebrow above the names */
.hero-ornament {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 2.5rem;
}
.hero-ornament::before,
.hero-ornament::after {
  content: '';
  width: 2.4rem;
  height: 1px;
  background: var(--rule);
}

.hero h1 {
  font-size: clamp(4rem, 13vw, 9.5rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hero h1 .amp {
  color: var(--accent-2);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: 1.05em;
  padding: 0 0.04em;
  display: inline-block;
  transform: translateY(0.06em);
}

.hero-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 2.25rem 0 3.5rem;
  text-indent: 0.5em;
}

/* Countdown — typographic, no chips */
.countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 3rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.5rem;
  padding: 0 1.4rem;
  position: relative;
}
.countdown-unit + .countdown-unit::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: var(--rule);
}
.countdown-unit .num {
  font-family: 'Fraunces', serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  color: var(--text);
  line-height: 1;
}
.countdown-unit .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.95rem 2rem;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), transform 140ms var(--ease-out);
  border: 1px solid var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Secondary / outline button (used in inline overrides on admin pages) */
.btn-sec, .btn-logout {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-sec:hover, .btn-logout:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ─── LAYOUT ─────────────────────────────────── */
.section { padding: 7rem 2rem; }
.section-alt { background: var(--paper-deep); }
.container { max-width: 64rem; margin: 0 auto; }

/* Section header: tiny eyebrow label + display heading, hairline rule below */
.section-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
}
.section-header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 0.75rem;
}

/* Replace the old ✿❀✿ ornament: render as a centered hairline rule only.
   Existing HTML may still contain emoji text — hide it. */
.section-divider {
  position: relative;
  height: 1px;
  width: 4rem;
  background: var(--rule);
  margin: 1.25rem auto 1.25rem;
  font-size: 0;
  color: transparent;
}
.section-divider::before,
.section-divider::after { content: none; }

.section-header .subtitle {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-light);
  margin-top: 1.1rem;
  max-width: 38rem;
  margin-left: auto; margin-right: auto;
  line-height: 1.6;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.25rem;
  box-shadow: none;
  border: 1px solid var(--rule);
}

/* Welcome grid (index.html) */
.welcome-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 5rem;
  align-items: start;
}
.welcome-text {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.75;
  max-width: 32rem;
}
.welcome-text p { margin-bottom: 1.1rem; }
.welcome-text p:last-of-type { margin-bottom: 1.6rem; }
.welcome-text strong { font-weight: 600; color: var(--accent); }

/* Info "cards" — restyled as definition rows, no card chrome, no icons */
.info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.info-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  transition: none;
}
.info-card .icon {
  font-size: 0;       /* hide any emoji */
  display: none;
}
.info-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}
.info-card p {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'SOFT' 30;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

/* ─── FORMS ──────────────────────────────────── */
.form-container { max-width: 42rem; margin: 0 auto; }
.form-container.card {
  border: none;
  padding: 0;
  background: transparent;
}

.form-group { margin-bottom: 2rem; }
.form-group > label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--text-light);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--text);
  background: transparent;
  transition: border-color 200ms var(--ease-out);
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-faint); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
}
.form-group textarea { min-height: 8rem; resize: vertical; padding: 0.85rem 0; }
.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-light) 50%), linear-gradient(135deg, var(--text-light) 50%, transparent 50%);
  background-position: calc(100% - 14px) 1.25rem, calc(100% - 8px) 1.25rem;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

.radio-group, .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  margin-top: 0.35rem;
}
.radio-option, .checkbox-option {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--text);
  padding: 0.4rem 0;
}
.radio-option input, .checkbox-option input {
  width: 1rem; height: 1rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* ─── TIMELINE ───────────────────────────────── */
.timeline { position: relative; max-width: 50rem; margin: 0 auto; }
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.4rem; bottom: 0.4rem;
  width: 1px;
  background: var(--rule);
  transform: translateX(-50%);
}

.tl-item {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  margin-bottom: 3.5rem;
  position: relative;
}
.tl-item:nth-child(odd)  .tl-content { grid-column: 1; text-align: right; padding-right: 2.5rem; }
.tl-item:nth-child(odd)  .tl-empty   { grid-column: 3; }
.tl-item:nth-child(even) .tl-content { grid-column: 3; padding-left: 2.5rem; }
.tl-item:nth-child(even) .tl-empty   { grid-column: 1; }

.tl-dot { grid-column: 2; grid-row: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 0.45rem; z-index: 1; }
.tl-dot-inner {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  outline: 4px solid var(--bg);
  flex-shrink: 0;
}

.tl-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.tl-time {
  display: block;
  font-family: 'Fraunces', serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
  font-size: 2.1rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.4rem;
  letter-spacing: -0.015em;
}
.tl-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.tl-content p {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.65;
  max-width: 22rem;
}
.tl-item:nth-child(odd) .tl-content p { margin-left: auto; }

/* ─── GALLERY ────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.gallery-item {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover { border-color: var(--accent); }
  .gallery-item:hover img { transform: scale(1.04); }
}
.gallery-item:active { transform: scale(0.99); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--ease-out); }
.gallery-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--ink-faint);
  gap: 0.6rem;
}
.gallery-placeholder svg { width: 28px; height: 28px; opacity: 0.45; }
.gallery-placeholder span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
}

.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0.18 0.02 25 / 0.94);
  z-index: 1000;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; animation: lightboxFadeIn 220ms var(--ease-out) forwards; }
.lightbox.open img { animation: lightboxImgIn 320ms var(--ease-out) forwards; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 0; box-shadow: 0 30px 80px oklch(0 0 0 / 0.4); }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.75rem;
  background: none; border: none;
  color: var(--bg);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
  opacity: 0.7;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lightbox-close:hover { opacity: 1; transform: rotate(90deg); }
}
@keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxImgIn  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ─── MUSIC ──────────────────────────────────── */
.music-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.music-layout .card {
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule);
  padding: 2rem;
}
.music-layout .card:last-child { margin-bottom: 0; }
.spotify-embed {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.spotify-placeholder {
  background: var(--paper-deep);
  border: 1px dashed var(--rule);
  border-radius: 0;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--text-light);
}
.spotify-placeholder h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.8rem;
}
.spotify-placeholder code {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
}

/* ─── COSTS / ADMIN PANEL ────────────────────── */
.cost-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0;
  margin-bottom: 3rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cost-stat {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1.5rem 1.25rem;
  box-shadow: none;
  text-align: left;
  border-right: 1px solid var(--rule);
}
.cost-stat:last-child { border-right: none; }
.cost-stat .amount {
  font-family: 'Fraunces', serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.85rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.cost-stat .label {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.5rem;
}

.cost-table-wrap, .tbl-wrap {
  overflow-x: auto;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rule);
  background: var(--white);
}
table { width: 100%; border-collapse: collapse; background: var(--white); }
table thead tr { background: var(--paper-deep); }
table th {
  padding: 0.95rem 1.2rem;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  border-bottom: 1px solid var(--rule);
}
table td {
  padding: 0.95rem 1.2rem;
  color: var(--text);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.95rem;
}
table tbody tr td { transition: background 140ms ease; }
table tbody tr:hover td { background: var(--paper-deep); }
table tfoot td {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  border-top: 1px solid var(--rule);
  border-bottom: none;
  background: var(--bg);
}

.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
}
.badge-ok      { color: var(--moss); }
.badge-pending { color: var(--accent-soft); }
.badge-partial { color: var(--accent); }

/* ─── PASSWORD OVERLAY ───────────────────────── */
#password-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.pw-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 26rem;
  width: 100%;
  border: 1px solid var(--rule);
  animation: pwBoxEnter 360ms var(--ease-out) both;
}
@keyframes pwBoxEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pw-box h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}
.pw-box p {
  color: var(--text-light);
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
}
.pw-input-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.pw-input-row input {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  outline: none;
  background: var(--bg);
  transition: border-color 200ms var(--ease-out);
}
.pw-input-row input:focus { border-color: var(--accent); }
.pw-error { color: var(--accent); font-size: 0.85rem; display: none; margin-top: 0.25rem; }

/* ─── FOOTER ─────────────────────────────────── */
footer {
  background: var(--paper-deep);
  text-align: center;
  padding: 4.5rem 2rem 3rem;
  border-top: 1px solid var(--rule);
}
.footer-names {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 300;
  color: var(--text);
  font-style: italic;
  letter-spacing: -0.015em;
  margin-bottom: 0.4rem;
}
.footer-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 2rem;
}
.footer-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-links a {
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  transition: color 180ms var(--ease-out);
}
.footer-links a:hover { color: var(--accent); }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 880px) {
  nav { padding: 1rem 1.5rem; position: relative; }
  .nav-links {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg);
    flex-direction: column; gap: 0;
    border-bottom: 1px solid var(--rule);
    z-index: 200;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out), visibility 0ms 220ms;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out), visibility 0ms 0ms;
  }
  .nav-links li a { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--rule-soft); }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--accent); }
  .hamburger { display: flex; }

  .welcome-grid, .music-layout { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .timeline::before { left: 16px; transform: none; }
  .tl-item { grid-template-columns: 32px 1fr; }
  .tl-item:nth-child(odd) .tl-content,
  .tl-item:nth-child(even) .tl-content {
    grid-column: 2; text-align: left;
    padding-left: 1.5rem; padding-right: 0;
  }
  .tl-item:nth-child(odd) .tl-content p { margin-left: 0; }
  .tl-item:nth-child(odd) .tl-empty,
  .tl-item:nth-child(even) .tl-empty { display: none; }
  .tl-dot { grid-column: 1; }

  .section { padding: 4.5rem 1.5rem; }
  .footer-links { gap: 1.25rem; }
  .cost-stat { border-right: none; border-bottom: 1px solid var(--rule); }
  .cost-stat:last-child { border-bottom: none; }
}

@media (max-width: 520px) {
  .countdown { padding: 1rem 0; }
  .countdown-unit { min-width: 4.2rem; padding: 0 0.85rem; }
  .countdown-unit .num { font-size: 2rem; }
  .info-card { grid-template-columns: 1fr; gap: 0.25rem; }
  .info-card p { font-size: 1.1rem; }
  .hero-date { letter-spacing: 0.4em; font-size: 0.7rem; }
  .hero-ornament { letter-spacing: 0.32em; }
}

/* ─── SCROLL REVEAL ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }

/* ─── REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-ornament, .hero h1, .hero-date, .countdown, .hero-inner .btn { animation: none; }
  .pw-box { animation: none; }
  .lightbox.open, .lightbox.open img { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.pt-ready { transition: none; }
}