/* ============================================================================
   WRENHURST — ONE LIGHT
   The visitor carries the light: a wide, soft pool of sunlight follows the
   cursor and gently illuminates whatever it crosses. Type stays quiet; the
   photography is monumental and zoomable. Cards keep each product's native
   orientation. Images fade in as they arrive.
   ============================================================================ */

/* ---- faces ---------------------------------------------------------------- */
@font-face{font-family:"Wrenhurst";src:url("font/Wrenhurst-Thin.woff2") format("woff2");font-weight:100;font-display:swap}
@font-face{font-family:"Wrenhurst";src:url("font/Wrenhurst-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Wrenhurst";src:url("font/Wrenhurst-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Wrenhurst";src:url("font/Wrenhurst-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Wrenhurst";src:url("font/Wrenhurst-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---- tokens --------------------------------------------------------------- */
:root{
  --bone:#FBF9F5;
  --ink:#2E2A24;
  --ink-soft:#4A443B;
  --muted:#8A8378;
  --rule:#E7E1D7;
  --rule-dark:#D8D0C2;
  --bronze:#8A6D4F;
  --card:#F2EEE7;
  --shadow:46,36,20;
  /* one voice: Wrenhurst carries display and text alike. `--serif` is kept as an
     alias so the display rules below read the same as they always did — there is
     no second family on the site. Wrenhurst draws no italic, so `font-style:italic`
     resolves to a synthetic oblique; that is deliberate. */
  --sans:"Wrenhurst","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --pad:clamp(20px,3.4vw,54px);
  --wrap:1760px;
  --e-out:cubic-bezier(.19,1,.22,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* ---- reset / ground -------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.has-cursor *{cursor:none!important}
body{
  background:var(--bone);
  color:var(--ink);
  font:300 14px/1.7 var(--sans);
  letter-spacing:.014em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit}
::selection{background:#EADFC8;color:var(--ink)}

/* ---- image arrival: everything fades in over its bone plate ----------------- */
html.js img:not(.nofx){opacity:0;transition:opacity 1s var(--e-io)}
html.js img.ld{opacity:1}

/* ---- type ------------------------------------------------------------------ */
/* display type is tracked NEGATIVE now: Wrenhurst sets wider than the old serif at
   the same size, so the loose .006em that suited Cormorant reads gappy on a sans.
   Weights are stated as 300 rather than 350 — Wrenhurst ships static cuts, so 350
   would silently round down to Light anyway; saying 300 keeps the file honest. */
.display{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.06}
.display i,.display em{font-style:italic;font-weight:400}
.eyebrow{font-family:var(--sans);font-weight:300;font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted)}
.fine{font-size:11.5px;line-height:1.85;color:var(--muted)}

/* ---- header ----------------------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;
  align-items:center;justify-content:space-between;gap:20px;
  padding:24px var(--pad);
  transition:transform .6s var(--e-out),background .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent}
.hdr.hide{transform:translateY(-110%)}
.hdr .brand{font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.5em}
.hdr nav{display:flex;gap:28px;align-items:center;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.hdr nav a,.hdr nav button{color:var(--muted);transition:color .3s;position:relative;padding:4px 0;
  font:inherit;letter-spacing:inherit;text-transform:inherit}
.hdr nav a:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out)}
.hdr nav a:hover,.hdr nav button:hover{color:var(--ink)}
.hdr nav a:hover:after{transform:scaleX(1);transform-origin:left}
.hdr.lit{background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--rule);padding-top:15px;padding-bottom:15px}
.hdr-over:not(.lit){color:#fff}
.hdr-over:not(.lit) .brand,.hdr-over:not(.lit) nav a,.hdr-over:not(.lit) nav button,
.hdr-over:not(.lit) .mm-open{color:#fff}
.hdr-over:not(.lit) nav a,.hdr-over:not(.lit) .mm-open{opacity:.85}
/* the menu trigger is a phone-only affordance; the desktop bar still carries the
   links themselves, so it never appears above 760px (see the phone block below) */
.mm-open{display:none;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);padding:4px 0}

/* ---- cursor: the carried light ----------------------------------------------
   A wide, soft pool of warm light rides with the pointer and swells over
   imagery, illuminating it. */
.cur{position:fixed;top:0;left:0;z-index:200;pointer-events:none}
.cur-dot{width:4px;height:4px;border-radius:50%;background:var(--ink);
  transform:translate(-50%,-50%);transition:opacity .3s}
.cur-halo{width:min(30vw,430px);height:min(30vw,430px);border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(255,243,212,.42),rgba(255,243,212,.22) 42%,
    rgba(255,243,212,.08) 66%,rgba(255,243,212,0) 82%);
  mix-blend-mode:soft-light;
  transition:width .7s var(--e-out),height .7s var(--e-out),opacity .5s}
html.cur-media .cur-halo{width:min(46vw,660px);height:min(46vw,660px)}
.cur-ring{width:80px;height:80px;border-radius:50%;border:1px solid rgba(46,42,36,.6);
  background:color-mix(in srgb,var(--bone) 55%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;text-indent:.3em;
  color:var(--ink);transform:translate(-50%,-50%) scale(0);
  transition:transform .45s var(--e-out)}
.cur-ring.on{transform:translate(-50%,-50%) scale(1)}
html.cur-hidden .cur-dot,html.cur-hidden .cur-halo{opacity:0}
/* over a room plate the light stays lit and the ring rides inside it; only the
   ink dot steps aside, so the ring reads clean instead of holding a pip */
html.cur-lit .cur-dot{opacity:0}

/* ---- washes / transitions --------------------------------------------------- */
.wash{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#FFFDF6,#FBF7EC);transition:opacity .5s var(--e-io)}
.wash.on{opacity:1;pointer-events:all}

/* ---- layout ----------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.chapter{padding-block:clamp(64px,8vh,116px)}
.chapter-hd{display:flex;align-items:baseline;gap:22px;margin-bottom:clamp(30px,4.5vh,56px)}
.chapter-hd .num{font-family:var(--serif);font-weight:300;font-size:13px;color:var(--bronze)}
.chapter-hd .rule{flex:0 0 clamp(34px,5vw,90px);height:1px;background:var(--rule-dark);
  align-self:center}
.chapter-hd h2{font-size:clamp(24px,2.4vw,42px)}
.chapter-hd .side{margin-left:auto;align-self:center}

/* ---- hero -------------------------------------------------------------------- */
/* exactly one screen: one gesture takes you off it, and the next plate lands flush */
.day{position:relative;height:100vh;height:100svh}
.day-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#EFEAE1}
.day-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);will-change:transform}
.day-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,24,16,.38),rgba(30,24,16,0) 26%,
             rgba(30,24,16,0) 60%,rgba(30,24,16,.4))}
.day-c{position:absolute;inset:auto 0 0 0;padding:0 var(--pad) 8vh;text-align:center;color:#fff}
.day-c .eyebrow{color:rgba(255,255,255,.85)}
.day-c h1{font-size:clamp(34px,4.4vw,72px);margin:16px 0 0;text-wrap:balance;
  text-shadow:0 2px 50px rgba(20,14,6,.4)}
.day-hint{position:absolute;right:var(--pad);bottom:6.5vh;color:#fff;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;opacity:.8;display:flex;gap:14px;align-items:center}
.day-hint:after{content:"";width:1px;height:40px;background:rgba(255,255,255,.7);
  animation:drip 2.2s var(--e-io) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- manifesto ----------------------------------------------------------------- */
.manifesto{max-width:820px;margin:0 auto;text-align:center}
.manifesto .lede{font-family:var(--serif);font-weight:300;letter-spacing:-.006em;
  font-size:clamp(19px,1.9vw,30px);line-height:1.42;color:var(--ink)}
.manifesto .lede .w{opacity:.13;transition:opacity .35s linear}
.manifesto .lede .w.on{opacity:1}
.stats{display:flex;justify-content:center;gap:clamp(36px,6vw,100px);
  margin-top:clamp(38px,5vh,64px)}
.stat{text-align:center}
.stat .n{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,44px);
  letter-spacing:-.012em;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{margin-top:10px}

/* ---- room portal: the next-room link at the foot of a room ------------------------ */
.portal{position:relative;flex:0 0 auto;width:clamp(280px,27vw,470px)}
.portal figure{position:relative;aspect-ratio:10/13.2;overflow:hidden;
  border-radius:999px 999px 0 0;background:var(--card)}
.portal img{position:absolute;inset:0;width:118%;max-width:none;height:100%;
  object-fit:cover;will-change:transform}
.portal figcaption{margin-top:15px;display:flex;align-items:baseline;gap:12px}
.portal .rn{font-family:var(--serif);font-size:12px;color:var(--bronze);min-width:24px}
.portal h3{font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.25vw,21px)}
.portal .ct{margin-left:auto;font-size:9px;letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase}
.portal figure img{transition:opacity 1s var(--e-io)}

/* ---- interlude: monumental light ---------------------------------------------------- */
.lux{position:relative;height:min(100vh,1040px);overflow:hidden}
.lux img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;
  will-change:transform}
.lux .line{position:absolute;inset:auto 0 clamp(40px,7vh,80px);text-align:center;
  padding:0 var(--pad)}
.lux .line p{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.7vw,26px);color:#fff;text-shadow:0 1px 36px rgba(20,14,6,.55)}
.lux .line .eyebrow{color:rgba(255,255,255,.8);margin-bottom:10px}
.lux .line.ink p{color:var(--ink-soft);text-shadow:none}
.lux .line.ink .eyebrow{color:var(--muted)}
.lux .line a{border-bottom:1px solid rgba(255,255,255,.5)}

/* ---- lux portrait panel: native 9:16 shown whole on desktop --------------------------- */
.lux.lux-p{height:auto;overflow:visible;display:flex;flex-direction:column;
  align-items:center;gap:24px;padding-block:clamp(40px,6vh,84px)}
.lux-p figure{height:min(86vh,880px);aspect-ratio:9/16;overflow:hidden;background:var(--card)}
.lux-p figure img{position:static;width:100%;height:100%;object-fit:cover}
.lux-p .line{position:static;padding:0;text-align:center;inset:auto}
.lux-p .line p{color:var(--ink-soft);text-shadow:none;font-size:clamp(14px,1.4vw,20px)}
.lux-p .line .eyebrow{color:var(--muted)}
@media(max-width:760px){.lux-p{padding-block:0}
  .lux-p figure{height:auto;width:100%;aspect-ratio:9/14}}

/* ---- rails ---------------------------------------------------------------------------- */
.rail{position:relative}
.rail-track{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:6px var(--pad) 30px;cursor:grab}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.grabbing{cursor:grabbing}
.rail-card{flex:0 0 auto;max-width:84vw}
.rail-card figure{background:var(--card);overflow:hidden;aspect-ratio:var(--a,.8);
  height:clamp(280px,26vw,420px)}
.rail-card img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e-out),opacity 1s var(--e-io)}
.rail-card:hover figure{box-shadow:0 26px 60px -26px rgba(var(--shadow),.3)}
.rail-card h3{font-weight:400;font-size:13.5px;margin:14px 0 3px;letter-spacing:.02em}
.rail-card .price{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rail-bar{margin:0 var(--pad);height:1px;background:var(--rule);position:relative}
.rail-bar i{position:absolute;top:-1px;left:0;height:3px;width:12%;background:var(--ink);
  border-radius:2px}

/* ---- product cards: native orientation ------------------------------------------------- */
.grid{display:grid;gap:clamp(30px,3.5vw,54px) clamp(16px,1.8vw,26px);
  grid-auto-flow:dense}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;display:block}
.card figure{background:var(--card);overflow:hidden;aspect-ratio:var(--a,.8)}
.card img{width:100%;height:100%;object-fit:cover;
  transition:opacity 1s var(--e-io)}
.card h3{font-weight:400;font-size:13.5px;margin:14px 0 3px}
.card .price{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card.wide{grid-column:span 2}

.card .tag{position:absolute;top:12px;left:12px;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;background:color-mix(in srgb,var(--bone) 80%,transparent);
  backdrop-filter:blur(6px);padding:6px 10px;color:var(--ink-soft)}

/* ---- justified grid: rows of mixed aspects, equal height per row ------------------------ */
.jgrid{display:flex;flex-direction:column;gap:clamp(34px,4vw,58px)}
.jrow{display:flex;gap:clamp(16px,1.8vw,26px);align-items:flex-start}
.jcard{flex:var(--a) 1 0;min-width:0;display:block;position:relative}
.jcard figure{background:var(--card);overflow:hidden;width:100%;aspect-ratio:var(--a)}
.jcard img{width:100%;height:100%;object-fit:cover;
  transition:opacity 1s var(--e-io)}
.jcard h3{font-weight:400;font-size:13.5px;margin:14px 0 3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.jcard .price{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.jpad{flex:var(--a) 1 0;min-width:0}
@media(max-width:760px){
  /* rows dissolve: every card flows into one continuous 2-up grid, so a short
     row can no longer leave a lone card stretched to an odd width */
  .jgrid{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;
    column-gap:clamp(16px,1.8vw,26px);row-gap:clamp(30px,5vw,42px);align-items:start}
  .jrow{display:contents}
  .jcard{grid-column:span 1}
  .jcard.w{grid-column:span 2}
  .jpad{display:none}
}

/* ---- index sheet: the house ledger — hairline catalog rows ------------------------------ */
.sheet{columns:3;column-gap:clamp(28px,3.2vw,48px)}
.sheet>section{break-inside:avoid;margin-bottom:clamp(24px,3vh,38px)}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:14.5px;margin-bottom:6px;
  padding-bottom:7px;border-bottom:1px solid var(--rule-dark);display:flex;
  justify-content:space-between;align-items:baseline}
.sheet h3 .rn{font-size:11px;color:var(--bronze)}
.sheet a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:6px 2px;border-bottom:1px solid var(--rule);font-size:12.5px;
  color:var(--ink-soft);transition:color .3s,padding .3s}
.sheet a:hover{color:var(--ink);padding-left:8px}
.sheet .pr{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11.5px}
@media(max-width:1060px){.sheet{columns:2}}
@media(max-width:760px){.sheet{columns:1}}

/* ---- buttons ----------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 34px;
  border:1px solid var(--ink);color:var(--ink);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-io),border-color .45s}
.btn:after{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e-out)}
.btn:hover{color:var(--bone)}
.btn:hover:after{transform:scaleY(1)}
.btn.light{border-color:rgba(255,255,255,.85);color:#fff}
.btn.light:after{background:#fff}
.btn.light:hover{color:var(--ink)}
.btn.wide{width:100%;justify-content:center}
.linkline{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:11px}
.linkline:after{content:"→";font-family:var(--serif);transition:transform .4s var(--e-out)}
.linkline:hover:after{transform:translateX(7px)}

/* ---- craft --------------------------------------------------------------------------------- */
.craft{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  overflow:hidden}
.craft>img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;
  will-change:transform}
.craft .veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(251,248,240,.96) 0%,rgba(251,248,240,.78) 36%,
             rgba(251,248,240,0) 64%)}
