/* ============================================================
   PANHAROTH KIM — living photographic archive
   Design system. The interface takes its weather from the photograph.
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* A display: rule in the stylesheet beats the user agent's [hidden] — which
   is why the request form stayed on screen underneath its own success state. */
[hidden]{display:none!important}
html,body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0}
img,picture,video,canvas{display:block;max-width:100%}
/* A <picture> is a box of its own. Where a container sets the height and the
   image is told to fill it, the percentage resolves against the picture — not
   the container — unless the picture is told to fill too. This is what left a
   letterbox under the portrait on the about page. */
.frame > picture,.observer__portrait > picture,.seq__full > picture,
.collhero > picture{display:block;width:100%;height:100%}
/* A place card stacks its photograph and its name in the same box, so the
   picture has to come out of the flow — as a block at 100% height it pushed
   the name straight out of the bottom of the card. */
.placecard > picture{position:absolute;inset:0;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

/* ---------- environment tokens ----------
   Every value below is replaced at runtime by the weather engine as the
   visitor moves between photographic environments. Defaults = the entrance. */
:root{
  --bg:#08090A; --bg2:#101113; --ink:#EFEBE2; --muted:#8A857B;
  --line:#1C1D1F; --accent:#C9954E;
  /* --accent is atmosphere and follows the photograph; --gold is the brand,
     and every action the visitor can take stays the same colour on every page. */
  --gold:#C9954E; --gold-ink:#141210;
  --ink-soft:color-mix(in oklab, var(--ink) 62%, transparent);
  --ink-faint:color-mix(in oklab, var(--ink) 26%, transparent);
  --mode:0; /* 0 dark, 1 light — used by JS */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --kh-serif:'Noto Serif Khmer',serif;
  --kh-sans:'Kantumruy Pro','Noto Sans Khmer',sans-serif;

  --pad:clamp(1.25rem,4vw,3.5rem);
  --measure:min(46ch,90vw);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-slow:cubic-bezier(.16,.84,.34,1);
  --t-env:2400ms; /* how long the world takes to change weather */

  --step--1:clamp(.75rem,.735rem + .09vw,.82rem);   /* 12px floor */
  --step-0:clamp(.875rem,.85rem + .15vw,.98rem);   /* 14px floor */
  --step-1:clamp(1.02rem,.95rem + .34vw,1.22rem);
  --step-2:clamp(1.5rem,1.28rem + 1.1vw,2.3rem);
  --step-3:clamp(2.1rem,1.6rem + 2.5vw,4rem);
  --step-4:clamp(2.8rem,1.7rem + 5.4vw,7rem);
  --step-5:clamp(3.4rem,1.6rem + 8.6vw,10.5rem);
}

html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color var(--t-env) var(--ease-slow), color var(--t-env) var(--ease-slow);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* film grain — the archive is a physical thing, not a screen */
body::after{
  content:''; position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.026; mix-blend-mode:overlay;
  background-image:var(--grain); background-size:220px 220px;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-2%,-3%)}
  33%{transform:translate(3%,-2%)} 50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,3%)} 83%{transform:translate(-3%,1%)}
}

/* ---------- typography ---------- */
.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
:lang(km) .serif,.km .serif{font-family:var(--kh-serif);font-weight:400;letter-spacing:0}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.018em}
html[lang='km'] h1,html[lang='km'] h2,html[lang='km'] h3{
  font-family:var(--kh-serif);font-weight:400;line-height:1.62;letter-spacing:0;
}
html[lang='km'] body{font-family:var(--kh-sans);line-height:1.95}
html[lang='km'] .label,html[lang='km'] .kicker{letter-spacing:.02em;line-height:1.9}

.label,.kicker{
  font-family:var(--sans); font-size:var(--step--1); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
html[lang='km'] .label,html[lang='km'] .kicker{
  font-family:var(--kh-sans);text-transform:none;font-size:var(--step-0);
}
.lead{font-family:var(--serif);font-size:var(--step-2);line-height:1.28;font-weight:300}
html[lang='km'] .lead{font-family:var(--kh-serif);line-height:1.72;font-size:var(--step-1)}
.body{max-width:var(--measure);color:var(--ink-soft);font-size:var(--step-1);line-height:1.72}
html[lang='km'] .body{line-height:2.05}

/* Khmer never gets squeezed into a Latin-shaped box */
[data-km]{display:none}
html[lang='km'] [data-en]{display:none}
html[lang='km'] [data-km]{display:block}
html[lang='km'] span[data-km],html[lang='km'] a[data-km]{display:inline}

/* ---------- navigation ---------- */
.nav::before{
  content:'';position:absolute;inset:-1px 0 auto 0;height:190%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in oklab,var(--bg) 72%,transparent),
                                        color-mix(in oklab,var(--bg) 26%,transparent) 52%, transparent);
  opacity:var(--navscrim,1);transition:opacity 900ms var(--ease);
}
.nav{
  position:fixed; inset:0 0 auto 0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.4vw,1.9rem) var(--pad);
  mix-blend-mode:normal; pointer-events:none;
  transition:opacity 800ms var(--ease), transform 800ms var(--ease);
}
.nav>*{pointer-events:auto}
.nav.is-hidden{opacity:0;transform:translateY(-8px);pointer-events:none}
.nav__name{
  font-family:var(--serif); font-size:var(--step-1); font-weight:300;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  color:var(--ink); white-space:nowrap;
  transition:color 320ms var(--ease);
}
@media (hover:hover){ .nav__name:hover{color:var(--gold)} }
.nav__name:focus-visible{color:var(--gold)}
.menu__brand{transition:color 320ms var(--ease)}
html[lang='km'] .nav__name{font-family:var(--kh-serif);text-transform:none;letter-spacing:0}
.nav__tools{display:flex;gap:clamp(.8rem,1.6vw,1.4rem);align-items:center}

.ctl{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:0;line-height:1;
  transition:color 500ms var(--ease),background-color 460ms var(--ease);
}
html[lang='km'] .ctl{text-transform:none;letter-spacing:.01em}
.ctl:hover{color:var(--gold)}
.ctl__dot{
  width:7px;height:7px;border-radius:50%;border:1px solid currentColor;
  transition:background-color 600ms var(--ease),box-shadow 600ms var(--ease);
}
.ctl[aria-pressed='true'] .ctl__dot{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 22%,transparent);
}
.ctl[aria-pressed='true']{color:var(--ink)}


/* ---------- contextual cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  transform:translate3d(-100px,-100px,0);will-change:transform;
  mix-blend-mode:difference;
}
.cursor__ring{
  width:9px;height:9px;border-radius:50%;border:1px solid #fff;
  transform:translate(-50%,-50%);
  transition:width 520ms var(--ease),height 520ms var(--ease),opacity 400ms var(--ease);
}
.cursor__label{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  opacity:0;transition:opacity 380ms var(--ease);white-space:nowrap;
}
html[lang='km'] .cursor__label{font-family:var(--kh-sans);letter-spacing:.01em;
  text-transform:none;font-size:13px}
.cursor.is-active .cursor__ring{width:74px;height:74px;opacity:.55}
.cursor.is-active .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- layout ---------- */
.wrap{padding-inline:var(--pad)}
main{position:relative;z-index:1}
.chapter{position:relative}
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:9999;padding:.6rem 1rem;
  background:var(--ink);color:var(--bg);transform:translateY(-160%);
  transition:transform 240ms var(--ease);border-radius:2px;
}
.skip:focus{transform:none}

/* ---------- the entrance ---------- */
.entrance{position:relative;height:100svh;min-height:560px;overflow:hidden}
.entrance__stage{position:absolute;inset:0}
.entrance__veil{
  position:absolute;inset:0;background:var(--bg);z-index:3;
  animation:veil 3400ms var(--ease-slow) forwards;
}
@keyframes veil{0%{opacity:1}55%{opacity:.55}100%{opacity:0}}
.entrance__grad{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(to bottom, color-mix(in oklab,var(--bg) 72%,transparent) 0%, transparent 34%, transparent 52%, color-mix(in oklab,var(--bg) 88%,transparent) 100%);
}
.entrance__type{
  position:absolute;inset:auto 0 0 0;z-index:6;
  padding:0 var(--pad) clamp(2rem,6vh,4.2rem);
  display:grid;gap:clamp(.5rem,1.2vh,1rem);justify-items:start;
  max-width:min(52rem,92vw);
}
.entrance__type .label{order:-1;margin-bottom:.2rem}
.entrance__name{
  font-size:clamp(1.9rem,4.4vw,4.1rem);line-height:1.02;font-weight:300;
  letter-spacing:.02em;text-transform:uppercase;
}
html[lang='km'] .entrance__name{text-transform:none;letter-spacing:0;line-height:1.42;font-size:clamp(1.6rem,3.6vw,3.2rem)}
/* The role sits over moving footage, so it cannot take its colour from the
   page's muted grey — on a bright frame it simply vanished. */
