/*
Theme Name: Yanzawood
Theme URI: https://yanzawood.nl
Author: Yanzawood Studio
Description: Bespoke fine woodworking portfolio. Dark, editorial, Japanese-influenced minimalism.
Version: 1.9.0
Text Domain: yanzawood
*/

/* ------------------------------------------------------------------
   v1.9.0 — Contact + i18n pass
   • Contact form box capped to ≤ half the screen on desktop (equal two-
     column grid + panel max-width), full-width on phones. Its fields fill
     that box, so the input "lines" stay wide by default regardless of the
     WPForms field-size setting.
   • Field labels ("Name", "Email", …) and the auto thank-you confirmation
     are now cream/white (were brass / inheriting a dark colour).
   • Dutch: the footer marquee + strip, and Customizer DEFAULT text (hero
     tagline/subtitle, footer tagline, studio intro, location) now translate
     when NL is active. Note: WPForms field text, menu items the owner typed,
     and page/project body content still need editing in the form / Polylang
     / WPML — the theme can't reach those strings.
   • Added a wp_mail_failed logger to surface why contact mail isn't sending.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   v1.8.0 — UI pass
   • Contact: inquiry-form panel widened so the input "lines" run
     ~1.7× longer (knob: .contact-form-panel max-width, was 540px).
     The submit / thank-you confirmation text is now cream, not brass.
   • Bilingual chrome: an EN / NL switcher in the nav, on every page
     (see header.php + functions.php). It defers to Polylang / WPML
     automatically when one is active; otherwise it switches the
     theme's own interface strings via a built-in NL map.
   • Portfolio piece: the image carousel is lifted up to sit directly
     beneath the hero as the focal block (it used to live at the very
     bottom), and the prev/next project columns under it were removed.
   • Mobile nav: fixed the bar drifting down during scroll — the blend
     layer is dropped on small screens and the bar is promoted to its
     own compositor layer so it stays pinned to the top.
   ------------------------------------------------------------------ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --void:        #080807;
  --void-soft:   #0f0f0e;
  --void-mid:    #161614;
  --void-light:  #1e1d1a;
  --ash:         #c8bfb0;
  --ash-dim:     #7a7267;
  --ash-ghost:   #3a3730;
  --walnut:      #7c4e2a;
  --brass:       #b8922a;
  --brass-light: #d4aa4a;
  --cream:       #f0ead8;

  --font-display: 'BakemonoStereo', 'Helvetica Neue', sans-serif;
  --font-body:    'BakemonoStereo', Georgia, serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;
  --space-2xl: 12rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --max-width: 1600px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: auto; }
body { background: var(--void); color: var(--ash); font-family: var(--font-body); line-height: 1.7; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 2px; }

/* ============================================================
   FONT
   ============================================================ */
@font-face {
  font-family: 'BakemonoStereo';
  src: url('assets/fonts/BakemonoStereo-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 0.9vw, 0.75rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brass);
}
.t-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.t-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.t-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  color: var(--cream);
}
.t-body {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: var(--ash-dim);
}

.char-wrap { overflow: hidden; display: inline-block; }
.char      { display: inline-block; will-change: transform, opacity; }
.line-wrap { overflow: hidden; display: block; }
.line      { display: block; will-change: transform, opacity; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--brass); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease-out-expo), height .3s var(--ease-out-expo), opacity .3s ease;
  mix-blend-mode: difference;
}
.cursor.is-hover {
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--brass-light);
  mix-blend-mode: normal;
}
.cursor.is-hidden { opacity: 0; }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0;
  background: var(--void); z-index: 9000;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-md);
}
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.preloader-kanji { font-family: serif; font-size: clamp(5rem, 15vw, 10rem); color: var(--cream); line-height: 1; opacity: 0; }
.preloader-name  { font-family: var(--font-display); font-size: clamp(0.7rem, 1.5vw, 0.875rem); letter-spacing: 0.4em; text-transform: uppercase; color: var(--brass); opacity: 0; }
.preloader-line  { width: 1px; height: 0; background: linear-gradient(to bottom, var(--brass), transparent); position: absolute; bottom: 0; left: 50%; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--space-md) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  mix-blend-mode: difference; pointer-events: none;
  transition: all .5s var(--ease-out-expo);
}
.site-nav.scrolled {
  mix-blend-mode: normal;
  background: rgba(8,8,7,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ash-ghost);
  padding-block: 1.25rem;
}
.site-nav * { pointer-events: auto; }
.nav-logo { display: flex; align-items: center; gap: .75rem; }
.nav-logo .kanji-mark { font-family: serif; font-size: 1.75rem; color: var(--cream); line-height: 1; }
.nav-logo .wordmark { font-family: var(--font-display); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a { font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim); transition: color .3s ease; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--brass); transition: width .6s var(--ease-out-expo); }
.nav-links a:hover, .nav-links a.current-menu-item { color: var(--cream); }
.nav-links a:hover::after, .nav-links a.current-menu-item::after { width: 100%; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-toggle span { width: 24px; height: 1px; background: var(--cream); display: block; transition: all .3s ease; }

/* Right-hand cluster of the bar: links + language switch + hamburger. */
.nav-right { display: flex; align-items: center; gap: var(--space-lg); }

/* Language switcher (EN / NL) — lives in the nav bar, visible on every page. */
.lang-switch { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); }
.lang-globe  { width: 14px; height: 14px; color: var(--ash-dim); flex: 0 0 auto; }
.lang-opt    { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash-dim); transition: color .3s ease; }
a.lang-opt:hover     { color: var(--cream); }
.lang-opt.is-active  { color: var(--cream); }
.lang-sep    { color: var(--ash-ghost); font-size: .7rem; line-height: 1; }

