/* ========== The Headshot Club — shared styles ========== */
:root {
  --ink: #1A1A1A;
  --bone: #F4EFE6;
  --terracotta: #A8572C;
  --cypress: #3D5447;
  --linen: #C9C3B5;
  --rule: #D3D1C7;
  --muted: #6B6B6B;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Overridable from the site editor. Fall back values match the
     long standing hard coded look. */
  --max-content-width: none;
  --radius: 2px;
  --heading-weight: 400;
}

/* Camera-shutter brand mark — the four corner brackets that surround
   "hc." in the master logo. Drop one of these in anywhere we used to
   render bare "hc." text. The light/dark variants swap via the
   document data-theme attribute so the mark stays readable on either
   background. Sizing is set on the wrapper; both image variants
   inherit a safe default of 28px tall. */
.hc-mark {
  height: 28px; width: auto; display: inline-block; vertical-align: middle;
}
.hc-mark--dark { display: none; }
:root[data-theme="dark"] .hc-mark--light { display: none; }
:root[data-theme="dark"] .hc-mark--dark { display: inline-block; }
.hc-mark-wrap {
  display: inline-flex; align-items: center; vertical-align: middle;
  line-height: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Pinch-zoom hardening. `touch-action: pan-x pan-y` lets normal
     scrolling through but blocks the browser's pinch gesture from
     reaching the document. Paired with the JS gesture listeners in
     theme.js — belt and suspenders. */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { touch-action: pan-x pan-y; }

/* Keyboard focus — visible outline on every interactive element.
   Uses :focus-visible so mouse clicks don't show the ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-to-content link — visible only when focused */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus-visible { top: 16px; }

/* Respect prefers-reduced-motion at the top level too */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Screen-reader only content — visually hidden but read aloud */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mobile safety belt — keep the page from rendering wider than the
   viewport. Without this, iOS Safari computes a smaller initial scale
   when any element overflows horizontally and the user can pinch out
   to ~50% (Michelle's report). overflow-x: clip is the modern primitive
   that doesn't establish a scroll container the way `hidden` does, so
   sticky/fixed children keep working. Internal scrollers like the
   gallery strip still get their own overflow-x: auto. */
html, body {
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Prevent intrinsic min-content (long URLs, unbroken IDs, wide images)
   from blowing past the parent's width on phone. Tables keep their
   normal layout — they have their own overflow handling where needed. */
body *:not(:is(table, thead, tbody, tr, td, th, colgroup, col)),
body *::before,
body *::after { min-width: 0; }
body { word-wrap: break-word; overflow-wrap: break-word; }
body :is(table, td, th) { overflow-wrap: normal; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Full-width pass (2026-06): body copy justifies edge to edge. This is a
   bare-element rule on purpose — any class-level text-align (centered
   labels, banners, dialog bodies, .positioning overrides, etc.) outranks
   it on specificity, so "centered where it makes sense" keeps working. */
p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: none;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Horizontal brand lockup — SVG from guidelines */
.lockup {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.lockup svg,
.lockup img {
  display: block;
  height: 92px;
  width: auto;
}
@media (max-width: 720px) {
  .lockup svg,
  .lockup img { height: 64px; }
}
/* Light/dark swap for img-based lockups */
.lockup .lockup-dark { display: none; }
:root[data-theme="dark"] .lockup .lockup-light { display: none; }
:root[data-theme="dark"] .lockup .lockup-dark { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--ink);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
.nav-links .book-btn {
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  opacity: 1;
  transition: background 0.2s, color 0.2s;
}
.nav-links .book-btn:hover { background: var(--terracotta); }

/* Public theme toggle pill (auto-injected by /theme.js) */
.nav-links .theme-toggle--nav {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}
.nav-links .theme-toggle--nav:hover { border-color: var(--ink); }
.nav-links .theme-toggle--nav .theme-toggle-icon {
  display: none;
  width: 16px;
  height: 16px;
  margin: 0;           /* kill any inherited spacing that pushes the glyph left */
  color: currentColor; /* lets SVG currentColor match the button text color */
}
.nav-links .theme-toggle--nav .theme-toggle-icon--sun { display: block; }
html[data-theme="dark"] .nav-links .theme-toggle--nav .theme-toggle-icon--sun { display: none; }
html[data-theme="dark"] .nav-links .theme-toggle--nav .theme-toggle-icon--moon { display: block; }

@media (max-width: 720px) {
  .nav-links .theme-toggle--nav { width: 30px; height: 30px; }
  .nav-links .theme-toggle--nav .theme-toggle-icon { width: 14px; height: 14px; }
}

@media (max-width: 720px) {
  .nav-inner { padding: 14px 20px; gap: 12px; }
  .lockup .wm { font-size: 18px; }
  .lockup .tagline { font-size: 8px; letter-spacing: 0.2em; }
  .nav-links { gap: 14px; font-size: 10px; letter-spacing: 0.14em; }
  .nav-links a.hide-sm { display: none; }
  /* Round 16.3 — public-site theme toggle was dominating the right side
     on phones (Michelle's screenshot showed the segmented sun/moon pill
     larger than the entire lockup). Shrink the segments so it reads as a
     small utility element instead of the page's primary action. */
  .nav-links .theme-toggle--segmented { padding: 3px; gap: 1px; }
  .nav-links .theme-toggle--segmented .theme-toggle-seg { width: 22px; height: 22px; }
  .nav-links .theme-toggle--segmented .theme-toggle-icon { width: 11px; height: 11px; }
}

/* Round 16.3 — Public-site mobile hamburger.
   On ≤640px the nav-links text items collapse behind a hamburger button.
   The hamburger sits in the same row as the lockup; tapping it reveals
   a slide-in drawer with the same nav items, plus a Book CTA.
   The hamburger is hidden on desktop (display:none by default). */
.nav-hamburger {
  display: none;
  background: transparent; border: 0;
  /* 44×44 touch target — was 6px padding on a 22px icon (~34px total)
     which is below comfortable tap size on phones. */
  padding: 11px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink); cursor: pointer; line-height: 0;
  border-radius: 4px;
}
.nav-hamburger:hover { background: var(--linen, #faf6ef); }
.nav-hamburger svg { width: 22px; height: 22px; }
:root[data-theme="dark"] .nav-hamburger { color: var(--bone); }
:root[data-theme="dark"] .nav-hamburger:hover { background: rgba(255,255,255,0.06); }

.nav-drawer {
  position: fixed; inset: 0;
  background: rgba(26, 26, 26, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9500;
  display: flex; justify-content: flex-end;
}
.nav-drawer[hidden] { display: none !important; }
.nav-drawer-panel {
  width: min(320px, 88vw);
  max-width: 100%;
  background: var(--bone, #F4EFE6);
  border-left: 1px solid var(--rule, #E5DFD3);
  box-shadow: -16px 0 40px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 18px) 0 env(safe-area-inset-bottom, 24px);
  overflow-y: auto;
  animation: nav-drawer-slide 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes nav-drawer-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
:root[data-theme="dark"] .nav-drawer-panel {
  background: #1E1E1E;
  border-left-color: rgba(244,239,230,0.12);
}
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 6px;
  gap: 12px;
}
.nav-drawer-brand { display: inline-flex; align-items: center; line-height: 0; }
.nav-drawer-close {
  background: transparent; border: 0;
  font-size: 28px; line-height: 1; color: var(--muted);
  cursor: pointer;
  /* 44×44 minimum touch target. */
  padding: 8px 12px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.nav-drawer-close:hover { color: var(--terracotta); }
.nav-drawer-list {
  list-style: none; margin: 0; padding: 12px 0;
}
.nav-drawer-list a {
  display: flex; align-items: center;
  padding: 14px 24px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none; opacity: 0.85;
  border-left: 3px solid transparent;
}
.nav-drawer-list a:hover {
  background: rgba(168, 87, 44, 0.06);
  border-left-color: var(--terracotta);
  color: var(--terracotta); opacity: 1;
}
.nav-drawer-list a.book-btn {
  background: var(--ink); color: var(--bone);
  margin: 14px 24px 0;
  padding: 14px 18px;
  text-align: center; border-radius: 2px;
  border-left: 0;
}
.nav-drawer-list a.book-btn:hover { background: var(--terracotta); }
:root[data-theme="dark"] .nav-drawer-list a { color: var(--bone); }
:root[data-theme="dark"] .nav-drawer-list a:hover { color: #E0A47A; }

@media (max-width: 640px) {
  /* Hide the nav-links text items, replace with a hamburger. The theme
     toggle stays visible (it's a frequent on-the-fly action). */
  .nav-links > a { display: none; }
  .nav-links .book-btn { display: none; }
  .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }
}
body.nav-drawer-open { overflow: hidden; }

/* ---------- Sections ---------- */
/* Section padding is set by the site editor (Layout & spacing panel).
   Each side has its own CSS variable so Michelle can dial in T/R/B/L
   independently. The legacy --section-padding still wins as a fallback
   when a side isn't set, so older saves keep working. */
.section {
  max-width: none;
  margin: 0 auto;
  padding:
    var(--section-padding-top, var(--section-padding, 96px))
    var(--section-padding-right, 32px)
    var(--section-padding-bottom, var(--section-padding, 96px))
    var(--section-padding-left, 32px);
}
.section--narrow { max-width: none; }
.section--tight { padding: 64px 32px; }
@media (max-width: 720px) {
  .section {
    padding:
      var(--section-padding-top-mobile, 64px)
      var(--section-padding-right-mobile, 20px)
      var(--section-padding-bottom-mobile, 64px)
      var(--section-padding-left-mobile, 20px);
  }
  .section--tight { padding: 48px 20px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 28px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-align: left;
}
.btn:hover { background: var(--ink); color: var(--bone); }
.btn--primary {
  background: var(--ink);
  color: var(--bone);
}
.btn--primary:hover { background: var(--terracotta); border-color: var(--terracotta); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  padding-top: 104px;
  padding-bottom: 104px;
}
.hero-text h1 {
  font-family: var(--serif);
  font-weight: 400;
  /* Floor was 42px which forced mid-word breaks on phones because
     "headshots" / "schedule" / etc. don't fit in a ~280px column at
     that size. Shrunk the floor to 30px so the text reflows
     naturally on small screens. */
  font-size: clamp(30px, 5.6vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  color: var(--ink);
  /* Defeat any inherited word-break: break-all or per-letter wrap.
     Words break only at safe positions; if a single word is too
     long, fall back to overflow-wrap so it breaks gracefully
     instead of overflowing the column. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.hero-text h1 em {
  font-style: italic;
  color: var(--terracotta);
}
.hero-text p {
  font-size: 19px;
  line-height: 1.55;
  max-width: none;
  color: var(--ink);
  opacity: 0.82;
  margin: 0 0 36px;
}
/* Match h1's terracotta italic so the rotating subheading can pick up
   the brand accent on emphasized words (e.g. "<em>Sin pretensiones</em>"). */
.hero-text p em {
  font-style: italic;
  color: var(--terracotta);
}
.hero-image {
  position: relative;
  aspect-ratio: 4 / 5;
  /* Harmony pass (2026-06): the hero portrait is capped so it presents
     like a framed image instead of swallowing the top of the page. It
     hugs the right edge of the hero grid on desktop. */
  max-width: min(36vw, 540px);
  width: 100%;
  margin-left: auto;
  overflow: hidden;
  background: var(--linen);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- "Not your package?" quiet CTA row ----------
   Sits right under the four package cards. Single line, no border,
   quiet presence — a referral hook, not its own section. */
.pkg-custom-cta {
  /* Sit visually CLOSE to the packages above so the CTA reads as part of
     the packages section rather than a floating island. Tightened in
     SC15 — Michelle flagged the gap was too large multiple times. */
  margin: 8px auto 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.pkg-custom-cta .pkg-custom-text {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}
.pkg-custom-cta .pkg-custom-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 8px 16px;
  letter-spacing: 0.14em;
}
@media (max-width: 640px) {
  .pkg-custom-cta {
    flex-wrap: wrap;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .pkg-custom-cta .pkg-custom-text { font-size: 13px; }
}

/* ---------- Fade gallery (silent crossfade slideshow) ----------
   Images stack absolutely inside the container. Only one has .is-active
   at a time, which drives opacity. Cross-fades for ~700ms between swaps.
   No arrows, dots, or play controls by design. */
.fade-gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.fade-gallery .fade-gallery-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
  will-change: opacity;
}
.fade-gallery .fade-gallery-layer.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fade-gallery .fade-gallery-layer { transition: none; }
}
.hero-image::before, .hero-image::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border: 1.5px solid var(--bone);
  z-index: 2;
}
.hero-image::before {
  top: 16px; left: 16px;
  border-right: none; border-bottom: none;
}
.hero-image::after {
  bottom: 16px; right: 16px;
  border-left: none; border-top: none;
}
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 72px;
  }
  .hero-image { max-width: min(86vw, 460px); margin-left: auto; margin-right: auto; }
}

/* ---------- Positioning block ---------- */
/* Full-width pass (2026-06): no longer centered — the statement runs
   edge to edge and justifies like the rest of the body copy. */
.positioning {
  max-width: none;
  margin: 0 auto;
  text-align: left;
  padding: 72px 32px;
}
.positioning .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.3;
  margin: 0 0 28px;
}
.positioning p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.positioning .lede em { color: var(--terracotta); font-style: italic; }

/* ---------- Package grid ---------- */
.packages-head {
  max-width: none;
  margin: 0 auto;
  padding: 64px 32px 32px;
}
.packages-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.15;
  margin: 14px 0 0;
  letter-spacing: -0.01em;
}
.packages-head h2 em { font-style: italic; color: var(--terracotta); }

.packages {
  max-width: none;
  margin: 0 auto;
  /* SC15: padding-bottom was 96px which created the huge whitespace
     between the package cards and the "Get in contact" CTA. Reduced to
     24px so the CTA sits close to the cards as Michelle has flagged
     multiple times. */
  padding: 16px 32px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pkg-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  transition: transform 0.25s;
}
.pkg-card:hover { transform: translateY(-3px); }
.pkg-card:hover .pkg-thumb img { transform: scale(1.04); }

.pkg-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--linen);
  margin-bottom: 20px;
}
.pkg-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.pkg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.pkg-name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
}
.pkg-price {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  /* Hold the price together so longer Spanish package names
     ("La Sesión de Marca", "La Sesión de Casting") can't squeeze
     the price column enough to break "$650" across two lines. */
  white-space: nowrap;
  flex-shrink: 0;
  overflow-wrap: normal;
  word-break: keep-all;
}
.pkg-price .cur {
  font-size: 13px;
  vertical-align: 4px;
  margin-right: 1px;
  opacity: 0.7;
}
.pkg-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
/* Final image count — its own line under the duration, given a bit of
   emphasis (terracotta) since it's the spec clients scan for first. */
.pkg-images {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 12px;
}
.pkg-desc {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0 0 18px;
}
.pkg-cta {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.pkg-card:hover .pkg-cta { color: var(--terracotta); border-color: var(--terracotta); }

@media (max-width: 1080px) {
  .packages { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .packages { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Process block ---------- */
.process {
  max-width: none;
  margin: 0 auto;
  padding: 56px 32px 18px;
}
.process h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 10px 0 18px;
}
.process h2 em { font-style: italic; color: var(--terracotta); }
.process p {
  font-size: 17px;
  line-height: 1.7;
  max-width: none;
  opacity: 0.85;
  margin: 0 0 14px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ---------- Audience list ---------- */
.audience {
  max-width: none;
  margin: 0 auto;
  padding: 12px 32px 56px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.55;
}
.audience p {
  margin: 0 0 10px;
  opacity: 0.88;
  padding-left: 34px;
  position: relative;
  max-width: none;
}
.audience p em { font-style: italic; color: var(--terracotta); }
.audience p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 7px;
  border-left: 1.5px solid var(--terracotta);
  border-bottom: 1.5px solid var(--terracotta);
  transform: rotate(-45deg);
  opacity: 0.85;
}

/* ---------- Gallery ---------- */
.gallery-section {
  background: var(--ink);
  color: var(--bone);
  padding: 64px 0;
  scroll-margin-top: 100px;
}
.gallery-wrap { max-width: none; margin: 0 auto; padding: 0 32px; }
.gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 32px;
}
.gallery-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.15;
  margin: 14px 0 0;
  letter-spacing: -0.01em;
}
.gallery-head h2 em { font-style: italic; color: var(--terracotta); }
.gallery-head .label { color: var(--linen); opacity: 0.85; }

/* Dark-section default text colors.
   .gallery-section and .banner use var(--ink) as their background by
   default, which is dark in light mode. Every piece of copy inside
   them inherits var(--bone) so it reads cream against that ink. None
   of these rules use !important — content-loader can still inject a
   per-section text_color / heading_color / eyebrow_color override
   when the operator picks one explicitly, and the bg_color
   auto-contrast keeps things readable when the section's background
   is repainted. */
.gallery-section,
.banner {
  color: var(--bone);
}
.gallery-section .label,
.banner .label,
.gallery-section [class*="eyebrow"],
.banner [class*="eyebrow"] {
  color: var(--bone);
  opacity: 0.78;
}
.gallery-section p,
.gallery-section li,
.banner p,
.banner li {
  color: var(--bone);
}
.gallery-section h1,
.gallery-section h2,
.gallery-section h3,
.gallery-section h4,
.banner h1,
.banner h2,
.banner h3,
.banner h4 {
  color: var(--bone);
}
/* The terracotta em accent should still pop on dark — restore it
   after the broad inheritance rule above sweeps every heading. */
.gallery-section h1 em,
.gallery-section h2 em,
.gallery-section h3 em,
.banner h1 em,
.banner h2 em,
.banner h3 em {
  color: var(--terracotta);
}
.gallery-head p {
  max-width: none;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.tile {
  position: relative;
  overflow: hidden;
  background: #2a2a2a;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.tile:hover img { transform: scale(1.03); }
.tile--a { grid-column: span 5; aspect-ratio: 4 / 5; }
.tile--b { grid-column: span 7; aspect-ratio: 5 / 4; }
.tile--c { grid-column: span 4; aspect-ratio: 4 / 5; }
.tile--d { grid-column: span 4; aspect-ratio: 4 / 5; }
.tile--e { grid-column: span 4; aspect-ratio: 4 / 5; }
@media (max-width: 880px) {
  .gallery-section { padding: 48px 0; }
  .gallery-wrap { padding: 0 20px; }
  .gallery-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e { grid-column: span 12; aspect-ratio: 4 / 5; }
}

/* Horizontal 1:1 strip gallery — full bleed */
.gallery-strip {
  position: relative;
  width: 100%;
}
.strip-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 0 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-tile {
  flex: 0 0 auto;
  /* Fluid tile size (2026-06): grows with the viewport so the gallery
     feels generous on big screens, but is ALWAYS narrower than the
     screen — a neighboring tile stays visible and no single image ever
     spans the full width. */
  width: clamp(280px, 24vw, 420px);
  aspect-ratio: 4 / 5;
  background: #2a2a2a;
  overflow: hidden;
  margin: 0;
  scroll-snap-align: start;
}
.strip-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.strip-tile:hover img { transform: scale(1.04); }
.strip-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--bone);
  border: none;
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.strip-btn:hover { opacity: 1; background: rgba(26, 26, 26, 0.8); transform: translateY(-50%) scale(1.05); }
.strip-prev { left: 20px; }
.strip-next { right: 20px; }
@media (max-width: 720px) {
  .strip-tile { width: min(72vw, 340px); }
  .strip-btn { font-size: 28px; width: 40px; height: 40px; }
  .strip-prev { left: 12px; }
  .strip-next { right: 12px; }
}

/* ---------- Landing-page galleries: align to the page column ----------
   On the homepage, both the Recent-work strip and any seamless custom
   gallery used to run edge-to-edge (full viewport), while every other
   section sits in the 1280px column with 32px side padding. That made the
   page feel inconsistent. Here we pull both gallery types back to the same
   limits as the rest of the page. Scoped to .page-home so galleries on the
   journal and session pages keep their intentional full-bleed look. */
.page-home .gallery-strip {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
/* Keep the scroll arrows just inside the padded column edge. */
.page-home .gallery-strip .strip-prev { left: 40px; }
.page-home .gallery-strip .strip-next { right: 40px; }

/* Seamless custom galleries break out with width:100vw + negative margins.
   Undo that breakout on the homepage so they line up with the column. */
.page-home .cs-gallery--seamless,
.page-home .cs-gallery--fullbleed,
.page-home .cs-gallery--strip {
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .page-home .gallery-strip,
  .page-home .cs-gallery--seamless,
  .page-home .cs-gallery--fullbleed,
  .page-home .cs-gallery--strip {
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-home .gallery-strip .strip-prev { left: 24px; }
  .page-home .gallery-strip .strip-next { right: 24px; }
}

/* ---------- Studio ---------- */
.studio {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
  max-width: none;
  margin: 0 auto;
  padding: 96px 32px;
}
.studio-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 16px 0 28px;
}
.studio-text h2 em { font-style: italic; color: var(--terracotta); }
.studio-text p {
  font-size: 17px;
  line-height: 1.7;
  max-width: none;
  opacity: 0.86;
  margin: 0 0 18px;
}
.studio-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.fact .label { display: block; margin-bottom: 6px; }
.fact .val { font-size: 17px; font-style: italic; }
.studio-image {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  /* Was var(--linen) — a warm gray that flashed under the image
     when transform:scale + a wider-than-5/4 source briefly left
     a gap on first paint. Black behind the image is invisible
     when the photo is dark and matches the studio backdrop in
     most uploads. */
  background: #000;
}
.studio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
@media (max-width: 880px) {
  .studio { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- About ---------- */
.about {
  max-width: none;
  margin: 0 auto;
  padding: 80px 32px;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 12px 0 22px;
  max-width: none;
}
.about-text h2 em { font-style: italic; color: var(--terracotta); }
.about-text p {
  font-size: 17px;
  line-height: 1.7;
  max-width: none;
  opacity: 0.86;
  margin: 0 0 16px;
}
.about-media {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 110px;
}
.about-portrait {
  aspect-ratio: 5 / 4;
  width: 100%;
  background: var(--linen);
  overflow: hidden;
  position: relative;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
/* The img sits empty until content-loader writes a src from
   about.portrait. While empty (no src attribute, src=""), hide it so
   the placeholder behind shows through. As soon as it has a real
   src, the img covers the placeholder. */
.about-portrait img:not([src]),
.about-portrait img[src=""] {
  display: none;
}
.about-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: repeating-linear-gradient(45deg, var(--linen) 0 14px, rgba(201, 195, 181, 0.7) 14px 28px);
}
.about-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.about-meta .fact .label { display: block; margin-bottom: 6px; }
.about-meta .fact .val { font-size: 17px; font-style: italic; }
@media (max-width: 880px) {
  .about { padding: 56px 20px; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-media { position: relative; top: auto; }
}

/* ---------- Journal preview (homepage) ---------- */
.journal-preview {
  max-width: none;
  margin: 0 auto;
  padding: 80px 32px;
}
.journal-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 36px;
}
.journal-preview-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 10px 0 0;
  max-width: none;
}
.journal-preview-head h2 em { font-style: italic; color: var(--terracotta); }
.journal-preview-head .see-all {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.85;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.journal-preview-head .see-all:hover { color: var(--terracotta); border-color: var(--terracotta); }
.journal-preview-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.journal-preview-card .post-thumb {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--linen);
}
.journal-preview-card .post-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.journal-preview-card:hover .post-thumb img { transform: scale(1.02); }
.journal-preview-card .post-meta {
  display: flex;
  gap: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.journal-preview-card .post-cat { color: var(--terracotta); }
.journal-preview-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.journal-preview-card h3 em { font-style: italic; color: var(--terracotta); }
.journal-preview-card p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.82;
  margin: 0 0 20px;
  max-width: none;
}
.journal-preview-card .post-cta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.journal-preview-card .post-cta:hover { color: var(--terracotta); }
@media (max-width: 880px) {
  .journal-preview { padding: 56px 20px; }
  .journal-preview-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .journal-preview-card { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Journal index page ---------- */
.journal-head {
  max-width: none;
  margin: 0 auto;
  padding: 80px 32px 48px;
  text-align: center;
}
.journal-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 16px auto 20px;
  max-width: none;
}
.journal-head h1 em { font-style: italic; color: var(--terracotta); }
.journal-head p {
  font-size: 18px;
  line-height: 1.6;
  max-width: none;
  opacity: 0.8;
  margin: 0 auto;
}
/* Justify the post copy in the listing. */
.journal-list .post-body p,
.journal-list .post-row p { text-align: justify; }
.journal-grid {
  max-width: none;
  margin: 0 auto;
  padding: 48px 32px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 40px;
}
/* ----- Journal list (strip view) ----- */
.journal-list {
  max-width: none;
  margin: 0 auto;
  padding: 40px 32px 80px;
  display: flex;
  flex-direction: column;
}
.post-row {
  display: block;
  border-top: 1px solid var(--rule);
  padding: 36px 0;
  text-decoration: none;
  color: inherit;
}
.post-row:last-child { border-bottom: 1px solid var(--rule); }
.post-row .post-link {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.post-row > .post-thumb,
.post-row > .post-body {
  /* placeholder rows don't use a link wrapper */
}
.post-row--placeholder {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  opacity: 0.7;
  pointer-events: none;
}
.post-row--featured { background: transparent; }
.post-row--featured .post-link h2 { font-size: clamp(28px, 3vw, 40px); }
.post-row .post-thumb { aspect-ratio: 5 / 4; }

.post-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.post-card .post-link {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.post-card--featured { grid-column: 1 / -1; }
.post-card--featured .post-link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.post-thumb {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--linen);
}
.post-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.post-card:hover .post-thumb img { transform: scale(1.03); }
.post-thumb--empty {
  background: repeating-linear-gradient(45deg, var(--linen) 0 14px, rgba(201, 195, 181, 0.7) 14px 28px);
}
.post-body { display: flex; flex-direction: column; gap: 12px; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-cat { color: var(--terracotta); }
.post-card h2,
.post-card h3,
.post-row h2,
.post-row h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.post-card h2,
.post-row h2 {
  font-size: clamp(26px, 2.8vw, 36px);
}
.post-card h3,
.post-row h3 {
  font-size: clamp(20px, 2vw, 26px);
}
.post-card h2 em,
.post-card h3 em,
.post-row h2 em,
.post-row h3 em { font-style: italic; color: var(--terracotta); }
.post-card p,
.post-row p {
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.8;
  margin: 4px 0 0;
  max-width: none;
}
.post-card .post-cta,
.post-row .post-cta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}
.post-card:hover .post-cta,
.post-row:hover .post-cta { color: var(--terracotta); }
.post-row:hover .post-thumb img { transform: scale(1.03); }
.post-card--placeholder {
  opacity: 0.7;
  pointer-events: none;
}
@media (max-width: 880px) {
  .journal-head { padding: 56px 20px 32px; }
  .journal-grid { grid-template-columns: 1fr; padding: 32px 20px 64px; gap: 40px; }
  .post-card--featured .post-link { grid-template-columns: 1fr; gap: 20px; }
  .journal-list { padding: 24px 20px 56px; }
  .post-row { padding: 28px 0; }
  .post-row .post-link,
  .post-row--placeholder { grid-template-columns: 1fr; gap: 18px; }
  .post-row .post-thumb { aspect-ratio: 16 / 10; }
}

/* ---------- Journal article ---------- */
.post-article {
  max-width: none;
  margin: 0 auto;
  padding: 64px 24px 48px;
}
.post-article-head { margin-bottom: 36px; }
.post-article-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 18px 0 24px;
}
.post-article-head h1 em { font-style: italic; color: var(--terracotta); }
.post-article-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-article-hero {
  max-width: none;
  margin: 0 auto 48px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--linen);
}
.post-article-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-article-body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
}
.post-article-body .lede {
  font-size: 22px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  opacity: 0.92;
  margin: 0 0 28px;
}
.post-article-body p {
  margin: 0 0 22px;
  opacity: 0.88;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.post-article-body .lede {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.post-article-body em { color: var(--terracotta); font-style: italic; }
.post-inline-figure {
  margin: 40px 0 40px;
  padding: 0;
}
.post-inline-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  background: var(--linen);
}
.post-inline-figure--wide img {
  aspect-ratio: 16 / 7;
}
.post-inline-figure figcaption {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
  padding: 10px 0 0;
  font-style: italic;
}
.post-article-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 44px 0 16px;
}
.post-article-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  margin: 28px 0 10px;
  font-style: italic;
}
.post-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 40px 0 28px;
}
.post-cta-line {
  font-size: 17px;
  color: var(--ink);
  opacity: 0.88;
}
.post-cta-line a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.post-cta-line a:hover { color: var(--terracotta); border-color: var(--terracotta); }
.journal-related {
  max-width: none;
  margin: 0 auto;
  padding: 40px 32px 96px;
  border-top: 1px solid var(--rule);
}
.journal-related .label { display: block; margin-bottom: 28px; }
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 880px) {
  .post-article { padding: 48px 20px 32px; }
  .post-article-body { font-size: 17px; }
  .post-article-body .lede { font-size: 19px; }
  .journal-related { padding: 32px 20px 64px; }
  .related-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Banner ---------- */
.banner {
  background: var(--ink);
  color: var(--bone);
  padding: 96px 32px;
  text-align: center;
}
.banner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.banner h2 em { font-style: italic; color: var(--terracotta); }
.banner p {
  font-size: 17px;
  opacity: 0.78;
  margin: 0 0 32px;
}
.banner .btn {
  border-color: var(--bone);
  color: var(--bone);
}
.banner .btn:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

/* ---------- Footer ---------- */
footer {
  background: var(--bone);
  border-top: 1px solid var(--rule);
  padding: 64px 32px 32px;
}
.footer-inner {
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.footer-endorsement svg,
.footer-endorsement-img {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
}
/* Light/dark swap for the footer endorsement lockup */
.footer-endorsement-dark { display: none; }
:root[data-theme="dark"] .footer-endorsement-light { display: none; }
:root[data-theme="dark"] .footer-endorsement-dark { display: block; }
/* Collective-only footer mark used on customer pages where the
   parent-brand attribution has been trimmed. Reads as a quiet
   serif tagline instead of the visual MLP endorsement. */
.footer-collective {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.footer-collective .footer-collective-mark {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.footer-collective .footer-collective-mark .accent { color: var(--terracotta); }
.footer-collective .footer-collective-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 500;
}
.footer-col a, .footer-col span {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--ink);
  opacity: 0.85;
}
.footer-col a:hover { color: var(--terracotta); opacity: 1; }
.footer-col .footer-areas {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  opacity: 0.7;
  margin: 2px 0 6px;
}
.footer-bottom {
  max-width: none;
  margin: 24px auto 0;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  flex-wrap: wrap;
}
.footer-bottom .links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom .links a { white-space: nowrap; }
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-endorsement { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
  /* Phones don't have room for 8 links across — let them stack into rows
     of two/three with no flex squeeze. row-gap separates wraps from the
     horizontal column-gap. */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bottom .links { gap: 12px 16px; row-gap: 8px; }
}

/* ---------- Rule ---------- */
.rule-line {
  height: 1px;
  background: var(--rule);
  margin: 0 auto;
  max-width: none;
}

/* ================================================ */
/* ======== Session detail page styles ============ */
/* ================================================ */

.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 64px;
  max-width: none;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.detail-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--linen);
  position: sticky;
  top: 92px;
}
.detail-img > img { width: 100%; height: 100%; object-fit: cover; }
.detail-img .carousel { max-width: none; margin: 0; }
.detail-img .carousel-frame { aspect-ratio: 1 / 1; background: var(--linen); }
.detail-img .carousel-dots { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; }
.detail-img .carousel-dot { border-color: rgba(244, 239, 230, 0.8); }
.detail-img .carousel-dot.is-active { background: var(--terracotta); border-color: var(--terracotta); }

.detail-info .crumb {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.detail-info .crumb a { color: var(--muted); }
.detail-info .crumb a:hover { color: var(--ink); }

.detail-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.detail-title em { font-style: italic; color: var(--terracotta); }
.detail-price {
  font-family: var(--serif);
  font-size: 36px;
  margin: 0 0 6px;
}
.detail-price .cur {
  font-size: 18px;
  vertical-align: 10px;
  margin-right: 2px;
  opacity: 0.75;
}
.detail-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}
.detail-lede {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 32px;
  opacity: 0.88;
}
.detail-section-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 40px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.included {
  list-style: none;
  margin: 0;
  padding: 0;
}
.included li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  gap: 14px;
}
.included li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  margin-top: 10px;
  flex-shrink: 0;
}

/* Customize block */
.customize {
  max-width: none;
  margin: 0 auto;
  padding: 32px 32px 44px;
}
.customize h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
}
.customize h2 em { font-style: italic; color: var(--terracotta); }
.customize .intro {
  font-size: 17px;
  line-height: 1.65;
  opacity: 0.85;
  max-width: none;
  margin: 0 0 28px;
}

.option-group {
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.option-group:last-of-type { border-bottom: 1px solid var(--rule); }
.option-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 16px;
}
.option-title h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}
.option-title h3 em { font-style: italic; color: var(--terracotta); }
.option-title .note {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.option-desc {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.75;
  margin: 0 0 20px;
  max-width: none;
}

/* Background swatches */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 14px;
}
/* Scoped to label.swatch because the public site's tile-picker
   pattern uses <label class="swatch"> with a hidden radio. The
   admin site editor reuses the class on <button class="swatch"> for
   color tiles — those have their own dimensions and shouldn't get
   the public block layout. */