.craft .txt{position:relative;max-width:460px;margin-left:clamp(24px,7vw,120px);
  padding:110px 0}
.craft h2{font-size:clamp(26px,2.7vw,46px);margin:14px 0 20px}
.craft p{color:var(--ink-soft);margin-bottom:30px;max-width:40ch}

/* ---- collections: every line leads as a card ---------------------------------------------------
   The old two-column list left the right-hand plate stranded in dead space, because 31 names
   are far taller than one 16:10 photograph — the photo began 1354px down and four fifths of the
   column was empty. Both the home section and lines/index.html now card every line that carries
   its own photography, each with its idea and its weight. The typographic index below survives
   only for lines still awaiting a still, so they are listed rather than dropped. */
.lines-intro{max-width:58ch;color:var(--ink-soft);font-size:clamp(13.5px,1.15vw,17px);
  margin:calc(-1 * clamp(14px,2vh,26px)) 0 clamp(38px,5.5vh,70px)}
.lines-lead{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,4vh,64px) clamp(20px,2.2vw,40px)}
/* lines/index.html only: two per row on desktop instead of three.
   The phone media query below still collapses it to one column. */
.lines-two{grid-template-columns:repeat(2,1fr)}
.lcard{display:block}
.lcard figure{aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.lcard figure img{width:100%;height:100%;object-fit:cover;
  transition:opacity 1s var(--e-io)}
.lcard-t{display:flex;align-items:baseline;gap:16px;margin-top:clamp(14px,1.4vw,20px);
  padding-bottom:clamp(9px,.9vw,13px);border-bottom:1px solid var(--rule);
  transition:border-color .5s var(--e-out)}
.lcard:hover .lcard-t{border-bottom-color:var(--ink)}
.lcard-t h3{font-family:var(--serif);font-weight:300;line-height:1;
  letter-spacing:-.012em;font-size:clamp(21px,1.9vw,32px)}
.lcard:hover .lcard-t h3{font-style:italic}
.lcard-t .ct{margin-left:auto;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lcard p{margin-top:clamp(10px,1vw,14px);max-width:32ch;color:var(--ink-soft);
  font-size:clamp(12.5px,.95vw,14px);line-height:1.6}

.lines-index{margin-top:clamp(58px,8vh,108px)}
.li-hd{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);
  margin-bottom:clamp(6px,.9vh,12px)}
.li-hd .rule{flex:1;height:1px;background:var(--rule)}
.li-list{columns:5;column-gap:clamp(22px,2.4vw,44px)}
.li-list a{display:flex;align-items:baseline;gap:12px;padding:12px 2px;
  border-top:1px solid var(--rule);break-inside:avoid;
  transition:padding .45s var(--e-out),border-color .5s var(--e-out)}
.li-list .nm{font-family:var(--serif);font-weight:300;letter-spacing:-.008em;
  font-size:clamp(16px,1.15vw,21px)}
.li-list .ct{margin-left:auto;font-size:10px;letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.li-list a:hover{padding-left:12px;border-top-color:var(--ink)}
.li-list a:hover .nm{font-style:italic}
.li-list a:hover .ct{color:var(--ink-soft)}

/* ---- scroll snap: the cinematic plates land full-bleed ----------------------------------------
   Only the full-screen photographs carry a snap point. The tall editorial sections — the room
   rail, the pieces rail, the collections index — are deliberately left free, because a
   mandatory snap on content taller than the viewport traps the wheel. `proximity` keeps it a
   magnet rather than a hijack. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  .snap{scroll-snap-align:start;scroll-snap-stop:normal}
  .lux.snap{height:100vh;height:100svh}
}
/* these plates are the palest photographs on the site, and white type sat on
   them unread. A soft warm-dark foot — the same device the closing plate uses —
   gives the line something to stand on without darkening the picture. */
.lux.snap:after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,20,10,0),rgba(28,20,10,.5))}
.lux.snap .line{z-index:1}

