@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-black-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-black-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Mariano Ventures — review prototype design tokens + styles */
:root{
  --bg:#141414; --bg-2:#1a1a1a; --bg-3:#222; --line:#2b2b2b; --line-2:#3a3a3a;
  --ink:#F4F1EA; --ink-2:#c9c6bf; --muted:#8d8a85;
  /* accents (live holding-page values) */
  --blue:#8FB3FF; --pink:#FF9EC7; --mint:#7BE0B6;
  /* saturated tile fills (from the mockups) */
  --tile-blue:#2F5BFF; --tile-pink:#EE3F86; --tile-mint:#5DD6A6;
  --on-blue:#fff; --on-pink:#fff; --on-mint:#0f1a15;
  --f-display:"Archivo Black",system-ui,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --r-xl:32px; --r-lg:24px; --r:18px; --r-sm:12px; --pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --wrap:1240px; --gutter:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.2,.75,.15,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.6s;
  --mat:inset 0 2px 0 rgba(255,255,255,.26),inset 0 -12px 24px rgba(0,0,0,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased}
main{flex:1}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
::selection{background:var(--pink);color:#141414}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mint{color:var(--mint)} .pinkc{color:var(--pink)} .bluec{color:var(--blue)}
.ph{color:var(--muted);font-style:italic}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#141414;font-weight:700;padding:10px 16px;border-radius:var(--r-sm);transition:top .2s}
.skip:focus{top:12px}
.h-xxl,.h-xl,.h-l,.statement,.tile .nm,.p-main h1,.art h1,.feat .tt,.card h2,.facts dd{overflow-wrap:break-word}
/* the stacked-blocks mark: the home hero in miniature, used on inner pages */
.mark{display:inline-flex;flex-direction:column-reverse;align-items:center;gap:2px;width:22px;margin-right:10px;vertical-align:-3px}
.mark i{display:block;height:5px;border-radius:2px}
.mark i:nth-child(1){width:22px;background:var(--tile-blue);transform:rotate(-2deg)}
.mark i:nth-child(2){width:17px;background:var(--tile-mint);transform:translateX(2px) rotate(3deg)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.site-h{position:sticky;top:0;z-index:50;transition:background .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.site-h.scrolled{background:rgba(20,20,20,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s4)}
.logo{font-family:var(--f-display);font-size:28px;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:center;gap:2px}
.logo i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-left:3px;transition:transform .5s var(--ease)}
.logo:hover i{transform:translateY(-10px) scale(1.2);background:var(--pink)}
.nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);font-size:15px;font-weight:500}
.nav a.lnk{position:relative;padding:6px 0;white-space:nowrap;color:var(--ink-2);transition:color .25s}
.nav a.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a.lnk:hover,.nav a.lnk[aria-current=page]{color:var(--ink)}
.nav a.lnk:hover::after,.nav a.lnk[aria-current=page]::after{transform:scaleX(1);transform-origin:left}

/* ---------- pills / buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--pill);border:1.5px solid var(--line-2);font-size:14.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;background:transparent;transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s;position:relative;overflow:hidden;isolation:isolate}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.97)}
.pill .arr{transition:transform .4s var(--ease)}
.pill:hover .arr{transform:translateX(4px)}
.pill-solid{background:var(--ink);border-color:var(--ink);color:#141414;font-weight:700}
.pill-solid::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);transition:transform .45s var(--ease)}
.pill-solid:hover::before{transform:translateY(0)}
.pill-blue{background:var(--tile-blue);border-color:var(--tile-blue);color:#fff;font-weight:700}
.pill-blue:hover{box-shadow:0 10px 30px -8px rgba(47,91,255,.7)}
.pill-dark{background:#111;border-color:#111;color:#fff}
.pill-ghost-dark{border-color:rgba(0,0,0,.55);color:#111}
.pill-ghost-dark:hover{background:rgba(0,0,0,.08)}
.pill-outline-pink{border-color:rgba(255,158,199,.55);color:var(--pink)}
.pill-outline-pink:hover{background:rgba(255,158,199,.1);border-color:var(--pink)}
.pill-outline-blue{border-color:rgba(143,179,255,.55);color:var(--blue)}
.pill-outline-blue:hover{background:rgba(143,179,255,.1);border-color:var(--blue)}
.pill-sm{height:32px;padding:0 14px;font-size:13.5px}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--pill);font-size:13px;font-weight:700;letter-spacing:.01em}
.tag-note{background:var(--mint);color:#0f1a15}
.tag-money{background:var(--pink);color:#141414}
.pill.is-off{opacity:.75;cursor:default;border-style:dashed}
.pill.is-off:hover{transform:none;background:transparent}

/* ---------- type ---------- */
.h-xxl{font-family:var(--f-display);font-weight:400;font-size:clamp(46px,8.4vw,124px);line-height:.94;letter-spacing:-.035em}
.h-xl{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,5.6vw,80px);line-height:.98;letter-spacing:-.03em}
.h-l{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-.025em}
.h-m{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.12;letter-spacing:-.02em}
.h-xxl .em,.h-xl .em,.h-l .em{font-size:1.08em;letter-spacing:-.02em}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sec{padding-top:var(--s9)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- project tiles ---------- */
.tiles{display:grid;gap:var(--s3)}
.tile{--c:var(--tile-blue);--on:#fff;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,4vw,56px);padding:clamp(24px,3.4vw,40px) clamp(22px,3.6vw,44px);border-radius:var(--r-lg);background:var(--c);color:var(--on);overflow:hidden;isolation:isolate;
  box-shadow:var(--mat);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(500px 220px at var(--mx,80%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .5s}
.tile:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--mat),0 28px 60px -24px var(--c)}
.tile:hover::before{opacity:1}
.tile .no{font-family:var(--f-display);font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;opacity:1}
.tile .nm{font-family:var(--f-display);font-size:clamp(30px,4.4vw,60px);letter-spacing:-.035em;line-height:1;transition:transform .6s var(--ease)}
.tile:hover .nm{transform:translateX(10px)}
.tile .sub{font-size:15px;font-weight:500;margin-top:10px;display:flex;gap:8px;align-items:center}
.tile .go{width:58px;height:58px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;opacity:.7;transition:transform .6s var(--ease),opacity .3s,background .3s}
.tile .go svg{width:22px;transition:transform .6s var(--ease)}
.tile:hover .go{opacity:1;transform:rotate(-45deg);background:rgba(255,255,255,.14)}
.t-blue{--c:var(--tile-blue);--on:var(--on-blue)} .t-pink{--c:var(--tile-pink);--on:var(--on-pink)} .t-mint{--c:var(--tile-mint);--on:var(--on-mint)}
.t-grey{--c:#2a2a2a;--on:var(--ink)}

/* ---------- HOME hero (type-led; latest field note is the feature tile) ---------- */
/* hero: a stack built from what exists (projects in blue, field notes in mint, "Next" waiting) */
.hero.stage{--fl:clamp(96px,14vh,150px);--bh:clamp(46px,min(5.2vw,7.6vh),74px);--lift:clamp(22px,3vw,40px);position:relative;display:flex;margin-top:-72px;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);
  min-height:max(min(72vh,680px),calc(120px + var(--n,3)*var(--bh) + var(--lift) + var(--fl)));
  background:radial-gradient(70% 55% at 72% 34%,rgba(143,179,255,.14),transparent 62%),linear-gradient(180deg,#1a1922 0%,#16151c 58%,#141414 100%)}
.hero.stage .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.8fr);gap:clamp(24px,5vw,72px)}
.hero .copy{padding:calc(72px + clamp(28px,6vh,64px)) 0 calc(var(--fl) + 40px)}
.hero.stage .h-xxl{font-size:clamp(42px,6.4vw,96px);line-height:.95}
.hero.stage .lede{margin-top:var(--s5)}
.hero.stage .hero-acts{margin-top:var(--s5)}
.floor{position:absolute;left:0;right:0;bottom:0;height:var(--fl);z-index:1;background:linear-gradient(180deg,rgba(42,39,56,.9),#141414 85%);border-top:1px solid rgba(143,179,255,.14)}
.floor::before,.floor::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(143,179,255,.07)}
.floor::before{top:26%}.floor::after{top:58%}
.pile{position:relative;align-self:end;justify-self:end;width:min(100%,400px);margin-bottom:calc(var(--fl) - 6px);display:flex;flex-direction:column-reverse;align-items:center}
.pile::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-24px;height:44px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.blk3{width:var(--w,100%);height:var(--bh);flex:none;border-radius:clamp(14px,1.8vw,22px);background:var(--c);color:var(--on);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 clamp(14px,1.8vw,24px);font-family:var(--f-display);font-size:clamp(17px,1.9vw,26px);letter-spacing:-.03em;margin-top:-2px;transform:translateX(var(--x,0)) rotate(var(--r,0deg));
  box-shadow:var(--mat),0 18px 40px -18px var(--c)}
.blk3 small{font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.blk-p{--c:var(--tile-blue);--on:#fff}
.blk-n{--c:var(--tile-mint);--on:#0f1a15}
.blk-next{--c:#F4F1EA;--on:#141414;--w:46%;--x:10%;--r:3deg;margin-bottom:var(--lift);animation:place 3.6s var(--ease-io) infinite alternate}
@keyframes place{from{translate:0 -12px;rotate:2deg}to{translate:0 5px;rotate:-1deg}}
.sec-tight{padding-top:var(--s7)}
.sec-tight .feat{min-height:clamp(180px,16vw,230px)}
.nrows{margin-top:var(--s3);border-top:1px solid var(--line)}
.nrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--s4) 4px;border-bottom:1px solid var(--line);transition:background .25s,padding .35s var(--ease)}
.nrow:hover{background:var(--bg-2);padding-left:14px}
.nrow .t{font-weight:600;font-size:18px;line-height:1.3}
.nrow .d{font-size:14px;color:var(--muted);white-space:nowrap}
.all{margin-top:var(--s5)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:inline-block}
.js .hero h1 .ln>span{transform:translateY(105%);animation:up .7s var(--ease) forwards;animation-delay:var(--d)}
.js .hero .fade{opacity:0;animation:fadeup .6s var(--ease) forwards;animation-delay:var(--d)}
@keyframes up{to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .h-xxl{font-size:clamp(44px,7.4vw,106px)}
.hero .em{font-size:1.12em}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-top:clamp(28px,4vw,56px)}
.lede{color:var(--ink-2);font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:30em}
.lede.ph{color:var(--muted)}
.hero-acts{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.go{width:58px;height:58px;flex:none;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;opacity:.7;transition:transform .6s var(--ease),opacity .3s,background .3s}
.go svg{width:22px}
.feat{background:var(--tile-mint);color:var(--on-mint);border-radius:var(--r-xl);padding:clamp(22px,3vw,36px);min-height:clamp(230px,23vw,320px);box-shadow:var(--mat);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.feat:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--mat),0 28px 60px -24px var(--tile-mint)}
.feat:hover .go{opacity:1;transform:rotate(-45deg);background:rgba(255,255,255,.2)}
.feat .top{display:flex;justify-content:space-between;gap:var(--s4);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.feat .bot{display:flex;justify-content:space-between;align-items:end;gap:var(--s4)}
.feat .tt{font-family:var(--f-display);font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-.03em;max-width:11em}

/* empty project slot */
.slot{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(18px,4vw,56px);padding:clamp(20px,2.6vw,30px) clamp(22px,3.6vw,44px);border-radius:var(--r-lg);border:1.5px dashed var(--line-2)}
.slot .no{font-family:var(--f-display);font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;color:var(--muted)}
.slot .nm{display:block;font-family:var(--f-display);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;line-height:1;color:var(--ink-2)}
.slot .sub{display:block;font-size:15px;margin-top:8px}

/* ---------- newsletter band ---------- */
.nl{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s6);align-items:end}
.nl p.ph{max-width:380px;margin-top:var(--s4)}
.inp{height:52px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:transparent;padding:0 16px;font-size:16px;transition:border-color .25s,background .25s}
.inp::placeholder{color:var(--muted)}
.inp:focus{outline:none;border-color:var(--ink);background:rgba(244,241,234,.05)}
.form-row{display:flex;gap:var(--s3)} .form-row .inp{flex:1 1 auto;min-width:0}
.form-row .pill-solid{height:52px;padding:0 24px;border-radius:var(--r-sm);justify-content:center}
.form-msg{font-size:13.5px;color:var(--ink-2);min-height:20px;margin-top:10px}

/* ---------- footer ---------- */
.site-f{margin-top:var(--s9);border-top:1px solid var(--line);padding:var(--s6) 0 var(--s6)}
.site-f .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap}
.site-f .links{display:flex;gap:var(--s5);font-size:14.5px;color:var(--ink-2)}
.site-f .links a{transition:color .25s} .site-f .links a:hover{color:var(--ink)}
.site-f .legal{margin-top:var(--s5);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.site-f .legal .ph{letter-spacing:0}

/* ---------- draft bar ---------- */
.draft{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;justify-content:center;align-items:center;gap:8px;height:34px;background:rgba(14,14,14,.92);border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);backdrop-filter:blur(8px)}
.draft i{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,158,199,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(255,158,199,0)}100%{box-shadow:0 0 0 0 rgba(255,158,199,0)}}

/* ---------- shared: back link, skeleton ---------- */
.back{display:inline-flex;gap:8px;align-items:center;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .25s}
.back:hover{color:var(--ink)}
.back .arr{transition:transform .4s var(--ease)} .back:hover .arr{transform:translateX(-4px)}
.sk{height:10px;border-radius:6px;background:#2d2d2d}
.sk.h{height:26px;width:55%;border-radius:8px;margin-bottom:6px}

/* ---------- ABOUT ---------- */
.about-open{padding-top:clamp(36px,6vw,88px)}
.statement{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,72px);line-height:1.02;letter-spacing:-.03em;max-width:1100px;margin-top:var(--s4)}
.about-me{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.photo{border-radius:var(--r-lg);aspect-ratio:4/5;background:repeating-linear-gradient(135deg,#1c1c1c 0 14px,#1f1f1f 14px 28px);border:1.5px dashed #3c3c3c;display:grid;place-items:center;color:var(--ink-2);font-size:17px;text-align:center}
.photo small{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.bio p{font-size:19px;max-width:32em;margin-top:var(--s4)}
.pills{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s8)}
.blk{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);background:var(--bg-2);transition:transform .5s var(--ease),border-color .4s}
.blk:hover{transform:translateY(-6px);border-color:var(--line-2)}
.blk .n{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.1em}
.blk h3{font-family:var(--f-display);font-weight:400;font-size:28px;letter-spacing:-.02em;margin:0 0 var(--s3)}

/* ---------- PROJECT (one colour per project; Project one = blue) ---------- */
.p-top{padding-top:var(--s5)}
.p-main{--c:var(--tile-blue);--on:#fff;background:var(--c);color:var(--on);box-shadow:var(--mat);border-radius:var(--r-xl);padding:clamp(26px,4vw,52px);min-height:clamp(340px,34vw,460px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);margin-top:var(--s4)}
.p-main .no{font-family:var(--f-display);font-size:30px;letter-spacing:-.02em;opacity:1}
.p-main h1{font-family:var(--f-display);font-weight:400;font-size:clamp(52px,9vw,132px);line-height:.9;letter-spacing:-.045em;margin:var(--s3) 0 var(--s4)}
.p-main .p-line{font-size:clamp(17px,1.5vw,20px);font-style:italic}
.p-main .acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.p-main .st{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--pill);background:rgba(0,0,0,.22);font-size:14.5px;font-weight:600;margin-right:auto}
.p-main .st i{width:8px;height:8px;border-radius:50%;background:#fff}
.pill-light{background:#fff;border-color:#fff;color:#101010;font-weight:700}
.pill-ghost-light{border-color:rgba(255,255,255,.6);color:#fff}
.pill-ghost-light:hover{background:rgba(255,255,255,.12)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s5);padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{font-family:var(--f-display);font-size:26px;margin-top:6px}
.case{display:grid;grid-template-columns:1fr 260px;gap:clamp(24px,4vw,56px);margin-top:var(--s7);align-items:start}
.chap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.chap:first-child{padding-top:0}
.chap .k{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.1em}
.chap h2{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;margin-top:0}
.shot{border-radius:var(--r-lg);background:#1c1c1c;border:1px solid var(--line);min-height:240px;padding:var(--s4);display:flex;flex-direction:column;gap:10px;position:relative;margin-top:var(--s5)}
.shot .bar{display:flex;gap:6px;margin-bottom:var(--s3)} .shot .bar i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}
.shot .lbl{position:absolute;right:16px;bottom:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.money{position:sticky;top:96px}
.mcard{border-radius:var(--r-lg);padding:var(--s5);background:var(--bg-2);border:1px solid var(--line)}
.mcard dt{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.mcard dd{font-family:var(--f-display);font-size:40px;letter-spacing:-.03em;line-height:1.1;margin:4px 0 var(--s4)}
.mnote{font-size:13px;color:var(--muted);margin-top:12px;padding:0 4px}

/* ---------- FIELD NOTES index ---------- */
.fn-head{padding-top:clamp(36px,6vw,88px)}
.fn-head h1 .em{color:var(--mint)}
.fn-head .lede{margin-top:var(--s4)}
.fn-head h1{margin-top:var(--s4)}
.fn-head{padding-bottom:var(--s7)}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s6) 0 0}
.filters button{height:36px;padding:0 16px;border-radius:var(--pill);border:1.5px solid var(--line-2);background:transparent;font-size:14.5px;font-weight:500;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.filters button:hover{transform:translateY(-2px);border-color:var(--ink-2)}
.filters button[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#0f1a15;font-weight:700}
.grp+.grp{margin-top:var(--s3)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-2);padding:clamp(22px,3vw,40px);box-shadow:inset 0 2px 0 rgba(255,255,255,.05);transition:transform .5s var(--ease),border-color .4s}
.card:hover{transform:translateY(-5px);border-color:var(--mint)}
.card h2{font-family:var(--f-display);font-weight:400;line-height:1.04;letter-spacing:-.03em}
.card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card .ex{color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.card .ex p+p{margin-top:var(--s3)}
.card .ex:empty{display:none}
/* lead card: the newest note, full width, in the article-view style */
.card-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;border-top:4px solid var(--tile-mint)}
.card-lead h2{font-size:clamp(32px,4.4vw,60px);margin-top:var(--s5)}
.card-lead .ex{font-size:18px;line-height:1.6;-webkit-line-clamp:6;line-clamp:6}
.card-f{margin-top:var(--s5)}
.card-s{border-radius:var(--r-lg);padding:var(--s5)}
.card-s h2{font-size:clamp(21px,2vw,26px);margin:var(--s4) 0 var(--s3)}
.card-s .ex{font-size:15.5px;line-height:1.5;-webkit-line-clamp:3;line-clamp:3}
.card-s .byline{font-size:14px}
.fe.hide{display:none}
.empty{color:var(--muted);padding:var(--s5) 0;display:none}
.empty.show{display:block}

/* ---------- ARTICLE ---------- */
.art{padding-top:var(--s5)}
.art-in{max-width:680px;margin:0 auto}
.art .back{margin-bottom:var(--s7)}
.byline{color:var(--ink-2);font-size:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.art h1{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.03em;margin:var(--s4) 0 var(--s6)}
.prose{font-size:19px;line-height:1.65;color:var(--ink-2)}
.prose p,.prose ul,.prose ol{margin-top:var(--s5)}
.prose>p:first-child{margin-top:0;font-size:22px;line-height:1.5;color:var(--ink)}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin-top:var(--s7)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-top:var(--s3)}
.prose li::marker{color:var(--mint)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.note-real{font-size:14.5px;color:var(--ink-2)}
.note-real a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.share{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.copied{font-size:14px;color:var(--ink-2);margin-left:6px}
.art-share{margin-top:var(--s7)}
.share a,.share button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;background:transparent;cursor:pointer;transition:transform .4s var(--ease),background .25s,border-color .25s,color .25s}
.share a:hover,.share button:hover{transform:translateY(-3px);background:var(--ink);color:#141414;border-color:var(--ink)}
.share svg{width:17px;height:17px}
.box{margin-top:var(--s7);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s5);background:var(--bg-2)}
.box h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.box .ph{margin:6px 0 var(--s4);font-size:16px}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s linear both}
::view-transition-new(root){animation:vt-in .28s linear both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.site-h{view-transition-name:hdr}
::view-transition-old(hdr),::view-transition-new(hdr){animation:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .case{grid-template-columns:1fr}
  .money{position:static;order:-1}
  .mcard{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5)}
}
@media (max-width:820px){
  .hero.stage{--fl:110px;--bh:54px;min-height:0}
  .hero.stage .wrap{grid-template-columns:1fr;gap:0}
  .hero .copy{padding:calc(72px + 32px) 0 44px}
  .pile{justify-self:center;width:min(72vw,340px);margin-bottom:calc(var(--fl) - 6px)}
  .card-lead{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .nrow{grid-template-columns:minmax(0,1fr) auto}.nrow .tag{display:none}
  .prose{font-size:17.5px} .prose>p:first-child{font-size:19.5px}
  .hero-g,.nl,.about-me{grid-template-columns:1fr}
  .hero-g{align-items:stretch}
  .about-me .photo{max-width:340px}
  .trio{grid-template-columns:1fr}
  .chap{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:560px){
  body{font-size:16px}
  .site-h .wrap{height:64px}
  .logo{font-size:24px}
  .nav{gap:12px;font-size:13.5px}
  .nav .pill{height:34px;padding:0 12px;font-size:13px}
  .tile{grid-template-columns:auto 1fr;gap:16px}
  .tile .go{display:none}
  .blk h3{margin-top:var(--s4)}
  .facts{gap:var(--s3)}
  .facts dd{font-size:20px}
  .form-row{flex-direction:column}
  .p-main .st{margin-right:0;width:100%}
  .site-f .row{flex-direction:column;align-items:flex-start}
  .site-f .links{gap:var(--s4)}
}
@media (max-width:380px){ .nav{gap:10px;font-size:13px} }
@media (max-width:359px){ .nav-sub{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .js .hero h1 .ln>span{transform:none}
  .js .hero .fade{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* release: a project tile with no destination is not a link */
.tile.is-static{cursor:default;grid-template-columns:auto 1fr}
.tile.is-static:hover{transform:none}
.tile.is-static:hover .nm{transform:none}
.site-f .legal{max-width:52em;text-transform:none;letter-spacing:.02em}
.nav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav .arr{flex:none}
/* release: About page (13 Nov 2026) */
.ab-open{padding-top:clamp(36px,6vw,88px)}
.ab-open .lede{margin-top:var(--s5);max-width:36em}
.ab-me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,5vw,72px);align-items:start;border-top:1px solid var(--line);padding-top:var(--s7)}
.ab-me p{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:34em}
.ab-trio{margin-top:var(--s7)}
.ab-trio .blk{border-top:4px solid var(--c)}
.ab-trio .blk .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:var(--on);font-family:var(--f-display);font-size:16px;letter-spacing:-.02em}
.ab-trio .blk p{color:var(--ink-2);font-size:16.5px;line-height:1.55}
.ab-sec-h{margin-bottom:var(--s5)}
.ab-proj{grid-template-columns:auto 1fr}
.ab-proj .desc{font-size:clamp(17px,1.6vw,21px);line-height:1.45;font-weight:500;max-width:40em}
.ab-proj .desc strong{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4.4vw,60px);letter-spacing:-.035em;line-height:1;display:inline-block;margin-right:.18em}
.ab-proj .st{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:var(--pill);border:1.5px solid currentColor;font-size:14px;font-weight:700}
.ab-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.ab-duo .blk h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.025em;line-height:1.04;margin:var(--s4) 0 var(--s3)}
.ab-duo .blk p{font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
.ab-duo .blk a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--c)}
.ab-duo .blk{border-top:4px solid var(--c)}
.ab-duo .blk .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:var(--on);font-family:var(--f-display);font-size:16px}
@media (max-width:820px){.ab-me,.ab-duo{grid-template-columns:1fr}}

/* ---------- home motion (proposal 13 Nov 2026; home only, CSS + IntersectionObserver) ---------- */
/* hero stack: each block falls in like Claude's promo video (stretch, squash, spring, settle), 0.7 s apart;
   the block underneath squashes when the next one lands. Then the cursor moves them (see app.js). */
[data-page="home"] .hero.stage{--fall:640px}
[data-page="home"] .blk3{transform-origin:50% 100%;transform:translateX(var(--x,0)) translate(var(--cx,0px),var(--cy,0px)) rotate(var(--r,0deg)) rotate(var(--cr,0deg)) scale(var(--cs,1));
  transition:transform .8s cubic-bezier(.34,1.56,.64,1),filter .45s var(--ease);will-change:transform}
.js [data-page="home"] .pile .blk-p{animation:mv-fall-hit 1.58s linear .30s backwards}
.js [data-page="home"] .pile .blk-n{animation:mv-fall-hit-soft 1.58s linear 1.00s backwards}
.js [data-page="home"] .pile .blk-next{animation:mv-fall 1.02s linear 1.70s backwards,place 3.6s var(--ease-io) infinite alternate}
@keyframes mv-fall{
  0.00%{transform:translateX(var(--x,0)) translate(0,calc(-1 * var(--fall))) rotate(calc(var(--r,0deg) * 5)) scale(0.900,1.220);opacity:0;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  4.90%{transform:translateX(var(--x,0)) translate(0,calc(-1 * var(--fall))) rotate(calc(var(--r,0deg) * 4.6)) scale(0.900,1.220);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  35.29%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 2)) scale(0.900,1.220);opacity:1;animation-timing-function:linear}
  44.12%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0500)) rotate(calc(var(--r,0deg) * 0.3)) scale(1.170,0.720);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  60.78%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.3333)) rotate(calc(var(--r,0deg) * 1.9)) scale(0.940,1.120);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  76.47%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0167)) rotate(calc(var(--r,0deg) * 0.7)) scale(1.080,0.880);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  88.24%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.0417)) rotate(calc(var(--r,0deg) * 1.15)) scale(0.985,1.035);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100.00%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}}
