/* Courtney & Ken — Join the Herd
   Editorial wedding design: photo-led, hairline rules, light high-contrast serif
   with a script accent. Five palettes on <html data-theme="…">: rally (default),
   holstein, desert, pines, herd. Themes only set tokens; rules read tokens. */

:root {
  --serif:  'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --sans:   'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --spots:  url("cowprint.png");
  --ok: #3F6B4A; --err: #9C3B2E;
  --ease: cubic-bezier(.2,.7,.2,1);
  --maxw: 1200px;
}

/* Dusty Blue & Gold — the Crosstrek's pale blue-gray and its gold wheels. (default) */
:root, [data-theme="rally"] {
  --bg: #F8F5EF; --bg-2: #EFEAE1; --surface: #FFFDF9;
  --ink: #1D232A; --muted: #66707A; --line: #D9D2C5;
  --accent: #56728C; --accent-d: #425A70; --on-accent: #FFFFFF;
  --gold: #B08F4F; --script-c: #56728C;
  --deep: #1F2A35; --on-deep: #F1ECE3; --muted-deep: #A9B3BC;
  --tint: 18, 26, 34;
  --band: linear-gradient(90deg, transparent, var(--gold), transparent); --band-h: 1px;
}
/* Ivory & Ink — black and white, black-tie formal. A whisper of Holstein. */
[data-theme="holstein"] {
  --bg: #FBFAF7; --bg-2: #F1EFEA; --surface: #FFFFFF;
  --ink: #121212; --muted: #67645F; --line: #DCD8D0;
  --accent: #141414; --accent-d: #000000; --on-accent: #FFFFFF;
  --gold: #A88B57; --script-c: #141414;
  --deep: #111111; --on-deep: #F4F2EE; --muted-deep: #A7A49E;
  --tint: 0, 0, 0;
  --band: var(--spots) 0 0 / 300px, #fff; --band-h: 10px;
}
/* Desert Rose — terracotta, blush and sand. */
[data-theme="desert"] {
  --bg: #FAF4EE; --bg-2: #F2E6DC; --surface: #FFFBF7;
  --ink: #2C211C; --muted: #7C685C; --line: #E4D3C4;
  --accent: #A15A44; --accent-d: #834533; --on-accent: #FFFFFF;
  --gold: #C29A6B; --script-c: #A15A44;
  --deep: #3A2922; --on-deep: #F6EDE4; --muted-deep: #C6AF9F;
  --tint: 50, 25, 15;
  --band: linear-gradient(90deg, transparent, var(--gold), transparent); --band-h: 1px;
}
/* Sage & Pine — the Hualapai forest; cabin weekend. */
[data-theme="pines"] {
  --bg: #F6F5EF; --bg-2: #EBEBE1; --surface: #FFFFFA;
  --ink: #1D2620; --muted: #5F6B61; --line: #D6D8CB;
  --accent: #4C6A55; --accent-d: #395240; --on-accent: #FFFFFF;
  --gold: #B5935A; --script-c: #4C6A55;
  --deep: #1E2A23; --on-deep: #EEF0E8; --muted-deep: #A6B3A9;
  --tint: 12, 26, 18;
  --band: linear-gradient(90deg, transparent, var(--gold), transparent); --band-h: 1px;
}
/* Holstein Luxe — cow print as a tailored accent: framed photos, bands, the monogram. */
[data-theme="herd"] {
  --bg: #FAF8F4; --bg-2: #F0EDE7; --surface: #FFFFFF;
  --ink: #151515; --muted: #5F5C57; --line: #D8D3CA;
  --accent: #151515; --accent-d: #000000; --on-accent: #FFFFFF;
  --gold: #B0904F; --script-c: #151515;
  --deep: #141414; --on-deep: #F5F2EC; --muted-deep: #A9A59D;
  --tint: 0, 0, 0;
  --band: var(--spots) 0 0 / 420px, #fff; --band-h: 28px;
}
[data-theme="herd"] .split-media::before { border: 0; background: var(--spots) 0 0 / 360px, #fff; opacity: 1; }

/* ── Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 17px/1.75 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent-d); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0 0 .6rem; letter-spacing: .005em; text-wrap: balance; }
.lede { text-wrap: pretty; }
p { margin: 0 0 1.1rem; }
strong, b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }

.wrap   { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.left   { text-align: left; }
.small  { font-size: .88rem; color: var(--muted); }
.hp     { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; text-transform: none; }

.eyebrow {
  font: 400 .72rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.2rem;
}
.display { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 300; }
.display em, .display i { font-style: italic; }
.h3 { font: 400 1.55rem/1.2 var(--serif); }
.lede { font: italic 300 clamp(1.25rem, 2.2vw, 1.55rem)/1.55 var(--serif); color: var(--ink); }
.tbd {
  font: italic 400 .95em var(--serif); color: var(--muted);
  border-bottom: 1px dashed var(--line); padding-bottom: 1px;
}

/* Ornament: hairline — diamond — hairline */
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 1.6rem; color: var(--gold); }
.ornament span { width: 64px; height: 1px; background: currentColor; opacity: .7; }
.ornament i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }

/* Monogram */
.monogram {
  font: 400 1.6rem/1 var(--serif); letter-spacing: .14em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; white-space: nowrap;
}
.monogram .script { font-size: 1.25em; color: var(--gold); margin: 0 .12em 0 .02em; letter-spacing: 0; }
.monogram--lg { font-size: 3rem; color: var(--on-deep); }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: 400 .76rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 2.1rem; border: 1px solid var(--accent); border-radius: 0;
  background: transparent; color: var(--accent); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); color: var(--on-accent); }
.btn-ghost { background: transparent; }
.btn-light { border-color: rgba(255,255,255,.75); color: #fff; }
.btn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-small { padding: .8rem 1.4rem; font-size: .7rem; }
.btn-big { padding: 1.25rem 2.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.btn-row.center { justify-content: center; }
.link-arrow {
  font: 400 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  color: var(--accent); display: inline-flex; align-items: center; gap: .7rem;
}
.link-arrow::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.link-arrow:hover::after { width: 44px; }

/* ── Nav ────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav--over { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav--over:not(.scrolled) .monogram, .nav--over:not(.scrolled) .nav-links a { color: #fff; }
.nav--over:not(.scrolled) .nav-rsvp { border-color: rgba(255,255,255,.7); }
.nav--over:not(.scrolled) .nav-toggle span { background: #fff; }
.nav--over.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); border-color: var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-links { display: flex; align-items: center; gap: .2rem; }
.nav-links a {
  color: var(--ink); text-decoration: none; font: 400 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: .7rem .7rem; position: relative; white-space: nowrap;
}
.nav-links a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .35rem; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-links .nav-rsvp { border: 1px solid var(--accent); margin-left: .6rem; padding: .75rem 1.3rem; }
.nav-links .nav-rsvp::after { display: none; }
.nav-links .nav-rsvp:hover { background: var(--accent); color: var(--on-accent); }
.nav-toggle { display: none; background: none; border: 0; padding: 12px 6px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 1px; background: var(--ink); margin: 7px 0; transition: transform .3s var(--ease); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem 24px 1.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.08); display: none; max-height: calc(100vh - 76px); overflow: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a, .nav--over:not(.scrolled) .nav-links a { color: var(--ink); padding: 1.05rem 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
  .nav-links a::after { display: none; }
  .nav-links .nav-rsvp { margin: 1.2rem 0 0; text-align: center; border: 1px solid var(--accent) !important; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
}

/* ── Hero ───────────────────────────────────────── */
.hero {
  position: relative; min-height: max(640px, 100svh); display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; text-align: center; color: #fff; overflow: hidden;
  background: var(--deep);
}
.hero-media { position: absolute; inset: 0; }
/* Wide screens get images/hero-wide.jpg, phones the portrait images/hero.jpg (see index.php). */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: heroZoom 22s var(--ease) both; }
/* Phones: start the photo above the top edge so the couple and Bean sit clear of the place line and RSVP button. */
@media (orientation: portrait) {
  .hero-media { top: -16%; }
  .hero-media img { object-position: 48% 50%; }
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--tint), .62) 0%, rgba(var(--tint), .22) 30%, rgba(var(--tint), 0) 48%, rgba(var(--tint), .08) 62%, rgba(var(--tint), .68) 100%);
}
.hero-content { position: relative; z-index: 1; padding: clamp(104px, 13vh, 150px) 24px 0; max-width: 1240px; }
.hero-foot { position: relative; z-index: 1; padding: 0 24px clamp(36px, 6vh, 64px); max-width: 900px; text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45); }
.hero-date { margin-top: 1.1rem !important; }
.hero .eyebrow { color: rgba(255,255,255,.88); margin-bottom: 1.4rem; }
.hero-names {
  font: 300 clamp(2.7rem, 7vw, 6.4rem)/1 var(--serif); letter-spacing: .05em; text-transform: uppercase; margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.25); white-space: nowrap;
}
.hero-names .script {
  display: inline-block; font-size: 1.05em; text-transform: none; color: #F3E3BE; margin: 0 .12em 0 .02em;
  transform: translateY(.1em); line-height: 0;
}
.hero-rule { width: 1px; height: 40px; background: rgba(255,255,255,.6); margin: 1.3rem auto; }
.hero-date { font: 400 .8rem/1.9 var(--sans); letter-spacing: .36em; text-transform: uppercase; margin: 0; }
.hero-place { font: italic 300 1.35rem/1.5 var(--serif); margin: .4rem 0 0; opacity: .92; }
.hero-tag { font: 400 clamp(1.9rem, 3.4vw, 2.5rem)/1 var(--script); margin: .6rem 0 0; color: #F3E3BE; }
.hero-ctas { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 1; color: #fff;
  font: 400 .62rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; text-decoration: none; opacity: .8;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.hero-scroll::after { content: ""; width: 1px; height: 42px; background: linear-gradient(#fff, transparent); animation: drip 2.4s ease-in-out infinite; }
@keyframes drip { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
/* Without a photo the hero falls back to a quiet gradient in the theme's colors. */
.hero--plain { color: var(--ink); background: radial-gradient(ellipse at 50% 30%, var(--surface), var(--bg-2)); }
.hero--plain::after { display: none; }
.hero--plain .eyebrow, .hero--plain .hero-tag { color: var(--gold); }
@media (max-width: 520px) {
  .hero-names { white-space: normal; }
  .hero-names .script { display: block; line-height: .9; margin: .1em 0; }
  .hero-content { padding-top: 96px; }
  .hero-place { font-size: 1.15rem; }
  .hero-ctas { margin-top: 1.3rem; }
  .hero-ctas .btn + .btn { display: none; }
}
.hero--plain .hero-names { color: var(--ink); text-shadow: none; }
.hero--plain .hero-names .script { color: var(--gold); }
.hero--plain .hero-rule { background: var(--gold); }
.hero--plain .hero-scroll { color: var(--ink); }

/* ── Sections ───────────────────────────────────── */
.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section-tight { padding-top: 0; }
.section-alt { background: var(--bg-2); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(48px, 6vw, 80px); }
.section-head p:last-child { color: var(--muted); margin-bottom: 0; }
.section-head .lede { color: var(--ink); }

/* Intro */
.intro .script-title { font: 400 clamp(2.8rem, 6vw, 4.4rem)/1 var(--script); color: var(--script-c); margin: 0 0 1.4rem; }
.intro .lede { max-width: 680px; margin: 0 auto 1.6rem; }
.signature { font: 400 1.9rem/1 var(--script); color: var(--gold); margin: 0 0 2rem; }
.photo-trio { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: clamp(14px, 2vw, 28px); align-items: end; margin-top: clamp(56px, 7vw, 96px); }
.photo-trio figure { margin: 0; overflow: hidden; }
.photo-trio figure:nth-child(1) { margin-bottom: 64px; }
.photo-trio figure:nth-child(3) { margin-bottom: 120px; }
.photo-trio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-trio figure:nth-child(2) img { aspect-ratio: 4 / 5.4; }
.photo-trio a:hover img { transform: scale(1.04); }
@media (max-width: 700px) {
  .photo-trio { grid-template-columns: 1fr 1fr; }
  .photo-trio figure:nth-child(1), .photo-trio figure:nth-child(3) { margin-bottom: 0; }
  .photo-trio figure:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .photo-trio figure:nth-child(2) img { aspect-ratio: 3 / 2; }
}

/* Countdown + save the date */
.savedate { text-align: center; }
.countdown { display: flex; justify-content: center; margin: 0 auto 2.6rem; }
.countdown div { padding: 0 clamp(18px, 4vw, 56px); border-left: 1px solid var(--line); }
.countdown div:first-child { border-left: 0; }
.countdown b { display: block; font: 300 clamp(3.2rem, 8vw, 5.6rem)/1 var(--serif); color: var(--ink); }
.countdown span { display: block; margin-top: .7rem; font: 400 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.cal-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.savedate-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.ring-photo { margin: 0; }
.ring-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.savedate .script-title { font: 400 clamp(2.8rem, 5vw, 4.2rem)/1 var(--script); color: var(--script-c); margin: 0 0 1.6rem; }
@media (max-width: 900px) {
  .savedate-split { grid-template-columns: 1fr; }
  .ring-photo { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* The weekend: three days side by side */
.days { display: grid; grid-template-columns: 1fr 1.15fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.day { padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 44px); text-align: center; border-left: 1px solid var(--line); }
.day:first-child { border-left: 0; }
.day--main { background: var(--surface); }
.day-name { font: 400 2.6rem/1 var(--script); color: var(--script-c); margin: 0 0 .3rem; }
.day-date { font: 400 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: 0 0 2rem; }
.event { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.event:first-of-type { border-top: 0; padding-top: 0; }
.event-time { font: 400 .68rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.event h3 { font-size: 1.65rem; margin-bottom: .35rem; }
.event p { font-size: .95rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) {
  .days { grid-template-columns: 1fr; }
  .day { border-left: 0; border-top: 1px solid var(--line); }
  .day:first-child { border-top: 0; }
}

/* Full-bleed photo with a line of type */
.photo-band {
  position: relative; min-height: clamp(420px, 70vh, 720px); display: grid; place-items: center; text-align: center;
  color: #fff; overflow: hidden; background: var(--deep);
}
.photo-band img { position: absolute; left: 0; width: 100%; height: 120%; object-fit: cover; top: -10%; will-change: transform; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: rgba(var(--tint), .38); }
.photo-band-text { position: relative; z-index: 1; padding: 0 24px; max-width: 900px; }
.photo-band-text .script { font-size: clamp(3rem, 8vw, 6.2rem); line-height: 1.05; display: block; }
.photo-band-text p { font: italic 300 clamp(1.15rem, 2vw, 1.45rem)/1.5 var(--serif); margin: 1rem 0 0; opacity: .95; }

/* Bean: two photos side by side, the second dropped a little */
.bean .script-title { font: 400 clamp(2.8rem, 6vw, 4.4rem)/1 var(--script); color: var(--script-c); margin: 0 0 1.4rem; }
.diptych { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); max-width: 1040px; margin: 0 auto; align-items: start; }
.diptych figure { margin: 0; overflow: hidden; }
.diptych figure:nth-child(2) { margin-top: clamp(40px, 8vw, 110px); }
.diptych img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 560px) { .diptych { grid-template-columns: 1fr; } .diptych figure:nth-child(2) { margin-top: 0; } }

/* Split: photo or map beside text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split-media { position: relative; isolation: isolate; }
.split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split-media--wide img { aspect-ratio: 5 / 4; }
.reg-fund { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.8rem; }
.reg-fund .small { margin: 0; }
.reg-fund a { overflow-wrap: anywhere; }
.reg-qr { flex: none; width: 132px; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); }
.reg-qr:empty { display: none; }
.reg-qr svg { display: block; width: 100%; height: 100%; }
.split-media::before { /* offset hairline frame */
  content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold); z-index: -1; opacity: .7;
}
.split--rev .split-media::before { inset: 22px 22px -22px -22px; }
.split-text h2 { margin-bottom: 1.2rem; }
.split-text .eyebrow { margin-bottom: 1rem; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .split-media::before { display: none; }
}

.info-list { list-style: none; padding: 0; margin: 1.8rem 0 0; border-top: 1px solid var(--line); }
.info-list li { padding: 1.15rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.info-list .k { font: 400 .68rem/1.9 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.info-list p:last-child { margin: 0; }
@media (max-width: 560px) { .info-list li { grid-template-columns: 1fr; gap: .2rem; } }

.note { font: italic 300 1.15rem/1.6 var(--serif); color: var(--muted); border-left: 1px solid var(--gold); padding: .2rem 0 .2rem 1.2rem; margin: 1.4rem 0; }
.note strong { font-style: normal; font-weight: 500; color: var(--ink); }

/* Maps sit in a mat with a hairline frame */
.map-frame { position: relative; background: var(--surface); padding: 12px; border: 1px solid var(--line); }
.map-frame iframe { width: 100%; aspect-ratio: 4 / 3.6; border: 0; display: block; filter: grayscale(.35) contrast(1.02); transition: filter .5s; }
.map-frame:hover iframe { filter: none; }
.map-wide iframe { aspect-ratio: 21 / 8; }
.map-tall iframe { aspect-ratio: 4 / 4.2; }
.map-caption { font: 400 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 0; text-align: center; }
@media (max-width: 760px) { .map-wide iframe { aspect-ratio: 4 / 3.4; } }

/* Numbered steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.6rem 0 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.2rem 3.4rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -.35rem;
  font: italic 300 1.9rem/1 var(--serif); color: var(--gold);
}
.code-pill {
  display: inline-block; font: 500 1.05rem/1 var(--sans); letter-spacing: .3em; color: var(--ink);
  border: 1px solid var(--gold); padding: .5rem .5rem .5rem .8rem; margin-left: .3rem; background: var(--surface);
}

/* Dress code: deep section */
.deep { background: var(--deep); color: var(--on-deep); }
.deep .eyebrow { color: var(--gold); }
.deep .lede { color: var(--on-deep); }
.deep a { color: var(--on-deep); }
.dress-list { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.dress-list li { padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--muted-deep); font-size: .98rem; }
.dress-list b { display: block; color: var(--on-deep); font: 400 1.35rem/1.25 var(--serif); margin-bottom: .2rem; }

/* Airports */
.airports { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.airport { padding: 2.2rem 1.6rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.airport:first-child { border-left: 0; }
.airport-code { font: 300 3.4rem/1 var(--serif); letter-spacing: .08em; color: var(--ink); margin-bottom: .8rem; }
.airport h3 { font: 400 .72rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.drive { font: italic 400 1.15rem/1.4 var(--serif); color: var(--ink); margin-bottom: .8rem; }
.airport p { font-size: .92rem; color: var(--muted); }
.airport .link-arrow { margin-top: auto; padding-top: .6rem; }
@media (max-width: 1000px) { .airports { grid-template-columns: 1fr 1fr; } .airport:nth-child(3) { border-left: 0; } .airport:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 600px) { .airports { grid-template-columns: 1fr; } .airport { border-left: 0; border-top: 1px solid var(--line); } .airport:first-child { border-top: 0; } }

.travel-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); align-items: start; }
@media (max-width: 900px) { .travel-grid { grid-template-columns: 1fr; } }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 0 0 1rem 1.8rem; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1px; background: var(--gold); }
.weather { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2.4rem; border-top: 1px solid var(--line); }
.weather div { padding: 1.4rem .6rem 0; text-align: center; border-left: 1px solid var(--line); }
.weather div:first-child { border-left: 0; }
.weather b { display: block; font: 300 1.6rem/1.1 var(--serif); color: var(--ink); }
.weather span { font: 400 .62rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; margin-top: .5rem; }
@media (max-width: 520px) { .weather { grid-template-columns: 1fr 1fr; } .weather div:nth-child(3) { border-left: 0; } }

/* Kingman: numbered editorial list */
.things { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); border-top: 1px solid var(--line); }
.thing { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.thing-n { font: italic 300 2rem/1 var(--serif); color: var(--gold); }
.thing h3 { font-size: 1.6rem; margin-bottom: .2rem; }
.tag { font: 400 .64rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .8rem; }
.thing p { font-size: .95rem; color: var(--muted); margin-bottom: .9rem; }
@media (max-width: 800px) { .things { grid-template-columns: 1fr; } }
.things + .map-frame { margin-top: clamp(48px, 6vw, 80px); }

/* RSVP band: invitation text on a deep panel beside a photo */
.rsvp-band { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; background: var(--deep); color: var(--on-deep); }
.rsvp-band-media { position: relative; overflow: hidden; min-height: 420px; }
.rsvp-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rsvp-band-inner { display: grid; place-content: center; text-align: center; padding: 80px clamp(24px, 6vw, 96px); }
.rsvp-band .script { font-size: clamp(3rem, 6vw, 5.2rem); line-height: 1.05; display: block; margin-bottom: 1rem; color: var(--on-deep); }
.rsvp-band p { font: italic 300 1.35rem/1.5 var(--serif); color: var(--muted-deep); }
.rsvp-band .eyebrow { color: var(--gold); }
@media (max-width: 860px) { .rsvp-band { grid-template-columns: 1fr; } .rsvp-band-media { order: -1; aspect-ratio: 4 / 3; min-height: 0; } }

/* FAQ */
.faq { columns: 2 380px; column-gap: clamp(40px, 6vw, 96px); }
.faq details { break-inside: avoid; border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.4rem 2.6rem 1.4rem 0; position: relative;
  font: 400 1.35rem/1.3 var(--serif); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 14px; height: 1px; background: var(--gold); transition: transform .35s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { padding: 0 0 1.5rem; margin: 0; color: var(--muted); }

/* Footer */
.footer { background: var(--deep); color: var(--muted-deep); text-align: center; padding: 0 24px 56px; font-size: .9rem; }
.footer-band { height: var(--band-h); background: var(--band); margin: 0 -24px 72px; }
.footer .monogram--lg { margin-bottom: 1.4rem; }
.footer-date { font: 400 .7rem/1.8 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--on-deep); margin-bottom: 1.6rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.8rem; margin-bottom: 2rem; }
.footer-links a { color: var(--muted-deep); text-decoration: none; font: 400 .68rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.footer-links a:hover { color: var(--on-deep); }
.footer-sign { font-size: 2rem; color: var(--gold); margin: 0; }
.footer-note { font-size: .78rem; margin: 1.6rem 0 0; opacity: .7; }

/* Scroll reveal (only when JS is running, so nothing is hidden without it) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ── Inner pages ────────────────────────────────── */
.page-hero {
  position: relative; min-height: 58vh; display: grid; place-items: center; text-align: center; color: #fff;
  overflow: hidden; background: var(--deep); padding: 120px 24px 80px;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--tint), .55), rgba(var(--tint), .35)); }
.page-hero > div { position: relative; z-index: 1; max-width: 760px; }
.page-hero .eyebrow { color: rgba(255,255,255,.85); }
.page-hero h1 { font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 300; }
.page-hero .lede { color: #fff; }
.page-hero .small, .page-hero .small a { color: rgba(255,255,255,.85); }

/* Story chapters */
.chapters { max-width: 820px; margin: 0 auto; }
.chapter { display: grid; grid-template-columns: 9rem 1fr; gap: 2rem; padding: 2.4rem 0; border-top: 1px solid var(--line); }
.chapter-when { font: italic 300 1.2rem/1.4 var(--serif); color: var(--gold); }
.chapter h3 { font-size: 2rem; }
.chapter p { color: var(--muted); }
@media (max-width: 600px) { .chapter { grid-template-columns: 1fr; gap: .4rem; } }

.gallery { columns: 3 300px; column-gap: 20px; }
.gallery figure { break-inside: avoid; margin: 0 0 20px; overflow: hidden; background: var(--surface); }
.gallery img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.gallery a { display: block; overflow: hidden; }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { padding: .8rem 0 0; font: italic 400 1rem var(--serif); color: var(--muted); background: var(--bg); }
.gallery-head { margin-top: clamp(64px, 9vw, 110px); }
.gallery-empty { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-empty .ph { aspect-ratio: 4 / 5; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); }
.gallery-empty .ph span { font: italic 400 1rem var(--serif); color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12,12,12,.95); display: grid; place-items: center; padding: 56px 12px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 82vh; margin: 0 auto; }
.lightbox figcaption { color: #ddd; margin-top: .9rem; font: italic 400 1.1rem var(--serif); }
.lightbox button { position: absolute; background: none; color: #fff; border: 1px solid rgba(255,255,255,.35); width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; transition: background .3s; }
.lightbox button:hover { background: rgba(255,255,255,.12); }
.lb-close { top: 16px; right: 16px; }
.lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }

/* ── Forms ──────────────────────────────────────── */
.form-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: calc(100vh - 76px); }
.form-page-media { position: sticky; top: 76px; height: calc(100vh - 76px); overflow: hidden; background: var(--deep); }
.form-page-media img { width: 100%; height: 100%; object-fit: cover; }
.form-page-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(var(--tint), .55)); }
.form-page-caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 48px; text-align: center; color: #fff; }
.form-page-caption .script { font-size: clamp(2.6rem, 4vw, 3.6rem); display: block; line-height: 1; }
.form-page-caption span:last-child { font: 400 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.form-page-body { padding: clamp(56px, 7vw, 110px) clamp(24px, 6vw, 96px); }
@media (max-width: 900px) {
  .form-page { grid-template-columns: 1fr; }
  .form-page-media { position: relative; top: 0; height: 46vh; }
}

.form-wrap { max-width: 720px; margin: 0 auto; display: grid; gap: 2rem; }
.form-wrap.wide { max-width: 880px; }
.form-card { background: transparent; }
.form-card + .form-card { border-top: 1px solid var(--line); padding-top: 2.4rem; }
.narrow-card { max-width: 460px; margin: 0 auto; width: 100%; text-align: center; }
.form-card .card { margin: 1.6rem 0; }
.card { background: var(--surface); border: 1px solid var(--line); padding: 1.8rem 2rem; }
.card h3 { font-size: 1.6rem; }

.form label, .form legend:not(.h3) {
  display: block; font: 400 .66rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 1.8rem 0 .55rem;
}
.form .opt { letter-spacing: .1em; text-transform: none; font-style: italic; opacity: .85; }
.form input:not([type=radio]):not([type=checkbox]):not([type=file]), .form select, .form textarea {
  width: 100%; font: 300 1.05rem/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .65rem 0;
  transition: border-color .3s var(--ease);
}
.form select { appearance: none; -webkit-appearance: none; padding-right: 1.6rem;
  background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) right 6px center / 6px 6px no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--muted) 50%) right 0 center / 6px 6px no-repeat; }
.form textarea { border: 1px solid var(--line); padding: .8rem .9rem; resize: vertical; min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form .btn { margin-top: 2.4rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.choice legend { grid-column: 1 / -1; }
.choice-btn { margin: 0 !important; cursor: pointer; letter-spacing: 0 !important; text-transform: none !important; }
.choice-btn input { position: absolute; opacity: 0; }
.choice-btn span {
  display: block; text-align: center; padding: 1.3rem .75rem; border: 1px solid var(--line); background: var(--surface);
  font: italic 400 1.3rem/1.2 var(--serif); color: var(--ink); transition: .3s var(--ease);
}
.choice-btn input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.choice-btn input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.if-yes[hidden] { display: none; }
.check { display: flex !important; align-items: center; gap: .6rem; letter-spacing: .08em !important; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.alert { padding: 1rem 1.2rem; margin: 1.2rem 0; border-left: 2px solid; background: var(--surface); }
.alert p { margin: 0; }
.alert p + p { margin-top: .35rem; }
.alert-error { border-color: var(--err); color: var(--err); }
.alert-ok { border-color: var(--ok); color: var(--ok); }

.songlist { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 2.4rem; }
.songlist li { break-inside: avoid; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.songlist b { font: 400 1.2rem/1.3 var(--serif); }
.songlist span, .songlist em { color: var(--muted); font-size: .9rem; }
.count { font: 400 .7rem/1 var(--sans); letter-spacing: .2em; color: var(--gold); vertical-align: middle; margin-left: .4rem; }

/* Couple page */
.progress { height: 2px; background: var(--line); margin-top: 1.8rem; }
.progress-bar { height: 100%; background: var(--gold); transition: width .6s var(--ease); }
.qgroup legend.h3 { float: left; width: 100%; font-size: 2rem; margin-bottom: .2rem; }
.q { clear: both; }
.help { font-size: .9rem; color: var(--muted); margin: 0 0 .3rem; }
.chip-done { font: 400 .62rem/1 var(--sans); letter-spacing: .16em; color: var(--ok); margin-left: .5rem; white-space: nowrap; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin-top: 1.2rem; }
.thumbs img { aspect-ratio: 1; object-fit: cover; }
.save-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: end; gap: 1.2rem; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); padding: 1.2rem 0 1.4rem !important; }
.save-bar label { margin: 0 0 .5rem !important; width: 100%; }
.save-bar select { flex: 1; min-width: 160px; width: auto !important; }
.save-bar .btn { margin: 0; }
.page-couple .nav-inner form { margin: 0; }

.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: .8rem; }
.theme-opt { margin: 0 !important; cursor: pointer; display: block !important; letter-spacing: 0 !important; text-transform: none !important; }
.theme-opt input { position: absolute; opacity: 0; }
.theme-card { display: grid; gap: .45rem; height: 100%; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; color: var(--ink); }
.theme-card b { font: 400 1.35rem/1.2 var(--serif); }
.theme-card small { color: var(--muted); font: 300 .88rem/1.5 var(--sans); letter-spacing: 0; }
.theme-card a { font: 400 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; margin-top: .3rem; }
.swatches { display: flex; gap: 0; }
.swatches i { width: 30px; height: 30px; border: 1px solid rgba(0,0,0,.08); }
.theme-opt input:checked + .theme-card { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-opt input:checked + .theme-card b::after { content: "  ✓"; color: var(--accent); }
.theme-opt input:focus-visible + .theme-card { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; color: #fff; background: var(--deep); overflow: hidden; }
.gate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gate::after { content: ""; position: absolute; inset: 0; background: rgba(var(--tint), .55); }
.gate-card { position: relative; z-index: 1; max-width: 440px; width: 100%; text-align: center; }
.gate-card .eyebrow { color: rgba(255,255,255,.85); }
.gate-card .script { font-size: 4rem; display: block; line-height: 1; margin-bottom: 1rem; }
.gate-card .form { text-align: left; }
.gate-card .form label { color: rgba(255,255,255,.8); }
.gate-card .form input { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.gate-card .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Edit mode (Courtney & Ken editing the wording in place) ── */
.is-editing { padding-bottom: 96px; }
.is-editing .editable {
  outline: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 3px; border-radius: 2px;
  cursor: text; transition: outline-color .2s, background .2s; min-width: 2ch; display: inline-block; max-width: 100%;
}
.is-editing .editable-multi { white-space: pre-line; display: inline-block; }
.is-editing .editable:hover { outline-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.is-editing .editable:focus { outline: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.is-editing .editable.is-empty::before { content: attr(data-ph); opacity: .55; font-style: italic; pointer-events: none; }
.is-editing .editable.is-empty:focus::before { content: ""; }
.is-editing .event--spare, .is-editing .faq details:has(.is-empty) { opacity: .75; }
.is-editing [data-reveal] { opacity: 1 !important; transform: none !important; }
.is-editing .hero-media img { animation: none; }
.edit-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200; width: min(760px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #16191D; color: #F4EFE6; padding: .85rem .9rem .85rem 1.3rem; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); font: 400 .92rem/1.3 var(--sans);
}
.edit-bar-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.edit-bar-text b { font-weight: 500; letter-spacing: .02em; }
.edit-status { color: #C9C2B5; font-size: .82rem; }
.edit-bar.has-changes .edit-status { color: #F3D58A; }
.edit-bar.saved .edit-status { color: #9FD8A8; }
.edit-bar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.eb-btn {
  font: 500 .8rem/1 var(--sans); letter-spacing: .04em; padding: .75rem 1rem; border-radius: 9px; cursor: pointer;
  background: transparent; color: #F4EFE6; border: 1px solid rgba(255,255,255,.25); text-decoration: none;
}
.eb-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.eb-primary { background: #C9A452; border-color: #C9A452; color: #16191D; }
.eb-primary:hover { background: #D8B566; color: #16191D; }
.eb-btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 560px) { .edit-bar { bottom: 10px; } .edit-bar-actions { width: 100%; } .eb-btn { flex: 1; text-align: center; } }

/* ── Share photos & videos ── */
.dropzone {
  display: grid !important; place-items: center; gap: .4rem; text-align: center; cursor: pointer;
  border: 1px dashed var(--gold); background: var(--surface); padding: 2.6rem 1.2rem !important; margin: 1.8rem 0 0 !important;
  transition: background .3s var(--ease), border-color .3s var(--ease); letter-spacing: 0 !important; text-transform: none !important;
}
.dropzone:hover, .dropzone.over { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); border-style: solid; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dz-title { font: italic 400 1.6rem/1.2 var(--serif); color: var(--ink); }
.dz-sub { font: 400 .68rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.up-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.up-list li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-state { color: var(--muted); font-size: .8rem; letter-spacing: .06em; }
.up-list li.done .up-state { color: var(--ok); }
.up-list li.err .up-state { color: var(--err); }
.up-bar { grid-column: 1 / -1; height: 2px; background: var(--line); }
.up-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
.up-list li.done .up-bar i { background: var(--ok); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 1.2rem; }
.media-grid figure { margin: 0; }
.media-grid img, .media-grid video { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--deep); display: block; }
.media-grid figcaption { font: italic 400 .95rem/1.3 var(--serif); color: var(--muted); padding-top: .4rem; }

.countdown b, .weather b { font-variant-numeric: lining-nums; }