:root{
  --wall:#F4F4F2; --paper:#FFFFFF; --ink:#141414; --soft:#3A3A38; --grey:#66665F; --line:#DEDED9;
  --dot:#D0021B; --floor:#DCD8D1; --frame:#1B1A19; --shade:rgba(20,18,16,.28);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(16px,5vw,72px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.02;text-wrap:balance;letter-spacing:-.01em}
button{font:inherit;color:inherit}
.wrap{padding-inline:var(--gut)}
.label{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.small{font-size:13px;color:var(--grey)}
.it{font-family:var(--serif);font-style:italic;font-weight:300}
.link{border-bottom:1px solid currentColor;padding-bottom:2px;font-size:14px;letter-spacing:.02em}
.link:hover{color:var(--grey)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:0;transition:background .2s,color .2s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn svg{flex:none}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--wall) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.mark{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.28em;text-transform:uppercase}
.mark b{font-weight:500;color:var(--grey)}
.top nav{display:flex;gap:36px;font-size:14px}
.top nav a{padding-block:6px;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.wallbtn{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;background:none;border:0;cursor:pointer;font-size:14px}
.wallbtn .n{font-family:var(--mono);font-size:12px;min-width:22px;height:22px;display:inline-grid;place-items:center;border:1px solid var(--ink);border-radius:11px;padding:0 6px}
.wallbtn .n.has{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.top nav{gap:18px;font-size:13px}.mark{font-size:12px;letter-spacing:.2em}.wallbtn .t{display:none}}
@media (max-width:520px){.top{flex-wrap:wrap;row-gap:0;padding-block:10px}.top nav{order:3;width:100%;justify-content:space-between;padding-bottom:4px}}

/* framed work (tray frame) */
.framed{position:relative;background:var(--frame);padding:clamp(5px,.9%,10px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 40px 60px -34px var(--shade),0 14px 18px -12px rgba(20,18,16,.22)}
.framed::after{content:"";position:absolute;inset:clamp(5px,.9%,10px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 10px rgba(0,0,0,.55);pointer-events:none}
.framed img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* hero */
.hang{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-block:clamp(40px,7vw,110px) clamp(56px,8vw,120px)}
.hang .work{grid-column:4/span 5;cursor:zoom-in}
.hang .wlabel{grid-column:10/span 3;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.5;padding-bottom:8px;border-left:1px solid var(--line);padding-left:18px}
.wlabel .who{font-weight:500}
.wlabel em{font-family:var(--serif);font-size:17px;font-weight:300}
.wlabel .go{margin-top:14px}
@media (max-width:900px){.hang .work{grid-column:1/-1}.hang .wlabel{grid-column:1/-1;margin-top:28px;border-left:0;padding-left:0}}

.thesis{padding-block:clamp(48px,8vw,120px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px}
.thesis h1{grid-column:1/span 9;font-size:clamp(40px,6vw,88px)}
.thesis h1 em{font-style:italic}
.thesis p{grid-column:8/span 4;font-size:17px;color:var(--soft);max-width:30em}
@media (max-width:900px){.thesis h1,.thesis p{grid-column:1/-1}}

/* collection */
.coll{padding-block:clamp(48px,7vw,100px)}
.coll-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 40px;margin-bottom:clamp(40px,6vw,88px);border-bottom:1px solid var(--ink);padding-bottom:18px}
.coll-head h2{font-size:clamp(40px,5vw,72px)}
.coll-head .meta{display:flex;gap:32px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,5vw,80px);row-gap:clamp(56px,7vw,110px)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:22px;background:none;border:0;padding:0;text-align:left;cursor:zoom-in}
.card .framed{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .framed{transform:translateY(-4px)}
.card .lab{display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;row-gap:4px;align-items:baseline}
.card .no{font-family:var(--mono);font-size:12px;color:var(--grey)}
.card .ti{font-family:var(--serif);font-style:italic;font-size:22px;font-weight:300;line-height:1.2}
.card .pr{font-size:12.5px;color:var(--grey);font-variant-numeric:tabular-nums}
.card .row2{grid-column:2/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}

/* edition dots */
.dots{display:inline-flex;gap:5px;align-items:center}
.dots i{width:8px;height:8px;border-radius:50%;border:1px solid #9A9A94;display:block}
.dots i.s{background:var(--dot);border-color:var(--dot)}
.dots.lg i{width:12px;height:12px}

/* commission teaser */
.comm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:center;padding-block:clamp(64px,9vw,140px);border-top:1px solid var(--line)}
.comm .mini{grid-column:2/span 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:var(--frame);padding:8px;box-shadow:0 40px 60px -34px var(--shade)}
.comm .mini img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s cubic-bezier(.6,0,.2,1)}
.comm .txt{grid-column:7/span 5;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.comm h2{font-size:clamp(44px,5.4vw,80px)}
.comm p{font-size:17px;color:var(--soft);max-width:32em}
@media (max-width:900px){.comm .mini,.comm .txt{grid-column:1/-1}}

/* three facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-block:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:10px;max-width:24em}
.facts h3{font-size:28px;font-style:italic}
.facts p{font-size:15px;color:var(--soft)}
@media (max-width:820px){.facts{grid-template-columns:1fr}}

/* footer */
footer{padding-block:56px 40px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 48px;font-size:14px}
footer .cols{display:flex;flex-wrap:wrap;gap:24px 56px}
footer .cols div{display:flex;flex-direction:column;gap:6px}
footer .small a{border-bottom:1px solid var(--line)}

/* viewing room dialog */
dialog.room{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--wall);color:var(--ink)}
dialog.room::backdrop{background:rgba(20,20,20,.4)}
.room-in{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 400px}
.stage{position:relative;display:flex;flex-direction:column;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 20px) var(--gut) 24px}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.seg{display:inline-flex;border:1px solid var(--ink)}
.seg button{background:none;border:0;padding:9px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.x{width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid var(--ink);cursor:pointer}
.view{flex:1;min-height:0;display:grid;place-items:center;padding-block:24px}
.view .framed{width:min(100%,calc((100vh - 190px) * .75));max-width:600px}
.roomview{position:relative;width:100%;max-width:1100px;aspect-ratio:400/280;background:linear-gradient(#F1F0EC,#E9E7E2);overflow:hidden}
.roomview .floor{position:absolute;left:0;right:0;bottom:0;height:calc(100% * 30 / 280);background:linear-gradient(#CFCAC1,#DCD8D1)}
.roomview .skirt{position:absolute;left:0;right:0;bottom:calc(100% * 30 / 280);height:calc(100% * 6 / 280);background:#FAFAF8;box-shadow:0 1px 0 #cfcac1}
.roomview .onwall{position:absolute;transition:all .5s cubic-bezier(.2,.7,.2,1)}
.roomview .onwall.framed{padding:2px}
.roomview .onwall.framed::after{inset:2px}
.bench{position:absolute;bottom:calc(100% * 30 / 280)}
.bench .seat{position:absolute;left:0;right:0;top:0;height:22%;background:#2B2A28}
.bench .leg{position:absolute;top:0;bottom:0;width:4%;background:#2B2A28}
.scale{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:11px;color:#4A4A45}
.panel{border-left:1px solid var(--line);background:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 28px) 32px calc(env(safe-area-inset-bottom,0px) + 28px);overflow-y:auto;display:flex;flex-direction:column;gap:22px}
.panel h2{font-size:40px;font-style:italic}
.panel .facts2{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--soft)}
.sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.size{border:1px solid var(--line);background:var(--paper);padding:14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:44px}
.size[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.size b{font-weight:500;font-size:14px}
.size span{font-size:12.5px;color:var(--grey)}
.ed{display:flex;flex-direction:column;gap:10px;padding-block:16px;border-block:1px solid var(--line)}
.ed .r{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.price{font-size:14px;font-variant-numeric:tabular-nums}
.incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--soft)}
.incl li{display:flex;gap:10px}
.incl li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink);margin-top:8px;flex:none}
.note{font-size:13px;color:var(--grey);min-height:1.3em}
@media (max-width:900px){
  .room-in{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:100%}
  dialog.room{overflow-y:auto}
  .view .framed{width:min(100%,420px)}
  .panel{border-left:0;border-top:1px solid var(--line)}
}

/* wall drawer */
dialog.drawer{margin:0 0 0 auto;height:100%;max-height:none;width:min(440px,100%);padding:0;border:0;background:var(--paper);color:var(--ink)}
dialog.drawer::backdrop{background:rgba(20,20,20,.35)}
.dr{height:100%;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 24px) 28px calc(env(safe-area-inset-bottom,0px) + 24px);gap:20px}
.dr-h{display:flex;justify-content:space-between;align-items:center}
.dr-h h2{font-size:34px;font-style:italic}
.dr-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.dr-item{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line)}
.dr-item img{width:84px;height:112px;object-fit:cover;border:4px solid var(--frame)}
.dr-item .t{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.2}
.dr-item .s{font-size:13px;color:var(--grey)}
.dr-item button{background:none;border:0;cursor:pointer;font-size:12px;text-decoration:underline;color:var(--grey);min-height:32px}
.dr-empty{color:var(--grey);font-size:15px}
.dr-f{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--ink);padding-top:16px}
.dr-f .r{display:flex;justify-content:space-between;font-size:15px;font-variant-numeric:tabular-nums}

/* page intro (inner pages) */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:24px;padding-block:clamp(48px,7vw,110px) clamp(32px,5vw,64px)}
.intro .label{grid-column:1/-1}
.intro h1{grid-column:1/span 8;font-size:clamp(48px,7vw,108px)}
.intro h1 em{font-style:italic}
.intro p{grid-column:9/span 4;align-self:end;font-size:16.5px;color:var(--soft)}
@media (max-width:900px){.intro h1,.intro p{grid-column:1/-1}}

/* composer */
.composer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);padding-bottom:clamp(56px,7vw,100px);border-top:1px solid var(--line);padding-top:clamp(32px,4vw,56px)}
@media (max-width:980px){.composer{grid-template-columns:1fr}}
.canvas-col{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px;align-self:start}
@media (max-width:980px){.canvas-col{position:static}}
.q4{max-width:480px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--frame);padding:10px;gap:0}
.slot{position:relative;display:block;aspect-ratio:3/4;background:#2A2927;border:0;padding:0;cursor:pointer;overflow:hidden}
.slot img{display:block;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.slot .empty{position:absolute;inset:0;display:grid;place-items:center;color:#8A8983;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.slot.sel{z-index:1}
.slot.sel::after{content:"";position:absolute;inset:0;border:4px solid #fff;pointer-events:none}
.q4.picking .slot:not(.sel) img{opacity:.45;filter:saturate(.6);transition:opacity .25s}
.slot .selchip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#fff;color:var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;white-space:nowrap}
.slot.flash img{animation:land .5s cubic-bezier(.2,.7,.2,1)}
@keyframes land{from{opacity:0;transform:scale(1.06)}}
.say{font-size:14px;color:var(--soft);min-height:2.6em;margin:0}
.tool[disabled]{opacity:.35;cursor:not-allowed}
.tool[disabled]:hover{background:var(--paper);color:var(--ink)}
.slot .n{position:absolute;left:10px;top:8px;font-family:var(--mono);font-size:11px;color:#fff;mix-blend-mode:difference}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--ink);background:var(--paper);cursor:pointer;font-size:13px}
.tool:hover{background:var(--ink);color:var(--paper)}
.tool[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sw{display:flex;gap:0;height:14px}
.sw i{flex:1;display:block}
.code{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lib-col{display:flex;flex-direction:column;gap:16px}
.lib-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lib{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
@media (max-width:1200px){.lib{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lt{position:relative;padding:0;border:0;background:#ddd;cursor:pointer;aspect-ratio:3/4;overflow:hidden}
.lt img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lt:hover img{transform:scale(1.06)}
.lt.used img{opacity:.5}
.lt.used::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ink)}
.lt.here::after{box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 6px #fff}
.lt .badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px;z-index:1}
.lt .ref{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-size:10px;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .2s}
.lt:hover .ref,.lt:focus-visible .ref{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:36px;padding:0 12px;border:1px solid #BDBDB6;background:transparent;cursor:pointer;font-size:13px;border-radius:18px}
.chip span{color:var(--grey);font-family:var(--mono);font-size:11px;margin-left:4px}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip[aria-pressed="true"] span{color:#bbb}
.lib-ctrl{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.more{align-self:center}
.req{display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--paper);border:1px solid var(--line)}
.req .sizes{grid-template-columns:repeat(2,minmax(0,1fr))}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:13px;color:var(--soft)}
.fld input,.fld textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #BDBDB6;background:var(--paper);color:var(--ink);border-radius:0;min-height:46px}
.fld textarea{min-height:90px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}

/* studio */
.st-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:24px;padding-block:clamp(48px,7vw,100px);border-top:1px solid var(--line)}
.st-sec .label{grid-column:1/span 3}
.st-sec .body{grid-column:4/span 6;display:flex;flex-direction:column;gap:18px}
.st-sec .body h2{font-size:clamp(34px,3.6vw,52px)}
.st-sec .body p{font-size:17px;color:var(--soft)}
.st-sec .aside{grid-column:10/span 3}
@media (max-width:900px){.st-sec .label,.st-sec .body,.st-sec .aside{grid-column:1/-1}}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.spec li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec li span:first-child{color:var(--grey)}
.spec li span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.cert{background:var(--paper);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:16px;position:relative;box-shadow:0 30px 50px -36px var(--shade)}
.cert .row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.holo{position:relative;width:72px;height:72px;border-radius:3px;display:grid;place-items:center;overflow:hidden;background:conic-gradient(from 20deg,#c9f 0,#9ef 18%,#fe9 36%,#f9c 54%,#9fc 72%,#c9f 100%);filter:saturate(.8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);animation:spin 12s linear infinite}
@keyframes spin{to{filter:saturate(.8) hue-rotate(360deg)}}
.cert .sig{font-family:var(--serif);font-style:italic;font-size:26px;border-bottom:1px solid var(--ink);padding-bottom:2px;width:fit-content}
.cert h3{font-size:24px;font-style:italic}

.holo img{width:62%;height:auto;mix-blend-mode:multiply;opacity:.78;position:relative}
.holo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);background-size:250% 100%;animation:sheen 4s ease-in-out infinite}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.mark{display:inline-flex;align-items:center;gap:12px}
.mark img{height:22px;width:auto}
.artist{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;padding-block:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.artist .label{grid-column:1/-1}
.artist h2{grid-column:1/span 7;font-size:clamp(40px,5vw,76px)}
.artist h2 em{font-style:italic}
.artist .body{grid-column:8/span 5;display:flex;flex-direction:column;gap:16px;align-self:end}
.artist .body p{font-size:17px;color:var(--soft)}
@media (max-width:900px){.artist h2,.artist .body{grid-column:1/-1}}

.lib{overflow-anchor:none}
.miniq{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;width:84px;display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:4px;background:var(--frame);border:0;cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.miniq img,.miniq i{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#2A2927}
@media (max-width:980px){.miniq.show{display:grid}}

/* flat joins on every browser: no native button chrome, photographs overlap by a hair so no seam can show */
.slot{-webkit-appearance:none;appearance:none;border-radius:0;margin:0;overflow:visible;background:transparent;-webkit-tap-highlight-color:transparent}
.slot img{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none}
.slot .empty{background:#2A2927}
.q4{background:#2A2927;box-shadow:0 0 0 10px var(--frame);padding:0;margin:10px}
.lt,.card,.chip,.tool,.size,.miniq,.wallbtn{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}

/* centred nav */
.top{display:grid;grid-template-columns:1fr auto 1fr}
.top .mark{justify-self:start}
.top .wallbtn{justify-self:end}
@media (max-width:520px){.top{grid-template-columns:1fr auto}.top nav{grid-column:1/-1;grid-row:2}}
/* composer: frame-level tools, canvas fits the screen */
.q4{max-width:min(480px,calc((100vh - 240px) * .75))}
@media (max-width:980px){.q4{max-width:520px}}
.cell{position:relative}
.cell .slot{width:100%}
.slot .n{z-index:2}
.ftools{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ftools button{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:4px 0;border:0;border-radius:0;background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;font-size:10px;letter-spacing:.08em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.ftools button:hover{background:#fff}
.ftools button:active{background:var(--ink);color:#fff}
.cell.sel::after{content:"";position:absolute;inset:0;border:4px solid #fff;pointer-events:none;z-index:2}
.slot.sel::after{display:none}
.composer{padding-top:clamp(20px,3vw,40px)}
.intro.compact{padding-block:clamp(32px,5vw,72px) clamp(20px,3vw,36px)}
.intro.compact h1{font-size:clamp(44px,5.5vw,84px)}
/* legal pages */
.legal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-block:clamp(24px,4vw,56px) clamp(64px,8vw,120px);border-top:1px solid var(--line)}
.legal nav{grid-column:1/span 3;display:flex;flex-direction:column;gap:8px;font-size:14px;position:sticky;top:96px;align-self:start}
.legal nav a{color:var(--soft)}
.legal nav a:hover{color:var(--ink)}
.legal article{grid-column:5/span 7;max-width:68ch;display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:28px;margin-top:28px;font-style:italic}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16px;color:var(--soft)}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal a{border-bottom:1px solid currentColor}
@media (max-width:900px){.legal nav{display:none}.legal article{grid-column:1/-1}}
.legal nav a{border:0}
.ftools button{letter-spacing:.04em}
@media (max-width:700px){.intro.compact p{display:none}.intro.compact{padding-bottom:12px}}

/* commission hierarchy: the Quartet leads */
.intro.slim{padding-block:clamp(28px,4vw,56px) clamp(16px,2vw,28px);align-items:end}
.intro.slim h1{font-size:clamp(40px,4.6vw,68px);grid-column:1/span 7}
.intro.slim p{grid-column:9/span 4;font-size:15px}
.composer{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:start;border-top:0}
.canvas-col{position:sticky;top:88px;align-self:start;gap:14px}
.q4{max-width:none;width:min(100%,calc((100vh - 260px) * .75))}
.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.actions .btn{min-height:46px}
.btn[disabled]{background:#BDBDB6;border-color:#BDBDB6;color:#fff;opacity:1}
.sw{max-width:320px;height:8px}
.lib{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:1500px){.lib{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:980px){
  .composer{grid-template-columns:1fr}
  .canvas-col{position:static}
  .q4{width:100%;max-width:560px}
  .intro.slim h1,.intro.slim p{grid-column:1/-1}
}
.reqdlg{width:min(600px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:0;background:var(--paper);color:var(--ink)}
.reqdlg::backdrop{background:rgba(20,20,20,.45)}
.reqdlg .req{border:0;padding:28px}
.reqtop{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:start}
.reqprev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--frame);padding:3px}
.reqprev img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media (min-width:981px){
  .composer{grid-template-columns:auto minmax(0,1fr)}
  .q4{width:calc((100vh - 330px) * .75);min-width:360px;max-width:620px}
  .canvas-col{width:calc((100vh - 330px) * .75 + 20px);min-width:380px;max-width:640px}
  .lib{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1300px){.lib{grid-template-columns:repeat(5,minmax(0,1fr))}}

.artist-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;padding-block:clamp(48px,7vw,110px) clamp(32px,5vw,64px)}
.artist-intro .ai-text{display:flex;flex-direction:column;gap:22px;flex:1 1 400px}
.artist-intro h1{font-size:clamp(64px,9vw,140px)}
.artist-intro h1 em{font-style:italic}
.artist-intro .ai-text p{font-size:17px;color:var(--soft);max-width:30em}
.portrait{margin:0;display:flex;flex-direction:column;gap:10px;width:clamp(220px,24vw,340px)}
.portrait img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
/* v3 hierarchy: the Quartet is the hero, the archive is a palette beside it */
@media (min-width:981px){
  .composer{grid-template-columns:minmax(0,3fr) minmax(300px,2fr);gap:clamp(32px,4vw,64px)}
  .canvas-col{width:auto;min-width:0;max-width:none;position:sticky;top:84px;align-items:center}
  .q4{width:min(100%,max(420px,calc((100vh - 230px) * .75)));min-width:0;max-width:760px;margin:10px auto}
  .canvas-col .say,.canvas-col .actions,.canvas-col .code{width:min(100%,max(420px,calc((100vh - 230px) * .75)));max-width:760px;margin-inline:auto}
  .lib{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .lib-head .tool{min-height:38px;padding:0 12px;font-size:12.5px}
  .chip{min-height:32px;font-size:12.5px}
}
@media (min-width:1400px){.lib{grid-template-columns:repeat(5,minmax(0,1fr))}}
.canvas-col .sw{display:none}
.lib-col{gap:12px}
@media (max-height:780px) and (min-width:981px){.intro.slim{padding-block:20px 6px}.intro.slim p{display:none}.intro.slim h1{font-size:40px}}

/* room view: wall colours and a chair */
.roomwrap{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:14px}
.roomview{background:var(--wall,#F2F1EC)!important;transition:background .4s}
.roomview .floor{background:linear-gradient(color-mix(in srgb,var(--floor) 88%,#000),var(--floor))!important}
.roomview .skirt{background:color-mix(in srgb,var(--wall) 80%,#fff)!important;box-shadow:none}
.roomview .chair{position:absolute;bottom:calc(100% * 30 / 280)}
.scale.lt{color:#E8E3D6}
.wallchips{display:flex;flex-wrap:wrap;gap:6px}
.wallchip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 6px;border:1px solid #BDBDB6;border-radius:18px;background:var(--paper);cursor:pointer;font:inherit;font-size:12.5px}
.wallchip i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.wallchip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* v4 fixes */
[tabindex="-1"]:focus{outline:none}
.wlabel .go{align-self:flex-start;width:fit-content}
.wallchips,.wallchip{display:none}
.roomview{background:linear-gradient(#F1F0EC,#E9E7E2)!important}
.roomview .floor{background:linear-gradient(#CFCAC1,#DCD8D1)!important}
.roomview .skirt{background:#FAFAF8!important;box-shadow:0 1px 0 #cfcac1}
.portrait figcaption{display:none}
@media (max-width:520px){.top nav{justify-content:center;gap:32px}}

/* wall colour sliders */
.roomview{background:var(--wall,#F1F0EC)!important;transition:background .15s}
.roomview .skirt{background:color-mix(in srgb,var(--wall,#F1F0EC) 70%,#fff)!important}
.roomview.darkwall .scale{color:#E8E3D6}
.paint{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-top:4px}
.pslide{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.pslide input{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:7px;cursor:pointer;margin:0}
.pslide input[data-p="h"]{background:linear-gradient(90deg,hsl(0,26%,68%),hsl(40,26%,68%),hsl(80,26%,68%),hsl(120,26%,68%),hsl(160,26%,68%),hsl(200,26%,68%),hsl(240,26%,68%),hsl(280,26%,68%),hsl(320,26%,68%),hsl(359,26%,68%))}
.pslide input[data-p="l"]{background:linear-gradient(90deg,#F4F2EE,#8C877F,#1F1E1C)}
.pslide input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.pslide input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.paint .cx-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.roomview.darkwall .scale{color:#4A4A45}
/* header: wordmark at the top, H. mark once you scroll */
.top .mark{position:relative;min-height:44px}
.top .mark img{position:absolute;left:0;top:50%;height:24px;transform:translateY(-40%);opacity:0;transition:opacity .35s,transform .35s}
.top .mark span{transition:opacity .35s}
.top.scrolled .mark img{opacity:1;transform:translateY(-50%)}
.top.scrolled .mark span{opacity:0}
footer .mark img{display:none}
@media (max-width:520px){.top nav{justify-content:space-between;gap:0}}
@media (prefers-reduced-motion:reduce){.top .mark img,.top .mark span{transition:none}}

.roomview .furn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.roomview .bench{display:none}
.roomview .onwall{z-index:1}

/* room view: tighter 5:4 crop, sized to the viewport height (30/09) */
.roomwrap{width:min(100%,max(300px,calc((100dvh - 250px) * 1.25)));margin-inline:auto}
.roomview{aspect-ratio:5/4;max-width:none}
.roomview .floor,.roomview .skirt{transition:none}
.roomview .scale{bottom:max(6px,calc(100% * 4 / 244))}
.roomview .scale{top:10px;bottom:auto;left:12px}

/* composed Quartet in the viewing room (30/09) */
.q4mini{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:3/4;overflow:hidden;background:#2a2826}
.q4mini span{position:relative;aspect-ratio:3/4}
.q4mini img{position:absolute;left:-.5px;top:-.5px;width:calc(100% + 1px);height:calc(100% + 1px);max-width:none;aspect-ratio:auto;object-fit:cover;display:block}
.roomwrap>.scale{position:static;display:block;margin-top:-4px;color:var(--soft)}
.roomview .scale{top:auto}

/* zoom into the work (30/09) */
.zwrap{width:min(100%,calc((100dvh - 250px) * .75));max-width:600px;display:flex;flex-direction:column;gap:12px}
.zwrap .framed{width:100%;max-width:none}
.zwin{position:relative;overflow:hidden;touch-action:pan-y;cursor:zoom-in;-webkit-user-select:none;user-select:none}
.zwin>*{transform-origin:0 0;will-change:transform}
.zwin img{-webkit-user-drag:none;pointer-events:none}
.zwin.zoomed{touch-action:none;cursor:grab}
.zwin.zoomed:active{cursor:grabbing}
.zctl{display:flex;justify-content:flex-end;gap:8px}
.zctl button{-webkit-appearance:none;appearance:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid #CFCFC8;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;padding:0}
.zctl button:disabled{opacity:.35;cursor:default}
@media (max-width:900px){.zwrap{width:min(100%,420px)}}

/* drag and drop in the composer (30/09) */
.cx-frame img,.cx-thumb img{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cx-frame,.cx-thumb{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cx-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;aspect-ratio:3/4;overflow:hidden;background:#2A2927;box-shadow:0 24px 40px -12px rgba(0,0,0,.5);opacity:.95}
.cx-ghost img{width:100%;height:100%;object-fit:cover;display:block}
body.cx-dragging,body.cx-dragging *{cursor:grabbing!important}
.cx-cell.lifted img{opacity:.2!important}
.cx-cell.drop{z-index:3}
.cx-cell.drop::after{content:"";position:absolute;inset:0;border:4px solid #fff;pointer-events:none;z-index:3}

/* F: four plates floating on a pale backing (James 30/09) */
:root{--backing:#E7E4DE;--plate-sh:rgba(58,54,48,.34)}
.q4mini{background:var(--backing);padding:4.4%;gap:3%;grid-template-rows:1fr 1fr}
.q4mini span{aspect-ratio:auto;box-shadow:1px 3px 6px var(--plate-sh)}
.q4mini img{left:0;top:0;width:100%;height:100%}
.reqprev,.miniq{background:var(--backing);border:3px solid var(--frame);padding:4px;gap:3px}
.reqprev img,.miniq img{box-shadow:0 1px 2px var(--plate-sh)}

/* saved commissions on the wall (30/09) */
.dr-q{display:block;flex:none}
.dr-mini{display:grid;width:64px;aspect-ratio:3/4;border:3px solid var(--frame);padding:3px;gap:2px}
.dr-mini span{position:relative;overflow:hidden;background:#DCD8D0;box-shadow:0 1px 2px var(--plate-sh)}
.dr-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dr-mini{width:84px;border-width:4px}
.dr-item .dr-mini img{width:100%;height:100%;border:0}

/* header: the H. mark only, always (James 30/09) */
.top .mark img,.top.scrolled .mark img{position:static;opacity:1;transform:none;height:26px;transition:none}
.top .mark span{display:none}

/* =========================================================
   Commission v5 (30/09): the Quartet is the hero, centred.
   Head / Quartet / play tools / one primary action / archive below / tray when scrolled away
   ========================================================= */
:root{--backing:#E7E4DE;--plate-sh:rgba(58,54,48,.34)}
.cx-page{--hdr:73px}
@media (max-width:520px){.cx-page{--hdr:108px}}
.cx{border-top:1px solid var(--line)}
.cx-intro{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cx-intro h1{font-size:clamp(30px,3.4vw,46px)}
.cx-intro h1 em{font-style:italic}
.cx-intro p{max-width:40ch;color:var(--soft);font-size:15px;line-height:1.55}
.cx-intro .cx-code{margin-top:4px}
.cx-side{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(var(--qw),100%)}

.cx-hero{--qw:min(calc(100vw - 32px),520px);display:flex;flex-direction:column;align-items:center;gap:20px;padding:26px 16px 48px;scroll-margin-top:calc(var(--hdr) + 8px)}
@media (max-width:620px){.cx-hero{--qw:calc(100vw - 32px)}}
.cx-quartet{width:var(--qw);max-width:100%;aspect-ratio:3/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(var(--qw) * .03);padding:calc(var(--qw) * .044 - 10px);background:var(--backing);border:10px solid var(--frame);box-shadow:0 44px 70px -40px var(--shade),0 16px 22px -14px rgba(20,18,16,.2);perspective:1400px}
@media (max-width:620px){.cx-quartet{border-width:8px;padding:calc(var(--qw) * .044 - 8px)}}
.cx-cell{position:relative;container-type:inline-size;box-shadow:2px 5px 9px var(--plate-sh)}
.cx-cell.empty{box-shadow:none}
.cx-frame{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:#2A2927;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.cx-frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.cx-cell.empty .cx-frame{background:#DCD8D0;box-shadow:inset 0 1px 3px rgba(58,54,48,.18)}
.cx-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--mono);font-size:12px;color:#8E8B84}
.cx-empty b{font-family:var(--sans);font-weight:300;font-size:34px;line-height:1;color:#8E8B84}
.cx-quartet.has-sel .cx-cell:not(.on) img{opacity:.55}
.cx-cell.on{z-index:2}
.cx-cell.on::after{content:"";position:absolute;inset:0;border:4px solid #fff;pointer-events:none;z-index:2}
.cx-cell.on .cx-empty,.cx-cell.on .cx-empty b{color:var(--ink)}
.cx-cell.landed img{animation:land .45s cubic-bezier(.2,.7,.2,1)}
.cx-tools{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.cx-tools button{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;border:0;border-radius:0;background:rgba(255,255,255,.95);color:var(--ink);cursor:pointer;font-size:10px;letter-spacing:.06em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.cx-tools button:hover{background:#fff}
.cx-tools button:active{background:var(--ink);color:#fff}
@container (max-width:200px){.cx-tools span{display:none}.cx-tools{left:5px;right:5px;bottom:5px}.cx-tools button{min-height:40px}}

/* the deal: Surprise me turns each plate over in turn */
@keyframes deal{0%{transform:rotateY(90deg) translateY(-6px);opacity:.2}60%{opacity:1}100%{transform:none;opacity:1}}
.cx-quartet.deal .cx-cell{animation:deal .55s cubic-bezier(.2,.7,.2,1) both}
.cx-quartet.deal .cx-cell:nth-child(2){animation-delay:.09s}
.cx-quartet.deal .cx-cell:nth-child(3){animation-delay:.18s}
.cx-quartet.deal .cx-cell:nth-child(4){animation-delay:.27s}
@keyframes dice{to{transform:rotate(360deg)}}
.cx-surprise.spin svg{animation:dice .6s cubic-bezier(.2,.7,.2,1)}

.cx-hint{margin:0;min-height:1.4em;max-width:var(--qw);text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;line-height:1.35;color:var(--soft)}
.cx-play{display:flex;align-items:center;justify-content:center;gap:10px}
.cx-surprise{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--ink);border-radius:24px;background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.cx-surprise:hover{background:var(--ink);color:var(--paper)}
.cx-ibtn{-webkit-appearance:none;appearance:none;position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #CFCFC8;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-ibtn span{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);white-space:nowrap;pointer-events:none}
.cx-ibtn:hover{border-color:var(--ink)}
.cx-ibtn:disabled{opacity:.35;cursor:default}
.cx-ibtn:disabled:hover{border-color:#CFCFC8}
.cx-go{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:14px;width:100%}
.cx-go .btn{width:100%;min-height:54px}
.cx-roomlink{-webkit-appearance:none;appearance:none;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0 0 1px;margin:0;font-size:14px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-roomlink:hover{color:var(--grey)}
.cx-roomlink:disabled{opacity:.35;cursor:default;border-bottom-color:transparent}
.cx-code{margin:0;color:var(--grey);text-align:center;font-variant-numeric:tabular-nums}

.cx-archive{border-top:1px solid var(--line);padding-block:clamp(32px,4vw,56px) 72px;display:flex;flex-direction:column;gap:20px}
.cx-archive-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.cx-archive-head h2{font-size:clamp(26px,2.6vw,34px)}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
@media (max-width:620px){.cx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}}
.cx-thumb{-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;border-radius:0;background:#E2DFD9;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.cx-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s}
@media (hover:hover){.cx-thumb:hover img{transform:scale(1.04)}}
.cx-thumb.in img{opacity:.35}
.cx-thumb.in::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ink);z-index:1}
.cx-thumb.in::after{content:attr(data-frame);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;z-index:2}
.cx-more{-webkit-appearance:none;appearance:none;align-self:center;min-height:48px;padding:0 28px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cx-more:hover{background:var(--ink);color:#fff}

/* tray: appears only when the Quartet has scrolled away */
.cx-tray{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:10px 10px 10px 12px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(20,18,16,.45);transform:translate(-50%,calc(100% + 30px));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cx-tray.show{transform:translate(-50%,0)}
.cx-traymini{-webkit-appearance:none;appearance:none;flex:none;display:grid;grid-template-columns:repeat(2,22px);grid-template-rows:repeat(2,29px);gap:2px;padding:3px;border:2px solid var(--frame);background:var(--backing);cursor:pointer}
.cx-traymini span{position:relative;overflow:hidden;background:#DCD8D0}
.cx-traymini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-traytext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.cx-traytext .mono{color:var(--grey);font-size:11px}
.cx-tray .btn{min-height:46px;padding:0 20px;font-size:12px}
@media (prefers-reduced-motion:reduce){.cx-tray{transition:none}}

/* request dialog: what happens next */
.req-steps{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.5;color:var(--soft)}
.req-steps b{font-weight:500;color:var(--ink)}

/* the round buttons used by the room view */
.cx-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid #CFCFC8;border-radius:20px;background:var(--paper);color:var(--ink);cursor:pointer;font-size:13px;-webkit-tap-highlight-color:transparent}
.cx-btn:hover{border-color:var(--ink)}

/* wide screens: title | Quartet | tools, everything on one screen */
@media (min-width:1100px){
  .cx-hero{--qw:clamp(380px,calc((100svh - var(--hdr) - 64px) * .75),620px);display:grid;grid-template-columns:minmax(0,1fr) var(--qw) minmax(0,1fr);align-items:center;gap:clamp(36px,4.5vw,80px);padding:28px var(--gut) 36px;min-height:calc(100svh - var(--hdr))}
  .cx-intro{align-items:flex-end;text-align:right}
  .cx-intro p{max-width:30ch}
  .cx-side{align-items:flex-start;width:auto;max-width:330px}
  .cx-hint{text-align:left;max-width:none}
  .cx-play{justify-content:flex-start}
  .cx-go{align-items:flex-start;margin-top:26px}
}

/* play tools: Surprise me on its own, then three quiet labelled buttons */
.cx-play{flex-direction:column;align-items:stretch;gap:12px;width:100%}
.cx-surprise{justify-content:center;white-space:nowrap;min-height:52px;border-radius:26px;font-size:15px}
.cx-small{display:flex;justify-content:center;gap:6px}
.cx-sbtn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border:0;border-radius:20px;background:transparent;color:var(--soft);font-size:13px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-sbtn:hover{background:rgba(20,20,20,.05);color:var(--ink)}
.cx-sbtn:disabled{opacity:.35;cursor:default;background:transparent}
.cx-sbtn span{position:static;transform:none;font-size:13px;letter-spacing:0;text-transform:none;color:inherit}
@media (min-width:1100px){.cx-play{width:300px}.cx-small{justify-content:flex-start;margin-left:-12px}.cx-go{width:300px}}

/* =========================================================
   Home v5 (30/09): the one of one leads. A Quartet dealt live from the archive.
   ========================================================= */
.oo{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:center;gap:clamp(36px,6vw,110px);padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px);max-width:1280px;margin:0 auto}
.oo-work{display:flex;flex-direction:column;align-items:center;gap:14px}
.oo-q{--w:clamp(300px,calc((100svh - 73px - 150px) * .75),560px);-webkit-appearance:none;appearance:none;width:var(--w);max-width:100%;aspect-ratio:3/4;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--w) * .03);padding:calc(var(--w) * .044 - 10px);background:var(--backing);border:10px solid var(--frame);box-shadow:0 50px 80px -44px var(--shade),0 18px 24px -16px rgba(20,18,16,.22);cursor:pointer;perspective:1400px;-webkit-tap-highlight-color:transparent}
.oo-q span{position:relative;overflow:hidden;background:#DCD8D0;box-shadow:2px 5px 9px var(--plate-sh)}
.oo-q img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oo-q.deal span{animation:deal .6s cubic-bezier(.2,.7,.2,1) both}
.oo-q.deal span:nth-child(2){animation-delay:.09s}
.oo-q.deal span:nth-child(3){animation-delay:.18s}
.oo-q.deal span:nth-child(4){animation-delay:.27s}
.oo-under{display:flex;gap:16px;align-items:center}
.oo-pause{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;border-bottom:1px solid var(--line);font-size:13px;color:var(--grey);cursor:pointer}
.oo-pause:hover{color:var(--ink)}
.oo-label{display:flex;flex-direction:column;gap:16px}
.oo-label h1{font-size:clamp(40px,4.6vw,64px);line-height:.98}
.oo-label h1 em{display:block;font-style:italic}
.oo-label p{color:var(--soft);font-size:16px;line-height:1.6;max-width:36ch}
.oo-code{display:flex;flex-direction:column;gap:2px;padding-block:12px;border-block:1px solid var(--line)}
.oo-code .mono{font-size:13px;font-variant-numeric:tabular-nums}
.oo-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:4px}
.oo-cta .btn{min-width:260px}
@media (max-width:860px){
  .oo{grid-template-columns:1fr;gap:28px;padding-block:20px 56px}
  .oo-q{--w:calc(100vw - 32px)}
  .oo-label{align-items:flex-start}
  .oo-cta .btn{width:100%}
}

.rules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px clamp(32px,5vw,80px);padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line);max-width:1280px;margin:0 auto}
.rules-head{display:flex;flex-direction:column;gap:12px}
.rules-head h2{font-size:clamp(32px,3.4vw,48px)}
.rules-head h2 em{font-style:italic}
.rules ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;counter-reset:r}
.rules li{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--ink);counter-increment:r}
.rules li .label::before{content:counter(r) "  ";color:var(--ink)}
.rules li p{color:var(--soft);font-size:15px;line-height:1.6}
.rules .btn{grid-column:2;justify-self:start}
@media (max-width:860px){.rules{grid-template-columns:1fr}.rules ol{grid-template-columns:1fr;gap:22px}.rules .btn{grid-column:1;width:100%}}

/* logo a touch bigger (James 30/09) */
.top .mark img,.top.scrolled .mark img{height:32px}
.thesis h2{grid-column:1/span 9;font-size:clamp(40px,6vw,88px)}.thesis h2 em{font-style:italic}
@media (max-width:860px){.oo-label{align-items:stretch}.oo-label .oo-code,.oo-label .oo-cta{align-self:stretch}.oo-cta .btn{min-width:0}}
/* zoom in the room too (30/09) */
.rscene{position:absolute;inset:0}
.rbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:-2px}
.rbar .scale{position:static;color:var(--soft)}
/* Studio: The Quartet, anatomised (30/09) */
.quartet-sec h2 em{font-style:italic}
.quartet-sec .lede{font-size:18px;line-height:1.6;color:var(--soft)}
.anat{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;counter-reset:a}
.anat li{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--ink);counter-increment:a}
.anat b{font-weight:500;font-size:14px;letter-spacing:.02em}
.anat b::before{content:counter(a) "  ";font-family:var(--mono);font-weight:400;font-size:12px;color:var(--grey)}
.anat span{font-size:15px;line-height:1.55;color:var(--soft)}
.quartet-sec .two{padding-top:18px;border-top:1px solid var(--line);font-size:15px}
@media (max-width:700px){.anat{grid-template-columns:1fr}}
.quartet-sec .two .link{font-size:inherit}
.req .req-steps{padding-bottom:4px}


/* =========================================================
   v6 (30/09): stripped back. Home is the one of one; Collection has its own page.
   One layout for the work everywhere: the Quartet left, a quiet panel right.
   ========================================================= */
.holo,.holo::after{animation:none}

/* footer: five links */
footer{align-items:center;padding-block:44px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;font-size:14px}
.foot-legal{display:flex;gap:20px;color:var(--grey)}
.foot a:hover{color:var(--grey)}

/* ---- home ---- */
.oo{grid-template-columns:auto minmax(260px,340px);justify-content:center;gap:clamp(48px,7vw,120px);padding-block:clamp(28px,4vw,52px) clamp(64px,8vw,112px)}
.oo-q{--w:clamp(320px,calc((100svh - 73px - 120px) * .75),600px)}
.oo-under{width:var(--w);max-width:100%;justify-content:space-between;align-self:center;margin-top:4px}
.oo-work{--w:clamp(320px,calc((100svh - 73px - 120px) * .75),600px)}
.oo-under .mono{color:var(--grey);font-size:12px;font-variant-numeric:tabular-nums}
.oo-ctl{display:flex;gap:18px}
.oo-ctl button{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;font-size:13px;color:var(--grey);cursor:pointer;border-bottom:1px solid transparent}
.oo-ctl button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.oo-label{gap:20px}
.oo-label h1{font-size:clamp(44px,4.6vw,68px)}
.oo-label p{font-size:16px;max-width:26ch}
.oo-label .btn{align-self:flex-start;margin-top:6px}
@media (max-width:860px){.oo{grid-template-columns:1fr}.oo-work{--w:calc(100vw - 32px)}.oo-label .btn{align-self:stretch}}

.steps{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px)}
.steps ol{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:8px;counter-increment:s}
.steps li .label::before{content:counter(s) "   ";color:var(--ink)}
.steps li p{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.3}
@media (max-width:760px){.steps ol{grid-template-columns:1fr;gap:22px}}

.gates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding-block:0 clamp(64px,8vw,112px);max-width:1100px;margin:0 auto;box-sizing:content-box}
.gate{display:flex;flex-direction:column;gap:10px}
.gate .pic{aspect-ratio:5/4;display:grid;place-items:center;background:#EAE8E3;overflow:hidden}
.gate .pic .framed{width:40%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gate .pic > img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gate:hover .pic .framed,.gate:hover .pic > img{transform:scale(1.03)}
.gate .label{margin-top:6px}
.gate .gt{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.15}
.gate .gt em{font-style:italic}
@media (max-width:760px){.gates{grid-template-columns:1fr}}

/* ---- collection page ---- */
.coll-head h1{font-size:clamp(40px,5vw,72px)}

/* ---- commission: the work left, one panel right ---- */
.cx-hero{--qw:min(calc(100vw - 32px),520px);display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 16px 48px}
.cx-panel{display:contents}
.cx-title{order:-1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cx-title h1{font-size:clamp(30px,3vw,44px)}
.cx-title h1 em{font-style:italic}
.cx-hint{font-size:17px}
.cx-play{flex-direction:column;align-items:center;gap:10px;width:auto}
.cx-surprise{min-height:44px;padding:0 20px;border-radius:22px;font-size:14px}
.cx-go{margin-top:8px;width:min(var(--qw),100%)}
.cx-go .btn[disabled]{background:transparent;color:var(--ink);opacity:.28}
.cx-code{min-height:1.2em}
@media (min-width:1000px){
  .cx-hero{--qw:clamp(380px,calc((100svh - var(--hdr) - 64px) * .75),620px);display:grid;grid-template-columns:var(--qw) minmax(280px,320px);justify-content:center;align-items:center;gap:clamp(48px,6vw,110px);padding:28px var(--gut) 36px;min-height:calc(100svh - var(--hdr))}
  .cx-panel{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .cx-title{order:0;align-items:flex-start;text-align:left;gap:10px;margin-bottom:6px}
  .cx-hint{text-align:left;font-size:17px}
  .cx-play{align-items:flex-start;width:auto}
  .cx-small{justify-content:flex-start;margin-left:-12px}
  .cx-go{align-items:flex-start;width:100%;margin-top:18px}
  .cx-code{text-align:left}
}

/* ---- Studio ---- */
.anat{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin-top:6px}
.anat li{gap:4px}
.anat b{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.anat b::before{content:none}
.anat span{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.25;color:var(--ink)}
.prices{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.prices th,.prices td{padding:14px 0;border-bottom:1px solid var(--line);text-align:right;font-weight:400}
.prices thead th{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding-top:0}
.prices tbody th{text-align:left;display:flex;flex-direction:column;gap:2px}
.prices tbody th a{font-family:var(--serif);font-size:22px;font-weight:300;border-bottom:0}
.prices tbody th span{font-size:13px;color:var(--grey)}
.st-sec .body h2 em{font-style:italic}

/* ---- viewing room panel: one line, not a list ---- */
.pline{margin:0;font-size:13.5px;color:var(--grey)}

@media (max-width:860px){.oo-work,.oo-q{--w:calc(100vw - 32px)}.oo-under{width:100%}}
@media (max-width:700px){.artist-intro .portrait{width:100%;max-width:none}.artist-intro .portrait img{width:100%;height:auto}}

/* =========================================================
   v7 (30/09): everything is one of one. Harrop's own, the Register, entry pages.
   ========================================================= */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot);vertical-align:1px;margin-right:7px}
.card .pr.sold{color:var(--ink)}
.coll-head{align-items:flex-end}
.coll-head .ch-t{display:flex;flex-direction:column;gap:12px}
.coll-head .ch-t p{color:var(--soft);font-size:16px;max-width:44ch}

/* viewing room: sold state and quiet previous / next */
.panel .status{margin:0;font-size:15px}
.pnav{display:flex;justify-content:space-between;margin-top:auto;padding-top:12px}
.pnav button{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0 0 2px;border-bottom:1px solid currentColor;font-size:14px;cursor:pointer}
.pnav button:hover{color:var(--grey)}

/* home: three gateways */
.gates{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1280px}
.gate .pic .framed{width:44%}
.gate .gt{font-size:23px}
.reg-pic{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:0 14%;font-family:var(--mono);font-size:13px;color:var(--grey);background:#EAE8E3}
.reg-pic span{display:block;width:100%;padding-bottom:10px;border-bottom:1px solid #D8D5CE}
.reg-pic span:nth-child(2){color:var(--ink);font-size:15px}
@media (max-width:900px){.gates{grid-template-columns:1fr}}

/* a Quartet drawn from its four plates (Register) */
.rq{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/4;background:var(--backing);border:3px solid var(--frame);padding:5%;gap:3.5%}
.rq span{position:relative;overflow:hidden;background:#DCD8D0;box-shadow:0 1px 2px var(--plate-sh)}
.rq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rq-lg{--w:clamp(300px,calc((100svh - 73px - 96px) * .75),560px);width:var(--w);max-width:100%;border-width:10px;padding:calc(var(--w) * .044 - 10px);gap:calc(var(--w) * .03);box-shadow:0 44px 70px -40px var(--shade),0 16px 22px -14px rgba(20,18,16,.2)}
.rq-lg span{box-shadow:2px 5px 9px var(--plate-sh)}
.rq-sm{width:64px}

/* the Register */
.reg{padding-block:clamp(40px,6vw,88px) clamp(64px,8vw,112px);max-width:1280px;margin:0 auto;box-sizing:content-box}
.reg-head{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.reg-head h1{font-size:clamp(40px,5vw,72px)}
.reg-head h1 em{font-style:italic}
.reg-head p{color:var(--soft);font-size:16px;line-height:1.6;max-width:48ch}
.reg-list{display:flex;flex-direction:column}
.reg-row{display:grid;grid-template-columns:64px 110px 180px minmax(0,1fr) 140px 170px;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px}
a.reg-row:hover{background:rgba(20,20,20,.025)}
.reg-row .rn{font-family:var(--mono);font-size:12px;color:var(--grey)}
.reg-row .mono{font-size:13px}
.reg-th{padding:10px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.reg-row.spec{opacity:.55}
.reg-row.spec:hover{opacity:.8}
.reg-empty{margin:0;padding:28px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-style:italic;font-weight:300;font-size:21px;color:var(--soft)}
@media (max-width:860px){
  .reg-row{grid-template-columns:56px minmax(0,1fr);gap:4px 16px;align-items:start}
  .reg-row .rq{grid-row:span 4}
  .reg-row .rc{color:var(--grey);font-size:13px}
  .reg-th{display:none}
}

/* an entry */
.entry{display:grid;grid-template-columns:auto minmax(260px,360px);justify-content:center;align-items:center;gap:clamp(48px,7vw,120px);padding-block:clamp(28px,4vw,48px) clamp(64px,8vw,104px)}
.en-work{display:flex;justify-content:center}
.en-panel{display:flex;flex-direction:column;gap:20px}
.en-code{font-family:var(--mono);font-weight:400;font-size:clamp(22px,2.2vw,30px);letter-spacing:.02em}
.en-dl{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.en-dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.en-dl dt{color:var(--grey)}
.en-dl dd{margin:0;text-align:right}
.en-note{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;color:var(--soft)}
.en-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
@media (max-width:860px){.entry{grid-template-columns:1fr}.rq-lg{--w:calc(100vw - 32px)}}
@media (max-width:860px){.reg-row .rq{grid-column:1;grid-row:1 / span 5}.reg-row > :not(.rq){grid-column:2}}

/* =========================================================
   v8 - founding price tied to the Register, Harrop's own on request, designers and venues (30/09)
   ========================================================= */
/* the price line: price in ink, the ladder note beside it */
.oo-price,.cx-price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14px;line-height:1.4}
.oo-price b,.cx-price b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.oo-price a,.cx-price a{color:var(--grey);border-bottom:1px solid var(--line)}
.oo-price a:hover,.cx-price a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.oo-label .oo-price{padding-top:14px;border-top:1px solid var(--line);max-width:340px}
.cx-price{font-size:13px;justify-content:center;margin-top:4px}
@media (min-width:1000px){.cx-price{justify-content:flex-start}}

/* home: one quiet line for designers and venues */
.band{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;width:min(1280px,calc(100% - 2 * var(--gut)));box-sizing:border-box;margin:0 auto clamp(56px,7vw,96px);padding:22px 0;border-block:1px solid var(--line)}
.band p{margin:0;flex:1 1 320px;font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.3}
@media (min-width:901px){.band{margin-top:-24px}}

/* the Register: heading beside the price ladder */
.reg-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:32px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.reg-top .reg-head{margin-bottom:0}
@media (max-width:900px){.reg-top{grid-template-columns:1fr}}
.ladder{display:flex;flex-direction:column;gap:12px;scroll-margin-top:calc(var(--hdr,73px) + 16px)}
.ladder ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ladder li{display:grid;grid-template-columns:5.8em minmax(0,1fr) minmax(0,1fr) 7.6em;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--grey)}
.ladder li span:nth-child(2),.ladder li span:nth-child(3){text-align:right}
.ladder li span{white-space:nowrap}
.ladder li.lh{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding-block:9px}
.ladder li.now{color:var(--ink)}
.ladder li.now span:first-child{font-weight:500}
.ladder .lt-now{text-align:right;font-size:12.5px}
.ladder li.now .lt-now::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:1px}
.ladder .small{margin:0}

/* Studio prices: on request spans both sizes */
.prices td[colspan]{color:var(--grey)}

/* enquiry for Harrop's own: one framed work in place of four plates */
.reqprev.eqprev{display:block;padding:0;border:0;background:none}
.reqprev.eqprev img{box-shadow:none;border:4px solid var(--frame)}

/* ---- for designers and venues ---- */
.trade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px clamp(40px,6vw,96px);align-items:center;padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,88px);max-width:1280px;margin:0 auto;box-sizing:content-box}
.tr-head{display:flex;flex-direction:column;gap:18px}
.tr-head h1{font-size:clamp(40px,4.6vw,68px);line-height:.98}
.tr-head h1 em{display:block;font-style:italic}
.tr-head p{margin:0;color:var(--soft);font-size:16px;line-height:1.6;max-width:44ch}
.tr-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);align-items:center;padding:clamp(28px,5vw,64px) clamp(20px,4vw,52px);background:#EAE8E3}
.tr-set .framed{padding:3px}
@media (max-width:900px){.trade{grid-template-columns:1fr}}
.tr-terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tr-terms li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.tr-form{padding:0;border:0;background:none;max-width:520px}
.tr-form .btn{align-self:flex-start}
@media (max-width:760px){.tr-form .btn{align-self:stretch}}
.tr-form-sec .body{grid-column:4/span 7}
@media (max-width:900px){.tr-form-sec .body{grid-column:1/-1}}

.st-sec .body p.small{font-size:13.5px;line-height:1.6;color:var(--grey)}
/* request and enquiry dialogs on a phone: the title stays on one or two lines */
@media (max-width:520px){.reqtop{grid-template-columns:64px 1fr auto;gap:14px}.reqtop h2{font-size:26px!important;line-height:1.05}}

/* ---- In a room, decluttered (30/09): six wall chips instead of two sliders and a pill ---- */
.rbar{flex-wrap:wrap;gap:10px 16px;margin-top:2px}
.rbar .scale{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;color:var(--grey)}
.walls{display:flex;gap:2px;margin-left:auto}
.walls button{-webkit-appearance:none;appearance:none;width:34px;height:34px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.walls i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,20,20,.16);transition:box-shadow .2s}
.walls button[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(20,20,20,.16),0 0 0 2px var(--wall-bg,#F4F4F2),0 0 0 3px var(--ink)}
.walls button:hover i{box-shadow:inset 0 0 0 1px rgba(20,20,20,.16),0 0 0 2px #F4F4F2,0 0 0 3px #9A9A94}
.walls button[aria-pressed="true"]:hover i{box-shadow:inset 0 0 0 1px rgba(20,20,20,.16),0 0 0 2px #F4F4F2,0 0 0 3px var(--ink)}
.rbar .zctl{margin-left:6px}
.roomview.darkwall .furn g{stroke:#D6D1C5}
/* phones: pinch and double-tap already zoom, so the buttons go; the room is taller so the work reads bigger */
@media (hover:none) and (pointer:coarse){.zctl{display:none}}
@media (max-width:600px){
  .roomview{aspect-ratio:4/5}
  .rbar{justify-content:space-between}
  .walls{margin-left:0}
  .panel h2{font-size:32px}
}

/* no running numbers on one of ones (30/09): the code is the identity, the date gives the order */
.reg-row{grid-template-columns:64px 200px minmax(0,1fr) 140px 170px}
.reg-row .spec-tag{display:block;margin-top:3px;font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
@media (max-width:860px){.reg-row{grid-template-columns:56px minmax(0,1fr)}.reg-row .rq{grid-row:1 / span 4}}
.ladder li{grid-template-columns:7.2em minmax(0,1fr) minmax(0,1fr) 7.2em}
/* the composer's price: quiet, one fact, no sales line (30/09) */
.cx-price{color:var(--grey)}

/* =========================================================
   Studio v2 (30/09): the story carries the page, one drawing of the object, fewer headline tricks
   ========================================================= */
.sx-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:end;max-width:1280px;margin:0 auto;box-sizing:content-box;padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,88px)}
.sx-hero-t{display:flex;flex-direction:column;gap:18px;padding-bottom:8px}
.sx-hero h1{font-size:clamp(76px,11vw,168px);line-height:.86;letter-spacing:-.03em}
.sx-hero h1 em{font-style:normal;color:var(--grey)}
.sx-stand{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.25;max-width:24ch;color:var(--ink)}
.sx-portrait{margin:0}
.sx-portrait img{width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover}
@media (max-width:760px){.sx-hero{grid-template-columns:1fr}.sx-portrait{order:-1}}

.sx-story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px;border-top:1px solid var(--line);padding-block:clamp(56px,8vw,120px);max-width:1280px;margin:0 auto;box-sizing:content-box}
.sx-lede{grid-column:1/span 10;margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,54px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.sx-body{grid-column:6/span 6;display:flex;flex-direction:column;gap:22px}
.sx-body p{margin:0;font-size:17px;line-height:1.65;color:var(--soft)}
.sx-body .sx-coda{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.25;color:var(--ink)}
.sx-coda em{font-style:italic}
@media (max-width:900px){.sx-lede,.sx-body{grid-column:1/-1}}

.sx-head{display:flex;flex-direction:column;gap:14px;max-width:720px;margin-bottom:clamp(32px,4vw,56px)}
.sx-head h2{font-size:clamp(36px,4vw,60px)}
.sx-head h2 em{font-style:italic}
.sx-head p{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:56ch}
.sx-make,.sx-prov,.sx-collect{border-top:1px solid var(--line);padding-block:clamp(56px,7vw,110px);max-width:1280px;margin:0 auto;box-sizing:content-box}

.sx-explode{margin:0;background:#EFEEEA;padding:clamp(12px,3vw,40px) clamp(8px,2vw,32px)}
.sx-explode svg{display:block;width:100%;height:auto}
.sx-layers{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:l;text-align:center}
.sx-layers li{display:flex;flex-direction:column;gap:6px;counter-increment:l;padding-inline:4%}
.sx-layers b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sx-layers b::before{content:counter(l) "  ";font-family:var(--mono);font-weight:400;color:var(--grey)}
.sx-layers span{font-family:var(--serif);font-weight:300;font-size:19px;line-height:1.3;color:var(--ink)}
@media (max-width:620px){.sx-layers{gap:10px}.sx-layers li{padding-inline:0}.sx-layers b{font-size:10.5px;letter-spacing:.08em}.sx-layers span{font-size:14.5px}}

.sx-prov-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,4fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.sx-three,.sx-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sx-three li,.sx-facts li{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);gap:6px 24px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.sx-three li:last-child,.sx-facts li:last-child{border-bottom:1px solid var(--line)}
.sx-three b,.sx-facts b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sx-three span{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.35}
.sx-three span .link{font-family:var(--sans);font-size:14px;margin-left:4px;white-space:nowrap}
.sx-facts span{font-size:16px;line-height:1.5;color:var(--soft)}
@media (max-width:900px){.sx-prov-grid{grid-template-columns:1fr}.sx-prov .cert{max-width:380px}}
@media (max-width:560px){.sx-three li,.sx-facts li{grid-template-columns:1fr}}

.sx-col-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.sx-prices{display:flex;flex-direction:column;gap:14px}
.sx-prices .small{margin:0;font-size:13.5px;line-height:1.6}
@media (max-width:900px){.sx-col-grid{grid-template-columns:1fr}}
.prices thead th{white-space:nowrap}
@media (max-width:560px){.prices thead th{letter-spacing:.06em;font-size:10.5px}.prices td{padding-left:12px}}

/* =========================================================
   Home as a splash (30/09): one work on the wall, a museum label beside it, nothing else
   ========================================================= */
.splash{--sw:clamp(300px,calc((100svh - 73px - 96px) * .75),640px);min-height:calc(100svh - 73px);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:clamp(16px,3vh,40px) var(--gut)}
.sp-work{grid-column:2;display:flex;justify-content:center}
.splash .oo-q{--w:var(--sw)}
.sp-label{grid-column:3;align-self:end;justify-self:start;margin:0 0 4px clamp(32px,4vw,64px);display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:240px}
.sp-artist{font-size:13.5px;font-weight:500;letter-spacing:.01em}
.sp-label h1{font-size:25px;font-style:italic;font-weight:300;line-height:1.15;margin-bottom:6px}
.sp-label p{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft)}
.sp-label .sp-kick{color:var(--ink)}
.sp-code{color:var(--grey);font-size:11.5px;margin-top:10px;font-variant-numeric:tabular-nums;min-height:1.4em}
.sp-label .btn{margin-top:14px;min-height:44px;padding:0 20px;font-size:12px}
.sp-label .oo-ctl{margin-top:10px}
.home footer{margin-top:0}
@media (max-width:1100px){
  .splash{grid-template-columns:1fr;align-content:center;justify-items:center;gap:22px}
  .sp-work,.sp-label{grid-column:1}
  .sp-label{justify-self:center;align-self:start;margin:0;width:var(--sw);max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end}
  .sp-label > *{grid-column:1}
  .sp-label .oo-ctl{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:2px}
  .sp-label .btn{grid-column:1 / -1}
}
@media (max-width:760px){
  .splash{--sw:min(calc(100vw - 32px),max(280px,calc((100svh - 108px - 210px) * .75)));min-height:0;align-content:start;padding-top:14px;padding-bottom:40px}
  .sp-label .btn{align-self:stretch;justify-self:stretch;width:100%}
}
@media (max-width:760px){
  .splash{--sw:min(calc(100vw - 32px),max(280px,calc((100svh - 108px - 220px) * .75)));gap:18px}
  .sp-label p:not(.sp-kick){display:none}
  .sp-label h1{margin-bottom:2px}
  .sp-code{margin-top:4px}
  .sp-label .btn{margin-top:10px}
}

/* Home, bare (30/09): no header, no logo, no footer. The work, its code, and Enter. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.splash.bare{--sw:min(calc(100vw - 48px),calc((100svh - 128px) * .75),660px);min-height:100svh;display:grid;place-items:center;grid-template-columns:1fr;padding:32px 24px;gap:0}
.splash.bare .sp-work{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:18px}
.splash.bare .oo-q{--w:var(--sw);display:grid}
.sp-cap{width:var(--sw);max-width:100%;display:flex;justify-content:space-between;align-items:baseline}
.sp-cap .mono{color:var(--grey);font-size:11.5px;font-variant-numeric:tabular-nums}
.sp-cap a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding-bottom:3px;border-bottom:1px solid var(--ink);transition:color .2s,border-color .2s}
.sp-cap a:hover{color:var(--grey);border-bottom-color:var(--grey)}
.splash.bare .oo-q:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
@media (max-width:760px){.splash.bare{--sw:min(calc(100vw - 32px),calc((100svh - 110px) * .75));min-height:100svh;align-content:center;padding:24px 16px}}
/* the splash caption (30/09): name and code, one line, the call to action; a hairline fills towards the next deal */
.splash.bare{--sw:min(calc(100vw - 48px),calc((100svh - 230px) * .75),620px)}
.splash.bare .sp-work{gap:16px}
.sp-cap{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:stretch}
.sp-tick{height:1px;background:var(--line);overflow:hidden}
.sp-tick i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.sp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sp-name{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.sp-name em{font-style:normal;font-weight:400;color:var(--grey);margin-left:10px}
.sp-row .mono{color:var(--grey);font-size:11.5px;font-variant-numeric:tabular-nums}
.sp-line{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.6vw,21px);line-height:1.3;color:var(--ink);max-width:34ch}
.sp-go{align-self:flex-start;margin-top:4px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding-bottom:3px;border-bottom:1px solid var(--ink);transition:color .2s,border-color .2s}
.sp-go:hover{color:var(--grey);border-bottom-color:var(--grey)}
.sp-cap > a#ookeep{font-size:11.5px}
@media (max-width:760px){.splash.bare{--sw:min(calc(100vw - 32px),calc((100svh - 200px) * .75))}.sp-line{font-size:17px}}

/* =========================================================
   Home: the moment (30/09). The work, a five-second timer, two lines, Keep them. Nothing else.
   ========================================================= */
.moment{--sw:min(calc(100vw - 48px),calc((100svh - 250px) * .75),600px);min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:32px 24px;text-align:center}
.mo-work{display:flex;flex-direction:column;gap:14px;width:var(--sw)}
.moment .oo-q{--w:var(--sw);display:grid}
.moment .oo-q:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.mo-tick{height:1px;background:var(--line);overflow:hidden;margin-top:10px}
.mo-tick i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.mo-line{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,27px);line-height:1.3;color:var(--ink);text-wrap:balance}
.mo-line em{font-style:italic}
.mo-go{min-height:48px;padding:0 34px;font-size:12px}
@media (max-width:760px){.moment{--sw:min(calc(100vw - 32px),calc((100svh - 230px) * .75));gap:20px;padding:24px 16px}.mo-line{font-size:19px}.mo-go{align-self:stretch}}

/* =========================================================
   v9 (30/09 evening): the moment, dark; composer opening; on the wall; sliders; footer stacked; fifty a year
   ========================================================= */
/* splash: a dark room, the work lit, two lines, Keep them */
body.dark{background:#121211;color:#ECE9E2}
.moment{--sw:min(calc(100vw - 48px),calc((100svh - 300px) * .75),560px);min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:32px 24px 56px;text-align:center;position:relative;
  background:radial-gradient(ellipse 60% 55% at 50% 36%,#2E2C29 0%,#1A1918 55%,#121211 100%)}
.mo-work{display:flex;flex-direction:column;gap:14px;width:var(--sw)}
.moment .oo-q{--w:var(--sw);display:grid;border-color:#0A0A09;box-shadow:0 60px 90px -40px rgba(0,0,0,.85),0 22px 30px -18px rgba(0,0,0,.6)}
.moment .oo-q:focus-visible{outline:2px solid #ECE9E2;outline-offset:6px}
.mo-tick{height:1px;background:rgba(236,233,226,.14);overflow:hidden;margin-top:12px}
.mo-tick i{display:block;height:100%;background:#ECE9E2;transform-origin:0 50%;transform:scaleX(0)}
.mo-line{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.3;color:#ECE9E2;text-wrap:balance}
.mo-line em{font-style:italic;color:#A9A49A}
.mo-go{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:#ECE9E2;padding:14px 30px;border:1px solid rgba(236,233,226,.55);transition:background .25s,color .25s,border-color .25s}
.mo-go:hover{background:#ECE9E2;color:#121211;border-color:#ECE9E2}
.mo-name{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:#6F6B64}
@media (max-width:760px){.moment{--sw:min(calc(100vw - 32px),calc((100svh - 250px) * .75));gap:20px;padding:24px 16px 52px}.mo-line{font-size:19px}}

/* composer: a bold opening, then the making */
.cx-open{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:1280px;margin:0 auto;box-sizing:content-box;padding-block:clamp(48px,9vh,110px) clamp(40px,7vh,90px)}
.cx-open h1{font-size:clamp(52px,8vw,124px);line-height:.92;letter-spacing:-.025em}
.cx-open h1 em{font-style:italic}
.cx-open p{margin:0;max-width:52ch;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--soft)}
.cx-begin{margin-top:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid var(--ink)}
.cx-hero{border-top:1px solid var(--line)}
.cx-title h1{display:none}
.cx-price{margin:0;font-size:12.5px;color:var(--grey);justify-content:flex-start}
/* after a deal the Quartet steps back onto the wall */
.cx-quartet{transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s}
.cx-hero.onwall .cx-quartet{transform:scale(.8);box-shadow:0 60px 90px -44px var(--shade),0 20px 26px -16px rgba(20,18,16,.24);cursor:zoom-in}
@media (prefers-reduced-motion:reduce){.cx-quartet{transition:none}}

/* In a room: two slim sliders and White */
.wallctl{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 1 360px;min-width:0}
.wslide{-webkit-appearance:none;appearance:none;flex:1 1 0;min-width:0;height:22px;margin:0;background:transparent;cursor:pointer}
.wslide::-webkit-slider-runnable-track{height:3px;border-radius:2px}
.wslide::-moz-range-track{height:3px;border-radius:2px}
.ws-h::-webkit-slider-runnable-track{background:linear-gradient(90deg,hsl(0,24%,72%),hsl(60,24%,72%),hsl(120,24%,72%),hsl(180,24%,72%),hsl(240,24%,72%),hsl(300,24%,72%),hsl(359,24%,72%))}
.ws-h::-moz-range-track{background:linear-gradient(90deg,hsl(0,24%,72%),hsl(60,24%,72%),hsl(120,24%,72%),hsl(180,24%,72%),hsl(240,24%,72%),hsl(300,24%,72%),hsl(359,24%,72%))}
.ws-l::-webkit-slider-runnable-track{background:linear-gradient(90deg,#26241F,#8C877F,#F4F2EE)}
.ws-l::-moz-range-track{background:linear-gradient(90deg,#26241F,#8C877F,#F4F2EE)}
.wslide::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.wslide::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
.ws-white{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0 0 2px;font:inherit;font-size:12px;color:var(--grey);border-bottom:1px solid transparent;cursor:pointer;white-space:nowrap}
.ws-white[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.roomview .furn{display:none}
@media (max-width:600px){.wallctl{flex:1 1 100%;margin-left:0}}

/* footer: stacked */
footer.wrap{flex-direction:column;align-items:flex-start;gap:22px}
footer nav.foot{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
footer nav.foot a{margin:0}
footer .foot-legal{display:flex;gap:18px;margin-top:10px}

/* the Register: this year's count */
.yearbox{border-top:1px solid var(--ink);padding-top:14px;gap:10px}
.yb-n{margin:0;font-family:var(--serif);font-weight:300;display:flex;align-items:baseline;gap:10px}
.yb-n b{font-weight:300;font-size:clamp(56px,6vw,84px);line-height:.9}
.yb-n span{font-size:22px;color:var(--grey)}
.reg-demo{margin:14px 0 0;font-size:12px;color:var(--grey)}

/* Studio: designers and venues, given a real section */
.sx-trade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px clamp(40px,6vw,96px);align-items:center;border-top:1px solid var(--line);padding-block:clamp(56px,7vw,110px);max-width:1280px;margin:0 auto;box-sizing:content-box}
.sx-trade-t{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sx-trade-t h2{font-size:clamp(36px,4vw,60px)}
.sx-trade-t h2 em{font-style:italic}
.sx-trade-t p{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:48ch}
.sx-trade-t .btn{margin-top:8px}
@media (max-width:900px){.sx-trade{grid-template-columns:1fr}}

/* Splash, final (30/09): a slate wall so the black frame and pale board both read; the work a little smaller; One of one, Harrop, Enter */
body.slate-body{background:#3F4448}
.slate{--sw:min(calc(100vw - 96px),calc((100svh - 240px) * .75),470px);min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:40px 24px 88px;position:relative;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,#51565B 0%,#454A4E 45%,#373B3E 100%);color:#EDEAE3}
.slate .oo-q{--w:var(--sw);display:grid;border-color:#141414;box-shadow:0 46px 70px -34px rgba(10,12,14,.7),0 16px 22px -12px rgba(10,12,14,.45)}
.slate .oo-q:focus-visible{outline:1px solid #EDEAE3;outline-offset:8px}
.sl-cap{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sl-title{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1;letter-spacing:-.01em}
.sl-name{font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:#AEB2B5;padding-left:.42em}
.sl-enter{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 30px);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#EDEAE3;padding:0 0 4px .3em;border-bottom:1px solid rgba(237,234,227,.5);transition:border-color .2s}
.sl-enter:hover{border-bottom-color:#EDEAE3}
@media (max-width:760px){.slate{--sw:min(62vw,calc((100svh - 260px) * .75));gap:28px;padding:32px 20px 84px}.slate .oo-q{border-width:6px}.sl-title{font-size:24px}}

/* =========================================================
   v10 (30/09 evening): no background scroll, a real floor, stronger sliders, footer in sections, room to breathe on phones
   ========================================================= */
/* nothing scrolls behind an open room, drawer or form */
html:has(dialog[open]){overflow:hidden}
/* a floor you can read: oak boards and a white skirting */
.roomview .floor{background:linear-gradient(180deg,#8A7560 0%,#A08A72 45%,#9A846C 100%)!important;box-shadow:inset 0 1px 0 rgba(0,0,0,.18)}
.roomview .floor::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 17%,rgba(60,44,30,.16) 17% calc(17% + 1px));pointer-events:none}
.roomview .skirt{background:#F6F4EF!important;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.06)!important;height:calc(100% * 9 / 256)!important}
.roomview.darkwall .skirt{background:#EDEAE3!important}
/* sliders: a touch thicker, a white swatch to reset */
.wslide{height:28px}
.wslide::-webkit-slider-runnable-track{height:6px;border-radius:3px}
.wslide::-moz-range-track{height:6px;border-radius:3px}
.wslide::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;border:1.5px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.wslide::-moz-range-thumb{width:18px;height:18px;border:1.5px solid var(--ink)}
.ws-white{width:22px;height:22px;flex:none;border-radius:50%;padding:0;background:#F1F0EC;border:1px solid #C9C6BE!important;box-shadow:none}
.ws-white[aria-pressed="true"]{box-shadow:0 0 0 2px var(--wall,#F4F4F2),0 0 0 3px var(--ink);border-color:#C9C6BE!important}
/* sizes: named, centimetres small */
.size span{font-variant-numeric:tabular-nums}
.prices thead th small{display:block;font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--grey);margin-top:2px}
/* footer in sections */
footer.site-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand cols" "legal legal";gap:36px 56px;align-items:start;padding-block:56px 32px}
.f-brand{grid-area:brand;display:flex;flex-direction:column;gap:10px}
.f-brand p{margin:0;font-size:13.5px;color:var(--grey)}
.f-cols{grid-area:cols;display:grid;grid-template-columns:repeat(3,auto);gap:24px clamp(32px,5vw,72px)}
.f-cols div{display:flex;flex-direction:column;gap:8px;font-size:14px}
.f-cols .label{margin-bottom:4px}
.f-cols span:not(.label){color:var(--grey);font-size:13px}
.f-cols a:hover{color:var(--grey)}
.f-legal{grid-area:legal;display:flex;gap:22px;border-top:1px solid var(--line);padding-top:18px;font-size:12.5px;color:var(--grey)}
.f-legal span{margin-right:auto}
@media (max-width:760px){footer.site-foot{grid-template-columns:1fr;grid-template-areas:"brand" "cols" "legal"}.f-cols{grid-template-columns:1fr 1fr}.f-cols div:last-child{grid-column:1 / -1}}
/* By Harrop on phones: a margin of wall around each work */
@media (max-width:760px){#own .card .framed{margin-inline:8%}}
/* stepping back hides the editing tools and the selected-frame ring */
.cx-hero.onwall .cx-tools{opacity:0;pointer-events:none}
.cx-hero.onwall .cx-frame[aria-pressed="true"]{outline:none;box-shadow:none}
.cx-hero.onwall .cx-frame[aria-pressed="true"]::after{opacity:0}
/* splash v3 (30/09): a painted wall that changes with each deal, the H. mark, One of one as the way in */
body.slate-body{background:#E4DDD0}
.slate{--paint:#E4DDD0;--ink-on:#1B1A19;background:var(--paint);transition:background-color 1.1s ease;color:var(--ink-on);padding:32px 24px 48px;gap:30px;--sw:min(calc(100vw - 96px),calc((100svh - 260px) * .75),470px)}
.slate.dk{--ink-on:#F1EEE7}
.slate::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 65% at 50% 42%,rgba(255,255,255,.10),rgba(0,0,0,.10) 100%)}
.slate > *{position:relative}
.slate .oo-q{padding:calc(var(--w) * .075);gap:calc(var(--w) * .045);border-width:9px;box-shadow:0 40px 60px -30px rgba(20,18,16,.5),0 14px 20px -12px rgba(20,18,16,.3)}
.sl-mark{position:absolute;top:calc(env(safe-area-inset-top,0px) + 28px);left:50%;transform:translateX(-50%);width:44px;height:auto;transition:filter 1.1s ease}
.slate.dk .sl-mark{filter:invert(1) brightness(1.1)}
.sl-title{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--ink-on);transition:color 1.1s ease;padding-bottom:4px;border-bottom:1px solid transparent}
.sl-title:hover{border-bottom-color:currentColor}
.slate .oo-q:focus-visible,.sl-title:focus-visible{outline:1px solid var(--ink-on);outline-offset:8px}
@media (max-width:760px){.slate{--sw:min(64vw,calc((100svh - 250px) * .75));padding:84px 20px 56px}.slate .oo-q{border-width:6px}.sl-title{font-size:30px}.sl-mark{width:38px}}
/* one scale everywhere (30/09): the composer's Quartet sits a step back, like the splash, with the same wide mount */
.cx-quartet{padding:calc(var(--qw) * .075);gap:calc(var(--qw) * .045);border-width:9px}
.cx-hero.onwall .cx-quartet{transform:none}
@media (min-width:1000px){.cx-hero{--qw:min(calc((100svh - var(--hdr) - 170px) * .75),470px)}}
@media (max-width:999px){.cx-hero{--qw:min(72vw,470px)}}
@media (max-width:620px){.cx-quartet{border-width:6px;padding:calc(var(--qw) * .075)}}
/* splash v4 (30/09): a gallery wall seen for the first time. Mark top left, two quiet links, the work, a label with two ways in */
.slate{--sw:min(calc(100vw - 80px),calc((100svh - 300px) * .75),500px);justify-content:center;gap:36px;padding:96px 24px 56px}
.slate .oo-q{padding:calc(var(--w) * .052);gap:calc(var(--w) * .034);border-width:9px}
.sl-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 26px) clamp(20px,3vw,40px) 0}
.sl-mark{position:static;transform:none;width:auto;display:block;line-height:0}
.sl-mark img{width:30px;height:auto;transition:filter 1.1s ease}
.slate.dk .sl-mark img{filter:invert(1) brightness(1.1)}
.slate .sl-mark{filter:none}
.sl-top nav{display:flex;gap:26px}
.sl-top nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-on);opacity:.72;transition:opacity .2s,color 1.1s ease}
.sl-top nav a:hover{opacity:1}
.sl-label{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ink-on);transition:color 1.1s ease}
.sl-label .sl-title{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(30px,2.8vw,40px);line-height:1;border:0;padding:0}
.sl-line{margin:0;font-size:14px;letter-spacing:.01em;opacity:.78}
.sl-cta{display:flex;align-items:center;gap:24px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.sl-go{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-on);padding:13px 24px;border:1px solid currentColor;transition:background .25s,color .25s}
.sl-go:hover{background:var(--ink-on);color:var(--paint)}
.sl-alt{font-size:13px;color:var(--ink-on);opacity:.8;border-bottom:1px solid currentColor;padding-bottom:2px}
.sl-alt:hover{opacity:1}
@media (max-width:760px){.slate{--sw:min(68vw,calc((100svh - 330px) * .75));gap:26px;padding:84px 20px 40px}.slate .oo-q{border-width:6px}.sl-top nav{gap:18px}.sl-top nav a{font-size:11px}.sl-label .sl-title{font-size:32px}.sl-cta{flex-direction:column;gap:14px}}
.sl-line{text-wrap:balance;max-width:30ch}
/* splash: the site name top right */
.sl-site{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-on);opacity:.75;transition:color 1.1s ease}
/* In a room: no floor, just the wall and a skirting board */
.roomview .floor{display:none!important}
.roomview .skirt{bottom:0!important;height:calc(100% * 12 / 250)!important;background:color-mix(in srgb,var(--wall,#F1F0EC) 55%,#fff)!important;box-shadow:0 -1px 0 rgba(0,0,0,.14),inset 0 3px 0 rgba(255,255,255,.55),inset 0 4px 0 rgba(0,0,0,.06)!important}
.roomview.darkwall .skirt{background:color-mix(in srgb,var(--wall) 80%,#fff)!important}
/* Treatment F everywhere (30/09): plate margin 4.4% of the frame's width measured from the outer edge, 3% between plates */
.oo-q,.slate .oo-q,.moment .oo-q{--fb:10px;border-width:var(--fb);padding:calc(var(--w) * .044 - var(--fb));gap:calc(var(--w) * .03)}
.cx-quartet{--fb:10px;border-width:var(--fb);padding:calc(var(--qw) * .044 - var(--fb));gap:calc(var(--qw) * .03)}
@media (max-width:760px){.oo-q,.slate .oo-q,.moment .oo-q,.cx-quartet{--fb:7px}}
/* Bipolar UK: one line, where it counts */
.f-give{margin:0;font-size:13px;color:var(--soft)}
.f-give a{border-bottom:1px solid var(--line)}
.sx-body .sx-give{font-size:15px;color:var(--grey);border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
/* phones: a hairline and some air between the logo row and the menu */
@media (max-width:520px){.top nav{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;padding-bottom:8px}}
/* the splash logo matches the site header exactly, in size and position */
.sl-top{padding:0 var(--gut);height:73px;align-items:center}
.sl-mark img{width:auto;height:32px}
@media (max-width:520px){.sl-top{height:auto;padding-top:10px}}
/* one scale for every Quartet (30/09): the List's works match the splash and composer, in F proportions */
.rq{padding:4.4%;gap:3%}
.rq-sm{border-width:2px;padding:4.4%}
.rq-lg{--w:min(calc(100vw - 96px),calc((100svh - 260px) * .75),470px);--fb:10px;border-width:var(--fb);padding:calc(var(--w) * .044 - var(--fb));gap:calc(var(--w) * .03)}
@media (max-width:860px){.rq-lg{--w:min(72vw,470px);--fb:7px}}
.en-share{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0 0 3px;font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);cursor:pointer}
.en-share:hover{color:var(--grey);border-bottom-color:var(--grey)}
@media (max-width:520px){.sl-top{padding-top:16px}}
/* one Quartet size, defined once, used by the splash, the composer and the List */
:root{--qsize:min(calc(100vw - 96px),calc((100svh - 300px) * .75),470px)}
@media (max-width:760px){:root{--qsize:min(68vw,calc((100svh - 330px) * .75))}}
.slate{--sw:var(--qsize)}
@media (min-width:1000px){.cx-hero{--qw:var(--qsize)}}
@media (max-width:999px){.cx-hero{--qw:var(--qsize)}}
.rq-lg{--w:var(--qsize)}
@media (max-width:860px){.rq-lg{--w:var(--qsize)}}
@media (max-width:760px){#own .card .framed{margin-inline:auto;width:var(--qsize)}}

/* Studio, given room (30/09): more air between sections, a clear ladder of type, a smaller portrait */
.sx-hero{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:40px clamp(56px,9vw,160px);padding-block:clamp(40px,6vw,88px) clamp(72px,9vw,140px)}
.sx-portrait{max-width:340px;justify-self:end}
@media (max-width:760px){.sx-portrait{max-width:62vw;justify-self:start}}
.sx-story,.sx-make,.sx-prov,.sx-collect,.sx-trade{padding-block:clamp(80px,11vw,168px)}
.sx-lede{grid-column:1/span 9}
.sx-body{grid-column:7/span 5;gap:26px}
.sx-body p{font-size:16px;line-height:1.75}
.sx-head{margin-bottom:clamp(44px,6vw,80px);gap:18px}
.sx-head h2{font-size:clamp(40px,4.6vw,68px)}
.sx-head p{font-size:16px;line-height:1.7;max-width:50ch}
.sx-layers{margin-top:28px}
.sx-three li,.sx-facts li{padding:26px 0;gap:8px 32px}
.sx-three span{font-size:19px;line-height:1.45;color:var(--soft)}
.sx-three b,.sx-facts b{font-size:11px;letter-spacing:.18em;color:var(--grey);font-weight:500}
.sx-facts span{font-size:15.5px}
.sx-prov-grid,.sx-col-grid{gap:56px clamp(56px,8vw,128px)}
.sx-trade-t p{font-size:16px;line-height:1.7}
@media (max-width:900px){.sx-body{grid-column:1/-1}}

/* In a room: a dark wood skirting board with a moulded top */
.roomview .skirt{height:calc(100% * 14 / 250)!important;
  background:linear-gradient(180deg,#5A4231 0,#4A3526 7%,#3A2A1E 14%,#4B3727 16%,#3E2D21 60%,#33251B 100%)!important;
  box-shadow:0 -1px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,230,200,.18)!important}
.roomview.darkwall .skirt{background:linear-gradient(180deg,#5A4231 0,#4A3526 7%,#3A2A1E 14%,#4B3727 16%,#3E2D21 60%,#33251B 100%)!important}
/* entry actions: one style, one baseline, share has its icon */
.en-act{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.en-act-a{-webkit-appearance:none;appearance:none;background:none;border:0;display:inline-flex;align-items:center;gap:8px;padding:0 0 3px;font:inherit;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);cursor:pointer}
.en-act-a:hover{color:var(--grey);border-bottom-color:var(--grey)}
.en-act-a svg{flex:none;margin-top:-2px}
/* links inside running text take the text's own face, size and case */
p .link,li .link,dd .link,span .link,td .link,.small .link{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;margin-left:0;white-space:normal}
.sx-three span .link{font-family:inherit;font-size:inherit;margin-left:0}
.en-act{gap:20px;flex-wrap:nowrap}
.en-act-a{font-size:11.5px;letter-spacing:.12em;white-space:nowrap}
@media (max-width:380px){.en-act{flex-wrap:wrap}}
.en-act-a{height:18px;box-sizing:content-box;line-height:18px}.en-act-a svg{width:13px;height:13px;margin-top:0}

/* Studio v3 (30/09): rhythm instead of a wall of text */
@media (max-width:760px){.sx-portrait{width:62vw;max-width:62vw}}
.sx-portrait{width:100%}
/* a painted wall with one work */
.sx-band{background:#CFC7B8;display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(72px,10vw,150px) 24px clamp(56px,7vw,100px)}
.sx-band .framed{width:var(--qsize);padding:0;background:none;box-shadow:0 44px 64px -34px rgba(20,18,16,.55),0 16px 22px -12px rgba(20,18,16,.3)}
.sx-band .framed img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.sx-band-cap{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5E584E}
/* provenance: three columns, a serif word each, one short line */
.sx-prov-grid{grid-template-columns:minmax(0,8fr) minmax(240px,3fr);align-items:center}
.sx-three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
.sx-three li{display:flex!important;flex-direction:column;gap:10px;padding:22px 0 0!important;border-top:1px solid var(--ink)!important;border-bottom:0!important}
.sx-three li:last-child{border-bottom:0!important}
.sx-three .t{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1.05;color:var(--ink)}
.sx-three span:not(.t){font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--soft)}
@media (max-width:900px){.sx-prov-grid{grid-template-columns:1fr}}
@media (max-width:620px){.sx-three{grid-template-columns:1fr;gap:28px}}
/* collecting: prices, then the practicalities as a strip of three */
.sx-col-grid{grid-template-columns:1fr}
.sx-prices{max-width:640px}
.sx-facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,44px);margin-top:24px}
.sx-facts li{display:flex!important;flex-direction:column;gap:8px;padding:20px 0 0!important;border-top:1px solid var(--line)!important;border-bottom:0!important}
.sx-facts li:last-child{border-bottom:0!important}
@media (max-width:620px){.sx-facts{grid-template-columns:1fr;gap:22px}}
@media (max-width:760px){.sx-hero{grid-template-columns:1fr}.sx-portrait{order:-1;width:62vw;max-width:62vw;justify-self:start}}
/* frame-to-plate margin a touch wider (30/09): 6.5% from the outer edge; 3% between plates stays */
.oo-q,.slate .oo-q,.moment .oo-q{padding:calc(var(--w) * .065 - var(--fb))}
.cx-quartet{padding:calc(var(--qw) * .065 - var(--fb))}
.rq{padding:6.5%}
.rq-sm{padding:6.5%}
.rq-lg{padding:calc(var(--w) * .065 - var(--fb))}
.sx-band{gap:30px;padding-bottom:clamp(88px,11vw,160px)}

/* In a room: a walnut console and a brass picture light (30/09) */
.rscene .cons,.rscene .cshadow,.rscene .plight,.rscene .pglow{position:absolute;pointer-events:none}
.rscene .cons{z-index:2;overflow:visible}
.rscene .cshadow{z-index:1;box-shadow:0 10px 26px rgba(0,0,0,.22);border-radius:2px}
.rscene .plight{z-index:3;border-radius:999px;background:linear-gradient(180deg,#E6CF96 0,#B8964F 45%,#7E6230 100%);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.rscene .plight i{position:absolute;left:50%;top:100%;width:1.5%;min-width:2px;margin-left:-.75%;background:linear-gradient(90deg,#7E6230,#C9A862,#7E6230)}
.rscene .pglow{z-index:2;background:radial-gradient(ellipse 50% 60% at 50% 0,rgba(255,236,196,.55),rgba(255,236,196,.18) 45%,rgba(255,236,196,0) 72%);mix-blend-mode:soft-light}
.roomview.darkwall .rscene .pglow{mix-blend-mode:screen;opacity:.45}

/* In a room: the sideboard as a line drawing, no lamp (30/09) */
.rscene .plight,.rscene .pglow,.rscene .cshadow{display:none}
.rscene .cons g{stroke:rgba(26,25,24,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.rscene .cons g *{vector-effect:non-scaling-stroke}
.roomview.darkwall .rscene .cons g{stroke:rgba(244,242,236,.6)}

/* In a room: no skirting, just a hairline floor (30/09) */
.roomview .skirt{display:none!important}
.rscene .fline{position:absolute;left:0;right:0;height:0;border-top:1px solid rgba(26,25,24,.55);pointer-events:none;z-index:2}
.roomview.darkwall .rscene .fline{border-top-color:rgba(244,242,236,.6)}

/* One frame everywhere (30/09): the black moulding is 1.9% of the work's width, on every Quartet on the site */
.framed{container-type:inline-size;padding:0!important;background:var(--frame)!important}
.framed>*{display:block;width:96.2cqw!important;max-width:none;margin:1.9cqw!important}
.oo-q,.slate .oo-q,.moment .oo-q,.rq-lg{--fb:calc(var(--w) * .019)!important}
.cx-quartet{--fb:calc(var(--qw) * .019)!important}
.rq-sm{border-width:max(1px,1.5px)}

/* Studio: Quartet I on a plain off-white wall (30/09) */
.sx-band{background:#EFEDE8}
.sx-band .framed{box-shadow:0 40px 60px -34px rgba(20,18,16,.38),0 14px 20px -12px rgba(20,18,16,.2)}
.sx-band-cap{color:var(--soft,#6B665E)}

/* the rebate shadow sits exactly inside the moulding, on every frame */
.framed::after,.roomview .onwall.framed::after{inset:1.9cqw!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 6px rgba(0,0,0,.28)}

/* splash, still (30/09): everything fits in one screen on a laptop; the line runs in two lines, not four */
@media (min-width:761px){.slate{--sw:min(var(--qsize),calc((100svh - 360px) * .75));padding-top:80px;padding-bottom:40px;gap:30px}.sl-line{max-width:46ch}}
.slate{transition:none}

/* a composed Quartet inside any frame keeps its grid of four, at the site proportions (plates 6.5% in, 3% apart) */
.framed>.q4mini,.framed .zwin>.q4mini{display:grid!important;padding:4.6cqw;gap:3cqw}
.framed>.zwin>.q4mini{width:100%}

.size:disabled,[data-sz]:disabled{opacity:.38;cursor:not-allowed}

/* The works: twelve at a time, each photograph fading up as it arrives (01/10) */
.cx-thumb.arrive:not(.lit) img{opacity:0}
.cx-thumb.arrive.lit img{animation:arrive .65s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cx-thumb.arrive.lit.in img{opacity:.35}
@media (prefers-reduced-motion:reduce){.cx-thumb.arrive.lit img{animation:none}}

.cx-tray{cursor:pointer}.cx-tray .reqbtn{cursor:pointer}

/* Lock a plate so Surprise me keeps it (03/10) */
.cx-cell{position:relative}
.cx-lock{-webkit-appearance:none;appearance:none;position:absolute;top:6px;right:6px;z-index:4;width:30px;height:30px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;opacity:.8;transition:opacity .2s,background .2s,color .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.cx-lock::before{content:"";position:absolute;inset:-7px}
.cx-lock:hover{opacity:1}
.cx-lock[aria-pressed="true"]{background:var(--ink);color:#fff;opacity:1}
.cx-lock:active{transform:scale(.92)}
.cx-cell.locked .cx-frame{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.cx-quartet.deal .cx-cell.locked{animation:none}
.cx-hero.onwall .cx-lock{opacity:0;pointer-events:none}
@container (max-width:200px){.cx-lock{width:26px;height:26px;top:4px;right:4px}}
/* the padlock only appears on the plate you have tapped, clear of the white selection stroke (03/10) */
.cx-lock{display:none;top:14px;right:14px}
.cx-cell.on .cx-lock{display:grid}
/* a locked plate you are not working on keeps a small closed padlock, so you can see what is held */
.cx-cell.locked:not(.on) .cx-lock{display:grid;width:22px;height:22px;top:8px;right:8px;opacity:.9;pointer-events:none}
.cx-cell.locked:not(.on) .cx-lock svg{width:11px;height:11px}
.cx-cell.locked .cx-frame{outline:none}
@container (max-width:200px){.cx-lock{top:10px;right:10px}}

/* Keep: the heart fills when this Quartet is on your wall (03/10) */
.cx-fav[aria-pressed="true"] svg{fill:currentColor}
.cx-fav.pop svg{animation:heartpop .45s cubic-bezier(.2,.7,.2,1)}
@keyframes heartpop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
/* four small controls on one line on a phone */
.cx-sbtn{white-space:nowrap}
@media (max-width:520px){.cx-small{gap:0}.cx-sbtn{padding:0 8px;gap:5px}}
/* ---- a set for a house: walls, then one accent pulled through; one Quartet per wall (match.js) ---- */
.mset{--ms-wall:#ECE8DF;width:100%;min-width:0;display:flex;flex-direction:column;gap:16px}
.ms-ctl{display:flex;flex-direction:column;gap:10px}
.ms-row{display:flex;align-items:center;gap:14px}
.ms-lab{flex:0 0 56px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.ms-sw{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ms-sw [data-wall],.ms-sw [data-acc],.ms-own input{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;transition:transform .2s}
.ms-sw [data-wall],.ms-sw [data-acc]{background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.ms-sw [data-wall]{border-radius:3px}
.ms-sw button:hover{transform:scale(1.08)}
.ms-sw [aria-checked="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px var(--paper,#F6F5F1),0 0 0 3px var(--ink,#141414)}
.ms-own{display:inline-flex;margin-left:2px}
.ms-own input{background:conic-gradient(#d66,#db6,#6b6,#6bd,#66d,#d6d,#d66)}
.ms-own input::-webkit-color-swatch-wrapper{padding:0}.ms-own input::-webkit-color-swatch{border:0;border-radius:50%;opacity:0}.ms-own input::-moz-color-swatch{border:0;opacity:0}
.ms-own.on input{box-shadow:0 0 0 2px var(--paper,#F6F5F1),0 0 0 3px var(--ink,#141414)}
.ms-track{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:0}
.ms-track::-webkit-scrollbar{display:none}
.ms-slide{flex:0 0 84%;margin:0;scroll-snap-align:start}
.ms-slide figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--soft)}
.ms-room{position:relative;aspect-ratio:300/260;background:var(--ms-wall);transition:background .5s;color:rgba(26,25,24,.5);overflow:hidden}
.ms-dark .ms-room{color:rgba(240,236,228,.55)}
.ms-room svg{position:absolute;inset:0;width:100%;height:100%}
.ms-room .ms-side{fill:rgba(0,0,0,.06);stroke:none}
.ms-dark .ms-room .ms-side{fill:rgba(0,0,0,.18)}
.ms-room path[fill^="#"]{transition:fill .4s}
.ms-q{position:absolute;display:block;padding:0}
.ms-q .q4mini{animation:msin .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes msin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ms-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.ms-dots{display:flex;gap:8px}
.ms-dots button{-webkit-appearance:none;appearance:none;width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--line,#d9d6cf);cursor:pointer}
.ms-dots [aria-current="true"]{background:var(--ink,#141414)}
.ms-act{display:flex;gap:18px;align-items:baseline}
.ms-again{-webkit-appearance:none;appearance:none;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--ink);border-bottom:1px solid currentColor;cursor:pointer}
.ms-brief{font-size:14px;color:var(--soft)}
.ms-brief:hover{color:var(--ink)}
@media (max-width:600px){.ms-slide{flex-basis:88%}.ms-sw [data-wall],.ms-sw [data-acc],.ms-own input{width:30px;height:30px}.ms-row{align-items:flex-start}.ms-lab{padding-top:8px}}
.tr-match{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px clamp(40px,6vw,96px);align-items:center;padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.tm-t{display:flex;flex-direction:column;gap:14px}
.tm-t h2{font-size:clamp(32px,3.6vw,52px)}.tm-t h2 em{font-style:italic}
.tm-t p{margin:0;font-size:16px;line-height:1.65;color:var(--soft);max-width:44ch}
@media (max-width:900px){.tr-match{grid-template-columns:1fr}}
/* ---- the Ellidore proposal: unlisted page, prints as A4 landscape ---- */
.el-body{background:#F3F1EC}
.el{--elpad:clamp(24px,6vw,96px)}
.el-p{position:relative;max-width:1280px;margin:0 auto;padding:clamp(72px,10vw,150px) var(--elpad);box-sizing:border-box;border-top:1px solid var(--line)}
.el-p:first-child{border-top:0}
.el h1,.el h2{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;margin:0}
.el h1{font-size:clamp(64px,10vw,150px);line-height:.92}
.el h2{font-size:clamp(36px,4.6vw,68px);line-height:1.02;max-width:20ch;margin-top:18px}
.el h1 em,.el h2 em{font-style:italic}
.el h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:0 0 10px}
.el p{color:var(--soft);font-size:17px;line-height:1.65;margin:0}
.el .label{display:block}
.el-q{display:block}
.el-cover{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,110px);align-items:stretch;min-height:min(100vh,900px);padding-top:clamp(40px,6vw,72px)}
.el-cover-t{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.el-mark svg,.el-mark img{height:34px;width:auto;color:var(--ink)}
.el-cover-t .label{margin-bottom:22px}
.el-lede{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.2vw,30px)!important;line-height:1.3!important;color:var(--ink)!important;max-width:24ch;margin-top:28px!important}
.el-for{font-size:13px!important;letter-spacing:.04em;color:var(--grey)!important}
.el-cover-q{display:flex;align-items:center;justify-content:center;background:#EAE8E3;padding:clamp(28px,5vw,72px)}
.el-cover-q .el-q{width:min(100%,460px);box-shadow:0 34px 60px -24px rgba(20,18,16,.45)}
.el-three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--line);padding-top:32px}
.el-n{display:block;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--grey);margin-bottom:14px}
.el-made{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.el-film video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#EFEDE8}
.el-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.el-steps li{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55;color:var(--soft)}
.el-steps b{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink)}
.el-four{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.el-four>div{padding:32px 32px 32px 0;border-bottom:1px solid var(--line)}
.el-four>div:nth-child(odd){border-right:1px solid var(--line)}
.el-four>div:nth-child(even){padding-left:32px}
.el-four p{max-width:40ch}
.el-colour{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.el-colour-t p{margin-top:20px;max-width:38ch}
.el-scarce{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.el-scarce>div p{margin-top:24px;max-width:46ch}
.el-price{margin:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.el-price>div{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.el-price dt{font-family:var(--serif);font-size:24px;font-weight:400}
.el-price dd{margin:0;color:var(--grey);font-size:14px;grid-column:1}
.el-price dd.p{grid-column:2;grid-row:1/span 2;align-self:center;font-family:var(--serif);font-size:24px;color:var(--ink)}
.el-terms{grid-column:1/-1;list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 40px;font-size:14px;color:var(--soft)}
.el-terms li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:12px;vertical-align:middle}
.el-next{text-align:left}
.el-next p{margin-top:24px;max-width:52ch;font-size:19px!important}
.el-sign{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:clamp(56px,8vw,120px);padding-top:28px;border-top:1px solid var(--ink)}
.el-sign>div{display:flex;flex-direction:column;gap:4px;font-size:15px}
.el-sign b{font-family:var(--serif);font-weight:400;font-size:24px}
.el-sign span{color:var(--grey)}
.el-sign a{color:var(--ink)}
@media (max-width:900px){.el-cover,.el-made,.el-colour,.el-scarce{grid-template-columns:1fr}.el-three{grid-template-columns:1fr}.el-four{grid-template-columns:1fr}.el-four>div:nth-child(odd){border-right:0}.el-four>div:nth-child(even){padding-left:0}.el-steps li{grid-template-columns:96px 1fr}}
@page{size:297mm 210mm;margin:0}
@media print{
  html,body{background:#F3F1EC!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .el-p{width:297mm;height:210mm;max-width:none;overflow:hidden;padding:20mm 22mm;border-top:0;break-after:page;page-break-after:always;display:grid;align-content:center}
  .el-p:last-child{break-after:auto}
  .el-cover{min-height:0;grid-template-columns:6fr 5fr;padding:16mm 22mm;align-content:stretch}
  .el-cover-q .el-q{width:min(100%,92mm)}
  .el h1{font-size:120px}.el h2{font-size:52px}
  .el-made,.el-colour{grid-template-columns:4fr 6fr}.el-scarce{grid-template-columns:6fr 5fr}
  .el-film video{max-height:150mm;width:auto;margin:0 auto}
  .el-three{grid-template-columns:repeat(3,1fr);margin-top:14mm}
  .el-four{grid-template-columns:1fr 1fr;margin-top:10mm}.el-four>div{padding-block:20px}
  .ms-act,.ms-dots{display:none}.ms-track{overflow:hidden}.ms-slide{flex-basis:48%}
}
/* Share and Download sit under "See it in a room" */
.cx-out{display:flex;justify-content:center;gap:4px;margin-top:2px}
@media (min-width:1000px){.cx-out{margin-left:-12px}}

/* one wall now: the sofa, with the accent in its cushions */
.ms-track{overflow:visible}.ms-slide{flex-basis:100%}.ms-slide figcaption,.ms-dots{display:none}
/* the downloadable image, shown full screen on a phone */
.igv{position:fixed;inset:0;z-index:200;background:rgba(20,19,18,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:56px 20px calc(28px + env(safe-area-inset-bottom));animation:igin .25s ease-out}
.igv img{max-width:100%;max-height:calc(100% - 60px);width:auto;height:auto;display:block;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.igv p{margin:0;color:rgba(255,255,255,.8);font-size:14px;text-align:center}
.igv-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
@keyframes igin{from{opacity:0}to{opacity:1}}
/* phones: the label sits above its row, so all eight swatches fit on one line */
@media (max-width:600px){.ms-row{flex-direction:column;align-items:flex-start;gap:8px}.ms-lab{padding-top:0;flex:none}.ms-sw{flex-wrap:nowrap;gap:clamp(5px,1.8vw,9px)}.ms-sw [data-wall],.ms-sw [data-acc],.ms-own input{width:clamp(28px,8.4vw,34px);height:clamp(28px,8.4vw,34px)}.ms-ctl{gap:14px}}
@media (max-width:600px){.ms-sw{padding:3px 3px 3px 3px;margin-left:-3px}}
/* View on your wall (iPhone AR) */
.cx-ar{display:inline-block;line-height:0}
.cx-ar[hidden]{display:none}
.cx-ar img{width:150px;height:34px}
.room-ar{display:flex;justify-content:center;margin-top:10px}
.cx-left{margin:0;font-size:12.5px;letter-spacing:.02em;color:var(--grey);text-align:center}
@media (min-width:1000px){.cx-left{text-align:left}}
/* the certificate moment, after Request */
.cert{padding:28px;display:flex;flex-direction:column;gap:18px;animation:igin .35s ease-out}
.cert-card{border:1px solid var(--line);background:#FBFAF7;padding:28px 26px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cert-q{width:min(220px,60%)}
.cert-t{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:30px;line-height:1.1}
.cert-d{margin:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;text-align:left;border-top:1px solid var(--line);padding-top:16px}
.cert-d dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.cert-d dd{margin:2px 0 0;font-size:14px}
.cert-n{margin:0;font-size:13px;color:var(--soft);max-width:40ch}
.cert .btn{width:100%}
.cert-d dd.mono{white-space:nowrap;font-size:13px}
/* composer, calmer: one button, one quiet row, one line of detail */
.cx-go{gap:10px}
.cx-out{flex-wrap:nowrap;gap:0;margin-top:0}
.cx-out .cx-sbtn{padding:0 10px}
.cx-code{margin:6px 0 0}
.cx-price{margin-top:2px;color:var(--grey)}
.cx-left{display:inline;margin:0;font-size:inherit;letter-spacing:0;color:inherit}
.cx-out{align-self:center}
.cx-price{display:block;text-align:center}
.cx-code{text-align:center}
@media (min-width:1000px){.cx-out{align-self:flex-start}.cx-price,.cx-code{text-align:left}}
.req[hidden]{display:none!important}
/* the two small rows share one three-column grid, the width of the Request button, so their items line up */
.cx-small,.cx-out{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0;margin-left:0!important;justify-content:stretch}
.cx-small .cx-sbtn,.cx-out .cx-sbtn{justify-content:center;padding:0 4px}
.cx-out{width:100%}
.cx-small{width:min(var(--qw),100%);margin-inline:auto!important}
@media (min-width:1000px){.cx-play{width:100%!important;align-self:stretch}.cx-small{width:100%;margin-inline:0!important}}
@media (max-width:380px){.cx-go .btn{letter-spacing:.12em;font-size:12.5px;white-space:nowrap}}
/* one rhythm: tight within a group, the same breath between groups; code and price read as one quiet block */
.cx-panel .cx-go{margin-top:12px!important}
.cx-panel .cx-code{margin:2px 0 0!important}
.cx-panel .cx-price{margin:-13px 0 0!important}
/* ---------- quiet magic ---------- */
/* light that moves: a soft highlight across the glass of every framed work, positioned by --lx/--ly (app.js) */
.oo-q,.cx-quartet,.rq-lg{position:relative}
.framed::before,.oo-q::after,.cx-quartet::after,.rq-lg::after{background:radial-gradient(70% 55% at var(--lx,28%) var(--ly,12%),rgba(255,255,255,.42),rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 72%);mix-blend-mode:soft-light}
.oo-q::after,.cx-quartet::after,.rq-lg::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.framed::before{content:"";position:absolute;inset:1.9cqw;pointer-events:none;z-index:1}
@media (prefers-reduced-motion:reduce){.framed::before,.oo-q::after,.cx-quartet::after,.rq-lg::after{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%)}}
/* museum labels */
.mlab{margin:4px 0 6px;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.5;color:var(--soft)}
.mlab b{font-weight:500;color:var(--ink)}
.mlab i{font-family:var(--serif);font-size:15px}
/* pages dissolve into one another, as in a gallery (supported browsers; others navigate as normal) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.32s ease-in both vt-out}
  ::view-transition-new(root){animation:.42s ease-out both vt-in}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
/* ---------- The making ---------- */
.mk-hero{padding-block:clamp(56px,9vw,130px) clamp(32px,5vw,64px);display:flex;flex-direction:column;gap:20px;max-width:1280px;margin:0 auto;box-sizing:content-box}
.mk-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(52px,8vw,112px);line-height:.96;letter-spacing:-.015em;margin:0}
.mk h1 em,.mk h2 em{font-style:italic}
.mk-lede{margin:0;max-width:44ch;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.35;color:var(--ink)}
.mk-toc{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:13.5px}
.mk-toc a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line)}
.mk-toc a:hover{color:var(--ink);border-bottom-color:currentColor}
.mk-sec{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr) minmax(0,5fr);gap:20px clamp(28px,4vw,64px);align-items:start;border-top:1px solid var(--line);padding-block:clamp(48px,7vw,104px);max-width:1280px;margin:0 auto;box-sizing:content-box;scroll-margin-top:90px}
.mk-n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--grey);padding-top:6px}
.mk-b{display:flex;flex-direction:column;gap:16px;grid-column:2}
.mk-b h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.8vw,54px);line-height:1.02;margin:0 0 6px}
.mk-b p{margin:0;font-size:17px;line-height:1.7;color:var(--soft);max-width:58ch}
.mk-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.6;color:var(--soft);max-width:58ch}
.mk-list li{padding-left:18px;position:relative}
.mk-list li::before{content:'';position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--ink)}
.mk-list b{font-weight:500;color:var(--ink)}
.mk-explode{grid-column:2 / span 2;margin:12px 0 0;align-self:center}
.mk-explode svg{width:100%;height:auto;display:block}
.mk-sizes{grid-column:2 / span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.mk-size{margin:0;background:#EEECE7;padding:10px 10px 12px}
.mk-size svg{display:block;width:100%;height:auto}
.mk-size figcaption{margin-top:8px;font-size:12.5px;color:var(--grey);line-height:1.4}
.mk-time{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.mk-time li{padding:14px 14px 0 0;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--soft)}
.mk-time b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.mk-spec{margin:0;display:grid;border-top:1px solid var(--ink)}
.mk-spec>div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.mk-spec dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.mk-spec dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.mk-spec-sec .mk-b{grid-column:2 / span 2;max-width:820px}
.mk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:14px}
.sx-more{margin:18px 0 0;font-size:14px}
@media (max-width:900px){
  .mk-sec{grid-template-columns:1fr}
  .mk-b,.mk-explode,.mk-sizes,.mk-spec-sec .mk-b{grid-column:1}
  .mk-sizes{grid-template-columns:1fr 1fr}
  .mk-time{grid-template-columns:1fr}
  .mk-spec>div{grid-template-columns:110px 1fr}
}
@media (max-width:520px){.mk-sizes{grid-template-columns:1fr}}
.mk-explode{max-width:860px}
.mk-prom{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--ink);counter-reset:p}
.mk-prom li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.mk-prom b{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,26px);line-height:1.2;color:var(--ink)}
.mk-prom span{font-size:15px;line-height:1.6;color:var(--soft)}
.reg-prov{font-size:14px!important;color:var(--grey)!important}
/* the three layers: a ruled list, left aligned; one row each on a phone */
.sx-layers{text-align:left;gap:0 28px;border-top:1px solid var(--ink)}
.sx-layers li{padding:14px 0 0;gap:6px}
.sx-layers b{font-size:11.5px;letter-spacing:.14em;white-space:nowrap}
.sx-layers span{font-size:18px;line-height:1.35}
@media (max-width:620px){
  .sx-layers{grid-template-columns:1fr;gap:0}
  .sx-layers li{display:grid;grid-template-columns:136px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .sx-layers b{font-size:11px;letter-spacing:.12em;padding-top:3px}
  .sx-layers span{font-size:16.5px}
}
/* ---------- Your room: a photo of your own wall ---------- */
.my-start{max-width:420px;margin:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px}
.my-start h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3vw,38px);line-height:1.05;margin:0}
.my-start h3 em{font-style:italic}
.my-start p{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}
.my-pick{cursor:pointer}
.my-note{font-size:12.5px!important;color:var(--grey)!important}
.my-wrap{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.my-stage{position:relative;max-width:100%;line-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.my-photo{display:block;max-width:100%;max-height:calc(100svh - 300px);width:auto;height:auto}
.my-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.my-svg line{stroke:#fff;stroke-width:2;stroke-dasharray:6 5;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.my-svg circle{fill:#fff;stroke:#141414;stroke-width:2;cursor:grab;touch-action:none}
.my-q{position:absolute;cursor:grab;touch-action:none;box-shadow:0 20px 34px -18px rgba(20,18,16,.6)}
.my-q:active{cursor:grabbing}
.my-bar{width:100%;max-width:640px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--soft);line-height:1.5}
.my-bar p{margin:0}
.my-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.my-row input{width:84px;padding:8px 10px;font:inherit;font-size:16px;border:1px solid var(--line);background:#fff;margin:0 4px}
.my-row .btn{min-height:44px;padding:0 20px}
.my-a{-webkit-appearance:none;appearance:none;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--ink);border-bottom:1px solid currentColor;cursor:pointer}
@media (max-width:520px){.seg button{padding:9px 10px;font-size:11px;letter-spacing:.08em;white-space:nowrap}}
.room-mine{display:flex;justify-content:center;margin-top:12px}
/* hold to compare */
.cx-before{pointer-events:none;animation:igin .18s ease-out}
.cx-before .cx-frame{display:block}
.cx-before-tag{position:absolute;left:50%;top:-34px;transform:translateX(-50%);padding:4px 10px;border-radius:12px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* Your wall: ask someone */
.dr-ask{-webkit-appearance:none;appearance:none;border:0;background:none;padding:6px 0 0;font:inherit;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;align-self:center}
/* Which one? */
.ch{padding-block:clamp(48px,8vw,110px);display:flex;flex-direction:column;gap:16px;max-width:1280px;margin:0 auto;box-sizing:content-box}
.ch h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,6.5vw,92px);line-height:.98;margin:0}
.ch h1 em{font-style:italic}
.ch-lede{margin:0;max-width:44ch;font-size:17px;line-height:1.6;color:var(--soft)}
.ch-grid{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(18px,3vw,44px);margin-top:28px;align-items:start}
.ch-item{margin:0;display:flex;flex-direction:column;gap:16px;transition:opacity .3s}
.ch-grid:has(.picked) .ch-item:not(.picked){opacity:.35}
.ch-item figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ch-l{font-family:var(--serif);font-style:italic;font-size:28px}
.ch-item .btn{min-height:44px;padding:0 22px}
@media (max-width:700px){.ch-grid{grid-template-columns:1fr 1fr}}
/* 404 */
.lost{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center;min-height:70vh;padding-block:clamp(48px,8vw,110px);max-width:1180px;margin:0 auto;box-sizing:content-box}
.lost-q .framed{width:100%;max-width:380px}
.lost-t{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.lost h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,6vw,84px);line-height:1;margin:0}
.lost h1 em{font-style:italic}
.lost p{margin:0;font-size:17px;color:var(--soft);max-width:40ch}
.lost-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:8px}
.f-next{font-size:13px;color:var(--soft);text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.lost{grid-template-columns:1fr}.lost-q .framed{max-width:240px}}
/* the List, by quarter */
.reg-q{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:34px 0 10px;border-bottom:1px solid var(--ink)}
.reg-q:first-of-type{padding-top:10px}
.reg-qn{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);font-weight:300}
.reg-qc{font-family:var(--mono);font-size:12px;color:var(--grey)}
.reg-list .reg-empty{padding:18px 0;margin:0;color:var(--soft);font-size:15px;border-bottom:1px solid var(--line)}
/* Which one: up to eight, four across */
.ch-grid{grid-template-columns:repeat(min(var(--n,2),4),minmax(0,1fr))}
@media (max-width:700px){.ch-grid{grid-template-columns:1fr 1fr}}
/* the three layers sit under their part of the drawing: plates, board, frame (the drawing places them at 9%, 42% and 76%) */
.sx-layers{grid-template-columns:36% 36% 28%!important;gap:0!important;border-top:1px solid var(--ink);text-align:left}
.sx-layers li{display:flex!important;flex-direction:column;gap:6px;padding:14px 14px 0 0!important;border-top:0;border-bottom:0!important}
.sx-layers b{white-space:normal}
@media (max-width:620px){.sx-layers b{font-size:10px;letter-spacing:.1em;white-space:nowrap}.sx-layers b::before{content:none}.sx-layers span{font-size:14px;line-height:1.35}.sx-layers li{padding-right:8px!important}}
.reg-now{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-left:14px;vertical-align:middle}
.reg-q + .reg-th{border-bottom:1px solid var(--line)}
.reg-list > .reg-q:first-child{padding-top:0}
@media (max-width:620px){.reg-now{display:block;margin:6px 0 0}}
/* Studio: a set for a house, shown as a run of rooms, each tied by its own colour */
.sx-set{grid-template-columns:1fr!important;align-items:start}
.sx-set-t{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(40px,6vw,96px);align-items:end}
.sx-set-t .label{display:block;margin-bottom:14px}
.sx-set-t h2{font-size:clamp(36px,4vw,60px);margin:0}.sx-set-t h2 em{font-style:italic}
.sx-set-t p{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--soft);max-width:52ch}
.sx-set-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
@media (max-width:900px){.sx-set-t{grid-template-columns:1fr}}
.mset-tour{gap:18px}
.mset-tour .ms-track{overflow-x:auto;gap:20px;scroll-snap-type:x mandatory}
.mset-tour .ms-slide{flex:0 0 calc((100% - 40px) / 2.35)}
.mset-tour .ms-slide figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}
.ms-rn{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink)}
.ms-an{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.ms-an i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.mset-tour .ms-dots{display:flex}
.ms-nav{display:flex;gap:8px}
.ms-nav button{-webkit-appearance:none;appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,opacity .2s}
.ms-nav button:hover{border-color:var(--ink)}
.ms-nav button:disabled{opacity:.3;cursor:default;border-color:var(--line)}
.ms-prev svg{transform:scaleX(-1)}
@media (max-width:900px){.mset-tour .ms-slide{flex-basis:62%}}
@media (max-width:600px){.mset-tour .ms-slide{flex-basis:86%}.ms-nav{display:none}.mset-tour .ms-foot{justify-content:center}}
#scheme{scroll-margin-top:90px}
/* Studio drawing: no box, the three parts head three equal columns */
.sx-explode{background:none;padding:clamp(8px,2vw,24px) 0 clamp(10px,2vw,24px)}
.mset-tour .ms-slide{flex-basis:calc((100% - 40px) / 3)}
@media (max-width:900px){.mset-tour .ms-slide{flex-basis:62%}}
@media (max-width:600px){.mset-tour .ms-slide{flex-basis:86%}}
@media (min-width:901px){.mset-tour .ms-nav,.mset-tour .ms-dots{display:none}}
/* Studio, "Four plates, one work": the words on the left, the drawing and its three columns on the right */
@media (min-width:1000px){
  .sx-make{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .sx-make .sx-head{grid-column:1;grid-row:1 / span 3;margin:0}
  .sx-make .sx-explode,.sx-make .sx-layers,.sx-make .sx-more{grid-column:2}
  .sx-make .sx-explode{padding-top:0}
}
@media (max-width:860px){.reg-row .rq{align-self:center}}
/* the composer stack, grouped: making (hint, Surprise me, Back/Start again/Keep) close together,
   then a clear pause, then buying (Request, In a room/Share/Download, code and price) close together */
.cx-hint{text-wrap:balance}
.cx-play{gap:2px}
.cx-go{gap:2px}
.mset-tour .ms-room{box-shadow:inset 0 0 0 1px rgba(40,36,30,.07)}
/* the drawing sits centred, with equal space each side (4.5%); the three labels start exactly under their parts */
.sx-layers{grid-template-columns:4.5% 36.8% 36% 22.7%!important}
.sx-layers li:nth-child(1){grid-column:2}.sx-layers li:nth-child(2){grid-column:3}.sx-layers li:nth-child(3){grid-column:4}
/* the List on phones: a little more air between each Quartet and its entry */
@media (max-width:860px){.reg-row{column-gap:24px}}
/* In a room: the two ways onto your own wall, icons in a column, words lined up */
.room-links{display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:14px auto 0}
.rl{-webkit-appearance:none;appearance:none;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.rl svg,.rl img{flex:none;width:20px;height:20px}
.rl span{border-bottom:1px solid currentColor;line-height:1.3}
.room-ar.rl{margin:0}
/* the exploded drawing comes apart as it arrives: the frame and board slide back from behind the plates, then the lines are drawn */
.ex .ex-b,.ex .ex-p{transition:transform 1.5s cubic-bezier(.25,.8,.25,1)}
.ex .ex-p{transition-delay:.15s}
.ex .ex-l{transition:opacity .7s ease .9s}
.ex.shut .ex-b,.ex.shut .ex-p{transform:translate(var(--dx),var(--dy));transition-duration:.7s;transition-delay:0s}
.ex.shut .ex-l{opacity:0;transition-delay:0s;transition-duration:.25s}
.ex{cursor:pointer}
@media (prefers-reduced-motion:reduce){.ex .ex-b,.ex .ex-p,.ex .ex-l{transition:none}}
/* the hologram, as the label maker will print it: silver foil with rainbow rays from the centre, the H. mark in black and its number beneath */
.holo{width:84px;height:84px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-top:4px;box-sizing:border-box;filter:none;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 38%),
    repeating-conic-gradient(from 4deg at 50% 46%,rgba(255,255,255,0) 0deg 4deg,rgba(140,215,255,.9) 7deg,rgba(255,255,255,0) 10deg 19deg,rgba(255,232,130,.9) 22deg,rgba(255,255,255,0) 25deg 34deg,rgba(255,150,205,.85) 37deg,rgba(255,255,255,0) 40deg 49deg,rgba(120,165,255,.9) 52deg,rgba(255,255,255,0) 55deg 60deg),
    linear-gradient(135deg,#b9b7b2,#8f8d88 45%,#c7c5c0 70%,#9a9893);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.15)}
.holo img{width:58%;mix-blend-mode:normal;opacity:1;filter:brightness(0)}
.holo-n{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#111;line-height:1}
.holo::after{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);background-size:250% 100%}
/* hologram, second pass: the rays meet in the U of the H, which sits dead centre; softer, fuller rainbow */
.holo{display:block;position:relative;padding:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 34%),
    conic-gradient(from 0deg at 50% 50%,rgba(255,120,190,.1),rgba(255,210,110,.1),rgba(150,240,170,.1),rgba(110,200,255,.1),rgba(170,140,255,.1),rgba(255,120,190,.1),rgba(255,210,110,.1),rgba(150,240,170,.1),rgba(110,200,255,.1),rgba(170,140,255,.1),rgba(255,120,190,.1)),
    linear-gradient(135deg,#dcdad6 0%,#a9a7a2 30%,#eceae6 52%,#b4b2ad 74%,#e2e0dc 100%)}
.holo::before{content:"";position:absolute;inset:-6%;pointer-events:none;filter:blur(.45px);
  background:repeating-conic-gradient(from 2deg at 50% 50%,
    rgba(255,255,255,0) 0deg 4deg,rgba(255,105,180,1) 6deg,rgba(255,255,255,0) 8deg 14deg,
    rgba(255,220,80,1) 16deg,rgba(255,255,255,0) 18deg 24deg,
    rgba(70,210,255,1) 26deg,rgba(255,255,255,0) 28deg 34deg,
    rgba(110,130,255,1) 36deg,rgba(255,255,255,0) 38deg 44deg,
    rgba(120,240,160,.95) 46deg,rgba(255,255,255,0) 48deg 50deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,rgba(0,0,0,.55) 0,#000 45%);mask:radial-gradient(circle at 50% 50%,rgba(0,0,0,.55) 0,#000 45%)}
.holo img{position:absolute;width:62%;height:auto;left:calc(50% - 62% * .434);top:calc(50% - 62% * .724 * .52);z-index:1}
.holo-n{position:absolute;left:0;right:0;top:77%;text-align:center;z-index:1}
.holo::after{background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.7) 46%,transparent 60%);background-size:250% 100%}
.cx-go .cx-out{margin-top:5px}
.ex .ex-pl{transition-delay:calc(var(--i) * .03s)}
.ex.shut .ex-pl{transition-delay:calc((3 - var(--i)) * .05s)}
.ex .ex-p:not(.ex-pl){transition-delay:0s}
.ex .ex-b,.ex .ex-p{transition-timing-function:cubic-bezier(.55,0,.2,1);transition-duration:1.7s}
.el-cover-q{background:none;padding-inline:0}
/* print (the Ellidore PDF): no blended sheens or soft shadows, which some PDF viewers flatten into a grey haze */
@media print{.framed::before,.oo-q::after,.cx-quartet::after,.rq-lg::after{display:none!important}.el-cover-q .el-q,.el-q{box-shadow:none!important}.framed::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)!important}.el *{filter:none!important;mix-blend-mode:normal!important}}
@media print{.el *,.el *::before,.el *::after{box-shadow:none!important;text-shadow:none!important}}
/* Ellidore: the archive, a contact sheet of single photographs */
.el-arch{display:grid;gap:clamp(28px,4vw,48px)}
.el-arch-t{max-width:62ch;display:flex;flex-direction:column;gap:14px}
.el-arch-t h2 em{font-style:italic}
.el-arch-t p{margin:0;color:var(--soft)}
.el-arch-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,1vw,12px)}
.el-arch-grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:700px){.el-arch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media print{.el-arch{gap:8mm;align-content:center}.el-arch-grid{gap:3mm}.el-arch-t h2{font-size:30px}}

/* find a colour: a row of dots; the chosen one gets a fine ring. Tap it again for all; swipe across the works to move between colours. */
.cx-hues{margin:-2px 0 6px}
.hu-row{display:flex;gap:10px;flex-wrap:wrap}
.hu{-webkit-appearance:none;appearance:none;width:14px;height:14px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15);position:relative;transition:box-shadow .25s;-webkit-tap-highlight-color:transparent}
.hu::before{content:"";position:absolute;inset:-8px}
.hu[aria-pressed="true"]{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15),0 0 0 2.5px var(--wall),0 0 0 3.5px var(--ink)}
/* all the works: four small squares, a Quartet in miniature */
.hu-all{background:none;border-radius:1px;box-shadow:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:1px}
.hu-all i{background:var(--soft);border-radius:.5px}
.hu-all[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--wall),0 0 0 3.5px var(--ink)}
@media (hover:hover){.hu:hover{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15),0 0 0 2.5px var(--wall),0 0 0 3.5px var(--line)}.hu[aria-pressed="true"]:hover{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15),0 0 0 2.5px var(--wall),0 0 0 3.5px var(--ink)}}
#lib{touch-action:pan-y}
#lib.hu-out{opacity:0;transform:translateX(var(--sx));transition:opacity .17s ease-in,transform .17s ease-in}
#lib.hu-in{animation:huin .42s cubic-bezier(.2,.7,.2,1)}
@keyframes huin{from{opacity:0;transform:translateX(var(--sx))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#lib.hu-out{transition:none}#lib.hu-in{animation:none}}
/* speed: nothing ever shows black while it loads - a work shows its pale backing, a photograph its own colour (inline) */
.framed img{background:var(--backing,#E7E4DE)}
.cx-frame{background:#DCD8D0}
/* the plates float: each one's shadow on the board falls away from the light (--sx/--sy from app.js: cursor, or the phone's tilt) */
.cx-cell,.oo-q span,.rq-lg span{box-shadow:var(--sx,2px) var(--sy,5px) 9px var(--plate-sh);transition:box-shadow .12s linear}
.q4mini span{box-shadow:calc(var(--sx,2px) * .5) calc(var(--sy,5px) * .6) 6px var(--plate-sh)}
@media (prefers-reduced-motion:reduce){.cx-cell,.oo-q span,.rq-lg span{transition:none}}
/* the fly: a photograph lifting from the archive into its frame */
.cx-fly{position:fixed;z-index:80;transform-origin:0 0;pointer-events:none;overflow:hidden;will-change:transform}
.cx-fly img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the reveal after Surprise me: everything but the Quartet steps aside for a moment */
.cx-panel>*,.cx-open,header.top,.cx-tray,.cx-lock,.cx-archive{transition:opacity .5s ease}
.cx-reveal .cx-panel>*,.cx-reveal .cx-open,.cx-reveal header.top,.cx-reveal .cx-tray,.cx-reveal .cx-lock,.cx-reveal .cx-archive{opacity:0;pointer-events:none;transition:opacity .35s ease .25s}
/* the originality check */
.cx-check{margin:2px 0 0;min-height:18px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);line-height:1.3}
.cx-check:empty{display:none}
.cx-check i{flex:0 0 auto;width:14px;height:14px;border-radius:50%;position:relative}
.cx-check.run i{border:1.5px solid var(--line);border-top-color:var(--ink);animation:ckspin .7s linear infinite}
.cx-check.ok{color:#2F6B45}
.cx-check.ok i{background:#2F7A4C;animation:ckpop .45s cubic-bezier(.2,.9,.3,1.4)}
.cx-check.ok i::after{content:"";position:absolute;left:4.6px;top:2.6px;width:3.2px;height:6.4px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.cx-check.taken{color:#8A3B2E}
.cx-check.taken i{background:#9B4434;animation:ckpop .45s cubic-bezier(.2,.9,.3,1.4)}
.cx-check.taken i::before,.cx-check.taken i::after{content:"";position:absolute;left:6.25px;top:3.5px;width:1.5px;height:7px;background:#fff;transform:rotate(45deg)}
.cx-check.taken i::before{transform:rotate(-45deg)}
@keyframes ckspin{to{transform:rotate(360deg)}}
@keyframes ckpop{from{transform:scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.cx-check i{animation:none!important}}
/* ---------- By Harrop: one Quartet to a screen, snapping as you scroll, with an I to IX index down the side ---------- */
html:has(body.own-body){scroll-snap-type:y mandatory;scroll-padding-top:var(--hh,73px)}
.ow{position:relative}
.ow-intro{scroll-snap-align:start;padding-block:clamp(40px,7vh,80px) clamp(20px,4vh,40px);display:flex;flex-direction:column;gap:12px}
.ow-intro h1{margin:0}
.ow-intro p{margin:0;max-width:52ch;color:var(--soft)}
.ow-hint{margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px}
.ow-hint i{width:1px;height:28px;background:linear-gradient(var(--grey),transparent);animation:owh 2.2s ease-in-out infinite}
@keyframes owh{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* --fw: the frame's width, shared by the work and its label so the label lines up with the frame's edges */
.ow-s{--h:calc(100svh - var(--hh,73px));--fw:min(calc(100vw - 120px),calc((var(--h) - 150px) * .757));height:var(--h);scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.2vh,20px);padding:clamp(12px,2.5vh,28px) 0;box-sizing:border-box}
.ow-q{-webkit-appearance:none;appearance:none;border:0;cursor:zoom-in;display:block;width:var(--fw);height:auto;flex:0 0 auto}
.ow-q img{height:auto;aspect-ratio:3/4;object-fit:cover}
.ow-lab{width:var(--fw);display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:8px;column-gap:12px}
.ow-nt{display:flex;align-items:baseline;gap:10px;min-width:0}
.ow-lab .no{font-size:12px;color:var(--grey)}
.ow-lab .ti{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1;white-space:nowrap}
.ow-lab .pr{justify-self:end;font-size:13px}
.ow-v{grid-column:1/-1;justify-self:start;-webkit-appearance:none;appearance:none;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 2px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.ow-idx{position:fixed;right:clamp(14px,2.4vw,36px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:10px;z-index:15}
.ow-idx a{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--grey);text-decoration:none;text-align:left;opacity:.5;transition:opacity .25s,color .25s}
.ow-idx a[aria-current="true"]{opacity:1;color:var(--ink)}
@media (hover:hover){.ow-idx a:hover{opacity:1}}
@media (min-width:900px){.ow-s{--fw:calc((var(--h) - 170px) * .757)}}
@media (max-width:620px){.ow-idx{gap:8px}.ow-idx a{font-size:9.5px}}
/* ---------- page to page: the browser crossfades, and the same Quartet glides between pages ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
header.top{view-transition-name:site-head}
.slate .oo-q,#w1 .ow-q{view-transition-name:quartet-i}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.own-body footer{scroll-snap-align:end}
/* and a sheen across each plate's printed surface, travelling with the light */
.cx-frame::after,.oo-q span::after,.rq-lg span::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(118deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.08) 56%,rgba(255,255,255,0) 68%);
  background-size:260% 260%;background-position:calc(50% - var(--gx,0) * 46%) calc(50% - var(--gy,-.2) * 46%)}
@media (prefers-reduced-motion:reduce){.cx-frame::after,.oo-q span::after,.rq-lg span::after{display:none}}
/* the check, on request */
.cx-ckbtn{-webkit-appearance:none;appearance:none;border:0;background:none;padding:4px 0;margin:0;font:inherit;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-ckbtn span{border-bottom:1px solid currentColor;line-height:1.3}
.cx-ckbtn i{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box;position:relative}
.cx-ckbtn i::after{content:"";position:absolute;left:3.6px;top:1.6px;width:3px;height:6px;border:solid currentColor;border-width:0 1.4px 1.4px 0;transform:rotate(42deg);opacity:.45}
@media (hover:hover){.cx-ckbtn:hover i::after{opacity:1}}
.cx-check.ask i{animation:none}
/* clean view, finished: no rule above the Quartet, Harrop's mark bottom right, the Quartet slid to the centre */
.cx-hero{transition:border-color .5s ease}
.cx-reveal .cx-hero{border-top-color:transparent}
.cx-quartet{transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s,translate .7s cubic-bezier(.2,.7,.2,1)}
.cx-sig{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:30px;height:auto;opacity:0;pointer-events:none;z-index:30;transition:opacity .4s ease}
.cx-reveal .cx-sig{opacity:.9;transition:opacity .5s ease .45s}
@media (min-width:900px){.cx-sig{width:36px;right:32px;bottom:28px}}
/* the check sits tight under the code, the two read as one */
.cx-panel .cx-check{margin:-12px 0 0}
/* the check, final (James 04/10): a small pill under the code - magnifier, then a green pill with a tick; same size as the price */
.cx-panel .cx-check{margin:-6px 0 2px}
.cx-check{font-size:12.5px;min-height:30px}
.cx-ckbtn{font-size:12.5px;gap:7px;padding:6px 13px 6px 11px;border:1px solid #CFCFC8;border-radius:99px;transition:border-color .2s,background .2s}
.cx-ckbtn span{border:0;line-height:1.2}
.cx-ckbtn svg{flex:none}
@media (hover:hover){.cx-ckbtn:hover{border-color:var(--ink)}}
.cx-check.run,.cx-check.ok,.cx-check.taken{padding:6px 13px 6px 10px;border:1px solid transparent;border-radius:99px;gap:7px;width:max-content}
.cx-check.run{border-color:#E1E1DB}
.cx-check.ok{border-color:#BFD8C7;background:#EAF3ED}
.cx-check.taken{border-color:#E6C7C0;background:#F6ECE9}
.cx-check i{width:12px;height:12px}
.cx-check.ok i::after{left:4px;top:2.2px;width:2.6px;height:5.4px;border-width:0 1.4px 1.4px 0}
.cx-check.taken i::before,.cx-check.taken i::after{left:5.3px;top:2.8px;height:6.4px}
.cx-check.run i{width:11px;height:11px}
@media (max-width:899px){.cx-check{align-self:center}}
/* the check's seal */
.cx-ckbtn svg{width:13px;height:13px}
.cx-check .ck-seal{flex:none;animation:ckpop .45s cubic-bezier(.2,.9,.3,1.4)}
/* the first clean view of a visit says how to get back, bottom left, opposite the H */
.cx-tapback{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);opacity:0;pointer-events:none;z-index:30;transition:opacity .4s ease}
.cx-hinted .cx-tapback{opacity:.85;transition:opacity .6s ease 1.2s}
@media (min-width:900px){.cx-tapback{left:32px;bottom:34px}}
@media (prefers-reduced-motion:reduce){.cx-check .ck-seal{animation:none}}
/* see it alone: a small expand mark above the Quartet's top-right corner, once all four frames are filled */
.cx-full{-webkit-appearance:none;appearance:none;position:absolute;right:-10px;top:-38px;width:32px;height:32px;padding:0;border:0;background:none;color:var(--grey);display:grid;place-items:center;cursor:zoom-in;z-index:3;transition:color .2s,opacity .35s;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.cx-full:hover{color:var(--ink)}}
.cx-reveal .cx-full{opacity:0;pointer-events:none}
.cx-hinted .cx-tapback{transition-delay:.6s}
/* ---------- the panel, calmer (James 04/10): Surprise me / Back · Start again / Request / price / In a room · Share · Keep / code · check ---------- */
.cx-panel .cx-small{grid-template-columns:repeat(2,auto)!important;justify-content:center!important;column-gap:22px!important;width:auto!important}
@media (min-width:1000px){.cx-panel .cx-small{justify-content:start!important;margin-left:-12px!important}}
.cx-panel .cx-go .cx-price{margin:10px 0 0!important}
.cx-go .cx-out{margin-top:10px;position:relative}
.cx-id{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-top:6px}
@media (min-width:1000px){.cx-id{justify-content:flex-start}}
.cx-panel .cx-id .cx-code{margin:0!important;min-height:0}
.cx-panel .cx-id .cx-check{margin:0!important;align-self:auto}
/* nothing to act on yet: Request, the out row and the code wait until all four frames are filled */
.cx-hero.unfilled .cx-go .reqbtn,.cx-hero.unfilled .cx-out,.cx-hero.unfilled .cx-id{display:none!important}
.cx-hero.unfilled .cx-panel .cx-go .cx-price{margin-top:4px!important}
/* Share on a computer: copy the link, or download the image */
.cx-sharemenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;min-width:180px;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 30px -14px rgba(20,18,16,.28);z-index:20;padding:6px 0}
.cx-sharemenu[hidden]{display:none}
.cx-sharemenu button{-webkit-appearance:none;appearance:none;border:0;background:none;text-align:left;padding:9px 16px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
@media (hover:hover){.cx-sharemenu button:hover{background:var(--wall)}}

/* the panel and the Quartet never overlap: going in, the words fade first and then the Quartet slides to the centre;
   coming back, the Quartet slides home first and then the words return beside it */
.cx-reveal .cx-panel>*,.cx-reveal .cx-open{transition:opacity .2s ease}
.cx-reveal .cx-quartet{transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s,translate .7s cubic-bezier(.2,.7,.2,1) .18s}
.cx-back .cx-panel>*,.cx-back .cx-open{transition:opacity .45s ease .5s}
/* clean view: the lock marks step aside too, including on locked plates (whose mark otherwise always shows) */
body.cx-reveal .cx-cell .cx-lock,body.cx-reveal .cx-cell.locked:not(.on) .cx-lock,body.cx-reveal .cx-tools{opacity:0;pointer-events:none;transition:opacity .2s ease}

/* By Harrop ends on one full screen: an invitation to compose, with the footer beneath it, and no half Quartet above */
.ow-end{--h:calc(100svh - var(--hh,73px));min-height:calc(var(--h) - var(--fh,0px));scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px var(--gut,20px);box-sizing:border-box}
.ow-end-t{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.2vw,48px);line-height:1.05;letter-spacing:-.01em}
.ow-end-t em{font-style:italic}
.ow-end-p{margin:0 0 8px;max-width:34ch;color:var(--soft)}
.ow-end-go{display:flex;flex-direction:column;align-items:center;gap:22px}
@media (max-width:620px){.ow-end{gap:12px;padding:14px 20px}.ow-end-p{margin:0 0 4px}.ow-end-go{flex-direction:row;gap:22px}}
.ow-top{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.ow-idx{transition:opacity .35s ease}
.ow-idx.done{opacity:0;pointer-events:none}