/* ============================================================
   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 */
  --font-display: 'Cormorant Garamond', 'Instrument Serif', 'Fraunces', Georgia, serif;
  --font-body: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains 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;
  aspect-ratio: 4 / 3;
  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 ----- */
.ed-foot {
  background: #3D3530;
  color: #F4F1E9;
  margin-top: auto;
  padding: clamp(2.25rem, 3.5vw, 3rem) var(--section-x) max(clamp(1.25rem, 1.75vw, 1.5rem), calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
}

/* Statement — logo mark anchor */
.ed-foot-statement {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(244, 241, 233, 0.1);
}

.ed-foot-mark {
  display: block;
  width: clamp(200px, 40vw, 380px);
  height: auto;
  filter: brightness(0) invert(0.92);
  opacity: 0.75;
}

/* Body row — nav + contact */
.ed-foot-body {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 4rem);
  padding: clamp(1.1rem, 1.75vw, 1.6rem) 0;
}

.ed-foot-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.75rem);
  flex: 1;
}

.ed-foot-nav a {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.55);
  transition: color 280ms var(--ease);
  position: relative;
}

.ed-foot-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 0.5px;
  background: rgba(244, 241, 233, 0.65);
  transition: width 400ms var(--ease);
}

.ed-foot-nav a:hover {
  color: rgba(244, 241, 233, 0.9);
}

.ed-foot-nav a:hover::after {
  width: 100%;
}

.ed-foot-contact {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.75vw, 2.25rem);
  margin-left: auto;
}

.ed-foot-contact a {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.48);
  transition: color 280ms var(--ease);
}

.ed-foot-contact a:hover {
  color: rgba(244, 241, 233, 0.88);
}

/* Copyright strip */
.ed-foot-bottom {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(244, 241, 233, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.32);
}

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

/* ============================================================
   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;
}

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

.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 */
.ed-room-back {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  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 260ms var(--ease), gap 260ms var(--ease), opacity 260ms var(--ease), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  /* Show "All rooms" label via CSS-generated text, always visible */
  white-space: nowrap;
}

.ed-room-back::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: width 280ms var(--ease);
  flex-shrink: 0;
}

.ed-room-back:hover,
.ed-room-back:focus-visible {
  color: var(--fg);
  gap: 0.4rem;
  outline: none;
}

.ed-room-back:hover::before,
.ed-room-back:focus-visible::before {
  width: 12px;
}

.ed-room-back:active {
  transform: translateX(-4px) scale(0.97);
  opacity: 0.65;
  color: var(--fg);
}


.ed-room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.ed-room-grid a {
  display: block;
  overflow: hidden;
  background: var(--muted);
}

.ed-room-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-room-grid a:nth-child(6n+1) img,
.ed-room-grid a:nth-child(6n+4) img {
  aspect-ratio: 3 / 4;
}

.ed-room-grid a:hover img {
  transform: scale(1.02);
}

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

  .ed-room-grid a:nth-child(6n+1) img,
  .ed-room-grid a:nth-child(6n+4) img {
    aspect-ratio: 3 / 4;
  }
}

/* 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.68) 0%, rgba(20, 14, 10, 0) 100%);
  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: 'view gallery';
    display: block;
    font-size: 0.47rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.62;
    margin-top: 0.28rem;
  }

  /* Gallery: strict 2-column square grid */
  .ed-room-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ed-room-grid img,
  .ed-room-grid a:nth-child(6n+1) img,
  .ed-room-grid a:nth-child(6n+4) img {
    aspect-ratio: 4 / 5;
  }
}

/* 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;
  }
}

/* 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 320ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 360ms 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 320ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Final state of the leaving page — clean fade with a hair of upward drift */
.ed-swap.is-previous-container {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Initial state of entering page — eases in from a hair below */
.ed-swap.is-next-container {
  opacity: 0;
  transform: translateY(8px);
}

/* 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 */
  body.ed-home .ed-mast {
    height: clamp(340px, 78dvh, 640px);
    min-height: clamp(340px, 78dvh, 640px);
    max-height: clamp(340px, 78dvh, 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;
  transition: opacity 260ms ease;
}

.ed-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ed-lightbox-img {
  max-width: min(96vw, 1100px);
  max-height: 80svh;
  object-fit: contain;
  border-radius: 2px;
  display: block;
  transform: scale(0.95);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.ed-lightbox.is-open .ed-lightbox-img {
  transform: scale(1);
}

.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: 50%;
  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.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 220ms, border-color 220ms, opacity 220ms;
  -webkit-tap-highlight-color: transparent;
}

.ed-lightbox-prev { left: 1rem; }
.ed-lightbox-next { right: 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 CTA panel */
.ed-lightbox-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4rem 1.5rem max(env(safe-area-inset-bottom, 0px), 1.5rem);
  background: linear-gradient(to top, rgba(12, 7, 3, 0.92) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 360ms 160ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.ed-lightbox.is-open .ed-lightbox-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 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);
}

/* Suppress the sweep on the active link (uses ::after static underline) */
.ed-nav a[aria-current="page"]::before {
  display: none;
}
/* ───────────────────────────────────────────────────────────────────────────
   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, 56dvh, 520px);
    min-height: clamp(280px, 56dvh, 520px);
    max-height: clamp(280px, 56dvh, 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: 'view gallery';
    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;
  }
}