/* ---- monumental close -------------------------------------------------------------------------- */
.close-day{position:relative;min-height:100vh;min-height:100svh;display:flex;
  align-items:flex-end;overflow:hidden}
.close-day img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
.close-day .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,22,12,0) 34%,rgba(30,22,12,.52))}
.close-day .txt{position:relative;width:100%;padding:0 var(--pad) 9vh;text-align:center;color:#fff}
.close-day h2{font-size:clamp(28px,3.4vw,56px);margin:14px 0 26px;text-shadow:0 2px 50px rgba(20,14,6,.45)}
.close-day .eyebrow{color:rgba(255,255,255,.85)}

/* ---- footer -------------------------------------------------------------------------------------- */
.ftr{border-top:1px solid var(--rule);padding:clamp(56px,7vh,100px) 0 40px;
  margin-top:clamp(64px,9vh,130px)}
.close-day+.ftr,.next-room+.ftr{margin-top:0}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(2,minmax(140px,.5fr));
  gap:clamp(36px,4.5vw,80px);margin-bottom:clamp(50px,7vh,90px)}
.ftr h4{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  font-weight:400;margin-bottom:16px}
.ftr a{display:block;padding:4px 0;color:var(--ink-soft);font-size:12.5px;transition:color .3s}
.ftr a:hover{color:var(--ink)}
.ftr .fine{max-width:360px}
.giant{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--sans);font-weight:100;
  font-size:clamp(36px,8vw,150px);line-height:1;color:var(--ink);
  margin:0 0 34px;user-select:none}
.giant span{display:inline-block;transition:transform .5s var(--e-out),color .5s}
.giant:hover span{color:var(--bronze)}
.giant span:hover{transform:translateY(-10%)}
.copyline{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);
  padding-top:22px;flex-wrap:wrap}

/* ---- bag drawer ------------------------------------------------------------------------------------ */
.drawer{position:fixed;inset:0;z-index:120;pointer-events:none}
.drawer .dim{position:absolute;inset:0;background:rgba(30,24,16,.28);opacity:0;
  transition:opacity .5s;backdrop-filter:blur(2px)}
.drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);
  background:var(--bone);transform:translateX(102%);transition:transform .6s var(--e-out);
  display:flex;flex-direction:column;padding:26px 28px;border-left:1px solid var(--rule)}
