/* ==========================================================================
   404 QUOTES — "the white cube"
   World 5's design system. Built to ART-DIRECTION-404QUOTES.md.

   The concept: a museum of famous quotations where the most famous exhibits
   are missing. Cold gallery white, one archival ink-blue, hard single-source
   shadows. Nothing here glitches (the dictionary owns that), drifts like a sky
   (astrology), ticks (trading), or leans in 3D toward the pointer (the English
   world). This world moves the way a curator walks: slowly, and only when
   something is being shown to you.

   Type deviates from the direction doc: IBM Plex is not self-hosted here, and
   every other self-hosted face is already an identity somewhere in the site.
   Syne was tried first and rejected by the owner as hard to read. Manrope
   replaces it: highly legible, set at 600 uppercase with tight tracking for
   signage. Manrope (signage) + Fraunces (quotations) + Space Mono (accession
   codes) is a pairing no other world owns, and all three live in gf-1.
   ========================================================================== */

:root{
  --wall:#F2F3F4;         /* cold gallery white — the page ground              */
  --wall-deep:#E7E9EB;    /* recessed panels, room transitions                 */
  --wall-edge:#D6D9DC;    /* hairlines between surfaces                        */
  --ink:#14171A;          /* near-black, cold — text and frames                */
  --ink-soft:#5A6167;     /* captions, provenance, secondary                   */
  --ink-faint:#6B737B;    /* accession codes — darkened to clear 4.5:1 on card */
  --accent:#2333C0;       /* archival ultramarine — the one live wire          */
  --accent-deep:#17249A;  /* pressed / hover                                   */
  --plinth:#DDDFE2;       /* pedestals and exhibit mounts                      */
  --plinth-dark:#C9CDD1;  /* the plinth's shaded face                          */

  /* One light source, upper-left. Every shadow in this world agrees with it.  */
  --cast:6px 6px 0 rgba(20,23,26,.10);
  --cast-deep:10px 10px 0 rgba(20,23,26,.13);
  --engrave:inset 1px 1px 0 rgba(20,23,26,.16), inset -1px -1px 0 rgba(255,255,255,.85);

  --curator:cubic-bezier(.22,.61,.36,1);  /* slow, decisive, no bounce         */
  --measure:68ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--wall);
  color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The gallery's ambient light. Static by default; the pointer only nudges it
   on devices that have one. Purely decorative — remove it and nothing is lost. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(
    120vmax 90vmax at var(--spot-x,38%) var(--spot-y,12%),
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,0) 55%,
    rgba(20,23,26,.055) 100%);
}
main,header,footer{position:relative;z-index:1}

::selection{background:var(--ink);color:var(--wall)}

/* ---- typographic roles -------------------------------------------------- */

.signage{        /* room names, museum name — Manrope, set heavy and tight    */
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.04;
  text-transform:uppercase;
}
.quotation{                     /* the exhibits themselves — Fraunces         */
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-style:normal;
  line-height:1.3;
  letter-spacing:-.01em;
}
.code{                          /* accession numbers, verdicts — Space Mono   */
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent-deep)}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--wall);
  padding:.9rem 1.2rem;z-index:99;font-size:.85rem;
}
.skip:focus{left:0}

/* ---- shell -------------------------------------------------------------- */

.shell{width:min(100% - 2.5rem,1120px);margin-inline:auto}

.masthead{
  border-bottom:1px solid var(--wall-edge);
  padding:1.1rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.wordmark{
  font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;   /* touch target */
}
.wordmark span{color:var(--accent)}
.masthead nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.masthead nav a{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--ink)}
.masthead nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}

.breadcrumb{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);padding:1.6rem 0 0;
}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

/* ---- the empty plinth: this world's signature ---------------------------- */

