:root{
  --canvas:#1B3A52; --canvas-deep:#122633; --bone:#EFE7D6; --ochre:#C89B3C; --rust:#B5432A;
  --ink:#151313; --line:rgba(239,231,214,.14); --gold-1:#8a6a24; --gold-2:#e2c170;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(ellipse at 78% 8%, rgba(200,155,60,.16), transparent 45%),
    radial-gradient(ellipse at 10% 92%, rgba(181,67,42,.14), transparent 50%),
    var(--canvas);
  color:var(--bone);
  font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(16px,5vw,64px)}
main.wrap{flex:1;padding-top:32px;padding-bottom:64px}
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:24px}
.wordmark{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:1.25rem;text-decoration:none}
.wordmark .dot{color:var(--ochre);font-style:normal}
.nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.nav a,.nav button{color:inherit;text-decoration:none;background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
.nav a:hover,.nav button:hover{color:var(--gold-2)}
.nav .count{background:var(--rust);border-radius:999px;padding:0 .5em;margin-left:.3em;font-size:.75rem}
form.inline{display:inline;margin:0}
h1,h2{font-family:"Playfair Display",serif;font-weight:500;margin:.2em 0 .5em}
h1{font-size:clamp(1.8rem,4vw,2.8rem)}
h2{font-size:1.4rem}
.muted{opacity:.7}
.flash{border:1px solid var(--line);border-left:4px solid var(--ochre);background:rgba(18,38,51,.6);padding:.8em 1.1em;margin:0 0 1em;border-radius:6px}
.flash.err{border-left-color:var(--rust)}
.card{background:rgba(18,38,51,.55);border:1px solid var(--line);border-radius:10px;padding:1.4em;max-width:520px}
label{display:block;margin:.9em 0 .3em;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file],textarea,select{
  width:100%;padding:.7em .8em;border-radius:6px;border:1px solid var(--line);
  background:var(--canvas-deep);color:var(--bone);font:inherit}
textarea{min-height:7em}
.btn{display:inline-block;margin-top:1.1em;padding:.7em 1.4em;border-radius:999px;border:1px solid var(--ochre);
  background:var(--ochre);color:var(--ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.ghost{background:none;color:var(--bone)}
.btn.danger{background:var(--rust);border-color:var(--rust);color:var(--bone)}
.btn.small{margin:0;padding:.35em .9em;font-size:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:36px 28px;margin-top:24px}
.piece{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.frame{padding:9px;width:100%;border-radius:2px;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2) 40%,var(--gold-1) 70%,var(--gold-2));
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35)}
.frame .mat{background:var(--bone);padding:8px}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--canvas-deep)}
.placard{margin-top:12px;background:var(--bone);color:var(--ink);padding:.45em .9em;border-radius:2px;
  font-size:.78rem;text-align:center;max-width:100%;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.placard strong{display:block;font-family:"Playfair Display",serif;font-weight:600;font-size:.95rem}
.badge{display:inline-block;border-radius:999px;padding:.1em .8em;font-size:.75rem;border:1px solid var(--line)}
.badge.pending{border-color:var(--ochre);color:var(--gold-2)}
.badge.approved{border-color:#6c9a6a;color:#a9d3a5}
.badge.rejected{border-color:var(--rust);color:#e59a88}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.6em .8em;border-bottom:1px solid var(--line);vertical-align:top;font-size:.9rem}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rooms{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.rooms a{border:1px solid var(--line);border-radius:999px;padding:.25em .9em;text-decoration:none;font-size:.85rem}
.rooms a:hover,.rooms a.on{border-color:var(--ochre)}
.art{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px;align-items:start}
.art .frame img{aspect-ratio:auto}
@media(max-width:820px){.art{grid-template-columns:1fr}}
.comment{border-bottom:1px solid var(--line);padding:.7em 0}
footer{padding:28px 0;text-align:center;font-size:.8rem;opacity:.6}

/* ---- landing: frames orbiting an empty centre ---- */
.lobby{text-align:center}
.lobby .tagline{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.1rem,2.4vw,1.5rem);opacity:.85;margin:0}
.orbit{position:relative;height:min(64vh,580px);max-width:1100px;margin:0 auto}
.orbit::before{content:"";position:absolute;left:50%;top:50%;width:min(46vw,440px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(239,231,214,.13),rgba(200,155,60,.05) 45%,transparent 70%);pointer-events:none}
.orbit-item{position:absolute;display:block;width:clamp(84px,12vw,148px);text-decoration:none;will-change:transform,opacity}
.orbit-item .frame{padding:6px}
.orbit-item .mat{padding:5px}
.orbit-item img,.orbit-item .blank{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.orbit-item .blank{background:linear-gradient(160deg,#e6dcc7,#efe7d6 55%,#d8ccb3)}
.orbit-item .placard{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;margin:0}
.orbit-item:hover .placard,.orbit-item:focus-visible .placard,.orbit-item.active .placard{opacity:1}
.orbit-item.empty{pointer-events:none}
.lobby-cta{margin:8px 0 0}
@media (max-width:700px){
  .orbit{height:min(56vh,440px)}
  .orbit-item[data-i="7"],.orbit-item[data-i="8"],.orbit-item[data-i="9"]{display:none}
}