/* =========================================================================
   Mr & Mrs Ntuli - 30th Anniversary
   Editorial celebration system: real photography, one serif with real
   character, hairline structure instead of repeated cards. Palette is the
   diamond-anniversary brand - white / pearl / silver / soft warm grey, with
   near-black type and silver kept for hairlines and accents.
   ========================================================================= */

/* Fonts, self-hosted from our own domain and subset to the characters the site uses
   (Latin, Latin-1 accents, curly quotes and the hymns' Zulu apostrophes). swap: text shows
   immediately in a fallback and the real face takes over when it arrives. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/CormorantGaramond-normal.woff2?v=391cc4f92d") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/CormorantGaramond-italic.woff2?v=95eee40c00") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/InstrumentSans-normal.woff2?v=c768e50483") format("woff2");
}
/* the script face only ever draws the couple's name, so it carries just A-Z, a-z and & */
@font-face {
  font-family: "Pinyon Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/PinyonScript-normal.woff2?v=7a6bb4f67c") format("woff2");
}

:root {
  /* Pearl grey with a silver cast, not white and not beige: luminance 0.636 against
     1.0 for a plain white page, so it stays soft on a phone in full sun. */
  --pearl: #CFD1D4;      /* page */
  --mist: #C2C5C9;       /* quiet fills: tracks, chips, skeletons */
  --slate: #45474B;      /* secondary text - cool grey, 6.1:1 on the page */
  --onyx: #1E1E22;       /* primary actions, headings with weight */
  --ivory: #DDDFE2;      /* raised surfaces (chips, inputs, cards) - light pearl */
  --ink: #19191C;        /* body text, 11.5:1 on the page */
  --silver: #979BA2;     /* brushed silver: hairlines and rules only - never text */
  --silver-ink: #44474D; /* silver when it has to be read: 6.1:1 on the page */
  --graphite: #2A2A2F;   /* selected / current state */
  --press: rgba(42, 42, 47, 0.14);

  --serif: 'Cormorant Garamond', serif;
  /* Cormorant's x-height is small; this keeps every display size reading as large
     as the old serif did, without touching a single font-size in the layout. */
  --serif-adjust: 0.47;

  --hairline: rgba(25, 25, 28, 0.12);

  --content-max: 600px;
  --bar-max: 640px;

  --radius: 6px;
  --shadow-soft: 0 12px 40px rgba(25, 25, 28, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light only;

  /* height of the pinned bar on every page; compact on phones */
  --bar-h: 48px;
}

@media (min-width: 768px) { :root { --bar-h: 56px; } }

/* jumping to a section or a focused field never lands under the pinned bar */
html { scroll-padding-top: calc(var(--bar-h) + 16px); }

@media (min-width: 768px)  { :root { --content-max: 920px; } }
@media (min-width: 1024px) { :root { --content-max: 1160px; } }
@media (min-width: 1440px) { :root { --content-max: 1320px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, select { font-family: inherit; }
[hidden] { display: none !important; }
::placeholder { color: var(--placeholder); opacity: 1; }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}

::selection { background: var(--mist); color: var(--ink); }

/* ===== Buttons & links ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius);
  padding: 17px 30px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s var(--ease), opacity 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--onyx);
  color: var(--ivory);
  box-shadow: var(--shadow-soft);
  width: 100%;
}

.btn-ghost {
  background: transparent;
  color: var(--slate);
  padding: 10px 16px;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.btn-small { padding: 11px 20px; font-size: 0.86rem; }

/* A text link underlined by a tapered silver line with a small diamond at its centre -
   still clearly a link, but drawn rather than a default underline. */
.link {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  color: var(--ink);
  font-size: 0.95rem;
  transition: opacity 0.12s var(--ease);
}
.link::after {
  content: "";
  height: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,0.8 9.2,5 5,9.2 0.8,5' fill='%23CFD1D4' stroke='%2344474D' stroke-width='0.9'/%3E%3Cpolygon points='5,3.4 6.6,5 5,6.6 3.4,5' fill='%2344474D'/%3E%3C/svg%3E") center / 10px 10px no-repeat,
    linear-gradient(90deg, transparent, var(--silver) 22%, var(--silver) 78%, transparent) center / 100% 1px no-repeat;
  transition: transform 0.25s var(--ease);
}
.link:hover::after { transform: scaleX(1.06); }
.link:active { opacity: 0.55; }

/* a quiet link under an ornament: a plain fine underline, so ornaments never stack */
.link-plain {
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.link-plain:hover { text-decoration-color: var(--onyx); }

.link-quiet {
  color: var(--slate);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}

/* Deliberately quiet - a way in for the couple, not something guests should notice. */
.site-footer {
  text-align: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
}
.site-footer__login {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  /* Quiet through size and colour, not opacity, so it still reads (6.2:1). */
  color: var(--slate);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: opacity 0.15s var(--ease), border-color 0.15s var(--ease);
}
.site-footer__login:hover,
.site-footer__login:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--hairline);
}
.site-footer__login:active { opacity: 0.5; }

/* The site credit: small and quiet, but clearly a link. The Ntuli Kreative mark and name
   are one link (new tab). At rest the mark is its one-colour form; on hover or tap the
   slash, the name and the underline turn the brand burnt orange (the full-colour mark). */
.site-footer__credit {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--slate);
}
.site-footer__login + .site-footer__credit { margin-top: 12px; }
.site-footer > .site-footer__credit:first-child { margin-top: 0; }
.nkc-credit {
  /* a plain inline run: mark and name flow with the sentence as one line */
  display: inline;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--silver-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 8px 0;              /* a comfortable tap target without changing the look */
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}
/* Sized to the text, not the line: the "n" fills the mark's full height, so the mark is
   exactly the x-height of Instrument Sans (0.51em) - the "n" matches the lowercase letters
   of the name beside it. Width is fixed alongside height (Safari stretches an SVG given only
   one of them). Its bottom edge is the foot of the "n", so it sits on the text baseline. */
