/* ============ IK Portrait — Editorial Noir — prototype 1 ============ */

:root{
  --bg:#0e0e0f;
  --bg-2:#141415;
  --surface:#1a1a1b;
  --ink:#ece8e1;          /* warm off-white, not pure white */
  --ink-dim:#9a958c;
  --ink-faint:#8a857b;     /* раскрыт до WCAG AA на near-black (был #5c5953 — 2.7:1) */
  --line:#2a2926;
  --line-soft:#1f1e1c;

  --serif:"Bodoni Moda", Georgia, serif;
  --sans:"Archivo", system-ui, sans-serif;

  --pad:clamp(1.25rem, 4vw, 4rem);
  --maxw:1680px;
  --ease:cubic-bezier(.6,.01,.05,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* decelerate-into-place — page-load entrances */
  --ease-soft:cubic-bezier(.4,0,.2,1);   /* smooth ease-in-out — gentle start & stop, no kick (lead caption glide) */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.5;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}
em{font-style:italic}

@media (pointer:fine){ body{cursor:none} a,button,.menu-toggle{cursor:none} }

/* scrollbar — track = the page's PERCEIVED background. Pure --bg (#0e0e0f) read a tone darker
   because the browser paints the scrollbar ABOVE the .grain layer, so the track gets no grain.
   #131314 = measured composite of --bg + the .05 grain. Thumb = the muted "Studio" name colour. */
html{scrollbar-width:auto;scrollbar-color:#353537 #131314}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#131314}
::-webkit-scrollbar-thumb{background:#353537;border:3px solid #131314;border-radius:7px}
::-webkit-scrollbar-thumb:hover{background:#45454b}

/* keyboard focus — independent of the hidden cursor */
:focus{outline:none}
a:focus-visible,button:focus-visible,.menu-toggle:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.skip-link{position:fixed;top:-100px;left:var(--pad);z-index:9999;background:var(--ink);color:var(--bg);
  padding:.7rem 1.1rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:top .3s var(--ease)}
.skip-link:focus{top:1rem}

/* mono label utility */
.label,.section-index,.meta,.menu__meta-block .label,.menu-toggle__txt,.site-header__loc{
  font-family:var(--sans);text-transform:uppercase;
}

/* --- custom cursor (instant) --- */
.cursor{position:fixed;top:0;left:0;z-index:9500;width:9px;height:9px;border-radius:50%;background:var(--ink);
  pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease);display:grid;place-items:center}
.cursor__label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .25s}
.cursor.is-media{width:92px;height:92px}
.cursor.is-media .cursor__label{opacity:1}
/* links & buttons: an enlarged open ring (transparent centre, so it never hides the target) */
.cursor.is-link{width:44px;height:44px;background:transparent;border:1px solid var(--ink)}
/* draggable drums (contact): a filled disc reading "Drag", shrinks while grabbing */
.cursor.is-drag{width:84px;height:84px}
.cursor.is-drag .cursor__label{opacity:1}
.cursor.is-drag.is-grabbing{width:58px;height:58px}
@media (pointer:coarse){ .cursor{display:none} }

/* --- film grain --- */
.grain{position:fixed;inset:-15%;z-index:9000;pointer-events:none;opacity:.05;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-2%,3%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,4%)}100%{transform:translate(0,0)}}

/* --- header --- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:7000;display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--pad);mix-blend-mode:difference}
.logo{font-family:var(--serif);font-weight:700;font-size:1.5rem;letter-spacing:.02em;color:#fff}
.logo span{display:inline-block;transition:transform .5s var(--ease)}
.logo:hover span{transform:rotate(-8deg) scale(1.08)}
.menu-toggle{display:flex;align-items:center;gap:.7rem;background:none;border:0;color:#fff}
.menu-toggle__txt{font-size:12px;letter-spacing:.2em}
.menu-toggle__icon{display:inline-flex;flex-direction:column;gap:5px;width:26px}
.menu-toggle__icon i{display:block;height:1px;width:100%;background:#fff;transition:transform .4s var(--ease),opacity .3s}
.menu-toggle.is-open .menu-toggle__icon i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.menu-toggle.is-open .menu-toggle__icon i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* --- fullscreen menu --- */
.menu{position:fixed;inset:0;z-index:6500;background:var(--bg-2);display:grid;grid-template-columns:1.4fr .8fr;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease) .9s;pointer-events:none}   /* closing: wait for the letters to fly out first */
.menu.is-open{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease) 0s;pointer-events:auto}   /* opening: background first, immediately */
.menu__col{padding:clamp(5rem,12vh,9rem) var(--pad) 3rem;display:flex;flex-direction:column;justify-content:center}
.menu__col--meta{border-left:1px solid var(--line-soft);justify-content:flex-end;gap:2.4rem}
.menu__list li{position:relative;overflow:hidden;border-top:1px solid var(--line-soft)}
.menu__list li:last-child{border-bottom:1px solid var(--line-soft)}
/* hover impulse — a soft circle blooms outward from the exact point the cursor entered */
.menu__list li::after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:1300px;height:1300px;
  margin:-650px 0 0 -650px;border-radius:50%;background:radial-gradient(circle,var(--surface) 0%,rgba(26,26,27,0) 68%);
  transform:scale(0);opacity:0;pointer-events:none;z-index:0;transition:transform .6s var(--ease),opacity .5s var(--ease)}