label.swatch input { position: absolute; opacity: 0; pointer-events: none; }
label.swatch {
  position: relative;
  display: block;
  cursor: pointer;
}
.swatch .chip {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--rule);
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}
.swatch input:checked + .chip {
  border-color: var(--terracotta);
  transform: scale(1.02);
}
.swatch input:checked + .chip::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--terracotta);
}
.swatch .name {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 8px;
  opacity: 0.8;
}

/* Prop tiles. Min column width sized so the longest prop name
   ("Unbranded books") fits beside the 60px icon without wrapping
   mid-word ("Unbrande/d"). */
.props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
/* Prop preview image — sits to the LEFT of the text. Rectangular framing,
   matching the rectangular prop tile. Only applies to props that have an
   uploaded image (prop--has-img); text-only props keep the original block
   layout. */
label.prop.prop--has-img .prop-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prop-img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #efe9df;
}
.prop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prop--has-img .prop-text { min-width: 0; }
/* Defeat the body-level overflow-wrap:break-word inside prop names so a
   name like "Unbranded books" wraps between words, never inside one. */
.prop--has-img .prop-text .name {
  display: block;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Scoped to label.prop because the public tile pattern uses
   <label class="prop">. The admin newsletter and blog editors reuse the
   class name on <div class="prop"> with REAL color/range/text inputs
   that must remain visible and clickable. Without this scope the global
   rule was hiding every admin Style picker. */
label.prop input { position: absolute; opacity: 0; pointer-events: none; }
/* Tile chrome is scoped to label.prop so admin <div class="prop">
   form rows in newsletter / blog editor stay neutral and don't
   inherit the public site's terracotta-bordered card style. */
label.prop {
  position: relative;
  cursor: pointer;
  border: 1.5px solid var(--rule);
  padding: 18px 16px;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
  background: transparent;
  display: block;
}
label.prop input:checked ~ .prop-inner {
  color: var(--terracotta);
}
label.prop:has(input:checked) {
  border-color: var(--terracotta);
  background: rgba(168, 87, 44, 0.05);
}
.prop-inner .name {
  font-family: var(--serif);
  font-size: 17px;
}
.prop-inner .sub {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* File upload */
.upload {
  border: 1.5px dashed var(--rule);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: block;
}
.upload:hover { border-color: var(--ink); background: rgba(26,26,26,0.02); }
.upload input { display: none; }
.upload .prompt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
}
.upload .sub {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.upload .filename {
  display: none;
  font-family: var(--serif);
  font-style: italic;
  color: var(--cypress);
  margin-top: 6px;
}

/* Add-ons */
.addons {
  display: grid;
  gap: 0;
}
.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.addon:last-child { border-bottom: none; }
.addon input[type="checkbox"] { margin: 0 16px 0 0; width: 16px; height: 16px; accent-color: var(--terracotta); flex-shrink: 0; }
.addon-main { flex: 1; }
.addon-main .name { font-family: var(--serif); font-size: 17px; }
.addon-main .desc { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.addon-price { font-family: var(--serif); font-size: 17px; margin-left: 16px; opacity: 0.85; }

/* Addon stepper (additional images) */
.addon--stepper { cursor: default; }
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 18px;
}
.stepper-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.stepper-btn:hover { border-color: var(--ink); }
.stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stepper-count {
  font-family: var(--serif);
  font-size: 17px;
  min-width: 14px;
  text-align: center;
}
.addon-note {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s, max-height 0.25s, margin 0.25s;
}
.addon-note a { color: var(--terracotta); border-bottom: 1px solid var(--terracotta); }
.addon-note.is-visible { opacity: 1; max-height: 60px; }

/* Summary */
.summary {
  margin-top: 40px;
  padding: 28px 0 0;
  border-top: 2px solid var(--ink);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 15px;
}
.summary-line.total {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 24px;
}
.summary-line.total .amt { color: var(--terracotta); font-style: italic; }
.summary-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.summary-actions .btn { flex: 1; min-width: 180px; justify-content: center; }
.summary-note {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 16px;
  text-align: center;
}

@media (max-width: 880px) {
  .detail-hero { grid-template-columns: 1fr; gap: 40px; }
  .detail-img { position: relative; top: auto; max-width: 520px; }
}

/* ================================================ */
/* ======== Carousel gallery ====================== */
/* ================================================ */
.carousel {
  position: relative;
  max-width: none;
  margin: 0 auto;
}
.carousel-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #2a2a2a;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--bone);
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: color 0.2s, transform 0.2s, opacity 0.2s;
  z-index: 2;
  opacity: 0.85;
}
.carousel-btn:hover {
  color: var(--bone);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(201, 195, 181, 0.55);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.carousel-dot.is-active {
  background: var(--terracotta);
  border-color: var(--terracotta);
}
.carousel-caption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen);
  opacity: 0.75;
  text-align: center;
  margin-top: 14px;
}
@media (max-width: 560px) {
  .carousel-btn { width: 34px; height: 34px; font-size: 36px; }
  .carousel-prev { left: 6px; }
  .carousel-next { right: 6px; }
}

