/* Jessie Megan portfolio · shared styles */
:root{
  --bg:#151412; --surface:#1c1b18; --surface-2:#22211d;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.035);
  --ink:#f1eee8; --ink-2:#a9a59d; --ink-3:#6e6a63;
  --seal:#e5484d; --seal-soft:rgba(229,72,77,.14);
  --font:"Instrument Sans",-apple-system,system-ui,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(20px,3vw,40px);
  --nav-h:76px;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:120px 120px;background-position:-1px -1px;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;}
body.leaving{animation:leave .22s ease forwards}
@keyframes leave{to{opacity:0}}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--seal);color:#fff}

/* layout */
.wrap{width:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}
main{flex:1;display:flex;flex-direction:column}
.one-screen{justify-content:center}

/* nav */
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.nav .seal{display:block;width:40px;height:40px;transition:transform .5s var(--ease)}
.nav .seal img{width:100%;height:100%}
.nav .seal:hover{transform:rotate(-6deg) scale(1.06)}
.nav .seal:active{transform:rotate(-6deg) scale(.96)}
.links{display:flex;gap:clamp(18px,3vw,32px);font-size:15px}
.links a{color:var(--ink-2);text-decoration:none;position:relative;padding:6px 0;transition:color .25s}
.links a:hover{color:var(--ink)}
.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-4px;width:5px;height:5px;border-radius:50%;background:var(--seal);transform:translateX(-50%)}
.links a::before{content:"";position:absolute;left:50%;bottom:-4px;width:5px;height:5px;border-radius:50%;background:var(--seal);transform:translateX(-50%) scale(0);transition:transform .3s var(--ease)}
.links a:not([aria-current]):hover::before{transform:translateX(-50%) scale(1);opacity:.5}

/* type */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.display{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.03em;line-height:1.08}
.h-page{font-size:clamp(26px,3vw,36px)}
.h-sec{font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:56ch;margin:0}
.lead b{color:var(--ink);font-weight:500}
p{color:var(--ink-2);margin:0 0 1em}
.meta{font-size:13px;color:var(--ink-3);letter-spacing:.01em;font-weight:500}
a.inline{color:var(--ink);text-decoration:none;background:linear-gradient(var(--seal),var(--seal)) no-repeat 0 100%/0 1px;padding-bottom:1px;transition:background-size .35s var(--ease)}
a.inline:hover{background-size:100% 1px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:9px 16px;color:var(--ink);text-decoration:none;font-size:14px;transition:border-color .3s,transform .3s var(--ease);background:transparent}
.btn:hover{border-color:var(--seal);transform:translateY(-1px)}
.btn .arr{color:var(--seal);transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* hero */
.hero{padding-block:clamp(24px,5vh,56px) clamp(24px,4vh,44px)}
.hero .hello{display:flex;align-items:baseline;gap:.25em}
.wave{display:inline-block;transform-origin:70% 70%;}
.wave.go{animation:wave 1.6s .6s var(--ease) 1}
@keyframes wave{0%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(14deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(8deg)}100%{transform:rotate(0)}}
.hero .lead{margin-top:18px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);padding-bottom:clamp(20px,4vh,48px)}
.card{display:block;text-decoration:none;color:inherit;transition:transform .45s var(--ease);will-change:transform}
.card .img{aspect-ratio:3/2;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--surface);filter:brightness(.8);transition:filter .45s var(--ease);position:relative}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card:hover .img{filter:brightness(1)}
.card:hover .img img{transform:scale(1.03)}
.card .title{margin-top:14px;font-size:17px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card .arr{color:var(--seal);opacity:0;transform:translateX(-6px);transition:all .35s var(--ease)}
.card:hover .arr{opacity:1;transform:none}
.card .sub{font-size:14px;color:var(--ink-3);margin-top:3px}
.tag{display:inline-block;font-size:11.5px;letter-spacing:.01em;color:var(--seal);background:var(--seal-soft);padding:3px 8px;border-radius:4px;font-weight:500;white-space:nowrap}
.card.soon{cursor:default}
.card.soon:hover{transform:none}
.card.soon:hover .img{filter:brightness(.88)}
.card.soon.wiggle{animation:wiggle .5s var(--ease)}
@keyframes wiggle{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-.6deg)}40%{transform:translateX(5px) rotate(.6deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* placeholder covers until real images land */
.ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:13px;letter-spacing:.01em;background:
  radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.05),transparent 60%),var(--surface)}
.ph b{position:absolute;right:16px;bottom:8px;font-size:72px;font-weight:600;letter-spacing:-.04em;color:rgba(255,255,255,.05);line-height:1}

/* footer */
footer{margin-top:auto;border-top:1px solid var(--line);padding-block:clamp(22px,3.4vh,36px) clamp(18px,2.6vh,28px)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;align-items:start}
.foot .big{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;font-size:14px;display:grid;gap:6px}
.foot ul .meta{margin-bottom:4px}
.foot ul a{color:var(--ink-2);text-decoration:none;transition:color .25s}
.foot ul a:hover{color:var(--ink)}
.foot .bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:4px;font-size:13px;color:var(--ink-3)}
.stamp{width:26px;height:26px;display:inline-block;opacity:0;transform:scale(1.6) rotate(-8deg)}
.stamp img{width:100%;height:100%}
.stamp.in{animation:stamp .55s var(--ease) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(1.6) rotate(-8deg)}70%{opacity:1;transform:scale(.94) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}

/* reveal motion */
.r{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}.wave.go,.stamp.in{animation:none;opacity:1;transform:none}}

/* phone */
@media (max-width:820px){
  :root{--nav-h:64px}
  .nav .seal{width:34px;height:34px}
  .cards{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot .big{grid-column:1/-1}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;gap:22px}
  .card .img{aspect-ratio:16/10}
  .one-screen{justify-content:flex-start}
  .hero{padding-top:28px}
  .foot{gap:20px}
}

/* short laptop screens: keep the main pages to one screen */
@media (min-width:821px) and (max-height:780px){
  :root{--nav-h:64px}
  .display{font-size:clamp(30px,3.8vw,44px)}
  .hero{padding-block:14px 22px}
  .hero .lead{margin-top:12px}
  .cards{padding-bottom:20px}
  .card .img{aspect-ratio:16/9}
  .card .title{margin-top:10px;font-size:16px}
  footer{padding-block:16px 12px}
  .foot{gap:20px}
  .foot ul{gap:3px}
  .foot .bottom{padding-top:10px}
}