.menu__list li:hover::after{transform:scale(1);opacity:1}
.menu__list a{position:relative;z-index:1;display:flex;align-items:baseline;gap:1.2rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,5.5vw,4.2rem);line-height:1.32;padding-block:.2rem;color:var(--ink-dim);transition:color .4s}
.menu__list a::before{content:attr(data-i);font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);transform:translateY(-.7em);transition:color .4s}
/* the word slides as a whole on hover; its letters reveal/hide one-by-one (normalisboring) */
.menu__word{display:block;overflow:hidden;white-space:nowrap;transition:transform .55s var(--ease)}
.menu__char{display:inline-block;transform:translateY(105%);transition:transform .55s var(--ease)}
.menu.is-open .menu__char{transform:translateY(0)}
.menu__list li:hover a{color:#fff}
.menu__list li:hover .menu__word{transform:translateX(.55em)}
.menu__list li:hover a::before{color:var(--ink)}
.menu__meta-block{display:flex;flex-direction:column;gap:.4rem}
.menu__meta-block .label{font-size:11px;letter-spacing:.2em;color:var(--ink-faint);margin-bottom:.5rem}
.menu__meta-block a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.menu__quote{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink-dim);max-width:22ch}
@media (max-width:860px){ .menu{grid-template-columns:1fr} .menu__col--meta{display:none} .menu__col--nav{justify-content:center} }