.nkc-credit__mark {
  display: inline-block;
  width: 0.848em;   /* 0.51em x the mark's 1.6627 aspect */
  height: 0.51em;
  max-width: none;
  flex: none;
  vertical-align: baseline;
  margin-right: 0.3em;
  fill: #111111;
}
.nkc-credit__slash { fill: #111111; transition: fill 0.15s var(--ease); }
.nkc-credit:hover,
.nkc-credit:active,
.nkc-credit:focus-visible { color: #C8501E; text-decoration-color: #C8501E; }
.nkc-credit:hover .nkc-credit__slash,
.nkc-credit:active .nkc-credit__slash,
.nkc-credit:focus-visible .nkc-credit__slash { fill: #C8501E; }
.nkc-credit:focus-visible { outline: 2px solid var(--onyx); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared soft pill for nav-weight actions (site footer nav, program footer nav) -
   tappable and clear without the visual weight of a solid primary button. */
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  color: var(--ink);
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.86rem;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.nav-pill:hover { background: var(--mist); }
.nav-pill:active,
.nav-pill.is-pressed {
  transform: scale(0.93);
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
  box-shadow: 0 0 0 4px var(--press);
}
/* The page you are already on: rose, but at rest - no press scale, no press ring. */
.nav-pill.is-current {
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
}

/* ===== Structural hairline (used between real sections, not decoration) ===== */
/* The site's divider: fine tapered silver lines, two pearl dots and a small outlined
   diamond. Replaces the plain short rule wherever a pause is wanted. */
.flourish {
  display: block;
  width: 140px;
  height: 16px;
  margin: 22px 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='16' viewBox='0 0 140 16'%3E%3Cpolygon points='0,8 55,7.35 55,8.65' fill='%238A8D93'/%3E%3Ccircle cx='60.5' cy='8' r='1.55' fill='%238A8D93'/%3E%3Cpolygon points='70,2.6 75.4,8 70,13.4 64.6,8' fill='none' stroke='%2344474D' stroke-width='0.9'/%3E%3Cpolygon points='70,5.6 72.4,8 70,10.4 67.6,8' fill='%2344474D'/%3E%3Ccircle cx='79.5' cy='8' r='1.55' fill='%238A8D93'/%3E%3Cpolygon points='85,7.35 140,8 85,8.65' fill='%238A8D93'/%3E%3C/svg%3E") left center / 140px 16px no-repeat;
}
.flourish--center { margin-left: auto; margin-right: auto; background-position: center; }

/* =========================================================================
   HERO (landing)
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Mobile keeps the CTA in the thumb zone at the bottom; tablet/desktop have
     room to breathe, so the whole block centres vertically in the frame. */
  justify-content: flex-end;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { justify-content: center; }
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Pinned for the whole page, but invisible at the top: over the hero the pills simply
   float on the photo. Only once the hero has scrolled away (html.is-past-hero, set by
   js/nav.js) does a light translucent blur fade in behind them - no solid band, no rule. */
.hero-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
}
.hero-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(207, 209, 212, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 6px 16px -14px rgba(18, 18, 21, 0.35);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.is-past-hero .hero-nav::before { opacity: 1; }
/* light, quiet pills: a soft translucent pearl fill with a touch of blur, so the ink
   label stays readable over any part of the photo */
.hero-nav__link {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(228, 230, 233, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.hero-nav__link:hover,
.hero-nav__link:focus-visible {
  background: rgba(221, 223, 226, 0.85);
}
.hero-nav__link:active,
.hero-nav__link.is-pressed {
  transform: scale(0.93);
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
  box-shadow: 0 0 0 4px var(--press);
}
.hero-nav__link.is-current {
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
}
@media (min-width: 768px) {
  .hero-nav { padding: calc(9px + env(safe-area-inset-top, 0px)) 40px 9px; }
  .hero-nav__link { font-size: 0.86rem; padding: 7px 18px; }
}
@media (min-width: 1024px) {
  .hero-nav { padding-left: 56px; padding-right: 56px; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* The photo's detail sits low in the frame, right where the headline block
     lives (bottom-anchored, thumb-zone CTA) - so the wash has to stay strong
     from the middle down, not just fade decoratively. */
  background:
    linear-gradient(180deg, rgba(207,209,212,0.18) 0%, rgba(207,209,212,0.6) 24%, rgba(207,209,212,0.86) 44%, rgba(207,209,212,0.92) 100%);
}
@media (min-width: 768px) {
  /* Text sits on the left from tablet up, so the veil runs left to right: calm pearl
     behind the words, the satin's sheen and the diamonds left clear on the right. */
  .hero__scrim {
    background: linear-gradient(90deg, rgba(207,209,212,0.94) 0%, rgba(207,209,212,0.86) 34%, rgba(207,209,212,0.4) 58%, rgba(207,209,212,0) 78%);
  }
}

.hero__content {
  position: relative;
  padding: calc(58px + env(safe-area-inset-top, 0px)) 24px 44px;
  display: flex;
  flex-direction: column;
}

.hero__kicker {
  font-size: 0.92rem;
  color: var(--ink);
  opacity: 0.75;
  max-width: 30ch;
  margin-bottom: 14px;
}

.hero__title {
  font-size: clamp(3.4rem, 15vw, 5.2rem);
  line-height: 1.02;
  /* Cormorant's default old-style "3" drops below the line, into the subtitle */
  font-variant-numeric: lining-nums;
}

.hero__subtitle {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  color: var(--slate);
  margin-top: 0.3em;
  line-height: 1.25;
}

.hero__names {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  color: var(--onyx);
  margin-top: 12px;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(207, 209, 212, 0.8);
}

.hero__meta {
  font-size: 0.98rem;
  color: var(--ink);
  max-width: 34ch;
  margin-bottom: 20px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 320px;
}
.hero__actions .btn-primary { width: 100%; }

@media (min-width: 768px) {
  .hero__content {
    max-width: 640px;
    padding: calc(80px + env(safe-area-inset-top, 0px)) 56px 80px;
  }
  .hero__actions { flex-direction: row; align-items: center; max-width: none; }
  .hero__actions .btn-primary { width: auto; }
}

@media (min-width: 1024px) {
  .hero__content { max-width: 680px; padding-left: 80px; padding-bottom: 80px; }
  .hero__title { font-size: clamp(4.4rem, 7vw, 6.4rem); }
}

@media (min-width: 1440px) {
  .hero__content { padding-left: 120px; max-width: 720px; }
}

/* ---- Hero motion ----
   1. The words arrive: each line fades and rises 14px, staggered 70ms, all in within
      ~1s; the title leads, so nothing waits to be read.
   2. The satin drifts: a very slow push-in and pan (26s each way), barely noticeable.
   3. The diamonds shimmer: two layers holding only the stones' own highlights fade in
      and out of phase, so facets catch the light one after another.
   Transform and opacity only - composited, smooth on an older phone. */
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media picture { position: absolute; inset: 0; }
.hero__glint { opacity: 0; pointer-events: none; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}
@keyframes glint { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 0.9; } }

.hero__content > * { animation: hero-rise 0.75s var(--ease) both; }
.hero__content > :nth-child(1) { animation-delay: 0.05s; }
.hero__content > :nth-child(2) { animation-delay: 0.12s; animation-duration: 0.9s; }
.hero__content > :nth-child(3) { animation-delay: 0.22s; }
.hero__content > :nth-child(4) { animation-delay: 0.3s; }
.hero__content > :nth-child(5) { animation-delay: 0.38s; }
.hero__content > :nth-child(6) { animation-delay: 0.44s; }
.hero__content > :nth-child(7) { animation-delay: 0.5s; }

.hero__media > picture { animation: hero-drift 26s ease-in-out infinite alternate; will-change: transform; }
.hero__glint--a { animation: glint 3.6s ease-in-out 1s infinite; }
.hero__glint--b { animation: glint 4.4s ease-in-out 2.8s infinite; }

/* ---- Sections rise into view as they are reached (js/reveal.js adds .is-in).
   Uses the separate translate property so it never fights a rotated photograph. */
.js .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__content > *, .hero__media > picture { animation: none !important; }
  .hero__glint { animation: none !important; opacity: 0 !important; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
}

/* =========================================================================
   STORY - editorial text + photo collage
   ========================================================================= */
.story {
  padding: 72px 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.story__text {
  max-width: 46ch;
}

.story__eyebrow {
  font-size: 0.92rem;
  color: var(--slate);
  margin-bottom: 4px;
}

.story__title {
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1.08;
}

.story__body {
  margin-top: 18px;
  font-size: 1.02rem;
  color: var(--ink);
  opacity: 0.85;
  max-width: 42ch;
}

/* Psalm 20:4 in the couple's section: a quiet quote, not a callout - a small silver
   diamond, italic serif, and the reference in spaced small capitals. */
.verse { margin: 30px 0 0; max-width: 36ch; }
.verse p {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--ink);
}
.verse cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-ink);
}

/* Three photographs laid on the table: each a print with a pearl border and a soft
   shadow, overlapping at slightly different angles. Positions are percentages of a
   fixed-ratio stage, so the arrangement holds at every width. */
.collage {
  position: relative;
  margin-top: 44px;
  aspect-ratio: 1 / 1.02;
}
.collage img {
  position: absolute;
  /* the width/height attributes only reserve space; the aspect-ratio below sets the shape */
  height: auto;
  object-fit: cover;
  padding: 7px;
  background: var(--ivory);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(18, 18, 21, 0.18), 0 14px 30px -10px rgba(18, 18, 21, 0.42);
}
.collage__a { left: 1%;  top: 2%;  width: 54%; aspect-ratio: 3 / 4; rotate: -4deg; z-index: 1; }
.collage__b { right: 1%; top: 7%;  width: 50%; aspect-ratio: 4 / 3; rotate: 3.5deg; z-index: 2; }
.collage__c { right: 9%; bottom: 3%; width: 58%; aspect-ratio: 4 / 3; rotate: -1.5deg; z-index: 3; }

@media (min-width: 768px) {
  .story {
    padding: 100px 40px;
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 64px;
    align-items: center;
  }
  .collage { margin-top: 0; aspect-ratio: 5 / 4; }
  .collage img { padding: 9px; }
  .collage__a { left: 2%; top: 4%; width: 46%; }
  .collage__b { right: 0; top: 0; width: 50%; }
  .collage__c { right: 8%; bottom: 2%; width: 55%; }
}

@media (min-width: 1024px) {
  .story { padding: 128px 80px; gap: 96px; grid-template-columns: minmax(280px, 400px) 1fr; }
}

@media (min-width: 1440px) {
  .story { max-width: 1320px; padding: 148px 100px; }
}

/* =========================================================================
   QUOTE BAND - dark candlelight moment
   ========================================================================= */
.quote-band {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quote-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-band__scrim {
  position: absolute;
  inset: 0;
  /* darkest behind the quote, lighter at the edges so the place setting reads */
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(18, 18, 21, 0.62) 0%, rgba(18, 18, 21, 0.4) 70%, rgba(18, 18, 21, 0.3) 100%);
}

.quote-band__text {
  position: relative;
  max-width: 640px;
  text-align: center;
  padding: 60px 28px;
  /* light text on the one dark band: no glare risk, so it can sit near white */
  color: #ECEEF1;
}

.quote-band__text p {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  line-height: 1.4;
}

.quote-band__attr {
  margin-top: 20px;
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-size: 0.88rem;
  opacity: 0.92;
}

@media (min-width: 1024px) {
  .quote-band { min-height: 480px; }
}

/* =========================================================================
   CLOSING - quiet secondary CTA
   ========================================================================= */
.closing {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px 24px 88px;
  text-align: center;
}
.closing h2 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.closing p { margin-top: 10px; color: var(--slate); }
.closing .btn { margin-top: 26px; max-width: 280px; }

/* =========================================================================
   PAGE BANNER - upload / gallery header (replaces boxed topbar)
   ========================================================================= */
/* The banner collapses as the page scrolls: it is sticky at a negative top, so it
   rides up until only its foot (the bar holding the back button and title) is left,
   and pins there. Once pinned (.is-stuck, set by js/nav.js) the satin fades out and the
   bar turns frosted, so the content passing underneath stays softly visible. */
.page-banner {
  --banner-h: 200px;
  position: sticky;
  /* + 1px: the banner's bottom edge line counts toward its height */
  top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) - var(--banner-h) + 1px);
  z-index: 30;
  height: var(--banner-h);
  display: flex;
  align-items: flex-end;
  /* A defined edge between banner and page: a brushed-metal bevel (a dark line over a
     light highlight line) and a soft shadow falling onto the pearl below. */
  border-bottom: 1px solid #6E727A;
  box-shadow: 0 1px 0 #E9EBEE, 0 14px 26px -14px rgba(18, 18, 21, 0.55);
}
.page-banner__img,
.page-banner__scrim {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s var(--ease);
}
.page-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-banner__scrim {
  /* The banner satin is deliberately darker than the page, so no pale veil here: just a
     faint lift behind the title on the left so it always reads in ink. */
  background: linear-gradient(90deg, rgba(207,209,212,0.5) 0%, rgba(207,209,212,0.2) 45%, rgba(207,209,212,0) 72%);
}
.page-banner__bar {
  position: relative;
  width: 100%;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
/* the frosted surface, shown only once the banner has collapsed into the bar */
.page-banner__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(207, 209, 212, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
/* once pinned, the banner's bevel line and shadow give way to a barely-there shadow */
.page-banner { transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.page-banner.is-stuck { border-bottom-color: transparent; box-shadow: 0 6px 16px -14px rgba(18, 18, 21, 0.35); }
.page-banner.is-stuck .page-banner__img,
.page-banner.is-stuck .page-banner__scrim { opacity: 0; }
.page-banner.is-stuck .page-banner__bar::before { opacity: 1; }

.page-banner__back {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(228, 230, 233, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s var(--ease);
}
.page-banner__back:active { transform: scale(0.9); }

.page-banner__title {
  color: var(--ink);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1;
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.page-banner.is-stuck .page-banner__title { transform: scale(0.8); }

@media (min-width: 768px) {
  .page-banner { --banner-h: 260px; }
  .page-banner__bar { padding: 0 max(24px, calc((100% - var(--content-max)) / 2 + 20px)); gap: 16px; }
}
@media (min-width: 1024px) { .page-banner { --banner-h: 320px; } }

/* =========================================================================
   PROGRAM - a printed-order-of-service look: a director credit, then sections
   (a heading + optional time), each holding lines styled as role/answer pairs,
   with special items given a quiet highlight and hymn numbers a small badge.
   ========================================================================= */
.program-switch { justify-content: center; }
.program-switch .filter-chip { font-size: 0.82rem; }
@media (min-width: 600px) { .program-switch .filter-chip { font-size: 0.9rem; padding: 9px 22px; } }

/* Order of service, after the printed program: a small-caps heading over a silver rule
   per section, then three indent levels - (1) section, (2) items and sub-headings on one
   line, (3) names and details on a second. From 900px the extra room becomes a timeline:
   times in their own column, a silver hairline down the page, a diamond at each section. */
.order-of-service {
  --l2: 1.1rem;              /* level 2 indent, from the section heading */
  --l3: 2.35rem;             /* level 3 indent */
  max-width: 660px;
  margin: 8px auto 0;
  padding: 8px 22px 12px;
}

.oos-head { text-align: center; padding: 18px 0 30px; }
.oos-head__title {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-variant: small-caps;
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  line-height: 1.1;
}
/* thick-over-thin silver rule, the print program's signature */
.oos-rule {
  width: min(260px, 70%);
  margin: 14px auto 0;
  height: 5px;
  border-top: 2px solid var(--silver);
  border-bottom: 1px solid var(--silver);
}
.oos-rule--flip { border-top-width: 1px; border-bottom-width: 2px; }
.oos-head__director { margin-top: 18px; font-size: 0.95rem; color: var(--ink); }
.oos-head__director span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-ink);
  margin-bottom: 4px;
}
.oos-head__range { margin-top: 6px; font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-style: italic; color: var(--slate); }

.oos-sections { list-style: none; margin: 0; padding: 0; }
.oos-section { padding: 26px 0 8px; }
.oos-section__rail { display: none; }

.oos-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--silver);
}
.oos-section__heading {
  font-size: 1.45rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.oos-section__time {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--silver-ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.oos-lines { list-style: none; margin: 12px 0 0; padding: 0; }
.oos-line { position: relative; padding-left: var(--l2); line-height: 1.45; }
.oos-line + .oos-line { margin-top: 9px; }

.oos-line--item { font-size: 1rem; color: var(--ink); }
.oos-line--sub {
  margin-top: 20px !important;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink);
}
.oos-line--detail { padding-left: var(--l3); font-size: 0.92rem; color: var(--slate); }
.oos-line--item + .oos-line--detail,
.oos-line--sub + .oos-line--detail { margin-top: 4px; }
.oos-line--detail + .oos-line--detail { margin-top: 3px; }
.oos-line--detail + .oos-line--item { margin-top: 16px; }

/* special items: italic serif, a small silver diamond hanging in the gutter so the
   words themselves stay on their indent line */
.oos-line--special {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink);
}
.oos-line--special::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--silver-ink);
  transform: rotate(45deg);
  top: 0.62em;
  margin-left: -13px;
}

/* a special item that is also a detail keeps level 3's size, just italic */
.oos-line--detail.oos-line--special { font-size: 1rem; color: var(--ink); }

.oos-num { font-weight: 600; color: var(--silver-ink); font-variant-numeric: lining-nums tabular-nums; }
/* a hymn number in the hymn book: tappable, with a comfortable touch area, opening the
   words (the hymn page's back button returns to the programme) */
.oos-num--link {
  display: inline-block;
  padding: 2px 6px;
  margin: -2px 0;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--silver);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: background 0.15s var(--ease);
}
.oos-num--link:hover { background: var(--mist); text-decoration-color: var(--onyx); }
.oos-num--link:active { background: var(--graphite); color: var(--ivory); }
.oos-num--link:focus-visible { outline: 2px solid var(--onyx); outline-offset: 1px; }

