/* ===================================================
   Flowing River Fine Art — Shared Stylesheet
   Brand: River Ivory / Honey Gold / Deep Current
   Fonts: Cormorant Garamond 300 + italic / Raleway 300/400/500
   =================================================== */

/* --- Tokens ---------------------------------------- */
:root {
  --ivory:      #F5F1EA;
  --gold:       #CAAB72;
  --stone:      #B7AA9A;
  --dusk:       #4E6773;
  --deep:       #2E2B28;
  --deep-80:    rgba(46,43,40,0.80);
  --deep-05:    rgba(46,43,40,0.05);
  --gold-light: rgba(202,171,114,0.15);
  --gold-mid:   rgba(202,171,114,0.30);

  /* Darker stone for body copy on IVORY/light backgrounds — #B7AA9A on
     #F5F1EA is only 2.0:1 (fails WCAG AA). This variant holds 5.4:1.
     Use --stone for text on DARK backgrounds (already passes at 6.2:1) and
     --stone-dark for text on LIGHT backgrounds. */
  --stone-dark: #6B6154;

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Raleway', system-ui, sans-serif;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);

  /* Modular spacing scale — 8px base */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  --container: 1200px;
  --gutter:    clamp(24px, 4vw, 48px);
}

/* --- Reset ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* --- Body ------------------------------------------ */
body {
  background: var(--ivory);
  color: var(--deep);
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Paper grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* --- Typography ------------------------------------- */
.t-display {
  font-family: var(--ff-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.t-display-italic {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.t-kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
.t-label {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.t-body { font-family: var(--ff-body); font-weight: 300; line-height: 1.75; }
.t-body strong { font-weight: 500; }

h1, .h1 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h3, .h3 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.2;
}
h4, .h4 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.3;
}
p { max-width: 65ch; }
p + p { margin-top: 1.25em; }

/* --- Layout ---------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section-pad {
  padding: var(--sp-7) 0;   /* 96px */
}
.section-pad-sm {
  padding: var(--sp-6) 0;   /* 64px */
}

/* --- Kicker (section eyebrow) ---------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.kicker::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}
/* Kickers placed on a dark (--deep) section need the lighter stone value —
   the default .kicker span above targets light backgrounds. */
.kicker.on-dark span { color: var(--stone); }
.kicker span {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

/* --- Navigation ------------------------------------ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}
.site-nav.scrolled {
  background: rgba(245, 241, 234, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px var(--gutter);
  box-shadow: 0 1px 0 rgba(46,43,40,0.08);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
/* 42x40 keeps the mark's own 1000:951 proportion — the box is not square. */
.nav-logo-mark {
  width: 42px;
  height: 40px;
  flex-shrink: 0;
  transition: opacity 0.3s;
}
.nav-logo:hover .nav-logo-mark { opacity: 0.8; }
/* Wordmark sits on ONE line beside the mark (round 2, note 3) — no stacked
   "Fine Art" second line. Letter-spacing tightens on narrow viewports so the
   single line still clears the mobile menu button. */
.nav-wordmark {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep);
  line-height: 1.3;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
/* Round 2, note 2 — "make the Inquire text centred in the button."
   Two separate causes, both fixed here:
   1. VERTICAL (the visible one): `.nav-links a` sets padding-bottom: 2px and
      out-specifies a plain `.nav-cta` shorthand, so the label sat 10px from the
      top and 2px from the bottom. The `.nav-links a.nav-cta` selector below
      wins, restoring symmetric padding.
   2. HORIZONTAL (sub-pixel): letter-spacing adds a trailing gap after the last
      letter, nudging the label left inside an evenly-padded box. The extra
      0.1em on the left cancels it. */
.nav-cta,
.nav-links a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ivory);
  background: var(--deep);
  padding: 10px 24px 10px calc(24px + 0.1em);
  border-radius: 0;
  transition: background 0.25s;
}
.nav-cta:hover,
.nav-links a.nav-cta:hover { background: var(--dusk); color: var(--ivory); }
.nav-cta::after { display: none !important; }

/* Round 8, her homepage note 1 — "this initial header, the font looks small on
   desktop, would love to increase the text size significantly." The header was
   13px wordmark / 12px links, set when the nav also had to survive tablet
   widths. Wide screens now get their own scale (roughly +45% on the wordmark,
   +35% on the links) and a slightly taller bar to carry it. Below 1100px
   nothing changes — the phone header is untouched. */
@media (min-width: 1100px) {
  .site-nav { padding: 24px var(--gutter); }
  .site-nav.scrolled { padding: 16px var(--gutter); }
  .nav-logo { gap: 16px; }
  .nav-logo-mark { width: 50px; height: 48px; }
  .nav-wordmark { font-size: clamp(15px, 1.32vw, 20px); letter-spacing: 0.16em; }
  .nav-links { gap: clamp(22px, 2.5vw, 40px); }
  .nav-links a { font-size: clamp(13px, 1.1vw, 16px); }
  .nav-cta,
  .nav-links a.nav-cta {
    font-size: clamp(13px, 1.1vw, 16px);
    padding: 13px 28px 13px calc(28px + 0.1em);
  }
}

/* Mobile nav toggle */
/* 40x40 so it is a real thumb target on a phone — the bars stay 20px wide.
   (Was 28x21, which is under every touch-target guideline.) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  min-height: 40px;
  cursor: pointer;
  padding: 13px 10px;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--deep);
  transition: all 0.3s var(--ease-out);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ivory);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.nav-mobile.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}
.nav-mobile a {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 5vw, 42px);
  color: var(--deep);
  transition: color 0.2s;
}
.nav-mobile a:hover { color: var(--gold); }

/* --- Logo Hero ------------------------------------ */
.logo-hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
#logo-hero {
  /* Title-sequence: owns the full stage — majestic at 360-440px */
  width: clamp(280px, 28vw, 440px);
  height: auto;
  display: block;
  /* The mark's own camera lives inside the SVG (js/main.js), so the box
     itself never transforms. Reserve the box up front so building the
     animation causes no layout shift: the animated artboard is the
     artwork's 1000x951 space plus 9px of vertical overscan for the
     camera's opening scale. */
  aspect-ratio: 1000 / 969;
}
#logo-hero svg,
#logo-hero img {
  width: 100%;
  height: auto;
}

