/* Layout: editorial 12-col grid. Small masthead row, indented intro paragraph, a five-slot nav at the bottom with the helmet in the middle slot.
   On scroll the nav climbs to the top and the helmet shrinks into the header's centre slot. Single light look on purpose: it is the studio's site. */
:root{
  --paper:#f1f0ee; --ink:#141414; --soft:#77726b; --rule:#d9d5cf; --metal:#a08f86;
  --display:"Sohne","Helvetica Neue",Arial,sans-serif;
  --head:"Almarena Neue Display","Helvetica Neue",Arial,sans-serif; /* display face */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --navh:64px;
  --m:16px; /* page margin, kept deliberately tight */
  color-scheme:light;
}
html,body{background:var(--paper);color:var(--ink)}
html{scrollbar-gutter:stable} /* the header snap locks scrolling for a moment: with a classic scrollbar the page must not shift */
body{font-family:var(--display);overflow-x:hidden}
.gutter{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}

/* ---------- fold ---------- */
.fold{height:100vh;height:100svh;min-height:520px;position:relative}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px}
.mast{padding-top:calc(env(safe-area-inset-top,0px) + var(--m))}
.topbar{font-family:var(--head);font-size:14px;font-weight:550;letter-spacing:-.005em;align-items:baseline}
.topbar>span{white-space:nowrap}
.c1{grid-column:1/4}.c4{grid-column:4/7}.c7{grid-column:7/10}.c10{grid-column:10/13;text-align:right}
.topbar .mark{line-height:0}
.topbar .mark svg{display:inline-block;height:12px;width:auto;color:var(--ink);overflow:visible}
/* phone: as the helmet docks, the logo collapses into TDL. Every letter slides by its own --dx (set in logo.svg)
   times --swap (0..1, from main.js); T, D and L stay solid, the rest fade out on the way */
