/* Gloock and Hanken Grotesk (SIL Open Font License), latin and latin-ext, served from the site itself, not Google (privacy: docs/LEGAL-DE.md 4) */
@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gloock-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gloock-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Messing Around, V4 (round 3). Built on V2/V3 "Set in Brass"; V4 changes are in the block at the end. Tokens: see ../DESIGN.md */
:root{
  --error:#9A2E1F;
  /* V4: one ground for the whole page. Keren picked A1, her own studio backdrop (B39). */
  --ground:#ECE3E0;
  --plaster:var(--ground); --plaster-2:var(--ground); --paper:var(--ground);
  --night:#15110E; --night-2:#211B16; --night-3:#2E261F;
  --ink:#15110E; --ink-2:#4A4038; --ink-3:#6A5E52;
  --brass:#B08A3E; --brass-ink:#6E521C; --brass-light:#D9B56A; --glow:#F3C77A;
  --ink-drawing:#6B3A21; /* line drawings from the drawing-production skill (src/drawn5/); not used until the first one is approved */
  --on-dark:#ECE5D8; --on-dark-2:#C9BEAE; --on-photo:#ECE5D8; --on-photo-2:#C9BEAE;
  --rule:rgba(110,82,28,.35); --rule-strong:#B08A3E;
  --display:"Gloock",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --serif:var(--sans); /* V4: two fonts only; quotes are Hanken italic */
  --gut:clamp(20px,5.5vw,88px); --max:1320px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px;
  --ease:cubic-bezier(.23,1,.32,1); --warm:420ms;
  --cap-gap:10px; /* one gap between every photo and its caption (Keren, 15 Oct) */
  --header:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"kern";-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
::selection{background:var(--glow);color:var(--night)}
/* --brass on --ground is 2.54:1, under the 3:1 WCAG 1.4.11 floor for a focus ring; --brass-ink clears it at 5.76:1 */
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--brass-light)}
button{font:inherit;color:inherit}
html{scrollbar-color:var(--brass) var(--plaster-2)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--night);color:var(--plaster);padding:10px 16px;border-radius:2px}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.tnum{font-variant-numeric:tabular-nums}

/* type */
.display,h1{font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,6.4vw,88px)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.9vw,52px);line-height:1.06;letter-spacing:-.008em;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.12;margin:0}
h4{font:600 15px/1.4 var(--sans);margin:0}
p{margin:0}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-2);max-width:36em}
.voice{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--ink);font-optical-sizing:auto}
.label{font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink)}
.small{font-size:14px;line-height:1.5;color:var(--ink-2)}
.prose{max-width:66ch}
.prose p+p{margin-top:1em}
.prose h2{font-size:clamp(28px,2.8vw,38px);margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.her{font-family:var(--serif);font-size:19px;line-height:1.62;font-optical-sizing:auto}
.her p+p{margin-top:.9em}
blockquote{margin:0}
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,34px);line-height:1.3;color:var(--ink);max-width:28em;padding-left:var(--s3);border-left:1px solid var(--brass)}
.pull cite{display:block;margin-top:var(--s2);font:500 14px/1.4 var(--sans);font-style:normal;color:var(--ink-3)}
.dark .pull{color:var(--on-dark)} .dark .pull cite{color:var(--on-dark-2)}

/* surfaces */
.dark{background:var(--night);color:var(--on-dark)}
.dark .lede,.dark .small{color:var(--on-dark-2)}
.dark .label{color:var(--brass-light)}
.dark .voice{color:var(--on-dark)}
.band{padding:var(--s6) 0}
.band-tight{padding:var(--s5) 0}
.band:not(.dark):not(.panel)+.band:not(.dark):not(.panel){padding-top:0}
.panel{background:var(--plaster-2)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.sec-head p{max-width:34em}

/* header */
.top{position:sticky;top:0;z-index:50;height:var(--header);background:var(--ground);border-bottom:1px solid var(--rule)}
.top .wrap{height:100%;display:flex;align-items:center;gap:var(--s4)}
.logo{display:block;flex:none}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:var(--s4);margin-left:auto;align-items:center}
.nav a{font:500 15px/1 var(--sans);text-decoration:none;padding:14px 0;position:relative;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}
.nav a[aria-current="page"]{color:var(--brass-ink)}
.top .btn{margin-left:var(--s2)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--ink);border-radius:2px;padding:0 14px;height:44px;font:500 15px/1 var(--sans);cursor:pointer}
.lang{font:500 13px/1 var(--sans);color:var(--ink-3);white-space:nowrap}
@media (max-width:1000px){
  .nav{display:none}
  .menu-btn{display:block}
  .top .btn{margin-left:0;padding:0 16px}
  .top .lang{display:none}
  .nav.open{display:flex;position:fixed;inset:var(--header) 0 0 0;flex-direction:column;align-items:stretch;gap:0;background:var(--plaster);padding:var(--s3) var(--gut);overflow:auto}
  .nav.open a{font:400 30px/1.2 var(--display);padding:18px 0;border-bottom:1px solid var(--rule)}
  .nav.open a::after{display:none}
  .nav.open .lang{display:block;padding-top:var(--s3);font-size:15px}
}
@media (max-width:420px){.top .btn .long{display:none}.logo img{height:32px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;background:var(--night);color:var(--plaster);border:1px solid var(--night);border-radius:2px;font:600 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background 200ms var(--ease),color 200ms var(--ease),transform 120ms var(--ease)}
@media (hover:hover){.btn:hover{background:var(--night-3)}}
.btn:active{transform:translateY(1px)}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.dark .btn,.btn.light{background:var(--brass-light);border-color:var(--brass-light);color:var(--night)}
@media (hover:hover){.dark .btn:hover,.btn.light:hover{background:var(--glow);border-color:var(--glow)}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
@media (hover:hover){.btn.ghost:hover{background:var(--ink);color:var(--plaster)}}
.dark .btn.ghost{color:var(--on-dark);border-color:var(--on-dark-2);background:transparent}
@media (hover:hover){.dark .btn.ghost:hover{background:var(--on-dark);color:var(--night)}}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px/1.2 var(--sans);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:.35em;color:inherit}
@media (hover:hover){.link:hover{text-decoration-thickness:2px}}
.link .arr,.btn .arr{width:18px;height:10px;flex:none;transition:transform 220ms var(--ease)}
@media (hover:hover){.link:hover .arr,.btn:hover .arr{transform:translateX(3px)}}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin-top:var(--s4)}

/* lit / unlit figure: the signature */
.lit{position:relative;overflow:hidden;background:var(--night-2);isolation:isolate}
.lit img{width:100%;height:100%;object-fit:cover}
.lit .on{position:absolute;inset:0;opacity:0;transition:opacity var(--warm) var(--ease)}
.lit::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 45%,rgba(243,199,122,.22),transparent 70%);opacity:0;transition:opacity 700ms var(--ease);mix-blend-mode:screen}
.lit.is-on .on{opacity:1}
.lit.is-on::after{opacity:1}
.switch{position:absolute;left:var(--s2);bottom:var(--s2);z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(236,229,216,.4);background:rgba(21,17,14,.62);color:var(--plaster);font:600 14px/1 var(--sans);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.switch .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--brass-light);transition:background 300ms var(--ease),box-shadow 300ms var(--ease)}
.switch[aria-pressed="true"] .dot{background:var(--glow);border-color:var(--glow);box-shadow:0 0 12px 3px rgba(243,199,122,.7)}
@media (hover:hover){.switch:hover{background:rgba(21,17,14,.8)}}

/* caption */
.cap{margin-top:var(--cap-gap);font:400 14px/1.45 var(--sans);color:var(--ink-3)}
.dark .cap{color:var(--on-dark-2)}
.cap.ai::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brass);margin-right:8px;vertical-align:1px}

