/* The gallery you walk round (/showroom/gallery). Loaded on that page only, after styles.css.
   Everything here is .gl-, so nothing leaks into or out of styles.css.
   The room: .gl-view holds the perspective, .gl-room is the one thing that moves (a transform transition),
   and four .gl-wall planes sit round it with translateZ. The planes only touch at the corners, never cross.
   Floor and ceiling are the view's background: the walls always cover the horizon, so two flat colours do it.
   Sizes are in cqw of .gl-stage, so the room is the same shape at any width. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/fraunces-700.woff2) format("woff2")}

:root{--gl-paper:#F1ECE3;--gl-ink:#23201C;--gl-ink-2:#57504A;--gl-line:#CFC6B8;--gl-pop:#F4B942;
  --gl-serif:"Fraunces",Georgia,"Times New Roman",serif}

/* ------------------------------------------------------------ page */
.gl-intro{padding-block:clamp(22px,1.2rem + 1.6vw,44px) 14px}
.gl-kicker{font-size:.95rem;color:var(--ink-2);margin:0 0 .5em}
.gl-kicker a{color:var(--ink);font-weight:600}
.gl-intro h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);margin-bottom:.25em}
.gl-lead{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-2);max-width:64ch;margin:0}

.gl-after{padding-block:clamp(40px,3rem + 2vw,80px)}
.gl-after h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.gl-after p{color:var(--ink-2)}
.gl-after-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}

/* ------------------------------------------------------------ the artist's site */
.gl-site{background:var(--gl-paper);color:var(--gl-ink);border-block:2px solid var(--ink)}
.gl-bar-in,.gl-stage{max-width:1040px;margin:0 auto;padding-inline:20px}
.gl-bar{border-bottom:1px solid var(--gl-line)}
.gl-bar-in{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:4px 22px;padding-block:14px}
.gl-name{font:700 1.45rem/1.1 var(--gl-serif);letter-spacing:-.01em;margin:0;white-space:nowrap}
.gl-about{margin:0;color:var(--gl-ink-2);font-size:.98rem}
.gl-eg{margin:0;font-size:.82rem;line-height:1.35;color:var(--gl-ink-2);border:1px solid var(--gl-line);padding:3px 8px;max-width:30ch}
@media (max-width:900px){.gl-bar-in{grid-template-columns:1fr}.gl-eg{justify-self:start;white-space:normal}}

/* ------------------------------------------------------------ buttons */
.gl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 16px;border:2px solid var(--gl-ink);border-radius:2px;
  background:var(--gl-ink);color:var(--gl-paper);font:600 1rem/1.15 var(--body);cursor:pointer;text-decoration:none}