/* Hero kicker — fades up as the river channel completes */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dark);            /* on ivory statement block — --stone alone fails contrast */
  margin-top: var(--sp-2);             /* 16px below the mark */
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-kicker.visible { opacity: 1; }
.hero-kicker span {
  width: 28px;
  height: 1px;
  background: var(--gold-mid);
  flex-shrink: 0;
}

/* Scroll cue — thin line fades in at end of sequence */
.scroll-cue {
  position: absolute;
  bottom: var(--sp-4);                 /* 48px from bottom of hero viewport */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-cue.visible { opacity: 1; }
.scroll-cue-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--stone) 40%, transparent);
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  /* The mark itself renders its finished composition and never starts its
     clock (js/main.js); these just stop the copy from fading in. */
  .hero-kicker    { opacity: 1; transition: none; }
  .scroll-cue     { opacity: 0.4; transition: none; }
}

/* --- Hero Section — full-viewport title sequence --- */
.hero {
  height: 100vh;                       /* owns the whole first viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* nav sits over via position:fixed — no padding-top needed */
}
.hero-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* --- Hero photo — full-bleed image of Heather painting at a wedding --- */
.hero-photo {
  width: 100%;
  height: 92vh;
  min-height: 480px;
  max-height: 900px;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
}

/* --- Statement block — emblem + mark animation + core line --- */
/* Round 2: note 4 (mark slightly larger) · note 5 (wordmark removed, kicker
   sits directly under the mark) · note 6 (real breathing room before the
   headline section below) · note 7 (mark + kicker read as one unit). */
.statement-block {
  background: var(--ivory);
  padding: var(--sp-7) var(--gutter) clamp(88px, 10vw, 136px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Round 5 — "could make the logo a tad smaller." A nudge at BOTH ends of the
   clamp so it lands smaller at every width, not only on her phone. The round-4
   note below still holds: this near-square emblem reads bigger than the old
   traced mark at the same pixel width, which is why a small numeric cut is
   enough. THIS is the rule that sets the mark's width at every viewport —
   there are no media-query overrides (two dead ones were removed in round 5).

   Round 4: the new emblem is near-square (1000x951) where the old traced mark
   was wider and lighter, so the same pixel width reads noticeably bigger.
   Round 3 had set 156-216px for her note 4 ("slightly larger"). */
.logo-hero-wrap.small #logo-hero {
  width: clamp(140px, 13.2vw, 196px);
}
/* Mark and kicker read as one unit (round 2, note 7) — the mark's own artboard
   carries a little bottom air, so this pulls the kicker up close underneath it.
   Do not loosen this. */
.logo-hero-wrap.small .hero-kicker {
  margin-top: 2px;
}
/* Round 5 — "move to hold a moment in paint closer up to the logo to look like
   a composed introduction and slightly larger font." The line sits close enough
   under the kicker that mark + kicker + line read as one lockup rather than
   three stacked items, and it steps up a size. It stays well under the
   .hero-headline below it (54px desktop) — this is an introduction, not a
   second headline. The gap DOWN to that headline is untouched: it comes from
   .statement-block's bottom padding plus .intro-content's top padding, so
   tightening the group here widens the separation instead of eating into it
   (round 2, note 6). */
.statement-line {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(23px, 2.7vw, 34px);
  color: var(--deep);
  margin-top: clamp(14px, 1.5vw, 20px);
}

/* --- Intro Content — headline + photo below the fold --- */
.intro-content {
  background: var(--ivory);
  padding: var(--sp-7) 0;              /* 96px vertical breathing */
}
.intro-inner {
  display: grid;
  grid-template-columns: 58fr 42fr;    /* golden ratio: text wider than photo */
  gap: var(--sp-6);                    /* 64px column gap */
  align-items: start;                  /* shared top edge */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);                    /* 16px rhythm between elements */
}
.intro-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* Centered single-column variant — used on the homepage headline block
   (no companion photo; the full-bleed hero already carries the image). */
.intro-inner--centered {
  display: block;
  max-width: 780px;
  text-align: center;
}
.intro-inner--centered .intro-text { align-items: center; gap: 0; }
/* Round 2, note 9 — headline reads larger, and the buttons get real air
   beneath the sentence instead of sitting tight under it. */
.intro-inner--centered .hero-headline { font-size: clamp(31px, 4.2vw, 54px); }
.intro-inner--centered .hero-ctas {
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* --- Positioning statement — three-category strip -------------- */
.category-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  max-width: 960px;
  margin: var(--sp-6) auto 0;
  text-align: center;
}
.category-item p { color: var(--stone-dark); font-size: 15px; margin-top: 4px; }
@media (max-width: 768px) {
  .category-strip { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Headline and body reused from previous hero — same visual weight */
.hero-headline {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 64px); /* bigger now that it has its own section */
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--deep);
}
.hero-sub {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--stone-dark);
  line-height: 1.75;
  max-width: 44ch;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--sp-1);             /* 8px extra above buttons */
}

/* Photo frame — used in intro-image */
.hero-frame {
  position: relative;
  max-width: 420px;
  width: 100%;
}
.hero-frame img {
  width: 100%;
  height: auto;           /* explicit auto overrides HTML height="" presentational attr */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero-frame::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid var(--gold-mid);
  pointer-events: none;
  z-index: 1;
}
.hero-frame::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 60%;
  height: 60%;
  background: var(--gold-light);
  z-index: -1;
}