.oos-end { display: flex; align-items: center; gap: 14px; margin: 34px auto 8px; max-width: 280px; color: var(--silver); }
.oos-end::before, .oos-end::after { content: ""; flex: 1; border-top: 1px solid var(--silver); }
.oos-end span { width: 7px; height: 7px; background: var(--silver); transform: rotate(45deg); }

@media (min-width: 600px) {
  .order-of-service { --l2: 1.4rem; --l3: 2.9rem; padding: 12px 32px 16px; }
  .oos-head__title { font-size: 2.3rem; }
  .oos-section__heading { font-size: 1.6rem; }
  .oos-line--item { font-size: 1.05rem; }
  .oos-line--detail { font-size: 0.97rem; }
}

/* Timeline from 900px: time column | hairline with a diamond per section | content */
@media (min-width: 900px) {
  .order-of-service { max-width: 980px; padding: 24px 40px 20px; }
  .oos-head { padding: 28px 0 40px; }
  .oos-head__title { font-size: 2.7rem; }
  .oos-sections {
    position: relative;
    --rail: 170px;
    --spine: 56px;
  }
  .oos-sections::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 12px;
    left: calc(var(--rail) + var(--spine) / 2);
    border-left: 1px solid var(--silver);
  }
  .oos-section {
    display: grid;
    grid-template-columns: var(--rail) var(--spine) 1fr;
    padding: 30px 0 14px;
  }
  .oos-section__rail {
    display: block;
    grid-column: 1;
    text-align: right;
    font-family: var(--serif);
    font-size-adjust: var(--serif-adjust);
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.1;
  }
  .oos-section__start { display: block; font-size: 1.9rem; color: var(--ink); }
  .oos-section__end { display: block; margin-top: 4px; font-style: italic; font-size: 1.05rem; color: var(--silver-ink); }
  .oos-section__marker {
    grid-column: 2;
    justify-self: center;
    width: 10px;
    height: 10px;
    margin-top: 12px;
    background: var(--pearl);
    border: 1px solid var(--silver-ink);
    transform: rotate(45deg);
    position: relative;
    z-index: 1;
  }
  .oos-section__body { grid-column: 3; }
  .oos-section__head .oos-section__time { display: none; }
  .oos-section__heading { font-size: 1.85rem; }
  .oos-lines { margin-top: 16px; }
  .oos-line + .oos-line { margin-top: 11px; }
  .oos-line--item { font-size: 1.08rem; }
  .oos-line--detail { font-size: 1rem; }
  .oos-line--detail + .oos-line--detail { margin-top: 4px; }
  .oos-line--sub { margin-top: 26px !important; font-size: 1.22rem; }
  .oos-line--detail.oos-line--special { font-size: 1.1rem; }
  .oos-end { margin-top: 44px; }
}

