:root{
  --bg:#f7f7f6;
  --ink:#1a1a1a;
  --muted:#8c8c8c;
  --rule:#dcdcda;
  --ph:#e6e6e4;
  --pad:clamp(1rem,2.4vw,2.5rem);
  --gap:4px;
  --maxw:1680px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;width:100%;height:100%;object-fit:cover;background:var(--ph)}
ul{list-style:none;margin:0;padding:0}

/* ---------- top bar (4 columns like the reference) ---------- */
.bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);
  max-width:var(--maxw);margin:0 auto;padding:1.1rem var(--pad);
  font-size:.8125rem;line-height:1.3;
}
.bar .brand{font-weight:600}
.bar nav{display:flex;gap:1rem}
.bar nav a{color:var(--muted)}
.bar nav a:hover{color:var(--ink)}
.bar .mail{text-align:right}
.bar a:hover{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:760px){
  .bar{grid-template-columns:1fr auto}
  .bar .role{display:none}
  .bar .mail{display:none}
}

main{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- landing: hero ---------- */
.hero{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);align-items:start;
  padding:clamp(3rem,9vw,8rem) 0 clamp(2.5rem,6vw,5rem);
}
.hero h1{
  grid-column:1/3;margin:0;font-weight:500;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(3.25rem,10.5vw,9.5rem);
}
.hero .about{grid-column:3;margin:.6rem 0 0;font-size:.8125rem;line-height:1.45;color:#555;max-width:34ch}
.hero .social{grid-column:4;display:flex;justify-content:flex-end;gap:1.1rem;margin-top:.6rem;font-size:.8125rem;color:#555}
.hero .social a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:1.25rem}
  .hero h1,.hero .about,.hero .social{grid-column:1}
  .hero .social{justify-content:flex-start;margin-top:0}
}

/* ---------- landing: works header + view switch ---------- */
.works-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.25rem}
.works-head h2{margin:0;font-weight:500;letter-spacing:-.03em;font-size:clamp(1.25rem,2vw,1.75rem)}
.views{display:flex;gap:clamp(1rem,3.5vw,3.5rem)}
.views button{
  all:unset;cursor:pointer;font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.25rem,2vw,1.75rem);color:#b8b8b6;transition:color .15s;
}
.views button:hover{color:#777}
.views button[aria-pressed="true"]{color:var(--ink)}
.views button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- landing: filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0 0 1.25rem;font-size:.8125rem}
.filters button{all:unset;cursor:pointer;color:var(--muted);padding:.1rem 0;border-bottom:1px solid transparent;transition:color .15s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.filters button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- landing: GRID view ---------- */
#works{container-type:inline-size}
.works{display:grid;gap:var(--gap)}
.works li[hidden]{display:none}
.works a{display:block;position:relative}
.works .thumb{display:block;overflow:hidden;background:var(--ph)}
.works .thumb img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.works a:hover .thumb img,.works a:focus-visible .thumb img{transform:scale(1.025)}
.works .no,.works .ttl,.works .dis{display:block}

.view-grid{
  --cols:4;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.view-grid.cols-3{--cols:3}
.view-grid li{min-width:0}
.view-grid a,.view-grid .thumb{height:100%}
.view-grid .feature{grid-column:span var(--span,2)}
.view-grid.filtered .feature{grid-column:auto}
.view-grid .meta{
  position:absolute;inset:auto 0 0 0;padding:.9rem 1rem;color:#fff;font-size:.8125rem;line-height:1.3;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.view-grid .no{display:none}
.view-grid .ttl{font-weight:600}
.view-grid .dis{opacity:.85}
.view-grid a:hover .meta,.view-grid a:focus-visible .meta{opacity:1}
@media (hover:none){.view-grid .meta{opacity:1}}
@media (max-width:900px){
  .view-grid,.view-grid.cols-3{--cols:2}
  .view-grid .feature{grid-column:1/-1}
  .view-grid.filtered .feature{grid-column:auto}
}
@media (max-width:480px){
  .view-grid,.view-grid.cols-3{--cols:1}
  .view-grid .feature,.view-grid.filtered .feature{grid-column:auto}
}

/* ---------- landing: LIST view ---------- */
.view-list{gap:0;border-top:1px solid var(--rule)}
.view-list li{border-bottom:1px solid var(--rule)}
.view-list a{
  display:grid;grid-template-columns:3.5rem 1fr 1fr clamp(96px,14vw,200px);
  grid-template-areas:"no ttl dis thumb";align-items:center;gap:var(--pad);padding:.9rem 0;
}
.view-list .thumb{grid-area:thumb;aspect-ratio:4/3}
.view-list .thumb img{height:100%}
.view-list .meta{display:contents}
.view-list .no{grid-area:no;color:var(--muted);font-size:.875rem}
.view-list .ttl{grid-area:ttl;font-weight:500;letter-spacing:-.03em;font-size:clamp(1.25rem,2.6vw,2.25rem);line-height:1.1}
.view-list .dis{grid-area:dis;color:#666;font-size:.9375rem}
.view-list a:hover .ttl{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
@media (max-width:640px){
  .view-list a{grid-template-columns:2rem 1fr 88px;grid-template-areas:"no ttl thumb" "no dis thumb";row-gap:.2rem}
}

/* ---------- landing: FEED view ---------- */
.view-feed{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem);max-width:980px;margin:0 auto}
.view-feed .thumb{aspect-ratio:4/3}
.view-feed .thumb img{height:100%}
.view-feed .meta{display:flex;gap:1rem;align-items:baseline;margin-top:.7rem;font-size:.9375rem}
.view-feed .no{color:var(--muted)}
.view-feed .ttl{font-weight:600}
.view-feed .dis{margin-left:auto;color:#666}

/* ---------- project page ---------- */
.info{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad);row-gap:2rem;
  padding:clamp(3rem,8vw,7rem) 0 clamp(2rem,4vw,3.5rem);align-items:start;
}
.info .title{grid-column:1/6}
.info .back{
  display:inline-block;font-size:1.75rem;line-height:1;color:var(--muted);margin-bottom:.4rem;
  transition:transform .2s,color .2s;
}
.info .back:hover{color:var(--ink);transform:translateX(-4px)}
.info h1{margin:0;font-weight:600;letter-spacing:-.045em;line-height:.95;font-size:clamp(2.5rem,6.2vw,5.5rem)}
.facts{grid-column:6/8;margin:.4rem 0 0;font-size:.8125rem;line-height:1.4}
.facts div{margin-bottom:1.25rem}
.facts dt,.desc h2{margin:0 0 .25rem;font-size:.6875rem;font-weight:500;color:var(--muted)}
.facts dd{margin:0}
.desc{grid-column:8/13;margin-top:.4rem;font-size:.9375rem;line-height:1.45;max-width:62ch}
.desc p{margin:0 0 1.1em}
.desc p:last-child{margin-bottom:0}
@media (max-width:900px){
  .info{grid-template-columns:1fr;row-gap:1.5rem}
  .info .title,.facts,.desc{grid-column:1}
}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) var(--gap)}
.gallery figure{margin:0;position:relative}
.gallery .s4{grid-column:span 4}
.gallery .s5{grid-column:span 5}
.gallery .s6{grid-column:span 6}
.gallery .s7{grid-column:span 7}
.gallery .s12{grid-column:span 12}
.gallery img{display:block}
.gallery .s5 img{aspect-ratio:5/4}
.gallery .s7 img{aspect-ratio:7/4}
.gallery .s12 img{aspect-ratio:16/8}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr}
  .gallery .s4,.gallery .s5,.gallery .s6,.gallery .s7,.gallery .s12{grid-column:1}
  .gallery .s5 img,.gallery .s7 img,.gallery .s12 img{aspect-ratio:4/3}
  }