@keyframes mv-fall-hit{
  0.00%{transform:translateX(var(--x,0)) translate(0,calc(-1 * var(--fall))) rotate(calc(var(--r,0deg) * 5)) scale(0.900,1.220);opacity:0;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  3.16%{transform:translateX(var(--x,0)) translate(0,calc(-1 * var(--fall))) rotate(calc(var(--r,0deg) * 4.6)) scale(0.900,1.220);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  22.78%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 2)) scale(0.900,1.220);opacity:1;animation-timing-function:linear}
  28.48%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0500)) rotate(calc(var(--r,0deg) * 0.3)) scale(1.170,0.720);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  39.24%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.3333)) rotate(calc(var(--r,0deg) * 1.9)) scale(0.940,1.120);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  49.37%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0167)) rotate(calc(var(--r,0deg) * 0.7)) scale(1.080,0.880);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  56.96%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.0417)) rotate(calc(var(--r,0deg) * 1.15)) scale(0.985,1.035);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  64.56%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}
  67.09%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}
  72.78%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0250)) rotate(calc(var(--r,0deg) * 0.6)) scale(1.050,0.870);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  83.54%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.0250)) rotate(calc(var(--r,0deg) * 1.25)) scale(0.985,1.050);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  92.41%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0083)) rotate(calc(var(--r,0deg) * 0.95)) scale(1.010,0.980);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100.00%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}}