/* --- Buttons --------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 32px;
  transition: all 0.25s var(--ease-out);
  cursor: pointer;
}
.btn-primary {
  background: var(--deep);
  color: var(--ivory);
  border: 1px solid var(--deep);
}
.btn-primary:hover {
  background: var(--dusk);
  border-color: var(--dusk);
  color: var(--ivory);
}
.btn-outline {
  background: transparent;
  color: var(--deep);
  border: 1px solid var(--deep);
}
.btn-outline:hover {
  background: var(--deep);
  color: var(--ivory);
}
.btn-gold {
  background: var(--gold);
  color: var(--deep);
  border: 1px solid var(--gold);
}
.btn-gold:hover {
  background: var(--deep);
  color: var(--ivory);
  border-color: var(--deep);
}

/* --- Section Header Pattern ----------------------- */
.section-header {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: var(--sp-6);  /* 64px */
}
.section-header .h2 { margin: 16px 0 20px; }
.section-header .lead {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--stone-dark);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.7;
}
.section-header.on-dark .lead { color: var(--stone); }

/* Section watermark number */
.section-watermark {
  position: absolute;
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(140px, 20vw, 280px);
  color: var(--deep);
  opacity: 0.03;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 0;
}

/* --- Gallery / Painting Display ------------------- */
/* Fix 5 — containment system: color bands bleed full-width (via section/row bg),
   content always inside 1200px container on the shared grid. */
.gallery-hung {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);          /* 8px hairline gap — visual separation between items */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.gallery-item {
  display: grid;
  /* Round 2, note 12 — "can make the paintings slightly larger… let the work
     talk." Image column grows from 40fr to 52fr. */
  grid-template-columns: 52fr 48fr;
  gap: 0;
  align-items: center;
  min-height: 60vh;                  /* contained so reduce from 70vh */
  overflow: hidden;
}
.gallery-item:nth-child(even) {
  direction: rtl;
}
.gallery-item:nth-child(even) .gallery-content {
  direction: ltr;
}
.gallery-image-side {
  position: relative;
  overflow: hidden;
}
.gallery-image-side img {
  width: 100%;
  height: auto;           /* explicit auto overrides HTML height="" presentational attr */
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.gallery-item:hover .gallery-image-side img {
  transform: scale(1.02);
}
/* Painting shadow/frame effect */
.gallery-image-side::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(46,43,40,0.1);
  pointer-events: none;
}

.gallery-content {
  padding: var(--sp-5) var(--gutter);   /* 48px — trimmed so the wider image
                                           column doesn't squeeze the copy */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);                      /* 24px */
  max-width: 480px;
}
.gallery-content.center-content {
  margin: 0 auto;
}

/* Single large painting display */
.painting-display {
  display: flex;
  justify-content: center;
  padding: 40px var(--gutter);
}
.painting-frame {
  position: relative;
  max-width: 500px;
  width: 100%;
}
.painting-frame img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  box-shadow: 0 20px 60px rgba(46,43,40,0.12), 0 8px 20px rgba(46,43,40,0.08);
}
.painting-frame::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(202,171,114,0.25);
  pointer-events: none;
  z-index: 1;
}

/* --- Two Modes (Home) ------------------------------ */
/* Fix 4 — exact mirror geometry. Both panels bleed to their respective edge.
   Ivory panel gets a warm-stone tint so it reads as a distinct panel (not just
   the page background) — visual weight now matches the dark panel. */
.two-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;                  /* no gap — panels meet at a natural seam */
}
.mode-panel {
  background: #EAE4DA;     /* warm-stone tint — darker than page ivory #F5F1EA */
  padding: var(--sp-6);    /* 64px — same on both panels */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);        /* 24px — same on both panels */
}
.mode-panel.mode-dark {
  background: var(--deep);
  color: var(--ivory);
}
.mode-panel.mode-dark .h3,
.mode-panel.mode-dark p { color: var(--ivory); }
.mode-panel.mode-dark .mode-body { color: var(--stone); }
.mode-body { color: var(--stone-dark); font-size: 15px; max-width: 40ch; }

/* --- Scroll reveal --------------------------------- */
/* Reveals hide only when JS has run (fail-open: no JS = fully visible) */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.js .reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal-left.in-view { opacity: 1; transform: translateX(0); }
.js .reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal-right.in-view { opacity: 1; transform: translateX(0); }

/* --- Testimonials ---------------------------------- */
.testimonial-section {
  background: var(--deep);
  color: var(--ivory);
}
.testimonial-wrap {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(64px, 10vw, 120px) var(--gutter);
}
.testimonial-quote {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.5;
  color: var(--ivory);
  margin-bottom: 28px;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after  { content: '\201D'; }
.testimonial-attr {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.testimonial-awaiting {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.testimonial-slot {
  border: 1px solid rgba(202,171,114,0.2);
  padding: 20px 28px;
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 13px;
  font-style: italic;
  color: rgba(245,241,234,0.3);
  letter-spacing: 0.05em;
}

/* --- Artist moment (home) -------------------------- */
/* Round 2, notes 13 + 14 — replaces the "view all collections" link with a
   short, restrained human moment: one photograph of Heather painting, two
   lines, one button. Deliberately quiet — no split screen, no big slab. */
.artist-moment {
  background: #EAE4DA;              /* warm-stone tint — a chapter break from
                                       the ivory section above */
  padding: clamp(64px, 8vw, 104px) var(--gutter);
}
.artist-moment-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.artist-moment-frame {
  position: relative;
  width: 100%;
  max-width: 442px;   /* Round 3, homepage note — ~30% larger, less side white space */
}
.artist-moment-frame img {
  width: 100%;
  height: auto;                     /* explicit auto overrides HTML height="" */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.artist-moment-frame::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--gold-mid);
  pointer-events: none;
}
.artist-moment-line {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.45;
  color: var(--deep);
  max-width: 34ch;
}

/* --- Single testimonial (home) --------------------- */
/* Round 2, note 15 — one quote, then an understated READ THEIR STORY link. */
.testimonial-single {
  background: var(--ivory);
  padding: clamp(64px, 8vw, 104px) var(--gutter);
}
.testimonial-single-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.testimonial-single-inner::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin-bottom: var(--sp-2);
}
.testimonial-single-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.45;
  color: var(--deep);
  max-width: 40ch;
}
.testimonial-single-attr {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

/* Understated text link with a trailing arrow — used for READ THEIR STORY */
.link-understated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dusk);
  min-height: 40px;          /* thumb-sized on a phone */
  padding: 10px 4px;
  transition: color 0.2s, gap 0.25s var(--ease-out);
}
.link-understated::after { content: '\2192'; }
.link-understated:hover { color: var(--deep); gap: 14px; }