.mobile-nav {
  position: fixed; inset: 0;
  background: var(--void); z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg);
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-out-expo);
}
.mobile-nav.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav a { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 4rem); letter-spacing: -.02em; color: var(--ash-dim); transition: color .3s ease; }
.mobile-nav a:hover { color: var(--cream); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .875rem 2rem;
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  transition: all .3s ease;
}
.btn-primary { background: var(--brass); color: var(--void); }
.btn-primary:hover { background: var(--brass-light); }
.btn-ghost { border: 1px solid var(--ash-ghost); color: var(--ash); }
.btn-ghost:hover { border-color: var(--ash); color: var(--cream); }
.btn-text { color: var(--ash-dim); padding: 0; gap: .5rem; }
.btn-text::after { content: '→'; transition: transform .3s ease; }
.btn-text:hover { color: var(--cream); }
.btn-text:hover::after { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero { height: 100svh; min-height: 600px; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; will-change: transform; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; will-change: transform; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(8,8,7,.72) 0%, rgba(8,8,7,.4) 50%, rgba(8,8,7,.85) 100%); }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--gutter); padding-bottom: clamp(3rem, 8vh, 6rem); max-width: var(--max-width); margin-inline: auto; width: 100%; }
.hero-eyebrow { margin-bottom: var(--space-sm); clip-path: inset(0 100% 0 0); }
.hero-title { font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 11rem); line-height: .9; letter-spacing: -.03em; color: var(--cream); max-width: 12ch; clip-path: inset(0 0 100% 0); }
.hero-subtitle { margin-top: var(--space-md); font-size: clamp(.875rem, 1.2vw, 1rem); color: var(--ash-dim); max-width: 38ch; opacity: 0; }
.hero-cta { margin-top: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); opacity: 0; }
.hero-scroll-hint { position: absolute; bottom: 2rem; right: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: .5rem; z-index: 2; opacity: 0; }
.hero-scroll-hint span { font-family: var(--font-display); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ash-ghost); writing-mode: vertical-rl; }
.scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--brass), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   ▼ LEGACY — retained but dormant (v1.6.0)
   The homepage "featured-project" stack and the draggable 3D coverflow
   (.project-slider / --inline) are no longer emitted by front-page.php or
   single-portfolio.php. They're kept here intact so the coverflow can be
   reinstated for any view by restoring its markup. New experiences live in
   the GALLERY WALK and PIECE blocks further down. Safe to delete this whole
   legacy run (down to the ABOUT PAGE banner) if you never want it back.
   ============================================================ */

/* ============================================================
   FEATURED PROJECT  (legacy)
   ============================================================ */
.featured-project { padding-block: var(--space-lg); position: relative; }
/* Gentle full-width hairline between consecutive projects, so it reads clearly
   as one project ending and the next beginning. Sits in the gap above each
   project (the first one, right after the hero, is left alone). It fades out at
   the extreme edges so it never hits the viewport sides harshly. */
.featured-project + .featured-project::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ash-ghost) 7%,
    var(--ash-ghost) 93%,
    transparent 100%);
  pointer-events: none;
}
/* Gentle breathing room between the full-screen hero and the first project,
   so the scroll into project 01 eases in rather than snapping. */
.hero + .featured-project { padding-top: clamp(6rem, 14vh, 11rem); }
/* Each project is a full-width carousel band with a caption row beneath it.
   The caption alignment alternates to keep the editorial left/right rhythm. */
.featured-project .section-label { position: absolute; top: var(--space-xl); left: var(--gutter); writing-mode: vertical-rl; font-family: var(--font-display); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ash-ghost); }
.featured-row { display: grid; grid-template-columns: 3.0fr 1fr; gap: var(--space-xl); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); align-items: center; }
.featured-row--reverse { grid-template-columns: 1fr 3.0fr; }
.featured-row--reverse .featured-stage   { order: 2; }
.featured-row--reverse .featured-caption { order: 1; }
.featured-stage { min-width: 0; }
.featured-caption { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.featured-caption-text { display: flex; flex-direction: column; gap: var(--space-md); max-width: 46ch; }
.material-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.material-tag::before { content: ''; width: 20px; height: 1px; background: var(--brass); }
.featured-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.featured-desc { color: var(--ash-dim); line-height: 1.8; max-width: 38ch; border-left: 1px solid var(--ash-ghost); padding-left: var(--space-md); }

/* ============================================================
   ABOUT CRAFT
   ============================================================ */
.about-craft { padding-block: var(--space-2xl); position: relative; }
.about-craft-inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 55%; gap: var(--space-xl); align-items: start; }
.about-craft-left { position: sticky; top: 30vh; }
.craft-kanji-bg { font-family: serif; font-size: clamp(10rem, 25vw, 22rem); line-height: 1; color: var(--void-light); user-select: none; position: absolute; top: -3rem; left: -2rem; z-index: 0; pointer-events: none; }
.about-craft-left > *:not(.craft-kanji-bg) { position: relative; z-index: 1; }
.craft-principles { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.craft-principle { display: flex; gap: var(--space-sm); align-items: flex-start; }
.craft-principle .num { font-family: var(--font-display); font-size: .65rem; color: var(--brass); letter-spacing: .1em; padding-top: 2px; min-width: 2ch; }
.craft-principle p { font-size: .875rem; color: var(--ash-dim); line-height: 1.7; }
.about-craft-right { display: flex; flex-direction: column; gap: 1px; }
.craft-image-row { display: grid; gap: 1px; }
.craft-image-row.asymmetric { grid-template-columns: 62% 1fr; }
.craft-img-wrap { overflow: hidden; clip-path: inset(0 0 100% 0); }
.craft-img-wrap img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; will-change: transform; }
.craft-img-wrap.tall   { aspect-ratio: 3/4; }
.craft-img-wrap.wide   { aspect-ratio: 16/9; }
.craft-img-wrap.square { aspect-ratio: 1; }
/* Single studio image — shown whole (no crop) against the void background. */
.craft-img-wrap.single     { overflow: hidden; }
.craft-img-wrap.single img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; scale: 1; }
.craft-placeholder { aspect-ratio: 4/5; background: var(--void-mid); display: flex; align-items: center; justify-content: center; clip-path: none; }
.craft-placeholder span { font-family: serif; font-size: clamp(4rem, 10vw, 7rem); color: var(--ash-ghost); line-height: 1; }

/* ============================================================
   MARQUEE
   ============================================================ */
