/* ==========================================================================
   White Ash Glass Studio — Design System
   Earth-tone palette, Spectral type (Anziano pending licence), tree-of-life motif.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Mrs+Saint+Delafield&display=swap');

:root{
  /* ---- Colour palette (from WAGS Brand Book v7) ---- */
  --lemon:      #FFFFF0;
  --stone:      #FBFAF6;
  --parchment:  #EDE5D4;
  --sand:       #C4A882;
  --sienna:     #8B6347;
  --walnut:     #5C3D1E;
  --bark:       #2C1A0E;
  --copper:     #A85C1A;
  --copper-dim: #8f4d15;
  --sienna-dim: #6b4936;
  --studio-green: #7A8C6E;

  --stone-rgb: 251,250,246;
  --bark-rgb: 44,26,14;
  --weave-rgb: 92,61,30;

  /* ---- Type ---- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:    'Spectral', Georgia, 'Times New Roman', serif;
  --font-script:  'Mrs Saint Delafield', cursive;

  /* ---- Spacing scale ---- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.6rem;
  --space-6: 5.6rem;
  --space-7: 8.8rem;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 84px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Linen/cardstock texture: a fine two-angle crosshatch weave, CSS-only
   (no image request, no filter compositing — cheapest possible option).
   Kept low-contrast and small-pitch on purpose: it should read as paper
   grain at normal viewing distance, not as a visible pattern. Repeats
   seamlessly by nature of the gradient math, no explicit tile size needed. */
body{
  margin: 0;
  background-color: var(--stone);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(var(--weave-rgb), 0.035) 0px,
      rgba(var(--weave-rgb), 0.035) 1px,
      transparent 1px,
      transparent 3px),
    repeating-linear-gradient(-45deg,
      rgba(var(--weave-rgb), 0.035) 0px,
      rgba(var(--weave-rgb), 0.035) 1px,
      transparent 1px,
      transparent 3px);
  color: var(--bark);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }

.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (max-width: 640px){
  .container{ padding: 0 var(--space-3); }
}

/* ---- Typography ---- */
h1, .h1, h2, .h2, h3, .h3, .display{
  font-family: var(--font-display);
  color: var(--bark);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.h1, h1{ font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; }
.h2, h2{ font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 600; }
.h3, h3{ font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; }

.subheading{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--sienna);
  letter-spacing: 0;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}

.script{
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--copper);
  line-height: 1;
}

p, .body-copy{
  max-width: 62ch;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--walnut);
}
.body-copy.large{ font-size: 1.2rem; }
.lede{ font-size: 1.25rem; line-height: 1.65; color: var(--walnut); max-width: 58ch; }

.caption, .label{
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sienna);
}

/* --copper and --sienna both drop under 4.5:1 against --parchment (measured
   ~3.98:1 and ~4.21:1). Every card is parchment regardless of its parent
   section, so the contrast-safe variants apply there and inside
   .on-parchment sections directly, without touching the brand accent
   colour anywhere it already reads at 4.5:1+ (page-hero copy, stone bg). */
.card .eyebrow,
.on-parchment .eyebrow{ color: var(--copper-dim); }
.card .caption,
.card .label,
.on-parchment .caption,
.on-parchment .label{ color: var(--sienna-dim); }

.text-center{ text-align: center; margin-left: auto; margin-right: auto; }

/* ---- Buttons / links ---- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1em 2em;
  border: 1px solid var(--copper);
  border-radius: 2px;
  color: var(--copper);
  background: transparent;
  transition: color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.btn:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }
.btn:active{ transform: translateY(0); transition-duration: 0.12s; }
.btn.solid{ background: var(--copper); color: var(--lemon); }
.btn.ghost-light{ border-color: rgba(255,255,255,0.7); color: #fff; }

.text-link{
  position: relative;
  font-weight: 500;
  color: var(--walnut);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.text-link:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }

/* ---- Navigation ---- */
/* Floating liquid-glass bar: JS (liquid-glass.js) supplies the SVG-filtered
   backdrop refraction; this CSS supplies the material dressing (tint,
   specular rim, inner glow, shadow) per the glass recipe. Text colour keys
   off .scrolled since the bar always floats over photography or content. */