.drawer.open{pointer-events:all}
.drawer.open .dim{opacity:1}
.drawer.open .drawer-in{transform:none}
.drawer-hd{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:18px;border-bottom:1px solid var(--rule)}
.drawer .x{font-family:var(--serif);font-size:24px;line-height:1;padding:4px 8px}
#bag-items{flex:1;overflow-y:auto;padding:8px 0}
.ci{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.ci img{width:66px;height:82px;object-fit:cover;background:var(--card)}
.ci .nm{font-size:13px}
.ci .pr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ci .rm{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  transition:color .3s}
.ci .rm:hover{color:var(--ink)}
.drawer-ft{border-top:1px solid var(--rule);padding-top:18px}
.drawer-ft .row{display:flex;justify-content:space-between;margin-bottom:16px;
  font-family:var(--serif);font-size:18px}
/* ---- the mobile menu: the house folded into one panel ----------------------------------------------
   A curtain, not a drawer — it comes down over the whole screen the way the arrival
   panel lifts off it, so the phone gets the site's own motion rather than an app's.
   Markup ships on every page; above 760px it is simply not there. */
.mmenu{display:none}
@media(max-width:760px){
  .mmenu{position:fixed;inset:0;z-index:140;background:var(--bone);
    display:flex;flex-direction:column;
    transform:translateY(-101%);visibility:hidden;
    transition:transform .78s var(--e-out),visibility 0s .78s;
    will-change:transform;overscroll-behavior:contain}
  .mmenu.open{transform:none;visibility:visible;
    transition:transform .78s var(--e-out),visibility 0s}
  .mm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px var(--pad);border-bottom:1px solid var(--rule)}
  .mm-top .brand{font-family:var(--sans);font-weight:300;font-size:12.5px;letter-spacing:.4em}
  .mm-x{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
    padding:6px 0 6px 14px}
  .mm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:clamp(22px,4.4vh,36px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 46px)}

  /* everything inside arrives after the panel has landed, one beat apart, in the
     order the eye reads it. Closing takes the delays off so it all leaves at once. */
  .mm-find,.mm-line,.mm-svc{opacity:0;translate:0 12px;
    transition:opacity .5s var(--e-out),translate .6s var(--e-out)}
  .mmenu.open .mm-find,.mmenu.open .mm-line,.mmenu.open .mm-svc{opacity:1;translate:0 0}
  .mmenu.open .mm-find{transition-delay:.16s}
  .mmenu.open .mm-nav .mm-line:nth-child(1){transition-delay:.22s}
  .mmenu.open .mm-nav .mm-line:nth-child(2){transition-delay:.28s}
  .mmenu.open .mm-nav .mm-line:nth-child(3){transition-delay:.34s}
  .mmenu.open .mm-nav .mm-line:nth-child(4){transition-delay:.40s}
  .mmenu.open .mm-svc{transition-delay:.46s}

  /* the field: a drawn loupe, a hairline, nothing else. 16px is the floor —
     anything smaller and iOS zooms the page the moment it takes focus. */
  .mm-find{position:relative;border-bottom:1px solid var(--rule-dark);padding-bottom:12px}
  .mm-find:before{content:"";position:absolute;left:2px;top:12px;width:12px;height:12px;
    border:1px solid var(--muted);border-radius:50%}
  .mm-find:after{content:"";position:absolute;left:13px;top:23px;width:7px;height:1px;
    background:var(--muted);transform:rotate(45deg);transform-origin:left center}
  .mm-find input{width:100%;background:none;border:0;outline:0;color:var(--ink);
    font:300 16px/1.5 var(--sans);letter-spacing:.014em;padding:6px 0 0 30px;
    -webkit-appearance:none;appearance:none}
  .mm-find input::-webkit-search-cancel-button{-webkit-appearance:none}
  .mm-find input::placeholder{color:var(--muted)}

  .mm-res{padding-top:4px}
  /* direct children only — the empty state carries a link inside its sentence and
     must not be laid out as a result row */
  .mm-res>a{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
    padding:11px 0;border-bottom:1px solid var(--rule)}
  .mm-res img{width:44px;height:54px;object-fit:cover;background:var(--card)}
  .mm-res .nm{display:block;font-size:13.5px;line-height:1.35}
  .mm-res .rm{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);margin-top:3px}
  .mm-res .pr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .mm-res .all{display:block;text-align:right;padding:13px 0;border-bottom:0;
    font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
  .mm-res .none{padding:15px 0}
  .mm-res .none a{color:var(--ink);border-bottom:1px solid var(--rule-dark)}

  /* the nav reads as a table of contents: the name in display type, what is behind
     it counted in the margin */
  .mm-nav{margin-top:clamp(24px,4vh,38px)}
  .mm-line{border-bottom:1px solid var(--rule)}
  .mm-line>a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.06;
    font-size:clamp(27px,7.6vw,38px);padding:15px 0 13px}
  .mm-line>a .n{flex:none;font-family:var(--sans);font-size:9px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--muted)}
  .mm-line>a:active{color:var(--bronze)}
  .mm-sub{display:flex;flex-wrap:wrap;gap:10px 18px;padding:2px 0 17px}
  .mm-sub a{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .mm-sub a:active{color:var(--ink)}
  .mm-sub a.more{color:var(--bronze)}

  .mm-svc{margin-top:clamp(26px,4.4vh,40px)}
  .mm-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;margin-top:15px}
  .mm-svc-grid a{font-size:12px;color:var(--ink-soft);line-height:1.45}
  .mm-svc-grid a:active{color:var(--bronze)}
  .mm-note{margin-top:22px}
}
html.mm-hold{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .mmenu{transition:none}
  .mm-find,.mm-line,.mm-svc{opacity:1;translate:none;transition:none}
}

.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,calc(100% + 40px));z-index:130;
  background:var(--ink);color:var(--bone);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:13px 24px;transition:transform .55s var(--e-out)}
.toast.on{transform:translate(-50%,0)}

/* ---- PDP -------------------------------------------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,4.5vw,90px);
  align-items:start;padding-top:clamp(100px,13vh,160px)}
.pdp-media{display:grid;gap:12px}
.pdp-media figure{background:var(--card);overflow:hidden;position:relative}
.pdp-media img{width:100%}
.pdp-info{padding-top:0}
/* pdp-media only: the info rail is pinned and the media column scrolls past it.
   Scoped with > so the pdp-hero template, where .pdp-info is the tall column and
   .pdp-aside is the pinned one, is left alone. max-height keeps the panel
   reachable on short viewports; the bar is hidden so it reads as a still page. */
.pdp > .pdp-info{position:sticky;top:84px;align-self:start;
  max-height:calc(100vh - 108px);overflow-y:auto;scrollbar-width:none}
.pdp > .pdp-info::-webkit-scrollbar{width:0;height:0}
.pdp-info .crumb{margin:-4px 0 20px;display:flex;gap:10px;align-items:baseline}
.pdp-info h1{font-size:clamp(30px,3vw,54px);margin:10px 0 8px}
.pdp-info .price{font-family:var(--serif);font-size:clamp(17px,1.5vw,22px);
  font-variant-numeric:tabular-nums;margin:6px 0 24px}
.pdp-info .desc{color:var(--ink-soft);max-width:50ch;margin-bottom:30px;font-size:13.5px}
.spec{width:100%;border-collapse:collapse;margin:32px 0;font-size:12.5px}
.spec th{font-weight:400;text-align:left;color:var(--muted);padding:11px 0;width:38%;
  vertical-align:top;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.spec td{padding:11px 0;color:var(--ink-soft)}
.spec tr{border-bottom:1px solid var(--rule)}
.swatches{display:flex;gap:12px;margin:4px 0 6px}
.swatches figure{width:50px}
.swatches img{width:50px;height:50px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule-dark)}
.swatches figcaption{font-size:9px;color:var(--muted);text-align:center;margin-top:7px;
  letter-spacing:.05em}
.sig{position:relative;overflow:hidden;margin-top:clamp(80px,11vh,150px)}
.sig-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;
  gap:clamp(36px,4.5vw,90px)}
.sig figure{aspect-ratio:4/5;overflow:hidden;background:var(--card)}
.sig figure img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  transform:scale(1.35);transform-origin:50% 12%}
.sig h2{font-size:clamp(24px,2.4vw,40px);margin:14px 0 20px}
.sig p{color:var(--ink-soft);max-width:50ch;font-size:13.5px}

.pdp-media .f-room{aspect-ratio:3/2}
.pdp-media .f-room img{width:100%;height:100%;object-fit:cover}
/* wide products: monumental hero, info + room composed below */
.pdp-w{padding-top:clamp(96px,13vh,150px)}
.pdp-hero{position:relative;background:var(--card);overflow:hidden;aspect-ratio:2/1}
.pdp-hero img{width:100%;height:100%;object-fit:cover}
.pdp-below{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,4.5vw,90px);
  align-items:start;margin-top:clamp(40px,6vh,72px)}
.pdp-aside{position:sticky;top:84px}
.pdp-aside figure{background:var(--card);overflow:hidden;aspect-ratio:3/2;position:relative}
.pdp-aside img{width:100%;height:100%;object-fit:cover}

/* ---- the detail band: close frames in their own composed grid, shared by both
   PDP templates. --a carries each frame's true ratio, so nothing is cropped. */
.details{padding-block:clamp(56px,7.5vh,104px)}
.details-hd{display:flex;align-items:baseline;gap:22px;margin-bottom:clamp(24px,3.5vh,44px)}
.details-hd .rule{flex:0 0 clamp(34px,5vw,90px);height:1px;background:var(--rule-dark);
  align-self:center}
.details-hd .side{margin-left:auto;align-self:center}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,26px)}
.details-grid img{width:100%;height:auto;aspect-ratio:var(--a,1);object-fit:cover;
  background:var(--card)}
.details-grid figcaption{margin-top:11px}
@media(max-width:1060px){
  .pdp-below{grid-template-columns:1fr;gap:36px}
  .pdp-aside{position:static}
  .pdp-hero{aspect-ratio:16/9}
}