/* --- shared --- */
.section-index{display:block;font-size:11px;letter-spacing:.22em;color:var(--ink-dim);margin-bottom:1.6rem}
.link-underline{position:relative;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.4rem;width:fit-content}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}
.reveal{opacity:0;transform:translateY(28px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-img{overflow:hidden}
.reveal-img img{transform:scale(1.16);transition:transform 1.4s var(--ease)}
.reveal-img.is-in img{transform:scale(1)}

/* body-text per-line wipe-up reveal — the .page-head__lead effect rolled out to prose/statement blocks.
   Each visual line sits in a one-line mask and slides up on scroll-in, staggered (--ld). Steady GPU
   layer (backface/will-change) so the antialiasing never flips. text-align is inherited → centered
   blocks stay centred. translateY in % is relative to the line's own height → font-size-independent. */
.tx-line{display:block;overflow:hidden}
.tx-line__in{display:block;transform:translate3d(0,110%,0);
  transition:transform .95s var(--ease-out);transition-delay:var(--ld,0s);
  backface-visibility:hidden;will-change:transform}
.tx-reveal.is-in .tx-line__in{transform:translate3d(0,0,0)}
/* keep the targets invisible until the splitter has wrapped them (.tx-reveal) → no plain-text flash
   before fonts.ready. Once split, :not(.tx-reveal) stops matching and they show (masked lines reveal). */
.qa__q:not(.tx-reveal),.qa__a p:not(.tx-reveal),.qa__list li:not(.tx-reveal),.pullquote blockquote:not(.tx-reveal),.soon__big:not(.tx-reveal),.soon__desc:not(.tx-reveal),.talk__desc:not(.tx-reveal),.price-card__d:not(.tx-reveal),.price-note:not(.tx-reveal){visibility:hidden}

/* ===================== INTRO GATE (no scroll / no chrome until the opening animation ends) ===================== */
/* while the intro plays the chrome (logo + menu) stays hidden and the page can't scroll */
body.is-loading{overflow:hidden}
body.is-loading .site-header{opacity:0;pointer-events:none}
/* the Studio lead fills the first screen until GSAP parks it (yPercent:100); hide it during the gate
   so its giant name can't flash before the script runs — visibility keeps its box (GSAP still measures). */
body.is-loading .opening .series--lead{visibility:hidden}
@media (prefers-reduced-motion:reduce){ body.is-loading{overflow:auto} body.is-loading .site-header{opacity:1} }

/* ===================== OPENING (mosaic intro → split) ===================== */
.opening{position:relative;height:100svh;width:100%;overflow:hidden;background:var(--bg)}

/* intro mosaic — tiles appear in scattered places, zoom in, then fade */
.mosaic{position:absolute;inset:0;z-index:2;pointer-events:none}
/* each tile keeps the photo's OWN aspect ratio (no crop): fixed width, height auto */
.tile{position:absolute;height:auto;opacity:0;filter:grayscale(1) contrast(1.05);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.tile img{width:100%;height:auto;display:block}
/* a few, scattered across the whole viewport, clearly different sizes */
.tile--1{width:12vw;top:13%;left:9%}
.tile--2{width:18vw;top:15%;left:55%}
.tile--3{width:9vw;top:9%;left:35%}
.tile--4{width:16vw;bottom:11%;left:16%}
.tile--5{width:11vw;bottom:15%;left:63%}

/* central author portrait (animated: appears centered → slides left) */
.opening__hero{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(240px,29vw,410px);aspect-ratio:3/4;overflow:hidden;opacity:0;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.opening__hero img{filter:grayscale(1) contrast(1.04)}

/* text block (appears on the right) */
.opening__text{position:absolute;top:50%;left:54%;right:var(--pad);transform:translateY(-50%);z-index:4;opacity:0}
.opening__hi{display:block;font-size:clamp(.8rem,1.5vw,1.05rem);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.9rem}
.opening__name{font-family:var(--serif);font-weight:500;line-height:.9;font-size:clamp(2.6rem,7vw,6.5rem);letter-spacing:-.02em;color:#fff}
.opening__name span{display:block}
.opening__role{display:block;margin-top:1.2rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.7rem);color:var(--ink-dim)}
.opening__sign{margin-top:1.7rem;font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1.8;color:var(--ink-faint)}

.opening__scroll{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);opacity:0}
.opening__scroll i{width:1px;height:42px;background:var(--ink-faint);overflow:hidden;position:relative}
.opening__scroll i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(-100%);animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}50%{transform:translateY(0)}100%{transform:translateY(100%)}}

@media (max-width:820px){
  .mosaic{display:none}
  .opening{display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:6rem var(--pad) 3rem}
  .opening__hero{position:relative;top:auto;left:auto;transform:none;opacity:1;width:min(66vw,290px);margin:0 auto}
  .opening__text{position:relative;top:auto;left:auto;right:auto;transform:none;opacity:1;text-align:center}
  .opening__scroll{display:none}
  .opening .series--lead{display:none}   /* the rising-series handoff is a desktop-scroll effect */
}

/* first series (Studio) RISES from below into the pinned first screen as the hero parts, and its
   photos UNROLL (top→down) during that rise — both driven (scrubbed) by the part timeline (main.js).
   Being below the fold at the start, the block (incl. its giant name) isn't on the first screen.
   (Hidden during the intro gate too — see body.is-loading rule — so the name can't flash pre-JS.) */
.opening .series--lead{position:absolute;inset:0;min-height:0;z-index:3;will-change:transform}
@media (prefers-reduced-motion:reduce){ .opening .series--lead{display:none} }

.opening .series--lead .series__main,
.opening .series--lead .series__sub{
  clip-path:inset(0 0 100% 0);                         /* closed until the rising block enters view */
  transition:clip-path 1.15s cubic-bezier(.22,1,.36,1)} /* time-based unroll — NOT scrubbed */
.opening .series--lead .series__main.is-in,
.opening .series--lead .series__sub.is-in{clip-path:inset(0 0 0 0)}

/* ===================== WORK — editorial series (adovasio-inspired) ===================== */
.work{position:relative;padding:clamp(2rem,6vh,5rem) var(--pad) clamp(6rem,12vh,10rem);background:var(--bg)}
.work__intro{margin-bottom:clamp(3rem,9vh,7rem)}
.work__title{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,8vw,7rem);line-height:.9;letter-spacing:-.02em}
.work__title em{color:var(--ink-dim)}

/* a series block: huge name behind, main photo, an overlapping sub photo */
.series{position:relative;min-height:108vh;display:flex;align-items:center;justify-content:center}
/* centred via flex (no transform) so the scroll-driven horizontal drift owns `transform` */
.series__name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;
  font-family:var(--serif);font-weight:500;font-size:clamp(4rem,16vw,15rem);line-height:.85;letter-spacing:-.03em;
  color:#fff;opacity:.16;pointer-events:none;white-space:nowrap;will-change:transform}
