/* =====================================================================
   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], 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), .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), .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 { min-height: 44px; padding: 0 16px; 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; }