/* about */
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;padding-block:clamp(16px,3vh,36px) clamp(16px,3vh,40px)}
.about .story{display:grid;grid-template-columns:150px 1fr;gap:clamp(18px,2.4vw,32px);align-items:start}
.photo{width:150px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--surface);position:relative;transition:transform .5s var(--ease)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo:hover{transform:rotate(-2deg) scale(1.02)}
.about h1{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;margin-bottom:12px}
.about .story p{font-size:15.5px;line-height:1.65;margin-bottom:.85em}
.about .story p:last-child{margin-bottom:0}
.lists{display:grid;gap:clamp(16px,2.4vh,26px)}
.list .meta{display:block;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.list ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14.5px}
.list li{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2)}
.list li b{font-weight:500;color:var(--ink)}
.list li span{color:var(--ink-3);white-space:nowrap;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:4px;padding:5px 11px;font-size:13.5px;color:var(--ink-2);transition:transform .35s var(--ease),border-color .3s,color .3s;cursor:default}
.chip:hover{transform:translateY(-2px) rotate(-1.5deg);border-color:var(--seal);color:var(--ink)}
@media (min-width:821px) and (max-height:780px){
  .about{padding-block:8px 16px;gap:clamp(24px,4vw,56px)}
  .about .story p{font-size:14.5px;line-height:1.55}
  .photo{width:120px}
  .about .story{grid-template-columns:120px 1fr}
  .lists{gap:12px}
  .list ul{gap:2px;font-size:13.5px}
  .chip{padding:3px 9px;font-size:12.5px}
}
@media (max-width:820px){
  .about{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .about .story{grid-template-columns:1fr}
  .photo{width:140px}
}

/* playground */
.play-page{height:100vh;height:100dvh}
.play-page main{min-height:0}
.play-page footer{flex-shrink:0}
.play{padding-block:clamp(10px,2vh,24px) clamp(12px,2vh,20px);gap:14px}
.play-head .lead{margin-top:6px;font-size:16px}
.filters{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.filters .chip{background:transparent;font:inherit;font-size:13px;padding:5px 12px;cursor:pointer;color:var(--ink-2)}
.filters .chip.on{border-color:var(--seal);color:var(--ink)}
.frame{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.18);padding:14px;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;position:relative;
  mask-image:linear-gradient(#000 92%,transparent);-webkit-mask-image:linear-gradient(#000 92%,transparent)}
.frame:focus-visible{outline:1px solid var(--seal)}
.masonry{columns:5;column-gap:12px}
.tile{margin:0 0 12px;break-inside:avoid;border-radius:6px;overflow:hidden;position:relative;background:var(--surface);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .4s var(--ease)}
.masonry.in .tile{opacity:1;transform:none}
.tile img{width:100%;height:auto;display:block;filter:brightness(.82);transition:filter .45s var(--ease),transform .8s var(--ease)}
.tile:hover img{filter:brightness(1);transform:scale(1.03)}
.tile figcaption{position:absolute;left:10px;bottom:8px;font-size:11px;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:4px;opacity:0;transform:translateY(4px);transition:all .35s var(--ease);backdrop-filter:blur(6px)}
.tile:hover figcaption{opacity:1;transform:none}
.tile.hide{display:none}
@media (max-width:1100px){.masonry{columns:4}}
@media (max-width:820px){
  .play-page{height:auto}
  .frame{overflow:visible;mask-image:none;-webkit-mask-image:none;padding:0;border:0;background:transparent}
  .masonry{columns:3}
}
@media (max-width:560px){.masonry{columns:2;column-gap:10px}.tile{margin-bottom:10px}}

/* case study */
.cs-top{padding-block:clamp(16px,3vh,32px) 0}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3);text-decoration:none;transition:color .25s}
.back:hover{color:var(--ink)}
.back span{display:inline-block;transition:transform .3s var(--ease)}
.back:hover span{transform:translateX(-3px)}
.cs-hero{padding-block:clamp(20px,4vh,40px) clamp(20px,3vh,32px);max-width:860px}
.cs-hero .meta{margin-bottom:14px;display:block}
.cs-hero h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.03em;line-height:1.08}
.cs-hero .lead{margin-top:18px;max-width:60ch}
.cover{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface);aspect-ratio:21/9;position:relative}
.cover img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding-block:clamp(22px,3.4vh,36px);border-bottom:1px solid var(--line);margin-bottom:clamp(28px,5vh,56px)}
.facts .meta{display:block;margin-bottom:6px}
.facts div{font-size:14.5px;color:var(--ink-2)}
.facts div b{color:var(--ink);font-weight:500}
.cs-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-bottom:clamp(40px,8vh,96px)}
.toc{position:sticky;top:32px;font-size:13.5px;display:grid;gap:9px}
.toc .meta{margin-bottom:6px}
.toc a{color:var(--ink-3);text-decoration:none;padding-left:16px;position:relative;transition:color .25s;line-height:1.4}
.toc a::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--ink-3);transition:width .3s var(--ease),background .3s}
.toc a.on,.toc a:hover{color:var(--ink)}
.toc a.on::before{width:10px;background:var(--seal)}
.prose{max-width:720px}
.prose section{margin-bottom:clamp(44px,8vh,88px);scroll-margin-top:32px}
.prose h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.025em;margin-bottom:18px}
.prose h2 .n{color:var(--seal);font-size:13px;letter-spacing:.08em;font-weight:500;display:block;margin-bottom:10px}
.prose h3{font-size:19px;font-weight:500;letter-spacing:-.01em;margin:32px 0 10px}
.prose p{font-size:17px;line-height:1.7;margin-bottom:1.1em}
.prose p b{color:var(--ink);font-weight:500}
.prose ul{color:var(--ink-2);font-size:16.5px;line-height:1.65;padding-left:20px;margin:0 0 1.2em}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--seal)}
blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:2px solid var(--seal);color:var(--ink);font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.015em;line-height:1.4}
blockquote small{display:block;margin-top:8px;font-size:13px;color:var(--ink-3);font-weight:400;letter-spacing:0}
.quotes{display:grid;gap:10px;margin:8px 0 24px}
.quotes div{border:1px solid var(--line);border-radius:6px;padding:12px 16px;font-size:15.5px;color:var(--ink);background:var(--surface)}
.quotes div::before{content:"“";color:var(--seal);margin-right:4px}
figure.shot{margin:26px 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
figure.shot .ph{position:relative;aspect-ratio:16/10}
figure.shot img{width:100%;height:auto}
figure.shot figcaption{padding:10px 14px;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line)}
figure.shot.wide{max-width:none;width:min(100%,960px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two figure.shot{margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 28px}
.stat{border:1px solid var(--line);border-radius:6px;padding:18px 18px 16px;background:var(--surface)}
.stat b{display:block;font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.moment{display:grid;grid-template-columns:44px 1fr;gap:16px;margin-top:30px}
.moment .k{color:var(--seal);font-size:13px;letter-spacing:.08em;font-weight:500;padding-top:6px}
.moment h3{margin-top:0}
.next{border-top:1px solid var(--line);padding-top:26px;margin-top:10px}
.next a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--ink);font-size:18px;font-weight:500;gap:16px}
.next a small{display:block;color:var(--ink-3);font-size:12.5px;letter-spacing:.08em;font-weight:500;margin-bottom:6px}
.next a .arr{color:var(--seal);transition:transform .3s var(--ease)}
.next a:hover .arr{transform:translateX(4px)}
.note{border:1px dashed var(--line);border-radius:6px;padding:12px 16px;font-size:14px;color:var(--ink-3);margin:20px 0}
@media (max-width:980px){.facts{grid-template-columns:repeat(3,1fr)}.cs-body{grid-template-columns:1fr;gap:20px}.toc{position:static;display:flex;flex-wrap:wrap;gap:6px 18px;padding-bottom:16px;border-bottom:1px solid var(--line)}.toc .meta{width:100%}}
@media (max-width:560px){.facts{grid-template-columns:1fr 1fr;gap:14px}.stats{grid-template-columns:1fr}.two{grid-template-columns:1fr}.cover{aspect-ratio:5/3}.moment{grid-template-columns:1fr;gap:4px}.prose p{font-size:16px}}

/* small footer */
footer.small{padding-block:16px 18px}
.foot-s{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13.5px;color:var(--ink-3);flex-wrap:wrap}
.foot-s .r{display:flex;align-items:center;gap:20px}
.foot-s a{color:var(--ink-2);text-decoration:none;transition:color .25s}
.foot-s a:hover{color:var(--ink)}
.foot-s .stamp{margin-left:4px}
/* one-line hero + sandbox head */
@media (min-width:821px){.hero .lead,.play-head .lead{white-space:nowrap;max-width:none}.play-head h1{white-space:nowrap}}
.hero .lead{font-size:clamp(16px,1.4vw,20px)}
.play-head h1{font-size:clamp(24px,2.6vw,34px)}
/* real covers */
.card .img img,.cover img{filter:none}
.cover{aspect-ratio:2/1}
figure.shot img{background:#fff}
figure.shot.dark img{background:var(--surface)}
.moment .k{letter-spacing:.02em}
.prose h2 .n{letter-spacing:.02em}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:8px}

/* one-line headings on the three main pages */
h1.line{font-size:clamp(22px,2.15vw,31px);font-weight:600;letter-spacing:-.025em;line-height:1.25;max-width:none}
.about h1.line{margin-bottom:12px}
.play-head h1.line{white-space:normal}
@media (min-width:1100px){.hero h1.line,.play-head h1.line{white-space:nowrap}}
.hero{padding-block:clamp(20px,4vh,44px) clamp(20px,3.5vh,36px)}

/* consistent gap under the nav on every page, content starts at the top */
:root{--top-gap:clamp(28px,5vh,48px)}
.one-screen{justify-content:flex-start}
.hero,.about,.play,.cs-top{padding-top:var(--top-gap)!important}
.play{gap:14px}
footer{overflow:hidden}
@media (max-width:560px){.one-screen{justify-content:flex-start}}

/* experience glimpse on the homepage */
.glimpse{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;font-size:14px;color:var(--ink-2)}
.glimpse b{font-weight:500;color:var(--ink-3);margin-right:4px}
.glimpse .sep{width:1px;height:14px;background:var(--line)}
.glimpse .place{color:var(--ink);font-weight:500;border:1px solid var(--line);border-radius:4px;padding:4px 11px;display:inline-flex;gap:6px;align-items:baseline;transition:border-color .3s,transform .3s var(--ease)}
.glimpse .place small{color:var(--ink-3);font-weight:400;font-size:12px}
.glimpse .place:hover{border-color:var(--seal);transform:translateY(-1px)}

/* resume: the seal stamps down, then the paper slides up */
.resume-veil{position:fixed;inset:0;z-index:50;background:rgba(21,20,18,.92);backdrop-filter:blur(8px);display:grid;place-items:center;animation:veilIn .3s ease both}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.veil-stamp{position:absolute;width:120px;height:120px;opacity:0;transform:scale(2.4) rotate(-14deg);animation:stampDown .7s .15s var(--ease) forwards}
.veil-stamp img{width:100%;height:100%}
@keyframes stampDown{0%{opacity:0;transform:scale(2.4) rotate(-14deg)}60%{opacity:1;transform:scale(.92) rotate(-5deg)}80%{transform:scale(1.02) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
.resume-veil.paper .veil-stamp{animation:stampAway .4s var(--ease) forwards}
@keyframes stampAway{to{opacity:0;transform:scale(.6) rotate(-6deg)}}
.veil-paper{width:min(920px,92vw);height:min(1200px,88vh);background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(60px) scale(.98);opacity:0;transition:transform .6s var(--ease),opacity .5s var(--ease);position:relative}
.resume-veil.paper .veil-paper{transform:none;opacity:1}
.veil-paper iframe{width:100%;height:100%;border:0;display:block}
.veil-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.08);color:#111;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.veil-close:hover{background:var(--seal);color:#fff}
@media (max-width:820px){.glimpse{font-size:13px}.glimpse .sep{display:none}}

/* serif for page titles and case study section titles */
h1.line{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.7vw,40px);letter-spacing:-.01em;line-height:1.2}
.cs-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,64px);letter-spacing:-.01em;line-height:1.08}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,38px);letter-spacing:-.005em}
.prose h2 .n{font-family:var(--font)}
.resume-veil[hidden]{display:none!important}