/* Generic fallback empty-state (program page only shows this if the table is emptied) */
.empty-state { text-align: center; padding: 60px 24px; color: var(--slate); }
.empty-state h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 6px; }

.program-footer-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: var(--content-max);
  margin: 8px auto 64px;
  padding: 28px 24px 0;
  border-top: 1px solid var(--hairline);
}
.program-footer-nav { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
.program-footer-nav .nav-pill { min-width: 0; padding: 9px 15px; text-align: center; }
@media (min-width: 480px) { .program-footer-nav { gap: 12px; } .program-footer-nav .nav-pill { padding: 9px 20px; } }
@media (min-width: 480px) { .program-footer-nav .nav-pill { min-width: 96px; } }


/* =========================================================================
   HYMNS - search, a grid of numbers, an index; then one hymn at a time, sized to be
   read comfortably by older guests on a phone in sun or low light.
   ========================================================================= */
.hymns { max-width: 760px; margin: 0 auto; padding: 28px 20px 12px; }

.hymn-search__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-ink);
  margin-bottom: 8px;
}
.hymn-search__field { position: relative; }
.hymn-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; }
.hymn-search__field input {
  width: 100%;
  height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 1.1rem;               /* 17.6px: large, and above 16px so iOS never zooms */
  -webkit-appearance: none;
  appearance: none;
}
.hymn-search__field input:focus { outline: none; border-color: var(--onyx); box-shadow: 0 0 0 3px var(--press); }