@keyframes mv-fall-hit-soft{
  0.00%{transform:translateX(var(--x,0)) translate(0,calc(-1 * var(--fall))) rotate(calc(var(--r,0deg) * 5)) scale(0.900,1.220);opacity:0;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  3.16%{transform:translateX(var(--x,0)) translate(0,calc(-1 * var(--fall))) rotate(calc(var(--r,0deg) * 4.6)) scale(0.900,1.220);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  22.78%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 2)) scale(0.900,1.220);opacity:1;animation-timing-function:linear}
  28.48%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0500)) rotate(calc(var(--r,0deg) * 0.3)) scale(1.170,0.720);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  39.24%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.3333)) rotate(calc(var(--r,0deg) * 1.9)) scale(0.940,1.120);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  49.37%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0167)) rotate(calc(var(--r,0deg) * 0.7)) scale(1.080,0.880);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  56.96%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.0417)) rotate(calc(var(--r,0deg) * 1.15)) scale(0.985,1.035);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  64.56%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}
  67.09%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}
  72.78%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0150)) rotate(calc(var(--r,0deg) * 0.6)) scale(1.030,0.922);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  83.54%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * -0.0150)) rotate(calc(var(--r,0deg) * 1.25)) scale(0.991,1.030);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  92.41%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0083)) rotate(calc(var(--r,0deg) * 0.95)) scale(1.006,0.988);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100.00%{transform:translateX(var(--x,0)) translate(0,calc(var(--bh) * 0.0000)) rotate(calc(var(--r,0deg) * 1)) scale(1.000,1.000);opacity:1;animation-timing-function:linear}}