/* --- Price Openness Band -------------------------- */
.price-band {
  background: var(--gold-light);
  border-top: 1px solid var(--gold-mid);
  border-bottom: 1px solid var(--gold-mid);
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  text-align: center;
}
.price-band .h3 {
  margin-bottom: 16px;
  font-style: italic;
}
.price-band p {
  color: var(--stone-dark);
  max-width: 52ch;
  margin: 0 auto;
  font-size: 16px;
}

/* --- Portfolio — editorial spreads (Round 8) -------
   Replaces the round-5b/6 `.artwork-*` image+text rows. Her note: on desktop
   the description sat under painting A and far left of painting B, so it read
   as belonging to the wrong painting. Every painting is now its own spread —
   the full canvas and one detail from the SAME painting, side by side, with a
   single caption anchored inside the full canvas so it can only belong to that
   painting. Rows alternate FULL | DETAIL then DETAIL | FULL; two paintings get
   an edge-to-edge feature band instead (her "occasionally give an especially
   strong painting a full-width image").                                      */

/* Collection header — centred and dominant (her note 3: "larger and more
   dominant - maybe centered rather than off to the right? I didn't even
   notice it the first few times"). Was a left/right flex bar with an .h3
   title; now a centred stack with an .h2 title (clamp 32-64px vs 22-36px). */
.collection-header-bar {
  padding: clamp(72px, 8vw, 120px) var(--gutter) clamp(28px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  border-bottom: 1px solid rgba(46,43,40,0.08);
}
.collection-header-bar .kicker { margin-bottom: 10px; }
.collection-header-bar.dark {
  background: var(--deep);
  color: var(--ivory);
  border-color: rgba(245,241,234,0.1);
}
.collection-title {
  font-style: italic;
  margin-bottom: 6px;
}

/* Bands — one per painting. Colours are brand tokens only; her mockup's
   ivory / gold / dark rotation is kept because it is what she drew. */
.pf-band { padding: clamp(40px, 5vw, 72px) 0; }
.pf-band--ivory { background: var(--ivory); }
/* Warm Stone at 26% over River Ivory — a tint of the system, not a new colour */
.pf-band--sand  { background: linear-gradient(rgba(183,170,154,0.26), rgba(183,170,154,0.26)), var(--ivory); }
.pf-band--gold  { background: var(--gold); }
.pf-band--deep  { background: var(--deep); }

/* Feature band — edge to edge on all four sides; the band colour survives only
   as the column between the two panels, which is exactly her page-3 mockup. */
.pf-band--feature { padding: 0; }

.pf-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 28px);
  align-items: start;
  max-width: 1760px;
  margin: 0 auto;
  /* deliberately tighter than the site --gutter: two paintings per row only
     get to be big if the page edges give the room back to them (her note 2,
     "I was also hoping the paintings could be bigger") */
  padding: 0 clamp(16px, 2vw, 32px);
}
.pf-band--feature .pf-spread {
  max-width: none;
  padding: 0;
}

/* A piece = one painting. Focusable so the caption is reachable by keyboard
   on desktop, where it is otherwise hover-only. */
.pf-piece { display: contents; }
.pf-panel {
  position: relative;
  outline: none;
}
.pf-panel:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.pf-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
/* The full canvases are mat-cropped to different intrinsic ratios, so `cover`
   re-crops them into the 4:5 box; anchoring to the top keeps faces safe
   (verified in rounds 5 and 6). Details are native 4:5 and sit centred. */
.pf-panel--full img   { object-position: center top; }
.pf-panel--detail img { object-position: center; }
.pf-band:not(.pf-band--feature) .pf-panel img {
  box-shadow: 0 16px 48px rgba(46,43,40,0.14);
}
.pf-band--deep:not(.pf-band--feature) .pf-panel img {
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

/* Caption — lives INSIDE the full-canvas panel so it cannot be read as
   belonging to the painting above or beside it. */
.pf-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 28px);
  background: linear-gradient(to top,
              rgba(30,28,26,0.86) 0%,
              rgba(30,28,26,0.62) 48%,
              rgba(30,28,26,0) 100%);
  color: var(--ivory);
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.pf-caption-title {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.12;
  color: var(--ivory);
}
.pf-caption-dims {
  display: block;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.88);
  margin-top: 10px;
}
.pf-caption-medium {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(245,241,234,0.82);
  margin-top: 2px;
}

/* Pointer devices only: the caption is hidden until the painting is hovered
   or focused ("when someone hovers over the image it describes it"). Touch
   devices and keyboards never lose it — opacity, never display, so it stays
   in the accessibility tree at all times. */
@media (hover: hover) and (pointer: fine) {
  .pf-caption { opacity: 0; transform: translateY(12px); }
  .pf-piece:hover .pf-caption,
  .pf-piece:focus-within .pf-caption,
  .pf-panel:hover .pf-caption,
  .pf-panel:focus-visible .pf-caption { opacity: 1; transform: none; }
  /* a quiet always-on hint so the caption is discoverable */
  .pf-panel--full::after {
    content: '';
    position: absolute;
    left: clamp(20px, 2.2vw, 32px);
    bottom: clamp(20px, 2.2vw, 32px);
    width: 34px;
    height: 1px;
    background: rgba(245,241,234,0.85);
    opacity: 0.9;
    transition: opacity 0.35s var(--ease-out);
    pointer-events: none;
  }
  .pf-piece:hover .pf-panel--full::after,
  .pf-piece:focus-within .pf-panel--full::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-caption { transition: none; }
}

/* Phones — the protected surface. One column, and the caption steps out of
   the image and sits directly under its painting, which is how mobile has
   always read on this page. */