.alcove{
  background:var(--wall-deep);
  border:1px solid var(--wall-edge);
  padding:clamp(2rem,6vw,4.5rem) clamp(1.2rem,4vw,3rem) 0;
  margin:2rem 0 0;
  position:relative;overflow:hidden;
}
/* the spotlight pooled on the floor of the alcove */
.alcove::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:min(560px,86%);height:120px;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* The quote you believe exists, rendered as an outline of itself. */
.ghost{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.6rem,4.6vw,3.1rem);
  line-height:1.18;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1px var(--ink-faint);
  text-stroke:1px var(--ink-faint);
  max-width:20ch;margin:0 auto;
  position:relative;z-index:1;
}
@supports not ((-webkit-text-stroke:1px black) or (text-stroke:1px black)){
  .ghost{color:var(--ink-faint);opacity:.4}   /* honest fallback, still readable */
}
.ghost-note{
  text-align:center;margin:1.1rem auto 0;max-width:44ch;position:relative;z-index:1;
  font-size:.83rem;color:var(--ink-soft);
}

.plinth{
  width:min(340px,74%);height:clamp(56px,9vw,88px);margin:2.2rem auto 0;
  background:linear-gradient(180deg,var(--plinth) 0%,var(--plinth) 62%,var(--plinth-dark) 100%);
  box-shadow:var(--cast-deep);
  position:relative;z-index:1;
}
.plinth::before{           /* the vitrine's absent object, as a footprint */
  content:"";position:absolute;inset:14px 22px auto;height:2px;
  background:repeating-linear-gradient(90deg,var(--ink-faint) 0 7px,transparent 7px 14px);
  opacity:.55;
}

/* ---- placards ----------------------------------------------------------- */

.placard{
  background:#FBFBFC;
  border:1px solid var(--wall-edge);
  box-shadow:var(--cast);
  padding:1.15rem 1.3rem;
}
.placard .code{display:block;margin-bottom:.5rem}
.placard-attrib{font-weight:700;font-size:.95rem}
.placard-line{font-size:.85rem;color:var(--ink-soft);margin-top:.3rem}

/* a struck-through attribution: what the label used to claim */
.struck{
  position:relative;display:inline-block;color:var(--ink-soft);
}
.struck::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;
  background:var(--accent);transform:rotate(-1.4deg);
}

/* ---- verdict plaque: engraved, never colour-coded ------------------------ */

.plaque{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--plinth);
  box-shadow:var(--engrave);
  padding:.62rem 1rem;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);
}
.plaque b{font-weight:700}
.plaque::before{
  content:"";width:9px;height:9px;flex:none;
  background:var(--ink);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  opacity:.55;
}

/* ---- exhibits (a gallery room) ------------------------------------------ */

.room-head{padding:2.4rem 0 1.6rem;border-bottom:1px solid var(--wall-edge)}
.room-title{font-size:clamp(2.2rem,7vw,4.4rem);margin:.6rem 0 .9rem}
.room-count{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  font-family:"Space Mono",ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.room-count span{display:inline-flex;align-items:center;gap:.4rem}
.room-count span::before{content:"";width:6px;height:6px;background:var(--ink-faint)}
.room-count .is-flagged::before{background:var(--accent)}

.exhibits{list-style:none;display:grid;gap:1.4rem;padding:2.2rem 0}
@media(min-width:700px){.exhibits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.exhibits{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the li is the grid item; let the figure fill it so cards in a row line up */
.exhibits > li{display:flex}
.exhibits > li > .exhibit{width:100%}

.exhibit{
  background:#FBFBFC;border:1px solid var(--wall-edge);box-shadow:var(--cast);
  padding:1.4rem 1.3rem 1.15rem;display:flex;flex-direction:column;gap:.9rem;
}
.exhibit blockquote{
  font-family:"Fraunces",Georgia,serif;font-size:1.1rem;line-height:1.4;
  text-wrap:pretty;
}
@media(min-width:1040px){
  .exhibit blockquote{font-size:1.05rem}
  .exhibit .provenance{font-size:.8rem}
}
.exhibit figcaption{
  border-top:1px solid var(--wall-edge);padding-top:.9rem;
  display:flex;flex-direction:column;gap:.55rem;margin-top:auto;
}
.exhibit cite{font-style:normal;font-weight:700;font-size:.95rem}
.provenance{font-size:.82rem;color:var(--ink-soft)}
/* a verdict badge on its own line sits closer to the line it judges */
.provenance .plaque{margin-top:.15rem}
.correction{
  font-size:.82rem;color:var(--ink);background:var(--wall-deep);
  border-left:3px solid var(--accent);padding:.6rem .8rem;
}

/* ---- prose -------------------------------------------------------------- */

.prose{max-width:var(--measure);padding:2.4rem 0}
.prose h2{
  font-family:"Manrope",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.3rem,3.2vw,1.9rem);letter-spacing:-.01em;
  margin:2.4rem 0 .9rem;line-height:1.15;
}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.lede{font-size:1.12rem;color:var(--ink)}

.pullquote{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.3rem,3.4vw,1.85rem);
  line-height:1.32;margin:2rem 0;padding-left:1.4rem;
  border-left:3px solid var(--accent);
}

/* ---- provenance list (sources) ------------------------------------------ */

.sources{list-style:none;counter-reset:src;display:grid;gap:.9rem;padding:0}
.sources li{
  counter-increment:src;display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  align-items:start;font-size:.9rem;
}
.sources li::before{
  content:counter(src,decimal-leading-zero);
  font-family:"Space Mono",ui-monospace,monospace;font-size:.72rem;
  color:var(--ink-faint);padding-top:.2rem;
}
.src-kind{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--wall-edge);padding:.12rem .45rem;margin-right:.5rem;
  white-space:nowrap;
}