.site-nav{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1240px;
  z-index: 100;
  border-radius: 20px;
  transition: background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), top 0.4s var(--ease-out);
}
.site-nav.glass-nav{
  background: linear-gradient(180deg, rgba(var(--bark-rgb),0.22), rgba(var(--bark-rgb),0.36));
  box-shadow:
    0 20px 50px -22px rgba(44,26,14,0.45),
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -8px 18px rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(255,255,255,0.15);
}
.site-nav.glass-nav.scrolled{
  background: linear-gradient(180deg, rgba(var(--stone-rgb),0.58), rgba(var(--stone-rgb),0.76));
  box-shadow:
    0 16px 40px -22px rgba(44,26,14,0.3),
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -8px 18px rgba(255,255,255,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.55);
}
.site-nav.scrolled{ top: 10px; }
/* pre-JS / fallback: keep the bar legible before liquid-glass.js attaches */
.site-nav.glass-nav:not(.lg-ready){ backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }

.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1.6rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 640px){
  .site-nav{ top: 10px; width: calc(100% - 20px); }
  .nav-inner{ padding: 0.7rem 1.1rem; }
}

/* ---- Nav mega menu ----
   The homepage no longer carries a chapter-panel index, so the nav takes
   over that job: hovering or keyboard-focusing the link row drops a glass
   panel of photo tiles, one per page. Always kept in the DOM at full size
   (opacity/visibility toggled, never display:none) so liquid-glass.js can
   measure and refract it correctly from the first paint. Desktop only —
   mobile keeps the simple full-screen text list. */
.nav-mega{
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  border-radius: 20px;
  padding: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
  pointer-events: none;
  z-index: 1;
}
.nav-mega.glass-nav{
  background: linear-gradient(180deg, rgba(var(--stone-rgb),0.62), rgba(var(--stone-rgb),0.8));
  box-shadow:
    0 26px 60px -22px rgba(44,26,14,0.4),
    inset 0 1px 1px rgba(255,255,255,0.7),
    inset 0 -8px 18px rgba(255,255,255,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.55);
}
.site-nav:focus-within .nav-mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s;
}
.nav-mega-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
}
.nav-mega-item{
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--parchment);
}
.nav-mega-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.nav-mega-item::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,0) 45%, rgba(20,12,6,0.68) 100%);
}
.nav-mega-item span{
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  z-index: 1;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-mega-item:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }
@media (max-width: 880px){
  .nav-mega{ display: none; }
}

.brand{
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.brand img{ height: 38px; width: auto; transform-origin: left center; transition: transform 0.4s var(--ease-out), filter .4s; }
.site-nav.scrolled .brand img{ transform: scale(0.842); }
.brand-word{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  transition: color .4s var(--ease-out), text-shadow .4s var(--ease-out);
}
.site-nav.scrolled .brand-word{ color: var(--bark); text-shadow: none; }
.site-nav.scrolled .brand img.mark-dark{ display:block; }
.site-nav.scrolled .brand img.mark-light{ display:none; }
.brand img.mark-dark{ display:none; }
.brand img.mark-light{ display:block; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.35)); }

.nav-links{
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a{
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  position: relative;
  padding: 0.4em 0;
  transition: color .4s var(--ease-out), text-shadow .4s var(--ease-out);
}
.site-nav.scrolled .nav-links a{ color: var(--walnut); text-shadow: none; }
.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right 0.4s var(--ease-out);
}
.nav-links a.active::after{ right: 0; }
.nav-links a:focus-visible{ outline: 2px solid var(--copper); outline-offset: 4px; }
.nav-links a.active{ color: var(--sand); }
.site-nav.scrolled .nav-links a.active{ color: var(--copper); }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  /* 44x44 minimum touch target (WCAG 2.5.5); the visual icon stays 30x22,
     centred inside via the span insets/offsets below. */
  width: 44px; height: 44px;
  position: relative;
  z-index: 101;
}
.nav-toggle span{
  position: absolute;
  left: 7px; right: 7px;
  height: 2px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  transition: transform 0.35s var(--ease-out), opacity 0.3s, top .35s var(--ease-out), background-color .4s;
}
.site-nav.scrolled .nav-toggle span{ background: var(--bark); box-shadow: none; }
.nav-toggle span:nth-child(1){ top: 11px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 31px; }
.nav-open .nav-toggle span{ background: var(--bark) !important; }
.nav-open .nav-toggle span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display: block; }
  .nav-links{
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: var(--stone);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out);
  }
  .nav-links a{ font-size: 1.1rem; color: var(--bark) !important; text-shadow: none !important; }
  .nav-open .nav-links{ transform: translateX(0); }
  .nav-open .brand-word{ color: var(--bark) !important; text-shadow: none !important; }
  .nav-open .brand img.mark-dark{ display:block !important; }
  .nav-open .brand img.mark-light{ display:none !important; }
}

