:root{
  --bg:#0f0f0f; --tile:#1a1a1a; --text:#f3f3f1; --muted:#7a7a7a; --line:#252525;
  --gap:8px; --bar:28px;
}
:root[data-theme="light"]{ --bg:#ffffff; --tile:#f1f1f1; --text:#111111; --muted:#9a9a9a; --line:#e8e8e8; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text)}
body{font:400 15px/1.45 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.mono{font:400 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}

/* bars */
.bar{position:fixed;left:0;right:0;z-index:20;height:var(--bar);display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center;padding:0 14px;background:var(--bg);transition:background .35s}
.bar.top{top:0}
.bar.bottom{bottom:0}
.bar > :nth-child(3){display:flex;align-items:center;gap:10px}
.bar > :last-child{justify-self:end}
.bar a:hover,.bar button:hover{opacity:.6}
#theme{display:grid;place-items:center;width:16px;height:16px}
#theme svg{width:13px;height:13px}

/* intro + filters */
.intro{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;padding:calc(var(--bar) + 60px) 14px 0}
.intro p{grid-column:3 / span 1;max-width:34ch;font-size:15px;line-height:1.35}
.intro p span{color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:0 .45em;padding:64px 8px 12px;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em}
.filters button{color:var(--muted);transition:color .2s}
.filters button:hover,.filters button[aria-pressed="true"]{color:var(--text)}
.filters sup{font-size:.5em;vertical-align:top;margin-left:2px;color:var(--muted)}

/* grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--gap) calc(var(--bar) + var(--gap))}
.tile{position:relative;overflow:hidden;background:var(--tile);aspect-ratio:808/632;cursor:none;opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.tile.in{opacity:1;transform:none}
.tile.hide{display:none}
.tile > img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s}
.tile:hover > img{transform:scale(1.03);filter:brightness(.55) blur(2px)}
.tile .label{position:absolute;left:10px;top:10px;z-index:2;padding:5px 7px;background:var(--bg);color:var(--text);opacity:0;transform:translateY(-4px);transition:.3s}
.tile:hover .label{opacity:1;transform:none}

/* hover preview: project images flicking inside a frame */
.preview{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:4/3;transform:translate(-50%,-50%) scale(.92);opacity:0;transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none;background:var(--bg);padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.preview img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover;opacity:0}
.preview img.on{opacity:1}
.tile:hover .preview.ready{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* cursor tag */
#cursor{position:fixed;left:0;top:0;z-index:30;pointer-events:none;padding:7px 10px;background:var(--text);color:var(--bg);transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap}
#cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* archive */
#archive{position:fixed;inset:var(--bar) 0 var(--bar);z-index:15;background:var(--bg);overflow:auto;padding:40px 14px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#archive.open{opacity:1;visibility:visible}
#archive ol{list-style:none;border-top:1px solid var(--line)}
#archive li a{display:grid;grid-template-columns:60px 1fr 1fr 80px;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;font-size:clamp(16px,1.4vw,20px);transition:padding .25s}
#archive li a .mono{color:var(--muted)}
#archive li a:hover{padding-left:10px}
#archive li a span:last-child{text-align:right}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;padding:120px 14px 140px}
.about .body{grid-column:3 / span 2;font-size:clamp(20px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em;max-width:24ch}
.about .body span{color:var(--muted)}
.about .links{grid-column:3 / span 2;display:flex;gap:24px;margin-top:6px}
.about .links a{border-bottom:1px solid currentColor;padding-bottom:3px}

/* project page */
.p-head{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;padding:calc(var(--bar) + 60px) 14px 48px;align-items:end}
.p-head h1{grid-column:1 / span 2;font-weight:400;font-size:clamp(40px,7vw,104px);line-height:.95;letter-spacing:-.045em}
.p-head dl{grid-column:3 / span 2;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 40px}
.p-head dt{color:var(--muted)}
.p-head dd{font-size:15px}
.p-images{display:flex;flex-direction:column;gap:var(--gap);padding:0 var(--gap)}
.p-images img{width:100%;height:auto;background:var(--tile)}
.p-images .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.p-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:var(--gap) var(--gap) calc(var(--bar) + var(--gap))}
.p-nav a{position:relative;overflow:hidden;aspect-ratio:808/400;background:var(--tile);display:block}
.p-nav a img{width:100%;height:100%;object-fit:cover;filter:brightness(.45);transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s}
.p-nav a:hover img{transform:scale(1.04);filter:brightness(.6)}
.p-nav a span{position:absolute;left:14px;bottom:14px;color:#fff}
.p-nav a b{display:block;font:400 clamp(24px,3vw,44px)/1 Inter,sans-serif;letter-spacing:-.03em;margin-top:8px;text-transform:none}

@media (max-width:820px){
  .bar{grid-template-columns:1fr auto;gap:12px}
  .bar > :nth-child(2){display:none}
  .bar > :nth-child(3){justify-self:end}
  .bar > :last-child{display:none}
  .bar.bottom{grid-template-columns:1fr 1fr}
  .bar.bottom > :nth-child(2){display:block;justify-self:end}
  .intro{grid-template-columns:1fr;padding-top:calc(var(--bar) + 40px)}
  .intro p{grid-column:1}
  .filters{padding-top:40px}
  .grid{grid-template-columns:1fr}
  .tile{cursor:pointer}
  .tile .label{opacity:1;transform:none}
  .preview,#cursor{display:none}
  .tile:hover > img{filter:none}
  .about{grid-template-columns:1fr;padding:80px 14px 100px}
  .about .body,.about .links{grid-column:1}
  #archive li a{grid-template-columns:40px 1fr}
  #archive li a span:nth-child(3),#archive li a span:last-child{display:none}
  .p-head{grid-template-columns:1fr;padding-top:calc(var(--bar) + 40px)}
  .p-head h1,.p-head dl{grid-column:1}
  .p-images .pair{grid-template-columns:1fr}
  .p-nav{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.tile{opacity:1;transform:none}}