/* ===== Header / Navigation / Drawer ===== */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:10; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); backdrop-filter:saturate(130%) blur(var(--blur)); -webkit-backdrop-filter:saturate(130%) blur(var(--blur)); }
.header-inner{ height:64px; display:flex; align-items:center; gap:1rem; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.brand{ font-weight:800; letter-spacing:.12em; text-decoration:none; color:white; font-size:1.1rem; }
.hamburger{ display:inline-grid; place-items:center; gap:5px; width:42px; height:42px; cursor:pointer }
.hamburger span{ display:block; width:20px; height:2px; background:#fff; border-radius:1px }
.nav-toggle{ display:none }
.nav{ margin-left:auto }
.nav ul{ display:flex; gap:1rem; list-style:none; margin:0; padding:0 }
.nav a{ color:var(--muted); text-decoration:none }
@media (max-width:880px){ .nav ul{display:none} .nav-toggle:checked + .nav ul{ display:flex; position:absolute; right:12px; top:60px; flex-direction:column; gap:.5rem; background:var(--glass-bg); backdrop-filter:blur(var(--blur)); border:1px solid rgba(255,255,255,.08); padding:.6rem .8rem; border-radius:.6rem; } }

/* Drawer */
.menu-overlay{ position:fixed; inset:0; z-index:40; background:black; backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.menu-drawer{ position:fixed; inset:0 auto 0 0; z-index:41; width:min(320px,85vw); background:black; border-right:1px solid rgba(255,255,255,.08); transform: translateX(-100%); transition: transform .28s ease; display:grid; grid-template-rows:auto 1fr; box-shadow:0 20px 40px rgba(0,0,0,.45); }
.drawer-head{ height:64px; display:flex; align-items:center; gap:.5rem; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.08); background-color: black; backdrop-filter:saturate(130%) blur(8px); }
.drawer-title{ font-weight:800; letter-spacing:.12em }
.drawer-close{ margin-left:auto; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:.4rem; color:#263142; }
.drawer-close:hover{ background:rgba(255,255,255,.06) }
.drawer-nav{ list-style:none; margin:0; padding:8px 0; background-color: black; }
.drawer-nav li{ border-bottom:1px solid rgba(255,255,255,.08) }
.drawer-nav a{ display:block; padding:14px 18px; text-decoration:none; color:#e9eef5; }
.drawer-nav a:hover{ background:rgba(255,255,255,.06) }
#nav-toggle:checked ~ .menu-overlay{ opacity:1; pointer-events:auto }
#nav-toggle:checked ~ .menu-drawer{ transform: translateX(0) }
@media (max-width:880px){ .nav-toggle:checked ~ .nav ul{ display: none !important } }

/* Utilities */
label, button, input[type="checkbox"], input[type="radio"], select { cursor: pointer; }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea { cursor: text; }

/* Grid helpers */
.works__grid{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items:start; }
.work{ display:grid; gap:8px; align-content:left; }
.work a{ color: inherit; text-decoration: none; }
.work__title{ font-size:14px; font-weight:800; letter-spacing:.02em; margin:0 }
.work__meta{ display:flex; flex-wrap:wrap; gap:10px 14px; font-size:12px; color:var(--muted) }
.work__thumb{ position:relative; display:block; overflow:hidden; border-radius:10px; background:#111 }
.work__thumb img, .work__thumb video{ width:100%; height:auto; display:block; transform:scale(1.0001); transition:transform .45s ease, opacity .45s ease; object-fit:cover; border-radius:10px }
.work__thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0)); opacity:0; transition:opacity .45s ease }
.work__thumb:hover img, .work__thumb:hover video{ transform:scale(1.02) }
.work__thumb:hover::after{ opacity:.25 }
.col-3{ grid-column: span 3 }
.col-4{ grid-column: span 4 }
.col-5{ grid-column: span 5 }
.col-6{ grid-column: span 6 }
@media (max-width:1024px){ .works__grid{ grid-template-columns: repeat(8, 1fr) } .work{ grid-column: span 4 } }
@media (max-width:640px){ .works__grid{ grid-template-columns: repeat(4, 1fr); gap:16px } .work{ grid-column: span 4 } .work__title{ font-size:13px } .work__meta{ font-size:11px } }