.hymn-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px;
  margin: 22px 0 30px;
}
.hymn-numbers__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border: 1px solid var(--silver);
  border-radius: 12px;
  background: var(--ivory);
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease);
}
.hymn-numbers__item:hover { background: var(--mist); }
.hymn-numbers__item:active { transform: scale(0.95); background: var(--graphite); color: var(--ivory); }
.hymn-numbers__item:focus-visible { outline: 2px solid var(--onyx); outline-offset: 2px; }

.hymn-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--silver); }
.hymn-index li { border-bottom: 1px solid var(--hairline); }
.hymn-index__link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-height: 60px;
  padding: 14px 4px;
}
.hymn-index__link:active { background: var(--mist); }
.hymn-index__num {
  flex: 0 0 3.2rem;
  text-align: right;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 1.35rem;
  color: var(--silver-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.hymn-index__title { font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-size: 1.3rem; color: var(--ink); line-height: 1.3; }
.hymn-empty { text-align: center; color: var(--slate); padding: 28px 12px; font-size: 1rem; }

/* one hymn */
.hymn__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--silver);
  border-radius: 999px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 0.95rem;
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}
.hymn__back:hover { background: var(--mist); }
.hymn__back:active { transform: scale(0.95); }

.hymn__head { text-align: center; padding: 30px 0 6px; }
.hymn__number {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 500;
  color: var(--silver-ink);        /* the lighter accent tone */
  font-variant-numeric: lining-nums;
}
.hymn__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.hymn__divider { display: flex; align-items: center; gap: 12px; max-width: 220px; margin: 18px auto 0; }
.hymn__divider::before, .hymn__divider::after { content: ""; flex: 1; border-top: 1px solid var(--silver); }
.hymn__divider span { width: 7px; height: 7px; background: var(--silver-ink); transform: rotate(45deg); }

.hymn__body { padding: 26px 0 8px; }
.hymn__verse, .hymn__chorus-lines { font-size: 1.18rem; line-height: 1.75; color: var(--ink); }
/* a sung line that wraps on a phone continues indented, so each line still reads as one */
.hymn__verse p, .hymn__chorus-lines p { margin: 0; padding-left: 1.1em; text-indent: -1.1em; }
.hymn__verse { margin: 0 0 22px; }

/* the chorus: a quiet panel with a graphite rule down its left edge */
.hymn__chorus {
  margin: 0 0 30px;
  padding: 16px 18px 18px 20px;
  background: var(--ivory);
  border-left: 3px solid var(--graphite);
  border-radius: 0 12px 12px 0;
}
.hymn__chorus-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-ink);
}
.hymn__chorus-lines { font-weight: 500; }

@media (min-width: 768px) {
  .hymns { padding-top: 40px; }
  .hymn__number { font-size: 4.2rem; }
  .hymn__title { font-size: 2.5rem; }
  .hymn__verse, .hymn__chorus-lines { font-size: 1.25rem; }
  .hymn__chorus { padding: 20px 24px 22px 26px; }
}

/* the landing page's hero nav: Program on the left, Moments and Hymns together on the right */
.hero-nav__group { display: flex; gap: 8px; }

/* =========================================================================
   UPLOAD
   ========================================================================= */
.upload-page { padding-bottom: 40px; }

.upload-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 20px 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.field label {
  font-size: 0.82rem;
  color: var(--slate);
}
.field input {
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  padding: 10px 2px;
  font-size: 1.08rem;
  color: var(--ink);
  border-radius: 0;
}
.field input:focus {
  outline: none;
  border-bottom-color: var(--onyx);
}
.field input::placeholder { color: var(--placeholder); opacity: 1; }
.field__optional { color: var(--slate); font-weight: 400; text-transform: none; letter-spacing: 0; }

.field textarea {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--ivory);
  padding: 12px 14px;
  font-size: 0.96rem;
  font-family: inherit;
  color: var(--ink);
  resize: vertical;
  min-height: 72px;
}
.field textarea:focus { outline: none; border-color: var(--onyx); }
.field textarea::placeholder { color: var(--placeholder); opacity: 1; }

.privacy-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.privacy-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}
.privacy-option input {
  accent-color: var(--onyx);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.drop-zone {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s var(--ease), border-color 0.2s var(--ease);
}
.drop-zone:active { transform: scale(0.99); }
.drop-zone:hover { border-color: var(--onyx); }

.drop-zone__icon { width: 34px; height: 34px; color: var(--onyx); }
.drop-zone__title { font-family: var(--serif);
  font-size-adjust: var(--serif-adjust); font-size: 1.4rem; }
.drop-zone__hint { font-size: 0.86rem; color: var(--slate); max-width: 280px; }

.progress-track {
  height: 3px;
  background: var(--mist);
  margin-top: 8px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--graphite);
  width: 0%;
  transition: width 0.2s var(--ease);
}

.status-ok { color: #3E6A45; }
.status-err { color: #852F26; }

/* ===== Selection preview (pick files, review, share) ===== */
.selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.selection-count { font-size: 0.86rem; color: var(--slate); }

.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.selection-item__thumb-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mist);
}
.selection-item__thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

.selection-item__video-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(18, 18, 21, 0.65);
  color: #fff;
  font-size: 0.64rem;
  padding: 2px 6px;
  border-radius: 10px;
}