/* nameplate (Typenschild) */
.plate{border:1px solid var(--brass);border-radius:3px;background:var(--paper);padding:var(--s3);position:relative;max-width:460px}
.plate::before,.plate::after{content:"";position:absolute;top:10px;width:5px;height:5px;border-radius:50%;background:var(--brass)}
.plate::before{left:10px}.plate::after{right:10px}
.plate-head{display:flex;justify-content:space-between;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink);padding:0 10px var(--s2);border-bottom:1px solid var(--rule);margin-bottom:var(--s2)}
.plate dl{display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:10px var(--s3);margin:0;font-size:15px;line-height:1.4}
.plate dt{font:600 12px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink)}
.plate dd{margin:0;font-variant-numeric:tabular-nums}
.dark .plate{background:var(--night-2);border-color:var(--brass)}
.dark .plate dt,.dark .plate-head{color:var(--brass-light)}

/* status */
.status{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--sans);color:var(--ink-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#5E7A3C}
.status.reserved::before{background:var(--brass)}
.status.collected::before{background:var(--ink-3)}

/* piece card */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s3)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s2)}}
.card{position:relative;display:flex;flex-direction:column}
.card .ph{position:relative;aspect-ratio:4/5;background:var(--paper);overflow:hidden;border-radius:2px}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8% 10%;mix-blend-mode:multiply;transition:transform 600ms var(--ease),opacity var(--warm) var(--ease)}
.card .ph img.on{object-fit:cover;padding:0;opacity:0;mix-blend-mode:normal}
@media (hover:hover){.card:hover .ph img.cut{transform:scale(1.03)}}
.card.has-on:not(.is-set):focus-within .ph img.on{opacity:1}@media (hover:hover){.card.has-on:not(.is-set):hover .ph img.on{opacity:1}}
.card.has-on.is-set.is-on .ph img.on{opacity:1}
.lights-on .card.has-on:not(.is-set) .ph img.on{opacity:1}   /* the view's Lights switch (Omri, 16 Oct); a card's own switch (is-set) wins */
.sh-fig img.sh-on{opacity:0}
.lights-on .sh-fig img.sh-on{opacity:1}
@media (hover:hover){.sh-item:hover .sh-fig img.sh-on{opacity:1}}
.chip.lights{display:inline-flex;align-items:center;gap:8px}
.chip.lights .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--brass);transition:background 300ms var(--ease),box-shadow 300ms var(--ease)}
.chip.lights[aria-pressed="true"] .dot{background:var(--glow);border-color:var(--glow);box-shadow:0 0 10px 2px rgba(243,199,122,.7)}
.card h3{font-size:22px;margin-top:var(--s2)}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .once{font-family:var(--serif);font-size:16px;line-height:1.4;color:var(--ink-2);margin-top:6px}
.card .meta{display:flex;justify-content:space-between;gap:var(--s2);margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.card .ask{position:relative;z-index:2;align-self:flex-start;margin-top:6px}
.card.tile{grid-column:span 2}
.card.tile .ph{aspect-ratio:auto;height:100%;min-height:360px}
.card.tile .ph img{object-fit:cover;padding:0;mix-blend-mode:normal}
@media (max-width:760px){.card h3{font-size:19px}.card .once{font-size:15px}.card.tile .ph{min-height:260px}}

/* feature: one piece in place (fixed layout) */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:center}
.feature+.feature{margin-top:var(--s6)}
.feature .room{aspect-ratio:4/5;max-height:calc(100svh - 120px)}
.feature .room.wide{aspect-ratio:5/4}
.feature .copy{display:flex;flex-direction:column;gap:var(--s3)}
.feature .copy h3{font-size:clamp(34px,3.4vw,48px)}
.feature .once{font-family:var(--serif);font-size:20px;color:var(--ink-2)}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:var(--s4)}.feature .room{max-height:none}}

/* drawing (B's signature, in brass) */
.drawing{display:block;overflow:visible;--u:1.6;width:100%;height:auto}
.drawing .s,.drawing .dim,.drawing .con,.drawing .hid{fill:none;stroke:var(--brass-ink);stroke-linecap:round;stroke-linejoin:round}
.drawing .s{stroke-width:calc(var(--u)*2.2px)}
.drawing .mesh{stroke-width:calc(var(--u)*1.1px)}
.drawing .con{stroke-width:calc(var(--u)*.8px);stroke-dasharray:calc(var(--u)*14px) calc(var(--u)*4px) calc(var(--u)*2px) calc(var(--u)*4px);stroke:var(--brass)}
.drawing .hid{stroke-width:calc(var(--u)*.8px);stroke-dasharray:calc(var(--u)*6px) calc(var(--u)*4px);stroke:var(--brass)}
.drawing .dim{stroke-width:calc(var(--u)*1px);stroke:var(--brass)}
.drawing .dim-t{font-family:var(--sans);font-weight:600;font-size:calc(var(--u)*15px);fill:var(--brass-ink);letter-spacing:.03em}
.drawing image{mix-blend-mode:multiply}
.dark .drawing .s{stroke:var(--brass-light)} .dark .drawing .dim-t{fill:var(--brass-light)}
.drawn{background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:var(--s4) var(--s4) var(--s3)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:var(--s3);counter-reset:st}
.steps li{counter-increment:st;border-top:1px solid var(--brass);padding-top:var(--s2)}
.steps li::before{content:counter(st);display:block;font:400 28px/1 var(--display);color:var(--brass-ink);margin-bottom:var(--s2)}
.dark .steps li::before{color:var(--brass-light)}
.steps .h4{margin-bottom:6px}
.steps p{font-size:15px;color:var(--ink-2)}
.dark .steps p{color:var(--on-dark-2)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* chapters (photo strip with captions) */
.chapters{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:var(--s2)}
.chapters figure{margin:0}
.chapters img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:2px;background:var(--night-2)}
.chapters figcaption{margin-top:var(--cap-gap);font-size:14px;line-height:1.4}
.chapters figcaption b{display:block;font:400 18px/1.2 var(--display);margin-bottom:2px}
@media (max-width:900px){.chapters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.door{position:relative;display:flex;flex-direction:column;gap:var(--s2)}
.door .ph{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--plaster-2)}
.door .ph img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
@media (hover:hover){.door:hover .ph img{transform:scale(1.03)}}
.door h3 a{text-decoration:none}
.door h3 a::after{content:"";position:absolute;inset:0}
.door p{color:var(--ink-2)}
@media (max-width:820px){.doors{grid-template-columns:1fr}}

