:root{
  --bg:#141917; --panel:#222825; --panel-2:#2b322e;
  --ink:#eef5ef; --muted:#b8c6bd;
  --mint:#9fd3c7; --blush:#f6caca; --sprout:#c2d59b; --honey:#f2d18a;
  --shadow: 0 2px 0 rgba(0,0,0,.25), 0 18px 38px rgba(0,0,0,.45);
  --radius:20px; --gap:14px; --pad:12px;
  --lb-maxw: 900px; --lb-maxh: 74vh; --lb-imgh: 66vh;
  --safe: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Inter, Nunito, Quicksand, Arial, sans-serif}
a{color:var(--mint)} a:hover{filter:brightness(1.1)}

/* Header logo strip */
.logo-strip{
  max-width:1400px;margin:8px auto 0;padding:14px 16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:2px solid #000;border-radius:14px;box-shadow:var(--shadow)
}
/* Big, responsive bitmap logo */
.logo-badge{
  max-width:100%;
  display:block;
  object-fit:contain;
  height:clamp(100px, 18vw, 220px);
}
@media (min-width:1400px){ .logo-badge{ height:220px } }
@media (max-width:760px){ .logo-badge{ height:120px } }

/* Layout */
.wrap{max-width:1400px;margin:8px auto;padding:var(--gap);display:grid;grid-template-columns:260px 1fr 320px;gap:var(--gap);position:relative;z-index:2}
.depth{transform-style:preserve-3d}

/* Bubble gutters */
.bubbles{position:fixed;top:0;bottom:0;left:0;width:200px;pointer-events:none;z-index:0;opacity:.35}
.bubbles.right{left:auto;right:0}
.bubbles canvas{width:100%;height:100%;display:block}
.bubbles::after{content:"";position:absolute;top:0;bottom:0;width:56px;right:0;background:linear-gradient(to right, rgba(20,25,23,0), var(--bg))}
.bubbles.right::after{left:0;right:auto;background:linear-gradient(to left, rgba(20,25,23,0), var(--bg))}
@media (max-width:1200px){ .bubbles{width:150px} }
@media (max-width:760px){ .bubbles{display:none} }

