/* ABOUTME: The Tesselles system: the fonts, the two grounds (plaster to read, night for the room), the  */
/* ABOUTME: glazes, and the few primitives every public page is built from. Stones are laid by tess.js. */
@font-face{font-family:"Cinzel";src:url("/assets/fonts/cinzel.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/assets/fonts/ebgaramond.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/assets/fonts/ebgaramond-italic.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
  --lime:#EDE7D9; --lime-deep:#E2DAC6; --lime-edge:#CFC5AC;          /* limewashed plaster */
  --grout:#16171B; --grout-2:#1D1F25;                                 /* the room at night */
  --ink:#22201C; --ink-2:#3B382F; --stone:#6B6353; --stone-2:#8B8677; --bone:#E7DFCB;
  /* fired glazes: Roman opus tessellatum, Iznik, zellige */
  --indigo:#1E3A5C; --verdigris:#2C6B76; --terra:#B4522C; --terra-light:#E9A583; --ochre:#C08A2E;
  --olive:#68713F; --madder:#8A2E28; --brass:#A8813E; --umber:#6B4E24;
  --cut:"Cinzel",Georgia,serif;                                        /* inscriptional capitals, only ever capitals */
  --text:"EB Garamond",Georgia,"Times New Roman",serif;               /* everything read */
  --ops:ui-monospace,"SF Mono",Menlo,Consolas,monospace;              /* machinery only */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
body{font-family:var(--text);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1}
a{color:inherit}

/* ---- the two grounds. The washes are fixed layers at z-index -1 inside the body's own stacking context
   (isolation): above the body's colour, under everything else. A mock-up lifted a named list of tags
   above them instead, and the wash painted over the piece's name. ---- */
body.plaster,body.night{isolation:isolate}
.plaster{background:var(--lime);color:var(--ink)}
.plaster::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(70% 45% at 18% 8%,#ffffff88,#ffffff00 60%),radial-gradient(60% 40% at 88% 78%,#C9BE9F55,#C9BE9F00 70%)}
.plaster::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:var(--grain);opacity:.055;mix-blend-mode:multiply}
.night{background:var(--grout);color:var(--bone)}
.night::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay}

.onum{font-feature-settings:"onum" 1,"kern" 1}
.field-label{font-family:var(--cut);text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;font-weight:700;color:var(--terra)}
.night .field-label{color:var(--ochre)}

/* ---- the engraved rule: a plate is scored twice, never boxed ---- */
.rule{height:0;border-top:1.4px solid var(--ink);position:relative}
.rule::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:.5px solid #22201C99}
.night .rule{border-top-color:#E7DFCB55}.night .rule::after{border-top-color:#E7DFCB2e}

/* ---- the hanging label: the catalogue's margin does the organising ---- */
.leaf{display:grid;grid-template-columns:148px minmax(0,1fr);gap:30px;align-items:start}
.leaf>.lab{font-family:var(--cut);text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:700;
           color:var(--terra);text-align:right;padding-top:7px;line-height:1.7}
.night .leaf>.lab{color:var(--ochre)}
@media (max-width:760px){.leaf{grid-template-columns:1fr;gap:9px}.leaf>.lab{text-align:left;padding-top:0}}

/* ---- a button is a glazed stone with an engraved keyline ---- */
.cut-btn{display:inline-block;font-family:var(--cut);text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  font-size:13px;line-height:1.2;padding:15px 26px;text-decoration:none;border:0;border-radius:1px;cursor:pointer;
  background:var(--terra);color:#FFF6E9;box-shadow:inset 0 0 0 1px #00000033,inset 0 0 0 3px #ffffff22;transition:transform .1s,background .12s}
.cut-btn:hover{background:#9E4524}
.cut-btn:active{transform:translateY(1px)}
.cut-btn:disabled{opacity:.38;cursor:default}
.cut-btn.quiet{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--ink)}
.night .cut-btn.quiet{color:var(--bone);box-shadow:inset 0 0 0 1.4px #E7DFCB66}

/* ---- a carved link, and the language as two words (a flag is a country, not a language) ---- */
.link{font-family:var(--cut);text-transform:uppercase;letter-spacing:.15em;font-size:10.5px;font-weight:700;
      text-decoration:none;padding:4px 0;border-bottom:1px solid currentColor;white-space:nowrap}
.lang{display:flex;gap:11px;align-items:baseline}
.lang button{display:inline-flex;align-items:center;gap:6px}
.lang button .flag{display:inline-flex;line-height:0}
.lang button .flag svg{border-radius:1.5px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.lang button{background:none;border:0;font-family:var(--cut);text-transform:uppercase;letter-spacing:.14em;font-size:11px;
             font-weight:700;color:inherit;opacity:.55;cursor:pointer;padding:3px 0}
.lang button.on{opacity:1;box-shadow:inset 0 -2px 0 var(--terra)}

/* ---- the wall label: the same object as the plaque on the share card ---- */
.plate{background:#FBF8F0;color:#3A3632;padding:18px 20px 17px;box-shadow:0 8px 20px #00000014,inset 0 0 0 1px #DED5BE}
.plate .k{font-family:var(--cut);text-transform:uppercase;letter-spacing:.2em;font-size:9.5px;font-weight:700;color:#8A6A3A;margin-bottom:8px}

/* ---- the AI disclosure, engraved in brass: same words, same visibility ---- */
.ai-plate{display:inline-block;font-family:var(--cut);text-transform:uppercase;letter-spacing:.2em;font-size:10px;
          font-weight:700;padding:7px 14px;color:var(--brass);box-shadow:inset 0 0 0 1px #A8813E88}

/* ---- what tess.js lays ---- */
.wordmark{display:block;line-height:0}
.tess-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tess-ins{display:block;height:100%;width:auto;max-width:100%}
.band{--tess-pitch:7;overflow:hidden;line-height:0}
@media (max-width:760px){.band{--tess-pitch:5}}
.tess-band{display:block}
.tess-relief{display:block;mix-blend-mode:overlay}
.tess-stone,.tess-frame{position:absolute;inset:0;width:100%;height:100%}

/* The wordmark leads back to the landing page from every page. The anchor WRAPS the wordmark
   rather than sitting inside it: tess.js inscribes it and the name stamp rewrites its children,
   so a link placed within would be deleted on load. /home, not /, because "/" serves the tablet
   on the booth host and only the landing page on tesselles.* (server.py index()). */
a.homelink{display:inline-block;color:inherit;text-decoration:none}

/* ---- a drawing wheel (wheel.js): a framed window showing five of the faces it could land on, turning
   through them in order and settling with the drawn one in the middle. Every wheel on the piece is one
   of these, and its name is read under it. ---- */
#draw{--drow:33px;display:flex;flex-direction:column;gap:8px;padding:2px 0 8px}
#draw .dttl{font-family:var(--cut);text-transform:uppercase;letter-spacing:.26em;font-size:10px;
  font-weight:700;color:var(--ochre);text-align:center}
.dplaques{display:flex;flex-direction:column;gap:9px}
/* one line per kind of draw: the three artists are one line, the sitter's three another */
.dline{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:9px 8px;align-items:start}
@keyframes dpop{from{transform:scale(.93);opacity:.25}60%{transform:scale(1.03)}to{transform:scale(1);opacity:1}}
.dp.pop{animation:dpop .34s cubic-bezier(.2,1.2,.3,1) both}
.dp{position:relative;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;
  opacity:.62;transition:opacity .4s}
.dp.turning,.dp.locked{opacity:1}
/* the rope goes round the turning part, every window its own (Louis, 2026-10-23) */
.dreel{position:relative;padding:5px;background:#0C0D10}
.dreel .dfr{position:absolute;inset:0;pointer-events:none;--tess-pitch:3.2}
.dp.locked .dfr{filter:saturate(1.3) brightness(1.18)}
/* contain:paint keeps a turning reel's repaint inside its own window instead of the whole bench */
.dwin{position:relative;overflow:hidden;width:100%;height:calc(var(--drow) * var(--dvis,5));background:#0C0D10;
  contain:paint}
.dstrip{will-change:transform;width:100%}
/* Each face is cut from one of two stones and keeps it wherever the reel carries it: the glaze belongs
   to the face, not to the course it is passing through (Louis, 2026-10-23). wheel.js reads the
   alternation off the face's own place in the list, and lays an odd list twice so it survives the loop.
   Opus tessellatum on the darker stone, a diaper of set squares on the lighter. */
.dstrip > span.fa{background-color:var(--wc-dim);background-image:var(--fa-img);
  background-size:98px var(--drow);background-repeat:repeat}
.dstrip > span.fb{background-color:var(--wc-lit);background-image:var(--fb-img);
  background-size:98px var(--drow);background-repeat:repeat}
.dstrip > span{display:flex;align-items:center;justify-content:center;height:var(--drow);padding:0 5px;
  font-family:var(--text);font-size:clamp(11px,1.6vh,15px);color:var(--bone);white-space:nowrap;
  text-shadow:0 1px 2px #000000cc,0 0 6px #00000099;
  overflow:hidden;text-overflow:ellipsis}

/* the course the drawn stone is set in: a narrow frame laid over the middle of the window, on top of
   everything and never moving, so what lands is framed where it lands (Louis, 2026-10-23) */
.dsel{position:absolute;left:5px;right:5px;top:calc(5px + var(--drow) * 2);height:var(--drow);
  pointer-events:none;z-index:2;--tess-pitch:3.2;opacity:.55;transition:opacity .3s}
.dsel svg{display:block;width:100%;height:100%}
.dp.locked .dsel{opacity:1;filter:brightness(1.25) saturate(1.2)}
.dlab{text-align:center}
.dlabt{font-family:var(--cut);text-transform:uppercase;letter-spacing:.1em;font-size:8.5px;font-weight:700;
  color:var(--stone-2);line-height:1.2;display:block}
.dp.locked .dlabt{color:var(--ochre)}
.dnote{font-family:var(--cut);text-transform:uppercase;letter-spacing:.12em;font-size:7.5px;font-weight:700;
  color:var(--stone);opacity:0;transition:opacity .3s;text-align:center;min-height:9px}
.dp.locked .dnote{opacity:.8}
/* a glaze per wheel; the artists share one, being one draw, and so do the sitter's own */
.dp[data-c="indigo"]{--wc:#1E3A5C;--wc-dim:#101827;--wc-lit:#243A54;--wc-line:#ffffff14}
.dp[data-c="verdigris"]{--wc:#2C6B76;--wc-dim:#0F2428;--wc-lit:#235059;--wc-line:#ffffff16}
.dp[data-c="brass"]{--wc:#8A6A3A;--wc-dim:#1E1810;--wc-lit:#43351F;--wc-line:#ffffff14}
.dp[data-c="madder"]{--wc:#8A2E28;--wc-dim:#200F0E;--wc-lit:#48211D;--wc-line:#ffffff14}
.dp[data-c="olive"]{--wc:#68713F;--wc-dim:#161910;--wc-lit:#333923;--wc-line:#ffffff14}
/* translate3d, not translateY: the strip gets a compositor layer of its own and the turn costs no
   repaint. On the tablet the reels stuttered without it — seven strips repainting their stones every
   frame is more than it has (Louis, 2026-10-25). */
@keyframes droll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--dloop),0)}}
.dstrip.rolling{animation:droll var(--dspeed,2.4s) linear infinite;will-change:transform;
  backface-visibility:hidden}
/* the face in the course is the one being read; the others are what it could have been */
.dstrip > span:nth-child(n){transition:opacity .2s}
.dp .dwin::before,.dp .dwin::after{content:"";position:absolute;left:0;right:0;height:calc(var(--drow) * 2);
  pointer-events:none;z-index:1}
.dp .dwin::before{top:0;background:linear-gradient(#0C0D10f2,#0C0D1033)}
.dp .dwin::after{bottom:0;background:linear-gradient(#0C0D1033,#0C0D10f2)}
.dp.off{opacity:.3}
.dp.off .dstrip > span{color:var(--stone);background-color:#101217;background-image:none}

/* ---- the switch for the sitter's own draw: one stone sliding in its channel, for all three at once.
   Laid to the right, the booth draws an age, an origin and a gender; to the left it draws none of them
   and keeps the gender it reads on the face. ---- */
.dswitch{display:flex;align-items:center;gap:9px;padding:7px 9px;background:#13151A}
.dswitch .dswl{flex:1 1 auto;min-width:0;font-family:var(--cut);text-transform:uppercase;letter-spacing:.12em;
  font-size:8px;font-weight:700;color:var(--stone-2);line-height:1.25}
.dswitch[data-on="1"] .dswl{color:var(--ochre)}
/* the channel is a run of the Greek key of a Pompeian room (tess.js fret, laid by the page), and the
   stone slides from one end of it to the other */
.dswrap{position:relative;flex:none;padding:5px;background:#0C0D10}
.dswrap .dfr{position:absolute;inset:0;pointer-events:none;--tess-pitch:3.2}
.dsw{position:relative;display:block;width:96px;height:44px;padding:0;border:0;cursor:pointer;
  background:#0A0B0E;box-shadow:inset 0 0 0 1px #000,inset 0 2px 7px #000000cc;overflow:hidden}
.dsw .key{position:absolute;inset:0;--tess-pitch:4.4;opacity:.9;line-height:0}
.dsw .key svg{display:block;width:100%;height:100%}
/* the stone that slides is itself laid: small tesserae, as every other stone of the piece is */
.dsw .tsr{position:absolute;top:5px;left:5px;width:34px;height:34px;z-index:1;background:#3A352C;
  box-shadow:inset 0 0 0 1px #00000066,0 1px 0 #ffffff26,0 3px 5px #000000aa;
  background-image:var(--tsr-img),linear-gradient(#ffffff22,#00000022);
  background-size:34px 34px,auto;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s}
.dswitch[data-on="1"] .tsr{transform:translateX(52px);background-color:#8A2E28}
.dsw:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
/* ---- the worlds, as a row of the draw: the mark alone in the stone (tess.js lays it there; the <svg>
   in the button is for a screen reader) and the name under it, so five of them take the room one wheel
   needs. The object wheel replaces the row once one is chosen. The page's own sheet loads after this
   one, so these say #choose to outrank it rather than relying on order. ---- */
.dp.chooserow{display:block;padding:9px 10px 8px}
.dp.chooserow .dlab{text-align:center;margin-bottom:6px}
#choose .wheel{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:0}
#choose .wcell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
#choose .wcell .world{position:relative;width:100%;aspect-ratio:1;min-height:0;height:auto;padding:0;
  border:0;border-top:0;background:none;cursor:pointer;overflow:hidden}
#choose .wcell .world .glaze{position:absolute;inset:0}
#choose .wcell .world .pick{position:absolute;inset:0}
#choose .wcell .wname{font-family:var(--cut);text-transform:uppercase;letter-spacing:.08em;font-size:8px;
  font-weight:700;color:var(--stone-2);text-align:center;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
#choose .wcell .world.lit + .wname,#choose .wcell .world:hover + .wname{color:var(--ochre)}
/* the worlds and the object wheel share one place in the rack: whichever of them is the question now */
#draw .dp[data-k="idea"]{display:none}
#draw.chosen .dp[data-k="idea"]{display:grid}
#draw.chosen #choose{display:none}
/* The shutter: the one red stone in the room, under the worlds and above the sitter's own wheels.
   It goes with the worlds when the choice is made — from there the countdown owns the screen. */
#shootnow{position:relative;display:block;width:100%;margin:8px 0 6px;padding:13px 16px;border:0;
  background:transparent;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
#shootnow .stones{position:absolute;inset:0;background-repeat:repeat;background-size:34px 34px;
  z-index:0;filter:saturate(1.05)}
#shootnow .sfr{position:absolute;inset:0;z-index:1;pointer-events:none}
#shootnow .lbl{position:relative;z-index:2;display:block;font-family:var(--cut);text-transform:uppercase;
  letter-spacing:.16em;font-size:16px;font-weight:700;color:#FCEAE3;
  text-shadow:0 1px 0 rgba(0,0,0,.55)}
#shootnow:hover .stones{filter:saturate(1.15) brightness(1.08)}
#shootnow:active{transform:translateY(1px)}
/* the shutter and the switch go once the choice is made; the sitter's wheels stay, because the draw
   is about to land on them */
#draw.chosen #shootnow,#draw.chosen #dperson{display:none}
@media (max-width:760px){ #shootnow{padding:11px 14px} #shootnow .lbl{font-size:14px} }
.dlab .wmk{display:block;line-height:0;margin-bottom:3px}
.dlab .wmk svg{width:18px;height:auto;color:var(--ochre)}
.dlab .wmk{margin:0 0 1px}

/* a wheel that is switched off shows a dash and goes quiet */
/* a place waiting its turn: the courses laid and nothing in them yet */
.dp.blank{opacity:.3}
.dp.blank .dsel{opacity:.25}
.dp.blank .dlabt{color:var(--stone)}
.dp.off{opacity:.34}
.dp.off .dwin{background-image:none;background-color:#101217}
.dp.off .dstrip > span{color:var(--stone)}
/* the five seconds before the shutter belong to the camera: the wheels stop and wait */
#draw.quiet .dstrip{animation:none}

/* ---- the draw kept on a piece's own page: the same wheels, each holding the face it stopped on ---- */
/* the page centres its children, so the rack has to ask for the width it needs */
#draw.archive{--drow:34px;width:100%;max-width:760px;margin:14px auto 4px;align-self:center}
#draw.archive .dplaques{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
#draw.archive .dp{opacity:1}
#draw.archive .dplaques{gap:12px 10px}
#draw.archive .dnote{display:none}
.plaster #draw.archive .dlabt{color:var(--stone)}
.plaster #draw.archive .dp.locked .dlabt{color:var(--terra)}

/* the sound, beside the language: off unless somebody asks for it */
.soundbtn{background:none;border:0;padding:3px 2px;color:inherit;opacity:.5;cursor:pointer;line-height:0}
.soundbtn[aria-pressed="true"]{opacity:1;color:var(--ochre)}
.soundbtn svg{width:19px;height:19px;display:block}
.soundbtn:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

/* the form fills the screen, so the header's language switch cannot be reached from it: the sheet
   carries its own, where the visitor is reading (Louis, 2026-10-23) */
.sheetlang{position:absolute;top:0;right:0;z-index:2}
.sheethead{position:relative;padding-right:84px}

/* The draw over the piece's page while it loads: the wheels are what the visitor watches instead of a
   blank wait, and they clear once the last stone is set. The QR has a column of its own and takes all
   of it, because it is the one thing in the room that has to be read from arm's length by somebody
   holding a phone (Louis, 2026-10-23). */
#draw.over{position:fixed;inset:0;z-index:9;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(150px,23vw,320px);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  /* Solid, and no backdrop-filter: blurring the whole screen behind seven turning reels is the one
     thing the tablet cannot afford. The blur used to hide what showed through a translucent ground;
     an opaque one hides it for nothing and composites cheaper (Louis, 2026-10-25). */
  align-items:center;gap:6px 20px;padding:14px 18px;background:#0C0D10;
  transition:opacity .55s;overflow:hidden}
#draw.over .dttl{grid-column:1/-1;grid-row:1}
/* the sitter's wheels live under the shutter on the bench; over the piece they stand with the rest of
   the draw, above the artists, in the column the draw owns */
#draw.over #dpersonbox{grid-column:1;grid-row:2;width:100%;align-self:center}
#draw.over .dplaques{grid-column:1;grid-row:3;width:100%;align-self:center}
/* the way out, under the draw and out of the QR's column */
#draw .cut-btn#drawnew{display:none}
#draw.over #drawnew{display:inline-block;grid-column:1;grid-row:4;justify-self:center;
  padding:9px 18px;font-size:11px}
/* a wheel keeps its own width here: the object alone on its line would otherwise be a band across the
   screen, which is not a wheel */
#draw.over .dp{max-width:270px;margin:0 auto}
#draw.over #dperson{display:none}          /* nothing left to switch: the draw is already made */
#draw.over.fading{opacity:0;pointer-events:none}
/* the names are read standing in front of the booth, not leaning into it */
#draw.over .dlabt{font-size:clamp(15px,2.3vh,24px);letter-spacing:.06em;line-height:1.15}
#draw.over .dnote{font-size:clamp(9px,1.3vh,13px);letter-spacing:.1em}
#draw.over .dhead{font-size:clamp(12px,1.8vh,18px)}
@media (max-aspect-ratio:1/1){
  /* upright, the three lines and the QR have one column between them: the courses come down so that
     every wheel is still on the screen, which is the point of the thing */
  #draw.over{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;--drow:25px}
  #draw.over .drawqr{grid-row:2}
  #draw.over #dpersonbox{grid-row:3}
  #draw.over .dplaques{grid-row:4}
  #draw.over #drawnew{grid-row:5}
  /* three names across a phone: they set smaller rather than run into each other */
  #draw.over .dlabt{font-size:clamp(11px,1.75vh,16px);letter-spacing:.02em}
  #draw.over .dnote{font-size:clamp(8px,1.1vh,10px)}
}
/* The finished piece, over everything: the loop, its QR and the way out, and nothing else. The tablet
   stands in landscape, so the loop takes the height and the other two share the column beside it
   (Louis, 2026-10-25). */
#finalview{position:fixed;inset:0;z-index:12;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(190px,26vw,360px);align-items:center;
  /* opaque, not nearly: the questions sheet is open underneath and read through a translucent
     ground, and the finished piece is meant to be the only thing on the tablet */
  gap:24px;padding:18px 22px;background:#0C0D10}
#finalview[hidden]{display:none}
#finalview #finalloop{grid-column:1;width:100%;height:100%;min-height:0;object-fit:contain;
  background:#000;box-shadow:0 0 0 1px #E7DFCB22}
#finalview .fside{grid-column:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;min-width:0}
#finalview .fqr{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;
  color:var(--bone);background:#0C0D10;padding:10px;box-shadow:inset 0 0 0 1px #E7DFCB33;max-width:100%}
#finalview .fqr img{width:min(100%,300px);height:auto;aspect-ratio:1;display:block;background:#fff}
#finalview .fqr span{font-family:var(--cut);text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;font-weight:700;text-align:center;line-height:1.3}
#finalview .fchoice{display:flex;flex-direction:column;gap:10px;width:min(100%,300px)}
#finalview .fchoice .cut-btn{font-size:14px;padding:16px 20px;width:100%}
@media (max-aspect-ratio:1/1){
  /* upright, the loop keeps the room and the other two come under it */
  #finalview{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px}
  #finalview #finalloop{grid-column:1;grid-row:1}
  #finalview .fside{grid-column:1;grid-row:2;flex-direction:row;gap:16px}
  #finalview .fqr img{width:min(100%,150px)}
}
/* the groups of the draw, read over the piece: what was drawn about the sitter, then what the piece is
   made of. The bench shows the wheels without these; the reveal names them. */
.dhead{display:none}
#draw.over .dhead{display:block;font-family:var(--cut);text-transform:uppercase;letter-spacing:.2em;
  font-size:9.5px;font-weight:700;color:var(--ochre);text-align:center;margin:2px 0 -2px}
.dgroup{display:flex;flex-direction:column;gap:9px}
/* what was drawn about the sitter is read first when it was drawn at all */
#draw.over .dgroup[data-g="traits"]{order:0}
#draw.over[data-person="0"] .dgroup[data-g="traits"]{display:none}
#draw.over .dgroup[data-g="art"]{order:1}
#draw.over .dplaques{display:flex;flex-direction:column;gap:14px}
/* the QR is scannable while the wheels are still turning: the piece can be taken away at once */
.drawqr{display:none}
#draw.over .drawqr{display:flex;grid-column:2;grid-row:2/5;justify-self:center;align-self:center;
  flex-direction:column;align-items:center;gap:9px;text-decoration:none;color:var(--bone);
  background:#0C0D10;padding:10px;box-shadow:inset 0 0 0 1px #E7DFCB33;max-width:100%}
#draw.over .drawqr img{width:min(100%,300px);height:auto;aspect-ratio:1;display:block;background:#fff;
  image-rendering:pixelated}
#draw.over .drawqr span{font-family:var(--cut);text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(9px,1.4vh,14px);font-weight:700;color:var(--ochre);text-align:center;line-height:1.3}
@media (max-aspect-ratio:1/1){
  #draw.over .drawqr{grid-column:1;flex-direction:row;gap:12px;padding:8px}
  #draw.over .drawqr img{width:clamp(74px,22vw,120px)}
  #draw.over .drawqr span{text-align:left;max-width:12em}
}