.cta-marquee { border-top: 1px solid var(--ash-ghost); border-bottom: 1px solid var(--ash-ghost); overflow: hidden; padding-block: 1.5rem; background: var(--void-soft); }
.marquee-track { display: flex; gap: var(--space-xl); white-space: nowrap; animation: marquee 18s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-size: clamp(.75rem, 1.5vw, 1rem); letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim); flex-shrink: 0; }
.marquee-track .dot { color: var(--brass); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   PORTFOLIO ARCHIVE
   ============================================================ */
.portfolio-page { padding-top: calc(var(--space-2xl) + 2rem); }
.portfolio-header { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--space-xl); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.portfolio-filters { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.filter-btn { font-family: var(--font-display); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim); padding: .5rem 1.25rem; border: 1px solid var(--ash-ghost); transition: all .3s ease; }
.filter-btn:hover, .filter-btn.active { color: var(--cream); border-color: var(--brass); background: rgba(184,146,42,.05); }
.portfolio-grid { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--ash-ghost); }
.portfolio-item { background: var(--void); overflow: hidden; position: relative; cursor: pointer; }
.portfolio-item:nth-child(1)  { grid-column: span 7; }
.portfolio-item:nth-child(2)  { grid-column: span 5; }
.portfolio-item:nth-child(3)  { grid-column: span 4; }
.portfolio-item:nth-child(4)  { grid-column: span 8; }
.portfolio-item:nth-child(5)  { grid-column: span 12; }
.portfolio-item:nth-child(6)  { grid-column: span 5; }
.portfolio-item:nth-child(7)  { grid-column: span 7; }
.portfolio-item:nth-child(8)  { grid-column: span 6; }
.portfolio-item:nth-child(9)  { grid-column: span 6; }
.portfolio-item:nth-child(3n+1):nth-child(n+10) { grid-column: span 7; }
.portfolio-item:nth-child(3n+2):nth-child(n+10) { grid-column: span 5; }
.portfolio-item:nth-child(3n):nth-child(n+10)   { grid-column: span 12; }
.portfolio-item .img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.portfolio-item:nth-child(5) .img-wrap, .portfolio-item:nth-child(3n):nth-child(n+10) .img-wrap { aspect-ratio: 16/6; }
.portfolio-item .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out-expo), filter .8s ease; will-change: transform; }
.portfolio-item:hover .img-wrap img { scale: 1.04; filter: brightness(.7); }
.portfolio-item-info { padding: 1.5rem; display: flex; flex-direction: column; gap: .25rem; background: var(--void-soft); }
.portfolio-item-info .item-num { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; color: var(--brass); }
.portfolio-item-info .item-title { font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.4rem); letter-spacing: -.01em; color: var(--cream); transition: color .3s ease; }
.portfolio-item:hover .item-title { color: var(--brass-light); }
.portfolio-item-info .item-material { font-size: .75rem; color: var(--ash-ghost); text-transform: uppercase; letter-spacing: .1em; }
.portfolio-item-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.portfolio-item:hover .portfolio-item-overlay { opacity: 1; }
.portfolio-item-overlay .view-label { font-family: var(--font-display); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); background: rgba(8,8,7,.6); padding: .75rem 2rem; border: 1px solid rgba(184,146,42,.4); backdrop-filter: blur(4px); }

/* ============================================================
   SINGLE PROJECT
   ============================================================ */
/* FULL-SCREEN DRAG SLIDER — the project page opens straight into this.
   A full-bleed horizontal track you grab and fling; momentum, bounds and
   skew are driven from JS. Images use object-fit: contain on a void
   background so PNG transparency is preserved. */
.project-slider {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--void);
  outline: none;
  touch-action: pan-y;            /* let the page scroll vertically; JS owns the horizontal drag */
  cursor: grab;
}
.project-slider.is-dragging { cursor: grabbing; }
.project-slider.is-single   { cursor: default; }

/* 3D COVERFLOW STAGE — slides are stacked dead-centre and pushed into a
   perspective arc by per-slide transforms from main.js. The active image
   faces the viewer; its neighbours recede, tilt on the Y-axis and dim. */
.project-slider-track {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  perspective: 2200px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
}
.project-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15rem, 50vw, 38rem);
  height: clamp(46vh, 64vh, 74vh);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  cursor: inherit;
}
.project-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;           /* clicks/drags are handled on the slide / root */
  box-shadow: 0 42px 90px -34px rgba(0,0,0,.85);
}
.project-slide.is-active img { box-shadow: 0 52px 110px -30px rgba(0,0,0,.9); }

/* Single image: no carousel, just centre it on the void. */
.project-slider.is-single .project-slider-track { display: flex; align-items: center; justify-content: center; }
.project-slider.is-single .project-slide {
  position: relative; top: auto; left: auto; transform: none;
  width: auto; height: clamp(58vh, 74vh, 82vh);
}
.project-slider.is-single .project-slide img { height: 100%; max-width: 86vw; }
.project-slide--empty .project-slide-placeholder { width: 60vw; height: 60vh; background: var(--void-mid); }

/* Overlay: back-link, title block, drag hint and progress bar.
   The container ignores pointer events so the whole surface stays draggable;
   only the real links opt back in. */
.project-slider-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.project-slider-overlay::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,    rgba(8,8,7,.78) 0%, rgba(8,8,7,0) 38%),
    linear-gradient(to bottom, rgba(8,8,7,.55) 0%, rgba(8,8,7,0) 24%);
}
.project-slider-top { position: absolute; top: 0; left: 0; right: 0; padding: var(--gutter); padding-top: clamp(5.5rem, 10vh, 7rem); }
.project-slider-back { pointer-events: auto; color: var(--ash-ghost); }
.project-slider-back:hover { color: var(--brass-light); }
.project-slider-meta { position: absolute; left: 0; bottom: 0; padding: var(--gutter); padding-bottom: clamp(3rem, 8vh, 5.5rem); max-width: min(90vw, 60ch); }
.project-slider-cat   { margin-bottom: .75rem; }
.project-slider-title { margin-bottom: var(--space-md); }
.project-slider-tags  { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.project-slider-hint {
  position: absolute; right: var(--gutter); bottom: clamp(3rem, 8vh, 5.5rem);
  display: flex; align-items: center; gap: .75rem; color: var(--ash);
}
.project-slider-hint .hint-line { display: block; width: clamp(2rem, 5vw, 3.5rem); height: 1px; background: var(--brass); transform-origin: right center; animation: yz-drag-pulse 2.4s var(--ease-out-expo) infinite; }
.project-slider-hint .hint-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; }
@keyframes yz-drag-pulse { 0%,100% { transform: scaleX(.55); opacity: .55; } 50% { transform: scaleX(1); opacity: 1; } }
.project-slider-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ash-ghost); }
.project-slider-progress .progress-bar { display: block; height: 100%; width: 0; background: var(--brass); transform-origin: left center; transition: width .1s linear; }

