:root{
  --bg: #0b0b0c;
  --fg: #e8e8ea;
  --muted: #a3a3a6;
  --accent: #8fd3ff; /* tweak to taste */
  --maxw: 60rem;
  --space: clamp(1rem, 2vw, 2rem);
  --copy: clamp(1rem, 1.3vw + 0.8rem, 1.125rem);
  --h1: clamp(1.2rem, 1.5vw + 1rem, 1.6rem);
  --h2: clamp(1.6rem, 2.5vw + 1rem, 3rem);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#18181a; --muted:#6b7280; }
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font: 400 var(--copy)/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a{ color:var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ display:block; max-width:100%; height:auto; }

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{ left:var(--space); top:var(--space); width:auto; height:auto; padding:.5rem .75rem; background:#111; color:#fff; border-radius:.5rem }

.site-header, .site-footer{
  position:fixed; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
  padding: .75rem var(--space);
  z-index:10;
  pointer-events:none;
}
.site-header{ top:0; background:linear-gradient(to bottom, rgba(0,0,0,.4), transparent); }
.site-footer{ bottom:0; background:linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.site-header *, .site-footer *{ pointer-events:auto }

.logo a{ color:var(--fg); font-weight:600; font-size:var(--h1); }
.site-nav a{ margin-left:1rem; color:var(--fg); opacity:.9 }
.site-nav a:hover{ opacity:1 }

.snap{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type: y mandatory;
}
.project{
  position:relative;
  min-height:100vh;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns: 1fr;
}
.project-media{
  position:absolute; inset:0;
}
.project-media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.02);
}
.project::after{
  /* subtle gradient for text legibility */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 40%, rgba(0,0,0,.55));
  mix-blend-mode: normal;
}

.project-copy{
  position:relative; z-index:1;
  align-self:end;
  padding: calc(var(--space) * 3) var(--space);
  max-width: var(--maxw);
}
.project h2{
  font-size:var(--h2); margin:0 0 .25em;
}
.project p{ margin:.25em 0 1em }
.meta{
  margin:0 0 1em; padding:0; list-style:none; color:var(--muted);
  display:flex; gap:1rem; flex-wrap:wrap;
}
.links a{
  display:inline-block; padding:.6rem .9rem; margin-right:.5rem;
  border:1px solid rgba(255,255,255,.35);
  border-radius:.75rem;
  backdrop-filter: blur(4px);
}
.links a:hover{ border-color:var(--accent); }

.about{
  min-height:100vh; display:grid; place-items:center; background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.06), transparent 60%);
}
.about-inner{ max-width:var(--maxw); padding: var(--space); }
.about h2{ font-size:var(--h2); margin-bottom:.4em }

@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto }
  .snap{ scroll-snap-type:none }
}

@media (max-width: 640px){
  .site-nav a{ margin-left:.75rem }
  .project-copy{ padding: calc(var(--space) * 2) var(--space) }
}