/* space tiles */
.spaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.space{position:relative;display:block;text-decoration:none;color:var(--on-dark);border-radius:2px;overflow:hidden;aspect-ratio:4/5;background:var(--night-2)}
.space img{width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease)}
@media (hover:hover){.space:hover img{transform:scale(1.04)}}
.space .t{position:absolute;inset:auto 0 0 0;padding:var(--s4) var(--s3) var(--s3);background:linear-gradient(transparent,rgba(21,17,14,.88))}
.space .t b{display:block;font:400 26px/1.1 var(--display)}
.space .t span{font-size:14px;color:var(--on-dark-2)}
@media (max-width:900px){.spaces{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.spaces{grid-template-columns:1fr}.space{aspect-ratio:4/3}}

/* testimonials */
.says{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.says blockquote p{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.4}
.says cite{display:block;margin-top:10px;font:500 14px/1.4 var(--sans);font-style:normal;color:var(--ink-3)}
@media (max-width:820px){.says{grid-template-columns:1fr}}

/* split layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.split.top-align{align-items:start}
.split.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.wide-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:900px){.split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:var(--s4)}}
.ph-cover{width:100%;height:100%;object-fit:cover;border-radius:2px}
figure{margin:0}

/* hero */
.hero{min-height:calc(100svh - var(--header));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.hero .copy{padding:var(--s6) var(--s5) var(--s5) var(--gut);display:flex;flex-direction:column;justify-content:center;gap:var(--s3);max-width:640px;justify-self:end;width:100%}
.hero .lit{min-height:560px}
.hero .who{font:500 15px/1.5 var(--sans);color:var(--on-dark-2)}
.hero .hint{font-size:14px;color:var(--on-dark-2)}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}.hero .copy{padding:var(--s5) var(--gut) var(--s4);max-width:none}.hero .lit{min-height:0;aspect-ratio:4/5}}

/* page head (inner pages) */
.phead{padding-top:var(--s6);padding-bottom:var(--s5)}
.phead .crumbs{font-size:14px;color:var(--ink-3);margin-bottom:var(--s3)}
.phead .crumbs a{color:var(--ink-2)}
.phead h1{font-size:clamp(42px,5.6vw,76px)}
.phead .lede{margin-top:var(--s3)}

/* filters */
.filters{position:sticky;top:var(--header);z-index:20;background:var(--ground);border-bottom:1px solid var(--rule);padding:var(--s2) 0;margin-bottom:var(--s5)}
.filters .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center}
.fgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fgroup>span{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink);margin-right:4px}
.chip{min-height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:999px;background:transparent;font:500 14px/1 var(--sans);cursor:pointer;color:var(--ink);transition:background 160ms,border-color 160ms}
@media (hover:hover){.chip:hover{border-color:var(--ink)}}
.chip[aria-pressed="true"]{background:var(--night);color:var(--plaster);border-color:var(--night)}
.chip .n{color:var(--ink-3);margin-left:4px;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .n{color:var(--on-dark-2)}
.fsel{min-height:36px;border:1px solid var(--rule);border-radius:999px;background:transparent;padding:0 30px 0 12px;font:500 14px/1 var(--sans);color:var(--ink);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.count{margin-left:auto;font-size:14px;color:var(--ink-2)}
.empty{padding:var(--s6) 0;text-align:center}
.empty p{margin:0 auto var(--s3);max-width:30em}
.f-toggle{display:none}
@media (max-width:760px){
  .filters .wrap{gap:10px}
  .f-toggle{display:inline-flex}
  .filters .fgroup.more{display:none}
  .filters.open .fgroup.more{display:flex}
  .count{margin-left:0;width:100%}
}

/* PDP */
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:start;padding:var(--s4) 0 var(--s6)}
.pdp .gallery{display:grid;gap:var(--s2)}
.pdp .gallery .lit{aspect-ratio:4/5}
.pdp .gallery .pdp-photo{margin:0}.pdp .gallery .pdp-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:72vh;margin:0 auto;mix-blend-mode:multiply}
.pdp .thumbs{display:flex;gap:var(--s2);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:none;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:2px}
.pdp .thumbs .thumb{flex:0 0 76px;display:block;padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:start;border-radius:2px}
.pdp .thumbs .thumb:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px}
.pdp .thumbs img{aspect-ratio:1;object-fit:cover;width:100%;display:block;border-radius:2px;background:var(--paper)}
.pdp .thumbs img.cut{object-fit:contain;mix-blend-mode:multiply;padding:8%}
/* a studio JPEG on white: blended into the ground, so no white square (Keren, 24 Oct). Kept apart from .cut, whose blend
   the cut-out block further down turns off */
.pdp .thumbs img.onwhite{object-fit:contain;padding:8%;background:none;mix-blend-mode:multiply}

/* PDP photo viewer: click a thumb to view it large, scroll or arrow through every photo of the piece */
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.lightbox[hidden]{display:none}
.lightbox .scrim{position:absolute;inset:0;background:rgba(21,17,14,.84)}
.lightbox .lb-pane{position:relative;z-index:1;max-width:min(92vw,1100px);max-height:86vh;display:flex;align-items:center;justify-content:center}
.lightbox .lb-img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:2px;background:var(--paper)}
.lightbox .lb-pane.cut{isolation:isolate;background:var(--paper);border-radius:2px}.lightbox .lb-pane.cut .lb-img{mix-blend-mode:multiply;background:none}
/* a blended image paints above the arrows and the close button unless they sit on their own layer (QA, 24 Oct: previous could not be clicked on a cut-out photo) */
.lightbox .lb-prev,.lightbox .lb-next,.lightbox .lb-close{z-index:2}
.lightbox .lb-close{position:absolute;top:-48px;right:-4px;background:none;border:0;color:var(--on-dark);cursor:pointer;padding:10px}
.lightbox .lb-prev,.lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(21,17,14,.55);border:0;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background 200ms var(--ease)}
.lightbox .lb-prev{left:-24px}.lightbox .lb-next{right:-24px}
.lightbox .lb-prev .arr{transform:rotate(180deg)}
@media (hover:hover){.lightbox .lb-prev:hover,.lightbox .lb-next:hover{background:rgba(21,17,14,.8)}}
.lightbox .lb-count{position:absolute;bottom:-34px;left:0;right:0;text-align:center;color:var(--on-dark-2);font:500 13px var(--sans)}
.lightbox[data-single] .lb-prev,.lightbox[data-single] .lb-next{display:none}
@media (max-width:700px){.lightbox{padding:var(--s3)}.lightbox .lb-prev{left:4px}.lightbox .lb-next{right:4px}.lightbox .lb-close{top:8px;right:8px;background:rgba(21,17,14,.5);border-radius:50%}.lightbox .lb-count{bottom:4px;color:#fff}}
.pdp .info{position:sticky;top:calc(var(--header) + var(--s4));display:flex;flex-direction:column;gap:var(--s3)}
.pdp .info h1{font-size:clamp(40px,4.4vw,64px)}
.pdp .pdp-next{margin-top:var(--s2)}.pdp .pdp-next .btn{max-width:100%}.pdp .pdp-next .nm{font-weight:400}
.pdp .once{font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--ink-2)}
.pdp .about{margin-top:var(--s2);font-size:16px;line-height:1.55;color:var(--ink-2);max-width:34em}   /* what the light does, one detail (old site, Omri 16 Oct) */
.pdp .crumbs{font-size:14px;color:var(--ink-3)}
.pdp .crumbs a{color:var(--ink-2)}
.pdp .row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
@media (max-width:900px){.pdp{grid-template-columns:1fr;gap:var(--s4)}.pdp .info{position:static}}
.scale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:end}
@media (max-width:820px){.scale{grid-template-columns:1fr}}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.notes .h4{margin-bottom:6px}
.notes p{font-size:15px;color:var(--ink-2)}
@media (max-width:820px){.notes{grid-template-columns:1fr}}
.todo{font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--brass-ink);background:rgba(176,138,62,.14);padding:3px 6px;border-radius:2px;white-space:nowrap}