/* INLINE COVERFLOW — the same draggable 3D gallery, sized to sit inside the
   homepage editorial grid instead of filling the viewport. Slide dimensions
   are percentages so the carousel adapts when the grid collapses to one
   column on mobile; main.js derives its spread from the real slide width. */
.project-slider--inline { height: clamp(18rem, 34vw, 30rem); background: transparent; }
.project-slider--inline .project-slider-track { perspective: 2000px; perspective-origin: 50% 50%; }
.project-slider--inline .project-slide { width: 70%; height: 80%; }
.project-slider--inline .project-slide img { box-shadow: 0 30px 64px -28px rgba(0,0,0,.85); }
.project-slider--inline .project-slide.is-active img { box-shadow: 0 38px 80px -26px rgba(0,0,0,.9); }
.project-slider--inline.is-single .project-slide { height: 100%; width: auto; }
.project-slider--inline.is-single .project-slide img { height: 100%; max-width: 100%; }
.project-slider--inline .project-slide-placeholder { width: 100%; height: 100%; }

/* "MORE IMAGES" INDICATOR — a quiet segmented bar beneath the inline carousel,
   one tick per image, the current one lit in brass. It tells the eye there are
   further images without competing with the work. main.js lights the active tick. */
.project-slider-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(.35rem, 3%, 1rem);
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 1001;            /* above the slides (which reach ~1000) so shadows don't dim it */
  pointer-events: none;
}
.project-slider-dots .slider-dot {
  display: block;
  width: clamp(12px, 3.4vw, 22px);
  height: 2px;
  border-radius: 2px;
  background: var(--ash-ghost);
  opacity: .5;
  transition: background-color .45s var(--ease-out-expo), opacity .45s var(--ease-out-expo);
}
.project-slider-dots .slider-dot.is-current {
  background: var(--brass);
  opacity: 1;
}

/* Custom cursor gets a "DRAG" label while over the slider */
.cursor.is-drag {
  width: 5.5rem; height: 5.5rem; background: transparent;
  border: 1px solid var(--brass-light); mix-blend-mode: normal;
}
.cursor.is-drag::after {
  content: 'DRAG'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .28em; color: var(--brass-light);
}

.project-body { max-width: var(--max-width); margin-inline: auto; padding: var(--space-xl) var(--gutter); }
.project-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--ash-ghost); margin-bottom: var(--space-xl); }
.project-specs { display: flex; flex-direction: column; gap: var(--space-md); }
.project-spec { display: flex; gap: var(--space-md); align-items: baseline; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--void-light); }
.project-spec .spec-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); min-width: 6rem; }
.project-spec .spec-value { font-size: .875rem; color: var(--ash-dim); }

/* FULLSCREEN LIGHTBOX */
.yz-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(8,8,7,.96); backdrop-filter: blur(6px); }
.yz-lightbox[hidden] { display: none; }
.yz-lightbox-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.yz-lightbox-img { max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; }
.yz-lightbox-close {
  position: fixed; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem;
  background: var(--void-mid); border: 1px solid var(--brass); color: var(--cream);
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.yz-lightbox-close:hover { background: var(--brass); color: var(--void); }
.yz-lightbox-close svg { width: 1rem; height: 1rem; }
.yz-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,7,.35); border: 1px solid var(--ash-ghost); color: var(--cream); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.yz-lightbox-nav:hover { background: rgba(8,8,7,.7); border-color: var(--brass); }
.yz-lightbox-nav svg { width: 1.25rem; height: 1.25rem; }
.yz-lightbox-prev { left: clamp(.5rem, 3vw, 2rem); }
.yz-lightbox-next { right: clamp(.5rem, 3vw, 2rem); }
body.lb-open { overflow: hidden; }
.project-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ash-ghost); border-top: 1px solid var(--ash-ghost); }
.project-nav-item { background: var(--void-soft); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); transition: background .3s ease; }
.project-nav-item:hover { background: var(--void-mid); }
.project-nav-item .nav-direction { font-family: var(--font-display); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--brass); }
.project-nav-item .nav-title { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.75rem); color: var(--cream); letter-spacing: -.01em; }

/* ============================================================
   ▲ GALLERY WALK — home collection (horizontal scroll-scrub)
   The home page's headline experience. As you scroll down, the
   collection slides sideways inside a pinned (sticky) stage. JS
   (main.js → initGalleryWalk) drives the track transform, the
   per-panel scale + caption dim, and the counter; CSS owns the
   layout. On coarse-pointer / ≤1024px / reduced-motion the very
   same markup collapses into a calm vertical stack (.is-static).

   TUNE LAYOUT here:  panel size → --walk-panel-w / --walk-panel-h
                      spacing    → --walk-gap
   TUNE MOTION in assets/js/main.js (lerp, scale & dim falloff).
   ============================================================ */
.gallery-walk { position: relative; --walk-panel-w: clamp(20rem, 60vw, 52rem); --walk-panel-h: 78svh; --walk-gap: clamp(3rem, 6vw, 8rem); }
/* JS sets section height = viewport + horizontal travel distance. */
.gallery-walk-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.gallery-track { display: flex; align-items: center; gap: var(--walk-gap); width: max-content; padding-inline: var(--gutter); will-change: transform; }

.walk-panel { flex: 0 0 auto; display: flex; flex-direction: column; }
.walk-panel--work { width: var(--walk-panel-w); height: var(--walk-panel-h); gap: var(--space-md); }
.walk-panel--intro, .walk-panel--outro { width: clamp(16rem, 32vw, 30rem); height: var(--walk-panel-h); justify-content: center; }

/* Media floats on the void, contained & whole. JS drives scale. */
.walk-media { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.walk-media img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 40px 90px -34px rgba(0,0,0,.85); transform: scale(.94); will-change: transform; }
.walk-media-placeholder { font-family: serif; font-size: clamp(5rem, 12vw, 11rem); color: var(--void-light); line-height: 1; user-select: none; }

/* Caption opacity driven per-frame by JS via --dim (no transition). */
.walk-caption { opacity: var(--dim, 1); }
.walk-caption-head { display: flex; align-items: baseline; gap: 1rem; }
.walk-index { font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; color: var(--brass); }
.walk-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; color: var(--cream); }
.walk-caption-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }
.walk-meta { font-family: var(--font-display); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash-dim); }