@media (max-width: 768px) {
  .pf-band { padding: clamp(32px, 7vw, 48px) 0; }
  .pf-band--feature { padding: 0; }
  .pf-spread { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 28px); }
  .pf-band--feature .pf-spread { gap: 0; }
  .pf-caption {
    position: static;
    background: none;
    padding: 14px 0 4px;
    color: var(--deep);
    /* phones and tablets never hide the caption. This also covers any device
       that reports `hover: hover` while being touch-only — the media query
       above must never be the only thing keeping the title reachable. */
    opacity: 1;
    transform: none;
  }
  .pf-band--feature .pf-caption { padding-left: var(--gutter); padding-right: var(--gutter); }
  .pf-caption-title  { color: var(--deep); font-size: clamp(24px, 6.4vw, 32px); }
  .pf-caption-dims   { color: var(--stone-dark); }
  .pf-caption-medium { color: var(--stone-dark); }
  .pf-band--deep .pf-caption,
  .pf-band--deep .pf-caption-title  { color: var(--ivory); }
  .pf-band--deep .pf-caption-dims,
  .pf-band--deep .pf-caption-medium { color: rgba(183,170,154,0.9); }
  /* --stone-dark is only 2.8:1 on Honey Gold, so the gold band's secondary
     lines drop to Deep Current instead (5.8:1) */
  .pf-band--gold .pf-caption-dims,
  .pf-band--gold .pf-caption-medium { color: rgba(46,43,40,0.94); }
  /* the full canvas keeps the caption; the detail follows it */
  .pf-panel--detail { order: 2; }
  .pf-panel--full   { order: 1; }
}

/* Growing treatment */
.collection-growing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border: 1px solid rgba(202,171,114,0.2);
  max-width: 380px;
  width: clamp(240px, 30vw, 380px);
  aspect-ratio: 4/5;
  flex-direction: column;
  gap: 16px;
  color: rgba(183,170,154,0.6);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  text-align: center;
  padding: 32px;
}
.collection-growing.on-dark {
  border-color: rgba(202,171,114,0.15);
  color: rgba(183,170,154,0.5);
}
.collection-growing .growing-icon {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
}

/* --- Collections & Investment ---------------------- */
.collection-card {
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  border-bottom: 1px solid rgba(46,43,40,0.08);
}
.collection-card.dark {
  background: var(--deep);
  color: var(--ivory);
  border-color: rgba(245,241,234,0.06);
}
.collection-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.collection-label-col { padding-top: 4px; }
.collection-label-col .h4 { font-style: italic; }
.collection-range {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-top: 8px;
}
.collection-range.on-dark { color: var(--gold); }
.collection-detail-col { display: flex; flex-direction: column; gap: 16px; }
.collection-detail-col p {
  font-size: 16px;
  color: var(--stone-dark);
  max-width: 52ch;
}
.collection-detail-col p.on-dark { color: rgba(183,170,154,0.85); }
.collection-includes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.collection-includes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--stone-dark);
}
.collection-includes li.on-dark { color: rgba(183,170,154,0.8); }
.collection-includes li::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* --- Experience page ----------------------------- */
.experience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  align-items: center;          /* center text against image — trimmed copy no longer fills the column */
}
.experience-panel {
  padding: clamp(56px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;      /* center flex children vertically within the panel */
  align-self: stretch;          /* panel still fills full row height (overrides align-items: center for this item) */
}
.experience-panel.dark {
  background: var(--deep);
  color: var(--ivory);
}
.experience-panel.dark p { color: rgba(183,170,154,0.9); }
.experience-panel.dark .h2 { color: var(--ivory); }
.experience-panel.dark .kicker span { color: var(--gold); }
.experience-image {
  position: relative;
  overflow: hidden;
  align-self: stretch;          /* fills full row height despite align-items: center on parent */
}
.experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.experience-image:hover img { transform: scale(1.04); }

/* Round 3, Experience page note — "What to expect" steps as a unified
   2x2 grid on desktop (1,2 top / 3,4 bottom), matching gaps/alignment
   between Path 1 and Path 2. Stacks to one column on mobile. */
.experience-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 32px;
}
@media (max-width: 768px) {
  .experience-steps-grid { grid-template-columns: 1fr; }
}

/* --- About page ------------------------------------ */
.about-hero {
  min-height: 70vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.about-image {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-text {
  padding: clamp(56px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--stone-dark);
}
.about-body strong { color: var(--deep); font-weight: 500; }
.about-body + .about-body { margin-top: 1em; }
.about-pull-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--deep);
  border-left: 2px solid var(--gold);
  padding-left: 24px;
  margin: 8px 0;
}
/* Round 2, About note 3 — the closing line of the name section is the payoff.
   Larger, centred, framed by hairlines, sized to sit alongside the dark pull
   quote above it rather than reading as another body paragraph. */
.about-pull-quote--payoff {
  border-left: none;
  padding: clamp(36px, 4.5vw, 56px) 0 0;
  margin: clamp(44px, 5.5vw, 68px) 0 0;
  text-align: center;
  font-size: clamp(25px, 3.2vw, 40px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  position: relative;
}
.about-pull-quote--payoff::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--gold);
}

/* --- Journal / Blog -------------------------------- */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
}
.journal-post {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.journal-post-date {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dark);
}
.journal-post-date.on-dark { color: rgba(183,170,154,0.9); }
.journal-post-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--deep);
}
.journal-post-dek {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-dark);   /* was --gold — 1.93:1 on ivory, fails WCAG AA */
}
.journal-post-excerpt {
  font-size: 15px;
  line-height: 1.75;
  color: var(--stone-dark);
  max-width: 42ch;
}
.journal-post-excerpt.on-dark { color: rgba(183,170,154,0.9); max-width: none; }

/* Round 8 — the five journal entries she sent on 19 Aug are live, so every
   card on the index is now a link. Layout and copy are unchanged; this only
   makes the existing card clickable, with a keyboard focus ring. */
