:root{
  --bg:#f5f5f4; --ink:#1c1c1c; --muted:#6b6b6b; --accent:#f3b705; --accent-deep:#c98f00; --card:#ffffff; --line:rgba(120,120,120,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#151515; --ink:#f2f2f2; --muted:#a3a3a3; --card:#1f1f1f; --line:rgba(255,255,255,0.12); }
}
:root[data-theme="dark"]{ --bg:#151515; --ink:#f2f2f2; --muted:#a3a3a3; --card:#1f1f1f; --line:rgba(255,255,255,0.12); }
*{box-sizing:border-box}
html{scroll-padding-top:calc(70px + env(safe-area-inset-top,0px));}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',Arial,sans-serif;font-weight:300;}
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:0.9rem 1.2rem;font-family:'Manrope',Arial,sans-serif;}
.logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:0.05em;text-decoration:none;color:var(--ink);}
nav{display:flex;gap:1.4rem;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);position:relative;font-weight:500;}
nav>div,nav>a{cursor:pointer;color:var(--muted);text-decoration:none;}
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:0.6rem 0;min-width:220px;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-transform:none;letter-spacing:0;}
.work-item:hover .dropdown, .dropdown:hover{display:block;}
.dropdown a{display:block;padding:0.45rem 1rem;color:var(--ink);text-decoration:none;font-size:0.85rem;font-weight:500;}
.dropdown a:hover{color:var(--accent);}
.dropdown .grp-label{padding:0.5rem 1rem 0.2rem;font-size:0.7rem;color:var(--muted);text-transform:uppercase;}
main{max-width:920px;margin:0 auto;padding:0 1.2rem 3rem;}
section{padding-top:2.2rem;display:none;}
section.active{display:block;}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:1.3rem;margin:2rem 0 0.3rem;border:none;padding:0;letter-spacing:0;text-transform:none;color:var(--ink);}
.page-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:2.1rem;text-transform:uppercase;letter-spacing:0.04em;margin-top:1.5rem;}
.page-title-long{font-size:1.5rem;}
p{font-family:'Manrope',Arial,sans-serif;font-weight:300;line-height:1.6;color:var(--muted);margin-top:0.3rem;}
p.placeholder{font-size:0.85rem;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-top:0.8rem;}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-family:'Manrope',Arial,sans-serif;font-weight:500;color:var(--muted);font-size:0.82rem;text-align:center;padding:0.5rem;text-decoration:none;transition:transform 0.3s ease, box-shadow 0.3s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.photo{width:100%;max-width:260px;aspect-ratio:3/4;background:var(--card);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-size:0.8rem;margin:1rem 0;}
form{display:flex;flex-direction:column;gap:0.8rem;font-family:'Manrope',Arial,sans-serif;margin-top:1rem;max-width:420px;}
input,textarea{padding:0.7rem;border-radius:4px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;}
button.submit{background:var(--accent);color:#1c1c1c;border:none;padding:0.8rem;border-radius:20px;font-family:'Manrope',Arial,sans-serif;font-weight:700;cursor:pointer;}
.socials{display:flex;gap:0.9rem;margin-top:1rem;}
.socials a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;transition:border-color 0.2s ease, color 0.2s ease;}
.socials a:hover{border-color:var(--accent);color:var(--accent);}
.socials a svg{width:1.05rem;height:1.05rem;}
.contact-row{display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-start;}
.wall{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(140px,auto));grid-template-areas:"f1 center f2" "f3 center f4" "f5 f6 f7";gap:0.8rem;margin-top:1rem;}
.wall .frame{background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-size:0.7rem;text-align:center;padding:0.4rem;}
.wall .frame:nth-child(odd){transform:rotate(-2.5deg);}
.wall .frame:nth-child(even){transform:rotate(2deg);}
.wall .f1{grid-area:f1;} .wall .f2{grid-area:f2;} .wall .f3{grid-area:f3;} .wall .f4{grid-area:f4;} .wall .f5{grid-area:f5;} .wall .f6{grid-area:f6;} .wall .f7{grid-area:f7;}
.wall .center{grid-area:center;transform:none;box-shadow:none;border:none;background:transparent;flex-direction:column;gap:0.5rem;padding:0.3rem;}
.wall .center .photo{width:100%;max-width:none;margin:0;aspect-ratio:3/4;min-height:0;}
.wall .center p{font-size:0.8rem;margin:0;}
.scroll-fade{position:fixed;left:0;right:0;bottom:0;height:140px;background:linear-gradient(to bottom, transparent, var(--bg) 45%, var(--bg) 100%);pointer-events:none;opacity:1;transition:opacity 0.3s;z-index:4;}
.scroll-fade.hide{opacity:0;}
.back-btn{background:none;border:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:0.8rem;cursor:pointer;padding:0;margin-bottom:1.2rem;text-decoration:none;display:inline-block;}
.project-hero{min-height:60vh;display:flex;flex-direction:column;justify-content:center;}
.project-visual{position:sticky;top:90px;background:var(--card);border:1px solid var(--line);border-radius:8px;height:55vh;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Manrope',Arial,sans-serif;margin-bottom:2rem;}
.project-block{position:relative;background:var(--bg);max-width:560px;padding:2.5rem 0;}
.reveal{opacity:0;transform:translateY(35px);transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;}
.category-card{cursor:pointer;text-decoration:none;display:block;}
.category-card-img{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:6px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-size:0.8rem;transition:transform 0.3s ease, box-shadow 0.3s ease;}
.category-card:hover .category-card-img{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.lock-badge{position:absolute;top:8px;right:8px;width:1.9rem;height:1.9rem;border-radius:50%;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2;}
.lock-badge svg{width:0.85rem;height:0.85rem;}
.card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);opacity:0;transition:opacity 0.3s ease, background 0.3s ease;}
.category-card:hover .card-overlay{opacity:1;background:rgba(0,0,0,0.45);}
.card-overlay-title{color:#fff;font-family:'Manrope',sans-serif;font-weight:600;font-size:0.8rem;text-align:center;padding:0 0.6rem;text-transform:uppercase;letter-spacing:0.05em;}
.work-subnav{position:sticky;z-index:10;background:var(--bg);display:flex;gap:1.3rem;padding:0.7rem 0;border-bottom:1px solid var(--line);font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;overflow-x:auto;white-space:nowrap;margin-bottom:0.5rem;}
.work-subnav span{cursor:pointer;color:var(--muted);padding-bottom:0.3rem;border-bottom:2px solid transparent;}
.work-subnav span.active{color:var(--ink);border-bottom-color:var(--accent);}
.note-banner{background:var(--card);border:1px dashed var(--line);border-radius:6px;padding:0.8rem 1rem;font-family:'Manrope',Arial,sans-serif;font-size:0.78rem;color:var(--muted);margin:1rem 0 0;}
@media(max-width:560px){
  .wall{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:"center center" "f1 f2" "f3 f4" "f5 f6" "f7 f7";}
  .wall .frame{aspect-ratio:1;transform:none !important;}
}
footer{text-align:center;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-size:0.75rem;padding:2rem;}