/* ============================================================
   ZEN Zabuton / Zafu — fixed hero photo with fade-on-scroll
   Only referenced by zenzabuton-zafu.html

   Only stage 1 (photo + title) is a fixed, full-viewport layer now.
   It simply fades out to the plain background as you scroll — no
   second photo crossfades in behind it. The second photo lives in
   normal document flow just below, using the same .wide-photo /
   .fade-in treatment as the rest of the site.
   ============================================================ */

body {
  background: var(--line, #CDD2D6);
  overflow-x: hidden;
}

/* Keep the header above the hero photos so it's never hidden behind
   them — position stays normal (not fixed), just elevated in stacking */
header {
  position: relative;
  z-index: 10;
  background: transparent;
}

.zen-hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh; /* falls back to 100vh in browsers without svh support */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  pointer-events: none; /* decorative — never blocks clicks/scroll on content below */
}

.zen-hero-1 { z-index: 3; }

.zen-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: opacity, transform;
}

/* zafu-mood.webp is a tall standing figure — anchor the crop higher
   so the head stays in frame */
.zen-hero-img-1 { object-position: center 18%; }

/* Darkening gradient so the title stays legible over any photo */
.zen-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 100%);
  pointer-events: none;
}

.zen-hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  text-align: center;
  color: #fff;
  will-change: opacity, transform;
}

.zen-hero-text .page-title {
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

.zen-hero-text .subline {
  display: block;
  margin-top: 14px;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
  text-wrap: balance;
}

.zen-hero-scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  will-change: opacity;
}

/* Scroll distance for stage 1's fade-out. */
.zen-hero-spacer-1 {
  height: 130vh;
  height: 130svh;
}

/* The section right after the spacer needs to sit above the fixed
   hero and have an opaque background so the fading photo doesn't
   show through */
.zen-hero-reveal {
  position: relative;
  z-index: 1;
  background: var(--line, #CDD2D6);
  padding-top: 9vh;
  padding-top: 9svh;
}

/* Gives the intro text room to hold in place (see .intro-copy-sticky)
   before the section ends and the page continues scrolling normally.
   Breaks out to full viewport width so the centering below is based
   on the true screen center, not on .wrap's own width or padding. */
.intro-copy-hold {
  height: 170vh;
  height: 170svh;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.intro-copy-sticky {
  position: sticky;
  top: 30vh;
  top: 30svh;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Breaks the reading photo out of .wrap's 920px cap so it reads
   larger on wide desktop screens, while still keeping some side
   margin (not a full-bleed edge-to-edge photo) */
.wide-photo {
  width: 1300px;
  max-width: 90vw;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  /* On mobile .wrap is already narrow — no need to break out */
  .wide-photo {
    width: 100%;
    max-width: 100%;
    position: static;
    left: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zen-hero img,
  .zen-hero-text,
  .zen-hero-scroll-cue {
    transition: none !important;
  }
}

/* Caption sitting above the photo, on the plain page background —
   same italic subline voice as the hero text, but in the page's own
   ink color since there's no photo behind it to stay legible over. */
.photo-lead-caption {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
  color: var(--ink-soft, #565F66);
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .photo-lead-caption {
    font-size: 16px;
    margin-bottom: 28px;
  }
}

/* ============================================================
   Craftsmanship — alternating process cards
   Photo + text side by side in a soft white card, flipping
   left/right down the list (reference: Yamagata Dantsu craft page)
   ============================================================ */

.process-list {
  width: 1100px;
  max-width: 90vw;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.process-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,0,0,0.05);
}

.process-card:nth-child(even) {
  flex-direction: row-reverse;
}

.process-photo {
  flex: 0 0 42%;
  overflow: hidden;
}

.process-photo img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.process-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
}

.process-step {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-soft, #565F66);
  margin-bottom: 14px;
}

.process-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
}

.process-text p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft, #565F66);
  margin: 0;
}

@media (max-width: 900px) {
  .process-photo img { min-height: 220px; }
  .process-text { padding: 36px 40px; }
}

@media (max-width: 760px) {
  .process-list {
    width: 100%;
    max-width: 100%;
    position: static;
    left: auto;
    transform: none;
    gap: 20px;
  }
  .process-card,
  .process-card:nth-child(even) {
    flex-direction: column;
  }
  .process-photo img { min-height: 220px; }
  .process-text { padding: 28px 24px; }
  .process-title { font-size: 21px; }
}