/* ══════════════════════════════════════════════════════════════════════
   PL FURNISHING — "GRAIN UNDER LIGHT"

   Deliberately refuses the luxury-furniture default (warm near-black +
   gold + high-contrast serif) because that is the look every template
   and every AI reaches for. There is no serif anywhere in this system:
   the timber is the only ornament and the type stays out of its way.

   Palette is a cinema before the film starts — cool, not warm — with a
   single oxblood field used large and used once.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0A0B0D;
  --fg:#EDEDEA;
  --dim:#8A8D93;
  --line:rgba(237,237,234,.15);
  --panel:#101215;
  --flare:#C2D6E0;            /* projector light — replaces brass */
  --lacquer:#5E1F1A;          /* only ever a large flat field */
  --bar:#000;
  --on-bar:#EDEDEA;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  --gut:clamp(18px,4vw,64px);
  --letterbox:clamp(34px,6vh,58px);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#E4E3DE; --fg:#0E0F11; --dim:#5C5E63;
    --line:rgba(14,15,17,.18); --panel:#EDECE8;
    --flare:#2E4A57; --bar:#0E0F11;
  }
}
:root[data-theme="light"]{
  --bg:#E4E3DE; --fg:#0E0F11; --dim:#5C5E63;
  --line:rgba(14,15,17,.18); --panel:#EDECE8;
  --flare:#2E4A57; --bar:#0E0F11;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* `hidden` on one axis coerces the other to `auto`, making body a scroll
     container and destabilising the sticky work; `clip` contains without that */
  overflow-x:hidden;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:200}
.skip:focus{left:var(--gut);top:calc(var(--letterbox) + 8px);background:var(--fg);color:var(--bg);padding:10px 16px}

/* ── type ───────────────────────────────────────────────────────────── */
.title{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144,"wght" 460;
  letter-spacing:-.005em;line-height:1.04;margin:0;
  font-size:clamp(30px,5.6vw,80px);text-wrap:balance;
}
.title.sm{font-size:clamp(23px,3.1vw,40px)}
.title em{
  font-family:var(--mono);font-style:normal;font-variation-settings:normal;
  letter-spacing:.2em;text-transform:uppercase;opacity:.6;display:block;
  font-size:.16em;margin-bottom:1.5em;font-weight:400;
}
.tc{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.lede{font-size:clamp(16px,1.5vw,19px);max-width:46ch;color:var(--dim);margin:18px 0 0}

/* ── letterbox + chrome ─────────────────────────────────────────────── */
.bars{position:fixed;inset:0;z-index:60;pointer-events:none}
.bars i{position:absolute;left:0;right:0;height:var(--letterbox);background:var(--bar)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}

/* the chrome lives INSIDE the bar, so its contrast can never depend on
   whichever photograph happens to sit behind it */
.hud{position:fixed;left:0;right:0;top:0;z-index:61;height:var(--letterbox);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--gut);pointer-events:none;color:var(--on-bar)}
.hud>*{pointer-events:auto}
.mark{font-variation-settings:"wdth" 108,"wght" 600;text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;white-space:nowrap}
.hud nav{display:flex;gap:clamp(12px,2vw,28px);align-items:center}
.hud nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(237,237,234,.68);
  display:inline-flex;align-items:center;min-height:44px}  /* 44px touch target */
.hud nav a:hover,.hud nav a[aria-current]{color:var(--on-bar)}
.foot-bar{position:fixed;right:var(--gut);bottom:0;z-index:61;height:var(--letterbox);
  display:flex;align-items:center;gap:18px}
.foot-bar button,.foot-bar a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(237,237,234,.68);
  display:inline-flex;align-items:center;min-height:44px}  /* 44px touch target */
.foot-bar button:hover,.foot-bar a:hover{color:var(--on-bar)}
@media(max-width:720px){ .hud nav a.opt{display:none} }