/* Intro & outro copy panels. */
.walk-intro-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.03em; color: var(--cream); margin-top: var(--space-sm); }
.walk-intro-text { font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.75; color: var(--ash-dim); max-width: 28ch; margin-top: var(--space-md); }
.walk-outro-cta { margin-top: var(--space-lg); align-self: flex-start; }

/* Shared cue line (here + on the single-piece hero). */
.cue-line { display: inline-block; width: 2.5rem; height: 1px; background: var(--brass); transform-origin: left center; animation: yz-cue 2.4s var(--ease-out-expo) infinite; }
@keyframes yz-cue { 0%, 100% { transform: scaleX(.4); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }
.walk-scroll-cue, .piece-hero-cue { display: inline-flex; align-items: center; gap: .75rem; margin-top: var(--space-lg); font-family: var(--font-display); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ash-dim); }

/* Pinned UI — counter + progress, bottom of the stage. */
.walk-ui { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 5vh, 3.5rem); display: flex; align-items: center; gap: var(--space-md); pointer-events: none; }
.walk-counter { font-family: var(--font-display); font-size: .65rem; letter-spacing: .2em; color: var(--ash-dim); white-space: nowrap; }
.walk-counter b { color: var(--brass); font-weight: normal; }
.walk-counter-label { text-transform: uppercase; }
.walk-progress { position: relative; flex: 1; height: 1px; background: var(--ash-ghost); overflow: hidden; }
.walk-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--brass); }

/* Vertical fallback — coarse pointer or narrow viewport. */
@media (max-width: 1024px), (pointer: coarse) {
  .gallery-walk { height: auto !important; }
  .gallery-walk-sticky { position: static; height: auto; display: block; overflow: visible; }
  .gallery-track { flex-direction: column; align-items: stretch; width: auto; gap: var(--space-2xl); padding-block: var(--space-xl); transform: none !important; }
  .walk-panel--work, .walk-panel--intro, .walk-panel--outro { width: auto; height: auto; }
  .walk-media { max-height: 80vh; }
  .walk-media img { transform: none !important; }
  .walk-caption { opacity: 1 !important; }
  .walk-ui { display: none; }
}
/* Same static stack on any width when JS flags reduced-motion. */
.gallery-walk.is-static { height: auto !important; }
.gallery-walk.is-static .gallery-walk-sticky { position: static; height: auto; display: block; overflow: visible; }
.gallery-walk.is-static .gallery-track { flex-direction: column; align-items: stretch; width: auto; gap: var(--space-2xl); padding-block: var(--space-xl); transform: none !important; }
.gallery-walk.is-static .walk-panel--work, .gallery-walk.is-static .walk-panel--intro, .gallery-walk.is-static .walk-panel--outro { width: auto; height: auto; }
.gallery-walk.is-static .walk-media { max-height: 80vh; }
.gallery-walk.is-static .walk-media img { transform: none !important; }
.gallery-walk.is-static .walk-caption { opacity: 1 !important; }
.gallery-walk.is-static .walk-ui { display: none; }

/* ============================================================
   ▲ THE PIECE — single portfolio (vertical immersion)
   Replaces the per-project coverflow. A contained hero of the
   featured image on the void, the kept story + specs, then the
   remaining images shown large and scrolled vertically. The hero
   and every gallery image open the shared fullscreen lightbox
   (wired in main.js). Entrances are pure CSS, so nothing flashes
   behind the preloader.
   ============================================================ */
.piece-hero { position: relative; height: 88svh; min-height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--void); padding: 0 var(--gutter); }
.piece-hero-img { max-width: min(92vw, 1100px); max-height: 82svh; object-fit: contain; box-shadow: 0 60px 120px -40px rgba(0,0,0,.9); cursor: zoom-in; animation: yz-piece-img 1.6s var(--ease-out-expo) both; }
@keyframes yz-piece-img { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
.piece-hero-placeholder { display: flex; align-items: center; justify-content: center; }
.piece-hero-placeholder span { font-family: serif; font-size: clamp(8rem, 22vw, 20rem); color: var(--void-light); line-height: 1; user-select: none; }
.piece-hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.piece-hero-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,7,.72) 0%, rgba(8,8,7,0) 34%); }
.piece-hero-top { position: absolute; top: 0; left: 0; right: 0; padding: var(--gutter); padding-top: clamp(5.5rem, 10vh, 7rem); z-index: 3; }
.piece-hero-back { color: var(--ash-ghost); }
.piece-hero-back:hover { color: var(--brass-light); }
.piece-hero-meta { position: absolute; left: 0; bottom: 0; z-index: 3; padding: var(--gutter); padding-bottom: clamp(2.5rem, 7vh, 4.5rem); max-width: min(90vw, 60ch); animation: yz-piece-rise 1s var(--ease-out-expo) both .15s; }
@keyframes yz-piece-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.piece-hero-cat { margin-bottom: var(--space-sm); }
.piece-hero-title { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.03em; color: var(--cream); margin-bottom: var(--space-md); }
.piece-hero-tags { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* IMAGE CAROUSEL — one dominant centred image with its neighbours peeking at
   the frame edges, dimmed + blurred, crossfading as they move. main.js sets the
   per-slide transform / opacity / filter inline; the rules here are the frame,
   the chrome (heading, counter, progress, drag hint) and the responsive sizing.
   The slide WIDTH drives the neighbour spread in JS, so the breakpoint below is
   the main lever for how the carousel feels on smaller screens. */
/* The carousel now sits directly under the hero as the page's focal block
   (moved up from the bottom in single-portfolio.php). Tighter padding keeps
   it close to the hero; the rule below pulls the description up beneath it. */
.piece-carousel { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.piece-carousel + .project-body { padding-top: var(--space-lg); }
.pc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pc-head-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.pc-counter { font-family: var(--font-display); font-size: .8rem; letter-spacing: .18em; color: var(--ash-dim); white-space: nowrap; }
.pc-counter-current { color: var(--brass-light); }

.pc-viewport { position: relative; height: clamp(52vh, 66vh, 78vh); width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; outline: none; }
.pc-viewport.is-dragging,
.piece-carousel.is-dragging .pc-viewport { cursor: grabbing; }
.pc-track { position: absolute; inset: 0; }
.pc-slide { position: absolute; top: 50%; left: 50%; width: clamp(16rem, 46vw, 52rem); height: 100%; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); will-change: transform, opacity, filter; cursor: inherit; }
.pc-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; box-shadow: 0 42px 90px -34px rgba(0,0,0,.85); }
.pc-slide.is-active img { box-shadow: 0 56px 120px -30px rgba(0,0,0,.92); }