.entrance__role{
  color:color-mix(in oklab,#F6F3EC 88%,transparent);
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 20px rgba(0,0,0,.45);
}
.opener__type .entrance__motto{
  text-shadow:0 1px 4px rgba(0,0,0,.42),0 2px 26px rgba(0,0,0,.4);
}
.opener__type .entrance__name{text-shadow:0 2px 32px rgba(0,0,0,.42)}
.opener__type .enterlink{color:color-mix(in oklab,#F6F3EC 78%,transparent);
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.opener__type .enterlink__line{background:color-mix(in oklab,#F6F3EC 62%,transparent)}
@media (hover:hover){ .opener__type .enterlink:hover{color:var(--gold)} }
.entrance__motto{
  font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2.35rem);font-weight:300;
  line-height:1.24;max-width:24ch;color:color-mix(in oklab,var(--ink) 90%,transparent);
}
html[lang='km'] .entrance__motto{font-family:var(--kh-serif);line-height:1.7;font-size:var(--step-1);max-width:30ch}
.reveal{opacity:0;transform:translateY(14px);filter:blur(6px)}
.entrance .reveal{filter:blur(9px)}
.reveal.in{opacity:1;transform:none;filter:none;
  transition:opacity 1900ms var(--ease-slow),transform 1900ms var(--ease-slow),filter 1900ms var(--ease-slow)}

.enterlink{
  display:inline-flex;align-items:center;gap:.8rem;margin-top:.6rem;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
html[lang='km'] .enterlink{text-transform:none;letter-spacing:.02em;font-size:var(--step-0)}
.enterlink__line{
  display:block;width:clamp(34px,6vw,72px);height:1px;background:currentColor;
  transform-origin:left;transition:transform 800ms var(--ease);
}
.enterlink:hover{color:var(--gold)}
.enterlink:hover .enterlink__line{transform:scaleX(1.5);background:var(--gold)}

.scrollcue{
  position:absolute;right:var(--pad);bottom:clamp(2.6rem,7vh,5.5rem);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--muted);
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
}
html[lang='km'] .scrollcue{text-transform:none;letter-spacing:.02em}
.scrollcue__rail{width:1px;height:64px;background:currentColor;opacity:.3;position:relative;overflow:hidden}
.scrollcue__rail::after{
  content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--ink);animation:cue 3200ms var(--ease) infinite;
}
@keyframes cue{0%{top:-42%}70%,100%{top:100%}}

/* --- every WebGL stage: canvas above, photograph beneath as the fallback ---
   The <picture> is a real, complete photograph. If WebGL never starts, or
   motion is reduced, that is what the visitor sees — nothing is lost. */
.entrance__stage canvas,.living__stage canvas,.tofilm__stage canvas,.mapwrap canvas{
  position:absolute;inset:0;display:block;z-index:2;
  width:100%!important;height:100%!important;
}
.entrance__fallback,.living__img{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
}
.entrance__fallback img,.living__img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.is-still .entrance__stage canvas,.is-still canvas{display:none}

/* ---------- chapters ---------- */
.statement{
  min-height:78svh;display:grid;place-items:center;text-align:center;
  padding:clamp(6rem,16vh,12rem) var(--pad);
}
.statement__text{
  font-family:var(--serif);font-weight:300;font-size:var(--step-3);line-height:1.18;
  max-width:20ch;white-space:pre-line;
}
html[lang='km'] .statement__text{font-family:var(--kh-serif);line-height:1.68;font-size:var(--step-2);max-width:26ch}

.chapterhead{
  display:grid;gap:clamp(.7rem,1.6vh,1.2rem);padding:clamp(5rem,13vh,10rem) var(--pad) clamp(2rem,5vh,4rem);
  max-width:min(72rem,100%);
}
.chapterhead__title{font-size:var(--step-4);line-height:1}
html[lang='km'] .chapterhead__title{font-size:var(--step-3);line-height:1.42}
.chapterhead__sub{color:var(--muted);font-size:var(--step-0);letter-spacing:.08em;text-transform:uppercase}
html[lang='km'] .chapterhead__sub{text-transform:none;letter-spacing:.01em}

/* ---------- living photograph stage ---------- */
.living{position:relative;height:158svh}
.living--short{height:132svh}
.living__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.living__stage{position:absolute;inset:0}
.living__cap{
  position:absolute;left:var(--pad);bottom:clamp(1.6rem,5vh,3.4rem);z-index:5;
  display:grid;gap:.35rem;max-width:min(34ch,72vw);
}
.living__hint{
  position:absolute;right:var(--pad);bottom:clamp(1.6rem,5vh,3.4rem);z-index:5;
  color:rgba(246,243,236,.86);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 16px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
  opacity:0;transition:opacity 1600ms var(--ease);
}
html[lang='km'] .living__hint{text-transform:none;letter-spacing:.02em}
.living__hint.in{opacity:.8}

/* ---------- documentary sequence: people stay still ---------- */
.people{padding:clamp(4rem,12vh,9rem) 0}
.people__row{
  display:grid;gap:clamp(1.2rem,3vw,3rem);align-items:center;
  padding-inline:var(--pad);margin-bottom:clamp(4rem,12vh,10rem);
}
@media (min-width:820px){
  .people__row--a{grid-template-columns:1.15fr .85fr}
  .people__row--b{grid-template-columns:.72fr 1.28fr}
  .people__row--c{grid-template-columns:1fr}
}
.people__row--c{max-width:min(78rem,100%);margin-inline:auto}
/* the chapter already ends; the last row does not need to end it twice */
.people__row:last-child{margin-bottom:0}
.frame{position:relative;overflow:hidden;background:var(--bg2)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame--tall{aspect-ratio:3/4}
.frame--wide{aspect-ratio:16/10}
.frame--sq{aspect-ratio:1}
/* The archive does not crop photographs. Fixed ratios are used only where a
   grid genuinely needs them (place cards, print thumbnails); everywhere a
   photograph is being *looked at*, it keeps the shape it was made in. */
.frame--nat{aspect-ratio:auto;background:none}
.frame--nat img{width:100%;height:auto;object-fit:contain}
.seq__pair figure,.seq__solo figure{display:grid;gap:0}
.seq__pair .frame--nat img,.seq__solo .frame--nat img{max-height:86svh;width:100%;object-fit:contain}
.frame__cap{margin-top:.9rem;display:grid;gap:.25rem}
.cap__t{font-size:var(--step-0);color:var(--ink-soft)}
.cap__m{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang='km'] .cap__m{text-transform:none;letter-spacing:.01em}

/* generic scroll reveal for photographs */
.rise{opacity:0;transform:translateY(30px);clip-path:inset(6% 0 6% 0)}
.rise img{transform:scale(1.02);transform-origin:center}
.rise.in{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity 1500ms var(--ease-slow),transform 1700ms var(--ease-slow),clip-path 1700ms var(--ease-slow);
}
.rise.in img{transform:none;transition:transform 2200ms var(--ease-slow)}

/* ---------- still → film ---------- */
.tofilm{position:relative;height:220svh}
.tofilm__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.tofilm__stage{position:absolute;inset:0}
.tofilm__meta{
  position:absolute;left:var(--pad);bottom:clamp(1.6rem,5vh,3.4rem);z-index:5;
  display:grid;gap:.4rem;max-width:min(40ch,74vw);
}
.tofilm__state{
  font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.6rem;
}
html[lang='km'] .tofilm__state{text-transform:none;letter-spacing:.02em}
.tofilm__state b{font-weight:500;color:var(--accent)}
.tofilm__bar{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(.9rem,2.4vh,1.6rem);
  height:1px;background:color-mix(in oklab,var(--ink) 14%,transparent);z-index:5;
}
.tofilm__bar i{display:block;height:100%;background:var(--accent);width:0;transform-origin:left}

/* ---------- places invitation ---------- */
.invite{padding:clamp(5rem,14vh,11rem) var(--pad) clamp(4rem,10vh,8rem)}
.invite__grid{
  display:grid;gap:1px;
  grid-template-columns:repeat(2,1fr);
  margin-top:clamp(2rem,6vh,4rem);
}
@media (min-width:700px){ .invite__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .invite__grid{grid-template-columns:repeat(4,1fr)} }
/* the places page lists all thirteen; the homepage shows eight, curated */
.invite__grid--all{grid-template-columns:repeat(2,1fr)}
@media (min-width:1080px){ .invite__grid--all{grid-template-columns:repeat(4,1fr)} }
/* The hairline grid is drawn by the cards, not by the container, so a row
   that does not fill leaves nothing behind it. */
.placecard{
  position:relative;background:var(--bg);aspect-ratio:4/5;overflow:hidden;
  display:block;isolation:isolate;
  box-shadow:0 0 0 1px var(--line);
}
/* thirteen collections do not divide by four: the last one closes the page */
@media (min-width:1080px){
  .invite__grid--all .placecard:last-child:nth-child(4n+1){
    grid-column:1 / -1;aspect-ratio:24/9;
  }
}
@media (min-width:700px) and (max-width:1079px){
  .invite__grid--all .placecard:last-child:nth-child(odd){
    grid-column:1 / -1;aspect-ratio:24/9;
  }
}
@media (max-width:700px){ .placecard{aspect-ratio:1} }
.placecard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.76) brightness(.72);
  transform:scale(1.04);
  transition:transform 2400ms var(--ease-slow),filter 1600ms var(--ease),opacity 1200ms var(--ease);
}
.placecard:hover img,.placecard:focus-visible img{transform:scale(1.11);filter:saturate(1) brightness(.86)}
/* The name has to survive a bright photograph. The shade is bottom-weighted
   so the picture above it is untouched. */
.placecard__body{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;gap:.34rem;padding:clamp(1rem,2.4vw,1.7rem);
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.70) 24%,
    rgba(0,0,0,.32) 50%,transparent 76%);
  color:#FBF9F4;text-shadow:0 1px 3px rgba(0,0,0,.62),0 2px 20px rgba(0,0,0,.5);
}
.placecard__t{font-family:var(--serif);font-size:var(--step-2);line-height:1.02;font-weight:300;
  text-wrap:balance;
  transition:transform 700ms var(--ease)}