.series__name em{font-style:italic}

.series__main{position:relative;z-index:2;width:clamp(280px,33vw,500px);overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.6)}
/* natural proportions — never crop the subject: a portrait stays vertical, a wide frame stays wide */
.series figure img{height:auto;width:100%;object-fit:contain}
.series__main img{filter:grayscale(1) contrast(1.04)}
.series__main--color img{filter:none}                 /* the single accent */
.series__main figcaption{position:absolute;left:0;bottom:0;width:100%;padding:1rem;display:flex;justify-content:space-between;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.series__main:hover figcaption{opacity:1;transform:none}

.series__sub{position:absolute;z-index:3;width:clamp(150px,17vw,260px);overflow:hidden;
  right:14%;bottom:8%;box-shadow:0 40px 90px rgba(0,0,0,.65)}
.series__sub--wide{width:clamp(200px,26vw,380px)}   /* horizontal frames: wider, but kept small */
.series__sub img{filter:grayscale(1) contrast(1.04)}

/* main sits slightly left, sub bottom-right; mirrored on --right */
.series__main{margin-right:14vw}
.series--right .series__main{margin-right:0;margin-left:14vw}
.series--right .series__sub{right:auto;left:14%;bottom:10%}

/* appear from below on scroll */
.reveal-up{opacity:0;transform:translateY(90px) scale(1.04)}
.reveal-up.is-in{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.series__sub.reveal-up{transition-delay:.12s}

/* top-down reveal (normalisboring-style image entrance, but unveiled from the TOP edge downward) */
.reveal-down{clip-path:inset(0 0 100% 0);transform:translateY(-24px)}
.reveal-down.is-in{clip-path:inset(0 0 0 0);transform:none;transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease)}
.series__sub.reveal-down{transition-delay:.1s}

/* in-block parallax frame (normalisboring): the photo is larger than its window and pans
   top→down on scroll. The frame keeps the photo's NATURAL ratio (--ar) so there's no horizontal
   crop — only a gentle vertical zoom-pan; the whole photo is read across the scroll. */
.series figure.is-par{aspect-ratio:var(--ar);height:auto;opacity:1;
  clip-path:inset(0 0 100% 0);                          /* closed: unrolls from the TOP edge when in view */
  transition:clip-path 1.15s cubic-bezier(.22,1,.36,1)} /* time-based; reverses (re-rolls) when it leaves view */
.series figure.is-par.is-in{clip-path:inset(0 0 0 0)}
.series .is-par img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){ .series .is-par,.series .is-par.is-in{clip-path:none} .series .is-par img{transform:none!important} }

.work__all{display:block;margin:clamp(2rem,6vh,4rem) auto 0}

@media (max-width:760px){
  .series{min-height:auto;flex-direction:column;gap:1.5rem;margin-bottom:5rem}
  .series__main,.series--right .series__main{margin:0;width:min(78vw,360px)}
  .series__sub,.series--right .series__sub{position:relative;right:auto;left:auto;bottom:auto;width:min(50vw,220px);align-self:flex-end;margin-top:-3rem}
  .series__name{font-size:clamp(3rem,18vw,6rem);position:relative;inset:auto;display:block;text-align:center;transform:none;opacity:.1;margin-bottom:1rem;white-space:normal}
}

/* --- CTA --- */
.cta{position:relative;overflow:hidden;padding:clamp(6rem,16vh,12rem) var(--pad);border-top:1px solid var(--line-soft)}
/* entry wave — a ripple travels from the point the cursor touches the block toward the edges, drawn on
   a canvas in JS (a moving bright crest with a fading tail; the whole wave dims as it reaches the edges) */