/* ---- floor plan (the lobby) --------------------------------------------- */

.floorplan{list-style:none;display:grid;gap:1.4rem;padding:2.4rem 0}
@media(min-width:760px){.floorplan{grid-template-columns:repeat(2,1fr)}}

.room-card{
  border:1px solid var(--wall-edge);background:#FBFBFC;box-shadow:var(--cast);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;
  min-height:100%;text-decoration:none;color:inherit;
  transition:box-shadow .45s var(--curator),translate .45s var(--curator);
}
a.room-card:hover{box-shadow:var(--cast-deep);translate:-2px -2px}
.room-card h3{font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:-.01em}
.room-card p{font-size:.92rem;color:var(--ink-soft)}
.room-card[data-state="closed"]{opacity:.62;box-shadow:none;border-style:dashed}

/* ---- footer ------------------------------------------------------------- */

.colophon{
  border-top:1px solid var(--wall-edge);margin-top:3.5rem;padding:2.2rem 0 3rem;
  font-size:.85rem;color:var(--ink-soft);display:grid;gap:.7rem;
}
.colophon a{color:var(--ink-soft)}
.colophon a:hover{color:var(--accent)}

/* ---- motion: the placard reveal ----------------------------------------- */
/* Content is visible by default. This only adds a slow settle for those who
   want it — nothing here is required to read the page. */

@media (prefers-reduced-motion:no-preference){
  .settle{animation:settle .9s var(--curator) both}
  .settle-2{animation-delay:.10s}
  .settle-3{animation-delay:.20s}
  .settle-4{animation-delay:.30s}
}
/* Transform only — deliberately no opacity. An entrance that starts at
   opacity:0 leaves content invisible if the animation never advances (a
   backgrounded tab, a stalled compositor, a paused low-power mode). The rise
   reads just as well, and nothing here can ever be unreadable. */