.selection-item__remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--pearl);
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.15s var(--ease);
}
.selection-item__remove:active { transform: scale(0.85); }
.selection-item.is-done .selection-item__remove,
.selection-item.is-error .selection-item__remove { display: none; }

.selection-item__done-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 21, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.selection-item.is-done .selection-item__done-overlay { opacity: 1; }

.selection-item__progress {
  height: 3px;
  background: var(--mist);
  margin-top: 6px;
  overflow: hidden;
  border-radius: 3px;
}
.selection-item__progress-fill {
  height: 100%;
  background: var(--graphite);
  width: 0%;
  transition: width 0.2s var(--ease);
}
.selection-item.is-done .selection-item__progress-fill { background: #3E6A45; }

.selection-item__error {
  font-size: 0.66rem;
  color: #852F26;
  margin-top: 4px;
  line-height: 1.3;
}
.selection-item.is-error .selection-item__thumb-wrap { opacity: 0.5; }

/* ===== Confirm sheet: guest-facing yes/no prompts (remove-before-upload, upload
   confirmation). Custom rather than native confirm() so the buttons can say "Remove" /
   "Go back" instead of "OK" / "Cancel". ===== */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 21, 0.45);
  animation: fadeIn 0.15s var(--ease);
}
.confirm-modal__sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--ivory);
  border-radius: 20px 20px 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(25, 25, 28, 0.22);
  animation: slideUp 0.2s var(--ease);
}
@media (min-width: 640px) {
  .confirm-modal { align-items: center; }
  .confirm-modal__sheet { border-radius: 20px; }
}
.confirm-modal__text {
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 22px;
  text-align: center;
}
.confirm-modal__actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.confirm-modal__actions .btn { width: 100%; }

.btn-danger { background: #852F26; color: var(--ivory); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--ink);
  color: var(--ivory);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  box-shadow: var(--shadow-soft);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  max-width: calc(100% - 40px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

@media (min-width: 768px) {
  .upload-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 56px;
    align-items: start;
    padding: 56px 32px 0;
  }
  .selection-grid:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
  }
  .selection-grid:empty::before {
    content: 'Your photos and videos will appear here as you choose them';
    max-width: 220px;
    color: var(--slate);
    font-size: 0.9rem;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .upload-layout { grid-template-columns: minmax(340px, 420px) 1fr; gap: 80px; padding-top: 72px; }
}

/* =========================================================================
   GALLERY
   ========================================================================= */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 20px;
  overflow-x: auto;
}

.filter-chip {
  border: 1px solid var(--hairline);
  background: var(--ivory);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.filter-chip:active { transform: scale(0.93); box-shadow: 0 0 0 4px var(--press); }
.filter-chip.active {
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
}

.select-toggle {
  margin-left: auto;
  font-size: 0.84rem;
  color: var(--ink);
  border: 1px solid var(--hairline);
  background: var(--ivory);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.select-toggle:active { transform: scale(0.93); box-shadow: 0 0 0 4px var(--press); }
.select-mode .select-toggle {
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 3px;
}
@media (min-width: 600px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 5px; } }
@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 6px; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 8px; } }
@media (min-width: 1440px) { .gallery-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 10px; } }

.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mist);
  animation: fadeIn 0.5s var(--ease);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }

.gallery-tile__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(18, 18, 21, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-tile__check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: rgba(18, 18, 21, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
}
.select-mode .gallery-tile__check { display: flex; }
.gallery-tile.selected .gallery-tile__check { background: var(--graphite); border-color: #fff; }
.gallery-tile.selected { outline: 2px solid var(--graphite); outline-offset: -2px; }

.skeleton {
  background: linear-gradient(100deg, var(--mist) 30%, #C6C8CC 50%, var(--mist) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ===== Collage wall - an editorial scatter of photos, not a literal frame shop.
   Mixed shapes, gentle rotation and slight overlap read as "photos on a table",
   not an empty gallery. Fills in with real uploads as they arrive. ===== */
.collage-wall {
  columns: 2;
  column-gap: 16px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 22px 18px 0;
}
@media (min-width: 600px)  { .collage-wall { columns: 3; } }
@media (min-width: 1024px) { .collage-wall { columns: 4; column-gap: 22px; padding: 30px 24px 0; } }
@media (min-width: 1440px) { .collage-wall { columns: 5; } }

.piece {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}
@media (min-width: 1024px) { .piece { margin-bottom: 26px; } }

/* Gentle scatter: alternating rotation, and a touch of overlap on some pieces.
   Overlap is small on purpose - enough to feel candid, never enough to cover
   more than a sliver of the tile below it (still fully tappable on its own). */
.piece:nth-child(6n+1) { transform: rotate(-2deg); }
.piece:nth-child(6n+2) { transform: rotate(1.5deg); }
.piece:nth-child(6n+3) { transform: rotate(-1deg); z-index: 2; margin-top: -14px; }
.piece:nth-child(6n+4) { transform: rotate(2.5deg); }
.piece:nth-child(6n+5) { transform: rotate(-3deg); z-index: 2; margin-top: -10px; }
.piece:nth-child(6n+6) { transform: rotate(1deg); }

.piece--arch .piece__frame { aspect-ratio: 3 / 4.2; border-radius: 200px 200px 8px 8px; }
.piece--rounded .piece__frame { aspect-ratio: 4 / 5; border-radius: 22px; }

.piece__frame {
  width: 100%;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(25, 25, 28, 0.15);
}
.piece__inner { width: 100%; height: 100%; overflow: hidden; }
.piece__inner .gallery-tile { width: 100%; height: 100%; aspect-ratio: auto; animation: none; }

/* A waiting slot: a real satin / pearl photo, veiled in pearl-white so it still reads as
   empty rather than as someone's upload, with the invitation sitting on top of it. */
.piece__mat {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mist);
}
.piece__mat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.piece__mat::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A soft pearl pool behind the label only: the photo stays calm and a little
     below the page's brightness, so the slot reads as waiting, not as a lightbox. */
  background: radial-gradient(ellipse 72% 30% at 50% 50%, rgba(207, 209, 212, 0.88) 0%, rgba(207, 209, 212, 0.45) 55%, transparent 100%);
}
.piece__mat-label {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink);
  text-align: center;
  padding: 0 12px;
  text-shadow: 0 0 10px rgba(207, 209, 212, 0.9);
}

/* Polaroid: a thin cream card with its own inset padding, not a "frame" -
   the one shape allowed a visible edge, since real polaroids have one. */
.piece--polaroid .piece__frame {
  background: var(--ivory);
  padding: 10px 10px 30px;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(25, 25, 28, 0.18);
}
.piece--polaroid .piece__inner { aspect-ratio: 1 / 1; border-radius: 1px; }

.collage-wall__caption {
  text-align: center;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  color: var(--slate);
  font-size: 1.05rem;
  margin: 26px auto 4px;
  padding: 0 24px;
}

/* ===== Lightbox (always true full screen) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 21, 0.97);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.2s var(--ease);
}
.lightbox__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px calc(12px + env(safe-area-inset-top, 0px));
  color: #fff;
}
.lightbox__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s var(--ease), transform 0.12s var(--ease);
}
.lightbox__close:active { background: rgba(255,255,255,0.12); transform: scale(0.92); }
.lightbox__stage {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.lightbox__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
}
.lightbox__slide img, .lightbox__slide video { max-width: 100%; max-height: 100%; }
.lightbox__caption { text-align: center; color: #D8D8DB; font-size: 0.8rem; padding: 8px 20px; }
.lightbox__actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.lightbox__actions .btn { flex: 1; }
.lightbox__actions .btn-icon { background: rgba(255,255,255,0.12); color: #fff; }

.select-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--bar-max);
  background: var(--ink);
  color: var(--ivory);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 40;
  animation: slideUp 0.2s var(--ease);
}
.select-bar span { font-size: 0.85rem; }
.select-bar .btn-outline { border-color: var(--ivory); color: var(--ivory); }

/* =========================================================================
   ADMIN
   ========================================================================= */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--bar-h);
  /* full-width bar, content aligned to the page column */
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, calc((100% - var(--content-max)) / 2 + 20px)) 8px;
  background: rgba(207, 209, 212, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(110, 114, 122, 0.45);
  transition: padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.is-scrolled .admin-header { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; box-shadow: 0 8px 18px -14px rgba(18, 18, 21, 0.5); }
.admin-header__back {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  color: var(--ink);
  font-size: 0.84rem;
  flex-shrink: 0;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.admin-header__back:hover { background: var(--mist); }
.admin-header__back:active {
  transform: scale(0.94);
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
  box-shadow: 0 0 0 4px var(--press);
}
.admin-header__back svg { flex-shrink: 0; }
.admin-header h2 { font-size: 1.35rem; flex: 1; }
@media (min-width: 768px) { .admin-header h2 { font-size: 1.6rem; } }

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.admin-card {
  width: 100%;
  max-width: 360px;
  padding: 8px 4px;
}
.admin-card h2 { font-size: 1.8rem; margin-bottom: 22px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 20px 8px;
  border-top: 1px solid var(--hairline);
}
.stat-card {
  text-align: center;
  padding: 8px 10px;
  border-right: 1px solid var(--hairline);
}
.stat-card:last-child { border-right: none; }
.stat-card__num { font-family: var(--serif);
  font-size-adjust: var(--serif-adjust); font-size: 2rem; }
.stat-card__label { font-size: 0.72rem; color: var(--slate); margin-top: 2px; }

@media (min-width: 768px) {
  .stats-row { grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: 48px; padding: 40px 20px 16px; }
  .stat-card { border-right: none; padding: 0; }
  .stat-card__num { font-size: 2.4rem; }
}

.stats-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 768px) {
  .stats-row--4 { grid-template-columns: repeat(4, minmax(0, 180px)); }
  .stats-row--4 .stat-card__num { font-size: 2.1rem; }
}

/* ===== Admin nav (pill row shared across all /admin-* pages) ===== */
.admin-nav { padding-top: 16px; }

/* ===== Overview: recent uploads ===== */
.overview-recent {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 20px 48px;
  border-top: 1px solid var(--hairline);
}
.overview-recent__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.overview-recent__header h3 { font-size: 1.3rem; }

/* ===== Content page: select mode + bulk actions ===== */
.dash-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 20px 0;
}
.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}
.bulk-bar__actions { display: flex; gap: 8px; margin-left: auto; }
.bulk-bar__delete { border-color: #852F26; color: #852F26; }
.bulk-bar__delete:active { background: #852F26; color: #fff; }

.guest-folder__select-all {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--slate);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
}
.guest-folder__select-all:hover { color: var(--ink); }

.lightbox__delete { color: #F2B1A8; }

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 20px 28px;
}
.admin-actions .btn { flex: 1; min-width: 160px; width: auto; white-space: nowrap; }
@media (min-width: 768px) { .admin-actions { justify-content: center; } .admin-actions .btn { flex: 0 1 auto; padding-left: 26px; padding-right: 26px; } }

/* ===== Print QR ===== */
.qr-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px 20px 36px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.qr-section h3 { font-size: 1.4rem; margin-top: 24px; }
.qr-section__hint { color: var(--slate); font-size: 0.86rem; margin-top: 6px; max-width: 52ch; }

.qr-url-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.qr-url-row .btn { flex-shrink: 0; }

.qr-url-status { font-size: 0.8rem; color: var(--slate); margin-top: 8px; }
.qr-url-status.is-success { color: #3E6A45; }
.qr-url-status.is-error { color: #852F26; }

.qr-templates {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .qr-templates { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.qr-template h4 { font-size: 1.1rem; margin-top: 14px; }
.qr-template p { font-size: 0.78rem; color: var(--slate); margin-top: 2px; }

.qr-template__preview {
  background: var(--mist);
  border: 1px solid var(--hairline);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qr-template[data-kind="sticker"] .qr-template__preview { aspect-ratio: 1 / 1; }
.qr-template__preview canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-template__placeholder { font-size: 0.78rem; color: var(--slate); }

.qr-template__actions { display: flex; gap: 8px; margin-top: 12px; }
.qr-template__actions .btn { flex: 1; }
.qr-template__actions .btn:disabled { opacity: 0.5; }

.admin-list__heading {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 20px 0;
  font-size: 1.3rem;
}

.admin-list {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px 100px;
  display: flex;
  flex-direction: column;
}
.admin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.admin-row:first-child { border-top: 1px solid var(--hairline); }
.admin-row img { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; }
.admin-row__meta { flex: 1; min-width: 0; }
.admin-row__meta .name { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row__meta .sub { font-size: 0.72rem; color: var(--slate); }
.admin-row button { border: none; background: none; color: #852F26; padding: 8px; cursor: pointer; }

@media (min-width: 768px) {
  .admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 32px; }
  .admin-row:first-child { border-top: none; }
  .admin-list::before {
    content: '';
    grid-column: 1 / -1;
    border-top: 1px solid var(--hairline);
  }
}

/* ===== Program editor (admin) ===== */
.program-editor {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 20px 36px;
  border-bottom: 1px solid var(--hairline);
}
.program-editor h3 { font-size: 1.4rem; }

.program-editor__form-row { display: flex; gap: 10px; }
.program-editor__form-row input {
  flex: 1;
  /* An <input> defaults to a ~20-character intrinsic width and will not shrink past it
     in a flex row, pushing the page sideways on a narrow phone. */
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--ivory);
  color: var(--ink);
}

/* Director / overall time-range fields shown above the sections for whichever
   program tab is active. */
.program-meta-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--hairline);
}
.program-meta-form .field { margin-bottom: 0; flex: 1; min-width: 200px; }

.sections-editor { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }

.section-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px;
  background: var(--ivory);
}
.section-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.section-card__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-card__reorder { display: flex; gap: 2px; flex-shrink: 0; }
.section-card__reorder button {
  width: 26px;
  height: 22px;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--slate);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}
.section-card__reorder button:disabled { opacity: 0.3; cursor: default; }
.section-card__heading,
.section-card__time {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 10px;
  background: var(--pearl);
}
.section-card__heading {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 1.05rem;
  color: var(--onyx);
}
.section-card__time { font-size: 0.82rem; color: var(--slate); }
.section-card__delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--slate);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.section-card__delete:hover { color: #852F26; }

.items-editor { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

.item-row {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}
.item-row__top { display: flex; align-items: center; gap: 8px; }
.item-row__reorder { display: flex; gap: 2px; flex-shrink: 0; }
.item-row__reorder button {
  width: 22px;
  height: 20px;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--slate);
  cursor: pointer;
  font-size: 0.68rem;
  line-height: 1;
}
.item-row__reorder button:disabled { opacity: 0.3; cursor: default; }
.item-row__text {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 0.86rem;
  font-family: inherit;
  background: var(--pearl);
  color: var(--ink);
}
.item-row__flags {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  padding-left: 30px;
}
.item-row__check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--slate);
  flex-shrink: 0;
  white-space: nowrap;
}
.item-row__delete {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--slate);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.item-row__delete:hover { color: #852F26; }

.item-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
}
.item-add-form__text {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 0.86rem;
  font-family: inherit;
  background: var(--ivory);
  color: var(--ink);
}
.item-add-form__check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--slate);
  white-space: nowrap;
}