.pc-foot { display: flex; align-items: center; gap: var(--space-md); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); margin-top: clamp(2rem, 4vw, 3.25rem); }
.pc-progress { position: relative; flex: 1; height: 2px; background: var(--ash-ghost); overflow: hidden; }
.pc-progress-bar { display: block; height: 100%; width: 0; background: var(--brass); transform-origin: left center; transition: width .1s linear; }
.pc-hint { display: inline-flex; align-items: center; gap: .7rem; color: var(--ash-dim); font-family: var(--font-display); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.pc-hint .hint-line { display: block; width: clamp(1.5rem, 4vw, 2.75rem); height: 1px; background: var(--brass); transform-origin: right center; animation: yz-drag-pulse 2.4s var(--ease-out-expo) infinite; }
@media (max-width: 768px) {
  .pc-viewport { height: clamp(44vh, 58vh, 64vh); }
  .pc-slide    { width: 78vw; }
  .pc-hint     { display: none; }
}

/* Keep entrances + JS-driven transforms safe under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .piece-hero-img, .piece-hero-meta, .cue-line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .walk-media img { transform: none !important; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-page { padding-top: calc(var(--space-2xl) + 2rem); }
.about-hero-text { max-width: var(--max-width); margin-inline: auto; padding: var(--space-xl) var(--gutter); position: relative; }
.about-headline { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 9rem); line-height: .92; letter-spacing: -.03em; color: var(--cream); max-width: 14ch; }
.about-kanji-float { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); font-family: serif; font-size: clamp(8rem, 18vw, 18rem); color: var(--void-light); user-select: none; pointer-events: none; line-height: 1; }
.about-story { max-width: var(--max-width); margin-inline: auto; padding: var(--space-xl) var(--gutter); display: grid; grid-template-columns: 1fr 55%; gap: var(--space-xl); }
.about-story-media { display: flex; flex-direction: column; gap: 1px; }
.about-img-primary { overflow: hidden; clip-path: inset(0 0 100% 0); }
.about-img-primary img { width: 100%; aspect-ratio: 3/4; object-fit: cover; scale: 1.06; }
.about-img-secondary { overflow: hidden; margin-left: 30%; clip-path: inset(0 0 100% 0); }
.about-img-secondary img { width: 100%; aspect-ratio: 4/3; object-fit: cover; scale: 1.06; }
.about-story-text { padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); }
.about-story-text p { font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.85; color: var(--ash-dim); }
.about-story-text p.lead { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ash); line-height: 1.6; }
.materials-section { max-width: var(--max-width); margin-inline: auto; padding: var(--space-xl) var(--gutter); border-top: 1px solid var(--ash-ghost); }
.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ash-ghost); margin-top: var(--space-xl); }
.material-card { background: var(--void-soft); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.material-card .mat-swatch { width: 40px; height: 4px; border-radius: 2px; }
.mat-swatch.walnut { background: linear-gradient(90deg, #3d2010, #7c4e2a); }
.mat-swatch.ash    { background: linear-gradient(90deg, #c8b89a, #e8dcc8); }
.mat-swatch.brass  { background: linear-gradient(90deg, #8a6a1a, #d4aa4a); }
.material-card h3 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.01em; color: var(--cream); }
.material-card p  { font-size: .875rem; color: var(--ash-dim); line-height: 1.7; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page { padding-top: calc(var(--space-xl) + 3rem); min-height: 100svh; }
.contact-inner { max-width: 1560px; margin-inline: auto; padding: 0 var(--gutter) var(--space-2xl); display: grid; grid-template-columns: minmax(460px, 0.72fr) 1.5fr; gap: clamp(3rem, 6vw, 6.5rem); align-items: start; }
.contact-left { position: sticky; top: calc(var(--space-xl) + 1rem); display: flex; flex-direction: column; gap: var(--space-lg); }
.contact-info { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-sm); }
.contact-info-item { display: flex; flex-direction: column; gap: .35rem; padding-bottom: var(--space-md); border-bottom: 1px solid var(--ash-ghost); }
.ci-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--brass); }
.ci-value { font-size: .95rem; color: var(--ash); transition: color .3s ease; }
a.ci-value:hover { color: var(--cream); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-group { display: flex; flex-direction: column; gap: .5rem; }
.form-group label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.form-group input, .form-group textarea, .form-group select { width: 100%; background: var(--void-soft); border: none; border-bottom: 1px solid var(--ash-ghost); color: var(--ash); font-family: var(--font-body); font-size: .95rem; padding: .875rem 0; outline: none; transition: border-color .3s ease, color .3s ease; border-radius: 0; appearance: none; -webkit-appearance: none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-bottom-color: var(--brass); color: var(--cream); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--ash-ghost); }
.form-group textarea { height: 140px; resize: none; line-height: 1.6; }
.form-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b8922a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 1.5rem; }
.form-group select option { background: var(--void-soft); }
.form-submit { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.form-note { font-size: .75rem; color: var(--ash-ghost); }
.form-message { padding: 1rem var(--space-md); font-family: var(--font-display); font-size: .75rem; letter-spacing: .1em; display: none; }
.form-message.success { display: block; border-left: 2px solid var(--brass); color: var(--cream); background: rgba(184,146,42,.05); }
.form-message.error   { display: block; border-left: 2px solid #c0392b; color: #e74c3c; background: rgba(192,57,43,.05); }

/* ---- Inquiry form: a contained, on-brand panel ----
   The left column stays open and editorial; the form sits in a quiet
   void-soft panel with a hairline edge, so the underline fields read as a
   deliberate object instead of floating in the dark. */
.contact-form-wrap  { display: flex; flex-direction: column; }
.contact-form-panel {
  background: var(--void-soft);
  border: 1px solid var(--ash-ghost);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex; flex-direction: column;
  /* Mobile/tablet default: the panel fills its column (single-column stack),
     so the form is full-width on phones. The desktop cap below keeps it from
     ever running past half the screen on larger viewports. */
  max-width: 100%;
}
.contact-form-panel > .t-eyebrow { margin-bottom: var(--space-md); }

/* Desktop (two-column layout): equal columns so the inquiry panel never runs
   past half the screen, while its fields still fill that box (wide "lines").
   Tune the panel cap — the vw keeps it under half on any monitor; the px is the
   comfortable ceiling on very wide screens. */
@media (min-width: 1025px) {
  .contact-inner { grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr); }
  .contact-form-panel { max-width: min(48vw, 720px); width: 100%; }
}

