/* ============================================================
   Lu Canelas Studio — shared design system
   Locked palette: #F4F1E9 / #A08A80 / #665852
   Type: Instrument Serif (display) + Montserrat (body)
   ============================================================ */

:root {
  /* surfaces */
  --bg: #ffffff;
  --surface: #f5f5f5;
  --fg: #665852;
  --muted: #A08A80;
  --accent: #A08A80;
  --on-accent: #F4F1E9;
  --border: rgba(102, 88, 82, 0.18);
  --border-strong: rgba(102, 88, 82, 0.32);
  /* Form feedback — warm clay error tone that belongs to the palette
     (readable, brand-aligned) instead of a harsh generic red. */
  --error: #9c4a37;
  --error-soft: rgba(156, 74, 55, 0.10);
  --error-border: rgba(156, 74, 55, 0.32);
  --shadow-soft: 0 24px 60px -28px rgba(102, 88, 82, 0.22),
    0 2px 8px -4px rgba(102, 88, 82, 0.08);
  --shadow-lift: 0 40px 90px -40px rgba(102, 88, 82, 0.28);

  /* type */
  /* Only Cormorant Garamond + Montserrat are actually loaded (see admin.html /
     index font links). Stack trimmed to loaded face + system fallbacks so the
     token layer never points at a face that was never fetched. */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  color-scheme: light;

  /* rhythm */
  --section-x: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --max-w: 1440px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Always honor the [hidden] attribute — many of our components set a
   non-default display (grid, flex) which otherwise beats the UA rule. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms var(--ease);
}

a:hover {
  opacity: 0.7;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

::selection {
  background: var(--muted);
  color: var(--bg);
}

/* ====== TYPE ====== */

.kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
}

.display {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.96;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.display em {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
}

.section-title {
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.05;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--muted);
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
  color: var(--fg);
}

p {
  max-width: 62ch;
}

/* ====== LAYOUT ====== */

.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--section-x);
}

section {
  padding-block: var(--section-y);
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* ====== NAV ====== */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.25rem var(--section-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: background-color 280ms var(--ease), backdrop-filter 280ms var(--ease), border-color 280ms var(--ease);
  border-bottom: 1px solid transparent;
}

.site-nav.scrolled {
  background: rgba(244, 241, 233, 0.92);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-bottom-color: var(--border);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--fg);
}

.brand-lockup .mark {
  height: 36px;
  width: auto;
  display: block;
}

.brand-lockup .divider-v {
  width: 1px;
  height: 22px;
  background: var(--muted);
}

.brand-lockup .wordmark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  position: relative;
  padding-block: 0.25rem;
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  opacity: 1;
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.nav-cta:hover {
  opacity: 0.92;
}

.nav-cta:active {
  transform: translateY(1px);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.menu-toggle span {
  width: 18px;
  height: 1px;
  background: var(--fg);
  position: relative;
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: var(--fg);
}

.menu-toggle span::before {
  top: -6px;
}

.menu-toggle span::after {
  top: 6px;
}

@media (max-width: 880px) {

  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }
}

/* mobile sheet */
.mobile-sheet {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  padding: 1.25rem var(--section-x) 2rem;
  display: none;
  flex-direction: column;
}

.mobile-sheet.open {
  display: flex;
}

.mobile-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.mobile-sheet .close {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.mobile-sheet ul {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-sheet a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: 1.1;
  font-style: italic;
  color: var(--fg);
}

.mobile-sheet .meta {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ====== BUTTONS ====== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease), background-color 280ms var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  opacity: 0.92;
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  background: rgba(102, 88, 82, 0.04);
  opacity: 1;
}

.btn .arrow {
  display: inline-block;
  transition: transform 220ms var(--ease);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ====== HERO ====== */

.hero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: var(--section-y);
}

.hero-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.hero-text {
  padding-bottom: clamp(1rem, 4vw, 3rem);
}

.hero-text .eyebrow {
  margin-bottom: 1.75rem;
}

.hero-text h1 {
  margin-bottom: 1.75rem;
}

.hero-text .lead {
  margin-bottom: 2.25rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-actions .meta-link {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.hero-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--muted);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease);
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -120px 120px -60px rgba(102, 88, 82, 0.18);
  pointer-events: none;
}

.hero-caption {
  position: absolute;
  inset: auto 1.25rem 1.25rem auto;
  background: rgba(244, 241, 233, 0.92);
  backdrop-filter: blur(8px);
  padding: 0.6rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-image {
    aspect-ratio: 4 / 5;
  }
}

/* ====== SECTION HEADERS ====== */

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head .lead {
  margin: 0;
}

@media (max-width: 880px) {
  .section-head {
    grid-template-columns: 1fr;
  }
}

/* ====== SELECTED WORK (home) ====== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
}

.work-tile {
  display: block;
  overflow: hidden;
  position: relative;
}

.work-tile .ph {
  position: relative;
  overflow: hidden;
  background: var(--muted);
}

.work-tile .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms var(--ease), transform 600ms var(--ease);
}

.work-tile:hover .ph img {
  opacity: 0.96;
  transform: scale(1.015);
}

.work-tile .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(102, 88, 82, 0.08);
}

.work-tile .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1rem;
}

.work-tile h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
  font-style: italic;
}

.work-tile .place {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-tile .intent {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--fg);
  max-width: 44ch;
  opacity: 0.85;
}

/* staggered 12-col layout */
.work-grid .t1 {
  grid-column: 1 / span 7;
}

.work-grid .t1 .ph {
  aspect-ratio: 4 / 5;
}

.work-grid .t2 {
  grid-column: 9 / span 4;
  padding-top: clamp(4rem, 8vw, 8rem);
}

.work-grid .t2 .ph {
  aspect-ratio: 3 / 4;
}

.work-grid .t3 {
  grid-column: 2 / span 4;
}

.work-grid .t3 .ph {
  aspect-ratio: 3 / 4;
}

.work-grid .t4 {
  grid-column: 7 / span 6;
}

.work-grid .t4 .ph {
  aspect-ratio: 16 / 11;
}

.work-grid .t5 {
  grid-column: 1 / span 5;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.work-grid .t5 .ph {
  aspect-ratio: 3 / 4;
}

.work-grid .t6 {
  grid-column: 7 / span 5;
  padding-top: clamp(4rem, 9vw, 8rem);
}

.work-grid .t6 .ph {
  aspect-ratio: 4 / 5;
}

@media (max-width: 880px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .work-grid>* {
    grid-column: 1 / -1 !important;
    padding-top: 0 !important;
  }
}

/* ====== APPROACH ====== */

.approach {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.approach-list {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.approach-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}

.approach-row:last-child {
  border-bottom: 1px solid var(--border);
}

.approach-row .num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.approach-row h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.1;
  font-style: italic;
}

.approach-row p {
  margin: 0;
  color: var(--fg);
  max-width: 52ch;
}

@media (max-width: 720px) {
  .approach-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* ====== SERVICES ====== */

.services-list {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}

.service-row:last-child {
  border-bottom: 1px solid var(--border);
}

.service-row h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.1;
}

.service-row .role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.service-row p {
  margin: 0;
  color: var(--fg);
}

@media (max-width: 720px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ====== MATERIAL MOOD ====== */

.materials-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.material-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--muted);
}

.material-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-tile .label {
  position: absolute;
  inset: auto 0.85rem 0.85rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  text-shadow: 0 2px 12px rgba(102, 88, 82, 0.6);
}

@media (max-width: 720px) {
  .materials-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ====== ABOUT BAND ====== */

.about-band {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.about-band .portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--muted);
}

.about-band .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-band .copy h2 {
  margin-bottom: 1.5rem;
}

.about-band .copy p {
  margin-bottom: 1rem;
}

.about-band .signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--muted);
  margin-top: 1.5rem;
}

@media (max-width: 880px) {
  .about-band {
    grid-template-columns: 1fr;
  }
}

/* ====== INQUIRY ====== */

.inquiry {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.inquiry-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
}

@media (max-width: 880px) {
  .inquiry-grid {
    grid-template-columns: 1fr;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-grid .full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  min-height: 48px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160, 138, 128, 0.32);
}

.choice-field {
  border: 0;
  padding: 0;
  margin: 0;
}

.choice-field legend {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.choice-card {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}

.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.form-submit {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.form-submit .note {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ====== FOOTER ====== */

.site-footer {
  background: var(--fg);
  color: var(--bg);
  padding: clamp(4rem, 8vw, 6rem) var(--section-x) 2rem;
}

.footer-grid {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.55);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-grid a {
  color: var(--bg);
  opacity: 0.85;
  font-size: 0.95rem;
}

.footer-grid a:hover {
  opacity: 1;
}

.footer-brand .mark {
  height: 44px;
  margin-bottom: 1.25rem;
}

.footer-brand .statement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  max-width: 22ch;
  color: var(--bg);
}

.footer-bottom {
  max-width: var(--max-w);
  margin-inline: auto;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 241, 233, 0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.55);
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ====== PROJECTS INDEX (work.html) — Moniomi-style asymmetric ====== */

.index-head {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: 0;
}

.index-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.0;
  margin-bottom: 1.5rem;
}

.index-head h1 em {
  font-style: italic;
  color: var(--muted);
}

.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 4rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.chip {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--fg);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}

.chip[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.chip:hover {
  opacity: 1;
  background: rgba(102, 88, 82, 0.06);
}

.masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  padding-block: clamp(2rem, 5vw, 4rem);
}

.masonry .m1 {
  grid-column: 1 / span 5;
}

.masonry .m1 .ph {
  aspect-ratio: 3 / 4;
}

.masonry .m2 {
  grid-column: 7 / span 6;
  padding-top: clamp(3rem, 7vw, 6rem);
}

.masonry .m2 .ph {
  aspect-ratio: 4 / 5;
}

.masonry .m3 {
  grid-column: 2 / span 4;
}

.masonry .m3 .ph {
  aspect-ratio: 4 / 5;
}

.masonry .m4 {
  grid-column: 7 / span 5;
}

.masonry .m4 .ph {
  aspect-ratio: 3 / 4;
}

.masonry .m5 {
  grid-column: 1 / span 7;
  padding-top: clamp(2rem, 4vw, 4rem);
}

.masonry .m5 .ph {
  aspect-ratio: 16 / 11;
}

.masonry .m6 {
  grid-column: 9 / span 4;
  padding-top: clamp(4rem, 9vw, 8rem);
}

.masonry .m6 .ph {
  aspect-ratio: 3 / 4;
}

@media (max-width: 880px) {
  .masonry {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .masonry>* {
    grid-column: 1 / -1 !important;
    padding-top: 0 !important;
  }
}

/* ====== PROJECT DETAIL ====== */

.project-hero {
  padding-top: clamp(8rem, 14vw, 11rem);
}

.project-hero .meta {
  display: flex;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}

.project-hero h1 {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.0;
  font-style: italic;
  margin-bottom: 2rem;
  max-width: 22ch;
}

.project-hero .lead {
  max-width: 60ch;
  margin-bottom: 3rem;
}

.project-hero-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--muted);
}

.project-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 6vw, 5rem);
}

.project-intro h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-style: italic;
}

.project-intro p {
  margin-bottom: 1rem;
}

@media (max-width: 880px) {
  .project-intro {
    grid-template-columns: 1fr;
  }
}

.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--border);
}

.specs .row .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.specs .row .val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.2;
}

@media (max-width: 720px) {
  .specs {
    grid-template-columns: 1fr 1fr;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.gallery .g1 {
  grid-column: 1 / span 7;
  aspect-ratio: 4 / 5;
}

.gallery .g2 {
  grid-column: 9 / span 4;
  aspect-ratio: 3 / 4;
  align-self: end;
}

.gallery .g3 {
  grid-column: 1 / span 12;
  aspect-ratio: 21 / 9;
}

.gallery .g4 {
  grid-column: 2 / span 5;
  aspect-ratio: 3 / 4;
}

.gallery .g5 {
  grid-column: 8 / span 5;
  aspect-ratio: 4 / 5;
  align-self: end;
}

.gallery>div {
  overflow: hidden;
  background: var(--muted);
}

.gallery>div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 880px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery>div {
    grid-column: 1 !important;
    aspect-ratio: 4 / 5 !important;
  }
}

.quote-band {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.quote-band blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.2;
  max-width: 28ch;
  margin: 0 auto;
  text-align: left;
  color: var(--fg);
}

.quote-band blockquote::before {
  content: '"';
  color: var(--muted);
  margin-right: 0.25rem;
}

.quote-band cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.next-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--border);
  gap: 2rem;
  flex-wrap: wrap;
}

.next-project .label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.next-project h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.0;
  margin-top: 0.5rem;
}

/* ====== STUDIO / SERVICES / CONTACT generic ====== */

.page-head {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-head .grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.0;
}

.page-head h1 em {
  font-style: italic;
  color: var(--muted);
}

.page-head .lead {
  max-width: 56ch;
}

@media (max-width: 880px) {
  .page-head .grid {
    grid-template-columns: 1fr;
  }
}

.studio-band {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.studio-band .photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--muted);
}

.studio-band .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-band .copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.studio-band .copy p {
  margin-bottom: 1rem;
}

@media (max-width: 880px) {
  .studio-band {
    grid-template-columns: 1fr;
  }
}

.studio-band.reverse .photo {
  order: 2;
}

@media (max-width: 880px) {
  .studio-band.reverse .photo {
    order: 0;
  }
}

.studio-band .studio-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.studio-band .studio-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--muted);
}

.studio-band .studio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-band .studio-copy {
  max-width: 56ch;
}

.studio-band .studio-copy .kicker {
  display: block;
  margin-bottom: 1.25rem;
}

.studio-band .studio-copy .display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.04;
  margin: 0 0 1.5rem;
}

.studio-band .studio-copy .display em {
  font-style: italic;
  color: var(--muted);
}

.studio-band .studio-copy .lead {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  margin-bottom: 1.15rem;
}

.studio-band .studio-copy p {
  margin-bottom: 1rem;
}

.studio-band .studio-copy .signature {
  margin-top: 1.5rem;
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 880px) {
  .studio-band .studio-grid {
    grid-template-columns: 1fr;
  }
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.principle {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.principle .num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.principle h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 0.8rem 0 0.8rem;
}

.principle p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

@media (max-width: 720px) {
  .principles-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== REVEAL ANIMATION ====== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* utility */
.small-meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.spacer-sm {
  height: 1.5rem;
}

.spacer-md {
  height: 3rem;
}

.center-pull {
  padding-left: clamp(0rem, 8vw, 6rem);
}

/* ============================================================
   SPLASH SCREEN — carousel + centered logo navigation
   ============================================================ */

.splash-body {
  margin: 0;
  background: var(--fg);
  overflow: hidden;
}

.splash {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.splash-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.splash-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1500ms var(--ease), transform 6000ms linear;
  will-change: opacity, transform;
}

.splash-slide.is-active {
  opacity: 1;
  transform: scale(1.10);
}

/* soft cinematic scrim — protects logo/CTA contrast without crushing image */
.splash-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

.splash-brand {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: min(88vw, 1040px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.2rem, 0.7vw, 0.55rem);
  animation: splashFadeIn 1400ms var(--ease) 200ms forwards;
  opacity: 0;
}

.splash-lockup {
  display: block;
  width: 100%;
  filter: drop-shadow(0 4px 24px rgba(102, 88, 82, 0.42));
}

.splash-lockup img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* SVG logo is dark — invert to soft cream so it reads on imagery */
  filter: brightness(0) invert(1) opacity(0.96);
}

.splash-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 3vw, 3rem);
  margin-top: clamp(-11rem, -8.5vw, -5.4rem);
  padding: 0.65rem 1.1rem;
  border-top: 1px solid rgba(244, 241, 233, 0.45);
  border-bottom: 1px solid rgba(244, 241, 233, 0.32);
}

.splash-nav a {
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.8vw, 0.82rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.88);
  text-decoration: none;
  transition: color 260ms var(--ease), opacity 260ms var(--ease), letter-spacing 420ms var(--ease);
}

.splash-nav a:hover {
  color: #F4F1E9;
  opacity: 1;
  letter-spacing: 0.31em;
}

.splash-foot {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 2.5vh, 1.75rem);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.65);
  opacity: 0;
  animation: splashFadeIn 1400ms var(--ease) 1000ms forwards;
}

.splash-foot a {
  color: inherit;
}

.splash-foot a:hover {
  color: #F4F1E9;
  opacity: 1;
}

.splash-foot-dot {
  opacity: 0.6;
}

@keyframes splashFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ====== SPLASH — about-page variant (logo top, copy bottom) ====== */

.splash-about-page .splash-scrim {
  background: none;
}

.splash-about-page::before {
  content: none;
}

.splash-brand-about {
  top: clamp(2.25rem, 5.5vh, 3.75rem);
  transform: translate(-50%, 0);
  width: min(54vw, 320px);
  animation: splashLogoTopIn 1200ms var(--ease) 200ms forwards;
  gap: 0;
}

.splash-brand-about .splash-lockup {
  filter: drop-shadow(0 2px 18px rgba(28, 22, 20, 0.45));
}

.splash-brand-about .splash-lockup img {
  filter: brightness(0) invert(1) opacity(0.97);
}

.splash-about {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(2.75rem, 8vh, 5.5rem);
  transform: translateX(-50%);
  width: min(88vw, 580px);
  text-align: center;
  color: rgba(244, 241, 233, 0.95);
  opacity: 0;
  animation: splashAboutIn 1400ms var(--ease) 600ms forwards;
}

.splash-kicker {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.88);
  margin: 0 0 1.1rem;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(28, 22, 20, 0.55);
}

.splash-about h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  line-height: 1.0;
  font-weight: 400;
  color: #F4F1E9;
  margin: 0 0 1.35rem;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 28px rgba(28, 22, 20, 0.45);
}

.splash-about-lead {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.65vw, 1.4rem);
  line-height: 1.45;
  color: #F4F1E9;
  max-width: 36ch;
  margin: 0 auto 1.5rem;
  font-style: italic;
  text-shadow: 0 2px 18px rgba(28, 22, 20, 0.6);
}

.splash-about-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin: 0 auto 1.75rem;
  max-width: 540px;
}

.splash-about-copy p {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(244, 241, 233, 0.8);
  margin: 0;
  text-align: left;
  max-width: none;
}

.splash-about-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
}

.splash-about-links a {
  position: relative;
  color: rgba(244, 241, 233, 0.94);
  padding: 0.45rem 0;
}

.splash-about-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(244, 241, 233, 0.45);
  transition: background 320ms var(--ease), transform 320ms var(--ease);
  transform-origin: left center;
}

.splash-about-links a:hover {
  color: #F4F1E9;
  opacity: 1;
}

.splash-about-links a:hover::after {
  background: #F4F1E9;
}

@keyframes splashAboutIn {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes splashLogoTopIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 640px) {
  .splash-brand {
    width: 92vw;
    top: 47%;
    gap: 0;
  }

  .splash-brand-about {
    top: 2.2rem;
    width: 88vw;
    transform: translate(-50%, 0);
  }

  .splash-about {
    bottom: clamp(1.4rem, 5vh, 2.5rem);
    width: min(88vw, 390px);
  }

  .splash-about-copy {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    text-align: center;
  }

  .splash-about-copy p {
    font-size: 0.76rem;
    line-height: 1.65;
  }

  .splash-about-links {
    gap: 1.1rem;
    flex-wrap: wrap;
  }

  .splash-nav {
    gap: 0.75rem 1rem;
    margin-top: clamp(-5rem, -15vw, -3rem);
    padding: 0.55rem 0.2rem;
  }

  .splash-nav a {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
  }

  .splash-foot {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-slide {
    transition: opacity 600ms linear;
    transform: none !important;
  }

  .splash-brand,
  .splash-foot,
  .splash-about {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   INTERIORS — Moniomi-style tight 3-column grid with big logo top
   ============================================================ */

.interiors-head {
  padding-top: clamp(1.5rem, 3.5vw, 3rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: center;
  background:
    linear-gradient(to bottom,
      rgba(160, 138, 128, 0.12) 0%,
      rgba(160, 138, 128, 0.04) 60%,
      transparent 100%);
}

.interiors-logo {
  display: block;
  margin: 0 auto;
  width: min(58vw, 520px);
  transition: opacity 220ms var(--ease);
}

.interiors-logo:hover {
  opacity: 0.78;
}

.interiors-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.interiors-nav {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
}

.interiors-nav a {
  position: relative;
  padding: 0.4rem 0;
  color: var(--fg);
  font-weight: 500;
}

.interiors-nav a[aria-current="page"]::after,
.interiors-nav a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
}

.interiors-nav a:hover {
  opacity: 1;
}

.interiors-eyebrow {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.005em;
  max-width: none;
  text-align: center;
}

.interiors-head+.splash-band {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.interiors-head+.hero {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.interiors-head+.page-head {
  padding-top: clamp(1rem, 3vw, 2.5rem);
}

.tight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: 0 clamp(0.5rem, 1vw, 1rem) clamp(3rem, 6vw, 5rem);
  max-width: 1680px;
  margin: 0 auto;
}

.tight-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
  transition: opacity 320ms var(--ease);
}

.tight-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1200ms var(--ease), filter 500ms var(--ease);
}

.tight-tile:hover img {
  transform: scale(1.04);
}

.tight-tile:hover {
  opacity: 1;
}

.tight-tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(28, 22, 20, 0.72), rgba(28, 22, 20, 0));
  color: #F4F1E9;
  font-family: var(--font-display);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.tight-tile:hover .tight-tile-cap,
.tight-tile:focus-visible .tight-tile-cap {
  opacity: 1;
}

.tight-tile-cap h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 400;
  color: #F4F1E9;
  letter-spacing: 0.005em;
}