/* ================================================ */
/* ======== Admin / edit mode ===================== */
/* ================================================ */
/* SC5 — admin link in the footer should match the photographer-login link's
   casing and hover treatment. Drops the uppercase / wide letter-spacing and
   shares the same hover behavior as the rest of the footer links. */
.admin-link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--muted);
  opacity: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}
.admin-link:hover { color: var(--terracotta); }
/* Apply the same hover to other footer links so the row reads consistently. */
.footer-bottom .links a { color: var(--muted); transition: color 0.2s; }
.footer-bottom .links a:hover { color: var(--terracotta); }

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.admin-modal-overlay.is-open { display: flex; }
.admin-modal {
  background: var(--bone);
  padding: 40px 40px 32px;
  max-width: 360px;
  width: 90%;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(26,26,26,0.25);
}
.admin-modal h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 8px;
}
.admin-modal h3 em { font-style: italic; color: var(--terracotta); }
.admin-modal p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}
.admin-modal input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 16px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.admin-modal input[type="password"]:focus { border-color: var(--ink); }
.admin-modal .admin-error {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--terracotta);
  margin: -6px 0 12px;
  min-height: 14px;
  letter-spacing: 0.1em;
}
.admin-modal .actions { display: flex; gap: 10px; margin-top: 8px; }
.admin-modal .actions .btn { flex: 1; padding: 12px 14px; font-size: 11px; justify-content: center; }