/* ---- WPForms — themed to match the studio palette ---- */
.contact-page .wpforms-container { margin: 0; padding-top: 0; }
.contact-page .wpforms-form  { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-page .wpforms-field-container { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-page .wpforms-field { padding: 0 !important; margin: 0 !important; max-width: 100% !important; display: flex; flex-direction: column; gap: .5rem; }
.contact-page .wpforms-field-label,
.contact-page .wpforms-field-label-inline {
  font-family: var(--font-display) !important;
  font-size: .6rem !important; font-weight: 400 !important; line-height: 1.4 !important;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cream) !important; margin: 0 0 .15rem !important;
}
.contact-page .wpforms-field-description { font-size: .75rem; color: var(--ash-ghost); margin-top: .25rem; line-height: 1.6; }
.contact-page .wpforms-required-label    { color: var(--brass); }

/* multi-part rows (e.g. First / Last name) */
.contact-page .wpforms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); width: 100% !important; }
.contact-page .wpforms-field-row .wpforms-field-row-block { width: 100% !important; float: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: .35rem; }
.contact-page .wpforms-field-sublabel { font-family: var(--font-display) !important; font-size: .55rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--ash) !important; font-weight: 400 !important; margin-top: .3rem !important; }

.contact-page .wpforms-field input[type="text"],
.contact-page .wpforms-field input[type="email"],
.contact-page .wpforms-field input[type="tel"],
.contact-page .wpforms-field input[type="url"],
.contact-page .wpforms-field input[type="number"],
.contact-page .wpforms-field select,
.contact-page .wpforms-field textarea {
  width: 100% !important; max-width: 100% !important;
  background: transparent !important;
  border: none !important; border-bottom: 1px solid var(--ash-ghost) !important;
  border-radius: 0 !important; box-shadow: none !important;
  color: var(--ash) !important; font-family: var(--font-body) !important; font-size: .95rem !important;
  padding: .8rem 0 !important; outline: none;
  transition: border-color .3s ease, color .3s ease;
}
.contact-page .wpforms-field input:focus,
.contact-page .wpforms-field select:focus,
.contact-page .wpforms-field textarea:focus { border-bottom-color: var(--brass) !important; color: var(--cream) !important; }
.contact-page .wpforms-field input::placeholder,
.contact-page .wpforms-field textarea::placeholder { color: var(--ash-ghost); }
.contact-page .wpforms-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.contact-page .wpforms-field select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b8922a'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .1rem center !important; padding-right: 1.5rem !important; }
.contact-page .wpforms-field select option { background: var(--void-soft); color: var(--ash); }

/* Writing lines run the full width of the panel by default, regardless of
   the Small / Medium / Large size set on a field in the WPForms builder
   (WPForms ships fields at "Medium" ≈ 60% otherwise). */
.contact-page .wpforms-field-small,
.contact-page .wpforms-field-medium,
.contact-page .wpforms-field-large { max-width: 100% !important; width: 100% !important; }
.contact-page .wpforms-field input,
.contact-page .wpforms-field select,
.contact-page .wpforms-field textarea { width: 100% !important; max-width: 100% !important; }

.contact-page .wpforms-submit-container { margin-top: var(--space-sm); }
.contact-page .wpforms-submit {
  background: var(--brass) !important; color: var(--void) !important;
  border: none !important; border-radius: 0 !important; cursor: pointer;
  font-family: var(--font-display) !important; font-size: .7rem !important; letter-spacing: .2em; text-transform: uppercase;
  padding: 1rem 2.25rem !important; transition: background .3s ease;
}
.contact-page .wpforms-submit:hover { background: var(--brass-light) !important; }
.contact-page .wpforms-confirmation-container-full,
.contact-page div.wpforms-confirmation-container {
  background: rgba(184,146,42,.05) !important; border: none !important; border-left: 2px solid var(--brass) !important;
  color: var(--cream) !important; font-family: var(--font-display); font-size: .8rem; letter-spacing: .05em; line-height: 1.7;
  padding: 1rem var(--space-md) !important; margin: 0 !important;
}
/* The auto thank-you text WPForms drops in carries its own dark colour on the
   inner <p> / links, so force the whole confirmation (and its children) white. */