/* forms and the enquiry slide-over */
.form{display:grid;gap:var(--s3)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:560px){.form .two{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field>label,.field>legend,.fs>legend{font:600 14px/1.3 var(--sans)}
.field .opt{font-weight:400;color:var(--ink-3)}
.field input,.field textarea,.field select{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid rgba(21,17,14,.45);border-radius:2px;padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--brass-ink);outline-offset:0;border-color:var(--brass-ink)}
.field .err{display:none;font-size:14px;color:var(--error)}
.field.bad input,.field.bad textarea{border-color:var(--error)}
.field.bad .err{display:block}
.fs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opts span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(21,17,14,.45);border-radius:999px;font:500 15px/1 var(--sans);cursor:pointer;background:var(--paper)}
.opts input:checked+span{background:var(--night);color:var(--plaster);border-color:var(--night)}
.opts input:focus-visible+span{outline:2px solid var(--brass-ink);outline-offset:2px}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.tick input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--night);flex:none}
.privacy{margin-top:-8px;color:var(--ink-2)}
.piece-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid var(--brass);border-radius:999px;background:var(--paper);font:600 14px/1 var(--sans);align-self:flex-start}
.piece-chip img{width:32px;height:32px;border-radius:50%;object-fit:contain;background:#fff;mix-blend-mode:multiply}
.sent{display:none;padding:var(--s4);border:1px solid var(--brass);background:var(--paper);border-radius:2px}
.sent h3{margin-bottom:var(--s2)}
form.done>*:not(.sent){display:none}
form.done .sent{display:block}
/* once sent, the sheet shows only the thank-you: no door fields (they outrank the rule above), no door chips, no heading */
.sheet form.done>[data-for]{display:none}
.sheet.is-sent .types,.sheet.is-sent #ask-h{display:none}
.sheet.is-sent:not(.inline) .sent{margin-top:56px}
.sheet .sent .back{margin-top:var(--s3)}
.sheet.inline .sent .back{display:none}
.upload{border:1px dashed var(--brass);border-radius:2px;padding:var(--s3);text-align:center;background:var(--paper);font-size:15px;color:var(--ink-2)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.slots label{position:relative}
.slots input{position:absolute;opacity:0;inset:0;cursor:pointer}
.slots span{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid rgba(21,17,14,.35);border-radius:2px;background:var(--paper);font-size:14px;cursor:pointer}
.slots span b{font-size:15px}
.slots input:checked+span{background:var(--night);color:var(--plaster);border-color:var(--night)}
.slots input:focus-visible+span{outline:2px solid var(--brass-ink);outline-offset:2px}
.slots input:disabled+span{opacity:.45;text-decoration:line-through;cursor:not-allowed}

.sheet{position:fixed;inset:0;z-index:80;display:none}
.sheet.open{display:block}
.sheet .scrim{position:absolute;inset:0;background:rgba(21,17,14,.5);opacity:0;transition:opacity 300ms var(--ease)}
.sheet .pane{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--plaster);overflow:auto;padding:var(--s4) var(--s4) var(--s5);transform:translateX(100%);transition:transform 420ms var(--ease);box-shadow:-12px 0 40px rgba(21,17,14,.18)}
.sheet.show .scrim{opacity:1}
.sheet.show .pane{transform:none}
/* the Enquire page: the same form, in the page (REVIEW B6) */
.sheet.inline{position:static;display:block;z-index:auto}
.sheet.inline .scrim,.sheet.inline .close{display:none}
.sheet.inline .pane{position:static;width:auto;max-width:640px;transform:none;transition:none;overflow:visible;padding:0;background:none;box-shadow:none}
.sheet.inline h2{margin-top:0}
.sheet .close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;background:transparent;cursor:pointer;font:400 22px/1 var(--sans)}
.sheet h2{font-size:34px;margin:var(--s2) 0 var(--s2)}
.sheet .intro{color:var(--ink-2);margin-bottom:var(--s4)}
.types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.types button{min-height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:transparent;font:500 14px/1 var(--sans);cursor:pointer}
.types button[aria-pressed="true"]{background:var(--night);color:var(--plaster);border-color:var(--night)}
.sheet [data-for]{display:none}
.sheet [data-type="piece"] [data-for~="piece"],.sheet [data-type="commission"] [data-for~="commission"],.sheet [data-type="project"] [data-for~="project"],.sheet [data-type="visit"] [data-for~="visit"],.sheet [data-type="other"] [data-for~="other"]{display:flex}

/* footer */
.foot{background:var(--night);color:var(--on-dark);padding:var(--s6) 0 var(--s4)}
.foot .line{font:400 clamp(30px,3.4vw,46px)/1.1 var(--display);max-width:16em}
.foot .cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s4);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(217,181,106,.3)}
.foot .h4{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-light);margin-bottom:var(--s2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot a{color:var(--on-dark);text-decoration:none;display:inline-block;padding:6px 0}
@media (hover:hover){.foot a:hover{text-decoration:underline;text-decoration-color:var(--brass-light)}}
/* .foot a (element+class) outranks .btn (class only), so a button nested in the footer lost its flex
   centering and padding and sat as an oversized box with the text stuck in a corner: restore it here */
.foot a.btn{display:inline-flex;padding:0 24px}
@media (hover:hover){.foot a.btn:hover{text-decoration:none}}
.foot address{font-style:normal;color:var(--on-dark-2);line-height:1.6}
.foot .legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;margin-top:var(--s5);font-size:14px;color:var(--on-dark-2)}
.foot .legal a{color:var(--on-dark-2)}
.foot .mark{width:72px;opacity:.9;filter:invert(1) sepia(.4) saturate(2) hue-rotate(5deg) brightness(.85)}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}

/* demo flag */
.demo-flag{position:fixed;left:12px;bottom:12px;z-index:60;font:600 12px/1 var(--sans);letter-spacing:.06em;background:var(--night);color:var(--brass-light);padding:8px 10px;border-radius:2px;opacity:.85}

