@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
/* ============================================================
   JULIE CASEY PHOTOGRAPHY — shared design system
   High-end minimal, earth-tone. Used by index, about, contact,
   album (collection + session views).
   Palette: Old Lace / Bone bg, EARTH GREEN + KOBICHA text/dark,
   DARK GOLDENROD = single accent, COYOTE = muted.
   Fonts: Anton (condensed display) + Outfit (sans).
   ============================================================ */
:root {
  --lace:    #E1D3A9;   /* Creme — page background */
  --bone:    #C0AA8A;   /* Clay Dust — alt band */
  --gold:    #A85530;   /* Deep Peach — accent */
  --kobicha: #5E2A25;   /* Maroon — dark accent (buttons, eyebrows) */
  --coyote:  #8F7C3A;   /* Guave — olive band */
  --earth:   #371E13;   /* Coffee — darkest text + footer */

  --maxw: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--earth);
  background: var(--lace);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-weight: 400;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); }
.narrow { max-width: 760px; }

.display { font-family: "Cormorant Garamond", "Outfit", serif; font-weight: 600; text-transform: uppercase; line-height: 1.0; letter-spacing: 0.015em; }
.label { font-family: "Outfit", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: "Outfit", sans-serif; font-weight: 500; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.22em; padding: 1.05em 2.1em; text-decoration: none;
  border: 1.5px solid var(--kobicha); color: var(--kobicha); background: transparent; cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--earth); color: var(--lace); border-color: var(--earth); }
.btn:active { transform: translateY(1px); }
.btn-light { border-color: var(--lace); color: var(--lace); }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: var(--earth); }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---------- nav ---------- */
#top-sentinel { position: absolute; top: 0; height: 72px; width: 1px; pointer-events: none; }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); border-bottom: 1px solid transparent; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 1.62rem; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; color: var(--lace); transition: color 0.4s var(--ease); }
.nav-links { list-style: none; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--lace); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; transition: color 0.25s, opacity 0.25s; opacity: 0.92; }
.nav-links a:hover { color: var(--gold); opacity: 1; }
.nav-links .nav-cta { border: 1.5px solid currentColor; padding: 0.7em 1.2em; }
.nav.solid { background: rgba(247,241,225,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(102,55,27,0.16); }
.nav.solid .brand { color: var(--kobicha); }
.nav.solid .nav-links a { color: var(--earth); }
.nav.solid .nav-links a:hover { color: var(--gold); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--lace); display: block; transition: 0.3s; }
.nav.solid .nav-toggle span { background: var(--earth); }

/* ============================================================
   HOME — hero / film strip / splits / collections
   ============================================================ */
.hero { position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: flex-start; justify-content: center; text-align: center; color: var(--lace); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 48%, rgba(40,30,15,0.34), transparent 75%), linear-gradient(180deg, rgba(63,63,44,0.46) 0%, rgba(63,63,44,0.22) 40%, rgba(63,63,44,0.44) 100%); }
.hero-inner { position: relative; z-index: 2; padding: clamp(120px, 17vh, 200px) 1.2rem 0; max-width: 900px; }
.hero .label { color: rgba(247,241,225,0.92); margin: 0 0 1.4rem; }
.hero h1 { margin: 0; font-size: clamp(2.1rem, 5.4vw, 4.5rem); text-shadow: 0 2px 24px rgba(40,30,15,0.35); }
.hero-sub { margin: 1.4rem 0 0; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; opacity: 0.92; }

/* Gallery wall — 6 assorted gold-framed photos filling the band.
   Mix of ornate gold frames + an arch + an oval, staggered like a wall. */
