/* Layout: no nav bar. Info row across a 12-col grid, a left-anchored statement at a quiet scale (serif italic + sans), a compact typographic project index with a grid toggle, and a full-screen menu. */
:root{
  --paper:#ECECE8; --surface:#DFDFDA; --ink:#0E0F0E; --ink-2:#5E605C; --rule:#C9CAC4;
  --accent:#2B45E0; --on-accent:#FFFFFF;
  --f-serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --f-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --g:clamp(16px,2.2vw,32px); --col-gap:clamp(12px,1.6vw,24px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0B0B0B; --surface:#1A1A19; --ink:#EDEDE8; --ink-2:#8E908B; --rule:#2A2A28;
  --accent:#8FA0FF; --on-accent:#0B0B14; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B0B0B; --surface:#1A1A19; --ink:#EDEDE8; --ink-2:#8E908B; --rule:#2A2A28;
  --accent:#8FA0FF; --on-accent:#0B0B14; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.5;margin:0;padding-inline:var(--g);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:12px;line-height:1.45;letter-spacing:.02em;text-transform:uppercase}
.muted{color:var(--ink-2)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}

/* 1. Info row (replaces the nav bar) */
.info{padding-block:18px 0}
.info>div{display:grid;gap:2px;align-content:start;padding-top:8px;border-top:1px solid var(--ink)}
.info .c1{grid-column:1/span 3}.info .c2{grid-column:4/span 3}.info .c3{grid-column:7/span 3}.info .c4{grid-column:10/span 3}
.info a{text-decoration:none;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.info a:hover{background-size:100% 1px}
.dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--accent);vertical-align:.08em;margin-right:.35em}
.live{font-variant-numeric:tabular-nums}

/* 2. Hero: left-anchored statement, quiet scale */
.hero{padding-block:clamp(56px,8vw,120px) clamp(48px,6vw,96px);row-gap:clamp(28px,3vw,44px);align-items:end}
.hero .eyebrow{grid-column:1/-1;display:flex;gap:.6em;align-items:baseline}
.scr{display:inline-block;transition:filter .45s,opacity .45s}
.scr.out{filter:blur(8px);opacity:0}
.statement{grid-column:1/span 8;margin:0;font-size:clamp(32px,4.4vw,68px);line-height:1.04;letter-spacing:-.025em;font-weight:400;text-wrap:balance}
.statement .serif{font-family:var(--f-serif);font-style:italic;color:var(--ink-2);letter-spacing:-.01em}
.statement .sans{font-weight:500}
.statement .ln{display:block;animation:up .9s cubic-bezier(.2,.75,.1,1) both}
.statement .ln+.ln{animation-delay:.1s}
@keyframes up{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .p1{grid-column:1/span 6;margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:46ch}
.hero .p2{grid-column:8/span 4;margin:0;color:var(--ink-2);font-size:15px;max-width:44ch}
.serif{font-family:var(--f-serif);font-weight:400}

/* 4. Work */
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:8px;margin-bottom:clamp(20px,3vw,40px)}
.work{padding-bottom:clamp(56px,7vw,110px)}
/* Index view */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.index li{border-bottom:1px solid var(--rule)}
.irow{display:grid;grid-template-columns:3rem minmax(0,1fr) minmax(0,24rem) 2rem;align-items:baseline;column-gap:var(--col-gap);padding-block:clamp(12px,1.2vw,16px);text-decoration:none;position:relative}
.irow .n{font-variant-numeric:tabular-nums}
.irow .t{font-size:clamp(22px,2.3vw,34px);line-height:1.1;letter-spacing:-.02em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:letter-spacing .4s}
.irow .t .s{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;display:none}
.irow:hover .t .a{display:none}.irow:hover .t .s{display:inline}
.irow .d{text-transform:none;font-size:13px}
.irow .go{text-align:right;font-size:18px;transition:transform .3s}
a.irow:hover .go{transform:translateX(6px)}
a.irow:hover .go.ext{transform:translate(4px,-4px)}
/* Grid view */
.grid{display:none;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(28px,3vw,48px)}
.work.as-grid .grid{display:grid}.work.as-grid .index{display:none}
.card{display:grid;gap:6px;text-decoration:none;min-width:0}
.card .top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.card .top b{font-weight:500}
.card:nth-child(5n+1){grid-column:span 2}
.ph{position:relative;display:block;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--surface);border-radius:2px}
.card:nth-child(5n+1) .ph{aspect-ratio:8/5}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,.1,1)}
a.card:hover .ph img{transform:scale(1.03)}
/* Floating preview for index rows */
.peek{position:fixed;left:0;top:0;width:clamp(220px,22vw,340px);aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;overflow:hidden;border-radius:2px;background:var(--surface);transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.75,.1,1)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.peek img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:none){.peek{display:none}}