@keyframes settle{
  from{transform:translateY(10px)}
  to{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media print{
  body::before,.alcove::after{display:none}
  .exhibit,.placard,.room-card{box-shadow:none;border:1px solid #999}
  .masthead nav{display:none}
}

/* ---- the lobby title ----------------------------------------------------
   The display face must never inherit the prose measure (68ch of *body* text
   is far narrower than one word of this at 4rem — it wrapped to six lines). */
.lobby-title{
  font-size:clamp(2.1rem,6.4vw,3.9rem);
  margin:2.6rem 0 1.4rem;
  max-width:13ch;          /* breaks as MUSEUM / OF THINGS / NOBODY SAID */
  text-wrap:balance;
}

/* ==========================================================================
   THE THIRD DIMENSION
   The room has depth and the visitor moves through it; the exhibits stay put.
   That is deliberately the inverse of the English world, where cards lean
   toward the pointer — no two worlds may share a motion personality.
   ========================================================================== */

/* ---- the raymarched room sits behind the alcove's HTML -------------------- */
.alcove{isolation:isolate}
.room-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;opacity:0;transition:opacity 1.1s var(--curator);
}
.room-canvas[data-room-live]{opacity:1}
.alcove > *:not(.room-canvas){position:relative;z-index:1}
/* with the room live, the flat CSS plinth would double the real one */
.alcove:has(.room-canvas[data-room-live]) .plinth{opacity:0;height:clamp(150px,22vw,240px)}
.alcove:has(.room-canvas[data-room-live]){min-height:clamp(520px,54vw,680px)}
.alcove:has(.room-canvas[data-room-live])::after{opacity:0}

/* ---- THE PRINT: a poster as an object in space --------------------------- */

.studio{
  display:grid;gap:2rem;padding:2.4rem 0;
  grid-template-columns:1fr;
}
@media(min-width:900px){.studio{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:start}}

.print-stage{
  perspective:1400px;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.4rem,4vw,3rem);
  background:
    radial-gradient(90% 70% at 50% 8%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    var(--wall-deep);
  border:1px solid var(--wall-edge);
  touch-action:none;cursor:grab;min-height:340px;
}
.print-stage.is-held{cursor:grabbing}

.print-slab{
  transform-style:preserve-3d;
  transition:transform .5s var(--curator);
  position:relative;
  width:min(78%,300px);
}
.print-stage.is-held .print-slab{transition:none}

.print-slab canvas{
  display:block;width:100%;height:auto;
  background:var(--ink);
  /* a real cast shadow, agreeing with the room's single upper-left source */
  box-shadow:
    18px 26px 40px -18px rgba(20,23,26,.55),
    36px 52px 90px -40px rgba(20,23,26,.45);
  backface-visibility:hidden;
}
/* the slab's own thickness — this is what makes it read as an object */
.print-slab::after{
  content:"";position:absolute;inset:0;
  transform:translateZ(-9px);
  background:var(--plinth-dark);
  box-shadow:0 0 0 1px rgba(20,23,26,.14);
}

/* ---- studio controls ----------------------------------------------------- */

.controls{display:grid;gap:1.15rem;align-content:start}
.ctrl{display:grid;gap:.45rem}
.ctrl > span{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.ctrl select,.ctrl input[type=text],.ctrl textarea{
  font:inherit;font-size:.95rem;color:var(--ink);
  background:#FBFBFC;border:1px solid var(--wall-edge);
  padding:.7rem .8rem;min-height:44px;width:100%;
  box-shadow:var(--cast);
}
.ctrl textarea{min-height:88px;resize:vertical;line-height:1.5}
.ctrl input[type=range]{width:100%;min-height:44px;accent-color:var(--accent)}

.ctrl-row{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--wall);border:0;
  padding:.9rem 1.3rem;min-height:44px;cursor:pointer;
  box-shadow:var(--cast);
  transition:translate .3s var(--curator),box-shadow .3s var(--curator);
}
.btn:hover{translate:-2px -2px;box-shadow:var(--cast-deep)}
.btn:active{translate:0 0;box-shadow:none}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}

.seed-line{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.14em;color:var(--ink-soft);
}
.seed-line b{color:var(--accent)}

/* ---- "make this yours" on every exhibit ---------------------------------- */

.exhibit-actions{
  display:flex;gap:.5rem;flex-wrap:wrap;
  border-top:1px solid var(--wall-edge);padding-top:.85rem;margin-top:.2rem;
}
.act{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--wall-edge);background:var(--wall);
  padding:.5rem .7rem;min-height:44px;
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  transition:border-color .3s var(--curator),color .3s var(--curator);
}
.act:hover{color:var(--accent);border-color:var(--accent)}

/* ---- colour, at last: the lobby's three doors ---------------------------- */
/* The walls stay white so the WORK carries the colour — the gallery logic.
   These swatches are generated art, so the front door shows what the Studio
   makes rather than describing it. */

.doors{list-style:none;display:grid;gap:1.4rem;padding:2.2rem 0}
@media(min-width:860px){.doors{grid-template-columns:repeat(3,1fr)}}