/* Edit mode toolbar and chrome */
body.edit-mode { padding-bottom: 60px; }
.edit-toolbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bone);
  padding: 12px 16px;
  display: none;
  gap: 10px;
  align-items: center;
  z-index: 999;
  border: 1px solid var(--ink);
  box-shadow: 0 10px 40px rgba(26,26,26,0.3);
}
body.edit-mode .edit-toolbar { display: flex; }
.edit-toolbar .status {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-right: 4px;
}
.edit-toolbar button {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--linen);
  color: var(--bone);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.edit-toolbar button:hover { background: var(--bone); color: var(--ink); }
.edit-toolbar button.primary { background: var(--terracotta); border-color: var(--terracotta); }
.edit-toolbar button.primary:hover { background: var(--bone); color: var(--terracotta); }

/* Editable elements while in edit mode */
body.edit-mode [data-editable] {
  outline: 1px dashed rgba(168, 87, 44, 0.45);
  outline-offset: 4px;
  cursor: text;
}
body.edit-mode [data-editable]:focus {
  outline: 1px solid var(--terracotta);
  background: rgba(168, 87, 44, 0.06);
}

/* Section visibility toggles */
.section-toggle {
  display: none;
}
body.edit-mode [data-section] {
  position: relative;
}
body.edit-mode [data-section] > .section-toggle {
  display: inline-flex;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--bone);
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s;
}
body.edit-mode [data-section] > .section-toggle:hover {
  opacity: 1;
  background: var(--terracotta);
}
body.edit-mode [data-section].is-hidden {
  opacity: 0.35;
  outline: 1px dashed var(--rule);
}
body.edit-mode [data-section].is-hidden > .section-toggle { background: var(--terracotta); }
body:not(.edit-mode) [data-section].is-hidden { display: none; }

