/* =====================================================================
   styles.css — the whole look, in one file.

   The two-surface rule:
     .glass  frosted, for places people BROWSE (nav, package cards over the background)
     .panel  solid, for places people COMMIT (picking a time, details, payment, admin)
   Everything else: one dark base, one accent (golden hour), two typefaces. Motion is only the background fade-in
   and short page/step transitions, and all of it turns off under "reduce motion".
   ===================================================================== */
/* Both typefaces are served from this site (public/fonts, SIL Open Font License): no outside font service. */
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Variable.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --bg: #08080b;
  --panel: #111116;
  --panel-2: #18181f;
  --glass: rgba(18, 18, 24, 0.52);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f5f3ef;
  --muted: #a6a4ad;
  --accent: #e9a560;
  --accent-ink: #1b1207;
  --danger: #f0756e;
  --ok: #77d39e;
  --radius: 18px;
  --radius-sm: 12px;
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', 'Didot', 'Bodoni 72', Georgia, serif; /* tall, narrow, high-contrast: the business card's face */
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* "hidden" always wins, whatever display a class gives (buttons, flex panels). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.4em; text-wrap: balance; font-weight: 600; }
h1, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
.muted { color: var(--muted); }
.num, .price, time { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 640px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- surfaces ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(18, 18, 24, 0.88); }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 28px); }

/* ---------- the background (Admin › Site) ----------
   Photos fade one into the next and drift very slowly (a gentle zoom out), which is what makes them feel alive.
   The veil keeps text readable over any photo; .strong is heavier, for pages with forms. */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #2a1d12 0%, var(--bg) 60%); }
.bg-photo, .bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-photo { opacity: 0; transition: opacity 1.6s ease; }
.bg-photo.on { opacity: 1; animation: drift 14s ease-out both; }
/* Nudged photos (Admin): --fx/--fy is the part that stays in view, --zoom how far in. Set per photo by /site.css. */
.bg-photo, .pkg-img, .framer-img { transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--zoom, 1)); }
@keyframes drift { from { transform: scale(calc(var(--zoom, 1) * 1.07)); } to { transform: scale(var(--zoom, 1)); } }
.bg-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 8, 11, 0.4), rgba(8, 8, 11, 0.6) 55%, rgba(8, 8, 11, 0.9)); }
.bg.strong .bg-veil { background: rgba(8, 8, 11, 0.8); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: max(12px, env(safe-area-inset-top)); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: max(12px, env(safe-area-inset-top)) auto 0; width: min(1080px, calc(100% - 2 * var(--gutter)));
  padding: 6px 6px 6px 18px; border-radius: 999px;
}
.brand { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; text-transform: uppercase; text-decoration: none; letter-spacing: 0.06em; white-space: nowrap; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; color: var(--muted); border-radius: 999px; }
.nav-links a:not(.btn):hover { color: var(--text); }

/* ---------- buttons and fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { border-color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #f1b373; border-color: #f1b373; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; cursor: default; pointer-events: none; }
.btn-small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-text { border-color: transparent; padding: 0 10px; color: var(--muted); }
.btn-text:hover { color: var(--text); border-color: transparent; }
/* A small button still gets a 44px tap area. */
.btn-small, .btn-text { position: relative; }
.btn-small::after, .btn-text::after { content: ''; position: absolute; inset: -4px 0; }