/* reveal: content is visible by default; JS adds a gentle rise once */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease),transform 900ms var(--ease)}
.js .rise.in{opacity:1;transform:none}
.shot .rise{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms!important;animation-duration:1ms!important}
  .js .rise{opacity:1;transform:none}
}
@media print{.top,.foot,.sheet,.demo-flag,.switch{display:none!important}body{background:#fff}}
/* screenshot mode: a fixed screen height instead of the capture window's */
.shot .hero{min-height:836px}
.shot .feature .room{max-height:780px}
@media (max-width:900px){.shot .hero{min-height:0}}
.hero .lit{position:relative;height:100%}
.hero .lit img{position:absolute;inset:0;object-position:50% 26%}
.hero h1{font-size:clamp(44px,5.6vw,80px)}
.hero .copy{padding-top:var(--s5);padding-bottom:var(--s5)}
.logo img{height:44px}
.demo-flag{left:auto;right:12px}
.top .btn{gap:.3em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
@media (max-width:760px){
  .band{padding:var(--s5) 0}
  .sec-head{margin-bottom:var(--s4)}
  .feature+.feature{margin-top:var(--s5)}
  .phead{padding-top:var(--s5);padding-bottom:var(--s4)}
  .pdp{padding-top:var(--s3)}
}

.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
h3.h4,.h4{font:600 15px/1.4 var(--sans);margin:0}

.dark .notes p,.dark .steps p{color:var(--on-dark-2)}
.dark .todo{color:var(--brass-light);background:rgba(217,181,106,.16)}
.fs .err{display:none;font-size:14px;color:var(--error)}
.fs.bad .err{display:block}
.chapters.tall img{aspect-ratio:9/16}
[tabindex="-1"]:focus{outline:none}
/* review round 1 */
.panel+.band:not(.panel),.dark+.band:not(.dark):not(.panel){padding-top:var(--s6)}
.foot{border-top:1px solid rgba(217,181,106,.45)}
.chip,.fsel,.types button,.btn.sm{min-height:44px}
.fsel{background-position:calc(100% - 15px) 20px,calc(100% - 10px) 20px}
.menu-btn{height:44px}
.logo img{height:52px}
@media (max-width:760px){.logo img{height:38px}}
.sheet .close{display:grid;place-items:center}
.space .t .aic{display:block;margin-top:6px;font:400 12px/1.3 var(--sans);font-style:normal;color:var(--on-dark-2)}
.card .switch{left:8px;bottom:8px;z-index:3;min-height:32px;width:32px;padding:0;justify-content:center}   /* a dot only, so it never covers the lamp (Omri, 16 Oct); the words stay for screen readers */
.card .switch .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card.is-on .ph img.on{opacity:1}
@media (hover:none){.card .switch{min-height:44px;width:44px}}
@media print{
  .pdp-page main>section:not(:first-child),.pdp-page .band,.pdp-page .thumbs,.pdp-page .actions,.pdp-page .crumbs{display:none!important}
  .pdp-page .pdp{grid-template-columns:1fr 1fr;padding:0}
  .pdp-page .info{position:static}
  .pdp-page .info::after{content:"Messing Around, Keren Gerlitz. Frankfurter Allee 6, 10247 Berlin. messing-around.de";display:block;margin-top:24px;font-size:12px}
  .lit .on{opacity:1}
}

/* ===== V3: the traced figure (drawing -> photo -> light) ===== */
.traced{position:relative;margin:0}
.traced svg{display:block;width:100%;height:auto;overflow:visible}
.traced .ph{transition:opacity 1s var(--ease)}
.traced .ph.cut{mix-blend-mode:multiply}
.traced .ph.on{opacity:0;transition:opacity var(--warm) var(--ease)}
.traced.is-on .ph.on{opacity:1}
.traced .tr path{fill:var(--brass-ink);stroke:var(--brass-ink);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.6s var(--ease),fill-opacity .8s var(--ease)}
.traced .tr{opacity:.16;transition:opacity 1.1s var(--ease)}
.traced .dims path{fill:none;stroke:var(--brass);stroke-width:1.2;vector-effect:non-scaling-stroke}
.traced .dims text{font:600 26px var(--sans);fill:var(--brass-ink);letter-spacing:.02em}
.dark .traced .tr path{fill:var(--brass-light);stroke:var(--brass-light)}
.dark .traced .dims text{fill:var(--brass-light)}
.dark .traced .dims path{stroke:var(--brass-light)}
.traced .dims{transition:opacity .8s var(--ease) .4s}
/* JS sequence: .js hides the photo until the drawing is done */
.js .traced .ph.off{opacity:0}
.js .traced .tr{opacity:1}
.js .traced .tr path{stroke-dasharray:1 1;stroke-dashoffset:1;fill-opacity:0}
.js .traced .dims{opacity:0}
.js .traced.is-drawn .tr path{stroke-dashoffset:0;fill-opacity:1}
.js .traced.is-drawn .dims{opacity:1}
.js .traced.is-photo .ph.off{opacity:1}
.js .traced.is-photo .tr{opacity:.14}
.traced .switch{left:12px;bottom:12px}
.traced::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 40% at 50% 40%,rgba(243,199,122,.28),transparent 70%);opacity:0;transition:opacity 900ms var(--ease);mix-blend-mode:screen}
.traced.is-on::after{opacity:1}
/* switching on is a plain fade (Keren, 15 Oct: no flicker; only a GIF of the piece may flicker) */
.pdp .gallery .traced{background:var(--paper);padding:24px 24px 8px 40px;border-radius:2px}
.pdp .gallery .traced:not(.cutout){background:transparent;padding:0 0 0 40px}
.hero .traced{align-self:center;width:min(100%,calc((100svh - 160px) * .72));margin:0 auto;padding:40px 24px 24px 48px}
.shot .hero .traced{width:min(100%,520px)}
@media (max-width:900px){.hero .traced{width:100%;padding:24px 20px 16px 44px}}
.hero-art{display:flex;flex-direction:column;justify-content:center;padding:var(--s4) var(--gut) var(--s4) 0}
@media (max-width:900px){.hero-art{padding:0 var(--gut) var(--s4)}}
.traced.cutout svg{mix-blend-mode:multiply}

/* ===== V3: collection shelf ===== */
.coll-head .jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.coll-head .jump a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;background:var(--paper);border-radius:2px;text-decoration:none;font:500 14px/1.2 var(--sans);transition:background 200ms var(--ease),transform 200ms var(--ease)}
@media (hover:hover){.coll-head .jump a:hover{background:#fff;transform:translateY(-2px)}}
.coll-head .jump img{height:58px;width:auto;mix-blend-mode:multiply}
@media (max-width:520px){.coll-head .jump{grid-template-columns:repeat(4,minmax(0,1fr))}.coll-head .jump img{height:44px}.coll-head .jump a{font-size:13px}}
.shelves{display:flex;flex-direction:column;gap:var(--s6)}
.shelf .sh-h{font-size:clamp(26px,2.4vw,34px);margin-bottom:var(--s3)}
.shelf .sh-h .n{font:500 15px var(--sans);color:var(--ink-3);vertical-align:middle;margin-left:6px}
.sh-row{display:flex;align-items:flex-end;gap:clamp(20px,3vw,48px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:24px 4px 0;border-bottom:2px solid var(--brass);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);scrollbar-width:thin}
.sh-row.rail{align-items:flex-start;border-bottom:0;border-top:2px solid var(--brass);padding:0 4px 24px;margin-bottom:var(--s4)}
.sh-item{flex:none;display:flex;flex-direction:column;align-items:center;text-decoration:none;scroll-snap-align:start;position:relative}
.sh-row:not(.rail) .sh-item{padding-bottom:0}
/* V5: the shelf starts on the photo (Omri's call), the drawing is no longer a toggled state */
.sh-photo{position:absolute;inset:0;opacity:1}
.sh-draw{opacity:0}
@media (hover:hover){.sh-item:hover .sh-fig img{transform:translateY(-4px)}}
.sh-cap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;margin-top:10px;font-size:13px;color:var(--ink-3);white-space:nowrap}
.sh-cap b{font:400 17px/1.15 var(--display);color:var(--ink);white-space:normal;max-width:12em}
.sh-row:not(.rail) .sh-cap{position:absolute;top:100%;margin-top:12px}
.sh-row:not(.rail){padding-bottom:0;margin-bottom:64px}
.sh-row.rail .sh-fig::before{content:"";position:absolute;left:50%;top:-2px;height:2px;width:2px}
.js .shelf.rise .sh-item{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease),transform 800ms var(--ease)}
.js .shelf.rise.in .sh-item{opacity:1;transform:none}
.js .shelf.rise.in .sh-item:nth-child(2){transition-delay:60ms}.js .shelf.rise.in .sh-item:nth-child(3){transition-delay:120ms}.js .shelf.rise.in .sh-item:nth-child(4){transition-delay:180ms}.js .shelf.rise.in .sh-item:nth-child(5){transition-delay:240ms}.js .shelf.rise.in .sh-item:nth-child(n+6){transition-delay:300ms}
.shot .shelf .sh-item{opacity:1!important;transform:none!important}
.js .shelf.rise{opacity:1;transform:none}
#collection-grid.grid{display:grid}
.shelves{gap:var(--s5)}
.sh-row:not(.rail){border-bottom:0;margin-bottom:0;background:linear-gradient(var(--brass),var(--brass)) left calc(100% - 58px)/100% 2px no-repeat}
.sh-row:not(.rail) .sh-cap{position:static;height:48px;margin-top:12px;justify-content:flex-start}
.sh-row.rail .sh-cap{height:auto}
@media (max-width:760px){
  .filters{position:static;margin-bottom:var(--s4)}
  .filters .fgroup{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px}
  .filters .fgroup::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}
}
.sh-row:not(.rail) .sh-cap{height:56px}
.sh-row:not(.rail){background-position:left calc(100% - 66px)}

