/* 18 INK — hero corridor, drift field, style index, bento archive.
   Loaded after 18ink.css; every default state here is the FINISHED state, and
   GSAP supplies the "from" — so reduced-motion users get a complete page rather
   than a blank one. */

/* ══ HERO — the corridor ═══════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;
  min-height:100svh;background:var(--eggshell);display:flex;align-items:center}
.hero__scene{position:absolute;inset:0;z-index:0;pointer-events:none}
/* The ink is not a backdrop behind the photographs — it runs OVER them on
   multiply, so the wash darkens the plates where it flows and the two read as
   one interleaved surface rather than two stacked pictures. */
.hero__ink{position:absolute;inset:0;z-index:2;opacity:1;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(135% 110% at 50% 48%,#000 46%,transparent 100%);
          mask-image:radial-gradient(135% 110% at 50% 48%,#000 46%,transparent 100%)}
.hero__ink canvas{width:100%;height:100%;display:block}
.hero__rails{z-index:1}

/* the studio name, set enormous in the brush script and threaded between the
   ink and the plates so the eye has something to fall into */
.hero__wordmark{position:absolute;z-index:3;left:50%;top:54%;translate:-50% -50%;
  font-family:var(--script);font-size:clamp(8rem,30vw,28rem);line-height:.8;
  color:var(--ink);opacity:.20;white-space:nowrap;pointer-events:none;user-select:none;
  mix-blend-mode:multiply}
/* portrait: one plate at a time, full bleed, slowly drifting */
.hero__stack{position:absolute;inset:0;z-index:1;display:none;overflow:hidden}
.ish-plate{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s var(--ease)}
.ish-plate.on{opacity:1}
.ish-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(.34) sepia(.10) contrast(1.02) saturate(.95)}
.ish-plate.on img{animation:heroDrift 11s var(--ease) both}
@keyframes heroDrift{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.hero__rails{position:absolute;left:50%;top:var(--axis,57%);width:0;height:0;
  transform-style:preserve-3d;perspective:var(--persp,30cqw)}
@supports not (container-type: inline-size){.hero__scene{display:none}}

.ish-card{position:absolute;left:0;top:0;margin:0;
  width:var(--cw,18cqw);height:var(--ch,25cqw);
  translate:-50% -50%;transform-origin:50% 50%;
  overflow:hidden;background:var(--paper-2);will-change:transform,opacity;
  animation-timing-function:linear;animation-iteration-count:infinite;
  box-shadow:0 30px 60px -30px rgba(52,40,24,.62)}
.ish-card img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  filter:grayscale(.30) sepia(.10) contrast(1.02) brightness(1.0) saturate(.95)}
/* the one gold in the hero: a seam on each card's leading edge */
.ish-card[data-rail="r"]{box-shadow:inset -1px 0 0 rgba(199,154,75,.55),0 30px 60px -30px rgba(52,40,24,.62)}
.ish-card[data-rail="l"]{box-shadow:inset  1px 0 0 rgba(199,154,75,.55),0 30px 60px -30px rgba(52,40,24,.62)}
.ish-card::after{content:"";position:absolute;inset:0;background:var(--eggshell);opacity:.10}

/* paper scrim — one element, one background stack, composites once */
.hero__scrim{position:absolute;inset:0;z-index:4;pointer-events:none;background:
  radial-gradient(42% 50% at 50% var(--axis,57%), rgba(236,227,208,.94) 0%, rgba(236,227,208,.72) 46%, rgba(236,227,208,0) 78%),
  linear-gradient(to top,    #ece3d0 0%, rgba(236,227,208,.92) 11%, rgba(236,227,208,0) 34%),
  linear-gradient(to bottom, rgba(236,227,208,.80) 0%, rgba(236,227,208,0) 17%),
  rgba(236,227,208,.10)}
/* the page grain sits under sections, so the hero needs its own on top */
.hero__grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E")}
.hero__in{position:relative;z-index:6;width:100%}
.hero__tag{max-width:min(620px,46vw)}
.hero__in{text-shadow:0 1px 18px rgba(236,227,208,.75)}

/* kintsugi seam on the accent word — exactly one instance on the page */
.kintsugi{color:var(--ink);
  background-image:linear-gradient(120deg,#1d1912 0%,#1d1912 35%,#c79a4b 50%,#1d1912 65%,#1d1912 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:kintsugi 18s ease-in-out infinite}
@keyframes kintsugi{0%,60%{background-position:150% center}100%{background-position:-50% center}}

/* ══ #troi — the drift field ═══════════════════════════════════════ */
.troi{position:relative;min-height:88svh;overflow:hidden;padding:var(--section) var(--pad);
  display:grid;place-items:center}
.troi__field{position:absolute;inset:0;pointer-events:none}
.float-el{position:absolute;margin:0;will-change:transform;translate:-50% -50%}
.float-el__in{display:block;overflow:hidden;background:var(--paper-2);
  box-shadow:0 26px 56px -36px rgba(50,38,24,.5);transform:scale(var(--sc,1))}
.float-el__in img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.42) contrast(.92) saturate(var(--sat,1)) brightness(1.03)}
/* the plates take z-index from their depth (up to ~32), so the line has to sit
   well clear of them or it reads as buried. Set large and given a soft paper
   halo rather than a box, so it holds over a photograph without covering it. */
.troi__line{position:relative;z-index:60;text-align:center;font-family:var(--script);
  font-size:clamp(2.6rem,9.5vw,8.5rem);line-height:.92;color:var(--ink);
  letter-spacing:-.01em;pointer-events:none;max-width:14ch;
  text-shadow:
    0 0 26px rgba(236,227,208,.95), 0 0 60px rgba(236,227,208,.85),
    0 0 110px rgba(236,227,208,.7),  0 2px 2px rgba(236,227,208,.9)}

/* ══ style index — rows that invert on hover, and filter the archive ══ */
.sindex{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sindex__list{list-style:none;border-top:1px solid var(--line)}
.srow{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.srow__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;padding:clamp(.8rem,2vw,1.3rem) .2rem;
  font-family:var(--sans);font-weight:200;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1.5rem,5vw,3.25rem);text-align:left}
.srow__n{font-size:.62rem;letter-spacing:.16em;color:var(--ink-3);font-weight:400}
.srow__marq{position:absolute;inset:0;background:var(--earth);color:var(--eggshell);
  display:flex;align-items:center;pointer-events:none;transform:translateY(101%)}
.srow__strip{display:flex;gap:2rem;white-space:nowrap;font-family:var(--sans);font-weight:200;
  font-size:clamp(1.5rem,5vw,3.25rem);padding-left:2rem}
.srow.on .srow__btn{color:transparent}
.sindex__hint{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:1rem}

/* ══ #galerie — the bento archive ══════════════════════════════════ */
.galerie{padding:var(--section) var(--pad);max-width:var(--maxw);margin:0 auto;position:relative}
.bento{--gap:12px;list-style:none;display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(44px,4.4vw,68px);gap:var(--gap);margin-top:clamp(1.6rem,4vw,2.6rem)}
/* an inline style="--cs:2" beats any media query on .tile, so breakpoints must
   read different custom properties */
.tile{--col:var(--cs,2);--row:var(--rs,3);grid-column:span var(--col);grid-row:span var(--row);min-width:0;
  transition:opacity .6s var(--ease),filter .6s var(--ease)}
.tile.dim{opacity:.18;filter:grayscale(1)}
.tile__btn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;
  background:var(--paper-2);cursor:pointer;overflow:hidden}
.tile__media{position:absolute;inset:0;display:block;overflow:hidden}
.tile__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.16);
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .9s var(--ease)}
.tile__btn:hover .tile__media img,.tile__btn:focus-visible .tile__media img{transform:scale(1.045);filter:none}
.tile__cap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.15rem;padding:.9rem;color:#f2ece0;opacity:0;transition:opacity .35s var(--ease);
  background:linear-gradient(to top,rgba(29,25,18,.62),rgba(29,25,18,.14) 46%,transparent 72%)}