.placecard:hover .placecard__t,.placecard:focus-visible .placecard__t{transform:translateY(-3px)}
html[lang='km'] .placecard__t{font-family:var(--kh-serif);line-height:1.5}
.placecard__m{font-size:clamp(.7rem,.65rem + .18vw,.78rem);letter-spacing:.10em;
  text-transform:uppercase;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity 700ms var(--ease)}
.placecard:hover .placecard__m{opacity:1}
html[lang='km'] .placecard__m{text-transform:none;letter-spacing:.01em}

/* ---------- prints: a photograph becoming a print on a wall ----------
   The section runs one way. It opens on the photograph itself — no wall, no
   frame, nothing between you and it — and ends with that same photograph
   hung, lit and labelled. Each step is a threshold on scroll progress, so
   scrolling back up unwinds it and nothing is withdrawn on the way down. */
.printstage{position:relative;height:220svh}
.printstage__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-items:center;justify-content:center;
  grid-template-columns:minmax(0,auto) minmax(0,0ch);
  gap:0;
  padding-inline:var(--pad);
  transition:grid-template-columns 1400ms var(--ease-slow),gap 1400ms var(--ease-slow);
}
.printstage.is-told .printstage__pin{
  grid-template-columns:minmax(0,auto) minmax(0,27ch);
  gap:clamp(1.6rem,4vw,4.5rem);
}

/* --- the room: nothing at all until stage three --- */
.room{
  position:absolute;inset:0;z-index:0;opacity:0;
  transition:opacity 1500ms var(--ease-slow),background 1900ms var(--ease-slow);
  background:radial-gradient(150% 100% at 50% -10%, #2A251F 0%, #191510 46%, #0A0908 100%);
}
.printstage.is-wall .room{opacity:1}
.printstage.is-lit .room{
  background:radial-gradient(150% 100% at 50% -10%, #3D362C 0%, #241E16 46%, #0C0B09 100%);
}
.room__floor{
  position:absolute;inset:auto 0 0 0;height:31%;
  background:linear-gradient(to bottom,#141109 0%,#100E0A 30%,#1B1712 100%);
}
.room__floor::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,240,214,.18) 22%,
    rgba(255,240,214,.18) 78%,transparent);
}
/* --- the gallery light: it has to be felt --- */
.room__light{
  position:absolute;left:50%;top:-18%;width:min(88vw,1080px);height:96%;
  transform:translateX(-50%);pointer-events:none;opacity:0;
  transition:opacity 1800ms var(--ease-slow);
  background:
    radial-gradient(ellipse 52% 62% at 50% 2%, rgba(255,242,216,.50), transparent 68%),
    radial-gradient(ellipse 88% 96% at 50% 0%, rgba(255,238,206,.22), transparent 72%);
}
.printstage.is-lit .room__light{opacity:1}