/* Sidebar (desktop) */
.nav{background:var(--panel);border:2px solid #000;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.nav ul{list-style:none;margin:0;padding:8px}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid #000;border-radius:12px;background:rgba(255,255,255,.02);text-decoration:none;margin:6px 0}
.nav a:hover{background:rgba(255,255,255,.06)}
.note{font-size:12px;color:var(--muted);padding:8px 10px;border-top:2px dashed #000}

/* Panels */
.main{display:grid;gap:var(--gap)}
.panel{background:var(--panel);border:2px solid #000;border-radius:var(--radius);box-shadow:var(--shadow)}
.panel .hd{padding:10px 12px;border-bottom:2px solid #000;background:var(--panel-2);display:flex;align-items:center;justify-content:space-between}
.panel .bd{padding:var(--pad)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:5px 9px;border:2px solid #000;border-radius:999px;background:var(--sprout);color:#0c110e}
.chip.alt{background:var(--blush)} .chip.mint{background:var(--mint)}

/* Gallery */
.grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px}
.card{background:#242b27;border:2px solid #000;border-radius:16px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateZ(18px) rotateX(3deg) rotateY(-4deg);box-shadow:0 8px 0 #000, 0 36px 56px rgba(0,0,0,.45)}
@media (hover:none){ .card:hover{transform:none;box-shadow:none} }
.card.open-art{cursor:zoom-in; outline:none}
.card.open-art:focus{outline:3px solid #9fd3c7; outline-offset:2px}
.card .img{position:relative;aspect-ratio:1/1;background:#1b201e;border-bottom:2px solid #000;display:grid;place-items:center;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.card .info{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;font-size:14px}

/* Right column */
.aside{display:grid;gap:var(--gap)}
.artist{display:grid;grid-template-columns:90px 1fr;gap:10px}
.avatar{width:90px;height:90px;border-radius:16px;border:2px solid #000;background:linear-gradient(180deg,#4a554f,#313932);display:grid;place-items:center;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.field{width:100%;margin:6px 0 8px;padding:12px;border:2px solid #000;border-radius:10px;background:#1a1f1c;color:var(--ink);font-size:16px}
.field:focus{outline:3px solid var(--mint)}
footer{max-width:1400px;margin:12px auto 18px;padding:8px;color:var(--muted);text-align:center;position:relative;z-index:2}

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; place-items:center; z-index:1000; padding:10px; }
.lightbox.open{ display:grid; }
.lightbox figure{ width:min(92vw,var(--lb-maxw)); max-height:var(--lb-maxh); margin:0; }
.lightbox img{ width:100%; height:auto; max-height:var(--lb-imgh); object-fit:contain; border:2px solid #000; border-radius:16px; box-shadow:0 18px 38px rgba(0,0,0,.6); }
.lightbox .meta{ margin-top:6px; color:#eef5ef; text-align:center; font-size:13px }
.lightbox .hint{ margin-top:4px; color:#b8c6bd; font-size:12px; }
.lightbox .lb-btn{ position:absolute; border:2px solid #000; border-radius:12px; font-weight:800; padding:10px 14px; cursor:pointer; background:#f6caca; }
.lightbox .lb-close{ top:12px; right:12px; }
.lightbox .lb-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; background:#9fd3c7; }
.lightbox .lb-prev{ left:10px; } .lightbox .lb-next{ right:10px; }

/* ===== Trim + non-stretch ===== */
.trim-rest .main{ gap:10px }
.trim-rest .panel:not(#about) .hd{ padding:8px 10px }
.trim-rest .panel:not(#about) .bd{ padding:10px }
.trim-rest .panel:not(#about) .tagline{ font-size:12px; opacity:.85 }
.trim-rest .grid{ gap:8px }
.trim-rest .card .info{ padding:8px 10px; font-size:13px; line-height:1.2 }
.trim-rest #welcome p{ margin:0 0 6px; line-height:1.35 }
.trim-rest #welcome .chips .chip{ font-size:11px; padding:4px 7px }
.trim-rest #blog .post summary{ padding:6px 0; font-size:14px }
.trim-rest #blog .chip{ font-size:11px; padding:3px 6px }
.trim-rest footer{ margin:8px auto 12px }
.trim-rest .logo-badge{ height:auto } /* height controlled above */
.wrap{ align-items:start; }
.nav, .aside{ align-self:start; }

/* ========= MOBILE POLISH ========= */
@media (max-width:760px){
  .wrap{grid-template-columns:1fr}
  .logo-strip{padding:10px 12px}
  .nav{border-radius:14px}
  .nav ul{display:flex;gap:8px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:0 0 auto}
  .nav a{margin:0; padding:10px 12px; white-space:nowrap; font-size:14px}
  .note{display:none}

  .artist{grid-template-columns:72px 1fr;gap:10px}
  .avatar{width:72px;height:72px;border-radius:14px}

  .panel .hd{padding:8px 10px}
  .panel .bd{padding:10px}

  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .card .info{font-size:13px;padding:8px 10px}

  .lightbox .lb-nav{width:56px;height:56px}
}
@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  .card{border-radius:14px}
  .avatar{width:64px;height:64px}
  .panel{border-radius:16px}
}

/* Sticky bottom mobile CTA */
.mobile-cta{
  position:fixed;left:8px;right:8px;bottom:8px;
  display:none;gap:8px;z-index:999;
}
.mobile-cta a{
  flex:1;text-align:center;text-decoration:none;font-weight:800;
  padding:12px 14px;border:2px solid #000;border-radius:14px;
  background:#9fd3c7;color:#0c110e;box-shadow:var(--shadow)
}
.mobile-cta a.cta-alt{background:#f6caca}
@media (max-width:760px){
  .mobile-cta{display:flex; padding-bottom:calc(var(--safe));}
  footer{padding-bottom:calc(8px + 56px)}
}