.tight-tile-cap span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.82);
}

@media (max-width: 1024px) {
  .tight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tight-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .interiors-logo {
    width: 88vw;
  }
}

/* ============================================================
   LANDING — Moniomi posture, used on home.html
   ============================================================ */

.landing-intro {
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.landing-intro .wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.landing-intro .copy {
  padding-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

.landing-intro .copy .kicker {
  display: block;
  margin-bottom: 1.5rem;
}

.landing-intro .copy .display {
  margin-bottom: 1.75rem;
}

.landing-intro .copy .lead {
  margin-bottom: 2rem;
}

.landing-intro .copy .actions {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.landing-intro .copy .meta-link {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.landing-intro .copy .meta-link:hover {
  color: var(--fg);
  opacity: 1;
}

.landing-intro .photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}

.landing-intro .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1600ms var(--ease);
}

.landing-intro:hover .photo img {
  transform: scale(1.018);
}

.landing-intro .photo-caption {
  position: absolute;
  inset: auto auto 0 0;
  padding: 0.7rem 0.95rem;
  background: rgba(244, 241, 233, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 500;
}

@media (max-width: 880px) {
  .landing-intro .wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .landing-intro .photo {
    aspect-ratio: 4 / 5;
  }
}

/* Selected work strip on landing */
.landing-work {
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.landing-work .strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.landing-work .strip a {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 3 / 4;
}

.landing-work .strip a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease), opacity 320ms var(--ease);
}

.landing-work .strip a:hover img {
  transform: scale(1.035);
  opacity: 0.95;
}

.landing-work .strip a .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.9rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(28, 22, 20, 0.62), rgba(28, 22, 20, 0));
  color: #F4F1E9;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.landing-work .strip a:hover .cap,
.landing-work .strip a:focus-visible .cap {
  opacity: 1;
}

.landing-work .strip a .cap h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: #F4F1E9;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0;
}

.landing-work .strip a .cap span {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.82);
}

.landing-work .strip .ls1 {
  grid-column: 1 / span 5;
  aspect-ratio: 4 / 5;
}

.landing-work .strip .ls2 {
  grid-column: 6 / span 4;
  aspect-ratio: 3 / 4;
  align-self: end;
}

.landing-work .strip .ls3 {
  grid-column: 10 / span 3;
  aspect-ratio: 3 / 4;
}

.landing-work .strip .ls4 {
  grid-column: 2 / span 4;
  aspect-ratio: 3 / 4;
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

.landing-work .strip .ls5 {
  grid-column: 7 / span 6;
  aspect-ratio: 16 / 11;
}

.landing-work .footer-row {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.landing-work .footer-row .more {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
}

.landing-work .footer-row .small-meta {
  color: var(--muted);
}

@media (max-width: 880px) {
  .landing-work .strip {
    grid-template-columns: 1fr 1fr;
  }

  .landing-work .strip>a {
    grid-column: span 1 !important;
    margin-top: 0 !important;
    aspect-ratio: 3 / 4 !important;
  }
}

@media (max-width: 520px) {
  .landing-work .strip {
    grid-template-columns: 1fr;
  }

  .landing-work .strip>a {
    grid-column: 1 !important;
  }
}

/* Landing inquiry hairline band */
.landing-cta {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  text-align: left;
}

.landing-cta .wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.landing-cta h2 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.0;
  font-style: italic;
}

.landing-cta p {
  margin-bottom: 1.5rem;
}

.landing-cta .actions {
  display: inline-flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.landing-cta .actions .meta-link {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 880px) {
  .landing-cta .wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Quiet site footer used on landing/secondary pages */
.quiet-footer {
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 4vw, 3rem) var(--section-x);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiet-footer a {
  margin: 0 0.75rem;
  color: var(--fg);
  opacity: 0.7;
}

.quiet-footer a:hover {
  opacity: 1;
  color: var(--accent);
}

.quiet-footer .tagline {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ============================================================
   SPLASH SINGLE — single still image, full footer
   ============================================================ */

.splash-single .splash-slide {
  animation: none;
  transform: none;
  filter: none;
}

.splash-single .splash-carousel {
  background: #1a1614;
}

/* darken scrim slightly for legibility */
.splash-single .splash-scrim {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.10) 60%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0.65) 100%);
}

/* splash footer (replaces minimal splash-foot for index page) */
.splash-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 4rem);
  color: rgba(244, 241, 233, 0.92);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: none;
  opacity: 0;
  animation: splashFadeIn 1400ms var(--ease) 1100ms forwards;
}

.splash-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}

.splash-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.splash-footer-col a {
  color: rgba(244, 241, 233, 0.92);
  letter-spacing: 0.16em;
}

.splash-footer-col a:hover {
  opacity: 1;
  color: #fff;
}

.splash-footer-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 241, 233, 0.72);
  margin-bottom: 0.2rem;
}

.splash-footer-meta {
  text-align: right;
  align-items: flex-end;
}

@media (max-width: 720px) {
  .splash-footer-inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 1.25rem;
  }

  .splash-footer-meta {
    text-align: left;
    align-items: flex-start;
  }
}

/* hide old splash-foot when splash-footer present */
.splash-single .splash-foot {
  display: none;
}

/* ============================================================
   INTERIORS — categorized sections
   ============================================================ */

.cat-section {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.cat-section+.cat-section {
  border-top: 1px solid var(--border);
}

.cat-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.cat-kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-bottom: 0.75rem;
}

.cat-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}

.cat-title em {
  font-style: italic;
  color: var(--muted);
}

.cat-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--fg);
  max-width: 56ch;
  margin: 0;
}

@media (max-width: 880px) {
  .cat-head {
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
  }
}

/* tighten tile-grid inside category sections (override tight-grid padding) */
.cat-section .tight-grid {
  padding-bottom: 0;
}

@media (max-width: 880px) {
  .cat-section .tight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .cat-section .tight-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ABOUT — meta strip & studio-images grid
   ============================================================ */

.about-meta {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
}

.about-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
}

.about-meta-grid>div {
  border-left: 1px solid var(--border);
  padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
}

.about-meta-grid>div:first-child {
  border-left: 0;
  padding-left: 0;
}

.am-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
  font-weight: 500;
}

.about-meta-grid p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
}

@media (max-width: 880px) {
  .about-meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .about-meta-grid>div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 520px) {
  .about-meta-grid {
    grid-template-columns: 1fr;
  }

  .about-meta-grid>div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
  }

  .about-meta-grid>div:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

.studio-images {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.studio-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: 0 clamp(0.5rem, 1vw, 1rem);
  max-width: 1680px;
  margin: 0 auto;
}

.si-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}

.si-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease);
}

.si-tile:hover img {
  transform: scale(1.04);
}

.si-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1rem 0.85rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: #F4F1E9;
  background: linear-gradient(to top, rgba(28, 22, 20, 0.62), rgba(28, 22, 20, 0));
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.si-tile:hover figcaption,
.si-tile:focus-visible figcaption {
  opacity: 1;
}

@media (max-width: 880px) {
  .studio-img-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   CONTACT — big logo hero, carousel, form
   ============================================================ */

.contact-hero {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--section-x) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}

.contact-hero-mark {
  display: block;
  margin: 0 auto;
  width: min(80vw, 720px);
}

.contact-hero-mark img {
  width: 100%;
  height: auto;
  display: block;
}

.contact-hero-line {
  margin: clamp(1rem, 2.2vw, 1.75rem) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  color: var(--muted);
  letter-spacing: 0.005em;
}

.contact-hero-line em {
  font-style: italic;
  color: var(--fg);
}

.contact-carousel {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(0.5rem, 1vw, 1rem) 0;
}

.cc-track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1614;
}

.cc-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 900ms var(--ease), transform 6000ms var(--ease);
}

.cc-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.cc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(0.85rem, 1.5vw, 1.25rem);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.cc-arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}

.cc-arrow:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.cc-counter {
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: center;
  color: var(--fg);
}

.contact-form-section {
  padding: clamp(3rem, 6vw, 5rem) var(--section-x) clamp(2rem, 4vw, 3.5rem);
}

.contact-form-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.contact-form-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.contact-form-head .kicker {
  display: block;
  margin-bottom: 0.85rem;
}

.contact-form-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0 0 0.85rem;
}

.contact-form-title em {
  font-style: italic;
  color: var(--muted);
}

.contact-form-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
}

.contact-form {
  border-top: 1px solid var(--border);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
}

.cf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
}

.cf-full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .cf-grid {
    grid-template-columns: 1fr;
  }

  .cf-full {
    grid-column: auto;
  }
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cf-field label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.cf-field label .req {
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.cf-required-tag,
.cf-optional-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
  margin-left: auto;
}

.cf-required-tag {
  color: var(--accent);
}

.cf-field input,
.cf-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  padding: 0.65rem 0;
  outline: none;
  transition: border-color 220ms var(--ease);
  width: 100%;
}

.cf-field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.55;
}

.cf-field input:focus,
.cf-field textarea:focus {
  border-color: var(--fg);
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: rgba(102, 88, 82, 0.45);
  font-style: italic;
}

.cf-submit {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cf-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

.contact-direct {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.cd-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cd-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.cd-col a,
.cd-col span:not(.cd-label) {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg);
}

@media (max-width: 600px) {
  .contact-direct {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================
   SPLASH HERO — full-bleed carousel + XL split lockup
   ============================================================ */

.hero-splash {
  position: relative;
  width: 100%;
  height: clamp(520px, 78vh, 820px);
  overflow: hidden;
  background: #1a1614;
}

.hero-carousel {
  position: absolute;
  inset: 0;
}

.hs-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1400ms var(--ease), transform 9000ms var(--ease);
}

.hs-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 2;
}

/* XL lockup: mark + wordmark side by side, centered */
.xl-lockup {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  opacity: 0;
  animation: xlIn 1400ms var(--ease) 300ms forwards;
}

/* equal sizing — both elements scale together, centered */
.xl-mark,
.xl-wordmark {
  height: clamp(80px, 11vw, 170px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

@keyframes xlIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .xl-lockup {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1.5rem;
  }

  .xl-mark {
    height: clamp(64px, 16vw, 100px);
  }

  .xl-wordmark {
    height: clamp(50px, 12vw, 80px);
    width: auto;
    max-width: 86vw;
  }
}

/* Small delicate Enter button */
.enter-btn {
  position: absolute;
  left: 50%;
  bottom: clamp(2rem, 4vw, 3rem);
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  padding: 0.55rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: xlIn 1200ms var(--ease) 1100ms forwards;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), letter-spacing 240ms var(--ease);
}

.enter-btn:hover {
  background: rgba(255, 255, 255, 0.96);
  color: #1a1614;
  border-color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.08em;
  opacity: 1;
}

/* Clean page-hero variants — image only, no overlay text */
.page-hero-clean {
  min-height: clamp(280px, 42vh, 460px);
  padding: 0;
}

.ph-scrim-soft {
  background: none !important;
}

/* Splash nav strip below hero */
.splash-nav-strip {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg);
}

.splash-nav-strip a {
  position: relative;
  padding: 0.4rem 0;
}

.splash-nav-strip a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 220ms var(--ease);
}

.splash-nav-strip a:hover::after,
.splash-nav-strip a[aria-current="page"]::after {
  width: 100%;
}

.splash-nav-strip a:hover {
  opacity: 1;
}

/* About me section on splash */
.about-me {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem);
}

.am-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}

.am-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.am-copy {
  max-width: 56ch;
}

.am-copy .kicker {
  display: block;
  margin-bottom: 1rem;
}

.am-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin: 0 0 1.5rem;
}

.am-copy p {
  font-family: var(--font-body);
  font-size: clamp(0.97rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 1rem;
}

.am-signature {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--muted);
}

@media (max-width: 880px) {
  .about-me {
    grid-template-columns: 1fr;
  }

  .am-portrait {
    aspect-ratio: 3 / 4;
  }
}

/* ============================================================
   MINIMAL FOOTER — shared across all pages
   ============================================================ */

.mini-footer {
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  background: var(--bg);
}

.mf-logo {
  display: block;
  width: 56px;
  transition: opacity 220ms var(--ease);
}

.mf-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.mf-logo:hover {
  opacity: 0.7;
}

.mf-links {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  align-items: center;
}

.mf-links a:hover {
  opacity: 1;
  color: var(--accent);
}

.mf-dot {
  color: var(--muted);
}

.mf-copy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .mini-footer {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 1.25rem;
  }

  .mf-copy {
    text-align: center;
  }
}

/* ============================================================
   PAGE HERO — full-bleed image-bg
   ============================================================ */

.page-hero {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 78vh, 820px);
  overflow: hidden;
  background: #1a1614;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem);
}

.ph-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

.ph-scrim {
  position: absolute;
  inset: 0;
  background: none;
}

.ph-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: rgba(244, 241, 233, 0.96);
}

.ph-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.ph-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 1.0;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin: 0 0 1.5rem;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}

.ph-title em {
  font-style: italic;
  color: rgba(244, 241, 233, 0.82);
}

.ph-lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
  max-width: 52ch;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.ph-scroll {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.92);
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(244, 241, 233, 0.45);
  border-radius: 999px;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}

.ph-scroll:hover {
  background: rgba(244, 241, 233, 0.96);
  color: #1a1614;
  border-color: rgba(244, 241, 233, 0.96);
  opacity: 1;
}

/* ============================================================
   PAGE NAV — sticky-ish top bar (after hero)
   ============================================================ */

.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-nav-static {
  position: static;
}

.pn-logo {
  display: block;
  width: 44px;
  flex: 0 0 auto;
}

.pn-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.pn-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg);
}

.pn-links a {
  position: relative;
  padding: 0.4rem 0;
}

.pn-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms var(--ease);
}

.pn-links a:hover::after,
.pn-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.pn-links a:hover {
  opacity: 1;
}

/* ============================================================
   STORY (about page)
   ============================================================ */

.story {
  background: var(--bg);
}

.story-section {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem);
}

.story-section+.story-section {
  border-top: 1px solid var(--border);
}

.story-inner {
  max-width: 720px;
  margin: 0 auto;
}

.story-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1rem;
}

.story-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.008em;
  margin: 0 0 1.75rem;
}

.story-h2 em {
  font-style: italic;
  color: var(--muted);
}

.story-p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  color: var(--fg);
  margin: 0 0 1rem;
  max-width: 65ch;
}

/* image band */
.story-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}

.story-band-img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.story-band-copy {
  max-width: 52ch;
}

.story-band.reverse .story-band-img {
  order: 2;
}

@media (max-width: 880px) {
  .story-band {
    grid-template-columns: 1fr;
  }

  .story-band.reverse .story-band-img {
    order: 0;
  }
}

/* press list */
.story-press-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-press-list li {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.story-press-list li:last-child {
  border-bottom: 0;
}

.sp-year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--muted);
}

.sp-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--fg);
}

.sp-note {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .story-press-list li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* CTA */
.story-cta {
  text-align: center;
}

.story-cta .story-inner {
  max-width: 640px;
}

.story-cta-title {
  margin-bottom: 1rem;
}

.story-cta-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  border-radius: 999px;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.story-cta-btn:hover {
  opacity: 0.9;
}

.story-cta-btn:active {
  transform: translateY(1px);
}

/* ============================================================
   INTERIORS — nameless category grid
   ============================================================ */

.cat-page-head {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem) clamp(1rem, 2vw, 1.75rem);
}

.cat-page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fg);
}

.cat-page-head p {
  margin: 0.75rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 22vw, 320px);
  gap: clamp(0.5rem, 0.8vw, 0.85rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(0.5rem, 1vw, 1rem) clamp(2rem, 4vw, 3.5rem);
  max-width: 1680px;
  margin: 0 auto;
}

.cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
  transition: opacity 220ms var(--ease);
}

.cat-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1400ms var(--ease), filter 600ms var(--ease);
}

.cat-tile:hover img {
  transform: scale(1.04);
  filter: brightness(0.92);
}

.cat-tile:hover {
  opacity: 1;
}

.cat-tile-tall {
  grid-row: span 2;
}

.cat-tile-wide {
  grid-column: span 2;
}

@media (max-width: 880px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-tile-wide {
    grid-column: span 2;
  }

  .cat-tile-tall {
    grid-row: span 2;
  }
}

@media (max-width: 520px) {
  .cat-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .cat-tile-tall,
  .cat-tile-wide {
    grid-row: auto;
    grid-column: auto;
  }
}

/* ============================================================
   GALLERY (extended) — anchored category sections
   ============================================================ */

.gallery-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
}

.gallery-jump a {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}

.gallery-jump a:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  opacity: 1;
}

.gallery-cat {
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(0.5rem, 1vw, 1rem);
  max-width: 1680px;
  margin: 0 auto;
  scroll-margin-top: 80px;
}

.gc-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 0 clamp(0.75rem, 1vw, 1rem);
}

.gc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 0.8vw, 0.85rem);
}

.gc-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
  transition: opacity 220ms var(--ease);
}

.gc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease);
}

.gc-tile:hover img {
  transform: scale(1.04);
}

.gc-tile:hover {
  opacity: 1;
}