/* 5. Experience */
.exp{padding-bottom:clamp(56px,7vw,110px)}
.exp .lead{grid-column:1/span 4;margin:0;font-family:var(--f-serif);font-style:italic;color:var(--ink-2);font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.01em}
.exp ul{grid-column:6/span 7;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.exp li{border-bottom:1px solid var(--rule)}
.er{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,11rem) 1.2rem;column-gap:var(--col-gap);align-items:baseline;padding-block:14px;text-decoration:none}
.er .o{font-size:clamp(17px,1.4vw,21px);letter-spacing:-.01em}
.er .r{font-size:13px;text-transform:none}
.er .go{color:var(--accent);text-align:right}
a.er:hover .o{font-family:var(--f-serif);font-style:italic}

/* 6. More work */
.more{padding-bottom:clamp(56px,7vw,110px)}
.more-lead{margin:0 0 clamp(20px,3vw,36px);font-family:var(--f-serif);font-style:italic;color:var(--ink-2);font-size:clamp(22px,2vw,30px);line-height:1.15;max-width:30ch}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px) var(--col-gap)}
.mcard{display:grid;gap:6px;text-decoration:none;min-width:0}
.mph{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--surface);border-radius:2px}
.mph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,.1,1)}
.mcard:hover .mph img{transform:scale(1.04)}
.mcard .mt{font-size:16px;letter-spacing:-.01em;line-height:1.25}
.mcard:hover .mt{color:var(--accent)}
.mcard .mono{text-transform:none;font-size:12px}

/* 7. Footer */
footer{margin-inline:calc(var(--g) * -1);background:var(--ink);color:var(--paper)}
.sign{margin:0;padding:clamp(48px,6vw,96px) var(--g) clamp(32px,4vw,56px);font-size:clamp(28px,3.4vw,52px);line-height:1.08;letter-spacing:-.025em;font-weight:400;max-width:22ch;text-wrap:balance}
.sign .serif{font-style:italic;opacity:.7}
.foot{padding:0 var(--g) 22px}
.foot>div{display:grid;gap:4px;align-content:start;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--paper) 35%,transparent)}
.foot .c1{grid-column:1/span 6}.foot .c2{grid-column:7/span 3}.foot .c3{grid-column:10/span 3}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot a.mail{text-decoration:none}.foot .mail{font-size:clamp(18px,1.8vw,26px);text-transform:none;letter-spacing:-.01em;font-family:var(--f-sans)}

/* Floating controls (bottom corners) */
.ctl{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:2px;padding:3px;background:var(--ink);border-radius:999px}
.ctl button{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--paper);padding:7px 12px;border-radius:999px}
.ctl button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.ctl button:focus-visible{outline:2px solid var(--accent)}
.view-ctl{left:var(--g);transition:opacity .3s,transform .3s}
.view-ctl.away{opacity:0;transform:translateY(12px);pointer-events:none}
.menu-ctl{right:var(--g)}

