@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* Email-linked favourites */
.favorite-identity-button{border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.65rem .25rem;font:inherit}
.favorite-email-dialog{max-width:460px;width:calc(100% - 32px);border:0;padding:0;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.favorite-email-dialog::backdrop{background:rgba(15,15,15,.62);backdrop-filter:blur(3px)}
.favorite-email-dialog form{position:relative;display:grid;gap:16px;padding:42px;background:#fff;color:#171717}
.favorite-email-dialog h2,.favorite-email-dialog p{margin:0}.favorite-email-dialog label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.favorite-email-dialog input{width:100%;box-sizing:border-box;border:1px solid #cfcac2;padding:14px 15px;font:inherit;background:#fff}
.favorite-email-dialog small{min-height:18px;color:#9c2b24}.favorite-dialog-close{position:absolute;right:16px;top:16px;border:0;background:transparent;width:34px;height:34px;cursor:pointer}.favorite-dialog-close svg{width:20px}
.favorite-viewer-layout{display:grid;grid-template-columns:minmax(240px,32%) 1fr;gap:24px}.favorite-viewer-list{display:grid;align-content:start;border:1px solid #e6e1da}.favorite-viewer-row{display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;border-bottom:1px solid #e6e1da;background:#fff;padding:17px;cursor:pointer}.favorite-viewer-row:last-child{border-bottom:0}.favorite-viewer-row.active{background:#f3f0eb}.favorite-viewer-row span{display:grid;gap:4px}.favorite-viewer-row small{color:#777}.favorite-viewer-row svg{width:18px}.favorite-viewer-detail{min-width:0}.favorite-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.favorite-detail-heading h3,.favorite-detail-heading p{margin:0}.favorite-selection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.favorite-selection-grid article{min-width:0}.favorite-selection-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eee}.favorite-selection-grid strong{display:block;font-size:.78rem;margin-top:7px;overflow-wrap:anywhere}
@media(max-width:720px){.favorite-email-dialog form{padding:34px 24px}.favorite-viewer-layout{grid-template-columns:1fr}.favorite-detail-heading{align-items:flex-start;flex-direction:column}.favorite-selection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./assets/fonts/CormorantGaramond-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("./assets/fonts/Lora-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("./assets/fonts/NotoSerif-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Prata";
  src: url("./assets/fonts/Prata-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #11110f;
  --muted: #716f68;
  --line: #d9d6ce;
  --warm-white: #f8f7f3;
  --warm-gray: #efede7;
  --white: #fff;
  --green: #66715e;
  --amber: #a88758;
  --red: #8d5f54;

  /* Global font families: every stack includes dependable Latin and Cyrillic glyphs. */
  --font-ui: "Inter", "Arial", sans-serif;
  --font-modern-sans: "Inter", "Arial", sans-serif;
  --font-minimal: "Manrope", "Arial", sans-serif;
  --font-elegant-serif: "Cormorant Garamond", "Noto Serif", "Times New Roman", serif;
  --font-editorial: "Lora", "Noto Serif", "Times New Roman", serif;
  --font-luxury: "Prata", "Noto Serif", "Times New Roman", serif;
  --font-classic: "Noto Serif", "Times New Roman", serif;

  /* Central type scale. Component styles consume these tokens only. */
  --type-hero: clamp(3rem, 5vw, 5rem);
  --type-h1: clamp(2.5rem, calc(2rem + 1.35vw), 3.75rem);
  --type-h2: clamp(1.875rem, calc(1.5rem + 1vw), 2.75rem);
  --type-h3: clamp(1.25rem, calc(1.08rem + .5vw), 1.75rem);
  --type-gallery-heading: clamp(1.875rem, calc(1.55rem + 1vw), 3rem);
  --type-stat: clamp(1.625rem, calc(1.45rem + .55vw), 2rem);
  --type-body-large: .9375rem;
  --type-body: .8125rem;
  --type-navigation: .75rem;
  --type-caption: .6875rem;
  --type-section-label: .625rem;
  --type-label: .5625rem;
  --type-micro: .5rem;
  --type-button: .6875rem;
  --type-input: 1rem;
  --type-pin: 1.3125rem;
  --type-preview-hero: clamp(1.35rem, 2.65vw, 2.5rem);
  --type-preview-hero-mobile: clamp(1.5rem, 7vw, 2rem);
  --type-preview-hero-compact: 1.5rem;
  --type-preview-heading: 1.5rem;
  --type-preview-caption: .4375rem;
  --type-preview-button: .375rem;
  --type-preview-micro: .3125rem;
  --type-ampersand: .72em;

  --leading-hero: .82;
  --leading-h1: .98;
  --leading-h2: 1.04;
  --leading-h3: 1.12;
  --leading-body: 1.6;
  --leading-caption: 1.45;
  --tracking-hero: -.04em;
  --tracking-h1: -.03em;
  --tracking-h2: -.025em;
  --tracking-h3: -.015em;
  --tracking-label: .13em;
  --tracking-button: .07em;
  --tracking-navigation: 0;
  --measure-hero: min(88vw, 90rem);
  --measure-copy: 42rem;
  --space-type-xs: .35rem;
  --space-type-sm: .65rem;
  --space-type-md: 1.15rem;
  --space-type-lg: 1.375rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html, body, #app { min-height: 100%; }

html { background: var(--warm-white); }

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

h1, h2, h3, p { text-wrap: pretty; }
h1 { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--type-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 36px 30px 26px;
  background: var(--warm-gray);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; }
.sidebar .sidebar-close { display: none; }

.wordmark {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--type-body);
  white-space: nowrap;
}

.wordmark strong { font-weight: 700; }
.wordmark span { color: #8a877f; font-weight: 500; }
.wordmark-light { color: white; }
.wordmark-light span { color: rgba(255,255,255,.68); }

.official-brand-link { width: 58px; height: 58px; display: block; flex: 0 0 auto; text-decoration: none; }
.official-brand-link img { width: 100%; height: 100%; object-fit: contain; display: block; }
.official-brand-link.brand-on-dark { padding: 3px; background: rgba(250,249,246,.94); box-shadow: 0 7px 30px rgba(8,8,7,.18); }
.profile-logo { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; display: block; background: white; }

.side-nav { display: grid; gap: 6px; margin-top: 92px; }

.side-link {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  color: inherit;
  text-decoration: none;
  font-size: var(--type-navigation);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.side-link svg { width: 16px; height: 16px; color: #77746d; }
.side-link small { color: #918e86; font-size: var(--type-caption); }
.side-link:hover { background: rgba(255,255,255,.55); }
.side-link.active { background: var(--white); }

.sidebar-bottom { margin-top: auto; display: grid; gap: 20px; }

.client-preview {
  border: 1px solid #d2cfc7;
  background: transparent;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}

.client-preview:hover { background: white; }
.client-preview svg { width: 16px; }
.client-preview span, .profile span { display: grid; gap: 3px; }
.client-preview strong, .profile strong { font-size: var(--type-navigation); font-weight: 500; }
.client-preview small, .profile small { font-size: var(--type-caption); color: var(--muted); }

.profile { border-top: 1px solid #d2cfc7; padding-top: 20px; display: flex; gap: 12px; align-items: center; }
.profile > span { min-width: 0; flex: 1; }
.profile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-logout { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.profile-logout svg { width: 14px; height: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: white; display: grid !important; place-items: center; font-size: var(--type-label); letter-spacing: .12em; }

.auth-page { min-height: 100vh; background: #f7f6f3; }
.auth-page-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .88fr) minmax(480px, 1.12fr); }
.auth-brand-panel { position: relative; min-height: 100vh; padding: 56px; background: linear-gradient(rgba(17,17,15,.2), rgba(17,17,15,.58)), url("./assets/dn-gallery-cover-concept.png") center/cover; color: white; display: flex; flex-direction: column; justify-content: space-between; }
.auth-brand-panel img { width: 116px; height: 100px; padding: 10px; object-fit: contain; background: rgba(247,246,243,.94); }
.auth-brand-panel p { max-width: 360px; margin: 0; font-family: var(--font-elegant-serif); font-size: var(--type-h2); line-height: 1.08; }
.auth-form-panel { min-width: 0; padding: 64px max(7vw, 54px); display: flex; align-items: center; justify-content: center; }
.auth-form { width: min(100%, 470px); display: grid; gap: 20px; }
.auth-form h1 { margin: 6px 0 0; font-size: var(--type-h1); font-weight: 300; }
.auth-form > p:not(.eyebrow) { margin: -4px 0 18px; color: var(--muted); font-size: var(--type-body); }
.auth-form label { display: grid; gap: 9px; color: var(--muted); font-size: var(--type-section-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.auth-form input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); background: rgba(255,255,255,.5); color: var(--ink); font-size: var(--type-input); }
.auth-form .primary-button { width: 100%; min-height: 52px; margin-top: 8px; }
.auth-form > small { color: var(--muted); font-size: var(--type-caption); text-align: center; }
.auth-error { min-height: 20px; color: var(--red); font-size: var(--type-caption); }
.client-unavailable { min-height: 100vh; padding: 40px 24px; background: #f7f6f3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.client-unavailable img { width: 104px; height: 90px; object-fit: contain; }
.client-unavailable h1 { margin: 34px 0 12px; font-family: var(--font-elegant-serif); font-weight: 400; }
.client-unavailable p { max-width: 460px; margin: 0 0 28px; color: var(--muted); }

.mobile-header { display: none; }

.sidebar-scrim { display: none; }

.admin-main { min-width: 0; grid-column: 2; grid-row: 1; }

.admin-content { max-width: 1280px; margin: 0 auto; padding: 52px 64px 80px; }

.eyebrow-row { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { margin: 0; font-size: var(--type-section-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.updated-note { margin: 0; font-size: var(--type-caption); color: var(--muted); }

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin: 28px 0 52px; }
.page-heading h1 { margin: 0; max-width: var(--measure-copy); font-size: var(--type-h1); line-height: var(--leading-h1); font-weight: 300; letter-spacing: var(--tracking-h1); }
.page-heading p { margin: 16px 0 0; color: var(--muted); font-size: var(--type-body); }

.dashboard-content { max-width: 1340px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-stat-card { min-height: 184px; padding: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.52); display: flex; flex-direction: column; align-items: flex-start; }
.dashboard-stat-card > span { color: var(--muted); font-size: var(--type-section-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.dashboard-stat-card > strong { margin-top: auto; font-size: var(--type-stat); line-height: 1; font-weight: 400; letter-spacing: -.03em; }
.dashboard-stat-card > small { margin-top: 10px; color: var(--muted); font-size: var(--type-caption); }
.dashboard-storage-card { position: relative; overflow: hidden; }
.storage-progress { width: 100%; height: 2px; margin-top: 18px; background: #dfdcd4; overflow: hidden; }
.storage-progress i { height: 100%; display: block; background: var(--ink); transition: width .4s ease; }
.dashboard-activity-card { margin-top: 42px; border-top: 1px solid var(--line); }
.dashboard-section-heading { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dashboard-section-heading h2 { margin: 10px 0 0; font-size: var(--type-h3); font-weight: 400; }
.dashboard-section-heading > time { color: var(--muted); font-size: var(--type-caption); }
.dashboard-activity-list { border-bottom: 1px solid var(--line); }
.dashboard-activity-list > article { min-height: 78px; padding: 16px 2px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.dashboard-activity-list .activity-dot { width: 7px; height: 7px; border-radius: 50%; background: #817d73; }
.dashboard-activity-list article > div { min-width: 0; }
.dashboard-activity-list strong { display: block; font-size: var(--type-body); font-weight: 500; }
.dashboard-activity-list p { margin: 4px 0 0; color: var(--muted); font-size: var(--type-caption); }
.dashboard-activity-list time { color: var(--muted); font-size: var(--type-caption); white-space: nowrap; }
.dashboard-empty { min-height: 230px; padding: 42px 20px; border-top: 1px solid var(--line); display: grid; place-items: center; align-content: center; text-align: center; }
.dashboard-empty svg { width: 22px; height: 22px; color: var(--muted); }
.dashboard-empty h3 { margin: 18px 0 6px; font-size: var(--type-h3); font-weight: 400; }
.dashboard-empty p { max-width: 380px; margin: 0; color: var(--muted); }
.dashboard-error { min-height: 360px; padding: 60px 24px; border-block: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dashboard-error > span svg { width: 28px; height: 28px; color: var(--muted); }
.dashboard-error h2 { margin: 22px 0 8px; font-size: var(--type-h3); font-weight: 400; }
.dashboard-error p { max-width: 480px; margin: 0 0 8px; color: var(--muted); }
.dashboard-error small { margin-bottom: 20px; color: var(--muted); font-size: var(--type-caption); }
.dashboard-error .secondary-button { margin-top: 22px; }
.dashboard-loading .dashboard-stat-card > span,
.dashboard-loading .dashboard-stat-card > strong,
.dashboard-loading .dashboard-stat-card > small,
.dashboard-activity-card.dashboard-loading > span { border-radius: 2px; background: linear-gradient(90deg, #e8e5de 25%, #f4f2ed 50%, #e8e5de 75%); background-size: 200% 100%; animation: dashboard-shimmer 1.25s infinite linear; }
.dashboard-loading .dashboard-stat-card > span { width: 74px; height: 8px; }
.dashboard-loading .dashboard-stat-card > strong { width: 52px; height: 30px; }
.dashboard-loading .dashboard-stat-card > small { width: 112px; height: 8px; }
.dashboard-activity-card.dashboard-loading { min-height: 280px; padding: 46px 0; display: grid; gap: 24px; }
.dashboard-activity-card.dashboard-loading > span { width: 100%; height: 34px; display: block; }
@keyframes dashboard-shimmer { to { background-position: -200% 0; } }

.activity-content { max-width: 1340px; }
.activity-toolbar { min-height: 78px; border-block: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.activity-toolbar .search-field { flex: 1 1 420px; max-width: 620px; }
.activity-filter-label { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--type-caption); }
.activity-filter-label select { min-width: 220px; height: 42px; padding: 0 36px 0 13px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; }
.activity-result-heading { min-height: 76px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--type-caption); }
.activity-result-heading p { margin: 0; }
.activity-result-heading strong { color: var(--ink); font-weight: 500; }
.global-activity-list { border-bottom: 1px solid var(--line); }
.global-activity-list > article { min-height: 82px; padding: 16px 2px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.global-activity-list article > div { min-width: 0; }
.global-activity-list strong { display: block; font-size: var(--type-body); font-weight: 500; }
.global-activity-list p { margin: 5px 0 0; color: var(--muted); font-size: var(--type-caption); overflow-wrap: anywhere; }
.global-activity-list time { color: var(--muted); font-size: var(--type-caption); white-space: nowrap; }

.clients-content { max-width: 1340px; }
.clients-workspace { border-top: 1px solid var(--line); }
.clients-toolbar { min-height: 76px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.clients-toolbar .search-field { flex: 1 1 320px; max-width: 520px; }
.client-sort-label { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--type-caption); }
.client-sort-label select { height: 38px; min-width: 158px; padding: 0 30px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); outline: 0; }
.client-table-head, .client-row { display: grid; grid-template-columns: minmax(250px, 1.25fr) minmax(210px, 1fr) 100px 120px; gap: 24px; align-items: center; }
.client-table-head { min-height: 48px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--type-label); letter-spacing: .16em; text-transform: uppercase; }
.client-row { min-height: 112px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s ease; }
.client-row:hover { background: #f1efe9; }
.client-identity { min-width: 0; display: flex; align-items: center; gap: 18px; }
.client-identity > span { width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid var(--line); background: rgba(255,255,255,.6); display: grid; place-items: center; font-size: var(--type-caption); letter-spacing: .08em; }
.client-identity > div, .client-contact { min-width: 0; display: grid; gap: 5px; }
.client-identity strong, .client-contact a { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: var(--type-body); font-weight: 500; text-decoration: none; white-space: nowrap; }
.client-contact-empty { color: var(--muted); font-size: var(--type-body); }
.client-identity small, .client-contact small, .client-row time { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: var(--type-caption); white-space: nowrap; }
.client-contact a[aria-disabled="true"] { color: var(--muted); pointer-events: none; }
.client-gallery-count { display: grid; gap: 4px; }
.client-gallery-count strong { font-size: var(--type-body-large); font-weight: 400; }
.client-gallery-count small { color: var(--muted); font-size: var(--type-caption); }
.clients-empty { min-height: 360px; padding: 60px 20px; border-bottom: 1px solid var(--line); display: grid; justify-items: center; align-content: center; text-align: center; }
.clients-empty > span svg { width: 25px; height: 25px; color: var(--muted); }
.clients-empty h2 { margin: 20px 0 8px; font-size: var(--type-h3); font-weight: 400; }
.clients-empty p { max-width: 420px; margin: 0 0 18px; color: var(--muted); }
.client-list-loading .client-row { cursor: default; }
.client-list-loading .client-row > span { height: 12px; background: linear-gradient(90deg, #e8e5de 25%, #f4f2ed 50%, #e8e5de 75%); background-size: 200% 100%; animation: dashboard-shimmer 1.25s infinite linear; }
.client-dialog { width: min(720px, calc(100vw - 32px)); }
.client-dialog form { padding: 38px; }
.client-dialog .settings-grid { margin-bottom: 18px; }
.client-dialog textarea, .settings-form textarea { width: 100%; resize: vertical; min-height: 132px; padding: 13px 14px; border: 1px solid #cbc8c0; border-radius: 0; background: white; color: var(--ink); font: inherit; line-height: 1.55; outline: 0; text-transform: none; letter-spacing: 0; }
.client-dialog textarea:focus, .settings-form textarea:focus { border-color: var(--ink); }
.field-error { color: var(--red); font-size: var(--type-caption); letter-spacing: 0; text-transform: none; }
[aria-invalid="true"] { border-color: var(--red) !important; }
.client-detail-content { max-width: 1400px; }
.client-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.client-detail-grid .panel-heading { min-height: 126px; align-items: flex-start; }
.client-detail-grid .settings-card { max-width: none; }
.client-record-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--type-label); letter-spacing: .12em; text-transform: uppercase; }
.client-record-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.client-gallery-form { padding-bottom: 24px; }
.client-gallery-options { display: grid; }
.client-gallery-options > label { min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.client-gallery-options > label:first-child { padding-top: 0; }
.client-gallery-options input { width: 16px; height: 16px; padding: 0; accent-color: var(--ink); }
.client-gallery-options span { min-width: 0; display: grid; gap: 4px; }
.client-gallery-options strong { overflow: hidden; text-overflow: ellipsis; font-size: var(--type-body); font-weight: 500; white-space: nowrap; }
.client-gallery-options small { color: var(--muted); font-size: var(--type-caption); line-height: 1.4; }
.client-gallery-form .settings-actions { margin-top: 24px; }
.client-error-back { margin: 20px auto 0; display: block; }

.primary-button, .secondary-button {
  min-height: 50px;
  border: 1px solid var(--ink);
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--type-button);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-button);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.primary-button { background: var(--ink); color: white; }
.primary-button:hover { background: #292925; transform: translateY(-1px); }
.primary-button svg { width: 16px; }
.secondary-button { background: transparent; }
.secondary-button:hover { background: var(--warm-gray); }
.new-gallery-button { min-width: 164px; }

.gallery-workspace { border-top: 1px solid var(--line); }

.gallery-toolbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }

.search-field { display: flex; align-items: center; gap: 12px; min-width: 240px; color: var(--muted); }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--type-body); }
.search-field input::placeholder { color: #96938b; }
.search-field:focus-within { color: var(--ink); }

.filter-tabs { display: flex; align-items: stretch; align-self: stretch; gap: 26px; }
.filter-tab { position: relative; border: 0; padding: 0; background: transparent; color: var(--muted); font-size: var(--type-navigation); cursor: pointer; }
.filter-tab::after { content: ""; position: absolute; height: 1px; left: 0; right: 0; bottom: 22px; background: transparent; }
.filter-tab:hover, .filter-tab.active { color: var(--ink); }
.filter-tab.active::after { background: var(--ink); }

.table-head { min-height: 48px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(420px, 1fr) 155px 145px 28px; gap: 20px; align-items: center; font-size: var(--type-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.gallery-row { min-height: 166px; display: grid; grid-template-columns: minmax(420px, 1fr) 155px 145px 28px; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .25s ease; }
.gallery-row:hover { background: #f1efe9; }
.gallery-row:hover .gallery-cover img { transform: scale(1.035); }

.gallery-identity { min-width: 0; display: flex; align-items: center; gap: 26px; }
.gallery-cover { width: 178px; height: 112px; flex: 0 0 auto; overflow: hidden; background: #cbc7be; }
.gallery-cover img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position); display: block; transition: transform .6s cubic-bezier(.2,.65,.3,1); }
.gallery-cover.warm img { filter: sepia(.18) saturate(.7) contrast(.88) brightness(1.08); }
.gallery-cover.mono img { filter: grayscale(1) contrast(.82) brightness(.73); }
.gallery-cover.soft img { filter: saturate(.58) brightness(.96); }
.gallery-cover.pale img { filter: grayscale(.55) brightness(1.16) contrast(.72); }

.gallery-name { min-width: 0; }
.gallery-name h2 { margin: 0 0 9px; overflow: hidden; text-overflow: ellipsis; font-size: var(--type-h3); line-height: var(--leading-h3); font-weight: 300; letter-spacing: var(--tracking-h3); white-space: nowrap; }
.gallery-name p, .gallery-row time { margin: 0; color: var(--muted); font-size: var(--type-navigation); }

.status { display: flex; align-items: center; gap: 9px; font-size: var(--type-label); letter-spacing: .12em; text-transform: uppercase; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.status-draft i { background: var(--amber); }
.status-archived i { background: #a6a29a; }

.more-button { width: 28px; height: 36px; border: 0; background: transparent; color: var(--muted); cursor: pointer; letter-spacing: 2px; }
.more-button:hover { color: var(--ink); }

.empty-state { padding: 80px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.empty-state p { margin: 0 0 14px; font-size: var(--type-h3); font-weight: 300; }
.text-button { border: 0; border-bottom: 1px solid currentColor; background: transparent; padding: 3px 0; font-size: var(--type-navigation); cursor: pointer; }

.icon-button { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }

.gallery-dialog { width: min(560px, calc(100vw - 32px)); border: 0; padding: 0; background: var(--warm-white); color: var(--ink); box-shadow: 0 24px 90px rgba(15,15,12,.24); }
.gallery-dialog::backdrop { background: rgba(17,17,15,.52); backdrop-filter: blur(3px); }
.gallery-dialog form { padding: 38px; }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 34px; }
.dialog-head h2 { margin: 10px 0 0; font-size: var(--type-h2); line-height: var(--leading-h2); font-weight: 300; letter-spacing: var(--tracking-h2); }
.gallery-dialog label { display: grid; gap: 9px; font-size: var(--type-section-label); text-transform: uppercase; letter-spacing: .12em; }
.gallery-dialog input, .gallery-dialog select { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #cbc8c0; border-radius: 0; background: white; color: var(--ink); outline: none; text-transform: none; letter-spacing: normal; }
.gallery-dialog input:focus, .gallery-dialog select:focus { border-color: var(--ink); }
.gallery-actions-dialog { padding: 34px; }
.gallery-actions-dialog .dialog-head { margin-bottom: 22px; }
.gallery-action-list { display: grid; border-top: 1px solid var(--line); }
.gallery-action-list > button { min-height: 70px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; cursor: pointer; }
.gallery-action-list > button:hover { background: rgba(255,255,255,.55); }
.gallery-action-list > button:disabled { opacity: .45; cursor: wait; }
.gallery-action-list svg { width: 18px; }
.gallery-action-list span { display: grid; gap: 5px; }
.gallery-action-list strong { font-size: var(--type-body); font-weight: 450; }
.gallery-action-list small { color: var(--muted); font-size: var(--type-caption); }
.gallery-action-list .gallery-action-danger { color: var(--red); }
.gallery-action-list .gallery-action-danger small { color: #986c66; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.dialog-note { margin: 18px 0 28px; color: var(--muted); font-size: var(--type-caption); line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: min(360px, calc(100vw - 48px)); padding: 14px 18px; background: var(--ink); color: white; font-size: var(--type-navigation); line-height: 1.4; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }

/* Client cover */
.client-page { background: #161612; overflow: hidden; overscroll-behavior-y: none; }
.client-cover { position: relative; min-height: 100vh; min-height: 100dvh; isolation: isolate; overflow: hidden; }
.client-photo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position); animation: image-arrive 1.3s cubic-bezier(.2,.75,.25,1) both; }
.client-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(10,10,8,.48) 0%, rgba(10,10,8,.14) 52%, rgba(10,10,8,.32) 100%), linear-gradient(0deg, rgba(10,10,8,.48), transparent 48%); }

.client-header { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 34px 42px; }
.back-to-admin { border: 1px solid rgba(255,255,255,.42); background: rgba(12,12,10,.2); backdrop-filter: blur(8px); color: white; height: 39px; padding: 0 14px; text-transform: uppercase; letter-spacing: .13em; font-size: var(--type-label); cursor: pointer; }
.back-to-admin:hover { background: white; color: var(--ink); }

.event-intro { position: absolute; z-index: 2; left: 4.4vw; bottom: 6vh; width: min(50vw, 650px); color: white; }
.eyebrow.light { color: rgba(255,255,255,.82); }
.event-intro h1 { margin: var(--space-type-md) 0 var(--space-type-sm); max-width: var(--measure-hero); font-size: var(--type-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero); font-weight: 300; }
.event-intro h1 span { font-size: var(--type-ampersand); color: rgba(255,255,255,.72); }
.event-meta { margin: 0; font-size: var(--type-section-label); text-transform: uppercase; letter-spacing: .18em; }

.access-panel { position: absolute; z-index: 4; top: 16px; right: 16px; bottom: 16px; width: min(39vw, 560px); background: rgba(248,247,243,.985); backdrop-filter: blur(16px); color: var(--ink); display: grid; grid-template-rows: auto 1fr auto; padding: 28px 36px; animation: panel-arrive .9s .18s cubic-bezier(.2,.75,.25,1) both; }
.panel-topline, .panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: var(--type-micro); text-transform: uppercase; letter-spacing: .17em; color: #77746d; }
.panel-content { align-self: center; max-width: 430px; width: 100%; margin: 0 auto; }
.panel-kicker { margin: 0 0 16px; font-size: var(--type-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.panel-content h2 { margin: 0; max-width: var(--measure-copy); font-size: var(--type-h1); line-height: var(--leading-h1); font-weight: 300; letter-spacing: var(--tracking-h1); }
.panel-copy { margin: 24px 0 36px; max-width: 350px; color: #5e5b55; font-size: var(--type-body); line-height: 1.55; }
.pin-form label { display: block; margin: 0 0 9px; font-size: var(--type-label); text-transform: uppercase; letter-spacing: .15em; }
.pin-row { display: grid; grid-template-columns: 1fr auto; }
.pin-row input { min-width: 0; height: 58px; border: 1px solid #bdb9b1; border-right: 0; border-radius: 0; background: rgba(255,255,255,.72); padding: 0 18px; outline: 0; font-size: var(--type-pin); letter-spacing: .52em; }
.pin-row input::placeholder { color: #9e9a92; letter-spacing: .52em; }
.pin-row input:focus { border-color: var(--ink); }
.pin-row input.invalid { border-color: var(--red); }
.enter-button { height: 58px; min-width: 130px; border: 1px solid var(--ink); background: var(--ink); color: white; padding: 0 16px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: var(--type-navigation); cursor: pointer; }
.enter-button:hover { background: #2a2a26; }
.enter-button svg { width: 16px; }
.pin-feedback { min-height: 30px; padding-top: 10px; display: flex; justify-content: space-between; gap: 16px; color: #8c8981; font-size: var(--type-label); }
#pin-error { color: var(--red); text-align: right; }

.unlock-state { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(11,11,9,.74); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.unlock-state.visible { opacity: 1; visibility: visible; }
.unlock-card { width: min(500px, 100%); background: var(--warm-white); padding: 44px; transform: translateY(16px); transition: transform .35s ease; }
.unlock-state.visible .unlock-card { transform: translateY(0); }
.unlock-index { font-size: var(--type-label); text-transform: uppercase; letter-spacing: .18em; }
.unlock-card h2 { margin: 28px 0 12px; font-size: var(--type-h1); line-height: var(--leading-h1); font-weight: 300; letter-spacing: var(--tracking-h1); }
.unlock-card p { margin: 0 0 34px; color: var(--muted); font-size: var(--type-body); line-height: 1.55; }

@keyframes image-arrive { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes panel-arrive { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar { padding-inline: 22px; }
  .admin-content { padding-inline: 38px; }
  .table-head, .gallery-row { grid-template-columns: minmax(350px, 1fr) 120px 110px 28px; gap: 14px; }
  .gallery-cover { width: 142px; height: 94px; }
  .gallery-name h2 { font-size: var(--type-h3); }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-table-head, .client-row { grid-template-columns: minmax(230px, 1fr) minmax(190px, 1fr) 90px; }
  .client-table-head span:last-child, .client-row > time { display: none; }
  .client-detail-grid { grid-template-columns: 1fr; }
  .access-panel { width: min(46vw, 520px); }
  .event-intro { width: 46vw; }
}

@media (max-width: 820px) {
  .auth-page-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: 240px; padding: 28px; }
  .auth-brand-panel img { width: 82px; height: 72px; }
  .auth-brand-panel p { max-width: 440px; font-size: var(--type-h3); }
  .auth-form-panel { min-height: calc(100vh - 240px); padding: 48px 24px; }
  body.admin-page { padding-top: 64px; }
  .admin-shell { display: block; }
  .mobile-header { position: fixed; z-index: 25; top: 0; left: 0; right: 0; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(248,247,243,.94); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(340px, 88vw); height: 100svh; transform: translateX(-102%); transition: transform .35s cubic-bezier(.2,.75,.25,1); box-shadow: 20px 0 50px rgba(15,15,12,.14); }
  .sidebar.open { transform: translateX(0); }
  .sidebar .sidebar-close { display: grid; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(15,15,12,.42); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .sidebar-scrim.show { opacity: 1; visibility: visible; }
  .admin-content { padding: 34px 24px 60px; }
  .page-heading { margin-bottom: 38px; }
  .gallery-toolbar { align-items: flex-start; flex-direction: column; padding: 18px 0 0; gap: 8px; }
  .search-field { width: 100%; height: 38px; }
  .filter-tabs { width: 100%; min-height: 48px; overflow-x: auto; gap: 26px; }
  .filter-tab { flex: 0 0 auto; }
  .filter-tab::after { bottom: 9px; }
  .table-head { display: none; }
  .gallery-row { min-height: auto; grid-template-columns: 1fr auto; padding: 20px 0; gap: 14px; }
  .gallery-identity { grid-column: 1 / -1; align-items: flex-start; }
  .gallery-cover { width: 146px; height: 98px; }
  .gallery-row time { padding-left: 172px; }
  .more-button { grid-column: 2; grid-row: 2; }
  .status { grid-column: 1; grid-row: 2; padding-left: 172px; }
  .gallery-row time { display: none; }
  .clients-toolbar { padding: 18px 0; align-items: stretch; flex-direction: column; gap: 14px; }
  .clients-toolbar .search-field { flex-basis: auto; max-width: none; height: 40px; }
  .activity-toolbar { padding: 18px 0; align-items: stretch; flex-direction: column; gap: 14px; }
  .activity-toolbar .search-field { flex-basis: auto; max-width: none; height: 40px; }
  .activity-filter-label { justify-content: space-between; }
  .activity-filter-label select { min-width: 0; width: min(70%, 320px); }
  .application-settings-section { padding: 24px; }
  .settings-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .settings-section-heading > p { text-align: left; }
  .client-sort-label { justify-content: space-between; }
  .client-table-head { display: none; }
  .client-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; }
  .client-contact { grid-column: 1; padding-left: 66px; }
  .client-gallery-count { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .access-panel { width: min(48vw, 470px); padding: 24px; }
  .pin-row { grid-template-columns: 1fr; }
  .pin-row input { border-right: 1px solid #bdb9b1; }
  .enter-button { width: 100%; }
}

@media (max-width: 640px) {
  .auth-brand-panel { min-height: 190px; }
  .auth-form-panel { min-height: calc(100vh - 190px); padding: 36px 20px; }
  .admin-content { padding-inline: 18px; }
  .eyebrow-row .updated-note { display: none; }
  .page-heading { display: grid; gap: 24px; margin-top: 22px; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stat-card { min-height: 152px; padding: 20px; }
  .dashboard-activity-card { margin-top: 32px; }
  .dashboard-section-heading { min-height: 100px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
  .dashboard-activity-list > article { grid-template-columns: 10px minmax(0, 1fr); }
  .dashboard-activity-list article > time { grid-column: 2; }
  .global-activity-list > article { grid-template-columns: 10px minmax(0, 1fr); }
  .global-activity-list article > time { grid-column: 2; }
  .application-settings-section { padding: 20px 16px; }
  .application-settings-actions { align-items: stretch; flex-direction: column; }
  .application-settings-actions .primary-button { width: 100%; }
  .client-row { min-height: 132px; }
  .client-contact { padding-left: 0; }
  .client-identity > span { width: 42px; height: 42px; }
  .client-dialog form { padding: 28px 22px; }
  .client-dialog .settings-grid { grid-template-columns: 1fr; }
  .client-detail-grid .panel-heading { min-height: 0; }
  .new-gallery-button { width: 100%; }
  .gallery-identity { gap: 16px; }
  .gallery-cover { width: 112px; height: 86px; }
  .gallery-name h2 { font-size: var(--type-h3); white-space: normal; }
  .gallery-name p { line-height: 1.4; }
  .status { padding-left: 128px; }
  .gallery-dialog form { padding: 28px 22px; }
  .gallery-actions-dialog { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dialog-actions button { width: 100%; padding-inline: 10px; }

  .client-page { overflow: auto; }
  .client-cover { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; }
  .client-photo { position: fixed; height: 100vh; height: 100dvh; object-position: var(--cover-position); }
  .client-overlay { position: fixed; background: linear-gradient(0deg, rgba(10,10,8,.76), rgba(10,10,8,.08) 62%, rgba(10,10,8,.26)); }
  .client-header { position: fixed; padding: 22px 18px; }
  .back-to-admin { height: 36px; }
  .event-intro { position: relative; left: auto; bottom: auto; width: auto; margin: 0 20px 24px; }
  .event-intro h1 { margin: var(--space-type-sm) 0 var(--space-type-xs); }
  .access-panel { position: relative; top: auto; right: auto; bottom: auto; width: auto; min-height: 440px; margin: 0; padding: 24px 20px 22px; background: rgba(248,247,243,.985); backdrop-filter: blur(18px); }
  .panel-topline { margin-bottom: 48px; }
  .panel-content { align-self: start; }
  .panel-copy { margin: 18px 0 24px; }
  .pin-row { grid-template-columns: minmax(0, 1fr) 104px; }
  .pin-row input { height: 54px; border-right: 0; }
  .enter-button { height: 54px; min-width: 0; }
  .panel-footer { margin-top: 32px; }
  .unlock-card { padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Extended gallery editor */

.create-gallery-dialog { width: min(680px, calc(100vw - 32px)); }
.field-spaced { margin-top: 18px; }
.slug-field, .pin-generate-field, .copy-field { display: flex; align-items: stretch; }
.slug-field { height: 50px; border: 1px solid #cbc8c0; background: white; }
.slug-field:focus-within { border-color: var(--ink); }
.slug-field span { display: flex; align-items: center; padding-left: 14px; color: #858179; font-size: var(--type-caption); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.gallery-dialog .slug-field input { border: 0; padding-left: 3px; }
.settings-url-field { min-height: 50px; border: 1px solid #cbc8c0; background: white; display: flex; align-items: stretch; }
.settings-url-field:focus-within { border-color: var(--ink); }
.settings-url-field > span { padding: 0 0 0 14px; display: flex; align-items: center; color: var(--muted); font-size: var(--type-caption); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.settings-url-field > input { min-width: 0; flex: 1; border: 0 !important; padding-left: 2px !important; }
.settings-url-field > button { flex: 0 0 auto; border: 0; border-left: 1px solid var(--line); padding: 0 14px; background: var(--ink); color: white; font-size: var(--type-label); cursor: pointer; }
.settings-field-note { margin-top: 7px; display: block; color: var(--muted); font-size: var(--type-label); letter-spacing: 0; text-transform: none; }
.draft-share-warning { margin-bottom: 22px; padding: 14px 16px; border: 1px solid #d2b777; background: #fff9e9; display: grid; gap: 4px; }
.draft-share-warning strong { font-size: var(--type-label); letter-spacing: .12em; text-transform: uppercase; }
.draft-share-warning span { color: var(--muted); font-size: var(--type-caption); }
.pin-generate-field input { min-width: 0; border-right: 0; letter-spacing: .34em; font-size: var(--type-input); }
.pin-generate-field button, .copy-field button { border: 1px solid var(--ink); background: var(--ink); color: white; padding: 0 16px; font-size: var(--type-caption); cursor: pointer; }

.editor-page { min-width: 320px; }
.editor-main { background: var(--warm-white); }
.editor-topbar { position: sticky; top: 0; z-index: 18; min-height: 68px; padding: 0 40px; border-bottom: 1px solid var(--line); background: rgba(248,247,243,.94); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.editor-back { border: 0; background: transparent; padding: 8px 0; display: inline-flex; align-items: center; gap: 10px; font-size: var(--type-caption); cursor: pointer; }
.editor-back svg { width: 15px; }
.editor-top-actions { display: flex; align-items: center; gap: 22px; }
.compact-button { min-height: 38px; padding: 0 14px; font-size: var(--type-caption); }
.compact-button svg { width: 14px; }
.editor-content { max-width: 1280px; margin: 0 auto; padding: 50px 58px 90px; }
.editor-heading { padding-bottom: 38px; }
.editor-heading h1 { margin: 18px 0 10px; max-width: var(--measure-copy); font-size: var(--type-h1); line-height: var(--leading-h1); font-weight: 300; letter-spacing: var(--tracking-h1); }
.editor-heading > p:last-child { margin: 0; color: var(--muted); font-size: var(--type-navigation); }
.editor-tabs { display: flex; align-items: stretch; gap: 30px; min-height: 57px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.editor-tabs::-webkit-scrollbar { display: none; }
.editor-tab { position: relative; flex: 0 0 auto; display: flex; align-items: center; color: var(--muted); text-decoration: none; font-size: var(--type-navigation); }
.editor-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: transparent; }
.editor-tab:hover, .editor-tab.active { color: var(--ink); }
.editor-tab.active::after { background: var(--ink); }
.editor-tab sup { margin-left: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-size: var(--type-micro); }
.editor-panel { padding-top: 42px; }
.panel-heading { margin-bottom: 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.panel-heading h2 { margin: 13px 0 8px; max-width: var(--measure-copy); font-size: var(--type-h2); line-height: var(--leading-h2); font-weight: 300; letter-spacing: var(--tracking-h2); }
.panel-heading > div > p:last-child { max-width: 600px; margin: 0; color: var(--muted); font-size: var(--type-navigation); line-height: 1.55; }
.photo-count-label { flex: 0 0 auto; border: 1px solid var(--line); padding: 10px 13px; color: var(--muted); font-size: var(--type-section-label); text-transform: uppercase; letter-spacing: .12em; }

.upload-zone { min-height: 138px; padding: 28px 30px; border: 1px dashed #bdb9af; background: #f2f0ea; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.upload-zone:hover, .upload-zone.dragging { border-color: var(--ink); background: #eeece5; }
.upload-icon { width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.upload-icon svg { width: 18px; }
.upload-zone > span:nth-of-type(2) { display: grid; gap: 7px; }
.upload-zone strong { font-size: var(--type-body-large); font-weight: 400; }
.upload-zone small { color: var(--muted); font-size: var(--type-caption); }
.upload-browse { border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: var(--type-caption); }
.upload-queue { display: grid; gap: 8px; margin-top: 12px; }
.upload-item { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 82px; gap: 16px; align-items: center; font-size: var(--type-section-label); }
.upload-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item > div { height: 2px; background: #dfdcd4; }
.upload-item i { display: block; height: 100%; background: var(--ink); transition: width .2s ease; }
.upload-item small { color: var(--muted); text-align: right; }
.upload-item.failed small { color: var(--red); }
.section-manager { margin: 0 0 28px; padding: 24px; border: 1px solid var(--line); background: #fbfaf7; }
.section-manager-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-manager-heading h3 { margin: 7px 0 0; font-size: var(--type-h3); font-weight: 350; }
.section-manager-heading form { display: flex; align-items: stretch; min-width: min(100%, 420px); }
.section-manager-heading input { min-width: 0; flex: 1; height: 46px; border: 1px solid #cbc8c0; border-right: 0; border-radius: 0; padding: 0 13px; background: white; outline: 0; }
.section-manager-heading input:focus { border-color: var(--ink); }
.section-manager-heading .secondary-button { min-height: 46px; }
.admin-section-tabs { margin-top: 22px; display: grid; gap: 8px; }
.admin-section-tab { min-height: 64px; padding: 8px 10px 8px 16px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: white; }
.admin-section-tab.active { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.section-open { min-width: 0; flex: 1; border: 0; padding: 0; background: transparent; display: grid; gap: 4px; text-align: left; cursor: pointer; }
.section-open strong { overflow: hidden; text-overflow: ellipsis; font-size: var(--type-body); font-weight: 500; white-space: nowrap; }
.section-open small { color: var(--muted); font-size: var(--type-caption); }
.admin-section-tab > div { display: flex; align-items: center; gap: 3px; }
.admin-section-tab > div button { min-width: 34px; height: 34px; border: 0; padding: 0 7px; background: transparent; color: var(--muted); font-size: var(--type-label); cursor: pointer; }
.admin-section-tab > div button:hover { color: var(--ink); background: var(--warm-gray); }
.admin-section-tab > div button:disabled { opacity: .28; cursor: default; }
.admin-section-tab > div svg { width: 15px; }
.admin-section-tab > div .section-drag-handle { cursor: grab; font-size: 18px; letter-spacing: -.18em; }
.admin-section-tab > div .section-drag-handle:active { cursor: grabbing; }
.admin-section-tab.dragging { opacity: .45; }
.admin-section-tab.drag-over-before { box-shadow: 0 -3px 0 var(--ink); }
.admin-section-tab.drag-over-after { box-shadow: 0 3px 0 var(--ink); }
.admin-section-tab.is-highlights { background: #f7f5ef; }
.section-automatic-label { padding: 0 8px; color: var(--muted); font-size: var(--type-micro); letter-spacing: .12em; text-transform: uppercase; }
.upload-section-choice { margin-bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .12em; }
.upload-section-choice select { height: 40px; min-width: 220px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); }
.batch-photo-toolbar { min-height: 62px; margin-top: 26px; padding: 10px 14px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: var(--type-caption); }
.batch-photo-toolbar > span { margin-right: auto; color: var(--ink); }
.batch-photo-toolbar label { font-size: var(--type-label); text-transform: uppercase; letter-spacing: .1em; }
.batch-photo-toolbar select { min-width: 190px; height: 40px; border: 1px solid #cbc8c0; background: white; padding: 0 10px; }
.batch-photo-toolbar .secondary-button { min-height: 40px; }
.photo-grid-toolbar { min-height: 62px; margin-top: 34px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: var(--type-section-label); }
.photo-grid-toolbar p { margin: 0; }
.photo-sort-control { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--type-label); letter-spacing: .12em; text-transform: uppercase; }
.photo-sort-control select { min-width: 224px; height: 38px; padding: 0 34px 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font-size: var(--type-caption); letter-spacing: 0; text-transform: none; outline: 0; cursor: pointer; }
.photo-sort-control select:hover, .photo-sort-control select:focus-visible { border-color: var(--ink); }
.photo-sort-control select:disabled { color: var(--muted); cursor: default; opacity: .56; }
.editor-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
.editor-photo-card { min-width: 0; }
.editor-photo-card.dragging-card { opacity: .44; }
.photo-card-image { position: relative; aspect-ratio: var(--photo-ratio); overflow: hidden; background: #d8d4cb; }
.photo-select-control { position: absolute; z-index: 4; left: 9px; top: 9px; display: flex; align-items: center; gap: 6px; color: white; cursor: pointer; }
.photo-select-control input { position: absolute; opacity: 0; }
.photo-select-control span { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.8); background: rgba(15,15,13,.45); display: grid; place-items: center; }
.photo-select-control span svg { width: 15px; opacity: 0; }
.photo-select-control input:checked + span { background: var(--ink); }
.photo-select-control input:checked + span svg { opacity: 1; }
.photo-select-control b { padding: 5px 7px; background: rgba(15,15,13,.55); font-size: var(--type-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.photo-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.editor-photo-card:hover .photo-card-image img { transform: scale(1.02); }
.cover-badge { position: absolute; left: 10px; top: 10px; padding: 7px 9px; background: var(--ink); color: white; font-size: var(--type-micro); text-transform: uppercase; letter-spacing: .14em; }
.drag-handle { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: rgba(248,247,243,.9); display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.drag-handle svg { width: 15px; }
.editor-photo-card:hover .drag-handle { opacity: 1; }
.photo-card-meta { min-height: 58px; padding: 12px 2px 9px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.photo-card-meta > span:first-child { min-width: 0; display: grid; gap: 4px; }
.photo-card-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-caption); font-weight: 500; }
.photo-card-meta small, .photo-position { color: var(--muted); font-size: var(--type-label); }
.photo-card-actions { padding-top: 8px; display: flex; align-items: center; gap: 4px; }
.photo-card-actions button { min-width: 32px; height: 32px; padding: 0 8px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: var(--type-label); cursor: pointer; }
.photo-card-actions button:hover { background: var(--warm-gray); color: var(--ink); }
.photo-card-actions button:nth-child(3) { margin-left: auto; }
.photo-card-actions svg { width: 14px; height: 14px; }
.danger-icon:hover { color: var(--red) !important; }
.photos-empty { grid-column: 1 / -1; min-height: 260px; border: 1px solid var(--line); display: grid; place-items: center; align-content: center; text-align: center; }
.photos-empty > span { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }
.photos-empty h3, .simple-empty h3 { margin: 16px 0 6px; font-size: var(--type-h3); line-height: var(--leading-h3); font-weight: 300; letter-spacing: var(--tracking-h3); }
.photos-empty p, .simple-empty p { margin: 0; color: var(--muted); font-size: var(--type-caption); }

.settings-card { max-width: 850px; padding: 30px; border: 1px solid var(--line); background: #fbfaf7; }
.settings-card label, .settings-form label { display: grid; gap: 9px; color: #5d5a53; font-size: var(--type-label); text-transform: uppercase; letter-spacing: .14em; }
.settings-card input, .settings-card select, .settings-form input, .settings-form select { width: 100%; height: 50px; border: 1px solid #cbc8c0; border-radius: 0; background: white; padding: 0 14px; color: var(--ink); outline: 0; text-transform: none; letter-spacing: 0; }
.settings-card input:focus, .settings-card select:focus, .settings-form input:focus, .settings-form select:focus { border-color: var(--ink); }
.copy-field input { min-width: 0; border-right: 0; }
.copy-field button { min-width: 100px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.copy-field svg { width: 14px; }
.access-details { margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.access-details > div { min-height: 100px; padding: 24px 20px; border-right: 1px solid var(--line); display: grid; gap: 9px; align-content: center; }
.access-details > div:first-child { padding-left: 0; }
.access-details > div:last-child { border-right: 0; }
.access-details span { color: var(--muted); font-size: var(--type-micro); text-transform: uppercase; letter-spacing: .14em; }
.access-details strong { font-size: var(--type-h3); font-weight: 300; }
.access-pin-editor { margin-top: 24px; display: grid; gap: 9px; }
.access-pin-editor > label { color: #5d5a53; font-size: var(--type-label); text-transform: uppercase; letter-spacing: .14em; }
.access-pin-editor .pin-generate-field { min-height: 50px; }
.access-pin-editor .pin-generate-field input { flex: 1 1 auto; }
.access-pin-help { margin: 0; color: var(--muted); font-size: var(--type-label); line-height: 1.5; }
.settings-actions { margin-top: 28px; display: flex; justify-content: flex-end; gap: 10px; }
.toggle-list { padding-top: 10px; padding-bottom: 10px; }
.toggle-row { min-height: 92px; grid-template-columns: 1fr auto !important; align-items: center; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle-row:last-of-type { border-bottom: 0; }
.toggle-row > span { display: grid; gap: 7px; }
.toggle-row strong { color: var(--ink); font-size: var(--type-body); font-weight: 400; text-transform: none; letter-spacing: 0; }
.toggle-row small { color: var(--muted); font-size: var(--type-section-label); line-height: 1.5; text-transform: none; letter-spacing: 0; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 42px; height: 22px; border-radius: 22px; background: #cbc8c0; transition: background .2s; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .2s; }
.toggle-row input:checked + i { background: var(--ink); }
.toggle-row input:checked + i::after { transform: translateX(20px); }
.access-protection-toggle { margin-top: 8px; }
.settings-footnote { margin: 14px 0 6px; color: var(--muted); font-size: var(--type-label); line-height: 1.5; }

.favorites-list { max-width: 900px; border-top: 1px solid var(--line); }
.favorite-row { min-height: 112px; padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 112px 1fr auto; gap: 20px; align-items: center; }
.favorite-thumb { width: 112px; height: 82px; overflow: hidden; background: #ddd9d0; }
.favorite-thumb img { width: 100%; height: 100%; object-fit: cover; }
.favorite-row > span { display: grid; gap: 7px; }
.favorite-row strong { font-size: var(--type-body-large); font-weight: 400; }
.favorite-row small { color: var(--muted); font-size: var(--type-section-label); }
.favorite-row button { width: 38px; height: 38px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.simple-empty { min-height: 260px; display: grid; place-items: center; align-content: center; text-align: center; }
.simple-empty > span { width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }

.activity-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.activity-summary div { min-height: 112px; padding: 22px; border-right: 1px solid var(--line); display: grid; align-content: center; gap: 8px; }
.activity-summary div:last-child { border-right: 0; }
.activity-summary strong { font-size: var(--type-stat); font-weight: 300; }
.activity-summary span { color: var(--muted); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .13em; }
.activity-list { margin-top: 24px; max-width: 900px; border-top: 1px solid var(--line); }
.activity-list article { min-height: 72px; padding: 14px 4px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 10px 1fr; gap: 16px; align-items: center; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: #918e86; }
.activity-pin_success { background: var(--green); }
.activity-favorite { background: var(--amber); }
.activity-download, .activity-download_all { background: #6b6e78; }
.activity-list article div { display: grid; gap: 5px; }
.activity-list strong { font-size: var(--type-navigation); font-weight: 400; }
.activity-list small { color: var(--muted); font-size: var(--type-label); }

.settings-form { max-width: 900px; }
.settings-grid { margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-form > label { margin-top: 18px; }
.delete-gallery-button { margin-right: auto; min-height: 44px; border: 0; border-bottom: 1px solid var(--red); background: transparent; color: var(--red); padding: 0; cursor: pointer; }
.confirm-dialog > div { padding: 38px; }
.confirm-dialog h2 { margin: 16px 0 12px; font-size: var(--type-h2); line-height: var(--leading-h2); font-weight: 300; letter-spacing: var(--tracking-h2); }
.confirm-dialog p:not(.eyebrow) { margin: 0 0 30px; color: var(--muted); font-size: var(--type-navigation); line-height: 1.5; }
.danger-button { background: #5d2922; border-color: #5d2922; }

.application-settings-content { max-width: 1120px; }
.application-settings-form { display: grid; gap: 18px; }
.application-settings-section { max-width: none; padding: 32px; }
.settings-section-heading { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.settings-section-heading h2 { margin: 9px 0 0; font-size: var(--type-h3); font-weight: 400; }
.settings-section-heading > p { max-width: 390px; margin: 0; color: var(--muted); font-size: var(--type-caption); line-height: 1.5; text-align: right; }
.settings-logo-row { min-height: 118px; margin-bottom: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 26px; }
.settings-logo-row img { width: 92px; height: 74px; object-fit: contain; background: transparent; }
.settings-logo-row span { display: grid; gap: 7px; }
.settings-logo-row strong { font-size: var(--type-body-large); font-weight: 400; }
.settings-logo-row small { color: var(--muted); font-size: var(--type-caption); }
.settings-toggle { padding-inline: 0 !important; }
.settings-toggle.compact { min-height: 56px; margin-top: 20px; border-bottom: 0; }
.settings-clear-secret { min-height: 36px; margin-top: 8px; display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 10px; color: var(--muted); font-size: var(--type-caption); text-transform: none !important; letter-spacing: 0 !important; }
.settings-clear-secret input { width: 16px; height: 16px; }
.application-settings-actions { position: sticky; z-index: 5; bottom: 0; min-height: 82px; padding: 14px 0; background: linear-gradient(180deg, rgba(247,246,243,0), #f7f6f3 22%); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.application-settings-actions > span { color: var(--muted); font-size: var(--type-caption); }
.password-settings { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.password-settings > div:first-child { margin-bottom: 22px; }
.password-settings h3 { margin: 0; font-size: var(--type-h3); font-weight: 400; }
.password-settings p { margin: 8px 0 0; color: var(--muted); font-size: var(--type-caption); }
.password-settings > label { max-width: calc(50% - 9px); }
.password-settings > .secondary-button { margin-top: 20px; }
.settings-users-list { border-top: 1px solid var(--line); }
.settings-users-list article { min-height: 78px; padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(220px, 1fr) 130px 120px auto auto; gap: 12px; align-items: center; }
.settings-user-identity { min-width: 0; display: grid; gap: 5px; }
.settings-user-identity strong { font-size: var(--type-body); font-weight: 500; }
.settings-user-identity small { overflow: hidden; color: var(--muted); font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.settings-users-list select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); background: transparent; }
.settings-users-list .text-button { min-height: 36px; }
.settings-users-list .user-delete { color: var(--red); }

/* Client gallery */

.client-gallery-page { background: #f7f6f3; overflow: auto; overscroll-behavior-y: none; }
.client-gallery-view { min-height: 100vh; }
.client-gallery-nav { position: absolute; z-index: 8; top: 0; left: 0; right: 0; min-height: 82px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; }
.client-gallery-nav .wordmark { color: white; }
.client-gallery-nav .wordmark span { color: rgba(255,255,255,.68); }
.client-gallery-nav > div { display: flex; gap: 8px; }
.client-gallery-nav button { height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.4); background: rgba(12,12,10,.18); backdrop-filter: blur(10px); color: white; text-transform: uppercase; letter-spacing: .12em; font-size: var(--type-micro); cursor: pointer; }
.client-gallery-hero { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #272620; color: white; }
.client-gallery-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position); }
.client-gallery-hero > .client-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,6,.18) 0%, rgba(7,7,6,.08) 30%, rgba(7,7,6,.22) 70%, rgba(7,7,6,.48) 100%), radial-gradient(circle at center, rgba(7,7,6,.06), rgba(7,7,6,.22)); }
.client-hero-copy { position: absolute; z-index: 2; inset: 0; padding: 108px 24px 158px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.client-hero-copy h1 { width: auto; min-width: 0; max-width: var(--measure-hero); margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--type-hero); line-height: var(--leading-hero); font-weight: 300; letter-spacing: var(--tracking-hero); white-space: normal; text-wrap: balance; overflow-wrap: normal; word-break: normal; }
.client-hero-copy h1 span { color: rgba(255,255,255,.86); font-size: var(--type-ampersand); }
.client-hero-copy > p { margin: var(--space-type-md) 0 var(--space-type-lg); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--type-section-label); }
.client-hero-logo { position: absolute; z-index: 3; left: 50%; bottom: 28px; width: 78px; height: 78px; padding: 0; border: 0; transform: translateX(-50%); background: transparent; box-shadow: none; }
.client-hero-logo img { width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; filter: brightness(0) invert(1); }
.view-gallery-button { min-height: 52px; padding: 0 24px; border: 1px solid rgba(255,255,255,.82); background: transparent; color: white; display: inline-flex; align-items: center; gap: 30px; font-size: var(--type-button); line-height: 1; cursor: pointer; transition: background-color .24s ease, border-color .24s ease, transform .24s ease; }
.view-gallery-button:hover { border-color: white; background: rgba(255,255,255,.1); transform: translateY(-1px); }
.view-gallery-button:focus-visible { outline: 1px solid white; outline-offset: 4px; }
.view-gallery-button svg { width: 15px; }
.client-photo-section { padding: clamp(28px, 3vw, 40px) clamp(20px, 1.5vw, 30px) 112px; background: #f7f6f3; }
.client-section-heading { margin: 0 auto clamp(28px, 3.5vw, 48px); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.client-section-heading h2 { max-width: var(--measure-copy); margin: var(--space-type-sm) 0 var(--space-type-xs); font-size: var(--type-gallery-heading); line-height: var(--leading-h2); font-weight: 300; letter-spacing: var(--tracking-h2); }
.client-section-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: var(--type-section-label); text-transform: uppercase; letter-spacing: .12em; }
.client-section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.client-section-navigation { position: relative; z-index: 8; margin: 0 auto 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.client-section-primary { min-width: 0; display: flex; align-items: stretch; overflow: hidden; }
.client-section-link, .client-section-more summary, .client-section-more-menu button { min-height: 58px; border: 0; padding: 0 18px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; font-family: var(--cover-button-font, inherit); font-size: var(--type-navigation); white-space: nowrap; cursor: pointer; }
.client-section-link span, .client-section-more-menu span { font-size: var(--type-micro); opacity: .65; }
.client-section-link:hover, .client-section-link.active, .client-section-more summary:hover, .client-section-more-menu button:hover, .client-section-more-menu button.active { color: var(--ink); }
.client-section-link.active { box-shadow: inset 0 -1px 0 var(--ink); }
.client-section-link.overflowed { display: none; }
.client-section-more { position: relative; border-left: 1px solid var(--line); }
.client-section-more summary { list-style: none; }
.client-section-more summary::-webkit-details-marker { display: none; }
.client-section-more-menu { position: absolute; right: 0; top: calc(100% + 1px); min-width: 230px; padding: 6px; border: 1px solid var(--line); background: #fbfaf7; box-shadow: 0 15px 40px rgba(20,20,17,.14); display: grid; }
.client-section-more-menu button { width: 100%; min-height: 46px; justify-content: space-between; }
.client-section-loader { min-height: 80px; display: grid; place-items: center; }
.client-section-loader span { width: 1px; height: 1px; }
.masonry-grid.loading-section { min-height: 50vh; opacity: .38; pointer-events: none; }
.client-utility-button { min-height: 40px; padding: 0 5px; border: 0; border-bottom: 1px solid #aaa69c; background: transparent; color: var(--muted); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.client-utility-button:hover { color: var(--ink); border-color: var(--ink); }
.masonry-grid { display: grid; grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr)); gap: var(--grid-gap, 12px); background: #f7f6f3; }
.masonry-column { min-width: 0; display: flex; flex-direction: column; gap: var(--grid-gap, 12px); }
.masonry-item { position: relative; width: 100%; margin: 0; display: block; overflow: hidden; background: #ddd9d1; }
.masonry-item::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 38%; background: linear-gradient(to top, rgba(8,8,7,.48) 0%, rgba(8,8,7,.2) 42%, rgba(8,8,7,0) 100%); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.masonry-open { width: 100%; padding: 0; border: 0; background: linear-gradient(135deg, #ebe8e1 0%, #f3f1ec 52%, #e8e4dc 100%); display: block; cursor: zoom-in; overflow: hidden; }
.masonry-open img { width: 100%; height: auto; min-height: 0; object-fit: cover; display: block; transition: opacity .42s ease, transform .65s cubic-bezier(.2,.7,.3,1), filter .25s; }
.masonry-open img[data-retryable-image] { opacity: 0; }
.masonry-open img[data-retryable-image].image-ready { opacity: 1; }
.masonry-item:hover::after, .masonry-item:focus-within::after { opacity: 1; }
.masonry-item:hover .masonry-open img, .masonry-item:focus-within .masonry-open img { transform: scale(1.012); filter: brightness(.97); }
.masonry-actions { position: absolute; z-index: 2; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 4px; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .24s ease; }
.masonry-item:hover .masonry-actions, .masonry-item:focus-within .masonry-actions, .masonry-actions:focus-within { opacity: 1; transform: translateY(0); }
.masonry-actions button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.96); display: grid; place-items: center; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0,0,0,.34)); transition: color .18s ease, transform .18s ease; }
.masonry-actions button:hover, .masonry-actions button:focus-visible { color: #fff; transform: translateY(-1px); outline: none; }
.masonry-actions button:focus-visible { box-shadow: 0 0 0 1px rgba(255,255,255,.82); }
.masonry-actions button.active { background: transparent; color: white; }
.masonry-actions button.active svg { fill: currentColor; }
.masonry-actions svg { width: 20px; height: 20px; stroke-width: 1.55; }
.masonry-item > span { position: absolute; z-index: 2; left: 13px; bottom: 12px; color: rgba(255,255,255,.84); font-size: var(--type-micro); letter-spacing: .14em; opacity: 0; transition: opacity .2s; }
.masonry-item:hover > span, .masonry-item:focus-within > span { opacity: 1; }
.client-gallery-footer { width: 100%; min-height: 0; padding: 0; border: 0; background: #f7f6f3; }
.footer-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 48px 32px 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, auto) minmax(0, 1fr); grid-template-areas: "brand location contact" "copyright copyright copyright"; column-gap: clamp(36px, 5vw, 80px); row-gap: 22px; align-items: center; }
.footer-brand { grid-area: brand; min-height: 88px; display: flex; align-items: center; justify-content: flex-start; align-self: stretch; }
.footer-brand img { width: 88px; height: 88px; object-fit: contain; display: block; }
.footer-location { grid-area: location; width: 100%; min-height: 88px; max-width: 280px; margin: 0; justify-self: center; display: flex; align-items: center; justify-content: center; color: #4f4c45; font-size: var(--type-navigation); line-height: var(--leading-body); text-align: center; }
.footer-contact { grid-area: contact; width: auto; min-width: 0; min-height: 88px; margin: 0; justify-self: end; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; text-align: right; }
.footer-contact a { max-width: 100%; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; font-size: var(--type-caption); line-height: 1.5; overflow-wrap: anywhere; word-break: normal; }
.footer-contact a:hover { border-color: currentColor; }
.footer-copyright { grid-area: copyright; width: 100%; margin: 0; padding: 0; border: 0; background: #f7f6f3; color: var(--muted); font-size: var(--type-micro); text-align: center; text-transform: uppercase; letter-spacing: .16em; }

.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(10,10,9,.96); color: white; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s; }
.lightbox.visible { opacity: 1; visibility: visible; }
.lightbox-backdrop { position: absolute; inset: 0; }
.lightbox header { position: absolute; z-index: 3; left: 0; right: 0; top: 0; min-height: 72px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; }
.lightbox header > span { font-size: var(--type-section-label); text-transform: uppercase; letter-spacing: .14em; }
.lightbox header > div { display: flex; gap: 6px; }
.lightbox header button, .lightbox-nav { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: white; display: grid; place-items: center; cursor: pointer; }
.lightbox header button.active svg { fill: currentColor; }
.lightbox figure { position: relative; width: 100%; height: 100%; inset: auto; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lightbox figure img { width: auto; height: auto; max-width: 92vw; max-height: 88vh; margin: 0; padding: 0; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; }
.lightbox figcaption { position: absolute; bottom: 18px; color: rgba(255,255,255,.66); font-size: var(--type-label); letter-spacing: .18em; }
.lightbox-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-open { overflow: hidden !important; }

/* Light client viewer: preserve the existing lightbox layout on a white canvas. */
.lightbox { background: #fff; color: var(--ink); }
.lightbox header button, .lightbox-nav { border-color: rgba(17,17,15,.22); color: var(--ink); }
.lightbox figcaption { color: rgba(17,17,15,.58); }

.photo-card-image.warm img, .favorite-thumb.warm img, .masonry-item.warm img, .client-gallery-hero img.warm, .client-photo.warm { filter: sepia(.18) saturate(.72) contrast(.9) brightness(1.04); }
.photo-card-image.mono img, .favorite-thumb.mono img, .masonry-item.mono img, .client-gallery-hero img.mono, .client-photo.mono { filter: grayscale(1) contrast(.86) brightness(.84); }
.photo-card-image.soft img, .favorite-thumb.soft img, .masonry-item.soft img, .client-gallery-hero img.soft, .client-photo.soft { filter: saturate(.58) brightness(.96); }
.photo-card-image.pale img, .favorite-thumb.pale img, .masonry-item.pale img, .client-gallery-hero img.pale, .client-photo.pale { filter: grayscale(.45) brightness(1.12) contrast(.78); }

@media (min-width: 1440px) {
  .editor-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .masonry-grid { grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .footer-inner { padding: 42px 32px 24px; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "brand location" "brand contact" "copyright copyright"; column-gap: 40px; row-gap: 14px; }
  .footer-brand { align-self: center; }
  .footer-location { min-height: 0; max-width: none; justify-self: start; justify-content: flex-start; text-align: left; }
  .footer-contact { width: 100%; min-height: 0; justify-self: start; align-self: auto; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 8px 20px; text-align: left; }
  .footer-copyright { margin-top: 6px; }
}

@media (max-width: 900px) {
  .editor-content { padding: 36px 28px 70px; }
  .editor-topbar { padding: 0 26px; }
  .editor-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-summary { grid-template-columns: repeat(2, 1fr); }
  .activity-summary div:nth-child(2) { border-right: 0; }
  .activity-summary div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  :root {
    --type-hero: clamp(1.75rem, 8vw, 2.25rem);
    --type-h1: clamp(2rem, calc(1.65rem + 1.5vw), 2.75rem);
    --type-h2: clamp(1.75rem, calc(1.5rem + 1vw), 2.125rem);
    --type-h3: clamp(1.125rem, calc(1rem + .5vw), 1.375rem);
    --type-gallery-heading: clamp(1.75rem, calc(1.5rem + 1vw), 2.125rem);
    --measure-hero: calc(100vw - 48px);
  }
  .create-gallery-dialog { max-height: calc(100svh - 20px); overflow-y: auto; }
  .slug-field { height: auto; display: grid; }
  .slug-field span { padding: 9px 14px 2px; white-space: normal; }
  .gallery-dialog .slug-field input { height: 42px; padding-left: 14px; }
  .editor-main { padding-top: 0; }
  .editor-topbar { top: 64px; min-height: 58px; padding: 0 18px; }
  .editor-top-actions .status { display: none; }
  .editor-content { padding: 30px 18px 60px; }
  .editor-heading h1 { font-size: var(--type-h1); }
  .editor-heading { padding-bottom: 28px; }
  .editor-tabs { margin-inline: -18px; padding-inline: 18px; gap: 24px; }
  .editor-panel { padding-top: 32px; }
  .panel-heading { align-items: flex-start; }
  .panel-heading h2 { font-size: var(--type-h2); }
  .panel-heading .photo-count-label { display: none; }
  .upload-zone { grid-template-columns: auto 1fr; min-height: 118px; padding: 20px; }
  .upload-browse { grid-column: 2; justify-self: start; }
  .upload-item { grid-template-columns: 1fr 70px; }
  .upload-item > div { grid-column: 1 / -1; grid-row: 2; }
  .upload-item small { grid-column: 2; grid-row: 1; }
  .photo-grid-toolbar { align-items: stretch; flex-direction: column; justify-content: center; gap: 14px; padding: 16px 0; line-height: 1.5; }
  .section-manager { padding: 18px 14px; }
  .section-manager-heading { align-items: stretch; flex-direction: column; }
  .section-manager-heading form { min-width: 0; }
  .admin-section-tab { align-items: stretch; flex-direction: column; }
  .admin-section-tab > div { justify-content: flex-end; }
  .upload-section-choice { align-items: stretch; flex-direction: column; }
  .upload-section-choice select { width: 100%; min-width: 0; }
  .batch-photo-toolbar { align-items: stretch; flex-direction: column; }
  .batch-photo-toolbar > span { margin-right: 0; }
  .batch-photo-toolbar select, .batch-photo-toolbar button { width: 100%; }
  .photo-sort-control { width: 100%; justify-content: space-between; }
  .photo-sort-control select { min-width: 0; width: min(100%, 250px); }
  .editor-photo-grid { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
  .photo-card-meta { min-height: 54px; }
  .photo-card-actions { gap: 0; }
  .photo-card-actions button { min-width: 28px; padding: 0 5px; }
  .photo-card-actions button span { display: none; }
  .photo-card-actions button:nth-child(3) { margin-left: 0; }
  .drag-handle { display: none; }
  .settings-card { padding: 20px; }
  .access-details { grid-template-columns: 1fr; }
  .access-details > div { min-height: 76px; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .access-details > div:last-child { border-bottom: 0; }
  .access-pin-editor .pin-generate-field { display: grid; grid-template-columns: minmax(0, 1fr); }
  .access-pin-editor .pin-generate-field input { border-right: 1px solid #cbc8c0; }
  .access-pin-editor .pin-generate-field button { min-height: 48px; }
  .settings-actions { display: grid; grid-template-columns: 1fr; }
  .settings-actions button { width: 100%; }
  .favorite-row { grid-template-columns: 82px 1fr auto; gap: 12px; }
  .favorite-thumb { width: 82px; height: 66px; }
  .settings-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .delete-gallery-button { margin: 0 0 12px; justify-self: start; width: auto !important; }
  .activity-summary div { padding: 16px; min-height: 94px; }

  .mobile-header .official-brand-link { width: 44px; height: 44px; }
  .client-header .official-brand-link { width: 54px; height: 54px; }
  .client-gallery-hero { min-height: 100vh; min-height: 100dvh; }
  .client-hero-copy { padding: 96px 18px 150px; }
  .client-hero-copy h1 { max-width: var(--measure-hero); }
  .client-hero-copy > p { margin: 22px 0 25px; font-size: var(--type-micro); }
  .client-hero-logo { bottom: 22px; width: 64px; height: 64px; padding: 0; }
  .client-photo-section { padding: 32px 14px 72px; }
  .client-section-heading { margin: 0 6px 28px; display: grid; }
  .client-section-heading h2 { font-size: var(--type-gallery-heading); }
  .client-section-actions { justify-content: flex-start; }
  .client-section-heading .secondary-button { width: 100%; }
  .client-section-navigation { margin-inline: -14px; margin-bottom: 18px; display: block; overflow: hidden; }
  .client-section-primary { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .client-section-primary::-webkit-scrollbar { display: none; }
  .client-section-link { flex: 0 0 auto; min-height: 52px; padding: 0 15px; }
  .client-section-more { display: none; }
  .masonry-item::after { height: 34%; opacity: 1; }
  .masonry-actions { top: auto; right: 7px; bottom: 6px; gap: 3px; opacity: 1; transform: none; }
  .masonry-actions button { width: 32px; height: 32px; }
  .masonry-item > span { left: 8px; bottom: 8px; opacity: 1; }
  .client-gallery-footer { width: 100%; min-height: 0; padding: 0; }
  .footer-inner { width: 100%; padding: 42px 24px 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "location" "contact" "copyright"; gap: 20px; justify-items: center; text-align: center; }
  .footer-brand { min-height: 0; justify-content: center; align-self: auto; }
  .footer-brand img { width: 82px; height: 82px; }
  .footer-location { width: 100%; min-height: 0; max-width: 100%; margin: 0; justify-self: center; display: block; text-align: center; }
  .footer-contact { width: 100%; min-height: 0; margin: 0; justify-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; text-align: center; }
  .footer-contact a { width: auto; max-width: 100%; align-self: center; text-align: center; overflow-wrap: anywhere; word-break: break-word; }
  .footer-copyright { width: 100%; margin: 2px 0 0; justify-self: center; text-align: center; }
  .lightbox header { padding: 0 12px; }
  .lightbox header > span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lightbox-nav { top: auto; bottom: 6px; transform: none; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

/* Per-gallery design studio */

.editor-content-design { max-width: 1660px; padding-inline: 38px; }
.design-heading { margin-bottom: 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.design-heading h2 { margin: 16px 0 10px; max-width: var(--measure-copy); font-size: var(--type-h2); line-height: var(--leading-h2); font-weight: 300; letter-spacing: var(--tracking-h2); }
.design-heading > div > p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: var(--type-navigation); line-height: 1.6; }
.design-save-state { flex: 0 0 auto; color: var(--muted); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .13em; }
.design-studio { display: grid; grid-template-columns: 142px minmax(330px, 430px) minmax(430px, 1fr); gap: 0; border-top: 1px solid var(--line); min-height: 760px; }
.design-navigation { padding: 24px 18px 24px 0; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 4px; }
.design-navigation button { min-height: 50px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; text-align: left; font-size: var(--type-caption); cursor: pointer; }
.design-navigation button span { font-size: var(--type-micro); letter-spacing: .12em; }
.design-navigation button:hover { color: var(--ink); background: rgba(255,255,255,.5); }
.design-navigation button.active { color: var(--ink); background: white; }
.design-controls { min-width: 0; padding: 30px 28px 60px; border-right: 1px solid var(--line); }
.design-control-section[hidden] { display: none; }
.design-section-title { margin-bottom: 28px; }
.design-section-title h3 { margin: 13px 0 9px; font-size: var(--type-h3); line-height: var(--leading-h3); font-weight: 300; letter-spacing: var(--tracking-h3); }
.design-section-title > p:last-child { margin: 0; color: var(--muted); font-size: var(--type-caption); line-height: 1.55; }
.design-choice { min-width: 0; border: 1px solid var(--line); background: rgba(255,255,255,.42); padding: 8px; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.design-choice:hover { border-color: #aaa69d; background: white; transform: translateY(-1px); }
.design-choice.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: white; }
.cover-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.cover-template-choice > span:last-child { padding: 10px 2px 3px; display: grid; gap: 5px; }
.cover-template-choice strong { font-size: var(--type-navigation); font-weight: 500; }
.cover-template-choice > span:last-child small { color: var(--muted); font-size: var(--type-micro); line-height: 1.4; }
.cover-choice-art { position: relative; height: 98px; overflow: hidden; background: #292821; color: white; display: block; }
.cover-choice-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.64); }
.cover-choice-art b, .cover-choice-art small { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); width: 88%; text-align: center; text-transform: uppercase; }
.cover-choice-art b { top: 42%; font-family: var(--font-elegant-serif); font-size: var(--type-section-label); font-weight: 400; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-choice-art small { top: 59%; font-size: var(--type-preview-micro); letter-spacing: .16em; }
.cover-choice-west b, .cover-choice-west small { left: 10px; transform: none; width: 70%; text-align: left; }
.cover-choice-border i { position: absolute; z-index: 2; inset: 22px 20px; border: 1px solid rgba(255,255,255,.75); }
.cover-choice-vintage { display: grid; grid-template-rows: 58px 40px; background: #f7f6f3; color: var(--ink); }
.cover-choice-vintage img { position: relative; grid-row: 1; height: 58px; filter: brightness(.8); }
.cover-choice-vintage b { top: 69%; color: var(--ink); }
.cover-choice-vintage small { top: 83%; color: #5d5a53; }
.cover-choice-frame::before, .cover-choice-frame::after { content: ""; position: absolute; z-index: 2; left: 18%; right: 18%; height: 1px; background: rgba(255,255,255,.85); }
.cover-choice-frame::before { top: 29%; }
.cover-choice-frame::after { bottom: 28%; }
.cover-choice-journal { display: grid; grid-template-columns: 62% 38%; background: #f7f6f3; }
.cover-choice-journal img { position: relative; grid-column: 1; }
.cover-choice-journal b { top: 43%; left: 65%; transform: none; width: 31%; color: var(--ink); text-align: left; white-space: normal; }
.cover-choice-journal small { top: 62%; left: 65%; transform: none; width: 31%; color: #5d5a53; text-align: left; }

.cover-photo-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cover-photo-choice { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid transparent; background: #ddd9d1; overflow: hidden; cursor: pointer; }
.cover-photo-choice img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.cover-photo-choice span { position: absolute; left: 5px; right: 5px; bottom: 5px; color: white; font-size: var(--type-preview-button); text-align: left; text-shadow: 0 1px 5px black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-photo-choice:hover img { transform: scale(1.035); }
.cover-photo-choice.selected { border-color: var(--ink); box-shadow: inset 0 0 0 2px white; }
.focal-editor { margin-top: 24px; }
.focal-toolbar { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.segmented-control { display: inline-flex; border: 1px solid #c9c6be; background: rgba(255,255,255,.6); }
.segmented-control button { min-height: 34px; padding: 0 13px; border: 0; border-right: 1px solid #c9c6be; background: transparent; color: var(--muted); font-size: var(--type-label); cursor: pointer; }
.segmented-control button:last-child { border-right: 0; }
.segmented-control button.active { background: var(--ink); color: white; }
.focal-toolbar .text-button { color: var(--muted); font-size: var(--type-label); }
.focal-surface { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #d8d5cd; touch-action: none; cursor: crosshair; user-select: none; }
.focal-surface.focal-mobile { width: 52%; aspect-ratio: 9 / 14; margin-inline: auto; }
.focal-surface img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.focal-marker { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid white; border-radius: 50%; background: rgba(17,17,15,.36); box-shadow: 0 3px 14px rgba(0,0,0,.28); pointer-events: none; }
.focal-marker::before, .focal-marker::after { content: ""; position: absolute; background: white; }
.focal-marker::before { left: 50%; top: 5px; bottom: 5px; width: 1px; }
.focal-marker::after { top: 50%; left: 5px; right: 5px; height: 1px; }
.focal-marker i { position: absolute; inset: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: white; }
.focal-readout { margin: 9px 0 0; color: var(--muted); font-size: var(--type-micro); text-transform: uppercase; letter-spacing: .12em; }
.focal-readout strong { color: var(--ink); font-weight: 500; }

.typography-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.typography-choice { min-height: 154px; padding: 18px; display: grid; align-content: space-between; }
.typography-choice > span { display: grid; gap: 8px; }
.typography-choice b { font-size: var(--type-h3); font-weight: 400; }
.typography-choice i { min-width: 0; font-size: var(--type-section-label); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typography-choice em { min-width: 0; color: #57544d; font-size: var(--type-label); font-style: normal; line-height: var(--leading-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typography-choice > small { color: var(--muted); font-family: var(--font-ui); font-size: var(--type-micro); line-height: var(--leading-caption); }
.typography-sample-sans { font-family: var(--font-modern-sans); }
.typography-sample-sans b { font-weight: 500; letter-spacing: var(--tracking-h3); }
.typography-sample-serif { font-family: var(--font-elegant-serif); }
.typography-sample-serif b { line-height: .95; letter-spacing: -.025em; }
.typography-sample-modern { font-family: var(--font-editorial); }
.typography-sample-modern b { letter-spacing: -.02em; }
.typography-sample-luxury { font-family: var(--font-luxury); }
.typography-sample-luxury b { letter-spacing: -.025em; }
.typography-sample-subtle { font-family: var(--font-minimal); }
.typography-sample-subtle b { font-weight: 300; letter-spacing: -.01em; }
.typography-sample-classic { font-family: var(--font-classic); }
.typography-sample-classic b { font-weight: 500; }
.typography-sample-bold { font-family: var(--font-minimal); }
.typography-sample-bold b { font-weight: 700; letter-spacing: -.035em; }
.typography-sample-timeless { font-family: var(--font-classic); }
.typography-sample-timeless b { font-weight: 400; font-style: italic; letter-spacing: -.02em; }

.design-field-block { margin-top: 26px; display: grid; gap: 11px; }
.design-field-block > span, .design-field-block > div:first-child > span { color: #5d5a53; font-size: var(--type-label); text-transform: uppercase; letter-spacing: .14em; }
.design-option-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.design-option-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.design-option { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); background: rgba(255,255,255,.52); display: flex; align-items: center; gap: 9px; cursor: pointer; }
.design-option:hover { border-color: #a7a39a; }
.design-option.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: white; }
.design-option strong { min-width: 0; font-size: var(--type-section-label); font-weight: 400; line-height: 1.35; }
.design-option i { width: 17px; height: 17px; border: 1px solid #c9c6be; flex: 0 0 auto; }
.overlay-control > div { display: flex; align-items: center; justify-content: space-between; }
.overlay-control output { color: var(--ink); font-size: var(--type-section-label); }
.overlay-control input { width: 100%; accent-color: var(--ink); }
.design-note { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-label); line-height: 1.55; }

.design-preview-column { position: sticky; top: 90px; align-self: start; min-width: 0; padding: 30px 0 60px 28px; }
.design-preview-toolbar { min-height: 42px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.design-preview-toolbar > div:first-child { display: grid; gap: 4px; }
.design-preview-toolbar span { font-size: var(--type-section-label); text-transform: uppercase; letter-spacing: .14em; }
.design-preview-toolbar small { color: var(--muted); font-size: var(--type-micro); }
.design-preview-shell { min-height: 520px; padding: 22px; background: #e9e7e1; display: grid; place-items: center; overflow: hidden; }
.design-preview-canvas { width: 100%; height: min(660px, calc(100vh - 205px)); min-height: 480px; overflow-y: auto; overflow-x: hidden; background: var(--gallery-bg, #f7f6f3); box-shadow: 0 15px 48px rgba(23,22,18,.15); scrollbar-width: thin; transition: width .3s ease, border-radius .3s ease; }
.design-preview-canvas.is-mobile { width: min(390px, 100%); border-radius: 20px; }
.design-preview-canvas > .client-gallery-view { min-height: 100%; height: 100%; }
.design-preview-canvas .client-gallery-hero { min-height: 100%; height: 100%; }
.design-preview-canvas .client-hero-copy { padding: 56px 18px 76px; }
.design-preview-canvas .client-hero-copy h1 { max-width: 76%; font-size: var(--type-preview-hero); }
.design-preview-canvas .client-hero-meta { margin: 10px 0 12px; gap: 3px; }
.design-preview-canvas .client-hero-subtitle { max-width: 76%; margin-top: 7px; font-size: var(--type-preview-caption); }
.design-preview-canvas .client-hero-meta p { font-size: var(--type-preview-micro); }
.design-preview-canvas .view-gallery-button { min-height: 30px; padding: 0 10px; gap: 12px; font-size: var(--type-preview-button); pointer-events: none; }
.design-preview-canvas .view-gallery-button svg { width: 9px; }
.design-preview-canvas .client-hero-logo { width: 45px; height: 45px; bottom: 14px; }
.design-preview-photo-section { padding: 38px 18px 46px; }
.design-preview-canvas .client-section-heading { margin-bottom: 24px; }
.design-preview-canvas .client-section-heading h2 { margin: 9px 0 6px; font-size: var(--type-preview-heading); }
.design-preview-canvas .client-section-heading p { font-size: var(--type-preview-button); }
.design-preview-canvas .masonry-actions, .design-preview-canvas .masonry-item > span { display: none; }
.design-preview-canvas .footer-inner { padding: 28px 18px 18px; }
.design-preview-canvas .footer-brand img { width: 56px; height: 56px; }
.design-preview-canvas .footer-location, .design-preview-canvas .footer-contact a { font-size: var(--type-preview-caption); }
.design-preview-canvas .footer-copyright { font-size: var(--type-preview-micro); }
.design-preview-canvas.is-mobile .client-hero-copy { padding: 50px 16px 72px; }
.design-preview-canvas.is-mobile .client-hero-copy h1 { max-width: 84%; font-size: var(--type-preview-hero-mobile); }
.design-preview-canvas.is-mobile .client-hero-media > img { object-position: var(--cover-position-mobile); }
.design-preview-canvas.is-mobile .client-photo-section { padding: 36px 10px 44px; }
.design-preview-canvas.is-mobile .footer-inner { grid-template-columns: 1fr; grid-template-areas: "brand" "location" "contact" "copyright"; gap: 12px; justify-items: center; text-align: center; }
.design-preview-canvas.is-mobile .footer-brand { min-height: 0; justify-content: center; align-self: auto; }
.design-preview-canvas.is-mobile .footer-location, .design-preview-canvas.is-mobile .footer-contact { width: 100%; min-height: 0; justify-self: stretch; text-align: center; }
.design-preview-canvas.is-mobile .footer-location { display: block; }
.design-preview-canvas.is-mobile .footer-contact { align-self: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; }
.design-preview-canvas.is-mobile .footer-contact a { width: auto; align-self: center; text-align: center; }
.design-preview-canvas.is-mobile .footer-copyright { text-align: center; }

/* Shared client design tokens */

.client-gallery-view {
  --gallery-bg: #f7f6f3;
  --overlay-opacity: .34;
  --cover-text-color: #fff;
  --cover-button-color: #fff;
  --cover-title-font: var(--font-modern-sans);
  --cover-title-size: var(--type-hero);
  --cover-title-weight: 400;
  --cover-title-spacing: var(--tracking-hero);
  --cover-title-transform: none;
  --cover-title-line: var(--leading-hero);
  --cover-meta-font: var(--font-modern-sans);
  --cover-meta-spacing: .12em;
  --cover-meta-transform: uppercase;
  --cover-button-font: var(--font-modern-sans);
  --cover-button-weight: 500;
  --cover-button-spacing: var(--tracking-button);
  --gallery-heading-font: var(--font-modern-sans);
  --gallery-heading-weight: 400;
  --gallery-heading-spacing: var(--tracking-h2);
  --gallery-body-font: var(--font-modern-sans);
  --grid-gap: 10px;
  --row-height: 235px;
  background: var(--gallery-bg);
  font-family: var(--gallery-body-font);
}
.typography-serif { --cover-title-font: var(--font-elegant-serif); --cover-title-weight: 400; --cover-title-spacing: -.035em; --cover-title-line: .82; --cover-meta-font: var(--font-elegant-serif); --cover-meta-spacing: .1em; --cover-button-font: var(--font-elegant-serif); --cover-button-weight: 500; --cover-button-spacing: .08em; --gallery-heading-font: var(--font-elegant-serif); --gallery-heading-weight: 400; --gallery-heading-spacing: -.03em; --gallery-body-font: var(--font-elegant-serif); }
.typography-modern { --cover-title-font: var(--font-editorial); --cover-title-weight: 400; --cover-title-spacing: -.03em; --cover-title-line: .86; --cover-meta-font: var(--font-editorial); --cover-meta-spacing: .11em; --cover-button-font: var(--font-modern-sans); --cover-button-weight: 500; --cover-button-spacing: .08em; --gallery-heading-font: var(--font-editorial); --gallery-heading-weight: 400; --gallery-heading-spacing: -.025em; --gallery-body-font: var(--font-editorial); }
.typography-luxury { --cover-title-font: var(--font-luxury); --cover-title-weight: 400; --cover-title-spacing: -.035em; --cover-title-line: .86; --cover-meta-font: var(--font-minimal); --cover-meta-spacing: .13em; --cover-button-font: var(--font-minimal); --cover-button-weight: 500; --cover-button-spacing: .09em; --gallery-heading-font: var(--font-luxury); --gallery-heading-weight: 400; --gallery-heading-spacing: -.03em; --gallery-body-font: var(--font-minimal); }
.typography-luxury .client-hero-copy h1 { padding-block-start: .12em; margin-block-start: -.12em; }
.typography-subtle { --cover-title-font: var(--font-minimal); --cover-title-weight: 300; --cover-title-spacing: -.018em; --cover-title-line: .88; --cover-meta-font: var(--font-minimal); --cover-meta-spacing: .14em; --cover-button-font: var(--font-minimal); --cover-button-weight: 400; --cover-button-spacing: .1em; --gallery-heading-font: var(--font-minimal); --gallery-heading-weight: 300; --gallery-heading-spacing: -.018em; --gallery-body-font: var(--font-minimal); }
.typography-classic { --cover-title-font: var(--font-classic); --cover-title-weight: 500; --cover-title-spacing: -.025em; --cover-title-line: .87; --cover-meta-font: var(--font-classic); --cover-meta-spacing: .09em; --cover-button-font: var(--font-classic); --cover-button-weight: 500; --cover-button-spacing: .07em; --gallery-heading-font: var(--font-classic); --gallery-heading-weight: 500; --gallery-heading-spacing: -.022em; --gallery-body-font: var(--font-classic); }
.typography-bold { --cover-title-font: var(--font-minimal); --cover-title-weight: 700; --cover-title-spacing: -.045em; --cover-title-line: .82; --cover-meta-font: var(--font-minimal); --cover-meta-spacing: .11em; --cover-button-font: var(--font-minimal); --cover-button-weight: 700; --cover-button-spacing: .06em; --gallery-heading-font: var(--font-minimal); --gallery-heading-weight: 700; --gallery-heading-spacing: -.04em; --gallery-body-font: var(--font-minimal); }
.typography-timeless { --cover-title-font: var(--font-classic); --cover-title-weight: 400; --cover-title-spacing: -.025em; --cover-title-line: .86; --cover-meta-font: var(--font-editorial); --cover-meta-spacing: .1em; --cover-button-font: var(--font-editorial); --cover-button-weight: 500; --cover-button-spacing: .08em; --gallery-heading-font: var(--font-classic); --gallery-heading-weight: 400; --gallery-heading-spacing: -.025em; --gallery-body-font: var(--font-editorial); }
.cover-text-white { --cover-text-color: #fff; }
.cover-text-black { --cover-text-color: #11110f; }
.button-style-white { --cover-button-color: #fff; }
.button-style-black { --cover-button-color: #11110f; }
.thumbnail-regular { --row-height: 235px; }
.thumbnail-large { --row-height: 330px; }

.client-gallery-page, .client-photo-section, .masonry-grid, .client-gallery-footer, .footer-copyright { background: var(--gallery-bg, #f7f6f3); }
.client-gallery-hero { color: var(--cover-text-color); }
.client-hero-media { position: absolute; inset: 0; overflow: hidden; background: #272620; }
.client-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position-desktop, var(--cover-position)); display: block; }
.client-hero-media > .client-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,6,calc(var(--overlay-opacity) * .66)) 0%, rgba(7,7,6,calc(var(--overlay-opacity) * .36)) 36%, rgba(7,7,6,calc(var(--overlay-opacity) * .7)) 72%, rgba(7,7,6,var(--overlay-opacity)) 100%); }
.client-hero-copy h1 { font-family: var(--cover-title-font); font-size: var(--cover-title-size); font-weight: var(--cover-title-weight); letter-spacing: var(--cover-title-spacing); text-transform: var(--cover-title-transform); line-height: var(--cover-title-line); }
.client-hero-copy h1 span { color: inherit; opacity: .8; }
.client-hero-subtitle { max-width: min(620px, 76vw); margin: var(--space-type-sm) 0 0; font-family: var(--cover-meta-font); font-size: var(--type-caption); line-height: var(--leading-caption); letter-spacing: .04em; text-transform: none; opacity: .86; text-wrap: balance; }
.client-hero-subtitle + .client-hero-meta { margin-top: var(--space-type-sm); }
.client-hero-meta { margin: var(--space-type-md) 0 var(--space-type-lg); display: grid; gap: var(--space-type-xs); text-align: inherit; }
.client-hero-meta p { margin: 0; font-family: var(--cover-meta-font); font-size: var(--type-section-label); letter-spacing: var(--cover-meta-spacing); text-transform: var(--cover-meta-transform); line-height: var(--leading-caption); }
.client-hero-meta p:first-child { font-weight: 500; }
.client-hero-meta p:last-child { font-size: var(--type-label); opacity: .78; }
.view-gallery-button { border-color: color-mix(in srgb, var(--cover-button-color) 82%, transparent); color: var(--cover-button-color); font-family: var(--cover-button-font); font-weight: var(--cover-button-weight); letter-spacing: var(--cover-button-spacing); text-transform: uppercase; }
.view-gallery-button:hover { border-color: var(--cover-button-color); background: color-mix(in srgb, var(--cover-button-color) 10%, transparent); }
.client-section-heading h2 { font-family: var(--gallery-heading-font); font-weight: var(--gallery-heading-weight); letter-spacing: var(--gallery-heading-spacing); line-height: var(--leading-h2); }
.client-section-heading .eyebrow, .client-section-heading > div > p:last-child { font-family: var(--cover-meta-font); letter-spacing: var(--cover-meta-spacing); }
.client-gallery-footer { font-family: var(--gallery-body-font); }
.client-gallery-view .secondary-button, .client-gallery-view .client-utility-button { font-family: var(--cover-button-font); font-size: var(--type-button); font-weight: var(--cover-button-weight); letter-spacing: var(--cover-button-spacing); }
.hero-rule { display: none; width: min(380px, 64vw); height: 1px; background: currentColor; opacity: .7; }

.cover-template-west .client-hero-copy { width: min(680px, 76vw); padding-left: clamp(34px, 7vw, 120px); padding-right: 24px; align-items: flex-start; text-align: left; }
.cover-template-west .client-hero-copy h1 { width: auto; min-width: 0; max-width: min(62vw, 640px); }
.cover-template-border .client-hero-copy { inset: 8vh 7vw 14vh; padding: 80px 34px 100px; border: 1px solid color-mix(in srgb, var(--cover-text-color) 68%, transparent); }
.cover-template-frame .hero-rule { display: block; }
.cover-template-frame .hero-rule-top { margin-bottom: 34px; }
.cover-template-frame .hero-rule-bottom { margin-top: 34px; }
.cover-template-vintage .client-gallery-hero { min-height: 0; display: grid; grid-template-rows: min(52svh, 560px) auto; background: var(--gallery-bg); color: var(--ink); overflow: hidden; }
.cover-template-vintage .client-hero-media { position: relative; grid-row: 1; }
.cover-template-vintage .client-hero-copy { position: relative; inset: auto; grid-row: 2; min-height: 0; padding: 38px 24px 44px; background: var(--gallery-bg); color: var(--ink); }
.cover-template-vintage .client-hero-copy h1 { width: auto; min-width: 0; max-width: min(76vw, 840px); font-size: var(--type-h1); }
.cover-template-vintage .client-hero-meta { margin: 18px 0 20px; }
.cover-template-vintage .view-gallery-button { --cover-button-color: #11110f; }
.cover-template-vintage .client-hero-logo { top: calc(min(52svh, 560px) - 98px); bottom: auto; }
.cover-template-journal .client-gallery-hero { min-height: 100svh; display: grid; grid-template-columns: 62% 38%; background: var(--gallery-bg); overflow: hidden; }
.cover-template-journal .client-hero-media { position: relative; grid-column: 1; grid-row: 1; }
.cover-template-journal .client-hero-copy { position: relative; inset: auto; grid-column: 2; grid-row: 1; padding: 70px clamp(32px, 4vw, 76px); align-items: flex-start; text-align: left; background: var(--gallery-bg); color: var(--ink); }
.cover-template-journal.cover-text-white .client-hero-copy { background: #171714; color: white; }
.cover-template-journal .client-hero-copy h1 { width: auto; min-width: 0; max-width: 100%; font-size: var(--type-h1); }
.cover-template-journal .client-hero-logo { left: 31%; bottom: 28px; }

.masonry-grid { gap: var(--grid-gap); background: var(--gallery-bg); }
.masonry-column { gap: var(--grid-gap); }
.masonry-item { margin-bottom: 0; }
.grid-layout-horizontal .masonry-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--grid-gap); column-count: initial; }
.grid-layout-horizontal .masonry-grid::after { content: ""; flex-grow: 999999; min-width: 0; }
.grid-layout-horizontal .masonry-item { flex: calc(var(--photo-ratio) * var(--row-height)) 1 1; width: auto; height: var(--row-height); margin: 0; break-inside: auto; }
.grid-layout-horizontal .masonry-open, .grid-layout-horizontal .masonry-open img { width: 100%; height: 100%; }
.grid-layout-horizontal .masonry-open img { aspect-ratio: auto !important; object-fit: cover; }

.design-preview-canvas .cover-template-border .client-hero-copy { inset: 22px 22px 72px; padding: 42px 18px 58px; }
.design-preview-canvas .cover-template-frame .hero-rule { width: 48%; }
.design-preview-canvas .cover-template-frame .hero-rule-top { margin-bottom: 16px; }
.design-preview-canvas .cover-template-frame .hero-rule-bottom { margin-top: 16px; }
.design-preview-canvas .cover-template-vintage .client-gallery-hero { min-height: 84%; height: 84%; grid-template-rows: 58% 42%; }
.design-preview-canvas .cover-template-vintage .client-hero-copy { min-height: 0; padding: 18px 14px 24px; }
.design-preview-canvas .cover-template-vintage .client-hero-copy h1 { font-size: var(--type-preview-heading); }
.design-preview-canvas .cover-template-vintage .client-hero-logo { top: calc(62% - 60px); }
.design-preview-canvas .cover-template-journal .client-gallery-hero { min-height: 100%; height: 100%; }
.design-preview-canvas .cover-template-journal .client-hero-copy { padding: 30px 18px; }
.design-preview-canvas .cover-template-journal .client-hero-copy h1 { font-size: var(--type-preview-hero-compact); }
.design-preview-canvas .cover-template-journal .client-hero-logo { left: 31%; }

@media (max-width: 1280px) {
  .editor-content-design { padding-inline: 28px; }
  .design-studio { grid-template-columns: 118px minmax(310px, 390px) minmax(360px, 1fr); }
  .design-navigation { padding-right: 10px; }
  .design-controls { padding-inline: 22px; }
  .design-preview-column { padding-left: 22px; }
}

@media (max-width: 1050px) {
  .design-studio { grid-template-columns: 118px minmax(0, 1fr); }
  .design-controls { border-right: 0; }
  .design-preview-column { position: relative; top: auto; grid-column: 1 / -1; padding: 30px 0 60px; border-top: 1px solid var(--line); }
  .design-preview-shell { min-height: 440px; }
  .design-preview-canvas { height: 620px; }
}

@media (max-width: 900px) {
  .thumbnail-regular { --row-height: 190px; }
  .thumbnail-large { --row-height: 265px; }
}

@media (max-width: 640px) {
  .editor-content-design { padding-inline: 18px; }
  .design-heading { align-items: flex-start; flex-direction: column; }
  .design-studio { display: block; }
  .design-navigation { margin-inline: -18px; padding: 10px 18px; border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 6px; overflow-x: auto; }
  .design-navigation button { flex: 0 0 auto; min-height: 42px; padding: 0 12px; grid-template-columns: auto auto; }
  .design-controls { padding: 26px 0 48px; }
  .design-preview-column { padding-bottom: 30px; }
  .cover-template-grid, .typography-grid { gap: 10px; }
  .cover-choice-art { height: 86px; }
  .cover-photo-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .design-option-row.three { grid-template-columns: 1fr; }
  .design-option-row.stacked { grid-template-columns: 1fr; }
  .design-preview-shell { margin-inline: -18px; padding: 12px; }
  .design-preview-canvas { min-height: 540px; height: 650px; }

  .client-hero-media > img { object-position: var(--cover-position-mobile, var(--cover-position)); }
  .client-hero-meta { margin: 16px 0 20px; gap: 4px; }
  .client-hero-meta p { font-size: var(--type-preview-caption); }
  .gallery-slug-events .client-hero-subtitle {
    max-width: min(420px, 86vw);
    font-size: clamp(13px, 3.55vw, 14px);
    line-height: 1.45;
    letter-spacing: .03em;
    opacity: .94;
  }
  .cover-template-west .client-hero-copy { width: 100%; padding: 96px 24px 148px; justify-content: center; }
  .cover-template-west .client-hero-copy h1 { max-width: var(--measure-hero); }
  .cover-template-border .client-hero-copy { inset: 76px 18px 100px; padding: 54px 18px 74px; }
  .cover-template-frame .hero-rule { width: min(250px, 68vw); }
  .cover-template-vintage .client-gallery-hero { grid-template-rows: 50svh auto; }
  .cover-template-vintage .client-hero-copy { min-height: 0; padding: 30px 20px 40px; }
  .cover-template-vintage .client-hero-logo { top: calc(50svh - 84px); }
  .cover-template-journal .client-gallery-hero { grid-template-columns: 1fr; grid-template-rows: 58svh minmax(42svh, auto); }
  .cover-template-journal .client-hero-media { grid-column: 1; grid-row: 1; }
  .cover-template-journal .client-hero-copy { grid-column: 1; grid-row: 2; min-height: 42svh; padding: 38px 22px 62px; align-items: center; text-align: center; }
  .cover-template-journal .client-hero-copy h1 { max-width: var(--measure-hero); }
  .cover-template-journal .client-hero-logo { left: 50%; top: calc(58svh - 84px); bottom: auto; }

  .thumbnail-regular { --row-height: 145px; }
  .thumbnail-large { --row-height: 210px; }
}

.design-preview-canvas.is-mobile .cover-template-west .client-hero-copy { width: 100%; padding: 50px 18px 72px; }
.design-preview-canvas.is-mobile .cover-template-border .client-hero-copy { inset: 30px 12px 78px; padding: 38px 14px 52px; }
.design-preview-canvas.is-mobile .cover-template-vintage .client-gallery-hero { grid-template-rows: 58% 42%; }
.design-preview-canvas.is-mobile .cover-template-vintage .client-hero-copy { min-height: 0; padding: 20px 15px 26px; }
.design-preview-canvas.is-mobile .cover-template-vintage .client-hero-logo { top: calc(58% - 58px); }
.design-preview-canvas.is-mobile .cover-template-journal .client-gallery-hero { grid-template-columns: 1fr; grid-template-rows: 58% 42%; }
.design-preview-canvas.is-mobile .cover-template-journal .client-hero-media { grid-column: 1; grid-row: 1; }
.design-preview-canvas.is-mobile .cover-template-journal .client-hero-copy { grid-column: 1; grid-row: 2; min-height: 0; padding: 22px 15px 28px; align-items: center; text-align: center; }
.design-preview-canvas.is-mobile .cover-template-journal .client-hero-logo { left: 50%; top: calc(58% - 58px); bottom: auto; }

/* Responsive gallery density: the single source of truth for masonry columns and gaps. */
.client-gallery-view.grid-layout-vertical.thumbnail-regular,
.client-gallery-view.grid-layout-vertical.thumbnail-large { --grid-columns: 4; }
.client-gallery-view.spacing-tight { --grid-gap: 10px; }
.client-gallery-view.spacing-regular { --grid-gap: 12px; }
.client-gallery-view.spacing-large { --grid-gap: 14px; }
.client-gallery-view.grid-layout-vertical .masonry-grid { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }

@media (min-width: 768px) and (max-width: 1023px) {
  .client-gallery-view.grid-layout-vertical.thumbnail-regular,
  .client-gallery-view.grid-layout-vertical.thumbnail-large { --grid-columns: 3; }
  .client-gallery-view.spacing-tight { --grid-gap: 8px; }
  .client-gallery-view.spacing-regular { --grid-gap: 10px; }
  .client-gallery-view.spacing-large { --grid-gap: 12px; }
}

@media (max-width: 767px) {
  .client-gallery-view.grid-layout-vertical.thumbnail-regular,
  .client-gallery-view.grid-layout-vertical.thumbnail-large { --grid-columns: 2; }
  .client-gallery-view.spacing-tight,
  .client-gallery-view.spacing-regular,
  .client-gallery-view.spacing-large { --grid-gap: 4px; }
}

@media (max-width: 820px) {
  .application-settings-section { padding: 24px; }
  .settings-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .settings-section-heading > p { text-align: left; }
  .settings-users-list article { grid-template-columns: minmax(180px, 1fr) 120px 110px; }
  .settings-users-list article .text-button { grid-row: 2; }
  .settings-users-list article .text-button:first-of-type { grid-column: 2; }
  .settings-users-list article .user-delete { grid-column: 3; }
}

@media (max-width: 640px) {
  .application-settings-section { padding: 20px 16px; }
  .application-settings-actions { align-items: stretch; flex-direction: column; }
  .application-settings-actions .primary-button { width: 100%; }
  .password-settings > label { max-width: none; }
  .settings-users-list article { grid-template-columns: 1fr 1fr; }
  .settings-user-identity { grid-column: 1 / -1; }
  .settings-users-list article .text-button:first-of-type { grid-column: 1; }
  .settings-users-list article .user-delete { grid-column: 2; }
}

.design-preview-canvas.is-mobile .client-gallery-view.grid-layout-vertical { --grid-columns: 2; }
.design-preview-canvas.is-mobile .client-gallery-view.spacing-tight { --grid-gap: 6px; }
.design-preview-canvas.is-mobile .client-gallery-view.spacing-regular { --grid-gap: 7px; }
.design-preview-canvas.is-mobile .client-gallery-view.spacing-large { --grid-gap: 8px; }