/* ── shot: one full frame ───────────────────────────────────────────── */
.shot{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:calc(var(--letterbox) + 34px) var(--gut) calc(var(--letterbox) + 30px)}
.shot canvas,.shot .plate{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.shot .plate{filter:saturate(.94)}
.shot.lit{--fg:#F5F4F1;--dim:#CFCDC8;--line:rgba(255,255,255,.30);color:var(--fg)}
.shot.lit::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(6,7,9,.90) 0%,rgba(6,7,9,.56) 30%,rgba(6,7,9,0) 66%),
    linear-gradient(to bottom,rgba(6,7,9,.62) 0%,rgba(6,7,9,0) 26%)}
.shot.lit .btn{background:#F5F4F1;color:#0A0B0D}
.slug{display:flex;gap:16px;align-items:baseline;margin-bottom:auto;flex-wrap:wrap}
.cap{max-width:min(760px,94%)}

/* cuts, not dissolves */
.cut{opacity:0;transform:translateY(14px)}
.cut.on{opacity:1;transform:none;transition:opacity .01s linear,transform .55s var(--ease)}
@media(prefers-reduced-motion:reduce){ .cut,.cut.on{opacity:1;transform:none;transition:none} }
html:not(.js) .cut,html.js-failed .cut{opacity:1;transform:none}

/* ── spec chips: the client wants far less prose, so facts carry it ─── */
.chips{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border-top:1px solid var(--line)}
.chip{padding:13px clamp(12px,2.2vw,28px) 11px 0;margin-right:clamp(12px,2.2vw,28px);
  border-right:1px solid var(--line)}
.chip:last-child{border-right:0;margin-right:0}
.chip b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:4px}
.chip span{font-variation-settings:"wdth" 100,"wght" 500;
  font-size:clamp(14px,1.6vw,20px);font-variant-numeric:tabular-nums}

