/* v32 — the museum experiment. Laid over style.css: the door, the piece panel, the wings,
   the nav and the cursor are unchanged; the hall becomes rooms with a camera in them. */

.hall{touch-action:none;background:#0a0807}
.hall.is-held{cursor:grabbing}
/* the old hall's shade was cut for a black room; daylight stone only wants its corners
   taken down, and the top kept dark enough for the house mark */
.hall::after{background:
  linear-gradient(180deg,rgba(6,5,4,.55) 0,rgba(6,5,4,0) 15% 84%,rgba(6,5,4,.5)),
  radial-gradient(130% 90% at 50% 46%,transparent 58%,rgba(6,5,4,.55))}

/* ── a room ── */
.room{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s}
.room.is-here{opacity:1;visibility:visible;transition:opacity 1.1s ease .1s,visibility 0s}
.room.is-leaving{opacity:0;transition:opacity .8s ease .15s}
.room__world{position:absolute;left:0;top:0;transform-origin:0 0}
.room__world.is-moving{will-change:transform}
.room__bg{position:absolute;inset:0;width:100%;height:100%;
  /* the photographs are night now (v32u); this only settles them a little into the page */
  filter:brightness(.86) contrast(1.07) saturate(.86) sepia(.06);
  -webkit-user-drag:none;user-select:none;pointer-events:none}

/* ── the mannequins, stood on the floor at their perspective size ── */
.figures{position:absolute;inset:0;z-index:2}
.man{position:absolute;left:var(--x);top:calc(var(--y) - var(--h));height:var(--h);
  aspect-ratio:var(--ar);transform:translateX(-50%);padding:0;cursor:pointer;
  opacity:0;transition:opacity 1.2s ease calc(var(--far) * 700ms)}
.hall.is-lit .man{opacity:1}
.man__me{position:relative;width:100%;height:100%;z-index:2;pointer-events:none;
  /* further back, a little of the room's air between you and it */
  /* v32u: the hall is night, lit from high in the vaults, so each figure is a touch down
     and warm (v32v: less, so the glasses read); further back, a little more of the room's dark between you and it */
  filter:contrast(calc(1.02 - var(--far) * .14)) brightness(calc(.96 - var(--far) * .06))
    sepia(calc(.08 + var(--far) * .08)) saturate(.95);
  transition:filter .5s ease}
.man__face{position:absolute;z-index:3;aspect-ratio:1;height:auto;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  /* only as far down as the close-up and the figure are the same picture (museum_emit.cut),
     and only inside the figure's own outline (hall.js outline) */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--cut) - 9%),transparent calc(var(--cut) - 1%)),
    var(--fig);
  mask-image:linear-gradient(180deg,#000 calc(var(--cut) - 9%),transparent calc(var(--cut) - 1%)),
    var(--fig);
  -webkit-mask-size:100% 100%,var(--fsz);mask-size:100% 100%,var(--fsz);
  -webkit-mask-position:0 0,var(--fpos);mask-position:0 0,var(--fpos);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
.man__face.is-on{opacity:1}
/* the sharp close-up takes the same night light as the figure it sits on */
.man__face{filter:contrast(calc(1.02 - var(--far) * .14)) brightness(calc(.96 - var(--far) * .06))
    sepia(calc(.08 + var(--far) * .08)) saturate(.95)}
/* the light falls from above (v32u), so the shadow gathers close round the feet, with a
   tight dark where they meet the stone */
.man__cast{position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:0;
  pointer-events:none;transform-origin:50% 100%;transform:scaleX(1.25) scaleY(.06);
  filter:brightness(0) blur(calc(4px + var(--far) * -1px));opacity:.5}
.man__pool{position:absolute;left:50%;bottom:-1.2%;width:120%;height:5%;z-index:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(8,6,5,.62),rgba(8,6,5,0))}
/* name and price, at a constant size whatever the zoom */
.man__tag{position:absolute;left:50%;bottom:calc(100% + 6px);z-index:4;white-space:nowrap;
  transform:translateX(-50%) scale(calc(1 / var(--z,1)));transform-origin:50% 100%;
  padding:7px 12px 8px;background:rgba(8,6,5,.82);border:1px solid rgba(239,231,218,.14);
  font-size:11px;letter-spacing:.06em;color:var(--ember);opacity:0;pointer-events:none;
  transition:opacity .25s ease}
.man__tag b{display:block;font-family:var(--disp);font-weight:400;font-size:15px;
  letter-spacing:.06em;color:var(--bone);margin-bottom:1px}
@media (hover:hover) and (pointer:fine){
  .man:hover .man__tag,.man:focus-visible .man__tag{opacity:1}
  .man:hover .man__me{filter:brightness(1.08) contrast(1.04)}
}
.man:focus-visible{outline:none}
.man:focus-visible .man__me{filter:drop-shadow(0 0 2px var(--gilt))}
.hall.is-away .man__tag{opacity:0!important}
/* going up to a piece (hall.js pluck): the room stays put and goes dark, and the chosen
   mannequin, lifted out into .flyer, is the only thing that moves */
.room__veil{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 30% 45%,rgba(6,5,4,.78),rgba(6,5,4,.95));
  transition:opacity .9s ease}
.hall.is-away .room__veil{opacity:1}
.man.is-chosen{visibility:hidden}
.flyer{position:absolute;z-index:9;pointer-events:none;transform-origin:0 0;will-change:transform}
.flyer img{position:absolute;left:0;top:0;width:100%;height:100%;
  filter:brightness(.96) sepia(.08) saturate(.95)}
.flyer .flyer__face{width:auto;height:auto;aspect-ratio:1;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--cut) - 9%),transparent calc(var(--cut) - 1%)),
    var(--fig);
  mask-image:linear-gradient(180deg,#000 calc(var(--cut) - 9%),transparent calc(var(--cut) - 1%)),
    var(--fig);
  -webkit-mask-size:100% 100%,var(--fsz);mask-size:100% 100%,var(--fsz);
  -webkit-mask-position:0 0,var(--fpos);mask-position:0 0,var(--fpos);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* The mannequin that flew up IS the picture once it lands: the panel's own copy of that view
   (a square with its own background, faded in over it) is not shown. The other views still
   cross-fade in, and the flyer steps aside for them (.is-other). */
.piece__shot img:first-child{display:none}
/* once another view of the piece is on, the room is only background */
.hall.is-other .flyer{opacity:0;transition:opacity .3s ease}

/* ── doorways to the other rooms ── */
/* The signs are part of the photograph, bracket, chains, shadow and all (signs.py), so
   nothing is drawn over them at rest. Pointing at a board or its doorway brings a little
   warm light up on the board, and the gilding answers. */
.portal{position:absolute;z-index:1;display:block}
.sign{position:absolute;z-index:2;display:block;border-radius:2px;outline:none}
.sign span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.sign::before{content:'';position:absolute;inset:-35% -12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,150,.42),rgba(255,196,120,.12) 60%,
    transparent);
  mix-blend-mode:screen;opacity:0;transition:opacity .6s ease}