/* --- the artwork: full photograph first, print second --- */
.artwork{
  position:relative;z-index:3;display:grid;place-items:center;
  transition:transform 1500ms var(--ease-slow);
}
.artwork__frame{
  position:relative;padding:0;background:transparent;box-shadow:none;
  transition:padding 1500ms var(--ease-slow),box-shadow 1500ms var(--ease-slow),
             background 1500ms var(--ease-slow);
}
.artwork__mat{
  padding:0;background:transparent;
  transition:padding 1500ms var(--ease-slow),background 1500ms var(--ease-slow);
}
.artwork img{
  display:block;max-height:80svh;width:auto;max-width:100%;
  transition:max-height 1500ms var(--ease-slow);
}
.printstage.is-framed .artwork img{max-height:56svh}
.printstage.is-framed .artwork__frame{
  padding:clamp(9px,1.2vw,17px);
  background:linear-gradient(150deg,#2A2722,#141210);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.92),0 4px 14px rgba(0,0,0,.55),
             0 0 0 1px rgba(255,240,214,.05);
}
.printstage.is-framed .artwork__mat{padding:clamp(11px,1.9vw,30px);background:#DFDBD1}
.printstage.is-lit .artwork__mat{background:#F2EEE4}

/* --- the label, last, and it stays --- */
.printinfo{
  position:relative;z-index:5;display:grid;gap:1rem;align-content:center;
  opacity:0;transform:translateX(16px);
  transition:opacity 1100ms var(--ease),transform 1300ms var(--ease-slow);
}
.printstage.is-told .printinfo{opacity:1;transform:none}
.printinfo dl{display:grid;gap:.55rem;margin:0}
.printinfo dt{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang='km'] .printinfo dt{text-transform:none;letter-spacing:.01em}
.printinfo dd{margin:0;font-size:var(--step-0);color:var(--ink-soft)}

/* ---- the same story on a phone, stacked and a little shorter ---- */
@media (max-width:900px){
  .printstage{height:200svh}
  .printstage__pin{
    grid-template-columns:1fr;grid-template-rows:auto 0fr;
    justify-content:stretch;align-content:center;gap:0;
    padding-block:clamp(2rem,6vh,3.4rem);
    transition:grid-template-rows 1400ms var(--ease-slow),gap 1400ms var(--ease-slow);
  }
  .printstage.is-told .printstage__pin{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1.6rem;
  }
  .artwork img{max-height:62svh}
  .printstage.is-framed .artwork img{max-height:46svh}
  .printinfo{min-height:0;overflow:hidden}
  .room__light{top:-10%;height:82%;width:124%}
}
@media (prefers-reduced-motion:reduce){
  .printstage{height:auto;background:#0A0908}
  .printstage__pin{position:relative;height:auto;min-height:80svh;padding-block:4rem}
  .room,.room__light,.printinfo{opacity:1!important;transform:none!important}
  .printstage__pin,.printstage.is-told .printstage__pin{grid-template-rows:auto auto}
  /* without the pinned height there is no room to have a floor in */
  .room__floor{display:none}
}

/* ---------- observer / about ---------- */
.observer{
  display:grid;gap:clamp(2rem,5vw,4rem);padding:clamp(5rem,14vh,11rem) var(--pad);
  align-items:end;
}
@media (min-width:900px){.observer{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}}
/* Both portraits of him are square. Forcing 4:5 on a square photograph cut
   his head off the top of it. */
.observer__portrait{overflow:hidden;background:var(--bg2);max-width:min(520px,100%)}
.observer__portrait > picture{display:block;width:100%}
.observer__portrait img{width:100%;height:auto;display:block}

/* ---------- footer / contact ---------- */
.foot{
  border-top:1px solid var(--line);margin-top:clamp(4rem,10vh,8rem);
  padding:clamp(3rem,8vh,6rem) var(--pad) clamp(2rem,5vh,3.5rem);
  display:grid;gap:clamp(2rem,5vw,4rem);
}
@media (min-width:820px){.foot{grid-template-columns:1.2fr .8fr}}
.foot__links{display:grid;gap:.55rem}
.foot__links a{color:var(--ink-soft);transition:color 400ms var(--ease);width:fit-content;
  border-bottom:1px solid transparent;padding-bottom:1px}
.foot__links a:hover{color:var(--gold);border-color:var(--gold)}
.foot__bottom{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:clamp(2rem,5vh,3.5rem);border-top:1px solid var(--line);
  font-size:var(--step--1);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
}
html[lang='km'] .foot__bottom{text-transform:none;letter-spacing:.01em}

/* ---------- archive grid ---------- */
.archivehead{padding:clamp(7rem,18vh,12rem) var(--pad) clamp(2rem,5vh,3.5rem);display:grid;gap:1rem}
.filters{
  display:flex;gap:.5rem;flex-wrap:wrap;padding:0 var(--pad) clamp(2rem,5vh,3rem);
}
.chip{
  border:1px solid var(--line);background:none;border-radius:100px;
  padding:.5rem 1rem;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:all 480ms var(--ease);
}
html[lang='km'] .chip{text-transform:none;letter-spacing:.01em}
.chip:hover,.chip:focus-visible{color:var(--gold);border-color:var(--gold)}
/* the active filter is stated, not shouted: gold type on a gold hairline */
.chip[aria-pressed='true']{color:var(--gold);border-color:var(--gold);
  background:color-mix(in oklab,var(--gold) 12%,transparent)}
.masonry{padding:0 var(--pad) clamp(5rem,12vh,9rem);columns:1;column-gap:clamp(.6rem,1.4vw,1.3rem)}
@media(min-width:640px){.masonry{columns:2}}
@media(min-width:1040px){.masonry{columns:3}}
@media(min-width:1560px){.masonry{columns:4}}
.tile{
  break-inside:avoid;margin-bottom:clamp(.6rem,1.4vw,1.3rem);position:relative;
  background:var(--bg2);cursor:pointer;display:block;width:100%;border:0;padding:0;
  overflow:hidden;
}
.tile img{width:100%;height:auto;display:block;transition:transform 2000ms var(--ease-slow),opacity 900ms var(--ease)}
.tile:hover img{transform:scale(1.035)}
.tile__meta{
  position:absolute;inset:auto 0 0 0;padding:.9rem 1rem;opacity:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  color:#F6F3EC;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;
  transition:opacity 700ms var(--ease);text-align:left;
}
html[lang='km'] .tile__meta{text-transform:none;letter-spacing:.01em}
.tile:hover .tile__meta,.tile:focus-visible .tile__meta{opacity:1}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:9200;background:rgba(6,6,7,.97);
  display:grid;grid-template-rows:1fr auto;opacity:0;pointer-events:none;
  transition:opacity 760ms var(--ease-slow);backdrop-filter:blur(14px);
}
.lb.is-open{opacity:1;pointer-events:auto}
/* The photograph must fit, whole, inside whatever room is left after the
   caption and the controls. --lb-ui is measured from the real bar at runtime;
   the clamp is the fallback if that measurement has not happened yet.
   object-fit alone is not enough here — the box itself has to be right. */
.lb{--lb-ui:7.5rem;--lb-pad-y:clamp(1.8rem,5vh,3.4rem);--lb-pad-x:clamp(1.4rem,5vw,5rem)}
.lb__img{
  display:grid;place-items:center;
  padding:var(--lb-pad-y) var(--lb-pad-x) 0;
  min-height:0;overflow:hidden;
}
.lb__img img{
  display:block;
  max-width:calc(100vw - var(--lb-pad-x) * 2);
  max-height:calc(100svh - var(--lb-ui) - var(--lb-pad-y) * 1.35);
  width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(.985);transition:opacity 900ms var(--ease-slow),transform 1100ms var(--ease-slow)}
.lb.is-ready .lb__img img{opacity:1;transform:none}
.lb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:clamp(1.2rem,3vh,2rem) clamp(1.4rem,4vw,3rem);color:#EDEAE3;
}
.lb__info{display:grid;gap:.25rem}
.lb__t{font-family:var(--serif);font-size:var(--step-1);font-weight:300}
html[lang='km'] .lb__t{font-family:var(--kh-serif)}
.lb__m{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:#8B857A}
html[lang='km'] .lb__m{text-transform:none;letter-spacing:.01em}
.lb__nav{display:flex;gap:.4rem}
.lb__btn{
  background:none;border:1px solid rgba(255,255,255,.16);color:#EDEAE3;cursor:pointer;
  padding:.6rem 1rem;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;
  transition:all 420ms var(--ease);
}
html[lang='km'] .lb__btn{text-transform:none;letter-spacing:.01em}
.lb__btn:hover{background:color-mix(in oklab,var(--gold) 14%,transparent);
  border-color:var(--gold);color:var(--gold)}

/* ---------- places map ----------
   The photograph, the name and the way in are one stacked block on the right.
   They used to be positioned independently, which is how a two-line title
   climbed into the picture and lost half of itself against the sky. */
.mapwrap{
  position:relative;height:100svh;min-height:620px;overflow:hidden;
  background:var(--mapbg,var(--bg));
  transition:background-color 1500ms var(--ease-slow);
}
.mapcanvas{position:absolute;inset:0;z-index:0}
.mapwrap canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.maphead{
  position:absolute;left:var(--pad);top:clamp(5.4rem,13vh,8rem);z-index:5;
  display:grid;gap:.8rem;max-width:min(34ch,52vw);pointer-events:none;
}
.mapside{
  position:absolute;right:var(--pad);bottom:clamp(2rem,6vh,4rem);z-index:5;
  width:clamp(320px,36vw,580px);max-width:calc(100vw - var(--pad) * 2);
  display:grid;gap:1.15rem;justify-items:end;text-align:right;
  pointer-events:none;
}
.mapthumb{
  position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
  opacity:0;clip-path:inset(0 0 100% 0);
  transform:translateY(18px) scale(.985);
  transition:opacity 620ms var(--ease-slow),transform 900ms var(--ease-slow),
             clip-path 900ms var(--ease-slow);
  box-shadow:0 40px 90px -26px rgba(0,0,0,.9);
}
.mapthumb.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.mapthumb img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 2600ms var(--ease-slow)}
.mapthumb.in img{transform:scale(1)}
.mapreadout{
  display:grid;gap:.45rem;justify-items:end;min-height:6.4rem;align-content:end;width:100%;
}
.mapreadout__t{
  font-family:var(--serif);font-size:clamp(1.75rem,3.1vw,3.1rem);line-height:1.02;font-weight:300;
  text-wrap:balance;max-width:16ch;
  text-shadow:0 1px 3px color-mix(in oklab,var(--bg) 70%,transparent),
              0 2px 26px color-mix(in oklab,var(--bg) 55%,transparent);
  opacity:0;transform:translateY(10px);transition:opacity 700ms var(--ease),transform 700ms var(--ease);
}
html[lang='km'] .mapreadout__t{font-family:var(--kh-serif);line-height:1.4;
  font-size:clamp(1.4rem,2.5vw,2.4rem);max-width:20ch}
.mapreadout.in .mapreadout__t{opacity:1;transform:none}
.mapreadout__m{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  opacity:0;transition:opacity 700ms var(--ease) 120ms}
html[lang='km'] .mapreadout__m{text-transform:none;letter-spacing:.01em}
.mapreadout.in .mapreadout__m{opacity:1}
.mapenter{opacity:0;pointer-events:none;transition:opacity 600ms var(--ease);justify-self:end}
.mapenter.in{opacity:1;pointer-events:auto}
.maplist{
  position:absolute;left:var(--pad);bottom:clamp(2rem,6vh,4rem);z-index:5;
  display:grid;gap:.1rem;max-height:46svh;padding-right:.6rem;
}
.maplist__i{
  background:none;border:0;text-align:left;cursor:pointer;padding:.34rem 0;
  color:var(--muted);font-size:var(--step-0);letter-spacing:.06em;text-transform:uppercase;
  transition:color 420ms var(--ease),transform 520ms var(--ease),opacity 620ms var(--ease);
}
html[lang='km'] .maplist__i{text-transform:none;letter-spacing:.01em}
.maplist__i:hover,.maplist__i.is-on{color:var(--gold);transform:translateX(6px)}

/* the whole section answers, not just the map rectangle */
.mapglow{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity 900ms var(--ease-slow);
  background:radial-gradient(circle 24vmax at var(--gx,50%) var(--gy,50%),
    color-mix(in oklab,var(--accent) 9%,transparent) 0%,
    color-mix(in oklab,var(--accent) 3%,transparent) 42%, transparent 72%);
}
.mapwrap.is-hot .mapglow{opacity:1}
.mapwrap .maphead,.mapwrap .mapnote,.mapwrap .maplist__i{
  transition:opacity 760ms var(--ease),color 420ms var(--ease),transform 640ms var(--ease);
}
.mapwrap.is-hot .maphead{opacity:.26;transform:translateY(-10px)}
.mapwrap.is-hot .maplist__i:not(.is-on){opacity:.26}
.mapwrap.is-hot .maplist__i.is-on{color:var(--gold);transform:translateX(10px)}
.mapwrap::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 62% 46%,transparent 34%,
    color-mix(in oklab,var(--bg) 62%,transparent) 100%);
  opacity:0;transition:opacity 1100ms var(--ease-slow);
}
.mapwrap.is-hot::after{opacity:1}

@media (max-width:900px){
  .mapwrap{height:auto;min-height:0;padding-bottom:1rem}
  .mapcanvas{position:relative;inset:auto;width:100%;height:52svh;min-height:300px;margin-bottom:.4rem}
  .maphead{position:static;max-width:none;padding:clamp(4.6rem,12vh,6rem) var(--pad) 1.2rem}
  .mapside{position:static;width:auto;justify-items:start;text-align:left;
    padding:0 var(--pad);gap:.9rem}
  .mapreadout{justify-items:start;min-height:0}
  .mapreadout__t{max-width:none}
  .mapenter{justify-self:start}
  .maplist{position:static;max-height:none;padding:1.4rem var(--pad) 2.4rem;
    grid-template-columns:repeat(2,1fr);gap:.15rem}
  .mapticks__y{display:none}
  .mapwrap.is-hot .maphead{opacity:1;transform:none}
}

.mapticks{position:absolute;inset:0;z-index:3;pointer-events:none}
.mapticks span{
  position:absolute;font-size:var(--step--1);letter-spacing:.16em;color:var(--muted);
  opacity:.42;font-variant-numeric:tabular-nums;
}
.mapticks__x{bottom:.7rem;transform:translateX(-50%)}
.mapticks__y{right:.7rem;transform:translateY(-50%)}
.mapnote{
  font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  opacity:.78;max-width:34ch;margin-top:.4rem;
}
html[lang='km'] .mapnote{text-transform:none;letter-spacing:.01em;font-size:var(--step-0)}
/* the instruction matches the input the visitor actually has */
.mapnote--tap{display:none}
@media (hover:none),(pointer:coarse){
  .mapnote--hover{display:none}
  .mapnote--tap{display:block}
}