.contact-page .wpforms-confirmation-container-full,
.contact-page .wpforms-confirmation-container-full *,
.contact-page div.wpforms-confirmation-container,
.contact-page div.wpforms-confirmation-container *,
.contact-page .wpforms-confirmation-scroll,
.contact-page .wpforms-confirmation-scroll * { color: var(--cream) !important; }
.contact-page .wpforms-error { color: #e74c3c !important; font-size: .75rem; }
.contact-page .wpforms-field input.wpforms-error,
.contact-page .wpforms-field textarea.wpforms-error,
.contact-page .wpforms-field select.wpforms-error { border-bottom-color: #c0392b !important; }

/* ---- Contact Form 7 — same treatment, in case you switch plugins ---- */
.contact-page .wpcf7 { margin: 0; }
.contact-page .wpcf7-form   { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-page .wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.contact-page .wpcf7-form label { font-family: var(--font-display); font-size: .6rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); display: flex; flex-direction: column; gap: .5rem; }
.contact-page .wpcf7-form-control.wpcf7-text,
.contact-page .wpcf7-form-control.wpcf7-email,
.contact-page .wpcf7-form-control.wpcf7-tel,
.contact-page .wpcf7-form-control.wpcf7-number,
.contact-page .wpcf7-form-control.wpcf7-select,
.contact-page .wpcf7-form-control.wpcf7-textarea {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--ash-ghost); border-radius: 0; box-shadow: none;
  color: var(--ash); font-family: var(--font-body); font-size: .95rem;
  padding: .8rem 0; outline: none; transition: border-color .3s ease, color .3s ease;
  appearance: none; -webkit-appearance: none;
}
.contact-page .wpcf7-form-control:focus { border-bottom-color: var(--brass); color: var(--cream); }
.contact-page .wpcf7-form-control::placeholder { color: var(--ash-ghost); }
.contact-page .wpcf7-form-control.wpcf7-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.contact-page .wpcf7-form-control.wpcf7-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b8922a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .1rem center; padding-right: 1.5rem; }
.contact-page .wpcf7-form-control.wpcf7-submit {
  background: var(--brass); color: var(--void);
  border: none; border-radius: 0; cursor: pointer; width: auto; align-self: flex-start;
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 1rem 2.25rem; margin-top: var(--space-sm); transition: background .3s ease;
}
.contact-page .wpcf7-form-control.wpcf7-submit:hover { background: var(--brass-light); }
.contact-page .wpcf7-spinner { margin: 0 0 0 .75rem; }
.contact-page .wpcf7-not-valid-tip { color: #e74c3c; font-size: .75rem; margin-top: .3rem; }
.contact-page .wpcf7-form-control.wpcf7-not-valid { border-bottom-color: #c0392b; }
.contact-page .wpcf7 .wpcf7-response-output {
  margin: var(--space-sm) 0 0 !important; border: none !important; border-left: 2px solid var(--brass) !important;
  background: rgba(184,146,42,.05); color: var(--cream);
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .05em; line-height: 1.7;
  padding: 1rem var(--space-md) !important;
}
.contact-page .wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.contact-page .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng {
  border-left-color: #c0392b !important; background: rgba(192,57,43,.05); color: #e74c3c;
}

/* ---- About page image placeholder ---- */
.about-img-placeholder { background: var(--void-mid); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.about-img-placeholder span { font-family: serif; font-size: 6rem; color: var(--ash-ghost); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--ash-ghost); padding: var(--space-xl) var(--gutter) var(--space-md); max-width: var(--max-width); margin-inline: auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--ash-ghost); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-md); }
.footer-brand .kanji { font-family: serif; font-size: 3rem; color: var(--ash-ghost); line-height: 1; }
.footer-brand .tagline { font-size: .8rem; color: var(--ash-ghost); line-height: 1.6; max-width: 24ch; }
.footer-nav-col h4 { font-family: var(--font-display); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--space-md); }
.footer-nav-col ul { display: flex; flex-direction: column; gap: .75rem; }
.footer-nav-col a { font-size: .875rem; color: var(--ash-dim); transition: color .3s ease; }
.footer-nav-col a:hover { color: var(--cream); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-md); font-size: .7rem; color: var(--ash-ghost); letter-spacing: .1em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .featured-project .section-label { display: none; }
  /* Stack the carousel above the title/description, drop the alternating mirror. */
  .featured-row,
  .featured-row--reverse { grid-template-columns: 1fr; gap: var(--space-lg); }
  .featured-row--reverse .featured-stage,
  .featured-row--reverse .featured-caption { order: initial; }
  .about-craft-inner     { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about-craft-left      { position: static; }
  .about-story           { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about-img-secondary   { margin-left: 0; }
  .contact-inner         { grid-template-columns: 1fr; }
  .contact-left          { position: static; }
  .project-intro         { grid-template-columns: 1fr; }
  .portfolio-item        { grid-column: span 12 !important; }
  .footer-top            { grid-template-columns: 1fr 1fr; }
  .materials-grid        { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --gutter: 1.5rem; }
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
  .nav-right  { gap: var(--space-md); }
  /* Phone: keep the fixed bar rock-solid. A mix-blend-mode layer has to be
     re-composited against the moving page on every frame, which on iOS / Android
     makes a fixed element lag and appear to slide down while you scroll. Drop the
     blend on small screens and promote the bar to its own GPU layer so it stays
     pinned to the very top. Only background / padding animate — never transform. */
  .site-nav {
    mix-blend-mode: normal;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transition: background-color .4s var(--ease-out-expo), padding .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo), backdrop-filter .4s var(--ease-out-expo);
  }
  /* With the blend gone, add a faint top scrim (only before you scroll) so the
     cream logo / switcher / hamburger stay legible over a light hero image.
     It fades to nothing downward, and the solid .scrolled bar replaces it once
     you start scrolling. */
  .site-nav:not(.scrolled)::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(8,8,7,.5), rgba(8,8,7,0));
  }
  .form-row   { grid-template-columns: 1fr; }
  /* Contact form on phones: panel stays full-width (single-column stack) with
     tighter padding, and any First / Last (or other multi-part) field row
     stacks instead of sitting side by side. */
  .contact-form-panel { padding: clamp(1.25rem, 6vw, 1.75rem); }
  .contact-page .wpforms-field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(2.5rem, 13vw, 5rem); }
  /* Hero copy is top-aligned; reserve room so the "Fine Woodworking — Heemstede"
     line clears the fixed logo bar instead of touching it. */
  .hero-content { padding-top: 6rem; }
  .hero + .featured-project { padding-top: clamp(3rem, 10vh, 6rem); }
  .about-kanji-float { display: none; }
  .craft-image-row.asymmetric { grid-template-columns: 1fr; }
  .craft-kanji-bg { font-size: clamp(8rem, 34vw, 13rem); top: -1.5rem; left: -1rem; }
  .craft-img-wrap.single img { max-height: 70vh; }
  .portfolio-header { flex-direction: column; align-items: flex-start; }
  /* Phone-only carousel sizing — overrides the larger desktop value (line 422).
     Kept narrow on purpose: a wide centre image leaves no room on either side,
     so the previous/next images got pushed off the screen. ~66% leaves a clear
     gutter so both neighbours always peek in. Tune this single number for phones. */
  .project-slider--inline .project-slide { width: 66%; height: 80%; }
}
@media (max-width: 480px) {
  .hero-cta   { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .hero-cta .btn { justify-content: center; }
  .btn        { padding: .8rem 1.5rem; }
  .featured-title { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .featured-desc  { max-width: none; }
  .footer-bottom  { flex-direction: column; gap: .5rem; align-items: flex-start; }
  .marquee-track  { gap: var(--space-lg); }
  .yz-lightbox-nav { width: 2.5rem; height: 2.5rem; }
  .project-slide   { width: clamp(13rem, 76vw, 22rem); height: clamp(42vh, 56vh, 64vh); }
  .project-slider-hint { display: none; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* Scroll-reveal animations don't run with reduced motion, so make sure all
     content that starts hidden is shown. */
  .hero-eyebrow, .hero-title, .hero-subtitle, .hero-cta, .hero-scroll-hint,
  .craft-img-wrap, .about-img-primary, .about-img-secondary {
    clip-path: none !important;
    opacity: 1 !important;
  }
}
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }