/* ————————————————————————————————————————————
   dezzo design — style
   paper / ink / hairline. photographs carry all colour.
———————————————————————————————————————————— */
:root{
  --paper:#FAFAF7;
  --ink:#161613;
  --grey:#87837B;
  --hair:#E4E2DB;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px;
}

:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ——— header ——— */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:10;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:20px var(--pad);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);
}
.wordmark{
  font-family:var(--display);
  font-weight:300;font-size:17px;letter-spacing:.04em;
}
.wordmark span{color:var(--grey)}
.site-nav{display:flex;gap:clamp(16px,3vw,40px)}
.site-nav a{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
.site-nav a:hover,.site-nav a.is-active{color:var(--ink);border-color:var(--ink)}

/* ——— hero ——— */
.hero{
  min-height:66vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) 7vh;
}
.hero-title{
  font-family:var(--display);
  font-weight:200;
  font-stretch:112%;
  font-size:clamp(30px,4.6vw,64px);
  line-height:1.04;
  letter-spacing:.005em;
  text-transform:lowercase;
  color:var(--ink);
}
.hero-line{
  max-width:420px;color:var(--grey);margin-top:22px;
  font-size:15px;
}

/* the signature: a horizon line that draws itself */
.horizon{
  height:1px;background:var(--ink);margin-top:6vh;
  transform-origin:left;transform:scaleX(0);
  animation:draw 1.4s var(--ease) .3s forwards;
}
.horizon-static{animation:none;transform:none}
@keyframes draw{to{transform:scaleX(1)}}

/* ——— filter ——— */
.index{padding:0 var(--pad) 10vh}
.filter{
  display:flex;flex-wrap:wrap;gap:clamp(14px,2.5vw,34px);
  padding:22px 0;border-bottom:1px solid var(--hair);
  position:sticky;top:57px;background:var(--paper);z-index:5;
}
.filter-btn{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);transition:color .3s;
}
.filter-btn sup{font-size:9px;letter-spacing:0;margin-left:3px}
.filter-btn:hover{color:var(--ink)}
.filter-btn.is-active{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}

/* ——— grid ——— */
.grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--pad);row-gap:9vh;
  padding-top:8vh;
}
.card{display:block}
.card:nth-child(4n+2),.card:nth-child(4n+3){transform:translateY(5vh)}
.card-img{
  aspect-ratio:4/3;overflow:hidden;background:var(--hair);
}
.card-img img{
  height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.card:hover .card-img img{transform:scale(1.03)}
.card-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding-top:14px;
}
.card-title{font-family:var(--display);font-weight:300;font-size:17px;letter-spacing:.01em}
.card-loc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);text-align:right}
.card.reveal{opacity:0;transform:translateY(24px)}
.card.reveal.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.card:nth-child(4n+2).reveal.in,.card:nth-child(4n+3).reveal.in{transform:translateY(5vh)}

/* ——— studio ——— */
.studio{
  padding:14vh var(--pad);border-top:1px solid var(--hair);
}
.studio-text{
  font-family:var(--display);font-weight:200;
  font-size:clamp(22px,3.2vw,40px);line-height:1.35;
  max-width:22em;letter-spacing:.002em;
}
.studio-cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--pad);margin-top:10vh;
}
.studio-cols p:not(.eyebrow){font-size:14px;color:var(--ink);max-width:26em}

/* ——— project view ——— */
.project{padding-top:57px}
.project-head{padding:9vh var(--pad) 5vh}
.project-title{
  font-family:var(--display);font-weight:100;font-stretch:112%;
  font-size:clamp(40px,7.5vw,110px);line-height:1;letter-spacing:-.01em;
}
.project-facts{
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);
  margin-top:5vh;padding-top:22px;border-top:1px solid var(--hair);
}
.fact .eyebrow{margin-bottom:4px}
.fact p:not(.eyebrow){font-size:14px}
.project-blurb{
  padding:0 var(--pad) 8vh;
  font-family:var(--display);font-weight:200;
  font-size:clamp(19px,2.4vw,28px);line-height:1.45;max-width:26em;
}
.plates{display:flex;flex-direction:column;gap:8vh;padding:0 var(--pad)}
.plate img{aspect-ratio:4/3;object-fit:cover;background:var(--hair)}
.plate figcaption{
  display:flex;justify-content:space-between;padding-top:10px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.plate.reveal{opacity:0;transform:translateY(24px)}
.plate.reveal.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
/* alternate plate widths — a paced sequence, not a dump */
.plate:nth-child(3n+2){width:72%;align-self:flex-end}
.plate:nth-child(3n){width:58%}

.project-next{
  margin-top:14vh;border-top:1px solid var(--hair);
  padding:9vh var(--pad) 12vh;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
}
.project-next a{display:block}
.project-next .eyebrow{margin-bottom:6px}
.next-title{
  font-family:var(--display);font-weight:100;font-stretch:112%;
  font-size:clamp(28px,5vw,64px);line-height:1.05;
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.project-next a:hover .next-title{border-color:var(--ink)}
.back-link{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.back-link:hover{color:var(--ink)}

/* ——— footer ——— */
.site-footer{padding:0 var(--pad) 7vh}
.footer-cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--pad);padding-top:6vh;
}
.footer-cols p:not(.eyebrow){font-size:14px}
.footer-cols a:hover{border-bottom:1px solid var(--ink)}
.footer-mark{text-align:right;color:var(--grey)}

/* ——— responsive ——— */
@media (max-width:760px){
  .grid{grid-template-columns:1fr;row-gap:7vh}
  .card:nth-child(4n+2),.card:nth-child(4n+3){transform:none}
  .card:nth-child(4n+2).reveal.in,.card:nth-child(4n+3).reveal.in{transform:none}
  .studio-cols,.footer-cols{grid-template-columns:1fr;gap:32px}
  .footer-mark{text-align:left}
  .plate:nth-child(3n+2),.plate:nth-child(3n){width:100%;align-self:auto}
  .filter{top:53px}
  .project-next{flex-direction:column;gap:40px}
}

/* ——— motion respect ——— */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .horizon{transform:none}
  .card.reveal,.plate.reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}