/* ---------- collection page ---------- */
.collhero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.collhero img,.collhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the WebGL stage sits at z-index 2; everything the visitor has to read has
   to sit above it, which is why the hero title was invisible */
.collhero__grad{position:absolute;inset:0;z-index:3;
  background:linear-gradient(to bottom,rgba(6,7,9,.62),rgba(6,7,9,.16) 26%,transparent 44%,
    rgba(6,7,9,.44) 66%,rgba(6,7,9,.9) 100%)}
.collhero__type{position:absolute;inset:auto 0 0 0;z-index:4;
  padding:0 var(--pad) clamp(2.6rem,7vh,5rem);display:grid;gap:.7rem;
  max-width:min(46rem,92vw)}
/* ← Places: a way back that does not wait for the end of the page */
.collback{
  position:absolute;z-index:5;left:var(--pad);top:clamp(5.2rem,12vh,7.4rem);
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in oklab,#F2EFE9 74%,transparent);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
  transition:color 380ms var(--ease),gap 480ms var(--ease);
}
html[lang='km'] .collback{text-transform:none;letter-spacing:.02em;font-size:var(--step-0)}
.collback i{display:block;width:20px;height:1px;background:currentColor;position:relative;
  transition:width 520ms var(--ease)}
.collback i::before{content:'';position:absolute;left:0;top:-3px;width:7px;height:1px;
  background:currentColor;transform:rotate(-40deg);transform-origin:left center}
@media (hover:hover){ .collback:hover{color:var(--gold);gap:.85rem} .collback:hover i{width:28px} }
.collback:focus-visible{color:var(--gold)}
/* A hero title sits on a photograph, not on the page's palette. In a light
   environment the inherited ink turned it grey-on-grey over the fog. */
