:root{
  /* Tweak to exact palette later */
  --ink: #fff;
  --bg: #000;
  --accent: #f04b3e;
  --overlay-from: rgba(0,0,0,.42);
  --overlay-to:   rgba(0,0,0,.62);

  --pane-max-w: 980px;
  --side-pad: 16px;
  --footer-h: 44px;
  --media-max-h: min(64vh, 720px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
img{max-width:100%;display:block}

h1,h2{font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body,button,p,li{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
h1,h2{letter-spacing:.02em}

.stage{position:relative;min-height:100vh;background:var(--bg);color:var(--ink);overflow:hidden}

/* Background slides */
.slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0; transition:opacity .6s ease;
}
.slide.active{opacity:1}
.dark-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--overlay-from),var(--overlay-to));
  pointer-events:none;
}

/* Top bar (centered, understated) */
.topbar{
  position:fixed; top:8px; left:0; right:0; z-index:30;
  text-align:center; color:var(--ink);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  pointer-events:none; /* let arrows/media receive clicks */
}
.topbar-inner{display:inline-grid; gap:.2rem; justify-items:center; max-width:100%; padding:0 12px}
.brandmark{display:flex; align-items:center; gap:.5rem}
.logo{height:80px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.wordmark{font-weight:900; letter-spacing:.08em; font-size: 2.1rem;}
.strap{margin:.15rem 0 0; font-weight:800; font-size:.98rem; opacity:.95}
.about{margin:.1rem 0 0; font-size:.95rem; opacity:.88}

/* Project pane: aligned, scrollable, never overlaps footer */
.project-pane{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:clamp(120px, 22vh, 240px);
  bottom:calc(var(--footer-h) + 16px + env(safe-area-inset-bottom));
  width:min(var(--pane-max-w), calc(100% - 2*var(--side-pad)));
  overflow:auto;
  padding:0 2px 16px;
  scrollbar-width:none; /* Firefox hide native */
}
.project-pane::-webkit-scrollbar{display:none} /* WebKit hide native */

/* Custom vertical progress bar */
.scroll-indicator{
  position:sticky; top:8px; right:0; float:right;
  width:4px; height:calc(100% - 8px); margin-left:8px;
  background:rgba(255,255,255,.16); border-radius:99px;
}
.scroll-indicator .fill{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg,#fff,var(--accent));
  border-radius:99px;
}

/* Content alignment */
.p-title{margin:0 0 .25rem; font-size:clamp(1.4rem,1.1rem + 1.6vw,2.2rem)}
.p-summary{margin:.2rem 0 1rem; max-width:75ch; opacity:.96}
.p-meta{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.p-meta li{background:rgba(255,255,255,.16); padding:.34rem .6rem; border-radius:999px; font-size:.9rem}

/* One media per row, consistent canvas for mixed ratios */
.p-media{display:grid; gap:16px}
.media{}
.media .box{
  background:#000; border-radius:10px; overflow:hidden;
  width:100%; max-height:var(--media-max-h);
  display:flex; align-items:center; justify-content:center;
}
.media img{width:100%; height:100%; object-fit:contain; background:#000}
.media .video-frame{position:relative; width:100%; aspect-ratio:16/9; max-height:var(--media-max-h)}
.media .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
.caption{margin:.45rem .25rem 0; font-size:.92rem; opacity:.75}
.caption.placeholder{font-style:italic}

.media { margin: 0; }          /* our <figure class="media"> */
.p-media { margin: 0; }

/* Arrows only (no dots) */
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:28px; line-height:1;
  z-index:25;
}
.nav-arrow:hover{background:rgba(0,0,0,.78)}
.prev{left:10px} .next{right:10px}

/* Footer pinned and clear */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:var(--footer-h);
  display:grid; place-items:center; padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.35) 60%);
  color:#f2f2f2; text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.site-footer a{color:#fff}

/* Mobile tweaks */
@media (max-width:640px){
  .logo{height:24px}
  .wordmark{font-size:.95rem}
  .strap{font-size:.92rem}
  .about{font-size:.9rem; max-width:72ch}
  .prev{left:6px} .next{right:6px}
  :root{ --media-max-h: min(62vh, 520px); }
}