@import url(/assets/fonts/fonts.css);

:root{
  --bg:#F5F3EE; --ink:#151515; --mute:#6E6A63; --rule:#D9D5CC; --accent:#993B26; --card:#EAE7E0;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(20px,8.3vw,120px);
  --max:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.label{font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0}
.mute{color:var(--mute)}
.rule{border-top:1px solid var(--rule)}

/* nav / footer */
.nav{display:flex;justify-content:space-between;align-items:center;padding-top:32px;padding-bottom:32px;gap:24px}
.nav .name{font:500 22px/1 var(--serif);text-decoration:none}
.nav ul{display:flex;gap:clamp(16px,2.5vw,36px);list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{text-decoration:none}
.nav ul a:hover,.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot{border-top:1px solid var(--rule);margin-top:0}
.foot .wrap{padding-top:56px;padding-bottom:64px}
.foot .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot .name{font:500 22px/1 var(--serif)}
.foot ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:15px}
.foot ul a{text-decoration:none}
.foot small{display:block;margin-top:20px;font-size:13px;color:var(--mute)}

/* home */
.hero{padding-top:clamp(64px,10vw,150px);padding-bottom:clamp(64px,9vw,130px)}
.hero h1{font:400 clamp(44px,5.6vw,80px)/1.04 var(--serif);letter-spacing:-.015em;margin:32px 0;max-width:1080px}
.hero p.lede{font-size:clamp(18px,1.5vw,21px);color:var(--mute);max-width:720px;margin:0}
.work-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:28px}
.work-head h2{font:400 30px/1.2 var(--serif);margin:0}
.rows{list-style:none;margin:0 0 clamp(80px,10vw,140px);padding:0}
.rows a{display:grid;grid-template-columns:48px 1fr 220px 240px;gap:32px;padding:40px 0;border-top:1px solid var(--rule);text-decoration:none;align-items:start}
.rows a:hover .title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.rows .num{font-size:14px;color:var(--mute);padding-top:4px}
.rows .client{font:600 13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.rows .title{font:400 36px/1.15 var(--serif);margin:0}
.rows .sector{font-size:15px;color:var(--mute);line-height:1.5}
.rows .metric{text-align:right}
.rows .metric b{display:block;font:400 36px/1.1 var(--serif);color:var(--accent)}
.rows .metric span{display:block;font-size:14px;color:var(--mute);margin-top:6px;line-height:1.4}
.about{display:grid;grid-template-columns:360px 1fr;gap:80px;padding-top:72px;padding-bottom:140px}
.about h2{font:400 30px/1.2 var(--serif);margin:0}
.about p{font-size:19px;line-height:1.6;margin:0 0 40px}
.cv{list-style:none;margin:0;padding:0}
.cv li{display:grid;grid-template-columns:110px 1fr auto;gap:24px;padding:14px 0;border-top:1px solid var(--rule);font-size:15px}
.cv li span:first-child,.cv li span:last-child{color:var(--mute)}

/* work page */
.back{font-size:14px;color:var(--mute);text-decoration:none}
.back:hover{text-decoration:underline}
.phead{padding-top:clamp(48px,6vw,88px);padding-bottom:72px}
.phead .label{margin-top:24px}
.phead h1{font:400 clamp(40px,4.7vw,68px)/1.06 var(--serif);letter-spacing:-.01em;margin:24px 0;max-width:1080px}
.phead .lede{font-size:clamp(18px,1.5vw,21px);color:var(--mute);line-height:1.5;max-width:820px;margin:0}
.snap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:96px}
.snap div{border-top:1px solid var(--rule);padding-top:20px}
.snap .v{font:400 28px/1.25 var(--serif);margin:10px 0}
.snap .v.accent{color:var(--accent)}
.snap .n{font-size:14px;color:var(--mute);line-height:1.4;margin:0}
.beats{padding-bottom:96px;display:grid;gap:48px}
.beat{display:grid;grid-template-columns:240px minmax(0,800px);gap:80px}
.beat p{font-size:20px;line-height:1.6;margin:0}
.beat p.through{font:italic 400 clamp(28px,2.7vw,38px)/1.18 var(--serif)}
.sec-title{font:400 30px/1.2 var(--serif);margin:0 0 24px}
.quotes{padding-bottom:96px}
.quote{border-top:1px solid var(--rule);padding:36px 0;max-width:960px}
.quote blockquote{font:400 clamp(24px,2.4vw,34px)/1.25 var(--serif);margin:0 0 14px}
.quote cite{font-style:normal;font-size:14px;color:var(--mute)}
.quote cite a{text-underline-offset:3px}
.work{padding-bottom:96px}
.result{border-top:1px solid var(--rule)}
.result .wrap{display:flex;align-items:center;gap:48px;padding-top:72px;padding-bottom:96px}
.result b{font:400 clamp(72px,8.3vw,120px)/1 var(--serif);color:var(--accent);white-space:nowrap}
.result p{font:400 30px/1.3 var(--serif);margin:0 0 12px}
.result p.big{font-size:38px}
.result small{display:block;font-size:16px;color:var(--mute)}
.next{border-top:1px solid var(--rule)}
.next .wrap{padding-top:48px;padding-bottom:120px}
.next a{display:inline-block;font:400 44px/1.2 var(--serif);text-decoration:none;margin-top:12px}
.next a:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}