.cta__wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.cta > *:not(.cta__wave),.price-card > *:not(.cta__wave){position:relative;z-index:1}   /* keep content above the wave */
.cta__link{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta__big{font-family:var(--serif);font-weight:500;font-size:clamp(3rem,11vw,9rem);line-height:.9;letter-spacing:-.02em}
.cta__big em{color:var(--ink-dim)}
.cta__link:hover .cta__big em{color:#fff}
.cta__arrow{font-size:clamp(2rem,6vw,5rem);transition:transform .5s var(--ease)}
.cta__link:hover .cta__arrow{transform:translateX(.4em)}

/* --- FOOTER --- */
.site-footer{border-top:1px solid var(--line-soft);overflow:hidden}
.marquee{padding:1.4rem 0;border-bottom:1px solid var(--line-soft);overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;flex:0 0 auto}
.marquee__group span{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,5vw,4rem);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.marquee__group .dot{font-style:normal;color:var(--ink-faint)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-footer__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;padding:clamp(2.5rem,6vh,4rem) var(--pad)}
.site-footer__block{display:flex;flex-direction:column;gap:.4rem;font-size:13px}
.site-footer__block .label{font-size:11px;letter-spacing:.2em;color:var(--ink-faint);margin-bottom:.5rem}
.site-footer__block a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer__block--end{text-align:right;align-items:flex-end}

/* ===================== INTERNAL PAGES — shared ===================== */
/* page wrapper clears the fixed header */
.page{padding-top:clamp(7rem,16vh,11rem)}

/* active nav item */
.menu__list a[aria-current="page"]{color:#fff}
.menu__list a[aria-current="page"]::before{color:var(--ink)}

/* --- page header (editorial intro for every inner page) --- */
.page-head{padding:0 var(--pad) clamp(3rem,9vh,7rem);max-width:var(--maxw);margin-inline:auto;position:relative}
.page-head__idx{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.4rem}
.page-head__title{font-family:var(--serif);font-weight:500;line-height:.9;letter-spacing:-.02em;
  font-size:clamp(3rem,12vw,11rem);color:#fff}
.page-head__title em{color:var(--ink-dim);font-style:italic}
.page-head__lead{margin-top:clamp(1.4rem,3vh,2.4rem);max-width:46ch;font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.7;color:var(--ink-dim)}
.page-head__meta{margin-top:2.2rem;display:flex;gap:2.4rem;flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.page-head__meta span{position:relative;padding-left:1.4rem}
.page-head__meta span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border:1px solid var(--ink-faint);transform:rotate(45deg)}

/* --- inner-page load entrance: every piece materialises into place; nothing flashes at its final
   spot first (initial states live here in CSS, the script only plays them in) --- */
.site-header > *{opacity:0;transform:translateY(-72px)}                       /* logo + menu button drop in from nothing */
.site-header.is-revealed > *{opacity:1;transform:none;
  transition:opacity 1.1s var(--ease-out),transform 1.25s var(--ease-out)}
.site-header.is-revealed .menu-toggle{transition-delay:.08s}

.page-head__idx{opacity:0;transform:translateY(-60px)}                        /* eyebrow drops in, same character as the chrome */
.page-head__idx.is-in{opacity:1;transform:none;
  transition:opacity 1.1s var(--ease-out),transform 1.2s var(--ease-out)}

/* title — letters rise out of a per-word mask (the menu's character reveal); <em> letters keep the dim tone */
.page-head__title .ph-word{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.2em .1em .36em;margin:-.2em -.1em -.36em}                          /* deep enough for Bodoni-italic descenders/apostrophes; negative margin keeps the .9 line-spacing */
.page-head__title .ph-char{display:inline-block;transform:translate3d(0,1.4em,0);transition:transform 1s var(--ease-out);
  backface-visibility:hidden;will-change:transform}   /* pin each letter on a steady GPU layer (3D transform held at rest too) so its antialiasing mode doesn't flip back to ClearType when the transition ends — that flip is the "sharpness snap" */
.page-head__title.is-in .ph-char{transform:translate3d(0,0,0)}
.page-head__title .ph-char--accent{color:var(--ink-dim);font-style:italic}

/* lead — lines wipe up out of a one-line mask (normalisboring / lasolana) */
.page-head__lead .ph-line{display:block;overflow:hidden}
.page-head__lead .ph-line__in{display:block;transform:translate3d(0,1.8em,0);
  transition:transform .95s var(--ease-out);transition-delay:var(--ld,0s);
  backface-visibility:hidden;will-change:transform}   /* same steady-layer trick → no antialiasing flip on settle */
.page-head__lead.is-in .ph-line__in{transform:translate3d(0,0,0)}

/* bullets rise up from below, out of nothing */
.page-head__meta span{opacity:0;transform:translateY(60px)}
.page-head__meta.is-in span{opacity:1;transform:none;
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.page-head__meta.is-in span:nth-child(2){transition-delay:.08s}
.page-head__meta.is-in span:nth-child(3){transition-delay:.16s}

/* before the script splits them, keep the plain title/lead from showing at the final spot */
body.is-entering .page-head__title,body.is-entering .page-head__lead{visibility:hidden}

/* --- editorial prose (Session / About) --- */
.prose{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad)}
.qa{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,6vw,7rem) clamp(2rem,5vw,5rem);
  padding-block:clamp(3rem,8vh,6rem);border-top:1px solid var(--line-soft)}
.qa:first-of-type{border-top:0}
.qa__q{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.01em;color:#fff}
.qa__q em{font-style:italic;color:var(--ink-dim)}
.qa__a{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.85;color:var(--ink-dim)}
.qa__a p+p{margin-top:1.1rem}
.qa__a strong{color:var(--ink);font-weight:400}
.qa__list{margin-top:1rem;display:flex;flex-direction:column;gap:.7rem}
.qa__list li{position:relative;padding-left:1.6rem;color:var(--ink-dim);line-height:1.6}
.qa__list li::before{content:"—";position:absolute;left:0;color:var(--ink-faint)}
@media (max-width:760px){ .qa{grid-template-columns:1fr;gap:1rem} }

/* pull-quote */
.pullquote{max-width:var(--maxw);margin:clamp(3rem,9vh,7rem) auto;padding:0 var(--pad);text-align:center}
.pullquote blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,4.4vw,3.4rem);line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:24ch;margin-inline:auto}
.pullquote cite{display:block;margin-top:1.6rem;font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* --- masonry gallery (philpenman) — natural proportions, no crop --- */
.gallery{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);
  column-count:3;column-gap:clamp(1rem,2vw,2rem)}
.g-item{break-inside:avoid;margin-bottom:clamp(1rem,2vw,2rem);position:relative;overflow:hidden}
.g-item img{width:100%;height:auto;object-fit:initial;filter:grayscale(1) contrast(1.04);transition:filter .6s var(--ease),transform 1.6s var(--ease)}
.g-item--color img{filter:none}
.g-item:hover img{transform:scale(1.035)}
.g-item figcaption{position:absolute;left:0;bottom:0;width:100%;padding:1rem 1.1rem;display:flex;justify-content:space-between;gap:1rem;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.g-item:hover figcaption{opacity:1;transform:none}
@media (max-width:980px){ .gallery{column-count:2} }
@media (max-width:560px){ .gallery{column-count:1} }

/* --- series lead — layered offset (peterlindbergh) --- */
.lead{position:relative;max-width:var(--maxw);margin:clamp(4rem,12vh,9rem) auto;padding:0 var(--pad);
  min-height:78vh;display:flex;align-items:center}
.lead__media{position:relative;z-index:1;width:clamp(280px,42vw,640px);aspect-ratio:4/5;overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.6)}
.lead__media img{filter:grayscale(1) contrast(1.04);height:118%;object-fit:cover}
.lead--color .lead__media img{filter:none}
.lead__caption{position:relative;z-index:3;margin-left:-7vw}
.lead--right{flex-direction:row-reverse}
.lead--right .lead__caption{margin-left:0;margin-right:-7vw;text-align:right}
.lead__idx{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1rem}
/* explicit ink + soft scrim instead of mix-blend — readable over the photo without
   a per-frame re-composite while the caption is scrubbed (keeps scroll smooth) */
.lead__title{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,8vw,7rem);line-height:.9;letter-spacing:-.02em;color:#fff;
  position:relative;text-shadow:0 2px 40px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.35)}