/* Full-screen menu */
.menu{position:fixed;inset:0;z-index:44;background:var(--accent);color:var(--on-accent);padding:calc(18px + env(safe-area-inset-top,0px)) var(--g) 80px;display:grid;align-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu.open{clip-path:inset(0);visibility:visible}
.menu nav{display:grid}
.menu nav a{font-size:clamp(36px,5.4vw,84px);line-height:1.05;letter-spacing:-.03em;text-decoration:none;font-weight:500;display:flex;align-items:baseline;gap:.25em;width:fit-content}
.menu nav a small{font-family:var(--f-mono);font-size:12px;letter-spacing:0;font-weight:400}
.menu nav a:hover .lbl{font-family:var(--f-serif);font-style:italic;font-weight:400}
.menu .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}


@media (max-width:900px){
  .info .c1,.info .c2{grid-column:span 6}.info .c3,.info .c4{grid-column:span 6;margin-top:14px}
  .statement,.hero .p1,.hero .p2{grid-column:1/-1}
  .irow{grid-template-columns:2rem minmax(0,1fr) 1.5rem}.irow .d{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card:nth-child(5n+1){grid-column:span 2}
  .exp .lead,.exp ul{grid-column:1/-1}
  .exp .lead{margin-bottom:20px}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .c1{grid-column:1/-1}.foot .c2,.foot .c3{grid-column:span 6;margin-top:14px}
}
@media (max-width:560px){
  .er{grid-template-columns:4.2rem minmax(0,1fr) 1rem}.er .r{grid-column:2;grid-row:2}
  .grid{grid-template-columns:minmax(0,1fr)}.card:nth-child(n){grid-column:auto}.card .ph,.card:nth-child(5n+1) .ph{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Shared bits ---------- */
.home-link{display:inline;text-decoration:none}
.info .home-link{background:none}
.eyebrow a{text-decoration:none;border-bottom:1px solid var(--rule)}
.eyebrow a:hover{border-color:currentColor}

/* ---------- Case study pages ---------- */
/* Layout: same 12-col grid; section titles sit in the left 3 columns, reading text in columns 5-11, images run full width. */
.cs-intro{padding-block:clamp(48px,7vw,104px) clamp(28px,4vw,56px);row-gap:clamp(20px,2.4vw,32px)}
.cs-intro .eyebrow{grid-column:1/-1;margin:0}
.cs-title{grid-column:1/span 9;margin:0;font-size:clamp(36px,4.8vw,76px);line-height:1.02;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.cs-title .serif{display:block;font-style:italic;font-weight:400;color:var(--ink-2);letter-spacing:-.01em;font-size:.62em;margin-top:.25em}
.facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:20px var(--col-gap);border-top:1px solid var(--rule);padding-top:16px;margin-top:8px}
.facts div{display:grid;gap:6px;align-content:start;min-width:0}
.facts p{margin:0;font-size:15px;line-height:1.5}
.cs-hero{margin:0 0 clamp(40px,6vw,96px);display:flex;justify-content:center;background:var(--surface);border-radius:2px;padding:clamp(16px,3vw,48px)}
.cs-hero img{width:auto;max-width:min(100%,1100px);max-height:min(54vh,560px);height:auto;display:block;border-radius:2px}
.cs-body{display:grid;gap:clamp(48px,6vw,96px);padding-bottom:clamp(56px,7vw,110px)}
.cs-body>p,.cs-body>ul,.cs-body>ol,.cs-body>.points,.cs-body>.fig,.cs-body>.gallery{max-width:min(68ch,calc(100% / 12 * 7));margin:0;margin-left:calc((100% + var(--col-gap)) / 12 * 4);font-size:clamp(17px,1.3vw,19px)}
.cs-body>.gallery{max-width:calc(100% / 12 * 7);margin:0 0 0 calc((100% + var(--col-gap)) / 12 * 4)}
.cs-statement{margin:0;max-width:30ch;font-family:var(--f-serif);font-style:italic;font-size:clamp(28px,3.4vw,52px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.cs-sec{row-gap:clamp(18px,2vw,28px);align-items:start;border-top:1px solid var(--rule);padding-top:14px}
.cs-sec>*{grid-column:5/span 7;margin:0;min-width:0}
.cs-sec>.cs-h{grid-column:1/span 3;grid-row:1/span 2;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.02em;text-transform:uppercase;line-height:1.45;position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
.cs-sec>.wide{grid-column:1/-1}
.cs-sec>p{font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:66ch}
.cs-h3{font-size:clamp(19px,1.6vw,24px);font-weight:500;letter-spacing:-.015em;margin:12px 0 0}
.fig{margin:0;display:grid;gap:8px}
.fig img{width:auto;max-width:100%;max-height:min(70vh,720px);height:auto;display:block;border-radius:2px;background:var(--surface)}
.gallery .fig img{width:100%;max-height:none}
.fig.narrow{max-width:400px}
.fig.phone{max-width:240px}
.fig figcaption{font-size:12px;text-transform:none}
.fig-link{display:block}
.fig-link img{transition:opacity .3s}.fig-link:hover img{opacity:.85}
.gallery{display:grid;gap:var(--col-gap);align-items:start}
.gallery.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-list{padding-left:1.1em;display:grid;gap:10px;font-size:clamp(17px,1.3vw,19px);max-width:66ch}
.cs-list strong{font-weight:600}
.points{list-style:none;padding:0;border-top:1px solid var(--rule)}
.points li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--col-gap);padding-block:12px;border-bottom:1px solid var(--rule);font-size:clamp(16px,1.25vw,18px)}
.cs-body>.points{margin-left:calc((100% + var(--col-gap)) / 12 * 4)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--col-gap)}
.stats div{display:grid;gap:4px;border-top:1px solid var(--ink);padding-top:10px}
.stats b{font-size:clamp(34px,3.6vw,56px);font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--col-gap)}
.quote{margin:0;display:grid;gap:16px;align-content:space-between;padding:20px;background:var(--surface);border-radius:2px}
.quote blockquote{margin:0;font-family:var(--f-serif);font-size:clamp(20px,1.7vw,26px);line-height:1.2;letter-spacing:-.005em}
.quote figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;font-size:15px}
.quote figcaption span{grid-column:2}
.quote .avatar{grid-row:1/span 2;width:44px;height:44px;border-radius:50%;object-fit:cover}
.quote .mono{font-size:11px}
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--col-gap);align-items:end;text-decoration:none;border-top:1px solid var(--ink);padding-block:16px clamp(48px,6vw,96px)}
.next .mono{grid-column:1/-1}
.next .nt{font-size:clamp(28px,3.6vw,56px);letter-spacing:-.03em;line-height:1.05;font-weight:500}
.next .nt .serif{font-style:italic;font-weight:400;color:var(--ink-2);font-size:.6em;margin-left:.3em;letter-spacing:-.01em}
.next .go{font-size:clamp(24px,3vw,44px);color:var(--accent);transition:transform .3s}
.next:hover .go{transform:translateX(8px)}