@media (max-width: 880px) {
  .gc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .gc-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE — comprehensive responsive pass for v2 components
   ============================================================ */

@media (max-width: 880px) {
  .hero-splash {
    height: clamp(440px, 70vh, 620px);
  }

  .page-hero-clean {
    min-height: clamp(220px, 36vh, 360px);
  }

  .splash-nav-strip {
    gap: clamp(0.85rem, 3vw, 1.5rem);
    padding: 1.25rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    flex-wrap: wrap;
  }

  .about-me {
    padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
    gap: 1.75rem;
  }

  .am-title {
    font-size: clamp(2rem, 8vw, 2.6rem);
    margin-bottom: 1rem;
  }

  .am-copy p {
    font-size: 0.97rem;
    line-height: 1.65;
  }

  .mini-footer {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }

  .mf-logo {
    width: 44px;
  }

  .mf-links {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    gap: 0.5rem 0.85rem;
  }

  .mf-copy {
    font-size: 0.85rem;
  }

  .page-nav {
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pn-logo {
    width: 32px;
  }

  .pn-links {
    gap: 0.75rem;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .story-section {
    padding: 2.5rem 1.25rem;
  }

  .story-h2 {
    font-size: clamp(1.7rem, 6.5vw, 2.2rem);
    margin-bottom: 1.25rem;
  }

  .story-p {
    font-size: 0.97rem;
    line-height: 1.7;
  }

  .story-band {
    gap: 1.5rem;
  }

  .story-band-img {
    aspect-ratio: 5 / 4;
  }

  .cat-page-head {
    padding: 1.5rem 1.25rem 0.75rem;
  }

  .cat-page-head h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }

  .cat-page-head p {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(150px, 38vw, 220px);
    gap: 0.5rem;
    padding: 1rem 0.5rem 2rem;
  }

  .gallery-cat {
    padding: 2rem 0.75rem;
  }

  .gc-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    padding: 0 0.5rem;
    margin-bottom: 1rem;
  }

  .gc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .gallery-jump {
    gap: 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
  }

  .gallery-jump a {
    padding: 0.4rem 0.7rem;
  }

  .contact-form-section {
    padding: 2.5rem 1.25rem;
  }

  .contact-form-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .contact-form-lead {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .hero-splash {
    height: clamp(420px, 78vh, 560px);
  }

  .page-hero-clean {
    min-height: clamp(200px, 32vh, 300px);
  }

  .xl-lockup {
    padding: 0 1.25rem;
    gap: 0.75rem;
  }

  .enter-btn {
    bottom: 1.5rem;
    font-size: 0.95rem;
    padding: 0.5rem 1.4rem;
  }

  .splash-nav-strip {
    gap: 0.5rem 1rem;
    padding: 1rem 0.85rem;
    font-size: 0.65rem;
  }

  .about-me {
    padding: 2rem 1rem;
    gap: 1.25rem;
  }

  .am-portrait {
    aspect-ratio: 4 / 5;
  }

  .mini-footer {
    padding: 1.25rem 1rem;
  }

  .page-nav {
    padding: 0.85rem 1rem;
  }

  .pn-links {
    gap: 0.7rem;
    font-size: 0.6rem;
  }

  .cat-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(220px, 56vw, 320px);
  }

  .cat-tile-tall {
    grid-row: auto;
  }

  .cat-tile-wide {
    grid-column: auto;
  }

  .gc-grid {
    grid-template-columns: 1fr;
  }

  .story-band {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .story-band.reverse .story-band-img {
    order: 0;
  }

  .story-press-list li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .sp-year {
    font-size: 1.1rem;
  }
}

@media (max-width: 560px) {
  .page-nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .pn-logo {
    width: 30px;
  }

  .pn-links {
    width: 100%;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .pn-links {
    gap: 0.5rem 1rem;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .pn-logo {
    width: 26px;
  }

  .splash-nav-strip {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    gap: 0.4rem 0.75rem;
    padding: 0.85rem 0.75rem;
  }

  .am-title {
    font-size: 1.85rem;
  }

  .story-h2 {
    font-size: 1.6rem;
  }

  .gc-title {
    font-size: 1.4rem;
  }

  .cat-page-head h1 {
    font-size: 1.8rem;
  }
}

/* ============================================================
   EDITORIAL SHELL — canonical layout for all pages
   Mirrors lcs-interiors.png reference exactly.
   Use on: index, studio, interiors, contact (+ gallery/services).
   ============================================================ */

.ed-page {
  background: var(--bg);
  color: var(--fg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ----- Masthead: XXL centered lockup over full-bleed photo carousel ----- */
.ed-mast {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--mast-height, 100dvh);
  min-height: var(--mast-height, 100dvh);
  max-height: var(--mast-height, 100dvh);
  padding: 0 var(--section-x);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
}

.ed-mast-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
  opacity: 0;
  transform: scale(1.045);
  will-change: opacity, transform;
  animation: edMastBgEnter 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0s both,
    edMastBgDrift 22s ease-in-out 1.6s infinite alternate;
}

.ed-mast-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.2s ease-in-out; /* match the splash crossfade for identical smoothness */
}

.ed-mast-slide:nth-of-type(1) {
  opacity: 1; /* visible before JS initialises */
}

.ed-mast-slide.is-active {
  opacity: 1;
}

@keyframes edMastFade {
  0% {
    opacity: 1;
  }

  22% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes edMastBgEnter {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1.015);
  }
}

@keyframes edMastBgDrift {
  0% {
    transform: scale(1.015) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.05) translate3d(0, -1.2%, 0);
  }
}

.ed-mast-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 35%, rgba(42, 31, 18, 0) 0%, rgba(42, 31, 18, var(--mast-scrim, 0.22)) 100%),
    linear-gradient(to bottom, rgba(42, 31, 18, calc(var(--mast-scrim, 0.22) * 0.55)) 0%, rgba(42, 31, 18, 0) 60%);
}

.ed-mast a {
  position: absolute;
  z-index: 2;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: var(--section-x);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: none;
}

.ed-mast a,
.ed-mast a:hover,
.ed-mast a:focus-visible,
.ed-mast a:active {
  transform: none;
  opacity: 1;
  transition: none;
}

.ed-mast a img.ed-mast-lockup {
  width: calc(clamp(36px, 5.35vw, 51px) * var(--mast-logo-scale, 1));
  height: auto;
  display: block;
  opacity: 0;
  transform: translate3d(0, calc(-7% + 14px), 0) scale(0.97);
  will-change: opacity, transform;
  transition: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 16px rgba(0, 0, 0, 0.3));
  animation: edLockupEnter 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.ed-mast a:hover img.ed-mast-lockup,
.ed-mast a:focus-visible img.ed-mast-lockup,
.ed-mast a:active img.ed-mast-lockup {
  transform: translate3d(0, -7%, 0) scale(1);
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 1px 16px rgba(0, 0, 0, 0.3));
}

@keyframes edLockupEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(-7% + 14px), 0) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, -7%, 0) scale(1);
  }
}

/* ----- Masthead: brand mark (+ logo) ----- */
.ed-mast-plus {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0;
  user-select: none;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.3));
  opacity: 0;
  animation: edLockupEnter 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Single-image hero mode — disable the legacy keyframe blink. Opacity is left to
   the base rules (first slide visible, others 0, .is-active = 1) so a multi-image
   masthead crossfades smoothly on the home hero, exactly like the splash. */
.ed-mast--hero .ed-mast-slide {
  animation: none;
}
.ed-mast--hero .ed-mast-slide:nth-of-type(1) {
  opacity: 1; /* keep the first frame visible before JS initialises */
}

/* ----- Splash screen ----- */
.ed-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #EDE4D2;
  touch-action: none;
  overscroll-behavior: none;
}

.ed-splash[hidden] {
  display: none !important;
}

.ed-splash-reel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ed-splash-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.ed-splash-slide.is-active {
  opacity: 1;
}

/*
  --splash-veil: extra darkness multiplier, 0=current look (default), max ~0.65.
  The brand vignette gradient is always present; --splash-veil adds a solid
  black layer on top so the admin can darken the splash beyond the default.
  Default 0 = today's exact look. Values saved by admin are 0–0.65.
*/
.ed-splash-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, var(--splash-veil, 0)) 0%, rgba(0, 0, 0, var(--splash-veil, 0)) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.ed-splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  animation: edSplashIn 2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.ed-splash-logo {
  width: calc(clamp(200px, 28vw, 340px) * var(--splash-logo-scale, 1));
  max-width: 90vw;
  filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 32px rgba(0, 0, 0, 0.35));
  opacity: 0.96;
}

.ed-splash-enter {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: 0.45em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  border: 0;
  padding: 0.65rem 0.85rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 320ms ease, border-color 320ms ease;
}

.ed-splash-enter:hover,
.ed-splash-enter:focus-visible {
  color: rgba(255, 255, 255, 1);
  border-bottom-color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.ed-splash.is-leaving {
  pointer-events: none;
  /* Release touch-action so iOS Safari stops suppressing scroll gestures on the
     page beneath during the exit animation. The splash is pointer-events:none
     so it cannot be interacted with; the underlying content must be touchable. */
  touch-action: auto;
  animation: edSplashOut 1400ms cubic-bezier(0.25, 0.1, 0.5, 1) 100ms forwards;
}

.ed-splash.is-leaving .ed-splash-content {
  animation: edSplashContentOut 900ms cubic-bezier(0.4, 0, 1, 1) 0ms forwards;
}

/* ── Swipe-up hint (touch devices only) ── */
.ed-splash-swipe-hint {
  display: none;
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: edSwipeHintIn 600ms ease 2.8s forwards;
  transition: opacity 300ms ease;
}

@media (hover: none) and (pointer: coarse) {
  .ed-splash-swipe-hint { display: flex; }
}

.ed-splash-swipe-hint-line {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  position: relative;
}

.ed-splash-swipe-hint-line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  top: 100%;
  animation: edSwipeLineScroll 2s ease-in-out 3s infinite;
}

.ed-splash-swipe-hint-text {
  font-family: var(--font-sans, 'Montserrat', sans-serif);
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes edSwipeHintIn {
  to { opacity: 1; }
}

@keyframes edSwipeLineScroll {
  0%   { top: 100%; }
  50%  { top: 0%; }
  100% { top: -100%; }
}

@keyframes edSplashIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edSplashContentOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(-36px) scale(0.96);
    filter: blur(4px);
  }
}

@keyframes edSplashOut {
  0% {
    opacity: 1;
    filter: blur(0px) brightness(1);
    transform: scale(1);
    background-color: #EDE4D2;
  }

  30% {
    opacity: 0.85;
    filter: blur(1px) brightness(1.04);
    background-color: #f5f0e8;
  }

  100% {
    opacity: 0;
    filter: blur(12px) brightness(1.1);
    transform: scale(1.04);
    background-color: #ffffff;
  }
}

.ed-mast .ed-wordmark {
  font-family: var(--font-body);
  font-size: clamp(3.54rem, 7.08vw, 6.49rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow:
    0 0 26px rgba(248, 240, 230, 0.95),
    0 0 10px rgba(248, 240, 230, 0.85),
    0 1px 3px rgba(40, 30, 20, 0.40);
}

.ed-mast .ed-wordmark .row1 {
  display: block;
  font-weight: 400;
}

.ed-mast .ed-wordmark .row2 {
  display: block;
  font-size: 0.50em;
  letter-spacing: 0.36em;
  margin-top: 0.55em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .ed-mast-slide {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .ed-mast-slide:first-of-type {
    opacity: 1;
  }

  .ed-mast-bg {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ed-mast-scrim {
    animation: none;
    opacity: 1;
  }

  .ed-mast a img.ed-mast-lockup {
    animation: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: brightness(0) invert(1) drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35));
  }

  .ed-mast-plus {
    animation: none;
    opacity: 0.88;
  }
}

/* ----- Primary nav: centered uppercase, underline accents ----- */
.ed-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(0.5rem, 1.25vw, 1rem) var(--section-x) clamp(0.85rem, 1.5vw, 1.1rem);
}

.ed-nav a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  position: relative;
  padding: 0.35rem 0.1rem;
  opacity: 0.78;
  transition: opacity 280ms var(--ease);
}

.ed-nav a:hover {
  opacity: 1;
  color: var(--accent);
}

.ed-nav a[aria-current="page"] {
  opacity: 1;
  color: var(--accent);
}

.ed-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0.1rem -0.45rem 0.1rem;
  height: 1px;
  background: var(--accent);
}

/* ----- Breadcrumb (legacy uppercase) ----- */
.ed-crumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--section-x) clamp(0.5rem, 1vw, 0.75rem);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed-crumb .slash {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: rgba(102, 88, 82, 0.4);
  margin: 0 0.25rem;
}

/* ----- Page subtitle (italic serif) — sits under nav ----- */
.ed-subtitle {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  line-height: 1.5;
  color: var(--muted);
  padding: clamp(1rem, 2vw, 1.5rem) var(--section-x) clamp(3rem, 5vw, 4.5rem);
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  width: 100%;
  max-width: none;
}

/* ----- Editorial body container ----- */
.ed-body {
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--section-x);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  flex: 1;
}

/* ----- About section ----- */
.ed-about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 9vw, 8rem);
  max-width: 1200px;
  margin-inline: auto;
}

.ed-about-portrait {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--muted);
}

.ed-about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: scale(1.02);
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-about.is-in .ed-about-portrait img,
.ed-about .ed-about-portrait img {
  transform: scale(1);
}

.ed-about-text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.4vw, 1.4rem);
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}

.ed-about-text .ed-kicker {
  color: var(--muted);
}

.ed-about-text .ed-title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg);
  font-weight: 400;
}

.ed-about-text .ed-title em {
  font-style: italic;
  color: var(--muted);
}

.ed-about-text .ed-sub {
  margin: 0;
  font-size: clamp(0.86rem, 0.92vw, 0.95rem);
  line-height: 1.75;
  color: var(--fg);
  max-width: 52ch;
}

.ed-about-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  align-self: flex-start;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding: 0.9em 2em 0.9em 1.6em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: color 360ms var(--ease), border-color 360ms var(--ease);
}

.ed-about.is-in .ed-about-cta {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 700ms var(--ease) 600ms,
    transform 700ms var(--ease) 600ms,
    color 360ms var(--ease),
    border-color 360ms var(--ease);
}

.ed-about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
  z-index: 0;
}

.ed-about-cta:hover,
.ed-about-cta:focus-visible {
  color: var(--on-accent);
  border-color: var(--fg);
}

.ed-about-cta:hover::before,
.ed-about-cta:focus-visible::before {
  transform: scaleX(1);
}

.ed-about-cta-line,
.ed-about-cta-text,
.ed-about-cta-arrow {
  position: relative;
  z-index: 1;
}

.ed-about-cta-line {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--muted);
  flex-shrink: 0;
  transition: background 360ms var(--ease), width 280ms var(--ease);
}

.ed-about-cta:hover .ed-about-cta-line,
.ed-about-cta:focus-visible .ed-about-cta-line {
  background: var(--on-accent);
  width: 22px;
}

.ed-about-cta-arrow {
  flex-shrink: 0;
  transition: transform 360ms var(--ease);
}

.ed-about-cta:hover .ed-about-cta-arrow,
.ed-about-cta:focus-visible .ed-about-cta-arrow {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .ed-about-cta {
    opacity: 1;
    transform: none;
  }
  .ed-about-cta::before,
  .ed-about-cta-arrow,
  .ed-about-cta-line {
    transition: none;
  }
}

@media (max-width: 880px) {
  .ed-about {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    padding: clamp(3rem, 9vw, 5rem) 0 clamp(2.5rem, 7vw, 4rem);
  }

  .ed-about-portrait {
    aspect-ratio: 4 / 5;
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }

  .ed-about-text {
    align-items: flex-start;
  }

  .ed-about-cta {
    align-self: stretch;
    justify-content: center;
    padding: 1em 1.5em;
    font-size: 0.75rem;
  }
}

/* ----- Section row (Living rooms & salons pattern) ----- */
.ed-section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}

.ed-section:first-of-type {
  border-top: 1px solid var(--border);
}

/* Section head: kicker (L) — centered italic-accent title — empty (R) for symmetry */
.ed-section-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.ed-section-head .ed-kicker {
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.ed-section-head .ed-spacer {
  display: block;
}

.ed-section-head .ed-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
}

.ed-section-head .ed-title em {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
}

/* Section description sits on its own row, narrow, top-left */
.ed-section-body {
  display: block;
}

.ed-desc {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--fg);
  max-width: 34ch;
  opacity: 0.86;
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}

.ed-desc .ed-tag {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
  font-weight: 500;
}

/* Image grid: 3 cols × N rows. Supports 3 (1 row), 6 (2 rows), 9 (3 rows). */
.ed-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ed-strip a,
.ed-strip .ed-cell {
  position: relative;
  /* Same 5/7 cell as the portfolio in-album grid (.ed-room-grid a) so one
     admin reframe applies identically on both pages — do not diverge. */
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: rgba(160, 138, 128, 0.14);
  display: block;
}

.ed-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 320ms var(--ease), transform 800ms var(--ease);
}

.ed-strip a:hover img {
  opacity: 0.93;
}

/* Empty placeholder grid: still 3×2 but cells render as soft cream blocks */
.ed-strip.is-empty .ed-cell {
  background: rgba(244, 241, 233, 0.65);
  border: 0;
}

/* ----- Editorial intro (hero on Home, About, Contact pages) ----- */
.ed-intro {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ed-intro-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.ed-intro-head .ed-kicker {
  color: var(--muted);
}

.ed-intro-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin: 0;
}

.ed-intro-head h1 em {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
}

.ed-intro-head .ed-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.78;
  max-width: 54ch;
  margin: 0 auto;
}

/* ----- Footer: DARK BROWN bg, cream text, left mark + tagline + right cols ----- */
/* ============================================================
   FOOTER — editorial sign-off (redesign 2026-06-09)
   Warm dark band · serif invitation · utility columns · ghosted
   monogram watermark. All resting text >= 4.5:1 on #3D3530 (AA).
   ============================================================ */
.ed-foot {
  position: relative;
  overflow: hidden;
  background: #3D3530;
  color: #C9C3BA;
  margin-top: auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--section-x)
           max(clamp(1.5rem, 2vw, 2rem), calc(env(safe-area-inset-bottom, 0px) + 0.85rem));
}

.ed-foot-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin-inline: auto;
}

/* Signature: oversized monogram pressed into the bottom-right corner */
.ed-foot-watermark {
  position: absolute;
  right: clamp(-130px, -5.5vw, -68px);
  bottom: clamp(-150px, -6.5vw, -88px);
  width: clamp(300px, 33vw, 520px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---- Tier 1: the invitation ---- */
.ed-foot-lede {
  max-width: 40ch;
}

.ed-foot-statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #F1ECE3;
  margin: 0;
}

.ed-foot-statement em {
  font-style: italic;
  color: #D8C9BA;
}

.ed-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #EDE8DF;
  text-decoration: none;
}

.ed-foot-cta > span:first-child {
  position: relative;
}

.ed-foot-cta > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}

.ed-foot-cta-arrow {
  transition: transform 360ms var(--ease);
}

.ed-foot-cta:hover > span:first-child::after,
.ed-foot-cta:focus-visible > span:first-child::after {
  transform: scaleX(1);
}

.ed-foot-cta:hover .ed-foot-cta-arrow,
.ed-foot-cta:focus-visible .ed-foot-cta-arrow {
  transform: translateX(6px);
}

/* ---- Tier 2: utility columns + logo anchor ---- */
.ed-foot-grid {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 5.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(244, 241, 233, 0.12);
}

.ed-foot-col {
  display: flex;
  flex-direction: column;
}

.ed-foot-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #A89F95;
  margin-bottom: 1.05rem;
}

/* Couture arrow prefix — same hairline + open head as the About CTA, scaled to label size */
.ed-foot-label::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

.ed-foot-label::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.6;
}

/* One label speaks in the studio's own voice — italic display serif */
.ed-foot-label--voice {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #D8C9BA;
  margin-bottom: 0.59rem; /* keeps list tops level with the caps labels (1.67rem total) */
}

.ed-foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ed-foot-col li {
  display: flex;
}

.ed-foot-col a,
.ed-foot-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #C4BEB5;
  text-decoration: none;
}

.ed-foot-note {
  color: #A89F95;
}

/* Email is content-injected from Supabase (casing may vary) — keep it lowercase */
.ed-foot-col a[href^="mailto:"] {
  text-transform: lowercase;
}

.ed-foot-col a {
  position: relative;
  transition: color 280ms var(--ease);
}

.ed-foot-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}

.ed-foot-col a:hover,
.ed-foot-col a:focus-visible {
  color: #F4F1E9;
}

.ed-foot-col a:hover::after,
.ed-foot-col a:focus-visible::after {
  transform: scaleX(1);
}

.ed-foot-ext {
  font-size: 0.7em;
  opacity: 0.7;
}

/* Logo lockup — quiet anchor, bottom-right of the row */
.ed-foot-logo {
  justify-self: end;
  align-self: end;
  display: block;
  line-height: 0;
}

.ed-foot-logo img {
  display: block;
  width: clamp(180px, 18vw, 280px);
  height: auto;
  filter: brightness(0) invert(0.9);
  opacity: 0.82;
  transition: opacity 320ms var(--ease);
}

.ed-foot-logo:hover img,
.ed-foot-logo:focus-visible img {
  opacity: 1;
}

/* ---- Tier 3: credit — couture credit line, hairline stretched between name and discipline ---- */
.ed-foot-credit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  max-width: none; /* the couture credit line runs the full footer width (beats global p cap) */
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9F968C;
}

.ed-foot-credit span {
  font-weight: 500;
}

.ed-foot-credit-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(244, 241, 233, 0.02),
    rgba(244, 241, 233, 0.16) 14%,
    rgba(244, 241, 233, 0.16) 86%,
    rgba(244, 241, 233, 0.02));
}

/* Focus + a11y helpers */
.ed-foot a:focus-visible {
  outline: 2px solid #E2DED7;
  outline-offset: 4px;
  border-radius: 2px;
}

.ed-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;
}

/* ---- Footer responsive: stack into one editorial column ---- */
@media (max-width: 720px) {
  .ed-foot-lede {
    max-width: none;
  }

  .ed-foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.5rem;
  }

  .ed-foot-logo {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
    margin-top: 0.5rem;
  }

  .ed-foot-credit {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  /* Stacked credit: the stretch rule becomes a short couture dash */
  .ed-foot-credit-rule {
    flex: none;
    width: 28px;
  }
}

