:root{
--spruce:#0c2a24; --driftwood:#b2a89f; --foam:#e8f0ef; --charcoal:#0f1211; --fog:#e9efee; --sand:#c7bdb2;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--charcoal); color:var(--fog); line-height:1.6}


/* Header */
.site-header{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; background:linear-gradient(180deg, rgba(12,42,36,.9), rgba(12,42,36,.65)); backdrop-filter:saturate(120%) blur(4px)}
.brand{font-weight:700; letter-spacing:.3px}
.nav a{color:var(--fog); text-decoration:none; margin-left:1rem}
.nav a:hover{text-decoration:underline}


/* Footer */
.site-footer{padding:1rem; color:var(--sand); font-size:.9rem; text-align:center}


/* Index hero overlay */
.stage-wrap{position:relative; width:100vw; height:100vh; overflow:hidden; background:#000}
.stage{position:relative; width:100vw; height:100vh; background:#000; display:flex; align-items:center; justify-content:center}
#hero{max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block}
.stage svg{position:absolute; inset:0; width:100%; height:100%}


/* Hotspots: invisible until hover */
.hotspot circle{fill:transparent; stroke:transparent; transition:all .25s ease; cursor:pointer}
.hotspot:hover circle{fill:rgba(178,168,159,.22); stroke:var(--fog); stroke-width:2.5; filter:drop-shadow(0 0 6px rgba(232,240,239,.8))}


/* Subpages */
main{max-width:1100px; margin:2rem auto; padding:0 1rem}
.page-hero{display:block; margin:0 auto; width:100%; height:calc(100vh - 120px); object-fit:contain; background:#000; border-radius:12px; box-shadow:0 10px 36px rgba(0,0,0,.35)}


/* Gallery */
.gallery-grid{max-width:1200px; margin:0 auto 2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.gallery-grid img{width:100%; height:auto; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.3)}
.gallery-grid img.thumb{aspect-ratio:3/4; object-fit:cover}


/* Lightbox */
dialog#lightbox{border:0; padding:0; background:transparent}
dialog#lightbox::backdrop{background:rgba(0,0,0,.85)}
.lightbox-frame{position:relative; max-width:92vw; max-height:90vh}
.lightbox-frame img{width:100%; height:100%; object-fit:contain; display:block}
.lightbox-close, .lightbox-prev, .lightbox-next{position: fixed; z-index: 3; background: rgba(12,42,36,.9); color:var(--fog); border:0; padding:.55rem .8rem; border-radius:10px; cursor:pointer; font:inherit}
.lightbox-close{top:12px; right:12px}
.lightbox-prev{left:12px; top:50%; transform:translateY(-50%)}
.lightbox-next{right:12px; top:50%; transform:translateY(-50%)}
.lightbox-caption{position: fixed; left:50%; bottom:16px; transform:translateX(-50%); color:#e8f0ef; background:rgba(12,42,36,.6); padding:.4rem .7rem; border-radius:8px; font-size:.95rem; max-width: 90vw; text-align:center}


/* --- Image protection + watermark (site-wide) --- */
img{
-webkit-user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
position:relative;
}
img::after{
content:"© Wave & Cedar · emdrops.art";
position:absolute; bottom:8px; right:8px;
font-size:0.7rem; color:rgba(255,255,255,.85);
background:rgba(0,0,0,.45); padding:2px 6px; border-radius:4px;
pointer-events:none;
}