.lead__title em{font-style:italic;color:var(--ink-dim)}
.lead__desc{margin-top:2rem;max-width:34ch;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.75;color:var(--ink-dim)}
.lead--right .lead__desc{margin-left:auto}
.lead__count{margin-top:1.4rem;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* lead entrance: the photo unrolls BOTTOM→UP (mirror of the home series rolls), the caption slides in
   from the right one element at a time; reversible (re-rolls / slides back out when it leaves view) */
.lead__media{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.22,1,.36,1)}   /* closed at the bottom; unrolls upward when in view */
.lead.is-in .lead__media{clip-path:inset(0 0 0 0)}
.lead__caption > *{opacity:0;transform:translate3d(130px,0,0);
  transition:opacity 1s var(--ease-soft),transform 1.5s var(--ease-soft);
  backface-visibility:hidden;will-change:transform}   /* slow, smooth glide (no kick); opacity fades a touch faster than the slide so the right→left motion stays visible; steady GPU layer → no antialiasing flip on the big serif title */
.lead.is-in .lead__caption > *{opacity:1;transform:translate3d(0,0,0)}
.lead--right .lead__caption > *{transform:translate3d(-130px,0,0)}   /* mirrored block (photo on the right): caption slides in from the LEFT, toward the photo */
.lead__caption > *:nth-child(2){transition-delay:.16s}   /* clear steps: idx → title → desc → count */
.lead__caption > *:nth-child(3){transition-delay:.32s}
.lead__caption > *:nth-child(4){transition-delay:.48s}
@media (max-width:820px){
  .lead{flex-direction:column;align-items:flex-start;gap:1.6rem;min-height:auto;text-align:left}
  .lead--right{flex-direction:column}
  .lead__media{width:min(82vw,520px)}
  .lead__caption,.lead--right .lead__caption{margin:0;text-align:left}
  .lead--right .lead__desc{margin-left:0}
}