.door{
  position:relative;display:flex;flex-direction:column;gap:.75rem;
  text-decoration:none;color:inherit;
  border:1px solid var(--wall-edge);background:#FBFBFC;
  box-shadow:var(--cast);padding:0 0 1.4rem;
  transition:box-shadow .45s var(--curator),translate .45s var(--curator);
  overflow:hidden;
}
a.door:hover{box-shadow:var(--cast-deep);translate:-2px -2px}
.door-art{
  display:block;width:100%;height:170px;object-fit:cover;background:var(--ink);
}
.door > *:not(.door-art){padding-inline:1.4rem}
.door h3{font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.01em;padding-top:1.1rem}
.door p{font-size:.92rem;color:var(--ink-soft)}
.door .code{color:var(--ink-faint)}

@media (prefers-reduced-motion:reduce){
  .print-slab{transform:none!important}
  .print-stage{cursor:default}
}

/* ==========================================================================
   THE STUDIO — the full workbench
   ========================================================================== */

.studio-panel{display:grid;gap:1.5rem;align-content:start}

.fieldset{
  border:1px solid var(--wall-edge);background:#FBFBFC;
  box-shadow:var(--cast);padding:1.1rem 1.15rem;display:grid;gap:.9rem;
}
.fieldset > legend,.fieldset > .legend{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.63rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  padding:0;margin:0 0 .2rem;
}

/* template chooser — each button previews its own name, not an icon */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.5rem}
.tpl{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;
  background:var(--wall);border:1px solid var(--wall-edge);color:var(--ink-soft);
  padding:.7rem .4rem;min-height:44px;cursor:pointer;
  transition:border-color .3s var(--curator),color .3s var(--curator),background .3s var(--curator);
}
.tpl:hover{color:var(--ink);border-color:var(--ink-faint)}
.tpl[aria-pressed="true"]{background:var(--ink);color:var(--wall);border-color:var(--ink)}