.mark-logo path{transform:translateX(calc(var(--swap,0) * var(--dx,0px)))}
.mark-logo path.fade{opacity:calc(1 - var(--swap,0) * 1.6)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.intro{font-weight:550;font-size:clamp(28px,3.5vw,62px);line-height:1.04;letter-spacing:-.022em;margin:clamp(40px,9vh,120px) 0 0;text-wrap:pretty;
  text-indent:calc((100% + 16px) * 3 / 12)}
.intro .v{color:var(--soft)}
[data-env]{white-space:nowrap}

/* ---------- nav (fixed, travels from bottom to top) ---------- */
.nav{position:fixed;left:0;right:0;top:0;height:var(--navh);z-index:5;will-change:transform}
.nav .bg{position:absolute;inset:0;background:var(--paper);opacity:0}
/* the nav sits on the same four columns as a 4-up gallery row (edge to edge, no gaps):
   Works and About start a margin inside columns 1 and 2, Services and Contact end a margin inside columns 3 and 4;
   the helmet docks on the centre line between them */
.nav .row{position:relative;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;padding-inline:0}
.nav .row>span[aria-hidden]{display:none}
.nav a{color:var(--ink);text-decoration:none;font-weight:550;font-size:clamp(16px,1.8vw,26px);letter-spacing:-.005em;padding:8px 0;position:relative}
.nav a[data-nav="works"],.nav a[data-nav="about"]{justify-self:start;margin-left:max(var(--m),env(safe-area-inset-left,0px))}
.nav a[data-nav="services"],.nav a[data-nav="contact"]{justify-self:end;margin-right:max(var(--m),env(safe-area-inset-right,0px))}

.nav a:focus-visible{outline:2px solid var(--metal);outline-offset:2px;border-radius:2px}

/* ---------- helmet ---------- */
#gl{position:fixed;left:0;top:0;transform-origin:0 0;z-index:6;cursor:move;touch-action:none;will-change:transform}
#gl.dragging{cursor:move}
#gl.docked{cursor:pointer;touch-action:auto}
/* picked up: a soft shadow under the helmet while it is being dragged */
#gl{transition:filter .25s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#gl.dragging{filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
/* first load (see functions.php): the page fades in and its opening text rises as soon as the fonts are in; the helmet
   and the header follow once the helmet's first frame is ready */
html.boot #view,html.enter #view,html.boot-h .nav,html.boot-h #gl,html.boot-h .phone-logo,html.boot-h .burger{opacity:0}
html.boot .intro,html.boot .about-head .lede,html.boot .p-head,html.enter .intro,html.enter .about-head .lede{transform:translateY(28px)}
html.boot-in #view,html.enter-in #view{transition:opacity .7s ease}
html.boot-in .intro,html.boot-in .about-head .lede,html.boot-in .p-head,html.enter-in .intro,html.enter-in .about-head .lede{transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
html.boot-h-in #gl{transition:opacity 1.2s ease,filter .25s ease}
html.boot-h-in .nav,html.boot-h-in .phone-logo,html.boot-h-in .burger{transition:opacity .9s ease .25s}
@media (prefers-reduced-motion:reduce){html.boot .intro,html.boot .about-head .lede,html.boot .p-head,html.enter .intro,html.enter .about-head .lede{transform:none}}
/* touch: swipes on the helmet scroll the page; the drag needs a long press (main.js) */
@media (pointer:coarse){#gl{touch-action:pan-y}}

/* ---------- content ---------- */
/* ---------- works: full-bleed rows, one image or two halves, no gutters ---------- */
.works{display:grid;grid-template-columns:1fr 1fr;will-change:transform}
.proj{display:block;color:inherit;text-decoration:none;position:relative;margin:0;overflow:hidden;height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));min-height:420px;cursor:pointer;background:var(--tone)}
.proj.full{grid-column:1/3}
.proj .img{position:absolute;inset:0;background:radial-gradient(120% 90% at var(--gx,30%) var(--gy,20%),color-mix(in srgb,var(--tone) 70%,#fff) 0%,var(--tone) 55%,color-mix(in srgb,var(--tone) 75%,#000) 100%);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.proj:hover .img,.proj:hover img{transform:scale(1.025)}
/* title left, discipline right; when both no longer fit on one line the discipline drops under the title
   (flex-wrap measures the title at its full length, and space-between puts a lone item at the start) */
.proj .cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding-block:var(--m);color:var(--cap,#fff);font-size:14px;font-weight:550;letter-spacing:-.005em}
.proj .cap-t{font:inherit;letter-spacing:inherit;margin:0;min-width:0} /* a heading for search and screen readers, set like the caption */
.proj .cap>span{opacity:.75;white-space:nowrap}
.proj .ph{position:absolute;top:var(--m);left:var(--m);font-size:12px;font-weight:500;color:var(--cap,#fff);opacity:.55}

button:focus-visible,input:focus-visible{outline:2px solid var(--metal);outline-offset:2px}



/* ---------- custom cursor: hollow ring, filled over anything clickable ---------- */
#cur{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:70;mix-blend-mode:difference;opacity:0;transition:opacity .2s}
#cur i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border:1.5px solid #fff;border-radius:50%;box-sizing:border-box;transition:background-color .18s,transform .18s}
#cur.on i{background:#fff}
#cur.down i{transform:scale(.75)}
/* over the draggable helmet: a wider ring with four hairline chevrons */
#cur svg{position:absolute;left:-26px;top:-26px;width:52px;height:52px;opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .2s,transform .28s cubic-bezier(.2,.7,.2,1)}
#cur.move i{transform:scale(2.9);background:transparent;border-width:.6px}
#cur.move svg{opacity:1;transform:scale(1) rotate(0)}
#cur.move.down svg{transform:scale(.86)}
#cur.move.down i{transform:scale(2.5)}
@media (pointer:fine){html.has-cur,html.has-cur *{cursor:none!important}}

::selection{background:var(--ink);color:var(--paper)}


/* ---------- project view ---------- */
#project[hidden]{display:none}
.project{padding-top:calc(var(--navh) + env(safe-area-inset-top,0px))}
.p-hero{position:relative;height:calc(82vh - var(--navh));height:calc(82svh - var(--navh));min-height:360px;background:var(--tone);overflow:hidden}
.p-hero .img,.p-shot .img,.ghost .gi{background:radial-gradient(120% 90% at var(--gx,30%) var(--gy,20%),color-mix(in srgb,var(--tone) 70%,#fff) 0%,var(--tone) 55%,color-mix(in srgb,var(--tone) 75%,#000) 100%)}
.p-hero .img{position:absolute;inset:0}
.p-hero .ph,.p-shot .ph{position:absolute;top:var(--m);left:var(--m);font-size:12px;font-weight:500;color:var(--cap,#fff);opacity:.55}
.ghost{position:fixed;z-index:4;pointer-events:none;overflow:hidden;will-change:transform,clip-path}
.ghost .gi{position:absolute;inset:0;will-change:transform}
.safe-top{display:none}
.p-head{padding-block:clamp(28px,5vh,56px) clamp(56px,10vh,120px);row-gap:28px;align-items:end}
/* titles are full sentences now ("Client: the question"), so they sit at about half the old display size */
.p-head h1{grid-column:1/13;font-weight:650;font-size:clamp(32px,4.4vw,80px);line-height:1;letter-spacing:-.03em;margin:0;white-space:normal}
.p-meta{grid-column:4/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:1px solid var(--rule);padding-top:14px}
.p-meta div{font-size:14px;font-weight:550;min-width:0}
.p-meta dt{color:var(--soft);font-weight:500;margin-bottom:4px}
.p-meta dd{margin:0}
.p-meta .todo{color:var(--soft)}
.p-intro{padding-bottom:clamp(64px,12vh,160px)}
.p-intro .body-lg{grid-column:4/13;max-width:34ch}
.p-intro .note{grid-column:1/4;font-size:14px;font-weight:550;color:var(--soft)}
/* gallery: rows built in the admin (1, 2 or 4 columns), edge to edge with no gaps.
   A row is as tall as its tallest piece of media; the others fill the same height */
.p-gallery{display:grid}
.p-row{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr))}
.p-shot{margin:0;position:relative;background:var(--tone);overflow:hidden;min-width:0}
.p-shot .img{position:absolute;inset:0}
.p-shot .ph-fill{position:static;aspect-ratio:3/2}
.p-row:not([style*="--cols:1"]) .p-shot .ph-fill{aspect-ratio:4/5}
/* next project: a label row on top, then the title at the project-title size with its discipline under it,
   both starting at the About column like the content above (see the --about-off rule) */
.p-next{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:62vh;min-height:360px;background:var(--tone);color:var(--cap,#fff);text-decoration:none;overflow:hidden}
.p-next .img{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.p-next:hover .img{transform:scale(1.025)}
.p-next .ph{display:none}
.p-next .nx-top,.p-next .nx-body{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px}
.p-next .nx-top{padding-top:var(--m);font-size:14px;font-weight:550;opacity:.75}
.p-next .nx-top>span:first-child{grid-column:1/12}
.p-next .nx-arrow{grid-column:12/13;justify-self:end;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.p-next:hover .nx-arrow{transform:translateX(6px)}
.p-next .nx-body{padding-bottom:var(--m);row-gap:14px}
.p-next b{grid-column:1/13;font-weight:650;font-size:clamp(32px,4.4vw,80px);line-height:1;letter-spacing:-.03em}
.p-next .nx-disc{grid-column:1/13;font-size:14px;font-weight:550;opacity:.75}
/* staged reveal of the project text once the image has landed */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}


/* ---------- case study bottom sheet ---------- */
.p-more{grid-column:4/13;justify-self:start;margin-top:28px;display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;font:inherit;font-size:clamp(16px,1.4vw,20px);font-weight:550;color:var(--ink);cursor:pointer}
.p-more .dot{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background .25s,color .25s}
.p-more .dot svg{width:14px;height:14px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.p-more:hover .dot{background:var(--ink);color:var(--paper)}
.p-more:hover .dot svg{transform:translateY(-2px)}
.p-more:focus-visible{outline:2px solid var(--metal);outline-offset:6px;border-radius:4px}
/* closing: the sheet sinks slowly with an ease-in-out and the wrapper stays visible until it has left the screen */
.sheet-wrap{position:fixed;inset:0;z-index:20;visibility:hidden;transition:visibility 0s linear .95s}
.sheet-wrap.open{visibility:visible;transition:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(20,20,20,.38);opacity:0;transition:opacity .8s ease .1s}
.sheet-wrap.open .sheet-scrim{transition:opacity .45s ease}
.sheet-wrap.open .sheet-scrim{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;height:min(90vh,100% - 40px);height:min(90svh,100% - 40px);background:var(--paper);border-radius:0;transform:translateY(102%);transition:transform .95s cubic-bezier(.65,0,.35,1);display:flex;flex-direction:column;box-shadow:0 -20px 60px rgba(0,0,0,.14);will-change:transform}
.sheet-wrap.open .sheet{transform:translateY(var(--drag,0px));transition:transform .7s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1)}
.sheet.full{height:calc(100% - env(safe-area-inset-top,0px))} /* pulled up by its top bar on touch screens */
.sheet.dragging,.sheet-wrap.open .sheet.dragging{transition:none}
.sheet-top{flex:none;position:relative;padding-top:10px;border-bottom:1px solid var(--rule);touch-action:none}
.sheet-handle{width:44px;height:4px;border-radius:2px;background:var(--rule);margin:0 auto 10px}
/* the top bar only carries Close; the title stays for screen readers (it labels the dialog) */
.sheet-bar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:baseline;padding-bottom:14px}
.sheet-close{grid-column:12/13;justify-self:end}
.sheet-close{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;font-weight:550;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sheet-close:focus-visible{outline:2px solid var(--metal);outline-offset:4px}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cs{padding-block:clamp(40px,7vh,88px) clamp(64px,12vh,140px);row-gap:0}
.cs-lede{grid-column:1/13;font-weight:550;font-size:clamp(26px,3.2vw,54px);line-height:1.05;letter-spacing:-.022em;margin:0 0 clamp(48px,9vh,110px);text-indent:calc((100% + 16px) * 3 / 12);text-wrap:pretty}
.cs-sec{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;padding-block:20px clamp(40px,7vh,80px);border-top:1px solid var(--rule)}
.cs-sec h3{grid-column:1/4;font-size:14px;font-weight:550;color:var(--soft);margin:2px 0 16px}
.cs-sec h3 em{display:block;font-style:normal;color:var(--ink);font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.015em;margin-top:6px}
.cs-sec .txt{grid-column:4/11;min-width:0}
.cs-sec p{font-size:clamp(16px,1.2vw,19px);line-height:1.55;margin:0 0 1em;max-width:62ch;color:#2b2926}
.cs-sec p.todo{color:var(--soft)}
.cs-facts{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:1px solid var(--rule);padding-top:20px}
.cs-facts div{font-size:clamp(28px,3vw,48px);font-weight:650;letter-spacing:-.025em;line-height:1}
.cs-facts small{display:block;font-size:13px;font-weight:500;color:var(--soft);letter-spacing:0;margin-top:8px}
html.sheet-lock,html.sheet-lock body{overflow:hidden}
/* not found: the 404 fills the first screen */
.nf{min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));padding-top:calc(var(--navh) + env(safe-area-inset-top,0px));padding-bottom:clamp(40px,8vh,96px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.nf-num{margin:0;font-family:var(--head);font-weight:500;font-size:clamp(150px,32vw,520px);line-height:.8;letter-spacing:-.05em;color:var(--ink)}
.nf-line{margin:clamp(28px,6vh,64px) 0 0;font-size:clamp(22px,2.6vw,40px);font-weight:550;line-height:1.08;letter-spacing:-.022em;max-width:20ch;text-wrap:balance}
.nf-back{margin-top:clamp(18px,3vh,28px);font-size:15px;font-weight:550;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.nf-back:hover,.nf-back:focus-visible{background-size:100% 1px}
.nf-back:focus-visible{outline:2px solid var(--metal);outline-offset:4px}
@media (max-width:700px){.nf-num{font-size:clamp(120px,40vw,220px)}.nf-line{max-width:16ch}}
/* gallery viewer (main.js): dark ground, the piece at its own proportions, a thin close mark top right */
html.lb-lock,html.lb-lock body{overflow:hidden}
#pGallery .p-shot:has(img),#pGallery .p-shot:has(video){cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:60;background:rgba(14,14,14,0);transition:background-color .4s ease;outline:none}
.lb.on{background:rgba(14,14,14,1)}
.lb-media{position:absolute;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .3s ease;opacity:0;will-change:transform}
.lb.on .lb-media{opacity:1}
.lb-media>img,.lb-media .vp,.lb-media>video{display:block;width:100%;height:100%}
.lb-media img,.lb-media video{object-fit:contain}
.lb-media .vp video{height:100%}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + var(--m));right:max(var(--m),env(safe-area-inset-right,0px));width:44px;height:44px;margin:-10px -10px 0 0;padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity .3s ease .15s;-webkit-tap-highlight-color:transparent}
.lb.on .lb-close{opacity:1}
.lb-close i{position:absolute;left:50%;top:50%;width:22px;height:1.5px;margin:-.75px 0 0 -11px;background:#fff;transform:rotate(45deg)}
.lb-close i+i{transform:rotate(-45deg)}
.lb-close:focus-visible{outline:2px solid var(--metal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lb,.lb-media,.lb-close{transition:none}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-scrim,.sheet-wrap,.sheet-wrap.open .sheet,.sheet-wrap.open .sheet-scrim{transition:none}}


/* ---------- case study as a paper ---------- */
.ac{padding-block:clamp(40px,7vh,88px) clamp(72px,12vh,140px);row-gap:0;font-variant-numeric:tabular-nums}
/* document number sits in the sheet's top bar, over the title column */
.ac-docno{grid-column:4/12;font-size:13px;font-weight:550;color:var(--soft);letter-spacing:.02em;display:flex;gap:12px}
.ac-title{grid-column:4/13;font-weight:600;font-size:clamp(30px,3.6vw,60px);line-height:1.02;letter-spacing:-.025em;margin:0 0 16px;text-wrap:balance}
.ac-by{grid-column:4/13;font-size:15px;font-weight:500;color:var(--soft);margin:0 0 clamp(40px,7vh,72px)}
.ac-abs{grid-column:4/11;margin:0 0 clamp(48px,8vh,88px)}
.ac-abs h4,.ac-notes h4{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.ac-abs p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;margin:0 0 14px;color:#2b2926}
.ac-kw{font-size:14px;color:var(--soft)}
.ac-kw b{font-weight:600;color:var(--ink)}
.ac-sec{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;margin-bottom:clamp(36px,6vh,64px)}
.ac-sec>h3{grid-column:4/11;font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.012em;margin:0 0 14px;display:flex;gap:.6em}
.ac-sec>h3 .n,.ac-sub h4 .n{color:var(--soft);font-weight:500;min-width:1.6em}
.ac-body{grid-column:4/11;min-width:0}
.ac-body p{font-size:clamp(16px,1.15vw,18px);line-height:1.6;margin:0 0 1em;color:#2b2926;text-wrap:pretty}
.ac-body .todo{color:var(--soft)}
.ac-sub h4{font-size:16px;font-weight:600;margin:22px 0 8px;display:flex;gap:.6em}
.ac-side{grid-column:11/13;font-size:12.5px;line-height:1.45;color:var(--soft);padding-left:12px;border-left:1px solid var(--rule);align-self:start;margin-top:44px}
.ac-side sup,.ac-body sup{font-size:.7em;font-weight:600;color:var(--ink)}
.ac-fig{margin:24px 0 8px}
.ac-fig .box{aspect-ratio:16/9;background:radial-gradient(120% 90% at var(--gx,30%) var(--gy,20%),color-mix(in srgb,var(--tone) 70%,#fff) 0%,var(--tone) 55%,color-mix(in srgb,var(--tone) 75%,#000) 100%)}
.ac-fig figcaption{font-size:13px;color:var(--soft);margin-top:8px}
.ac-fig figcaption b{color:var(--ink);font-weight:600}
.ac-table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 6px}
.ac-table th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding:8px 8px 8px 0}
.ac-table td{border-bottom:1px solid var(--rule);padding:9px 8px 9px 0;color:var(--soft)}
.ac-table td:first-child{color:var(--ink);font-weight:550}
.ac-tcap{font-size:13px;color:var(--soft);margin:0 0 1em}
.ac-tcap b{color:var(--ink);font-weight:600}
.ac-notes{grid-column:4/11;border-top:1px solid var(--ink);padding-top:14px;margin-top:8px}
.ac-notes ol{margin:0;padding-left:1.4em;font-size:13.5px;line-height:1.5;color:var(--soft);display:grid;gap:6px}

/* ---------- page loader ---------- */
#fold[hidden],#works[hidden],#about[hidden]{display:none}
.nav a[aria-current]{color:var(--soft)}
#loadbar{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ink);transform-origin:0 0;transform:scaleX(0);opacity:0;z-index:30;pointer-events:none}
.view-fade{transition:opacity .22s ease}
.view-out{opacity:0}

/* ---------- about ---------- */
.about{padding-top:calc(var(--navh) + env(safe-area-inset-top,0px))}
.about-head{padding-top:clamp(40px,9vh,120px);padding-bottom:clamp(56px,10vh,140px);row-gap:24px}
.about-head .lbl{grid-column:1/4;margin:0;font-size:14px;font-weight:550;color:var(--soft)}
.about-head .lede{grid-column:1/13;font-weight:550;font-size:clamp(28px,3.5vw,62px);line-height:1.04;letter-spacing:-.022em;margin:0;text-indent:calc((100% + 16px) * 3 / 12);text-wrap:pretty}
.about-body{align-items:start}
.toc{grid-column:1/4;position:sticky;top:calc(var(--navh) + 24px);align-self:start;padding-right:24px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.toc a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:var(--soft);text-decoration:none;font-size:15px;font-weight:550;transition:color .25s}
.toc a .track{height:1px;background:var(--rule);position:relative;overflow:hidden}
.toc a .track i{position:absolute;inset:0;background:var(--ink);transform-origin:0 0;transform:scaleX(var(--fill,0))}
.toc a .pct{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;opacity:0;transition:opacity .25s}
.toc a.on{color:var(--ink)}.toc a.on .pct{opacity:1}
.toc a:focus-visible{outline:2px solid var(--metal);outline-offset:4px}
.about-main{grid-column:4/13;min-width:0}
.chapter{padding-bottom:clamp(96px,16vh,200px);scroll-margin-top:calc(var(--navh) + 24px)}
.chapter>h2{font-weight:650;font-size:clamp(56px,9vw,160px);line-height:.86;letter-spacing:-.035em;margin:0 0 clamp(32px,5vh,64px)}
.body-lg{font-size:clamp(22px,2.3vw,38px);line-height:1.14;letter-spacing:-.016em;font-weight:500;margin:0 0 .9em;max-width:32ch;text-wrap:pretty}
.body-lg:last-of-type{margin-bottom:0}
.kicker{font-size:14px;font-weight:550;color:var(--soft);margin:0 0 12px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 16px;margin-top:clamp(56px,9vh,112px);padding-top:20px;border-top:1px solid var(--rule)}
.cols2 h3{font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.015em;margin:0 0 12px}
.cols2 p{font-size:16px;line-height:1.5;margin:0 0 .8em;max-width:46ch;color:#2b2926}
/* approach: six principles as an index. Each row opens on a hairline that draws itself in from the left with the
   number riding on it; the title is set large with its second line in the soft tone; the text rises in after it.
   Rows get .in from main.js when they scroll into view; no hover movement */
.principles{list-style:none;margin:0;padding:0;counter-reset:pr;border-bottom:1px solid var(--rule)}
.principles li{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);column-gap:24px;align-items:start;padding-block:clamp(48px,7vh,72px) clamp(40px,6vh,64px);counter-increment:pr}
.principles li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.principles li::after{content:counter(pr,decimal-leading-zero);position:absolute;left:0;top:14px;font-size:13px;font-weight:550;letter-spacing:.02em;color:var(--soft);font-variant-numeric:tabular-nums;transition:color .3s,opacity .6s ease .3s}
.principles h3{margin:0;font-size:clamp(34px,4vw,68px);font-weight:650;letter-spacing:-.035em;line-height:.98}
.principles h3 span{color:var(--soft)}
.principles p{margin:.35em 0 0;font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:#2b2926;max-width:44ch;text-wrap:pretty;transition:opacity .8s ease .25s,transform 1s cubic-bezier(.2,.7,.2,1) .25s}
/* the hidden start state only applies once main.js is running, so without JS everything simply shows */
.js-reveal .principles li:not(.in)::before{transform:scaleX(0)}
.js-reveal .principles li:not(.in)::after{opacity:0}
.js-reveal .principles li:not(.in) p{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){.principles li::before,.principles li::after,.principles p{transition:none}}
/* team: names only, set as a credits list on the principles' columns: name large on the left, role soft on the right,
   a hairline between, drawn in on scroll like the principles; no hover movement */
.team-list{list-style:none;margin:clamp(40px,6vh,72px) 0 0;padding:0;border-bottom:1px solid var(--rule)}
.team-list li{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);column-gap:24px;align-items:baseline;padding-block:18px 20px}
.team-list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform-origin:0 50%;transition:transform 1s cubic-bezier(.65,0,.35,1)}
.team-list b{font-size:clamp(24px,2.4vw,40px);font-weight:650;letter-spacing:-.025em;line-height:1.05}
.team-list span{font-size:clamp(15px,1.1vw,18px);font-weight:500;color:var(--soft);transition:opacity .7s ease .2s,transform .9s cubic-bezier(.2,.7,.2,1) .2s}
.js-reveal .team-list li:not(.in)::before{transform:scaleX(0)}
.js-reveal .team-list li:not(.in) span{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){.team-list li::before,.team-list span{transition:none}}
/* services: the principles index again, the right column a list of points split by hairlines instead of a paragraph */
.svc-intro{padding-bottom:clamp(96px,16vh,200px)}
.svc-list ul{list-style:none;margin:.35em 0 0;padding:0;font-size:clamp(16px,1.15vw,18px);line-height:1.45;color:#2b2926;max-width:44ch;transition:opacity .8s ease .25s,transform 1s cubic-bezier(.2,.7,.2,1) .25s}
.svc-list ul li{display:block;padding:.55em 0;border-top:1px solid var(--rule);counter-increment:none;text-wrap:pretty}
.svc-list ul li::before,.svc-list ul li::after{content:none}
.svc-list ul li:first-child{padding-top:0;border-top:0}
.js-reveal .svc-list>li:not(.in) ul{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){.svc-list ul{transition:none}}
/* contact: an index of ways in. Label on the left (where the table of contents sits elsewhere), the value large from the
   About column, an arrow at the right edge; hairlines drawn in on scroll like the principles, no hover movement */
.ct-list{list-style:none;margin:0 0 clamp(96px,16vh,200px);padding:0;border-bottom:1px solid var(--rule)}
.ct-list li{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:baseline;padding-block:clamp(22px,3.4vh,36px)}
.ct-list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.ct-label{grid-column:1/4;font-size:14px;font-weight:550;color:var(--soft);transition:opacity .7s ease .2s}
.ct-value{grid-column:4/12;font-size:clamp(26px,3vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:opacity .8s ease .2s,transform 1s cubic-bezier(.2,.7,.2,1) .2s}
a.ct-value{grid-column:4/13;display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline}
.ct-value i{font-style:normal;font-size:.6em;color:var(--soft);transition:color .25s}
.ct-value i svg{display:inline-block;width:1em;height:1em;vertical-align:-.05em} /* drawn, not the ↗ character, which iPhone turns into an emoji */
a.ct-value:hover i{color:var(--ink)}
a.ct-value:focus-visible{outline:2px solid var(--metal);outline-offset:6px}
.ct-time{grid-column:12/13;justify-self:end;font-size:14px;font-weight:550;color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-time time{color:var(--ink)}
.js-reveal .ct-list li:not(.in)::before{transform:scaleX(0)}
.js-reveal .ct-list li:not(.in) .ct-label{opacity:0}
.js-reveal .ct-list li:not(.in) .ct-value{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){.ct-list li::before,.ct-label,.ct-value{transition:none}}
@media (max-width:700px){
  .ct-list li{grid-template-columns:1fr auto;row-gap:8px}
  .ct-label{grid-column:1/-1}
  .ct-value,a.ct-value{grid-column:1/-1;font-size:clamp(19px,5.4vw,30px)}
  a.ct-value{display:block}
  .ct-value i{margin-left:.35em}
  .ct-time{grid-column:1/-1;justify-self:start}
}
.about-foot{padding-block:20px 32px;border-top:1px solid var(--rule);font-size:14px;font-weight:550}
.about-foot .c4,.about-foot .c7{color:var(--soft)}

@media (max-width:700px){
  .ac-title,.ac-by,.ac-abs,.ac-sec>h3,.ac-body,.ac-notes{grid-column:1/13}
  .ac-side{grid-column:1/13;margin:4px 0 0;border-left:0;border-top:1px solid var(--rule);padding:8px 0 0}
  .ac-docno{grid-column:1/12}
  .p-more{grid-column:1/13}
  .cs-lede{text-indent:0}
  .cs-sec h3,.cs-sec .txt{grid-column:1/13}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-meta{grid-column:1/13;grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-intro .body-lg,.p-intro .note{grid-column:1/13}
  .p-row{grid-template-columns:1fr}
  .about-head .lede{text-indent:0}
  .about-head .lbl{grid-column:1/13}
  .toc{grid-column:1/13;top:var(--navh);z-index:4;background:var(--paper);margin-inline:calc(var(--m) * -1);padding:10px var(--m);border-bottom:1px solid var(--rule)}
  .toc ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .toc a{grid-template-columns:1fr;gap:6px;font-size:14px}
  .toc a .pct{display:none}
  .about-main{grid-column:1/13;margin-top:32px}
  .chapter{scroll-margin-top:calc(var(--navh) + 64px)}
  .cols2{grid-template-columns:1fr}
  .team-list li{grid-template-columns:1fr;row-gap:4px}
  .principles li{grid-template-columns:1fr;row-gap:18px}
  .principles h3{font-size:clamp(30px,9vw,40px)}
  .about-foot .c4,.about-foot .c7{display:none}
  :root{--navh:60px} /* phone header = margin + 12px logo line + margin */
  :root{--m:24px}
  .intro{font-size:clamp(22px,6vw,40px);text-indent:0;margin-top:72px}
  .topbar .c4,.topbar .c10{display:none}
  .c1{grid-column:1/7}.c10{grid-column:7/13}
  .works{grid-template-columns:1fr}
  .proj,.proj.full{grid-column:1/2;height:auto;min-height:0;aspect-ratio:4/5}
  .proj.full{aspect-ratio:3/4}
  /* phone: no travelling nav bar. The logo and the menu button stay put, only the helmet docks between them */
  .nav{display:none}
  /* a real element, not body::before: Safari 26 only fills the status-bar area above the page with the colour of a
     fixed bar it can find at the top, and it ignores pseudo-elements, so the page showed through under the clock */
  /* it also reaches 160px above the top edge: in-app browsers (Telegram, Instagram) draw the page under their own
     floating bar, outside the viewport, where a strip that starts at 0 cannot cover it */
  .safe-top{display:block;position:fixed;z-index:5;top:-160px;left:0;right:0;height:calc(160px + env(safe-area-inset-top,0px) + var(--navh));background-color:#f1f0ee;pointer-events:none}
  .mast{padding-top:calc(env(safe-area-inset-top,0px) + var(--m) + 12px)}
  .topbar{position:fixed;z-index:7;top:calc(env(safe-area-inset-top,0px) + var(--m));left:0;right:0;padding-inline:max(var(--m),env(safe-area-inset-left,0px)) max(var(--m),env(safe-area-inset-right,0px));pointer-events:none}
  .topbar a,.topbar button{pointer-events:auto}
}
html,body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}

/* ---------- WordPress: real images inside tiles, heroes and portraits ---------- */
.p-hero img,.p-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.p-shot img,.p-shot video{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.p-next img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.p-next:hover img{transform:scale(1.025)}
.ghost img{width:100%;height:100%;object-fit:cover;display:block}
.about-main>p:not([class]){font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:62ch;color:#2b2926}

/* ---------- case study body: written in the block editor, laid out as a paper ----------
   h2 = numbered section, h3 = numbered subsection, image/table captions become Fig. n / Table n,
   footnotes become Notes. */
.ac-content{grid-column:4/13;min-width:0;counter-reset:sec fig tab}
.ac-content>*{max-width:calc((700% - 32px) / 9);margin-top:0}
.ac-content p{font-size:clamp(16px,1.15vw,18px);line-height:1.6;margin:0 0 1em;color:#2b2926;text-wrap:pretty}
.ac-content h2{counter-increment:sec;counter-reset:sub;font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.012em;margin:clamp(36px,6vh,64px) 0 14px;display:flex;gap:.6em}
.ac-content h2:first-child{margin-top:0}
.ac-content h2::before{content:counter(sec);color:var(--soft);font-weight:500;min-width:1.6em}
.ac-content h3{counter-increment:sub;font-size:16px;font-weight:600;margin:22px 0 8px;display:flex;gap:.6em}
.ac-content h3::before{content:counter(sec) "." counter(sub);color:var(--soft);font-weight:500;min-width:1.6em}
.ac-content .is-style-placeholder{color:var(--soft)}
.ac-content sup{font-size:.7em;font-weight:600;color:var(--ink)}
.ac-content sup a{color:inherit;text-decoration:none}
.ac-content figure{margin:24px 0 16px}
.ac-content .wp-block-image{counter-increment:fig}
.ac-content .wp-block-image img{display:block;width:100%;height:auto}
.ac-content .wp-block-image .ph-box{aspect-ratio:16/9;background:radial-gradient(120% 90% at var(--gx,30%) var(--gy,20%),color-mix(in srgb,var(--tone) 70%,#fff) 0%,var(--tone) 55%,color-mix(in srgb,var(--tone) 75%,#000) 100%)}
.ac-content figcaption{font-size:13px;color:var(--soft);margin-top:8px;text-align:left}
.ac-content .wp-block-image figcaption::before{content:"Fig. " counter(fig) ". ";color:var(--ink);font-weight:600}
.ac-content .wp-block-table{counter-increment:tab;overflow-x:auto}
.ac-content .wp-block-table table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 6px}
.ac-content .wp-block-table th,.ac-content .wp-block-table thead td{text-align:left;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border:0;border-bottom:1px solid var(--ink);padding:8px 8px 8px 0}
.ac-content .wp-block-table td{border:0;border-bottom:1px solid var(--rule);padding:9px 8px 9px 0;color:var(--soft)}
.ac-content .wp-block-table td:first-child{color:var(--ink);font-weight:550}
.ac-content .wp-block-table thead{border:0}
.ac-content .wp-block-table figcaption::before{content:"Table " counter(tab) ". ";color:var(--ink);font-weight:600}
.ac-content ul,.ac-content ol{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:#2b2926;padding-left:1.2em;margin:0 0 1em}
.ac-content .wp-block-footnotes{clear:both;border-top:1px solid var(--ink);padding:14px 0 0 1.4em;margin-top:clamp(36px,6vh,64px);font-size:13.5px;line-height:1.5;color:var(--soft);display:grid;gap:6px;position:relative}
.ac-content .wp-block-footnotes::before{content:"Notes";position:absolute;left:0;top:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ac-content .wp-block-footnotes li:first-child{margin-top:28px}
.ac-content .wp-block-footnotes a{color:var(--soft)}
@media (max-width:700px){
  .ac-content{grid-column:1/13}
  .ac-content>*{max-width:none}
}

/* ---------- phone menu: two hairlines that turn into a cross, full-screen list ---------- */
.burger{display:none;position:fixed;z-index:10;top:calc(env(safe-area-inset-top,0px) + var(--m) + 6px - 22px);right:max(var(--m),env(safe-area-inset-right,0px));width:44px;height:44px;margin:0 -8px 0 0;padding:0;background:none;border:0;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (max-width:700px){.burger{display:block}}
.burger i{position:absolute;left:8px;right:8px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;border-radius:1px;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.burger i:first-child{transform:translateY(-4px)}
.burger i:last-child{transform:translateY(4px)}
.menu-open .burger i:first-child{transform:rotate(45deg)}
.menu-open .burger i:last-child{transform:rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--metal);outline-offset:-4px;border-radius:4px}
.menu{position:fixed;inset:0;z-index:8;background:var(--paper);visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s;overflow-y:auto;overscroll-behavior:contain}
.menu nav{display:flex;flex-direction:column;justify-content:center;min-height:100%;box-sizing:border-box;padding-block:calc(env(safe-area-inset-top,0px) + var(--navh)) calc(var(--navh) + env(safe-area-inset-bottom,0px))}
.menu a{display:block;padding:4px 0;color:var(--ink);text-decoration:none;font-weight:600;font-size:clamp(44px,13vw,72px);line-height:1;letter-spacing:-.035em;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.menu-open .menu{visibility:visible;opacity:1;transition:opacity .35s ease}
.menu-open .menu a{opacity:1;transform:none}
.menu-open .menu a:nth-child(2){transition-delay:.05s}
.menu-open .menu a:nth-child(3){transition-delay:.1s}
.menu-open .menu a:nth-child(4){transition-delay:.15s}
/* the big helmet on the fold would cover the list; once docked it stays in the header, above the menu */
.menu-open #gl:not(.docked){visibility:hidden}
.menu-open #gl.docked{z-index:9}
/* the masthead and the fold foot stay where they are, above the open menu */
.menu-open .topbar{z-index:9}
.menu-open .phone-logo{z-index:9}
html.menu-open,html.menu-open body{overflow:hidden}
@media (min-width:701px){.menu{display:none}}
@media (prefers-reduced-motion:reduce){.burger i,.menu,.menu a{transition:none}}

/* phone: foot of the fold carries the tagline (left) and the city (right) */
.fold-foot{display:none;position:absolute;left:0;right:0;bottom:calc(var(--m) - 3px + env(safe-area-inset-bottom,0px));line-height:1;align-items:last baseline;justify-content:space-between;font-family:var(--head);font-size:14px;font-weight:550;letter-spacing:-.005em}
.fold-foot .mark{line-height:0}
.fold-foot .mark svg{display:block;height:12px;width:auto;color:var(--ink)}
@media (max-width:700px){.fold-foot{display:flex}}

/* tablet: the intro reads 1.5x larger than the desktop scale would give it at this width.
   Any portrait screen wider than a phone counts as a tablet, so large iPads (1032 wide and up) get it too */
@media (min-width:701px) and (max-width:1024px),(min-width:701px) and (orientation:portrait){
  .intro{font-size:clamp(42px,5.25vw,62px)}
  /* works: same full / half+half rhythm as desktop, but sized by shape instead of screen height,
     so the full tile reads as a wide landscape image and the halves sit under it */
  .proj{height:auto;min-height:0}
  .proj.full{aspect-ratio:3/2}
  .proj.half{aspect-ratio:4/5}
  /* project gallery: one image per row, full width, sized by shape */
  .p-row{grid-template-columns:1fr} /* tablets stack the gallery, one piece per row */
}

/* ---------- site footer: big, logo bottom left, contacts lined up with the Services link (--svc-x, from main.js) ---------- */
.site-footer{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(440px,76vh,860px);padding-top:clamp(64px,10vh,120px);padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));box-sizing:border-box;--sf-side:80px;padding-inline:var(--sf-side)}
.sf-row{position:relative;display:flex;align-items:flex-end}
.sf-logo{display:block;width:clamp(130px,13.5vw,240px);line-height:0}
.sf-logo img{width:100%;height:auto}
/* in the flow, so the footer always grows to fit the list; main.js sets margin-left so it starts under Services.
   The negative bottom margin (the address's own descent) puts the last baseline on the logo's bottom edge */
.sf-contact{list-style:none;margin:0 0 -.403em;padding:0;display:grid;gap:clamp(20px,2.6vh,32px);font-size:clamp(18px,1.55vw,26px);flex:none}
.sf-contact span{display:block;font-size:14px;font-weight:500;color:var(--soft);margin-bottom:4px}
.sf-contact a{font-size:1em;font-weight:500;letter-spacing:-.012em;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.sf-contact a:hover,.sf-contact a:focus-visible{background-size:100% 1px}
.sf-contact b{font-size:1em;font-weight:500;letter-spacing:-.012em;color:var(--ink)} /* a contact without a link */
.sf-contact a:focus-visible{outline:2px solid var(--metal);outline-offset:3px}
.sf-line{margin:0 0 -.16em;font-size:clamp(44px,6vw,112px);font-weight:650;letter-spacing:-.04em;line-height:.9;color:var(--ink);white-space:nowrap} /* contact page: a sign-off instead of the contacts */
/* contact on desktop: the page above is short, so no tall footer; half the gap (tablet and phone footers are short already) */
@media (min-width:1025px) and (orientation:landscape){html[data-view="contact"] .site-footer{min-height:0;padding-top:clamp(96px,14vh,160px)}}
/* colophon row: a hairline, then copyright under the logo, the Tehran clock under the contacts, the offset at the far right */
.sf-meta{position:relative;display:flex;align-items:baseline;margin-top:clamp(56px,9vh,104px);padding-top:14px;border-top:1px solid var(--rule);font-size:14px;font-weight:500;color:var(--soft);font-variant-numeric:tabular-nums}
.sf-time{position:absolute;left:62%}
.sf-time time{color:var(--ink)}
.sf-tz{margin-left:auto}
@media (max-width:700px){
  .site-footer{min-height:0;padding-top:72px;--sf-side:max(var(--m),env(safe-area-inset-left,0px))} /* 80px sides would leave too little width on a phone */
  .sf-row{flex-direction:column-reverse;align-items:flex-start;gap:64px}
  .sf-contact{margin:0!important}
  .sf-line{font-size:clamp(40px,13vw,64px);white-space:normal}
  .sf-logo{width:50%}
  .sf-meta{flex-direction:column;align-items:flex-start;row-gap:6px;margin-top:32px}
  .sf-time,.sf-tz{display:none} /* phone keeps only the copyright */
}

/* tablet footer (after the base footer rules so it wins): tighter sides, far less empty space above */
@media (min-width:701px) and (max-width:1024px),(min-width:701px) and (orientation:portrait){
  .site-footer{--sf-side:40px;min-height:0;padding-top:120px}
  .sf-meta{margin-top:48px}
}

/* project page: title, meta row, overview and the case-study button start exactly under the About link (--about-off from main.js) */
@media (min-width:701px){
  .p-head h1,.p-meta,.p-intro .body-lg,.p-more,.p-next b,.p-next .nx-disc{grid-column:1/13;margin-left:var(--about-off,calc((100% + 16px) * 3 / 12))}
  .p-meta{min-width:0}
}

/* the drag handle is a touch affordance: hidden only on mouse-driven desktops, kept on phones and tablets */
@media (min-width:701px) and (hover:hover) and (pointer:fine){
  .sheet-handle{display:none}
  .sheet-top{padding-top:14px}
}

/* case study sheet: every column starts under the About link like the project page (right edges unchanged) */
@media (min-width:701px){
  .ac-docno{grid-column:1/12;margin-left:var(--about-off,0px)}
  .ac-title,.ac-by,.ac-content{grid-column:1/13;margin-left:var(--about-off,0px)}
  .ac-abs{grid-column:1/11;margin-left:var(--about-off,0px)}
}

/* phone logo: lives in the header (outside the swapped page), so it stays on every page */
.phone-logo{display:none}
@media (max-width:700px){
  .phone-logo{display:block;position:fixed;z-index:7;top:calc(env(safe-area-inset-top,0px) + var(--m));left:max(var(--m),env(safe-area-inset-left,0px));line-height:0;color:var(--ink)}
  .phone-logo svg{display:block;height:12px;width:auto;overflow:visible}
  html:not([data-view="home"]) .phone-logo{--swap:1} /* TDL from the first paint on inner pages */
  .topbar .c1{visibility:hidden} /* the masthead copy keeps its space; the header one is the visible logo */
}

/* ---------- case study blocks ----------
   --cs-off is how far the text column sits from the sheet's gutter (the About offset on desktop and tablet, 0 on phones);
   full-bleed blocks use it to reach the sheet's edges while their captions stay on the text column */
.ac-content{--cs-off:0px}
@media (min-width:701px){.ac-content{--cs-off:var(--about-off,0px)}}
.ac-content figure{margin:clamp(28px,4vh,48px) 0}

/* quote: the founder's own words, a size up, on a hairline */
.ac-content .wp-block-quote{margin:clamp(28px,4vh,44px) 0;padding:2px 0 2px 20px;border-left:1px solid var(--ink)}
.ac-content .wp-block-quote p{font-size:clamp(19px,1.6vw,24px);line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin:0 0 .4em}
.ac-content .wp-block-quote p:last-of-type{margin-bottom:0}
.ac-content .wp-block-quote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;font-weight:550;color:var(--soft)}

/* pull quote: the turning insight at display size, ruled above and below, running to the right margin */
.ac-content .wp-block-pullquote{max-width:none;margin:clamp(44px,7vh,88px) 0;padding:clamp(24px,4vh,40px) 0;border:0;border-block:1px solid var(--ink);text-align:left}
.ac-content .wp-block-pullquote blockquote{margin:0;padding:0;border:0}
.ac-content .wp-block-pullquote p{font-size:clamp(26px,3vw,46px);line-height:1.08;font-weight:600;letter-spacing:-.025em;color:var(--ink);margin:0;text-wrap:balance}
.ac-content .wp-block-pullquote cite{display:block;margin-top:18px;font-size:13px;font-style:normal;font-weight:550;color:var(--soft);text-transform:none}

/* lists: a short dash for bullets, soft numerals for ordered steps (footnotes keep their own list) */
.ac-content ul,.ac-content ol:not(.wp-block-footnotes){list-style:none;padding-left:0;counter-reset:li}
.ac-content ul>li,.ac-content ol:not(.wp-block-footnotes)>li{position:relative;padding-left:1.6em;margin-bottom:.5em}
.ac-content ul>li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:1px;background:currentColor;opacity:.45}
.ac-content ol:not(.wp-block-footnotes)>li{counter-increment:li}
.ac-content ol:not(.wp-block-footnotes)>li::before{content:counter(li);position:absolute;left:0;color:var(--soft);font-variant-numeric:tabular-nums}

/* images: in the text column by default, to the right margin when wide, to the sheet's edges when full */
.ac-content .wp-block-image img{display:block;width:100%;height:auto}
.ac-content .alignwide{max-width:none}
.ac-content .alignfull{max-width:none;width:calc(100% + var(--cs-off) + 2 * var(--m));margin-left:calc(-1 * (var(--cs-off) + var(--m)))}
.ac-content .alignfull figcaption{padding-left:calc(var(--cs-off) + var(--m));padding-right:var(--m)}

/* gallery: two up, cropped to one shape, a single Fig. caption for the set */
.ac-content .wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-increment:fig}
.ac-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#x){width:auto;margin:0;counter-increment:none}
.ac-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#x) img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ac-content .wp-block-gallery figure.wp-block-image figcaption{display:none}
.ac-content .wp-block-gallery .blocks-gallery-caption{grid-column:1/-1;margin:0;padding:0;text-align:left;font-size:13px;color:var(--soft)}
.ac-content .wp-block-gallery .blocks-gallery-caption::before{content:"Fig. " counter(fig) ". ";color:var(--ink);font-weight:600}

/* separator: a plain hairline with room around it */
.ac-content hr.wp-block-separator{border:0;height:1px;background:var(--rule);opacity:1;margin:clamp(40px,6vh,72px) 0}

/* ---------- video player ----------
   One quiet bar along the bottom (play, a hairline timeline, time, sound, full screen) over a soft shade.
   It shows on hover, focus, while paused, and for two seconds after a touch; a round play button sits in the middle when paused */
.vp{position:relative;line-height:0;background:#141414;color:#fff;--vp-pad:max(var(--m),12px)}
.vp-gallery,.p-shot .vp{height:100%}
.vp video{display:block;width:100%;height:auto}
.p-shot .vp video{height:100%;object-fit:cover}
.vp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:28px var(--vp-pad) 12px;line-height:1;background:linear-gradient(to top,rgba(20,20,20,.55),rgba(20,20,20,0));opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.vp:hover .vp-bar,.vp:focus-within .vp-bar,.vp.show .vp-bar,.vp[data-state="paused"] .vp-bar{opacity:1;transform:none;pointer-events:auto}
.vp-btn{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px;padding:0;background:none;border:0;color:inherit;cursor:pointer;opacity:.9;transition:opacity .2s}
.vp-btn:hover{opacity:1}
.vp-btn svg{width:16px;height:16px}
.vp-btn:focus-visible,.vp-track:focus-visible,.vp-big:focus-visible{outline:1.5px solid #fff;outline-offset:2px;border-radius:2px}
.vp .i-pause,.vp[data-state="paused"] .i-play{display:block}
.vp .i-play,.vp[data-state="paused"] .i-pause{display:none}
.vp .x{opacity:0}
.vp.muted .x{opacity:1}
.vp.muted .w1,.vp.muted .w2{opacity:0}
.vp-track{flex:1;position:relative;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vp-rail{position:relative;display:block;width:100%;height:1px;background:rgba(255,255,255,.28);transition:height .2s ease}
.vp-track:hover .vp-rail,.vp.seeking .vp-rail{height:3px}
.vp-buf,.vp-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0)}
.vp-buf{background:rgba(255,255,255,.28)}
.vp-fill{background:#fff}
.vp-time{flex:none;font-size:12px;font-weight:550;letter-spacing:.01em;font-variant-numeric:tabular-nums;opacity:.85;min-width:7.5ch;text-align:right}
.vp-big{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(20,20,20,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.vp-big svg{width:20px;height:20px;margin-left:3px}
.vp[data-state="paused"] .vp-big{opacity:1;transform:none;pointer-events:auto}
.vp:fullscreen{display:flex;align-items:center;background:#000}
.vp:fullscreen video{height:100%;object-fit:contain}
/* in the case study the video sits in the text column like an image, with its Fig. caption */
.ac-content .wp-block-video{counter-increment:fig}
.ac-content .wp-block-video video{width:100%}
.ac-content .wp-block-video figcaption::before{content:"Fig. " counter(fig) ". ";color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.vp-bar,.vp-big,.vp-rail{transition:none}}