/* ---- lens: hover magnifier over hi-res sources -------------------------------------------------------- */
.lens{position:absolute;width:clamp(180px,17vw,280px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;opacity:0;z-index:5;
  border:1px solid rgba(46,42,36,.35);
  box-shadow:0 18px 60px -18px rgba(var(--shadow),.45),inset 0 0 0 6px rgba(251,249,245,.35);
  background-color:var(--card);background-repeat:no-repeat;
  transition:opacity .35s var(--e-io)}
.lens.on{opacity:1}

/* ---- lightbox: full-bleed gallery over the page -------------------------------------------------------- */
.lightbox{position:fixed;inset:0;z-index:180;background:color-mix(in srgb,var(--bone) 96%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .45s var(--e-io)}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;
  box-shadow:0 40px 120px -40px rgba(var(--shadow),.5);
  transition:transform .5s var(--e-out);will-change:transform;cursor:zoom-in}
.lightbox.zoomed img{cursor:zoom-out}
.lightbox .lb-x{position:absolute;top:22px;right:26px;font-family:var(--serif);
  font-size:30px;line-height:1;padding:8px 12px;z-index:2}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:34px;padding:16px 20px;z-index:2;
  color:var(--ink);opacity:.7;transition:opacity .3s}
.lightbox .lb-nav:hover{opacity:1}
.lightbox .lb-prev{left:12px}
.lightbox .lb-next{right:12px}
.lightbox .lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center}
[data-zoom]{cursor:zoom-in}

/* ---- room pages --------------------------------------------------------------------------------------- */
.room-open{position:relative;height:100vh;height:100svh;overflow:hidden}
/* the art-directed hero (wide on desktop, tall on phones) arrives wrapped in
   <picture>; an inline wrapper with auto height would void the img's height:100% */
.room-open picture{display:block;width:100%;height:100%}
.room-open img{width:100%;height:100%;object-fit:cover}
.room-open .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,24,16,.38),rgba(30,24,16,0) 28%,
    rgba(30,24,16,0) 58%,rgba(30,24,16,.42))}
.room-open .txt{position:absolute;inset:auto 0 8vh;text-align:center;color:#fff;
  padding:0 var(--pad)}
.room-open h1{font-size:clamp(38px,4.8vw,80px);margin-top:14px;
  text-shadow:0 2px 50px rgba(20,14,6,.45)}
/* the promoted lux heroes are deliberately high-key (plaster reads almost white),
   and the bottom scrim is only ~.22 alpha this far up — small caps need their own
   shadow to stay legible over a pale rug or floor */
.room-open .eyebrow{color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(20,14,6,.55),0 2px 22px rgba(20,14,6,.4)}
.story{max-width:760px;margin:0 auto;text-align:center}
.story p{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.8vw,27px);
  letter-spacing:-.006em;line-height:1.5;color:var(--ink-soft)}

/* ---- reveals ------------------------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--e-io),transform 1.2s var(--e-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
/* the curtain clips the CHILD image, never the observed element — a fully
   clipped target has zero intersection area and IO would never fire (learned
   the hard way: the reveal deadlocked itself) */
[data-reveal="veil"]{transform:none}
[data-reveal="veil"] img{clip-path:inset(0 0 100% 0)}
[data-reveal="veil"].in img{clip-path:inset(0 0 0% 0);
  transition:clip-path 1.3s var(--e-out),opacity 1s var(--e-io)}
.split .wd{display:inline-block;overflow:clip;vertical-align:top}
.split .wd>span{display:inline-block;transform:translateY(112%);
  transition:transform 1.1s var(--e-out)}
.split.in .wd>span{transform:none}

/* ---- misc ----------------------------------------------------------------------------------------------- */
.next-room{display:grid;place-items:center;text-align:center;
  padding-block:clamp(64px,9vh,120px)}
.next-room .portal{width:clamp(260px,25vw,410px);margin-top:32px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:300;background:var(--ink);color:#fff;padding:12px 18px}

/* ---- responsive: tablet ------------------------------------------------------------------------------------ */
@media(max-width:1060px){
  .g4{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1fr;gap:36px}
  .pdp > .pdp-info{position:static;max-height:none;overflow:visible}
  .lines-lead{grid-template-columns:repeat(2,1fr)}
  .li-list{columns:3}
  .sig-grid{grid-template-columns:1fr}
  .craft .txt{max-width:min(460px,86vw)}
}
/* ---- responsive: phone ------------------------------------------------------------------------------------- */
@media(max-width:560px){
  .hdr .brand{letter-spacing:.34em}
  .lines-lead{grid-template-columns:1fr}
  .lcard p{max-width:none}
  .li-list{columns:2}
  /* both index labels wrap to two lines at this width and crush the rule between
     them; the bare count reads as a count on its own beside a name */
  .li-hd .rule,.li-hd .eyebrow:last-child{display:none}
}
@media(max-width:760px){
  body{font-size:13.5px}
  .room-open.line-open{height:auto!important;aspect-ratio:16/11}
  .craft{display:flex;flex-direction:column;min-height:0;align-items:stretch}
  .craft>img{position:static;inset:auto;height:auto;width:100%;aspect-ratio:16/9}
  .craft .veil{display:none}
  .craft .txt{margin:0;padding:40px var(--pad) 56px;max-width:none}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .details-grid{grid-template-columns:1fr}
  .card.wide{grid-column:span 2}
  .ftr-grid{grid-template-columns:1fr 1fr}
  /* the phone bar carries three things and nothing else: Menu · WRENHURST · Bag.
     A 1fr auto 1fr grid centres the wordmark for real (space-between would centre
     the gap, not the mark, the moment the two sides differ in width). Every nav
     link steps out of the bar and into the panel. */
  .hdr{padding:18px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;gap:10px}
  /* text-indent cancels the trailing letter-space, or the mark sits a hair left */
  .hdr .brand{font-size:12.5px;letter-spacing:.4em;text-indent:.4em;
    justify-self:center;white-space:nowrap}
  .mm-open{display:block;justify-self:start}
  .hdr nav{gap:16px;justify-self:end}
  .hdr nav a{display:none}
  /* the phone hero is a bright film shown bare — no scrim, by decision — and white
     type on cream plaster all but vanishes. A soft shadow carries the three words
     without laying anything over the picture. */
  .hdr-over:not(.lit) .brand,.hdr-over:not(.lit) nav button,.hdr-over:not(.lit) .mm-open{
    text-shadow:0 1px 14px rgba(28,22,14,.55),0 0 3px rgba(28,22,14,.3)}
  .hdr-over:not(.lit) .mm-open{opacity:1}
  .day{height:100svh}
  /* phones show the film bare: no overlay copy, no scrim (owner 2026-08-05).
     The h1 stays in the markup for desktop and for crawlers. */
  .day-c,.day-scrim,.day-hint{display:none}
  .portal{width:min(78vw,470px)}
  /* the room plates on a phone are sized down at the foot of this file, beside
     the rule they have to out-order — see "the tall frame" */
  .split .wd>span{transform:none}
  .chapter-hd{flex-wrap:wrap;gap:14px}
  .chapter-hd .side{margin-left:0;flex-basis:100%}
  /* the two home rail headers keep their "View all" hard right: beside the
     title where it fits, and still right-aligned on the narrowest phones,
     where it drops to its own row rather than crushing the title. */
  .chapter-hd.hd-inline .side{margin-left:auto;flex-basis:auto;text-align:right}
  .stats{flex-wrap:wrap;gap:28px}
  .lux:not(.lux-p){height:auto!important;aspect-ratio:16/9}
  .lux.lux-ad{aspect-ratio:9/14}
  .close-day{min-height:0;aspect-ratio:9/14}
  .pdp-media .f-room{aspect-ratio:16/9}
  .pdp-aside figure{aspect-ratio:16/9}
  .craft{min-height:0;padding-block:0}
  .craft .txt{margin-inline:var(--pad);padding:88px 0}
  /* a rail keeps one figure height and takes each card's width from its ratio, as
     on desktop — only the height comes down. fixing the card width instead (the
     old 66/84vw basis) left the figure sized from the ratio: a wide one ran 170px
     past its card, over the gutter and onto its neighbour, and the rail read as
     one unbroken seam. 46vw holds the widest card (16:9) just inside the 84vw cap */
  .rail-card figure{height:46vw}
  .giant{font-size:clamp(30px,9.4vw,64px)}
  .drawer-in{width:100vw;border-left:0}
  .lightbox img{max-width:96vw}
  .lightbox .lb-nav{font-size:28px;padding:12px 14px}
  .next-room .portal{width:min(72vw,340px)}
}

/* ---- generated-page components ------------------------------------------------------------------------------ */
.page-hd{text-align:center;max-width:760px;margin:0 auto clamp(40px,6vh,80px)}
.page-hd h1{font-size:clamp(30px,3.4vw,58px);margin:14px 0 16px}
.page-hd p{color:var(--muted);max-width:56ch;margin:0 auto}
.plates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,46px) clamp(14px,1.6vw,24px)}
.plate .fr{position:relative;display:block;background:var(--card)}
.plate img{aspect-ratio:1;object-fit:cover;background:var(--card);width:100%;display:block;
  cursor:zoom-in}