/* palette swatches show the actual inks */
.swatches{display:flex;flex-wrap:wrap;gap:.5rem}
.swatch{
  width:44px;height:44px;border:1px solid var(--wall-edge);cursor:pointer;padding:0;
  position:relative;background:var(--ink);
  transition:transform .3s var(--curator),box-shadow .3s var(--curator);
}
.swatch:hover{transform:translate(-2px,-2px);box-shadow:var(--cast)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.swatch i{position:absolute;inset:0;display:block}
.swatch i::before,.swatch i::after{content:"";position:absolute;inset:auto 0 0;height:34%}
.swatch i::after{height:17%}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.grid2 > *{min-width:0}

.seed-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.seed-row input{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.85rem;
  width:8ch;text-align:center;padding:.6rem .4rem;min-height:44px;
  border:1px solid var(--wall-edge);background:var(--wall);color:var(--ink);
}

.switch-row{display:flex;align-items:center;gap:.6rem;min-height:44px}
.switch-row input{width:24px;height:24px;accent-color:var(--accent);flex:none;cursor:pointer}
/* the label carries the rest of the 44px target, so the whole row is tappable */
.switch-row label{
  font-size:.88rem;color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;min-height:44px;flex:1;
}

/* the shelf of saved prints */
.shelf{display:flex;gap:.55rem;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.shelf-item{
  padding:0;border:1px solid var(--wall-edge);background:var(--ink);
  cursor:pointer;line-height:0;box-shadow:var(--cast);
  transition:transform .3s var(--curator),box-shadow .3s var(--curator);
}
.shelf-item:hover{transform:translate(-2px,-2px);box-shadow:var(--cast-deep)}
.shelf-item canvas{width:56px;height:78px;display:block}
.shelf-empty{font-size:.85rem;color:var(--ink-faint)}

@media(min-width:900px){
  .studio{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .print-stage{position:sticky;top:1.5rem}
}

/* ---- in-house renderings in other languages ------------------------------
   Shown on the card rather than on a separate page: the translations were
   authored in-house and are owner-owned, and a reader searching in Hindi or
   Chinese should find the line in their own script without leaving the room. */
.rendering{
  display:grid;gap:.5rem;
  border-left:2px solid var(--wall-edge);padding-left:.8rem;
  font-family:"Fraunces",Georgia,serif;font-size:.98rem;line-height:1.5;
  color:var(--ink-soft);
}
.rendering .code{display:inline-block;margin-right:.5rem;vertical-align:.08em}
.rendering span[lang]{display:block}

/* ---- the Restoration Room ------------------------------------------------
   A quote shown twice: as the world uses it, then whole, with the part that
   gets dropped marked. No animation is required to understand it. */
.restore-short{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.35;text-align:center;
  max-width:26ch;margin:.5rem auto 0;color:var(--ink-soft);
  position:relative;z-index:1;
}
.restore-full{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.4rem,4vw,2.4rem);line-height:1.28;text-align:center;
  max-width:26ch;margin:.5rem auto 0;color:var(--ink);
  position:relative;z-index:1;
}
/* the words the world leaves out — restored, not struck */
mark.restored{
  background:none;color:var(--accent);font-style:italic;
  box-shadow:inset 0 -.35em 0 rgba(35,51,192,.10);
}
/* an exhibit that is real and simply mislabelled hangs rather than vanishing */
blockquote.hung{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.4rem,4vw,2.6rem);line-height:1.24;text-align:center;
  max-width:22ch;margin:.6rem auto 0;position:relative;z-index:1;
}

/* a longer version that is itself a modern invention is shown, not endorsed */
.restore-full.is-claimed{
  color:var(--ink-soft);
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-color:var(--accent);
  text-underline-offset:.28em;
  text-decoration-thickness:1px;
}

/* ---- the Authentication Desk --------------------------------------------
   Every row is in the HTML already; the box only hides what does not match,
   so the page is a complete index with JavaScript off. */
.desk{padding:1.6rem 0 .4rem;max-width:44rem}
.desk input[type=search]{
  font:inherit;font-size:1.05rem;width:100%;padding:.9rem 1rem;min-height:52px;
  color:var(--ink);background:#FBFBFC;border:1px solid var(--wall-edge);
  box-shadow:var(--cast);
}
.desk input[type=search]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.desk-count{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  min-height:1.2em;margin-top:.6rem;
}
.desk-empty{max-width:52ch;color:var(--ink-soft);padding:1rem 0 2rem}

.hits{list-style:none;display:grid;gap:.5rem;padding:1rem 0 0;margin:0}
.hit a{
  display:grid;gap:.25rem;text-decoration:none;color:inherit;
  background:#FBFBFC;border:1px solid var(--wall-edge);
  padding:.85rem 1rem;
  transition:border-color .3s var(--curator),box-shadow .3s var(--curator);
}
.hit a:hover{border-color:var(--ink-faint);box-shadow:var(--cast)}
.hit-q{font-family:"Fraunces",Georgia,serif;font-size:1.02rem;line-height:1.35}
.hit-a{font-size:.85rem;color:var(--ink-soft)}
.hit-tag,.hit-room{
  font-family:"Space Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  justify-self:start;border:1px solid var(--wall-edge);padding:.1rem .45rem;
}
.hit-tag{color:var(--accent);border-color:var(--accent)}
.hit-line{font-size:.82rem;color:var(--ink-soft);margin-top:.2rem}
@media(min-width:780px){
  .hit a{grid-template-columns:1fr auto;align-items:baseline;column-gap:1rem}
  .hit-a{grid-column:1}
  .hit-tag,.hit-room{grid-column:2;grid-row:1/span 2;align-self:center}
  .hit-line{grid-column:1}
}

/* ---- doorways between the museum and the rest of the site ---------------- */
.doorway{
  border-left:3px solid var(--accent);
  padding-left:1.2rem;
  max-width:60ch;
}
.doorway .code{color:var(--accent)}

/* ---- the room's own plate -------------------------------------------------
   Galleries were 34 pages of unbroken text. Each now opens with the print the
   Studio forges for it, which is both the room's face and an advertisement for
   the thing at the bottom of the page. */
.room-plate{margin:1.6rem 0 0;border:1px solid var(--wall-edge);box-shadow:var(--cast);background:var(--ink)}
.room-plate img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.room-plate figcaption{
  background:#FBFBFC;border-top:1px solid var(--wall-edge);
  padding:.6rem .9rem;color:var(--ink-faint);
}