:root { --ink:#0b0b0b; --muted:rgba(11,11,11,.5); --hair:rgba(11,11,11,.12); --paper:#ece8e0; --cool:#dde6e7; --ease:cubic-bezier(.22,1,.36,1); --g:clamp(16px,4vw,48px); --sans:"Geist",system-ui,sans-serif; --serif:"Instrument Serif",serif; }
*{box-sizing:border-box} html,body{margin:0} body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
em{font-family:var(--serif);font-weight:400}
.v{display:none} body[data-v="a"] .v-a, body[data-v="b"] .v-b, body[data-v="c"] .v-c{display:block}

/* shared text rise */
.rise{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em .06em 0;margin-right:-.12em}
.rise>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.is-ready .rise>span{transform:none}
.fade{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-in{opacity:1;transform:none}
.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.top{display:flex;justify-content:space-between;align-items:baseline;padding:clamp(14px,3vw,28px) var(--g);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.top nav{display:flex;gap:1.4em;font-weight:500}
.top nav a{color:var(--muted)} .top nav a:hover{color:var(--ink)}

/* ===== A: index list + floating preview ===== */
.a-hero{padding:clamp(40px,10vw,140px) var(--g) clamp(40px,6vw,80px);max-width:1300px}
.a-hero h1{margin:0;font-size:clamp(2.4rem,6.4vw,6rem);line-height:1;letter-spacing:-.045em;font-weight:600}
.a-hero h1 em{font-size:1.1em;letter-spacing:-.02em}
.a-hero p{margin:28px 0 0;max-width:46ch;font-size:1.05rem;line-height:1.5;color:#333}
.a-list{margin:0 var(--g);border-top:1px solid var(--ink);list-style:none;padding:0}
.a-row a{display:grid;grid-template-columns:3.2em 1fr 16em 7em;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);transition:padding .5s var(--ease),color .3s}
.a-row .n{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.a-row .t{font-size:clamp(1.4rem,3vw,2.6rem);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.a-row .ar{font-size:.85rem;color:var(--muted)}
.a-row .go{justify-self:end;font-family:var(--serif);font-style:italic;font-size:1.4rem;opacity:0;transform:translateX(-8px);transition:all .4s var(--ease)}
.a-list:hover .a-row a{color:rgba(11,11,11,.3)}
.a-list .a-row a:hover{color:var(--ink);padding-left:14px}
.a-row a:hover .go{opacity:1;transform:none}
.a-peek{position:fixed;left:0;top:0;width:260px;aspect-ratio:5/6;pointer-events:none;z-index:5;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .35s var(--ease),transform .5s var(--ease);background:#000}
.a-peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.a-peek img{width:100%;height:100%;object-fit:cover}
.a-peek .poster{height:100%}
.a-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;padding:clamp(60px,9vw,120px) var(--g) 40px}
.a-foot p{margin:6px 0 0;line-height:1.45}

/* ===== B: sticky identity + scrolling case studies ===== */
.b-wrap{display:grid;grid-template-columns:minmax(260px,32%) 1fr;min-height:100vh}
.b-side{position:sticky;top:0;height:100vh;padding:clamp(20px,3vw,36px) var(--g);display:flex;flex-direction:column;border-right:1px solid var(--hair)}
.b-name{font-size:clamp(2rem,3.4vw,3.4rem);line-height:.95;font-weight:600;letter-spacing:-.05em;margin:0}
.b-name em{display:block;font-size:1.12em;letter-spacing:-.02em}
.b-side p{margin:18px 0 0;line-height:1.5;color:#333;max-width:34ch}
.b-toc{margin-top:auto;list-style:none;padding:0;counter-reset:t}
.b-toc li a{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--hair);color:var(--muted);font-size:.92rem;transition:color .3s,padding .4s var(--ease)}
.b-toc li a .n{font-variant-numeric:tabular-nums;width:2em}
.b-toc li a.cur{color:var(--ink);padding-left:8px;font-weight:600}
.b-side .contact{margin-top:18px;font-size:.9rem}
.b-main{padding:0 var(--g)}
.b-case{min-height:92vh;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:center;padding:8vh 0;border-bottom:1px solid var(--hair)}
.b-case h2{margin:6px 0 0;font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1;letter-spacing:-.045em;font-weight:600}
.b-case .lead{font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.15;margin:16px 0 0}
.b-case .m{margin-top:18px;font-size:.85rem;color:var(--muted);line-height:1.5}
.b-case .more{display:inline-block;margin-top:18px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px}
.b-fig{aspect-ratio:4/5;max-height:80vh;background:#000;overflow:hidden;clip-path:inset(12% 12% 12% 12%);transition:clip-path 1.2s var(--ease)}
.b-fig.is-in{clip-path:inset(0)}
.b-fig img{width:100%;height:100%;object-fit:contain}
.b-fig .poster{height:100%}

/* ===== C: specimen plates (atlas) ===== */
.c-head{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--g);padding:clamp(36px,7vw,100px) var(--g) 28px;align-items:end;border-bottom:1px solid var(--ink);margin:0 var(--g);padding-left:0;padding-right:0}
.c-head h1{margin:0;font-size:clamp(2.4rem,5.4vw,5rem);line-height:.98;letter-spacing:-.045em;font-weight:600}
.c-head h1 em{font-size:1.1em}
.c-head p{margin:0;line-height:1.5;color:#333;max-width:42ch}
.c-filters{display:flex;flex-wrap:wrap;gap:8px;padding:18px var(--g)}
.c-filters button{font:inherit;font-size:.85rem;border:1px solid var(--hair);background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;transition:all .3s var(--ease)}
.c-filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.c-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);padding:8px var(--g) 80px}
.c-plate{grid-column:span 3;transition:opacity .4s var(--ease)}
.c-plate.big{grid-column:span 6;grid-row:span 2} .c-plate.tall{grid-row:span 2}
.c-plate.dim{opacity:.15}
.c-plate a{display:block}
.c-media{aspect-ratio:4/5;overflow:hidden;background:#000;position:relative}
.c-plate.big .c-media{aspect-ratio:4/5}
.c-media img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.c-plate a:hover .c-media img{transform:scale(1.04)}
.c-media .poster{position:absolute;inset:0}
.c-cap{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:10px;font-size:.9rem;line-height:1.35}
.c-cap .fig{font-family:var(--serif);font-style:italic;font-size:1.1rem}
.c-cap b{display:block;font-weight:600;letter-spacing:-.01em}
.c-cap span{color:var(--muted)}

/* posters (shared) */
.poster{display:flex;flex-direction:column;justify-content:space-between;padding:14px}
.poster--paper{background:var(--paper)} .poster--cool{background:var(--cool)} .poster--ink{background:var(--ink);color:#fff}
.poster__w{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.9}


@media (max-width:860px){
  .a-row a{grid-template-columns:2.4em 1fr;} .a-row .ar,.a-row .go{display:none}
  .a-foot{grid-template-columns:1fr}
  .b-case{grid-template-columns:1fr;min-height:auto;padding:56px 0}
  .c-head{grid-template-columns:1fr} .c-plate,.c-plate.big{grid-column:span 12}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.rise>span{transform:none}.fade{opacity:1;transform:none}.b-fig{clip-path:none}}

/* nav in B side */
.b-nav{display:flex;gap:1.2em;font-size:.95rem;font-weight:500;margin-bottom:28px}
.b-nav a{color:var(--muted)} .b-nav a:hover,.b-nav a[aria-current]{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink)}
[data-nav]{cursor:pointer}

/* ===== A: about / contact as typographic rows ===== */
.a-info{margin:0 var(--g);border-top:1px solid var(--ink);list-style:none;padding:0}
.a-info li{display:grid;grid-template-columns:3.2em 14em 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.a-info .n{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.a-info h2{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.a-info p{margin:0 0 .5em;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.35;letter-spacing:-.01em;max-width:44ch}
.a-info p em{font-size:1.1em}
.a-contact .a-row .t{font-size:clamp(1.6rem,4.4vw,4rem)}
.a-contact .a-row a{grid-template-columns:3.2em 1fr 7em}

/* ===== B: about / contact ===== */
.b-sec{min-height:auto;padding:10vh 0;border-bottom:1px solid var(--hair);max-width:760px}
.b-sec h2{margin:6px 0 0;font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1;letter-spacing:-.045em;font-weight:600}
.b-sec .lead{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.15;margin:18px 0 0}
.b-sec p{line-height:1.55;font-size:1.05rem;max-width:52ch}
.b-contact{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:10px}
.b-contact .big{font-size:clamp(1.8rem,4.6vw,4.4rem);font-weight:600;letter-spacing:-.045em;line-height:1.05;border-bottom:2px solid var(--ink);align-self:flex-start;padding-bottom:4px;transition:color .3s}
.b-contact .big:hover{color:var(--muted)}
.b-contact .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.2rem);margin-top:22px}

/* ===== C: about / contact as plates and tables ===== */
.c-tabs{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);padding:28px var(--g) 80px}
.c-tab{grid-column:span 4;margin:0}
.c-tab.wide{grid-column:span 8}
.c-box{border:1px solid var(--ink);padding:22px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;background:#fff}
.c-box.paper{background:var(--paper);border-color:var(--paper)}
.c-box.ink{background:var(--ink);color:#fff}
.c-box p{margin:0 0 .6em;line-height:1.45}
.c-box .q{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.08}
.c-box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.95rem}
.c-box dt{color:var(--muted)} .c-box.ink dt{color:rgba(255,255,255,.55)} .c-box dd{margin:0}
.c-corr{margin:28px var(--g) 80px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.c-corr .c-box{min-height:42vh}
.c-corr .addr{font-size:clamp(1.4rem,3.2vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;word-break:break-word}
.c-corr .note{font-size:.85rem;opacity:.7;margin-top:14px}

@media (max-width:860px){
  .a-info li{grid-template-columns:2.4em 1fr} .a-info li p{grid-column:2}
  .c-tab,.c-tab.wide{grid-column:span 12} .c-corr{grid-template-columns:1fr}
}

/* generative covers */
.gc{display:block;width:100%;height:100%}
.gc-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:gc-draw 2.6s var(--ease) forwards}
@keyframes gc-draw{to{stroke-dashoffset:0}}
.gc-pop{transform:scale(0);animation:gc-pop .8s var(--ease) forwards}
@keyframes gc-pop{to{transform:scale(1)}}
.gc-bar{transform-box:fill-box;transform-origin:center;animation:gc-bar 1.7s ease-in-out infinite alternate}
@keyframes gc-bar{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.cover-wrap{position:absolute;inset:0}
@media (prefers-reduced-motion:reduce){.gc-draw{animation:none;stroke-dashoffset:0}.gc-pop{animation:none;transform:none}.gc-bar{animation:none}}

/* name always top-left, a bit larger */
.top>a:first-child{font-size:1.4rem;font-weight:650;letter-spacing:-.025em;color:var(--ink)}
.top{align-items:center}
.b-side .b-nav{margin:14px 0 0;order:2}
.b-side .b-name{order:1}
.b-side>p{order:3} .b-side .b-toc{order:4} .b-side .contact{order:5}
.b-side{overflow-y:auto}
.b-fig{position:relative;justify-self:center;width:min(100%,calc(80vh * 4 / 5))}
@media (max-width:860px){.a-info li>div{grid-column:2}}

/* logos next to each About step */
.logo-slot{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.logo-slot img{display:block;height:auto}
.logo-slot--wide img{width:150px}
.logo-slot--tools{flex-wrap:wrap;gap:14px;max-width:240px}
.logo-slot--tools img{width:26px;height:26px}
.logo-slot--covers{gap:6px}
.logo-slot--covers span{display:block;width:34px;height:42px;overflow:hidden;border-radius:3px}
.a-info li{grid-template-columns:3.2em 14em 1fr 240px}
.logo-slot--b{justify-content:flex-start;margin:14px 0 18px}
.logo-slot--c{justify-content:flex-start;margin-bottom:auto;padding-bottom:18px}
.c-box.ink .logo-slot--c{background:#fff;align-self:flex-start;padding:8px 10px;border-radius:4px;margin-bottom:auto}
@media (max-width:860px){
  .a-info li{grid-template-columns:2.4em 1fr}
  .a-info li .logo-slot{grid-column:2;justify-content:flex-start;margin-top:4px}
}

/* ---- responsive pass ---- */
@media (max-width:700px){
  .b-wrap{grid-template-columns:1fr}
  .b-side{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--hair);overflow:visible}
  .b-side .contact{margin-top:18px!important}
  .b-toc{display:none}
}
@media (max-width:860px){
  .b-sec{padding:48px 0}
  .b-contact{min-height:auto;padding:64px 0}
  .b-contact .big{font-size:clamp(1.3rem,5.6vw,2.6rem);overflow-wrap:anywhere}
  .c-corr .c-box{min-height:220px}
  .c-corr .addr{overflow-wrap:anywhere}
  .a-contact .a-row .t{font-size:clamp(1rem,4.5vw,2.4rem);overflow-wrap:anywhere}
  .a-hero{padding-top:40px}
  .c-head{padding-top:36px}
  .b-fig{width:100%;max-height:none}
}
@media (max-width:420px){
  .top nav{gap:.9em;font-size:.92rem}
  .top>a:first-child{font-size:1.2rem}
}

/* logos vertically centred on the descriptive text */
.a-info li>.logo-slot{align-self:center}
@media (min-width:861px){
  .b-sec:has(.logo-slot--b){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center;max-width:960px}
  .b-sec>*{grid-column:1}
  .b-sec>.logo-slot--b{grid-column:2;grid-row:3;margin:0;justify-content:center;align-self:center}
}
.c-box:has(.logo-slot--c){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;align-content:center}
.c-box>.logo-slot--c{grid-column:2;grid-row:1;margin:0;padding:0;justify-content:center;align-self:center}
.c-box>dl{grid-column:1;grid-row:1}
.c-box.ink>.logo-slot--c{padding:8px 10px;margin:0;align-self:center}
.logo-slot--c.logo-slot--tools{max-width:92px;justify-content:flex-start;gap:10px}
.logo-slot--c.logo-slot--covers{flex-wrap:wrap;max-width:80px}
.logo-slot--c.logo-slot--wide img{width:120px}

/* show more */
.more-wrap{display:flex;justify-content:center;padding:28px var(--g) 8px}
.more-wrap[hidden]{display:none}
.more-wrap--b{justify-content:flex-start;padding:40px 0 80px}
.c-grid+.more-wrap{padding-top:0;margin-top:-48px}
.more-btn{font:inherit;font-weight:600;font-size:.95rem;letter-spacing:-.01em;color:var(--ink);background:#fff;border:1px solid var(--ink);border-radius:999px;padding:12px 24px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.more-btn:hover{background:var(--ink);color:#fff}
.more-btn::after{content:" \2193";font-family:var(--serif);font-style:italic}
[hidden]{display:none!important}
.appear{animation:appear .8s var(--ease) both}
@keyframes appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.appear{animation:none}}
.c-tab.wide .logo-slot--c.logo-slot--tools{max-width:none;flex-wrap:nowrap}
.logo-ctu{width:120px;height:auto}
.logo-slot--c .logo-ctu{width:88px}