.hcollage { position: relative; z-index: 6; margin-top: clamp(-620px, -44vw, -340px); padding-bottom: clamp(40px, 9vw, 130px); }
.hcollage-row { position: relative; max-width: 1380px; margin: 0 auto; height: clamp(520px, 55vw, 720px); }
.gw { position: absolute; filter: drop-shadow(0 20px 34px rgba(40,30,15,0.42)); }
/* placement from the frame editor */
.gw-f1 { left: 5.3%;  top: 37.8%; width: 20%;   z-index: 1; } /* arch */
.gw-f2 { left: 15.9%; top: 72.8%; width: 21.7%; z-index: 2; } /* small ornate portrait */
.gw-f3 { left: 30.5%; top: 49.9%; width: 41%;   z-index: 3; } /* large ornate landscape */
.gw-f4 { left: 62.6%; top: 65.1%; width: 25%;   z-index: 5; } /* oval (frontmost) */
.gw-f5 { left: 71.7%; top: 34.7%; width: 21%;   z-index: 4; } /* tall ornate portrait */
.gw-photo { position: absolute; overflow: hidden; }
.gw-photo img { width: 100%; height: 100%; object-fit: cover; }
.gw-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ornate gold (portrait) — frame-rect-ornate.png */
.gw-ornate { aspect-ratio: 0.747; }
.gw-ornate .gw-photo { top: 17%; left: 22.9%; right: 23%; bottom: 17.6%; }
/* ornate gold (landscape) — frame-rect-ornate-land.png */
.gw-land { aspect-ratio: 1.339; }
.gw-land .gw-photo { top: 22.9%; left: 17%; right: 17.6%; bottom: 23%; }
/* oval ornate gold — frame-oval.png */
.gw-oval { aspect-ratio: 0.747; }
.gw-oval .gw-photo { top: 22.9%; left: 23.2%; right: 23.2%; bottom: 23.5%; border-radius: 50%; }
/* arch (plain, thin border) */
.gw-arch { aspect-ratio: 0.78; border-radius: 50% 50% 5px 5px / 40% 40% 2% 2%; overflow: hidden; border: 3px solid var(--gold); }
.gw-arch img { width: 100%; height: 100%; object-fit: cover; }
/* plain thin-gold frame */
.gw-gold { aspect-ratio: 4/5; border: 3px solid var(--gold); overflow: hidden; }
.gw-gold img { width: 100%; height: 100%; object-fit: cover; }

/* per-item vertical offsets are set inline in the markup */

section.band { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.band-bone { background: var(--bone); }
section.band-tight { padding-top: clamp(1.4rem, 3vw, 2.4rem); }

/* Welcome — compact light band (Old Lace) */
section.welcome-feature { background: var(--lace); padding: clamp(1.8rem, 3.5vw, 2.8rem) 0 clamp(2.2rem, 4.5vw, 3.4rem); }
.welcome-feature .split { align-items: center; gap: clamp(1.6rem, 5vw, 3.5rem); }
.welcome-feature .h-section { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.welcome-feature .arch { max-width: 330px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.eyebrow { color: var(--kobicha); margin: 0 0 1.2rem; }
.h-section { color: var(--gold); margin: 0; font-size: clamp(2.6rem, 6vw, 4.6rem); }
.h-section.brown { color: var(--kobicha); }
.lede { color: var(--coyote); font-weight: 500; font-size: 1.05rem; margin: 1.1rem 0 0; line-height: 1.5; }
.body { color: var(--earth); font-size: 1.02rem; line-height: 1.75; margin: 1.3rem 0 0; max-width: 46ch; opacity: 0.92; }
.actions { margin-top: 2.2rem; }

.arch-wrap { position: relative; }
.arch { position: relative; border-radius: 240px 240px 6px 6px; overflow: hidden; border: 1.5px solid var(--coyote); box-shadow: 0 24px 50px rgba(63,63,44,0.22); max-width: 440px; margin-left: auto; }
.arch img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.spark { position: absolute; color: var(--gold); }
.spark.s1 { top: -14px; right: 18px; width: 38px; }
.spark.s2 { bottom: 30px; left: -16px; width: 22px; opacity: 0.85; }

.print { background: #fff; padding: 12px; box-shadow: 0 22px 48px rgba(63,63,44,0.24); transform: rotate(-2deg); max-width: 480px; }
.print img { width: 100%; aspect-ratio: 4/3.1; object-fit: cover; }

.collections {
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  background: var(--coyote);
}
.gallery { margin-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { position: relative; overflow: hidden; text-decoration: none; display: block; aspect-ratio: 3/4.2; box-shadow: 0 16px 34px rgba(40,30,15,0.42); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(63,63,44,0) 40%, rgba(63,63,44,0.62)); transition: background 0.4s; }
.tile:hover img { transform: scale(1.06); }
.tile:hover::after { background: linear-gradient(180deg, rgba(63,63,44,0.05) 30%, rgba(63,63,44,0.72)); }
.tile-name { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; color: var(--lace); font-family: "Cormorant Garamond", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.1rem, 2vw, 1.6rem); text-align: center; }
.tile-go { display: block; font-family: "Outfit"; font-weight: 500; font-size: 0.62rem; letter-spacing: 0.24em; opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); margin-top: 6px; }
.tile:hover .tile-go { opacity: 0.92; transform: none; }

/* ============================================================
   INNER PAGE HERO (about / contact / collection / session)
   ============================================================ */
.phero { position: relative; min-height: 60vh; min-height: 60dvh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--lace); overflow: hidden; }
.phero.tall { min-height: 72vh; min-height: 72dvh; }
.phero-bg { position: absolute; inset: 0; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.phero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 60% at 50% 50%, rgba(40,30,15,0.32), transparent 78%), linear-gradient(180deg, rgba(63,63,44,0.5) 0%, rgba(63,63,44,0.26) 42%, rgba(63,63,44,0.5) 100%); }
.phero-inner { position: relative; z-index: 2; padding: 90px 1.2rem 0; max-width: 900px; }
.phero .label { color: rgba(247,241,225,0.9); margin: 0 0 1.1rem; }
.phero h1 { margin: 0; font-size: clamp(2.4rem, 6.5vw, 4.8rem); text-shadow: 0 2px 24px rgba(40,30,15,0.35); }
.phero .back { position: relative; z-index: 2; }
.phero-sub { margin: 1.2rem auto 0; max-width: 40ch; font-weight: 300; letter-spacing: 0.04em; font-size: 1rem; line-height: 1.6; opacity: 0.94; }