.sign.is-lit::before,.sign:focus-visible::before{opacity:1}
.sign:focus-visible{box-shadow:0 0 0 calc(2px / var(--z,1)) var(--gilt)}
.hall.is-away .portal,.hall.is-away .sign{pointer-events:none}
.hall.is-away .sign::before{opacity:0}

/* ── the workshop shelves (custom) ── */
/* His own pieces on the blackened oak, lit by the bench lamp below and to the left: each
   is dimmed by its distance from it (--lit, museum_emit.shelf) and throws its shadow up the
   wall behind, away from the lamp. Pointing at one brings it into the light and names it. */
.shelf{position:absolute;inset:0;z-index:2}
.shelf__piece{position:absolute;left:var(--x);top:var(--y);width:var(--w);padding:0;border:0;
  background:none;cursor:pointer;transform:translate(-50%,-100%)}
.shelf__piece img{display:block;width:100%;height:auto;
  filter:brightness(var(--lit)) saturate(.88) sepia(.1)
    drop-shadow(calc(5px / var(--z,1)) calc(-7px / var(--z,1)) calc(7px / var(--z,1)) rgba(0,0,0,.6));
  transition:filter .45s ease}
.shelf__piece:hover img,.shelf__piece:focus-visible img{
  filter:brightness(1.02) saturate(1) sepia(0)
    drop-shadow(calc(5px / var(--z,1)) calc(-7px / var(--z,1)) calc(7px / var(--z,1)) rgba(0,0,0,.6))}
.shelf__piece:focus-visible{outline:1px solid var(--gilt);outline-offset:6px}
.shelf__tag{position:absolute;left:50%;top:calc(100% + 8px);white-space:nowrap;
  transform:translateX(-50%) scale(calc(1 / var(--z,1)));transform-origin:50% 0;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone);
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.shelf__piece:hover .shelf__tag,.shelf__piece:focus-visible .shelf__tag,
.shelf__piece.is-near .shelf__tag{opacity:.9}

/* ── how to get about (v32x) ── */
/* The eyeglass (- + Overview) went: a card says once how the house works, over the showroom
   as you first stand in it, and the ? at the foot of the window brings it back. */