.collhero__t{font-size:var(--step-5);line-height:.92;text-transform:uppercase;letter-spacing:-.03em;
  color:#F7F4ED;text-shadow:0 1px 4px rgba(0,0,0,.4),0 3px 34px rgba(0,0,0,.5)}
html[lang='km'] .collhero__t{text-transform:none;letter-spacing:0;line-height:1.36;font-size:var(--step-4)}
.collhero__m{color:color-mix(in oklab,#F2EFE9 72%,transparent);letter-spacing:.14em;
  text-transform:uppercase;font-size:var(--step--1);text-shadow:0 1px 12px rgba(0,0,0,.55)}
html[lang='km'] .collhero__m{text-transform:none;letter-spacing:.01em;font-size:var(--step-0)}

.seq{padding:clamp(4rem,11vh,9rem) 0 0}
.seq__full{position:relative;width:100%;height:100svh;overflow:hidden}
.seq__full img{width:100%;height:100%;object-fit:cover}
.seq__pair{display:grid;gap:clamp(.9rem,1.6vw,1.3rem);padding:clamp(2rem,6vh,6rem) var(--pad)}
@media(min-width:820px){.seq__pair{grid-template-columns:1fr 1fr;align-items:center}
  .seq__pair--offset>*:last-child{transform:translateY(clamp(2rem,7vh,6rem))}}
.seq__solo{padding:clamp(2rem,7vh,7rem) var(--pad);display:grid;justify-items:center}
.seq__solo figure{max-width:min(78rem,100%)}
.seq__air{height:clamp(3rem,12vh,14rem)}
.seq__quote{
  padding:clamp(5rem,14vh,11rem) var(--pad);display:grid;justify-items:center;text-align:center;
}
.seq__quote p{font-family:var(--serif);font-weight:300;font-size:var(--step-2);max-width:28ch;line-height:1.3}
html[lang='km'] .seq__quote p{font-family:var(--kh-serif);line-height:1.72}

/* ---------- prints index ---------- */
.printgrid{
  display:grid;gap:clamp(2rem,5vw,4rem);padding:clamp(2rem,6vh,4rem) var(--pad) clamp(6rem,14vh,10rem);
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
}
.printcard{display:grid;gap:1rem;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.printcard__vis{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #211E1A, #0C0B09)}
.printcard__vis .mat{background:#EFEBE2;padding:clamp(8px,1.4vw,16px);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.8);transition:transform 1200ms var(--ease-slow)}
.printcard:hover .mat{transform:scale(1.04)}
.printcard__vis img{max-height:calc(100% - 2rem);max-width:100%;width:auto;display:block}

/* ---------- utility ---------- */
.stack{display:grid;gap:clamp(.6rem,1.6vh,1.1rem)}
.pad-y{padding-block:clamp(4rem,11vh,9rem)}
.center{display:grid;justify-items:center;text-align:center}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.wm{position:absolute;right:1rem;bottom:.85rem;z-index:3;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* mobile nav */

/* ---------- reduced motion: everything still, nothing lost ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important;scroll-behavior:auto!important;
  }
  body::after{animation:none;opacity:.02}
  .entrance__veil{display:none}
  .reveal,.rise{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .living,.living--short{height:auto}
  .living__pin{position:relative;height:auto;min-height:70svh}
  .tofilm{height:auto}
  .tofilm__pin{position:relative;height:auto;min-height:70svh}
  .scrollcue__rail::after{animation:none;top:0;height:100%}
}



/* the portrait: the one place where holding still IS the effect */
/* the pinned portrait is gone — 082 is a still now, and the empty 150svh
   box it left behind was a screen of nothing between two photographs */
}

/* ---------- the map: entering a place ----------
   One continuous move. The photograph you are already looking at is the thing
   that grows; the map recedes behind it rather than cutting away. */
.mapfly{
  position:fixed;z-index:9600;width:8px;height:8px;
  transform:translate(-50%,-50%);pointer-events:none;overflow:hidden;
  opacity:0;border-radius:50%;
  transition:width 900ms cubic-bezier(.6,.02,.2,1),height 900ms cubic-bezier(.6,.02,.2,1),
             opacity 380ms var(--ease),border-radius 900ms var(--ease);
  box-shadow:0 40px 90px -26px rgba(0,0,0,.9);
}
.mapfly--rect{transform:none;border-radius:0;opacity:1}
.mapfly img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);transition:transform 1300ms cubic-bezier(.6,.02,.2,1)}
.mapfly.is-open img{transform:scale(1)}
.mapfly__cap{
  position:absolute;inset:auto 0 0 0;padding:clamp(1rem,3vw,2.4rem);
  color:#F2EFE9;font-family:var(--serif);font-size:clamp(1.4rem,4vw,3rem);
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--ease) 520ms,transform 900ms var(--ease) 520ms;
}
html[lang='km'] .mapfly__cap{font-family:var(--kh-serif)}
.mapfly.is-open{
  width:100vw;height:100vh;left:50vw!important;top:50vh!important;
  opacity:1;border-radius:0;
  transition:width 1200ms cubic-bezier(.6,.02,.2,1),height 1200ms cubic-bezier(.6,.02,.2,1),
             left 1200ms cubic-bezier(.6,.02,.2,1),top 1200ms cubic-bezier(.6,.02,.2,1),
             opacity 260ms var(--ease),border-radius 700ms var(--ease);
}
.mapfly--rect.is-open{left:0!important;top:0!important;box-shadow:none;
  transition:width 1150ms cubic-bezier(.55,.04,.15,1),height 1150ms cubic-bezier(.55,.04,.15,1),
             left 1150ms cubic-bezier(.55,.04,.15,1),top 1150ms cubic-bezier(.55,.04,.15,1),
             box-shadow 900ms var(--ease)}
.mapfly.is-open .mapfly__cap{opacity:1;transform:none}

/* the section gives way underneath it */
.mapwrap.is-leaving .maphead,.mapwrap.is-leaving .maplist,
.mapwrap.is-leaving .mapreadout,.mapwrap.is-leaving .mapenter,
.mapwrap.is-leaving .mapticks,.mapwrap.is-leaving .mapglow{
  opacity:0!important;transition:opacity 300ms var(--ease)}
.mapwrap.is-leaving .mapthumb{opacity:0;transition:opacity 120ms linear}
.mapwrap.is-leaving canvas{
  opacity:.14;transform:scale(1.10);
  transition:opacity 900ms var(--ease-slow),transform 1200ms cubic-bezier(.6,.02,.2,1)}
.mapwrap.is-hot{cursor:pointer}
@media (prefers-reduced-motion:reduce){ .mapfly{display:none} }

/* ============================================================
   PRINTS — the photograph first, the room second
   ============================================================ */
.printgrid{
  display:grid;gap:clamp(2.2rem,5vw,4rem);
  padding:clamp(2rem,6vh,4rem) var(--pad) clamp(6rem,14vh,10rem);
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
}
.printcard{display:grid;gap:1rem;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.printcard__vis{position:relative;overflow:hidden;background:var(--bg2);display:block}
.printcard__vis img{width:100%;height:auto;display:block;
  transition:transform 2000ms var(--ease-slow),filter 900ms var(--ease)}
.printcard:hover .printcard__vis img,.printcard:focus-visible .printcard__vis img{transform:scale(1.03)}
.printcard__go{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.25rem;
  font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:color 420ms var(--ease);
}
html[lang='km'] .printcard__go{text-transform:none;letter-spacing:.02em;font-size:var(--step-0)}
.printcard__go i{display:block;width:26px;height:1px;background:currentColor;transform-origin:left;
  transition:transform 620ms var(--ease)}
.printcard:hover .printcard__go,.printcard:focus-visible .printcard__go{color:var(--gold)}
.printcard:hover .printcard__go i{transform:scaleX(1.7)}

/* ---- the full view ---- */
/* Both overlays are always dark, whatever weather the page behind them is in.
   Letting --gold follow a light environment here put dark type on a dark
   field on the one button that matters most. */
.pv,.rq{--gold:#C9954E;--gold-ink:#141210}
.pv{
  position:fixed;inset:0;z-index:9200;background:#050505;
  display:grid;grid-template-rows:1fr auto;opacity:0;pointer-events:none;
  transition:opacity 700ms var(--ease-slow);
}
.pv.is-open{opacity:1;pointer-events:auto}
.pv__stage{position:relative;display:grid;place-items:center;min-height:0;
  padding:clamp(2.4rem,7vh,5rem) clamp(2rem,6vw,6rem) 0}
/* top-right X: where a full-screen viewer is expected to have one */
.pv__x{
  position:absolute;z-index:20;top:max(1rem,env(safe-area-inset-top));
  right:max(1rem,env(safe-area-inset-right));
  width:44px;height:44px;border-radius:50%;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:#E7E3DA;isolation:isolate;
  transition:color 320ms var(--ease);
}
.pv__x::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.09) 58%,transparent 100%);
  opacity:0;transform:scale(.82);
  transition:opacity 340ms var(--ease),transform 460ms var(--ease-slow);
}
@media (hover:hover){ .pv__x:hover::before{opacity:1;transform:none} .pv__x:hover{color:var(--gold)} }
.pv__x:focus-visible{color:var(--gold);outline:2px solid var(--gold);outline-offset:3px}
.pv__x:focus-visible::before{opacity:1;transform:none}
.pv__x .xmark{width:19px;height:19px}
.pv__x .xmark i{background:currentColor}
.pv__bar{padding-inline:clamp(2rem,6vw,6rem)}
.pv__room{position:absolute;inset:0;opacity:0;transition:opacity 1100ms var(--ease-slow);
  background:radial-gradient(120% 85% at 50% 0%, #262219 0%, #16130E 46%, #0A0908 100%)}
.pv__light{position:absolute;left:50%;top:-12%;width:min(80vw,940px);height:76%;
  transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%, rgba(255,240,210,.20), transparent 62%)}
.pv__floor{position:absolute;inset:auto 0 0 0;height:30%;
  background:linear-gradient(to bottom,#110F0B,#1B1712)}
.pv.in-space .pv__room{opacity:1}
.pv__art{position:relative;z-index:2;margin:0;display:grid;place-items:center;max-height:100%}
.pv__frame{padding:0;background:transparent;box-shadow:none;
  transition:padding 1100ms var(--ease-slow),background 1100ms var(--ease-slow),box-shadow 1100ms var(--ease-slow)}
.pv__mat{padding:0;background:transparent;
  transition:padding 1100ms var(--ease-slow),background 1100ms var(--ease-slow)}
.pv.in-space .pv__frame{padding:clamp(10px,1.3vw,18px);
  background:linear-gradient(150deg,#242119,#14120D);
  box-shadow:0 40px 80px -26px rgba(0,0,0,.92),0 6px 16px rgba(0,0,0,.6)}
.pv.in-space .pv__mat{padding:clamp(14px,2.2vw,38px);background:#EFEBE2}
.pv__art img{
  display:block;max-height:min(74svh,calc(100svh - 15rem));max-width:min(92vw,1500px);width:auto;height:auto;
  opacity:0;transform:scale(.985);
  transition:opacity 900ms var(--ease-slow),transform 1100ms var(--ease-slow),max-height 1100ms var(--ease-slow);
}
.pv.is-ready .pv__art img{opacity:1;transform:none}
.pv.in-space .pv__art img{max-height:56svh}
/* The label belongs to the photograph, so it is set in the same column and
   never wider than it. Left-flush against a centred picture read as two
   different layouts sharing a screen. */
.pv__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.6rem 2rem;
  flex-wrap:wrap;width:min(92vw,1500px);margin-inline:auto;
  padding:clamp(1.8rem,4vh,3rem) 0 clamp(1.6rem,4vh,2.6rem);color:#EDEAE3}
.pv__info{display:grid;gap:.45rem;flex:1 1 34ch;max-width:60ch;text-wrap:pretty}
.pv__t{font-family:var(--serif);font-size:var(--step-2);font-weight:300;line-height:1.1}
html[lang='km'] .pv__t{font-family:var(--kh-serif);line-height:1.5}
.pv__m{font-size:var(--step--1);letter-spacing:.13em;text-transform:uppercase;color:#A29A8C}
.pv__spec{font-size:var(--step--1);letter-spacing:.09em;color:#8B857C;text-wrap:pretty;
  font-variant-numeric:tabular-nums;margin-top:.15rem}
html[lang='km'] .pv__spec{letter-spacing:.01em}
html[lang='km'] .pv__m{text-transform:none;letter-spacing:.01em;font-size:var(--step-0)}
.pv__acts{display:flex;gap:.55rem;flex-wrap:wrap;flex:0 0 auto}
.pv__btn{
  background:none;border:1px solid rgba(255,255,255,.16);color:#EDEAE3;cursor:pointer;
  padding:.92rem 1.6rem;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  line-height:1;border-radius:2px;
  transition:background 420ms var(--ease),border-color 420ms var(--ease),
             color 420ms var(--ease),transform 420ms var(--ease);
  font-family:var(--sans);
}
.pv__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html[lang='km'] .pv__btn{text-transform:none;letter-spacing:.01em;font-family:var(--kh-sans);font-size:var(--step-0)}
.pv__btn:hover{background:color-mix(in oklab,var(--gold) 12%,transparent);
  border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.pv__btn--go{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:500}
/* the primary action flips to gold-on-dark rather than dimming into itself */
.pv__btn--go:hover{background:transparent;border-color:var(--gold);color:var(--gold);
  transform:translateY(-1px)}
.pv__btn--go:focus-visible{outline-color:var(--gold)}
.pv__btn[disabled]{opacity:.5;cursor:default}

/* ---- the request ---- */
.rq{
  position:fixed;inset:0;z-index:9400;background:rgba(4,4,5,.86);backdrop-filter:blur(16px);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;pointer-events:none;transition:opacity 520ms var(--ease-slow);
}
.rq.is-open{opacity:1;pointer-events:auto}
.rq__panel{
  width:min(1040px,100%);max-height:92svh;overflow:auto;background:#0E0E0F;
  border:1px solid rgba(255,255,255,.10);display:grid;
  transform:translateY(16px);transition:transform 620ms var(--ease-slow);
}
.rq.is-open .rq__panel{transform:none}
@media (min-width:860px){ .rq__panel{grid-template-columns:1.05fr 1fr;align-items:stretch} }
.rq__art{position:relative;background:#08080A;display:flex;flex-direction:column;
  justify-content:center;gap:1.1rem;min-height:220px;padding:clamp(1.2rem,2.6vw,2rem)}
.rq__art img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block;opacity:.95}
.rq__artmeta{
  position:static;padding:0;display:grid;gap:.24rem;color:#EDEAE3;background:none;
}
.rq__artmeta b{font-family:var(--serif);font-weight:300;font-size:var(--step-1)}
html[lang='km'] .rq__artmeta b{font-family:var(--kh-serif)}
.rq__artmeta span{font-size:var(--step--1);letter-spacing:.13em;text-transform:uppercase;color:#8E877B}
html[lang='km'] .rq__artmeta span{text-transform:none;letter-spacing:.01em}
.rq__form,.rq__done{padding:clamp(1.4rem,3.4vw,2.4rem);display:grid;gap:1rem;align-content:start;color:#EDEAE3}
.rq__h{font-family:var(--serif);font-weight:300;font-size:var(--step-2);margin:0 0 .3rem}
html[lang='km'] .rq__h{font-family:var(--kh-serif)}
.rq__f{display:grid;gap:.4rem}
.rq__f>span{font-size:var(--step--1);letter-spacing:.13em;text-transform:uppercase;color:#8E877B}
html[lang='km'] .rq__f>span{text-transform:none;letter-spacing:.01em;font-size:var(--step-0)}
.rq__f input,.rq__f select,.rq__f textarea{
  background:#141416;border:1px solid rgba(255,255,255,.14);color:#EDEAE3;
  padding:.72rem .8rem;font-family:var(--sans);font-size:var(--step-0);border-radius:0;
  transition:border-color 360ms var(--ease);width:100%;
}
html[lang='km'] .rq__f input,html[lang='km'] .rq__f select,html[lang='km'] .rq__f textarea{font-family:var(--kh-sans)}
.rq__f input:focus,.rq__f select:focus,.rq__f textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 16%,transparent)}
.rq__f input.is-bad{border-color:#C4614A}
.rq__f textarea{resize:vertical}
.rq__err{color:#E08E76;font-size:var(--step-0)}
.rq__acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.rq__done{place-content:center;text-align:left;gap:.9rem;min-height:260px}
/* the success state is a small ceremony, not a system message */
.rq__done::before{
  content:'';width:34px;height:34px;border-radius:50%;
  border:1px solid color-mix(in oklab,var(--gold) 60%,transparent);
  background:
    linear-gradient(to bottom right,transparent 46%,var(--gold) 46%,var(--gold) 54%,transparent 54%) no-repeat 50% 50%/13px 2px,
    radial-gradient(circle at 50% 50%, color-mix(in oklab,var(--gold) 16%,transparent), transparent 70%);
  margin-bottom:.2rem;
}
.rq__done h2{font-family:var(--serif);font-weight:300;font-size:var(--step-2);margin:0}
html[lang='km'] .rq__done h2{font-family:var(--kh-serif)}
.rq__done p{color:#A7A096;max-width:38ch;margin:0}
.rq__done button{justify-self:start;margin-top:.6rem}
@media (prefers-reduced-motion:reduce){
  .pv,.rq,.rq__panel,.pv__art img,.pv__room{transition-duration:.12s}
}

/* ============================================================
   NAVIGATION — brand, three controls, one menu
   ============================================================ */
.nav{align-items:center}
.nav__tools{display:flex;gap:clamp(.7rem,1.4vw,1.15rem);align-items:center}
/* Every control the visitor can act on answers in the same colour. Gold is
   an accent and stays one: it lights the icon, never the whole button. */
.ctl--icon{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;position:relative;
  display:grid;place-items:center;
  transition:color 300ms var(--ease),background 300ms var(--ease);
}
/* A soft wash under the icon, never a button around it. The underlay is its
   own layer behind the glyph so the glyph itself is untouched. */
.ctl--icon::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in oklab,var(--ink) 15%,transparent) 0%,
    color-mix(in oklab,var(--ink) 9%,transparent) 58%, transparent 100%);
  opacity:0;transform:scale(.82);
  transition:opacity 340ms var(--ease),transform 460ms var(--ease-slow);
}
.ctl--icon{isolation:isolate}
.ctl--icon>*{position:relative;z-index:1}
@media (hover:hover){
  .ctl--icon:hover::before{opacity:1;transform:none}
  .ctl--icon:hover{color:var(--gold)}
}
.ctl--icon:focus-visible{color:var(--gold)}
.ctl--icon:focus-visible::before{opacity:1;transform:none}
/* the close control inside the menu speaks the same language */
.menu__close{position:relative;isolation:isolate}
.menu__close::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in oklab,var(--ink) 15%,transparent) 0%,
    color-mix(in oklab,var(--ink) 9%,transparent) 58%, transparent 100%);
  opacity:0;transform:scale(.82);
  transition:opacity 340ms var(--ease),transform 460ms var(--ease-slow);
}
.menu__close:hover::before,.menu__close:focus-visible::before{opacity:1;transform:none}
.ico{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico__spk{fill:currentColor;stroke:none}
.ico__wave path{opacity:0;transform-origin:14px 12px;transition:opacity 420ms var(--ease)}
.ico__slash{opacity:1;transition:opacity 320ms var(--ease)}
[data-sound][aria-pressed='true'] .ico__slash{opacity:0}
[data-sound][aria-pressed='true'] .ico__wave path{opacity:.9}
[data-sound][aria-pressed='true'] .ico__wave path:nth-child(1){animation:wv 1.9s ease-in-out infinite}
[data-sound][aria-pressed='true'] .ico__wave path:nth-child(2){animation:wv 1.9s ease-in-out infinite .25s}
[data-sound][aria-pressed='true'] .ico__wave path:nth-child(3){animation:wv 1.9s ease-in-out infinite .5s}
@keyframes wv{0%,100%{opacity:.22}45%{opacity:.95}}
[data-sound][aria-pressed='true']{color:var(--gold)}

.flag{width:17px;height:17px;border-radius:50%;overflow:hidden;display:block;
  opacity:.86;transition:opacity 300ms var(--ease);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 20%,transparent)}
@media (hover:hover){ .ctl--icon:hover .flag{opacity:1} }
.flag svg{width:100%;height:100%;display:block}
/* language: the flag carries it, the code confirms it */
.nav__tools [data-langswitch]{width:auto;min-width:44px;height:44px;
  padding:0 .62rem;border-radius:100px;gap:.42rem;display:inline-flex;align-items:center}
.nav__tools [data-langswitch] .ctl__lang{white-space:nowrap}
/* the label is whichever language you are NOT in, so it carries its own
   script and its own tracking */
.ctl__lang{font-size:var(--step--1);letter-spacing:.1em;font-weight:500;line-height:1}
.ctl__lang[lang='km']{font-family:var(--kh-sans);letter-spacing:0;font-size:var(--step-0)}
html[lang='km'] .ctl__lang{letter-spacing:.01em}

.burger,.xmark{width:22px;height:14px;position:relative;display:block}
.burger i{position:absolute;left:0;right:0;height:1.7px;background:currentColor;border-radius:2px;
  transition:transform 460ms var(--ease),width 460ms var(--ease)}
.burger i:nth-child(1){top:2px}
.burger i:nth-child(2){bottom:2px;width:64%}
@media (hover:hover){ .ctl--icon:hover .burger i:nth-child(2){width:100%} }
.xmark{width:18px;height:18px}
.xmark i{position:absolute;top:50%;left:0;right:0;height:1.7px;background:currentColor;border-radius:2px}
.xmark i:nth-child(1){transform:rotate(45deg)}
.xmark i:nth-child(2){transform:rotate(-45deg)}

/* ---- the menu ---- */
.menu{
  position:fixed;inset:0;z-index:900;display:grid;
  background:var(--bg);
  opacity:0;pointer-events:none;
  transition:opacity 640ms var(--ease-slow);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;pointer-events:auto}
@media (min-width:960px){ .menu{grid-template-columns:1.05fr .95fr} }
.menu__inner{
  position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(1rem,2.4vw,1.9rem) var(--pad) clamp(1.6rem,4vh,2.6rem);
  min-height:0;
}
.menu__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.menu__brand{font-family:var(--serif);font-size:var(--step-1);font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;line-height:1}
html[lang='km'] .menu__brand{font-family:var(--kh-serif);text-transform:none;letter-spacing:0}
.menu__close{background:none;border:0;cursor:pointer;color:var(--ink-soft);
  width:44px;height:44px;margin-right:-.5rem;display:grid;place-items:center;border-radius:50%;
  transition:color 420ms var(--ease),background-color 420ms var(--ease)}
@media (hover:hover){ .menu__close:hover{color:var(--gold)} }
.menu__close:focus-visible{color:var(--gold)}

.menu__nav{display:grid;align-content:center;gap:clamp(.1rem,.8vh,.45rem);
  padding-block:clamp(1.4rem,5vh,4rem)}
.menu__link{
  display:block;position:relative;padding:clamp(.42rem,1vh,.65rem) 0;
  font-family:var(--serif);font-weight:300;line-height:1.06;
  font-size:clamp(2rem,5.2vw,3.9rem);letter-spacing:-.01em;
  color:color-mix(in oklab,var(--ink) 55%,transparent);
  transition:color 520ms var(--ease),transform 700ms var(--ease-slow);
}
html[lang='km'] .menu__link{font-family:var(--kh-serif);line-height:1.42;
  font-size:clamp(1.5rem,3.8vw,2.8rem)}
.menu__link:hover,.menu__link:focus-visible,.menu__link[aria-current='page']{
  color:var(--gold);transform:translateX(clamp(6px,1vw,14px));
}
.menu__link::after{
  content:'';position:absolute;left:0;bottom:.28em;height:1px;width:0;
  background:var(--accent);transition:width 720ms var(--ease-slow);
}
.menu__link:hover::after,.menu__link:focus-visible::after,
.menu__link[aria-current='page']::after{width:2.2em;background:var(--gold)}

.menu__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(1rem,2.6vh,1.6rem)}
.menu__motto{font-family:var(--serif);font-size:var(--step-1);font-weight:300;
  color:var(--ink-soft);max-width:26ch;margin:0;line-height:1.35}
html[lang='km'] .menu__motto{font-family:var(--kh-serif);line-height:1.75}
.menu__tools{display:flex;gap:1.4rem;align-items:center}
.menu__tools .ctl{gap:.55rem}

/* the photograph beside the menu */
.menu__vis{position:relative;overflow:hidden;background:var(--bg2)}
.menu__vis img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity 1100ms var(--ease-slow),transform 2200ms var(--ease-slow);
}
.menu__vis img.is-on{opacity:1;transform:scale(1)}
.menu__vis::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0%,
               color-mix(in oklab,var(--bg) 78%,transparent) 16%,
               color-mix(in oklab,var(--bg) 30%,transparent) 40%,
               transparent 62%),
             linear-gradient(to top,color-mix(in oklab,var(--bg) 46%,transparent),transparent 48%);
}
@media (max-width:959px){ .menu__vis{display:none} }

/* staggered arrival */
.menu__head,.menu__link,.menu__foot{opacity:0;transform:translateY(14px)}
.menu.is-open .menu__head,.menu.is-open .menu__link,.menu.is-open .menu__foot{
  opacity:1;transform:none;
  transition:opacity 760ms var(--ease-slow),transform 900ms var(--ease-slow);
}
.menu.is-open .menu__head{transition-delay:60ms}
.menu.is-open .menu__link:nth-of-type(1){transition-delay:140ms}
.menu.is-open .menu__link:nth-of-type(2){transition-delay:200ms}
.menu.is-open .menu__link:nth-of-type(3){transition-delay:260ms}
.menu.is-open .menu__link:nth-of-type(4){transition-delay:320ms}
.menu.is-open .menu__link:nth-of-type(5){transition-delay:380ms}
.menu.is-open .menu__foot{transition-delay:440ms}

@media (prefers-reduced-motion:reduce){
  .menu,.menu__head,.menu__link,.menu__foot,.menu__vis img{transition-duration:.12s!important}
  .menu__head,.menu__link,.menu__foot{opacity:1;transform:none}
  .ico__wave path{animation:none!important}
}

/* ============================================================
   THE OPENING — his own footage, cut so the loop has no seam.
   A photograph that happens to be breathing.
   ============================================================ */
.opener{position:relative;height:100svh;min-height:540px;overflow:hidden;background:#07070A}
.opener__media{position:absolute;inset:0;z-index:1}
.opener__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* the film is shown as it was shot; the scale is only enough to keep the
     edges clean under object-fit */
  transform:scale(1.02);transform-origin:50% 54%;
  opacity:0;transition:opacity 2600ms var(--ease-slow);
}
.opener__video.is-on{opacity:1}
/* The film now runs through twelve shots, some of them full sunlight on green
   grass. The scrims are therefore heavier at both ends and still clear through
   the middle: the photograph is protected, only the type is. */
.opener__grad{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(6,7,9,.92) 0%, rgba(6,7,9,.68) 8%,
      rgba(6,7,9,.34) 17%, rgba(6,7,9,.10) 26%, transparent 36%),
    linear-gradient(to top, rgba(6,7,9,.94) 0%, rgba(6,7,9,.80) 12%,
      rgba(6,7,9,.50) 26%, rgba(6,7,9,.18) 40%, transparent 56%);
}
.opener__veil{
  position:absolute;inset:0;z-index:3;background:#07070A;
  animation:veil 2600ms var(--ease-slow) forwards;
}
.opener__type{
  position:absolute;inset:auto 0 0 0;z-index:4;
  padding:0 var(--pad) clamp(2.2rem,7vh,4.6rem);
  display:grid;gap:clamp(.55rem,1.3vh,1rem);justify-items:start;
  max-width:min(54rem,92vw);
}
.opener .scrollcue{z-index:4}
@media (max-width:700px){
  .opener{min-height:520px}
  .opener .scrollcue{display:none}
  /* on a phone the whole introduction has to live inside one screen: the name,
     the sentence and the way in. It was running off the bottom edge. */
  .opener__type{padding-bottom:clamp(2.4rem,5.5vh,3.4rem);gap:.5rem;max-width:100%}
  .opener__grad{background:
    linear-gradient(to bottom, rgba(6,7,9,.88) 0%, rgba(6,7,9,.50) 12%, transparent 30%),
    linear-gradient(to top, rgba(6,7,9,.94) 0%, rgba(6,7,9,.74) 20%, rgba(6,7,9,.30) 42%, transparent 62%)}
}