.tile__btn:hover .tile__cap,.tile__btn:focus-visible .tile__cap{opacity:1}
.tile__cap b{font-weight:400;font-size:.94rem}
.tile__cap i{font-style:normal;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* lightbox — paper, never glass */
.lb{position:fixed;inset:0;z-index:200;display:none}
.lb.on{display:block}
.lb__scrim{position:absolute;inset:0;background:var(--eggshell) url("../img/brand/paper.png") repeat;
  background-size:640px 640px;opacity:0}
.lb__wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1rem;padding:clamp(1rem,4vw,3rem)}
.lb__stage{position:relative;overflow:hidden;background:var(--paper-2);
  box-shadow:0 40px 90px -50px rgba(50,38,24,.6)}
.lb__stage .tile__media{position:absolute;inset:0}
.lb__stage .tile__cap{display:none}
.lb__meta{text-align:center}
.lb__title{font-family:var(--sans);font-weight:200;font-size:clamp(1.3rem,3vw,2rem);color:var(--ink)}
.lb__desc{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:.3rem}
.lb__close{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:3;
  background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.lb__dock{display:flex;gap:.5rem;max-width:min(92vw,760px);overflow-x:auto;padding:.6rem .2rem 0;
  border-top:1px solid rgba(199,154,75,.42);scroll-snap-type:x mandatory;scrollbar-width:none}
.lb__dock::-webkit-scrollbar{display:none}
.dock__t{flex:0 0 auto;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  opacity:.55;transition:opacity .3s,box-shadow .3s;box-shadow:0 0 0 1px transparent;scroll-snap-align:center}
.dock__t img{width:100%;height:100%;object-fit:cover}
/* the active marker is a ring, not an outline, so :focus-visible stays free */
.dock__t.on{opacity:1;box-shadow:0 0 0 1px var(--gold)}
html.lb-open,html.lb-open body{overflow:hidden}

/* ══ responsive ═══════════════════════════════════════════════════ */
@media(max-width:900px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .tile{--col:var(--cs-m,2);--row:var(--rs-m,3)}
}
@media(max-width:640px){
  .hero__tag{max-width:none}
  /* the corridor is the wrong shape in portrait — swap to the plate stack */
  .hero__rails{display:none}
  .hero__stack{display:block}
  .hero__ink{opacity:.82}
  /* a single photograph fills the frame here, so the type needs a real wash
     under it rather than the desktop scrim's thin centre */
  .hero__scrim{background:
    radial-gradient(70% 38% at 50% 46%, rgba(236,227,208,.90) 0%, rgba(236,227,208,.62) 55%, rgba(236,227,208,.10) 88%),
    linear-gradient(to top,    #ece3d0 0%, rgba(236,227,208,.90) 16%, rgba(236,227,208,.18) 46%),
    linear-gradient(to bottom, rgba(236,227,208,.88) 0%, rgba(236,227,208,.10) 26%),
    rgba(236,227,208,.22)}
  .ish-plate img{filter:grayscale(.34) sepia(.10) contrast(1.02) saturate(.94)}
  /* over a photograph multiply disappears — the mark reads as a watermark */
  .hero__wordmark{font-size:clamp(6rem,40vw,13rem);opacity:.17;mix-blend-mode:normal;
    color:var(--ink);top:50%}
  .srow__marq{display:none}                 /* no hover to reveal it */
  .troi{min-height:76svh}
  /* seven plates at 390px is mud — thin the field rather than shrink it */
  .float-el:nth-of-type(n+5){display:none}
  .bento{grid-template-columns:repeat(2,1fr);--gap:9px;grid-auto-rows:clamp(58px,15.5vw,84px)}
  .tile{--col:var(--cs-s,1);--row:var(--rs-s,3)}
  .lb__dock{max-width:100vw}
}
/* no hover on a phone, so a hover-only caption is an invisible caption */
@media(pointer:coarse),(max-width:640px){ .tile__cap{opacity:1} }

@media(prefers-reduced-motion:reduce){
  /* every card is already dropped mid-flight, so pausing leaves a fully
     composed still corridor rather than a heap on the axis */
  .ish-card{animation-play-state:paused!important}
  /* the portrait stack is a separate mechanism and was still drifting */
  .ish-plate{transition:none}
  .ish-plate.on img{animation:none}
  .kintsugi{animation:none;background-position:150% center}
  .tile,.tile__media img,.tile__cap{transition:none}
}

/* style-index row internals (marquee panel + selected state) */
.srow__label{display:block}
.srow.sel .srow__btn{color:var(--sedona)}
.srow.sel .srow__n{color:var(--sedona-ink)}
.srow__strip img{height:clamp(1.4rem,4vw,2.6rem);width:auto;object-fit:cover;align-self:center;
  filter:grayscale(1) invert(1) opacity(.75)}
.srow__strip span{align-self:center}

/* the drift line sits over the field but must not catch the pointer */
.troi__line{pointer-events:none}