/* ---- round 4: gradient cover cards, 2 columns, hover summaries, italic title ---- */
.cards{grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.card .img{aspect-ratio:2.35/1;display:grid;place-items:center;filter:none;border:1px solid var(--line);position:relative;isolation:isolate;overflow:hidden}
.card .img::before{content:"";position:absolute;inset:0;background:var(--grad);z-index:0}
.card .img::after{content:"";position:absolute;inset:-50%;z-index:1;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");}
.card .img img{position:relative;z-index:2;width:auto;height:auto;max-height:76%;max-width:82%;border:3px solid #fff;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}

.card:hover .img{filter:none}
.g-seatgeek{--grad:linear-gradient(135deg,#2c1c1e 0%,#3d2723 55%,#2a1f24 100%)}
.g-ibm{--grad:linear-gradient(135deg,#1b2234 0%,#26324b 55%,#1c2538 100%)}
.g-sap{--grad:linear-gradient(135deg,#1b2a2a 0%,#25403a 55%,#1e2d30 100%)}
.g-foreal{--grad:linear-gradient(135deg,#292038 0%,#3b2d4e 55%,#2a2339 100%)}
@media (min-width:821px) and (max-height:780px){.card .img{aspect-ratio:2.7/1}}
@media (max-width:820px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.card .img{aspect-ratio:1.8/1}}
h1.line em{font-style:italic;font-weight:400}
/* company pills that open up on hover */
.glimpse .place{cursor:default;border-radius:4px;overflow:hidden;white-space:nowrap}
.glimpse .place .more{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:baseline;color:var(--ink-2);font-weight:400;font-size:13px;margin-left:0;transition:max-width .55s var(--ease),opacity .35s var(--ease) .1s,margin-left .55s var(--ease)}
.glimpse .place:hover .more,.glimpse .place:focus-within .more{max-width:420px;opacity:1;margin-left:10px}
.glimpse .place:hover{transform:none;border-color:var(--seal)}
/* foreal short page */
.short{max-width:860px;margin:0 auto}
.short .prose{max-width:none}
.video{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:16/9;margin:8px 0 28px}
.video iframe,.video video{width:100%;height:100%;border:0;display:block}
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 28px}
.screens img{width:100%;height:auto}
@media (max-width:560px){.screens{grid-template-columns:1fr 1fr}}
/* fit four cards on one laptop screen */
.card .img{aspect-ratio:2.8/1}
.hero{padding-bottom:clamp(16px,2.6vh,26px)!important}
.cards{padding-bottom:16px}
.card .title{margin-top:10px;font-size:16px}
@media (min-width:821px) and (max-height:780px){.card .img{aspect-ratio:3.2/1}.glimpse{margin-top:10px}}
/* mockup sized against the frame, always inside it */
.card .img img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:82%;max-height:74%}
.card .img{aspect-ratio:3/1}
.glimpse{margin-top:12px}
@media (min-width:821px) and (max-height:780px){.card .img{aspect-ratio:3.6/1}.hero{padding-bottom:12px!important}}

/* neon, multi-color gradients (grain stays on top) */
.card .img::before{background:var(--grad),#141018}
.card .img::after{opacity:.55}
.g-seatgeek{--grad:radial-gradient(60% 90% at 18% 22%,rgba(255,61,129,.85),transparent 62%),radial-gradient(55% 80% at 82% 78%,rgba(255,138,61,.8),transparent 60%),radial-gradient(50% 70% at 62% 12%,rgba(124,58,237,.7),transparent 60%),radial-gradient(40% 60% at 40% 90%,rgba(244,63,94,.55),transparent 60%)}
.g-ibm{--grad:radial-gradient(60% 90% at 15% 25%,rgba(59,130,246,.85),transparent 62%),radial-gradient(55% 80% at 85% 75%,rgba(34,211,238,.8),transparent 60%),radial-gradient(50% 70% at 60% 10%,rgba(139,92,246,.7),transparent 60%),radial-gradient(40% 60% at 40% 95%,rgba(16,185,129,.45),transparent 60%)}
.g-sap{--grad:radial-gradient(60% 90% at 18% 22%,rgba(20,184,166,.85),transparent 62%),radial-gradient(55% 80% at 82% 78%,rgba(163,230,53,.75),transparent 60%),radial-gradient(50% 70% at 62% 12%,rgba(56,189,248,.7),transparent 60%),radial-gradient(40% 60% at 40% 95%,rgba(250,204,21,.4),transparent 60%)}
.g-foreal{--grad:radial-gradient(60% 90% at 18% 22%,rgba(168,85,247,.85),transparent 62%),radial-gradient(55% 80% at 82% 78%,rgba(236,72,153,.8),transparent 60%),radial-gradient(50% 70% at 62% 12%,rgba(99,102,241,.75),transparent 60%),radial-gradient(40% 60% at 40% 95%,rgba(34,211,238,.45),transparent 60%)}
.card .img img{box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.2)}

/* experiment: column layout (left intro column, work grid on the right) */
.cols-page main{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;padding-top:var(--top-gap)}
.cols-page .intro{position:sticky;top:32px}
.cols-page .intro h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.2;letter-spacing:-.01em;margin:0 0 16px}
.cols-page .intro h1 em{font-style:italic}
.cols-page .intro p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.cols-page .intro .glimpse{flex-direction:column;align-items:flex-start;gap:10px;margin-top:6px}
.cols-page .intro .glimpse .place{align-self:flex-start}
.cols-page .intro .btns{display:flex;gap:10px;margin-top:22px}
.cols-page .cards{grid-template-columns:1fr 1fr;padding-bottom:40px}
.cols-page .card .img{aspect-ratio:4/3.4}
.cols-page .card .img img{max-height:70%;max-width:80%}
@media (max-width:980px){.cols-page main{grid-template-columns:1fr}.cols-page .intro{position:static}}

/* ================= column layout: sticky left rail + content ================= */
.rail-page{display:block}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.rail{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:26px;padding-block:var(--top-gap) 28px}
.rail .seal{display:block;width:40px;height:40px;transition:transform .5s var(--ease)}
.rail .seal img{width:100%;height:100%}
.rail .seal:hover{transform:rotate(-6deg) scale(1.06)}
.vnav{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.vnav a{position:relative;padding-left:18px;font-size:15px;color:var(--ink-2);text-decoration:none;transition:color .25s,padding-left .3s var(--ease);width:max-content}
.vnav a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--seal);transform:translateY(-50%) scale(0);transition:transform .3s var(--ease)}
.vnav a:hover{color:var(--ink)}
.vnav a:hover::before{transform:translateY(-50%) scale(.6)}
.vnav a[aria-current="page"]{color:var(--ink)}
.vnav a[aria-current="page"]::before{transform:translateY(-50%) scale(1)}
.rail-body{flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding-right:4px}
.rail-body::-webkit-scrollbar{display:none}
.rail-body h1.line{font-size:clamp(26px,2.2vw,32px);line-height:1.22;margin:0 0 14px}
.rail-body p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.rail-body .glimpse{flex-direction:column;align-items:flex-start;gap:9px;margin-top:4px;font-size:13.5px}
.rail-body .glimpse .place{align-self:flex-start}
.rail-body .filters{margin-top:8px}
.rail-body .back{margin-bottom:22px}
.rail-body .toc{position:static}
.rail-foot{font-size:13px;color:var(--ink-3);display:grid;gap:8px}
.rail-foot a{color:var(--ink-2);text-decoration:none;margin-right:16px;transition:color .25s}
.rail-foot a:hover{color:var(--ink)}
.rail-foot .muted{display:flex;align-items:center;gap:10px}
.rail-foot .stamp{width:22px;height:22px}
.content{padding-block:var(--top-gap) 56px;min-width:0}
.mobile-foot{display:none}
/* home */
.rail-page .cards{grid-template-columns:1fr 1fr;padding-bottom:0}
.rail-page .card .img{aspect-ratio:4/3.3}
.rail-page .card .img img{max-height:70%;max-width:80%}
/* about */
.about-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.about-grid .photo{width:100%;max-width:280px}
.about-grid .lists{gap:26px}
.about-grid .list ul{gap:6px;font-size:15px}
/* sandbox */
.sandbox-page .masonry{columns:3;column-gap:14px}
.sandbox-page .tile{margin-bottom:14px}
/* case studies */
.rail-page .cs-hero{padding-top:0;max-width:800px}
.rail-page .cs-hero h1{font-size:clamp(34px,4.2vw,56px)}
.rail-page .prose{max-width:760px}
.rail-page .facts{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.rail-page .facts{grid-template-columns:repeat(3,1fr)}}
/* phones and narrow tablets: the rail becomes a normal block on top */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:8px}
  .rail{position:static;height:auto;gap:18px;padding-bottom:0}
  .rail-top{display:flex;align-items:center;justify-content:space-between}
  .vnav{flex-direction:row;gap:18px;margin-top:0}
  .vnav a{padding-left:0}
  .vnav a::before{left:50%;top:auto;bottom:-8px;transform:translateX(-50%) scale(0)}
  .vnav a:hover::before{transform:translateX(-50%) scale(.6)}
  .vnav a[aria-current="page"]::before{transform:translateX(-50%) scale(1)}
  .rail-body{overflow:visible}
  .rail-foot{display:none}
  .content{padding-top:8px}
  .mobile-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:40px;font-size:13.5px;color:var(--ink-3)}
  .mobile-foot a{color:var(--ink-2);text-decoration:none}
  .about-grid{grid-template-columns:1fr}
  .about-grid .photo{max-width:200px}
  .sandbox-page .masonry{columns:2;column-gap:10px}
  .rail-page .cards{grid-template-columns:1fr}
  .rail-page .card .img{aspect-ratio:16/10}
  .rail-body .glimpse{flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* gradients: three colors each, softer and blurrier */
.card .img::before{background:var(--grad),#141018;inset:-30%;filter:blur(38px)}
.card .img::after{opacity:.5}
.g-seatgeek{--grad:radial-gradient(70% 90% at 15% 20%,rgba(255,61,129,.8),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(255,138,61,.75),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(124,58,237,.6),transparent 70%)}
.g-ibm{--grad:radial-gradient(70% 90% at 15% 25%,rgba(59,130,246,.8),transparent 70%),radial-gradient(70% 90% at 85% 75%,rgba(34,211,238,.7),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(139,92,246,.6),transparent 70%)}
.g-sap{--grad:radial-gradient(70% 90% at 15% 20%,rgba(20,184,166,.8),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(163,230,53,.65),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(56,189,248,.6),transparent 70%)}
.g-foreal{--grad:radial-gradient(70% 90% at 15% 20%,rgba(168,85,247,.8),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(236,72,153,.7),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(99,102,241,.6),transparent 70%)}

/* ================= round 6 ================= */
/* 2. horizontal nav beside the seal; items and active box share the seal's height */
.rail-top{display:flex;align-items:center;gap:18px}
.hnav{display:flex;align-items:center;gap:3px;min-width:0}
.hnav a{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 10px;white-space:nowrap;border-radius:4px;font-size:15px;color:var(--ink-2);text-decoration:none;transition:color .25s,background .25s}
.hnav a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--seal);transform:scale(0);transition:transform .3s var(--ease)}
.hnav a:hover{color:var(--ink)}
.hnav a[aria-current="page"]{color:var(--ink);background:var(--surface-2);border:1px solid var(--line)}
.hnav a[aria-current="page"]::before{transform:scale(1)}
.vnav{display:none}
/* 1, 3, 4. bottom line: Email · LinkedIn · Resume, no seal */
.rail-foot .links-row a.on{color:var(--ink)}
/* 5. tag description on its own line: the tag grows taller and wider */
.rail-body .glimpse .place{display:grid;grid-template-columns:auto;grid-template-rows:auto 0fr;align-self:stretch;width:max-content;max-width:100%;white-space:nowrap;transition:grid-template-rows .5s var(--ease),width .5s var(--ease),border-color .3s;padding:5px 11px}
.rail-body .glimpse .place .more{grid-column:1;display:block;min-height:0;overflow:hidden;white-space:normal;max-width:none;margin-left:0;line-height:1.45;transition:opacity .35s var(--ease),padding-top .5s var(--ease)}
.rail-body .glimpse .place:hover,.rail-body .glimpse .place:focus-within{grid-template-rows:auto 1fr;width:100%}
.rail-body .glimpse .place:hover .more,.rail-body .glimpse .place:focus-within .more{opacity:1;padding-top:6px}
/* 6. subtler gradients */
.g-seatgeek{--grad:radial-gradient(70% 90% at 15% 20%,rgba(255,61,129,.5),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(255,138,61,.45),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(124,58,237,.4),transparent 70%)}
.g-ibm{--grad:radial-gradient(70% 90% at 15% 25%,rgba(59,130,246,.5),transparent 70%),radial-gradient(70% 90% at 85% 75%,rgba(34,211,238,.42),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(139,92,246,.4),transparent 70%)}
.g-sap{--grad:radial-gradient(70% 90% at 15% 20%,rgba(20,184,166,.5),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(163,230,53,.38),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(56,189,248,.4),transparent 70%)}
.g-foreal{--grad:radial-gradient(70% 90% at 15% 20%,rgba(168,85,247,.5),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(236,72,153,.42),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(99,102,241,.4),transparent 70%)}
/* 7. hover zoom that follows the mouse */
.card .img img{transition:transform .45s var(--ease),box-shadow .45s var(--ease);transform-origin:50% 50%}

.card:hover .img img{transform:none}

.card:hover{transform:none}
/* 8. cards area fills the viewport; mockups keep a fixed size; scrolls if it cannot fit */
.home-page .content{padding-bottom:28px}
.home-page .cards{height:calc(100dvh - var(--top-gap) - 28px);grid-template-rows:repeat(2,minmax(250px,1fr));gap:22px}
.home-page .card{display:flex;flex-direction:column;min-height:0}
.home-page .card .img{flex:1;min-height:0;aspect-ratio:auto}
.home-page .card .img img{max-height:200px;max-width:78%}
.home-page .card .title{flex:none}
@media (max-width:900px){
  .home-page .cards{height:auto;grid-template-rows:none}
  .home-page .card .img{aspect-ratio:16/10}
  .hnav a{height:36px;padding:0 10px;font-size:14px}
  .rail-top{gap:10px}
}
/* connect page */
.connect{max-width:760px}
.tabs{display:flex;gap:6px;margin-bottom:24px}
.tab{font:inherit;font-size:14px;color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:4px;padding:8px 14px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);background:var(--surface-2);border-color:var(--seal)}
.panel{opacity:0;transform:translateY(10px)}
.panel.in{animation:panelIn .5s var(--ease) forwards}
@keyframes panelIn{to{opacity:1;transform:none}}
.panel h2{font-family:var(--serif);font-weight:400;font-size:32px;margin-bottom:8px}
.panel p{margin-bottom:18px}
.mail{display:grid;gap:14px;max-width:560px}
.mail label{display:grid;gap:6px;font-size:13px;color:var(--ink-3)}
.mail input,.mail textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px 12px;outline:none;transition:border-color .25s}
.mail input:focus,.mail textarea:focus{border-color:var(--seal)}
.mail input[readonly]{color:var(--ink-2)}
.mail .row{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost{color:var(--ink-2)}
.btn{cursor:pointer;font:inherit;font-size:14px}
.li-card{max-width:520px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;position:relative}
.li-banner{height:88px;background:linear-gradient(120deg,#1c2a3a,#2a3d57)}
.li-photo{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);position:absolute;top:42px;left:22px}
.li-body{padding:54px 22px 22px;display:grid;gap:4px}
.li-body b{font-size:20px;font-weight:600}
.li-body span{color:var(--ink-2);font-size:14.5px}
.li-body small{color:var(--ink-3);font-size:13px}
.li-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.li-tags span{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:3px 8px}
.stage{position:relative;width:min(860px,100%);aspect-ratio:8.5/11;max-height:calc(100dvh - 160px);border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.stage .veil-stamp{position:absolute;inset:0;margin:auto;width:120px;height:120px;opacity:0;animation:stampDown .7s .15s var(--ease) forwards}
.stage.paper .veil-stamp{animation:stampAway .4s var(--ease) forwards}
.stage .paper{position:absolute;inset:0;background:#fff;opacity:0;transform:translateY(40px);transition:transform .6s var(--ease),opacity .5s var(--ease)}
.stage.paper .paper{opacity:1;transform:none}
.stage iframe{width:100%;height:100%;border:0;display:block}
/* tags: collapsed at rest, open taller and wider on hover */
.rail-body .glimpse .place{display:block;grid-template-rows:none;width:max-content;max-width:100%;white-space:nowrap;transition:width .5s var(--ease),border-color .3s;interpolate-size:allow-keywords}
.rail-body .glimpse .place .more{display:block;width:0;max-height:0;opacity:0;overflow:hidden;white-space:normal;padding-top:0;transition:max-height .5s var(--ease),opacity .35s var(--ease),padding-top .5s var(--ease)}
.rail-body .glimpse .place:hover,.rail-body .glimpse .place:focus-within{width:100%}
.rail-body .glimpse .place:hover .more,.rail-body .glimpse .place:focus-within .more{width:auto;max-height:90px;opacity:1;padding-top:6px}

/* round 7 */
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--ink-2);text-decoration:none;transition:color .25s}
.more-link .arr{color:var(--seal);transition:transform .3s var(--ease)}
.more-link:hover{color:var(--ink)}
.more-link:hover .arr{transform:translateX(4px)}
.rail-body .glimpse .now{display:flex;gap:6px;align-items:flex-start}
.rail-body .glimpse .now .lines{line-height:1.5}
/* slower, smoother tag opening */
.rail-body .glimpse .place{transition:width .9s cubic-bezier(.22,.8,.2,1),border-color .4s}
.rail-body .glimpse .place .more{transition:max-height .9s cubic-bezier(.22,.8,.2,1),opacity .6s ease .15s,padding-top .9s cubic-bezier(.22,.8,.2,1)}

/* round 8 */
.rail-body .glimpse .now{flex-direction:column;gap:2px}
.rail-body .glimpse .now b{display:block;margin:0}
.rail-body .glimpse{gap:12px}
/* connect: resume takes the whole content width */
.connect{max-width:none}
#p-email,#p-linkedin{max-width:760px}
.stage{width:100%;max-height:none}
/* sliding nav marker */
.hnav{position:relative}
.hnav .ind{position:absolute;top:0;left:0;height:40px;width:0;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);box-sizing:border-box;opacity:0;transition:transform .5s cubic-bezier(.22,.8,.2,1),width .5s cubic-bezier(.22,.8,.2,1),opacity .3s;pointer-events:none}
.hnav.ready .ind{opacity:1}
.hnav a{position:relative;z-index:1}
.hnav a[aria-current="page"]{background:transparent;border:0}
.hnav a[aria-current="page"]::before{transform:scale(1)}
@media (max-width:900px){.hnav .ind{height:36px}}
/* page swap */
.content.leaving,.rail-body.leaving{opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.content,.rail-body{transition:opacity .3s ease,transform .3s ease}

/* ================= resume printer ================= */
.printer-wrap{position:relative;width:min(900px,100%);margin:-12px auto 0}
.printer{position:sticky;top:-8px;z-index:3;width:100%;line-height:0;margin-top:-6px}
.printer svg{width:100%;height:auto;display:block;overflow:visible}
.tray{position:relative;z-index:1;overflow:hidden;margin:calc(-100% * 126 / 902) auto 0;width:calc(100% * 578 / 902);padding-top:calc(100% * 84 / 578)}
.sheet{transform:translateY(-101%);will-change:transform}
.sheet img{width:100%;height:auto;display:block;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.sheet::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;background:linear-gradient(#000 0%,rgba(0,0,0,.35) 30%,transparent 100%);opacity:.32;pointer-events:none;z-index:2}
.printer-wrap.printing .sheet{animation:print 2.8s cubic-bezier(.35,.1,.25,1) forwards}
.printer-wrap.done .sheet{transform:none}
@keyframes print{0%{transform:translateY(-101%)}8%{transform:translateY(-98%)}12%{transform:translateY(-99%)}100%{transform:translateY(0)}}
.p-light,.p-glow{transition:fill .5s ease}
.printer-wrap.printing .p-light{animation:blink .9s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.printer-wrap.done .p-light,.printer-wrap.done .p-glow{fill:#3ddc84}
#p-resume .hint{margin-top:28px;text-align:center}
#p-resume{max-width:none}

/* printer v2: the sheet comes out of the slot, in front of the body, under the slot's upper lip */
.printer-wrap{position:relative;width:min(900px,100%);margin:-12px auto 0}
.printer,.printer-body,.printer-lip{position:sticky;top:-8px}
.printer-body{z-index:1;line-height:0}
.printer-body svg,.printer-lip svg{width:100%;height:auto;display:block;overflow:visible}
.printer-lip{z-index:3;height:0;pointer-events:none}
.printer-lip svg{position:absolute;left:0;bottom:0;clip-path:inset(0 0 60.2% 0)}
.tray{position:relative;z-index:2;overflow:hidden;margin:calc(-100% * 150 / 902) auto 0;width:calc(100% * 578 / 902);padding-top:0}
.sheet{position:relative;transform:translateY(-101%)}
.sheet::before{height:140px;opacity:.28}
/* no transforms above the sticky printer, so the pin holds in every browser */
.panel{transform:none}
@keyframes panelIn{to{opacity:1}}
.content,.rail-body{transition:opacity .3s ease}
.content.leaving,.rail-body.leaving{opacity:0;transform:none}
/* printer lip sits exactly over the body, in flow and when pinned */
.printer-lip{margin-top:calc(-100% * 250 / 902)}
.printer-lip svg{top:0;bottom:auto}
.tray{margin-top:calc(100% * 99.5 / 902)}

/* the page itself never scrolls on laptops: the rail is fixed, the content column scrolls */
@media (min-width:901px){
  html,body{height:100%;overflow:hidden}
  body{display:block}
  .layout{height:100vh;height:100dvh;align-items:stretch}
  .rail{position:relative;top:auto;height:100%}
  .content{height:100%;overflow-y:auto;overflow-x:hidden;padding-bottom:56px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;overscroll-behavior:contain}
  .content::-webkit-scrollbar{width:8px}
  .content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
  .home-page .cards{height:calc(100dvh - var(--top-gap) - 28px)}
  .printer,.printer-body,.printer-lip{top:calc(-1 * var(--top-gap) - 8px)}
}
/* paper centered on the slot, not on the machine */
.tray{margin-left:calc(100% * 135 / 902);margin-right:0}
/* the printer never moves: its resting spot is exactly its pinned spot */
@media (min-width:901px){
  #p-resume .printer-wrap{margin-top:calc(-1 * var(--top-gap) - 8px)}
  .printer,.printer-body,.printer-lip{top:calc(-1 * var(--top-gap) - 8px)}
}

/* round 10 */
/* 1. no visible scrollbar on the resume page */
.connect-page .content{scrollbar-width:none}
.connect-page .content::-webkit-scrollbar{display:none}
/* 2. about link reads as a button */
.more-btn{margin-top:20px;padding:10px 16px}
/* 3. tags: one shared detail line, so nothing jumps around under the pointer */
.rail-body .glimpse .places{display:flex;flex-wrap:wrap;gap:8px}
.rail-body .glimpse .place{display:inline-flex;align-items:baseline;gap:6px;width:auto;white-space:nowrap;transition:border-color .35s ease,background .35s ease,color .35s ease;cursor:default}
.rail-body .glimpse .place.on,.rail-body .glimpse .place:focus-visible{border-color:var(--seal);background:var(--surface-2);outline:none}
.rail-body .glimpse .place-detail{display:block;min-height:2.9em;font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:-2px}
.rail-body .glimpse .place-detail span{display:block;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,.8,.2,1)}
.rail-body .glimpse .place-detail.show span{opacity:1;transform:none}
/* 4. seal and nav items share one height */
.rail .seal{width:44px;height:44px}
.hnav a{height:44px}
.hnav .ind{height:44px}
@media (max-width:900px){.rail .seal{width:36px;height:36px}.hnav a{height:36px}.hnav .ind{height:36px}}

/* status lights on Now / Before */
.glimpse b{display:inline-flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.live{background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.55);animation:pulse 2.4s ease-out infinite}
.dot.past{background:#5a5750}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

.about-inl{color:var(--ink);white-space:nowrap;background-size:100% 1px}
.about-inl:hover{color:var(--seal)}

/* ================= round 12 ================= */
/* 1. nav as a switch */
.hnav{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px;height:44px;box-sizing:border-box}
.hnav a{height:36px;padding:0 12px;border-radius:4px}
.hnav .ind{height:36px;top:3px;left:3px;background:var(--surface-2);border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 2px rgba(0,0,0,.4)}
@media (max-width:900px){.hnav{height:36px;padding:2px}.hnav a{height:30px}.hnav .ind{height:30px;top:2px;left:2px}}
/* 2. room for the status light */
.glimpse b{gap:10px}
.rail-body{padding-left:10px;margin-left:-10px}
/* 3 + 8. expanding tags (shared) */
.tagset{display:flex;gap:8px}
.tagset.stack{flex-direction:column;align-items:flex-start}
.tagset.wrap{flex-wrap:wrap;align-items:flex-start;margin-top:10px}
.tag2{display:grid;grid-template-rows:auto 0fr;border:1px solid var(--line);border-radius:4px;padding:5px 11px;color:var(--ink);font-weight:500;font-size:13.5px;line-height:1.4;cursor:default;box-sizing:border-box;
  transition:grid-template-rows .55s cubic-bezier(.22,.8,.2,1),width .55s cubic-bezier(.22,.8,.2,1),border-color .3s ease,background .3s ease}
.tag2 .lbl{white-space:nowrap}
.tag2 small{color:var(--ink-3);font-weight:400;font-size:12px;margin-left:5px}
.tag2 .more{min-height:0;overflow:hidden;opacity:0;font-weight:400;font-size:13px;color:var(--ink-2);white-space:normal;line-height:1.45;transition:opacity .3s ease,padding-top .55s cubic-bezier(.22,.8,.2,1)}
.tag2.open{grid-template-rows:auto 1fr;border-color:var(--seal);background:var(--surface-2)}
.tag2.open .more{opacity:1;padding-top:5px;transition:opacity .35s ease .15s,padding-top .55s cubic-bezier(.22,.8,.2,1)}
.tag2:focus-visible{outline:none;border-color:var(--seal)}
/* 4. gentler gradients */
.g-seatgeek{--grad:radial-gradient(70% 90% at 15% 20%,rgba(255,61,129,.34),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(255,138,61,.3),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(124,58,237,.28),transparent 70%)}
.g-ibm{--grad:radial-gradient(70% 90% at 15% 25%,rgba(59,130,246,.34),transparent 70%),radial-gradient(70% 90% at 85% 75%,rgba(34,211,238,.28),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(139,92,246,.28),transparent 70%)}
.g-sap{--grad:radial-gradient(70% 90% at 15% 20%,rgba(20,184,166,.34),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(163,230,53,.26),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(56,189,248,.28),transparent 70%)}
.g-foreal{--grad:radial-gradient(70% 90% at 15% 20%,rgba(168,85,247,.34),transparent 70%),radial-gradient(70% 90% at 85% 80%,rgba(236,72,153,.28),transparent 70%),radial-gradient(60% 80% at 60% 10%,rgba(99,102,241,.28),transparent 70%)}
/* 5. one frame size for every card; mockup sits at the bottom of the frame */






/* 7. printer spans the whole column */
.printer-wrap{width:100%}
/* 8. about page */
.rail-body .photo{width:100%;max-width:100%;aspect-ratio:4/5}
.scribble{font-family:"Caveat",cursive;font-size:24px!important;line-height:1.25!important;color:var(--ink-3)!important;margin:14px 0 0!important;transform:rotate(-1.5deg);transform-origin:left top}
.scribble b{color:var(--ink);font-weight:600}
.about-story{max-width:720px}
.about-story h1{margin-bottom:14px}
.about-story p{font-size:16.5px;line-height:1.65;margin-bottom:.9em}
.about-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);max-width:860px;margin-top:36px}
.about-cols .list .meta{display:block;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.about-cols .list ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}
.about-cols .list li{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2);min-width:0}
.about-cols .list li b{min-width:0}
.about-cols .list li b{font-weight:500;color:var(--ink)}
.about-cols .list li span{color:var(--ink-3);white-space:nowrap;font-size:13px}
.about-into{margin-top:40px;max-width:860px}
.about-into .meta{display:block}
@media (max-width:900px){.rail-body .photo{max-width:220px}}
@media (max-width:1040px){.about-cols{grid-template-columns:1fr}}
@media (max-width:380px){.about-cols .list li{display:block}.about-cols .list li span{display:block;margin-top:1px}}
/* tags: height driven by measured max-height (reliable everywhere) */
.tag2{display:block;grid-template-rows:none}
.tag2 .more{display:block;max-height:0;transition:max-height .55s cubic-bezier(.22,.8,.2,1),opacity .3s ease,padding-top .55s cubic-bezier(.22,.8,.2,1)}
.tag2.open{grid-template-rows:none}
.tag2.open .more{transition:max-height .55s cubic-bezier(.22,.8,.2,1),opacity .35s ease .15s,padding-top .55s cubic-bezier(.22,.8,.2,1)}
.tag2{overflow:hidden;box-sizing:border-box}

/* ================= round 13 ================= */
/* 1. handwriting */
.scribble{font-family:"Nanum Pen Script",cursive;font-size:30px!important;line-height:1.15!important}
/* 3. nav switch: no gap, darker track, lighter key with inset shadows */
.hnav{background:#0f0e0d;border-color:#000;padding:0;height:44px;border-radius:5px}
.hnav a{height:44px;border-radius:4px}
.hnav .ind{height:44px;top:0;left:0;background:#2e2d29;border:0;border-radius:4px;
  box-shadow:inset 4px 0 6px -4px rgba(0,0,0,.9),inset -4px 0 6px -4px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5)}
@media (max-width:900px){.hnav{height:36px;padding:0}.hnav a{height:36px}.hnav .ind{height:36px;top:0;left:0}}
/* 4. breathing room after the status light */
.glimpse b{gap:14px}
/* 5. wider layout on big screens, wider slot and paper */
.wrap{max-width:1560px}
.layout{gap:clamp(36px,4.5vw,72px)}
.tray{width:calc(100% * 690 / 902);margin-left:calc(100% * 90 / 902)}
/* case pages: no nav, just back + list */
.case-page .rail-top{display:none}
.case-page .rail-body .back{margin-bottom:26px}
.case-page .toc{font-size:14px;gap:10px}
.cover.big{aspect-ratio:16/9;background:var(--surface);border:1px solid var(--line);position:relative}
.cover.big .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:13px;letter-spacing:.01em}

/* ================= round 14 ================= */
/* status light spacing (the label is a block, so the gap must be on the dot) */
.rail-body .glimpse .now b{display:inline-flex;align-items:center;gap:14px}
/* printer back to the previous size */
.wrap{max-width:1360px}
.layout{gap:clamp(40px,6vw,96px)}
.tray{width:calc(100% * 578 / 902);margin-left:calc(100% * 135 / 902)}
/* about page: back link, landscape photo, interests under it, no scribble */
.about-page .rail-top{display:flex}
.about-page .rail-body .back{margin-bottom:22px}
.about-page .rail-body .photo{aspect-ratio:4/3}
.about-page .about-into{margin-top:18px;max-width:none}
.about-page .about-into .meta{margin-bottom:4px}
.about-page .about-into .tagset{margin-top:8px}
.scribble{display:none}
.about-story h1.line{font-size:clamp(28px,2.6vw,38px)}

/* ================= round 15 ================= */
.about-page .rail-top{display:flex}
.rail-foot .seal{display:block;width:40px;height:40px;margin-bottom:14px;transition:transform .5s var(--ease)}
.rail-foot .seal img{width:100%;height:100%}
.rail-foot .seal:hover{transform:rotate(-6deg) scale(1.06)}
.mobile-foot .seal{width:32px;height:32px;display:inline-block;margin-right:4px}
.mobile-foot .seal img{width:100%;height:100%}
.mobile-foot{align-items:center}
@media (max-width:900px){.rail-top{justify-content:flex-start}}
.cover.big{min-height:360px}
/* big cover: sized by padding so it is always 16:9 of the column */
.cover.big{aspect-ratio:auto;height:auto;min-height:0;padding-top:56.25%}

/* tag groups: no side padding (the layout's .wrap rule was leaking in), open tags span the column */
.tagset.wrap{padding:0!important;max-width:none;width:100%;margin-left:0;margin-right:0}
.tagset.stack{width:100%}
.tag2 .more{white-space:normal;overflow-wrap:anywhere}

/* tags: description inline after an em dash */
.tag2{display:block;white-space:nowrap;transition:width .55s cubic-bezier(.22,.8,.2,1),max-height .55s cubic-bezier(.22,.8,.2,1),border-color .3s ease,background .3s ease}
.tag2 .lbl{display:inline}
.tag2 .more{display:inline;width:auto!important;max-width:none!important;max-height:none!important;overflow:visible;opacity:0;padding:0!important;transition:opacity .3s ease}
.tag2 .more::before{content:" \2014  "}
.tag2.open .more{opacity:1;transition:opacity .35s ease .12s}
/* only "right now I'm into" is capped at one line; stacked tags still wrap */
.tagset.wrap .tag2,.tagset.wrap .tag2.open{white-space:nowrap}
.tagset.wrap .tag2 .more{white-space:nowrap!important;overflow-wrap:normal!important}
.tag2.multi{white-space:normal}
.tag2.multi .lbl{white-space:nowrap}

/* card zoom: the whole white frame scales up around the pointer and fills the card */






/* ================= cursor: hairline ring ================= */
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor .card, body.has-cursor .tag2, body.has-cursor .tile{cursor:none}
  body.has-cursor input, body.has-cursor textarea{cursor:text}
  .cursor-ring{position:fixed;left:0;top:0;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0;transition:width .25s var(--ease),height .25s var(--ease),background .25s ease,border-color .25s ease,opacity .2s ease;mix-blend-mode:normal;will-change:left,top}
  .cursor-ring.show{opacity:1}
  .cursor-ring.on{width:12px;height:12px;background:var(--seal);border-color:var(--seal)}
  .cursor-ring.text{opacity:0}
}
/* hide the native pointer everywhere on fine-pointer devices, except inside text fields */
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor *{cursor:none!important}
  body.has-cursor input, body.has-cursor textarea, body.has-cursor input *, body.has-cursor textarea *{cursor:text!important}
}

/* copy icon inside the To field */
.mail .field{position:relative;display:block}
.mail .field input{width:100%;padding-right:44px;box-sizing:border-box}
.mail .copy{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:var(--ink-3);display:grid;place-items:center;transition:color .25s,background .25s}
.mail .copy:hover{color:var(--ink);background:var(--surface-2)}
.mail .copy svg{grid-area:1/1;transition:opacity .2s,transform .3s var(--ease)}
.mail .copy .ok{opacity:0;transform:scale(.6);color:#3ddc84}
.mail .copy.done svg:not(.ok){opacity:0;transform:scale(.6)}
.mail .copy.done .ok{opacity:1;transform:none}

/* To field: same box as the other fields, email text with a ghost copy icon right beside it */
.mail .field{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 12px;min-height:41px;box-sizing:border-box}
.mail .field .addr{white-space:nowrap}
.mail .copy{position:static;transform:none;width:26px;height:26px;border:0;background:transparent;color:var(--ink-3);border-radius:4px;display:grid;place-items:center;transition:color .25s}
.mail .copy:hover{color:var(--ink);background:transparent}

/* ================= round 17 ================= */
.about-page .rail-top{display:flex}
.rail-top{display:flex;align-items:center;gap:18px}
.rail .seal{display:block;width:44px;height:44px}
.more-link{margin-top:6px;margin-bottom:8px;font-size:15px;color:var(--ink)}
.more-link .arr{color:var(--seal)}
.glimpse b{gap:0}

/* ================= sandbox grid v2 ================= */
.sandbox-page .masonry{columns:3;column-gap:14px}
@media (min-width:1200px){.sandbox-page .masonry{columns:4}}
@media (max-width:900px){.sandbox-page .masonry{columns:2;column-gap:10px}}
.tile img,.tile video{width:100%;height:auto;display:block;filter:brightness(.82);transition:filter .45s var(--ease),transform .8s var(--ease)}
.tile:hover img,.tile:hover video{filter:brightness(1);transform:scale(1.03)}
.tile figcaption{left:8px;right:8px;bottom:8px;white-space:normal;line-height:1.3;font-size:11.5px;letter-spacing:.01em;text-align:left}
.tile .play{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;font-size:8px;display:grid;place-items:center;padding-left:2px;opacity:.85;transition:opacity .3s}
.tile:hover .play{opacity:0}

/* sandbox videos: box locked to the clip's real ratio, silent autoplay */
.tile .vbox{display:block;width:100%;overflow:hidden;background:#000}
.tile .vbox video{width:100%;height:100%;object-fit:cover;display:block}
.tile .play{display:none}

/* seal: never taller than the nav switch beside it */
.rail .seal{width:44px;height:44px;flex:none;aspect-ratio:1}
.rail .seal img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:900px){.rail .seal{width:36px;height:36px}}
/* seal sits a touch smaller than the nav switch */
.rail .seal{width:36px;height:36px}
@media (max-width:900px){.rail .seal{width:30px;height:30px}}
/* sandbox grid caps at three columns */
.sandbox-page .masonry{columns:3}
@media (min-width:1200px){.sandbox-page .masonry{columns:3}}
@media (max-width:900px){.sandbox-page .masonry{columns:2}}
/* caption hugs its text; only stretches when the text needs a second line */
.tile figcaption{right:auto;max-width:calc(100% - 16px);width:max-content;overflow-wrap:anywhere}
@media (max-width:460px){.tile figcaption{width:auto;right:8px}}

/* sandbox: row-wise masonry so the ranking reads across the top rows */
.sandbox-page .masonry{columns:auto!important;column-gap:0;display:flex;gap:14px;align-items:flex-start}
.sandbox-page .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.sandbox-page .tile{margin:0!important;break-inside:auto}
@media (max-width:900px){.sandbox-page .masonry{gap:10px}.sandbox-page .mcol{gap:10px}}
/* interests moved into the right column */
.about-page .content .about-into{margin-top:40px;max-width:860px}
.about-page .content .about-into .meta{display:block;margin-bottom:10px}

/* ================= about page refinements ================= */
/* 1. divider back on the interests heading */
.about-page .content .about-into .meta{display:block;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* 3. back link matches the nav row height so the greeting lines up with the Work page title */
.about-page .rail-body .back{display:flex;align-items:center;height:44px;margin-bottom:26px}
.about-page .rail-body h1.line{margin-bottom:18px}
.about-page .rail-body .photo{margin-top:0}
/* 4. opening line reads like a card title */
.about-story p.first{color:var(--ink);font-weight:500}

/* ================= Oakley ================= */
.oakley{position:relative;margin-top:6px;min-height:170px}
.oakley>img{display:block;width:60%;margin-left:auto;height:auto}
.oak-note{position:absolute;left:0;top:4px;width:40%;margin:0;font-family:"Nanum Pen Script",cursive;font-size:21px;line-height:1.12;color:var(--ink-3);transform:rotate(-3deg);transform-origin:left top}
.oak-arrow{position:absolute;left:8px;top:74px;width:74px;height:58px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
@media (max-width:900px){.oakley{max-width:260px}}
/* arrow reaches closer to Oakley; note kept clear of her */
.oak-note{width:36%}
.oak-arrow{left:14px;top:78px;width:92px;height:62px}
/* Oakley left-aligned under the photo; note sits top-right, arrow points back at her */
.oakley>img{margin-left:0;margin-right:auto}
.oak-note{left:auto;right:0;width:38%;transform:rotate(3deg);transform-origin:right top}
.oak-arrow{left:auto;right:14px;transform:scaleX(-1)}
/* Oakley: smaller, more room under the photo, arrow drawn pointing at her (no mirroring) */
.oakley{margin-top:26px;min-height:150px}
.oakley>img{width:52%}
.oak-note{width:40%;font-size:20px}
.oak-arrow{right:20px;left:auto;top:58px;width:110px;height:78px;transform:none;stroke-width:1.8;opacity:.8}
/* Oakley note readable */
.oak-note{font-size:26px;width:44%;line-height:1.05}
/* tighter right column so it fits a laptop screen without scrolling */
.about-story p{margin-bottom:.72em}
.about-page .about-cols{margin-top:26px}
.about-page .content .about-into{margin-top:28px}
.about-page .content{padding-bottom:36px}
/* note needs to beat the generic .rail-body p rule */
.rail-body .oak-note{font-size:26px;line-height:1.05;width:44%;margin:0}

/* round 21 */
/* the two columns can never push the page taller than the screen */
@media (min-width:901px){
  .layout{grid-template-rows:minmax(0,100%)}
  .rail,.content{min-height:0}
  .about-page .rail{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
  .about-page .rail::-webkit-scrollbar{display:none}
}
/* on shorter laptop screens the about column tucks in so nothing gets cut off */
@media (min-width:901px) and (max-height:840px){
  .about-page .rail-body .back{margin-bottom:14px}
  .about-page .rail-body h1.line{margin-bottom:10px}
  .about-page .rail-body .photo{width:80%}
  .oakley{margin-top:14px;min-height:118px}
  .oakley>img{width:42%}
  .rail-body .oak-note{font-size:23px}
  .oak-arrow{top:46px;width:92px;height:62px}
}

/* round 22 */
/* more breathing room between my photo and Oakley */
.oakley{margin-top:48px}
@media (min-width:901px) and (max-height:840px){
  .oakley{margin-top:30px}
}

/* round 23 */
/* the left column tucks in on shorter laptops so nothing gets cut off */
@media (min-width:901px) and (max-height:845px){
  .rail{gap:16px;padding-bottom:12px}
  .home-page .rail-body h1.line, .connect-page .rail-body h1.line{margin-bottom:10px}
  .home-page .rail-body>p, .connect-page .rail-body>p{margin-bottom:10px}
  .home-page .glimpse, .connect-page .glimpse{margin-top:0}
}
@media (min-width:901px) and (max-height:812px){
  .rail{gap:12px;padding-bottom:8px}
  .home-page .rail-body h1.line, .connect-page .rail-body h1.line{margin-bottom:8px}
  .home-page .rail-body>p, .connect-page .rail-body>p{margin-bottom:8px}
  .home-page .glimpse, .connect-page .glimpse{margin-top:0;gap:8px}
  .home-page .tagset.stack, .connect-page .tagset.stack{gap:5px}
}

/* round 24 */
/* never leave a single word stranded on the last line */
.rail-body p,.about-story p,.card .sub{text-wrap:pretty}

/* round 25 */
/* smallest laptops: last of the spacing, type stays full size */
@media (min-width:901px) and (max-height:745px){
  .rail{gap:8px;padding-bottom:4px}
  .home-page .rail-body h1.line, .connect-page .rail-body h1.line{margin-bottom:6px}
  .home-page .rail-body>p, .connect-page .rail-body>p{margin-bottom:6px}
  .home-page .glimpse, .connect-page .glimpse{gap:6px}
  .home-page .tagset.stack, .connect-page .tagset.stack{gap:4px}
}

/* round 26 */
/* case study cover: same framed mockup treatment as the home cards */
.cover.big.hero-cover{display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.cover.big.hero-cover::before{content:"";position:absolute;inset:0;background:var(--grad);z-index:0}
.cover.big.hero-cover::after{content:"";position:absolute;inset:-50%;z-index:1;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
.cover.big.hero-cover .mock{position:absolute;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:block;max-width:92%;max-height:88%;border:3px solid #fff;border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.55);line-height:0}
.cover.big.hero-cover .mock img{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0;box-shadow:none}


/* round 27: seatgeek case study */
/* case study: wide column for artwork, text stays a comfortable measure */
.case-page .prose{max-width:1060px}
.case-page .prose p,.case-page .prose h2,.case-page .prose h3,.case-page .prose .hmw,.case-page .prose .client{max-width:720px}
.case-page .prose figure.shot.big img{width:100%;height:auto}

/* the question I was answering */
.hmw{border-left:2px solid var(--seal);padding:2px 0 2px 20px;margin:26px 0 30px}
.hmw .meta{display:block;margin-bottom:8px}
.hmw p{font-size:19px;line-height:1.55;color:var(--ink);margin:0}

/* on-page diagrams */
figure.diagram{margin:26px 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
figure.diagram figcaption{padding:10px 14px;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line)}

/* why now: one client org, many domains */
.whynow{padding:clamp(20px,3vw,34px)}
.wn-label{display:block;text-align:center;font-size:12.5px;letter-spacing:.02em;color:var(--ink-3);margin-bottom:16px}
.wn-domains{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:stretch}
.wn-domain{border:1px solid rgba(229,72,77,.45);border-radius:8px;padding:14px;background:rgba(229,72,77,.05)}
.wn-domain b{display:block;text-align:center;color:var(--seal);font-weight:600;font-size:14.5px;margin-bottom:12px}
.wn-domain span{display:block;text-align:center;border-radius:5px;padding:9px 8px;margin-top:8px;font-size:13.5px;color:var(--ink-2);background:rgba(229,72,77,.10)}
.wn-more{display:grid;place-items:center;min-width:92px;border:1px dashed var(--line);border-radius:8px;color:var(--ink-3);font-size:13px;text-align:center;line-height:1.35}
@media (max-width:620px){.wn-domains{grid-template-columns:1fr}.wn-more{min-height:64px}}

/* now / next / future */
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:clamp(20px,3vw,32px)}
.rm{border:1px solid var(--line);border-radius:8px;padding:16px 16px 18px;background:rgba(255,255,255,.02)}
.rm.now{border-color:var(--seal);background:rgba(229,72,77,.08)}
.rm .meta{display:block;margin-bottom:8px;letter-spacing:.1em;font-size:11.5px}
.rm.now .meta{color:var(--seal)}
.rm b{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
@media (max-width:620px){.roadmap{grid-template-columns:1fr}}

/* client logo row */
.client{display:flex;align-items:center;gap:14px;margin:22px 0 26px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.client img{width:38px;height:38px;flex:0 0 auto}
.client span{font-size:14.5px;line-height:1.45;color:var(--ink-2)}

/* round 28: seatgeek refinements */
/* 1. bigger hero mockup */



/* 2 + 3. before / after flows: labelled badge, no caption footer */
.prose figure.shot.flow{position:relative;margin:22px 0}
.prose figure.shot.flow img{display:block;width:100%;height:auto}
.prose figure.shot.flow .tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:baseline;gap:9px;
  padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em;
  background:rgba(12,12,12,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.prose figure.shot.flow .tag em{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;font-size:12.5px;color:rgba(255,255,255,.72)}
.prose figure.shot.flow .tag.after{border-color:rgba(229,72,77,.65);color:#ff9a9d}
.prose figure.shot.flow .tag.after em{color:rgba(255,255,255,.8)}
@media (max-width:560px){
  .prose figure.shot.flow .tag{top:8px;left:8px;padding:6px 10px;font-size:11px;flex-direction:column;gap:2px;align-items:flex-start}
  .prose figure.shot.flow .tag em{font-size:11px}
}

/* 5. audit board and its summary sit side by side */
.prose .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0;align-items:stretch}
.prose .pair figure.shot{margin:0;display:flex;flex-direction:column}
.prose .pair figure.shot img{width:100%;height:clamp(240px,30vw,360px);object-fit:cover;object-position:top center;flex:0 0 auto}
.prose .pair figure.shot figcaption{margin-top:auto}
/* round 40: no frame on the Foreal cover, the phones are the mockup */
.card .img.g-foreal .mock,.cover.big.hero-cover.g-foreal .mock{border:0;background:none;box-shadow:none;border-radius:0}
.card .img.g-foreal .mock img{object-fit:contain;object-position:center}
.card .img.g-foreal .mock{width:92%;max-height:88%;aspect-ratio:auto;height:auto}
.card .img.g-foreal:hover .mock,.card .img.g-foreal.zoom .mock{box-shadow:none}
/* round 40: stop one or two word last lines across the case study prose */
.prose p,.prose li,.prose figcaption,.prose blockquote,.mo p,.opt p,.th p,.stat span,.hmw p,.pull p,.quotes div,.lede p{text-wrap:pretty}
@media (max-width:700px){.prose .pair{grid-template-columns:1fr}}

/* 7. design moments: number sits in the heading, content is full width */
.mo{margin-top:clamp(34px,5vh,52px)}
.mo>h3{margin:0 0 12px;max-width:none}
.mo>h3 .k{color:var(--seal);font-size:12.5px;font-weight:500;letter-spacing:.08em;flex:0 0 auto}
.mo>p{max-width:720px}
.case-page .prose .mo>h3{max-width:none}

/* round 29: compare slider + five themes */
.compare{position:relative;overflow:hidden;line-height:0;touch-action:pan-y;cursor:ew-resize;--pos:50%;aspect-ratio:1800/1031;background:var(--surface)}
.compare img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.compare .cmp-top{position:absolute;inset:0;width:100%;overflow:hidden;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare.dragging{cursor:grabbing}
.compare .cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);
  background:none;border:0;padding:0;cursor:ew-resize;z-index:4}
.compare .cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.compare .cmp-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(14,14,14,.86);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.5)}
.compare .cmp-handle span::before,.compare .cmp-handle span::after{content:"";position:absolute;top:50%;width:0;height:0;border-block:5px solid transparent}
.compare .cmp-handle span::before{left:9px;transform:translateY(-50%);border-right:6px solid rgba(255,255,255,.92)}
.compare .cmp-handle span::after{right:9px;transform:translateY(-50%);border-left:6px solid rgba(255,255,255,.92)}
.compare .cmp-handle:focus-visible span{border-color:var(--seal);box-shadow:0 0 0 3px rgba(229,72,77,.35)}
.compare .cmp-tag{position:absolute;bottom:12px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:rgba(12,12,12,.8);border:1px solid rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);line-height:1}
.compare .cmp-tag.l{left:12px;z-index:3}
.compare .cmp-tag.r2{right:12px;z-index:1;border-color:rgba(229,72,77,.6);color:#ff9a9d}
.compare .cmp-top{z-index:2}
@media (max-width:560px){.compare .cmp-tag{font-size:11.5px;padding:5px 10px;bottom:8px}.compare .cmp-handle span{width:32px;height:32px}}

/* five themes from the interviews */
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:24px 0 28px;max-width:none}
.th{border:1px solid var(--line);border-radius:8px;padding:14px 14px 16px;background:var(--surface)}
.th .meta{display:block;margin-bottom:8px;color:var(--seal);font-size:11.5px;letter-spacing:.08em}
.th b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.th p{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-3);max-width:none}
.themes.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.themes.three{grid-template-columns:1fr}}
@media (max-width:1100px){.themes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.themes{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.themes{grid-template-columns:1fr}}

/* round 30 */
/* 2. softer corners on the flow recordings */
.prose figure.shot.flow{border-radius:12px}
/* 3 + 5. one divider between sections, with more air around it */
.case-page .prose section{margin-bottom:0;padding-bottom:clamp(56px,9vh,104px)}
.case-page .prose section + section{border-top:1px solid var(--line);padding-top:clamp(56px,9vh,104px)}
.case-page .prose section:last-of-type{padding-bottom:clamp(30px,5vh,48px)}
/* 4. reflections read as two columns */
.refl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,48px);max-width:none;margin-top:4px}
.refl .mo{margin-top:0}
.refl .mo>p{max-width:none}
.thanks{margin-top:clamp(30px,5vh,48px)}
@media (max-width:760px){.refl{grid-template-columns:1fr;gap:28px}}

/* round 31 */
/* the future label only exists to the right of the handle */
.compare .cmp-tagwrap{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(0 0 0 var(--pos))}

/* round 32 */
/* 1. rounder recordings */
.prose figure.shot.flow{border-radius:18px}
/* 3. audit row: summary narrow on the left, board wide on the right, both whole */
.prose .pair.audit{grid-template-columns:minmax(0,34fr) minmax(0,66fr);align-items:start}
.prose .pair.audit figure.shot img{height:auto;object-fit:contain;flex:initial}
@media (max-width:700px){.prose .pair.audit{grid-template-columns:1fr}}

/* round 33: options considered + four stats + note */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 26px;max-width:none}
.opt{border:1px solid var(--line);border-radius:8px;padding:15px 16px 17px;background:var(--surface);position:relative}
.opt .meta{display:block;margin-bottom:9px;font-size:11.5px;letter-spacing:.02em}
.opt.no{opacity:.72}
.opt.no .meta{color:var(--ink-3)}
.opt.yes{border-color:var(--seal);background:rgba(229,72,77,.06);opacity:1}
.opt.yes .meta{color:var(--seal)}
.opt b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.opt p{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3);max-width:none}
.opt.no b{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.28);text-decoration-thickness:1px}
@media (max-width:860px){.opts{grid-template-columns:1fr}}
.stats.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.stats.four{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stats.four{grid-template-columns:1fr}}
/* round 39: four stats as two rows of two */
.stats.quad{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.stats.quad{grid-template-columns:1fr}}
.prose p.note{font-size:14px;color:var(--ink-3);line-height:1.5;margin-top:-14px;margin-bottom:1.6em}

/* round 34: client crest beside the opening paragraph */
.lede{display:grid;grid-template-columns:minmax(0,720px) auto;gap:clamp(20px,3vw,40px);align-items:start;max-width:none;margin:0 0 1.1em}
.lede .crest{width:56px;height:56px;flex:0 0 auto;margin-top:4px}
.lede p{margin-bottom:1.1em}
.lede p:last-child{margin-bottom:0}
@media (max-width:640px){.lede{grid-template-columns:1fr;gap:0}.lede .crest{order:-1;width:42px;height:42px;margin:0 0 14px}}
.pull{border-left:2px solid var(--line);padding:2px 0 2px 18px;margin:22px 0 26px;max-width:720px}
.pull p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}

/* archived draft banner (comparison page only) */
.draftbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 34px;padding:14px 18px;border:1px solid var(--seal);border-radius:8px;background:rgba(229,72,77,.08);max-width:none}
.draftbar b{font-size:14px;font-weight:600;color:var(--seal);letter-spacing:.01em}
.draftbar span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.draftbar a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}