/* ================================================ */
/* ======== Popup / modal (user-triggered) ======== */
/* ================================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 800;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.popup-overlay.is-open { display: flex; }
.popup {
  background: var(--bone);
  padding: 48px 40px 36px;
  max-width: 440px;
  width: 90%;
  border: 1px solid var(--rule);
  position: relative;
}
.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.popup-close:hover { color: var(--ink); }
.popup h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 12px;
}
.popup h3 em { font-style: italic; color: var(--terracotta); }
.popup p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0 0 24px;
}

/* ================================================ */
/* ======== Mobile and tablet polish ============== */
/* ================================================ */

/* Prevent iOS from zooming when focusing an input: inputs must be 16px+.
   Includes time/datetime so the zelle-intent and photographer-dashboard
   block-time pickers don't zoom either.
   !important here defeats local page styles like .join-field input
   that set 14px and override this otherwise — accessibility-critical
   so it should always win. */
@media (max-width: 720px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Tablet breakpoint between mobile (720) and desktop */
@media (min-width: 721px) and (max-width: 1024px) {
  .section { padding: 72px 28px; }
  .nav-inner { padding: 16px 28px; }
}

/* Touch targets — ensure 44×44 on small screens where we have pill chips.
   Was 14px padding which left the .btn at ~43px tall — barely under the
   iOS HIG floor. Bump to 15px so it lands at ~46px. */
@media (max-width: 560px) {
  .btn { padding: 15px 22px; font-size: 11px; min-height: 44px; box-sizing: border-box; }
  .btn--block { padding: 16px 22px; }
  /* Stack CTA groups */
  .hero-text .btn, .packages .btn { width: 100%; justify-content: center; }
}

/* Safe area insets for iPhones with notches */
@supports (padding: env(safe-area-inset-bottom)) {
  .nav-inner { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .section { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Footer subscribe widget
   ============================================================ */
.footer-subscribe .nl-subscribe {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  max-width: 320px;
}
.footer-subscribe .nl-subscribe input[type="email"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
}
.footer-subscribe .nl-subscribe button {
  padding: 12px 16px;
  min-height: 44px;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.footer-subscribe .nl-subscribe button:hover { background: var(--terracotta); }
.footer-subscribe .nl-subscribe-status {
  display: block;
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
  font-style: italic;
  color: var(--muted);
}
.footer-subscribe .nl-subscribe-status.success { color: #3b7a3b; }
.footer-subscribe .nl-subscribe-status.error { color: #c1272d; }
:root[data-theme="dark"] .footer-subscribe .nl-subscribe input {
  background: #1E1E1E;
  border-color: rgba(244,239,230,0.16);
  color: var(--ink);
}
:root[data-theme="dark"] .footer-subscribe .nl-subscribe button {
  background: var(--terracotta);
  color: var(--bone);
}

/* ============================================================
   Cal.com embed chrome overrides — hide the brand footer / link
   that appears below the booking widget so the calendar feels
   native to the site. Works only for elements in the host page;
   internal shadow-DOM chrome can only be styled via cssVarsPerTheme.
   ============================================================ */
[id^="cal-inline-"] .cal-embed-footer,
[id^="cal-inline-"] [class*="branding"],
[id^="cal-inline-"] [data-testid="branding"],
[id^="cal-inline-"] a[href*="cal.com/?date"] {
  display: none !important;
}
[id^="cal-inline-"] {
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   Unavailable date fallback — small inline contact form shown
   under each session page's Cal.com embed. Email only.
   ============================================================ */
.date-request {
  max-width: 640px;
  margin: 14px auto 0;
  padding: 18px 22px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--terracotta);
  border-radius: 6px;
  background: rgba(168, 87, 44, 0.04);
}
.date-request h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}
.date-request h3 em { color: var(--terracotta); font-style: italic; }
.date-request p.dr-lede {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
/* SC8: 5 inputs side-by-side made every field unreadable. Switched to a
   flex row that wraps at minimum widths so each input gets enough space
   to actually read its label. Submit button hugs the right end on the
   final row when there's room. */
.date-request .dr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.date-request .dr-row > input {
  flex: 1 1 180px;
  min-width: 0;
}
.date-request .dr-row > input.dr-date {
  flex: 1 1 160px;
}
.date-request .dr-submit {
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .date-request .dr-row > input,
  .date-request .dr-row > input.dr-date,
  .date-request .dr-submit { flex-basis: 100%; }
}
.date-request input[type="text"],
.date-request input[type="email"],
.date-request input[type="tel"],
.date-request input[type="date"] {
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 15px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
  width: 100%;
}
.date-request button {
  padding: 14px 18px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.date-request button:hover { background: var(--terracotta); }
.date-request button:disabled { opacity: 0.5; cursor: not-allowed; }
.date-request .dr-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.date-request .dr-status { margin: 10px 0 0; font-size: 13px; display: none; }
.date-request .dr-status.success { display: block; color: #3b7a3b; }
.date-request .dr-status.error { display: block; color: #c1272d; }

:root[data-theme="dark"] .date-request { background: rgba(168, 87, 44, 0.1); }
:root[data-theme="dark"] .date-request input { background: #1E1E1E; border-color: rgba(244, 239, 230, 0.12); color: var(--ink); }
:root[data-theme="dark"] .date-request button { background: var(--terracotta); color: var(--bone); }
:root[data-theme="dark"] .date-request button:hover { background: var(--bone); color: var(--ink); }

/* Offline payment link — sits directly under the Cal.com embed so
   non-techy clients can route to a direct email-based booking before
   they ever bump into the date-request fallback. Slightly bumped
   font + breathing room so it reads as a real second option, not
   buried fine print. */
.offline-pay-link {
  margin: 8px auto 0;
  max-width: 640px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  padding: 10px 16px;
  background: rgba(168, 87, 44, 0.06);
  border: 1px solid rgba(168, 87, 44, 0.18);
  border-radius: 4px;
}
.offline-pay-link a {
  color: var(--terracotta);
  text-decoration: underline;
  font-weight: 600;
}
.offline-pay-link a:hover { color: var(--terracotta-deep); }
:root[data-theme="dark"] .offline-pay-link {
  color: rgba(244, 239, 230, 0.78);
  background: rgba(201, 122, 74, 0.08);
  border-color: rgba(201, 122, 74, 0.28);
}
:root[data-theme="dark"] .offline-pay-link a { color: #C97A4A; }

/* ----------------------------------------------------------------
   Date request modal — opens after the inline form submits and
   collects the rest of the visitor's details. A second thank-you
   modal follows submission. Both modals share .dr-modal-overlay.
   ---------------------------------------------------------------- */
body.dr-modal-open { overflow: hidden; }

.dr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: drFadeIn 0.18s ease-out;
}
.dr-modal-overlay.is-closing { animation: drFadeOut 0.18s ease-out forwards; }

@keyframes drFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drFadeOut { from { opacity: 1; } to { opacity: 0; } }

.dr-modal-card {
  position: relative;
  background: var(--bone, #F4EFE6);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.28);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
  color: var(--ink, #1A1A1A);
  animation: drCardIn 0.22s ease-out;
}
@keyframes drCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dr-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted, #6B6760);
  cursor: pointer;
  /* 44×44 touch target so close is comfortable on phones. */
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.dr-modal-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

.dr-modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta, #A8572C);
  margin: 0 0 6px;
  font-weight: 600;
}
.dr-modal-title {
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.dr-modal-title em { color: var(--terracotta, #A8572C); font-style: italic; }
.dr-modal-lede {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted, #6B6760);
  line-height: 1.5;
}

.dr-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
}
@media (max-width: 540px) {
  .dr-modal-grid { grid-template-columns: 1fr; }
}
.dr-modal-field { display: flex; flex-direction: column; gap: 4px; }
.dr-modal-field--full { grid-column: 1 / -1; }
.dr-modal-field span {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted, #6B6760);
  font-weight: 600;
}
.dr-modal-optional { font-weight: 400; color: var(--muted, #6B6760); letter-spacing: 0; text-transform: none; }
.dr-modal-field input,
.dr-modal-field textarea {
  background: #FFFFFF;
  border: 1px solid var(--rule, #E5DFD3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink, #1A1A1A);
  width: 100%;
}
.dr-modal-field input:focus,
.dr-modal-field textarea:focus {
  outline: none;
  border-color: var(--terracotta, #A8572C);
  box-shadow: 0 0 0 3px rgba(168, 87, 44, 0.15);
}
.dr-modal-field textarea { resize: vertical; min-height: 72px; }

.dr-modal-status {
  margin: 14px 0 0;
  font-size: 13px;
  min-height: 18px;
  color: var(--muted, #6B6760);
}
.dr-modal-status.error { color: #c1272d; }

.dr-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.dr-modal-actions--center { justify-content: center; }
.dr-modal-cancel,
.dr-modal-submit {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dr-modal-cancel {
  background: transparent;
  border-color: var(--rule, #E5DFD3);
  color: var(--ink, #1A1A1A);
}
.dr-modal-cancel:hover { background: rgba(0, 0, 0, 0.04); }
.dr-modal-submit {
  background: var(--ink, #1A1A1A);
  color: var(--bone, #F4EFE6);
  border-color: var(--ink, #1A1A1A);
}
.dr-modal-submit:hover { background: var(--terracotta, #A8572C); border-color: var(--terracotta, #A8572C); }
.dr-modal-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Thank-you variant */
.dr-modal-card--thanks { text-align: center; padding-top: 32px; }
.dr-thanks-mark {
  display: inline-flex;
  margin: 0 auto 12px;
  color: var(--terracotta, #A8572C);
}
.dr-thanks-body {
  font-size: 14px;
  color: var(--ink, #1A1A1A);
  line-height: 1.55;
  margin: 0 auto 12px;
  max-width: 440px;
}
.dr-thanks-body--muted { color: var(--muted, #6B6760); font-size: 13px; }
.dr-thanks-body a { color: var(--terracotta, #A8572C); text-decoration: underline; }
.dr-thanks-continue { padding: 10px 28px; }
.dr-thanks-timer {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6B6760);
}

/* Dark mode */
:root[data-theme="dark"] .dr-modal-card {
  background: #1E1E1E;
  color: var(--ink, #F4EFE6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .dr-modal-close { color: rgba(244, 239, 230, 0.65); }
:root[data-theme="dark"] .dr-modal-close:hover { background: rgba(244, 239, 230, 0.08); color: var(--bone, #F4EFE6); }
:root[data-theme="dark"] .dr-modal-field input,
:root[data-theme="dark"] .dr-modal-field textarea {
  background: #141414;
  border-color: rgba(244, 239, 230, 0.14);
  color: var(--bone, #F4EFE6);
}
:root[data-theme="dark"] .dr-modal-cancel { color: var(--bone, #F4EFE6); border-color: rgba(244, 239, 230, 0.22); }
:root[data-theme="dark"] .dr-modal-cancel:hover { background: rgba(244, 239, 230, 0.06); }
:root[data-theme="dark"] .dr-modal-submit { background: var(--terracotta, #A8572C); color: var(--bone, #F4EFE6); border-color: var(--terracotta, #A8572C); }
:root[data-theme="dark"] .dr-modal-submit:hover { background: var(--bone, #F4EFE6); color: var(--ink, #1A1A1A); border-color: var(--bone, #F4EFE6); }

/* ----------------------------------------------------------------
   Layout & spacing — driven by the site editor's Layout panel.
   Every rule here uses a CSS variable with a sensible fallback so
   the site renders correctly even when the CMS row is missing.
   ---------------------------------------------------------------- */

/* Soften every visible 1px rule when --divider-opacity drops below 1.
   Targets the most common border colors in the codebase. */
:root { --divider-opacity: 1; }
.section + .section,
hr,
.divider,
.section-divider {
  opacity: var(--divider-opacity, 1);
}

/* Media alignment overrides for sections that have side-by-side text + image.
   The default layout is set per section; these classes let the editor force
   a different alignment globally. */
body.layout-media-left .text-image,
body.layout-media-left .studio-grid,
body.layout-media-left .feature-grid { flex-direction: row; }
body.layout-media-right .text-image,
body.layout-media-right .studio-grid,
body.layout-media-right .feature-grid { flex-direction: row-reverse; }
body.layout-media-center .text-image,
body.layout-media-center .studio-grid,
body.layout-media-center .feature-grid {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Section effects (toggled from the Layout panel). */
body.layout-fx-fade-in .section {
  opacity: 0;
  transform: translateY(12px);
  animation: thc-fade-in 0.6s ease forwards;
  animation-delay: 0.1s;
}
@keyframes thc-fade-in {
  to { opacity: 1; transform: none; }
}
body.layout-fx-parallax #hero img,
body.layout-fx-parallax .hero img {
  will-change: transform;
  transition: transform 0.4s ease-out;
}
body.layout-fx-parallax #hero:hover img,
body.layout-fx-parallax .hero:hover img {
  transform: scale(1.04);
}
body.layout-fx-hover-lift .package-card,
body.layout-fx-hover-lift .card,
body.layout-fx-hover-lift .pkg-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.layout-fx-hover-lift .package-card:hover,
body.layout-fx-hover-lift .card:hover,
body.layout-fx-hover-lift .pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

/* PER-SECTION effects. The site editor toggles these classes on an individual
   [data-section] element (not body), so they need their own rules. Fade-in is
   driven by a reveal class added when the section scrolls into view (see
   content-loader). The .thc-fx-init guard means: if JS never runs, the section
   is never left invisible. */
[data-section].layout-fx-fade-in { transition: opacity 0.6s ease, transform 0.6s ease; }
[data-section].layout-fx-fade-in.thc-fx-init { opacity: 0; transform: translateY(16px); }
[data-section].layout-fx-fade-in.thc-fx-init.thc-revealed { opacity: 1; transform: none; }

[data-section].layout-fx-parallax img { will-change: transform; transition: transform 0.5s ease-out; }
[data-section].layout-fx-parallax img:hover { transform: scale(1.04); }

[data-section].layout-fx-hover-lift .package-card,
[data-section].layout-fx-hover-lift .card,
[data-section].layout-fx-hover-lift .pkg-card,
[data-section].layout-fx-hover-lift .fact,
[data-section].layout-fx-hover-lift figure {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-section].layout-fx-hover-lift .package-card:hover,
[data-section].layout-fx-hover-lift .card:hover,
[data-section].layout-fx-hover-lift .pkg-card:hover,
[data-section].layout-fx-hover-lift .fact:hover,
[data-section].layout-fx-hover-lift figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

/* iOS Safari auto-zooms in on inputs whose computed font-size resolves
   below 16px and frequently doesn't zoom back out cleanly — perceived as
   a stuck "zoomed-out" page. Lock every text-like input to 16px on
   small viewports so the focus zoom never fires. Customer-facing forms
   only — admin and photographer pages have the same rule scoped to
   their wrappers. */
@media (max-width: 760px) {
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
   Landing-page breathing room (2026-06). The full-width pass
   left the home sections 32px from the viewport edge, which
   reads "attached to the corners". Every landing section gets
   a wider, fluid gutter; the nav header intentionally keeps
   its original 32px. Scoped to .page-home so the session,
   journal, and admin pages are untouched.
   ============================================================ */
.section,
.positioning,
.packages-head,
.packages,
.process,
.audience,
.gallery-wrap,
.studio,
.about,
.journal-preview,
.banner,
.cs-section,
.detail-hero,
.customize,
.journal-head,
.journal-grid,
.journal-list,
.post-article,
.post-article-hero,
.journal-related {
  /* !important: the site editor saved per-section side paddings years-old
     20-24px values as inline styles; the gutter must win over those. Top
     and bottom paddings from the editor still apply. */
  padding-left: clamp(48px, 10vw, 220px) !important;
  padding-right: clamp(48px, 10vw, 220px) !important;
}
/* The work gallery is the one full-bleed moment on the page: the strip
   runs edge to edge with no gutter at all. */
.gallery-strip .strip-track {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 720px) {
  .section,
  .positioning,
  .packages-head,
  .packages,
  .process,
  .audience,
  .gallery-wrap,
  .studio,
  .about,
  .journal-preview,
  .banner,
  .cs-section,
  .detail-hero,
  .customize,
  .journal-head,
  .journal-grid,
  .journal-list,
  .post-article,
  .post-article-hero,
  .journal-related {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Banner copy is a centered display moment — override the global
   justified-paragraph rule. */
.banner p { text-align: center; }

/* ============================================================
   Harmony round 3 (2026-06)
   ============================================================ */

/* Hero: tagline and portrait sit closer together as a centered pair
   instead of being pushed to opposite edges of a wide screen. */
.hero {
  grid-template-columns: minmax(0, 640px) minmax(0, 500px);
  justify-content: center;
  gap: clamp(48px, 5vw, 88px);
}
.hero-image { margin-left: 0; }
/* The hero CTA centers under the copy — pinned left it gets lost. */
.hero-text .hero-cta-row { justify-content: center; }

/* Positioning statement reads as a centered manifesto. */
.positioning {
  text-align: center;
  max-width: 980px;
}
.positioning p { text-align: center; }

/* "How a session runs": centered, with more air above and below. */
.process {
  text-align: center;
  max-width: 1120px;
  padding-top: 104px;
  padding-bottom: 88px;
}
.process p { text-align: center; }
/* The audience checklist belongs to the same visual block — same width,
   same centered column, so the checkmarks line up with the copy above. */
.audience {
  max-width: 1120px;
  margin: 0 auto;
}

/* Caps for oversized imagery — frames, not floods. */
.detail-img { max-width: min(40vw, 560px); width: 100%; }
.about-media { max-width: min(36vw, 520px); }
.journal-preview-card .post-thumb { max-width: min(32vw, 440px); width: 100%; }

@media (max-width: 880px) {
  .detail-img { max-width: min(86vw, 460px); margin: 0 auto; }
  .about-media { max-width: min(86vw, 460px); }
  .journal-preview-card .post-thumb { max-width: min(86vw, 460px); margin: 0 auto; }
}
/* Package cards on phones: a centered, framed column instead of a
   screen-swallowing full-width image. */
@media (max-width: 720px) {
  .pkg-card { max-width: 460px; width: 100%; margin: 0 auto; }
}


/* Safety net: a work-strip tile (or its image) can never exceed half the
   viewport, no matter what state the gallery is in — no single image may
   span the screen. */
.strip-tile, .strip-tile img { max-width: min(46vw, 520px); }

/* The centered narrow blocks (manifesto, process, audience) are already
   sized by max-width + auto margins — inside them the big gutter would
   crush the copy, so they keep a modest inner padding. Placed after the
   gutter rule so it wins at equal specificity. */
.positioning, .process, .audience {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* The infinite gallery is the exception to the older .page-home gallery
   containment rules above: it runs hard edge to edge, full bleed, no
   side padding. Higher specificity + later in the file so it wins. */
.page-home .cs-gallery--infinite {
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES (landing page)
   Appended last so they win the cascade — an earlier unconditional
   "Harmony round 3" .hero rule re-declared a 2-column grid and was
   overriding the mobile stack.
   ============================================================ */
@media (max-width: 880px) {
  /* Hero stacks to one column on phones/tablets; portrait sits full-width,
     centered, under the copy instead of in a cramped right column. */
  .hero {
    grid-template-columns: 1fr !important;
    justify-content: stretch;
    gap: 36px;
  }
  .hero-image {
    margin-left: auto;
    margin-right: auto;
    max-width: min(88vw, 460px);
  }
}
@media (max-width: 720px) {
  /* Justified body copy makes big word gaps + hyphenation in a narrow
     column. Left-align body text on phones. Intentionally-centered text
     (.banner, .positioning, dialog bodies) keeps its higher-specificity
     centering, so this only relaxes the justified paragraphs. */
  p,
  .pkg-desc,
  .process p,
  .hero-text p {
    text-align: left;
    text-justify: auto;
    hyphens: none;
  }
}