/* ── the one real colour, used big and once ─────────────────────────── */
.field{background:var(--lacquer);color:#F2E9E6}
.field .tc,.field .chip b{color:rgba(242,233,230,.64)}
.field .chip,.field .chips{border-color:rgba(242,233,230,.24)}
.field .lede{color:rgba(242,233,230,.78)}
.field .btn{background:#F2E9E6;color:#5E1F1A}

/* ── actions ────────────────────────────────────────────────────────── */
.act{display:flex;gap:10px;align-items:center;margin-top:26px;flex-wrap:wrap}
.btn{background:var(--fg);color:var(--bg);padding:15px 28px;font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn svg,.ghost svg{width:14px;height:14px;flex:none}
.ghost{border:1px solid var(--line);padding:14px 24px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:inline-flex;align-items:center;gap:9px}
.ghost:hover{color:var(--fg);border-color:var(--fg)}

/* ── sections ───────────────────────────────────────────────────────── */
.sec{padding:clamp(56px,10vh,124px) 0}
.wrap{padding:0 var(--gut);max-width:1560px;margin:0 auto}
.head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:clamp(26px,4vh,52px);flex-wrap:wrap}

/* ── catalogue grid ─────────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.card{display:flex;flex-direction:column;position:relative}
.card .ph{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/5}
.card .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.card:hover .ph img,.card:focus-within .ph img{transform:scale(1.03)}
.card .meta{display:flex;justify-content:space-between;gap:14px;padding-top:12px;
  align-items:flex-start;flex-wrap:nowrap}
.card .meta h3{flex:1 1 auto;min-width:0}
.card .meta .est,.card .meta .pr{flex:none;white-space:nowrap}
.card h3{margin:0;font-variation-settings:"wdth" 104,"wght" 500;font-size:16px;
  letter-spacing:.03em;text-transform:uppercase}
.card .pr{font-family:var(--mono);font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.card .sub{font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);padding-top:3px}
.card a.hit{position:absolute;inset:0;z-index:2}
.tagline{position:absolute;top:10px;left:10px;z-index:1;background:var(--bg);
  color:var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 8px}
/* concept badge: bespoke pieces shown as a render, labelled openly */
.concept{position:absolute;top:10px;right:10px;z-index:1;
  background:var(--flare,#b98b4e);color:#0A0B0D;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px}
.concept-line{color:var(--dim);font-size:12.5px;line-height:1.5;margin:12px 0 0;
  padding:10px 12px;border:1px solid var(--line);border-left:2px solid var(--flare,#b98b4e)}

/* ── atelier: process steps + workshop gallery ──────────────────────── */
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
@media(min-width:760px){ .steps{grid-template-columns:1fr 1fr;column-gap:52px} }
.steps li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  border-top:1px solid var(--line);padding:20px 0}
.steps .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--flare)}
.steps h3{margin:0 0 5px;font-variation-settings:"wdth" 100,"wght" 600;
  font-size:17px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--dim);font-size:14px;line-height:1.55}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}
.gallery .sub{padding-top:9px}
@media(max-width:720px){ .gallery{grid-template-columns:1fr 1fr;gap:10px} }
.cream-band{background:var(--panel);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* ── piece: reassurance + sticky mobile enquire bar ─────────────────── */
.assure{color:var(--dim);font-size:12.5px;line-height:1.5;margin:12px 0 0}
.enq-bar{display:none}
@media(max-width:720px){
  .enq-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:center;gap:12px;justify-content:space-between;
    background:var(--bg);border-top:1px solid var(--line);
    padding:9px max(var(--gut),env(safe-area-inset-left,0px))
            calc(9px + env(safe-area-inset-bottom,0px))
            max(var(--gut),env(safe-area-inset-right,0px))}
  .enq-info{display:flex;flex-direction:column;min-width:0}
  .enq-name{font-size:13px;font-variation-settings:"wdth" 100,"wght" 600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .enq-price{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.06em}
  .enq-bar .btn{flex:none;white-space:nowrap;padding:12px 18px}
  body:has(.enq-bar) .foot{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body:has(.enq-bar) .foot-bar{display:none}
}

/* ── filter row ─────────────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);color:var(--dim);
  display:inline-flex;align-items:center;min-height:44px}  /* 44px touch target */
.filters button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ── film strip ─────────────────────────────────────────────────────── */
.rail{display:flex;gap:2px;overflow-x:auto;padding:0 var(--gut) 4px;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y;                 /* never trap the vertical swipe */
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:none;width:clamp(210px,25vw,340px);scroll-snap-align:center}

/* ── piece page ─────────────────────────────────────────────────────── */
.pc{display:grid;gap:clamp(20px,3vw,54px);grid-template-columns:1.15fr .85fr;
  align-items:start}
@media(max-width:900px){ .pc{grid-template-columns:1fr} }
.pc .shots{display:flex;flex-direction:column;gap:2px}
.pc .shots img{width:100%;background:var(--panel)}
.pc aside{position:sticky;top:calc(var(--letterbox) + 26px)}
@media(max-width:900px){ .pc aside{position:static} }
.pc .why{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;
  color:var(--dim);max-width:44ch}
.pc .price{font-family:var(--mono);font-size:clamp(20px,2.4vw,30px);
  font-variant-numeric:tabular-nums;margin:14px 0 0}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:clamp(40px,7vh,80px) 0 calc(var(--letterbox) + 34px)}
.foot .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--fg)}

/* ── film grain, whole page ─────────────────────────────────────────── */
.grain{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.38;
  mix-blend-mode:overlay}
@media(max-width:860px){ .grain{display:none} }
@media(prefers-reduced-motion:reduce){ .grain{display:none} }

/* ── mobile ─────────────────────────────────────────────────────────── */
@media(max-width:720px){
  .title{letter-spacing:-.005em}
  .chip{padding-right:14px;margin-right:14px}
  .shot{min-height:92svh}
}
@media(max-height:480px){
  .shot{min-height:auto;padding-top:calc(var(--letterbox) + 18px)}
  .sec{padding:34px 0}
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLL-SCRUB HERO
   A single video pinned while a tall spacer scrolls past it; JS maps scroll
   position to the video's currentTime. All-keyframe encode = instant seek.
   ══════════════════════════════════════════════════════════════════════ */
.scrub{position:relative}                     /* tall spacer; height set inline */
.scrub-pin{position:sticky;top:0;height:100svh;height:var(--pinh,100svh);
  overflow:hidden;background:#000}
.scrub-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:auto;background:#000}
.scrub-pin::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(6,7,9,.86) 0%,rgba(6,7,9,.34) 34%,rgba(6,7,9,0) 62%),
    linear-gradient(to bottom,rgba(6,7,9,.60) 0%,rgba(6,7,9,0) 24%)}