/* ===== V3 home ===== */
.once-title{font-size:clamp(36px,5vw,72px);line-height:1.04;max-width:16em}
.once-title em{font-style:italic;font-family:var(--serif);color:var(--brass-ink);font-weight:400}
.once-band .sh-row{margin-top:var(--s5)}
.feature-xl .fx-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s5);align-items:center}
.feature-xl .fx-copy h2+.once{margin-top:var(--s2)}  /* QA 3.8: the subtitle sat on the heading */
.feature-xl .fx-art .traced{max-width:560px;margin:0 auto}
.feature-xl h2{font-size:clamp(44px,5vw,72px)}
.feature-xl .pull{margin-top:var(--s4)}
@media (max-width:900px){.feature-xl .fx-grid{grid-template-columns:1fr}}
.offset-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:start}
.op{display:flex;flex-direction:column;gap:14px}
.op figure img{aspect-ratio:4/5}
.op-b{margin-top:clamp(0px,14vw,220px)}
.op-b figure img{aspect-ratio:1}
.op h3{font-size:clamp(28px,2.6vw,38px);margin-top:8px}
@media (max-width:760px){.offset-pair{grid-template-columns:1fr}.op-b{margin-top:0;padding-left:15%}}
.drawn.bare{background:transparent;border:0;padding:0}
.stories .st-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:end;margin-bottom:var(--s4)}
@media (max-width:760px){.stories .st-head{grid-template-columns:1fr}}
.st-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px;scrollbar-width:thin}
.st-strip figure{flex:none;width:clamp(200px,22vw,300px);scroll-snap-align:start}
.st-strip img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(21,17,14,.16)}
.st-strip figure:nth-child(even){transform:translateY(28px) rotate(1.2deg)}
.st-strip figure:nth-child(odd){transform:rotate(-1deg)}
.stories .actions{margin-top:var(--s5)}
.ways-list{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5)}
.ways-list ol{list-style:none;margin:0;padding:0;counter-reset:w}
.ways-list li{counter-increment:w;border-top:1px solid var(--rule)}
.ways-list li:last-child{border-bottom:1px solid var(--rule)}
.ways-list a{display:grid;grid-template-columns:56px 1fr;gap:8px 16px;padding:24px 0;text-decoration:none;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2);transition:transform 300ms var(--ease),color 200ms}
.ways-list a::before{content:counter(w);font:400 34px/1 var(--display);color:var(--brass-ink);grid-row:span 2}
.ways-list a b{color:var(--ink);font-weight:600}
@media (hover:hover){.ways-list a:hover{transform:translateX(12px);color:var(--ink)}}
@media (max-width:760px){.ways-list{grid-template-columns:1fr;gap:var(--s3)}}
.studio-split .stack{position:relative;padding-bottom:18%}
.studio-split .stack .a{aspect-ratio:4/3}
.studio-split .stack .b{position:absolute;width:38%;aspect-ratio:3/4;right:-4%;bottom:0;border:6px solid var(--plaster-2);box-shadow:0 12px 28px rgba(21,17,14,.2)}
@media (max-width:760px){.studio-split .stack .b{right:0}}
/* light follows the pointer on dark bands, like a lamp in a dark room */
.dark{--mx:50%;--my:30%}
.fine .dark.glow-follow{background:radial-gradient(600px 400px at var(--mx) var(--my),rgba(243,199,122,.07),transparent 70%),var(--night)}
.js .reveal{clip-path:inset(6% 6% 6% 6% round 2px);transition:clip-path 1.1s var(--ease)}
.js .reveal.in{clip-path:inset(0 0 0 0 round 2px)}
.shot .reveal{clip-path:none!important}
.st-strip figure{width:auto}
.st-strip img{height:clamp(300px,34vw,440px);width:auto;aspect-ratio:auto;object-fit:contain}
.drawn-band .drawn.bare{max-width:520px;margin:0 auto}
/* PDP story as an editorial column */
.story-band{background:var(--paper)}
.story-h{font-size:clamp(34px,4.4vw,60px);max-width:14em;margin:0 auto var(--s5);text-align:center}
.story-col{max-width:640px;margin:0 auto}
.story-col p+p{margin-top:1em}
.story-col .drop{font-size:clamp(22px,2vw,28px);line-height:1.4}
.story-col .inline-ph{margin:var(--s4) 0}
.story-col .inline-ph img{width:100%;border-radius:2px}
.story-col .inline-ph.wide{margin-left:-12%;margin-right:-12%}
.story-col .inline-ph.right{float:right;width:46%;margin:8px -14% 16px 24px}
.story-col{display:flow-root}  /* the story holds its floated photo; nothing runs into the next section (REVIEW A8) */
@media (max-width:900px){.story-col .inline-ph.wide{margin-left:0;margin-right:0}.story-col .inline-ph.right{float:none;width:100%;margin:24px 0}}
.notes-band{border-top:1px solid var(--rule)}
[class*="here-"] .sh-item:nth-child(3) .sh-cap b{color:var(--brass-ink)}
[class*="here-"] .sh-item:nth-child(3) .sh-draw{opacity:0}
[class*="here-"] .sh-item:nth-child(3) .sh-photo{opacity:1}
.sh-row{-webkit-mask-image:none;mask-image:none}
.story-col .inline-ph img{max-height:560px;object-fit:cover}
.story-col .inline-ph.right img{max-height:380px}
/* notes dock for Keren's review */
.notes-dock{position:fixed;right:12px;bottom:12px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.notes-btn{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--brass);background:var(--night);color:var(--brass-light);font:600 14px/1 var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(21,17,14,.25)}
.notes-n{background:var(--brass-light);color:var(--night);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:12px}
.notes-pane{order:-1;width:min(340px,calc(100vw - 24px));background:var(--plaster);border:1px solid var(--brass);border-radius:4px;padding:16px;box-shadow:0 12px 36px rgba(21,17,14,.25);display:flex;flex-direction:column;gap:8px}
.notes-pane[hidden]{display:none}
.notes-pane textarea{font:400 15px/1.4 var(--sans);border:1px solid rgba(21,17,14,.4);border-radius:2px;padding:10px;background:var(--paper);resize:vertical}
.notes-pane .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.shot .notes-dock{display:none}
@media print{.notes-dock{display:none}}
@media (max-width:760px){
  .hero .copy{padding:28px var(--gut) 8px;gap:14px}
  .hero h1{font-size:40px}
  .hero .who{display:none}
  .hero .actions{margin-top:8px;gap:12px 20px}
  .hero-art{padding-top:0}
  .hero .traced{width:78%;padding:16px 8px 8px 36px}
}
/* hand-drawn grille: clean rim and expanded-metal lattice */
.traced .tr.rim path{fill:none!important;stroke-width:1.6}
.traced .tr.net path{fill:none!important;stroke-width:.8;opacity:.85}
.js .traced .tr.rim path,.js .traced .tr.net path{fill-opacity:0}
.demo-pill{order:1;align-self:flex-end;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--plaster);color:var(--brass-ink);border:1px solid var(--brass);border-radius:999px;padding:5px 9px}
.notes-dock{flex-direction:column}
/* an address or name that must not break at its hyphen (REVIEW B11) */
.nowrap{white-space:nowrap}
/* phones: photos that run edge to edge keep their caption off the edge (REVIEW B11) */
@media (max-width:760px){header>figure>figcaption,.v-place figure>figcaption,.c-story .bench>figcaption,.s-events figure>figcaption{padding-left:var(--gut);padding-right:var(--gut)}}
/* phones have no free margin: the demo marker sits at the end of the page instead of over the text (REVIEW B11) */
@media (max-width:760px){.notes-dock{position:static;padding:0 var(--gut) var(--s3);align-items:flex-end}}
.piece-chip[hidden]{display:none!important}
.story-band+.band{padding-top:var(--s6)}
.story-col .byline{margin-bottom:var(--s3);color:var(--ink-3)}

/* ==========================================================================
   V4 (round 3, Oct 2026): one ground, no boxes, no dark bands, a sidebar.
   From Keren's and Omri's feedback (site/feedback/round-3-keren.md, V4-PLAN.md).
   ========================================================================== */

