/* ---------- fonts: drop the Neue Regrade files into assets/fonts/ (woff2) ---------- */
@font-face{font-family:"Neue Regrade";font-weight:300;font-style:normal;font-display:swap;src:local("Neue Regrade Light"),local("NeueRegrade-Light"),url("../assets/fonts/NeueRegrade-Light.woff2") format("woff2"),url("../assets/fonts/NeueRegrade-Light.woff") format("woff"),url("../assets/fonts/NeueRegrade-Light.otf") format("opentype"),url("../assets/fonts/NeueRegrade-Light.ttf") format("truetype")}
@font-face{font-family:"Neue Regrade";font-weight:300;font-style:italic;font-display:swap;src:local("Neue Regrade Light Italic"),local("NeueRegrade-LightItalic"),url("../assets/fonts/NeueRegrade-LightItalic.woff2") format("woff2"),url("../assets/fonts/NeueRegrade-LightItalic.woff") format("woff"),url("../assets/fonts/NeueRegrade-LightItalic.otf") format("opentype"),url("../assets/fonts/NeueRegrade-LightItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Regrade";font-weight:400;font-style:normal;font-display:swap;src:local("Neue Regrade"),local("Neue Regrade Regular"),local("NeueRegrade-Regular"),url("../assets/fonts/NeueRegrade-Regular.woff2") format("woff2"),url("../assets/fonts/NeueRegrade-Regular.woff") format("woff"),url("../assets/fonts/NeueRegrade-Regular.otf") format("opentype"),url("../assets/fonts/NeueRegrade-Regular.ttf") format("truetype")}
@font-face{font-family:"Neue Regrade";font-weight:700;font-style:normal;font-display:swap;src:local("Neue Regrade Bold"),local("NeueRegrade-Bold"),url("../assets/fonts/NeueRegrade-Bold.woff2") format("woff2"),url("../assets/fonts/NeueRegrade-Bold.woff") format("woff"),url("../assets/fonts/NeueRegrade-Bold.otf") format("opentype"),url("../assets/fonts/NeueRegrade-Bold.ttf") format("truetype")}

:root{--u:1.3px;--ink:#111;--muted:#6d6d70;--line:#d9d9db;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;position:relative;color:var(--ink);overflow-x:hidden;
  font-family:"Neue Regrade","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;font-weight:400;line-height:1.3;
  background:radial-gradient(180deg,#ffffff 0%,#f4f4f5 24%,#fbfbfb 46%,#efeff0 70%,#fafafa 88%,#f3f3f4 100%)}
a{color:inherit}

/* ---------- hub layout (all sizes in wireframe units: --u = page width / 1054) ---------- */
#hub{position:relative;z-index:1;width:calc(var(--u)*1054);margin:0 auto;transition:none;will-change:transform,opacity}
.hero{position:absolute;inset:0 0 auto 0}
.hub-title{position:absolute;left:0;right:0;top:calc(var(--u)*3);margin:0;display:flex;justify-content:space-between;font-weight:400;font-size:calc(var(--u)*150);line-height:.95;letter-spacing:-.03em}
.hub-sub{position:absolute;left:calc(var(--u)*763);top:calc(var(--u)*172);margin:0;font-weight:300;font-size:calc(var(--u)*15);line-height:1.05}
.hub-sub small{display:block;font-size:calc(var(--u)*9);margin-top:calc(var(--u)*1.5)}
.project{position:absolute;left:0;width:100%;height:calc(var(--u)*1185)}
.card{position:absolute;top:0;width:calc(var(--u)*763);height:calc(var(--u)*760);display:block;
  background:linear-gradient(135deg,#dededf,#cfcfd2);outline-offset:4px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.img-left .card{left:0}.img-right .card{left:calc(var(--u)*292)}
.ph-label{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*12);font-size:max(10px,calc(var(--u)*9));letter-spacing:.08em;text-transform:uppercase;color:#8b8b90}
.ptext{position:absolute;top:calc(var(--u)*765);left:calc(var(--u)*292);width:calc(var(--u)*471)}
.img-left .ptext{text-align:right}.img-right .ptext{text-align:left}
.ptext h2{margin:0 0 calc(var(--u)*5);font-weight:700;font-size:max(16px,calc(var(--u)*20));letter-spacing:-.01em;line-height:1.1}
.ptext h2 a{text-decoration:none}
.ptext p{margin:0;font-weight:500;font-size:max(11.5px,calc(var(--u)*9.5));line-height:1.28}
.hub-foot{position:absolute;left:0;right:0;bottom:calc(var(--u)*4);z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,calc(var(--u)*34),72px);font-size:max(12px,calc(var(--u)*11));font-weight:300;color:var(--ink)}
.hub-foot a{text-decoration:none;white-space:nowrap;padding:8px 0}
.hub-foot a:hover{text-decoration:underline}

/* ---------- archive: one screen with the footer (top 2/3 preview, bottom third carousel, dimple on the right in the middle of it) ---------- */
.arch{position:absolute;left:0;width:100%;height:100vh;--arch-side:calc(var(--u)*150)}
.arch.noarch{height:auto;min-height:calc(var(--u)*80)}
.arch-stage{position:absolute;inset:0;overflow:hidden}
.arch-pv{position:absolute;left:0;right:0;top:0;height:66.67%;overflow:hidden;opacity:.13;filter:grayscale(1) saturate(0);transition:opacity 1.1s ease,filter 1.1s ease}      /* ghost until the marble sits in the dimple */
.arch.on .arch-pv{opacity:1;filter:none}
.arch-pvi{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;transition:opacity .55s;background:linear-gradient(135deg,#dededf,#cfcfd2)}
.arch-pvi.sel{opacity:1;pointer-events:auto}
.arch-pvi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.arch-pvi:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.arch-car{position:absolute;left:0;right:0;top:60%;height:40%;perspective:700px;opacity:.2;pointer-events:none;transition:opacity .9s ease}
.arch.on .arch-car{opacity:1;pointer-events:auto}
.arch-it{position:absolute;left:50%;top:50%;width:max-content;max-width:calc(100% - 2*var(--arch-side));text-align:center;text-decoration:none;
  font-weight:400;font-size:clamp(26px,calc(var(--u)*44),66px);letter-spacing:-.03em;line-height:1.18;visibility:hidden;will-change:transform,opacity,filter;outline-offset:2px}
.arch-it:focus-visible{outline:2px solid var(--ink);border-radius:4px}

/* ---------- dimples ---------- */
.dimple{position:absolute;width:calc(var(--dsz,70px)*1.264);height:calc(var(--dsz,70px)*1.264);transform:translate(-50%,-50%);pointer-events:none;
  background:url("../assets/dimple.png") center/100% 100% no-repeat;
  background-image:image-set(url("../assets/dimple.webp") type("image/webp"),url("../assets/dimple.png") type("image/png"))}   /* your dimple.png: its solid core is as wide as --dsz, the soft edge reaches beyond */
.proj .dimple{position:fixed}

/* ---------- marble + arrows ---------- */
/* on the hub the marble lives IN the page (page coordinates), so the browser scrolls it together with the content: no lag, no jitter. On the project page / during transitions it is fixed to the screen (.fix) */
#marbleLayer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:60}
#arrowHub{position:absolute}
#marble{position:absolute;left:0;top:0;z-index:60;pointer-events:none;will-change:transform;opacity:0;transition:opacity .4s}
#marble.ready{opacity:1}
#marble.fix{position:fixed}
.m-canvas{position:absolute;inset:0;display:block}
.m-rim{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.m-shadow{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.4) 58%,rgba(0,0,0,0))}
.m-frames{position:absolute;inset:0}
.m-cue{position:absolute;inset:0;pointer-events:none}
.m-cue i{position:absolute;left:0;top:0;border-radius:50%;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(60,0,0,.9) 0%,rgba(70,0,0,.45) 45%,rgba(70,0,0,0) 72%);will-change:transform,opacity}
.m-frames img{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;user-select:none;-webkit-user-drag:none}
.arrow{position:fixed;left:-30px;top:-30px;width:60px;height:60px;z-index:61;border:0;background:none;padding:0;cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .28s;--dir:1;-webkit-tap-highlight-color:transparent}
.arrow.on{opacity:1;pointer-events:auto}
.arrow svg,.go svg{width:34px;height:14px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(var(--dir,1));transition:translate .2s}
.arrow:hover svg{translate:calc(var(--dir)*4px) 0}
.arrow:focus-visible,.go:focus-visible,.card:focus-visible,.ptext a:focus-visible,.live:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.go{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:none;place-items:center}
.reduced .go{display:grid}
#arrowTop{display:none}
#arrowTop svg{transform:rotate(-90deg)}
#scrollCue{display:none}
.reduced #marble,.reduced .arrow{display:none}

/* ---------- project page: text + marble fixed, images scroll past on the right (full bleed, no borders) ---------- */
.proj{position:fixed;inset:0;z-index:40;visibility:hidden;will-change:transform;
  background:linear-gradient(180deg,#ffffff 0%,#f4f4f5 40%,#fafafa 100%)}
.proj-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;-webkit-overflow-scrolling:touch;outline:none}
.proj-images{margin-left:28%;width:72%;padding-bottom:calc(var(--u)*10)}
.proj-images .ph{position:relative;height:calc(var(--u)*620);margin:0 0 calc(var(--u)*14);background:linear-gradient(135deg,#dededf,#cfcfd2)}
.proj-images .ph.tall{height:calc(var(--u)*820)}
.proj-images .pm{display:block;width:100%;position:relative}
.proj-images .pimg{display:block;width:100%;height:auto;margin:0;object-fit:contain;background:linear-gradient(135deg,#dededf,#cfcfd2)}
.proj-text{position:absolute;top:calc(var(--u)*56);z-index:2;width:calc(var(--u)*500);pointer-events:none}
.proj-text a{pointer-events:auto}
.proj-text{left:calc(var(--u)*34)}
.back-link{display:none;margin:0 0 18px;font-size:13px;text-decoration:none;border-bottom:1px solid var(--ink)}
.reduced .back-link{display:inline-block}
.eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proj-text h1{margin:0 0 calc(var(--u)*28);font-weight:400;font-size:var(--h1,max(44px,calc(var(--u)*110)));letter-spacing:-.03em;line-height:.95;outline:none}
.lead{white-space:pre-line;font-weight:500;font-size:var(--lead,max(12px,calc(var(--u)*9.5)));line-height:1.35;max-width:40vw;margin:0 0 .9em}
.live{display:inline-block;margin:6px 0 0;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.more{display:none}
.live-mini{display:none}
@media (max-width:720px){
  :root{--pad:20px;--ds:112px}                       /* --pad: page margin, --ds: room kept free beside the text for the marble + dimple */
  #hub{width:100%;height:auto!important}
  /* hero: stacked poster title (sized in JS), subtitle right under it; JS makes the hero fill the first screen */
  .hero{position:relative;inset:auto;height:100svh;min-height:560px}
  .hub-title{flex-direction:column;justify-content:flex-start;line-height:.86;font-size:calc(var(--u)*340)}
  .hub-title span:last-child{align-self:flex-end}
  .hub-sub{left:auto;right:var(--pad);top:240px;text-align:right;font-size:15px;line-height:1.1}
  .hub-sub small{font-size:11px;margin-top:2px}
  /* projects: normal flow. full-bleed image, text underneath (never cut off), marble rests beside the text */
  .project{position:relative;top:auto!important;height:auto;padding:0 0 190px}
  .card{position:relative;left:auto!important;width:100%;height:auto;aspect-ratio:1/1}
  /* flat arrowhead at the very bottom of the first screen; it sits behind the page content, so the first image slides over it, and it fades out as you scroll */
  #scrollCue{display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:0;pointer-events:none;opacity:0;transition:opacity .35s}
  #scrollCue svg{width:24px;height:10px;fill:var(--ink);opacity:.5}
  #arrowTop{display:grid}
  .ptext{position:relative;top:auto;left:auto!important;width:auto;margin:30px 0 0;padding:0 var(--pad);text-align:left!important}
  .img-left .ptext{padding-right:var(--ds)}
  .img-right .ptext{padding-left:var(--ds)}
  .ptext h2{font-size:27px;margin:0 0 10px;line-height:1.05}
  .ptext p{font-size:14.5px;line-height:1.45}
  .more{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:1px}
  /* archive: one full screen (preview on top, titles below, dimple on the right), the footer follows underneath */
  .arch{position:relative;top:auto!important;height:auto;--arch-side:100px}
  .arch-stage{position:relative;inset:auto;height:100svh;min-height:520px}
  .arch-it{font-size:clamp(24px,7.4vw,34px)}
  .hub-foot{position:relative;bottom:auto;padding:26px var(--pad) calc(34px + env(safe-area-inset-bottom,0px));font-size:12px}
  .arch.noarch .hub-foot{padding-top:34svh}   /* extra room so the page can scroll far enough for the marble to reach the last dimple */
  .arrow{width:64px;height:64px;left:-32px;top:-32px}
  /* project page: header collapses on scroll (see hub.js), images full width underneath */
  /* the header is part of the scroller (sticky), and the marble / dimple / up arrow sit inside it: everything is painted together, nothing depends on fixed overlays */
  .proj-text{position:sticky;top:0;left:auto;width:100%;z-index:5;padding:14px 16px 14px;background:#fafafa;box-shadow:0 1px 0 rgba(0,0,0,.07)}
  /* Chrome on iPhone only (class + --cri-clear set in hub.js): the project page stays an overlay with its own scroller, so the document never scrolls and Chrome's toolbar stays still.
     If the toolbar is collapsed when the page opens, the overlay starts below the part Chrome covers (--cri-clear, measured per toolbar state, not while scrolling) */
  .cri #proj{top:var(--cri-clear,0px);transition:top .2s}
  .proj-text .dimple{position:absolute}
  #marble.inhead{position:absolute}
  .proj-text #arrowTop{position:absolute}
  .pt-top{position:relative;display:flex;align-items:center;box-sizing:content-box}
  .back-link{display:inline-block;margin:0;font-size:14px}
  .eyebrow{overflow:hidden;margin:0 0 8px}
  .proj-text h1{font-size:48px;margin:0 0 10px}
  .pt-more{overflow:hidden}
  .pt-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .pt-title h1{min-width:0}
  .live-mini{display:inline-block;flex:none;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:1px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
  .proj-text.mini .live-mini{opacity:1;pointer-events:auto}
  .lead{font-size:14.5px;line-height:1.42; width: 100%; max-width: 100%;}
  .proj-images{margin-left:0;width:100%;padding:var(--ptop,0px) 0 calc(var(--u)*120)}
  .proj-images .ph,.proj-images .ph.tall{height:auto;aspect-ratio:4/5}
  .proj .dimple{z-index:3}
}
/* phone project page, once opened: the page itself scrolls (no fixed overlay, no inner scroller), starting at the top */
.flow #proj{position:relative;inset:auto;z-index:auto;will-change:auto;transform:none!important;background:none}
.flow .proj-scroll{position:static;overflow:visible;height:auto}
.flow .proj-text{position:fixed;top:0;left:0;width:100%}                   /* header stays put while the page scrolls (sticky is unreliable in iOS browsers) */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ---------- project display types (see js/pagetypes.js) ---------- */
/* story: the phone layout on every screen size. Header on top (collapses while scrolling), one column, text blocks between the media */
.proj.story .proj-text{position:sticky;top:0;left:auto;width:100%;box-sizing:border-box;z-index:5;padding:16px clamp(16px,4vw,56px) 14px;background:#fafafa;box-shadow:0 1px 0 rgba(0,0,0,.07)}
.proj.story .proj-text .dimple{position:absolute}
.proj.story #marble.inhead{position:absolute}
.proj.story .proj-text #arrowTop{position:absolute}
.proj.story .pt-top{position:relative;display:flex;align-items:center;box-sizing:content-box}
.proj.story .back-link{display:inline-block;margin:0;font-size:14px}
.proj.story .eyebrow{overflow:hidden;margin:0 0 8px}
.proj.story .proj-text h1{font-size:clamp(40px,calc(var(--u)*72),96px);margin:0 0 10px}
.proj.story .pt-more{overflow:hidden}
.proj.story .pt-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.proj.story .pt-title h1{min-width:0}
.proj.story .live-mini{display:inline-block;flex:none;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:1px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.proj.story .proj-text.mini .live-mini{opacity:1;pointer-events:auto}
.proj.story .lead{font-size:clamp(14.5px,calc(var(--u)*11.5),17px);line-height:1.42}
.proj.story .proj-images{margin:0 auto;width:100%;padding:var(--ptop,0px) 0 calc(var(--u)*140)}
.proj.story .proj-images .ph,.proj.story .proj-images .ph.tall{height:auto;aspect-ratio:4/5}
.st-h,.st-p,.st-cap{box-sizing:border-box;padding:0 clamp(18px,4.5vw,64px)}
.st-h{margin:calc(var(--u)*64) 0 calc(var(--u)*16);font-weight:400;font-size:clamp(26px,calc(var(--u)*42),58px);letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
.st-p{margin:0 0 calc(var(--u)*36);max-width:64ch;font-weight:300;font-size:clamp(16px,calc(var(--u)*13.5),20px);line-height:1.5;white-space:pre-line;text-wrap:pretty}
.st-cap{margin:calc(var(--u)*10) 0 calc(var(--u)*4);font-size:13px;font-weight:300;line-height:1.4;color:var(--muted);white-space:pre-line}
.proj.story .proj-images .pm{margin-bottom:calc(var(--u)*14)}

/* radial: the pictures sit on an invisible circle, each scroll turns the wheel by one picture */
.proj.radial .proj-scroll{overflow:hidden}
.rc-stage{position:absolute;left:28%;right:0;top:0;bottom:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;contain:layout paint}
.rc-wheel{opacity:0;transition:opacity .4s ease}
.rc-stage.rc-ready .rc-wheel{opacity:1}
.rc-wheel{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 90%,transparent 100%)}
.rc-it{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;cursor:pointer}
.rc-it.act{cursor:default}
.rc-fr{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,#dededf,#cfcfd2);box-shadow:0 calc(var(--u)*34) calc(var(--u)*60) calc(var(--u)*-36) rgba(0,0,0,.4)}
.rc-fr img,.rc-fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rc-fr.snap{animation:rcClick .24s cubic-bezier(.3,.7,.3,1)}
@keyframes rcClick{0%{transform:scale(1)}38%{transform:scale(1.02)}100%{transform:scale(1)}}
.rc-desc{position:absolute;left:50%;top:100%;width:max(100%,min(340px,86vw));margin:calc(var(--u)*22) 0 0;font-size:max(13px,calc(var(--u)*10.5));font-weight:300;line-height:1.45;white-space:pre-line;text-align:center;text-wrap:balance;opacity:0;transform:translate(-50%,10px);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.rc-it.act .rc-desc{opacity:1;transform:translate(-50%,0);transition:opacity .65s ease .34s,transform .65s cubic-bezier(.2,.7,.2,1) .34s}   /* the text follows the picture with a slight delay */
.rc-count{position:absolute;right:calc(var(--u)*34);bottom:calc(var(--u)*28);z-index:200;font-size:12px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.rc-count b{color:var(--ink);font-weight:400}
.rc-desc strong,.st-p strong,.st-cap strong{font-weight:700}
.rc-desc em,.st-p em,.st-cap em{font-style:italic}
@media (max-width:720px){
  .proj.radial .rc-stage{left:0;top:var(--pmin,0px)}
  .rc-wheel{-webkit-mask-image:none;mask-image:none}
  .flow .proj.radial .rc-stage,.flow .rc-stage{position:fixed;top:var(--pmin,0px);bottom:0}
  .rc-count{right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .rc-desc{font-size:14px;margin-top:60px;max-width: 60vw;}
}
/* radial lightbox: the same wheel, big, on a heavily blurred and lightly washed page. Tweak --lb-blur (px) and --lb-wash (colour + opacity) */
.rc-lb{--lb-blur:34px;--lb-wash:rgba(250,250,250,.58);position:fixed;inset:0;z-index:10000;overflow:hidden;opacity:0;transition:opacity .45s ease;touch-action:none}
.rc-lb.in{opacity:1}
.rc-lb-bg{position:absolute;inset:0;background:var(--lb-wash);-webkit-backdrop-filter:blur(var(--lb-blur)) saturate(1.15);backdrop-filter:blur(var(--lb-blur)) saturate(1.15)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rc-lb-bg{background:rgba(250,250,250,.95)}}
.rc-lbw{position:absolute;inset:0}
.rc-lb .rc-fr{cursor:pointer}
.rc-lb .rc-it.act .rc-fr{cursor:zoom-out}
.rc-lb .rc-it.act video{cursor:default}
.rc-lb .rc-count{z-index:300}
.rc-lb-x{position:absolute;z-index:300;top:calc(var(--u)*24);right:calc(var(--u)*28);width:44px;height:44px;border:0;border-radius:50%;background:rgba(250,250,250,.7);color:var(--ink);font-size:26px;line-height:44px;padding:0;cursor:pointer;font-family:inherit}
.rc-lb-x:hover{background:#fff}
.rc-lb-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:720px){.rc-lb-x{top:calc(env(safe-area-inset-top,0px) + 10px);right:12px}}
.rc-stage .rc-it.act .rc-fr{cursor:zoom-in}
/* password protected projects: the lock screen in the image column */
.lock-wrap{display:flex;align-items:center;justify-content:center;min-height:100%;box-sizing:border-box}
.lock{width:min(440px,100%);padding:calc(var(--u)*110) clamp(18px,calc(var(--u)*30),40px)}
.lock h2{margin:0 0 12px;font-weight:400;letter-spacing:-.03em;line-height:1.05;font-size:clamp(28px,calc(var(--u)*36),48px)}
.lock p{margin:0 0 22px;font-weight:300;line-height:1.45;font-size:max(14px,calc(var(--u)*11.5))}
.lock-row{display:flex;gap:10px;align-items:stretch}
.lock input{flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 18px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);outline:none}
.lock input:focus-visible{box-shadow:0 0 0 3px rgba(17,17,17,.14)}
.lock button{font:inherit;font-weight:700;font-size:15px;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:0 24px;cursor:pointer}
.lock button:disabled,.lock input:disabled{opacity:.5;cursor:default}
.lock .lock-msg{min-height:1.5em;margin:12px 0 0;font-size:14px;font-weight:400;color:#b3261e}
.lock.shake{animation:lockShake .42s cubic-bezier(.3,.7,.3,1)}
@keyframes lockShake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* lightbox description handoff: the one on the page hides, one traveling copy glides to the lightbox (and back), never two at once */
.rc-stage.lb-open .rc-it.act .rc-desc{opacity:0;transition:none}
.rc-gdesc{position:fixed;z-index:10001;margin:0;pointer-events:none;font-size:max(13px,calc(var(--u)*10.5));font-weight:300;line-height:1.45;white-space:pre-line;text-align:center;text-wrap:balance;color:var(--ink)}
.rc-gdesc strong{font-weight:700}.rc-gdesc em{font-style:italic}
@media (max-width:720px){.rc-gdesc{font-size:14px}}

/* image wheel on phones: the project text runs by as a banner right under the header; drag it back and forth */
.proj.has-ticker{--tk:38px}
.rc-tk{position:absolute;z-index:6;left:0;right:0;top:var(--pmin,0px);height:var(--tk,38px);overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;background:#fafafa;border-bottom:1px solid rgba(0,0,0,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rc-tk:active{cursor:grabbing}
.rc-tk-track{display:flex;align-items:center;height:100%;white-space:nowrap;will-change:transform;font-size:14px;font-weight:300;letter-spacing:.01em}
.rc-tk-track span{flex:none}
.flow .rc-tk{position:fixed}
.proj.radial.has-ticker .rc-stage,.flow .proj.radial.has-ticker .rc-stage{top:calc(var(--pmin,0px) + var(--tk,38px))}

/* no long-press menu on pictures */
img,video{-webkit-touch-callout:none}
/* padlock next to the title of a protected project: light grey, hangs beside the title so the title itself keeps its place (centered titles stay centered) */
.arch-it .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptext h2,.proj-text h1{position:relative}
.lk{position:absolute;right:100%;width:.62em;height:.62em;margin:0 .32em 0 0;fill:#cfcfd3;stroke:#cfcfd3;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;flex:none}
.lk path{fill:none}
.ptext h2 .lk{top:.25em}
.arch-it .lk{width:.5em;height:.5em;top:.3em;margin-right:.3em}
@media (max-width:720px){
  .ptext h2 .lk{width:.46em;height:.46em;margin-right:.18em}                                   /* still hangs in the margin: the title stays in line with its text */
}
.proj-text h1 .lw{white-space:nowrap}                                                                          /* the last word and the padlock stay together */
.proj-text h1 .lkw{display:inline-block;position:relative;width:0;height:0}                                    /* zero width: the padlock takes no room */
.proj-text h1 .lk{position:absolute;left:.2em;right:auto;bottom:.2em;width:.34em;height:.34em;margin:0;}       /* project page: the padlock sits right behind the title */
/* ---------- landing intro: one element after the other (js/hub.js sets the i-* classes, html.intro hides everything until its turn) ---------- */
:root{--ease-out:cubic-bezier(.2,.75,.1,1)}
html.intro .hub-title span{transition:clip-path 1.15s var(--ease-out),transform 1.15s var(--ease-out),opacity .5s ease}
.hub-sub>em{display:inline-block}
html.intro .hub-sub>em,html.intro .hub-sub small{transition:opacity .85s ease,transform 1s var(--ease-out)}
html.intro .project:first-of-type .card{transition:clip-path 1.5s var(--ease-out)}
html.intro .project:first-of-type .card img{transition:transform 1.9s var(--ease-out)}
html.intro .project:first-of-type .ptext{transition:opacity .9s ease,transform 1s var(--ease-out)}
html.intro .dimple[data-d="0"]{transition:opacity .9s ease}
html.intro .hub-title span{clip-path:inset(0 0 100% 0);transform:translateY(.32em);opacity:0}
html.intro.i-t1 .hub-title span:nth-child(1),html.intro.i-t2 .hub-title span:nth-child(2){clip-path:inset(-22% -4% -22% -4%);transform:none;opacity:1}
html.intro .hub-sub>em,html.intro .hub-sub small{opacity:0;transform:translateY(14px)}
html.intro.i-s1 .hub-sub>em,html.intro.i-s2 .hub-sub small{opacity:1;transform:none}
html.intro .project:first-of-type .card{clip-path:inset(0 0 100% 0)}
html.intro .project:first-of-type .card img{transform:scale(1.1)}
html.intro.i-card .project:first-of-type .card{clip-path:inset(-4% -4% -4% -4%)}
html.intro.i-card .project:first-of-type .card img{transform:none}
html.intro .project:first-of-type .ptext{opacity:0;transform:translateY(14px)}
html.intro.i-text .project:first-of-type .ptext{opacity:1;transform:none}
html.intro .dimple[data-d="0"]{opacity:0}
html.intro.i-card .dimple[data-d="0"]{opacity:1}

/* ---------- project page roll-out: the page waits (empty) until the marble sits in its dimple, then text and pictures roll out top to bottom ---------- */
@keyframes pjIn{from{opacity:0;transform:translateY(22px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-25% -6% -25% -6%)}}
.proj.rv-pre .rv,.proj.rv-pre .rc-stage{visibility:hidden}
.proj.rv-go .rv{animation:pjIn 2.05s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*45ms)}
/* hidden until the script has measured the page (scale, dimples): nothing shows at a wrong size */
html.unlaid #hub{visibility:hidden}
/* project page on phones: a little more air between the headline and the paragraph (scroll and story layouts), less between the headline and the banner (image wheel) */
@media (max-width:720px){.lead{margin-top:8px}}
.proj.story .lead{margin-top:10px}
.proj.radial.has-ticker .proj-text{padding-bottom:4px}
.proj.radial.has-ticker .pt-title h1{margin-bottom:0}