/* ==========================================================================
   HOME — CONTINUOUS PORTFOLIO ENVIRONMENT (V26)
   --------------------------------------------------------------------------
   Same design SYSTEM as Iconic V25 and the Bestiaire pass — one continuous
   ground, artwork dissolving into it, media-first reveals, copy above artwork —
   but a deliberately quieter, neutral register so Home introduces the whole
   body of work rather than reading as another chapter.

   Palette is warm mineral off-white with stone-grey, and only trace amounts of
   rose / sage / antique gold picked up from the two gateway images. It reuses
   neither Iconic's taupe nor Bestiaire's sage. CSS only — no raster canvas.
   Everything is scoped to .page-home.
   ========================================================================== */

.page-home {
  --home-ground: #e7e3db;
  --home-ground-rgb: 231, 227, 219;
  --home-stone: #c8c3b9;
  background: var(--home-ground);
  position: relative;
  isolation: isolate;
}

/* --- 1. One ground, no section fills ------------------------------------ */
.page-home .page-shell,
.page-home .hero--home,
.page-home .section,
.page-home .gateways,
.page-home .rolling-line,
.page-home .site-footer { background: transparent; }

/* The single continuous field. Percentage stops resolve against the whole
   document, so header, hero, gateways, rolling line and footer all sit on one
   surface. Broad, low-contrast, off-centre — no centred radial, no repeat,
   no fixed attachment, no pseudo-element rectangle anywhere. */
.page-home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 78% 26% at 18% 6%,  rgba(197, 190, 178, 0.30), transparent 70%),
    radial-gradient(ellipse 62% 20% at 88% 26%, rgba(176, 142, 132, 0.10), transparent 72%),
    radial-gradient(ellipse 70% 22% at 10% 52%, rgba(168, 146,  96, 0.08), transparent 70%),
    radial-gradient(ellipse 58% 18% at 92% 70%, rgba(140, 152, 138, 0.09), transparent 72%),
    radial-gradient(ellipse 74% 24% at 26% 92%, rgba(197, 190, 178, 0.26), transparent 71%),
    linear-gradient(180deg,
      rgba(240, 237, 231, 0.55) 0%,
      rgba(231, 227, 219, 0.00) 18%,
      rgba(224, 219, 210, 0.22) 50%,
      rgba(228, 224, 216, 0.30) 82%,
      rgba(234, 231, 224, 0.45) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 36%, transparent 64%, rgba(176, 170, 158, 0.16));
  background-repeat: no-repeat;
}

/* --- 2. Neutralise the inherited full-bleed gateway system --------------
   site.css ships a later Home gateway system that this file must override
   WITHOUT editing site.css. Diagnosed at a fixed scroll position:
     .gateway::after        -> linear-gradient(90deg, rgba(184,177,167,.95)...)
                               = the full-size overlay that read as one big card
     .gateway-media::before -> blurred duplicate artwork (blur 44.2px)
     .gateway-media::after  -> edge vignette
     .gateway-media         -> position:absolute; inset:0  (full-bleed)
     .gateway-media img     -> position:absolute; object-fit:cover; fills gateway
   All four are retired here so the artwork returns to normal document flow. */
.page-home .gateway::after,
.page-home .gateway-media::before,
.page-home .gateway-media::after { content: none; display: none; }

/* --- 3. Two independent editorial compositions -------------------------- */
.page-home .section,
.page-home .section-head,
.page-home .gateways,
.page-home .gateway,
.page-home .gateway-media,
.page-home .gateway-copy,
.page-home .gateway-action,
.page-home .section-link,
.page-home .hero-entry {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-home .gateway {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  grid-template-areas: "art idx" "art copy" "art act";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0.5rem;
  align-content: center;
  min-height: 0;
  padding: clamp(4rem, 9vh, 8rem) 0;
  overflow: visible;
}

/* Bestiaire mirrors the rhythm: copy left, artwork right. */
.page-home .gateway--bestiaire {
  grid-template-columns: 0.92fr 1.08fr;
  grid-template-areas: "idx art" "copy art" "act art";
}

/* Media returns to normal flow at its own aspect ratio — no inset, no cover. */
.page-home .gateway-media {
  grid-area: art;
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  margin: 0;
  align-self: center;
  overflow: visible;
  z-index: 1;
}

.page-home .gateway-media img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: initial;
  display: block;
}

.page-home .gateway-index  { grid-area: idx;  align-self: end; }
.page-home .gateway-copy   { grid-area: copy; align-self: center; }
.page-home .gateway-action { grid-area: act;  align-self: start; }