/* No dark bands: sections and the footer sit on the ground like everything else */
.dark{background:var(--ground);color:var(--ink);--on-dark:var(--ink);--on-dark-2:var(--ink-2)}
.dark .label{color:var(--brass-ink)}
.dark .btn{background:var(--night);border-color:var(--night);color:var(--ground)}
@media (hover:hover){.dark .btn:hover{background:var(--night-3);border-color:var(--night-3)}}
.dark .btn.ghost{color:var(--ink);border-color:var(--ink);background:transparent}
@media (hover:hover){.dark .btn.ghost:hover{background:var(--ink);color:var(--ground)}}
.dark .plate dt,.dark .plate-head{color:var(--brass-ink)}
.dark .drawing .s{stroke:var(--brass-ink)} .dark .drawing .dim-t{fill:var(--brass-ink)}
.dark .traced .tr path{fill:var(--brass-ink);stroke:var(--brass-ink)}
.dark .traced .dims text{fill:var(--brass-ink)} .dark .traced .dims path{stroke:var(--brass)}
.dark .todo{color:var(--brass-ink);background:rgba(176,138,62,.14)}
.dark :focus-visible{outline-color:var(--brass)}
.fine .dark.glow-follow{background:var(--ground)}
.dark+.band:not(.dark):not(.panel),.panel+.band:not(.panel){padding-top:0}
/* shelf scroll cue (REVIEW B4): the cut edge fades and a round arrow scrolls the row; both only while more is hidden */
.sh-scroll{position:relative}
.sh-row.more-r{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.sh-more{position:absolute;right:0;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:1px solid var(--brass);background:var(--ground);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px -10px rgba(21,17,14,.5)}
.sh-more[hidden]{display:none}
.sh-more svg{width:20px;height:10px}
.sh-more:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media print{.sh-more{display:none}}
/* venue pages: the shelf above already shows each piece, so the cards under it are text only (REVIEW B11) */
.why-list .card .ph{display:none}
.why-list.grid{row-gap:var(--s5)}
/* grid cards: the status line and the ask link sit on one baseline across a row, however long the line above (Omri, 11 Oct) */
.grid .card{display:flex;flex-direction:column}
.grid .card .meta{margin-top:auto}
/* the practical bits start with a divider line, so they keep their top space after a light band (REVIEW B1) */
.band:not(.dark):not(.panel)+.band.notes-band:not(.dark):not(.panel),.panel+.band.notes-band:not(.panel),.dark+.band.notes-band:not(.dark),.notes-band{padding-top:var(--s6)}
/* room captions sit on the photo's dark shade, so they stay light inside a light band (REVIEW A6) */
.space{--on-dark:var(--on-photo);--on-dark-2:var(--on-photo-2);color:var(--on-photo)}
.space .t{text-shadow:0 1px 12px rgba(21,17,14,.55)}
.foot{background:var(--ground);color:var(--ink);--on-dark:var(--ink);--on-dark-2:var(--ink-2);border-top:1px solid var(--rule)}
.foot .cols{border-top-color:var(--rule)}
.foot .h4{color:var(--brass-ink)}
@media (hover:hover){.foot a:hover{text-decoration-color:var(--brass)}}
.foot .mark{filter:none}

/* No boxes: the spec plate becomes hairline rows; the drawing frame loses its border */
.plate{border:0;border-top:1px solid var(--brass);border-radius:0;background:none;padding:var(--s2) 0 0}
.plate::before,.plate::after{display:none}
.plate-head{padding:0 0 var(--s2);margin-bottom:0} /* first row as tall as the others (Keren, 15 Oct: "was" sat low) */
.plate dl{gap:0}
.plate dt,.plate dd{padding:12px 0;border-bottom:1px solid var(--rule)}
.plate dd{padding-left:var(--s3)}
.pdp .thumbs img{background:none}
.drawn{border:0;padding-left:0;padding-right:0}

/* Sidebar navigation on wide screens; the same header is the top bar on phones */
:root{--side:248px}
@media (min-width:1001px){
  :root{--header:0px}
  .top{position:fixed;inset:0 auto 0 0;width:var(--side);height:auto;border-bottom:0;border-right:1px solid var(--rule)}
  .top .wrap{height:100%;max-width:none;margin:0;padding:36px 32px 32px;flex-direction:column;align-items:flex-start;gap:0}
  .top .logo img{height:auto;width:132px}
  .nav{flex-direction:column;align-items:flex-start;gap:2px;margin:56px 0 0}
  .nav a{padding:9px 0;color:var(--ink-2)}
  @media (hover:hover){.nav a:hover{color:var(--ink)}}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--ink)}
  .nav a[aria-current="page"]::before{content:"";display:inline-block;width:14px;height:1px;margin:0 10px 4px 0;background:var(--brass);vertical-align:middle}
  .nav .lang{margin-top:20px}
  .top .btn{margin:auto 0 0}
  .side-addr{display:block;margin:20px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3)}
  #main,.foot{margin-left:var(--side)}
}
.side-addr{display:none}

/* Cut-out photos: transparent, so no multiply blend (it would tint the lamp) and no dark or pale panel behind them */
.card .ph img,.sh-fig img,.traced .ph.cut,.traced.cutout svg,.pdp .thumbs img.cut,.coll-head .jump img,.piece-chip img{mix-blend-mode:normal}
.piece-chip img{background:none}
.card .ph img.on{object-fit:contain;padding:8% 10%}
.lit{background:var(--ground)}
.lit.cutpair img{object-fit:contain}
.switch-band .lit.cutpair{width:min(100%,calc(80vh * var(--par,1)));margin-inline:auto}   /* a tall narrow piece stays within the screen */
.pdp .gallery .lit{aspect-ratio:auto}