.howto{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(5,4,4,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s ease}
.howto[hidden]{display:none}
.howto.is-on{opacity:1}
.howto__card{width:min(620px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:clamp(28px,4vw,50px);border:1px solid rgba(200,172,114,.3);
  background:linear-gradient(180deg,rgba(15,12,10,.97),rgba(7,6,5,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  transform:translateY(14px);transition:transform .7s var(--out)}
.howto.is-on .howto__card{transform:none}
.howto__no{margin:0;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gilt)}
.howto h2{margin:12px 0 0;font-family:var(--disp);font-weight:400;
  font-size:clamp(32px,4vw,46px);line-height:1;color:var(--bone)}
.howto__list{display:grid;grid-template-columns:1fr;margin:24px 0 0}
/* one line to a row, each with its moving picture in a small dark tile beside it */
.howto__list div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 22px;
  align-items:center;padding:13px 0;border-top:1px solid rgba(239,231,218,.12)}
.howto__list .hw{grid-row:1 / span 2;width:120px;height:90px;
  background:rgba(239,231,218,.03);border:1px solid rgba(239,231,218,.08)}
.howto__list dt{grid-column:2;align-self:end}
.howto__list dd{grid-column:2;align-self:start}

/* the moving pictures (v32y): line in bone, the house's red for what matters */
.hw{overflow:visible;color:rgba(239,231,218,.62);fill:none;stroke:currentColor;
  stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.hw .hw__frame{stroke:var(--gilt);stroke-opacity:.7}
.hw .hw__red{stroke:#C21A22;fill:#C21A22;stroke-width:1.4}
.hw .hw__tip{fill:var(--bone);fill-opacity:.85;stroke:none}
.hw .hw__fig circle,.hw .hw__fig path:not(.hw__red){fill:rgba(239,231,218,.16)}
.hw .hw__board{fill:#0b0908;stroke:var(--gilt);stroke-opacity:.8}
/* look around: the finger drags and the room goes with it */
.hw--look .hw__strip,.hw--look .hw__hand{animation:hw-drag 3.4s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hw-drag{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}
.hw--look .hw__tip{animation:hw-press 3.4s ease infinite}
@keyframes hw-press{0%,100%{fill-opacity:.85}48%,52%{fill-opacity:.5}}
/* step closer: the wheel turns (or two fingers part) and the figure comes nearer */
.hw--near .hw__fig{transform-origin:23px 41px;animation:hw-near 3.4s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hw-near{0%,100%{transform:scale(.78)}45%,60%{transform:scale(1.3)}}
.hw--near .hw__wheel{animation:hw-wheel .85s ease-in-out infinite}
@keyframes hw-wheel{0%{transform:translateY(-1px);opacity:0}40%{opacity:1}100%{transform:translateY(5px);opacity:0}}
.hw--near .hw__pinch{display:none}
.hw--near .hw__f1{animation:hw-f1 3.4s cubic-bezier(.45,0,.3,1) infinite}
.hw--near .hw__f2{animation:hw-f2 3.4s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hw-f1{0%,100%{transform:translate(2px,-2px)}45%,60%{transform:translate(-3px,3px)}}
@keyframes hw-f2{0%,100%{transform:translate(-2px,2px)}45%,60%{transform:translate(3px,-3px)}}
@media (hover:none),(pointer:coarse){
  .hw--near .hw__mouse{display:none}
  .hw--near .hw__pinch{display:inline}
}
/* see a piece: the pointer goes to her, a ring answers, and she comes forward */
.hw--piece .hw__cursor{fill:var(--bone);stroke:#0b0908;stroke-width:.8;
  animation:hw-point 3.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hw-point{0%{transform:translate(52px,38px)}38%,62%{transform:translate(25px,16px)}100%{transform:translate(52px,38px)}}
.hw--piece .hw__ring{stroke:#C21A22;transform-origin:24px 15px;opacity:0;
  animation:hw-ring 3.6s ease-out infinite}
@keyframes hw-ring{0%,38%{opacity:0;transform:scale(.5)}42%{opacity:1}62%,100%{opacity:0;transform:scale(1.6)}}
.hw--piece .hw__fig{transform-origin:24px 41px;animation:hw-forward 3.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hw-forward{0%,42%{transform:none}58%,80%{transform:scale(1.18)}100%{transform:none}}
/* the other rooms: the sign sways on its chains and you walk through the door it marks */
.hw--rooms .hw__sign{transform-origin:18.5px 9px;animation:hw-sway 3.2s ease-in-out infinite}
@keyframes hw-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.hw--rooms .hw__door{stroke:var(--gilt);stroke-opacity:.75}
.hw--rooms .hw__walker{animation:hw-walk 3.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hw-walk{0%{transform:none;opacity:0}12%{opacity:.9}70%{transform:translateX(38px);opacity:.9}
  85%,100%{transform:translateX(38px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hw *{animation:none!important}}
.howto dt{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gilt)}
.howto dd{margin:9px 0 0;font-size:14.5px;line-height:1.65;color:#C4BCB0}
.howto__go{margin-top:26px;border:0;cursor:pointer}
@media (max-width:540px){
  .howto__list div{grid-template-columns:88px minmax(0,1fr);gap:0 16px;padding:11px 0}
  .howto__list .hw{width:88px;height:66px}
  .howto dd{font-size:13.5px}
}

.howto-open{position:fixed;left:var(--pad);bottom:clamp(18px,3.4vh,40px);z-index:29;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(239,231,218,.22);background:rgba(8,6,5,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--disp);font-size:18px;line-height:1;color:var(--bone);cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .8s ease,background .2s ease}
body.is-in .howto-open{opacity:1;pointer-events:auto;transition-delay:2.6s,0s}
body.is-reading .howto-open{opacity:0;pointer-events:none;transition-delay:0s}
/* v32z.4: "when you go into contact the ? icon remains, this is only needed in the showroom".
   It is about getting round the showroom, so in every other room it goes, and comes back
   when you walk back out */
body[data-room]:not([data-room="gallery"]) .howto-open{opacity:0;pointer-events:none;
  visibility:hidden;transition-delay:0s,0s}
.howto-open:hover{background:rgba(142,17,25,.6)}
.howto-open:focus-visible{outline:1px solid var(--gilt);outline-offset:3px}
@media (max-width:820px){
  /* the side rooms' desks rise from the foot on a phone, so the ? stands at the top */
  .howto-open{left:auto;right:var(--pad);bottom:auto;top:clamp(18px,3vh,32px)}
}

/* ── the desk in each side room: what the room is for ── */
.desk{position:absolute;top:0;right:0;bottom:0;z-index:8;width:min(41vw,600px);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:clamp(70px,11vh,120px) clamp(26px,3.4vw,58px) clamp(90px,12vh,130px);
  background:linear-gradient(255deg,rgba(7,6,5,.97) 60%,rgba(7,6,5,.9));
  border-left:1px solid rgba(239,231,218,.1);
  transform:translateX(30px);opacity:0;transition:transform 1s var(--out) .5s,opacity .8s ease .5s}
.room.is-here .desk{transform:none;opacity:1}
.desk__back{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
  padding:0;margin-bottom:34px}
.desk__back:hover{color:var(--bone)}
.desk__no{margin:0;font-family:var(--disp);font-size:13px;letter-spacing:.3em;color:var(--gilt)}
.desk h2{margin:12px 0 0;font-family:var(--disp);font-weight:400;
  font-size:clamp(38px,4.2vw,64px);line-height:.96;letter-spacing:.01em;text-wrap:balance}
.desk__lead{margin:20px 0 0;max-width:38ch;font-size:15px;line-height:1.7;color:#C4BCB0}
.desk .steps{margin:30px 0 0}
.form{display:grid;gap:18px;margin:36px 0 0;padding-top:30px;
  border-top:1px solid rgba(239,231,218,.12)}
.form label,.form fieldset{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.form label>span,.form legend{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);padding:0}
.form input:not([type=radio]),.form textarea,.form select{width:100%;padding:12px 14px;
  background:rgba(239,231,218,.04);border:1px solid rgba(239,231,218,.16);border-radius:0;
  color:var(--bone);font:inherit;font-size:16px;line-height:1.4;
  transition:border-color .2s ease,background .2s ease}
.form textarea{resize:vertical;min-height:120px}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),
  linear-gradient(135deg,var(--ash) 50%,transparent 50%);background-position:
  calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.form select option{background:#0c0a09}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;
  border-color:var(--gilt);background:rgba(239,231,218,.07)}
.form ::placeholder{color:#6f685f}
.form__pick{display:flex;flex-wrap:wrap;gap:10px}
.form__pick label{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
  border:1px solid rgba(239,231,218,.16);font-size:13.5px;color:#C4BCB0}
.form__pick input{accent-color:var(--blood);margin:0}
.form__pick label:has(input:checked){border-color:var(--gilt);color:var(--bone)}
.form .claim{justify-self:start;margin-top:8px;border:0;cursor:pointer}
.form__note{margin:4px 0 0;padding:14px 16px;border:1px solid rgba(200,172,114,.35);
  font-size:13.5px;line-height:1.6;color:#D9D0C2}
.desk__foot{margin:36px 0 0;font-size:12.5px;line-height:1.8;color:var(--ash)}

/* the rooms that were panels (v32x): their words on the desk, set for its width */
.desk .trip{margin:30px 0 0;grid-template-columns:repeat(3,1fr)}
.desk .notes{grid-template-columns:1fr;gap:26px;margin:34px 0 0}
.desk__end{margin:34px 0 0;font-family:var(--disp);font-size:clamp(18px,1.5vw,23px);
  line-height:1.45;color:#C6BEB1;max-width:34ch}
/* the collection's desk is wider, for its cases: the cabinet keeps the left. v32y: the cases
   stand in rows and the desk scrolls up and down through them (Greg: "can we make the pairs
   scroll up and down"), so the run is no longer a sideways strip that dissolves at its ends */
.desk--run .run{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,42%),1fr));
  gap:clamp(26px,3.4vh,40px) clamp(14px,1.6vw,26px);margin:30px 0 0;padding:0;
  overflow:visible;max-height:none;scroll-snap-type:none;
  -webkit-mask-image:none;mask-image:none}
.desk--run .case{flex:none;min-width:0}
@media (min-width:821px){
  .room[data-room="commissions"] .desk,.room[data-room="making"] .desk,
  .room[data-room="house"] .desk,.room[data-room="faq"] .desk{width:min(34vw,520px)}
  .room[data-room="collection"] .desk{width:min(62vw,1000px)}
}
@media (max-width:820px){
  .desk{top:auto;left:0;width:auto;height:62%;border-left:0;
    border-top:1px solid rgba(239,231,218,.12);
    padding:28px 22px 110px;transform:translateY(30px)}
  .desk__back{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .room,.desk,.writing,.man{transition-duration:1ms!important;transition-delay:0s!important}
}

/* ── the writing table (contact) ── */
/* A letter laid on the oak, written in by a quill that follows what you type (quill.js).
   The sheet, the quill and the inkwell are photographed cut-outs (contact_desk.py); the
   light in the room comes from the top left, so everything throws its shadow down and to
   the right, and the sheet falls a little into the table's shadow on that side. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.writing{position:absolute;inset:0;z-index:8;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;display:grid;justify-items:center;
  padding:clamp(84px,11vh,120px) 16px clamp(96px,13vh,140px);
  opacity:0;transition:opacity .9s ease .45s;
  /* black paper, written on in pale ink: wet it is near white and catches the light, dry it
     settles to bone */
  --paper-ink:#b3a796;--wet:#fffaf0;--dry:#d9cfbf;
  /* the hand: a copperplate script. Blackletter was tried (v32h) and Greg turned it down
     at once, "more castle which is not the vibe"; this is the one he called down pat */
  --hand:'Pinyon Script','Snell Roundhand','Apple Chancery',cursive;
  --lh:46px}
.room.is-here .writing{opacity:1}
/* the table under a black sheet: the same oak, taken further into the dark */
.room[data-room="contact"] .room__bg{filter:brightness(.5) contrast(1.12) saturate(.62)}
.writing__back{position:fixed;left:var(--pad);top:clamp(112px,14vh,132px);z-index:3;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);padding:0}
.writing__back:hover{color:var(--bone)}
.stage{position:relative;width:min(620px,100%);align-self:start}

.letter{position:relative;display:grid;gap:10px;color:var(--paper-ink);
  padding:clamp(34px,9%,64px) clamp(24px,9%,62px) clamp(40px,9%,64px);
  font-family:var(--disp);font-style:italic;font-size:clamp(15px,1.25vw,17.5px);line-height:1.5;
  transform:translateY(14px) rotate(-.6deg);transition:transform 1.1s var(--out) .5s}
.room.is-here .letter{transform:rotate(-.6deg)}
.letter__sheet{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(img/museum/contact_paper.webp) center/100% 100% no-repeat;
  filter:drop-shadow(10px 14px 16px rgba(0,0,0,.7)) drop-shadow(2px 3px 2px rgba(0,0,0,.5))}
/* the table's light on the sheet: full at the top left, falling away to the bottom right */
.letter__sheet::after{content:'';position:absolute;inset:0;mix-blend-mode:screen;
  -webkit-mask:url(img/museum/contact_paper.webp) center/100% 100% no-repeat;
  mask:url(img/museum/contact_paper.webp) center/100% 100% no-repeat;
  background:radial-gradient(120% 95% at 10% 4%,rgba(255,238,214,.085),rgba(255,238,214,.02) 55%,transparent 80%)}
.letter__head{text-align:center;margin-bottom:18px}
.letter__house{margin:0;font-family:var(--ui);font-style:normal;font-size:9.5px;
  letter-spacing:.42em;text-transform:uppercase;color:#b8343c}
.letter h2{margin:12px 0 0;font-weight:400;font-style:normal;
  font-size:clamp(26px,3vw,36px);line-height:1.05;color:var(--bone);text-wrap:balance}
.letter__lead{margin:12px auto 0;max-width:34ch;font-size:.92em;line-height:1.55;color:#8f8474}
.letter__dear{margin:8px 0 2px}

/* a line of the letter: the printed words, then the blank the quill writes into */
.line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45em;margin:0;padding:0;
  border:0;min-width:0}
.line>span:first-child{white-space:nowrap}
.ink{position:relative;display:block;flex:1 1 9em;min-width:0}
.ink input,.ink textarea,.ink__m{font-family:var(--hand);font-style:normal;font-size:1.75em;
  font-weight:400;letter-spacing:.01em;line-height:var(--lh);
  font-kerning:none;font-variant-ligatures:none;font-feature-settings:"kern" 0,"liga" 0,"calt" 0}
.ink input,.ink textarea{display:block;width:100%;margin:0;padding:0 .1em;border:0;
  border-radius:0;background:none;color:transparent;caret-color:var(--wet);outline:none;
  -webkit-text-fill-color:transparent}
.ink input{height:var(--lh);border-bottom:1px dotted rgba(239,231,218,.26)}
.ink input:focus{border-bottom-color:rgba(239,231,218,.5)}
.ink ::selection{background:rgba(200,172,114,.32)}
.ink textarea{resize:none;overflow:hidden;min-height:calc(var(--lh) * 4);
  background:repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px),
    rgba(239,231,218,.13) calc(var(--lh) - 1px) var(--lh))}
.ink textarea::placeholder{color:rgba(239,231,218,.3);-webkit-text-fill-color:rgba(239,231,218,.3)}
.ink--body{margin-top:8px}
/* the ink itself: the same text, laid exactly over the field, one span a letter */
.ink__m{position:absolute;inset:0;padding:0 .1em;pointer-events:none;white-space:pre;
  overflow:hidden;color:var(--dry)}
.ink--body .ink__m{white-space:pre-wrap;overflow-wrap:break-word}
.ink__m b{font-weight:inherit;color:var(--dry);color:rgb(from var(--dry) r g b / var(--a,1))}
.ink__m b.w{animation:wet 2.6s cubic-bezier(.2,.6,.3,1) both}
.ink__m i{display:inline-block;width:0}
/* a letter as the nib leaves it: it spreads into the paper from a point, wet and almost
   black, then sinks in and dries to the brown of iron-gall ink */
@keyframes wet{
  0%{opacity:0;filter:blur(1.4px);color:var(--wet);transform:translateY(.03em) scale(.92);
    text-shadow:0 0 6px rgba(255,248,232,.5)}
  14%{opacity:1;filter:blur(.3px);transform:none}
  30%{filter:none;color:var(--wet);text-shadow:0 0 4px rgba(255,248,232,.28)}
  100%{color:rgb(from var(--dry) r g b / var(--a,1));text-shadow:none}}

/* circling one of the choices, as you would on a printed form */
.line--pick{display:flex;flex-wrap:wrap;column-gap:.9em;row-gap:8px;margin-top:4px}
.line--pick legend{float:left;margin-right:.45em;padding:0}
.line--pick label{position:relative;cursor:pointer;padding:2px 4px}
.line--pick input{position:absolute;opacity:0;width:1px;height:1px}
.line--pick input:focus-visible+span{text-decoration:underline dotted}
.line--pick svg{position:absolute;left:-5%;top:-14%;width:110%;height:128%;overflow:visible;
  pointer-events:none}
.line--pick path{fill:none;stroke:var(--dry);stroke-width:1.5;stroke-linecap:round;
  transition:opacity .6s ease}
.line--pick path.is-gone{opacity:0}

.letter__close{display:grid;justify-items:end;margin-top:14px;padding-right:6%}
.letter__close p{margin:0}
.sig{position:relative;min-width:8em;height:var(--lh)}
.sig .ink__m{font-size:2.1em;text-align:right;overflow:visible}
.letter__send{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 22px;margin-top:20px}
.letter .claim{margin:0;border:0;cursor:pointer;font-style:normal}
.letter__foot{margin:0;font-size:.82em;color:#8a7f71}
.letter .form__note{margin:10px 0 0;padding:12px 14px;border:1px solid rgba(200,172,114,.35);
  font-family:var(--ui);font-style:normal;font-size:13px;line-height:1.6;color:#d9d0c2}

/* the inkwell stands to the right of the sheet, the quill lies by it until it is needed */
.inkwell{position:absolute;left:calc(100% + 34px);top:40px;width:128px;height:auto;
  pointer-events:none;filter:drop-shadow(8px 12px 10px rgba(0,0,0,.6))}
.quill{position:absolute;left:0;top:0;width:var(--qw,190px);pointer-events:none;z-index:4;
  transform-origin:0 0;will-change:transform}
.quill.is-away{opacity:0}
.quill img{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:0 100%;
  transition:transform .5s var(--out)}
/* black on a black sheet: the shadow carries less, so the cut-out's own highlights do the
   work, helped by the faintest edge of the room's light */
.quill__me{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5)) drop-shadow(-.5px -.5px .5px rgba(255,238,214,.22))}
.quill__shade{filter:brightness(0) blur(3px);opacity:.6;transform:translate(9px,7px)}
.quill.is-up .quill__me{transform:translate(5px,-9px) scale(1.02)}
.quill.is-up .quill__shade{transform:translate(20px,18px);opacity:.3}
@media (max-width:1100px){
  .inkwell{display:none}
}
@media (max-width:820px){
  .writing{padding-top:76px;--lh:40px}
  .writing__back{position:absolute;top:30px;left:auto;right:22px}
  .letter{transform:none}
  .room.is-here .letter{transform:none}
  .quill{--qw:130px}
}
@media (prefers-reduced-motion:reduce){
  .ink__m b.w{animation:none}
  .quill{display:none}
}

/* ── the questions (v32z) ── */
.faq{margin:30px 0 0;border-top:1px solid rgba(239,231,218,.12)}
.faq details{border-bottom:1px solid rgba(239,231,218,.12)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:baseline;gap:18px;padding:17px 0;font-family:var(--disp);
  font-size:clamp(17px,1.35vw,20px);line-height:1.3;color:var(--bone);text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font-family:var(--ui);font-size:15px;
  color:var(--gilt);transition:transform .35s var(--out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq summary:focus-visible{outline:1px solid var(--gilt);outline-offset:4px}
.faq p{margin:0 0 18px;max-width:42ch;font-size:14.5px;line-height:1.7;color:#C4BCB0}
.faq details[open] p{animation:faq-in .5s var(--out)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
/* a fact still to be settled shows as one, as on the register */
.tbc{color:#c9875a;font-style:italic}
.desk__go{display:inline-block;margin:0 0 20px;padding:0 0 6px;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gilt);
  border-bottom:1px solid rgba(200,172,114,.4)}
.desk__go:hover{color:var(--bone);border-color:var(--blood)}
.desk__write{margin-top:22px;border:0;cursor:pointer}

/* ── the menu at the foot (v32z): back, its ways rooms ── */
/* v32z.3: Greg on the first try, "dont use gold and the text is not the same and the red
   crosses are not center with the text". The names are set as every other label on the site
   is (Jost capitals, spaced, as "The showroom" on each desk); no gilt rule; the red stars sit
   on the middle of the capitals. The red hairline under a name is drawn outside its box, so the
   box is only the letters and centring the stars on it centres them on the words. */
.ways{bottom:0;align-items:center;gap:clamp(16px,2.4vw,36px);
  padding:clamp(56px,9vh,96px) 16px clamp(22px,3.8vh,38px);
  background:linear-gradient(to top,rgba(7,6,5,.94) 25%,rgba(7,6,5,.6) 62%,rgba(7,6,5,0));
  pointer-events:none}
.ways a{pointer-events:auto;position:relative;display:block;padding:0;border:0;
  font-family:var(--ui);font-size:12px;font-weight:400;line-height:1;
  letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;color:#D6CCBD;
  text-shadow:0 1px 14px rgba(0,0,0,.9);transition:color .35s ease}
.ways a span{display:block;position:relative}
.ways a span::after{content:'';position:absolute;left:0;right:.3em;bottom:-9px;height:1px;
  background:#C21A22;transform:scaleX(0);transition:transform .45s var(--out)}
.ways a::before{content:'';position:absolute;inset:-12px -10px}      /* a bigger target */
.ways a:hover{color:#fff}
.ways a:hover span::after,.ways a.on span::after{transform:scaleX(1)}
.ways a.on{color:var(--bone)}
.ways a:focus-visible{outline:1px solid rgba(239,231,218,.6);outline-offset:8px}
.ways__star{flex:none;width:7px;height:7px;background:#C21A22;transform:translateY(var(--sy,0px));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@media (min-width:821px){
  /* in a room with a desk the names stand under the room, clear of the desk's words */
  body[data-room="commissions"] .ways,body[data-room="making"] .ways,
  body[data-room="house"] .ways,body[data-room="faq"] .ways{right:min(34vw,520px)}
  body[data-room="collection"] .ways{right:min(62vw,1000px)}
}
@media (max-width:820px){
  body[data-room="commissions"] .ways,body[data-room="collection"] .ways,
  body[data-room="making"] .ways,body[data-room="house"] .ways,body[data-room="faq"] .ways{
    padding:16px 0 18px;background:linear-gradient(to top,rgba(7,6,5,.98) 55%,rgba(7,6,5,0))}
  .ways{gap:12px}
  .ways a{font-size:10.5px;letter-spacing:.18em;margin-right:-.18em}
  .ways__star{width:6px;height:6px}
}

/* v32z.7: the moment the lights stutter as the room comes clear (hall.js wander); above the
   rooms, below the menu and the door */
.hall__dark{position:fixed;inset:0;z-index:2;background:#020101;opacity:0;pointer-events:none}

/* ───────────────────────────── v33: the shop (shop.js) ───────────────────────────── */
/* The pieces' pages, the bag and the policies sit over the rooms like a sheet of black paper:
   bone type, the blood red for what you act on, no gilt. */

/* the bag, top right in every room */
.bag-open{position:fixed;top:clamp(18px,3vh,32px);right:var(--pad);z-index:60;display:flex;
  align-items:center;gap:10px;height:38px;padding:0 14px 0 16px;border-radius:19px;
  border:1px solid rgba(239,231,218,.22);background:rgba(8,6,5,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--bone);cursor:pointer;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .8s ease,background .2s ease}
body.is-in .bag-open{opacity:1;pointer-events:auto;transition-delay:2.6s,0s}
.bag-open__n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;
  place-items:center;font-weight:400;font-size:10px;letter-spacing:0;background:rgba(239,231,218,.12)}
.bag-open.has .bag-open__n{background:#A3141D;color:#fff}
.bag-open:hover{background:rgba(142,17,25,.45)}
.bag-open:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
@media (max-width:820px){
  .howto-open{right:calc(var(--pad) + 104px)}
  .bag-open{padding:0 12px}
}

.bag{position:fixed;inset:0;z-index:62;background:rgba(3,2,2,.55);opacity:0;
  transition:opacity .4s ease}
.bag.is-on{opacity:1}
.bag__panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;
  flex-direction:column;background:#0b0908;border-left:1px solid rgba(239,231,218,.1);
  transform:translateX(24px);transition:transform .5s var(--out)}
.bag.is-on .bag__panel{transform:none}
.bag__head{display:flex;justify-content:space-between;align-items:baseline;
  padding:clamp(26px,4vh,40px) 28px 18px;border-bottom:1px solid rgba(239,231,218,.1)}
.bag__head h2{margin:0;font-family:var(--disp);font-weight:400;font-size:30px}
.bag__shut{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);padding:6px 0}
.bag__shut:hover{color:var(--bone)}
.bag__list{list-style:none;margin:0;padding:8px 28px;overflow-y:auto;flex:1}
.bag__list li{display:grid;grid-template-columns:72px 1fr auto;grid-template-rows:auto auto;
  column-gap:16px;row-gap:4px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(239,231,218,.08)}
.bag__list .bag__tile{grid-column:1;grid-row:1/3;width:72px;height:72px;display:block;background-color:#140f0d}
.bag__list li>div{grid-column:2;grid-row:1/3;display:grid;gap:6px;min-width:0}
.bag__list a{font-family:var(--disp);font-size:18px;color:var(--bone);text-decoration:none}
.bag__list a:hover{text-decoration:underline;text-decoration-color:#A3141D;text-underline-offset:4px}
.bag__list li>div span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.bag__list b{grid-column:3;grid-row:1;font-weight:400;font-size:14px;color:var(--bone);text-align:right}
.bag__list button{grid-column:3;grid-row:2;justify-self:end;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);padding:2px 0}
.bag__list button:hover{color:#E04A50}
.bag__empty{display:none;margin:0;padding:30px 28px;font-size:14px;line-height:1.7;color:#C4BCB0}
.bag.is-empty .bag__empty{display:block}
.bag.is-empty .bag__list,.bag.is-empty .bag__sum,.bag.is-empty .bag__go,.bag.is-empty .bag__note{display:none}
.bag__foot{padding:22px 28px calc(22px + env(safe-area-inset-bottom));border-top:1px solid rgba(239,231,218,.1);
  display:grid;gap:14px}
.bag__sum{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}
.bag__sum b{font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:0;color:var(--bone);text-transform:none}
.bag__note,.bag__safe{margin:0;font-size:12.5px;line-height:1.6;color:#9d958a}
.bag__go{width:100%;border:0;cursor:pointer;justify-content:center}
.bag__go[disabled]{opacity:.6;cursor:progress}
.bag__msg{margin:0;padding:12px 14px;border:1px solid rgba(163,20,29,.6);font-size:13px;line-height:1.6;color:#E3D9CB}
.bag__msg a,.bag__legal a,.desk__legal a{color:inherit;text-decoration:underline;text-decoration-color:rgba(163,20,29,.9);text-underline-offset:3px}
.bag__legal{margin:0;font-size:11px;letter-spacing:.06em;color:var(--ash)}

/* the page: a piece, a policy */
.page{position:fixed;inset:0;z-index:58;overflow-y:auto;overscroll-behavior:contain;
  background:#070605;opacity:0;transition:opacity .45s ease;-webkit-overflow-scrolling:touch}
.page.is-on{opacity:1}
body.is-paged .ways,body.is-paged .howto-open{opacity:0;pointer-events:none}
.page__shut{position:sticky;top:0;z-index:2;display:block;width:100%;text-align:left;
  padding:clamp(20px,3vh,30px) var(--pad) 16px;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ash);
  background:linear-gradient(#070605 60%,rgba(7,6,5,0))}
.page__shut:hover{color:var(--bone)}
.page__in{padding:0 var(--pad) clamp(70px,10vh,120px)}
.page a{color:var(--bone)}
.page :focus-visible{outline:1px solid var(--bone);outline-offset:4px}
.page h1:focus{outline:none}

/* a piece */
.pp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4.5vw,80px);
  max-width:1380px;margin:0 auto;align-items:start}
.pp__gal{position:sticky;top:64px}
.pp__main{margin:0;aspect-ratio:1;display:grid;place-items:center;background:#120e0c;overflow:hidden}
.pp__main img{width:100%;height:100%;object-fit:contain;display:block}
.pp__main.is-cut{background:radial-gradient(ellipse at 50% 40%,#1d1714,#070605 70%)}
.pp__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px}
.pp__thumbs button{aspect-ratio:1;padding:0;background:#120e0c;border:1px solid transparent;
  opacity:.62;transition:opacity .2s ease,border-color .2s ease;cursor:pointer;overflow:hidden}
.pp__thumbs button.is-headshot{background:#1a1412}
.pp__thumbs button:hover{opacity:.9}
.pp__thumbs button.on{opacity:1;border-color:#A3141D}
.pp__thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pp__text{max-width:560px;padding-top:6px}
.pp__kind{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.pp h1{margin:14px 0 0;font-family:var(--disp);font-weight:400;font-size:clamp(44px,5.4vw,82px);
  line-height:.95;text-wrap:balance}
.pp__track{margin:12px 0 0;font-family:var(--disp);font-style:italic;font-size:18px;color:#B8AFA3}
.pp__price{margin:22px 0 0;font-family:var(--disp);font-size:30px;color:var(--bone)}
.pp__buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:22px 0 0}
.pp__buy .claim{border:0;cursor:pointer}
.claim--quiet{background:transparent!important;border:1px solid rgba(239,231,218,.3)!important}
.pp__out{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);padding:4px 0}
.pp__out:hover{color:var(--bone)}
.pp__gone{margin:0;width:100%;font-size:14px;line-height:1.7;color:#C4BCB0}
.pp__made{margin:26px 0 0;padding:16px 0;border-top:1px solid rgba(239,231,218,.12);
  border-bottom:1px solid rgba(239,231,218,.12);font-family:var(--disp);font-size:17px;line-height:1.55;color:#D9D0C2}
.pp__story,.pp__text>p{font-size:15px;line-height:1.75;color:#C4BCB0}
.pp__story{margin:20px 0 0}
.pp__text h2{margin:34px 0 10px;font-family:var(--ui);font-weight:400;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ash)}
.pp__list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pp__list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:#D9D0C2}
.pp__list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:#A3141D;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.pp__meas{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pp__meas div{padding:12px 14px;border:1px solid rgba(239,231,218,.1)}
.pp__meas dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.pp__meas dd{margin:6px 0 0;font-family:var(--disp);font-size:20px;font-variant-numeric:tabular-nums}
.pp__custom{margin-top:34px!important;padding-top:20px;border-top:1px solid rgba(239,231,218,.12)}
.pp__text a{text-decoration:underline;text-decoration-color:rgba(163,20,29,.9);text-underline-offset:3px}
.pp__near{display:flex;justify-content:space-between;gap:16px;max-width:1380px;margin:clamp(50px,8vh,90px) auto 0;
  padding-top:24px;border-top:1px solid rgba(239,231,218,.12)}
.pp__near a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);text-decoration:none}
.pp__near a:hover{color:var(--bone)}
@media (max-width:900px){
  .pp{grid-template-columns:1fr}
  .pp__gal{position:static}
  .pp__near a:nth-child(2){display:none}
}

/* a policy */
.doc{max-width:700px;margin:0 auto;padding-top:clamp(10px,3vh,40px)}
.doc__no{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.doc h1{margin:14px 0 0;font-family:var(--disp);font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;text-wrap:balance}
.doc .doc__lead{margin:20px 0 6px;font-family:var(--disp);font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#D9D0C2}
.doc h2{margin:38px 0 10px;font-family:var(--ui);font-weight:400;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ash)}
.doc p,.doc li{font-size:15px;line-height:1.75;color:#C4BCB0}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.doc b{font-weight:400;color:var(--bone)}
.doc a{text-decoration:underline;text-decoration-color:rgba(163,20,29,.9);text-underline-offset:3px}
.doc__facts{margin:0;display:grid;border-top:1px solid rgba(239,231,218,.1)}
.doc__facts div{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid rgba(239,231,218,.1)}
.doc__facts dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);padding-top:4px}
.doc__facts dd{margin:0;font-size:15px;line-height:1.6;color:#D9D0C2}
.doc__sign{margin-top:30px!important;font-family:'Pinyon Script',cursive;font-size:30px!important;color:var(--bone)!important}

/* The Collection: the cases down the desk, every piece */
.shelfrun{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,42%),1fr));
  gap:clamp(26px,3.4vh,40px) clamp(14px,1.6vw,26px);margin:30px 0 0}
.shelfrun .case{flex:none;min-width:0;opacity:1;transform:none;text-decoration:none}
.shelfrun .case__plate{background-color:#140f0d;transition:filter .3s ease}
.shelfrun .case:hover .case__plate{filter:brightness(1.12)}
.shelfrun .case--shut .case__plate{filter:grayscale(1) brightness(.4)}
.shelfrun .case:focus-visible{outline:1px solid var(--bone);outline-offset:6px}
.shelfrun__none{font-size:14px;color:var(--ash)}
.room[data-room="collection"] .sift{flex-wrap:wrap;row-gap:12px}

/* the mannequin's card carries every photograph and all the detail (v33.2) */
.piece .views{flex-wrap:wrap}
/* v33.4, Greg: the red frame "has left a black line on the edge of the hero images": the
   buttons kept the browser's own padding; the photograph now fills the frame to its edge */
.piece .views button{padding:0;display:block}
.piece .views button img{display:block}
.piece .views button.on,.piece .views button:hover{border-color:#A3141D}
.piece__extra.pp{display:block;max-width:none;margin:0}
.piece__extra .pp__made{margin-top:30px}
@media (min-width:901px){
  /* the card's Close sits top right: the bag steps aside for it */
  body.is-reading .bag-open{right:clamp(118px,9vw,150px)}
}
.pp h3,.piece__extra h3{margin:34px 0 10px;font-family:var(--ui);font-weight:400;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.piece__extra p{font-size:14.5px;line-height:1.75;color:#C4BCB0}
.piece__extra a{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(163,20,29,.9);text-underline-offset:3px}
.piece__extra .pp__track{margin:26px 0 0}
.piece .claim[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* the policies at the end of the menu and of the questions */
.ways__legal{position:absolute;right:var(--pad);bottom:clamp(22px,3.8vh,38px);display:flex;gap:14px;
  pointer-events:auto}
.ways__legal a{font-family:var(--ui);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8D857A;text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.ways__legal a:hover{color:var(--bone)}
@media (max-width:1100px){ .ways__legal{display:none} }
.desk__legal{margin:30px 0 0;font-size:12px;line-height:1.9;color:var(--ash)}
.ways a{white-space:nowrap}
@media (min-width:821px) and (max-width:1300px){
  body[data-room="collection"] .ways{gap:12px}
  body[data-room="collection"] .ways a{letter-spacing:.18em;font-size:11px}
}

/* v33.5: the claim beside the price, on the card and on the page */
.piece__buy,.pp__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:16px 24px;margin-top:20px}
.piece__buy .piece__p,.pp__row .pp__price{margin:0}
.piece__buy .claim,.pp__row .claim{margin:0;padding:15px 34px}
.pp__row .pp__buy{margin:0;justify-content:flex-end}
.pp__row .pp__gone{order:2;width:100%}

/* v33.6: the house's checkout page, before Stripe's */
.co{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:clamp(30px,5vw,90px);
  max-width:1180px;margin:0 auto;padding-top:clamp(10px,3vh,40px);align-items:start}
.co h1{margin:14px 0 0;font-family:var(--disp);font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1}
.co h2,.doc h2{font-family:var(--ui)}
.co h2{margin:44px 0 14px;font-weight:400;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.co__list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid rgba(239,231,218,.1)}
.co__list li{display:grid;grid-template-columns:88px 1fr auto;column-gap:18px;row-gap:4px;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(239,231,218,.1)}
.co__tile{grid-row:1/3;width:88px;height:88px;display:block;background-color:#140f0d}
.co__list li>div{grid-row:1/3;display:grid;gap:6px;min-width:0}
.co__list a{font-family:var(--disp);font-size:20px;color:var(--bone);text-decoration:none}
.co__list li>div span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.co__list b{grid-column:3;grid-row:1;font-weight:400;font-size:15px;text-align:right}
.co__list button{grid-column:3;grid-row:2;justify-self:end;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);padding:2px 0}
.co__list button:hover{color:#E04A50}
.co__steps{margin:0;padding:0;list-style:none;counter-reset:co;display:grid;gap:18px}
.co__steps li{counter-increment:co;display:grid;grid-template-columns:34px 1fr;row-gap:4px}
.co__steps li::before{content:counter(co);grid-row:1/3;font-family:var(--disp);font-size:22px;color:#A3141D;line-height:1.1}
.co__steps b{font-weight:400;font-family:var(--disp);font-size:18px;color:var(--bone)}
.co__steps span{font-size:14px;line-height:1.7;color:#C4BCB0}
.co__side{position:sticky;top:70px}
.co__box{padding:28px;border:1px solid rgba(239,231,218,.14);background:#0b0908;display:grid;gap:18px}
.co__sum{margin:0;display:grid;gap:10px}
.co__sum div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.co__sum dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.co__sum dd{margin:0;font-size:14px;color:#D9D0C2;text-align:right}
.co__due{padding-top:12px;border-top:1px solid rgba(239,231,218,.12)}
.co__due dd{font-family:var(--disp);font-size:28px;color:var(--bone)}
.co__due small{font-family:var(--ui);font-size:11px;color:var(--ash)}
.co__agree{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:13px;line-height:1.6;color:#C4BCB0;cursor:pointer}
.co__agree input{accent-color:#A3141D;width:16px;height:16px;margin:2px 0 0}
.co__agree a,.co__off a,.co__msg a{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(163,20,29,.9);text-underline-offset:3px}
.co__go{width:100%;margin:0;border:0;cursor:pointer;text-align:center}
.co__go[disabled]{opacity:.45;cursor:not-allowed}
.co__off{margin:0;font-size:12.5px;color:#c9875a}
.co__msg{margin:0;padding:12px 14px;border:1px solid rgba(163,20,29,.6);font-size:13px;line-height:1.6;color:#E3D9CB}
.co__safe{margin:0;font-size:12px;line-height:1.6;color:#9d958a}
.co__back{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);text-decoration:none}
.co__back:hover{color:var(--bone)}
.co__paid{font-size:14px;color:#C4BCB0}
@media (max-width:900px){ .co{grid-template-columns:1fr} .co__side{position:static} }

/* v33.7, Greg: "the how to use has disappeared". The dark band behind the menu (v32z) was drawn
   over the ? at the foot of the window: it now stands in front of the band, a touch brighter */
.howto-open{z-index:32;border-color:rgba(239,231,218,.42);background:rgba(20,15,13,.82);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 4px 18px rgba(0,0,0,.6)}

/* v33.8: the way back from the letter, plain to see (Greg: "when you go to contact, there is no
   back to showroom": it was small, dim and tucked under the mark) */
.writing__back{padding:11px 18px;border:1px solid rgba(239,231,218,.32);background:rgba(8,6,5,.74);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--bone);font-size:10.5px;
  transition:background .2s ease,border-color .2s ease}
.writing__back:hover{background:rgba(142,17,25,.6);border-color:rgba(239,231,218,.5)}
.writing__back:focus{outline:none}
.writing__back:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
@media (min-width:821px){ .writing__back{top:clamp(128px,18vh,176px)} }
@media (max-width:820px){
  .writing{padding-top:132px}
  .writing__back{top:78px;left:16px;right:auto}
}

/* v33.8: Shipping and Returns in the main menu */
.ways{flex-wrap:wrap;row-gap:10px}
body.is-doc .ways{opacity:1;z-index:59}
body.is-doc[data-room] .ways{right:0}
body.is-doc .ways a[data-room].on{color:#D6CCBD}
body.is-doc .ways a[data-room].on span::after{transform:scaleX(0)}
body.is-doc .page__in{padding-bottom:190px}
@media (min-width:821px){
  /* beside the collection's wide desk there is little room: the names draw in to fit one line */
  body[data-room="collection"]:not(.is-doc) .ways{gap:9px}
  body[data-room="collection"]:not(.is-doc) .ways a{font-size:10px;letter-spacing:.13em;margin-right:-.13em}
  body[data-room="collection"]:not(.is-doc) .ways__star{width:5px;height:5px}
}
@media (max-width:820px){
  .ways{gap:8px 16px;padding-left:12px;padding-right:12px}
  .ways__star{display:none}
}

/* v33.9: a photograph on each of the four policy pages, and all four in the main menu */
.doc--photo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,100px);
  max-width:1340px;align-items:start;padding-top:0}
.doc__photo{position:sticky;top:64px;margin:0;height:calc(100vh - 64px - 130px);min-height:360px;overflow:hidden;background:#120e0c}
.doc__photo img{display:block;width:100%;height:100%;object-fit:cover}
.doc__text{max-width:640px;padding-top:clamp(6px,2vh,24px)}
@media (max-width:900px){
  .doc--photo{grid-template-columns:1fr;gap:28px}
  .doc__photo{position:static;height:auto;aspect-ratio:4/5;max-height:62vh;min-height:0}
}
.ways{gap:10px clamp(10px,1.35vw,24px)}
.ways a{letter-spacing:.22em;margin-right:-.22em;font-size:11.5px}
.ways a span::after{right:.22em}
@media (min-width:821px) and (max-width:1400px){
  body[data-room="collection"]:not(.is-doc) .ways__star{display:none}
}
@media (max-width:820px){
  .ways a{font-size:10.5px;letter-spacing:.16em;margin-right:-.16em}
}