.journal-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.journal-card-link img { transition: opacity 0.4s var(--ease-out); }
.journal-card-link:hover img { opacity: 0.9; }
.journal-card-link .journal-post-title { transition: color 0.25s; }
.journal-card-link:hover .journal-post-title { color: var(--dusk); }
.journal-card-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
}
.journal-card-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dusk);
  transition: gap 0.25s var(--ease-out);
}
.journal-card-link:hover .journal-card-cue { gap: 14px; }
.journal-post-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep);
  font-weight: 500;
  margin-top: 4px;
  transition: color 0.2s, gap 0.2s;
}
.journal-post-link:hover { color: var(--dusk); gap: 14px; }
.journal-post-link::after { content: '→'; }

/* --- Inquire / Forms ------------------------------ */
.inquire-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.inquire-left {
  background: var(--deep);
  color: var(--ivory);
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.inquire-left .h2 { color: var(--ivory); }
.inquire-left p { color: rgba(183,170,154,0.85); font-size: 16px; }
.inquire-right {
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Form styles */
.form-section-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin-bottom: 4px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.form-group label {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(46,43,40,0.2);
  padding: 10px 0;
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--deep);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-hint {
  display: block;
  margin-top: 3px;
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(46,43,40,0.45);
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Preview-only note — subtle, matches the .faq-draft-note register */
.form-preview-note {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--gold-mid);
  background: var(--gold-light);
  font-size: 12px;
  line-height: 1.6;
  color: var(--stone-dark);
  text-align: center;
}

/* --- Call to Action Band -------------------------- */
.cta-band {
  background: var(--deep);
  padding: clamp(64px, 8vw, 100px) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.cta-band .h2 { color: var(--ivory); font-style: italic; }
.cta-band p { color: var(--stone); max-width: 50ch; margin: 0 auto; font-size: 16px; }
.cta-pair {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* --- Footer --------------------------------------- */
.site-footer {
  background: var(--deep);
  color: var(--ivory);
  padding: clamp(48px, 6vw, 80px) var(--gutter) 32px;
  position: relative;
  overflow: hidden;
}
.footer-wordmark {
  position: absolute;
  bottom: -20px;
  right: var(--gutter);
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(80px, 12vw, 180px);
  color: rgba(245,241,234,0.025);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-brand-name {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
}
.footer-tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 15px;
  color: var(--stone);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}
.footer-nav a {
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--gold); }

/* Footer socials row — three marks + the FAQ link, restrained. Round 2: her
   Instagram, Facebook and TikTok all live here (never a loud social bar). */
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--sp-1);
}
.footer-social a.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245,241,234,0.18);
  border-radius: 50%;
  color: var(--stone);
  transition: color 0.2s, border-color 0.2s;
}
.footer-social a.social-icon:hover { color: var(--gold); border-color: var(--gold-mid); }
.footer-social a.social-icon svg { width: 15px; height: 15px; fill: currentColor; }
.footer-social .social-divider {
  width: 1px;
  height: 16px;
  background: rgba(245,241,234,0.16);
  flex-shrink: 0;
}
.footer-social a.social-text {
  display: inline-flex;
  align-items: center;
  min-height: 36px;          /* matches the icon row; a real tap target */
  padding: 0 4px;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.2s;
}
.footer-social a.social-text:hover { color: var(--gold); }
.footer-social a.social-text.active { color: var(--gold); }

/* Big logo moment — the mark gets real breathing room before the copyright
   line. Round 2, note 19: larger still. */
.footer-logo-moment {
  display: flex;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px) 0 clamp(36px, 5vw, 60px);
  position: relative;
  z-index: 1;
}
.footer-logo-moment img {
  width: clamp(104px, 11vw, 156px);
  height: auto;
  opacity: 0.9;
}
/* Round 2, note 17 — the duplicate Inquire button is gone from this row, so
   the copyright line centres instead of hugging the left edge. */
.footer-bottom {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(245,241,234,0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.footer-bottom-text {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(183,170,154,0.85);  /* was 0.5 — 2.66:1 on #2E2B28, fails WCAG AA */
}

/* --- Dividers -------------------------------------- */
.divider {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 8px 0;
}
.divider.center { margin: 8px auto; }

/* --- Misc / Utility -------------------------------- */
[hidden] { display: none !important; }
.text-center { text-align: center; }
.text-stone  { color: var(--stone); }
.text-ivory  { color: var(--ivory); }
.text-gold   { color: var(--gold); }
.italic      { font-style: italic; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }

/* --- Page header (non-home pages) ----------------- */
.page-header {
  padding: clamp(120px, 16vw, 200px) var(--gutter) clamp(48px, 6vw, 80px);
  text-align: center;
  background: var(--ivory);
}
.page-header .h1 { margin: 16px 0 12px; font-style: italic; }
.page-header p { font-size: 16px; color: var(--stone-dark); max-width: 52ch; margin: 0 auto; }

/* --- Collections — path section + tier card grid --- */
.path-section {
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
}
.path-section.on-dark { background: var(--deep); color: var(--ivory); }
.path-section-media {
  max-width: var(--container);
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--gutter);
}
.path-section-media img {
  width: 100%;
  height: auto;           /* explicit auto overrides HTML height="" presentational attr */
  aspect-ratio: 21/9;
  object-fit: cover;
  object-position: center 30%;
}
.path-section-intro {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  padding: 0 var(--gutter);
  text-align: center;
}
.path-section-intro h2 { margin: 12px 0 16px; font-style: italic; }
.path-section-intro p { color: var(--stone-dark); max-width: 60ch; margin: 0 auto; font-size: 16px; }
.path-section.on-dark .path-section-intro p { color: rgba(183,170,154,0.9); }
.path-note {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--stone-dark);
  max-width: 60ch;
  margin: -24px auto clamp(40px, 5vw, 56px);
  padding: 0 var(--gutter);
}
.path-section.on-dark .path-note { color: rgba(183,170,154,0.85); }  /* was 0.75 — 4.17:1, fails WCAG AA */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: stretch;
}
.tier-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(32px, 3vw, 40px) clamp(24px, 2.5vw, 32px);
  border: 1px solid rgba(46,43,40,0.12);
  height: 100%;
}
.path-section.on-dark .tier-card { border-color: rgba(245,241,234,0.14); }

/* Body + optional recommendation share one flexible row so the price row
   below them always starts from the same track. */
.tier-bodywrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

/* Round 2 — "make sure all prices are in alignment on the page."
   Right-aligning inside each card is NOT alignment: bodies of different
   lengths put each price row at a different height. Subgrid shares ONE set of
   row tracks across all three cards, so the name, dimensions, price row and
   includes line each sit on exactly the same baseline across the row.
   Flex layout above is the fallback for engines without subgrid. */
@supports (grid-template-rows: subgrid) {
  .tier-grid--rows6 { grid-template-rows: repeat(6, auto); }
  .tier-grid--rows5 { grid-template-rows: repeat(5, auto); }
  .tier-grid--rows6 > .tier-card,
  .tier-grid--rows5 > .tier-card {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 16px;
  }
  .tier-grid--rows6 > .tier-card { grid-row: span 6; }
  .tier-grid--rows5 > .tier-card { grid-row: span 5; }
}

/* Artist's Recommendation — a quiet badge line under the Signature copy.
   Dusk, not gold: gold on ivory is 2.0:1 and fails WCAG AA. */
.tier-recommendation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dusk);
}
.tier-recommendation::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.path-section.on-dark .tier-recommendation { color: var(--gold); }

/* Small print under the collection cards (round 2, notes 4 + 9) — the
   logistics live here so they stop competing with the copy at the top. */
.tier-fineprint {
  max-width: 72ch;
  margin: clamp(32px, 4vw, 44px) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--stone-dark);
}
.tier-fineprint.italic { font-style: italic; }
.path-section.on-dark .tier-fineprint { color: rgba(183,170,154,0.85); }
.tier-name {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
}
.tier-dims {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dusk);
}
.path-section.on-dark .tier-dims { color: var(--gold); }
.tier-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--stone-dark);
  flex-grow: 1;
}
.path-section.on-dark .tier-body { color: rgba(183,170,154,0.9); }
.tier-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(46,43,40,0.1);
}
.path-section.on-dark .tier-price-row { border-color: rgba(245,241,234,0.14); }
.tier-price-label {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-dark);
}
.path-section.on-dark .tier-price-label { color: rgba(183,170,154,0.85); }  /* was 0.75 — 4.17:1, fails WCAG AA */
.tier-price {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--deep);
}
.path-section.on-dark .tier-price { color: var(--ivory); }
.tier-includes {
  font-size: 13px;
  color: var(--stone-dark);
  line-height: 1.6;
}
.path-section.on-dark .tier-includes { color: rgba(183,170,154,0.75); }

@media (max-width: 900px) {
  /* Stacked cards need no cross-card row alignment — drop subgrid so each card
     sizes to its own content. */
  .tier-grid { grid-template-columns: 1fr; grid-template-rows: none; max-width: 460px; }
  .tier-grid > .tier-card { display: flex; grid-row: auto; }
  .path-section-media img { aspect-ratio: 4/5; }
}

/* --- Portfolio — editorial gallery ------------------ */
.portfolio-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(140px, 16vw, 200px) var(--gutter) clamp(40px, 5vw, 64px);
  text-align: center;
}
.portfolio-intro p { color: var(--stone-dark); max-width: 54ch; margin: 8px auto 0; font-size: 16px; }
.portfolio-open {
  padding: 0 0 clamp(24px, 3vw, 40px);
}
.portfolio-open img {
  width: 100%;
  max-height: 88vh;
  object-fit: cover;
  display: block;
}
.portfolio-caption {
  max-width: var(--container);
  margin: 20px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-dark);
}
.portfolio-caption .cap-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--deep);
}
.portfolio-twoup {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-1);
  max-width: var(--container);
  margin: clamp(64px, 8vw, 100px) auto;
  padding: 0 var(--gutter);
  align-items: end;
  overflow: hidden;   /* clips the reveal-left/right translateX offset — prevents mobile horizontal overflow */
}
.portfolio-twoup img { width: 100%; height: auto; display: block; }
.portfolio-twoup figure { margin: 0; }
.portfolio-twoup figcaption {
  margin-top: 12px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-dark);
}
.portfolio-single-wrap {
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  background: var(--ivory);
}
.portfolio-single {
  max-width: 900px;
  margin: 0 auto;
}
.portfolio-single img { width: 100%; height: auto; display: block; }
.portfolio-quiet {
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  background: #EAE4DA;
}
.portfolio-quiet-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.portfolio-quiet img { width: 100%; height: auto; max-width: 480px; margin: 0 auto 20px; display: block; aspect-ratio: 4/5; object-fit: cover; }
.portfolio-quiet p { font-family: var(--ff-display); font-style: italic; font-size: clamp(18px, 2vw, 24px); color: var(--deep); max-width: none; }

@media (max-width: 768px) {
  .portfolio-twoup { grid-template-columns: 1fr; }
  .portfolio-open img { max-height: 70vh; }
}

/* --- Journal — editorial two-column + latest grid --- */
.journal-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter);
}
.journal-editorial-item img {
  width: 100%;
  height: auto;           /* explicit auto overrides HTML height="" presentational attr */
  aspect-ratio: 4/5;
  object-fit: cover;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .journal-editorial { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* --- Journal featured story grid — collapses on mobile (B2) --- */
.journal-featured-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 768px) {
  .journal-featured-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Journal — single post (article) ---------------- */
.journal-post-hero {
  width: 100%;
  height: 82vh;
  min-height: 420px;
  max-height: 820px;
  overflow: hidden;
}
.journal-post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journal-post-header {
  padding: clamp(48px, 6vw, 72px) var(--gutter) clamp(36px, 5vw, 52px);
  text-align: center;
  background: var(--ivory);
}
.journal-post-header .h1 { margin: 16px 0 12px; font-style: italic; }
.journal-post-subtitle {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--stone-dark);
  max-width: 52ch;
  margin: 0 auto 20px;
}
.journal-post-meta {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

.journal-prose {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px) var(--gutter) clamp(40px, 5vw, 56px);
}
.journal-prose p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--stone-dark);
}
.journal-prose p strong { color: var(--deep); font-weight: 500; }
.journal-h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--deep);
  line-height: 1.2;
  margin: clamp(36px, 5vw, 52px) 0 20px;
}
.journal-prose > .journal-h2:first-child { margin-top: 0; }