.plate .fr:after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(46,42,36,.09);transition:box-shadow .5s var(--e-io)}
.plate:hover .fr:after{box-shadow:inset 0 0 0 1px rgba(138,109,79,.42)}
.plate figcaption{font-size:11px;color:var(--ink-soft);margin-top:11px;line-height:1.5;
  transition:color .4s}
.plate:hover figcaption{color:var(--ink)}
.plate .pid{font-size:9px;letter-spacing:.18em;color:var(--bronze);margin-right:7px}
.plate .note{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;
  color:var(--bronze);margin-top:2px;letter-spacing:.006em}
/* the grid stays flat on hover — no half-stop dim on the unhovered swatches. a
   material must read the same whether or not a neighbour is under the cursor */

/* ---- craft: the material library ------------------------------------------------------- */
.mat-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(24px,5vw,96px);align-items:start}
.fam-lede{font-family:var(--serif);font-weight:300;letter-spacing:-.006em;
  font-size:clamp(16px,1.5vw,23px);line-height:1.5;color:var(--ink-soft);max-width:54ch}
.laws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(30px,4vw,72px)}
.laws div{border-top:1px solid var(--rule-dark);padding:15px 0 22px}
.laws h4{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);
  font-weight:400;margin-bottom:9px}
.laws p{font-size:12.5px;line-height:1.62;color:var(--ink-soft);max-width:40ch}
.mat-index{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2vw,30px);
  margin-top:clamp(30px,4vh,54px);padding-top:16px;border-top:1px solid var(--ink)}
.mat-index a{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  padding:7px 0;transition:color .3s}
.mat-index a:hover{color:var(--ink)}
.fam{padding-block:clamp(52px,6.5vh,88px)}
.fam .wrap>.chapter-hd{padding-top:clamp(26px,3.4vh,44px);border-top:1px solid var(--rule-dark)}
.fam-intro{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(22px,4vw,80px);align-items:start;margin-bottom:clamp(32px,4.4vh,58px)}
.fam-spec div{display:grid;grid-template-columns:minmax(64px,.4fr) 1fr;gap:clamp(10px,1.4vw,20px);
  padding:9px 0;border-top:1px solid var(--rule-dark)}
.fam-spec dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);
  line-height:1.7}
.fam-spec dd{font-size:12px;line-height:1.6;color:var(--ink-soft)}
.after-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,64px)}
.after-grid>div{border-top:1px solid var(--ink);padding-top:18px}
.after-grid h4{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.4vw,22px);
  letter-spacing:-.008em;margin-bottom:12px}
.after-grid p{font-size:12.5px;line-height:1.68;color:var(--ink-soft);margin-bottom:18px}
@media(max-width:860px){
  .mat-open,.fam-intro{grid-template-columns:1fr;gap:26px}
  .laws{grid-template-columns:1fr}
  .laws p{max-width:none}   /* one column already sets the measure */
  .after-grid{grid-template-columns:1fr;gap:30px}
}
/* ---- about: the sixty-year story --------------------------------------------
   Years sit in their own gutter on desktop so the eye can run the dates without
   reading the prose. On a phone the gutter would eat the measure, so the year
   becomes a small label above its entry. Base rules first, phone block directly
   under them — anything later in this file is a different selector. */
.chron{list-style:none;border-top:1px solid var(--ink);margin-top:clamp(34px,5vh,58px)}
.chron li{display:grid;grid-template-columns:minmax(76px,.17fr) 1fr;
  gap:clamp(18px,4vw,64px);padding:clamp(22px,3.2vh,38px) 0;
  border-bottom:1px solid var(--rule-dark)}
.chron .yr{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.7vw,26px);
  letter-spacing:.01em;color:var(--bronze);line-height:1.25}
.chron h3{font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.35vw,21px);
  letter-spacing:-.008em;margin-bottom:10px}
.chron p{font-size:13px;line-height:1.72;color:var(--ink-soft);max-width:56ch}
.chron .aside{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;
  font-size:12.5px;line-height:1.6;color:var(--bronze);max-width:48ch}
@media(max-width:760px){
  .chron li{grid-template-columns:1fr;gap:9px;padding:clamp(20px,2.8vh,30px) 0}
  .chron .yr{font-family:var(--sans);font-size:10px;letter-spacing:.26em;color:var(--bronze)}
  .chron h3{margin-bottom:8px}
  .chron p,.chron .aside{max-width:none}   /* one column already sets the measure */
}
.searchbox{width:100%;padding:18px 0;border:0;border-bottom:1px solid var(--ink);
  background:none;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,34px);
  letter-spacing:-.012em;outline:none;color:var(--ink)}
.searchbox::placeholder{color:var(--rule-dark)}
@media(max-width:1060px){.plates-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.plates-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- room plates ------------------------------------------------------------------------- */
/* The frame is the master's native 16:9 — nothing is cropped, which is the
   whole argument for going big in the first place. The rooms index runs these
   as a full-screen stage (below); the home carousel runs them sideways. */
.plate-room{position:relative;display:block}
.plate-room figure{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--card)}
/* <picture> is inline by default, and an inline box has no height for the
   img's height:100% to resolve against — the frame would collapse to the
   photograph's own height. Same fix as .room-open picture above. */
.plate-room figure picture{display:block;width:100%;height:100%}
/* The :not(.nofx) is specificity, not filtering. The image-arrival rule at
   the top of this file, html.js img:not(.nofx), is (0,2,2) and would
   otherwise win the `transition` shorthand outright — leaving the curtain
   with no easing at all. This selector matches it and comes later, so it wins. */
.plate-room figure img:not(.nofx){width:100%;height:100%;object-fit:cover;
  transition:opacity 1s var(--e-io),clip-path 1.3s var(--e-out)}
/* these rooms are pale plaster on pale stone — the scrim has to carry the name
   on the lightest of them without turning the foot of the photograph to mud */
.plate-room figure:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,14,6,.72) 0%,rgba(20,14,6,.3) 26%,rgba(20,14,6,0) 60%)}
.plate-room figcaption{position:absolute;z-index:2;color:#fff;display:flex;align-items:baseline;
  left:clamp(18px,2.2vw,42px);right:clamp(18px,2.2vw,42px);bottom:clamp(16px,2vw,38px);
  gap:clamp(12px,1.1vw,22px);
  text-shadow:0 1px 3px rgba(20,14,6,.5),0 2px 30px rgba(20,14,6,.55)}
.plate-room .rn{font-family:var(--serif);color:rgba(255,255,255,.82);
  font-size:clamp(12px,.95vw,16px);letter-spacing:.14em}
