@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
:root{--ink:#141414;--paper:#f5f4f0;--line:rgba(20,20,20,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}.site-head{height:74px;padding:0 2.25vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.08);position:relative;z-index:5;background:inherit}.brand{font-size:17px;font-weight:500;letter-spacing:.13em}.site-head nav{display:flex;gap:3.2vw}.site-head nav a{font-size:12px;letter-spacing:.15em}.site-head nav a:hover,.site-head nav .active{border-bottom:1px solid;padding-bottom:5px}
.chooser{background:#ededeb;min-height:100vh}.chooser-head{height:74px;padding:0 2.25vw;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.14em;border-bottom:1px solid #bbb}.chooser-grid{display:grid;grid-template-columns:repeat(2,1fr);min-height:calc(100vh - 74px)}.chooser-grid a{padding:3vw;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #bbb;border-bottom:1px solid #bbb;transition:background .2s}.chooser-grid a:hover{background:#fff}.chooser-grid span{font-size:13px}.chooser-grid strong{font-size:clamp(28px,4vw,64px);font-weight:400;max-width:12ch}.chooser-grid small{font-size:13px;color:#666}
/* 01 — object-led archive */.d1{font-family:DM Sans,Arial,sans-serif}.d1-hero{display:grid;grid-template-columns:69% 31%;min-height:660px}.d1-hero figure{margin:0;background:#eee;overflow:hidden}.d1-hero figure img{height:100%;object-fit:cover}.d1-copy{padding:10vw 4vw 3vw;display:flex;flex-direction:column}.d1-copy h1{font-size:clamp(42px,3.6vw,58px);line-height:1.02;font-weight:300;letter-spacing:-.045em;margin:0 0 34px}.d1-copy p{font-size:18px;line-height:1.55;max-width:330px;margin:0 0 48px}.d1-copy a{font-size:11px;letter-spacing:.15em;border-bottom:1px solid;width:max-content;padding:0 0 6px;margin:0 0 20px}.d1-copy a span{margin-left:28px}.work-list{padding:28px 9.5vw 60px}.work-row{display:grid;grid-template-columns:18% 1fr 14%;padding:12px 0;font-size:14px}.work-row:not(.labels):hover{opacity:.5}.work-row.labels{font-size:10px;letter-spacing:.15em;margin-bottom:8px}
/* 02 — research system */.d2{background:#f8f8f6}.d2-main{min-height:calc(100vh - 74px);display:grid;grid-template-columns:46% 54%;grid-template-rows:auto 1fr auto;padding:4.3vw 2.8vw 0}.d2-intro{padding-left:1.7vw}.d2-intro h1{font-size:clamp(54px,5.5vw,94px);line-height:.98;letter-spacing:-.055em;font-weight:500;margin:0 0 24px}.d2-intro p{font-size:18px;line-height:1.45;max-width:510px;margin:0}.d2-object{grid-column:2;grid-row:1/3;margin:0;align-self:stretch;overflow:hidden}.d2-object img{height:100%;object-fit:contain;mix-blend-mode:multiply}.modes{grid-column:1;align-self:end;padding-left:1.7vw;max-width:650px}.modes a{height:96px;display:grid;grid-template-columns:70px 1fr 220px 50px;align-items:center;border-bottom:1px solid var(--line)}.modes a:first-child{border-top:1px solid var(--line)}.modes b{font-size:27px;font-weight:400}.modes span{font-size:15px;line-height:1.25}.modes img{width:190px;height:70px;object-fit:cover;filter:saturate(.35)}.modes i{font-size:27px;font-style:normal;text-align:right}.current{grid-column:1/3;height:76px;border-top:1px solid var(--line);display:grid;grid-template-columns:180px 150px 1fr 30px;align-items:center;font-size:10px;letter-spacing:.14em;margin-top:3vw}.current span:nth-child(2){color:#31528c}
/* 03 — material editorial */.d3{background:#f4f1eb}.d3 .site-head{background:#f4f1eb}.d3-hero{min-height:720px;display:grid;grid-template-columns:59% 13% 28%;grid-template-rows:1fr;position:relative;padding-top:14px}.d3-macro{grid-column:1/2;height:100%;object-fit:cover}.d3-object{position:absolute;width:39%;left:34%;top:7%;margin:0;background:#eee}.d3-object img{aspect-ratio:1/1;object-fit:cover}.d3-object figcaption{font-size:9px;letter-spacing:.16em;background:#f4f1eb;padding:14px 18px;width:max-content;margin-left:auto}.d3-copy{grid-column:3;padding:8vw 3vw 0 1vw}.d3-copy h1,.attempts h2{font-family:Instrument Serif,Georgia,serif;font-weight:400}.d3-copy h1{font-size:clamp(55px,5.4vw,88px);line-height:.92;letter-spacing:-.03em;margin:0 0 34px}.d3-copy p{font-size:17px;line-height:1.55;max-width:330px}.d3-copy a{display:block;margin-top:42px;font-size:11px;letter-spacing:.16em}.attempts{display:grid;grid-template-columns:39% 29% 29%;gap:1.5%;padding:18px 2.5vw 45px}.attempts h2{font-size:clamp(42px,4vw,66px);line-height:1.05;text-transform:uppercase;margin:22px 0}.attempts img{height:310px;object-fit:cover}
/* 04 — experimental index */.d4{background:#f3f3f1}.d4 .site-head{background:#f3f3f1}.d4-grid{padding:3vw 2.3vw 2vw;display:grid;grid-template-columns:42% 28% 28%;grid-template-rows:auto auto;gap:24px 2%;align-items:start}.d4-intro{grid-column:1;grid-row:1}.d4-intro h1{font-size:clamp(58px,6vw,100px);line-height:.94;letter-spacing:-.055em;font-weight:400;margin:0 0 20px}.d4-intro p{font-size:17px}.tile{display:flex;flex-direction:column;gap:12px;font-size:12px;letter-spacing:.08em}.tile img{object-fit:cover;transition:filter .25s}.tile:hover img{filter:grayscale(1)}.t1{grid-column:1;grid-row:2}.t1 img{height:385px}.t2{grid-column:2;grid-row:1}.t2 img{height:300px}.t3{grid-column:2;grid-row:2}.t3 img{height:230px}.t4{grid-column:3;grid-row:1/3}.t4 img{height:620px}.complete{grid-column:1;margin-top:20px;font-size:12px;letter-spacing:.1em;border-bottom:1px solid;width:max-content;padding-bottom:5px}
/* Reference-matching desktop calibration */
@media(min-width:801px){
.d1 .site-head{height:64px}.d1-hero{grid-template-columns:72% 28%;height:600px;min-height:0}.d1-hero figure img{transform:scale(1.08)}.d1-copy{padding:146px 2.5vw 28px}.d1-copy h1{font-size:52px;line-height:1.01;margin-bottom:30px;max-width:none}.d1-copy p{line-height:1.5;margin-bottom:42px}
.d2-main{height:calc(100vh - 74px);min-height:700px;grid-template-columns:50% 50%}.d2-object{margin:0 2.1vw 0 1.4vw}.d2-object img{transform:scale(1.7)}
.d3-hero{height:645px;min-height:0;grid-template-columns:61% 12% 27%}.d3-object{width:38%}.d3-object img{height:545px;aspect-ratio:auto}.d3-copy{padding:155px 3vw 0 2vw}.d3-copy h1{font-size:clamp(55px,5.25vw,84px)}
.d4-grid{padding-top:2.8vw}.d4-intro h1{font-size:clamp(58px,5.65vw,92px);margin-bottom:18px}.t1{margin-top:-102px}.complete{margin-top:20px}
}
/* Wide, low browser windows (typical maximized laptop/desktop with browser chrome) */
@media(min-width:1200px) and (max-height:880px){
.site-head{height:64px;padding-inline:2.3vw}.brand{font-size:16px}.site-head nav a{font-size:11px}
.d1-hero{height:64vh;min-height:500px;max-height:570px}.d1-copy{padding:clamp(96px,16vh,132px) 2.5vw 24px}.d1-copy h1{font-size:clamp(42px,2.9vw,52px)}.work-list{padding-top:22px}
.d2-main{height:calc(100vh - 64px);min-height:0;padding:clamp(24px,4.2vh,38px) 2.8vw 0;grid-template-rows:auto 1fr 56px}.d2-intro{padding-top:28px}.d2-intro h1{font-size:clamp(66px,4.4vw,82px);margin-bottom:18px}.d2-intro p{font-size:16px;max-width:470px}.d2-object{margin-inline:2.4vw 1.5vw}.d2-object img{transform:scale(1.38)}.modes{align-self:start;margin-top:clamp(72px,12vh,104px)}.modes a{height:clamp(72px,10vh,86px);grid-template-columns:60px 1fr 180px 42px}.modes b{font-size:24px}.modes span{font-size:13px}.modes img{width:160px;height:58px}.current{height:56px;margin-top:0;grid-template-columns:160px 130px 1fr 24px}
.d3-hero{height:70vh;min-height:540px;max-height:620px}.d3-object img{height:clamp(430px,62vh,520px)}.d3-copy{padding:clamp(112px,18vh,148px) 3vw 0 2vw}.d3-copy h1{font-size:clamp(58px,4.6vw,78px)}.d3-copy p{font-size:15px}.d3-copy a{margin-top:30px}
.d4-grid{padding-top:2.2vw}.d4-intro h1{font-size:clamp(64px,4.9vw,84px)}.d4-intro p{font-size:15px}.t1{margin-top:-88px}.t1 img{height:clamp(300px,42vh,365px)}.t2 img{height:clamp(235px,34vh,285px)}.t3 img{height:clamp(180px,26vh,220px)}.t4 img{height:clamp(485px,70vh,590px)}
}
@media(max-width:800px){.site-head{height:64px;padding:0 18px}.site-head nav{gap:16px}.site-head nav a{font-size:9px}.d4 .site-head nav{gap:11px}.d4 .site-head nav a:nth-child(n+4){display:none}.d1-hero{grid-template-columns:1fr;height:auto}.d1-hero figure{height:58vh}.d1-copy{padding:44px 20px}.work-list{padding:24px 20px}.work-row{grid-template-columns:60px 1fr 70px}.d2-main{display:block;height:auto;min-height:0;padding:36px 20px 0}.d2-intro h1{font-size:58px}.d2-object{height:48vh;margin:24px 0}.d2-object img{transform:none}.modes{padding:0}.modes a{grid-template-columns:48px 1fr 92px 28px}.modes img{width:82px;height:54px}.current{grid-template-columns:1fr 1fr 1fr 20px}.d3-hero{display:block;height:auto;padding:0}.d3-macro{height:42vh}.d3-object{position:relative;width:78%;left:11%;top:auto;margin-top:-18vh}.d3-object img{height:auto}.d3-copy{padding:54px 22px}.attempts{grid-template-columns:1fr}.attempts img{height:auto}.d4-grid{display:block;padding:34px 16px}.d4-intro,.tile{margin-bottom:36px}.d4-intro h1{font-size:58px}.t1{margin-top:0}.t1 img,.t2 img,.t3 img,.t4 img{height:auto}.complete{margin-top:20px}.chooser-grid{grid-template-columns:1fr}.chooser-grid a{min-height:230px}}

/* Nav brackets, after Palet.
   The brackets are absolutely positioned so nothing reflows when they appear,
   and they slide in a few pixels from the inside. Hover now shows brackets
   instead of an underline, so the underline is left to mean one thing only:
   this is the page you are on. */
.site-head nav a{position:relative;border-bottom:1px solid transparent;padding-bottom:5px}
.site-head nav a::before,
.site-head nav a::after{
  position:absolute;top:0;color:currentColor;opacity:0;
  font:inherit;letter-spacing:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1);
}
.site-head nav a::before{content:"[";left:-11px;transform:translateX(5px)}
.site-head nav a::after{content:"]";right:-13px;transform:translateX(-5px)}
.site-head nav a:hover::before,
.site-head nav a:focus-visible::before,
.site-head nav a:hover::after,
.site-head nav a:focus-visible::after{opacity:1;transform:translateX(0)}
.site-head nav a:hover{border-bottom-color:transparent}
.site-head nav .active{border-bottom-color:currentColor}
@media(prefers-reduced-motion:reduce){
  .site-head nav a::before,.site-head nav a::after{transition:opacity .2s ease;transform:none}
  .site-head nav a:hover::before,.site-head nav a:hover::after{transform:none}
}