.journal-photo-block {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px) var(--gutter) clamp(48px, 6vw, 72px);
}
.journal-photo-block img {
  width: 100%;
  height: auto;
  display: block;
}
.journal-photo-block figcaption {
  margin-top: 14px;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-dark);
  text-align: center;
}

.journal-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px) var(--gutter) clamp(48px, 6vw, 72px);
}
.journal-photo-pair figure { margin: 0; }
.journal-photo-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.journal-photo-pair figcaption {
  margin-top: 12px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-dark);
  text-align: center;
}

.journal-photo-bleed { width: 100%; }
.journal-photo-bleed img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: cover;
  display: block;
}

.journal-post-closing {
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 24px) var(--gutter) clamp(56px, 7vw, 80px);
  text-align: center;
}
.journal-post-closing img {
  width: 100%;
  height: auto;
  box-shadow: 0 20px 60px rgba(46,43,40,0.12), 0 8px 20px rgba(46,43,40,0.08);
  margin: 0 auto;
  display: block;
}
.journal-post-closing figcaption {
  margin-top: 16px;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 15px;
  color: var(--stone-dark);
}

.journal-post-credit {
  text-align: center;
  padding: 0 var(--gutter) clamp(40px, 5vw, 56px);
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

@media (max-width: 640px) {
  .journal-photo-pair { grid-template-columns: 1fr; gap: 24px; }
  .journal-photo-pair img { aspect-ratio: 4/5; }
  .journal-post-hero { height: 64vh; }
}

/* --- FAQ accordion ----------------------------------- */
.faq-section {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) var(--gutter) clamp(80px, 8vw, 120px);
}
.faq-group { margin-bottom: clamp(40px, 5vw, 64px); }
.faq-group-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-bottom: 8px;
}
.faq-item {
  border-bottom: 1px solid rgba(46,43,40,0.12);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 36px 22px 0;
  position: relative;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--deep);
  transition: padding-left 0.25s var(--ease-out), color 0.25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { padding-left: 8px; color: var(--dusk); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 22px;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { color: var(--dusk); }
.faq-answer {
  padding: 0 36px 24px 0;
  color: var(--stone-dark);
  font-size: 15px;
  line-height: 1.75;
  max-width: 62ch;
}
/* Multi-paragraph answers (Heather's confirmed set) */
.faq-answer p { max-width: none; }
.faq-answer p + p { margin-top: 1em; }
.faq-answer strong { color: var(--deep); font-weight: 500; }
.faq-draft-note,
.draft-note {
  background: var(--gold-light);
  border: 1px solid var(--gold-mid);
  padding: 16px 24px;
  font-size: 13px;
  color: var(--stone-dark);
  margin-bottom: clamp(40px, 5vw, 56px);
  text-align: center;
}
/* Inline variant — sits inside a section rather than above a whole page block */
.draft-note--inline {
  max-width: 46ch;
  margin: 0 auto;
  padding: 12px 20px;
  font-size: 12px;
  line-height: 1.6;
}

/* --- FAQ page photograph --------------------------- */
/* Round 2, FAQ notes — "include one beautiful photograph on the FAQ page."
   A single contained band under the header; quiet, not a second hero. */
.faq-photo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(16px, 3vw, 32px);
}
.faq-photo img {
  width: 100%;
  height: auto;              /* explicit auto overrides HTML height="" attr */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
.faq-photo figcaption {
  margin-top: 12px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dark);
  text-align: center;
}
@media (max-width: 640px) {
  .faq-photo img { aspect-ratio: 4 / 3; }
}

/* --- Responsive ------------------------------------ */
@media (max-width: 1024px) {
  /* intro-content: keep two columns down to 1024; collapse at 768 */
  .two-modes { grid-template-columns: 1fr; gap: 0; }
  .gallery-item { grid-template-columns: 1fr; min-height: auto; }
  .gallery-item:nth-child(even) { direction: ltr; }
  .experience-split { grid-template-columns: 1fr; }
  .about-hero { grid-template-columns: 1fr; }
  .about-image { min-height: 50vh; order: -1; }
  .inquire-layout { grid-template-columns: 1fr; }
  .inquire-left { padding-bottom: var(--sp-5); }
  .collection-inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  /* Round 5 — removed a dead `#logo-hero { width: clamp(240px, 34vw, 360px) }`
     from here. `#logo-hero` only ever exists inside `.logo-hero-wrap.small`
     (index.html is the only page with the mark), and that selector's
     specificity (0,2,1) outranks a bare id (0,1,0) regardless of source order,
     so this never applied. The mark's width comes from
     `.logo-hero-wrap.small #logo-hero` only. */
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile { display: flex; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { text-align: left; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .cta-pair { flex-direction: column; align-items: center; }
  .two-modes { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; gap: 48px; }
  /* intro-content: stack on mobile — text first, photo below, full-width */
  .intro-inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .intro-image { justify-content: flex-start; }
  .intro-image .hero-frame { max-width: 100%; }
  /* gold border (::before) stays — ::after corner block clips at mobile column width */
  .hero-frame::after { display: none; }
  /* Round 8 — .collection-header-bar is a centred stack at every width now,
     so the round-5 mobile un-stacking rule that lived here is gone. */
}
/* Round 5 — a dead `@media (max-width: 480px) { #logo-hero { width:
   clamp(200px, 62vw, 260px) } }` block lived here and was removed for the same
   specificity reason as the 1024 one above. The phone size comes from the min
   end of `.logo-hero-wrap.small #logo-hero`'s clamp. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}