/* ---- Hero: hover lens + click to focus ----
   A blurred base photo. Hovering moves a sharp copy of the same photo,
   clipped to a circular SVG mask, to wherever the cursor is
   (site/assets/js/hero-focus.js translates the clip shape every frame —
   the photo never moves, only the window we see it through does). Clicking
   the hero (or pressing Enter/Space — it's a real keyboard control) locks
   the *whole* photo into focus: a full-size sharp layer crossfades in over
   everything and the lens fades out, since there's nothing left for it to
   reveal. Reduced-motion still allows both interactions (they're user-
   initiated, not autoplay); the global prefers-reduced-motion rule above
   collapses the crossfades to near-instant. */
.video-hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  background: var(--bark);
}
/* Short viewports (phones in landscape): the 560px floor would exceed
   the actual viewport height and push the sound toggle/scroll cue
   below the fold entirely. Drop the floor so the hero never grows
   past what's actually visible. */
@media (max-height: 480px){
  .video-hero{ min-height: 0; }
}
.video-hero-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-hero::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,0.4) 0%, rgba(20,12,6,0.05) 30%, rgba(20,12,6,0.05) 60%, rgba(20,12,6,0.5) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.hero-sound-toggle{
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 1.1em;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: rgba(20,12,6,0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.hero-sound-toggle:focus-visible{ outline: 2px solid var(--sand); outline-offset: 2px; }
.hero-sound-toggle:active{ transform: translateY(0) scale(0.97); transition-duration: .12s; }
.hero-sound-toggle svg{ display: block; flex-shrink: 0; }
.hero-sound-toggle .icon-unmuted{ display: none; }
.hero-sound-toggle[aria-pressed="true"] .icon-muted{ display: none; }
.hero-sound-toggle[aria-pressed="true"] .icon-unmuted{ display: block; }
.hero-sound-toggle[aria-pressed="true"]{ background: rgba(168,92,26,0.45); border-color: var(--copper); }
.hero-sound-label{
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.hero-scroll-cue{
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  opacity: 0.85;
  animation: fade-in 1.2s var(--ease-out) 1.4s both;
}
.hero-scroll-cue span{
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-scroll-cue .line{
  width: 1px; height: 34px;
  background: linear-gradient(#fff, transparent);
  animation: cue-pulse 2.2s ease-in-out infinite;
}
@keyframes cue-pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes fade-in{ from{opacity:0; transform: translate(-50%,10px);} to{opacity:.85; transform: translate(-50%,0);} }

/* ---- Page hero (subpages) ---- */
.page-hero{
  position: relative;
  height: 62vh;
  min-height: 380px;
  width: 100%;
  overflow: hidden;
  background: var(--bark);
}
.page-hero img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero::after{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,0.35) 0%, rgba(20,12,6,0.1) 45%, rgba(20,12,6,0.62) 100%);
}
.page-hero-content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 0 var(--space-5);
  color: #fff;
}
.page-hero-content .eyebrow{ color: var(--sand); }
.page-hero-content h1{ color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.35); }

/* ---- Section rhythm ---- */
.section{ padding: var(--space-6) 0; }
.section.tight{ padding: var(--space-5) 0; }
/* Retired full-bleed parchment banding: backgrounds stay white/textured
   everywhere now, colour lives in contained boxes (.card, .glass-card,
   .interactive-process, footer) instead of page-width colour bands. */
.section.on-parchment{ background: transparent; }

.section-head{ max-width: 640px; margin-bottom: var(--space-5); }
.section-head .eyebrow{ display:block; margin-bottom: var(--space-2); }
.section-head h2{ margin-bottom: var(--space-3); }

/* root-divider: signature decorative rule evoking the WAGS root knotwork */
.root-divider{
  width: 100%;
  height: 34px;
  margin: 0 auto;
  display: block;
  color: var(--sand);
  opacity: 0.9;
  fill: none;
}
.root-divider path{ fill: none; }
.root-divider.flip{ transform: scaleY(-1); }

/* ---- Cards ---- */
.card-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .card-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--parchment);
  border-radius: 3px;
  padding: var(--space-4);
  box-shadow: 0 1px 2px rgba(44,26,14,0.05), 0 12px 30px -18px rgba(44,26,14,0.22);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.card h3{ margin-bottom: var(--space-2); }
