/* ===== Version B: Latip-style sheet + cursor glow + curtain footer ===== */
:root{--sheet-r:32px;--gx:30vw;--gy:30vh}
body{background:var(--paper)}
.nav{background:rgba(243,240,234,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* --- cursor-follow glow (one element per host, moved with transform only) --- */
.glow-host{position:relative;overflow:hidden;isolation:isolate}
.hero.glow-host{position:sticky;overflow:visible}
.hero .glow-clip{position:absolute;inset:-64px 0 0;overflow:hidden;z-index:-1;pointer-events:none}
.glow{position:absolute;left:0;top:0;width:var(--gs,900px);height:var(--gs,900px);margin:calc(var(--gs,900px)/-2) 0 0 calc(var(--gs,900px)/-2);
  border-radius:50%;pointer-events:none;z-index:0;will-change:transform;
  -webkit-transform:translate3d(var(--x,30vw),var(--y,40%),0);transform:translate3d(var(--x,30vw),var(--y,40%),0);
  background:radial-gradient(closest-side,rgba(var(--gc),.42),rgba(var(--gc),.16) 45%,rgba(var(--gc),0) 100%);opacity:var(--go,1);transition:opacity .6s ease}
.hero .glow{--gc:122,85,96}
.sheet .glow{--gc:79,102,124;--gs:1100px}
.b-foot .glow{--gc:181,150,120;--gs:800px}
.hero-inner,.sheet>section,.b-foot>.wrap{position:relative;z-index:1}

/* --- the dark sheet (Latip): one rounded card holding work, experiments, writing --- */
.sheet{background:var(--night);border-radius:var(--sheet-r);margin:0 12px;box-shadow:0 -20px 50px -14px rgba(15,14,13,.2),0 30px 60px -20px rgba(15,14,13,.35);z-index:2;
  background-image:linear-gradient(90deg,rgba(243,240,234,.035) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
.b-sec{padding:96px 0 40px}
.b-sec:last-child{padding-bottom:120px}
.b-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px}
.b-head h2{margin:0;font-size:clamp(32px,3.4vw,48px);font-weight:600;letter-spacing:-.045em;line-height:1}
.b-intro{margin:12px 0 0;font-size:16px;color:rgba(243,240,234,.6);max-width:460px}
.b-head-r{display:flex;align-items:center;gap:20px}
.b-cta{display:inline-flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.04em;padding:11px 16px;border:1px solid var(--line-d);border-radius:999px;white-space:nowrap;transition:background .3s,color .3s,transform .3s var(--ease)}
.b-cta span{transition:transform .3s var(--ease)}
.b-cta:hover{background:var(--paper);color:var(--ink)}
.b-cta:hover span{transform:translateX(3px)}
.b-cta:focus-visible,.car-btn:focus-visible,.car:focus-visible,.feed a:focus-visible,.card:focus-visible,.slide:focus-visible{outline:2px solid #9fb2bd;outline-offset:4px}

.b-work{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.b-work .frame{aspect-ratio:4/3.4}
.b-work .caption h3{font-size:24px}
.b-work .caption p{font-size:14.5px}

/* --- experiments carousel: native scroll-snap (swipe/trackpad) + buttons + keys --- */
.car{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;
  padding:0 max(64px,calc((100vw - 1312px)/2));scroll-padding:0 max(64px,calc((100vw - 1312px)/2))}
.car::-webkit-scrollbar{display:none}
.car-track{display:flex;gap:28px;width:max-content}
.slide{display:block;flex:0 0 auto;width:min(760px,calc(100vw - 200px));scroll-snap-align:start;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide:last-child{margin-right:max(64px,calc((100vw - 1312px)/2))}
.slide .frame{aspect-ratio:16/10}
.slide.dim{opacity:.45}
.slide:hover{transform:scale(.99)}
.car-btns{display:flex;align-items:center;gap:10px}
.car-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-d);background:transparent;color:var(--paper);font:inherit;font-size:15px;cursor:pointer;transition:background .3s,color .3s,opacity .3s}
.car-btn:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.car-btn:disabled{opacity:.3;cursor:default}
.car-count{font-size:12px;letter-spacing:.1em;color:rgba(243,240,234,.5);font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
.car-count b{color:var(--paper);font-weight:600}

/* --- writing feed (Latip-style rows) --- */
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.feed li{border-bottom:1px solid var(--line-d)}
.feed a{display:grid;grid-template-columns:150px 1.1fr 1fr 40px;gap:24px;align-items:center;padding:26px 12px;border-radius:12px;transition:background .35s}
.feed a:hover{background:rgba(243,240,234,.05)}
.feed .f-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,240,234,.5);display:flex;flex-direction:column;gap:6px}
.feed .f-sample{align-self:flex-start;font-size:10px;letter-spacing:.12em;border:1px dashed rgba(243,240,234,.35);border-radius:999px;padding:3px 8px;color:rgba(243,240,234,.6)}
.feed h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.025em}
.feed p{margin:0;font-size:14px;line-height:1.5;color:rgba(243,240,234,.6)}
.feed .f-arrow{justify-self:end;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-d);transition:transform .35s var(--ease),background .35s,color .35s}
.feed a:hover .f-arrow{transform:rotate(-45deg);background:var(--paper);color:var(--ink)}
.feed-note{margin:16px 0 0;font-size:12px;color:rgba(243,240,234,.4)}

/* --- footer: sits UNDER the sheet and is revealed as the sheet scrolls away --- */
.footer.b-foot{position:-webkit-sticky;position:sticky;bottom:0;z-index:1;margin-top:calc(-1 * var(--sheet-r));padding:calc(72px + var(--sheet-r)) 0 24px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.2fr;gap:32px;padding-bottom:48px}
.foot-id{display:flex;flex-direction:column;gap:6px;font-size:14px}
.foot-id b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.foot-id span{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-col h4{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--muted)}
.foot-col a{width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.foot-col a:hover{background-size:100% 1px}
.foot-about p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.wordmark{display:flex;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;line-height:.82;overflow:hidden;color:var(--ink)}
.wm{font-size:clamp(64px,15.6vw,236px);font-weight:500;letter-spacing:-.065em;white-space:nowrap;padding-bottom:.08em}
.wm .ch{display:inline-block;-webkit-transform:translate3d(0,calc((1 - var(--p,1)) * 105%),0);transform:translate3d(0,calc((1 - var(--p,1)) * 105%),0);will-change:transform}
.wm-dot{flex:none;width:clamp(14px,2.6vw,38px);height:clamp(14px,2.6vw,38px);border-radius:50%;background:var(--oxblood);margin-left:.4vw;
  -webkit-transform:scale(var(--dp,1));transform:scale(var(--dp,1));transition:background .3s}
.wordmark:hover .wm-dot{background:#4f667c}
.motion .wordmark .wm-dot{animation:dotpulse 2.4s var(--ease-out) infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 rgba(53,23,27,.35)}60%{box-shadow:0 0 0 14px rgba(53,23,27,0)}}

@media (prefers-reduced-motion:reduce){.glow{display:none}.car{scroll-behavior:auto}}
@media (hover:none),(pointer:coarse){.glow{-webkit-transform:translate3d(70vw,20%,0);transform:translate3d(70vw,20%,0)}}

@media (max-width:820px){
  .sheet{margin:0 6px;--sheet-r:22px}
  .b-sec{padding:64px 0 24px}
  .b-head{flex-direction:column;align-items:flex-start;gap:18px}
  .b-head-r{width:100%;justify-content:space-between}
  .b-work{grid-template-columns:1fr;gap:44px}
  .car{padding:0 20px;scroll-padding:0 20px}
  .slide{width:calc(100vw - 64px)}
  .slide:last-child{margin-right:20px}
  .car-track{gap:14px}
  .feed a{grid-template-columns:1fr 32px;gap:8px 16px;padding:22px 4px}
  .feed .f-tag{grid-column:1/-1;flex-direction:row;align-items:center}
  .feed h3{font-size:19px}
  .feed p{grid-column:1}
  .feed .f-arrow{grid-row:2;grid-column:2}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-id,.foot-about{grid-column:1/-1}
  .footer.b-foot{position:relative;padding-top:calc(48px + var(--sheet-r))}
}
/* hero sits above the parked footer; footer only shows once the sheet lifts past it */
.hero.glow-host{z-index:1;background:var(--paper)}
.footer.b-foot{z-index:0}
.footer.b-foot{padding-bottom:40px}.wordmark{padding-bottom:4px}

/* ===== B rev 3: three equal feature rows; mixed-kind experiments carousel ===== */
[hidden]{display:none!important}
.b-work{display:flex;flex-direction:column;gap:72px}
.b-work .w-hero{display:grid;grid-template-columns:1.9fr 1fr;gap:40px;align-items:end}
.b-work .w-hero .frame{aspect-ratio:16/9.6}
.b-work .w-hero .inset.window{inset:8% 7% 0}
.b-work .w-hero .inset.photo{inset:7%}
.b-work .w-hero .caption{padding:0 0 8px}
.b-work .w-hero .caption h3{font-size:clamp(30px,2.8vw,42px)}
.b-work .w-hero .caption p{font-size:16.5px}

/* carousel: visual slides as first pass; text slides are top-aligned squares */
.car-track{align-items:flex-start}
.slide-text{width:min(360px,calc(100vw - 120px))}
.tcard{position:relative;aspect-ratio:1/1;border-radius:var(--r);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;color:var(--ink);border:1px solid rgba(255,255,255,.08);overflow:hidden;isolation:isolate}
.tcard::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none}
.tint-sand{background:linear-gradient(150deg,#efe5d4,#cdb89c)}
.tint-mist{background:linear-gradient(160deg,#dde6ea,#9fb2bd)}
.tint-meadow{background:linear-gradient(160deg,#ecdbe2,#b5cfb8)}
.tint-dusk{background:linear-gradient(160deg,#d9a8a1,#8a4a4e);color:var(--paper)}
.tint-violet{background:linear-gradient(150deg,#e5dcf7,#b7a3e6)}
.tcard .t-img{width:56px;height:56px;border-radius:12px;object-fit:cover;margin-bottom:auto}
.tcard .cap-meta{color:rgba(20,19,18,.55);margin-bottom:8px}
.tcard h3{margin:0;font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.tcard p{margin:10px 0 0;font-size:14px;line-height:1.5;color:rgba(20,19,18,.68)}
.tint-dusk .cap-meta,.tint-dusk p{color:rgba(243,240,234,.7)}

@media (max-width:820px){
  .b-work{gap:48px}
  .b-work .w-hero{grid-template-columns:1fr;gap:0}
  .b-work .w-hero .caption{padding-top:20px}
  .b-work .w-hero .frame{aspect-ratio:4/3.3}
  .slide-text{width:calc(100vw - 120px)}
}

/* ===== B rev 4: shell polish, home strip, email dot, index pages ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.nav-links a.active{color:var(--ink);position:relative}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--oxblood)}
.nav-links a:not(.nav-cta){color:var(--ink-2);transition:color .2s}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-cta{transition:background .25s,color .25s}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
.hero-top{justify-content:flex-start}

/* home experiments strip (rev 2 look) */
.strip-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.strip-x::-webkit-scrollbar{display:none}
.strip-x.over{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.strip-x:focus-visible{outline:2px solid #9fb2bd;outline-offset:6px;border-radius:12px}
.exp-track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 24px) / 4);column-gap:24px;align-items:start}
.exp{scroll-snap-align:start;min-width:0}
.exp a{display:block}
.exp-media{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line-d);background:var(--night-2)}
.exp-text .exp-media{aspect-ratio:5/4}
.exp-media video,.exp-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform .6s var(--ease)}
.exp a:hover .exp-media video,.exp a:hover .exp-media img{transform:scale(1.03)}
.exp-meta{margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,240,234,.45)}
.exp h3{margin:6px 0 0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.exp p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:rgba(243,240,234,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.demo-flag{font-weight:600;color:#e7b7a8}
.tsq{display:grid;place-items:center;color:rgba(20,19,18,.55);border:1px solid rgba(255,255,255,.08)}
.tsq-glyph{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(48px,5vw,88px);line-height:1}
.tsq img{width:38%!important;height:auto!important;aspect-ratio:1;border-radius:14px}
@media (max-width:1100px){.exp-track{grid-auto-columns:calc((100% - 2 * 20px) / 3);column-gap:20px}}

/* footer email dot */
.wordmark{align-items:center}
.wm-dot{flex:none;display:grid;place-items:center;width:clamp(44px,5.6vw,84px);height:clamp(44px,5.6vw,84px);margin-left:clamp(8px,1.2vw,18px);
  border-radius:50%;background:var(--oxblood);color:var(--paper);align-self:flex-end;margin-bottom:.6vw;
  transition:background .3s,transform .35s var(--ease),box-shadow .3s}
.wm-dot svg{width:48%;height:48%;display:block}
.wordmark:hover .wm-dot{background:var(--oxblood)}
.wm-dot:hover{background:#4f667c!important;-webkit-transform:scale(calc(var(--dp,1) * 1.08)) rotate(-8deg);transform:scale(calc(var(--dp,1) * 1.08)) rotate(-8deg)}
.wm-dot:focus-visible{outline:3px solid #4f667c;outline-offset:5px}
.motion .wordmark .wm-dot{animation:dotpulse 2.4s var(--ease-out) infinite}
.motion .wordmark .wm-dot:hover,.motion .wordmark .wm-dot:focus-visible{animation:none}

/* sub-page hero */
.page-hero{padding:72px 0 64px}
.page-hero h1{font-size:clamp(46px,6vw,88px)}
.page-hero .lede{margin-top:28px}
.sub .sheet{min-height:60vh}

/* chips + index bar */
.idx-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line-d);margin-bottom:40px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;color:var(--paper);background:transparent;border:1px solid var(--line-d);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip span{opacity:.5;margin-left:4px;font-variant-numeric:tabular-nums}
.chip:hover:not(:disabled){border-color:rgba(243,240,234,.4)}
.chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chip:disabled{opacity:.3;cursor:default}
.chip:focus-visible{outline:2px solid #9fb2bd;outline-offset:3px}
.idx-count{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,240,234,.5)}

/* experiments index */
.xp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 28px;align-items:start}
.xp{display:block;min-width:0}
.xp-visual{grid-column:span 6}
.xp-text,.xp-more{grid-column:span 3}
.xp-media{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-d);background:var(--night-2)}
.xp-text .xp-media{aspect-ratio:1/1}
.xp-media video,.xp-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform .6s var(--ease)}
.xp:hover .xp-media video,.xp:hover .xp-media img{transform:scale(1.025)}
.xp-cap{padding-top:18px}
.xp-cap h3{margin:0;font-size:26px;font-weight:600;letter-spacing:-.03em}
.xp-text .xp-cap h3{font-size:20px}
.xp-cap p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:rgba(243,240,234,.62);max-width:520px}
.xp-more-in{aspect-ratio:1/1;border:1px dashed rgba(243,240,234,.22);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;justify-content:flex-end}
.xp-more-in h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.xp-more-in p{margin:8px 0 0;font-size:14px;color:rgba(243,240,234,.55)}

/* writing index */
.w-feat{display:block;padding:40px;border-radius:var(--r);border:1px solid var(--line-d);background:linear-gradient(150deg,rgba(243,240,234,.06),rgba(243,240,234,.015));margin-bottom:56px;transition:border-color .3s}
.w-feat:hover{border-color:rgba(243,240,234,.3)}
.w-feat .f-sample{display:inline-block;margin-left:10px;vertical-align:top}
.w-feat h2{margin:18px 0 0;font-size:clamp(32px,3.6vw,52px);font-weight:600;letter-spacing:-.045em;line-height:1.02;max-width:900px}
.w-feat p{margin:14px 0 26px;font-size:17px;line-height:1.55;color:rgba(243,240,234,.65);max-width:640px}
.w-year{display:grid;grid-template-columns:140px 1fr;gap:24px;margin-bottom:40px}
.w-y{margin:22px 0 0;font-size:28px;font-weight:600;letter-spacing:-.04em;display:flex;align-items:baseline;gap:8px}
.w-y span{font-size:12px;color:rgba(243,240,234,.4);font-weight:400;letter-spacing:.04em}
.w-empty{color:rgba(243,240,234,.55)}

/* work page */
.wk-co{padding:72px 0;border-bottom:1px solid var(--line-d)}
.wk-co:first-child{padding-top:96px}
.wk-co:last-child{border-bottom:0;padding-bottom:120px}
.wk-row{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.wk-side{position:-webkit-sticky;position:sticky;top:96px}
.wk-side h2{margin:0;font-size:clamp(44px,5vw,72px);font-weight:600;letter-spacing:-.055em;line-height:.95}
.wk-yrs{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9fb2bd}
.wk-side p{margin:14px 0 0;font-size:15px;line-height:1.55;color:rgba(243,240,234,.62);max-width:260px}
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px}
.wk-card{display:block;min-width:0}
.wk-card.wide{grid-column:1/-1}
.wk-media{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-d);background:#e9e6e0}
.wk-card.wide .wk-media{aspect-ratio:16/8.3}
.wk-media img,.wk-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
a.wk-card:hover .wk-media img,a.wk-card:hover .wk-media video{transform:scale(1.025)}
.wk-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-top:16px}
.wk-cap h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.03em}
.wk-card.wide .wk-cap h3{font-size:30px}
.wk-cap p{margin:4px 0 0;font-size:13.5px;color:rgba(243,240,234,.55)}
.wk-status{flex:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,240,234,.45);padding-top:6px;white-space:nowrap}
.wk-status.is-link{color:var(--paper);border-bottom:1px solid rgba(243,240,234,.4);padding-bottom:2px}
@media (min-width:1100px){.wk-cap:has(.is-wip)>div{flex:none}}
.wk-status.is-wip{flex:0 1 auto;min-width:0;white-space:normal;text-align:right;letter-spacing:.1em;line-height:1.5}

@media (max-width:820px){
  .strip-x{margin-right:-20px}
  .exp-track{grid-auto-columns:62%;column-gap:14px;padding-right:20px}
  .page-hero{padding:48px 0 40px}
  .page-hero h1{font-size:44px}
  .xp-visual,.xp-text,.xp-more{grid-column:1/-1}
  .xp-grid{gap:40px}
  .w-feat{padding:24px}
  .w-year{grid-template-columns:1fr;gap:0}
  .wk-co{padding:48px 0}
  .wk-row{grid-template-columns:1fr;gap:28px}
  .wk-side{position:static}
  .wk-grid{grid-template-columns:1fr;gap:36px}
  .wk-card.wide .wk-media{aspect-ratio:16/10}
  .wk-cap{flex-direction:column;gap:8px}
}
.tsq.tint-sand{background:linear-gradient(150deg,#efe5d4,#cdb89c)}
.tsq.tint-mist{background:linear-gradient(160deg,#dde6ea,#9fb2bd)}
.tsq.tint-meadow{background:linear-gradient(160deg,#ecdbe2,#b5cfb8)}
.tsq.tint-dusk{background:linear-gradient(160deg,#d9a8a1,#8a4a4e);color:rgba(243,240,234,.8)}
.tsq.tint-violet{background:linear-gradient(150deg,#e5dcf7,#b7a3e6)}

/* ===== rev 5: thumbnails are the image itself — no tinted stages ===== */
.frame.media{background:none;border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden}
.frame.media::after{display:none}
.frame.media img,.frame.media video{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transition:transform .7s var(--ease)}
.card:hover .frame.media img,.card:hover .frame.media video{transform:scale(1.02)}
.exp-media,.xp-media,.wk-media{background:none}
.wk-media{border-color:var(--line-d)}

/* ===== rev 6: combined repository + about ===== */
.xp-post{grid-column:span 3}
.xp-post-in{aspect-ratio:1/1;border-radius:var(--r);border:1px solid var(--line-d);background:linear-gradient(160deg,rgba(243,240,234,.07),rgba(243,240,234,.015));
  padding:22px;display:flex;flex-direction:column;transition:border-color .3s,background .3s}
.xp-post:hover .xp-post-in{border-color:rgba(243,240,234,.32);background:linear-gradient(160deg,rgba(243,240,234,.1),rgba(243,240,234,.03))}
.xp-post-in .f-sample{align-self:flex-start;margin-top:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px dashed rgba(243,240,234,.35);border-radius:999px;padding:3px 8px;color:rgba(243,240,234,.6)}
.xp-post-in h3{margin:auto 0 0;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.xp-post-in p{margin:10px 0 0;font-size:14px;line-height:1.5;color:rgba(243,240,234,.62);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xp-post-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-d);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,240,234,.45)}
.xp-post-foot b{font-weight:400;font-size:15px;color:var(--paper);transition:transform .3s var(--ease)}
.xp-post:hover .xp-post-foot b{transform:translateX(3px)}
.xp-kind{font-style:normal;color:var(--paper);margin-right:8px;padding-right:8px;border-right:1px solid var(--line-d)}
.xp-more-in{min-height:100%}

.ab-hero{padding-top:40px}
.ab-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px}
.ab-roles div{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.ab-roles b{color:var(--ink);font-weight:600;font-size:13px}
.ab-name{font-size:clamp(80px,13vw,200px)!important;line-height:.86!important;letter-spacing:-.06em!important;text-transform:uppercase;max-width:6ch}
.ab-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:28px}
.ab-intro .lede{margin:0}
.b-cta.light{border-color:var(--ink);color:var(--ink)}
.b-cta.light:hover{background:var(--ink);color:var(--paper)}
.ab-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;padding:72px 0;border-bottom:1px solid var(--line-d)}
.ab-row:first-child{padding-top:24px}
.ab-left h2{margin:0 0 12px;font-size:clamp(32px,3.4vw,48px);font-weight:600;letter-spacing:-.045em;line-height:1}
.ab-left h2 a{border-bottom:2px solid rgba(243,240,234,.5);transition:border-color .3s}
.ab-left h2 a:hover{border-color:var(--paper)}
.ab-left span{display:block;font-size:12.5px;color:rgba(243,240,234,.5);line-height:1.6}
.ab-list{list-style:none;margin:0;padding:0}
.ab-list li{font-size:clamp(28px,3vw,44px);letter-spacing:-.035em;line-height:1.18;font-weight:500}
.ab-close{padding:72px 0 24px}
.ab-close p{margin:0 0 32px;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.035em;line-height:1.12;max-width:1000px}
@media (max-width:820px){
  .xp-post{grid-column:1/-1}
  .xp-post-in{aspect-ratio:auto;min-height:240px}
  .ab-roles{grid-template-columns:1fr 1fr}
  .ab-name{font-size:72px!important}
  .ab-intro{flex-direction:column;align-items:flex-start;gap:20px}
  .ab-row{grid-template-columns:1fr;gap:20px;padding:44px 0}
  .ab-list li{font-size:26px}
}
/* Version C: deep burgundy cursor light on beige (light) hosts; dark sheets keep their light */
.hero .glow,.glow-host.on-beige .glow{--gc:118,30,48}
.hero.glow-host,.glow-host.on-beige{--glow-o:.55}
.hero .glow,.glow-host.on-beige .glow{opacity:calc(var(--go,1) * var(--glow-o,1))}
html,body{overflow-x:clip}
/* cursor light: heroes (incl. gate/request) + footer only; never over scroll-over sheets, fades out when the pointer is on one */
.sheet>.glow,.cs-sheet>.glow,.c-stack>.glow{opacity:0!important}
html .glow-host:not(.glow-on) .glow{opacity:0!important}
.glow{transition:opacity .6s ease}
/* overview/landing case pages (roll up chapters): cursor light allowed across the whole page */
html body.glow-all .glow-host .glow{opacity:calc(var(--go,1) * var(--glow-o,1))!important}
/* ===== case tab bar: one shared definition for every case page (handcrafted .sx-sub and live .case-subnav) ===== */
html body .sx-sub,html body .lv .case-subnav{position:sticky!important;top:var(--navh,46px)!important;z-index:40!important;margin:0!important;padding:0!important;height:48px!important;
  background:rgba(243,240,234,.9)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid var(--line)!important;border-top:0!important}
html body .sx-sub>.wrap,html body .lv .case-subnav>.wrap{width:min(1312px,calc(100vw - 128px))!important;max-width:none!important;margin:0 auto!important;padding:0!important;height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}
html body .sx-sub .sx-name,html body .lv .case-subnav .project-name{font:500 13px/1 Inter,ui-sans-serif,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .sx-sub nav,html body .lv .case-subnav nav{display:flex!important;gap:4px!important;margin:0!important;padding:0!important}
html body .sx-sub nav a,html body .lv .case-subnav nav a{display:inline-flex!important;align-items:center!important;height:32px!important;padding:0 14px!important;border-radius:999px!important;font:500 13px/1 Inter,ui-sans-serif,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-2)!important;background:transparent!important;border:0!important;transition:background .2s!important}
html body .sx-sub nav a:hover,html body .lv .case-subnav nav a:hover{background:var(--paper-2)!important}
html body .sx-sub nav a[aria-current],html body .lv .case-subnav nav a[aria-current]{background:var(--ink)!important;color:var(--paper)!important}
html body .sx-sub nav a::after,html body .lv .case-subnav nav a::after{display:none!important}
@media (max-width:820px){html body .sx-sub>.wrap,html body .lv .case-subnav>.wrap{width:calc(100vw - 40px)!important}
  html body .sx-sub nav a,html body .lv .case-subnav nav a{padding:0 10px!important;font-size:12.5px!important}}
.footer.b-foot:not(.foot-near){visibility:hidden}
/* no italics in headings anywhere (Ji, Oct 12) */
:is(h1,h2,h3,h4,h5,h6),:is(h1,h2,h3,h4,h5,h6) *{font-style:normal!important}
:is(h1,h2,h3,h4,h5,h6) :is(em,i,.serif,.it){font-family:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important}

/* page ends at the footer: no elastic bounce revealing blank paper under the sticky footer */
html,body{overscroll-behavior-y:none}

/* footer: plain-text email under the clock */
.foot-id .foot-mail{width:fit-content;color:var(--muted);user-select:text;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .3s}
.foot-id .foot-mail:hover{color:var(--ink);background-size:100% 1px}

/* SaaS to AI thumbnail: show the full 16:9 frame, no crop */
a[href="saas-to-ai.html"] .frame>video,a[href="saas-to-ai.html"] .frame>img,
a[href="saas-to-ai.html"] .wk-media video,a[href="saas-to-ai.html"] .wk-media img{object-fit:contain!important;object-position:50% 50%!important}
/* launch: no horizontal overflow on mobile */
html,body{overflow-x:clip;max-width:100%}
.hero.glow-host{overflow-x:clip}
.glow{max-width:none;contain:strict}
@media (max-width:700px){.card,.xp-post,.xp-post-in,.frame{max-width:100%;min-width:0;box-sizing:border-box}}
.cs-page{overflow-x:clip}.cs-sheet.glow-host{overflow-x:clip}

/* Portrait thumbnails: show the whole device, centred on a matching background */
.wk-media.wk-fit{background:var(--fit-bg,#000)}
.wk-media.wk-fit img,.wk-media.wk-fit video{object-fit:contain;padding:var(--fit-pad,6%) 0;box-sizing:border-box}