@view-transition{ navigation:auto; }
  :root{ --ink:#1d1d1f; --mute:#5f6168; --line:#e6e6ea; --navy:#0b1f5e; --sans:'Geist',-apple-system,'Helvetica Neue',Arial,sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace; --safe-b:env(safe-area-inset-bottom,0px); --tabh:64px; --px:clamp(20px,6vw,110px); }
  html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
  a,button{ touch-action:manipulation; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  body{ background:#fff; color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:calc(var(--tabh) + var(--safe-b) + 90px); }

  .logo{ position:fixed; top:max(28px,env(safe-area-inset-top)); left:32px; z-index:30; display:block; }
  .logo img{ height:52px; width:auto; display:block; }
  .fade-t,.fade-b{ position:fixed; left:0; right:0; z-index:20; pointer-events:none; }
  .fade-t{ top:0; height:110px; background:linear-gradient(#fff 35%, rgba(255,255,255,0)); }
  .fade-b{ bottom:0; height:calc(var(--tabh) + var(--safe-b) + 70px); background:linear-gradient(rgba(255,255,255,0), #fff 70%); }

  main{ padding:0 var(--px); }
  .wrap{ width:min(1240px,100%); margin:0 auto; }
  .eyebrow{ font:500 clamp(10px,.95vw,12px)/1 var(--mono); letter-spacing:.2em; color:var(--mute); }

  .hero{ padding-top:clamp(120px,22vh,200px); padding-bottom:clamp(36px,7vh,72px); }
  .hero h1{ margin-top:clamp(14px,2.4vh,24px); font:500 clamp(36px,6.4vw,104px)/1 var(--sans); letter-spacing:-.05em; text-wrap:balance; max-width:14em;
    background:linear-gradient(180deg,#0b0b0d 30%,#55575d); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p{ margin-top:clamp(18px,3vh,32px); max-width:34em; font:400 clamp(15px,1.4vw,19px)/1.6 var(--sans); color:var(--mute); letter-spacing:-.012em; text-wrap:pretty; }

  
  /* tabs */
  .tabs{ position:fixed; bottom:0; z-index:40; display:flex; gap:10px; }
  .tabs.l{ left:32px; } .tabs.r{ right:32px; }
  .tab{ display:flex; align-items:flex-start; justify-content:space-between; width:clamp(130px,14vw,200px); height:calc(var(--tabh) + var(--safe-b)); padding:16px 18px 0; text-decoration:none;
        font:500 14px/1 var(--sans); letter-spacing:-.01em; color:#fff; background:#000; border:1px solid #000; border-bottom:0; border-radius:14px 14px 0 0;
        transform:translateY(14px); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .25s; }
  @media (hover:hover){ .tab:hover{ transform:translateY(0); background:var(--navy); border-color:var(--navy); } }
  .tab:active{ transform:translateY(0); background:var(--navy); border-color:var(--navy); }

  .js .rv{ opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
  .js .rv.in{ opacity:1; transform:none; }

  @media (max-width:1000px){ .gallery{ column-count:2; } .cols{ grid-template-columns:1fr; } }
  @media (max-width:900px){ .logo{ left:20px } .logo img{ height:44px } .tabs.l{ left:16px } .tabs.r{ right:16px } }
  @media (max-width:700px){
    :root{ --tabh:58px; }
    .logo{ top:max(18px,env(safe-area-inset-top)); left:16px } .logo img{ height:38px }
    .tabs.l{ left:10px } .tabs.r{ right:10px } .tabs{ gap:5px }
    .tab{ width:calc((100vw - 20px - 15px)/4); min-width:0; padding:13px 7px 0; font-size:clamp(10px,2.9vw,12px); line-height:1.15; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere }
    .gallery{ column-gap:8px; } .shot{ margin-bottom:8px; border-radius:12px; }
    .proj li{ grid-template-columns:34px minmax(0,1fr); gap:6px 12px; padding:16px 0; }
    .proj .r{ grid-column:2; }
    .chips li{ padding:9px 13px; font-size:12.5px; }
  }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .js .rv{ opacity:1; transform:none; transition:none } .shot img,.tab{ transition:none } }

  .hero{ padding-top:clamp(120px,22vh,200px); padding-bottom:clamp(28px,5vh,56px); }
  .hero h1{ margin-top:clamp(14px,2.4vh,24px); font:500 clamp(36px,6.4vw,104px)/1 var(--sans); letter-spacing:-.05em; text-wrap:balance; max-width:13em;
    background:linear-gradient(180deg,#0b0b0d 30%,#55575d); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lead{ margin-top:clamp(18px,3vh,32px); max-width:36em; font:400 clamp(15px,1.4vw,19px)/1.6 var(--sans); color:var(--mute); letter-spacing:-.012em; text-wrap:pretty; }

  .progs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:clamp(8px,2vh,20px); }
  .prog{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:clamp(150px,18vw,210px); padding:22px 24px; border:1px solid var(--line); border-radius:20px; background:#f7f7f9; color:var(--ink); }
  .prog b{ font:500 clamp(18px,1.9vw,26px)/1.15 var(--sans); letter-spacing:-.03em; max-width:14em; }
  .prog span{ font:500 11px/1 var(--mono); letter-spacing:.16em; color:var(--mute); }
  .prog .st{ display:inline-flex; align-items:center; gap:8px; }
  .prog .st::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--navy); }
  .cap{ margin-top:16px; font:500 11px/1 var(--mono); letter-spacing:.16em; color:var(--mute); }

  .filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(40px,8vh,90px); }
  .filters button{ border:1px solid var(--line); background:#f7f7f9; color:var(--ink); border-radius:999px; height:38px; padding:0 16px; font:500 13px/1 var(--sans); cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
  .filters button[aria-pressed="true"]{ background:#000; color:#fff; border-color:#000; }
  @media (hover:hover){ .filters button:hover{ background:var(--navy); color:#fff; border-color:var(--navy); } }
  .list{ list-style:none; margin-top:clamp(16px,3vh,28px); border-top:1px solid var(--ink); }
  .list li[hidden]{ display:none; }
  .row{ display:grid; grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr) auto; gap:clamp(16px,2.4vw,32px); align-items:center; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background .3s; }
  @media (hover:hover){ .row:hover{ background:#f7f7f9; } .row:hover .go{ background:var(--navy); color:#fff; border-color:var(--navy); } }
  .row .th{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#ececef; }
  .row .th img{ display:block; width:100%; height:100%; object-fit:cover; }
  .row .th.c img{ object-fit:contain; padding:8%; }
  .row h3{ font:500 clamp(18px,2vw,28px)/1.2 var(--sans); letter-spacing:-.03em; text-wrap:balance; max-width:22em; }
  .meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:12px; font:400 13px/1.2 var(--sans); color:var(--mute); }
  .av{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:500; }
  .av i{ width:22px; height:22px; border-radius:50%; background:#000 url(logo.png) center/62% no-repeat; display:inline-block; }
  .av i.w{ background:#fff url(logo.png) center/62% no-repeat; border:1px solid var(--line); }
  .meta .tag{ font:500 10.5px/1 var(--mono); letter-spacing:.14em; color:var(--mute); }
  .go{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--line); border-radius:999px; font:500 13px/1 var(--sans); white-space:nowrap; transition:background .25s,color .25s,border-color .25s; }

  .areas{ list-style:none; margin-top:clamp(24px,4vh,44px); border-top:1px solid var(--ink); counter-reset:a; }
  .areas li{ border-bottom:1px solid var(--line); }
  .areas button{ width:100%; display:grid; grid-template-columns:56px minmax(0,1fr) 28px; gap:20px; align-items:baseline; padding:22px 0; background:none; border:0; text-align:left; cursor:pointer; color:var(--ink); font-family:var(--sans); }
  .areas .n{ font:500 12px/1 var(--mono); letter-spacing:.14em; color:#8c8e95; }
  .areas .t{ font:500 clamp(18px,2vw,28px)/1.2 var(--sans); letter-spacing:-.03em; }
  .areas .pl{ font:400 22px/1 var(--sans); color:var(--mute); transition:transform .35s cubic-bezier(.2,.8,.2,1); justify-self:end; }
  .areas button[aria-expanded="true"] .pl{ transform:rotate(45deg); }
  .areas .d{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
  .areas .d > div{ overflow:hidden; }
  .areas .d.open{ grid-template-rows:1fr; }
  .areas .d p{ padding:0 48px 24px 76px; max-width:46em; font:400 clamp(14px,1.15vw,16.5px)/1.65 var(--sans); color:var(--mute); letter-spacing:-.01em; }


  /* sections */
  .sec{ padding-top:clamp(72px,13vh,150px); }
  .sec > .eyebrow{ margin-bottom:0; }
  .sec h2{ margin-top:clamp(14px,2.4vh,24px); font:500 clamp(28px,4vw,56px)/1.04 var(--sans); letter-spacing:-.04em; text-wrap:balance; max-width:16em; }
  /* article */
  .art{ padding-top:clamp(110px,18vh,170px); max-width:760px; margin:0 auto; }
  .back{ display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--mono); letter-spacing:.14em; color:var(--mute); text-decoration:none; }
  .back:hover{ color:var(--ink); }
  .art h1{ margin-top:clamp(20px,3vh,32px); font:500 clamp(32px,5.2vw,62px)/1.04 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
  .art .dek{ margin-top:clamp(16px,2.6vh,26px); font:400 clamp(16px,1.5vw,20px)/1.55 var(--sans); color:var(--mute); letter-spacing:-.012em; text-wrap:pretty; }
  .art .meta{ margin-top:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .art .shot{ margin-top:26px; border-radius:16px; overflow:hidden; background:#0d0b0a; aspect-ratio:16/9; }
  .art .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
  .toc{ margin-top:26px; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:#f7f7f9; }
  .toc b{ font:500 11px/1 var(--mono); letter-spacing:.18em; color:var(--mute); }
  .toc ol{ margin-top:14px; padding-left:0; list-style:none; display:grid; gap:10px; counter-reset:t; }
  .toc a{ display:block; font:500 15px/1.35 var(--sans); letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
  .toc li{ counter-increment:t; display:grid; grid-template-columns:30px 1fr; }
  .toc li::before{ content:counter(t,decimal-leading-zero); font:500 11px/1.9 var(--mono); color:#8c8e95; }
  @media (hover:hover){ .toc a:hover{ color:var(--navy); } }
  .prose{ margin-top:clamp(28px,5vh,48px); }
  .prose h2{ margin:clamp(36px,6vh,56px) 0 14px; font:500 clamp(22px,2.4vw,30px)/1.15 var(--sans); letter-spacing:-.035em; scroll-margin-top:100px; text-wrap:balance; }
  .prose p{ font:400 clamp(16px,1.25vw,18px)/1.75 var(--sans); color:#3a3b40; letter-spacing:-.008em; margin-bottom:1.15em; text-wrap:pretty; }
  .prose ul{ margin:0 0 1.3em; padding-left:1.2em; display:grid; gap:.6em; }
  .prose li{ font:400 clamp(16px,1.25vw,18px)/1.65 var(--sans); color:#3a3b40; padding-left:.2em; }
  .prose li::marker{ color:var(--navy); }
  .note{ margin:0 0 1.4em; padding:18px 20px; border-left:2px solid var(--navy); background:#f7f7f9; border-radius:0 14px 14px 0; font:400 15px/1.65 var(--sans); color:#3a3b40; }
  .src{ margin-top:clamp(36px,6vh,56px); padding-top:20px; border-top:1px solid var(--line); }
  .src b{ font:500 11px/1 var(--mono); letter-spacing:.18em; color:var(--mute); }
  .src ol{ margin-top:14px; padding-left:1.2em; display:grid; gap:8px; }
  .src a{ font:400 14.5px/1.5 var(--sans); color:var(--ink); text-underline-offset:3px; }
  .disc{ margin-top:18px; font:400 12.5px/1.6 var(--sans); color:var(--mute); }
  .more{ margin:clamp(56px,10vh,110px) auto 0; max-width:1240px; }
  .more h2{ font:500 clamp(24px,3vw,40px)/1.1 var(--sans); letter-spacing:-.04em; }
  .mgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
  .mc{ display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; transition:border-color .3s; }
  .mc .th{ aspect-ratio:4/3; background:#ececef; } .mc .th img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mc .th.c img{ object-fit:contain; padding:10%; }
  .mc div.b{ padding:16px 18px 20px; } .mc b{ display:block; font:500 16px/1.3 var(--sans); letter-spacing:-.02em; } .mc span{ display:block; margin-top:10px; font:400 12.5px/1 var(--sans); color:var(--mute); }
  @media (hover:hover){ .mc:hover{ border-color:var(--navy); } }

  @media (max-width:900px){ .progs{ grid-template-columns:1fr; } .mgrid{ grid-template-columns:1fr; } .row{ grid-template-columns:84px minmax(0,1fr); } .row .go{ display:none; } .areas button{ grid-template-columns:36px minmax(0,1fr) 24px; gap:12px; } .areas .d p{ padding:0 8px 22px 48px; } }