/* ============================================================
   COLLECTION (album) — intro + session cards
   ============================================================ */
.intro { text-align: center; max-width: 640px; margin: 0 auto; }
.intro .body { margin: 1rem auto 0; text-align: center; max-width: 58ch; color: var(--coyote); opacity: 1; }

.sessions-grid { margin-top: clamp(2.4rem, 5vw, 3.6rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.scard { text-decoration: none; color: inherit; display: block; }
.scard-img { position: relative; overflow: hidden; aspect-ratio: 3/2.2; background: var(--bone); }
.scard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.scard-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(63,63,44,0) 55%, rgba(63,63,44,0.34)); }
.scard:hover .scard-img img { transform: scale(1.05); }
.scard-body { padding: 1.1rem 0.1rem 0; }
.scard-name { font-family: "Cormorant Garamond", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--kobicha); margin: 0; line-height: 1; }
.scard-meta { margin: 0.55rem 0 0; color: var(--coyote); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; }
.scard-link { display: inline-block; margin-top: 0.7rem; color: var(--gold); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; }

/* ============================================================
   SESSION view — story + photo gallery + lightbox
   ============================================================ */
.session-head { text-align: center; max-width: 680px; margin: 0 auto; }
.session-head .back { display: inline-block; color: var(--coyote); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; margin-bottom: 1.4rem; }
.session-head .back:hover { color: var(--gold); }
.session-head .meta { margin: 0.9rem 0 0; color: var(--gold); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.2em; }
.session-head .story { margin: 1.4rem auto 0; max-width: 58ch; color: var(--earth); line-height: 1.85; font-size: 1.05rem; }
.session-head .rule { width: 46px; height: 2px; background: var(--gold); border: 0; margin: 1.8rem auto 0; }

.photos { margin-top: clamp(2.4rem, 5vw, 3.6rem); columns: 3; column-gap: 10px; }
.photos figure { margin: 0 0 10px; break-inside: avoid; cursor: zoom-in; overflow: hidden; }
.photos img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease), filter 0.4s; }
.photos figure:hover img { transform: scale(1.03); filter: brightness(1.04); }