/* ---------- About ---------- */
.about-grid{padding-block:clamp(48px,7vw,104px);row-gap:32px;align-items:start}
.about-portrait{grid-column:1/span 4;margin:0;position:sticky;top:24px}
.about-portrait img{width:100%;height:auto;display:block;border-radius:2px;background:var(--surface)}
.about-copy{grid-column:6/span 6;display:grid;gap:18px}
.about-copy .eyebrow{margin:0}
.about-copy p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:60ch}
.about-copy .about-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:12px;margin-top:12px}
.about-links a{text-decoration:none;border-bottom:1px solid var(--rule)}
.about-links a:hover{border-color:currentColor}

@media (max-width:900px){
  .cs-title{grid-column:1/-1}
  .cs-sec>*,.cs-sec>.cs-h{grid-column:1/-1;grid-row:auto;position:static}
  .cs-body>p,.cs-body>ul,.cs-body>ol,.cs-body>.points,.cs-body>.fig,.cs-body>.gallery{margin-left:0;max-width:100%}
  .gallery.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-portrait,.about-copy{grid-column:1/-1;position:static}
  .about-portrait{max-width:420px}
}
@media (max-width:560px){
  .gallery.cols-2,.gallery.cols-3{grid-template-columns:minmax(0,1fr)}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}