*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#F2F1EC; --ink:#111214; --ash:#76746D; --hair:#DAD8D0;
  --red:#C8102E; --white:#fff;
  --pad:clamp(24px,5vw,80px);
  --max:1440px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
.w{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.sf{font-family:'Bodoni Moda',serif;font-weight:500}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* header */
header{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--ink)}
.bar{display:flex;justify-content:space-between;align-items:center;min-height:58px;gap:16px}
.lg{font-family:'Bodoni Moda',serif;font-weight:600;font-size:18px;text-decoration:none;white-space:nowrap}
.lg i{font-style:italic;color:var(--red)}
nav{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap;justify-content:flex-end}
nav a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;white-space:nowrap}
nav a:hover{border-color:var(--red);color:var(--red)}

/* hero */
.hero{padding-block:clamp(46px,7vw,96px) clamp(30px,4vw,54px)}
.kick{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.kick i{width:7px;height:7px;background:var(--red);border-radius:50%;flex:none}
h1{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(40px,8.4vw,128px);line-height:.94;letter-spacing:-.015em}
h1 em{font-style:italic;font-weight:400;color:var(--red)}
.hf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:end;margin-top:clamp(26px,3.5vw,46px)}
.lede{max-width:54ch;font-size:clamp(15px,1.6vw,18px)}
.lede b{font-weight:600}
.lang{text-align:right}
@media(max-width:760px){.hf{grid-template-columns:1fr}.lang{text-align:left}}

/* marquee */
.mq{border-block:1px solid var(--ink);overflow:hidden;white-space:nowrap;padding-block:10px}
.mqi{display:inline-block;animation:mq 34s linear infinite;will-change:transform}
.mqi span{font-family:'Bodoni Moda',serif;font-style:italic;font-size:14px;margin-inline:7px}
.mqi b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-inline:7px}
@keyframes mq{to{transform:translateX(-50%)}}