/* round 35: one frame size for every card, and a zoom that actually works */
.card .img{overflow:hidden;display:grid;place-items:center}
.card .img .mock{position:relative;inset:auto;z-index:2;display:block;line-height:0;
  width:86%;aspect-ratio:1100/712;max-height:84%;height:auto;
  border:3px solid #fff;border-radius:5px;overflow:hidden;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  transform:none;transform-origin:50% 50%;
  transition:transform .26s cubic-bezier(.33,1,.68,1),box-shadow .4s var(--ease);will-change:transform}
.home-page .card .img .mock{width:86%;height:auto;max-height:84%}
.card .img .mock img{position:static;display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;transform:none}
.card:hover .img .mock{box-shadow:0 26px 50px rgba(0,0,0,.6)}

/* round 36: sap case study — three up row, annotations, lightbox */
/* three projects across one row */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 8px;max-width:none;align-items:start}
.trio figure.shot{margin:0;display:flex;flex-direction:column}
.trio figure.shot img{width:100%;height:clamp(150px,15vw,190px);object-fit:cover;object-position:top center}
.trio figcaption b{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
@media (max-width:820px){.trio{grid-template-columns:1fr}.trio figure.shot img{height:auto}}
/* round 38: five-up variant, three across then two across, both rows full width */
.trio.five{grid-template-columns:repeat(6,1fr)}
.trio.five figure.shot:nth-child(-n+3){grid-column:span 2}
.trio.five figure.shot:nth-child(n+4){grid-column:span 3}
@media (max-width:980px) and (min-width:821px){.trio.five{grid-template-columns:repeat(2,1fr)}.trio.five figure.shot{grid-column:auto!important}}
@media (max-width:820px){.trio.five{grid-template-columns:1fr}.trio.five figure.shot{grid-column:auto!important}}

/* annotated mockups */
.anno .anno-wrap{position:relative;line-height:0}
.anno .anno-wrap img{width:100%;height:auto;display:block}
.anno .pin{position:absolute;transform:translate(-50%,-50%);z-index:3;opacity:0;pointer-events:none;transition:opacity .28s ease}
.anno.on .pin{opacity:1;pointer-events:auto}
.anno .pin>b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--seal);color:#fff;font-size:12.5px;font-weight:600;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:default}
.anno .pin>span{position:absolute;left:34px;top:50%;transform:translateY(-50%);width:230px;padding:9px 12px;border-radius:7px;
  background:rgba(12,12,12,.9);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  color:#fff;font-size:12.5px;line-height:1.45;opacity:0;transition:opacity .22s ease;pointer-events:none}
.anno .pin:hover>span,.anno .pin:focus-within>span{opacity:1}
.anno .pin.flip>span{left:auto;right:34px}
.anno-toggle{position:absolute;top:12px;right:12px;z-index:4;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(12,12,12,.82);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);cursor:pointer;transition:border-color .25s,color .25s}
.anno-toggle:hover{border-color:var(--seal);color:#ff9a9d}
figure.anno{position:relative}
@media (max-width:700px){.anno .pin>span{width:170px;font-size:11.5px}.anno .pin>b{width:22px;height:22px;font-size:11px}}
/* round 41: annotations are reachable by tap, and never hang off the figure */
.anno .pin>b{cursor:pointer}
.anno .pin.open>span{opacity:1;pointer-events:auto}
@media (max-width:560px){.anno .pin>span{width:min(220px,62vw);left:30px}.anno .pin.flip>span{left:auto;right:30px}}
@media (hover:none){.anno .pin>span{transition:opacity .18s ease}}
/* round 42: consistency pass */
/* buttons do not inherit the page typeface on their own, so the notes toggle was rendering in Arial */
button,input,select,textarea{font-family:inherit}
/* attribution under a pull quote matches the one under a blockquote */
.pull small{display:block;margin-top:8px;font-size:13px;color:var(--ink-3);font-weight:400;letter-spacing:0}
/* both quote components share one size */
.quotes div{font-size:16px}
/* round 43: the rail header has to fit three nav items */
.rail-top{gap:12px}
/* tags stay static on touch, where there is no hover to reveal them */
.tag2.static{cursor:default}
.tag2.static .more{display:none}

/* hover a mockup to magnify where the pointer is */
.prose figure.shot.fz{position:relative;overflow:hidden}
.prose figure.shot.fz img{cursor:zoom-in;transition:transform .45s cubic-bezier(.22,.8,.2,1);transform-origin:50% 50%;will-change:transform}
.prose figure.shot.fz.fz-on img{transform:scale(2.1)}
@media (hover:none){.prose figure.shot.fz img{cursor:default}.prose figure.shot.fz.fz-on img{transform:none}}

/* round 37: company logo on the card, fixed while the frame zooms */
.card .img img.colog{position:absolute;inset:auto auto 14px 14px;top:auto;right:auto;z-index:20;
  height:30px;width:auto;max-width:none;max-height:none;object-fit:contain;
  border:0;border-radius:0;box-shadow:none;background:none;margin:0;
  transform:translateZ(0);pointer-events:none;isolation:isolate;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));transition:none}
.card .img img.colog.seatgeek,.card .img img.colog.ibm{border-radius:7px}
.card:hover .img img.colog{transform:translateZ(0)}
@media (max-width:560px){.card .img img.colog{height:24px;inset:auto auto 10px 10px}}
/* the frame and everything inside it zoom as one piece */
.card .img .mock img,.card .img.zoom .mock img,.card:hover .img .mock img{transform:none!important}