/* One size on every shelf: the drawing and the photo share one height; the photo is cropped to the lamp, the drawing has a margin */
.foot .btn{color:var(--ground)}
@media (hover:hover){.foot .btn:hover{color:var(--ground)}}
/* V4 drawings: the outline strokes (.s) are heavier than the inner lines (.in) */
.drawing .in{fill:none;stroke:var(--brass-ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:calc(var(--u)*1.4px)}
/* V4 drawing as the piece-page hero */
.pdp-drawn{margin:0}
.pdp-drawn .drawing{max-height:78vh}
.pdp-drawn .photo image{mix-blend-mode:normal}
/* the shelf drawing has a 1.3% margin; the cut-out photo matches it */
.drawing image{mix-blend-mode:normal}
/* V4 shelf: a piece without its new drawing shows the cut-out photo */
/* V4 hero drawing with its switch */
.hero-drawn{position:relative;margin:0}
.hero-drawn .drawing{max-height:calc(100svh - 140px)}
.drawing .lit-on{opacity:0;transition:opacity var(--warm) var(--ease)}
.is-on .drawing .lit-on{opacity:1}
.hero-drawn .switch{left:auto;right:0;bottom:8px;transition:opacity .4s var(--ease),visibility .4s}
/* hidden, not just faded, until the drawing is done, so Tab never lands on an invisible switch */
.hero-drawn:not(.done) .switch{opacity:0;visibility:hidden;pointer-events:none}
/* V4: switches are light pills on the ground, not dark bars */
.switch{background:var(--ground);color:var(--ink);border-color:var(--brass)}
.switch .dot{border-color:var(--brass)}
@media (hover:hover){.switch:hover{background:#E4DACA}}
@media (hover:hover){.coll-head .jump a:hover{background:none}}
.coll-head .jump img{height:64px}

/* V4 (Omri, 6 Oct): no movement on hover or click. Drawing to photo is a plain crossfade. */
.btn:active{transform:none}@media (hover:hover){.link:hover .arr,.btn:hover .arr,.card:hover .ph img.cut,.door:hover .ph img,.space:hover img,.coll-head .jump a:hover,.sh-item:hover .sh-fig img,.ways-list a:hover,.nodraw:hover .sh-photo{transform:none}}
.ways-list a,.coll-head .jump a,.sh-fig img,.card .ph img{transition:opacity 500ms var(--ease),color 200ms var(--ease)}
.js .shelf.rise .sh-item,.js .shelf.rise.in .sh-item{transform:none;transition:opacity 600ms var(--ease)}
/* the story strip scrolls sideways only; up and down always moves the page */
.st-strip{overflow-y:hidden;overscroll-behavior-y:none;padding-top:8px;padding-bottom:56px}
/* the relatives/collection shelf rows scroll sideways only too (B52: French Pump's relatives shelf trapped vertical scroll).
   Mouse and trackpad: the wheel handler in site.js passes vertical intent to the page. Touch: both axes stay allowed,
   so a vertical swipe that starts on a shelf scrolls the page (REVIEW A5; pan-x alone blocked it on phones). */
.sh-row{overflow-y:hidden;touch-action:pan-x pan-y}
/* V4: drawing and photo share one frame on the shelf: the photo sits exactly over the drawing, no shift or resize */

/* touch screens: every tap target at least 44 x 44 px (REVIEW B14). Hit areas grow; the layout does not move. */
@media (pointer:coarse){
  .foot a:not(.btn){min-height:44px;display:inline-flex;align-items:center;padding:0}
  .foot .legal a{display:inline-block;padding:13px 4px;margin:-13px -4px}
  .privacy a{display:inline-block;padding:13px 0;margin:-13px 0}
  .logo{display:flex;align-items:center;min-height:44px}
  .chip{min-width:44px;justify-content:center}
  .lightbox .lb-close{min-width:44px;min-height:44px;display:grid;place-items:center}
  .card h3 a{display:inline-block;padding:12px 0;margin:-12px 0}
  details>summary{min-height:44px;display:flex;align-items:center}
  .tick{min-height:44px;align-items:center}
}
/* touch screens: form fields at 16 px so iOS doesn't zoom in on focus (REVIEW B7) */
@media (pointer:coarse){input,select,textarea,.fsel{font-size:16px}}
/* phone piece pages: the slim ask bar (REVIEW B3) */
.ask-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--ground);border-top:1px solid var(--brass);box-shadow:0 -8px 24px -16px rgba(21,17,14,.4)}
.ask-bar[hidden]{display:none}
.ask-bar .ab-name{font:400 18px/1.1 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ask-bar .btn{flex:none;min-height:44px}
body.has-ask-bar{padding-bottom:72px}
.shot .ask-bar{display:none}
@media print{.ask-bar{display:none}}
@media (min-width:760px){.ask-bar{display:none}}
/* The shelf (V5, Omri 11 Oct, "option 4"): every piece in the same invisible frame, like a shop grid. Nothing is measured: the
   cut-out fills its frame without distortion, standing on the frame's floor, or hanging from its top on a rail. The
   real size is in the caption. A new piece needs only its cut-out. */
:root{--frame-w:210px;--frame-h:250px;--frame-pad:14px}
@media (max-width:760px){:root{--frame-w:150px;--frame-h:180px;--frame-pad:10px}}
.sh-fig{position:relative;display:block;width:var(--frame-w);height:var(--frame-h);box-sizing:border-box}   /* the frame is invisible (Omri, 11 Oct): it only sets the size */
.sh-fig img{position:absolute;inset:var(--frame-pad);width:calc(100% - 2 * var(--frame-pad));height:calc(100% - 2 * var(--frame-pad));max-width:none;object-fit:contain;object-position:50% 100%;mix-blend-mode:normal;transition:opacity 500ms var(--ease);scale:var(--k,1);transform-origin:50% 100%}   /* --k: short pieces a little smaller (build.py shelf) */
.sh-row.rail .sh-fig img{object-position:50% 0}
/* the lamp, not the image box, sits over its label (Keren, 15 Oct): --dx of the drawn width, which is the box width or
   its height x the image's aspect, whichever is smaller; times --k because translate is not scaled */
.sh-fig img{translate:calc(var(--dx,0) * min(calc(var(--frame-w) - 2 * var(--frame-pad)), calc((var(--frame-h) - 2 * var(--frame-pad)) * var(--iar,1))) * var(--k,1)) 0}

/* new drawings (drawing-animation skill; static/drawing.js). The figure's frame has the drawing's viewBox shape;
   the photo is a real <img> placed on the photo's box inside it, the SVG lies over it at the same size. */
.drawn5{margin:0;position:relative}
.drawn5 .frame{position:relative;width:100%;aspect-ratio:var(--ar)}
.drawn5 .ph,.drawn5 .ph-on{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;display:block}
.drawn5 .ph-on{opacity:0;transition:opacity var(--warm) var(--ease)}
.drawn5.is-on .ph-on{opacity:1}
.drawn5 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.drawn5 .obj{opacity:0}
.drawn5 .obj path{fill:none;stroke:var(--ink-drawing);stroke-width:var(--stroke,2px);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.drawn5 .dim{fill:none;stroke:var(--brass);stroke-width:1.2px;vector-effect:non-scaling-stroke}
.drawn5 .dim-t{font:600 26px var(--sans);fill:var(--brass-ink)}
.js .drawn5 .obj{opacity:1}
/* before drawing.js runs, the photo, the finished lines and the dimensions must not show (Omri, 24 Oct: the live home hero
   flashed the lamp for a frame, then the drawing started). Hidden until the runtime marks the figure ready; should the
   script never run, they appear after 6 s, so no viewer is left with a blank frame */
.js .drawn5:not([data-drawn-ready]) .ph,.js .drawn5:not([data-drawn-ready]) .obj,.js .drawn5:not([data-drawn-ready]) .dims{animation:d5-wait 6s step-end both}
@keyframes d5-wait{from{opacity:0}to{opacity:1}}
/* on the site: never taller than the screen allows (as the V4 drawings), centred; the frame keeps the drawing's shape */
.pdp-drawn.drawn5 .frame{width:min(100%,calc(78vh * var(--ar)));margin:0 auto}
.hero-drawn.drawn5 .frame{width:min(100%,calc((100svh - 140px) * var(--ar)));margin:0 auto}
/* phones: the headline block takes about 350 to 380 px, so the drawing gets what is left of the visible screen (svh: with
   the browser bars showing) and its caption ends above the fold (Omri, 13 Oct, Pixel 10); never under 240 px tall (the shortest phones scroll for the caption) */
@media (max-width:520px){.hero-drawn.drawn5 .frame{width:min(100%,calc(max(240px,100svh - 420px) * var(--ar)))}}
.drawn5:not(.pdp-drawn):not(.hero-drawn) .frame{width:min(100%,calc(70vh * var(--ar)));margin:0 auto}
.drawn5 .cap{margin-top:var(--cap-gap)}
/* the caption starts under the photo's left edge, not the column's or the dimension marks' (Keren, 15 Oct).
   --W is the frame's width (as set above), --xn the photo's left offset in it (from build_drawing.py) */
.pdp-drawn.drawn5 .cap{--W:min(100%,calc(78vh * var(--ar)))}
.drawn5:not(.pdp-drawn):not(.hero-drawn) .cap{--W:min(100%,calc(70vh * var(--ar)))}
.drawn5:not(.hero-drawn) .cap{margin-left:calc((100% - var(--W)) / 2 + var(--W) * var(--xn,0));width:calc(var(--W) * (1 - var(--xn,0)))}

/* V6: the real before photo */
.before-ph{margin:0}.before-ph img{width:100%;height:auto;border-radius:2px;background:var(--night-2)}.before-ph .cap{margin-top:var(--cap-gap)}

/* V6: before and after pairs on the home page */
.ba-row{display:flex;gap:var(--s4);margin-top:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:12px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.ba-row>.ba{flex:0 0 min(400px,78vw);scroll-snap-align:start}
.ba{min-width:0}.ba h3{margin-top:var(--s2);font-size:clamp(22px,2vw,28px)}.ba .small{margin-top:4px;color:var(--ink-2)}.ba .link{margin-top:10px;display:inline-flex}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ba-pair figure{margin:0}.ba-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;background:var(--night-2)}
.ba-pair figure:last-child img{background:var(--paper);object-fit:contain}
.ba-pair .cap{margin-top:var(--cap-gap);font-size:13px}
@media (max-width:900px){.ba-row{-webkit-mask-image:none;mask-image:none}}
.stack.film video.a{display:block}

/* V6: one form engine */
.sheet .sent span[data-for]{display:none}
.sheet [data-type="piece"] .sent span[data-for~="piece"],.sheet [data-type="commission"] .sent span[data-for~="commission"],.sheet [data-type="project"] .sent span[data-for~="project"],.sheet [data-type="visit"] .sent span[data-for~="visit"]{display:inline}
.sheet .sent p span{display:inline}
.form input[type=file]{padding:10px 0;font:inherit;font-size:16px;color:var(--ink-2)}   /* 16 px: iOS zooms on smaller inputs (QA, 13 Oct) */
.sheet.inline .types{flex-wrap:wrap}
/* the compact in-page forms (Studio, Commissions, For venues): a few fields, a fold for the rest */
.form details.more{margin:0}.form details.more>summary{cursor:pointer;font:600 14px/1.3 var(--sans);color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
.form details.more>summary::-webkit-details-marker{display:none}.form details.more>summary::before{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform 200ms var(--ease)}
.form details.more[open]>summary::before{transform:rotate(45deg)}.form details.more[open]>summary{margin-bottom:var(--s2)}
.form details.more>.field+.field,.form details.more>.field+.fs,.form details.more>.fs+.field{margin-top:var(--s3)}

.sh-fam{font:400 15px/1.5 var(--serif);color:var(--ink-2);margin:4px 0 var(--s2);max-width:44em}.sh-fam a{font-family:var(--sans);font-weight:600}

/* V6 fixes from the 12 Oct critique and audit */
html{overflow-x:clip}
.stack.film figcaption{position:relative;z-index:2;max-width:58%;margin-top:var(--cap-gap)}