/* ============================================
   DESERT DUMP — per-site overrides
   ============================================
   Strips the editorial-magazine chrome and re-skins the navbar
   for an industrial / demolition feel. */

/* ---- Kill all floral chrome ---- */
.hero-corner,
.ornament-divider,
.ornament-divider-icon,
.section.botanical::before,
.section.botanical::after,
.mobile-nav-overlay::before,
.mobile-nav-overlay::after,
.event-type-card .event-type-icon::before,
.gallery-hero .hero-accent::before,
.footer-flourish-top,
.footer-flourish-rule,
.footer-flourish-glyph,
.divider-floral { display: none !important; }

/* ---- Strip magazine chrome site-wide ---- */
/* Drop caps off */
.about-section .drop-cap,
.section .drop-cap,
.drop-cap { all: unset !important; }
/* Eyebrows — keep them but flatten the all-caps tiny-script look */
.section-eyebrow {
    font-style: normal !important;
    font-family: var(--theme-heading-family) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--theme-primary) !important;
    font-size: 0.72rem !important;
    font-weight: normal !important;
}
/* No italic section titles */
.section-title, .display, .about-section h1, h1, h2, h3 {
    font-style: normal !important;
    letter-spacing: 0 !important;
}
/* Hide the "By the numbers" stats — too magazine-y for a service biz */
.section.tight.text-center .stats-row,
.section.tight.text-center .section-eyebrow + .stats-row {
    display: none !important;
}
.section.tight.text-center:has(.stats-row) { display: none !important; }
/* Hide gallery's catalog view + view-toggle row — keep masonry only */
.view-toggle-row,
.catalog,
[data-view="catalog"] { display: none !important; }
/* Hide hero arrows and dots (single-slide hero) */
.hero-arrow, .hero-dots { display: none !important; }

/* ---- Trim leftover whitespace ---- */
.section.closer-banner.wash { padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 80px) clamp(28px, 4vw, 48px) !important; }
.site-footer { padding-top: clamp(28px, 4vw, 56px) !important; }
.mobile-nav-overlay { background: var(--page-bg) !important; }