/* index */
.ix{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,33%);gap:clamp(20px,4vw,60px);align-items:start;padding-block:clamp(34px,5vw,64px)}
.rw{display:grid;grid-template-columns:46px minmax(0,1fr) 108px 116px;gap:12px;align-items:baseline;padding-block:15px;border-bottom:1px solid var(--hair);text-decoration:none;transition:background-color .25s,transform .15s}
.rw:active{background-color:rgba(17,18,20,.035);transform:scale(.99)}
.rw .th{display:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.rw:first-child{border-top:1px solid var(--ink)}
.rw .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ash)}
.rw .t{font-family:'Bodoni Moda',serif;font-weight:600;font-size:clamp(23px,2.55vw,36px);line-height:1.08;letter-spacing:-.006em;transition:color .18s}
.rw:hover .t,.rw:focus-visible .t{color:var(--red)}
.rw .d,.rw .y{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.07em;color:var(--ash);text-transform:uppercase}
@media(max-width:940px){
  .ix{grid-template-columns:1fr} .pv{display:none}
  .rw{grid-template-columns:30px 64px minmax(0,1fr) 78px;gap:10px}
  .rw .d{display:none}
  .rw .th{display:block;width:64px;height:48px;border-radius:2px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#E8E6DF;flex:none}
  .rw .y{font-size:9px;align-self:center;text-align:right}
}
.pv{position:sticky;top:88px;aspect-ratio:4/3;background:#E9E7E0;border:1px solid var(--ink);overflow:hidden}
.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s;background:#E9E7E0}
.pv img.on{opacity:1}
.pv img.pv-def{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;transition:opacity .35s;background:#E9E7E0}
.pv.hot img.pv-def{opacity:0}

/* case */
.cs{border-top:1px solid var(--ink);padding-block:clamp(40px,5.5vw,76px) clamp(52px,7vw,104px);scroll-margin-top:72px}
.ch{display:flex;align-items:baseline;gap:clamp(14px,2.5vw,34px);flex-wrap:wrap}
.ch .cn{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:clamp(30px,5vw,74px);color:var(--red);line-height:1}
.ch h2{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(36px,5.8vw,82px);line-height:.96;letter-spacing:-.018em}
.cm{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:10px 0 clamp(24px,3.5vw,40px);padding-bottom:14px;border-bottom:1px solid var(--hair)}

.ps{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);background:var(--white);margin-bottom:clamp(22px,3vw,36px)}
.ps>div{padding:clamp(20px,2.6vw,36px);min-width:0}
.ps .p{border-right:1px solid var(--ink)}
.ps h3{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.ps .p h3{color:var(--ash)} .ps .s h3{color:var(--red)}
.ps h3::before{content:"";width:20px;height:1px;background:currentColor;flex:none}
.ps p{font-size:clamp(14.5px,1.5vw,16.5px);max-width:48ch}
.ps p+p{margin-top:.75em}
.ps .bg{font-family:'Bodoni Moda',serif;font-size:clamp(18px,2vw,24px);line-height:1.3;font-weight:500}
@media(max-width:780px){.ps{grid-template-columns:1fr}.ps .p{border-right:none;border-bottom:1px solid var(--ink)}}

.out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(26px,3.8vw,44px);border-block:1px solid var(--hair)}
.out>div{min-width:0;max-width:none;padding:clamp(14px,1.5vw,20px) clamp(14px,2vw,28px);border-right:1px solid var(--hair)}
.out>div:first-child{padding-left:0}
.out>div:last-child{border-right:none;padding-right:0}
.out .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.out .v{font-size:14.5px;line-height:1.5}
@media(max-width:760px){.out{grid-template-columns:1fr}.out>div,.out>div:first-child,.out>div:last-child{padding:14px 0;border-right:none;border-bottom:1px solid var(--hair)}.out>div:last-child{border-bottom:none}}

.gr{display:grid;gap:clamp(12px,1.25vw,18px);align-items:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:920px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.g2,.g3{grid-template-columns:1fr}}
.sl{position:relative;border:1px solid var(--hair);background:var(--white);overflow:hidden;cursor:zoom-in;box-shadow:0 1px 0 rgba(17,18,20,.04);transition:border-color .2s,box-shadow .2s}
.sl:hover{border-color:#B7B4AC;box-shadow:0 10px 28px rgba(17,18,20,.08)}
.sl img{width:100%;height:100%;object-fit:contain;display:block}
.ar-l{aspect-ratio:1500/1064}
.ar-w{aspect-ratio:3/2} .ar-p{aspect-ratio:1414/2000}
.brand-hero{margin:0 0 clamp(14px,2vw,24px);width:100%;aspect-ratio:1672/941;border:1px solid var(--ink);background:var(--white);overflow:hidden;box-shadow:none}
.brand-hero:hover{border-color:var(--ink);box-shadow:none}
.brand-hero img{width:100%;height:100%;object-fit:cover;display:block}
.strategy-hero{width:100%;aspect-ratio:3/2;border:1px solid var(--ink);background:#090A0C;overflow:hidden;margin-bottom:clamp(18px,2.5vw,30px)}
.strategy-hero img{width:100%;height:100%;object-fit:contain;display:block}
.strategy-gallery{margin-top:clamp(14px,1.8vw,24px)}
.strategy-gallery .sl{aspect-ratio:3/2;border-color:var(--ink)}
.strategy-gallery .sl img{object-fit:contain;background:#fff}
.strategy-note{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0 0;border-top:1px solid var(--hair);margin-top:clamp(22px,3vw,34px)}
.strategy-note p{max-width:62ch;color:var(--ash);font-size:14px}
.feature-visual{width:min(100%,860px);margin-inline:auto;aspect-ratio:1122/1402}
.monsei-feature{width:min(100%,1120px);margin-inline:auto;aspect-ratio:1800/1125}
.monsei-feature img{width:100%;height:100%;object-fit:cover;display:block}
.monsei-gallery .sl{aspect-ratio:1800/1125}
.monsei-gallery .sl img{width:100%;height:100%;object-fit:cover;display:block}
.ph{aspect-ratio:3/4;background:var(--white);border:1px dashed var(--hair);display:grid;place-items:center;text-align:center;padding:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}

/* SOCIAL — brand-by-brand archive */
.social-intro{display:flex;justify-content:space-between;gap:18px 36px;align-items:end;flex-wrap:wrap;margin:clamp(32px,4vw,52px) 0 18px}
.social-intro h3{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(28px,3.8vw,52px);line-height:1}
.social-intro p{max-width:54ch;color:var(--ash);font-size:14.5px}
.social-list{display:grid;gap:14px}
.brand-group{border:1px solid var(--ink);background:var(--white)}
.brand-group summary{list-style:none;cursor:pointer}
.brand-group summary::-webkit-details-marker{display:none}
.brand-summary{display:grid;grid-template-columns:1fr;min-height:180px}
.brand-meta{padding:clamp(20px,2.7vw,38px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.brand-top{display:flex;justify-content:space-between;align-items:start;gap:16px}
.brand-name{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(28px,4vw,56px);line-height:1;letter-spacing:-.012em}
.brand-toggle{width:32px;height:32px;border:1px solid var(--ink);display:grid;place-items:center;flex:none;font-family:'JetBrains Mono',monospace;font-size:18px;line-height:1;transition:.2s}
.brand-toggle::before{content:"+"}
.brand-group[open] .brand-toggle{background:var(--ink);color:var(--paper)}
.brand-group[open] .brand-toggle::before{content:"−"}
.brand-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:8px}
.brand-desc{max-width:56ch;color:var(--ash);font-size:14px;line-height:1.55}
.brand-preview{display:none}
.brand-preview img{width:100%;height:100%;min-height:180px;object-fit:cover;border-right:1px solid rgba(17,18,20,.18)}
.brand-preview img:last-child{border-right:none}
.brand-preview.portrait img{object-fit:contain;background:#111}
.brand-body{border-top:1px solid var(--ink);padding:clamp(14px,2vw,24px)}
.brand-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.brand-gallery .sl{margin:0}
.brand-gallery .sl img{width:100%;height:auto;object-fit:contain}
@media(max-width:880px){
  .brand-summary{grid-template-columns:1fr}
  .brand-preview{border-left:none;border-top:1px solid var(--ink)}
  .brand-preview img{min-height:140px}
  .brand-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .brand-preview{grid-template-columns:repeat(3,1fr)}
  .brand-preview img{min-height:100px}
  .brand-gallery{grid-template-columns:1fr}
  .brand-meta{gap:18px}
}

/* MOTION — compact, consistent dark room */
.motion{--mline:#2B2B2E;background:#0B0B0C;color:#EDEBE6;padding-block:clamp(48px,6vw,82px);margin-block:clamp(18px,2.5vw,32px);border-block:1px solid var(--ink)}
.motion .ch h2{color:#F4F2ED}.motion .cm{border-color:var(--mline)}.motion .cm .mono{color:#807E77}
.motion .lead{font-family:'Bodoni Moda',serif;font-size:clamp(18px,2vw,25px);line-height:1.38;max-width:43ch;color:#CFCCC5;margin:0}
.motion-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,310px);gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:clamp(30px,4vw,50px)}
.motion-cover{border:1px solid var(--mline);background:#111;overflow:hidden;aspect-ratio:4/5}
.motion-cover img{width:100%;height:100%;object-fit:cover;display:block}
.motion-copy{max-width:68ch;margin-top:clamp(28px,3.5vw,42px)}
.motion-copy h3{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(23px,2.7vw,36px);line-height:1.12;margin-bottom:9px;color:#F4F2ED}
.motion-copy p{color:#B7B4AD;font-size:14px;max-width:62ch}
.motion-label{color:#807E77;margin:clamp(34px,4vw,52px) 0 14px;padding-bottom:10px;border-bottom:1px solid var(--mline)}
.vgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:1040px}
.vc{position:relative;border:1px solid var(--mline);background:#111;padding:0;cursor:pointer;overflow:hidden;aspect-ratio:9/16;min-width:0}
.vc img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:.35s}
.vc:hover img{opacity:1;transform:scale(1.025)}
.vc-p{position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;background:rgba(200,16,46,.94);transition:.2s}
.vc-p::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);border-left:10px solid #fff;border-block:7px solid transparent}
.vc:hover .vc-p{transform:scale(1.08)}
.vc-t{position:absolute;left:8px;bottom:7px;color:#EDEBE6;font-size:8px}
.doc{border:1px solid var(--mline);background:#111;max-width:980px}
.pp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:980px}
@media(max-width:820px){.pp-grid{grid-template-columns:1fr}}
.pp{border:1px solid var(--mline);background:#111;display:flex;flex-direction:column;min-width:0}
.pp-tall{aspect-ratio:1122/1402!important}
.pp-zoom{position:absolute!important;inset:0;background:none!important;border:none!important;aspect-ratio:auto!important;cursor:zoom-in;width:100%;height:100%}
.pp-fr{position:relative;aspect-ratio:16/9;background:#050505;overflow:hidden;border-bottom:1px solid var(--mline)}
.pp-fr img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.35s}
.pp:hover .pp-fr img{opacity:1;transform:scale(1.03)}
.pp-btn{position:absolute;inset:0;width:100%;background:none;border:none;cursor:pointer;display:grid;place-items:center}
.pp-btn span{width:52px;height:52px;border-radius:50%;background:rgba(200,16,46,.94);position:relative;transition:.2s}
.pp-btn span::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:13px solid #fff;border-block:9px solid transparent}
.pp-btn:hover span{transform:scale(1.12)}
.pp-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#5C5A55;border:1px dashed #2A2A2E;margin:10px}
.pp-txt{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px;flex:1}
.pp-txt h4{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(21px,2.3vw,28px);line-height:1.05;color:#F4F2ED}
.pp-txt p{color:#B7B4AD;font-size:13.5px;max-width:44ch}
.pp-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--mline)}
.pp-meta div{min-width:0}
.pp-meta .k{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.pp-meta .v{font-size:12px;color:#B7B4AD}
.doc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:0;align-items:stretch}
.doc-txt{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;justify-content:center}
.doc-txt h3{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(30px,3.5vw,48px);line-height:1;margin-bottom:12px}
.doc-txt p{color:#B7B4AD;font-size:14px;max-width:42ch;margin-bottom:18px}
.doc-btn{align-self:flex-start;background:var(--red);color:#fff;border:1px solid var(--red);padding:11px 20px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.2s}
.doc-btn:hover{background:#a50d26;border-color:#a50d26}
.doc-fr{aspect-ratio:2/3;background:#050505;display:block;border-left:1px solid var(--mline);overflow:hidden}
.doc-fr img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1050px){.vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.motion-intro{grid-template-columns:1fr}.motion-cover{max-width:300px}.doc-in{grid-template-columns:1fr}.doc-fr{border-left:none;border-top:1px solid var(--mline);max-width:320px;width:100%}.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vc-p{width:36px;height:36px}}

/* PHOTOGRAPHY — one concise feature image */
.photo{background:#FBFAF7;padding-block:clamp(48px,6vw,82px);border-block:1px solid var(--ink)}
.photo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:clamp(24px,4vw,56px);align-items:start}
.photo .lead{font-family:'Bodoni Moda',serif;font-style:italic;font-size:clamp(18px,2vw,25px);max-width:42ch;color:var(--ash);margin:0}
.photo-feature{border:1px solid var(--ink);background:var(--white);overflow:hidden}
.photo-feature img{width:100%;height:auto;display:block}
@media(max-width:760px){.photo-body{grid-template-columns:1fr}.photo-feature{max-width:420px}}

.px-lead{font-family:'Bodoni Moda',serif;font-style:italic;font-size:clamp(19px,2.3vw,28px);line-height:1.35;max-width:40ch;color:var(--ink);margin-bottom:10px}
.px-sub{max-width:52ch;color:var(--ash);font-size:15px;margin-bottom:clamp(28px,4vw,46px)}
.px-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media(max-width:900px){.px-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.px-grid{grid-template-columns:1fr}}
.px{position:relative;border:1px solid var(--ink);background:#0B0B0C;overflow:hidden;cursor:zoom-in;aspect-ratio:1241/1755;padding:0;display:block;width:100%}
.px img{width:100%;height:100%;object-fit:cover;transition:.5s cubic-bezier(.2,.6,.2,1);filter:grayscale(.15)}
.px:hover img{transform:scale(1.035);filter:grayscale(0)}
.px-plate{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 13px;background:linear-gradient(transparent,rgba(11,11,12,.88) 55%);text-align:left;pointer-events:none}
.px-plate .t{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(17px,1.8vw,21px);color:#F4F2ED;line-height:1.1}
.px-plate .m{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#9B9992;margin-top:5px}
.px-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(22px,3vw,34px);padding-top:20px;border-top:1px solid var(--hair)}
.px-btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 22px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;transition:.2s}
.px-btn:hover{background:var(--red)}

/* about */
.ab{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4.5vw,72px)}
@media(max-width:860px){.ab{grid-template-columns:1fr}}
.ab .l{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(22px,2.9vw,34px);line-height:1.26;margin-bottom:.65em}
.ab p{margin-bottom:.9em;max-width:56ch}
.fx{border-top:1px solid var(--ink)}
.fx div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;padding-block:12px;border-bottom:1px solid var(--hair);font-size:14px}
.fx .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ash);padding-top:3px}

/* footer */
footer{background:var(--ink);color:var(--paper)}
footer .w{padding-block:clamp(46px,6.5vw,88px) 40px}
footer h2{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(38px,7.5vw,112px);line-height:.94;letter-spacing:-.02em;margin-bottom:30px}
footer h2 em{font-style:italic;color:var(--red)}
.fl{display:flex;gap:clamp(16px,3.5vw,48px);flex-wrap:wrap;margin-bottom:48px}
.fl a{text-decoration:none;font-size:15px;border-bottom:1px solid #3b3c3e;padding-bottom:4px;transition:.2s}
.fl a:hover{border-color:var(--red)}
.co{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #2b2c2e;padding-top:18px}
.co .mono{color:#8b8c88}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(8,8,9,.95);z-index:100;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vmin,40px)}
.lb.on{display:flex}
.lbi{position:relative;width:min(1180px,100%);max-height:92vh}
.lbi img{max-width:100%;max-height:86vh;margin-inline:auto;border:1px solid #333}
.lbi video,.lbi iframe{width:100%;max-height:86vh;border:1px solid #333;background:#000;display:block}
.lbi video{aspect-ratio:auto}
.lbx{position:absolute;top:-42px;right:0;background:none;border:1px solid #555;color:#eee;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:7px 13px;cursor:pointer}
.lbx:hover{border-color:var(--red)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mqi{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media(max-width:640px){
  .bar{align-items:flex-start;padding-block:12px}
  nav{gap:8px 14px}
  .cm{justify-content:flex-start}
}



/* multi-page portfolio architecture */
body.subpage main{min-height:70vh}
.page-intro{padding-block:clamp(48px,7vw,92px) clamp(30px,4vw,52px);border-bottom:1px solid var(--ink)}
.page-intro h1{font-size:clamp(42px,7vw,92px);max-width:13ch}
.page-intro p{max-width:66ch;margin-top:24px;font-size:clamp(15px,1.6vw,18px)}
.page-kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.page-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.featured-note{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.featured-note p{max-width:62ch;color:var(--ash);font-size:14px}
.text-link{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.text-link:hover{color:var(--red);border-color:var(--red)}
.project-back{padding-top:30px}
.project-back a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none}
.project-back a:hover{color:var(--red)}
.project-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:clamp(46px,6vw,82px)}
.project-nav a{padding:28px 0;text-decoration:none;display:block}
.project-nav a:last-child{text-align:right}
.project-nav .pn-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ash);display:block;margin-bottom:6px}
.project-nav .pn-title{font-family:'Bodoni Moda',serif;font-size:clamp(22px,3vw,36px);line-height:1.1}
.project-nav a:hover .pn-title{color:var(--red);font-style:italic}
.archive-wrap{padding-block:clamp(40px,5vw,70px) clamp(70px,8vw,120px)}
.archive-group+ .archive-group{margin-top:clamp(48px,6vw,86px)}
.archive-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:22px}
.archive-heading h2{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(30px,4vw,52px)}
.archive-heading span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.archive-card{border:1px solid var(--ink);background:var(--white);text-decoration:none;display:block;transition:transform .2s,box-shadow .2s}
.archive-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(17,18,20,.1)}
.archive-card .image{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.archive-card .image img{width:100%;height:100%;object-fit:contain;background:#E9E7E0;transition:opacity .25s}
.archive-card:hover .image img{opacity:.96}
.archive-card .copy{padding:18px}
.archive-card .eyebrow{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:7px}
.archive-card h3{font-family:'Bodoni Moda',serif;font-size:clamp(26px,2.5vw,37px);font-weight:600;line-height:1.08;letter-spacing:-.006em}
.archive-card p{font-size:13.5px;color:var(--ash);margin-top:8px;line-height:1.5}
.archive-card .meta{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--hair);margin-top:16px;padding-top:12px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.home-about{border-top:1px solid var(--ink);padding-block:clamp(52px,7vw,96px)}
.home-about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(28px,5vw,80px)}
.home-about h2{font-family:'Bodoni Moda',serif;font-size:clamp(42px,6vw,82px);font-weight:500;line-height:.96}
.home-about p{font-size:clamp(15px,1.5vw,18px);max-width:62ch}
.cap-list{display:grid;gap:0;border-top:1px solid var(--hair)}
.cap-list span{padding:11px 0;border-bottom:1px solid var(--hair);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.social-brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:30px}
.social-brand-card{border:1px solid var(--ink);background:var(--white);text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:210px}
.social-brand-card .copy{padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.social-brand-card h3{font-family:'Bodoni Moda',serif;font-size:clamp(27px,3vw,42px);font-weight:500;line-height:1}
.social-brand-card p{font-size:13px;color:var(--ash);margin-top:10px}
.social-brand-card img{width:100%;height:100%;object-fit:contain;min-height:210px;border-left:1px solid var(--ink);background:#E9E7E0;padding:10px}
.social-brand-card:hover h3{color:var(--red);font-style:italic}
.motion-support-note{padding:18px 22px;border:1px solid #343434;background:#151515;margin-bottom:28px;color:#c8c5bd;font-size:14px;max-width:70ch}
.motion-more{margin-top:26px;border-top:1px solid #343434;border-bottom:1px solid #343434}
.motion-more summary{cursor:pointer;padding:18px 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#b8b5ad;list-style:none}
.motion-more summary::-webkit-details-marker{display:none}
.motion-more summary::after{content:"+";float:right;color:#fff;font-size:18px;line-height:1}
.motion-more[open] summary::after{content:"−"}
.motion-more .motion-more-body{padding-bottom:28px}
@media(max-width:900px){.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-about-grid{grid-template-columns:1fr}.social-brand-grid{grid-template-columns:1fr}}
@media(max-width:620px){.archive-grid{grid-template-columns:1fr}.social-brand-card{grid-template-columns:1fr}.social-brand-card img{border-left:none;border-top:1px solid var(--ink);min-height:220px}.project-nav{grid-template-columns:1fr}.project-nav a:last-child{text-align:left;border-top:1px solid var(--hair)}}


/* V7 — clarity, complete-image previews and restrained moving-image feature */
.featured-note{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
.featured-note p{max-width:55ch;color:var(--ash);font-size:13.5px;line-height:1.55}
.text-link{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);white-space:nowrap;padding-bottom:3px}
.text-link:hover{color:var(--red);border-color:var(--red)}
.home-motion{border-top:1px solid var(--ink);padding-block:clamp(52px,7vw,90px)}
.home-motion-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}
.home-motion-head h2{font-family:'Bodoni Moda',serif;font-size:clamp(38px,5vw,68px);font-weight:600;line-height:1;letter-spacing:-.012em}
.home-motion-head p{max-width:46ch;color:var(--ash);font-size:14px;line-height:1.55;text-align:right}
.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.hm-card{appearance:none;border:1px solid var(--ink);background:var(--white);padding:0;text-align:left;cursor:pointer;color:inherit;display:block;width:100%;transition:transform .2s,box-shadow .2s}
.hm-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(17,18,20,.09)}
.hm-poster{position:relative;aspect-ratio:16/10;background:#0A0A0A;overflow:hidden;border-bottom:1px solid var(--ink)}
.hm-poster img{width:100%;height:100%;object-fit:contain;background:#0A0A0A}
.hm-play{position:absolute;left:18px;bottom:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(242,241,236,.94);border:1px solid rgba(17,18,20,.35)}
.hm-play::before{content:"";border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.hm-copy{padding:16px 17px 18px}
.hm-copy span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.hm-copy h3{font-family:'Bodoni Moda',serif;font-size:clamp(25px,2.4vw,34px);font-weight:600;line-height:1.05;margin-top:6px}
.hm-copy p{font-size:13px;color:var(--ash);line-height:1.5;margin-top:7px}
.archive-intro h1{font-weight:600;letter-spacing:-.018em}
.archive-heading h2{font-weight:600;letter-spacing:-.01em}
.motion-support-note{display:none}
@media(max-width:820px){.home-motion-head{align-items:start;flex-direction:column}.home-motion-head p{text-align:left}.hm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.featured-note{flex-direction:column}.hm-grid{grid-template-columns:1fr}}


/* V8 — refined typography, purposeful thumbnails, interactive about section */
body{font-kerning:normal;text-rendering:optimizeLegibility}
nav a{position:relative;border-bottom:none;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .25s ease,color .25s ease}
nav a:hover::after,nav a[aria-current="page"]::after{transform:scaleX(1)}
nav a[aria-current="page"]{color:var(--red)}
h1,.page-intro h1,.home-about h2,.home-motion-head h2,.archive-heading h2,footer h2{letter-spacing:-.008em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(40px,8vw,120px);max-width:13.5ch}
.page-intro h1{font-size:clamp(42px,6.6vw,88px);max-width:12ch}
.home-about h2{font-size:clamp(40px,5.3vw,72px)}
.home-motion-head h2{font-size:clamp(36px,4.8vw,62px)}
.rw{position:relative;overflow:hidden;transition:background-color .25s,transform .22s,border-color .22s}
.rw:hover,.rw:focus-visible{background:rgba(255,255,255,.34);transform:translateX(5px)}
.rw .t{letter-spacing:0;line-height:1.12}
.rw:hover .th{transform:scale(1.02)}
.rw .th{background-size:cover;transition:transform .3s ease}
.pv{border-color:#BDB8AD;box-shadow:0 16px 34px rgba(17,18,20,.07)}
.pv img,.pv img.pv-def{object-fit:cover;background:#E9E7E0;transform:scale(1.01)}
.archive-card{overflow:hidden;border-color:#C5C0B4}
.archive-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(17,18,20,.11)}
.archive-card .image{aspect-ratio:4/3;background:#E9E7E0}
.archive-card .image img{width:100%;height:100%;object-fit:cover;background:#E9E7E0;transition:transform .45s cubic-bezier(.2,.6,.2,1),opacity .25s}
.archive-card:hover .image img{opacity:1;transform:scale(1.035)}
.archive-card h3{letter-spacing:0;line-height:1.12}
.text-link{position:relative;border-bottom:none;padding-bottom:4px}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transition:transform .25s ease;transform-origin:left center;transform:scaleX(1)}
.text-link:hover::after{transform:scaleX(.35)}
.home-about-grid{align-items:start}
.about-copy{max-width:58ch}
.cap-accordion{display:grid;gap:10px}
.cap-item{border:1px solid var(--hair);background:rgba(255,255,255,.5);transition:border-color .25s,transform .25s,box-shadow .25s}
.cap-item[open]{border-color:var(--ink);box-shadow:0 12px 28px rgba(17,18,20,.06);background:rgba(255,255,255,.72)}
.cap-item:hover{transform:translateY(-2px);border-color:#B9B4A8}
.cap-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;gap:14px}
.cap-item summary::-webkit-details-marker{display:none}
.cap-item summary::after{content:"+";font-family:'Archivo',sans-serif;font-size:18px;line-height:1;color:var(--red);transition:transform .22s ease}
.cap-item[open] summary::after{content:"−";transform:rotate(180deg)}
.cap-panel{padding:0 18px 18px}
.cap-panel p{font-size:14px;line-height:1.6;color:var(--ash);max-width:48ch;margin:0}
.cap-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cap-links a{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:8px 10px;border:1px solid var(--hair);transition:.2s;background:#fff}
.cap-links a:hover{border-color:var(--red);color:var(--red)}
.footer-intro{font-size:15px;color:#8a8a86;margin:-8px 0 20px;font-family:'Archivo',sans-serif}
.legal-note{color:#8b8c88;font-size:12px;line-height:1.65;max-width:78ch;margin-top:16px}
.co{align-items:flex-start}
.home-motion,.page-intro,.archive-group,.home-about,.hero,.ix{will-change:transform,opacity}
@media(max-width:760px){h1,.page-intro h1,.home-about h2{line-height:1.03}.cap-item summary{padding:15px 16px}.cap-panel{padding:0 16px 16px}}


/* V9 — generated 4:3 project covers */
.project-cover{width:100%;aspect-ratio:4/3;margin:0 0 clamp(20px,2.8vw,34px);border:1px solid var(--ink);overflow:hidden;background:#0B0B0B;box-shadow:0 18px 42px rgba(17,18,20,.08)}
.project-cover img{width:100%;height:100%;object-fit:cover;display:block}
.project-cover.reveal{transform:translateY(22px);opacity:0;transition:opacity .65s ease,transform .65s cubic-bezier(.2,.6,.2,1)}
.project-cover.reveal.in{transform:none;opacity:1}
@media(max-width:760px){.project-cover{margin-bottom:22px}}


/* V10 — international portfolio typography */
:root{
  --display:"Instrument Sans","Archivo",system-ui,sans-serif;
  --hero:"Instrument Serif","Instrument Sans",Georgia,serif;
  --editorial:"Bodoni Moda",Georgia,serif;
}

/* Primary hierarchy: contemporary, precise and globally legible. */
h1,
.page-intro h1,
.ch h2,
.rw .t,
.home-about h2,
.home-motion-head h2,
.hm-copy h3,
.motion-copy h3,
.doc-txt h3,
footer h2,
.archive-heading h2,
.archive-card h3,
.social-intro h3,
.social-brand-card h3,
.brand-name,
.project-nav .pn-title,
.pp-txt h4{
  font-family:var(--display);
  font-style:normal;
  font-variation-settings:"wdth" 100;
}

h1{
  font-weight:500;
  font-size:clamp(44px,7.35vw,112px);
  line-height:.93;
  letter-spacing:-.048em;
  max-width:15ch;
}
.page-intro h1{
  font-weight:500;
  font-size:clamp(42px,6.2vw,84px);
  line-height:.95;
  letter-spacing:-.043em;
  max-width:13.5ch;
}
.ch h2{
  font-weight:500;
  letter-spacing:-.042em;
  line-height:.96;
}
.rw .t{
  font-weight:500;
  letter-spacing:-.027em;
  line-height:1.04;
}
.home-about h2,
.home-motion-head h2,
.archive-heading h2,
footer h2{
  font-weight:500;
  letter-spacing:-.042em;
  line-height:.96;
}
.hm-copy h3,
.motion-copy h3,
.doc-txt h3,
.archive-card h3,
.social-intro h3,
.social-brand-card h3,
.brand-name,
.project-nav .pn-title,
.pp-txt h4{
  font-weight:500;
  letter-spacing:-.027em;
  line-height:1.02;
}

/* Preserve a controlled editorial signature only where it adds meaning. */
h1 em,
footer h2 em{
  font-family:var(--editorial);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
}
.ch .cn,
.sf,
.ps .bg,
.motion .lead,
.photo .lead,
.px-lead{
  font-family:var(--editorial);
}
.social-brand-card:hover h3{font-style:normal}

@media(max-width:760px){
  h1{font-size:clamp(42px,13vw,68px);line-height:.96;letter-spacing:-.042em;max-width:13ch}
  .page-intro h1{font-size:clamp(40px,11.5vw,62px);line-height:.97;letter-spacing:-.038em}
  .ch h2,.home-about h2,.home-motion-head h2,footer h2{line-height:.98}
}

/* V12 — selected-work title refinement and live-project link */
.rw .t{
  font-family:"Archivo",sans-serif;
  font-weight:600;
  font-size:clamp(22px,2.35vw,34px);
  line-height:1.02;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.rw .n,
.rw .d,
.rw .y{
  line-height:1.45;
}
.rw .y{
  white-space:nowrap;
  text-align:right;
}
.rw .d{
  max-width:12ch;
}
.live-site-image{
  display:block;
  overflow:hidden;
  text-decoration:none;
}
.live-site-image img{
  transition:transform .55s cubic-bezier(.2,.6,.2,1),filter .35s ease;
}
.live-site-image:hover img,
.live-site-image:focus-visible img{
  transform:scale(1.008);
  filter:brightness(.96);
}
.live-site-figure figcaption{
  margin-top:12px;
}
.live-site-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  color:var(--ink);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.055em;
  line-height:1.4;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s ease,gap .2s ease;
}
.live-site-link:hover,
.live-site-link:focus-visible{
  color:var(--red);
  gap:12px;
}
@media(max-width:760px){
  .rw .t{font-size:clamp(19px,6vw,27px);letter-spacing:-.03em}
}


/* ─────────────────────────────────────────────────────────
   V13 — Display voice restored.
   Instrument Serif for the moments that carry the brand
   (page headlines + project names). Instrument Sans stays
   for structural headings. Two voices, deliberate contrast.
   ───────────────────────────────────────────────────────── */
h1,
.page-intro h1,
.ch h2,
.rw .t,
footer h2{
  font-family:var(--hero);
  font-weight:400;
  font-style:normal;
}

h1{
  letter-spacing:-.022em;
  line-height:.95;
}
.page-intro h1{
  letter-spacing:-.02em;
  line-height:.97;
}
.ch h2{
  letter-spacing:-.02em;
  line-height:.97;
}
.rw .t{
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.06;
  font-size:clamp(25px,2.7vw,39px);
}
footer h2{
  letter-spacing:-.02em;
}

/* Italic emphasis now comes from the same family — no font swap mid-sentence */
h1 em,
footer h2 em{
  font-family:var(--hero);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
}


/* ─────────────────────────────────────────────────────────
   V14 — Hero density.
   The headline was consuming the full first viewport
   (5 lines at ~106px). Reduced scale, widened measure,
   tightened the vertical rhythm so work appears sooner.
   ───────────────────────────────────────────────────────── */
.hero{
  padding-block:clamp(28px,3.6vw,52px) clamp(22px,2.6vw,34px);
}
h1{
  font-size:clamp(38px,5.15vw,74px);
  max-width:23ch;
  line-height:.99;
  letter-spacing:-.018em;
}
.hf{
  margin-top:clamp(18px,2.2vw,30px);
  grid-template-columns:minmax(0,58ch) auto;
  justify-content:start;
  gap:clamp(22px,4.5vw,72px);
  align-items:end;
}
.lede{
  max-width:58ch;
  font-size:clamp(15px,1.45vw,17px);
  line-height:1.55;
}

/* Work list starts higher up the page */
.ix{
  padding-block:clamp(24px,3.2vw,44px);
}

@media(max-width:940px){
  .hf{grid-template-columns:1fr;gap:20px}
}
@media(max-width:760px){
  .hero{padding-block:24px 20px}
  h1{font-size:clamp(34px,9.4vw,50px);max-width:20ch;line-height:1.02}
  .hf{margin-top:18px}
}


/* ═════════════════════════════════════════════════════════════
   V15 — TYPE SYSTEM. Single source of truth.
   Three families. One job each. Bodoni Moda removed entirely.
   Nothing below this block should be overridden.
   ═════════════════════════════════════════════════════════════ */

:root{
  --display:"Instrument Serif",Georgia,serif;
  --text:"Archivo",system-ui,sans-serif;
  --label:"JetBrains Mono",ui-monospace,monospace;
}

/* ── DISPLAY — Instrument Serif. Headlines and names only. ── */
h1,
.page-intro h1,
.ch h2,
.ch .cn,
.rw .t,
.lg,
footer h2,
.home-about h2,
.home-motion-head h2,
.archive-heading h2,
.archive-card h3,
.social-intro h3,
.social-brand-card h3,
.brand-name,
.hm-copy h3,
.motion-copy h3,
.doc-txt h3,
.pp-txt h4,
.project-nav .pn-title,
.px-plate .t{
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
}
.lg i,
h1 em,
footer h2 em{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
}

/* ── READING COPY — Archivo. Including the large lead lines,
      which were a second serif and caused the clash.        ── */
body,
p,
.lede,
.ps .bg,
.ps p,
.motion .lead,
.photo .lead,
.px-lead,
.ab .l,
.sf,
.archive-card p,
.out .v{
  font-family:var(--text);
  font-style:normal;
}
.ps .bg,
.motion .lead,
.photo .lead,
.px-lead{
  font-weight:500;
  letter-spacing:-.011em;
}

/* ── LABELS — JetBrains Mono. Meta, nav, eyebrows, numbers. ── */
.mono,
nav a,
.rw .n,
.rw .d,
.rw .y,
.ps h3,
.out .k,
.brand-sub,
.archive-card .eyebrow,
.pp-meta .k,
.doc-btn,
.mqi b{
  font-family:var(--label);
}

/* ── Marquee: was alternating Bodoni italic with mono.
      Now one voice, differentiated by weight and colour.   ── */
.mqi span{
  font-family:var(--text);
  font-style:normal;
  font-size:11px;
  letter-spacing:.02em;
  color:var(--ash);
}
.mqi b{
  font-size:11px;
  letter-spacing:.14em;
}

/* ── Working languages: was Bodoni, now matches body copy ── */
.sf{
  font-weight:500;
  letter-spacing:-.005em;
}


/* ═════════════════════════════════════════════════════════════
   V15 — ALIGNMENT
   Hero: languages block was floating in dead space with nothing
   to align to. Now it sits on the same left edge as the lede,
   beneath it, on a shared baseline.
   Rows: meta column was 108px, forcing 3–4 line wraps and
   ragged row heights. Widened and top-aligned.
   ═════════════════════════════════════════════════════════════ */

.hf{
  display:block;
  max-width:60ch;
  margin-top:clamp(20px,2.4vw,32px);
}
.lede{
  max-width:60ch;
  margin:0;
}
.lang{
  text-align:left;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--hair);
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.lang .mono{margin-bottom:0}
.sf{font-size:15px}

/* Headline sits tighter now it is shorter */
h1{
  font-size:clamp(40px,6.2vw,86px);
  max-width:18ch;
  line-height:1.0;
  letter-spacing:-.015em;
}

/* ── Project rows: even rhythm, no ragged wrapping ── */
.rw{
  grid-template-columns:52px minmax(0,1fr) 168px 118px;
  align-items:start;
  padding-block:19px;
  gap:16px;
}
.rw .t{
  line-height:1.0;
}
.rw .n,
.rw .d,
.rw .y{
  line-height:1.35;
  padding-top:6px;
}
.rw .d{
  max-width:none;
}
.rw .y{
  text-align:right;
  white-space:nowrap;
}

@media(max-width:940px){
  .rw{grid-template-columns:30px 64px minmax(0,1fr) 82px;gap:11px;align-items:center}
  .rw .n,.rw .d,.rw .y{padding-top:0}
}
@media(max-width:760px){
  h1{font-size:clamp(34px,9.6vw,54px);max-width:16ch}
  .hf{max-width:none}
  .lede{max-width:none}
}


/* ═════════════════════════════════════════════════════════════
   V16 — TWO FAMILIES. FINAL.
   Instrument Serif removed: it is a condensed face, which reads
   as stretched at display sizes. Bodoni removed earlier for its
   hairline strokes. Heavy weights avoided.
   Archivo 500 carries everything. Mono carries labels.
   ═════════════════════════════════════════════════════════════ */

:root{
  --display:"Archivo",system-ui,sans-serif;
  --text:"Archivo",system-ui,sans-serif;
  --label:"JetBrains Mono",ui-monospace,monospace;
}

h1,.page-intro h1,.ch h2,.ch .cn,.rw .t,.lg,footer h2,
.home-about h2,.home-motion-head h2,.archive-heading h2,
.archive-card h3,.social-intro h3,.social-brand-card h3,
.brand-name,.hm-copy h3,.motion-copy h3,.doc-txt h3,
.pp-txt h4,.project-nav .pn-title,.px-plate .t{
  font-family:var(--display);
  font-weight:500;
  font-style:normal;
}

/* Italic emphasis: same family, real italic, no face swap */
.lg i,h1 em,footer h2 em{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
}

/* Body: nothing heavier than 500. The 600 bold in the lede
   was the weight being read as "very bold". */
body,p,.lede,.ps p,.archive-card p,.out .v{
  font-family:var(--text);
  font-weight:400;
}
.lede b,.ps .bg,.motion .lead,.photo .lead,.px-lead,.ab .l,.sf{
  font-family:var(--text);
  font-weight:500;
  font-style:normal;
}


/* ═════════════════════════════════════════════════════════════
   V16 — HERO. Headline spans the full content width.
   Previously it sat in an 18ch column on a wide viewport,
   leaving the entire right half empty. Now it runs edge to
   edge across two lines, and the lede + languages sit beneath
   it as a balanced two-column base.
   ═════════════════════════════════════════════════════════════ */

.hero{
  padding-block:clamp(38px,4.6vw,72px) clamp(26px,3vw,42px);
}

h1{
  font-size:clamp(40px,7.2vw,116px);
  max-width:none;
  line-height:.97;
  letter-spacing:-.035em;
  font-weight:500;
}
h1 em{
  letter-spacing:-.03em;
}

/* Lede left, languages right — balanced base under the headline */
.hf{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(28px,5vw,90px);
  max-width:none;
  margin-top:clamp(28px,3.2vw,44px);
  padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--hair);
}
.lede{
  max-width:62ch;
  margin:0;
  font-size:clamp(15px,1.42vw,17px);
  line-height:1.6;
}
.lang{
  text-align:right;
  margin:0;
  padding:0;
  border:none;
  display:block;
  white-space:nowrap;
}
.lang .mono{margin-bottom:6px}
.sf{font-size:16px}

@media(max-width:940px){
  .hf{grid-template-columns:1fr;gap:22px}
  .lang{text-align:left;white-space:normal}
}
@media(max-width:760px){
  .hero{padding-block:28px 22px}
  h1{font-size:clamp(34px,10.2vw,58px);line-height:1.0;letter-spacing:-.028em}
  .lede{max-width:none}
}

/* ── Project rows: title no longer condensed, so tracking eases ── */
.rw .t{
  font-weight:500;
  letter-spacing:-.024em;
  line-height:1.05;
  font-size:clamp(24px,2.6vw,37px);
}


/* ═════════════════════════════════════════════════════════════
   V17 — Interior page headlines.
   The homepage h1 was widened in V16, but .page-intro h1
   (archive) kept max-width:12ch — a narrow column on a wide
   viewport, leaving the right side empty. Same treatment now.
   ═════════════════════════════════════════════════════════════ */

.page-intro{
  padding-block:clamp(30px,3.6vw,54px) clamp(24px,3vw,40px);
}
.page-intro h1{
  font-size:clamp(38px,6.4vw,98px);
  max-width:none;
  line-height:.99;
  letter-spacing:-.034em;
  font-weight:500;
}
.page-intro p{
  max-width:72ch;
  margin-top:clamp(20px,2.4vw,30px);
  font-size:clamp(15px,1.42vw,17px);
  line-height:1.6;
}

/* Section headings on archive — reduce the dead gap between
   the title and its right-hand label on wide screens */
.archive-heading{
  align-items:baseline;
  padding-bottom:12px;
}
.archive-heading h2{
  font-size:clamp(28px,3.4vw,46px);
  font-weight:500;
  letter-spacing:-.028em;
}

/* Motion and photography page headers use .ch (inline flex) —
   already full width, but the letter markers read oddly next to
   numbered projects. Sized down to sit as a label, not a title. */
.ch .cn{
  font-size:clamp(24px,3.2vw,44px);
  font-style:normal;
  font-weight:500;
}

@media(max-width:760px){
  .page-intro h1{font-size:clamp(34px,10.4vw,56px);letter-spacing:-.026em}
  .page-intro{padding-block:26px 22px}
}


/* ═════════════════════════════════════════════════════════════
   V18 — CHARACTER PASS
   The typeface is settled. Distinctiveness now comes from
   composition: scale contrast, a disciplined index system,
   and red used as structure rather than decoration.
   ═════════════════════════════════════════════════════════════ */

/* ── 1. SCALE CONTRAST ───────────────────────────────────────
   A neutral grotesque becomes deliberate when the jump between
   display and label is extreme and consistent. Display tracks
   tighter; labels track wider and sit smaller. The gap is the
   design. ──────────────────────────────────────────────────── */

h1,
.page-intro h1{
  letter-spacing:-.045em;
}
.ch h2,
.home-about h2,
.home-motion-head h2,
.archive-heading h2,
footer h2{
  letter-spacing:-.038em;
}
.rw .t{
  letter-spacing:-.032em;
}

.mono,
nav a,
.rw .d,
.ps h3,
.out .k,
.archive-card .eyebrow,
.brand-sub,
.pp-meta .k{
  font-size:10px;
  letter-spacing:.185em;
  font-weight:500;
}

/* ── 2. THE INDEX ────────────────────────────────────────────
   Numbers were 11px grey — invisible. As a red index anchored
   in its own column they become the signature of the work list.
   ──────────────────────────────────────────────────────────── */

.rw{
  grid-template-columns:64px minmax(0,1fr) 168px 118px;
}
.rw .n{
  font-size:13px;
  letter-spacing:.06em;
  color:var(--red);
  font-weight:500;
  padding-top:9px;
  transition:color .2s;
}
.rw .y{
  color:var(--ash);
}
.rw:hover .n,
.rw:focus-visible .n{
  color:var(--ink);
}

/* Project page number marker — same index language */
.ch .cn{
  color:var(--red);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(13px,1.3vw,16px);
  letter-spacing:.12em;
  font-weight:500;
  align-self:center;
}

/* ── 3. RED AS STRUCTURE ─────────────────────────────────────
   Red now means one thing consistently: this is a label, a
   category or an index. Never decoration. ──────────────────── */

.ps h3,
.out .k,
.archive-card .eyebrow,
.brand-sub{
  color:var(--red);
}

/* Section eyebrows get a rule, not just a dot — a repeated
   structural mark across every section head. */
.home-motion-head .mono,
.home-about .mono,
.archive-heading span{
  position:relative;
  padding-top:14px;
  display:inline-block;
}
.home-motion-head .mono::before,
.home-about .mono::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:34px; height:2px;
  background:var(--red);
}

/* ── 4. INTERACTION ──────────────────────────────────────────
   Rows should feel authored, not default. ──────────────────── */

.rw{
  transition:background-color .22s cubic-bezier(.2,.6,.2,1),
             transform .22s cubic-bezier(.2,.6,.2,1);
}
.rw:hover,
.rw:focus-visible{
  background:rgba(200,16,46,.035);
  transform:translateX(7px);
}
.rw:hover .t,
.rw:focus-visible .t{
  color:var(--red);
}

.archive-card{
  transition:transform .22s cubic-bezier(.2,.6,.2,1),
             border-color .22s;
}
.archive-card:hover{
  transform:translateY(-4px);
  border-color:var(--red);
}

/* ── 5. MARQUEE ──────────────────────────────────────────────
   Was two competing voices. Now one rhythm: red mono category,
   quiet sans descriptor, consistent spacing. ───────────────── */

.mqi b{
  font-size:10px;
  letter-spacing:.185em;
  color:var(--red);
  font-weight:500;
  margin-inline:9px;
}
.mqi span{
  font-size:10px;
  letter-spacing:.05em;
  color:var(--ash);
  text-transform:uppercase;
  margin-inline:9px;
}

@media(max-width:940px){
  .rw{grid-template-columns:34px 64px minmax(0,1fr) 82px}
  .rw .n{font-size:11px;padding-top:0}
}