/* ---------- 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")}
@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")}
@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")}
@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")}

: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;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:linear-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;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)*19.5);line-height:1.05}
.hub-sub small{display:block;font-size:calc(var(--u)*10.5);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:300;font-size:max(11.5px,calc(var(--u)*9.5));line-height:1.28}
.hub-foot{position:absolute;left:0;right:0;display:flex;justify-content:space-between;font-size:max(11px,calc(var(--u)*10));font-weight:300;color:var(--muted)}

/* ---------- 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 ---------- */
#marble{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform;opacity:0;transition:opacity .4s}
#marble.ready{opacity:1}
.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}
.go svg{transform:scaleX(1)}
.reduced .go{display:grid}
.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;-webkit-overflow-scrolling:touch;outline:none}
.proj-images{margin-left:28%;width:72%;padding-bottom:calc(var(--u)*120)}
.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 .pimg{display:block;width:100%;height:auto;margin:0 0 calc(var(--u)*14);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{font-weight:300;font-size:var(--lead,max(12px,calc(var(--u)*9.5)));line-height:1.35;max-width:62ch;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}
@media (max-width:720px){
  .hub-title{top:calc(var(--u)*-6)}
  .hub-sub{left:auto;right:0;text-align:right;top:calc(var(--u)*160);font-size:max(13px,calc(var(--u)*19.5))}
  .hub-sub small{font-size:max(11px,calc(var(--u)*10.5))}
  .arrow{width:64px;height:64px;left:-32px;top:-32px}
  .img-left .ptext{left:0;width:calc(var(--u)*763)}
  .img-right .ptext{left:calc(var(--u)*292);width:calc(var(--u)*762)}
  .ptext p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
  .proj-text{left:14px;width:calc(100vw - 28px)}
  .proj-images{margin-left:22%;width:78%}
  .proj-images .ph{height:calc(var(--u)*520)}
  .proj-images .ph.tall{height:calc(var(--u)*700)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}