:root{
  --ink:#141412;
  --ink2:#1c1c19;
  --ink3:#242420;
  --bone:#ece7db;
  --muted:#9a958a;
  --line:rgba(236,231,219,.16);
  --line-soft:rgba(236,231,219,.09);
  --spot:#7c89ff;
  --spot-deep:#3d4be0;
  --serif:'Prata',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,56px);
  --mast:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--spot);color:var(--ink)}
:focus-visible{outline:2px solid var(--spot);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{scroll-margin-top:calc(var(--mast) + 16px)}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--spot);z-index:99;pointer-events:none}
/* sweep hover for buttons */
.sweep{position:relative;overflow:hidden;isolation:isolate}
.sweep::before{content:"";position:absolute;inset:0;background:var(--spot);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.sweep:hover::before,.sweep:focus-visible::before{transform:scaleX(1)}
.sweep:hover,.sweep:focus-visible{color:#fff}
.arr,.cta-arrow,.more-arrow{display:inline-block;transition:transform .3s}

/* masthead */
.masthead{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--mast);display:flex;align-items:center;gap:32px;background:var(--ink);border-bottom:1px solid var(--line);padding:0 var(--pad)}
.wordmark{font-weight:800;font-size:16px;letter-spacing:.08em}
.wordmark sup{color:var(--spot);font-size:9px;letter-spacing:0;margin-left:2px}
.nav{display:flex;gap:28px;margin-left:auto;color:var(--muted)}
.nav a{position:relative;padding:4px 0;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--spot);transition:width .3s}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{width:100%}
.mast-folio{color:var(--muted)}
.menu-btn{display:none;margin-left:auto;color:var(--bone)}
.menu{position:fixed;inset:0;z-index:95;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);gap:8px}
.menu[hidden]{display:none}
.menu a{font-family:var(--serif);font-size:clamp(30px,8vw,52px);line-height:1.25;transition:color .25s,transform .3s}
.menu a:hover{color:var(--spot);transform:translateX(8px)}
.menu .menu-close{position:absolute;top:20px;right:var(--pad);color:var(--muted)}
.menu .menu-meta{margin-top:32px;color:var(--muted);display:flex;gap:24px;flex-wrap:wrap}

/* cover */
.cover{padding-top:calc(var(--mast) + clamp(40px,7vh,88px));padding-bottom:clamp(40px,7vh,80px)}
.runhead{display:flex;justify-content:space-between;gap:16px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(28px,5vh,56px)}
.cover-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:end}
.statement{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,76px);line-height:1.08;letter-spacing:-.01em;max-width:14ch}
.statement .line{display:block;overflow:hidden}
.statement .line-in{display:block}
.statement .spot{color:var(--spot)}
.lead{margin-top:24px;font-size:clamp(15px,1.25vw,18px);line-height:1.65;color:var(--muted);max-width:46ch}
.lead b{color:var(--bone);font-weight:600}
.cover-cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;color:var(--bone);border:1px solid var(--line);padding:14px 22px;transition:border-color .3s,color .3s,transform .2s}
.cover-cta:hover{border-color:var(--spot)}
.cover-cta:active{transform:scale(.98)}
.cover-cta:hover .cta-arrow{transform:translateY(3px)}
.cover-facts{margin-top:26px;display:flex;gap:28px;flex-wrap:wrap;color:var(--muted)}
.cover-facts b{color:var(--bone);font-weight:600}
.cover-fig{position:relative}
.cover-fig .fig-frame{border:1px solid var(--line);background:var(--ink2);aspect-ratio:4/3;overflow:hidden}
.cover-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cover-fig:hover img{transform:scale(1.03)}
.cover-fig figcaption{display:flex;justify-content:space-between;gap:12px;color:var(--muted);padding-top:12px}
.cover-fig .fig-folio{color:var(--spot)}

/* section head */
.sec-head{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:clamp(24px,4vh,40px)}
.sec-no{color:var(--spot)}
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.1}
.sec-note{margin-left:auto;color:var(--muted)}