/* ---- INDUSTRIAL NAVBAR ---- */
.site-nav {
    background: #0a0a0a !important;
    border-bottom: 2px solid var(--theme-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.site-nav .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(16px, 3vw, 32px) !important;
    padding: 10px clamp(16px, 4vw, 48px) !important;
    max-width: none !important;
}
.site-nav .logo {
    margin-right: auto !important;
}
.site-nav .logo-img {
    height: clamp(40px, 5.5vw, 56px) !important;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 6px;
}
.site-nav .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: clamp(14px, 2.4vw, 28px) !important;
}
.site-nav .nav-links a {
    color: #f0f0f0 !important;
    font-family: var(--theme-heading-family) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.95rem !important;
    padding: 6px 4px !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active {
    color: var(--theme-primary) !important;
    border-bottom-color: var(--theme-primary) !important;
}
.site-nav .nav-links a::after { display: none !important; }
/* Phone CTA — appended at runtime via JS, see partials/header.php */
.site-nav .nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--theme-primary);
    color: #0a0a0a !important;
    font-family: var(--theme-heading-family);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.site-nav .nav-phone:hover { background: #2F8E1F; transform: translateY(-1px); }
.site-nav .nav-phone::before { content: '\260E'; font-size: 1.1em; }  /* black telephone ☎ */
[data-theme="dark"] .site-nav .nav-phone { color: #0a0a0a !important; }
@media (max-width: 768px) {
    .site-nav .nav-phone { padding: 6px 12px; font-size: 0.78rem; }
    .site-nav .nav-phone span { display: none; }
    .site-nav .nav-phone::after { content: 'Call'; }
}

/* ---- HERO: simpler, no editorial pad ---- */
.hero-frame { padding: 0 !important; }
.hero-slideshow { border-radius: 0 !important; }

/* ---- WELCOME / SERVICE CARDS: less editorial ---- */
.about-section h1 { font-size: clamp(2rem, 4vw, 3rem) !important; }
.about-section p { font-size: 1rem !important; }
.service-card {
    border-radius: 6px !important;
    box-shadow: 0 1px 0 var(--theme-border) !important;
}
.service-card h3 {
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 1.1rem !important;
}

/* ---- CTA button — chunky ---- */
.cta-button {
    border-radius: 4px !important;
    font-family: var(--theme-heading-family) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 16px 32px !important;
    font-size: 1rem !important;
}

/* ---- GALLERY filter chips — green pill style matching the card ---- */
.filter-chips button {
    border-radius: 999px !important;
    border: 1px solid var(--theme-primary) !important;
    background: transparent !important;
    color: var(--ink) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.82rem !important;
    padding: 6px 14px !important;
    font-style: normal !important;
}
.filter-chips button.active {
    background: var(--theme-primary) !important;
    color: #0a0a0a !important;
}

/* ============================================
   SITE TEMPLATE — Editorial design system
   ============================================

   THEMING OVERVIEW
   ----------------
   Two places control how this site looks:

   1) data/theme.json — brand colors and fonts. Edited per site
      (or via /studio if you set up the admin). Emits CSS variables
      like --theme-primary, --theme-body-family on :root.

   2) The :root block below — structural tokens (surface, ink,
      hairline, shadow). These rarely change per site; they define
      the editorial light/dark color system. Tweak only if you
      want a fundamentally different look.

   To rebrand a new site, you usually only need step (1).
   ============================================ */

/* Structural tokens — surface/ink/hairline/shadow. See header for theme.json. */
:root {
    --surface:           #ffffff;
    --surface-tinted:    #faf8f3;
    --surface-stats-bg:  rgba(0,0,0,0.02);
    --ink:               #0f0f0f;
    --ink-muted:         #3a3a3a;
    --ink-soft:          #6a6a6a;
    --hairline:          rgba(15, 15, 15, 0.06);
    --hairline-strong:   rgba(15, 15, 15, 0.12);
    --shadow-soft:       rgba(0,0,0,0.06);
    --shadow-medium:     rgba(0,0,0,0.14);
    --nav-bg:            #ffffff;
    --page-bg:           var(--theme-background, #ffffff);
    --scheme: light;
}
[data-theme="dark"] {
    /* Surface tokens: defaults that work for any site, overridable per-site via colors_dark in theme.json. */
    --surface:           var(--theme-card-background, #141414);
    --surface-tinted:    #1c1a16;
    --surface-stats-bg:  rgba(255,255,255,0.03);
    --ink:               var(--theme-text, #f4efe2);
    --ink-muted:         var(--theme-muted-text, #b9b3a3);
    --ink-soft:          #7b756a;
    --hairline:          rgba(245, 235, 205, 0.10);
    --hairline-strong:   rgba(245, 235, 205, 0.18);
    --shadow-soft:       rgba(0,0,0,0.45);
    --shadow-medium:     rgba(0,0,0,0.6);
    --nav-bg:            var(--theme-background, #0e0e0e);
    --page-bg:           var(--theme-background, #0a0a0a);
    --scheme: dark;
}
/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    /* Smooth anchor jumps + a uniform header offset so TOC clicks never land
       hidden behind the sticky nav. */
    scroll-behavior: smooth;
    scroll-padding-top: clamp(72px, 9vw, 100px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Page-entry fade — body fades in softly on first paint.
   Opacity only (no transform) so we don't create a containing block that
   would break position: fixed for the mobile nav overlay & back-to-top. */
@keyframes pageEntry {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none !important; }
}
body {
    margin: 0;
    padding: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: var(--theme-body-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    animation: pageEntry 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    font-weight: 400;
    transition: background 0.3s ease, color 0.3s ease;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "lnum" 1;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Typography — heading + body fonts (override via data/theme.json) */
.display {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(4rem, 11vw, 8rem);
    line-height: 1.05;
    letter-spacing: 0;
    margin: 0 0 0.3em;
    font-weight: 400;
    color: var(--ink);
}
h1.page-title, .page-title {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: 1.1;
    margin: 0 0 0.5rem;
    font-weight: 400;
    color: var(--ink);
}
.section-eyebrow {
    display: inline-block;
    font-family: var(--theme-body-family, 'Inter', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 1rem;
    font-weight: 600;
}
.section-eyebrow::before {
    content: '\273F  ';
    margin-right: 6px;
    color: var(--theme-primary, #B89968);
    font-size: 1.05em;
}
h2.section-title, .section-title {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    font-weight: 400;
    color: var(--ink);
}
/* Delicate chapter-mark flourish below every section title — two short hairlines
   flanking a small diamond. Margin is generous so the cursive title's
   descenders (p, g, y) never collide with the rule. */
h2.section-title, .section-title {
    margin-bottom: 0.4rem;
}
h2.section-title::after, .section-title::after {
    content: '';
    display: block;
    width: 116px;
    height: 12px;
    margin: 32px auto 1rem;
    background:
        radial-gradient(circle, var(--theme-primary, #B89968) 0 2px, transparent 2.6px) center / 100% 100% no-repeat,
        linear-gradient(90deg, var(--theme-primary, #B89968) 0, var(--theme-primary, #B89968) 100%) left center / 36px 1px no-repeat,
        linear-gradient(90deg, var(--theme-primary, #B89968) 0, var(--theme-primary, #B89968) 100%) right center / 36px 1px no-repeat;
    opacity: 0.55;
}
.about-grid h2.section-title::after,
.about-grid .section-title::after,
.service-text .section-title::after,
.contact-intro .section-title::after {
    margin-left: 0;
    margin-right: auto;
}
h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.5rem; font-weight: 500; }
p { margin: 0 0 1rem; }
.lead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--ink-muted);
    font-weight: 400;
    font-style: italic;
}
::selection { background: rgba(184, 153, 104, 0.25); color: inherit; }

/* Ornamental section divider */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: clamp(20px, 4vw, 40px) auto;
    max-width: 280px;
    color: var(--theme-primary, #B89968);
}
.ornament-divider::before,
.ornament-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.ornament-divider-icon {
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    color: var(--theme-primary, #B89968);
}
.ornament-divider-icon::before { content: '\2741'; }

/* Chapter break — three glyphs and longer rules, marks a major page transition */
.ornament-divider.chapter {
    max-width: 460px;
    gap: 22px;
    margin: clamp(32px, 6vw, 64px) auto;
}
.ornament-divider.chapter .ornament-divider-icon {
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.ornament-divider.chapter .ornament-divider-icon::before { content: '\2766'; opacity: 0.55; font-size: 0.9em; }
.ornament-divider.chapter .ornament-divider-icon::after  { content: '\2767'; opacity: 0.55; font-size: 0.9em; margin-left: 10px; }
.ornament-divider.chapter::before,
.ornament-divider.chapter::after { height: 1px; }

/* Scroll-reveal */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-in { opacity: 1; transform: translateY(0); }
/* Staggered child reveal — when the parent reveals, children fade in sequence.
   Up to 12 children get explicit delays; the rest snap to "all-on" at 600ms. */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.reveal-in .reveal-stagger > * { opacity: 1; transform: translateY(0); }
.reveal.reveal-in .reveal-stagger > *:nth-child(1)  { transition-delay: 0.04s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(2)  { transition-delay: 0.10s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(4)  { transition-delay: 0.22s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(5)  { transition-delay: 0.28s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(6)  { transition-delay: 0.34s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(7)  { transition-delay: 0.40s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(8)  { transition-delay: 0.46s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(9)  { transition-delay: 0.52s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(10) { transition-delay: 0.58s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(11) { transition-delay: 0.64s; }
.reveal.reveal-in .reveal-stagger > *:nth-child(12) { transition-delay: 0.70s; }
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* Featured grid hover caption overlay */
.featured-grid a { position: relative; }
.featured-grid a::after {
    content: attr(data-caption);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 18px 20px;
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.featured-grid a:hover::after { opacity: 1; }

/* Stats moment — always 3 columns, scales fluidly */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(6px, 1vw, 12px);
    max-width: 880px;
    margin: 2rem auto 0;
    text-align: center;
}
.stat {
    padding: clamp(12px, 2vw, 24px) clamp(4px, 1vw, 18px);
    min-width: 0;
}
.stat-num {
    display: block;
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2rem, 7vw, 4.5rem);
    line-height: 1;
    color: var(--theme-primary, #B89968);
    margin-bottom: 6px;
}
.stat-label {
    display: block;
    font-size: clamp(0.56rem, 1.4vw, 0.72rem);
    letter-spacing: clamp(0.12em, 0.5vw, 0.24em);
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 600;
}
/* No vertical separators — let the whitespace breathe. */

/* Warm welcome banner — sits between hero and content, sets the tone */
.welcome-banner {
    text-align: center;
    padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px) clamp(24px, 4vw, 48px);
    background: var(--surface);
}
.welcome-banner .welcome-eyebrow {
    display: inline-block;
    font-family: var(--theme-body-family, 'Inter', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 0.9rem;
    font-weight: 600;
}
.welcome-banner .welcome-eyebrow::before {
    content: '\273F  ';
    color: var(--theme-primary, #B89968);
    margin-right: 4px;
}
.welcome-banner .welcome-title {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 1rem;
    font-weight: 400;
    max-width: 24ch;
    margin-left: auto;
    margin-right: auto;
}
.welcome-banner .welcome-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    color: var(--ink-muted);
    max-width: 52ch;
    margin: 0 auto;
    line-height: 1.55;
}

/* Section variants for color/texture richness — opaque so peach doesn't dominate */
.section.tinted {
    background:
        linear-gradient(180deg,
            rgba(247, 242, 145, 0.16) 0%,
            rgba(184, 153, 104, 0.10) 100%),
        var(--surface);
}
.section.cream-wash {
    background: var(--surface-tinted);
}
.section.peach {
    background: var(--theme-background, rgb(249, 226, 208));
}

/* ============================================
   NAVIGATION (centered logo, links below, sticky)
   ============================================ */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: padding 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    padding: 0;
}
.site-nav.scrolled {
    background: color-mix(in srgb, var(--nav-bg) 88%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-bottom-color: var(--hairline);
    box-shadow: 0 2px 18px var(--shadow-soft);
}
.site-nav .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
    margin: 0;
    padding: 12px clamp(12px, 2vw, 24px) 12px clamp(16px, 2vw, 28px);
}
.site-nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--theme-primary, #B89968) 20%,
        var(--theme-primary, #B89968) 80%,
        transparent 100%);
}
.site-nav.scrolled .nav-inner { padding: 8px clamp(16px, 3vw, 36px); }
.site-nav .logo {
    display: inline-block;
    text-align: left;
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-style: normal;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1;
    color: var(--theme-primary, #B89968);
    text-decoration: none;
    margin: 0;
    letter-spacing: 0;
    transition: font-size 0.2s ease;
    white-space: nowrap;
}
.site-nav.scrolled .logo { font-size: 1.35rem; }
/* Image logo: pins to navbar height. */
.site-nav .logo-img {
    display: block;
    height: clamp(38px, 5vw, 56px);
    width: auto;
    max-width: clamp(180px, 30vw, 280px);
    object-fit: contain;
    transition: height 0.2s ease;
}
.site-nav.scrolled .logo-img { height: clamp(32px, 4vw, 42px); }
.site-nav .nav-flourish { display: none; }
.site-nav .nav-tagline { display: none; }
.site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 38px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav .nav-links a {
    text-decoration: none;
    color: var(--ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
    padding: 6px 0;
    position: relative;
    transition: color 0.2s;
}
.site-nav .nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--theme-primary, #B89968);
    transition: width 0.25s ease, left 0.25s ease;
}
.site-nav .nav-links a:hover { color: var(--theme-primary, #B89968); }
.site-nav .nav-links a:hover::after,
.site-nav .nav-links a.active::after { width: 100%; left: 0; }
.site-nav .nav-links a.active { color: var(--theme-primary, #B89968); }
/* (Decorative nav separator removed for Desert Dump.) */
.site-nav .nav-meta { display: none; }

.footer-controls {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-lang {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: baseline;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.theme-toggle {
    background: none;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    padding: 6px 14px 6px 8px;
    color: var(--ink-muted);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--theme-primary, #B89968); }
.theme-toggle-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--ink) 50%, transparent 50%);
    border: 1.5px solid var(--ink);
    box-sizing: border-box;
    transition: background 0.3s, border-color 0.3s;
}
[data-theme="dark"] .theme-toggle-icon {
    background: linear-gradient(120deg, transparent 50%, var(--ink) 50%);
}
.footer-lang .lang-link {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    color: var(--ink-soft);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    transition: color 0.2s;
}
.footer-lang .lang-link:hover,
.footer-lang .lang-link.active { color: var(--theme-primary, #B89968); }
.footer-lang .lang-divider { color: var(--ink-soft); opacity: 0.5; }

/* Dark mode hero-corner needs adjustment */
[data-theme="dark"] .hero-corner { opacity: 0.7; }
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--theme-primary, #B89968);
    padding: 6px 8px;
}

/* Mobile nav (≤768px) */
@media (max-width: 768px) {
    .site-nav .nav-links { display: none; }
    .menu-toggle { display: inline-block; }
    .site-nav .nav-inner { padding: 10px 20px; }
}

/* Mobile nav overlay — editorial cover sheet: ornament, cursive nav, masthead */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--surface);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 4vw, 32px);
    padding: 32px;
    text-align: center;
    overflow-y: auto;
}
.mobile-nav-overlay.open { display: flex; }
.mobile-nav-overlay::before {
    content: '\2766';
    position: absolute;
    top: clamp(40px, 8vh, 70px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--theme-primary, #B89968);
    opacity: 0.55;
    font-size: 1.4rem;
}
.mobile-nav-overlay::after {
    content: 'Volume I  \00B7  MMXXIV';
    position: absolute;
    bottom: clamp(30px, 6vh, 50px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--ink-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mobile-nav-overlay .close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--ink);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}
.mobile-nav-overlay .close:hover { border-color: var(--theme-primary, #B89968); color: var(--theme-primary, #B89968); }
.mobile-nav-overlay a {
    text-decoration: none;
    color: var(--ink);
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.6rem, 9vw, 3.4rem);
    line-height: 1.15;
    position: relative;
    transition: color 0.2s;
}
.mobile-nav-overlay a:hover { color: var(--theme-primary, #B89968); }
.mobile-nav-overlay a + a::before {
    content: '\2766';
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    color: var(--theme-primary, #B89968);
    opacity: 0.35;
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
}

/* ============================================
   SECTIONS / LAYOUT primitives
   ============================================ */
.section {
    padding: clamp(48px, 9vw, 96px) clamp(24px, 5vw, 80px);
    /* Cream surface that fades softly into the peach page at top + bottom —
       gives the airy white feel without hard rectangular edges between sections. */
    background:
        linear-gradient(180deg,
            transparent 0%,
            var(--surface) 14%,
            var(--surface) 86%,
            transparent 100%);
    position: relative;
}
.section > * { position: relative; z-index: 1; }
/* Solid cream surface for headline moments — About, What we do, Let's celebrate. */
.section.wash {
    background: var(--surface);
}
/* Botanical corner sprigs — appear at the inner corners of richer sections. */
.section.botanical::after,
.section.botanical::before {
    pointer-events: none;
    color: var(--theme-primary, #B89968);
    opacity: 0.18;
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    position: absolute;
    z-index: 0;
    line-height: 1;
}
.section.botanical::before { content: '\2766'; top: clamp(18px, 3vw, 36px); left: clamp(18px, 3vw, 44px); }
.section.botanical::after  { content: '\2767'; bottom: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 44px); }
.section.botanical > * { position: relative; z-index: 1; }
.section.tight { padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 80px); }
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.text-center { text-align: center; }

/* ============================================
   HERO (full-bleed, photo + overlay)
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    height: clamp(520px, 82vh, 820px);
    overflow: hidden;
    background: #1a1a1a;
}
.hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.20) 45%,
        rgba(0,0,0,0.60) 100%);
}
.hero-bare {
    height: auto;
    max-height: 100vh;
    background: var(--theme-background, #f6f1ea);
    overflow: hidden;
}
.hero-bare::after { display: none; }
.hero-bare img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    transform: none;
    margin: 0 auto;
}


/* Hero frame — full-bleed wrapper, no margins. Corner ornaments overlay the photo. */
.hero-frame {
    position: relative;
    background: var(--page-bg);
    transition: background 0.3s ease;
}
.hero-corner {
    position: absolute;
    width: 38px;
    height: 38px;
    color: rgba(255, 255, 255, 0.75);
    opacity: 0.9;
    pointer-events: none;
    z-index: 3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.hero-corner::before {
    content: '\2741';
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    line-height: 1;
    display: block;
}
.hero-corner.top-left     { top: clamp(14px, 2vw, 24px); left:  clamp(14px, 2.5vw, 32px); }
.hero-corner.top-right    { top: clamp(14px, 2vw, 24px); right: clamp(14px, 2.5vw, 32px); }
.hero-corner.bottom-left  { bottom: clamp(60px, 8vw, 88px); left:  clamp(14px, 2.5vw, 32px); }
.hero-corner.bottom-right { bottom: clamp(60px, 8vw, 88px); right: clamp(14px, 2.5vw, 32px); }
@media (max-width: 768px) {
    .hero-corner.bottom-left, .hero-corner.bottom-right { display: none; }
    .hero-corner.top-left, .hero-corner.top-right { opacity: 0.6; }
}

/* Hero fade slideshow — full-bleed width, photo never cropped, never overflows viewport */
.hero-slideshow {
    position: relative;
    width: 100%;
    height: clamp(500px, 82vh, 880px);
    margin: 0;
    overflow: hidden;
    background: var(--page-bg);
}
.hero-slideshow::after { display: none; }
.hero-slideshow .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.6s ease;
    pointer-events: none;
}
.hero-slideshow .hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}
/* Magazine-style framing: a softly blurred copy fills the void, the sharp
   image floats centered above it. No cropping of the subject, no empty space. */
.hero-slideshow .hero-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(36px) saturate(0.85) brightness(1.04);
    transform: scale(1.18);
    opacity: 0.55;
}
.hero-slideshow .hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
}
/* Faint cream wash on top of the blur so the contained image still pops against
   the brand surface, while the blurred edges read as ambient tone, not photo. */
.hero-slideshow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--page-bg) 0,
            rgba(0,0,0,0) 22%,
            rgba(0,0,0,0) 78%,
            var(--page-bg) 100%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}
.hero-slideshow .hero-arrow,
.hero-slideshow .hero-dots { z-index: 3; }
@media (max-width: 600px) {
    .hero-slideshow { height: 74vh; }
}

.hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}
.hero-dot {
    width: 28px;
    height: 2px;
    background: rgba(27, 27, 27, 0.22);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}
.hero-dot:hover { background: rgba(27, 27, 27, 0.45); }
.hero-dot.active {
    background: var(--theme-primary, #B89968);
    width: 44px;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    color: var(--theme-text, #1b1b1b);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: background 0.2s ease, transform 0.2s ease;
    opacity: 0.85;
}
.hero-arrow:hover {
    background: #fff;
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
}
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

@media (max-width: 600px) {
    .hero-arrow { width: 40px; height: 40px; }
    .hero-arrow.prev { left: 10px; }
    .hero-arrow.next { right: 10px; }
}

/* Welcome strip — bridges slideshow and content */
.welcome-strip {
    text-align: center;
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 80px) clamp(32px, 5vw, 56px);
    background: #ffffff;
}
.welcome-strip .ornament-divider { margin-top: 0; margin-bottom: 1.5rem; }
.welcome-strip .welcome-tagline {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.1;
    color: var(--theme-text, #1b1b1b);
    margin: 0 auto 0.75rem;
    max-width: 22ch;
}
.welcome-strip .welcome-subtagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    color: var(--theme-muted-text, #4a4a4a);
    max-width: 50ch;
    margin: 0 auto 1.5rem;
    line-height: 1.55;
}

/* Event types — open editorial layout, no card containers */
.event-types-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: clamp(14px, 2vw, 22px);
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(8px, 2vw, 24px);
}
.event-type-card {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ink);
    transition: color 0.25s ease;
    position: relative;
}
.event-type-card:hover { color: var(--theme-primary, #B89968); }
.event-type-card .event-type-icon {
    color: var(--theme-primary, #B89968);
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.65;
    margin: 0;
    transform: translateY(-1px);
}
.event-type-card .event-type-icon::before { content: '\2741'; }
.event-type-card h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-style: italic;
    color: inherit;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
@media (max-width: 600px) {
    .event-types-grid { column-gap: 20px; row-gap: 12px; }
    .event-type-card h3 { font-size: 1rem; }
}

/* Closer banner before footer — blends with the page, not a slab */
.closer-banner {
    background: transparent;
}
[data-theme="dark"] .closer-banner {
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(246, 185, 233, 0.10),
            transparent 60%),
        #121215;
}
.hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    text-align: center;
    color: #fff;
}
.hero-content .section-eyebrow {
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
}
.hero-content .section-eyebrow::before { color: rgba(255,255,255,0.65); }
.hero-content .display {
    color: #fff;
    max-width: 16ch;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.hero-content .lead {
    color: rgba(255,255,255,0.92);
    max-width: 38ch;
    font-weight: 300;
    margin-top: 0.5rem;
}
.hero-divider {
    width: 60px;
    height: 1px;
    background: rgba(255,255,255,0.55);
    margin: 1.75rem 0;
}

/* CTA button — refined editorial, pill-shape */
.cta-button {
    display: inline-block;
    background: var(--theme-primary, #b89968);
    color: #fff;
    text-decoration: none;
    padding: 16px 40px;
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 22px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border: none;
    cursor: pointer;
}
.cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.14);
    filter: brightness(1.04);
}
.cta-button.outline {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--theme-text);
    box-shadow: none;
}
.hero-content .cta-button.outline { color: #fff; }

/* Inline arrow link — editorial small-caps with animated chevron */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--hairline-strong);
    position: relative;
    transition: color 0.2s, border-color 0.2s;
}
.arrow-link::after {
    content: '\2192';
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.3em;
    font-style: italic;
    line-height: 1;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0;
}
.arrow-link:hover {
    color: var(--theme-primary, #B89968);
    border-color: var(--theme-primary, #B89968);
}
.arrow-link:hover::after { transform: translateX(8px); }

/* ============================================
   ABOUT (two-column: text left, image right)
   ============================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(40px, 7vw, 96px);
    align-items: center;
}
.about-grid .about-photo-wrap {
    position: relative;
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-grid .about-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--surface);
    border-radius: 6px;
}
.about-grid .about-photo-wrap:hover {
    transform: translate(-3px, -3px);
}

/* Drop cap on About intro */
.about-grid .about-intro::first-letter {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: 4.2rem;
    line-height: 0.85;
    float: left;
    color: var(--theme-primary, #B89968);
    padding: 0.18em 0.15em 0 0;
    font-weight: 400;
}

/* Signature block — handwritten close with role label, like a magazine byline. */
.about-grid .about-signature {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: clamp(20px, 3vw, 36px) 0 0;
    padding-right: 8px;
    position: relative;
}
.about-grid .about-signature::before {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    background: var(--theme-primary, #B89968);
    opacity: 0.55;
    margin-bottom: 14px;
}
.about-grid .about-signature-name {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--theme-primary, #B89968);
    margin: 0;
}
.about-grid .about-signature-role {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 8px;
}
.about-grid .event-list {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 1rem 0;
}
.about-grid .event-list li {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0 14px;
    border-right: 1px solid var(--hairline-strong);
}
.about-grid .event-list li:last-child { border-right: none; }
.about-grid .event-list li:first-child { padding-left: 0; }
@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FEATURED WORK (3-up grid on home)
   ============================================ */
/* Magazine spread — one tall feature on the left, two stacked on the right. */
.featured-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: clamp(20px, 2.4vw, 36px);
    row-gap: clamp(20px, 2.4vw, 36px);
    margin-top: 2.5rem;
    text-align: left;
    max-width: 1200px;
    margin-inline: auto;
    align-items: start;
}
.featured-grid a {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.featured-grid a:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}
.featured-grid a:nth-child(2) { grid-column: 2; grid-row: 1; }
.featured-grid a:nth-child(3) { grid-column: 2; grid-row: 2; }
.featured-grid .featured-image-wrap {
    display: block;
    overflow: hidden;
    background: var(--surface);
    width: 100%;
    border-radius: 6px;
}
.featured-grid a:nth-child(1) .featured-image-wrap { aspect-ratio: 4 / 5; }
/* Right column items use a slightly taller aspect so the bottom of the
   stacked pair aligns with the bottom of the tall left feature. */
.featured-grid a:nth-child(2) .featured-image-wrap,
.featured-grid a:nth-child(3) .featured-image-wrap { aspect-ratio: 13 / 10; }
@media (max-width: 760px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
    .featured-grid a:nth-child(1),
    .featured-grid a:nth-child(2),
    .featured-grid a:nth-child(3) {
        grid-column: 1;
        grid-row: auto;
    }
    .featured-grid a:nth-child(1) .featured-image-wrap,
    .featured-grid a:nth-child(2) .featured-image-wrap,
    .featured-grid a:nth-child(3) .featured-image-wrap { aspect-ratio: 4 / 5; }
}
.featured-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.featured-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline-strong);
}
.featured-card-eyebrow {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
}
.featured-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
}
.featured-grid a:hover img { transform: scale(1.06); }
@media (max-width: 768px) {
    .featured-grid { grid-template-columns: 1fr; }
}

/* ============================================
   GALLERY (masonry + filter chips)
   ============================================ */
.gallery-hero {
    padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 80px) clamp(28px, 4vw, 48px);
    text-align: center;
    background: var(--page-bg);
    position: relative;
    border-bottom: 1px solid var(--hairline);
    transition: background 0.3s ease;
}
.gallery-hero::before,
.gallery-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--theme-primary, #B89968) 30%,
        var(--theme-primary, #B89968) 70%,
        transparent);
    opacity: 0.65;
}
.gallery-hero::before { top: 0; }
.gallery-hero::after  { bottom: 0; opacity: 0.4; }

/* Eyebrow gets side rules instead of a single leaf in the hero */
.gallery-hero .section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 1.5rem;
}
.gallery-hero .section-eyebrow::before {
    content: '';
    display: inline-block;
    width: clamp(28px, 6vw, 56px);
    height: 1px;
    margin: 0;
    background: var(--theme-primary, #B89968);
    opacity: 0.55;
    font-size: 0;
}
.gallery-hero .section-eyebrow::after {
    content: '';
    display: inline-block;
    width: clamp(28px, 6vw, 56px);
    height: 1px;
    background: var(--theme-primary, #B89968);
    opacity: 0.55;
}
.gallery-hero .page-title {
    margin: 0 0 1.1rem;
    animation: heroTitleIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroTitleIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.985); letter-spacing: -0.04em; }
    100% { opacity: 1; transform: translateY(0)    scale(1);     letter-spacing: -0.01em; }
}
.gallery-hero .section-eyebrow {
    animation: heroEyebrowIn 0.9s ease both 0.05s;
}
@keyframes heroEyebrowIn {
    0%   { opacity: 0; transform: translateY(-6px); letter-spacing: 0.14em; }
    100% { opacity: 1; transform: translateY(0);    letter-spacing: 0.32em; }
}
.gallery-hero .page-title-flourish {
    animation: heroFlourishIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both 0.5s;
}
@keyframes heroFlourishIn {
    0%   { opacity: 0; transform: scaleX(0.4); }
    100% { opacity: 1; transform: scaleX(1); }
}
.gallery-hero p,
.gallery-hero .masthead-line {
    animation: heroFadeIn 0.9s ease both 0.7s;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-hero .page-title,
    .gallery-hero .section-eyebrow,
    .gallery-hero .page-title-flourish,
    .gallery-hero p,
    .gallery-hero .masthead-line { animation: none; }
}

/* Hover delight on the page-title — a subtle drift */
.gallery-hero .page-title {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s;
    display: inline-block;
    will-change: transform;
}
.gallery-hero:hover .page-title {
    text-shadow: 0 6px 24px rgba(184, 153, 104, 0.18);
}

/* Decorative floating accents in the corners of the page hero */
.gallery-hero .hero-accent {
    position: absolute;
    color: var(--theme-primary, #B89968);
    opacity: 0.35;
    font-size: 2.2rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.gallery-hero .hero-accent::before { content: '\2741'; }
.gallery-hero .hero-accent.tl { top: clamp(16px, 4vw, 40px); left: clamp(20px, 6vw, 64px); animation: floatA 7s ease-in-out infinite; }
.gallery-hero .hero-accent.tr { top: clamp(16px, 4vw, 40px); right: clamp(20px, 6vw, 64px); animation: floatB 8s ease-in-out infinite; }
.gallery-hero .hero-accent.bl { bottom: clamp(16px, 4vw, 40px); left: clamp(20px, 6vw, 64px); animation: floatB 9s ease-in-out infinite; font-size: 1.4rem; }
.gallery-hero .hero-accent.br { bottom: clamp(16px, 4vw, 40px); right: clamp(20px, 6vw, 64px); animation: floatA 6s ease-in-out infinite; font-size: 1.4rem; }

@keyframes floatA {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(6deg); }
}
@keyframes floatB {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(6px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-hero .hero-accent { animation: none; }
}
@media (max-width: 600px) {
    .gallery-hero .hero-accent.bl,
    .gallery-hero .hero-accent.br { display: none; }
}

/* Multi-motif flourish: ❁ · ✿ · ❁ between fading rules */
.gallery-hero .page-title-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0.25rem auto 1.5rem;
    max-width: 360px;
    color: var(--theme-primary, #B89968);
}
.gallery-hero .page-title-flourish::before,
.gallery-hero .page-title-flourish::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.gallery-hero .page-title-flourish span {
    line-height: 1;
    letter-spacing: 0.5em;
    font-size: 1rem;
    opacity: 0.85;
}
.gallery-hero .page-title-flourish span::before { content: '\2741  \273F  \2741'; }

/* Masthead line below subtitle */
.gallery-hero .masthead-line {
    margin-top: 1.25rem;
    font-size: 0.64rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}
.gallery-hero .masthead-line .sep {
    color: var(--theme-primary, #B89968);
    margin: 0 10px;
    opacity: 0.7;
}

.gallery-hero p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--ink-muted);
    margin: 0 auto;
    max-width: 52ch;
    line-height: 1.55;
}

.filter-chips {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: clamp(20px, 3vw, 28px) clamp(16px, 4vw, 80px);
    border-bottom: 1px solid var(--hairline);
    background: var(--page-bg);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.filter-chips::-webkit-scrollbar { height: 4px; }
.filter-chips::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 4px; }
.filter-chips button { flex-shrink: 0; }
.filter-chips button {
    background: transparent;
    border: 0;
    color: var(--ink-muted);
    padding: 6px 4px;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    border-radius: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
}
.filter-chips button .chip-count {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.65rem;
    font-style: italic;
    color: var(--ink-soft);
    letter-spacing: 0;
    font-weight: 400;
    background: none;
    padding: 0;
    vertical-align: super;
    transition: color 0.2s;
}
.filter-chips button:hover { color: var(--ink); }
.filter-chips button.active {
    color: var(--theme-primary, #B89968);
}
.filter-chips button.active::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px; bottom: 0;
    height: 1px;
    background: var(--theme-primary, #B89968);
}
.filter-chips button.active .chip-count {
    color: var(--theme-primary, #B89968);
    opacity: 0.7;
}
.filter-chips { gap: 8px; padding: 0; }
@media (max-width: 760px) {
    .filter-chips button { padding: 5px 2px; font-size: 0.95rem; gap: 5px; }
    .filter-chips button .chip-count { font-size: 0.6rem; }
}
@media (max-width: 480px) {
    .filter-chips button { padding: 4px 2px; font-size: 0.85rem; gap: 4px; }
    .filter-chips button .chip-count { font-size: 0.55rem; }
    .view-mode { padding: 4px 2px; font-size: 0.6rem; letter-spacing: 0.14em; }
    .view-mode .view-icon { font-size: 0.75rem; }
}

.masonry { padding: 0; }
.masonry-section {
    padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 80px) clamp(8px, 1.5vw, 20px);
}
.masonry-section:first-of-type { padding-top: clamp(28px, 4vw, 48px); }
.masonry-section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 clamp(16px, 2vw, 24px);
}
.masonry-section-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--ink-muted);
    font-weight: 500;
    text-transform: uppercase;
}
.masonry-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    color: var(--theme-primary, #B89968);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    margin: 0;
}
.masonry-section-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--ink-soft);
    opacity: 0.35;
    transform: translateY(-6px);
}
.masonry-section-count {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
/* True masonry via CSS Grid row-span: items flow left-to-right (so plate
   numbers read naturally), heights vary per photo via --row-span set inline. */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 10px;
    column-gap: 16px;
    row-gap: 0;
}
@media (max-width: 900px) {
    .masonry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .masonry-grid { grid-template-columns: 1fr; }
}
.masonry-item {
    grid-row: span var(--row-span, 30);
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 2px;
    cursor: zoom-in;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.masonry-item.hidden { display: none; }
.masonry-item:hover { transform: translateY(-4px); }
.masonry-item img,
.masonry-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--surface-tinted);
    transition: filter 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
/* Tiny shimmer placeholder while the image decodes — disappears the moment
   the image gets the .loaded class from JS. */
.masonry-item img {
    opacity: 0;
    background:
        linear-gradient(110deg, transparent 30%, rgba(184, 153, 104, 0.05) 50%, transparent 70%) 0 0 / 200% 100%,
        var(--surface-tinted);
    animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
    from { background-position: -200% 0, 0 0; }
    to   { background-position: 200% 0, 0 0; }
}
.masonry-item img.loaded {
    opacity: 1;
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .masonry-item img { animation: none; }
}
.masonry-item:hover img.loaded,
.masonry-item:hover video { filter: brightness(1.03); transform: scale(1.02); }
.masonry-item video { background: #000; }
/* Hover caption — small plate badge in the corner, fades in on hover. */
.masonry-item .item-caption {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.masonry-item .item-caption-num {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 999px;
    text-shadow: none;
}
.masonry-item:hover .item-caption {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   LIGHTBOX
   ============================================ */
/* Editorial lightbox — top context bar + framed image + footer caption */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: #0c0c0e;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    animation: lb-fade 0.25s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox.open { display: flex; }

/* Top bar — category label + plate number + close button */
.lightbox-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
    color: rgba(255,255,255,0.9);
}
.lightbox-context {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}
.lightbox-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
}
.lightbox-plate {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.55rem;
    color: #fff;
    line-height: 1;
}

/* Image stage — fills remaining space, image scales to fit */
.lightbox-content {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(80px, 10vw, 120px);
}
.lightbox img,
.lightbox video {
    /* Fill the stage and let object-fit handle aspect. width/height as 100%
       gives the browser a real box before the image finishes loading, so the
       flex parent doesn't get stuck at 0 height and need a repaint to show. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,0.8);
    background: transparent;
}

/* Bottom footer — caption (if present) + counter */
.lightbox-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
    color: rgba(255,255,255,0.75);
    text-align: center;
}
.lightbox-caption {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 60ch;
    line-height: 1.5;
}
.lightbox-caption[hidden] { display: none; }

/* Controls */
.lightbox .close,
.lightbox .arrow {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.85);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.45rem;
    font-style: italic;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
}
.lightbox .close { position: static; flex: 0 0 auto; }
.lightbox .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.lightbox .arrow.prev { left: clamp(16px, 2.4vw, 30px); }
.lightbox .arrow.next { right: clamp(16px, 2.4vw, 30px); }
.lightbox .close:hover,
.lightbox .arrow:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}
.lightbox .arrow:hover { transform: translateY(-50%) scale(1.05); }
.lightbox .counter {
    color: rgba(255,255,255,0.55);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.lightbox .counter::before,
.lightbox .counter::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: rgba(255,255,255,0.25);
}

@media (max-width: 700px) {
    .lightbox-content { padding: 0 8px; }
    .lightbox .arrow { width: 40px; height: 40px; font-size: 1.1rem; }
    .lightbox .arrow.prev { left: 8px; }
    .lightbox .arrow.next { right: 8px; }
    .lightbox-plate { font-size: 1.2rem; }
}

/* Plate number badge on every gallery item — small italic footnote marker
   in the top-right corner so visitors can reference photos by number.   */
.masonry-item .item-plate {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0.04em;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Catalog plate cards already use figcaption with .catalog-plate-num —
   promote that to always-visible (was hover-only) so it matches mosaic. */
.catalog-card figcaption {
    opacity: 1;
}
.catalog-card .catalog-plate-num {
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 999px;
    font-style: italic;
}
.catalog-feature-image figcaption {
    opacity: 1;
}
.catalog-feature-image .catalog-plate-num {
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 999px;
    font-style: italic;
}

/* ============================================
   SERVICES (alternating-side full-width)
   ============================================ */
.service-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 80px);
    max-width: 1300px;
    margin: 0 auto;
}
.service-row.reverse {
    grid-template-columns: 2fr 3fr;
}
.service-row.reverse .service-image {
    order: 2;
}
.service-row .service-image {
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: 4px;
}
.service-row .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.service-row:hover .service-image img { transform: scale(1.02); }
.service-row .service-copy h3 {
    font-family: var(--theme-heading-family, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.005em;
}
.service-row .service-copy p {
    color: var(--ink-muted);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
}
.service-row .service-image {
    box-shadow: 0 16px 48px -16px rgba(0,0,0,0.22);
    margin: 0;
    position: relative;
}
.service-row .service-plate {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 12px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.service-row:hover .service-plate {
    opacity: 1;
    transform: translateY(0);
}
.service-row .service-text { min-width: 0; }
.service-row .service-num {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--theme-primary, #B89968);
    font-weight: 500;
    margin-bottom: 18px;
    letter-spacing: 0;
    text-transform: none;
}
.service-row .service-num::after {
    content: '';
    display: inline-block;
    width: 64px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}
@media (max-width: 600px) {
    .service-row .service-num { font-size: 1.8rem; gap: 14px; margin-bottom: 12px; }
    .service-row .service-num::after { width: 48px; }
}

/* Ornament divider between service rows */
.service-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 320px;
    margin: clamp(20px, 3vw, 36px) auto;
    color: var(--theme-primary, #B89968);
    opacity: 0.55;
}
.service-divider::before,
.service-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.service-divider span {
    font-size: 1rem;
    line-height: 1;
}
@media (max-width: 900px) and (min-width: 761px) {
    .service-row { gap: clamp(16px, 3vw, 28px); padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px); }
    .service-row .service-image { aspect-ratio: 4/3; }
}

/* Mobile: stack image full-width above text. Alternate text alignment
   left / right so each row's heading and paragraph sit on the opposite side. */
@media (max-width: 760px) {
    .service-row,
    .service-row.reverse {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: clamp(16px, 3vw, 22px);
        padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 28px);
    }
    .service-row .service-image,
    .service-row.reverse .service-image {
        order: 0;
        width: 100%;
        aspect-ratio: 4/3;
    }
    .service-row .service-text {
        order: 1;
        width: 100%;
        text-align: left;
    }
    .service-row.reverse .service-text {
        text-align: right;
    }
    /* Re-anchor inline flourishes when text is right-aligned */
    .service-row.reverse .service-num {
        flex-direction: row-reverse;
    }
    .service-row.reverse .service-text .section-title::after {
        margin-left: auto;
        margin-right: 0;
    }
    .service-row .service-num { font-size: 1.8rem; gap: 14px; margin-bottom: 10px; }
    .service-row .service-num::after { width: 48px; }
}

/* ============================================
   CONTACT (two-column: intro left, form right)
   ============================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.contact-intro .lead { margin-top: 1rem; font-style: italic; }
.contact-intro .quiet-note {
    font-style: italic;
    color: var(--theme-muted-text, #666);
    font-size: 0.95rem;
    margin: 1.5rem 0;
}
.contact-intro .contact-meta {
    margin-top: clamp(28px, 4vw, 40px);
    padding-top: clamp(20px, 3vw, 28px);
    border-top: 1px solid var(--hairline-strong);
    display: grid;
    gap: clamp(16px, 2vw, 22px);
}
.contact-intro .contact-meta div {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink);
}
.contact-intro .contact-meta strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--theme-primary, #B89968);
    margin-bottom: 4px;
}
.contact-intro .contact-meta a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline-strong);
    transition: color 0.2s, border-color 0.2s;
}
.contact-intro .contact-meta a:hover {
    color: var(--theme-primary, #B89968);
    border-color: var(--theme-primary, #B89968);
}

/* Editorial form — no card box, no harsh borders. Each field is just a label
   above a hairline-underlined input. Floats on the surface, no chrome. */
.contact-form {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6vw, 30px);
}
.contact-form label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--theme-primary, #B89968);
    font-weight: 600;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--hairline-strong);
    border-radius: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    background: transparent;
    color: var(--ink);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.contact-form select { appearance: none; -webkit-appearance: none; padding-right: 24px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder { color: var(--ink-soft); }
[data-theme="dark"] .contact-form select option { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .contact-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }
.contact-form textarea { min-height: 120px; resize: vertical; padding-top: 8px; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-bottom-color: var(--theme-primary, #B89968);
    border-bottom-width: 2px;
    padding-bottom: 7px;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.contact-form button[type="submit"] {
    background: var(--theme-primary, #B89968);
    color: #fff;
    border: 0;
    padding: 16px 40px;
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    margin-top: clamp(12px, 1.6vw, 18px);
    align-self: flex-start;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.contact-form button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.14);
    filter: brightness(1.04);
}

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

.form-message {
    padding: 14px 18px;
    border-radius: 2px;
    margin-bottom: 18px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    border-left: 3px solid;
}
.form-message.success { background: rgba(184, 153, 104, 0.06); color: #B89968; border-color: #B89968; }
.form-message.error   { background: rgba(180, 60, 60, 0.06); color: #8a2a2a; border-color: #8a2a2a; }

.contact-meta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline-strong);
    font-size: 0.95rem;
    color: var(--ink-muted);
}
.contact-meta div { margin-bottom: 0.85rem; line-height: 1.5; }
.contact-meta strong { color: var(--ink); }
.contact-meta a { color: var(--theme-primary, rgb(60,211,222)); }

/* (Decorative divider hidden for Desert Dump.) */
.divider-floral { display: none !important; }


/* ============================================
   FOOTER — editorial multi-column
   ============================================ */
.site-footer {
    background: var(--page-bg);
    color: var(--ink);
    text-align: center;
    font-family: var(--theme-body-family, 'Inter', sans-serif);
    padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 80px) clamp(20px, 3vw, 36px);
    position: relative;
}

/* Top flourish line — three-part rule + glyph */
.footer-flourish-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 380px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    color: var(--theme-primary, #B89968);
}
.footer-flourish-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.5;
}
.footer-flourish-glyph {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.85;
}

.footer-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

/* Brand block — script logo, italic tagline, small caps masthead */
.footer-brand {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 72px);
}
.footer-brand .footer-script-logo {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 14px;
    transition: color 0.2s, transform 0.2s;
}
.footer-brand .footer-script-logo:hover {
    color: var(--theme-primary, #B89968);
    transform: translateY(-1px);
}
.footer-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--ink-muted);
    margin: 0 auto 18px;
    max-width: 40ch;
}
.footer-volume {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Four-column info grid */
.footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    margin: 0 0 clamp(36px, 5vw, 56px);
    text-align: left;
    padding-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--hairline);
}
.footer-col { min-width: 0; }
.footer-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--theme-primary, #B89968);
    font-weight: 600;
    margin: 0 0 18px;
    position: relative;
    padding-bottom: 14px;
}
.footer-col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.footer-col-body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-muted);
    margin: 0;
}
.footer-col-body em {
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.92em;
}
.footer-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-col-list li {
    margin: 0 0 10px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.5;
}
.footer-col-list li a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-col-list li a:hover {
    color: var(--theme-primary, #B89968);
    padding-left: 4px;
}
.footer-col-list li a .fab { font-size: 1.05em; opacity: 0.8; }
.footer-col-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
}

/* Bottom row: copyright on left, controls on right */
.footer-baseline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: clamp(20px, 3vw, 30px);
    border-top: 1px solid var(--hairline);
    flex-wrap: wrap;
}
.footer-baseline .credits {
    margin: 0;
    font-size: 0.7rem;
    color: var(--ink-soft);
    font-style: italic;
    line-height: 1.5;
    text-align: left;
}
.footer-baseline .credits .jpb-link {
    color: inherit;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-baseline .credits .jpb-link:hover { color: var(--theme-primary, #B89968); }
.footer-controls {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.footer-controls .footer-lang {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.footer-controls .footer-lang .lang-link {
    background: none;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--ink-soft);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    transition: color 0.2s;
}
.footer-controls .footer-lang .lang-link.active,
.footer-controls .footer-lang .lang-link:hover { color: var(--theme-primary, #B89968); }
.footer-controls .footer-lang .lang-divider { color: var(--ink-soft); opacity: 0.5; }
.footer-controls-sep {
    color: var(--ink-soft);
    opacity: 0.5;
}
.footer-controls .theme-toggle {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    cursor: pointer;
    transition: color 0.2s;
}
.footer-controls .theme-toggle:hover { color: var(--theme-primary, #B89968); }
.footer-controls .theme-toggle-icon {
    width: 13px;
    height: 13px;
}

@media (max-width: 900px) {
    .footer-cols {
        grid-template-columns: 1fr 1fr;
        row-gap: 36px;
    }
}
@media (max-width: 560px) {
    .footer-cols { grid-template-columns: 1fr; row-gap: 28px; }
    .footer-baseline {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-baseline .credits { text-align: center; }
}

[data-theme="dark"] .site-footer { background: var(--page-bg); }


/* 404 page — extra-large numerals + centered link stack */
.not-found .section-title { font-size: clamp(5rem, 14vw, 8rem); }
.not-found-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vw, 36px);
    flex-wrap: wrap;
    margin-top: clamp(8px, 2vw, 16px);
}

/* Old class hidden if it leaks through */
.navigationBar { display: none; }

/* Video play indicator — overlays the thumbnail/poster on any item that's a video */
.masonry-item[data-type="video"],
.catalog-card[data-type="video"],
.catalog-feature-image[data-type="video"] {
    position: relative;
}
.masonry-item[data-type="video"]::after,
.catalog-card[data-type="video"]::after,
.catalog-feature-image[data-type="video"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    pointer-events: none;
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 2;
}
.masonry-item[data-type="video"]::before,
.catalog-card[data-type="video"]::before,
.catalog-feature-image[data-type="video"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -12px 0 0 -8px;
    border-left: 18px solid var(--theme-primary, #B89968);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    pointer-events: none;
    z-index: 3;
}
.masonry-item[data-type="video"]:hover::after,
.catalog-card[data-type="video"]:hover::after,
.catalog-feature-image[data-type="video"]:hover::after {
    background: #fff;
    transform: scale(1.05);
}
@media (max-width: 600px) {
    .masonry-item[data-type="video"]::after,
    .catalog-card[data-type="video"]::after,
    .catalog-feature-image[data-type="video"]::after { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
    .masonry-item[data-type="video"]::before,
    .catalog-card[data-type="video"]::before,
    .catalog-feature-image[data-type="video"]::before { margin: -9px 0 0 -6px; border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================
   Gallery view toolbar + Catalog (magazine view)
   ============================================ */
/* Gallery masthead — editorial intro above the toolbar */
.gallery-masthead {
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 80px) clamp(28px, 4vw, 48px);
    max-width: 760px;
    margin: 0 auto;
}
.gallery-masthead-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 18px;
}
.gallery-masthead-title {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    line-height: 1.05;
    color: var(--ink);
    margin: 0;
    font-weight: 400;
}
.gallery-masthead-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: clamp(16px, 2.4vw, 24px) auto;
    max-width: 260px;
    color: var(--theme-primary, #B89968);
    opacity: 0.6;
}
.gallery-masthead-rule::before,
.gallery-masthead-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.gallery-masthead-rule span { font-size: 0.85rem; line-height: 1; }
.gallery-masthead-lead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 1.55vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 56ch;
    margin: 0 auto;
}

.gallery-toolbar {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    padding: clamp(12px, 2vw, 18px) clamp(16px, 4vw, 80px);
    border-bottom: 1px solid var(--hairline);
    background: var(--page-bg);
}
.gallery-toolbar .filter-chips {
    flex: 1 1 0;
    min-width: 0;
    border-bottom: 0;
    padding: 0;
    gap: clamp(14px, 2vw, 22px);
    background: transparent;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.gallery-toolbar .filter-chips::-webkit-scrollbar { height: 3px; }
.gallery-toolbar .view-toggle-row {
    flex: 0 0 auto;
}
/* Catalog view uses the Contents TOC for navigation — hide the chips. */
.gallery-toolbar[data-mode="catalog"] .filter-chips { display: none; }
.gallery-toolbar[data-mode="catalog"] .view-toggle-row { margin-left: auto; }
.view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: 0;
    padding: 0;
}
.view-mode {
    background: transparent;
    border: 0;
    color: var(--ink-muted);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 2px;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color 0.2s;
}
.view-mode .view-icon { font-size: 0.85rem; line-height: 1; opacity: 0.7; }
.view-mode:hover { color: var(--ink); }
.view-mode.active { color: var(--theme-primary, #B89968); }
.view-mode.active .view-icon { opacity: 1; }
.view-mode.active::after {
    content: '';
    position: absolute;
    left: 2px; right: 2px; bottom: -2px;
    height: 1px;
    background: var(--theme-primary, #B89968);
}

/* Catalog view */
.catalog[hidden] { display: none; }
.catalog {
    padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 80px) clamp(48px, 6vw, 80px);
    background: var(--surface);
    color: var(--ink);
}
/* Top of catalog — table of contents on the left, brand image on the right */
.catalog-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: stretch;
    margin: 0 0 clamp(40px, 6vw, 72px);
}
.catalog-intro-image {
    overflow: hidden;
    background: var(--surface-tinted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog-intro-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
    background: var(--surface-tinted);
}
/* Catalog cover-page logo — sits above the masthead eyebrow + Contents title,
   making the catalog open like a magazine cover. */
.catalog-logo {
    display: block;
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: 1;
    color: var(--theme-primary, #B89968);
    margin-bottom: 14px;
}
.catalog-flourish {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    max-width: 220px;
    color: var(--theme-primary, #B89968);
    opacity: 0.6;
}
.catalog-flourish::before {
    content: '\2766';
    flex: 0 0 auto;
    font-size: 0.78rem;
    line-height: 1;
}
.catalog-flourish::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
}

.catalog-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

/* Services page intro — mirrors the catalog spread: contents on the left,
   editorial portrait on the right. */
.services-intro {
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(20px, 3vw, 36px);
    /* No cream-fade background — sit flat on the page surface. */
    background: transparent;
}
.services-intro-spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}
.services-toc {
    max-width: none;
    margin: 0;
    padding: clamp(16px, 2vw, 24px) 0;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.services-toc .catalog-eyebrow { text-align: left; }
.services-toc .catalog-toc-title { text-align: left; }
.services-toc ol { list-style: none; margin: 0; padding: 0; }
.services-toc li { margin: 8px 0; }
.services-toc a {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    transition: color 0.2s;
}
.services-toc a:hover { color: var(--theme-primary, #B89968); }
.services-intro-image {
    overflow: hidden;
    background: var(--surface-tinted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 4px;
}
.services-intro-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 64vh;
    object-fit: cover;
    background: var(--surface-tinted);
}
/* Slideshow variant — stacked images with fade transition */
.services-intro-slideshow {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: none;
}
.services-intro-slideshow .services-intro-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s ease;
    pointer-events: none;
}
.services-intro-slideshow .services-intro-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.services-intro-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    z-index: 2;
}
.services-intro-dot {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    transition: background 0.25s ease, width 0.25s ease;
}
.services-intro-dot.active {
    background: #fff;
    width: 32px;
}
@media (max-width: 760px) {
    .services-intro-slideshow { aspect-ratio: 4 / 3; max-height: 320px; }
}
@media (max-width: 760px) {
    .services-intro-spread {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .services-intro-image { order: -1; }
    .services-intro-image img { max-height: 320px; }
    /* Mobile uses the same centered-framed look the catalog TOC has */
    .services-toc {
        max-width: 540px;
        margin: 0 auto;
        padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 24px);
        border-top: 1px solid var(--hairline-strong);
        border-bottom: 1px solid var(--hairline-strong);
    }
    .services-toc .catalog-eyebrow,
    .services-toc .catalog-toc-title { text-align: center; }
    .services-toc li {
        margin: 0;
        border-top: 1px solid var(--hairline);
    }
    .services-toc li:first-child { border-top: 0; }
    .services-toc a {
        padding: 14px 4px;
        min-height: 44px;
        align-items: center;
        font-size: 1rem;
        position: relative;
    }
    .services-toc a::after {
        content: '\203A';
        margin-left: 10px;
        color: var(--ink-soft);
        font-size: 1.15rem;
        line-height: 1;
        transition: transform 0.2s, color 0.2s;
    }
    .services-toc a:hover::after,
    .services-toc a:active::after {
        color: var(--theme-primary, #B89968);
        transform: translateX(2px);
    }
}

/* Table of contents — dot leaders, left aligned */
.catalog-toc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(8px, 1.5vw, 16px) 0;
}
.catalog-toc-title {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    text-align: left;
    margin: 0 0 18px;
    color: var(--theme-primary, #B89968);
    font-weight: 400;
    line-height: 0.95;
}
.catalog-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.catalog-toc li { margin: 8px 0; }
.catalog-toc a {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    transition: color 0.2s;
}
.catalog-toc a:hover { color: var(--theme-primary, #B89968); }
.toc-label { white-space: nowrap; min-width: 0; }

/* Mobile catalog TOC — magazine-style, matches services TOC treatment.
   Centered, hairline-framed, generous tap targets, chevron affordance. */
@media (max-width: 760px) {
    .catalog-intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .catalog-toc {
        max-width: 540px;
        margin: 0 auto;
        padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 24px);
        border-top: 1px solid var(--hairline-strong);
        border-bottom: 1px solid var(--hairline-strong);
    }
    .catalog-toc .catalog-logo,
    .catalog-toc .catalog-eyebrow,
    .catalog-toc .catalog-toc-title { text-align: center; }
    .catalog-toc .catalog-toc-title { margin-bottom: 14px; }
    .catalog-toc .catalog-flourish {
        margin-left: auto;
        margin-right: auto;
        max-width: 180px;
        justify-content: center;
    }
    .catalog-toc .catalog-flourish::after {
        background: linear-gradient(90deg, currentColor, transparent);
    }
    .catalog-toc li {
        margin: 0;
        border-top: 1px solid var(--hairline);
    }
    .catalog-toc li:first-child { border-top: 0; }
    .catalog-toc a {
        padding: 14px 4px;
        min-height: 44px;
        align-items: center;
        font-size: 1rem;
        position: relative;
    }
    .catalog-toc a::after {
        content: '\203A';
        margin-left: 10px;
        color: var(--ink-soft);
        font-size: 1.15rem;
        line-height: 1;
        transition: transform 0.2s, color 0.2s;
    }
    .catalog-toc a:hover::after,
    .catalog-toc a:active::after {
        color: var(--theme-primary, #B89968);
        transform: translateX(2px);
    }
}
@media (max-width: 600px) {
    .catalog-toc a, .services-toc a { font-size: 1rem; gap: 6px; }
    .toc-label { white-space: normal; flex: 1 1 auto; line-height: 1.2; }
    .toc-leader { display: none; }
    .toc-page { flex-shrink: 0; padding-left: 8px; }
}
.toc-leader {
    flex: 1 1 auto;
    margin: 0 8px;
    border-bottom: 1.5px dotted var(--ink-soft);
    transform: translateY(-3px);
    min-width: 24px;
}
.toc-page {
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* Section spread — feature image on one side, title + paragraph on the other; alternates */
.catalog-section {
    margin: clamp(56px, 8vw, 112px) auto 0;
    max-width: 1100px;
}
/* Anchor jumps from any TOC land below the sticky nav (set via scroll-padding
   on html so all anchors honor it). */
.catalog-section,
.service-row { scroll-margin-top: clamp(72px, 9vw, 100px); }
.catalog-section:first-of-type { margin-top: 0; }
.catalog-spread-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.catalog-section:nth-of-type(even) .catalog-spread-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
}
.catalog-section:nth-of-type(even) .catalog-feature-image { order: 2; }
.catalog-section:nth-of-type(even) .catalog-section-head { order: 1; }

.catalog-feature-image {
    margin: 0;
    position: relative;
    cursor: pointer;
    background: var(--surface-tinted);
    overflow: hidden;
    max-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog-feature-image img,
.catalog-feature-image video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    background: var(--surface-tinted);
}
.catalog-feature-image figcaption {
    position: absolute;
    bottom: 12px;
    right: 14px;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    opacity: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    transition: opacity 0.25s ease;
}
.catalog-feature-image:hover figcaption { opacity: 1; }
.catalog-feature-image:hover img,
.catalog-feature-image:hover video {
    filter: brightness(0.96);
}

.catalog-section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    max-width: none;
}
/* Text always reads left-to-right; only the image's column position alternates */
.catalog-section-head {
    text-align: left;
    align-items: flex-start;
}
.catalog-section-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.74rem;
    color: var(--ink-muted);
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.catalog-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    color: var(--theme-primary, #B89968);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    margin: 0;
}
.catalog-section-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 6px;
    color: var(--ink-muted);
    width: 200px;
    max-width: 100%;
}
.catalog-section-rule::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--ink-soft);
    opacity: 0.45;
}
.catalog-section-rule span {
    color: var(--theme-primary, #B89968);
    opacity: 0.85;
    font-size: 0.85rem;
}
.catalog-section-intro {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1rem, 1.55vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 6px 0 0;
    max-width: 50ch;
}
/* Subtle larger first letter — inline, no float, so the paragraph reads normally */
.catalog-section-intro::first-letter {
    font-family: var(--theme-heading-family, 'Inter', sans-serif);
    font-size: 1.8em;
    line-height: 1;
    color: var(--theme-primary, #B89968);
    font-style: normal;
    margin-right: 0.04em;
    vertical-align: -0.06em;
}
@media (max-width: 760px) {
    .catalog-section-head,
    .catalog-section:nth-of-type(even) .catalog-section-head {
        max-width: none;
        margin: 0;
        text-align: left;
        align-items: flex-start;
    }
    .catalog-section:nth-of-type(even) .catalog-section-rule { flex-direction: row; }
    .catalog-section:nth-of-type(even) .catalog-section-intro::first-letter {
        float: left; padding: 0.04em 0.1em 0 0;
    }
    .catalog-section-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .catalog-section-num { font-size: 0.85rem; letter-spacing: 0.32em; }
    /* On mobile the spread stacks — show the heading before the photo so
       anchor jumps land on the section title, not on the image. */
    .catalog-spread-hero,
    .catalog-section:nth-of-type(even) .catalog-spread-hero {
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 3vw, 22px);
    }
    .catalog-spread-hero .catalog-section-head,
    .catalog-section:nth-of-type(even) .catalog-section-head { order: 0; }
    .catalog-spread-hero .catalog-feature-image,
    .catalog-section:nth-of-type(even) .catalog-feature-image { order: 1; }
}

/* Smaller plates beneath the feature — uniform-sized grid */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.8vw, 20px);
    margin-top: clamp(8px, 1.4vw, 16px);
}
.catalog-card {
    margin: 0;
    position: relative;
    cursor: pointer;
    background: var(--surface-tinted);
    transition: transform 0.25s ease;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.catalog-card:hover { transform: translateY(-2px); }
.catalog-card img, .catalog-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a1a1a;
}
.catalog-card figcaption {
    position: absolute;
    bottom: 8px;
    right: 10px;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    transition: opacity 0.25s ease;
}
.catalog-card:hover figcaption { opacity: 1; }
.catalog-plate-num {
    font-style: italic;
    letter-spacing: 0.06em;
}

@media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Single plate — center as a companion shot rather than orphaning at left */
.catalog-grid:has(.catalog-card:only-child) {
    grid-template-columns: minmax(0, 60%);
    justify-content: center;
}
.catalog-grid .catalog-card:only-child {
    aspect-ratio: 4 / 3;
}
@media (max-width: 700px) {
    .catalog-grid:has(.catalog-card:only-child) { grid-template-columns: minmax(0, 80%); }
}

/* When the gallery is in catalog view, hide the gallery masthead — the catalog
   has its own "Contents" intro and the two cursive titles read as duplicates. */
body:has(.gallery-toolbar[data-mode="catalog"]) .gallery-masthead { display: none; }
@media (max-width: 760px) {
    .catalog-spread-hero,
    .catalog-section:nth-of-type(even) .catalog-spread-hero {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .catalog-section:nth-of-type(even) .catalog-feature-image { order: 1; }
    .catalog-section:nth-of-type(even) .catalog-section-head { order: 2; }
    .catalog-intro { grid-template-columns: 1fr; gap: 20px; }
    .catalog-intro-image { max-height: 360px; }
    .catalog-intro-image img { min-height: 240px; }
}
@media (max-width: 760px) {
    .gallery-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .gallery-toolbar .filter-chips { flex: 0 0 auto; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gallery-toolbar .view-toggle-row { flex: 0 0 auto; justify-content: center; }
    .gallery-toolbar[data-mode="catalog"] .view-toggle-row { margin-left: 0; }
}

/* Back-to-top button — appears after scroll, floats bottom-right */
.back-to-top[hidden] { display: none; }
.back-to-top {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--theme-primary, #B89968);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.24s ease, transform 0.24s ease, background 0.2s;
    z-index: 60;
    padding: 0;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--ink, #1b1b1b); }
.back-to-top:focus-visible {
    outline: 2px solid var(--theme-primary, #B89968);
    outline-offset: 3px;
}
.back-to-top-arrow {
    font-size: 1.25rem;
    line-height: 1;
    font-family: 'Inter', -apple-system, sans-serif;
}
@media (max-width: 600px) {
    .back-to-top { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 0.1s; transform: none; }
    .back-to-top.is-visible { transform: none; }
}