.section-add-form {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-add-form .btn { align-self: flex-start; }

@media (min-width: 700px) {
  .section-card__head-top { justify-content: flex-start; gap: 10px; }
  .section-card__head { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
  .section-card__heading { width: auto; flex: 2; min-width: 200px; }
  .section-card__time { width: auto; flex: 1; min-width: 140px; }
  .item-row__flags { padding-left: 34px; margin-top: 0; }
  .item-row__top { flex-wrap: nowrap; }
}

/* ===== Hymns editor (admin) ===== */
.hymn-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hymn-card { border: 1px solid var(--hairline); border-radius: 10px; background: var(--ivory); }
.hymn-card--new { margin-top: 20px; border-style: dashed; border-color: var(--silver); }
.hymn-card__summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.hymn-card__summary::-webkit-details-marker { display: none; }
.hymn-card__num {
  flex: 0 0 3rem;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 1.3rem;
  color: var(--silver-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.hymn-card__title { flex: 1; min-width: 0; font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-size: 1.15rem; color: var(--ink); }
.hymn-card__meta { flex-shrink: 0; font-size: 0.74rem; color: var(--slate); }
.hymn-card__form { padding: 4px 16px 16px; border-top: 1px solid var(--hairline); }
.hymn-card__form .field { margin: 14px 0 0; }
.hymn-card__form textarea { background: var(--pearl); line-height: 1.55; }
.hymn-card__form input { border: 1px solid var(--hairline); border-radius: 4px; padding: 8px 10px; background: var(--pearl); }
.hymn-card__row { display: flex; gap: 12px; flex-wrap: wrap; }
.hymn-card__number-field { flex: 0 0 110px; }
.hymn-card__title-field { flex: 1; min-width: 200px; }
.hymn-card__actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.hymn-card__delete { color: #852F26; margin-left: auto; }

/* ===== Dashboard: guest folders + messages ===== */
.dash-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.dash-tabs { display: flex; gap: 10px; padding-bottom: 4px; }
.dash-tab {
  border: 1px solid var(--hairline);
  background: var(--ivory);
  padding: 9px 20px;
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.dash-tab:active { transform: scale(0.95); box-shadow: 0 0 0 4px var(--press); }
.dash-tab.active {
  background: var(--graphite);
  color: var(--ivory);
  border-color: var(--graphite);
}

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.dash-filters__search,
.dash-filters__select {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.86rem;
  font-family: inherit;
  background: var(--ivory);
  color: var(--ink);
}
.dash-filters__search { flex: 1; min-width: 160px; }
.dash-filters__checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--slate);
  white-space: nowrap;
}
.dash-filters__checkbox input { accent-color: var(--onyx); }

.dash-empty { color: var(--slate); text-align: center; padding: 48px 20px; }

.guest-folders { margin-top: 8px; }

.guest-folder { border-bottom: 1px solid var(--hairline); }
.guest-folder__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.guest-folder__summary::-webkit-details-marker { display: none; }
.guest-folder__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--onyx);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}
.guest-folder--photographer .guest-folder__avatar { background: var(--graphite); color: var(--ivory); }
.guest-folder__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guest-folder__name { font-size: 0.98rem; }
.guest-folder__meta { font-size: 0.78rem; color: var(--slate); margin-top: 2px; }

.guest-folder__uploads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  padding: 0 0 20px;
}
.guest-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: var(--mist); }
.guest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.guest-thumb__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(18, 18, 21, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guest-thumb__delete {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 18, 21, 0.55);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guest-thumb__delete:hover { background: #852F26; }

.guest-thumb__check {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: rgba(18, 18, 21, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
}
.select-mode .guest-thumb__check { display: flex; }
.select-mode .guest-thumb__delete { display: none; }
.guest-thumb.selected .guest-thumb__check { background: var(--graphite); border-color: #fff; }
.guest-thumb.selected { outline: 2px solid var(--graphite); outline-offset: -2px; }

@media (min-width: 768px) {
  .guest-folder__uploads { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
}

.guestbook { margin-top: 8px; display: flex; flex-direction: column; gap: 24px; }
.guestbook-entry { border-bottom: 1px solid var(--hairline); padding-bottom: 24px; }
.guestbook-entry__header { display: flex; align-items: center; gap: 12px; }
.guestbook-entry__name { font-size: 1rem; }
.guestbook-entry__message {
  margin: 14px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--silver);
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
}
.guestbook-entry__thumbs { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; }
.guestbook-entry__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }

@media (min-width: 1024px) {
  .dash-section { padding-top: 36px; }
  .guest-folder__uploads { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.progress-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--bar-max);
  background: var(--ink);
  color: var(--ivory);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: 0.82rem;
  z-index: 40;
}
.progress-banner .progress-track { background: rgba(255,255,255,0.2); }
.progress-banner .progress-fill { background: var(--silver); }

/* ===== Animations ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

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