label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.hint { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], input[type=date], input[type=time], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font: 16px/1.4 var(--font-body);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.field { margin-bottom: 16px; }
.field-error { color: var(--danger); font-size: 14px; margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; cursor: pointer; min-height: 44px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.error-box { border: 1px solid rgba(240, 117, 110, 0.4); background: rgba(240, 117, 110, 0.1); color: #ffd1ce; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; }

/* ---------- home ---------- */
/* The first screen: the name, centred, and one button. Nothing else. */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vh, 44px);
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom)); text-align: center;
}
/* The name as on the business card: NAME | PHOTOGRAPHER, all caps, tall narrow serif. On phones the role sits under it. */
.hero-title {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.45em; row-gap: 0.2em;
  font-family: var(--font-display); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(2.2rem, 5vw, 5.6rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
@media (min-width: 641px) { .hero-title { flex-wrap: nowrap; white-space: nowrap; } }
.hero-sep { font-weight: 300; opacity: 0.7; transform: scaleY(1.1); }
.hero-role { font-size: 1em; }
@media (max-width: 640px) {
  .hero-title { font-size: 11vw; }
  .hero-sep { display: none; }
  .hero-role { flex-basis: 100%; font-size: 0.42em; letter-spacing: 0.32em; opacity: 0.9; }
}
.btn-large { min-height: 54px; padding: 0 36px; font-size: 17px; letter-spacing: 0.02em; }
/* Home: the bar appears once the name has scrolled away. */
.nav-home { position: fixed; left: 0; right: 0; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.nav-home:not(.shown) { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.section { padding: 56px 0; }
.packages { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pkg { position: relative; overflow: hidden; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
/* A package's own photo behind its card: softly blurred and darkened toward the bottom, so the text reads over any
   photo, light or dark. The photo and its veil sit below the text inside the card's own layer (isolation). */
.pkg.has-img { min-height: 340px; justify-content: flex-end; isolation: isolate; text-shadow: 0 1px 12px rgba(8, 8, 11, 0.6); }
.pkg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pkg.has-img::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0.45) 0%, rgba(8, 8, 11, 0.65) 45%, rgba(8, 8, 11, 0.92) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.25s ease;
}
.pkg.has-img .facts, .pkg.has-img .muted { color: #cfccc6; }
.pkg h3 { margin: 0; }
.pkg .price { font-size: 1.6rem; font-weight: 600; }
.pkg .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 14px; }
.pkg-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pkg .go { color: var(--accent); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pkg .go::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* the whole card books */
.pkg:hover { border-color: var(--line-strong); }
/* "Tap to see picture": fine print in the corner; it sits above the card's link. */
.peek {
  position: relative; z-index: 2; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: #cfccc6; font: inherit; font-size: 12px; letter-spacing: 0.04em; text-shadow: inherit;
}
.peek-label { border-bottom: 1px solid rgba(207, 204, 198, 0.4); padding-bottom: 1px; }
.pkg.has-img > :not(.pkg-img, .pkg-foot, .see-portfolio), .pkg-foot .go { transition: opacity 0.25s ease; }
/* Showing the photo: blur, veil and text fade away; the button covers the card, so a tap anywhere comes back. */
.pkg.peeking::before { opacity: 0; }
.pkg.peeking > :not(.pkg-img, .pkg-foot, .see-portfolio), .pkg.peeking .go { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }
.pkg.peeking .peek { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px; }
.pkg.peeking .peek-label { color: var(--text); background: rgba(8, 8, 11, 0.6); border: 0; border-radius: 999px; padding: 8px 14px; } /* readable on a light photo too */
.steps-how { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: how; }
.steps-how li { list-style: none; padding: 20px; counter-increment: how; }
.steps-how li::before { content: counter(how); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.steps-how { padding: 0; margin: 0; }
footer { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }

/* ---------- booking ---------- */
.book { padding: 40px 0 72px; }
.progress { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.progress li { flex: 1; font-size: 13px; color: var(--muted); padding-top: 10px; border-top: 2px solid var(--line); }
.progress li[aria-current="step"] { color: var(--text); border-color: var(--accent); }
.progress li.done { border-color: rgba(233, 165, 96, 0.45); }
.choice-list { display: grid; gap: 10px; }
.choice {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 14px 16px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.choice:hover { border-color: var(--line-strong); }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice small { display: block; color: var(--muted); font-size: 14px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 2px; }
.day { min-height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 4px; text-align: center; }
.day b { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.day small { font-size: 11px; color: var(--muted); line-height: 1; }
.day.off { color: rgba(166, 164, 173, 0.35); border: 1px solid transparent; border-radius: var(--radius-sm); }
.day.off b { font-weight: 400; }
.summary { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-sm); background: var(--panel-2); margin-bottom: 18px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.terms { font-size: 14px; color: var(--muted); background: var(--panel-2); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.step-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap-reverse; }
.empty { color: var(--muted); padding: 24px 0; }

/* ---------- loading ---------- */
/* Placeholders keep the real layout's space from the start, but only become visible after 300 ms, so a fast load
   never flashes gray. */
.skeleton { background: linear-gradient(90deg, var(--panel-2) 0%, #202029 50%, var(--panel-2) 100%); background-size: 200% 100%;
  visibility: hidden; animation: reveal 0s linear 300ms forwards, shimmer 1.4s linear infinite; border-color: transparent !important; color: transparent !important; }
.skeleton * { visibility: hidden !important; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes reveal { to { visibility: visible; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; max-width: calc(100% - 2 * var(--gutter));
  background: #1d1d25; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.toast[hidden] { display: none; }
.toast > span:last-child { padding: 8px 10px 8px 0; }
.toast.error { border-color: rgba(240, 117, 110, 0.6); }

/* ---------- admin ---------- */
.admin { padding: 28px 0 72px; }
.tabs { display: flex; gap: 4px; margin: 20px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { flex: 1 1 auto; min-height: 44px; padding: 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 15px var(--font-body); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--text); border-color: var(--accent); }
.board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.col h3 { font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.06em; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; }
.card.attention { border-color: rgba(240, 117, 110, 0.6); }
.card h4 { margin: 0 0 2px; font-size: 15px; }
.card .meta { font-size: 13px; color: var(--muted); }
.card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card details { margin-top: 8px; font-size: 14px; }
.card summary { cursor: pointer; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.card dl { margin: 6px 0 0; display: grid; gap: 6px; }
.card dt { font-size: 12px; color: var(--muted); }
.card dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inline-form { display: flex; gap: 6px; margin-top: 8px; }
.inline-form input { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.weekdays label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 400; cursor: pointer; margin: 0; }
.weekdays input { accent-color: var(--accent); width: 18px; height: 18px; }
.pkg-edit { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pkg-edit .wide { grid-column: 1 / -1; }

/* ---------- transitions between pages and steps (short, and only when motion is welcome) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease); }
.nav { view-transition-name: nav; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .skeleton { animation: reveal 0s linear 300ms forwards !important; }
  .bg-photo.on { animation: none; }
}

@media (max-width: 560px) {
  .nav { padding-left: 14px; }
  .nav-links a:not(.btn) { display: none; }

}

/* small helpers (no inline styles: the security policy blocks them) */
[data-gap] { margin-top: 18px; }
.fine { font-size: 14px; margin-top: 12px; }

/* ---------- admin: photos window, uploads, clients ---------- */
dialog {
  width: min(960px, calc(100% - 2 * var(--gutter))); max-height: calc(100svh - 32px); padding: clamp(18px, 3vw, 26px);
  background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialog-head h2 { margin: 0; }
.dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.dropzone { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; margin: 16px 0 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.dropzone.over { border-color: var(--accent); background: rgba(233, 165, 96, 0.08); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.thumb { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--panel-2); aspect-ratio: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(8, 8, 11, 0.75); color: var(--text); font-size: 20px; line-height: 1;
}
.thumb-x:hover { background: var(--danger); }
.thumbs:has(.wide) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.thumb.wide { aspect-ratio: auto; }
.thumb.wide .crop { aspect-ratio: 16 / 10; border-radius: 0; }
.thumb figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px; }
.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alt-link summary { cursor: pointer; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input { flex: 1 1 260px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 14px var(--font-body); cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: middle; border: 1px solid var(--line-strong); color: var(--muted); }
.badge.upcoming { color: var(--accent); border-color: rgba(233, 165, 96, 0.5); }
.badge.editing { color: #9ec5ff; border-color: rgba(158, 197, 255, 0.45); }
.badge.delivered { color: var(--ok); border-color: rgba(119, 211, 158, 0.45); }
.badge.repeat { color: var(--text); }
.client { padding: 0; margin-bottom: 10px; }
.client summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; }
.client summary::-webkit-details-marker { display: none; }
.client-main, .client-nums { display: flex; flex-direction: column; gap: 2px; }
.client-main small, .client-nums small { color: var(--muted); font-size: 13px; }
.client-nums { align-items: flex-end; text-align: right; flex: none; }
.client-body { padding: 0 18px 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.sessions { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: 14px; }
.sessions li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; }
.notes-form textarea { margin-bottom: 8px; }
.pkg-photo { display: grid; gap: 10px; }
.crop { overflow: hidden; border-radius: var(--radius-sm); }
.crop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pkg-crop { width: min(300px, 100%); aspect-ratio: 300 / 330; }
.pkg-photo-empty { padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.pkg-form { margin-bottom: 16px; }

/* ---------- client gallery ---------- */
.gallery { padding: 32px 0 72px; }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.grid { columns: 3 280px; column-gap: 10px; }
.grid figure { break-inside: avoid; margin: 0 0 10px; position: relative; border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.grid img { display: block; width: 100%; height: auto; }
.grid .dl {
  position: absolute; right: 8px; bottom: 8px; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 999px; background: rgba(8, 8, 11, 0.72); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600;
}
.grid .dl:hover { background: var(--accent); color: var(--accent-ink); }
.grid a.view { display: block; }

/* ---------- admin: adjust a photo ---------- */
.framer-frames { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: center; margin: 18px 0; }
.framer-shape { margin: 0; display: grid; gap: 6px; justify-items: center; font-size: 13px; }
.framer-frame { position: relative; max-width: 100%; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line-strong); cursor: grab; touch-action: none; background: var(--panel-2); }
.framer-frame:active { cursor: grabbing; }
.framer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.framer-zoom input { width: 100%; accent-color: var(--accent); min-height: 44px; }
img.framed { transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--zoom, 1)); }
.section { scroll-margin-top: 88px; }

/* ---------- client gallery: before the balance is paid ---------- */
.unlock { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.unlock p { margin: 0; }
.unlock-title { font-size: 1.3rem; margin: 0 0 4px; }
.grid figure.not-ready { aspect-ratio: 3 / 2; display: grid; place-items: center; }
.grid figure.not-ready::after { content: 'Preview on its way'; color: var(--muted); font-size: 14px; }
.grid figure.not-ready img { display: none; }
.card .balance { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }

/* ---------- admin: package order ---------- */
.pkg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pkg-head h2 { margin: 0; }
.pkg-move { display: flex; align-items: center; gap: 6px; }
.pkg-move .btn { min-width: 44px; font-size: 18px; }

/* ---------- package portfolio (/portfolio/<slug>) ---------- */
.portfolio { padding: 28px 0 72px; }
.portfolio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.portfolio-head h1 { margin: 0 0 4px; font-size: clamp(2.4rem, 7vw, 4rem); text-transform: uppercase; letter-spacing: 0.04em; }
.portfolio-head p { margin: 0; }
/* An offer's page: what it's for, in the photographer's words, then what's paid when. */
.portfolio-head .offer-summary { margin: 12px 0 6px; max-width: 46ch; font-size: 1.05rem; text-wrap: pretty; }
.offers-intro { margin: 0 0 12px; }
.offers-intro h2 { margin: 0 0 4px; }
.offer-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.grid .view { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.viewer { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(4, 4, 6, 0.96); touch-action: pan-y; }
.viewer::backdrop { background: rgba(0, 0, 0, 0.8); }
.viewer img { position: absolute; inset: max(56px, env(safe-area-inset-top)) 12px max(56px, env(safe-area-inset-bottom)); width: calc(100% - 24px); height: calc(100% - 112px); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); font-size: 28px; line-height: 1; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.viewer-close { top: max(10px, env(safe-area-inset-top)); right: 12px; }
.viewer-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 12px; top: 50%; transform: translateY(-50%); }
.viewer.single .viewer-prev, .viewer.single .viewer-next, .viewer.single .viewer-count { display: none; }
.viewer-count { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); text-align: center; color: var(--muted); font-size: 14px; margin: 0; }

/* The glass "See portfolio" button over a package's clear photo: see-through, so it never hides the shot. */
.see-portfolio {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; display: none; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.see-portfolio:hover { background: rgba(255, 255, 255, 0.22); }
.pkg.peeking .see-portfolio { display: inline-flex; }

/* ---------- admin: a package's portfolio ---------- */
.portfolio-admin { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.portfolio-admin h3 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 4px; }
.portfolio-admin p { font-size: 14px; }
.thumb-first {
  position: absolute; left: 4px; top: 4px; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(8, 8, 11, 0.75); color: var(--text); font: 600 12px var(--font-body);
}

/* ---------- booking: frosted glass over the package's photo ----------
   The photo shows through, softened; text stays readable because the glass is blurred and tinted, and every
   control inside keeps its own darker fill. A light veil sits over the photo itself. */
.bg.see-through .bg-veil { background: linear-gradient(to bottom, rgba(8, 8, 11, 0.25), rgba(8, 8, 11, 0.45)); }
.book-glass .panel {
  background: rgba(14, 14, 20, 0.5); border-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.book-glass .choice, .book-glass .summary, .book-glass .terms { background: rgba(10, 10, 14, 0.45); border-color: rgba(255, 255, 255, 0.12); }
.book-glass .choice:hover { background: rgba(10, 10, 14, 0.6); }
.book-glass .choice[aria-pressed="true"] { background: rgba(233, 165, 96, 0.16); }
.book-glass .day.off { background: transparent; }
.book-glass input[type=text], .book-glass input[type=email], .book-glass input[type=tel], .book-glass input[type=date], .book-glass input[type=time], .book-glass textarea { background: rgba(10, 10, 14, 0.6); border-color: rgba(255, 255, 255, 0.14); }
.book-glass .progress li { color: #d6d3cd; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .book-glass .panel { background: rgba(14, 14, 20, 0.9); }
}

/* ---------- choosing how to pay ---------- */
.pay-methods { border: 0; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.pay-methods legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.pay-method { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: rgba(10, 10, 14, 0.45); font-weight: 400; margin: 0; min-height: 44px; }
.pay-method input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.pay-method small { display: block; color: var(--muted); font-size: 13px; }
.pay-method:has(input:checked) { border-color: var(--accent); background: rgba(233, 165, 96, 0.12); }

/* ---------- the Zelle panel ---------- */
.zelle { display: grid; gap: 16px; grid-template-columns: 1fr auto; align-items: start; }
.z-main { min-width: 0; }
.z-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; }
.z-details { margin: 0; display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(10, 10, 14, 0.45); border: 1px solid var(--line); }
.z-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.z-row dt { color: var(--muted); }
.z-row dd { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; text-align: right; font-weight: 600; }
.z-row dd .num { min-width: 0; overflow-wrap: anywhere; }
.z-copy { flex: none; white-space: nowrap; }
@media (max-width: 420px) {
  .z-row { flex-wrap: wrap; gap: 2px 12px; }
  .z-row dd { flex: 1 1 100%; justify-content: space-between; text-align: left; }
}
.z-qr { width: 168px; height: auto; border-radius: var(--radius-sm); background: #fff; padding: 8px; }
.z-foot { grid-column: 1 / -1; }
.z-sent { margin: 0; color: var(--ok); }
@media (max-width: 560px) { .zelle { grid-template-columns: 1fr; } .z-qr { justify-self: center; } }

.unlock-zelle { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
.unlock-or { font-size: 1rem; margin: 0 0 10px; }

.z-admin-qr img { width: 160px; height: auto; border-radius: var(--radius-sm); background: #fff; padding: 6px; display: block; margin-bottom: 8px; }
#tab-payments .panel { margin-bottom: 16px; }

/* Admin › Guide: plain sections that open one at a time. */
.guide { max-width: 640px; }
.guide > h2 { margin: 0 0 4px; }
.guide > p { margin: 0 0 16px; }
.guide details { margin-bottom: 12px; }
.guide summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.guide-steps { margin: 8px 0 0; padding-left: 1.2em; }
.guide-steps li { margin-bottom: 10px; text-wrap: pretty; }
.guide-list dt { font-weight: 600; margin-top: 12px; }
.guide-list dd { margin: 2px 0 0; color: var(--muted); text-wrap: pretty; }
.guide p { text-wrap: pretty; }

/* Admin › Setup: one set-once screen at a time, picked with these chips. */
.setup-nav { margin: 0 0 16px; }
/* Small phones: all five admin tabs on screen, no sideways scrolling (the tap target stays 44 px tall). */
@media (max-width: 400px) {
  .tabs { gap: 0; }
  .tabs button { padding: 0 6px; font-size: 14px; }
}

/* Demo mode: a small note on every page that this is sample data (it never covers the page's own buttons for long:
   it sits low and narrow, above the safe area). */
.demo-banner { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 14px; border-radius: 14px;
  background: rgba(8, 8, 11, 0.85); border: 1px solid var(--accent); color: var(--text); font: 500 13px var(--font-body); }
.demo-banner a { color: var(--accent); }
/* Room at the bottom of every page, so the note never hides the last button for good. */
body:has(.demo-banner) { padding-bottom: 72px; }
.demo-reset, .demo-exit { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }

/* Admin › Setup › Site photos › Behind Admin: pick the one photo. */
.admin-bg-pick { margin-top: 12px; }
.admin-bg-pick button { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; overflow: hidden; min-height: 44px; }
.admin-bg-pick button[aria-pressed="true"] { border-color: var(--accent); }
.admin-bg-pick img { display: block; width: 100%; height: auto; }

/* Booking › time: the request for a time outside sunrise and sunset, under the calendar. */
.request-time { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.request-time form { margin-top: 12px; }
.request-actions { align-items: center; }
.request-actions input[type="time"] { width: auto; max-width: 9.5em; }