/* ── static hero: the maker at his bench ─────────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;
  background:#0d0d0d;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:68% 50%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.55) 38%,rgba(8,8,8,.12) 66%,rgba(8,8,8,.32) 100%),
  linear-gradient(0deg,rgba(8,8,8,.74) 0%,rgba(8,8,8,0) 44%)}
.hero-cap{position:relative;z-index:2;color:#F5F4F1;--dim:#CFCDC8;
  padding:0 var(--gut) clamp(46px,9vh,104px)}
.hero-cap .lede{color:#CFCDC8;max-width:46ch}
.hero-cap .btn{background:#F5F4F1;color:#0A0B0D}
@media(max-width:720px){
  .hero-img{object-position:62% 50%}
  .hero-cap .act{flex-direction:column;align-items:stretch;gap:8px}
  .hero-cap .btn,.hero-cap .ghost{justify-content:center}
}

.scrub-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--gut) calc(var(--letterbox) + 40px);
  color:#F5F4F1;--dim:#CFCDC8;
  transition:opacity .3s linear,transform .3s var(--ease)}
.scrub-cap .lede{color:#CFCDC8;max-width:50ch}
.scrub-cap .btn{background:#F5F4F1;color:#0A0B0D}
.scrub-hint{position:absolute;left:50%;bottom:calc(var(--letterbox) + 14px);
  transform:translateX(-50%);z-index:2;color:rgba(245,244,241,.7);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.scrub-hint i{width:1px;height:26px;background:currentColor;display:block;
  animation:scrubline 1.8s var(--ease) infinite}
@keyframes scrubline{0%{transform:scaleY(.3);opacity:.3;transform-origin:top}
  50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);opacity:.3;transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){ .scrub-hint,.scrub-hint i{animation:none} }
/* no-JS / failed: don't trap the reader in a 500vh void */
html:not(.js) .scrub,html.js-failed .scrub{height:auto !important}
html:not(.js) .scrub-pin,html.js-failed .scrub-pin{position:static;height:82svh}