@media (max-width: 440px) {
  .ed-foot-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-foot * ,
  .ed-foot *::before,
  .ed-foot *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   SKELETON LOADERS — portfolio rooms & gallery strips
   ============================================================ */

@keyframes edSkeletonPulse {
  0%   { opacity: 0.55; }
  50%  { opacity: 1; }
  100% { opacity: 0.55; }
}

/* Rooms grid skeleton: mirrors the 6-col grid with 5 placeholders */
.ed-rooms-skeleton {
  margin-inline: calc(-1 * var(--section-x));
  width: calc(100% + 2 * var(--section-x));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.ed-rooms-skeleton .ed-skel-tile {
  background: rgba(160, 138, 128, 0.18);
  animation: edSkeletonPulse 1.8s ease-in-out infinite;
  grid-column: span 2;
}

.ed-rooms-skeleton .ed-skel-tile:nth-child(4),
.ed-rooms-skeleton .ed-skel-tile:nth-child(5) {
  grid-column: span 3;
}

.ed-rooms-skeleton .ed-skel-tile::before {
  content: '';
  display: block;
  aspect-ratio: 3 / 4;
}

.ed-rooms-skeleton .ed-skel-tile:nth-child(4)::before,
.ed-rooms-skeleton .ed-skel-tile:nth-child(5)::before {
  aspect-ratio: 5 / 3;
}

.ed-rooms-skeleton .ed-skel-tile:nth-child(2) { animation-delay: 0.15s; }
.ed-rooms-skeleton .ed-skel-tile:nth-child(3) { animation-delay: 0.30s; }
.ed-rooms-skeleton .ed-skel-tile:nth-child(4) { animation-delay: 0.45s; }
.ed-rooms-skeleton .ed-skel-tile:nth-child(5) { animation-delay: 0.60s; }

@media (max-width: 560px) {
  .ed-rooms-skeleton {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ed-rooms-skeleton .ed-skel-tile,
  .ed-rooms-skeleton .ed-skel-tile:nth-child(4),
  .ed-rooms-skeleton .ed-skel-tile:nth-child(5) {
    grid-column: span 1;
  }
  .ed-rooms-skeleton .ed-skel-tile::before,
  .ed-rooms-skeleton .ed-skel-tile:nth-child(4)::before,
  .ed-rooms-skeleton .ed-skel-tile:nth-child(5)::before {
    aspect-ratio: 4 / 5;
  }
}

/* Gallery strip skeleton */
.ed-strip-skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ed-strip-skeleton .ed-skel-cell {
  aspect-ratio: 4 / 3;
  background: rgba(160, 138, 128, 0.18);
  animation: edSkeletonPulse 1.8s ease-in-out infinite;
}

.ed-strip-skeleton .ed-skel-cell:nth-child(2) { animation-delay: 0.15s; }
.ed-strip-skeleton .ed-skel-cell:nth-child(3) { animation-delay: 0.30s; }

@media (max-width: 520px) {
  .ed-strip-skeleton {
    grid-template-columns: 1fr 1fr;
  }
}

/* Spinner overlay (gallery page loading) */
.ed-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  gap: 0.85rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ed-loading-spinner::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: edSpinnerRotate 700ms linear infinite;
  flex-shrink: 0;
}

@keyframes edSpinnerRotate {
  to { transform: rotate(360deg); }
}

/* ============================================================
   FORM — field-level validation feedback
   ============================================================ */

/* Invalid state: warm-clay bottom border + label colour shift */
.ed-field.is-invalid input,
.ed-field.is-invalid textarea,
.ed-field.is-invalid select {
  border-bottom-color: var(--error);
}

.ed-field.is-invalid label {
  color: var(--error);
}

/* Inline field error message */
.ed-field-error {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--error);
  margin-top: 0.3rem;
  display: none;
}

.ed-field.is-invalid .ed-field-error {
  display: block;
}

/* Status banner: error / success */
.ed-form-status {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  line-height: 1.5;
}

.ed-form-status[data-kind="error"] {
  background: var(--error-soft);
  border: 1px solid var(--error-border);
  color: var(--error);
}

.ed-form-status[data-kind="success"] {
  background: rgba(39, 174, 96, 0.08);
  border: 1px solid rgba(39, 174, 96, 0.22);
  color: #1e8449;
}

/* Submit button disabled state */
.ed-submit button:disabled,
.ed-success-cta button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----- Editorial form (contact page) ----- */
.ed-form-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ed-form-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.ed-form-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: var(--fg);
  margin: 0.65rem 0 0.85rem;
  letter-spacing: -0.005em;
}

.ed-form-head h2 em {
  font-style: italic;
  color: var(--muted);
}

.ed-form-head .ed-form-lead {
  font-size: 0.92rem;
  color: var(--fg);
  opacity: 0.78;
  max-width: 50ch;
  margin: 0 auto;
}

.ed-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.ed-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ed-field.full {
  grid-column: 1 / -1;
}

.ed-field label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
}

.ed-field input,
.ed-field textarea,
.ed-field select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  padding: 0.6rem 0 0.65rem;
  outline: none;
  transition: border-color 240ms var(--ease);
  width: 100%;
}

.ed-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

/* Native select, styled to match the editorial underline fields: no SaaS
   chrome, a soft brown chevron, room so text never sits under the arrow. */
.ed-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23665852' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 12px 8px;
}

.ed-field select:invalid {
  /* placeholder option still selected — sit it at placeholder strength */
  color: rgba(102, 88, 82, 0.55);
}

.ed-field input::placeholder,
.ed-field textarea::placeholder {
  color: rgba(102, 88, 82, 0.6);
  font-family: var(--font-display);
  font-style: italic;
}

.ed-field input:focus,
.ed-field textarea:focus,
.ed-field select:focus {
  border-bottom-color: var(--fg);
}

.ed-submit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.ed-submit button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  /* sliding fill: dark warm brown enters from left on hover */
  background: linear-gradient(to right, var(--fg) 50%, transparent 50%);
  background-size: 202% 100%;
  background-position: 100% 0;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 0.9rem 2rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background-position 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-submit button:hover {
  background-position: 0 0;
  color: var(--bg);
}

.ed-submit button:hover span[aria-hidden="true"] {
  transform: translateX(5px);
}

.ed-submit button span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-submit button:active {
  transform: scale(0.98);
}

.ed-submit .ed-note {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----- Form success state (replaces form after submit) ----- */
.ed-form-success {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  padding-block: clamp(1rem, 3vw, 2.25rem);
}

.ed-form-success[hidden] { display: none; }

/* Smooth in-place crossfade between form ↔ success card.
   Wrapper min-height is JS-locked during the swap so the page never jumps. */
#ed-form-wrap {
  transition: min-height 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-form.is-leaving,
.ed-intro-head.is-leaving,
.ed-form-success.is-leaving {
  animation: edFormSwapLeave 320ms cubic-bezier(0.7, 0, 0.84, 0) both;
  pointer-events: none;
}

#ed-contact-form.is-entering,
.ed-form-success.is-entering {
  animation: edFormSuccessRise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes edFormSwapLeave {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.ed-form-success .ed-intro-head {
  margin-bottom: 0;
}

.ed-form-success .ed-intro-head .ed-sub {
  margin: 0.25rem auto 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.78;
  max-width: 54ch;
}

.ed-success-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.5rem;
}

.ed-success-cta button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(to right, var(--fg) 50%, transparent 50%);
  background-size: 202% 100%;
  background-position: 100% 0;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 0.9rem 2rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background-position 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-success-cta button:hover {
  background-position: 0 0;
  color: var(--bg);
}

.ed-success-cta button:hover span[aria-hidden="true"] {
  transform: translateX(5px);
}

.ed-success-cta button span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-success-cta button:active {
  transform: scale(0.98);
}

.ed-success-link {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 220ms ease, border-color 220ms ease;
}

.ed-success-link:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

@keyframes edFormSuccessRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Direct contact strip (above form) ----- */
.ed-direct {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: clamp(2rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-block: clamp(1rem, 2vw, 1.5rem);
}

.ed-direct .ed-direct-cell h4 {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.ed-direct .ed-direct-cell a,
.ed-direct .ed-direct-cell span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg);
}

/* ----- About / studio editorial rows ----- */
.ed-portrait {
  margin: clamp(2rem, 4vw, 3rem) auto;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--muted);
}

.ed-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed-story {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}

.ed-story .ed-story-kicker {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed-story h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 1rem;
  letter-spacing: -0.005em;
}

.ed-story h3 em {
  font-style: italic;
  color: var(--muted);
}

.ed-story p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.86;
  max-width: 60ch;
}

