/* Mazhaka V20 — final visual art-direction pass.
   Designed to complement Claude's V14 and V17 typography without replacing them.
   No changes to foundation content, typography families, or programme interactions. */

/* A true photographic canvas, not an image that abruptly stops at two thirds.
   The white-cloud treatment remains the approved direction, now diffusing the
   imagery across the full viewport so the portrait and the story belong together. */
@media (min-width:1000px) {
  .hero-media {
    width:76%;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 67%,rgba(0,0,0,.68) 83%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 67%,rgba(0,0,0,.68) 83%,transparent 100%);
  }
  .hero-slide img {
    object-position:var(--fx,50%) var(--fy,50%);
  }
  .hero-cloud {
    background:
      linear-gradient(90deg,
        rgba(248,244,237,0) 0%,
        rgba(248,244,237,.03) 35%,
        rgba(248,244,237,.56) 52%,
        rgba(248,244,237,.96) 65%,
        #f8f4ed 80%),
      radial-gradient(40% 55% at 61% 56%,rgba(248,244,237,.3),transparent 83%);
  }
  .hero-copy {
    width:min(570px,39vw);
    padding-top:calc(var(--header-h) + 22px);
    padding-bottom:104px;
  }
  .hero h1 {
    font-size:clamp(61px,4.95vw,87px);
    line-height:1.07;
    letter-spacing:-.012em;
    margin-bottom:clamp(24px,2.3vw,32px);
    text-wrap:balance;
  }
  .hero-desc {max-width:42ch;line-height:1.68;}
  .hero-ui {bottom:42px;}
  .hero-media::before {
    width:min(530px,40vw);
    height:155px;
    background:linear-gradient(90deg,#f8f4ed 0%,#f8f4ed 87%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,1) 76%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,1) 76%,transparent 100%);
  }
  /* Keep the editorial composition centered on large displays. */
  .about-grid,.work-stage,.story-top,.story-main,.journal-head,.journal-grid,.upcoming,.join-grid {
    max-width:1700px;
    margin-inline:auto;
  }
  .story-top,.journal-head {column-gap:clamp(42px,5vw,90px);}
  .story-top p,.journal-head p {max-width:43ch;}
  .journal-grid {row-gap:clamp(38px,4.5vw,72px);}
}

/* Lighter visual rhythm through the middle without flattening the design. */
.about-copy .about-body {max-width:49ch;}
.entry-copy p {max-width:55ch;}
.story-box p {max-width:46ch;}
.entry .link-u,.story-box .link-u {text-underline-offset:4px;}

/* Focus and touch targets: refined appearance, no loss of accessibility. */
.slide-btn,.slide-pause {min-width:40px;min-height:40px;}
.rail-btn {min-width:44px;min-height:44px;}

@media (max-width:999px) {
  /* Preserve the carefully art-directed photo-first mobile hero.
     The wide-photo treatment above is desktop-only. */
  .hero-media {width:100%;-webkit-mask-image:none;mask-image:none;}
  .hero-media::before {height:82px;}
  .hero-slide img {transform:scale(1.025);}
  .hero-slide.is-active img {transform:scale(1);}
  .hero-copy {position:relative;}
  .hero h1 {letter-spacing:-.006em;}
  .hero-desc {max-width:40ch;}
  .story-top p,.journal-head p,.index-head p {max-width:54ch;}
}
@media (max-width:640px) {
  .hero-ui {margin-top:24px;}
  .hero-desc {font-size:15.5px;line-height:1.65;}
  .about-copy,.stripe-copy {text-wrap:pretty;}
  .entry-copy p {max-width:42ch;}
}
@media (prefers-reduced-motion:reduce) {
  .hero-slide img {transform:none;}
}

/* V22 — HERO CLARITY PASS
   The visual direction is unchanged. Pull back the white/cloud opacity so the
   documentary photography reads as photography, not as a pale backdrop.
   Retain a localized cream handoff underneath the editorial headline.
*/
@media (min-width:1000px) {
  .hero-media {
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.59) 83%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.59) 83%,transparent 100%);
  }
  .hero-cloud {
    background:linear-gradient(90deg,
      rgba(248,244,237,0) 0%,
      rgba(248,244,237,.03) 42%,
      rgba(248,244,237,.38) 52%,
      rgba(248,244,237,.88) 65%,
      rgba(248,244,237,.98) 75%,
      #f8f4ed 85%);
  }
}
@media (max-width:999px) {
  .hero-media::after {
    height:33%;
    background:linear-gradient(0deg,
      var(--cream) 0%,
      rgba(248,244,237,.91) 12%,
      rgba(248,244,237,.61) 33%,
      rgba(248,244,237,.13) 65%,
      rgba(248,244,237,0) 100%);
  }
}

/* V23 — The original hero photograph had oversized printed signage behind the
   official navigation wordmark. The two first-slide hero crops now have that
   background signage cleaned up instead, so no top-left cloud is necessary.
   Preserve the approved lower image-to-cream fade underneath the headline. */
.hero-media::before { display:none; content:none; }

/* V24 — desktop-only hero direction: copy left / photographs right.
   Preserve the mobile photo-first layout and approved light cream handoff.
   Scoped to desktop so the existing responsive treatment is unchanged. */
@media (min-width:1000px) {
  .hero-media {
    inset:0 0 0 auto;
    width:72%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 38%, #000 100%);
    mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 38%, #000 100%);
  }
  .hero-cloud {
    background:linear-gradient(90deg,
      #f8f4ed 0%,
      rgba(248,244,237,.99) 23%,
      rgba(248,244,237,.91) 33%,
      rgba(248,244,237,.62) 42%,
      rgba(248,244,237,.17) 56%,
      rgba(248,244,237,0) 70%);
  }
  .hero-copy {
    width:min(590px,41vw);
    margin-left:var(--gutter);
    margin-right:auto;
    align-items:flex-start;
  }
  .hero-caption {
    left:auto;
    right:var(--gutter);
  }
  .hero-ui {left:0;}
}
@media (min-width:1000px) and (max-width:1199px) {
  .hero-copy {width:44vw;}
  .hero h1 {font-size:clamp(52px,5vw,65px);}
}