.plate-room h3{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.012em;
  font-size:clamp(18px,1.5vw,27px)}
/* scrim and name arrive after the curtain has cleared the frame — but only on
   plates that carry a curtain. The home carousel has none (see below), so its
   names must be there from the start rather than waiting on an .in that the
   observer only grants once a card is dragged into view. */
.plate-room figcaption,.plate-room figure:after{transition:opacity 1s var(--e-io) .3s}
.plate-room[data-reveal]:not(.in) figcaption,
.plate-room[data-reveal]:not(.in) figure:after{opacity:0}

/* ---- the stage: the rooms index the scroll walks sideways -------------------------------- */
/* A gallery wall, not a contact sheet. The section is tall and its frame is
   pinned to the top of the screen, so scrolling down carries the house past
   the window one room at a time — the page's own gesture, not a hijacked one.
   `--n` (the room count) is written onto the section by the builder; every
   other measure here derives from it, and the engine reads the pinned height
   back out of the layout rather than keeping its own copy of --step. */
.stage{position:relative;--step:58vh;
  height:calc(100svh + (var(--n) - 1) * var(--step));background:#EFEAE1}
.stage-pin{position:sticky;top:0;height:100svh;overflow:hidden}
/* The scroll comes to rest on a whole room, never between two. The snap points
   are the markers — one per room, each a step tall — and the footer, which has
   to be one of them: under `mandatory` a stretch of page with nothing to snap
   to is a stretch the scroll refuses to stop in. */
html:has(.stage){scroll-snap-type:y mandatory}
html:has(.stage) .ftr{scroll-snap-align:start}
.stage-steps{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.stage-steps i{display:block;height:var(--step);scroll-snap-align:start}
.stage-vp{position:absolute;inset:0;overflow:hidden}
/* The rooms are stacked in one frame and dissolve into each other — nothing
   travels across the eye. Only three are ever in the render tree: the room in
   the window and the one either side, so the outgoing frame is still there to
   fade out and the incoming one is already there to fade in, while the other
   thirty-seven cost nothing and stay unfetched. */
.stage-track{position:absolute;inset:0}
.stage-slide{position:absolute;inset:0;display:none;overflow:hidden;opacity:0;
  pointer-events:none;transition:opacity 1.05s var(--e-io)}
.stage-slide.live{display:block}
.stage-slide.on{opacity:1;pointer-events:auto}
.stage-slide picture{display:block;width:100%;height:100%}
.stage-slide img{width:100%;height:100%;object-fit:cover}
/* two gradients, not one: the foot has to carry the name over pale plaster, and
   the head has to carry the fixed nav over a bright window */
.stage-slide:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,14,6,.66) 0%,rgba(20,14,6,.22) 30%,rgba(20,14,6,0) 58%),
             linear-gradient(to bottom,rgba(20,14,6,.34) 0%,rgba(20,14,6,0) 20%)}
/* the pinned readout carries the name while the rooms travel under it; the
   per-slide captions ride with their own photograph and belong to the column
   layout below, where nothing moves sideways */
.stage-now,.stage-cap{position:absolute;z-index:2;color:#fff;display:flex;align-items:baseline;
  left:var(--pad);right:var(--pad);bottom:clamp(72px,10vh,116px);gap:clamp(14px,1.5vw,28px);
  text-shadow:0 1px 3px rgba(20,14,6,.45),0 2px 34px rgba(20,14,6,.5)}
.stage-now{pointer-events:none;transition:opacity .5s var(--e-io)}
.stage-now.turn{opacity:0;transition:opacity .22s var(--e-io)}
.stage-slide .stage-cap{display:none}
.stage-now .rn,.stage-cap .rn{font-family:var(--serif);color:rgba(255,255,255,.8);
  font-size:clamp(12px,1vw,18px);letter-spacing:.16em}
/* the biggest type on the site — 72px of light sans needs the tightest track */
.stage-now .nm,.stage-cap h2{font-family:var(--serif);font-weight:300;line-height:1.04;
  letter-spacing:-.018em;font-size:clamp(28px,4.2vw,72px)}

.stage-arw{position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:clamp(44px,3.6vw,62px);height:clamp(44px,3.6vw,62px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:clamp(20px,1.7vw,28px);line-height:0;color:#fff;
  border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.07);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:opacity .5s var(--e-io),background .5s,border-color .5s}
