:root{
    --ink:#20011D;          
    --ink-2:#2c0828;        
    --paper:#ffffff;
    --muted:#6b5a67;        
    --line:rgba(32,1,29,.12);
    --radius:14px;
    --maxw:1180px;
    --pad:clamp(20px,5vw,64px);
  }
.hero{padding-top:clamp(28px,5vw,60px);padding-bottom:clamp(26px,4vw,46px)}
h1{
    font-family:"Bricolage Grotesque",sans-serif;
    font-weight:800;font-optical-sizing:auto;
    font-size:clamp(4.2rem,16vw,11rem);
    line-height:.88;letter-spacing:-.025em;margin:0;
  }
.hero p.lede{
    max-width:30ch;margin:22px 0 0;font-size:clamp(1rem,1.4vw,1.18rem);
    color:var(--muted);line-height:1.45;
  }
.work{padding-block:clamp(28px,5vw,52px)}
.work-grid{
    display:grid;gap:clamp(14px,1.8vw,22px);align-items:start;
  }
.projects{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(150px,.7fr)}
.personal{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(150px,.7fr)}
.row-label{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
    font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.05;
    align-self:start;padding-top:4px;
  }
.row-label.spacer{grid-row:span 1}
.card{
    position:relative;display:block;overflow:hidden;
    background:var(--ink);isolation:isolate;border-radius:0;
  }
.r-tl{border-top-left-radius:clamp(20px,3.4vw,40px)}
.r-tr{border-top-right-radius:clamp(20px,3.4vw,40px)}
.r-bl{border-bottom-left-radius:clamp(20px,3.4vw,40px)}
.r-br{border-bottom-right-radius:clamp(20px,3.4vw,40px)}
.card.project{aspect-ratio:3/4}
.card.wide{aspect-ratio:16/11}
.card .media{position:absolute;inset:0;overflow:hidden}
.card .media img,.card .media video{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
  }
.card:hover .media img,.card:focus-visible .media img{transform:scale(1.05)}
.card::after{ 
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(15,0,13,.55),rgba(15,0,13,0) 48%);
    opacity:.9;
  }
.card .num{
    position:absolute;bottom:6px;right:16px;z-index:2;
    font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
    font-size:clamp(3.6rem,8vw,6rem);color:rgba(255,255,255,.5);line-height:.82;
    letter-spacing:-.03em;
  }
.card.wide .num{font-size:clamp(4.2rem,9vw,7.2rem)}
.card .tag{
    position:absolute;bottom:18px;left:20px;right:18px;z-index:3;color:#fff;hyphens:manual;
    text-shadow:0 1px 14px rgba(15,0,13,.5);
  }
.card .tag .t{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
    font-size:clamp(1.05rem,1.7vw,1.4rem);display:block;line-height:1.1;
  }
.card .tag .s{
    font-size:.85rem;color:rgba(255,255,255,.72);font-weight:500;
    opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;
  }
.card:hover .tag .s,.card:focus-visible .tag .s{opacity:1;transform:none}
.card.soon{background:var(--ink-2);border:1px dashed rgba(255,255,255,.18)}
.card.soon::after{display:none}
.card.soon .num{color:rgba(255,255,255,.22)}
.card.soon .tag .t{color:rgba(255,255,255,.6)}
.card:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
footer{
    margin-top:clamp(56px,9vw,120px);
    background:var(--ink);color:#fff;
    border-radius:0;
    border-top-right-radius:clamp(110px,22vw,300px);
  }
.foot .row a,.foot .row span{font-weight:500;font-size:1.02rem}
@media (max-width:760px){
    .bar{height:68px}
    nav ul{gap:18px}
    nav a{font-size:.95rem}
    .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
    .personal{grid-template-columns:1fr}
    .row-label{grid-column:1/-1;order:-1;padding-top:0;margin-bottom:2px}
    .projects > a:nth-child(3){grid-column:1/-1;aspect-ratio:16/11}
    .projects > a:nth-child(3) .media video{object-position:50% 40% !important}
    .card .tag{left:16px;right:14px;bottom:14px}
  }
@media (prefers-reduced-motion:reduce){
    *{transition:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .card .media img{transition:none}
  }