.next{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,5vw,4rem);padding:1.5rem 0;border-top:1px solid var(--rule);
}
.next span{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--muted);letter-spacing:-.01em}
.next strong{font-weight:500;letter-spacing:-.03em;font-size:clamp(1.125rem,2vw,1.75rem);line-height:1.1}
.next:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}

/* ---------- footer ---------- */
footer{
  max-width:var(--maxw);margin:clamp(3rem,8vw,6rem) auto 0;padding:2rem var(--pad) 2.5rem;
  border-top:1px solid var(--rule);
}
.foot-title{margin:0 0 1rem;font-weight:500;letter-spacing:-.03em;font-size:clamp(1.25rem,2vw,1.75rem)}
footer ul{display:flex;flex-wrap:wrap;gap:.35rem 2rem;margin-bottom:2rem;font-size:.9375rem}
footer ul a:hover{text-decoration:underline;text-underline-offset:.2em}
.copy{margin:0;color:var(--muted);font-size:.8125rem}

/* ---------- about ---------- */
.desc.wide{grid-column:6/13;max-width:72ch;font-size:1.0625rem;line-height:1.5}
@media (max-width:900px){.desc.wide{grid-column:1}}
.sections section{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad);row-gap:1rem;
  border-top:1px solid var(--rule);padding:1.5rem 0 2rem;
}
.sections h2{grid-column:1/5;margin:0;font-weight:500;letter-spacing:-.03em;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.1}
.sections .rows{grid-column:6/13;display:grid;gap:1.4rem;font-size:.9375rem;line-height:1.45;min-width:0}
.sections .row{display:grid;grid-template-columns:minmax(6.5rem,10rem) 1fr;gap:var(--pad)}
.sections .when{color:var(--muted);font-size:.8125rem;line-height:1.5}
.sections .what strong{font-weight:600}
.sections .sub{color:#555}
.sections .body p{margin:.55rem 0 0}
.sections .what .body p:first-child{margin-top:.55rem}
.sections .rows > .body p{margin:0}
.sections a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.skills{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-weight:500}
@media (max-width:900px){
  .sections section{grid-template-columns:1fr}
  .sections h2,.sections .rows{grid-column:1}
}
@media (max-width:520px){.sections .row{grid-template-columns:1fr;gap:.2rem}}