:root{--bg: #0b0a09;--ink: #f5eee3;--ink-dim: #a19584;--gold: #c9a96a;--gold-soft: rgba(201, 169, 106, .28);--panel: rgba(20, 18, 15, .82);--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;--ease: cubic-bezier(.22, .61, .36, 1);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%)}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.app{position:relative;height:100dvh;width:100%;transition:width .45s var(--ease);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.app.is-idle{cursor:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(12px,2.4vh,26px) clamp(18px,4vw,46px) 0;z-index:4;transition:opacity .6s var(--ease)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:20px;color:var(--gold);opacity:.9}.brand-text{display:flex;flex-direction:column;line-height:1.25}.brand-text b{font-family:var(--serif);font-size:clamp(.95rem,1.3vw,1.15rem);letter-spacing:.06em;font-weight:600}.brand-text i{font-style:normal;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}.topbar-meta{margin:0;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);text-align:right;max-width:46vw}.viewer{position:relative;min-height:0}.stage{position:absolute;inset:0;--dir: 1}.stage[data-dir="-1"]{--dir: -1}.stage-box{position:absolute;inset:0;padding:clamp(10px,2.5vh,30px) clamp(28px,7vw,110px);pointer-events:none}.layer{position:absolute;inset:0;display:grid;place-items:center}.layer.is-entering{animation:layer-in 1.05s var(--ease) both}.layer.is-leaving{animation:layer-out 1.05s var(--ease) both}@keyframes layer-in{0%{opacity:0;transform:translate(calc(var(--dir) * 3.5vw)) scale(1.02);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes layer-out{0%{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translate(calc(var(--dir) * -2.5vw)) scale(.98);filter:blur(10px)}}.ambient{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(80px) saturate(1.35) brightness(.45);opacity:.55;transform:scale(1.1)}.frame{position:relative;margin:0;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px var(--gold-soft),0 0 0 7px #0c0b098c,0 45px 80px -28px #000000f2,0 8px 30px #00000080}.frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.frame .placeholder{filter:blur(14px);transform:scale(1.08)}.frame .artwork{opacity:0;transition:opacity .7s ease}.frame .artwork.is-loaded{opacity:1;animation:kenburns 30s ease-out both}@keyframes kenburns{0%{transform:scale(1.005) translate(0)}to{transform:scale(1.075) translate(calc(var(--kb) * 1%),-.8%)}}.caption{position:relative;z-index:4;margin:0;padding:clamp(10px,1.8vh,22px) clamp(20px,6vw,80px) clamp(100px,13vh,136px);text-align:center;display:grid;justify-items:center;gap:clamp(2px,.5vh,8px)}.caption>*{margin:0;max-width:min(1080px,92vw);animation:rise .85s var(--ease) both;animation-delay:calc(var(--i) * 85ms + .14s)}@keyframes rise{0%{opacity:0;transform:translateY(16px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}.caption-section{display:flex;align-items:center;gap:10px;font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}.caption-section .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}.badge{margin-left:4px;padding:3px 9px;border:1px solid var(--gold-soft);border-radius:999px;font-size:.58rem;letter-spacing:.18em;color:var(--ink)}.caption-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,3vw,2.7rem);line-height:1.12;letter-spacing:.005em;text-wrap:balance}.caption-alt{font-family:var(--serif);font-style:italic;font-size:clamp(.9rem,1.4vw,1.2rem);color:var(--ink-dim);text-wrap:balance}.caption-artist{margin-top:clamp(4px,.8vh,12px)}.artist-link,.artist-anon{position:relative;display:inline-flex;align-items:center;gap:12px;padding:4px 2px;font-size:clamp(.72rem,1.05vw,.86rem);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}.artist-link:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);opacity:.22;transform:scaleX(1);transition:.35s var(--ease)}.artist-link:hover:after{opacity:.9}.artist-link-hint{position:absolute;left:100%;top:50%;margin-left:14px;white-space:nowrap;font-size:.58rem;letter-spacing:.16em;color:var(--gold);opacity:0;transform:translate(-6px,-50%);transition:.35s var(--ease)}.artist-link:hover .artist-link-hint{opacity:.85;transform:translateY(-50%)}.artist-anon{color:var(--ink-dim)}.caption-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;font-size:clamp(.68rem,.95vw,.8rem);color:var(--ink-dim);letter-spacing:.05em}.caption-meta span:not(:last-child):after{content:"·";margin-left:14px;color:var(--gold-soft)}.caption-meta b{color:var(--ink);font-weight:500;letter-spacing:.08em}.edge{position:absolute;top:12%;bottom:22%;width:clamp(70px,10vw,150px);display:grid;place-items:center;z-index:5;opacity:0;transition:opacity .4s var(--ease)}.edge-left{left:0;justify-items:start;padding-left:clamp(8px,1.5vw,22px)}.edge-right{right:0;justify-items:end;padding-right:clamp(8px,1.5vw,22px)}.edge:hover,.edge:focus-visible{opacity:1}.edge-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--gold-soft);background:#0f0d0b8c;backdrop-filter:blur(8px)}.controls{position:absolute;left:50%;bottom:clamp(18px,3.4vh,34px);transform:translate(-50%);z-index:6;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:var(--panel);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 18px 50px -20px #000000e6;transition:opacity .6s var(--ease),transform .6s var(--ease)}.control-group{display:flex;align-items:center;gap:2px}.ctrl{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);opacity:.78;transition:.25s var(--ease)}.ctrl:hover{opacity:1;background:#ffffff12}.ctrl-primary{width:46px;height:46px;color:#14120f;background:var(--gold);opacity:1}.ctrl-primary:hover{background:#dcc089}.ctrl-text{width:auto;min-width:42px;padding:0 12px;border-radius:999px;font-size:.72rem;letter-spacing:.14em}.counter{display:flex;align-items:baseline;gap:6px;flex:0 0 auto;white-space:nowrap;padding:0 clamp(4px,1vw,12px);font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:.72rem;letter-spacing:.12em}.counter b{color:var(--ink);font-size:.92rem;letter-spacing:.16em}.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff12;z-index:6}.progress-bar{height:100%;background:linear-gradient(90deg,rgba(201,169,106,.5),var(--gold));transform:scaleX(0);transform-origin:left center}.hint{position:absolute;left:clamp(18px,4vw,46px);bottom:clamp(20px,3.6vh,36px);margin:0;font-size:.6rem;letter-spacing:.14em;color:var(--ink-dim);opacity:.5;transition:opacity .6s var(--ease);pointer-events:none}.app.is-idle .topbar,.app.is-idle .controls,.app.is-idle .hint,.app.is-idle .edge{opacity:0;pointer-events:none}.app.is-idle .controls{transform:translate(-50%,14px)}@media(min-width:900px){.app.is-panel{width:calc(100% - 460px)}}.overlay{position:fixed;inset:0;z-index:20;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(10px,1.6vh,18px);padding:clamp(16px,3vh,32px) clamp(18px,4vw,54px) 0;background:#090807ed;backdrop-filter:blur(18px);animation:overlay-in .4s var(--ease) both}@keyframes overlay-in{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}.overlay-head{display:flex;align-items:center;gap:clamp(12px,3vw,32px)}.overlay-head h2{margin:0;font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:600;letter-spacing:.04em;white-space:nowrap}.search{flex:1;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--ink-dim)}.search input{flex:1;border:0;background:none;outline:none;color:var(--ink);font-size:.9rem;letter-spacing:.02em}.chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.chip{padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:.25s var(--ease)}.chip:hover{color:var(--ink);border-color:var(--gold-soft)}.chip.is-on{color:#14120f;background:var(--gold);border-color:var(--gold)}.chips-count{margin-left:auto;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}.thumbs{overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(126px,13vw,186px),1fr));gap:clamp(12px,1.6vw,22px);padding:4px 4px clamp(24px,5vh,48px)}.thumb{display:grid;gap:7px;text-align:left;padding:0}.thumb-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;background-size:cover;background-position:center;box-shadow:0 0 0 1px #ffffff12;transition:.3s var(--ease)}.thumb-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}.thumb:hover .thumb-img{box-shadow:0 0 0 1px var(--gold-soft),0 16px 30px -16px #000000e6}.thumb:hover .thumb-img img{transform:scale(1.05)}.thumb.is-current .thumb-img{box-shadow:0 0 0 2px var(--gold)}.thumb-title{font-size:.76rem;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.thumb-artist{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{grid-column:1 / -1;padding:12vh 0;text-align:center;color:var(--ink-dim)}.panel{position:fixed;top:0;right:0;bottom:0;z-index:21;width:min(460px,94vw);display:grid;grid-template-rows:auto minmax(0,1fr);background:#0e0c0af5;backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,.08);box-shadow:-30px 0 80px -30px #000000e6;animation:panel-in .45s var(--ease) both}@keyframes panel-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:none}}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:clamp(20px,3.4vh,30px) clamp(18px,2.4vw,28px) 16px;border-bottom:1px solid rgba(255,255,255,.07)}.panel-kicker{margin:0 0 6px;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}.panel-head h2{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.2}.panel-body{overflow-y:auto;overscroll-behavior:contain;padding:clamp(18px,3vh,26px) clamp(18px,2.4vw,28px) 40px}.panel-bio{margin:0;font-size:.86rem;line-height:1.75;color:#f5eee3d1;text-align:justify;hyphens:auto}.panel-bio.is-empty{color:var(--ink-dim);font-style:italic;text-align:left}.panel-sub{margin:28px 0 12px;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}.panel-sub span{color:var(--ink-dim)}.panel-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.panel-work{display:grid;gap:6px;padding:0;text-align:left}.panel-work img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px #ffffff14;transition:.3s var(--ease)}.panel-work:hover img{box-shadow:0 0 0 1px var(--gold-soft)}.panel-work.is-current img{box-shadow:0 0 0 2px var(--gold)}.panel-work span{font-size:.62rem;line-height:1.3;color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.splash{height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--ink-dim);letter-spacing:.2em;text-transform:uppercase;font-size:.72rem}.splash-mark{font-size:30px;color:var(--gold);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}@media(max-width:720px){.topbar-meta,.hint{display:none}.caption{padding-bottom:clamp(96px,15vh,130px)}.edge{width:22vw}.controls{gap:6px;padding:6px 8px}.counter{display:none}}@media(prefers-reduced-motion:reduce){.layer.is-entering,.layer.is-leaving,.caption>*,.overlay,.panel,.frame .artwork.is-loaded{animation:none!important}.layer.is-leaving{opacity:0}*{transition-duration:.01ms!important}}