/* work grid */
#work{padding-bottom:clamp(48px,8vh,96px)}
.work-bar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:28px}
#filters{display:flex;gap:22px;flex-wrap:wrap}
.filter{color:var(--muted);padding:9px 15px;border:1px solid var(--line);transition:color .25s,border-color .25s,background .25s,transform .15s}
.filter sup{font-size:9px;margin-left:4px;letter-spacing:0}
.filter:hover{color:var(--bone);border-color:var(--bone)}
.filter:active{transform:scale(.96)}
.filter.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
#count{margin-left:auto;color:var(--muted)}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px)}
.work{display:block;text-align:left;width:100%;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.work:hover{transform:translateY(-5px)}
.work.w7{grid-column:span 7}
.work.w5{grid-column:span 5}
.work-media{display:block;position:relative;overflow:hidden;background:var(--ink2);border:1px solid var(--line-soft);transition:border-color .3s}
.work:hover .work-media{border-color:var(--spot)}
.work:hover .work-folio{color:var(--spot)}
.work.w7 .work-media{aspect-ratio:16/10}
.work.w5 .work-media{aspect-ratio:4/3}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.work-media img.contain{object-fit:contain}
.work:hover .work-media img{transform:scale(1.04)}
.work-folio{position:absolute;top:12px;left:12px;color:var(--bone);background:rgba(20,20,18,.72);padding:5px 9px;backdrop-filter:blur(4px)}
.work-open{position:absolute;right:12px;bottom:12px;color:var(--ink);background:var(--bone);padding:7px 12px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.work:hover .work-open{opacity:1;transform:translateY(0)}
.work-meta{display:flex;align-items:baseline;gap:14px;padding-top:14px}
.work-title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.2;transition:color .25s}
.work:hover .work-title{color:var(--spot)}
.work-cat{margin-left:auto;color:var(--muted);white-space:nowrap}
.work-badge{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 7px;white-space:nowrap}
.more{display:flex;align-items:center;justify-content:center;gap:12px;margin:44px auto 0;min-width:300px;padding:18px 36px;background:var(--bone);color:var(--ink);border:1px solid var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s,border-color .3s,transform .2s}
.more:hover{border-color:var(--spot)}
.more:active{transform:scale(.98)}
.more:hover .more-arrow{transform:translateY(3px)}
.more[hidden]{display:none}

/* plates */
.plate{margin:0 0 clamp(48px,8vh,96px)}
.plate-media{height:min(72vh,720px);overflow:hidden;background:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plate-media img,.plate-media video{width:100%;height:100%;object-fit:cover;will-change:transform}
.plate-media.contain img{object-fit:contain}
.plate-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);padding:14px var(--pad);max-width:1280px;margin:0 auto}
.plate-link{color:var(--bone);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .25s,border-color .25s}
.plate-link:hover{color:var(--spot);border-color:var(--spot)}
.plate-link:hover .arr{transform:translateX(4px)}

/* practice */
#practice,#process{padding-bottom:clamp(48px,8vh,96px)}
.prac,.proc{list-style:none}
.prac-row{display:grid;grid-template-columns:180px .8fr 1.2fr;gap:clamp(20px,3vw,48px);align-items:center;border-top:1px solid var(--line);padding:clamp(20px,3.4vh,32px) 0}
.prac-row:last-child{border-bottom:1px solid var(--line)}
.prac-thumb{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--line-soft);background:var(--ink2)}
.prac-left{display:flex;gap:18px;align-items:baseline}
.prac-no,.proc-no{color:var(--spot)}
.prac-row h3,.proc-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.2vw,30px);line-height:1.2}
.prac-right p{color:var(--muted);max-width:56ch}
.prac-tags{margin-top:14px;color:var(--bone)}
.proc-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);border-top:1px solid var(--line);padding:clamp(20px,3.4vh,32px) 0}
.proc-row:last-child{border-bottom:1px solid var(--line)}
.proc-left{display:flex;gap:20px;align-items:baseline}