/* --- Contact — Let's Talk, two opposite columns (thomasmamfredas) --- */
.talk{position:relative;max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,8vh,6rem) var(--pad) 0;
  display:grid;grid-template-columns:1fr clamp(280px,28vw,420px);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.talk__cols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;height:1100px;overflow:hidden}
.talk-col{display:flex;flex-direction:column;gap:1.4rem;will-change:transform}
.talk-col figure{overflow:hidden;aspect-ratio:3/4;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.talk-col figure img{filter:grayscale(1) contrast(1.04)}
.talk-col figure.is-color img{filter:none}
.talk__cols{user-select:none}
.talk__cols img{-webkit-user-drag:none}
.talk__aside{position:relative;align-self:start;padding-bottom:clamp(3rem,8vh,6rem)}
.talk__hello{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.2rem}
.talk__desc{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.8;color:var(--ink-dim);margin-bottom:2.4rem}
.talk__contacts{display:flex;flex-direction:column;gap:1.4rem;border-top:1px solid var(--line-soft);padding-top:2rem}
.talk__contacts .label{font-size:11px;letter-spacing:.2em;color:var(--ink-faint)}
.talk__contacts a,.talk__contacts span{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--ink)}
.talk__contacts a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
@media (max-width:900px){ .talk{grid-template-columns:1fr} .talk__cols{height:auto;order:2;-webkit-mask-image:none;mask-image:none} .talk__aside{position:static;order:1} }
@media (max-width:520px){ .talk__cols{grid-template-columns:1fr} .talk__cols .talk-col:nth-child(2){display:none} }

/* --- the form --- */
.form{display:flex;flex-direction:column;gap:1.6rem}
.field{position:relative;display:flex;flex-direction:column}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:1rem;padding:.7rem 0;transition:border-color .4s}
.field textarea{resize:vertical;min-height:5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.form__submit{align-self:flex-start;margin-top:1rem;display:inline-flex;align-items:center;gap:1rem;background:none;border:0;
  font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);color:#fff;padding-bottom:.3rem}
.form__submit i{font-style:normal;transition:transform .5s var(--ease)}
.form__submit:hover i{transform:translateX(.4em)}

/* --- Exhibitions — list rows (philpenman idea) --- */
.exhibit{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad)}
.exhibit__row{display:grid;grid-template-columns:5rem 1.3fr 1fr auto;gap:clamp(1rem,3vw,3rem);align-items:center;
  padding-block:clamp(1.6rem,4vh,2.8rem);border-top:1px solid var(--line-soft);transition:background .5s var(--ease)}
.exhibit__row:last-child{border-bottom:1px solid var(--line-soft)}
.exhibit__row:hover{background:var(--bg-2)}
.exhibit__no{font-size:11px;letter-spacing:.14em;color:var(--ink-faint)}
.exhibit__name{font-family:var(--serif);font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.1;color:#fff}
.exhibit__place{font-size:13px;color:var(--ink-dim);line-height:1.5}
.exhibit__year{font-size:12px;letter-spacing:.16em;color:var(--ink-dim)}
@media (max-width:760px){ .exhibit__row{grid-template-columns:2.5rem 1fr;gap:.4rem 1rem} .exhibit__place,.exhibit__year{grid-column:2} }

/* --- "in development" placeholder (Video, future blocks) --- */
.soon{max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,9vh,7rem) var(--pad);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);text-align:center}
.soon__tag{display:inline-block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:100px;padding:.5rem 1.2rem;margin-bottom:2.2rem}
.soon__big{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,6vw,5rem);line-height:1.1;color:var(--ink-dim);max-width:18ch;margin-inline:auto}
.soon__desc{margin:2rem auto 0;max-width:48ch;font-size:1rem;line-height:1.8;color:var(--ink-dim)}

