:root{
  --bg:#0b0f14; --fg:#e8eef5; --muted:#9aa4b2; --card:#121926; --line:#1f2937;
  --accent: #B22222; /* burgundy dark */
  --radius:16px;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-6:3rem; --space-8:4rem;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --card:#ffffff; --line:#e2e8f0; --accent:#b91c1c; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height:1.55}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:0 var(--space-2)}
.nav{position:sticky; top:0; backdrop-filter:saturate(140%) blur(6px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--line); z-index:1000}
.nav-inner{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0}
.brand{font-weight:700; letter-spacing:.2px}
.nav-links{margin-left:auto; display:flex; gap:var(--space-2)}
.nav-links a{padding:.4rem .8rem; border-radius:999px}
.nav-links a:focus-visible, .nav-links a:hover{background:color-mix(in oklab, var(--accent) 12%, transparent); outline:none}
.hero{padding:var(--space-8) 0 var(--space-6);}
.hero h1{font-size:clamp(2rem, 3.5vw + 1rem, 3.25rem); margin:0 0 var(--space-2)}
.hero p{color:var(--muted); font-size:1.125rem; max-width:60ch; margin:0 0 var(--space-3)}
.cta{display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:var(--bg); padding:.8rem 1rem; border-radius:12px; font-weight:600}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:calc(var(--space-2)*1.25)}
.card{grid-column:span 12; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.25); border-color: var(--line)}
.card img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; pointer-events:none}
.card .pad{padding:calc(var(--space-2)*1.25)}
.card h3{margin:.2rem 0 .25rem; font-size:.9rem}
.card p{color:var(--muted); margin:0; font-size:.9rem}
@media (min-width: 720px){ .card{grid-column:span 6} }
@media (min-width: 1024px){ .card{grid-column:span 4} }
.section{padding:var(--space-6) 0}
.section h2{font-size:1.5rem; margin:0 0 var(--space-3)}
.about p{max-width:75ch}
.filters{margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap}
.filters .filter-btn{border:1px solid var(--line); background:var(--card); color:var(--fg); padding:.5rem .8rem; border-radius:999px; cursor:pointer}
.filters .filter-btn.active{background:var(--accent); color:var(--bg); border-color:transparent}
.footer{padding:var(--space-4) 0; color:var(--muted); border-top:1px solid var(--line); margin-top:var(--space-6)}
.visually-hidden{position:absolute!important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap; border:0; padding:0}
/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem}
.lightbox.open{display:flex; cursor:zoom-out}
.lightbox img{max-width:98vw; max-height:98vh; border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.5)}
.lightbox button{
  position:absolute; 
  background:rgba(255,255,255,.18); 
  color:#fff; 
  border:1px solid rgba(255,255,255,.35); 
  border-radius:14px; 
  padding:.6rem .8rem; 
  cursor:pointer; 
  backdrop-filter:blur(6px);
  z-index:2;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .15s ease, background .15s ease, border-color .15s ease
}
.lightbox .close{top:16px; right:20px; font-size:30px; line-height:1; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center}
.lightbox .prev{left:16px; top:50%; transform:translateY(-50%); font-size:36px; line-height:1; min-width:48px; min-height:56px; display:flex; align-items:center; justify-content:center}
.lightbox .next{right:16px; top:50%; transform:translateY(-50%); font-size:36px; line-height:1; min-width:48px; min-height:56px; display:flex; align-items:center; justify-content:center}
/* Whole-card overlay link */
.stretched-link{position:absolute; inset:0; z-index:20; display:block; pointer-events:auto; text-indent:-9999px}
/* Inline gallery cycle */
.gallery-cycle{position:relative}
.gallery-frame{aspect-ratio: 16/9; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:color-mix(in oklab, var(--card) 85%, transparent); margin-bottom:1rem}
.gallery-frame img{width:100%; height:100%; object-fit:contain; display:block}
.gallery-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); color:var(--fg); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:.3rem .6rem; cursor:pointer}
.gallery-nav.prev{left:8px}
.gallery-nav.next{right:8px}

/* Enable clicking images on project pages */
main .card img{pointer-events:auto}

.lightbox .fs{top:16px; right:74px; font-size:24px; line-height:1; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center}

.lightbox button:hover,
.lightbox button:focus-visible{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.55);
}
.lightbox button:focus-visible{outline:3px solid rgba(255,255,255,.6); outline-offset:2px}

@media (pointer: coarse){
  .lightbox .prev, .lightbox .next{min-width:56px; min-height:64px; font-size:40px}
  .lightbox .close{min-width:48px; min-height:48px; font-size:32px}
  .lightbox .fs{min-width:48px; min-height:48px; font-size:26px}
}