.gl-btn svg{width:16px;height:16px;flex:none}
.gl-btn:hover{background:#3A352F;border-color:#3A352F}
.gl-ghost{background:transparent;color:var(--gl-ink)}
.gl-ghost:hover{background:#E4DDD0;border-color:var(--gl-ink)}
.gl-btn:focus-visible,.gl-view:focus-visible,.gl-frame:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gl-buy{background:var(--gl-pop);color:var(--gl-ink);box-shadow:3px 3px 0 var(--gl-ink)}
.gl-buy:hover{background:#F7C964;border-color:var(--gl-ink)}

/* ------------------------------------------------------------ the room */
.gl-stage{container-type:inline-size;padding-block:18px 26px;
  --ww:150cqw;--wh:60cqw;--p:90cqw;--fs:1;--vh:44cqw}
.gl-view{position:relative;height:var(--vh);max-height:calc(100svh - 120px);min-height:300px;overflow:clip;
  perspective:var(--p);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:linear-gradient(#E9E4DA,#DCD5C8 50%,#5C4330 50%,#7C5D42);border:2px solid var(--gl-ink)}
.gl-view:active{cursor:grabbing}
.gl-room{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transform:scale(1) translate3d(0,0,0) rotateY(0deg);
  transition:transform .7s cubic-bezier(.45,.05,.25,1)}
.gl-wall{position:absolute;left:50%;top:50%;width:var(--ww);height:var(--wh);margin:calc(var(--wh) / -2) 0 0 calc(var(--ww) / -2);
  display:flex;align-items:center;justify-content:space-evenly;padding-inline:4cqw;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:auto;
  transform:rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--ww) / -2));
  background:var(--wc) linear-gradient(90deg,rgba(0,0,0,.16),transparent 9%,transparent 91%,rgba(0,0,0,.16))}
.gl-wall::before{content:"";position:absolute;left:0;right:0;top:7%;height:.5cqw;background:rgba(255,255,255,.14);border-bottom:.3cqw solid rgba(0,0,0,.18)}
.gl-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.5%;background:#EDE7DC;border-top:.4cqw solid #D3CBBD}
.gl-corner{position:absolute;left:50%;top:50%;width:.7cqw;height:var(--wh);margin:calc(var(--wh) / -2) 0 0 -.35cqw;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(calc(var(--i) * 90deg + 45deg)) translateZ(calc(var(--ww) * -.70711 + .45cqw));
  background:linear-gradient(#26332C 0 94.5%,#D3CBBD 94.5%)}
.gl-w0{--wc:#3D5347}.gl-w1{--wc:#354A3F}.gl-w2{--wc:#3A5044}.gl-w3{--wc:#32463B}

.gl-piece{position:relative;width:calc(var(--fw) * var(--fs) * 1cqw);margin-top:-2cqw}
.gl-frame{display:block;width:100%;padding:calc(2.2cqw * var(--fs));margin:0;border:calc(.9cqw * var(--fs)) solid #1E1B18;border-radius:0;
  background:#F6F3EC;cursor:pointer;box-shadow:0 1.1cqw 1.6cqw rgba(0,0,0,.38),inset 0 0 0 .25cqw rgba(0,0,0,.08)}
.gl-frame svg,.gl-thumb svg,.gl-fr svg{width:100%;height:auto;display:block}
.gl-f-oak{border-color:#A37A4C;border-top-color:#B88E5E;border-bottom-color:#8C6640}
.gl-f-black{border-color:#1E1B18;border-top-color:#34302B}
.gl-f-white{border-color:#F2EFE8;border-bottom-color:#D9D4CA;background:#FBFAF6}
.gl-label{position:absolute;left:0;top:calc(100% + 1.6cqw);margin:0;padding:.5cqw .8cqw;background:#F4F1EA;color:#2A2622;
  font:400 calc(1cqw * var(--fs))/1.3 var(--body);white-space:nowrap;max-width:none}
.gl-label b{font-weight:600}

/* where am I, and the moves */
.gl-ctrl{display:grid;grid-template-columns:1fr auto;grid-template-areas:"where list" "moves moves";gap:12px 16px;align-items:center;margin-top:14px}
.gl-where{grid-area:where;display:flex;align-items:center;gap:12px;min-height:44px}
.gl-where p{margin:0;font-size:1rem}
.gl-plan{width:40px;height:40px;flex:none}
.gl-plan path{stroke:#9A8F80;stroke-width:3;fill:none}
.gl-plan[data-w="0"] .gl-s0,.gl-plan[data-w="1"] .gl-s1,.gl-plan[data-w="2"] .gl-s2,.gl-plan[data-w="3"] .gl-s3{stroke:var(--gl-ink);stroke-width:5}
.gl-me{fill:#B5523B;transform-origin:20px 20px;transition:transform .7s cubic-bezier(.45,.05,.25,1)}
.gl-moves{grid-area:moves;display:grid;grid-template-columns:1fr minmax(0,1.2fr) 1fr;gap:10px}
.gl-listbtn{grid-area:list}
.gl-list{margin-top:22px}
.gl-list-h{font:700 1.4rem/1.2 var(--gl-serif);margin-bottom:.6em}
.gl-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gl-list li{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start;padding:14px;background:#FAF7F1;border:1px solid var(--gl-line)}
.gl-list h3{font:700 1.12rem/1.2 var(--gl-serif);margin:0 0 .3em}
.gl-list p{margin:0 0 .4em;font-size:.95rem;color:var(--gl-ink-2)}
.gl-list .gl-btn{margin-top:4px;min-height:40px;padding:6px 12px;font-size:.95rem}
.gl-thumb{border:5px solid #1E1B18;padding:6px;background:#F6F3EC}
.gl-thumb.gl-f-oak{border-color:#A37A4C}.gl-thumb.gl-f-white{border-color:#E3DED4}
.gl-stage.is-list .gl-view,.gl-stage.is-list .gl-where,.gl-stage.is-list .gl-moves{display:none}
.gl-stage.is-list .gl-ctrl{grid-template-columns:1fr;grid-template-areas:"list"}
.gl-stage.is-list .gl-listbtn{justify-self:start}
.gl-noscript{background:#FFF4D6;border:1px solid #EBD38F;padding:10px 14px;margin:14px 0 0}

@media (max-width:640px){
  .gl-bar-in,.gl-stage{padding-inline:16px}
  .gl-stage{--wh:110cqw;--fs:1.3;--vh:100cqw}
  .gl-ctrl{grid-template-columns:1fr;grid-template-areas:"where" "moves" "list"}
  .gl-moves{grid-template-columns:1fr 1fr;grid-template-areas:"walk walk" "l r"}
  #gl-walk{grid-area:walk}#gl-left{grid-area:l}#gl-right{grid-area:r}
  .gl-list ul{grid-template-columns:1fr}
  .gl-list li{grid-template-columns:84px 1fr;gap:12px}
}

/* ------------------------------------------------------------ the piece, brought forward */
.gl-box,.gl-sheet{border:2px solid var(--gl-ink);border-radius:2px;padding:0;background:var(--gl-paper);color:var(--gl-ink);max-height:calc(100svh - 24px);overflow:auto}
.gl-box::backdrop,.gl-sheet::backdrop{background:rgba(24,22,19,.78)}
.gl-box{width:min(940px,calc(100vw - 24px))}
.gl-box[open]{animation:gl-in .26s cubic-bezier(.2,.7,.3,1)}
@keyframes gl-in{from{opacity:0;transform:scale(.94) translateY(14px)}}
.gl-box-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.gl-box-art{background:#3D5347;display:grid;place-items:center;padding:clamp(18px,4vw,44px)}
.gl-fr{width:100%;max-width:440px;border:12px solid #1E1B18;padding:clamp(14px,3vw,28px);background:#F6F3EC;box-shadow:0 14px 24px rgba(0,0,0,.4)}
.gl-fr.gl-f-oak{border-color:#A37A4C;border-top-color:#B88E5E;border-bottom-color:#8C6640}
.gl-fr.gl-f-white{border-color:#F2EFE8;border-bottom-color:#D9D4CA;background:#FBFAF6}
.gl-fr.is-p{max-width:340px}
.gl-box-txt{padding:clamp(18px,3vw,32px);display:flex;flex-direction:column}
.gl-box-where{font-size:.9rem;color:var(--gl-ink-2);margin:0 0 .4em}
.gl-box-txt h2{font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1.1 var(--gl-serif);letter-spacing:-.01em;margin:0 0 .6em}
.gl-dl{margin:0 0 18px;display:grid;gap:0}
.gl-dl div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--gl-line)}
.gl-dl dt{color:var(--gl-ink-2);font-size:.95rem}
.gl-dl dd{margin:0;font-weight:600}
#gl-box-price{font-family:var(--gl-serif);font-size:1.3rem}
.gl-box-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
@media (max-width:700px){.gl-box-in{grid-template-columns:1fr}.gl-fr{max-width:280px;border-width:9px}.gl-fr.is-p{max-width:220px}}

.gl-sheet{width:min(460px,calc(100vw - 24px))}
.gl-sheet form{padding:clamp(18px,3vw,28px)}
.gl-sheet h2{font:700 1.6rem/1.1 var(--gl-serif);margin:0 0 .3em}
.gl-sheet-what{color:var(--gl-ink-2);margin:0 0 14px}
.gl-sheet fieldset{border:0;padding:0;margin:0 0 12px}
.gl-sheet legend{font-weight:600;margin-bottom:8px;padding:0}
.gl-size{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--gl-line);background:#FAF7F1;margin-bottom:6px;cursor:pointer}
.gl-size:has(input:checked){border:2px solid var(--gl-ink);padding:7px 11px}
.gl-size input{width:20px;height:20px;accent-color:var(--gl-ink);margin:0}
.gl-size span{flex:1}
.gl-size b{font-weight:600}
.gl-sheet-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.gl-sheet-price output{font:700 1.5rem/1 var(--gl-serif)}
.gl-sheet-price span{font-size:.9rem;color:var(--gl-ink-2)}
.gl-demo{background:#FFF4D6;border:1px solid #E2C67A;padding:10px 12px;font-weight:600;margin:0 0 16px}

.gl-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ------------------------------------------------------------ reduced motion: a flat strip, one wall at a time, no turning */
@media (prefers-reduced-motion:reduce){
  .gl-view{perspective:none;cursor:default}
  .gl-room{transform:none!important;transition:none;transform-style:flat}
  .gl-wall{visibility:hidden;transform:scale(.6667)!important;background:var(--wc)}
  .gl-corner{display:none}
  #gl-left,#gl-right{grid-area:auto}
  .gl-wall.is-on{visibility:visible}
  .gl-me,.gl-box[open]{transition:none;animation:none}
  #gl-walk{display:none}
  .gl-moves{grid-template-columns:1fr 1fr;grid-template-areas:none}
}