/* graymade.co v2: styles for everything the site script builds (wall, live pieces, viewer, knife stage, transitions).
   Layout and type of the Webflow-built elements live in Webflow classes (gm-*); this file only adds what classes can't. */
:root{--bg:#0f0f0e;--fg:#ecebe7;--muted:#8b8a85;--faint:#5c5b57;--line:#262624;--accent:#ffe47a;--ink:#121212;
 --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--gap:20px;--ease:cubic-bezier(.2,.75,.15,1)}
html{background:var(--bg);color-scheme:dark}
body{background:transparent;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[hidden]{display:none!important}
html.k-lock{overflow:hidden}
.gm-page,.lb,.kstage{font-family:var(--sans)}
/* the old site styles p, h1-h6 and links by tag; these win over that but lose to any gm- class */
:where(.gm-page,.lb,.kstage) :is(p,h1,h2,h3,h4,h5,h6,a,span,div,figcaption,li,blockquote){font-family:var(--sans);letter-spacing:inherit}
:where(.gm-page) :is(h1,h2,h3,h4,h5,h6){font-weight:500}
.gm-page a{color:inherit}
.gm-page :focus-visible,.lb :focus-visible,.kstage :focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
.gm-side{scrollbar-width:none}.gm-side::-webkit-scrollbar{display:none}
.gm-logo{transition:opacity .3s}.gm-logo:hover{opacity:.75}
.gm-portrait{transition:width .6s var(--ease),height .6s var(--ease),border-radius .6s}
/* the aurora sits behind the page, so the page layers stay clear and html carries the ground */
body.body,.gm-page{background:transparent}
/* refraction leak v3: Sam's prism photographs keyed to alpha, out of the bottom-left corner, behind everything (Sam, 2026-10-17). leak.js builds the DOM. */
.gm-leak{--gm-leak-ground:var(--bg);position:fixed;inset-inline-start:0;inset-block-end:0;inline-size:min(96vmin,1040px);block-size:min(96vmin,1040px);
 pointer-events:none;z-index:-1;overflow:clip;opacity:0;transition:opacity 2.4s cubic-bezier(.22,1,.36,1)}
.gm-leak.gm-leak-on{opacity:.62}
.gm-leak-s{position:absolute;inset:0;transform-origin:0 100%}
.gm-leak-s>div{position:absolute;background:no-repeat center/100% 100%;will-change:transform,opacity}
/* the fan's light source sits just past the corner; it turns about that point */
.gm-leak-fan{inset-inline-start:-26%;inset-block-end:-30%;inline-size:135%;aspect-ratio:4/3;transform-origin:0 100%}
.gm-leak-glints{inset-inline-start:2%;inset-block-end:-4%;inline-size:70%;aspect-ratio:900/860}
.gm-leak-bloom{inset-inline-start:-192px;inset-block-end:-192px;inline-size:384px;block-size:384px;scale:3.4;transform-origin:50% 50%}
.gm-leak-grain{position:absolute;inset:0;background-size:256px 256px;opacity:.4;mask-image:radial-gradient(circle at 0 100%,#000 20%,transparent 75%)}
/* falloff toward the far ends, and low along the bottom edge so the footer line reads */
.gm-leak-fade{position:absolute;inset:0;
 background:linear-gradient(to top,color-mix(in oklch,var(--gm-leak-ground) 70%,transparent),transparent 18%),
  radial-gradient(circle at 0 100%,transparent 30%,color-mix(in oklch,var(--gm-leak-ground) 50%,transparent) 62%,var(--gm-leak-ground) 94%)}

@media (hover:hover){html:not([data-view]) [data-page=home] .gm-portrait:hover{width:min(100%,200px);height:min(100%,200px);border-radius:4px}}
.gm-side .gm-portrait{margin-bottom:6px}
/* pages without the small portrait: case studies and About (it grows into the About page) */
[data-page=about] .gm-side .gm-portrait,html[data-view=about] .gm-side .gm-portrait{display:none}
/* Get in touch: outlined, the yellow wipes in on hover */
/* email: plain text that dims on hover, like samuelgrayart.com; click copies it */
.gm-mail{color:inherit;text-decoration:none;transition:color .3s}
.gm-bio a{position:relative;color:inherit;text-decoration:underline;text-decoration-color:oklch(.75 0 none / .45);text-decoration-thickness:1px;text-underline-offset:3px;background:linear-gradient(100deg,var(--fg) 0 36%,oklch(1 .04 95) 46%,oklch(.95 .09 90) 50%,oklch(1 .04 95) 54%,currentColor 64% 100%) 100% 0/280% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position .9s cubic-bezier(.45,0,.2,1),text-decoration-color .3s}
.gm-bio a::before{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;block-size:1px;pointer-events:none;background:linear-gradient(90deg,oklch(.9 .03 90 / .35),oklch(.95 .03 92) 22%,oklch(.97 .02 95));box-shadow:0 0 4px oklch(.9 .08 92 / .28);transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s cubic-bezier(.65,0,.25,1)}
.gm-mail{cursor:copy}
[data-gm=home-info] .gm-bio.gm-is-muted{font-size:15px;line-height:1.55}.gm-mail.gm-copied{color:var(--accent)}
.gm-cta{isolation:isolate;cursor:pointer;transition:color .35s,border-color .35s}
.gm-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.gm-cta:hover,.gm-cta:focus-visible{color:var(--ink)!important;border-color:var(--accent)!important}
.gm-cta:hover::before,.gm-cta:focus-visible::before{transform:scaleX(1)}
.gm-cta-arrow{transition:transform .5s var(--ease)}.gm-cta:hover .gm-cta-arrow{transform:translateX(5px)}
.gm-toast{color:var(--accent);font-size:14px}

/* wall: the static piece list (an embed, once the CMS list) is the data source; the script lays the pieces out in columns */
.gm-js .gm-wall .w-dyn-list{display:none}
.w-dyn-bind-empty{display:none!important}
.wall{display:flex;gap:var(--gap);align-items:flex-start}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(var(--gap) + 14px)}
.gm-cycle{position:relative;display:block;inline-size:100%;overflow:clip;border-radius:3px;background:#1a1a19;cursor:pointer}
.gm-cycle img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0;transform:scale(1.02)}
.gm-cycle img.on{opacity:1}
.gm-pop .gm-pop-s{position:absolute;inset:0;opacity:0}
.gm-pop .gm-pop-s.on{opacity:1}
.gm-pop .gm-pop-s img{opacity:1;transform:none}
.gm-pop .gm-pop-s img.gm-pop-logo{inset:auto;left:50%;top:50%;inline-size:auto;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 14px rgb(0 0 0 / .35))}
.lb .gm-cycle{inline-size:100%;block-size:100%}
.wall.wall-abs{display:block;position:relative}
.wall-abs>.item{position:absolute}
.wall-abs>.item.gm-fit>.gm-tilemedia{height:100%;object-fit:cover}
/* some exported images carry a 1px light edge; crop a hair inside the frame (Sam, 2026-10-17) */
.wall-abs>.item{overflow:clip;border-radius:3px}
.wall-abs>.item>img.gm-tilemedia,.wall-abs>.item>video.gm-tilemedia{scale:1.012}
.item{position:relative;margin:0;min-width:0}
.media{display:block;width:100%;height:auto;border-radius:3px;background:#1a1a19;cursor:pointer}
.item{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.item.in{opacity:1;transform:none}
/* hovering a tile shows a small pill with the project name, inside the frame; always on for touch screens */
.gm-pill{position:absolute;left:10px;bottom:10px;z-index:4;max-width:calc(100% - 20px);padding:5px 10px 6px;border-radius:999px;background:rgba(15,15,14,.62);color:#ecebe7;font:500 12px/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .4s var(--ease);pointer-events:none}
.item:hover .gm-pill,.item:focus-within .gm-pill{opacity:1;transform:none}
@media (hover:none){.gm-pill{opacity:1;transform:none}}
.knifetile{cursor:pointer}.knifetile img{transition:filter .3s}.knifetile:hover img{filter:brightness(1.1)}
/* compare slider */
.slider{position:relative;width:100%;border-radius:3px;overflow:hidden;background:#1a1a19;--p:50%;touch-action:pan-y;user-select:none}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity .4s}
.slider.s-fade img{opacity:0}
.slider.s-wait img,.slider.s-wait .s-line{opacity:0}
.slider .s-line{transition:opacity .4s}
.slider.s-edge .s-line{opacity:0}
.slider .s-b{clip-path:inset(0 0 0 var(--p))}
.slider .s-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:rgba(255,255,255,.92);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.slider .s-line i{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.slider .s-line i::before,.slider .s-line i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.slider .s-line i::before{left:5px;border-right-color:#111}.slider .s-line i::after{right:5px;border-left-color:#111}
.slider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.slider input:focus-visible~.s-line i{outline:2px solid var(--accent);outline-offset:3px}
.slider .s-tag{display:none;position:absolute;bottom:10px;font:500 11px var(--mono);letter-spacing:.04em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
.slider .s-tag.l{left:12px;color:#1b1a18;text-shadow:0 0 6px rgba(255,255,255,.9)}.slider .s-tag.r{right:12px}
.slot{position:relative}
.slot .expand{border:0;padding:0;font:inherit;line-height:1;position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(15,15,14,.55);color:#fff;font-size:15px;cursor:pointer;opacity:0;transition:opacity .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3}
.slot:hover .expand,.slot .expand:focus-visible{opacity:1}
@media (hover:none){.slot .expand{opacity:1}}
/* live code tiles */
.cu{position:relative;width:100%;border-radius:3px;overflow:hidden;background:#47134c;display:grid;place-items:center;cursor:pointer}
.cu .rings{position:absolute;top:50%;left:50%;width:108%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.cu .ring{position:absolute;inset:0;opacity:0;transform:scale(0)}
.cu .ring svg{width:100%;height:100%;display:block}
.cu .logo{position:relative;z-index:2;width:28%;height:auto;opacity:0}
.cu.run .ring{animation:cuRing 1s cubic-bezier(.25,1,.5,1) forwards}
.cu.run .ring:nth-child(2){animation-delay:.12s}.cu.run .ring:nth-child(3){animation-delay:.24s}.cu.run .ring:nth-child(4){animation-delay:.36s}
.cu.run .logo{animation:cuLogo .7s cubic-bezier(.25,1,.5,1) .7s forwards}
.cu.out .rings,.cu.out .logo{transition:opacity .6s;opacity:0!important}
@keyframes cuRing{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes cuLogo{from{opacity:0;transform:translateY(8%)}to{opacity:1;transform:none}}
.fm .w,.fm .body{position:absolute;display:block;pointer-events:none;will-change:transform,opacity,filter}
.fm .w{opacity:0;transform:translateY(16%)}
.fm.on .w{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.fm .body{opacity:0}
.lot{position:relative;width:100%;border-radius:3px;overflow:hidden;background:#243b33;cursor:pointer}
.lot .cells{position:absolute;inset:4%;display:grid;gap:2%}
.lot .cells>div{min-width:0;min-height:0}
.lot svg{display:block}
.lot-cycle .cells>.lot-slide{grid-area:1/1;opacity:0;transition:opacity .6s}
.lot-cycle .cells>.lot-slide.on{opacity:1}
.shirtbox{position:relative;width:100%;border-radius:3px;overflow:hidden;background:radial-gradient(60% 50% at 50% 46%,#1d1c1a 0%,#0e0e0d 70%,#0a0a09 100%)}
.shirtbox .stage{position:absolute;inset:0}
/* tee arrows sit at the middle of the left and right edges (Sam, 2026-10-12) */
.shirtbox .ui{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding-inline:12px;pointer-events:none}
.shirtbox .ui button:active{background:rgba(20,20,19,.9)}
.shirtbox .ui button{pointer-events:auto;width:32px;height:32px;border-radius:50%;border:1px solid rgba(236,235,231,.18);background:rgba(20,20,19,.5);color:var(--fg);font:15px var(--sans);cursor:pointer;display:grid;place-items:center;transition:border-color .25s,background .25s}
.shirtbox .ui button:hover{border-color:var(--accent);background:rgba(20,20,19,.8)}
.shirtbox .hint{position:absolute;top:12px;left:0;right:0;text-align:center;font:500 11px var(--mono);color:var(--faint);pointer-events:none;transition:opacity .6s}
/* Marketage stickers on a laptop lid. Apple logo brighter and a touch larger so it reads (Sam, 2026-10-12) */
.stkdesk{position:relative;width:100%;border-radius:3px;overflow:hidden;background:#6e6f72;user-select:none;-webkit-user-select:none}
.stkdesk .lid{position:absolute;inset:0;border-radius:inherit;touch-action:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f2f4'/%3E%3Cstop offset='.44' stop-color='%23a4a5a8'/%3E%3Cstop offset='.53' stop-color='%23494a4d'/%3E%3Cstop offset='1' stop-color='%23d6d7da'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E") center/10.6% auto no-repeat,radial-gradient(120% 90% at 28% 0%,rgba(255,255,255,.13),transparent 58%),linear-gradient(180deg,#7b7c7f 0%,#717275 55%,#68696c 100%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.22)}
.stkdesk .lid::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.22;mix-blend-mode:overlay;pointer-events:none;
 background: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='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.stkdesk .lid.grabbing{cursor:grabbing!important}
.stkdesk .hint{position:absolute;top:12px;left:0;right:0;text-align:center;font:500 11px var(--mono);color:rgba(255,255,255,.62);pointer-events:none;transition:opacity .6s;z-index:2}
.stk{position:absolute;pointer-events:none;filter:drop-shadow(0 .5px .5px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.2));transition:filter .3s}
.stk .bd{position:relative;width:100%;height:100%;transition:transform .25s var(--ease)}
.stk .face,.stk .fs,.stk .fm,.stk .back{position:absolute;inset:0}
.stk .face img{display:block;width:100%;height:100%}
.stk .gloss,.stk .back{-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.stk .gloss{position:absolute;inset:0;opacity:.55;transition:opacity .35s;background:radial-gradient(55% 75% at var(--sx,30%) var(--sy,15%),rgba(255,255,255,.16),transparent 62%),linear-gradient(118deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%)}
.stk.hov .gloss{opacity:1}
.stk.hov{filter:drop-shadow(0 .5px .5px rgba(0,0,0,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.24))}
.stk .fm{transform-origin:0 0}
.stk.held{filter:drop-shadow(0 16px 20px rgba(0,0,0,.42)) drop-shadow(0 4px 6px rgba(0,0,0,.28))}
.stk.held .bd{transform:scale(1.05)}
.stk.pop{transition:filter .3s,left .2s var(--ease),top .2s var(--ease)}
.stk.press .bd{transition-duration:.18s}
.au-host{position:relative;width:100%;border-radius:3px;overflow:hidden;background:#f2f3ff;cursor:pointer}
.lb .au-host{cursor:auto}
.live{position:relative;width:100%;border-radius:3px;overflow:hidden;background:#42071b;cursor:crosshair}
.prism{background:#0e0e0d center/cover no-repeat;cursor:default}
.vsn-host{background:#122125 center/cover no-repeat;cursor:pointer}
.lb .vsn-host{width:100%;height:100%;cursor:default}
.live canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* notes between pieces */
.note{border-top:1px solid var(--line);padding-top:12px;font-size:13px;line-height:1.5;color:var(--fg)}
.note b{display:block;font-weight:400;color:var(--muted);margin-bottom:4px}
.note .big{font:400 26px/1.1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block;margin:2px 0 4px}
.note a{border-bottom:1px solid var(--line);text-decoration:none}
.note a:hover{border-color:var(--muted)}
.note .then{display:block;color:var(--muted)}
.knifenote{cursor:pointer}
.knifenote img{display:block;width:100%;height:auto;border-radius:3px;margin:8px 0 8px;background:#1e1e1d;transition:filter .3s}
.knifenote:hover img{filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){.item{opacity:1;transform:none;transition:none}}

/* case study: hero and story pieces at true proportions */
.gm-hero video{display:block;width:100%;height:auto;border-radius:3px}
.gm-hero .gm-live{width:100%;border-radius:3px}
.gm-hero video{background:#1a1a19}
.gm-story-wrap .w-richtext{display:flex;flex-direction:column;gap:44px}
.gm-story-wrap .w-richtext>*{margin:0!important}
.gm-story-wrap h3{padding-top:8px;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.5}
.gm-story-wrap .w-richtext>h3+p{margin-top:-32px!important}
.gm-story-wrap .w-richtext>p+p{margin-top:-24px!important}
.gm-story-wrap p{max-width:600px;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--fg)}
.gm-story-wrap figure{margin:0!important;max-width:100%!important;width:100%!important}
.gm-story-wrap figure>div{width:100%!important}
.gm-story-wrap figure img,.gm-story-wrap figure video{display:block;width:100%!important;height:auto;max-width:none;border-radius:3px}
.gm-story-wrap .gm-live{width:100%!important;max-width:none;border-radius:3px}
.gm-story-wrap figure img,.gm-story-wrap figure video{background:#1a1a19}
/* case studies: no captions on images, and the role row is a plain list without its label (Sam, 2026-10-12) */
.gm-story-wrap figcaption,.gm-hero-cap{display:none}
.gm-meta-row:has([data-b="role"]){display:block}
.gm-meta-row:has([data-b="role"]) .gm-meta-k{display:none}
[data-b="role"]{white-space:pre-line}
[data-b="role"].gm-roles{white-space:normal;display:flex;flex-wrap:wrap;gap:6px}
.gm-role-pill{display:inline-block;padding-block:4px;padding-inline:10px;border:1px solid rgba(236,235,231,.18);border-radius:999px;font-size:12.5px;line-height:1.35;color:var(--fg)}
.gm-credit{display:none}
.gm-case [data-gm=opt].gm-off,.gm-info [data-gm=opt].gm-off{display:none}

/* archive: the row's still follows the pointer */
.gm-row{transition:color .2s}
@media (hover:hover){.gm-row:hover .gm-row-name{color:var(--accent)}
 .gm-row-cs{display:flex;align-items:center;color:var(--accent);opacity:0;transform:translateX(-14px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
 .gm-row:hover .gm-row-cs,.gm-row:focus-visible .gm-row-cs{opacity:1;transform:none}}
.gm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gm-peek{position:fixed;z-index:40;left:0;top:0;width:min(34vw,460px);aspect-ratio:16/10;pointer-events:none;will-change:transform}
.gm-peek-in{position:relative;width:100%;height:100%;overflow:hidden;border-radius:6px;clip-path:inset(50% 50% 50% 50% round 6px);transform:scale(.86);opacity:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transition:clip-path .6s var(--ease),transform .7s var(--ease),opacity .25s}
.gm-peek.on .gm-peek-in{clip-path:inset(0 0 0 0 round 6px);transform:none;opacity:1}
.gm-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .45s var(--ease),transform .9s var(--ease)}
.gm-peek img.on{opacity:1;transform:none}

/* viewer */
.lb{position:fixed;inset:0;z-index:70;background:rgba(10,10,9,.985);display:flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--fg);font:400 14px/1.5 var(--sans)}
.lb figure{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.lb figcaption{margin:0;font-size:13px;line-height:1.35;display:flex;gap:8px;flex-wrap:wrap}
.lb figcaption .w{color:var(--muted)}
.lb figcaption a{color:var(--muted);border-bottom:1px solid var(--line);text-decoration:none}
.lb figcaption a:hover{color:var(--fg)}
.lb-frame{position:relative;overflow:hidden;border-radius:18px;background:#141413;isolation:isolate;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.lb-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:50;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.45)}
.lb-frame>*{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;border-radius:0!important;margin:0}
.lb-frame>img,.lb-frame>video{display:block;object-fit:contain;background:#141413}
.lb-ctl{position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top,0px));right:14px;display:flex;gap:6px;transition:opacity .4s}
.lb-ctl button{all:unset;box-sizing:border-box;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);background:rgba(236,235,231,.05);border:1px solid rgba(236,235,231,.1);transition:color .25s,background .25s,border-color .25s}
.lb-ctl button:hover{color:var(--fg);background:rgba(236,235,231,.1);border-color:rgba(236,235,231,.22)}
.lb-ctl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lb-ctl .i,.lb.lb-full .lb-ctl .o{display:none}
.lb.lb-full .lb-ctl .i{display:inline}
.lb.lb-full .lb-frame{border-radius:0;box-shadow:none}
.lb.lb-full .lb-frame::after{display:none}
.lb.lb-full figcaption,.lb.lb-full .nav{display:none}
.lb.lb-full .lb-ctl{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px}
.lb.lb-full .lb-ctl button{color:#ecebe7;background:rgba(15,15,14,.55);border-color:rgba(236,235,231,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb.lb-full.idle .lb-ctl{opacity:0}
.lb .nav{all:unset;position:absolute;top:50%;transform:translateY(-50%);padding:16px 12px;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;transition:color .25s}
.lb .nav:hover{color:var(--fg)}
.lb .prev{left:clamp(2px,1.2vw,18px)}.lb .next{right:clamp(2px,1.2vw,18px)}
.lb-vid{background:#000;cursor:pointer}
.lb-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.lb-vc{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#ecebe7;font:500 12px var(--mono);cursor:default;transition:opacity .4s}
.lb-vid.idle .lb-vc{opacity:0}.lb-vid.idle{cursor:none}
.lb-vc button{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;flex:none;transition:background .2s}
.lb-vc button:hover{background:rgba(255,255,255,.14)}
.lb-vc svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:0}
.lb-vc input{flex:1;min-width:60px;margin:0;-webkit-appearance:none;appearance:none;height:16px;background:none;cursor:pointer}
.lb-vc input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#ecebe7 var(--p,0%),rgba(255,255,255,.28) var(--p,0%))}
.lb-vc input::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#ecebe7 var(--p,0%),rgba(255,255,255,.28) var(--p,0%))}
.lb-vc input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#fff;border:0}
.lb-vc input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}
.lb-vc .tm{font-variant-numeric:tabular-nums;color:rgba(236,235,231,.82);white-space:nowrap}
@media (hover:none),(max-width:640px){.lb .nav{top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:none}}
/* knife stage */
.kstage{position:fixed;inset:0;z-index:60;background:#0d0d0c;clip-path:inset(var(--ct,50%) var(--cr,50%) var(--cb,50%) var(--cl,50%) round 4px);transition:clip-path .75s var(--ease)}
.kstage.on{clip-path:inset(0 0 0 0 round 0)}
.kstage .kview{position:absolute;inset:0}
.kstage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 70% at 50% 46%,transparent 45%,rgba(6,6,5,.6) 100%)}
/* knife stage close: a plain circled X (Sam, 2026-10-12) */
.kclose{all:unset;box-sizing:border-box;position:absolute;z-index:2;top:calc(18px + env(safe-area-inset-top,0px));right:20px;inline-size:40px;block-size:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--fg);background:rgba(20,20,19,.5);border:1px solid rgba(236,235,231,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .25s,background .25s}
.kclose:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kclose:active{background:rgba(20,20,19,.85)}
@media (hover:hover) and (pointer:fine){.kclose:hover{border-color:var(--accent)}}
.khint{position:absolute;z-index:2;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font:400 12.5px var(--sans);color:var(--faint);pointer-events:none;transition:opacity 1.2s}
.khint.off{opacity:0}
@media (prefers-reduced-motion:reduce){.kstage,.gm-cta::before,.gm-cta-arrow,.khint{transition:none}}

/* page to page: same-site navigations crossfade, and the in-place swaps (case study, About) morph the tile or portrait */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--ease)}
::view-transition-old(gm-panel){animation:gmOutUp .25s ease-in both}
::view-transition-new(gm-panel){animation:gmInUp .45s var(--ease) .3s both}
::view-transition-old(gm-main){animation:gmFade .2s ease-in reverse both}
::view-transition-new(gm-main){animation:gmInUp .45s var(--ease) .35s both}
::view-transition-old(gm-hero),::view-transition-new(gm-hero),::view-transition-old(gm-portrait),::view-transition-new(gm-portrait){animation:none;mix-blend-mode:normal;height:100%;object-fit:cover}
::view-transition-old(gm-hero){display:none}
@keyframes gmOutUp{to{opacity:0;transform:translateY(-16px)}}
@keyframes gmInUp{from{opacity:0;transform:translateY(16px)}}
@keyframes gmFade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.15s!important;animation-delay:0s!important}}

/* case study panel: a faint way back, room above the site link, a quiet Prisma credit */
.gm-back{color:var(--faint)!important;transition:color .25s}.gm-back:hover{color:var(--fg)!important}
.gm-site-link{margin-top:14px}
.gm-info .gm-credit{margin-top:14px;color:var(--faint);font-size:13px}

/* About: the portrait travels between the sidebar and the page */
.gm-fly{position:fixed;z-index:80;margin:0;object-fit:cover;filter:grayscale(100%);pointer-events:none}
.gm-side .gm-portrait{cursor:pointer}
/* résumé download box in the About sidebar */
.gm-resume-box{transition:border-color .3s,background-color .3s}
.gm-resume-box:hover{border-color:rgba(236,235,231,.32)!important;background-color:rgba(236,235,231,.03)}
.gm-rb-icon{transition:border-color .3s,background-color .3s,color .3s}
.gm-rb-icon svg{transition:transform .45s var(--ease)}
.gm-resume-box:hover .gm-rb-icon{border-color:var(--accent)!important;background-color:var(--accent);color:var(--ink)!important}
.gm-resume-box:hover .gm-rb-icon svg{transform:translateY(2px)}
.gm-rb-meta,.gm-meta-k,.gm-label,.gm-xp-date{font-family:var(--mono)!important}
.gm-portrait,.gm-about-portrait,.gm-fly{display:block}
canvas.gm-portrait{width:72px;height:72px}
/* Get in touch: the confirmation slides in inside the button */
.gm-cta-a,.gm-cta-b{display:inline-flex;align-items:center;column-gap:10px;transition:transform .55s var(--ease),opacity .4s var(--ease)}
.gm-cta-b{position:absolute;inset:0;justify-content:center;column-gap:8px;transform:translateY(110%);opacity:0;color:var(--ink)}
.gm-cta.gm-copied{color:var(--ink)!important;border-color:var(--accent)!important}
.gm-cta.gm-copied::before{transform:scaleX(1)}
.gm-cta.gm-copied .gm-cta-a{transform:translateY(-110%);opacity:0}
.gm-cta.gm-copied .gm-cta-b{transform:none;opacity:1}
.gm-cta-b svg{transform:scale(.4);opacity:0;transition:transform .5s var(--ease) .15s,opacity .3s .15s}
.gm-cta.gm-copied .gm-cta-b svg{transform:none;opacity:1}
/* a subtle moving grain over everything */
body::after{content:"";position:fixed;inset:-60px;z-index:65;pointer-events:none;opacity:.055;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
 animation:gmGrain .8s steps(5) infinite}
@keyframes gmGrain{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-26px)}60%{transform:translate(-12px,-8px)}80%{transform:translate(26px,20px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
.gm-meta-link{transition:border-color .25s}.gm-meta-link:hover{border-bottom-color:#8b8a85!important}
/* case study pieces settle in as they scroll into view */
.gm-rv{opacity:0;transform:translateY(22px);clip-path:inset(0 0 6% 0);transition:opacity .9s var(--ease),transform 1s var(--ease),clip-path 1s var(--ease)}
.gm-rv.in{opacity:1;transform:none;clip-path:inset(0 0 -2% 0)}
/* images fade in once they arrive instead of popping */
img.gm-fade{opacity:0;transition:opacity .5s var(--ease)}
img.gm-fade.gm-loaded{opacity:1}
video.gm-vfade{opacity:0;transition:opacity .45s var(--ease)}
video.gm-vfade.gm-ready{opacity:1}
/* first visit: hold the sidebar until the intro plays (shows anyway after 2.5s if the script fails) */
@keyframes gmShow{to{opacity:1}}
/* links: no resting underline. On hover a thin ray of light draws in from the left with a soft glow, and leaving sends it out to the right (Sam, 2026-10-17) */
.gm-link,.gm-meta-link,.gm-site-link{position:relative;border-bottom:0!important;padding-bottom:2px;background:none!important;transition:color .25s}
.gm-link::before,.gm-meta-link::before,.gm-site-link::before{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;pointer-events:none;
 background:linear-gradient(90deg,oklch(.9 .03 90 / .35),oklch(.95 .03 92) 22%,oklch(.97 .02 95));box-shadow:0 0 4px oklch(.9 .08 92 / .28);
 transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s cubic-bezier(.65,0,.25,1)}
@media (prefers-reduced-motion:reduce){.gm-rv{opacity:1;transform:none;clip-path:none;transition:none}img.gm-fade{opacity:1;transition:none}}

@media (hover:hover) and (pointer:fine){.gm-mail:hover{color:var(--muted)}
 .gm-link:hover::before,.gm-meta-link:hover::before,.gm-site-link:hover::before,.gm-link:focus-visible::before{transform:scaleX(1);transform-origin:0 50%}
 .gm-bio a:hover{background-position:0 0;text-decoration-color:transparent}
 .gm-bio a:hover::before{transform:scaleX(1);transform-origin:0 50%}}
@media (width < 720px){.gm-leak{inline-size:min(110vw,520px);block-size:min(110vw,520px)}
 .gm-leak-x{display:none}
}

/* ISB case hero: the 2:3 slider sits centered at a readable size instead of filling the column */
.gm-hero .slider{width:min(100%,calc(84svh * 2 / 3));margin-inline:auto}
@media (prefers-reduced-motion:reduce){.gm-cycle img{transform:none;transition:opacity 1s}}
/* touch: small links get a 44px hit area without changing the layout */
@media (pointer:coarse){
 .gm-links a,.gm-back,.gm-fine a,.gm-meta-v{position:relative}
 .gm-links a::after,.gm-back::after,.gm-fine a::after,a.gm-meta-v::after{content:"";position:absolute;inset:-11px -8px}
}
/* first visit: the portrait develops and the words come into focus as soon as this stylesheet lands (the script only
   develops the work). gm-pre is set in the head on the first visit of a session and never with reduced motion (Sam, 2026-10-17) */
@keyframes gmFocus{from{opacity:0;filter:blur(7px);translate:0 6px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes gmDevelop{from{opacity:0;filter:blur(10px) brightness(.35);scale:1.04}to{opacity:1;filter:blur(0) brightness(1);scale:1}}
.gm-pre canvas.gm-portrait{animation:gmDevelop 1.4s cubic-bezier(.16,1,.3,1) .06s both}
.gm-pre img.gm-portrait{opacity:0;animation:gmShow 0s 2.5s forwards}
.gm-pre .gm-info>*,.gm-pre .gm-fine{animation:gmFocus 1.1s cubic-bezier(.16,1,.3,1) .18s both}
.gm-pre .gm-info>:nth-child(2){animation-delay:.27s}.gm-pre .gm-info>:nth-child(3){animation-delay:.36s}.gm-pre .gm-info>:nth-child(4){animation-delay:.45s}.gm-pre .gm-fine{animation-delay:.54s}
@media (prefers-reduced-motion:reduce){.gm-link::before,.gm-meta-link::before,.gm-site-link::before,.gm-bio a::before{transition:opacity .3s}.gm-bio a{transition:none}}
/* About: the intro text sits centered on the portrait */
.gm-about .gm-intro{align-items:center}