/* --- Prices --- */
.prices{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.price-card{position:relative;overflow:hidden;border:1px solid var(--line-soft);padding:clamp(2rem,4vw,3.2rem);display:flex;flex-direction:column;gap:1rem}
.price-card__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.price-card__v{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4.2rem);line-height:.95;color:#fff}
.price-card__v small{font-size:.4em;color:var(--ink-dim);font-style:italic}
.price-card__d{font-size:.95rem;line-height:1.7;color:var(--ink-dim)}
.price-note{max-width:var(--maxw);margin:clamp(2.5rem,6vh,4rem) auto 0;padding:0 var(--pad);font-size:.95rem;line-height:1.8;color:var(--ink-dim)}
.price-note em{color:var(--ink);font-style:italic}
@media (max-width:680px){ .prices{grid-template-columns:1fr} }

/* --- inner-page CTA strip (reuse .cta styling, add divider on top) --- */
.page .cta{margin-top:clamp(4rem,10vh,8rem)}

/* --- footer nav --- */
.site-footer__nav{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.site-footer__nav a{position:relative;font-size:13px;color:var(--ink-dim);transition:color .35s ease}
.site-footer__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.site-footer__nav a:hover{color:#fff;text-decoration:none}
.site-footer__nav a:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.site-footer__nav a,.site-footer__nav a::after{transition:none}}

/* --- LIGHTBOX (portfolio, per-series) --- */
.lightbox{position:fixed;inset:0;z-index:9400;display:grid;grid-template-rows:1fr auto;
  background:rgba(9,9,10,.97);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__count{position:absolute;top:1.5rem;left:var(--pad);z-index:3;font-size:12px;letter-spacing:.18em;color:var(--ink-dim)}
.lightbox__close{position:absolute;top:1.25rem;right:var(--pad);z-index:3;display:flex;align-items:center;gap:.6rem;
  background:none;border:0;color:var(--ink);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.lightbox__close i{font-style:normal;font-size:1.1rem;transition:transform .4s var(--ease)}
.lightbox__close:hover i{transform:rotate(90deg)}
.lightbox__stage{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(4rem,8vh,6rem) clamp(4rem,8vw,7rem) 1rem;min-height:0}
.lightbox__stage img{max-width:min(90vw,1080px);max-height:72vh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 50px 130px rgba(0,0,0,.6);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.lightbox__stage.is-swapping img{opacity:0;transform:scale(.985)}
.lightbox__cap{position:absolute;left:50%;bottom:-.4rem;transform:translateX(-50%);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:none;border:0;color:var(--ink-dim);
  font-family:var(--serif);font-size:2.6rem;line-height:1;width:3.4rem;height:3.4rem;transition:color .3s,transform .4s var(--ease)}
.lightbox__nav:hover{color:#fff}
.lightbox__nav--prev{left:calc(var(--pad) - .6rem)}
.lightbox__nav--next{right:calc(var(--pad) - .6rem)}
.lightbox__nav--prev:hover{transform:translateY(-50%) translateX(-.25em)}
.lightbox__nav--next:hover{transform:translateY(-50%) translateX(.25em)}
.lightbox__thumbs{display:flex;gap:.6rem;justify-content:flex-start;align-items:center;
  padding:1rem var(--pad) 1.6rem;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.lightbox__thumbs::-webkit-scrollbar{display:none}
.lightbox__thumbs::after,.lightbox__thumbs::before{content:"";flex:1 0 auto} /* keep active thumb centerable */
.lb-thumb{flex:0 0 auto;width:60px;height:76px;overflow:hidden;border:0;padding:0;background:none;
  opacity:.38;transition:opacity .35s var(--ease)}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.7}
.lb-thumb.is-active{opacity:1;outline:1px solid var(--ink);outline-offset:2px}
@media (max-width:680px){
  .lightbox__stage{padding:4rem 3rem 1rem}
  .lightbox__stage img{max-height:60vh;max-width:88vw}
  .lightbox__nav{font-size:1.9rem;width:2.6rem}
  .lb-thumb{width:46px;height:58px}
  .lightbox__close span{display:none}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.reveal-up,.reveal-down{opacity:1;transform:none}.reveal-down{clip-path:none}.reveal-img img{transform:none}
  .site-header>*,.page-head__idx,.page-head__meta span{opacity:1;transform:none}
  body.is-entering .page-head__title,body.is-entering .page-head__lead{visibility:visible}
  .page-head__title .ph-char,.page-head__lead .ph-line__in{transform:none}
  .lead__media{clip-path:none}.lead__caption>*{opacity:1;transform:none}
  .tx-line__in{transform:none}
  .opening__hi,.opening__role,.meta{opacity:1}
  .opening__hero,.opening__text{opacity:1!important}
  .opening__name .line>span{transform:none}
  .talk-col{transform:none!important}
  .grain{display:none}     /* don't keep painting a frozen full-bleed noise layer */
}