.card p{ font-size: 0.98rem; }

.photo-card{
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--parchment);
}
.photo-card img{ width:100%; height:100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.photo-card:hover img{ transform: scale(1.05); }

/* ---- Process steps (The Glass) ---- */
.process{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); counter-reset: step; }
@media (max-width: 800px){ .process{ grid-template-columns: 1fr; gap: var(--space-5); } }
.process-step{ position: relative; }
.process-figure{ position:relative; border-radius: 50%; overflow:hidden; width: 168px; height:168px; margin: 0 auto var(--space-3); border: 1px solid var(--sand); padding: 6px; }
.process-figure .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(168,92,26,0.35); }
.process-figure img{ width:100%; height:100%; object-fit:cover; border-radius: 50%; }
.process-num{ font-family: var(--font-display); font-style: italic; color: var(--copper); font-size: 1rem; display:block; text-align:center; margin-bottom: 0.3rem; }
.process-step h3{ text-align:center; }
.process-step p{ text-align:center; margin: 0 auto; }

/* ---- Quote block ---- */
.quote-block{
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--copper);
}
.quote-block p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--walnut);
  line-height: 1.5;
  max-width: 44ch;
}
.quote-attribution{ margin-top: var(--space-3); font-size: 0.85rem; color: var(--sienna); letter-spacing: 0.03em; }

/* ---- Two column layout ---- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; gap: var(--space-4); } }
.split.reverse .split-media{ order: 2; }
.split-media img{ border-radius: 3px; }
.split-media{ position:relative; }
.medallion-frame{ position: relative; }
.medallion-frame::before{
  content:'';
  position:absolute;
  inset: -14px;
  border: 1px solid var(--sand);
  border-radius: 4px;
  pointer-events: none;
}

/* ---- Essay image blocks (The Studio) ---- */
.essay-block{ margin-bottom: var(--space-6); }
.essay-block:last-child{ margin-bottom: 0; }
.essay-figure{ border-radius: 3px; overflow: hidden; }
.essay-figure img{ width: 100%; height: auto; display:block; }
.essay-caption{ margin-top: var(--space-2); }

/* ---- Footer ---- */
.site-footer{
  background: var(--walnut);
  color: var(--lemon);
  padding: var(--space-6) 0 var(--space-4);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 800px){ .footer-top{ grid-template-columns: 1fr; gap: var(--space-4); } }

.footer-brand{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-3); }
.footer-brand img{ height: 40px; }
.footer-brand span{ font-family: var(--font-display); font-size: 1.05rem; }
.footer-tag{ color: rgba(255,255,255,0.72); font-size: 0.95rem; max-width: 34ch; }

.footer-heading{ font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: var(--space-3); }
.footer-links li{ margin-bottom: 0.7rem; }
.footer-links a{ color: rgba(255,255,255,0.82); font-size: 0.92rem; transition: color .3s; }

.newsletter-form{ display:flex; gap: 0; max-width: 340px; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 0.5rem; }
.newsletter-form input{
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.4rem 0;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.5); }
.newsletter-form input:focus{ outline: none; }
.newsletter-form button{
  background: none; border: none; color: var(--sand);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0 0.4rem 0.8rem;
  transition: color .3s;
}
.newsletter-note{ font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: var(--space-2); }
.newsletter-success{
  display:none; font-size: 0.85rem; color: var(--sand); margin-top: var(--space-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.newsletter-success.show{ opacity: 1; transform: translateY(0); }
.newsletter-form, .contact-form{ transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.newsletter-form.form-exit, .contact-form.form-exit{ opacity: 0; transform: translateY(-4px); pointer-events: none; }

/* Liquid-glass card: same optical recipe as the nav, tuned for a light
   frosted panel lifted off the walnut footer. */
.glass-card{
  border-radius: 18px;
  padding: 1.7rem 1.9rem;
  max-width: 380px;
}
.glass-card.glass-nav{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.18));
  box-shadow:
    0 22px 50px -22px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -8px 20px rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.16);
}
.glass-card .newsletter-form{ border-bottom-color: rgba(255,255,255,0.5); }

.footer-bottom{
  display:flex; align-items:center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-4);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.footer-social{ display:flex; align-items:center; gap: var(--space-3); }
