/* Page layout for the static guest pages.
   Colors, type and components come from the design system files in ds/
   (tokens.css + components.css, copied verbatim from the "Katarina & Trevor"
   design system). This file only arranges them; it introduces no new colors. */

*, *::before, *::after { box-sizing: border-box; }
/* The design system gives cards, fields and notices display:grid, which would
   otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

/* Feature switches and timed release (assets/features.js sets these classes
   on <html>). Add a line to each group when a new feature is added. */
.kt-off-schedule [data-feature~="schedule"],
.kt-off-details [data-feature~="details"],
.kt-off-songs [data-feature~="songs"],
.kt-off-camera [data-feature~="camera"],
.kt-off-wallet [data-feature~="wallet"],
.kt-off-songs [data-requires~="songs"], .kt-soon-songs [data-requires~="songs"],
.kt-off-camera [data-requires~="camera"], .kt-soon-camera [data-requires~="camera"],
.kt-off-wallet [data-requires~="wallet"], .kt-soon-wallet [data-requires~="wallet"],
html:not(.kt-soon-songs) [data-until~="songs"],
html:not(.kt-soon-camera) [data-until~="camera"],
html:not(.kt-soon-wallet) [data-until~="wallet"] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--brand); color: var(--on-brand); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); z-index: 10;
}
.skip:focus { top: var(--space-2); }

/* ---------- Header + nav ---------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--space-4);
}
.site-header-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 56px;
}
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 var(--space-4);
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--brand); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--brass); font-weight: 700; }
.site-nav a:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle { flex: none; }
.theme-toggle svg { width: 16px; height: 16px; }
@media (max-width: 440px) {
  .site-header { padding: 0 var(--space-3); }
  .site-nav ul { gap: 0 var(--space-3); }
  .site-nav a { letter-spacing: .12em; }
  .theme-toggle { padding-inline: var(--space-1); min-width: 44px; }
  .theme-toggle .theme-word { display: none; }
}
@media (max-width: 374px) {
  .site-nav ul { gap: 0 var(--space-2); }
  .site-nav a { letter-spacing: .06em; font-size: 11px; }
}

/* ---------- Page ---------- */
.page {
  flex: 1;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-8);
  display: grid; gap: var(--space-7); align-content: start;
}
.page > * { min-width: 0; }
.stack { display: grid; gap: var(--space-5); }
.stack-lg { display: grid; gap: var(--space-6); }
.center { text-align: center; }
.lead { font-size: 18px; line-height: 1.65; max-width: 34em; margin: 0 auto; }
.muted { color: var(--text-muted); }
p { margin: 0; }
.date-line { font-family: var(--font-script); font-size: 34px; line-height: 1.35; text-align: center; margin: 0; font-weight: 400; }
@media (max-width: 480px) { .date-line { font-size: 28px; } }
.section-title { font-size: 22px; line-height: 1.3; font-weight: 700; margin: 0; }

/* ---------- Home hero ---------- */
.hero { display: grid; justify-items: center; gap: var(--space-5); text-align: center; }
.hero .kt-crest { width: 180px; }
.hero-meta { display: grid; gap: var(--space-1); font-size: 16px; }
.hero-meta .kt-caps { font-size: 12px; letter-spacing: .2em; color: var(--text-muted); }
.crest-ivory { display: none; }
[data-theme="finery"] .crest-cobalt { display: none; }
[data-theme="finery"] .crest-ivory { display: block; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: var(--space-6) var(--space-4) var(--space-7);
  text-align: center; font-size: 14px; color: var(--text-muted);
}
.site-footer p + p { margin-top: var(--space-1); }

/* ---------- Schedule ---------- */
.kt-tl-title .kt-tl-badge { font-family: var(--font-serif); }
/* The floor plan (traced from the venue's plan; source pixels as units). */
.kt-map .plan-bg { fill: var(--surface); }
.kt-map .plan-room { fill: transparent; transition: fill .3s ease; }
.kt-map .plan-room.is-on { fill: var(--french-blue-wash); }
.kt-map .plan-lines { fill: var(--text); }
.kt-map .plan-solid { fill: var(--brass); }
.kt-map svg text { font-family: var(--font-serif); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }
.kt-map svg .lbl { font-size: 32px; fill: var(--text); }
.kt-map svg .lbl-minor { font-size: 23px; fill: var(--text-muted); font-style: italic; }
.kt-map svg .is-on .lbl { font-weight: 700; stroke: var(--french-blue-wash); }
.kt-map svg .step circle { fill: var(--surface); stroke: var(--brass); stroke-width: 2.5; }
.kt-map svg .step text { font-size: 22px; font-weight: 700; fill: var(--brass-deep); stroke: none; }

/* Respect reduced motion for the few fades we add. */
@media (prefers-reduced-motion: reduce) {
  .site-nav a, .theme-toggle { transition: none !important; }
}

/* Schedule: the sunset, a faint marker above the first item. */
.tl-sunset { color: var(--text-muted); }
.tl-sunset .kt-tl-time { font-weight: 400; font-size: 13px; padding-top: 2px; }
.tl-sunset .kt-tl-content { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-5); }
.tl-sunset .kt-tl-content::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
.tl-sun { position: relative; width: 18px; height: 13px; margin-top: 4px; color: var(--brass); background: var(--ground); }
.tl-sunset-word { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
#party-bus { scroll-margin-top: var(--space-6); }

/* Restrooms on the floor plan, shown by the "Show restrooms" button. */
.kt-map .plan-wc { display: none; }
.kt-map.show-wc .plan-wc { display: inline; }
.kt-map .wc-room { fill: var(--brand); fill-opacity: .3; stroke: var(--brand); stroke-width: 3; }
.kt-map .wc-lead { stroke: var(--brand); stroke-width: 2.5; fill: none; }
.kt-map svg .wc-lbl { font-size: 26px; font-weight: 700; fill: var(--brand); }