/* contact color band */
.contact-band{--bone:#f4f2ff;--muted:rgba(244,242,255,.72);--line:rgba(244,242,255,.32);--line-soft:rgba(244,242,255,.18);--spot:#ffffff;
  background:var(--spot-deep);color:var(--bone);padding:clamp(48px,8vh,96px) 0}
.contact-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,88px);line-height:1.05;margin-bottom:20px}
.contact-lead{color:var(--muted);max-width:46ch;margin-bottom:clamp(28px,5vh,56px)}
.contact-rows{border-bottom:1px solid var(--line)}
.contact-row{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:20px;width:100%;text-align:left;border-top:1px solid var(--line);padding:22px 0;transition:background .3s,padding .3s}
.contact-row:hover{background:rgba(255,255,255,.07);padding-left:14px;padding-right:14px}
.c-label{color:var(--muted)}
.c-value{font-family:var(--serif);font-size:clamp(20px,2.4vw,32px)}
.c-arrow{color:var(--bone);transition:transform .3s}
.contact-row:hover .c-arrow{transform:translateX(6px)}
.contact-row:hover .c-value{color:#fff;text-decoration:underline;text-underline-offset:6px}

/* colophon */
.colophon{display:flex;gap:24px;flex-wrap:wrap;align-items:center;color:var(--muted);border-top:1px solid var(--line);padding:22px var(--pad);max-width:1280px;margin:0 auto}
.colophon .top-link{margin-left:auto;color:var(--bone)}
.colophon .top-link:hover{color:var(--spot)}

/* case dialog */
dialog.case{width:min(1040px,92vw);max-height:90vh;overflow:auto;background:var(--ink2);color:var(--bone);border:1px solid var(--line);padding:0;margin:auto}
dialog.case[open]{animation:caseIn .4s cubic-bezier(.2,.7,.2,1)}
@keyframes caseIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
dialog.case::backdrop{background:rgba(10,10,8,.78);animation:bdIn .3s ease}
@keyframes bdIn{from{opacity:0}to{opacity:1}}
.case-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ink2);z-index:2}
#case-close{color:var(--bone)}
#case-close:hover{color:var(--spot)}
.case-media{background:var(--ink3)}
.case-media img,.case-media video{width:100%;max-height:60vh;object-fit:contain}
.case-body{padding:28px 24px}
.case-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin-bottom:12px}
.case-meta{color:var(--muted);margin-bottom:20px}
.case-desc{color:var(--bone);max-width:70ch;margin-bottom:16px}
.case-note{color:var(--muted);border-left:2px solid var(--spot);padding-left:12px;margin-bottom:8px}
#case-gallery{display:flex;flex-direction:column;gap:16px;margin-top:20px}
#case-gallery img{width:100%;border:1px solid var(--line-soft)}
.case-nav{display:flex;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--line)}
.case-nav button{color:var(--muted);transition:color .25s}
.case-nav button:hover{color:var(--spot)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:99;background:var(--bone);color:var(--ink);padding:10px 18px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){
  .cover-grid{grid-template-columns:1fr}
  .cover-fig{max-width:560px}
  .work.w7,.work.w5{grid-column:span 6}
  .prac-row{grid-template-columns:140px 1fr}
  .prac-right{grid-column:1/-1}
  .proc-row{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav,.mast-folio{display:none}
  .menu-btn{display:block}
  .work.w7,.work.w5{grid-column:span 12}
  .work.w7 .work-media,.work.w5 .work-media{aspect-ratio:4/3}
  .plate-media{height:46vh}
  .prac-row{grid-template-columns:1fr}
  .prac-thumb{max-width:220px}
  .contact-row{grid-template-columns:1fr auto;gap:8px}
  .c-label{grid-column:1/-1}
  .runhead{flex-direction:column;gap:6px}
  .work-cat{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}