/* ---------- stills that hold the full frame ---------- */
.fullstill{position:relative;margin:0;background:var(--bg2);overflow:hidden}
/* a photograph held at full height, with nothing happening to it */
.heldstill{position:relative;margin:0;height:100svh;min-height:520px;overflow:hidden;background:var(--bg2)}
.heldstill > picture{display:block;width:100%;height:100%}
.heldstill__img,.heldstill__img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){ .heldstill{height:82svh;min-height:440px} }
.fullstill__img,.fullstill__img img{display:block;width:100%;height:auto}
.portrait{margin:clamp(1rem,4vh,3rem) 0 clamp(2.5rem,8vh,6rem)}
.portrait__frame{position:relative;margin:0;background:var(--bg2);overflow:hidden}
.portrait__img,.portrait__img img{display:block;width:100%;height:auto}
.fullstill .living__cap,.portrait__frame .living__cap,.heldstill .living__cap{
  position:absolute;left:var(--pad);bottom:clamp(1.2rem,4vh,2.4rem);z-index:3;
  display:grid;gap:.3rem;max-width:min(38ch,72vw);margin:0;
}

/* A caption sitting on a photograph gets its own small pool of shade —
   never a full-frame overlay. Enough to read, nothing more. */
.living__cap,.fullstill .living__cap,.portrait__frame .living__cap,.heldstill .living__cap{
  color:#F6F3EC;text-shadow:0 1px 18px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.55);
}
.living__cap .cap__m,.fullstill .cap__m,.portrait__frame .cap__m,.heldstill .cap__m{
  color:rgba(246,243,236,.82);
}
/* Over a bright photograph — the dry-season sandbanks — the caption keeps
   white type and brings its own shade with it. The shade is confined to the
   words: the photograph itself is never darkened. */