/* ----- Hero strip on home (3 image moodboard) ----- */
.ed-hero-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.ed-hero-strip .ed-cell {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.ed-hero-strip .ed-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Reveal motion (used across editorial pages) -----
   No-op default (visible) so server-rendered HTML is readable.
   JS adds `.ed-prime` immediately, then IntersectionObserver adds `.is-in`. */
.ed-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-reveal.ed-prime {
  opacity: 0;
  transform: translateY(52px);
  filter: blur(2px);
}

.ed-reveal.ed-prime.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

@media (prefers-reduced-motion: reduce) {

  .ed-reveal,
  .ed-reveal.ed-prime {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----- Responsive ----- */
@media (max-width: 880px) {
  .ed-mast {
    padding: 4rem 1rem;
  }

  .ed-mast a {
    top: 1.2rem;
    left: 1rem;
    gap: 0.4rem;
  }

  .ed-mast a img.ed-mast-lockup {
    width: calc(clamp(32px, 9.63vw, 45px) * var(--mast-logo-scale, 1));
    height: auto;
  }

  .ed-mast .ed-wordmark {
    font-size: clamp(2.36rem, 8.85vw, 3.77rem);
    letter-spacing: 0.16em;
    align-items: flex-start;
  }

  .ed-mast .ed-wordmark .row2 {
    font-size: 0.46em;
    letter-spacing: 0.32em;
  }

  .ed-section-head {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.6rem;
  }

  .ed-section-head .ed-kicker {
    text-align: center;
  }

  .ed-section-head .ed-spacer {
    display: none;
  }

  .ed-section-head .ed-title {
    white-space: normal;
  }

  .ed-desc {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }

  .ed-strip {
    gap: 4px;
  }

  .ed-foot-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .ed-foot-nav {
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
  }

  .ed-foot-contact {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  .ed-form {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .ed-form-wrap {
    padding-block: 1.25rem clamp(1.5rem, 4vw, 2.25rem);
  }

  .ed-form-wrap .ed-intro-head {
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .ed-form-wrap .ed-intro-head h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.3rem);
  }

  .ed-form-wrap .ed-field textarea {
    min-height: 72px;
    height: 96px; /* rows="6" sets intrinsic ~170px; cap it on mobile so submit sits close beneath */
  }

  .ed-form-wrap .ed-submit {
    margin-top: 0.25rem;
  }

  .ed-direct {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: left;
  }

  .ed-story {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ed-hero-strip {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ed-hero-strip .ed-cell {
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 520px) {
  .ed-nav {
    gap: 1.1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
  }

  .ed-nav a {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }

  .ed-crumb {
    font-size: 0.6rem;
    letter-spacing: 0.26em;
  }

  .ed-subtitle {
    font-size: 0.86rem;
    padding-bottom: 1.5rem;
  }

  .ed-intro-head h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .ed-foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ed-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----- Studio (About) page — credo + press ----- */
.ed-credo {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  border-top: 1px solid var(--border);
}

.ed-credo .ed-kicker {
  color: var(--muted);
  padding-top: 0.4rem;
}

.ed-credo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.4vw, 1.25rem);
}

.ed-credo-list li {
  font-family: var(--font-display, var(--font-body));
  font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  line-height: 1.35;
  color: var(--fg);
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.ed-credo-list li::before {
  content: "";
  flex: 0 0 1.4rem;
  height: 1px;
  background: var(--muted);
  opacity: 0.55;
  transform: translateY(-0.4em);
}

.ed-press {
  max-width: 62ch;
  margin-inline: auto;
  padding: 0 0 clamp(4rem, 8vw, 7rem);
  font-family: var(--font-display, var(--font-body));
  font-style: italic;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

.ed-press .ed-kicker {
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.ed-press-years {
  display: block;
  margin-top: 0.15rem;
  opacity: 0.85;
}

@media (max-width: 880px) {
  .ed-credo {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(2.5rem, 7vw, 4rem);
  }

  .ed-credo-list li {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    gap: 0.75rem;
  }

  .ed-credo-list li::before {
    flex-basis: 1rem;
  }

  .ed-press {
    text-align: left;
  }
}

/* ----- Interiors — full-bleed photo grid ----- */
.ed-rooms {
  margin-inline: calc(-1 * var(--section-x));
  width: calc(100% + 2 * var(--section-x));
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.ed-room-tile {
  appearance: none;
  background: var(--muted);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  overflow: hidden;
  position: relative;
  grid-column: span 2;
}

/* Last 2 tiles: wider, editorial 3+2 layout */
.ed-room-tile:nth-child(4),
.ed-room-tile:nth-child(5) {
  grid-column: span 3;
}

.ed-room-tile:focus {
  outline: none;
}

.ed-room-tile:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -3px;
}

.ed-room-stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* Neutral placeholder while the cover streams in — no white tile flash. */
  background: var(--muted);
}

.ed-room-tile:nth-child(4) .ed-room-stack,
.ed-room-tile:nth-child(5) .ed-room-stack {
  aspect-ratio: 5 / 3;
}

.ed-room-stack>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile cover crop: content-loader emits the admin's mobile cover framing
   (coverFocalM) as inline --mf* vars on the cover img; on phones they must beat
   the inline web crop, hence !important. Mirrors the album-grid rule in the
   per-device crops block. Covers without the vars never match the guard. */
@media (max-width: 768px) {
  .ed-room-stack > img[style*="--mfx"] {
    object-position: var(--mfx) var(--mfy) !important;
    transform: scale(var(--mfz)) !important;
    transform-origin: var(--mfx) var(--mfy) !important;
  }
}

.ed-room-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 400ms ease;
  pointer-events: none;
  z-index: 4;
}

.ed-room-tile:hover .ed-room-stack>img {
  transform: scale(1.04);
}

.ed-room-tile:hover::after {
  background: rgba(0, 0, 0, 0.07);
}

/* Gallery view */
.ed-room-gallery {
  margin-inline: calc(-1 * var(--section-x));
  width: calc(100% + 2 * var(--section-x));
  padding: 0 0 3rem;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-room-gallery.is-open {
  opacity: 1;
  transform: translateY(0);
}

.ed-room-gallery[hidden] {
  display: none !important;
}

/* Back button — top of gallery, flows naturally before the grid.
   An understated couture "return" control: a real left-arrow that draws back
   toward the album list on hover, the label opening a touch of extra tracking
   as it does. Reads instantly as "go back" while staying gallery-quiet. */
.ed-room-back {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  padding: 1.1rem var(--section-x) 1.1rem;
  cursor: pointer;
  transition:
    color 320ms var(--ease),
    gap 420ms cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 420ms var(--ease),
    opacity 260ms var(--ease),
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  /* "All rooms" label lives in the button text, always visible */
  white-space: nowrap;
}

/* Left arrow drawn as an SVG mask, so it inherits currentColor and stays crisp
   at any DPI. Replaces the old single hairline dash. */
.ed-room-back::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%209'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M27%204.5H1'/%3E%3Cpath%20d='M6%201%201%204.5%206%208'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%209'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M27%204.5H1'/%3E%3Cpath%20d='M6%201%201%204.5%206%208'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-room-back:hover,
.ed-room-back:focus-visible {
  color: var(--fg);
  gap: 1rem;
  letter-spacing: 0.27em;
  transform: translateX(-3px);
  outline: none;
}

/* Arrow glides back toward the rooms it returns to */
.ed-room-back:hover::before,
.ed-room-back:focus-visible::before {
  transform: translateX(-6px);
}

.ed-room-back:active {
  transform: translateX(-7px) scale(0.985);
  opacity: 0.72;
  color: var(--fg);
}

.ed-room-back:active::before {
  transform: translateX(-9px);
}

/* Keyboard focus: a soft warm ring, no harsh default outline */
.ed-room-back:focus-visible {
  box-shadow: 0 0 0 2px rgba(120, 102, 85, 0.28);
  border-radius: 6px;
}

/* Foot "All rooms" control — the deliberate end of a long album.
   Wrapper carries a full-bleed terminator hairline and the page rhythm: tight
   space above (it belongs to the album it closes), generous space below (a
   chapter break before the next section). Hidden by default; content-loader's
   syncFootBack() reveals it ONLY when the album overflows the viewport, so a
   short album that already shows its top control never floats a second one. */
.ed-room-foot {
  display: none;
  margin-top: 2.6rem;
  padding-top: 1.35rem;
  margin-bottom: 3.6rem;
  border-top: 1px solid rgba(120, 102, 85, 0.16);
}

.ed-room-foot.is-visible {
  display: block;
}

/* The control echoes the TOP back button's left rail — not centred — so the
   album reads as one continuous left edge from first photo to closing line.
   Slightly hushed at rest, it lifts to full presence on interaction. */
.ed-room-back--end {
  margin: 0;
  opacity: 0.78;
}

.ed-room-back--end:hover,
.ed-room-back--end:focus-visible {
  opacity: 1;
}

/* Delight: as the arrow draws back, the label "exhales" — its tracking eases
   out past target then settles, like a quiet parting nod on the way out. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ed-room-back-exhale {
    0%   { letter-spacing: 0.22em; }
    55%  { letter-spacing: 0.32em; }
    100% { letter-spacing: 0.27em; }
  }
  .ed-room-back--end:hover,
  .ed-room-back--end:focus-visible {
    animation: ed-room-back-exhale 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

/* Entrance: when an album opens, the back control settles in just ahead of the
   photos — a quiet downward fade that anchors the "you're inside an album" view. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ed-room-back-in {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ed-room-gallery.is-open .ed-room-back {
    animation: ed-room-back-in 460ms 60ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* Reduced motion: keep the colour shift, drop all travel */
@media (prefers-reduced-motion: reduce) {
  .ed-room-back,
  .ed-room-back:hover,
  .ed-room-back:focus-visible,
  .ed-room-back:active,
  .ed-room-back::before,
  .ed-room-back:hover::before,
  .ed-room-back:active::before {
    transform: none;
  }
}


/* Justified gallery: JS (content-loader.js layoutJustify) sizes each <a> to its
   photo's TRUE aspect ratio and scales every row to fill the width exactly — so
   each photo shows WHOLE (no crop) with NO gaps, portrait + landscape mixed.
   Box aspect == image aspect, so object-fit:cover never actually crops. */
/* Uniform gallery grid: every album photo is an identical cell, so the album
   reads consistent and gallery-wall clean at ANY count or photo aspect. The
   cell is a gentle portrait (5:7) that matches the studio's portrait-shot
   interiors, so a normal photo loses only a sliver to object-fit:cover; the
   full uncropped frame opens in the lightbox. Columns scale up by viewport
   (2 → 3 → 4) further down. */
.ed-room-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  /* Centre a partial final row so a non-multiple-of-columns album never leaves
     a lopsided cream gap on the right — the trailing photos sit centred and
     deliberate. Full rows fill exactly, so this only affects the last row. */
  justify-content: center;
  align-content: flex-start;
}

.ed-room-grid a {
  display: block;
  overflow: hidden;
  position: relative;
  /* 2 columns by default: (100% − one 3px gap) ÷ 2. Wider viewports override
     the basis below to 3 then 4 columns. */
  flex: 0 0 calc((100% - 3px) / 2);
  max-width: calc((100% - 3px) / 2);
  aspect-ratio: 5 / 7;
  /* Warm matte: shows during image load-in, never a cold flash. */
  background: #efe9df;
}

.ed-room-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-room-grid a:hover img {
  transform: scale(1.02);
}

/* ───────────── Portfolio — immersive desktop showcase (WEB VIEW ONLY) ─────────────
   Frees the room grid + per-room galleries from the 1440 page cap so the photos
   fill the viewport (capped at 1920 → only thin rails on ultrawide). Photos read
   larger, labels become couture captions on hover. Mobile (≤760 / ≤560) untouched —
   guarded at min-width:1024 which sits above every mobile rule. */
/* ═══════════ Album grid — intelligent gapless layout (web view, ≥561px) ═══════════
   The old layout baked in "exactly 5 albums" via grid-column spans + nth-child(4/5),
   so any other album count left empty grid cells (the cream void). This replaces it
   with an order-preserving flex layout where flex-grow makes the LAST partial row's
   tiles expand to fill the full width — a lone album becomes a full-width banner.
   No empty cell is ever possible, for ANY album count. Mobile (≤560) keeps its own
   single-column rules below this. */
@media (min-width: 561px) {

  .ed-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: transparent;            /* no container fill → no cream void can show */
  }

  /* Every tile is a flexible 3-up cell; flex-grow fills any short trailing row.
     Override the legacy grid-column spans (incl. the nth-child(4/5) span-3). */
  .ed-rooms > .ed-room-tile,
  .ed-rooms > .ed-room-tile:nth-child(4),
  .ed-rooms > .ed-room-tile:nth-child(5) {
    grid-column: auto;
    flex: 1 1 calc(33.333% - 3px);
    min-width: min(100%, 340px);
    max-width: 100%;
  }

  /* Fixed-height tiles (object-fit cover) → a grown orphan gets WIDER, not taller.
     Uniform row height reads as a clean, justified editorial gallery. */
  .ed-rooms > .ed-room-tile > .ed-room-stack,
  .ed-rooms > .ed-room-tile:nth-child(4) > .ed-room-stack,
  .ed-rooms > .ed-room-tile:nth-child(5) > .ed-room-stack {
    aspect-ratio: auto;
    height: clamp(300px, 33vw, 540px);
  }
}

/* Mid widths: 3 identical photo cells per row */
@media (min-width: 900px) {
  .ed-room-grid a {
    flex-basis: calc((100% - 6px) / 3);
    max-width: calc((100% - 6px) / 3);
  }
}

@media (min-width: 1024px) {

  /* Break out of the centered 1440 .ed-body box → near-full-bleed, centered */
  .ed-rooms,
  .ed-room-gallery {
    width: min(100vw, 1920px);
    margin-inline: calc(min(50%, 960px) - min(50vw, 960px));
  }

  /* Near-full-bleed showcase: 4 large, identical photo cells per row */
  .ed-room-grid a {
    flex-basis: calc((100% - 9px) / 4);
    max-width: calc((100% - 9px) / 4);
  }

  /* Warm load-in on each tile (no cold mauve flash). NOT on the container —
     with a gapless flex grid there is no empty area for a fill to reveal. */
  .ed-room-tile,
  .ed-room-grid a {
    background: #efe9df;
  }

  /* Richer "enter the room" hover — deeper zoom, warm on-palette veil */
  .ed-room-tile:hover .ed-room-stack > img {
    transform: scale(1.055);
  }

  .ed-room-tile:hover::after {
    background: rgba(20, 14, 10, 0.10);
  }

  /* Clean photo by default; the room name reveals like a gallery plate on hover */
  .ed-room-label {
    opacity: 0;
    transform: translateY(8px);
    padding: 2rem 1.75rem 1.6rem;
    letter-spacing: 0.34em;
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }

  .ed-room-tile:hover .ed-room-label,
  .ed-room-tile:focus-visible .ed-room-label {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Room label — shown on desktop, hidden on very small screens */
.ed-room-label {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1rem 1rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.92);
  background: linear-gradient(to top, rgba(20, 14, 10, 0.82) 0%, rgba(20, 14, 10, 0.55) 45%, rgba(20, 14, 10, 0) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 5;
  transition: opacity 320ms var(--ease);
}

@media (max-width: 560px) {
  /* Tiles: single column, full-width, no gaps */
  .ed-rooms {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ed-room-tile,
  .ed-room-tile:nth-child(4),
  .ed-room-tile:nth-child(5) {
    grid-column: span 1;
    position: relative;
  }

  .ed-room-stack,
  .ed-room-tile:nth-child(4) .ed-room-stack,
  .ed-room-tile:nth-child(5) .ed-room-stack {
    aspect-ratio: 4 / 5;
  }

  /* Touch press feedback */
  .ed-room-tile:active .ed-room-stack > img {
    transform: scale(1.03);
  }

  .ed-room-tile:active::after {
    background: rgba(0, 0, 0, 0.18);
  }

  /* "+" tap indicator top-right corner — pulses to signal interactivity */
  .ed-room-tile::before {
    content: '+';
    position: absolute;
    top: 0.7rem;
    right: 0.85rem;
    z-index: 5;
    font-family: var(--font-body);
    font-size: 1.55rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    animation: ed-tap-plus-pulse 2.6s ease-in-out infinite;
    transform-origin: center;
  }

  /* Stagger the pulse per tile so they don't all breathe in sync */
  .ed-room-tile:nth-child(1)::before { animation-delay: 0s; }
  .ed-room-tile:nth-child(2)::before { animation-delay: 0.4s; }
  .ed-room-tile:nth-child(3)::before { animation-delay: 0.8s; }
  .ed-room-tile:nth-child(4)::before { animation-delay: 0.2s; }
  .ed-room-tile:nth-child(5)::before { animation-delay: 0.6s; }

  /* Room label: always visible on mobile (no hover) */
  .ed-room-label {
    display: block;
    padding-bottom: 1.2rem;
  }

  /* "view gallery" hint below room name — clear tap affordance */
  .ed-room-label::after {
    content: 'open album →';
    display: block;
    font-size: 0.47rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.62;
    margin-top: 0.28rem;
  }

  /* Gallery on phones: same uniform 2-up grid as the rest of the site, so the
     album stays perfectly consistent from phone to desktop — identical portrait
     cells, no ragged masonry. The base .ed-room-grid rules already define the
     grid + 5:7 cells; nothing to override here. Full frame opens in lightbox. */
}

/* Pulse animation for mobile tap affordance on room tiles */
@keyframes ed-tap-plus-pulse {
  0%, 100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {

  /* Disable pulse for users who prefer no motion */
  .ed-room-tile::before {
    animation: none !important;
  }

  .ed-room-stack>img,
  .ed-room-grid img {
    transition: none;
  }

  /* Neutralize hover-zoom entirely (not just snap it) for reduced-motion */
  .ed-room-tile:hover .ed-room-stack > img,
  .ed-room-grid a:hover img {
    transform: none;
  }
}

/* Rooms grid re-entry when user clicks Back */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ed-rooms-enter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #rooms.is-entering {
    animation: ed-rooms-enter 520ms 60ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* =====================================================
   Page transitions — Swup + @swup/parallel-plugin
   Persistent: .ed-mast, .ed-nav, .ed-foot
   Animated container: .ed-swap (id="swup")
   Old + new container coexist briefly; CSS Grid overlays
   them in the same row for a true crossfade — no blank
   middle, no layout shift.
   ===================================================== */

/* Body becomes a grid so two .ed-swap children can share the same cell
   during a parallel transition (overlap, not stack). Mast/nav/footer stay
   pinned via grid areas. */
body.ed-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "mast"
    "nav"
    "swap"
    "foot";
  min-height: 100dvh;
}

body.ed-page>.ed-mast {
  grid-area: mast;
}

body.ed-page>.ed-nav {
  grid-area: nav;
}

body.ed-page>.ed-swap {
  grid-area: swap;
}

body.ed-page>.ed-foot {
  grid-area: foot;
}

/* Resting transition for the swap container */
.ed-swap {
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  opacity: 1;
  transform: translateY(0);
}

/* Apply transitions only while a page change is happening — keeps interaction snappy at rest */
html.is-changing .ed-swap {
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Final state of the leaving page — fade with expressive upward drift */
.ed-swap.is-previous-container {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}

/* Initial state of entering page — eases in from below with presence */
.ed-swap.is-next-container {
  opacity: 0;
  transform: translateY(24px);
}

/* Whichever stacks above visually — next on top so its fade-in reads cleanly */
.ed-swap.is-next-container {
  z-index: 2;
}

.ed-swap.is-previous-container {
  z-index: 1;
}

/* Make link clicks feel instant even before swup hooks in */
a[href] {
  -webkit-tap-highlight-color: transparent;
}

/* NOTE: contain:layout style paint was removed — it suppressed transitionend
   events inside the containment boundary in some browsers (Chrome/Safari),
   causing SwupParallelPlugin to never remove is-next-container and leaving
   #swup stuck at opacity:0 on client-side nav to portfolio.html. */

@media (prefers-reduced-motion: reduce) {

  .ed-swap,
  .ed-swap.is-previous-container,
  .ed-swap.is-next-container {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Mobile: same ease-out curve as desktop + subtle Y-drift for physical depth.
   3–4 px movement barely registers on large screens but gives the crossfade
   the same sense of continuity that makes the desktop transition feel silky. */
@media (max-width: 720px) {
  .ed-swap,
  html.is-changing .ed-swap {
    transition:
      opacity 300ms cubic-bezier(0.33, 1, 0.68, 1),
      transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ed-swap.is-previous-container {
    transform: translateY(-3px);
  }

  .ed-swap.is-next-container {
    transform: translateY(4px);
  }
}

/* ============================================================
   Mobile burger menu — elegant editorial overlay
   Trigger: two-hairline glyph (not generic 3-line).
   Panel: full-bleed cream, Cormorant italic items + tracked numerals.
   Visible only ≤ 720px; desktop keeps inline .ed-nav.
   ============================================================ */

.ed-burger {
  position: relative;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 60;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.ed-burger::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 7px;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  pointer-events: none;
}

.ed-burger:hover::before,
.ed-burger:focus-visible::before {
  opacity: 0.11;
  transform: scale(1);
}

.ed-burger-lines {
  position: relative;
  width: 24px;
  height: 14px;
  display: block;
}

.ed-burger-lines::before,
.ed-burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition:
    transform 420ms var(--ease),
    top 320ms var(--ease) 80ms,
    bottom 320ms var(--ease) 80ms,
    opacity 220ms var(--ease);
}

.ed-burger-lines::before {
  top: 3px;
}

.ed-burger-lines::after {
  bottom: 3px;
}

.ed-burger:hover .ed-burger-lines::before,
.ed-burger:hover .ed-burger-lines::after {
  background: var(--accent);
}

.ed-burger:focus-visible {
  outline: none;
}

.ed-burger:focus-visible .ed-burger-lines::before,
.ed-burger:focus-visible .ed-burger-lines::after {
  background: var(--accent);
}

.ed-burger[aria-expanded="true"] .ed-burger-lines::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition:
    top 320ms var(--ease),
    transform 420ms var(--ease) 120ms;
  background: var(--fg);
}

.ed-burger[aria-expanded="true"] {
  /* position handled by mobile media query — no shift on open */
}

.ed-burger[aria-expanded="true"] .ed-burger-lines::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
  transition:
    bottom 320ms var(--ease),
    transform 420ms var(--ease) 120ms;
}

/* Mobile reveal — hide inline links, show trigger with breathing space */
@media (max-width: 720px) {
  .ed-nav {
    justify-content: flex-end;
    padding-top: clamp(1.75rem, 5.5vw, 2.5rem);
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
    padding-right: clamp(1.25rem, 4vw, 1.75rem);
    min-height: 72px;
  }

  .ed-nav>a {
    display: none;
  }

  .ed-burger {
    display: inline-flex;
    position: fixed;
    top: max(clamp(0.875rem, 3.5vw, 1.25rem), calc(env(safe-area-inset-top, 0px) + 0.5rem));
    right: max(clamp(1rem, 4vw, 1.5rem), calc(env(safe-area-inset-right, 0px) + 0.75rem));
    background: rgba(244, 241, 233, 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    border: 1px solid rgba(102, 88, 82, 0.18);
    box-shadow: 0 1px 12px rgba(102, 88, 82, 0.14);
    transition:
      background 400ms var(--ease),
      box-shadow 400ms var(--ease),
      backdrop-filter 400ms var(--ease);
  }

  .ed-burger.is-scrolled {
    background: rgba(244, 241, 233, 0.88);
    box-shadow: 0 1px 16px rgba(102, 88, 82, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .ed-burger[aria-expanded="true"] {
    background: rgba(244, 241, 233, 0.95);
    box-shadow: 0 0 0 1px rgba(102, 88, 82, 0.22), 0 2px 14px rgba(102, 88, 82, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

}

/* Overlay panel */
.ed-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:
    max(clamp(4.5rem, 14vw, 7rem), calc(env(safe-area-inset-top, 0px) + 4rem)) max(clamp(1.5rem, 6vw, 2.5rem), env(safe-area-inset-right, 0px)) max(clamp(2.5rem, 8vw, 3.5rem), calc(env(safe-area-inset-bottom, 0px) + 1rem)) max(clamp(1.5rem, 6vw, 2.5rem), env(safe-area-inset-left, 0px));
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 480ms var(--ease),
    visibility 0s linear 480ms;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ed-menu[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 480ms var(--ease),
    visibility 0s linear 0s;
}

/* Navigation exit: fires when a menu link triggers a page change.
   Quick opacity fade instead of slide-out so Swup's crossfade
   is the dominant visual event and the new page is revealed cleanly. */
.ed-menu.is-nav-exit {
  opacity: 0 !important;
  transform: none !important;
  transition:
    opacity 180ms cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear 180ms !important;
}

.ed-menu-logo {
  display: block;
  width: clamp(90px, 34vw, 150px);
  height: auto;
  margin: 0 auto clamp(1.4rem, 4.5vw, 2rem);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 520ms var(--ease) 80ms,
    transform 600ms var(--ease) 80ms;
  pointer-events: none;
  user-select: none;
}

.ed-menu[aria-hidden="false"] .ed-menu-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ed-menu-rule {
  width: 32px;
  height: 1px;
  background: var(--border-strong);
  margin-bottom: clamp(1.6rem, 5vw, 2.5rem);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 440ms var(--ease) 160ms, transform 520ms var(--ease) 160ms;
}

.ed-menu[aria-hidden="false"] .ed-menu-rule {
  opacity: 0.7;
  transform: scaleX(1);
}

.ed-menu-list {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.35rem, 4.5vw, 2rem);
  width: 100%;
}

.ed-menu-list li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
  width: 100%;
  text-align: center;
}

.ed-menu[aria-hidden="false"] .ed-menu-list li {
  opacity: 1;
  transform: translateY(0);
}

.ed-menu[aria-hidden="false"] .ed-menu-list li:nth-child(1) {
  transition-delay: 200ms;
}

.ed-menu[aria-hidden="false"] .ed-menu-list li:nth-child(2) {
  transition-delay: 270ms;
}

.ed-menu[aria-hidden="false"] .ed-menu-list li:nth-child(3) {
  transition-delay: 340ms;
}

.ed-menu[aria-hidden="false"] .ed-menu-list li:nth-child(4) {
  transition-delay: 410ms;
}

.ed-menu-list a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0;
  color: var(--fg);
  opacity: 0.88;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 280ms var(--ease), color 280ms var(--ease);
}

.ed-menu-list a:hover,
.ed-menu-list a:focus-visible,
.ed-menu-list a[aria-current="page"] {
  opacity: 1;
  color: var(--accent);
  outline: none;
}

.ed-menu-list .ed-menu-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  font-feature-settings: "liga", "calt", "dlig";
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
}

.ed-menu-list .ed-menu-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 420ms var(--ease), opacity 280ms var(--ease);
  opacity: 0.65;
}

.ed-menu-list a:hover .ed-menu-label::after,
.ed-menu-list a:focus-visible .ed-menu-label::after {
  width: 56px;
  opacity: 0.75;
}

.ed-menu-list a[aria-current="page"] .ed-menu-label::after {
  width: 100%;
  height: 1.5px;
  opacity: 1;
}

.ed-menu-foot {
  padding-top: clamp(2rem, 6vw, 3rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--border);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 440ms var(--ease) 420ms, transform 440ms var(--ease) 420ms;
}

.ed-menu[aria-hidden="false"] .ed-menu-foot {
  opacity: 1;
  transform: translateY(0);
}

.ed-menu-foot a {
  color: var(--fg);
}

.ed-menu-foot a:hover {
  color: var(--accent);
}

.ed-menu-foot .ed-menu-mark {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* Lock body scroll while menu open */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

@media (min-width: 721px) {
  .ed-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ed-menu,
  .ed-menu *,
  .ed-burger-lines::before,
  .ed-burger-lines::after {
    transition: none !important;
  }

  .ed-menu {
    transform: translateX(0);
  }

  .ed-menu[aria-hidden="true"] {
    display: none;
  }
}

/* ============================================================
   HOME PAGE HERO — centered logo + overlaid nav (desktop)
   ============================================================ */

/* Desktop: center brand logo in the hero */
@media (min-width: 721px) {

  .ed-mast a.ed-mast-brand,
  .ed-mast a.ed-mast-brand:hover,
  .ed-mast a.ed-mast-brand:focus-visible,
  .ed-mast a.ed-mast-brand:active {
    left: 50%;
    transform: translateX(-50%);
    top: clamp(2.5rem, 6vh, 4.5rem);
    flex-direction: column;
    gap: 0;
  }

  .ed-mast-plus {
    display: none;
  }

  .ed-mast a img.ed-mast-lockup {
    width: calc(clamp(166px, 21.23vw, 284px) * var(--mast-logo-scale, 1));
  }

  /* Hero nav — centered, overlaid on image */
  body.ed-home .ed-mast-nav {
    position: absolute;
    z-index: 2;
    top: clamp(8.5rem, 19vh, 14rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.8rem);
    white-space: nowrap;
    padding-top: clamp(0.6rem, 0.9vw, 0.85rem);
    border-top: 1px solid rgba(244, 241, 233, 0.32);
  }

  body.ed-home .ed-mast-nav a,
  body.ed-home .ed-mast-nav a:hover,
  body.ed-home .ed-mast-nav a:focus-visible,
  body.ed-home .ed-mast-nav a:active {
    position: static;
    top: auto;
    left: auto;
    display: block;
    font-family: var(--font-body);
    font-size: clamp(0.68rem, 0.78vw, 0.82rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(244, 241, 233, 0.80);
    text-decoration: none;
    transition: color 280ms ease, opacity 280ms ease;
    transform: none;
    opacity: 1;
  }

  body.ed-home .ed-mast-nav a:hover,
  body.ed-home .ed-mast-nav a[aria-current="page"] {
    color: rgba(244, 241, 233, 0.97);
  }

  /* Desktop home: sticky nav bar appears after hero scrolls past */
  body.ed-home>.ed-nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--bg);
    border-bottom: 1px solid rgba(102, 88, 82, 0.10);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
  }
}

/* Mobile: hero nav hidden (burger handles mobile nav) */
.ed-mast-nav {
  display: none;
}

/* ============================================================
   HOME INTRO — mark · kicker · big italic name
   ============================================================ */
.ed-home-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--section-x) clamp(1.5rem, 3vw, 2.5rem);
}

.ed-home-intro-mark {
  width: clamp(120px, 16vw, 200px);
  display: block;
  margin: 0 auto clamp(1.1rem, 1.8vw, 1.6rem);
  opacity: 0.45;
}

.ed-home-intro-kicker {
  font-family: var(--font-body);
  font-size: clamp(0.66rem, 0.75vw, 0.76rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 clamp(0.6rem, 1.2vw, 1rem);
}

.ed-home-intro-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 400;
  line-height: 1.0;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================================
   HOME MOBILE — centered XXL logo, no + sign
   ============================================================ */
@media (max-width: 720px) {
  body.ed-home .ed-mast-plus {
    display: none;
  }

  /* Extended hero — ABOUT ME just peeks at viewport bottom. Middle term
     respects the CMS --mast-height control (dead until this fix) while
     keeping 78dvh as the ceiling so the default behavior is unchanged. */
  body.ed-home .ed-mast {
    height: clamp(340px, min(78dvh, var(--mast-height, 100dvh)), 640px);
    min-height: clamp(340px, min(78dvh, var(--mast-height, 100dvh)), 640px);
    max-height: clamp(340px, min(78dvh, var(--mast-height, 100dvh)), 640px);
  }

  /* Logo: top-center, larger — Moniomi-style overlay */
  body.ed-home .ed-mast-brand,
  body.ed-home .ed-mast-brand:hover,
  body.ed-home .ed-mast-brand:focus-visible,
  body.ed-home .ed-mast-brand:active {
    left: 50%;
    top: clamp(1.75rem, 5vh, 3rem);
    transform: translateX(-50%);
  }

  body.ed-home .ed-mast a img.ed-mast-lockup {
    width: calc(clamp(220px, 66vw, 330px) * var(--mast-logo-scale, 1));
  }

  /* Collapse empty nav strip on mobile home */
  body.ed-home>.ed-nav {
    min-height: 0;
    height: 0;
    padding: 0;
    border: none;
    box-shadow: none;
  }

  /* Burger: always-visible frosted pill on home hero (dark bg) */
  body.ed-home .ed-burger {
    background: rgba(244, 241, 233, 0.82);
    box-shadow: 0 1px 16px rgba(102, 88, 82, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Intro band — tight top so mark + ABOUT ME sit near bottom of viewport */
  .ed-home-intro {
    padding: clamp(0.75rem, 3vw, 1.25rem) var(--section-x) clamp(0.75rem, 3vw, 1.25rem);
    background: var(--bg);
  }

  /* Pull about section closer — remove default section-y top padding on home mobile */
  body.ed-home .ed-about {
    padding-block-start: clamp(1rem, 4vw, 1.75rem);
  }

  .ed-home-intro-mark {
    width: clamp(90px, 60vw, 180px);
    opacity: 0.55;
    margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
  }

  .ed-home-intro-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.42em;
    margin-bottom: clamp(0.75rem, 2.5vw, 1.1rem);
  }

  .ed-home-intro-title {
    display: block;
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    color: var(--fg);
    letter-spacing: -0.02em;
  }

  /* All pages mobile: center logo, hide + sign */
  .ed-mast-plus {
    display: none !important;
  }

  .ed-mast a,
  .ed-mast a:hover,
  .ed-mast a:focus-visible,
  .ed-mast a:active {
    left: 50%;
    transform: translateX(-50%);
    top: clamp(1.25rem, 4vh, 2.25rem);
  }

  body:not(.ed-home) .ed-mast a img.ed-mast-lockup {
    width: calc(clamp(220px, 66vw, 330px) * var(--mast-logo-scale, 1));
  }

  /* Collapse nav strip on all inner pages mobile (burger is fixed) */
  body:not(.ed-home) > .ed-nav {
    min-height: 0;
    height: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
  }

  /* ── Mobile splash: logo stacked above enter, scrim active ── */
  .ed-splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
    animation: edSplashIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }

  .ed-splash-logo {
    width: clamp(180px, 58vw, 260px);
    filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.45));
    opacity: 0.96;
  }

  .ed-splash-enter {
    white-space: nowrap;
    font-size: 0.92rem;
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  }
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.ed-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 12, 4, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  overscroll-behavior: contain;
  /* Base transition = exit speed: the room clears quickly */
  transition: opacity 240ms ease;
}

.ed-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  /* Entry is slower than exit — the viewer settles in with weight */
  transition: opacity 480ms ease;
}

/* Stage wraps the photo so drag / slide transforms don't fight flex centering */
.ed-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(95vw, 1680px);
  max-height: 74svh;
  margin-bottom: 9rem; /* reserve clear space above the filmstrip + panel below */
  will-change: transform;
}

.ed-lightbox-img {
  max-width: min(95vw, 1680px);
  max-height: 74svh;
  object-fit: contain;
  border-radius: 2px;
  display: block;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.65);
  transform: translateY(16px) scale(0.955);
  opacity: 0;
  /* Exit: quick, weightless */
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}

.ed-lightbox.is-open .ed-lightbox-img {
  transform: translateY(0) scale(1);
  opacity: 1;
  /* Entry: the frame rises and settles — long expo tail */
  transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1), opacity 480ms ease;
}

/* Blur-up: cached thumb is softened until the HD frame decodes in */
.ed-lightbox-img.is-loading {
  filter: blur(8px) saturate(1.04);
}

/* Loading shimmer ring, shown only while the HD frame is in flight */
.ed-lightbox-spin {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.ed-lightbox-stage.is-busy .ed-lightbox-spin {
  opacity: 1;
  animation: ed-lb-spin 720ms linear infinite;
}

@keyframes ed-lb-spin { to { transform: rotate(360deg); } }

/* Frame counter — "03 / 06" */
.ed-lightbox-counter {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 1.15rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.ed-lightbox.is-open .ed-lightbox-counter {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 420ms 260ms ease, transform 420ms 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ed-lightbox-img { transition: opacity 200ms ease; transform: none; }
  .ed-lightbox.is-open .ed-lightbox-img { transform: none; }
  .ed-lightbox-spin { animation: none; }
}

.ed-lightbox-close {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 1rem);
  right: max(env(safe-area-inset-right, 0px), 1rem);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px; /* chrome speaks the site's rectangular couture language */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
  line-height: 1;
  transition: background 200ms, border-color 200ms;
  -webkit-tap-highlight-color: transparent;
}

.ed-lightbox-close:hover,
.ed-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

/* Prev / Next arrows */
.ed-lightbox-prev,
.ed-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Soft scrim so the control stays legible over light-coloured photo edges */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  transition: background 220ms, border-color 220ms, opacity 220ms;
  -webkit-tap-highlight-color: transparent;
}

.ed-lightbox-prev { left: max(env(safe-area-inset-left, 0px), 1rem); }
.ed-lightbox-next { right: max(env(safe-area-inset-right, 0px), 1rem); }

.ed-lightbox-prev:hover,
.ed-lightbox-next:hover,
.ed-lightbox-prev:focus-visible,
.ed-lightbox-next:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

.ed-lightbox-prev[disabled],
.ed-lightbox-next[disabled] {
  opacity: 0.2;
  cursor: default;
}

/* Bottom panel: filmstrip rail + (Gallery / CTA) row, stacked */
.ed-lightbox-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4.5rem
           max(env(safe-area-inset-right, 0px), 1.5rem)
           max(env(safe-area-inset-bottom, 0px), 1.25rem)
           max(env(safe-area-inset-left, 0px), 1.5rem);
  background: linear-gradient(to top, rgba(12, 7, 3, 0.94) 46%, rgba(12, 7, 3, 0.5) 78%, transparent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  /* Exit: no lag, clears with the image */
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.ed-lb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Filmstrip rail — every photo in the album, current one lit */
.ed-lightbox-film {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Standalone PWA: keep rail scroll from chaining into iOS edge-swipe */
  overscroll-behavior-x: contain;
}

.ed-lightbox-film::-webkit-scrollbar { display: none; }
.ed-lightbox-film[hidden] { display: none; }

.ed-film-thumb {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: #efe9df;
  opacity: 0.6;
  scroll-snap-align: center;
  outline: 1.5px solid transparent;
  outline-offset: 0;
  transition: opacity 240ms ease, outline-color 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

.ed-film-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ed-film-thumb:hover,
.ed-film-thumb:focus-visible { opacity: 0.85; outline: none; }

.ed-film-thumb.is-active {
  opacity: 1;
  outline-color: rgba(255, 255, 255, 0.92);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .ed-film-thumb { width: 46px; height: 46px; }
  .ed-lightbox-stage,
  .ed-lightbox-img { max-height: 70svh; }
  .ed-lightbox-stage { margin-bottom: 8rem; }
}

/* Installed app (standalone): no browser chrome above — top controls get a
   touch more clearance beyond the raw notch/status-bar inset */
@media (display-mode: standalone) {
  .ed-lightbox-close {
    top: calc(max(env(safe-area-inset-top, 0px), 1rem) + 0.35rem);
  }

  .ed-lightbox-counter {
    top: calc(max(env(safe-area-inset-top, 0px), 1.15rem) + 0.35rem);
  }
}

.ed-lightbox.is-open .ed-lightbox-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Entry: follows the frame in, staggered */
  transition: opacity 420ms 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 420ms 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Back to gallery button */
.ed-lightbox-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 220ms, border-color 220ms;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.ed-lightbox-back::before {
  content: '←';
  font-style: normal;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-lightbox-back:hover,
.ed-lightbox-back:focus-visible {
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}

.ed-lightbox-back:hover::before {
  transform: translateX(-3px);
}

.ed-lightbox-back:active {
  transform: scale(0.97);
}


.ed-lightbox-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid transparent;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 220ms, border-color 220ms;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.ed-lightbox-cta:hover,
.ed-lightbox-cta:focus-visible {
  background: var(--fg);
  opacity: 1;
  outline: none;
}

.ed-lightbox-cta::after {
  content: '→';
  font-style: normal;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-lightbox-cta:hover::after {
  transform: translateX(3px);
}

@media (max-width: 560px) {
  .ed-lightbox-prev { left: 0.5rem; }
  .ed-lightbox-next { right: 0.5rem; }

  .ed-lightbox-panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem max(env(safe-area-inset-bottom, 0px), 1.25rem);
  }

.ed-lightbox-back,
  .ed-lightbox-cta {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  .ed-lightbox-img {
    max-height: calc(88svh - 100px);
  }
}

/* ============================================================
   MOBILE ENHANCEMENT PASS v2 — touch targets · footer · safe areas
   ============================================================ */

/* ── Global tap-highlight suppression for nav/interactive elements ── */
.splash-nav a,
.splash-foot a,
.splash-nav-strip a,
.footer-grid a,
.interiors-nav a,
.cc-arrow {
  -webkit-tap-highlight-color: transparent;
}

/* ── Touch targets: 44px minimum on mobile ── */
@media (max-width: 720px) {

  /* Splash hero nav links — bump from ~24px to 44px tall */
  .splash-nav a {
    padding: 0.7rem 0.5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Interiors page nav links — bump from ~30px to 44px */
  .interiors-nav a {
    padding: 0.65rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Contact carousel prev/next arrows — 38px → 44px */
  .cc-arrow {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Footer: single-column at very small screens ── */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
}

/* ── Splash foot: safe-area insets + bottom clearance on small screens ── */
@media (max-width: 480px) {
  .splash-foot {
    bottom: max(env(safe-area-inset-bottom, 0px), 1.25rem);
    padding-inline: max(env(safe-area-inset-left, 0px), 1rem)
                    max(env(safe-area-inset-right, 0px), 1rem);
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ── Home + inner page mastheads: shrink to let nav peek at bottom (desktop only) ───────── */
@media (min-width: 721px) {
  body.ed-home .ed-mast,
  body.ed-page:not(.ed-home) .ed-mast {
    height: calc(100dvh - clamp(0.5rem, 1.25vw, 1rem) - 1.6rem - clamp(0.85rem, 1.5vw, 1.1rem));
    min-height: calc(100dvh - clamp(0.5rem, 1.25vw, 1rem) - 1.6rem - clamp(0.85rem, 1.5vw, 1.1rem));
    max-height: calc(100dvh - clamp(0.5rem, 1.25vw, 1rem) - 1.6rem - clamp(0.85rem, 1.5vw, 1.1rem));
  }
}

/* ── Nav: elegant animated underline on hover/active ─────────────────────── */
.ed-nav a::before {
  content: "";
  position: absolute;
  inset: auto 0.1rem -0.45rem 0.1rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-nav a:hover::before {
  transform: scaleX(1);
}

/* Active link: draw-in plays via CSS transition when aria-current is set by JS */
.ed-nav a[aria-current="page"]::before {
  transform: scaleX(1);
}
/* ───────────────────────────────────────────────────────────────────────────
   Performance hardening — appended 2026-05-22
   Goal: prevent mobile/iOS crashes as image count and traffic scale.

   1. Offscreen `.ed-cell` tiles use `content-visibility: auto` so the
      browser skips layout + paint until they scroll near the viewport.
      Drops idle CPU + memory on gallery pages with many photos.

   2. Expensive blur / backdrop-filter rules are downgraded on small
      screens, slow connections, and `prefers-reduced-data` users.
      iOS Safari compositing is the most common crash vector here.

   3. `prefers-reduced-data` users get the lightest treatment — no
      animations beyond opacity, no blurs, no filters.
   ─────────────────────────────────────────────────────────────────────── */

/* (1) Defer offscreen tiles ─ keeps memory in check on long galleries */
.ed-cell,
.ed-room-grid > a,
.ed-strip > * {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* (2) Mobile: drop the heaviest blurs to spare iOS compositing */
@media (max-width: 720px) {
  .ed-nav,
  .ed-menu,
  .ed-burger,
  .ed-foot,
  .ed-lightbox,
  .ed-lightbox-overlay,
  .ed-room-gallery {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ed-reveal,
  .ed-mast-scrim {
    filter: none !important;
  }
}

/* (3) Data-saver: minimal motion + zero blur */
@media (prefers-reduced-data: reduce) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ============================================================
   MOBILE UX POLISH PASS — v22 / 2026-05-25
   Scope: max-width: 720px (phone breakpoint).
   Only adds or overrides within mobile breakpoints; desktop
   styles are untouched.
   ============================================================ */

/* ── 1. Burger menu: tap-outside backdrop to dismiss ────────── */
/* Invisible full-screen overlay sits behind the panel (z-index 54)
   and above all page content (z-index 53). Tapping it fires closeMenu(). */
.ed-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 54;
  background: transparent;
  cursor: default;
}

@media (max-width: 720px) {
  body.menu-open .ed-menu-backdrop {
    display: block;
  }
}

/* ── 2. Inner-page masthead mobile: cap height so content is reachable ── */
/* On home the height is already shortened (78dvh). On all other pages
   (portfolio, studio, contact) .ed-mast still claims 100dvh on mobile,
   forcing users to scroll past a full viewport of image before any
   content is visible. Clamp to 56dvh so 40-50% of content peeks. */
@media (max-width: 720px) {
  body.ed-page:not(.ed-home) .ed-mast {
    height: clamp(280px, min(56dvh, var(--mast-height, 100dvh)), 520px);
    min-height: clamp(280px, min(56dvh, var(--mast-height, 100dvh)), 520px);
    max-height: clamp(280px, min(56dvh, var(--mast-height, 100dvh)), 520px);
  }
}

/* ── 3. Form inputs ≥ 16px — prevent iOS auto-zoom on focus ──── */
/* All text inputs, textareas, and selects on the site must be at least
   16px on mobile. The editorial form uses 0.95rem (~15.2px), which is
   just enough to trigger Safari's zoom-on-focus behaviour. */
@media (max-width: 720px) {
  /* Editorial contact form (.ed-field) */
  .ed-field input,
  .ed-field textarea,
  .ed-field select {
    font-size: 1rem; /* 16px exactly */
  }

  /* Legacy form (.field, .cf-field) */
  .field input,
  .field select,
  .field textarea,
  .cf-field input,
  .cf-field textarea,
  .cf-field select {
    font-size: 1rem;
  }
}

/* ── 4. Submit button: full-width pill on mobile ─────────────── */
@media (max-width: 720px) {
  /* Editorial form submit row */
  .ed-submit {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .ed-submit button {
    width: 100%;
    justify-content: center;
  }

  .ed-submit .ed-note {
    text-align: center;
  }

  /* Success card CTA row */
  .ed-success-cta button {
    width: 100%;
    justify-content: center;
  }

  /* Legacy form-submit row (contact.html older variant) */
  .form-submit {
    flex-direction: column;
    align-items: stretch;
  }

  .form-submit .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 5. Portfolio room tiles: 2-col between 560-720px ───────── */
/* At 560px the rooms go to 1 col. Between 560-720px the 6-col
   grid still shows 3 tiles per row — too small on ~375-560px phones. */
@media (max-width: 720px) and (min-width: 561px) {
  .ed-rooms {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }

  .ed-room-tile {
    grid-column: span 2;
  }

  .ed-room-tile:nth-child(4),
  .ed-room-tile:nth-child(5) {
    grid-column: span 2;
  }

  .ed-room-stack,
  .ed-room-tile:nth-child(4) .ed-room-stack,
  .ed-room-tile:nth-child(5) .ed-room-stack {
    aspect-ratio: 4 / 5;
  }

  /* Touch press feedback at this size too */
  .ed-room-tile:active .ed-room-stack > img {
    transform: scale(1.03);
  }

  .ed-room-tile:active::after {
    background: rgba(0, 0, 0, 0.16);
  }

  /* Show "+" indicator — pulsing for tap affordance */
  .ed-room-tile::before {
    content: '+';
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    z-index: 5;
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.82);
    pointer-events: none;
    animation: ed-tap-plus-pulse 2.6s ease-in-out infinite;
    transform-origin: center;
  }

  .ed-room-tile:nth-child(1)::before { animation-delay: 0s; }
  .ed-room-tile:nth-child(2)::before { animation-delay: 0.4s; }
  .ed-room-tile:nth-child(3)::before { animation-delay: 0.8s; }
  .ed-room-tile:nth-child(4)::before { animation-delay: 0.2s; }
  .ed-room-tile:nth-child(5)::before { animation-delay: 0.6s; }

  .ed-room-label {
    display: block;
    padding-bottom: 1rem;
  }

  /* "view gallery" hint below room name */
  .ed-room-label::after {
    content: 'open album →';
    display: block;
    font-size: 0.45rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.6;
    margin-top: 0.25rem;
  }
}

/* ── 6. Lightbox prev/next arrows: min 44×44px ───────────────── */
@media (max-width: 720px) {
  .ed-lightbox-prev,
  .ed-lightbox-next {
    width: 2.75rem;  /* 44px */
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* ── 7. Horizontal overflow guard ────────────────────────────── */
/* Prevent any child from punching past viewport width. */
@media (max-width: 720px) {
  /* Use `clip`, not `hidden`. overflow-x:hidden on the scroll root forces
     overflow-y to compute as `auto`, turning html/body into a self-sized
     scroll container that iOS Safari then refuses to scroll. `clip` guards
     horizontal overflow without creating a scroll container. */
  html,
  body {
    overflow-x: clip;
    max-width: 100vw;
  }

  .ed-page {
    overflow-x: clip;
  }
}

/* ── 8. Typography: readable min sizes on 375px screens ─────── */
@media (max-width: 720px) {
  /* Home intro kicker: clamp min was 0.66rem (sub-12px) */
  .ed-home-intro-kicker {
    font-size: clamp(0.72rem, 2.5vw, 0.82rem);
    letter-spacing: 0.28em;
  }

  /* Display headline min size */
  .display {
    font-size: clamp(2.4rem, 9vw, 4.5rem);
  }

  /* Lead text: ensure comfortable line length */
  .lead {
    max-width: 100%;
  }

  /* Paragraph max-width: unrestricted on mobile */
  p {
    max-width: 100%;
  }
}

/* ── 9. Touch targets: gallery jump chips, nav footer links ──── */
@media (max-width: 720px) {
  /* Gallery jump links */
  .gallery-jump a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
  }

  /* Footer nav links */
  .ed-foot-nav a {
    padding: 0.5rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Mini-footer links */
  .mf-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 0.25rem;
  }

  /* Filter chips on portfolio/gallery */
  .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
  }

  /* Gallery jump anchor chips */
  .gallery-jump a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Splash nav links — already patched, reinforce */
  .splash-nav-strip a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Page nav links */
  .pn-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Interiors nav */
  .interiors-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Ed-menu foot links */
  .ed-menu-foot a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0.35rem;
  }
}

/* ── 10. Scroll: safe-area insets for notch / home bar ────────── */
/* The footer already uses env() but the body/html don't, which can
   cause content to clip under the home indicator on iPhone. */
@media (max-width: 720px) {
  /* Ensure footer padding clears iOS home bar */
  .ed-foot {
    padding-bottom: max(clamp(1.25rem, 1.75vw, 1.5rem), calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  }

  /* Quiet footer on secondary pages */
  .quiet-footer {
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem));
  }

  /* Mini footer */
  .mini-footer {
    padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  }

  /* Site footer (old variant) */
  .site-footer {
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem));
  }
}

/* ── 11. Skeleton tiles: match actual grid on mobile ─────────── */
/* Between 560-720px the skeleton was still using old sizing. */
@media (max-width: 720px) and (min-width: 561px) {
  .ed-rooms-skeleton {
    grid-template-columns: repeat(4, 1fr);
  }

  .ed-rooms-skeleton .ed-skel-tile,
  .ed-rooms-skeleton .ed-skel-tile:nth-child(4),
  .ed-rooms-skeleton .ed-skel-tile:nth-child(5) {
    grid-column: span 2;
  }

  .ed-rooms-skeleton .ed-skel-tile::before,
  .ed-rooms-skeleton .ed-skel-tile:nth-child(4)::before,
  .ed-rooms-skeleton .ed-skel-tile:nth-child(5)::before {
    aspect-ratio: 4 / 5;
  }
}

/* ── 12. Nav active state: aria-current visible in burger menu ── */
/* The ::after underline already works but the color is faint in
   some rendering contexts. Reinforce with a bolder accent. */
.ed-menu-list a[aria-current="page"] {
  color: var(--accent);
  opacity: 1;
}

.ed-menu-list a[aria-current="page"] .ed-menu-label::after {
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  opacity: 1;
}

/* ── 13. Gallery strip skeleton: match 2-col at ≤520px ─────── */
/* .ed-strip goes to 1fr 1fr at 520px but skeleton stays 3-col */
@media (max-width: 520px) {
  .ed-strip-skeleton {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 14. Lightbox image: account for bottom panel on mobile ──── */
@media (max-width: 720px) {
  .ed-lightbox-img {
    max-height: calc(85svh - 80px);
  }
}

/* ── 15. Ed-menu list tap area: ensure full row is tappable ──── */
.ed-menu-list li {
  /* Items already center-aligned; ensure each list item has a
     generous tap zone on both sides */
}

@media (max-width: 720px) {
  .ed-menu-list a {
    padding: 0.55rem 1.5rem;
    min-height: 52px; /* Generous — these are primary navigation items */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   16. Shared button component + homepage lede + portfolio CTA
   Calm-luxury actions in the locked palette
   (#F4F1E9 / #A08A80 / #665852). Restrained, fixed-fee energy.
   ============================================================ */
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: clamp(0.66rem, 0.78vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--fg);
  border-radius: 999px;
  color: var(--fg);
  background: transparent;
  cursor: pointer;
  transition: background 360ms var(--ease), color 360ms var(--ease),
    border-color 360ms var(--ease), transform 360ms var(--ease);
}
.ed-btn span { transition: transform 360ms var(--ease); }
.ed-btn:hover,
.ed-btn:focus-visible { transform: translateY(-1px); }
.ed-btn:hover span,
.ed-btn:focus-visible span { transform: translateX(4px); }
.ed-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.ed-btn--solid {
  background: var(--fg);
  color: var(--on-accent);
  border-color: var(--fg);
}
.ed-btn--solid:hover,
.ed-btn--solid:focus-visible { background: #564a45; border-color: #564a45; }

.ed-btn--ghost { background: transparent; color: var(--fg); }
.ed-btn--ghost:hover,
.ed-btn--ghost:focus-visible { background: rgba(102, 88, 82, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .ed-btn,
  .ed-btn span { transition: none; }
  .ed-btn:hover,
  .ed-btn:focus-visible { transform: none; }
}

/* ── Homepage lede: explicit positioning + primary actions ──── */
.ed-home-lede {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--section-x) clamp(1rem, 2.5vw, 2rem);
  max-width: 60rem;
  margin-inline: auto;
}
.ed-home-lede .ed-home-intro-title {
  max-width: 18ch;
}
.ed-home-lede-sub {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
  max-width: 44ch;
  opacity: 0.86;
}
.ed-home-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}
.ed-trust {
  list-style: none;
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 0;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 52rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.ed-trust li {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 0.74vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .ed-home-lede { padding-top: clamp(1.75rem, 7vw, 3rem); }
  .ed-trust {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
    gap: 1rem 1.25rem;
  }
}

/* ── Post-portfolio CTA → Services + Contact ─────────────────── */
.ed-portfolio-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  padding: clamp(3rem, 7vw, 5.5rem) var(--section-x) clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}
.ed-portfolio-cta .ed-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--fg);
  margin: 0;
  max-width: 20ch;
}
.ed-portfolio-cta .ed-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--fg);
  opacity: 0.82;
  margin: 0;
  max-width: 42ch;
}
.ed-portfolio-cta .ed-home-cta { margin-top: 0.6rem; }

/* ── Room tile "open album →" affordance on desktop (hover/focus).
   Touch devices keep the always-visible hint defined in the mobile
   blocks above. Only pointer-fine devices get the hover reveal. ── */
@media (hover: hover) and (pointer: fine) {
  .ed-room-label::after {
    content: 'open album →';
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 0.3rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 360ms var(--ease), transform 360ms var(--ease);
  }
  .ed-room-tile:hover .ed-room-label::after,
  .ed-room-tile:focus-visible .ed-room-label::after {
    opacity: 0.82;
    transform: translateY(0);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .ed-room-label::after { transition: none; transform: none; }
}

/* ── Contact: optional-field hint + privacy reassurance ──────── */
.ed-field-optional {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.5rem;
}
.ed-form-privacy {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0.25rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ed-form-privacy svg { flex: none; opacity: 0.7; }

/* ============================================================
   HOME STUDIO STATEMENT — editorial bridge between hero & about
   mark · kicker · display-italic line · descending hairline
   (overrides legacy .ed-home-intro; higher specificity via body.ed-home)
   ============================================================ */
body.ed-home .ed-home-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.9rem, 1.9vw, 1.5rem);
  padding: clamp(3.5rem, 8.5vw, 7rem) var(--section-x) clamp(0.25rem, 1.5vw, 1rem);
  max-width: 52rem;
  margin-inline: auto;
}

body.ed-home .ed-home-intro-mark {
  width: clamp(112px, 12.5vw, 176px);
  margin: 0 0 clamp(0.6rem, 1.4vw, 1.2rem);
  opacity: 0.82;
}

/* Tighten the intro→about gap on home so the masthead-click landing can frame
   the home-intro logo (clear of the nav) AND the VIEW PORTFOLIO button together. */
body.ed-home .ed-about {
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

body.ed-home .ed-home-intro-kicker {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 0.72vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.ed-home-statement {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 4.4vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.ed-home-statement em {
  font-style: italic;
  color: var(--accent);
}

.ed-home-rule {
  display: block;
  width: 1px;
  height: clamp(46px, 7vw, 82px);
  margin-top: clamp(1.5rem, 3.4vw, 2.75rem);
  background: linear-gradient(to bottom, var(--border-strong) 0%, rgba(102, 88, 82, 0) 100%);
}

/* staggered reveal — keyed off section .is-in (matches codebase reveal pattern) */
.ed-home-intro .ed-home-intro-mark,
.ed-home-intro .ed-home-intro-kicker,
.ed-home-intro .ed-home-statement,
.ed-home-intro .ed-home-rule {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.ed-home-intro.is-in .ed-home-intro-mark { opacity: 0.82; transform: none; transition-delay: 60ms; }
.ed-home-intro.is-in .ed-home-intro-kicker { opacity: 1; transform: none; transition-delay: 220ms; }
.ed-home-intro.is-in .ed-home-statement { opacity: 1; transform: none; transition-delay: 340ms; }
.ed-home-intro.is-in .ed-home-rule { opacity: 1; transform: none; transition-delay: 600ms; }

@media (max-width: 720px) {
  body.ed-home .ed-home-intro {
    padding: clamp(3rem, 13vw, 4.5rem) var(--section-x) clamp(0.25rem, 2vw, 0.75rem);
  }
  body.ed-home .ed-home-intro-mark {
    width: clamp(100px, 38vw, 160px);
  }
  .ed-home-statement {
    font-size: clamp(1.7rem, 8.4vw, 2.5rem);
    max-width: 17ch;
  }
  .ed-home-rule { height: clamp(40px, 12vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-home-intro .ed-home-intro-mark,
  .ed-home-intro .ed-home-intro-kicker,
  .ed-home-intro .ed-home-statement,
  .ed-home-intro .ed-home-rule {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ed-home-intro .ed-home-intro-mark { opacity: 0.82; }
}

/* ============================================================
   17. Content image fade-in on load
   Targets room-tile covers, room-gallery / strip images, and
   the About portrait. JS adds .lcs-img-fade on first encounter
   then .lcs-img-ready once the image fires its load event.
   No layout shift: images already fill their intrinsic container
   (position:absolute / object-fit:cover) so opacity:0 takes no
   space and the placeholder bg colour shows through.
   ============================================================ */
.lcs-img-fade {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lcs-img-fade.lcs-img-ready {
  opacity: 1;
}

/* Under reduced motion: show immediately — no fade, no stuck-invisible */
@media (prefers-reduced-motion: reduce) {
  .lcs-img-fade,
  .lcs-img-fade.lcs-img-ready {
    opacity: 1;
    transition: none;
  }
}

/* ============================================================
   18. Hover + focus micro-interactions
   Refinements on top of existing states: warm fill on the base
   pill button, smooth label-colour lift on focused form fields.
   Room tile cover zoom and label reveal already exist (section 8
   above) and are preserved untouched.
   ============================================================ */

/* Base pill button — add warm cream background fill on hover/focus
   so the border+lift has visual substance. Tighten to 220ms for a
   crisper, more tactile feel while staying well inside luxury range. */
.ed-btn {
  transition: background 220ms var(--ease), color 220ms var(--ease),
    border-color 220ms var(--ease), transform 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.ed-btn span { transition: transform 220ms var(--ease); }
.ed-btn:hover,
.ed-btn:focus-visible {
  background: rgba(102, 88, 82, 0.05);
  box-shadow: 0 2px 12px rgba(102, 88, 82, 0.10);
}

/* Solid variant gets a slightly deeper darken on hover (was already present),
   but update its transition timing to match the base 220ms cadence. */
.ed-btn--solid {
  transition: background 220ms var(--ease), border-color 220ms var(--ease),
    transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.ed-btn--solid:hover,
.ed-btn--solid:focus-visible {
  box-shadow: 0 2px 12px rgba(102, 88, 82, 0.18);
}

/* Ghost variant: keep the subtle fill, same timing update */
.ed-btn--ghost {
  transition: background 220ms var(--ease), color 220ms var(--ease),
    border-color 220ms var(--ease), transform 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

/* Form fields: transition the label to --fg on focus for a warm
   'lit' feeling that reinforces the active underline. */
.ed-field:focus-within label {
  color: var(--fg);
  transition: color 240ms var(--ease);
}

/* Reduced motion: suppress new transforms/shadows, keep colour changes */
@media (prefers-reduced-motion: reduce) {
  .ed-btn,
  .ed-btn span,
  .ed-btn--solid,
  .ed-btn--ghost {
    transition: background 220ms var(--ease), color 220ms var(--ease),
      border-color 220ms var(--ease);
  }
  .ed-btn:hover,
  .ed-btn:focus-visible {
    transform: none;
    box-shadow: none;
  }
  .ed-btn--solid:hover,
  .ed-btn--solid:focus-visible {
    box-shadow: none;
  }
}

/* ----- Consultation reservation offer (post-submit, fee-enabled only) -----
   Lives inside .ed-form-success, so it enters/leaves with the success card's
   existing crossfade. Hidden by default; app.js reveals it only when the
   booking settings enable a consultation fee. */
.ed-consult-offer {
  display: grid;
  justify-items: center;
  gap: clamp(0.9rem, 2vw, 1.2rem);
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid rgba(102, 88, 82, 0.16);
}

.ed-consult-offer[hidden] { display: none; }

.ed-consult-kicker {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed-consult-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--fg);
  margin: 0;
}

.ed-consult-head em {
  font-style: italic;
  color: var(--muted);
}

.ed-consult-blurb {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.78;
  max-width: 48ch;
  margin: 0 auto;
}

.ed-consult-cta {
  margin-top: 0.35rem;
  gap: 0.9rem;
}

/* Quiet secondary line — payment is an offer, never a demand. */
.ed-consult-alt {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--muted);
}

.ed-consult-error {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--fg);
  opacity: 0.85;
  max-width: 44ch;
  margin: 0 auto;
  transition: opacity 260ms ease;
}

.ed-consult-error[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ed-consult-error { transition: none; }
}

/* ============================================================
   Paywall modal — the "pay to send" step (contact page)
   Appended EOF so it wins the cascade over earlier form rules.
   Brand-locked: cream #F4F1E9 / taupe #665852 / clay accent.
   ============================================================ */

html.ed-paywall-open { overflow: hidden; }

.ed-paywall {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  padding-bottom: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-bottom));
  /* Entry/exit are driven by .is-open; base state is invisible + inert. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
}
.ed-paywall.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease);
}

.ed-paywall__scrim {
  position: absolute;
  inset: 0;
  background: rgba(52, 44, 40, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  cursor: pointer;
}

.ed-paywall__panel {
  position: relative;
  width: min(30rem, 100%);
  max-height: min(92dvh, 46rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #FBF8F1;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem) clamp(1.75rem, 5vw, 2.5rem);
  text-align: center;
  /* Slide-up + settle. */
  transform: translateY(26px) scale(0.985);
  opacity: 0;
  transition: transform 460ms var(--ease), opacity 320ms var(--ease);
}
.ed-paywall.is-open .ed-paywall__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ed-paywall__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.ed-paywall__close:hover { color: var(--fg); border-color: var(--border); background: rgba(102,88,82,0.05); }
.ed-paywall__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Grab-handle — hidden on the centered desktop dialog, shown only on the
   mobile bottom sheet (see the max-width: 40rem block below). */
.ed-paywall__grip {
  display: none;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 0.5rem;
  opacity: 0.7;
}

/* ── Envelope seal motif ──────────────────────────────────── */
.ed-paywall__seal {
  display: flex;
  justify-content: center;
  margin-bottom: 1.35rem;
}
.ed-paywall__envelope {
  position: relative;
  width: 76px;
  height: 52px;
  background: #F4EFE4;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
}
.ed-paywall__flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  border-left: 37px solid transparent;
  border-right: 37px solid transparent;
  border-top: 26px solid #EFE7D7;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 620ms var(--ease);
}
.ed-paywall.is-open .ed-paywall__flap { transform: rotateX(178deg); }
.ed-paywall__wax {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #b06a52, #8a4b37);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.35), 0 2px 5px rgba(102,88,82,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(-18deg);
  opacity: 0;
  transition: transform 520ms var(--ease) 380ms, opacity 300ms ease 380ms;
}
.ed-paywall.is-open .ed-paywall__wax { transform: scale(1) rotate(0deg); opacity: 1; }
.ed-paywall__wax em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.72rem;
  color: #F4EFE4;
  letter-spacing: 0.02em;
}

/* ── Copy ─────────────────────────────────────────────────── */
.ed-paywall__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.ed-paywall__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.05rem);
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 0.75rem;
}
.ed-paywall__title em { font-style: italic; }
.ed-paywall__sub {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--fg);
  opacity: 0.82;
  max-width: 34ch;
  margin: 0 auto 1.6rem;
}

/* ── Line item card ───────────────────────────────────────── */
.ed-paywall__card {
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.1rem 1.25rem 1.2rem;
  margin-bottom: 1.5rem;
}
.ed-paywall__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.ed-paywall__line-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fg);
}
.ed-paywall__line-amt {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.ed-paywall__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ed-paywall__perks li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--fg);
  opacity: 0;
  transform: translateY(6px);
}
.ed-paywall.is-open .ed-paywall__perks li {
  animation: edPaywallPerk 460ms var(--ease) forwards;
}
.ed-paywall.is-open .ed-paywall__perks li:nth-child(1) { animation-delay: 240ms; }
.ed-paywall.is-open .ed-paywall__perks li:nth-child(2) { animation-delay: 330ms; }
.ed-paywall.is-open .ed-paywall__perks li:nth-child(3) { animation-delay: 420ms; }
.ed-paywall__perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.55rem;
  height: 0.32rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
@keyframes edPaywallPerk {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Pay button ───────────────────────────────────────────── */
.ed-paywall__pay {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fg);
  color: var(--on-accent);
  border: none;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 240ms ease, transform 160ms var(--ease), box-shadow 240ms ease;
}
.ed-paywall__pay:hover { background: #574a45; transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.ed-paywall__pay:active { transform: translateY(0); }
.ed-paywall__pay:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ed-paywall__pay[disabled] { cursor: default; opacity: 0.9; transform: none; box-shadow: none; }
/* Sheen sweep on hover for a touch of life. */
.ed-paywall__pay::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(244,241,233,0.28), transparent);
  transform: skewX(-18deg);
  transition: left 620ms var(--ease);
}
.ed-paywall__pay:hover::after { left: 130%; }
.ed-paywall__pay-in,
.ed-paywall__pay-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ed-paywall__pay-in span[aria-hidden] { letter-spacing: 0; }
.ed-paywall__pay-loading { display: none; }
.ed-paywall__pay.is-loading .ed-paywall__pay-in { display: none; }
.ed-paywall__pay.is-loading .ed-paywall__pay-loading { display: inline-flex; }

/* ── Trust + secondary ────────────────────────────────────── */
.ed-paywall__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.95rem 0 0;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.4;
}
.ed-paywall__trust svg { flex-shrink: 0; }
.ed-paywall__error {
  margin: 0.9rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--error);
}
.ed-paywall__error[hidden] { display: none; }
.ed-paywall__later {
  margin-top: 1.1rem;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding: 0.15rem 0;
  transition: color 200ms ease, border-color 200ms ease;
}
.ed-paywall__later:hover { color: var(--fg); border-bottom-color: var(--border-strong); }
.ed-paywall__later:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Mobile bottom sheet (<=40rem) ────────────────────────────
   Replaces the centered dialog with a sheet hugging the bottom edge —
   fixes the top-cut/off-center paywall + footer-bleed seen on iOS PWA. */
@media (max-width: 40rem) {
  .ed-paywall {
    align-items: flex-end;
    padding: 0;
  }
  .ed-paywall__panel {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding-top: 1.25rem;
    padding-bottom: max(1.75rem, env(safe-area-inset-bottom));
    box-shadow: 0 -18px 50px rgba(52, 44, 40, 0.28);
    transform: translateY(100%);
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms var(--ease);
  }
  .ed-paywall.is-open .ed-paywall__panel {
    transform: translateY(0);
  }
  .ed-paywall__grip { display: block; }
  .ed-paywall__close { top: 0.9rem; right: 0.9rem; }
  .ed-paywall__pay { min-height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-paywall,
  .ed-paywall__panel,
  .ed-paywall__flap,
  .ed-paywall__wax,
  .ed-paywall__pay,
  .ed-paywall__pay::after { transition: opacity 160ms linear; }
  .ed-paywall.is-open .ed-paywall__flap { transform: none; }
  .ed-paywall.is-open .ed-paywall__wax { transform: scale(1); opacity: 1; }
  .ed-paywall.is-open .ed-paywall__perks li { animation: none; opacity: 1; transform: none; }
  @media (max-width: 40rem) {
    .ed-paywall__panel {
      transition: opacity 160ms linear;
      transform: none;
    }
    .ed-paywall.is-open .ed-paywall__panel { transform: none; }
  }
}

/* ============================================================
   21. Brand motion system — the living monogram
   The exact brand assets (logo-primary.svg / logo PNGs) are the
   animation surface: CSS masks + sheens animate the real files,
   nothing is regenerated or redrawn. All loops respect
   prefers-reduced-motion.
   ============================================================ */

/* ---- Shared keyframes ---- */

/* Soft ink-reveal: gradient mask slides so the logo fills upward */
@keyframes edInkReveal {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}

/* Light band passing through the mark (mask-based, for <img> logos) */
@keyframes edSheenPass {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

/* Shimmer for masked-div monograms (background slides under the mask) */
@keyframes edMonoShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes edMonoBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.985); }
  50% { opacity: 0.95; transform: scale(1); }
}

/* ---- Splash: monogram draws itself on arrival ---- */
@media (prefers-reduced-motion: no-preference) {
  .ed-splash-logo {
    -webkit-mask-image: linear-gradient(to top, #000 42%, rgba(0, 0, 0, 0) 62%);
    mask-image: linear-gradient(to top, #000 42%, rgba(0, 0, 0, 0) 62%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: edInkReveal 1900ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
  }
}

/* Splash enter: couture letter-spacing ease */
.ed-splash-enter {
  transition: color 320ms ease, border-color 320ms ease, letter-spacing 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-splash-enter:hover,
.ed-splash-enter:focus-visible {
  letter-spacing: 0.58em;
}

/* ---- Home intro mark: sheen on hover / touch ---- */
.ed-home-intro-mark {
  -webkit-mask-image: linear-gradient(115deg, #000 40%, rgba(0, 0, 0, 0.42) 50%, #000 60%);
  mask-image: linear-gradient(115deg, #000 40%, rgba(0, 0, 0, 0.42) 50%, #000 60%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ed-home-intro-mark:hover,
  .ed-home-intro-mark:active {
    animation: edSheenPass 1100ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ed-home-intro.is-in .ed-home-intro-mark:hover,
  .ed-home-intro.is-in .ed-home-intro-mark:active {
    opacity: 1;
    transform: scale(1.035);
    transition: opacity 500ms var(--ease), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---- Footer: watermark breathes, logo sheens on hover ---- */
@media (prefers-reduced-motion: no-preference) {
  .ed-foot-watermark {
    animation: edWatermarkBreathe 9s ease-in-out infinite;
  }
  @keyframes edWatermarkBreathe {
    0%, 100% { opacity: 0.05; transform: translateY(0); }
    50% { opacity: 0.085; transform: translateY(-10px); }
  }

  .ed-foot-logo img {
    -webkit-mask-image: linear-gradient(115deg, #000 40%, rgba(0, 0, 0, 0.38) 50%, #000 60%);
    mask-image: linear-gradient(115deg, #000 40%, rgba(0, 0, 0, 0.38) 50%, #000 60%);
    -webkit-mask-size: 320% 100%;
    mask-size: 320% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  .ed-foot-logo:hover img,
  .ed-foot-logo:focus-visible img {
    animation: edSheenPass 1200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ---- Monogram loader: lightbox HD frames ---- */
.ed-lightbox-spin {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 0;
  -webkit-mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.38) 40%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.38) 60%
  );
  background-size: 300% 100%;
}
.ed-lightbox-stage.is-busy .ed-lightbox-spin {
  animation: edMonoShimmer 1400ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ed-lightbox-stage.is-busy .ed-lightbox-spin {
    background: rgba(255, 255, 255, 0.7);
    animation: none;
  }
}

/* ---- Monogram loader: page transitions (Swup) ----
   Pure CSS: appears only when a route swap outlasts the 300ms delay,
   so instant transitions never flash it. */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  -webkit-mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  background: linear-gradient(
    110deg,
    rgba(158, 139, 120, 0.45) 40%,
    rgba(158, 139, 120, 1) 50%,
    rgba(158, 139, 120, 0.45) 60%
  );
  background-size: 300% 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 9500;
  transition: opacity 240ms ease;
  transition-delay: 0ms;
}
html.is-transitioning body::after {
  opacity: 1;
  transition-delay: 300ms;
}
@media (prefers-reduced-motion: no-preference) {
  html.is-transitioning body::after {
    animation: edMonoShimmer 1400ms linear infinite;
  }
}

/* ---- Monogram loader: portfolio rooms skeleton ---- */
.ed-rooms-skeleton {
  position: relative;
}
.ed-rooms-skeleton::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  -webkit-mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  background: #9e8b78;
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .ed-rooms-skeleton::after {
    animation: edMonoBreathe 2000ms ease-in-out infinite;
  }
}

/* ── Tap interactivity layer (2026-07-07) ─────────────────────────────
   Logos give tactile feedback on tap; Lu's portrait, name, and bio on the
   homepage are live links to the About page (studio.html). */
.ed-about-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ed-about-link:hover .ed-title em,
.ed-about-link:focus-visible .ed-title em {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.ed-about-portrait .ed-about-link img { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.ed-about-portrait .ed-about-link:hover img { transform: scale(1.025); }
.ed-about-link:focus-visible { outline: 1px solid #9e8b78; outline-offset: 6px; }

/* Instant press feedback on every logo (pure CSS, no JS needed). */
.ed-mast-lockup, .ed-menu-logo, .ed-foot-logo img {
  transition: transform 180ms ease;
}
a:active > .ed-mast-lockup,
a:active > img.ed-foot-logo-img,
.ed-foot-logo:active img,
.ed-menu-logo:active {
  transform: scale(0.94);
}

/* Replayable tap pulse on the masthead brand mark (added by app.js). */
@keyframes edLogoTapPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.ed-mast-lockup.is-tapped { animation: edLogoTapPulse 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }

@media (prefers-reduced-motion: reduce) {
  .ed-mast-lockup.is-tapped { animation: none; }
  .ed-about-portrait .ed-about-link img,
  .ed-mast-lockup, .ed-menu-logo, .ed-foot-logo img { transition: none; }
  .ed-about-portrait .ed-about-link:hover img { transform: none; }
}

/* ── Per-device album crops ────────────────────────────────────────────────
   content-loader emits the admin's mobile crop (focalM) as inline --mf* vars
   on album <img>s; on phones they must beat the inline web crop, hence
   !important (stylesheet !important > non-important inline style). Legacy
   images without the vars never match the [style*="--mfx"] guard. */
@media (max-width: 768px) {
  .ed-room-grid a > img[style*="--mfx"],
  .ed-strip a > img[style*="--mfx"] {
    object-position: var(--mfx) var(--mfy) !important;
    transform: scale(var(--mfz)) !important;
    transform-origin: var(--mfx) var(--mfy) !important;
  }
}

/* ── No-masthead mode ────────────────────────────────────────────────────────
   Admin has zero masthead images for this device tier. content-loader.js
   toggles .ed-mast-off on <html> (cached pre-paint via localStorage), the
   masthead collapses entirely and every page opens at nav + content. */
html.ed-mast-off .ed-mast { display: none !important; }
/* Breathing room where the hero used to be — nav floats a touch lower.
   0.75rem floor matches the ≤520px .ed-nav padding rule this out-specifies. */
html.ed-mast-off .ed-nav { padding-top: clamp(0.75rem, 2.5vw, 1.75rem); }

/* ============================================================
   SHARED MONOGRAM LOADER — one brand loader everywhere
   Reuses the LC monogram mask + edMonoShimmer already used by the
   lightbox / Swup / rooms-skeleton loaders (logo-primary.svg).
   ============================================================ */

/* Gallery page loading — swap the generic rotating ring for the monogram. */
.ed-loading-spinner::before {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  -webkit-mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  background: linear-gradient(
    110deg,
    rgba(158, 139, 120, 0.4) 40%,
    rgba(158, 139, 120, 1) 50%,
    rgba(158, 139, 120, 0.4) 60%
  );
  background-size: 300% 100%;
  animation: edMonoShimmer 1400ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ed-loading-spinner::before { background: rgba(158, 139, 120, 0.7); animation: none; }
}

/* Paywall pay button — subtle monogram glyph before the loading label. */
.ed-paywall__pay-loading::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  -webkit-mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  background: linear-gradient(
    110deg,
    rgba(244, 241, 233, 0.4) 40%,
    rgba(244, 241, 233, 1) 50%,
    rgba(244, 241, 233, 0.4) 60%
  );
  background-size: 300% 100%;
  animation: edMonoShimmer 1400ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ed-paywall__pay-loading::before { background: rgba(244, 241, 233, 0.8); animation: none; }
}

/* ============================================================
   PULL-TO-REFRESH — custom monogram pocket (assets/js/ptr.js)
   ============================================================ */

/* Suppress scroll-chaining / native PTR where the root is the scroller. On iOS
   Safari this is mostly a no-op (ptr.js handles it via preventDefault), on
   Chrome/Android it stops the native pull-refresh. Harmless to normal scroll. */
html { overscroll-behavior-y: contain; }

.ed-ptr {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9400;
  pointer-events: none;
}
.ed-ptr-mark {
  width: 34px;
  height: 34px;
  margin-top: -46px;                          /* parked above the top edge */
  transform: translateY(var(--ptr, 0px));     /* drag-follows the finger */
  opacity: 0;
  -webkit-mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  mask: url("../brand/logo-primary.svg") center / contain no-repeat;
  background: #9e8b78;
}
/* Instant tracking while pulling; ease back on release. */
.ed-ptr:not(.is-pulling) .ed-ptr-mark { transition: transform 240ms ease, opacity 180ms ease; }
.ed-ptr.is-pulling .ed-ptr-mark,
.ed-ptr.is-refreshing .ed-ptr-mark { opacity: 1; }
.ed-ptr.is-armed .ed-ptr-mark { background: #7a6a5a; }
@media (prefers-reduced-motion: no-preference) {
  .ed-ptr.is-refreshing .ed-ptr-mark { animation: edMonoBreathe 1000ms ease-in-out infinite; }
}

/* Uniform cover aspect (2026-07-18): --cover-aspect is THE album cover shape.
   Admin frames covers in a 4/5 editor and previews them as 4/5 cards; desktop
   tiles were height-locked (~square) and showed a different slice — client
   caught it. Every cover surface now renders this one aspect so the crop is
   pixel-identical admin <-> site on every device. flex-grow:0 + centered rows:
   a last-row orphan stays the same-size card instead of ballooning wide. */
:root { --cover-aspect: 4 / 5; }
@media (min-width: 561px) {
  .ed-rooms { justify-content: center; }
  .ed-rooms > .ed-room-tile,
  .ed-rooms > .ed-room-tile:nth-child(4),
  .ed-rooms > .ed-room-tile:nth-child(5) { flex-grow: 0; }
  .ed-rooms > .ed-room-tile > .ed-room-stack,
  .ed-rooms > .ed-room-tile:nth-child(4) > .ed-room-stack,
  .ed-rooms > .ed-room-tile:nth-child(5) > .ed-room-stack {
    height: auto;
    aspect-ratio: var(--cover-aspect);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LUX INTERACTIONS  (cursor · note-request loader · copy-to-clipboard toast)
   Appended at EOF so it wins the cascade. Behaviour: assets/js/lux-cursor.js
   + assets/js/note-loader.js. All motion respects prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Custom cursor (desktop pointer only; JS never attaches on touch) ──── */
.lux-cursor-active,
.lux-cursor-active * { cursor: none; }
/* Keep the native text caret where people edit text. */
.lux-cursor-active input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.lux-cursor-active textarea,
.lux-cursor-active select,
.lux-cursor-active [contenteditable="true"] { cursor: text; }

.lux-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms var(--ease);
  will-change: transform;
}
.lux-cursor-ready .lux-cursor { opacity: 1; }
/* Over form fields (native caret) or off-window: fade the seal away. */
.lux-cursor-field .lux-cursor--ring,
.lux-cursor-field .lux-cursor--dot,
.lux-cursor-hidden .lux-cursor { opacity: 0; }

.lux-cursor--dot {
  /* JS positions this with translate(-50%,-50%), so it self-centers on the tip. */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.lux-cursor--ring {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}
.lux-cursor--ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 50%;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
.lux-cursor__lc {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
  transform: scale(0.92);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
/* Hover over links/buttons: the seal opens. */
.lux-cursor-hit .lux-cursor--ring::before {
  transform: scale(1.5);
  border-color: color-mix(in srgb, var(--accent) 90%, transparent);
}
.lux-cursor-hit .lux-cursor__lc { opacity: 0.92; transform: scale(1.08); }
/* Click: a small, contained press — never a giant cursor. */
.lux-cursor-press .lux-cursor--ring::before { transform: scale(0.82); }
.lux-cursor-press.lux-cursor-hit .lux-cursor--ring::before { transform: scale(1.28); }

@media (prefers-reduced-motion: reduce) {
  .lux-cursor--ring::before,
  .lux-cursor__lc { transition: none; }
  .lux-cursor-hit .lux-cursor--ring::before,
  .lux-cursor-press .lux-cursor--ring::before { transform: scale(1); }
  .lux-cursor-hit .lux-cursor__lc { transform: scale(1); }
}

/* ── 2. Note-request loader (contact form; appears if the network lingers) ── */
.ed-note-loader {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(4px);
  transition: opacity 320ms var(--ease), max-height 320ms var(--ease),
              transform 320ms var(--ease), margin-top 320ms var(--ease);
}
.ed-note-loader.is-on {
  max-height: 3rem;
  margin-top: 1rem;
  opacity: 1;
  transform: translateY(0);
}
.ed-note-loader__mark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 30%,
    var(--fg) 50%,
    color-mix(in srgb, var(--accent) 55%, transparent) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ed-lc-shimmer 1.6s linear infinite, ed-lc-pulse 1.8s var(--ease) infinite;
}
.ed-note-loader__text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
@keyframes ed-lc-shimmer { to { background-position: -220% 0; } }
@keyframes ed-lc-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-note-loader { transition: opacity 200ms linear, max-height 200ms linear, margin-top 200ms linear; transform: none; }
  .ed-note-loader__mark { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
}

/* ── 3. Copy-to-clipboard toast (email links) ──────────────────────────────── */
.ed-copy-toast {
  position: fixed;
  z-index: 2147483646;
  transform: translate(-50%, -120%) translateY(6px);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-soft);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.ed-copy-toast::before {
  content: "\2713\00a0";
  color: color-mix(in srgb, var(--on-accent) 80%, var(--accent));
}
.ed-copy-toast.is-on {
  opacity: 1;
  transform: translate(-50%, -120%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ed-copy-toast { transition: opacity 200ms linear; transform: translate(-50%, -120%); }
  .ed-copy-toast.is-on { transform: translate(-50%, -120%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPLASH LOAD-STATE MACHINE + PREMIUM LOGO ENTRANCE   (EOF — wins cascade)

   Fixes the grey-wash-on-cream first frame: the veil vignette + white
   (inverted) logo used to paint before any photo existed behind them.

   DEFAULT (#ed-splash, no .ed-imgs-ready): pure cream canvas — reel + veil
     hidden, logo painted DARK (brightness(0)) on cream, controls warm-brown.
   .ed-imgs-ready: an admin slide has decoded → restore the cinematic look
     (reel + veil fade in, logo inverts white with its drop-shadows, controls
     go white). Reel/veil transitions live inside prefers-reduced-motion:
     no-preference so reduced-motion users swap instantly.
   .ed-slow:not(.ed-imgs-ready): refined "still loading" state — dark logo
     breathes + a thin warm-brown shimmer line pulses. No spinner.

   Ready/slow selectors are #ed-splash-prefixed so they out-specify the
   #ed-splash inline critical-CSS mirror in index.html (id + class).
   ════════════════════════════════════════════════════════════════════════ */

/* ── DEFAULT: nothing painted over the cream ── */
.ed-splash-reel { opacity: 0; }
.ed-splash-veil { opacity: 0; }

.ed-splash-logo {
  filter: brightness(0);
  opacity: 0.92;
}

.ed-splash-enter {
  color: rgba(58, 47, 38, 0.9);
  border-bottom-color: rgba(58, 47, 38, 0.35);
}
.ed-splash-enter:hover,
.ed-splash-enter:focus-visible {
  color: rgba(58, 47, 38, 1);
  border-bottom-color: rgba(58, 47, 38, 0.7);
}

.ed-splash-swipe-hint-line { background: rgba(58, 47, 38, 0.25); }
.ed-splash-swipe-hint-line::after { background: rgba(58, 47, 38, 0.7); }
.ed-splash-swipe-hint-text { color: rgba(58, 47, 38, 0.5); }

/* ── READY: restore the exact original cinematic look ── */
#ed-splash.ed-imgs-ready .ed-splash-reel { opacity: 1; }
#ed-splash.ed-imgs-ready .ed-splash-veil { opacity: 1; }

#ed-splash.ed-imgs-ready .ed-splash-logo {
  filter: brightness(0) invert(1)
    drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 32px rgba(0, 0, 0, 0.35));
  opacity: 0.96;
}

#ed-splash.ed-imgs-ready .ed-splash-enter {
  color: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
#ed-splash.ed-imgs-ready .ed-splash-enter:hover,
#ed-splash.ed-imgs-ready .ed-splash-enter:focus-visible {
  color: rgba(255, 255, 255, 1);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

#ed-splash.ed-imgs-ready .ed-splash-swipe-hint-line { background: rgba(255, 255, 255, 0.3); }
#ed-splash.ed-imgs-ready .ed-splash-swipe-hint-line::after { background: rgba(255, 255, 255, 0.85); }
#ed-splash.ed-imgs-ready .ed-splash-swipe-hint-text { color: rgba(255, 255, 255, 0.5); }

/* Fallback (all users): simple opacity fade for the content — overrides the
   older edSplashIn so reduced-motion users get no translate/blur. */
.ed-splash-content { animation: edSplashFade 600ms ease 200ms both; }

@keyframes edSplashFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Elegant state cross-fade */
  .ed-splash-reel,
  .ed-splash-veil { transition: opacity 1.2s ease; }
  .ed-splash-logo { transition: filter 900ms ease, opacity 900ms ease; }
  .ed-splash-enter { transition: color 900ms ease, border-color 900ms ease, letter-spacing 700ms cubic-bezier(0.22, 1, 0.36, 1); }

  /* Premium logo entrance: rise + settle + de-blur, quiet-luxury easing */
  .ed-splash-content {
    animation: edSplashEnter 1600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
  }
  .ed-splash-enter {
    animation: edSplashEnterBtn 1200ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
  }

  /* Refined loading state: breathing dark logo + pulsing shimmer line */
  /* Keep edInkReveal FIRST and identical to its base declaration (line ~9569):
     replacing the animation list would snap the ink-reveal mask back to its
     hidden start frame and blank the logo. Breathe joins after the reveal. */
  #ed-splash.ed-slow:not(.ed-imgs-ready) .ed-splash-logo {
    animation: edInkReveal 1900ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both,
               edSplashLogoBreathe 2.2s ease-in-out 2.4s infinite alternate;
  }
  #ed-splash.ed-slow:not(.ed-imgs-ready) .ed-splash-content::after {
    content: '';
    width: 120px;
    height: 1px;
    background: rgba(58, 47, 38, 0.4);
    animation: edSplashShimmer 2.2s ease-in-out infinite;
  }
}

@keyframes edSplashEnter {
  from { opacity: 0; transform: translateY(28px) scale(0.965); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Opacity only — animating letter-spacing with `both` fill would freeze it
   and kill the couture hover tracking ease (styles.css ~9579). */
@keyframes edSplashEnterBtn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes edSplashLogoBreathe {
  from { transform: scale(1); opacity: 0.92; }
  to   { transform: scale(1.015); opacity: 1; }
}

@keyframes edSplashShimmer {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.6; }
}

/* ── Engage: curiosity click + footer lead invitation ─────────── */
/* Motion curves match the site's quiet-luxury language: slow, ink/blur/fade. */

/* Ink ripple (shared) — soft expanding warm-brown ring at the click point. */
.lcs-ripple {
  position: fixed;
  z-index: 60;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid rgba(58, 47, 38, 0.5);
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: lcsRipple 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lcsRipple {
  0%   { transform: scale(0);  opacity: 0.55; }
  100% { transform: scale(9);  opacity: 0; }
}

/* Curiosity chip (About page) — cream glass, serif italic glimpse line. */
.lcs-chip {
  position: fixed;
  z-index: 61;
  max-width: 220px;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(237, 228, 210, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(58, 47, 38, 0.25);
  border-radius: 2px;
  color: rgba(58, 47, 38, 0.9);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.2;
  box-shadow: 0 12px 40px rgba(58, 47, 38, 0.14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition:
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lcs-chip.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.lcs-chip .lcs-chip-arrow { font-style: normal; opacity: 0.7; }

/* Lead invitation panel (all pages) — bottom-center cream glass card. */
.lcs-lead {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 62;
  width: min(92vw, 440px);
  padding: 1.4rem 1.5rem 1.5rem;
  background: rgba(237, 228, 210, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(58, 47, 38, 0.2);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(58, 47, 38, 0.22);
  color: rgba(58, 47, 38, 0.92);
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lcs-lead.is-in  { opacity: 1; transform: translateX(-50%) translateY(0);  filter: blur(0); }
.lcs-lead.is-out { opacity: 0; transform: translateX(-50%) translateY(12px); filter: blur(6px); }

.lcs-lead-statement {
  margin: 0 0 1rem;
  padding-right: 1.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.3;
}
.lcs-lead-statement em { font-style: italic; }

.lcs-lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}
.lcs-lead-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  background: rgba(58, 47, 38, 0.92);
  color: #EDE4D2;
  text-decoration: none;
  border-radius: 2px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 300ms ease;
}
.lcs-lead-primary:hover { background: rgba(58, 47, 38, 1); }
.lcs-lead-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(58, 47, 38, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
}
.lcs-lead-quiet:hover { color: rgba(58, 47, 38, 0.95); }
.lcs-lead-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: rgba(58, 47, 38, 0.55);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lcs-lead-close:hover { color: rgba(58, 47, 38, 0.9); }

@media (prefers-reduced-motion: reduce) {
  .lcs-ripple { display: none; }
  .lcs-chip,
  .lcs-lead { transition: none; filter: none; }
}