:root{
  --paper:#EDE2C9;
  --paper-hi:#F3EBD8;
  --ink:#211B13;
  --ink-2:#4A4133;
  --mute:#7A6D57;
  --line:rgba(33,27,19,.2);
  --panel:#E9DEC8;
  --foot:#E2D3B4;
  --zhu:#A3452F;
  --r0:#4A2F27;--r1:#7C3F2B;--r2:#B4573A;--r3:#DB8344;--r4:#EEB25A;--r5:#F7D98E;--light:#FFEFC2;
  --serif:"EB Garamond",Georgia,serif;
  --gutter:clamp(20px,5vw,80px);
  --side:max(var(--gutter),calc((100% - 1160px) / 2));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18.5px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:oldstyle-nums;overflow-x:hidden}
/* a clean sheet: only a whisper of grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--r5);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--zhu);outline-offset:4px}
.serif{font-weight:500;letter-spacing:-.018em}
em{font-style:normal}
sub{font-size:.68em;line-height:0;vertical-align:-.18em}

#page{position:relative;background:#F2EAD8}
.atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;will-change:transform;animation:drift 34s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(2.6vw,-2.2vh)}}

.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);transition:background .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(237,226,201,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:500;letter-spacing:.005em;color:var(--ink);opacity:0;transform:translateY(-4px);transition:opacity .5s,transform .5s}
.brand .mk{width:24px;height:24px}
.nav.brand-on .brand{opacity:1;transform:none}
.links{display:flex;align-items:center;gap:clamp(22px,3vw,40px);font-size:17px;color:var(--ink-2)}
.links a{position:relative;padding:2px 0;transition:color .3s}
.links a:hover,.links a.on{color:var(--ink)}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--zhu);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}

section{position:relative;z-index:2}

/* engraved plates */
.tile{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.tf{position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;animation:float var(--fl,11s) ease-in-out var(--fd,0s) infinite alternate}
.tf svg,.plate svg{display:block;width:100%;height:100%}
.plate{position:relative;border-radius:4px;overflow:hidden}
/* collage: a scan or photograph, cut against flat colour and ruled paper */
.cl{position:absolute;inset:0;overflow:hidden;background:#F6F0E2}
.cl>*{position:absolute;display:block}
.cl .crop{overflow:hidden}
.cl .crop img{position:absolute;display:block;height:auto;max-width:none}
.cl .cut{border-radius:50%}
.cl .ink{mix-blend-mode:multiply}
.cl svg{display:block;width:100%;height:100%}
.cl .grid{background-color:#F4EEDF;background-image:linear-gradient(rgba(176,92,70,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(176,92,70,.28) 1px,transparent 1px);background-size:9px 9px}
.cl .dots{background-color:#F7F2E4;background-image:radial-gradient(circle,rgba(42,36,27,.35) .8px,transparent 1.2px);background-size:11px 11px}
@keyframes float{from{transform:translateY(-5px) rotate(-.4deg)}to{transform:translateY(5px) rotate(.4deg)}}

/* the mark: layered discs, light coming back */
.lm{display:block;overflow:visible}
.lm .ly{transform:translate(0,0);transition:transform 1.3s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 110ms)}
.lm.on .ly{transform:translate(calc(var(--o) * 1px),calc(var(--o) * -1px))}

/* hero */
.hero{height:100svh;min-height:640px;overflow:hidden}
.mosaic{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.spark{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;background:radial-gradient(closest-side,#FFF9E8 0%,rgba(255,239,194,.95) 10%,rgba(238,178,90,.42) 38%,rgba(238,178,90,0) 100%);opacity:0;pointer-events:none;z-index:2}
.spark.go{animation:spark 1.7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes spark{0%{opacity:0;transform:scale(.03)}14%{opacity:1;transform:scale(.3)}55%{opacity:.85;transform:scale(1.2)}100%{opacity:0;transform:scale(2.4)}}
.hero-copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px var(--gutter) 0;pointer-events:none}
.hero-copy::before{content:"";position:absolute;left:50%;top:52%;width:min(820px,96vw);height:min(560px,70vh);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(240,231,210,.94),rgba(240,231,210,.6) 55%,rgba(240,231,210,0));z-index:-1;opacity:0;transition:opacity 1.4s}
.hero.ready .hero-copy::before{opacity:1}
.hc{opacity:0;transform:translateY(10px);transition:opacity 1.3s cubic-bezier(.2,.7,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1)}
.hero.ready .hc{opacity:1;transform:none}
.hero .lm{width:clamp(62px,8.5vh,88px);height:auto}
.wordmark{margin-top:clamp(12px,1.8vh,20px);font-size:clamp(22px,1.8vw,27px);font-weight:500;letter-spacing:.01em;color:var(--ink)}
.hero h1{margin-top:clamp(14px,2.2vh,26px);font-size:clamp(54px,8vw,132px);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.hero .sub{margin-top:clamp(16px,2.6vh,28px);font-size:clamp(19px,1.6vw,25px);color:var(--ink-2)}

section.block{padding:clamp(110px,16vh,180px) var(--side) clamp(90px,13vh,150px)}
.label{display:flex;align-items:baseline;gap:14px;font-size:20px;font-weight:500;color:var(--ink);margin-bottom:clamp(40px,7vh,80px)}
.label::before{content:attr(data-n);font-family:"EB Garamond",serif;font-size:20px;letter-spacing:0;color:var(--zhu)}
.label::after{content:"";flex:1;max-width:120px;height:1px;background:var(--ink);opacity:.35;align-self:center}
.head{font-size:clamp(38px,5vw,78px);line-height:1.04;letter-spacing:-.024em;max-width:1100px;text-wrap:balance}

/* mission */
.read{max-width:1040px}
.read p{font-size:clamp(30px,3.5vw,54px);font-weight:500;line-height:1.24;letter-spacing:-.02em}
.read p+p{margin-top:clamp(36px,6vh,64px)}
.u{color:rgba(33,27,19,.14);transition:color .5s ease}
.u.on{color:var(--ink)}
.u.on.hl{color:var(--zhu)}

/* feature: one large collage on a tinted panel, captioned like a museum plate */
.feature{padding:0 var(--side)}
.feat{background:var(--panel);border-radius:10px;padding:clamp(10px,1.2vw,16px)}
.feat-art{position:relative;aspect-ratio:16/8.5;border-radius:6px;overflow:hidden}
.feat figcaption{padding:clamp(18px,2.4vw,30px) clamp(8px,1.2vw,16px) clamp(8px,1vw,12px)}
.fc-k{font-size:16px;color:var(--zhu)}
.fc-t{margin-top:2px;font-size:clamp(28px,3vw,44px);line-height:1.08}

/* how: the words on the right, one large print held beside them that changes as you read */
.how-grid{margin-top:clamp(56px,9vh,100px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5.5vw,96px);align-items:start}
.how-art{position:sticky;top:clamp(96px,15vh,140px);background:var(--panel);border-radius:10px;padding:clamp(10px,1.2vw,16px)}
.how-art .frame{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#F6F0E2}
.how-art .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.how-art .slide.on{opacity:1}
.how-art .crop,.hw-art .crop{background:#E4DBC8}
.hw{border-top:1px solid var(--line);padding:clamp(26px,4vh,40px) 0 0;min-height:max(46vh,360px)}
.hw small{display:block;font-size:18px;color:var(--zhu)}
.hw h3{margin-top:4px;font-size:clamp(32px,3.3vw,50px);line-height:1.06}
.hw p{margin-top:18px;font-size:clamp(20px,1.75vw,27px);line-height:1.5;color:var(--ink-2);max-width:560px}
.hw-art{display:none}
.how-note{border-top:1px solid var(--line);padding-top:clamp(26px,4vh,40px);font-size:clamp(20px,1.75vw,27px);line-height:1.5;color:var(--ink);max-width:580px}

/* work: cards, each led by a large plate */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.card{display:flex;flex-direction:column;background:var(--panel);border-radius:10px;padding:clamp(10px,1vw,14px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-4px)}
.card-art{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.card-art>svg{display:block;width:100%;height:100%}
.card-body{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.8vw,24px) clamp(6px,.8vw,10px) clamp(6px,.6vw,8px)}
.meta{display:flex;gap:14px;font-size:15px;color:var(--mute)}
.meta span:first-child{color:var(--zhu)}
.card h3{margin-top:10px;font-size:clamp(24px,2.1vw,31px);line-height:1.14;transition:color .4s}
.card:hover h3{color:var(--zhu)}
.card p{margin-top:12px;color:var(--ink-2)}
.card .by{margin-top:10px;font-size:15px;font-style:italic;color:var(--mute)}
.card .go{padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--ink-2);border-top:1px solid var(--line)}
.card .go b{font-weight:400;font-size:20px;transition:transform .4s}
.card:hover .go b{transform:translateX(5px);color:var(--zhu)}
.card-body>.sp{flex:1;min-height:24px}

/* the work page: a title, then one wide panel per result */
.wk-head{position:relative;z-index:2;padding:clamp(150px,24vh,240px) var(--side) clamp(56px,9vh,100px)}
.wk-head h1{margin-top:clamp(8px,1.6vh,18px);font-size:clamp(54px,7.4vw,120px);line-height:.98;letter-spacing:-.025em}
.wk-head p{margin-top:clamp(20px,3.4vh,34px);font-size:clamp(21px,1.9vw,29px);line-height:1.4;color:var(--ink-2);max-width:760px}
.wk-list{position:relative;z-index:2;padding:0 var(--side) clamp(120px,18vh,200px);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px)}
.wk-list .card{flex-direction:row;gap:clamp(20px,3.4vw,52px);padding:clamp(10px,1.2vw,16px)}
.wk-list .card-art{flex:0 0 56%}
.wk-list .card-body{padding:clamp(14px,2.2vw,34px) clamp(8px,1.4vw,22px) clamp(8px,1vw,14px) 0}
.wk-list .card h3{margin-top:14px;font-size:clamp(30px,3.1vw,50px);line-height:1.06}
.wk-list .card p{margin-top:18px;font-size:clamp(18.5px,1.45vw,22px);line-height:1.58}

/* a research article: one column with a shared left edge; figures and the opening panel run wider */
.art{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:clamp(140px,21vh,210px) var(--gutter) clamp(110px,16vh,170px);box-sizing:content-box}
.art-back{display:inline-block;font-size:16px;color:var(--ink-2);transition:color .3s}
.art-back:hover{color:var(--zhu)}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:clamp(28px,5vh,48px);font-size:16px;color:var(--mute)}
.art-meta span:first-child{color:var(--zhu)}
.art h1{margin-top:12px;font-size:clamp(46px,6.2vw,94px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.art-lead{margin-top:clamp(20px,3.4vh,32px);font-size:clamp(24px,2.5vw,36px);line-height:1.28;font-weight:500;letter-spacing:-.015em;max-width:820px;text-wrap:balance}
.art-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,38px)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px 11px;border:1px solid var(--ink);border-radius:999px;font-size:16px;line-height:1;color:var(--ink);transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--paper-hi)}
.art-hero{margin-top:clamp(48px,8vh,84px);background:var(--panel);border-radius:10px;padding:clamp(10px,1.2vw,16px)}
.art-hero .frame{position:relative;aspect-ratio:16/7.5;border-radius:6px;overflow:hidden}
.prose{max-width:680px;margin-top:clamp(60px,9vh,100px)}
.prose p{font-size:clamp(19px,1.45vw,21.5px);line-height:1.66;color:var(--ink-2)}
.prose p+p,.prose p+ul,.prose ul+p,.prose .eq+p{margin-top:1.05em}
.prose .open{font-size:clamp(22px,1.9vw,27px);line-height:1.5;color:var(--ink)}
.prose h2{margin:clamp(56px,8vh,84px) 0 18px;font-size:clamp(28px,2.6vw,38px);line-height:1.12;color:var(--ink)}
.prose b{font-weight:600;color:var(--ink)}
.prose ul{padding-left:1.2em;font-size:clamp(19px,1.45vw,21.5px);line-height:1.6;color:var(--ink-2)}
.prose li+li{margin-top:.5em}
.prose .eq{margin:1.1em 0;font-size:clamp(21px,1.7vw,25px);text-align:center;color:var(--ink);font-variant-numeric:lining-nums}
.prose .last{margin-top:clamp(40px,6vh,60px);font-size:clamp(28px,2.8vw,40px);line-height:1.18;font-weight:500;letter-spacing:-.018em;color:var(--ink)}
.prose .rule{margin-top:clamp(70px,10vh,110px);border-top:1px solid var(--line)}
.prose sup{font-size:.62em;line-height:0;vertical-align:.5em}
.ref{color:var(--mute);font-variant-numeric:lining-nums;font-size:.86em;white-space:nowrap}
.fig{position:relative;margin:clamp(44px,7vh,68px) 0;background:var(--panel);border-radius:10px;padding:clamp(18px,2.4vw,30px) clamp(16px,2.4vw,30px) clamp(14px,2vw,24px)}
.fig h3{font-size:clamp(20px,1.7vw,24px);line-height:1.25}
.fig .sub{margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--mute)}
.fig .plot{margin-top:14px;position:relative}
.fig svg{display:block;width:100%;overflow:visible;font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums}
.tip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:var(--paper-hi);font-size:14.5px;line-height:1.4;padding:7px 11px 8px;border-radius:6px;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .15s;white-space:nowrap;font-variant-numeric:lining-nums}
.tip.on{opacity:1}
.tbl{width:100%;margin-top:1.4em;border-collapse:collapse;font-size:clamp(17px,1.3vw,19px);font-variant-numeric:lining-nums tabular-nums}
.tbl td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:baseline}
.tbl td:last-child{text-align:right;padding-left:20px;color:var(--ink);white-space:nowrap}
.tbl tr.us td{color:var(--zhu)}
.refs{margin-top:18px;padding-left:1.6em;font-size:16px;line-height:1.55;color:var(--mute)}
.refs li+li{margin-top:.45em}
.refs li::marker{font-variant-numeric:lining-nums}
.refs a{color:var(--ink-2);border-bottom:1px solid var(--line)}

/* approach */
.steps{margin-top:clamp(56px,9vh,100px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.step{background:var(--panel);border-radius:10px;padding:clamp(10px,1vw,14px) clamp(10px,1vw,14px) clamp(18px,2vw,26px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.step:hover{transform:translateY(-4px)}
.step .plate{width:100%;aspect-ratio:1;border-radius:6px}
.step small{display:block;margin:18px 6px 0;font-size:18px;color:var(--zhu)}
.step .k{margin:2px 6px 0;font-size:27px;font-weight:500;line-height:1.25;letter-spacing:-.015em}
.step p{margin:8px 6px 0;color:var(--ink-2)}

/* close */
.close{text-align:center;padding:clamp(170px,26vh,280px) var(--gutter) clamp(190px,28vh,300px);overflow:hidden}
.close .lm{width:clamp(84px,9vw,120px);height:auto;margin:0 auto clamp(30px,5vh,52px)}
.close h2{position:relative;z-index:2;font-size:clamp(46px,6.4vw,104px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.cl-tiles{position:absolute;inset:0;pointer-events:none;z-index:1}

/* footer: the paper deepens, and the name is set large enough to sit on */
.foot{position:relative;z-index:2;overflow:hidden;background:linear-gradient(to bottom,#F2EAD8,var(--foot) 220px);padding:clamp(90px,14vh,150px) var(--gutter) 0;color:var(--ink-2)}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:clamp(40px,7vh,72px);border-bottom:1px solid var(--line)}
.f-brand{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:500;color:var(--ink)}
.f-brand .mk{width:30px;height:30px}
.f-line{margin-top:10px;font-size:17px;color:var(--ink-2)}
.f-cols{display:flex;gap:clamp(40px,7vw,110px);font-size:17px}
.f-cols div{display:flex;flex-direction:column;gap:6px}
.f-cols h4{font-weight:400;font-size:15px;color:var(--mute);margin-bottom:6px}
.f-cols a{color:var(--ink)}
.f-cols a:hover{color:var(--zhu)}
.f-bot{display:flex;justify-content:space-between;padding:18px 0 0;font-size:15px;color:var(--mute)}
.f-giant{font-size:min(27.4vw,560px);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--ink);margin:clamp(10px,2vh,24px) 0 0 -.045em;padding-bottom:.2em;white-space:nowrap;user-select:none}

.reveal{opacity:0;transition:opacity 1.4s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1}

@media (max-width:900px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .links{font-size:15px;gap:16px}
  .how-grid{grid-template-columns:minmax(0,1fr)}
  .how-art{display:none}
  .hw{min-height:0;padding-bottom:clamp(40px,7vh,64px)}
  .hw-art{display:block;margin-top:24px;background:var(--panel);border-radius:10px;padding:10px}
  .hw-art .frame{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
  .f-top{flex-direction:column}
  .f-bot{flex-direction:column;gap:4px}
}
@media (min-width:601px) and (max-width:900px){
  .card{flex-direction:row;gap:clamp(14px,2.4vw,24px)}
  .card-art{flex:0 0 46%;align-self:flex-start}
  .card-body{padding-top:clamp(6px,1vw,10px)}
}
@media (max-width:600px){
  .feat-art{aspect-ratio:1}
  .wk-list .card{flex-direction:column}
  .wk-list .card-body{padding:18px 6px 6px}
  .art-hero .frame{aspect-ratio:4/3}
}
@media (max-width:420px){
  .links{gap:13px;font-size:14.5px}
  .brand{gap:8px;font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
}