.session-cta { text-align: center; margin-top: clamp(2.8rem, 6vw, 4.4rem); }
.session-cta p { color: var(--coyote); margin: 0 0 1.4rem; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(31,28,18,0.94); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lb-btn { position: absolute; background: none; border: 0; color: var(--lace); cursor: pointer; opacity: 0.8; transition: opacity 0.2s; font-family: "Outfit"; }
.lb-btn:hover { opacity: 1; }
.lb-close { top: 22px; right: 26px; font-size: 2rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 2.6rem; padding: 0 18px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(247,241,225,0.7); font-size: 0.78rem; letter-spacing: 0.16em; }

/* ============================================================
   ABOUT — value notes
   ============================================================ */
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.values li { padding-left: 0; }
.values h3 { font-family: "Cormorant Garamond", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: var(--kobicha); font-size: 1.15rem; margin: 0 0 0.3rem; }
.values p { margin: 0; color: var(--earth); opacity: 0.9; line-height: 1.6; max-width: 50ch; }

/* ============================================================
   CONTACT — form
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--kobicha); font-weight: 500; }
.field input, .field select, .field textarea {
  font-family: "Outfit", sans-serif; font-size: 1rem; color: var(--earth);
  background: #fffdf6; border: 1.5px solid rgba(102,55,27,0.28); border-radius: 0; padding: 0.85em 0.95em; width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9a8f74; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(180,131,61,0.18); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* shoot-type selectable chips */
.choices { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-block; padding: 0.62em 1.25em; border: 1.5px solid rgba(102,55,27,0.32); border-radius: 999px; font-size: 0.86rem; letter-spacing: 0.02em; color: var(--kobicha); background: #fffdf6; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.choice span:hover { border-color: var(--gold); }
.choice input:checked + span { background: var(--kobicha); border-color: var(--kobicha); color: var(--lace); }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(180,131,61,0.32); }
.form-note { font-size: 0.9rem; color: var(--coyote); margin: 0.2rem 0 0; }
.form-note a { color: var(--kobicha); }
.form-status { margin: 0 0 0.4rem; padding: 0.9em 1em; font-size: 0.92rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: rgba(129,117,75,0.16); color: var(--earth); border-left: 3px solid var(--coyote); }
.form-status.err { background: rgba(102,55,27,0.1); color: var(--kobicha); border-left: 3px solid var(--kobicha); }

.cinfo { display: grid; gap: 1.6rem; align-content: start; }
.cinfo .arch { max-width: 320px; margin: 0 0 0.6rem; border-radius: 200px 200px 6px 6px; }
.cinfo h3 { font-family: "Cormorant Garamond", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: var(--kobicha); font-size: 1rem; margin: 0 0 0.25rem; }
.cinfo a { color: var(--gold); text-decoration: none; }
.cinfo a:hover { text-decoration: underline; }
.cinfo p { margin: 0; color: var(--earth); opacity: 0.9; line-height: 1.55; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--earth); color: var(--lace); text-align: center; padding: clamp(3.4rem,7vw,6rem) 0 2.6rem; margin-top: clamp(3.2rem,7vw,5.5rem); }
.footer .label { color: var(--gold); }
.footer h2 { font-family: "Cormorant Garamond", sans-serif; text-transform: uppercase; font-size: clamp(2rem,5vw,3.4rem); margin: 1.1rem 0 0; line-height: 1; }
.footer p.sub { color: rgba(247,241,225,0.72); font-weight: 300; margin: 1rem auto 2rem; max-width: 42ch; line-height: 1.6; }
.footer .social { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin: 2.6rem 0 1.6rem; }
.footer .social a { color: rgba(247,241,225,0.85); text-decoration: none; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; border-bottom: 1px solid rgba(247,241,225,0.3); padding-bottom: 3px; }
.footer .social a:hover { color: var(--gold); border-color: var(--gold); }
.footer .fine { font-size: 0.74rem; color: rgba(247,241,225,0.5); letter-spacing: 0.04em; margin: 0; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.4rem; }
  .split.reverse > .arch-wrap, .split.reverse > .print-wrap { order: -1; }
  .arch { margin: 0 auto; } .print { margin: 0 auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* keep the overlapping collage feel on mobile — same absolute layout,
     just scaled to a portrait canvas with mobile-tuned positions */
  .hcollage { margin-top: clamp(-260px, -38vw, -180px); }
  .hcollage-row { position: relative; height: clamp(380px, 92vw, 540px); padding: 0 4vw; }
  .gw { position: absolute; }
  /* placement from the mobile editor */
  .gw-f1 { left: 2.3%;  top: 33.9%; width: 34.9%; z-index: 1; } /* arch */
  .gw-f2 { left: -1%;   top: 69.3%; width: 43.6%; z-index: 2; } /* small ornate portrait */
  .gw-f3 { left: 39.7%; top: 33.3%; width: 60%;   z-index: 3; } /* large ornate landscape */
  .gw-f4 { left: 24.1%; top: 55.2%; width: 46.2%; z-index: 5; } /* oval (frontmost) */
  .gw-f5 { left: 59%;   top: 62.6%; width: 39.7%; z-index: 4; } /* tall ornate portrait */
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .cinfo .arch { margin: 0 auto 0.6rem; }
  .photos { columns: 2; }
}
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; background: rgba(247,241,225,0.98); padding: 1.4rem 0; gap: 1.3rem; clip-path: inset(0 0 100% 0); transition: clip-path 0.35s var(--ease); border-bottom: 1px solid rgba(102,55,27,0.16); }
  .nav-links.open { clip-path: inset(0 0 0 0); }
  .nav-links a { color: var(--earth) !important; }
  .nav-links .nav-cta { border-color: var(--kobicha); }
  .sessions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; gap: 8px; }
  .tile { aspect-ratio: 16/10; }
  .photos { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .tile img, .scard-img img, .photos img, .btn { transition: none; }
}