/* keep the underline affordance on the two textual actions only */
.page-home .hero-entry,
.page-home .section-link { border-bottom: 1px solid rgba(90, 84, 74, 0.32); }
.page-home .gateway-action { color: rgba(58, 53, 46, 0.92); }

/* --- 4. Artwork dissolution -------------------------------------------- */
/* Each image gets its own union of three offset lobes — irregular, not an oval,
   alpha reaching 0 before every boundary. Deliberately gentle: the artwork
   matters more than the effect, so a faint tonal transition is accepted rather
   than eating into the subject. Nothing is blurred, duplicated or recropped. */
.page-home .home-hero-media img {
  -webkit-mask-image:
    radial-gradient(ellipse 44% 46% at 52% 44%, #000 0 66%, rgba(0,0,0,.9) 80%, rgba(0,0,0,.45) 91%, transparent 100%),
    radial-gradient(ellipse 30% 26% at 34% 72%, #000 0 52%, rgba(0,0,0,.72) 76%, transparent 100%),
    radial-gradient(ellipse 24% 22% at 68% 30%, #000 0 50%, rgba(0,0,0,.66) 74%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 44% 46% at 52% 44%, #000 0 66%, rgba(0,0,0,.9) 80%, rgba(0,0,0,.45) 91%, transparent 100%),
    radial-gradient(ellipse 30% 26% at 34% 72%, #000 0 52%, rgba(0,0,0,.72) 76%, transparent 100%),
    radial-gradient(ellipse 24% 22% at 68% 30%, #000 0 50%, rgba(0,0,0,.66) 74%, transparent 100%);
  mask-composite: add;
}

/* Agrippina crop, 2420x1483 — two faces across the middle band. */

/* Hybrides rd-04, 2420x1603 — subject sits right of centre. */

/* Copy and actions above artwork — geometry already separates them; this is
   belt and braces, not the primary mechanism. */
.page-home .hero-copy,
.page-home .hero-scroll,
.page-home .section-head,
.page-home .gateway-index,
.page-home .gateway-copy,
.page-home .gateway-action,
.page-home .section-link,
.page-home .site-footer { position: relative; z-index: 3; }

.page-home .home-hero-media { position: absolute; z-index: 1; }

/* Keep the identity block at the top-left of the desktop hero, alongside the
   anchored artwork rather than vertically centring it beneath the image. */
@media (min-width: 901px) {
  .page-home .hero--home .hero-grid { align-items: start; }
  .page-home .hero-copy { align-self: start; }
}

/* --- 5. Rolling line, integrated ---------------------------------------- */
.page-home .rolling-line {
  border: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* --- 6. Media-first reveals -------------------------------------------- */
/* .reveal was moved off the two .gateway anchors and onto their media, copy and
   action children, so a hidden parent can no longer suppress the sequence. */
.page-home .gateway-media.reveal  { transition-duration: 900ms; }
.page-home .gateway-copy.reveal   { transition-duration: 690ms; transition-delay: 120ms; }
.page-home .gateway-action.reveal { transition-duration: 660ms; transition-delay: 190ms; }
.page-home .home-hero-media.reveal { transition-duration: 900ms; }
.page-home .section-head.reveal,
.page-home .section-link.reveal { transition-duration: 720ms; }

/* --- 7. Fallbacks ------------------------------------------------------- */
@media (scripting: none) {
  .page-home .reveal { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .reveal,
  .page-home .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  .page-home .rolling-track { animation: none !important; }
}

/* --- 8. Bestiaire gateway: specificity-matched reset --------------------
   site.css carries `.page-home .gateway--bestiaire .gateway-media` (0,3,0),
   which outranked this file's `.page-home .gateway-media` (0,2,0) and kept the
   media absolutely positioned and full-bleed. These selectors are (0,4,0) —
   `.page-home .gateway.gateway--bestiaire ...` — so they win on normal
   specificity. No !important: no important declaration exists in the cascade. */
.page-home .gateway.gateway--bestiaire .gateway-media::before,
.page-home .gateway.gateway--bestiaire .gateway-media::after { content: none; display: none; }

.page-home .gateway.gateway--bestiaire .gateway-media {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  margin: 0;
  align-self: center;
  overflow: visible;
  z-index: 1;
  grid-row: auto;
  grid-column: auto;
  grid-area: art;          /* after the row/column resets so it is not undone */
}

.page-home .gateway.gateway--bestiaire .gateway-media img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: initial;
  object-position: 50% 42%;
  opacity: 1;
  transform: none;
}

/* --- 9. Grid template + image reset at matching specificity --------------
   Measured: `.gateway--bestiaire` resolved to THREE columns and both medias
   reported `grid-area: auto`, so the shared sheet was still winning the grid
   definition; Iconic's image also kept an inherited `opacity: .9` and
   `scale(1.035)`. These are (0,4,0) so they win on normal specificity. */
.page-home .gateway.gateway--iconic {
  grid-template-columns: 1.06fr 0.94fr;
  grid-template-areas: "art idx" "art copy" "art act";
  grid-auto-columns: 0;
  grid-auto-flow: row;
}

.page-home .gateway.gateway--bestiaire {
  grid-template-columns: 0.94fr 1.06fr;
  grid-template-areas: "idx art" "copy art" "act art";
  grid-auto-columns: 0;
  grid-auto-flow: row;
}

.page-home .gateway.gateway--iconic .gateway-media,
.page-home .gateway.gateway--bestiaire .gateway-media { grid-area: art; }

.page-home .gateway.gateway--iconic .gateway-index,
.page-home .gateway.gateway--bestiaire .gateway-index { grid-area: idx; align-self: end; }
.page-home .gateway.gateway--iconic .gateway-copy,
.page-home .gateway.gateway--bestiaire .gateway-copy { grid-area: copy; align-self: center; }
.page-home .gateway.gateway--iconic .gateway-action,
.page-home .gateway.gateway--bestiaire .gateway-action { grid-area: act; align-self: start; }

/* Iconic image: clear the inherited scale and dimming so both artworks match. */
.page-home .gateway.gateway--iconic .gateway-media img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: initial;
  object-position: 50% 44%;
  opacity: 1;
  transform: none;
}

/* Softer, wider masks now that both images sit at ~500px in their own column —
   keeps faces, eyes, headdress and jewellery fully opaque, dissolving only the
   surplus crop. No oval spotlight: three offset lobes per image. */


/* --- 10. V5 — derived transparent artwork fragments ---------------------
   CSS masking is abandoned for the two gateway images. It produced two opposing
   failure modes: v3 resolved into ovals, and v4's edge-crossing lobes exposed
   straight image boundaries, because the masked element is always a rectangle.

   Instead each gateway now loads a DERIVED asset that carries its own alpha:
     media/cropped/home-iconic-atmospheric.webp     1400x858
     media/cropped/home-bestiaire-atmospheric.webp  1400x927
   Original pixels are untouched — only the alpha channel was authored, from a
   composition-specific freeform contour, feathered at ~5.5% of width, with the
   entire outermost row and column forced to alpha 0 on all four sides
   (verified programmatically: top/bottom/left/right max alpha = 0).

   So: no CSS mask, no clip-path, no vignette, no blurred duplicate, no
   pseudo-element on these two images. Geometry is inherited unchanged from v3. */
.page-home .gateway.gateway--iconic .gateway-media img,
.page-home .gateway.gateway--bestiaire .gateway-media img {
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
  filter: none;
}

/* --- 11. V6-C4 — shared gateway atmosphere ------------------------------
   The approved C4 treatment. The two artworks are derived assets carrying their
   own alpha (C3 envelope, unchanged) plus progressive tonal absorption at
   beige .31 / desaturation .29 / contrast-easing .19. Nothing is masked in CSS.

   This rule adds the one thing CSS must own: a single continuous atmospheric
   field behind BOTH gateways, so the section reads as one environment rather
   than two artwork islands. It sits at z-index -1 behind the gateways; all copy
   and actions remain at z-index 3. No panel, no spotlight, no per-artwork halo,
   no line between the gateways, no band behind text. */
.page-home .gateways { position: relative; isolation: isolate; }

.page-home .gateways::before {
  content: '';
  position: absolute;
  inset: -28% -8% -20%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 62% 28% at 24% 18%, rgba(176, 158, 150, 0.24), transparent 76%),
    radial-gradient(ellipse 50% 30% at 68% 40%, rgba(168, 156, 148, 0.22), transparent 78%),
    radial-gradient(ellipse 58% 28% at 30% 62%, rgba(178, 160, 158, 0.20), transparent 78%),
    radial-gradient(ellipse 62% 28% at 76% 82%, rgba(172, 156, 152, 0.24), transparent 78%),
    radial-gradient(ellipse 92% 56% at 50% 50%, rgba(190, 178, 168, 0.18), transparent 84%),
    linear-gradient(180deg,
      rgba(231, 227, 219, 0.00) 0%,
      rgba(206, 199, 193, 0.14) 16%,
      rgba(192, 182, 179, 0.22) 48%,
      rgba(207, 200, 194, 0.14) 84%,
      rgba(231, 227, 219, 0.00) 100%);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}