.footer-social a{ color: rgba(255,255,255,0.75); transition: color .3s, transform .3s; display:inline-flex; }
.footer-qr{ display:flex; align-items:center; gap: 0.7rem; }
.footer-qr img{ width: 54px; height: 54px; border-radius: 2px; background:#fff; padding: 4px; }
.footer-qr span{ font-size: 0.75rem; color: rgba(255,255,255,0.6); max-width: 14ch; }

/* ---- Gallery / Lightbox ---- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); gap: var(--space-1); } }
.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
  background: var(--parchment);
}
.gallery-item.tall{ grid-row: span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-out); }
.gallery-item::after{
  content: '';
  position: absolute; inset: 0;
  background: rgba(44,26,14,0);
  transition: background-color .35s;
}
.gallery-item .gi-label{
  position: absolute; left: var(--space-2); bottom: var(--space-2);
  color: #fff; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.lightbox{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,12,6,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.lightbox.open{ opacity: 1; pointer-events: auto; }
.lightbox img{ max-width: min(88vw, 1100px); max-height: 84vh; object-fit: contain; border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); transition: opacity .35s var(--ease-out); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s, transform .3s;
}
.lightbox-close{ top: var(--space-3); right: var(--space-3); }
.lightbox-prev{ left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-caption{ position:absolute; bottom: var(--space-4); left:0; right:0; text-align:center; color: rgba(255,255,255,0.75); font-size: 0.85rem; letter-spacing: 0.04em; }

/* ---- Interactive process widget (Classes) ---- */
.interactive-process{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5);
  align-items: center;
  background: var(--stone);
  border-radius: 16px;
  padding: var(--space-4);
  box-shadow: 0 1px 2px rgba(44,26,14,0.05), 0 20px 40px -24px rgba(44,26,14,0.25);
}
@media (max-width: 800px){ .interactive-process{ grid-template-columns: 1fr; padding: var(--space-3); } }
.ip-media{ position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--bark); }
.ip-media img{ width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease-out); position: relative; z-index: 1; }
.ip-flame{
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 30% 60%, rgba(168,92,26,0.55), transparent 60%);
  filter: blur(30px);
  opacity: 0.7;
  animation: flame-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ip-flame-shape{ background: radial-gradient(circle at 62% 42%, rgba(196,168,130,0.5), transparent 60%); }
.ip-flame-anneal{ background: radial-gradient(circle at 50% 72%, rgba(92,61,30,0.5), transparent 60%); animation-duration: 4s; opacity: 0.5; }
@keyframes flame-pulse{ 0%,100%{ opacity: 0.5; transform: scale(1); } 50%{ opacity: 0.85; transform: scale(1.08); } }
.ip-tabs{ display: flex; flex-direction: column; gap: 0.2rem; }
.ip-tab{
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 0.7rem 0 0.7rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sienna);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.ip-tab .ip-tab-num{ font-family: var(--font-display); font-style: italic; margin-right: 0.5em; }
.ip-tab.active{ color: var(--copper); border-left-color: var(--copper); }
.ip-tab:focus-visible{ outline: 2px solid var(--copper); outline-offset: 2px; }

/* ---- Forms (Contact) ---- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-3); }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sienna); }
.field input, .field textarea, .field select{
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: var(--lemon);
  border: 1px solid var(--sand);
  border-radius: 2px;
  color: var(--bark);
  transition: border-color .3s, box-shadow .3s;
  resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(168,92,26,0.15);
}
.form-success{ display:none; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.form-success.show{ display:block; opacity: 1; transform: translateY(0); }

/* ---- Loading veil ---- */
.loading-veil{
  position: fixed; inset: 0; z-index: 999;
  background: var(--stone);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility .7s;
}
.loading-veil img{ width: 64px; height: 64px; animation: veil-breathe 1.6s ease-in-out infinite; }
@keyframes veil-breathe{ 0%,100%{ opacity: .55; } 50%{ opacity: 1; } }
.loading-veil-hint{
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sienna-dim);
  opacity: 0;
}
.loading-veil.ready .loading-veil-hint{
  animation: veil-hint-in .6s var(--ease-out) both, hint-breathe 2.6s ease-in-out .6s infinite;
}
@keyframes veil-hint-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.loading-veil.hide{ opacity: 0; visibility: hidden; transform: scale(1.05); }

/* ---- Reveal on scroll ----
   Content stays visible (opacity:1) at all times, including with JS
   disabled or before the observer fires — only a gentle rise-into-place
   transform is gated on scroll, never the content's visibility. */
.reveal{ opacity: 1; transform: translateY(16px); transition: transform .7s var(--ease-out); }
.reveal.in{ transform: translateY(0); }