/* render viewers */
.viewers{display:grid;gap:24px}
.viewers.two{grid-template-columns:1fr 1fr}
.viewers.dm{grid-template-columns:3fr 1fr;align-items:start}
.viewers.four{grid-template-columns:repeat(4,1fr)}
figure.viewer{margin:0;min-width:0}
.viewers>*{min-width:0}
.vp{position:relative;height:760px;overflow:auto;border:1px solid var(--rule);border-radius:4px;background:var(--card);overscroll-behavior:contain;scrollbar-width:thin}
.viewers.two .vp{height:620px}
.viewers.four .vp{height:auto;aspect-ratio:6/5;overflow:hidden}
.viewers.four .cap{flex-direction:column;gap:4px}
.vp img{width:100%;height:auto;display:block}
.vp img+img{margin-top:-1px}
.vp button.zoom{position:absolute;inset:0;width:100%;background:none;border:0;cursor:zoom-in;padding:0}
.cap{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-top:12px;flex-wrap:wrap}
.cap .links{display:flex;gap:16px;white-space:nowrap}
.cap button{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cap a{color:var(--mute);text-underline-offset:3px}
.cap .na{color:var(--mute)}
.more{margin-top:40px}
.more .label{margin-bottom:16px}

/* posts */
.types{border-top:0}
.type{display:grid;grid-template-columns:280px 1fr;gap:26px;padding:32px 0 40px;border-top:1px solid var(--rule)}
.type h3{font:400 26px/1.2 var(--serif);margin:0 0 10px}
.type .desc{font-size:14px;color:var(--mute);line-height:1.5;margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px}
.post{display:block;text-decoration:none}
.post img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;border-radius:4px;background:var(--card)}
.post .d{display:block;font:500 12px/1.4 var(--sans);color:var(--mute);margin:10px 0 6px}
.post .l{display:block;font-size:14px;line-height:1.45}
.post:hover .d{text-decoration:underline;text-underline-offset:3px}
.note{font-size:14px;color:var(--mute);max-width:820px;margin:32px 0 0;line-height:1.5}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(21,21,21,.92);display:none;overflow:auto;overscroll-behavior:contain}
.lb.open{display:block}
.lb .bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;color:#fff;background:rgba(21,21,21,.85);font-size:14px;z-index:1;gap:16px}
.lb .bar a{color:#ddd}
.lb .bar button{font:inherit;color:#fff;background:none;border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:6px 12px;cursor:pointer}
.lb .pg{max-width:1440px;margin:0 auto 60px;padding:0 20px}
.lb .pg.narrow{max-width:480px}
.lb .pg img{width:100%;height:auto;display:block}
.lb .pg img+img{margin-top:-1px}
body.lb-open{overflow:hidden}

@media (max-width:980px){
  .rows a{grid-template-columns:32px 1fr;gap:12px 20px}
  .rows .sector{grid-column:2}
  .rows .metric{grid-column:2;text-align:left}
  .rows .title{font-size:30px}
  .about{grid-template-columns:1fr;gap:24px}
  .snap{grid-template-columns:1fr;gap:24px}
  .beat{grid-template-columns:1fr;gap:12px}
  .beat p{font-size:18px}
  .type{grid-template-columns:1fr}
  .viewers.two,.viewers.dm{grid-template-columns:1fr}
  .viewers.four{grid-template-columns:1fr 1fr}
  .vp,.viewers.two .vp{height:560px}
  .viewers.four .vp{height:auto}
  .result .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .result p,.result p.big{font-size:24px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav ul{gap:14px;font-size:14px}
  .nav ul li.hide-s{display:none}
  .tiles{grid-template-columns:1fr 1fr;gap:24px 14px}
  .cv li{grid-template-columns:72px 1fr;}
  .cv li span:last-child{grid-column:2;margin-top:-10px}
  .next a{font-size:34px}
  .vp,.viewers.two .vp{height:480px}
  .viewers.four .vp{height:auto}
}