.stage-prev{left:var(--pad)}
.stage-next{right:var(--pad)}
.stage-arw:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.9)}
.stage-arw[disabled]{opacity:.2;pointer-events:none}
.stage-foot{position:absolute;z-index:3;left:var(--pad);right:var(--pad);
  bottom:clamp(24px,3.4vh,40px);display:flex;align-items:center;
  gap:clamp(16px,2vw,32px);color:#fff;pointer-events:none}
.stage-count{font-family:var(--serif);font-size:clamp(11px,.92vw,15px);letter-spacing:.2em;
  font-variant-numeric:tabular-nums;display:flex;gap:8px;
  text-shadow:0 1px 3px rgba(20,14,6,.45)}
.stage-count .sep,.stage-count .tot{color:rgba(255,255,255,.62)}
.stage-line{flex:1;height:1px;background:rgba(255,255,255,.26);position:relative}
.stage-line i{position:absolute;left:0;top:-1px;height:3px;background:#FFF7E8;width:0}

/* A phone has one gesture, and it is already spoken for: the same markup lays
   itself out as a plain column of rooms and scrolls the way everything else on
   the site scrolls. Reduced motion takes the same road — a pinned frame that
   moves under the scroll is exactly the motion that setting asks us to drop.
   The engine sits out both cases, so the !important only has to survive an
   inline transform left behind by a resize across the breakpoint.

   The column is bright (owner 2026-08-05), the same call the film took on
   phones. One dark frame at full screen is a room at dusk; forty of them
   stacked down a phone is just a dark page — so the scrim comes off, and the
   name steps off the photograph and sits under it in ink. Nothing is laid over
   the photography here at all. */
@media(max-width:760px),(prefers-reduced-motion:reduce){
  html:has(.stage){scroll-snap-type:none}
  .stage-steps{display:none}
  /* the first room would otherwise start under the fixed nav */
  .stage{height:auto;padding-top:58px;padding-bottom:clamp(24px,6vw,44px)}
  .stage-pin{position:static;height:auto;overflow:visible}
  .stage-vp{position:static;overflow:visible}
  /* the gap has to read as "next room", not "next line of the same room":
     it is wider than the space between a photograph and its own caption */
  .stage-track{position:static;display:flex;flex-direction:column;
    gap:clamp(34px,8vw,52px);height:auto}
  .stage-slide{position:static;display:block;opacity:1;pointer-events:auto;transition:none;
    flex:0 0 auto;width:100%;height:auto;aspect-ratio:auto}
  /* 16:9 at phone width is a 219px strip. 3:2 is the fallback frame — the wide
     render cropped — for the two readers this block also catches: a phone held
     sideways, and a desktop asking for reduced motion. Upright phones take the
     tall render instead, below. */
  .stage-slide img{width:100%;height:auto;aspect-ratio:3/2}
  .stage-slide:after{display:none}
  .stage-slide .stage-cap{position:static;display:flex;color:var(--ink);text-shadow:none;
    left:auto;right:auto;bottom:auto;padding:clamp(9px,2.4vw,14px) var(--pad) 0;
    gap:clamp(10px,2.6vw,16px)}
  .stage-cap .rn{color:var(--muted)}
  .stage-cap h2{font-size:clamp(19px,4.6vw,30px)}
  .stage-now,.stage-arw,.stage-foot{display:none}
  /* nothing behind the nav is dark any more, so the white-over-photography
     header has no photograph to sit on: it wears its lit face for the whole
     of this page rather than only after the last frame has left. */
  html:has(.stage) .hdr-over:not(.lit){color:var(--ink);
    background:color-mix(in srgb,var(--bone) 88%,transparent);
    backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
    border-bottom-color:var(--rule);padding-top:15px;padding-bottom:15px}
  html:has(.stage) .hdr-over:not(.lit) .brand{color:var(--ink)}
  html:has(.stage) .hdr-over:not(.lit) nav a,
  html:has(.stage) .hdr-over:not(.lit) nav button,
  html:has(.stage) .hdr-over:not(.lit) .mm-open{color:var(--muted);opacity:1}
}

/* The column comes to rest on a room, the same rule the desktop stage keeps:
   `mandatory` decides where the scroll may stop, and `scroll-snap-stop:normal`
   decides nothing about how far it may travel first. A thumb can throw the
   column past five rooms or twenty — snap points do not catch a fling that is
   still moving — but wherever it runs out, the nearest room takes it. The snap
   area is the whole slide, whose top edge is the top edge of the photograph, so
   the landing is always a picture, never a caption.

   `mandatory` is only safe here because the footer already carries a snap point
   of its own (above, outside any query): a stretch of page with nothing to snap
   to is a stretch a mandatory scroll refuses to enter, and the footer is that
   stretch. It is taller than a phone, which makes its snap area oversized, and
   an oversized area is scrolled freely rather than pinned to its top edge.

   58px of scroll-margin is the phone bar — the same measure .stage pads its top
   by. The photograph lands under the nav rather than behind it. The bar hides
   itself on the way down, so a downward landing leaves that band cream; that is
   the cheaper fault of the two, and it costs nothing on a small phone, where a
   centred slide would be taller than the window and stop snapping altogether.

   Reduced motion is deliberately excluded and keeps `none` from the block
   above: a scroll that finishes somewhere other than where the finger left it
   is exactly the motion that setting asks us to drop. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  html:has(.stage){scroll-snap-type:y mandatory}
  .stage-slide{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:58px}
}

/* the same plate, running sideways: "Walk the house" is the same drag rail as
   "Pieces to know", but its cards are rooms — 16:9 and deliberately larger than
   a piece, so the house still leads. No reveal: cards would wipe in mid-drag. */
.rail-track .plate-room{flex:0 0 auto;width:clamp(300px,50vw,900px)}

/* ---- the tall frame: rooms on an upright phone ------------------------------------------- */
/* Every room owns two promoted renders — a wide one and a tall one — so a phone
   is given the tall file at its own 9:16 rather than the wide one squeezed into
   a portrait box. Nothing is cropped in either direction; the boxes here match
   the media query build_site.py writes onto each <source> (TALL_MQ), so the
   frame and the file it holds can never disagree.

   Both blocks live here, below the rule above, because that rule is (0,2,0) and
   so is the width override: at equal specificity it is document order that
   decides, and up in the phone block near the top of this file the override
   simply lost — every phone was reading a 300px plate, whatever it said. */
@media(max-width:760px){
  /* 90vw leaves the next room peeking, which is what says "drag". The 460px cap
     is for the tall frame: past it a portrait plate outgrows the window it is
     being read in. */
  .rail-track .plate-room{width:min(90vw,460px)}
  /* the sideways fallback — the wide render cropped — for the two readers the
     upright block below does not catch: a phone turned on its side, and a
     desktop asking for reduced motion. */
  .rail-track .plate-room figure{aspect-ratio:3/2}
}
@media(max-width:760px) and (orientation:portrait){
  .rail-track .plate-room figure{aspect-ratio:9/16}
  .stage-slide img{aspect-ratio:9/16}
}

/* ---- reduced motion ---------------------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  [data-reveal],[data-reveal="veil"]{opacity:1;transform:none;clip-path:none}
  [data-reveal="veil"] img{clip-path:none}
  .plate-room[data-reveal] figcaption,.plate-room[data-reveal] figure:after{opacity:1}
  .split .wd>span{transform:none}
  .manifesto .lede .w{opacity:1}
  html.js img:not(.nofx){opacity:1}
  .day{height:auto}
  .day-pin{position:relative}
}

/* ---- qc: deterministic snapshots (?qc) ---------------------------------------------------------------------- */
.qc [data-reveal],.qc [data-reveal="veil"]{opacity:1!important;transform:none!important;
  clip-path:none!important;transition:none!important}
.qc [data-reveal="veil"] img{clip-path:none!important}
.qc .plate-room figcaption,.qc .plate-room figure:after{opacity:1!important;transition:none!important}
/* qc snapshots run with reduced motion, so the stage is already a column there */
.qc .stage-now{opacity:1!important;transition:none!important}
.qc .split .wd>span{transform:none!important;transition:none!important}
.qc .manifesto .lede .w{opacity:1!important}
.qc .wash{display:none!important}
.qc img{opacity:1!important;transition:none!important}

/* ============================================================================
   THE ARRIVAL — blur-up reveal + the curtain
   Two halves of one idea: nothing in this catalogue should ever snap into
   place. A photo resolves out of its own colour; the house announces itself
   once, then gets out of the way.
   ============================================================================ */

/* ---- blur-up: every photo resolves from a 20px stand-in --------------------
   The stand-in rides as the <img>'s own background, so there is no wrapper and
   no second request -- it is in the first HTML byte. Until the real frame
   decodes the element paints only that background; `filter` blurs it. On .ld
   the blur lifts and the frame settles. `scale` (not `transform`) so this never
   collides with the inline transforms the parallax writes on .day-photo,
   .portal img and [data-plx].
   Overrides the blank opacity:0 fade above -- these plates are never empty. */
html.js img[data-lq]{
  opacity:1;
  background-image:var(--lq);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(16px) saturate(1.06);
  scale:1.04;
  transition:filter 1.5s var(--e-out), scale 2s var(--e-out);
}
html.js img[data-lq].ld{filter:blur(0) saturate(1);scale:1}

/* ---- the curtain: first arrival of a session, home only -------------------- */
.curtain{
  position:fixed;inset:0;z-index:9000;
  background:var(--bone);
  display:grid;place-items:center;
  transition:transform 1.6s var(--e-out);
  will-change:transform;
}
.curtain-in{text-align:center;opacity:0;translate:0 10px;
  animation:cur-rise 1.7s var(--e-out) .1s forwards}
@keyframes cur-rise{to{opacity:1;translate:0 0}}

.curtain .mark{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(23px,4.6vw,58px);
  letter-spacing:.44em;text-indent:.44em;   /* indent cancels the trailing gap */
  color:var(--ink);line-height:1;
}
.curtain .bar{
  margin:clamp(22px,2.6vw,34px) auto 0;
  width:min(190px,34vw);height:1px;
  background:var(--rule-dark);position:relative;overflow:hidden;
}
.curtain .bar i{
  position:absolute;inset:0 auto 0 0;width:0;
  background:var(--bronze);
  transition:width .7s var(--e-io);
}
.curtain .note{
  margin-top:clamp(16px,1.8vw,22px);
  font:300 9px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);
}

/* the lift itself */
html.cur-up .curtain{transform:translateY(-101%)}

/* failsafe: if the script never runs, the door still opens. JS lifts at ~1.5-2s
   and removes the node, so this only ever fires when something is broken. */
.curtain{animation:cur-failsafe 1.6s var(--e-out) 8s forwards}
@keyframes cur-failsafe{to{transform:translateY(-101%);pointer-events:none}}
html.cur-up .curtain .curtain-in{opacity:0;transition:opacity .55s linear}
html.cur-hold{overflow:hidden}

/* ---- respect reduced motion, and keep qc snapshots deterministic ----------- */
@media (prefers-reduced-motion:reduce){
  html.js img[data-lq]{filter:none;scale:1;transition:none}
  .curtain,.curtain-in{transition:none;animation:none;opacity:1}
}
.qc img[data-lq]{filter:none!important;scale:1!important;transition:none!important}
.qc .curtain{display:none!important}