/* theartgallery.ai v0.2.3. Layout: a gallery wall. Wide margins, frames hung on a centre line, a wall label beside each piece.
   Light = a cool museum white wall; dark = the gallery after hours. v0.3: one first-party script (gallery.js) for the lightbox; everything else is CSS. */
:root{
  --wall:#F6F6F4; --wall2:#ECECE8; --ink:#1F1F1E; --muted:#6B6B68; --rule:#D6D6D1; --accent:#2F4A6D; --matte:#FFFFFF;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--wall:#141413; --wall2:#1C1C1B; --ink:#ECEBE8; --muted:#9A9994; --rule:#33332F; --accent:#A9BFDD; --matte:#22221F; color-scheme:dark}
}
:root[data-theme="dark"]{--wall:#141413; --wall2:#1C1C1B; --ink:#ECEBE8; --muted:#9A9994; --rule:#33332F; --accent:#A9BFDD; --matte:#22221F; color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--wall);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--wall);color:var(--ink);font:400 1rem/1.55 var(--sans);padding-inline:max(20px,env(safe-area-inset-left,0px))}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;max-width:1200px;margin:0 auto;padding-block:28px 18px;border-bottom:1px solid var(--rule)}
.mark{font:400 1.6rem/1 var(--serif);color:var(--ink);text-decoration:none}
.mark span{color:var(--muted)}
.top nav{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.top nav a{color:var(--muted);text-decoration:none;padding-block:8px}
.top nav a:hover{color:var(--ink)}
main{max-width:1200px;margin:0 auto;padding-block:56px 72px}
h1{margin:0;font:400 clamp(2.6rem,7vw,5.4rem)/1.02 var(--serif);letter-spacing:-.01em;text-wrap:balance}
h1 em{font-style:italic;color:var(--muted)}
.lede{max-width:58ch;margin:18px 0 0;font-size:1.12rem;color:var(--muted)}
.kicker{display:block;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-variant-numeric:tabular-nums}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:56px}
.door{display:grid;gap:6px;padding:28px;border:1px solid var(--rule);background:var(--wall2);color:var(--ink);text-decoration:none}
.door:hover{border-color:var(--accent)}
.door .name{font:400 2rem/1.1 var(--serif)}
.door .blurb{color:var(--muted);max-width:44ch}
.wallhead{margin-bottom:40px}
.note{max-width:58ch;margin:14px 0 0;color:var(--muted);font-size:.95rem}
/* Pictures of any shape hang on one line: each frame spans a picture row and a label row (subgrid), pictures sit on the row's bottom edge, labels start level. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:32px;row-gap:0;align-items:start}
.frame{margin:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.frame > a{display:block}
.frame > a,.frame > .mat{align-self:end}
.frame > .label{padding-block:14px 44px}
.frame img,.mat{display:block;width:100%;height:auto;background:var(--matte);border:10px solid var(--matte);box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.10)}
.mat{aspect-ratio:4/5}
.empty .mat{background:transparent;border:1px dashed var(--rule);box-shadow:none}
.label{font-size:.84rem;line-height:1.45}
.label p{margin:0}
.label .maker{font:600 .78rem/1.6 var(--sans);letter-spacing:.02em;color:var(--muted)}
.label h3{margin:2px 0 4px;font:400 1.35rem/1.2 var(--serif)}
.label h3 cite{font-style:italic}
.label .num{font-variant-numeric:tabular-nums}
.label .catno{color:var(--muted);letter-spacing:.04em}
.label .about{margin-top:14px;max-width:40ch;font-size:.92rem;color:var(--ink)}
.label .lic{margin-top:8px;color:var(--muted);font-size:.78rem}
.empty .label h3{color:var(--muted)}
.label dl,.labeldoc{margin:6px 0 0;display:grid;gap:2px;font-size:.82rem}
.label dl div,.labeldoc div{display:flex;gap:10px}
.label dt,.labeldoc dt{min-width:84px;color:var(--muted);font-weight:500}
.label dd,.labeldoc dd{margin:0}
.labeldoc{gap:10px;font-size:1rem;max-width:62ch;margin:20px 0}
.labeldoc dt{min-width:120px}
.prose p{max-width:62ch}
.piece{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1fr);gap:40px;align-items:end}
.hang{margin:0}
.hang a{display:block}
.hang .full{margin-top:10px;font-size:.84rem}
.hang .full a{display:inline;color:var(--muted)}
.hang img{display:block;width:100%;height:auto;background:var(--matte);border:14px solid var(--matte);box-shadow:0 2px 4px rgba(0,0,0,.08),0 18px 44px rgba(0,0,0,.14)}
.takehome{margin:12px 0 0;font-size:.9rem}
.back{grid-column:1/-1;font-size:.9rem}
.foot{max-width:1200px;margin:0 auto;padding-block:28px 40px;border-top:1px solid var(--rule);font-size:.8rem;color:var(--muted)}
.foot p{margin:4px 0;max-width:80ch}
@media (max-width:700px){ .piece{grid-template-columns:1fr} main{padding-block:36px 56px} }
/* v0.3: the hero, a little life on the wall, the lightbox. All of it reads and works with script off except the lightbox, whose
   links fall back to the piece pages. Motion is off for anyone who asks for reduced motion. */
.frame img{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.frame a:hover img,.frame a:focus-visible img{transform:translateY(-5px);box-shadow:0 2px 4px rgba(0,0,0,.08),0 22px 44px rgba(0,0,0,.18)}
.frame a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
@keyframes labelin{from{opacity:.4;transform:translateY(12px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.frame .label{animation:labelin linear both;animation-timeline:view();animation-range:entry 0% cover 25%}}}
@media (prefers-reduced-motion:reduce){.frame img{transition:none}.frame a:hover img,.frame a:focus-visible img{transform:none}}
dialog.lb{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0d0c;color:#ecebe8}
dialog.lb::backdrop{background:rgba(0,0,0,.85)}
.lb-stage{position:absolute;inset:56px 64px 72px;display:flex;align-items:center;justify-content:center}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;cursor:zoom-in;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb.zoom .lb-stage{overflow:auto;display:block}
.lb.zoom .lb-stage img{max-width:none;max-height:none;cursor:zoom-out}
.lb-cap{position:absolute;left:20px;right:20px;bottom:18px;margin:0;text-align:center;font-size:.9rem;color:#bdbcb7}
.lb-page{position:absolute;right:20px;top:18px;color:#a9bfdd;font-size:.9rem}
.lb button{position:absolute;background:none;border:0;color:#ecebe8;font:300 2.4rem/1 var(--sans);cursor:pointer;padding:8px 14px;min-width:44px;min-height:44px}
.lb button:focus-visible{outline:2px solid #a9bfdd}
.lb-close{left:12px;top:6px}
.lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lb-next{right:6px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb-stage{inset:52px 8px 64px}.lb-prev,.lb-next{top:auto;bottom:8px;transform:none}}
/* v0.4: the lit room that opens the front page; the theme switch; the facts strip */
.room{position:relative;isolation:isolate;overflow:hidden;max-width:1200px;margin:28px auto 0;background:#121211;color:#F1EFEA;border-radius:2px}
.glow{position:absolute;inset:-14%;z-index:-2;background-size:cover;background-position:center;filter:blur(64px) saturate(1.25) brightness(.55);transform:scale(1.1);transition:background-image 1.2s ease}
.room::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 72% 42%,transparent 0,rgba(14,14,13,.5) 60%,rgba(14,14,13,.9) 100%)}
.room-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:clamp(28px,5vw,64px)}
.room .kicker{color:#F2D9A2}
.room h1{color:#F1EFEA}
.room h1 em{color:#F2D9A2}
.room .lede{color:#C9C7C1}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;border:1px solid rgba(241,239,234,.4);color:#F1EFEA;text-decoration:none;font:500 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.btn:hover,.btn:focus-visible{background:#F1EFEA;color:#121211;border-color:#F1EFEA}
.btn.solid{background:#F2D9A2;border-color:#F2D9A2;color:#1B1608}
.lit{margin:0}
.lit a{display:block}
.lit img{display:block;width:100%;height:auto;border:12px solid #F6F4EE;box-shadow:0 30px 70px rgba(0,0,0,.55);transition:opacity .8s ease}
.lit img.fading{opacity:0}
.lit figcaption{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:14px;font-size:.84rem;color:#C9C7C1}
.lit figcaption cite{font:italic 400 1.15rem/1.2 var(--serif);color:#F1EFEA}
.ticks{display:flex;gap:6px;margin-top:14px}
.ticks a{flex:1;display:block;min-height:24px;position:relative}
.ticks a::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(241,239,234,.28)}
.ticks a[aria-current="true"]::before{background:#F2D9A2}
.ticks a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.strip{max-width:1200px;margin:0 auto;padding:14px 0;font:500 .74rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
.theme{background:none;border:1px solid var(--rule);color:var(--muted);font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;min-height:36px;cursor:pointer}
.theme:hover,.theme:focus-visible{color:var(--ink);border-color:var(--ink)}
@media (max-width:760px){.room-in{grid-template-columns:1fr;gap:28px}.lit{order:-1}}
@media (prefers-reduced-motion:reduce){.lit img,.glow{transition:none}}
/* v0.4.1: see it on a wall. The picture laid on the look reviewer's room plate at a stated print size; no script. */
.onwall{grid-column:1 / -1;margin:48px 0 0;max-width:1100px}
.onwall h2{margin:0 0 14px;font:400 1.8rem/1.1 var(--serif)}
.scene{position:relative;margin:0}
.scene .plate{display:block;width:100%;height:auto}
.scene .print{position:absolute;height:auto;border:3px solid #2A2622;box-shadow:2px 6px 14px rgba(0,0,0,.28)}
.onwall figcaption{margin-top:12px;max-width:70ch;font-size:.88rem;color:var(--muted)}
/* v0.5: the walk. Dark in either theme: it is a dark room. The panel's accent is the picture's own colour (--tint, set by walk.js). */
.walk{position:fixed;inset:0;height:auto;min-height:0;max-width:none;margin:0;z-index:1;background:#0B0B0C;color:#F1EFEA;overflow:hidden;--tint:#F2D9A2}
.stage{position:absolute;inset:0}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.walk-ui{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px clamp(16px,3vw,32px);pointer-events:none}
.walk-ui > *{pointer-events:auto}
.walk-ui,.walk .stage{visibility:hidden}
.ready .walk-ui,.ready .walk .stage{visibility:visible}
.ready .walk-nogl{display:none}
.walk-nogl{position:absolute;inset:0;display:grid;place-content:center;gap:10px;padding:24px;text-align:center}
.walk-nogl h1{font:400 clamp(1.8rem,4vw,2.6rem)/1.1 var(--serif);color:#F1EFEA;margin:0}
.walk-nogl p{margin:0;color:#C9C7C1;max-width:52ch}
.walk-label{max-width:min(380px,100%);padding:16px 18px;background:rgba(14,14,13,.78);border-left:3px solid var(--tint);opacity:0;transition:opacity .6s ease}
.walk-label.on{opacity:1}
.walk-label .kicker{margin:0 0 6px;color:var(--tint);font:500 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.walk-label h2{margin:2px 0 4px;font:italic 400 1.5rem/1.15 var(--serif);color:#F1EFEA;text-wrap:balance}
.walk-label.on h2{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.walk-label p{margin:0;font-size:.84rem;line-height:1.45;color:#C9C7C1}
.walk-label .maker{font:600 .78rem/1.6 var(--sans);letter-spacing:.02em}
.walk-label .num{font-variant-numeric:tabular-nums}
.walk-label a{display:inline-block;margin-top:10px;color:#F1EFEA;font:500 .76rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.btn[hidden]{display:none}
body:has(main.walk){background:#0B0B0C}
body:has(main.walk) .top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:3;max-width:none;margin:0;padding:10px clamp(16px,3vw,32px);border:0;background:linear-gradient(rgba(11,11,12,.75),rgba(11,11,12,0))}
body:has(main.walk) .top .mark{color:#F1EFEA;font-size:1.05rem}
body:has(main.walk) .top nav a{color:#C9C7C1}
body:has(main.walk) .top .theme{display:none}
body:has(main.walk) .foot{display:none}
.walk-ctl{display:flex;flex-wrap:wrap;gap:8px}
.walk-ctl button{min-height:44px;padding:10px 14px;background:rgba(14,14,13,.7);border:1px solid rgba(241,239,234,.35);color:#F1EFEA;font:500 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.walk-ctl button:hover,.walk-ctl button:focus-visible,.walk-ctl button[aria-pressed="true"]{background:#F1EFEA;color:#121211}
.walk-help{flex-basis:100%;margin:0;font-size:.74rem;color:#8E8B84}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:640px){.walk-label{max-width:100%;padding:12px 14px}.walk-help{display:none}#lines p:not(.maker):not(.num){display:none}.walk-label h2{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.walk-label,.walk-label.on h2{transition:none;animation:none}}