:root { --ink:#302838; --muted:#746b7d; --canvas:#f7f4f9; --paper:#fff; --line:#ded6e5; --brand:#76518d; --brand-dark:#503663; --brand-soft:#eee6f3; }
body[data-theme="green"] { --ink:#243330; --muted:#65736f; --canvas:#f4f7f5; --line:#dce5e1; --brand:#176f62; --brand-dark:#0e5148; --brand-soft:#e6f2ee; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:Heebo,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc((100vw - 980px)/2)); color:#fff; background:var(--brand-dark); }
.top-actions { display:flex; gap:6px; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:600 1.3rem Newsreader,serif; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgb(255 255 255 / 45%); border-radius:50%; font-family:Heebo,sans-serif; }
.icon-button { width:40px; height:40px; display:inline-grid; place-items:center; padding:0; color:inherit; background:transparent; border:1px solid rgb(255 255 255 / 25%); border-radius:5px; cursor:pointer; text-decoration:none; }
.icon-button svg { width:19px; height:19px; }
.gallery-shell { width:min(980px,calc(100% - 32px)); margin:28px auto 56px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.page-heading > svg { width:38px; height:38px; color:var(--brand); }
.eyebrow { margin:0 0 3px; color:var(--brand); font-size:.72rem; font-weight:800; }
h1 { margin:0 0 4px; font-size:1.8rem; } .page-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.gallery-card { display:grid; gap:10px; min-width:0; padding:10px; background:var(--paper); border:1px solid var(--line); border-radius:7px; box-shadow:0 8px 24px rgb(80 54 99 / 6%); }
.gallery-card button { display:block; width:100%; padding:0; overflow:hidden; background:#f4eef7; border:0; border-radius:4px; cursor:zoom-in; }
.gallery-card img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:contain; transition:transform .2s ease; }
.gallery-card button:hover img { transform:scale(1.03); }
.gallery-card figcaption { min-height:2.8em; padding:0 4px 3px; color:var(--ink); font-size:.9rem; font-weight:700; }
.lightbox { width:min(920px,calc(100% - 28px)); max-height:calc(100vh - 28px); padding:42px 58px 22px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; }
.lightbox::backdrop { background:rgb(35 25 43 / 72%); backdrop-filter:blur(3px); }
.lightbox figure { display:grid; justify-items:center; gap:12px; margin:0; }
.lightbox img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100vh - 150px); object-fit:contain; }
.lightbox figcaption { color:var(--muted); font-weight:700; text-align:center; }
.dialog-close { position:absolute; inset-block-start:10px; inset-inline-end:10px; color:var(--muted); border-color:transparent; }
.lightbox-nav { position:absolute; top:50%; width:40px; height:40px; display:grid; place-items:center; padding:0; color:var(--brand); background:var(--brand-soft); border:1px solid var(--line); border-radius:50%; cursor:pointer; transform:translateY(-50%); }
.lightbox-nav svg { width:20px; } .lightbox-nav.previous { inset-inline-start:12px; } .lightbox-nav.next { inset-inline-end:12px; }
@media (max-width:700px) { .gallery-shell { width:min(100% - 20px,980px); margin-top:18px; } .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .gallery-card { padding:7px; } .gallery-card figcaption { font-size:.78rem; } .lightbox { padding:42px 38px 18px; } .lightbox-nav { width:34px; height:34px; } }
@media (max-width:420px) { .gallery { grid-template-columns:1fr; } .gallery-card img { aspect-ratio:16 / 10; } }