/* ── scroll-film chapter titles: rise and fade within their slice ─────── */
.scrub-chapters{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--gut) calc(var(--letterbox) + 40px);pointer-events:none}
.chapter{position:absolute;left:var(--gut);right:var(--gut);
  bottom:calc(var(--letterbox) + 40px);
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.chapter.on{opacity:1;transform:none}
.chapter .tc{color:rgba(245,244,241,.7);display:block;margin-bottom:12px}
.chapter h2{margin:0;color:#F5F4F1;
  font-variation-settings:"wdth" 112,"wght" 460;text-transform:uppercase;
  letter-spacing:.08em;line-height:1.04;font-size:clamp(22px,2.8vw,38px);
  text-wrap:balance;max-width:20ch}
@media(prefers-reduced-motion:reduce){
  .chapter{position:relative;left:0;right:0;bottom:0;opacity:1;transform:none;
    margin-bottom:22px}
}

/* ══════════════════════════════════════════════════════════════════════
   INVENTORY LEDGER — a fast, no-video price list
   ══════════════════════════════════════════════════════════════════════ */
.ledger{max-width:1080px;margin:0 auto}
.led-note{color:var(--dim);max-width:52ch;margin:14px 0 0;font-size:14px}
.led-group{margin-top:clamp(30px,5vh,60px)}
.led-group > .tc{display:block;margin-bottom:6px}
.led-row{display:grid;grid-template-columns:60px 1fr auto;gap:clamp(14px,2vw,26px);
  align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.led-group .led-row:last-child{border-bottom:1px solid var(--line)}
.led-thumb{width:60px;height:60px;object-fit:cover;background:var(--panel);
  filter:grayscale(1) contrast(1.05);transition:filter .4s linear}
.led-row:hover .led-thumb{filter:none}
.led-main h3{margin:0;font-variation-settings:"wdth" 104,"wght" 500;font-size:16px;
  letter-spacing:.02em;text-transform:uppercase}
.led-main a:hover h3{color:var(--flare)}
.led-sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-top:4px;
  display:flex;gap:10px;flex-wrap:wrap}
.led-right{display:flex;align-items:center;gap:clamp(14px,2vw,26px);justify-self:end}
.led-price{font-family:var(--mono);font-size:clamp(15px,1.7vw,19px);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.led-enq{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  padding:9px 13px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.led-enq:hover{color:var(--fg);border-color:var(--fg)}
.led-enq svg{width:13px;height:13px}
@media(max-width:640px){
  .led-row{grid-template-columns:48px 1fr;row-gap:12px}
  .led-thumb{width:48px;height:48px}
  .led-right{grid-column:1 / -1;justify-self:start;justify-content:space-between;width:100%}
}

/* ── mobile chrome + film fixes ──────────────────────────────────────── */
@media(max-width:720px){
  /* wordmark shrinks so it never crowds the one remaining nav link */
  .mark{font-size:11px;letter-spacing:.14em}
  .hud nav{gap:0}
  /* the scroll hint collided with the hero buttons on small screens */
  .scrub-hint{display:none}
  /* keep the film subject centred when cover-cropping a wide clip to portrait */
  .scrub-vid{object-position:50% 42%}
  /* hero actions stack full-width so two buttons never overlap */
  .scrub-cap .act{flex-direction:column;align-items:stretch;gap:8px}
  .scrub-cap .btn,.scrub-cap .ghost{justify-content:center}
}



/* ══════════════════════════════════════════════════════════════════════
   CATALOGUE — auto-drifting rails, room tiles, filterable grid
   ══════════════════════════════════════════════════════════════════════ */

/* ── marquee rail: drifts on its own, pure CSS so it works everywhere ── */
.mrail{position:relative;overflow:hidden;padding:2px 0}
.mrail::before,.mrail::after{content:'';position:absolute;top:0;bottom:0;width:clamp(30px,7vw,110px);
  z-index:2;pointer-events:none}
.mrail::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.mrail::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.mrail-track{display:flex;gap:clamp(10px,1.4vw,20px);width:max-content;
  animation:mdrift 64s linear infinite;will-change:transform}
.mrail.rev .mrail-track{animation-direction:reverse}
.mrail:hover .mrail-track,.mrail:focus-within .mrail-track{animation-play-state:paused}
@keyframes mdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mrail-track{animation:none}
  .mrail{overflow-x:auto;touch-action:pan-x pan-y;scrollbar-width:none}
  .mrail::-webkit-scrollbar{display:none}
}
.mcard{flex:none;width:clamp(190px,21vw,280px);position:relative}
.mcard .ph{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/5}
.mcard .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.mcard:hover .ph img{transform:scale(1.04)}
.mcard .meta{display:flex;flex-direction:column;gap:3px;padding-top:10px}
.mcard h3{margin:0;font-variation-settings:"wdth" 104,"wght" 500;font-size:13px;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.25}
.mcard .pr{font-family:var(--mono);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── room tiles ──────────────────────────────────────────────────────── */
.rooms{display:grid;gap:clamp(8px,1.2vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.rtile{position:relative;overflow:hidden;aspect-ratio:4/3;display:flex;
  align-items:flex-end;padding:clamp(14px,2vw,22px);border:0;text-align:left;width:100%}
.rtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease)}
.rtile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(6,7,9,.88) 0%,rgba(6,7,9,.25) 60%,rgba(6,7,9,.05) 100%)}
.rtile:hover img,.rtile:focus-visible img{transform:scale(1.05)}
.rtile .rname{color:#F5F4F1;font-variation-settings:"wdth" 108,"wght" 520;
  text-transform:uppercase;letter-spacing:.08em;font-size:clamp(15px,1.8vw,20px)}
.rtile .rcount{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  color:rgba(245,244,241,.72);margin-top:5px;text-transform:uppercase}
.rtile[aria-pressed="true"]{outline:2px solid var(--flare);outline-offset:-2px}

/* ── stock marker ────────────────────────────────────────────────────── */
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--flare);vertical-align:middle;margin-left:7px;opacity:.85}
.stock-note{color:var(--dim);font-size:13px;margin:10px 0 0;max-width:52ch}