/* Group entrances (card grids, gallery, process steps): the block itself
   stays put, its children carry the rise instead, each on a short stagger.
   Capped at 10 (the gallery's count) so a long grid never feels sluggish. */
.card-grid.reveal, .gallery-grid.reveal, .process.reveal{ transform: none; }
.card-grid.reveal .card,
.gallery-grid.reveal .gallery-item,
.process.reveal .process-step{
  transform: translateY(16px);
  transition: transform .6s var(--ease-out);
}
.card-grid.reveal.in .card,
.gallery-grid.reveal.in .gallery-item,
.process.reveal.in .process-step{ transform: translateY(0); }
.card-grid .card:nth-child(2), .gallery-grid .gallery-item:nth-child(2), .process .process-step:nth-child(2){ transition-delay: 45ms; }
.card-grid .card:nth-child(3), .gallery-grid .gallery-item:nth-child(3), .process .process-step:nth-child(3){ transition-delay: 90ms; }
.gallery-grid .gallery-item:nth-child(4){ transition-delay: 135ms; }
.gallery-grid .gallery-item:nth-child(5){ transition-delay: 180ms; }
.gallery-grid .gallery-item:nth-child(6){ transition-delay: 225ms; }
.gallery-grid .gallery-item:nth-child(7){ transition-delay: 270ms; }
.gallery-grid .gallery-item:nth-child(8){ transition-delay: 315ms; }
.gallery-grid .gallery-item:nth-child(9){ transition-delay: 360ms; }
.gallery-grid .gallery-item:nth-child(10){ transition-delay: 405ms; }

/* ---- Misc utility ---- */
.mt-1{ margin-top: var(--space-1); } .mt-2{ margin-top: var(--space-2); } .mt-3{ margin-top: var(--space-3); }
.mt-4{ margin-top: var(--space-4); } .mt-5{ margin-top: var(--space-5); }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-2{ gap: var(--space-2); } .gap-3{ gap: var(--space-3); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---- Hover feedback, gated to real pointers ----
   Touch devices fire a synthetic hover on tap with no matching "unhover"
   event, so a lifted card / zoomed photo / open mega-menu stays stuck in
   its hovered state until the next unrelated tap. Every hover-triggered
   visual change lives here, behind a real mouse. Non-hover states that
   also happen to share a selector with a hover rule (current-page nav
   underline, keyboard :focus-within) stay defined at their original
   spot, ungated, since keyboard/touch users still need them. */
@media (hover: hover) and (pointer: fine){
  .btn:hover{
    background: var(--copper);
    color: var(--lemon);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(168,92,26,0.55), 0 2px 6px rgba(44,26,14,0.08);
  }
  .btn.solid:hover{ background: var(--copper-dim); color: var(--lemon); box-shadow: 0 10px 24px -10px rgba(168,92,26,0.55); }
  .btn.ghost-light:hover{ background: #fff; color: var(--bark); }
  .text-link:hover{ background-size: 100% 1px; color: var(--copper); }
  .hero-sound-toggle:hover{ background: rgba(20,12,6,0.45); border-color: rgba(255,255,255,0.8); transform: translateY(-1px); }
  .site-nav:hover .nav-mega{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s;
  }
  .nav-mega-item:hover img{ transform: scale(1.08); }
  .nav-links a:hover::after{ right: 0; }
  /* Matches .card:hover's own specificity plus the two reveal-stagger
     states (style.css:927/933), which otherwise win the transform tie
     regardless of source order since they're more specific selectors. */
  .card:hover,
  .card-grid.reveal .card:hover,
  .card-grid.reveal.in .card:hover{ transform: translateY(-4px); box-shadow: 0 1px 2px rgba(44,26,14,0.06), 0 22px 40px -18px rgba(44,26,14,0.3); }
  .footer-links a:hover{ color: var(--sand); }
  .newsletter-form button:hover{ color: #fff; }
  .footer-social a:hover{ color: var(--sand); transform: translateY(-2px); }
  .gallery-item:hover img{ transform: scale(1.06); }
  .gallery-item:hover::after{ background: rgba(44,26,14,0.12); }
  .gallery-item:hover .gi-label{ opacity: 1; transform: translateY(0); }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--copper); border-color: var(--copper); }
  .lightbox-prev:hover, .lightbox-next:hover{ transform: translateY(-50%) scale(1.05); }
  .ip-tab:hover{ color: var(--copper); }
}