.living__cap--onlight,.living__cap--onlight .cap__t{color:#FFFDF8}
.living__cap--onlight .cap__m{color:rgba(255,253,248,.88)}
.living__cap--onlight{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.45)}
.living__cap--onlight::before{
  left:calc(var(--pad) * -1)!important;right:-4.5rem!important;
  top:-1.7rem!important;bottom:calc(clamp(1.2rem,4vh,2.4rem) * -1)!important;
  background:linear-gradient(105deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 42%,
    rgba(0,0,0,.16) 72%, transparent 100%)!important;
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(to top, #000 0%, #000 62%, transparent 100%);
}
.living__cap::before,.fullstill .living__cap::before,.portrait__frame .living__cap::before,
.heldstill .living__cap::before{
  content:'';position:absolute;left:calc(var(--pad) * -1);right:-3rem;
  top:-1.4rem;bottom:calc(clamp(1.2rem,4vh,2.4rem) * -1);z-index:-1;pointer-events:none;
  background:radial-gradient(130% 170% at 0% 100%, rgba(0,0,0,.74), rgba(0,0,0,.36) 48%, transparent 78%);
}


/* ---------- back to top ----------
   Present only once there is something to go back from, and never heavy. */
.totop{
  position:fixed;right:max(var(--pad), env(safe-area-inset-right));
  bottom:calc(clamp(1rem,3vh,1.6rem) + env(safe-area-inset-bottom));
  z-index:820;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:color-mix(in oklab,var(--bg) 78%,transparent);
  border:1px solid color-mix(in oklab,var(--ink) 16%,transparent);
  color:var(--ink-soft);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;
  transition:opacity 520ms var(--ease),transform 620ms var(--ease-slow),
             color 320ms var(--ease),border-color 320ms var(--ease);
}
.totop.in{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .totop:hover{color:var(--gold);border-color:var(--gold)} }
.totop:focus-visible{color:var(--gold);border-color:var(--gold)}
.totop:active{transform:scale(.94)}
/* on a wide screen the map and the print view own the lower corners */
body.is-locked .totop{opacity:0;pointer-events:none}


/* ---------- contact: moving texture under paper ----------
   The video is a ground, not a hero. Everything above it is set on cream and
   has to stay as readable as it is on a blank page. */
.contactpage{position:relative}
/* fixed, so the ground is the same one under the header, the page and the
   footer — an absolutely-positioned bed ended mid-page and seamed */
.paperbed{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.paperbed__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.36) contrast(.9) brightness(1.06);
  opacity:0;transition:opacity 2400ms var(--ease-slow);
}
.paperbed__v.is-on{opacity:1}
.paperbed__wash{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, color-mix(in oklab,var(--bg) 95%,transparent) 0%,
      color-mix(in oklab,var(--bg) 91%,transparent) 44%,
      color-mix(in oklab,var(--bg) 96%,transparent) 100%),
    radial-gradient(120% 80% at 18% 12%, rgba(255,255,255,.5), transparent 62%);
}
.contactpage__body{position:relative;z-index:1}
/* the page's own weather is 'paper'; the body colour has to get out of the
   way so the texture beneath is visible through it */
body:has(.contactpage){background:transparent}
body:has(.contactpage) .foot{background:transparent}
@media (hover:hover){ .contactpage a:hover{color:var(--gold)} }
@media (prefers-reduced-motion:reduce){ .paperbed__v{display:none} }
@media (max-width:700px){
  /* a phone gets the still: the texture is not worth the battery */
  .paperbed__v{display:none}
  .paperbed{background:url('../video/contact-bed-poster.jpg') center/cover no-repeat}
}
/* the gold on cream needs to be dark enough to read as ink, not as highlight */
[data-mode='light']{--gold:#8A6522}