[data-page="home"] .pile .blk3.is-near{filter:brightness(1.07)}

/* projects: tiles fall in the same way (smaller amplitude for the wide tile) as they scroll in,
   then a one-time light sweep; the cursor tilts and pulls them; accent glow on hover/focus */
.js [data-page="home"] #projects .tile.rv{transform:none;transition:opacity .2s linear,transform .7s cubic-bezier(.34,1.56,.64,1),box-shadow .6s var(--ease)}
.js [data-page="home"] #projects .tile.rv.in{animation:mv-fall-tile 1.02s linear var(--dl,0s) backwards}
@keyframes mv-fall-tile{
  0.00%{transform:translate(0,calc(-1 * var(--tfall,180px))) rotate(-1.600deg) scale(0.968,1.070);opacity:0;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  4.90%{transform:translate(0,calc(-1 * var(--tfall,180px))) rotate(-1.440deg) scale(0.968,1.070);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  35.29%{transform:translate(0,calc(var(--th,150px) * 0.0000)) rotate(-0.400deg) scale(0.968,1.070);opacity:1;animation-timing-function:linear}
  44.12%{transform:translate(0,calc(var(--th,150px) * 0.0500)) rotate(0.280deg) scale(1.054,0.910);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  60.78%{transform:translate(0,calc(var(--th,150px) * -0.3333)) rotate(-0.360deg) scale(0.981,1.038);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  76.47%{transform:translate(0,calc(var(--th,150px) * 0.0167)) rotate(0.120deg) scale(1.026,0.962);opacity:1;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
  88.24%{transform:translate(0,calc(var(--th,150px) * -0.0417)) rotate(-0.060deg) scale(0.995,1.011);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100.00%{transform:translate(0,calc(var(--th,150px) * 0.0000)) rotate(-0.000deg) scale(1.000,1.000);opacity:1;animation-timing-function:linear}}
[data-page="home"] #projects .tile::after{content:"";position:absolute;inset:-20% auto -20% 0;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);translate:-130% 0;rotate:8deg}
.js [data-page="home"] #projects .tile.rv.in::after{animation:mv-sheen 1.5s var(--ease) calc(var(--dl,0s) + .9s) both}
@keyframes mv-sheen{to{translate:330% 0}}
[data-page="home"] #projects a.tile:hover,[data-page="home"] #projects a.tile:focus-visible{transition-delay:0s;transform:perspective(900px) translate(var(--tx,0px),calc(var(--ty,0px) - 6px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:var(--mat),0 28px 70px -22px var(--c),0 0 0 1px rgba(255,255,255,.18) inset}
[data-page="home"] #projects a.tile:focus-visible{outline:3px solid #fff;outline-offset:4px}
[data-page="home"] #projects a.tile:focus-visible::before{opacity:1}
.js [data-page="home"] .feat.rv{transition:opacity .7s var(--ease),transform .8s var(--ease),box-shadow .6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .js [data-page="home"] .pile .blk3,.js [data-page="home"] .pile .blk-next,.js [data-page="home"] #projects .tile.rv.in{animation:none}
  [data-page="home"] .pile .blk-next{translate:0 -12px;rotate:2deg}
  [data-page="home"] .blk3{transition:none}
  .js [data-page="home"] #projects .tile.rv{transform:none;transition:none}
  .js [data-page="home"] #projects .tile.rv.in::after{animation:none}
  [data-page="home"] #projects a.tile:hover,[data-page="home"] #projects a.tile:focus-visible{transform:none}
}