/* ── catalogue grid additions ────────────────────────────────────────── */
.grid .card .est{font-family:var(--mono);font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cat-head{display:flex;align-items:baseline;gap:14px;margin:clamp(34px,5vh,60px) 0 18px;
  border-top:1px solid var(--line);padding-top:18px}
.cat-head h2{margin:0;font-variation-settings:"wdth" 108,"wght" 500;font-size:clamp(17px,2.2vw,26px);
  text-transform:uppercase;letter-spacing:.06em}
.cat-head .n{font-family:var(--mono);font-size:11px;color:var(--dim)}
.empty-note{color:var(--dim);font-size:14px;padding:22px 0}

/* ══════════════════════════════════════════════════════════════════════
   THE FILM, ON EVERY DEVICE

   Desktop scrubs a video (it can seek). Phones and tablets cannot seek
   video at all, so they scrub an image sequence instead — identical
   scroll-driven behaviour, just a different source. Touch also shows the
   frame LETTERBOXED at its true 16:9 rather than cover-cropped, so the
   composition matches what a desktop visitor sees instead of zooming in.
   ══════════════════════════════════════════════════════════════════════ */
.scrub-stage{position:absolute;inset:0;z-index:0}
.scrub-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seq-img{display:none}

@media (pointer:coarse), (max-width:900px){
  /* FULL BLEED. The portrait frame set is cropped 9:16 at build time, so the
     film fills the whole screen without the display-time crop throwing the
     composition away. Copy sits over it on a scrim, exactly as on desktop. */
  .scrub{height:560vh !important}        /* ~6 swipes through the lit film, not 9 */
  .scrub-pin{display:block;padding:0}
  .scrub-stage{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;background:#000}
  .scrub-vid{display:none}
  .seq-img{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 50%;background:#000}
  .scrub-pin::after{                     /* legibility for the copy over film */
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;display:block;
    background:
      linear-gradient(to top,rgba(6,7,9,.90) 0%,rgba(6,7,9,.52) 30%,rgba(6,7,9,0) 62%),
      linear-gradient(to bottom,rgba(6,7,9,.58) 0%,rgba(6,7,9,0) 22%)}
  .scrub-cap,.scrub-chapters{position:absolute;left:0;right:0;top:auto;z-index:2;
    bottom:calc(var(--letterbox) + 26px);padding:0 var(--gut);min-height:0;
    /* copy now sits over photography, so it takes the on-media palette —
       the default line colour all but disappears against the film */
    --fg:#F5F4F1;--dim:#D2D0CB;--line:rgba(255,255,255,.38);color:var(--fg)}
  .scrub-cap{transition:opacity .3s linear}
  .scrub-cap .btn{background:#F5F4F1;color:#0A0B0D}
  .scrub-cap .ghost{color:#F5F4F1;border-color:rgba(255,255,255,.42)}
  .chapter{position:absolute;left:var(--gut);right:var(--gut);bottom:0;top:auto}
  .chapter h2{font-size:clamp(20px,5vw,32px);max-width:20ch}
  .scrub-hint{display:none}
}

/* ── touch targets: footer links were 25px tall, under the 44px minimum ── */
@media(pointer:coarse),(max-width:720px){
  .foot .cols a{display:block;padding:10px 0;line-height:1.4}
  .foot .cols div{gap:0 !important}
  .skip:focus{padding:14px 18px}
}

/* ── no-JS / failed-JS: the story must still be readable ──────────────
   Chapters are opacity-0 until the engine reveals them on scroll. Without
   JS nothing reveals them, so stack them and show them all. */
html:not(.js) .scrub-chapters,html.js-failed .scrub-chapters{
  position:relative;left:auto;right:auto;bottom:auto;min-height:0;
  padding:24px var(--gut) 0}
html:not(.js) .chapter,html.js-failed .chapter{
  opacity:1;transform:none;position:relative;left:auto;right:auto;top:auto;bottom:auto;
  margin-bottom:18px}
html:not(.js) .scrub-stage,html.js-failed .scrub-stage{
  position:relative;inset:auto;width:100%;aspect-ratio:16/9}
html:not(.js) .seq-img,html.js-failed .seq-img{display:block;object-fit:cover}
html:not(.js) .scrub-vid,html.js-failed .scrub-vid{display:none}


/* ── short viewports: landscape phones and small handsets ──────────────
   The film + copy must both fit inside the pinned frame; anything past it
   is clipped by overflow:hidden and becomes unreachable. Shrink the frame
   and tighten the copy rather than letting the CTAs fall off. */
@media (pointer:coarse) and (max-height:660px),
       (max-width:900px) and (max-height:660px){
  .scrub-pin{--stageh:clamp(170px,38svh,56vw)}
  .scrub-cap .lede{margin-top:9px;font-size:14px;line-height:1.45}
  .scrub-cap .act{margin-top:13px;gap:7px}
  .scrub-cap .btn,.scrub-cap .ghost{padding:12px 20px}
}
@media (max-height:500px){
  .scrub-pin{--stageh:clamp(110px,30svh,34vw)}
  .scrub-cap .title{font-size:clamp(21px,4.4vw,29px)}
  .scrub-cap .lede{display:none}        /* landscape has no room for it */
  .scrub-cap .act{flex-direction:row;flex-wrap:wrap;margin-top:11px}
  .scrub-cap .btn,.scrub-cap .ghost{padding:10px 16px;font-size:11px}
  .chapter h2{font-size:clamp(19px,3.6vw,26px)}
}

/* ══════════════════════════════════════════════════════════════════════
   SAFE AREAS  (layout.md › Guides and safe areas)
   viewport-fit=cover draws under the Dynamic Island / notch and the home
   indicator. Without insets the nav hides under the Island and the theme
   control under the home indicator. The letterbox bars absorb those zones;
   the chrome and the film caption inset by the live safe-area values.
   ══════════════════════════════════════════════════════════════════════ */
.bars i:first-child{height:calc(var(--letterbox) + env(safe-area-inset-top,0px))}
.bars i:last-child {height:calc(var(--letterbox) + env(safe-area-inset-bottom,0px))}

.hud{height:calc(var(--letterbox) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  padding-left:max(var(--gut), env(safe-area-inset-left,0px));
  padding-right:max(var(--gut), env(safe-area-inset-right,0px))}

.foot-bar{bottom:0;height:calc(var(--letterbox) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  right:max(var(--gut), env(safe-area-inset-right,0px))}

/* the skip link, when focused, must also clear the Island */
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

@media (pointer:coarse), (max-width:900px){
  /* film caption clears the home indicator, and clears side notch in landscape */
  .scrub-cap,.scrub-chapters{
    bottom:calc(var(--letterbox) + 26px + env(safe-area-inset-bottom,0px));
    padding-left:max(var(--gut), env(safe-area-inset-left,0px));
    padding-right:max(var(--gut), env(safe-area-inset-right,0px))}
}

/* ══ modal: enquiry / commission form + event pop-up ═════════════════════ */
html.modal-lock, html.modal-lock body{ overflow:hidden }

.modal{ border:0; padding:0; margin:auto; background:transparent; color:var(--fg);
  width:100%; max-width:min(480px, calc(100vw - 28px)); max-height:calc(100dvh - 36px) }
.modal::backdrop{ background:rgba(6,7,9,.66); backdrop-filter:blur(3px) }
.modal[open]{ animation:modal-in .28s var(--ease) both }
@keyframes modal-in{ from{ opacity:0; transform:translateY(10px) scale(.985) } to{ opacity:1; transform:none } }

.modal-card{ position:relative; display:flex; flex-direction:column; gap:13px;
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:26px clamp(18px,4vw,30px) 24px; max-height:calc(100dvh - 36px);
  overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.5) }
.modal-x{ position:absolute; top:9px; right:11px; width:34px; height:34px; border:0;
  background:none; color:var(--dim); font-size:26px; line-height:1; cursor:pointer;
  border-radius:50%; transition:color .15s }
.modal-x:hover{ color:var(--fg) }
.modal-title{ margin:0; font-size:clamp(22px,5vw,27px); letter-spacing:-.01em;
  font-variation-settings:"wght" 600 }
.modal-sub{ margin:-5px 0 3px; color:var(--dim); font-size:13.5px }

.fld{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim) }
.fld input{ font-family:var(--sans); font-size:15px; letter-spacing:normal;
  text-transform:none; color:var(--fg); background:var(--panel);
  border:1px solid var(--line); border-radius:3px; padding:11px 12px; width:100%;
  transition:border-color .15s }
.fld input::placeholder{ color:color-mix(in srgb, var(--dim) 72%, transparent) }
.fld input:focus{ outline:none; border-color:var(--fg) }
.fld input.miss{ border-color:#c0564e; animation:miss .4s }
@keyframes miss{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

.seg{ display:flex; gap:4px; margin-top:2px; padding:3px;
  background:var(--panel); border:1px solid var(--line); border-radius:4px }
.seg-b{ flex:1; border:0; background:none; cursor:pointer; padding:9px 8px; border-radius:3px;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim); transition:background .15s,color .15s }
.seg-b.on{ background:var(--fg); color:var(--bg) }

.enq-pane{ display:flex; flex-direction:column; gap:12px }
.enq-pane[hidden]{ display:none }
.combo{ position:relative }
.combo-list{ position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px);
  list-style:none; margin:0; padding:4px; max-height:min(46vh, 340px); overflow-y:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 18px 40px rgba(0,0,0,.4) }
.combo-list li[role="option"]{ display:flex; align-items:center; gap:11px;
  padding:7px 9px; border-radius:3px; cursor:pointer }
.combo-list li[role="option"]:hover{ background:var(--panel) }
.co-thumb{ flex:none; width:42px; height:42px; object-fit:cover; border-radius:3px;
  background:var(--panel); border:1px solid var(--line) }
.co-n{ flex:1 1 auto; min-width:0; font-size:14px; line-height:1.25 }
.co-p{ flex:none; font-family:var(--mono); font-size:11px; color:var(--dim); white-space:nowrap }
.co-head{ position:sticky; top:-4px; padding:9px 9px 4px; background:var(--bg);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--dim) 80%, transparent); pointer-events:none }
.co-empty{ padding:12px 10px; font-size:13px; color:var(--dim); line-height:1.5 }

.file{ gap:7px }
.file-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim) }
.opt-tag{ color:color-mix(in srgb, var(--dim) 70%, transparent) }
.file-ui{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; cursor:pointer;
  max-width:100%; padding:9px 14px; font-size:13.5px; color:var(--fg);
  background:var(--panel); border:1px dashed var(--line); border-radius:3px }
.file-ui::before{ content:"＋"; color:var(--dim); font-size:15px }
.file-ui .fu-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.file-ui.has{ border-style:solid; border-color:var(--fg) }
.file-ui.has::before{ content:"✓"; color:var(--flare) }
.file-hint{ font-size:11.5px; line-height:1.5; color:var(--dim) }

.wa-go{ justify-content:center; margin-top:6px }
.modal-direct{ text-align:center; font-size:12.5px; color:var(--dim); text-decoration:none }
.modal-direct:hover{ color:var(--fg) }

.modal.event{ max-width:min(380px, calc(100vw - 28px)) }
.event-card{ gap:7px; text-align:center; padding-top:30px }
.event-kicker{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim) }
.event-line{ margin:0; font-size:clamp(24px,6vw,31px); letter-spacing:-.01em;
  font-variation-settings:"wght" 600 }
.event-sub{ margin:3px 0 7px; color:var(--dim); font-size:13.5px; line-height:1.55 }
.event-shot{ display:block; overflow:hidden; border:1px solid var(--line); border-radius:4px }
.event-shot img{ display:block; width:100%; height:auto }

@media (max-width:560px){
  .modal{ max-width:none; width:calc(100vw - 20px) }
  .fld-row{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){ .modal[open]{ animation:none } .fld input.miss{ animation:none } }

/* ── Atelier: "His story" (the film's seven lines, read here) ──────────── */
.story{ list-style:none; margin:0; padding:0 }
.story li{ display:grid; grid-template-columns:2.4em 1fr; gap:16px; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line) }
.story li:first-child{ border-top:0; padding-top:0 }
.story li .tc{ color:var(--dim) }
.story li p{ margin:0; font-size:clamp(18px,2.3vw,23px); line-height:1.34;
  font-variation-settings:"wght" 420; text-wrap:pretty }
@media (max-width:560px){ .story li{ grid-template-columns:1fr; gap:4px } }