:root{color:#161616;background:#ffffff;--ink:#161616;--muted:#676767;--line:#dadfe4;--soft:#f0f5fa;--accent:#c3c8cd;-webkit-font-smoothing:antialiased;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #292929;outline-offset:5px}p,h1,h2,h3,figure,dl{margin:0}img{display:block;max-width:100%;height:auto}button{font:inherit}header,main,footer{width:calc(100% - 96px);max-width:1280px;margin-inline:auto}.header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.wordmark{display:flex;flex-shrink:0}.wordmark img{width:150px;height:auto}nav{display:flex;gap:12px;align-items:center;}nav a{padding:12px 18px;border-radius:5px;transition:background .2s}nav a:hover{background:var(--soft);text-decoration:none}nav a:last-child{background:var(--ink);color:white;padding-inline:24px}.skip{position:fixed;top:-100px;left:20px;padding:14px;background:var(--accent);z-index:50}.skip:focus{top:12px}
.intro{text-align:center;padding:76px 0 74px}.intro-kicker{color:var(--muted);margin-bottom:24px}.focus-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:28px;color:#4f4f4f;}.focus-tags span+span:before{content:'/';padding:0 14px;color:#9ea3a8}.intro-bottom{max-width:680px;margin:24px auto 0}.intro-summary{color:var(--muted);}.intro-actions{margin-top:30px}.hero-buttons{display:flex;justify-content:center;gap:12px}.primary-link,.secondary-link{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 24px;border-radius:5px;}.primary-link{background:var(--accent);color:var(--ink)}.secondary-link{border:1px solid var(--line);background:white}.primary-link:hover{background:#afb4b9;text-decoration:none}.secondary-link:hover{background:var(--soft);text-decoration:none}.intro-actions>p{color:var(--muted);margin-top:20px}.text-link{text-decoration:underline;text-underline-offset:5px}
.work{padding-top:36px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:36px}.section-heading>p{color:var(--muted);display:flex;align-items:center;gap:14px}.work-count{background:var(--accent);padding:6px 9px;border-radius:4px;color:var(--ink);}.project-list{display:grid;gap:28px}.project{display:grid;grid-template-columns: .8fr 1.2fr;border:1px solid #e2e7ec;border-radius:12px;overflow:hidden;min-width:0;min-height:460px;background:#f6f8fa}.project-info{display:flex;flex-direction:column;padding:44px;align-items:flex-start;justify-content:center}.category,.eyebrow{color:var(--muted)}.project-info h3{margin:18px 0}.project-info h3 a:hover{text-decoration:none}.project-description{color:#606060;max-width:380px}.project-role{margin:26px 0;color:#505050}.project-role span{display:block;color:var(--muted);margin-bottom:4px}.case-link{display:inline-flex;align-items:center;border:1px solid #a8adb2;padding:11px 17px;border-radius:5px;background:white;transition:background .2s}.case-link:hover{background:var(--accent);text-decoration:none;border-color:var(--accent)}.project-visual{display:flex;align-items:center;justify-content:center;padding:36px;background:#e7ecf1;min-width:0;overflow:hidden}.project-visual img{width:100%;height:auto;max-height:470px;object-fit:contain;background:white;box-shadow:0 10px 32px #2b2b2b0d;transition:transform .35s}.project-visual:hover img{transform:scale(1.025)}.project:nth-child(2){background:#f0f5fa}.project:nth-child(2) .project-visual{background:#e8edf2}.project:nth-child(3){background:#f0f5fa}.project:nth-child(3) .project-visual{background:#e9eef3}.project:nth-child(4){background:#f0f5fa}.project:nth-child(4) .project-visual{background:#e6ebf0}.project:nth-child(even){grid-template-columns:1.2fr .8fr}.project:nth-child(even) .project-visual{grid-column:1;grid-row:1}.project:nth-child(even) .project-info{grid-column:2}
.banking{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;padding:44px 0;border-block:1px solid var(--line);margin-top:72px}.banking h2{margin:12px 0}.banking h3{margin-bottom:15px}.banking>div>p:not(.eyebrow){color:var(--muted)}.banking .text-link{display:inline-block;margin-top:18px}.work-sharing-note{display:block;color:var(--muted);margin-top:10px}.experience{padding-top:84px}.experience-row{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;padding:28px 0;border-top:1px solid var(--line)}.experience-row h3{margin-bottom:8px}.experience-role{color:var(--muted)}.experience-row>p:last-child{color:#5e5e5e;max-width:650px}.about,.side-project{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;padding:62px 0;border-top:1px solid var(--line)}.about{margin-top:36px}.about p{color:#5e5e5e;}.about p+p{margin-top:18px}.side-project h2{margin-bottom:14px}.side-project>div:last-child>p{color:#5e5e5e}.side-project>div:last-child>p+p{margin-top:24px}.side-project strong{color:var(--ink)}.contact-panel{padding:64px;text-align:center;background:#dee3e8;border-radius:12px;margin:30px 0 64px}.contact-panel h2{margin-bottom:28px}.contact-panel .primary-link{margin:5px}.contact-panel>p:last-child{color:var(--muted);margin-top:22px}footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px 0 38px;border-top:1px solid var(--line);color:var(--muted)}footer>div{display:flex;gap:24px;flex-wrap:wrap}
.case-top{padding:40px 0 24px;max-width:1080px;margin:auto}.back{display:inline-block;color:var(--muted);padding:10px 0;margin-bottom:40px}.case-top h1{margin-bottom:24px}.case-subtitle{max-width:900px;margin-bottom:20px}.case-lead{color:var(--muted);max-width:780px}.case-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;padding:28px 0;border-block:1px solid var(--line);margin-top:36px}dt{color:var(--muted);margin-bottom:7px}dd{margin:0}.story{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;max-width:1080px;margin:72px auto 32px}.story>.eyebrow{padding-top:9px}.story h2{margin-bottom:24px}.story p:not(.eyebrow){margin-bottom:18px;color:#545454}.story strong{color:var(--ink)}.case-figure{margin:36px 0 52px}.image-button{display:block;position:relative;width:100%;padding:28px;border:1px solid #ced3d8;background:#ecf1f6;border-radius:10px;cursor:zoom-in}.image-button img{max-height:1100px;width:auto;margin:auto;object-fit:contain;background:white}.hero-figure{margin-top:40px}.hero-figure img{max-height:760px}.zoom-hint{position:absolute;bottom:12px;right:12px;background:white;border:1px solid var(--line);padding:5px 10px;border-radius:5px}.case-figure figcaption{color:var(--muted);margin:12px 4px}.compact-figure img{max-height:650px}.screen-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:36px 0 52px}.screen-pair .case-figure{margin:0;min-width:0}.results{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px 0;border-block:1px solid var(--line);margin:28px 0}.results span{display:block;color:var(--muted);margin-top:12px}.related-work{margin:48px auto;border-block:1px solid var(--line);padding:24px 0;max-width:1080px}.related-work summary{cursor:pointer;}.related-work[open]>div{margin-top:32px}.three-up{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.next-project{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:40px;background:#dee3e8;border-radius:10px;margin:72px 0}.next-project:hover{text-decoration:none;background:#c7ccd1}
#image-viewer{border:1px solid var(--line);border-radius:12px;max-width:94vw;width:1440px;max-height:94dvh;background:white;padding:0 24px 24px}#image-viewer::backdrop{background:rgb(242 247 252 / 95%)}#image-viewer img{max-height:78dvh;object-fit:contain;margin:auto;background:white}#image-viewer>p{text-align:center;color:var(--muted);margin:16px auto 0}.viewer-tools{position:sticky;top:0;display:flex;justify-content:flex-end;gap:8px;padding:12px 0;background:white;z-index:1}.close-viewer,.size-toggle{border:1px solid var(--line);background:white;border-radius:5px;padding:10px 14px;cursor:pointer}#image-viewer.full-size img{max-width:none;max-height:none}#image-viewer.full-size{overflow:auto}body:has(dialog[open]){overflow:hidden}
@media(max-width:1000px){header,main,footer{width:calc(100% - 48px)}.project,.project:nth-child(even){grid-template-columns:1fr 1.2fr;min-height:380px}.project-info{padding:28px}.project-visual{padding:20px}.project:nth-child(even) .project-visual{grid-column:2}.project:nth-child(even) .project-info{grid-column:1;grid-row:1}.story{grid-template-columns:165px minmax(0,1fr);gap:32px}.banking,.experience-row,.about,.side-project{gap:32px}.contact-panel{padding:48px 24px}}
@media(max-width:650px){header,main,footer{width:calc(100% - 36px)}.header{height:74px;gap:12px}.wordmark img{width:110px}nav{gap:0}nav a{padding:10px;}nav a:last-child{padding:10px 12px}.intro{padding:52px 0}.intro-kicker{margin-bottom:22px}.focus-tags{margin-top:22px}.intro-bottom{margin-top:22px}.primary-link,.secondary-link{padding:13px 18px;min-height:48px}.work{padding-top:28px}.section-heading{align-items:flex-start;gap:16px;margin-bottom:26px}.section-heading>p{max-width:135px;gap:8px;}.project,.project:nth-child(even){display:flex;flex-direction:column;min-height:0;border-radius:9px}.project-visual{order:-1;padding:22px;min-height:220px}.project-visual img{max-height:340px}.project-info{padding:28px}.project-role{margin:20px 0}.banking,.experience-row,.about,.side-project{grid-template-columns:1fr;gap:22px}.banking{margin-top:48px;padding:32px 0}.experience{padding-top:48px}.experience-row{padding:26px 0;gap:14px}.about,.side-project{padding:36px 0}.contact-panel{padding:40px 18px;margin:20px 0 40px}.contact-panel .primary-link{max-width:100%;overflow-wrap:anywhere}footer{gap:20px}footer>div{gap:18px}.case-top{padding-top:22px}.back{margin-bottom:26px}.case-top h1{overflow-wrap:anywhere}.case-meta{grid-template-columns:1fr;gap:20px}.story{display:block;margin-top:44px}.story>.eyebrow{margin-bottom:14px;padding:0}.image-button{padding:10px;border-radius:6px}.case-figure{margin:28px 0 36px}.screen-pair{grid-template-columns:1fr;gap:26px}.results{gap:20px}.three-up{grid-template-columns:1fr}.next-project{padding:24px;gap:18px;margin-top:44px;flex-wrap:wrap}#image-viewer{padding-inline:10px}}
@media(max-width:370px){nav a{padding:8px 7px}nav a:last-child{display:none}.hero-buttons{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Clean Ramp-inspired layout with a personal pink-violet accent. */
:root{--ink:#161616;--muted:#656565;--line:#dfe4e9;--accent:#c3c8cd;--soft:#f2f7fc;color:var(--ink)}
.hero-highlight{color:#4a4a4a}
.primary-link{background:#eaeff4}
.primary-link:hover{background:#eaeff4}
.contact-panel{background:#eaeff4}
.contact-panel .primary-link{background:var(--ink);color:white}
.contact-panel .primary-link:hover{background:#2c2c2c}
.results strong{color:#4a4a4a}
.project:nth-child(2) .project-visual{background:#e6ebf0}
.project:nth-child(4) .project-visual{background:#e8edf2}
#image-viewer::backdrop{background:rgb(246 246 246 / 96%)}

/* Portfolio: personal introduction followed by a visual project index. */
nav a:last-child{background:transparent;color:var(--ink);padding-inline:18px}nav a:last-child:hover{background:var(--soft)}
.portfolio-intro{text-align:left;display:grid;grid-template-columns:1.7fr 1fr;align-items:end;gap:72px;padding:64px 0 58px}.portfolio-intro .intro-kicker{color:#4a4a4a;margin-bottom:16px}.portfolio-intro .intro-summary{max-width:650px;margin-top:40px}.intro-details{padding-bottom:4px;color:var(--muted);}.intro-details p+p{margin-top:10px}.intro-details .text-link{display:inline-block;color:var(--ink);margin-top:18px}
.work{padding-top:28px}.project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}.project,.project:nth-child(even){display:flex;flex-direction:column;border:0;border-radius:0;min-height:0;background:white}.project-visual{order:-1;height:330px;border-radius:10px;padding:28px}.project-visual img{max-height:100%;width:100%;object-fit:contain}.project-info{padding:24px 0 0;display:block}.project-info h3{margin:10px 0 12px}.project-description{max-width:none;}.project-role{margin:16px 0 12px;}.project-role span{display:none}.case-link{padding:0;border:0;border-radius:0;text-decoration:underline;text-underline-offset:5px}.case-link:hover{background:transparent;color:#4a4a4a}.project:nth-child(2),.project:nth-child(3),.project:nth-child(4){background:white}
.portfolio-contact{display:grid;grid-template-columns:1fr 1.5fr;text-align:left;gap:60px;border-top:1px solid var(--line);background:none;border-radius:0;padding:42px 0;margin:0 0 24px}.portfolio-contact p+p{margin-top:14px}.portfolio-contact>div>p:last-child{color:var(--muted);margin-top:22px}
@media(max-width:1000px){.portfolio-intro{gap:32px;grid-template-columns:1.5fr 1fr}.project-visual{height:270px;padding:20px}}
@media(max-width:650px){.portfolio-intro{display:block;padding:40px 0}.portfolio-intro .intro-summary{margin-top:28px}.intro-details{margin-top:24px}.project-list{grid-template-columns:1fr;gap:36px}.project-visual{height:260px;min-height:0}.project-info{padding:20px 0 0}.section-heading>p{max-width:150px}.portfolio-contact{grid-template-columns:1fr;gap:8px;padding:32px 0}}

/* Soft, rounded controls across the portfolio. */
nav a,.primary-link,.secondary-link,.case-link,.close-viewer,.size-toggle,.zoom-hint{border-radius:999px;transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease}
nav a:last-child{background:#e7ecf1;color:#3a3a3a}
nav a:last-child:hover{background:#dadfe4}
.case-link{padding:11px 19px;background:#e7ecf1;color:#3a3a3a;text-decoration:none;min-height:44px}
.case-link:hover{background:#dadfe4;color:#313131;text-decoration:none}
.close-viewer,.size-toggle{padding:10px 18px}
.close-viewer:hover,.size-toggle:hover{background:#e7ecf1;border-color:#c2c7cc}
.image-button{border-radius:18px}.project-visual{border-radius:18px}.next-project{border-radius:20px}#image-viewer{border-radius:20px}
@media(prefers-reduced-motion:reduce){nav a,.primary-link,.secondary-link,.case-link,.close-viewer,.size-toggle,.zoom-hint{transition:none}}

/* Keep navigation visible while reading the portfolio. */
.header{position:sticky;top:0;z-index:30;background:#ffffff;border-bottom:0}
.header::before{content:"";position:absolute;inset:0 calc((100vw - 100%) / -2);background:#ffffff;border-bottom:1px solid var(--line);z-index:-1;pointer-events:none}
@media(max-width:650px){html{scroll-padding-top:90px}}

/* Each project carries its own palette from the index into the case study. */
[data-case="cls-motion-trade"]{--case-bg:#ecf1f6;--case-border:#d7dce1;--case-ink:#585858;--case-hover:#e1e6eb}
[data-case="neuron"]{--case-bg:#e7ecf1;--case-border:#d0d5da;--case-ink:#535353;--case-hover:#d9dee3}
[data-case="the-number"]{--case-bg:#ebf0f5;--case-border:#d7dce1;--case-ink:#5d5d5d;--case-hover:#e0e5ea}
[data-case="bookbook"]{--case-bg:#e9eef3;--case-border:#d4d9de;--case-ink:#5f5f5f;--case-hover:#dee3e8}
.project[data-case] .project-visual{background:var(--case-bg)}
.project[data-case] .case-link{background:var(--case-bg);color:var(--case-ink)}
.project[data-case] .case-link:hover{background:var(--case-hover)}
body[data-case]:not([data-case=""]) .image-button{background:var(--case-bg);border-color:var(--case-border)}
body[data-case]:not([data-case=""]) .results strong{color:var(--case-ink)}
body[data-case]:not([data-case=""]) .next-project{background:var(--case-bg)}
body[data-case]:not([data-case=""]) .next-project:hover{background:var(--case-hover)}

/* Screen-led diagrams: white canvas, floating evidence, solid connections. */
.visual-diagram{margin:56px 0 72px;padding:56px 40px;background:#ffffff;border:1px solid var(--case-border,var(--line));border-radius:24px;overflow:hidden}
.diagram-heading{text-align:center;max-width:820px;margin:0 auto 48px}.diagram-heading h2{margin-bottom:18px}.diagram-heading p{color:var(--muted);}
.diagram-row{display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));gap:44px;align-items:start;margin:30px 0 64px;position:relative}.diagram-row.connected{grid-template-columns:repeat(calc(var(--steps) * 2 - 1),minmax(0,1fr));gap:0}.diagram-row.connected>.diagram-item{grid-column:span 1}.diagram-row.connected{grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr)}.diagram-row.connected[style="--steps:3"]{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr)}.diagram-row.connected[style="--steps:4"]{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr)}
.diagram-item{min-width:0}.diagram-item h4{margin:0 0 16px;}.diagram-item p{color:var(--muted);margin:18px 0 0}.diagram-row>.diagram-item:nth-of-type(even){padding-top:38px}.diagram-screen{display:block;border:0;padding:0;background:white;border-radius:14px;overflow:hidden;width:100%;cursor:zoom-in;box-shadow:0 14px 35px #20202020,0 2px 6px #2020200b}.diagram-screen>img{width:100%;height:auto}.diagram-crop{display:block;position:relative;overflow:hidden;width:100%;background:white}.diagram-crop img{position:absolute;height:auto;display:block}.diagram-screen:hover{box-shadow:0 18px 42px #20202029}.diagram-note{padding:26px!important;border:1px solid #e7ecf1;border-radius:16px;background:#ffffff;box-shadow:0 12px 30px #1919190b}.diagram-note h4{color:var(--case-ink,var(--ink))}.diagram-connection{align-self:center;margin-top:-40px}.diagram-connection svg{width:100%;overflow:visible}.diagram-connection path{fill:none;stroke:#9b9b9b;stroke-width:1.5;stroke-dasharray:none;stroke-linecap:round}.diagram-row-label{color:var(--case-ink,var(--muted));margin:52px 0 24px}.diagram-footnote{max-width:760px;text-align:center;margin:24px auto 0;color:var(--muted);}.visual-diagram>.diagram-item{max-width:780px;margin:48px auto 64px}.visual-diagram .diagram-row:last-child{margin-bottom:0}
@media(max-width:900px){.visual-diagram{padding:40px 24px}.diagram-row{gap:24px}.diagram-note{padding:18px!important}}
@media(max-width:650px){.visual-diagram{padding:30px 20px;border-radius:18px;margin:32px 0 44px}.diagram-heading{margin-bottom:32px}.visual-diagram .diagram-row,.visual-diagram .diagram-row.connected{display:flex;flex-direction:column;gap:24px;margin-bottom:36px}.diagram-item{width:100%;max-width:440px;margin-inline:auto}.diagram-row>.diagram-item:nth-of-type(even){padding-top:0}.diagram-crop{max-width:250px;margin:auto}.diagram-screen:has(.diagram-crop){max-width:250px;margin:auto}.diagram-connection{width:42px;height:40px;transform:rotate(90deg);margin:0;align-self:center}.diagram-row-label{margin-top:38px}.visual-diagram>.diagram-item{margin:32px auto}}

.diagram-screen:has(.diagram-crop){max-width:250px;margin-inline:auto}

.diagram-row.connected[style="--steps:4"]{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr)}
.diagram-connection path{stroke:#7d7d7d;stroke-width:1.1}

/* Distinguish the experience section title from individual companies. */
.experience>.section-heading{margin-bottom:44px;align-items:baseline}
@media(max-width:650px){.experience>.section-heading{margin-bottom:30px;flex-wrap:wrap;gap:14px}}

/* Loose, individually routed connectors inspired by the reference. */
.diagram-row.connected{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr)}
.diagram-row.connected[style="--steps:3"]{grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr) 100px minmax(0,1fr)}
.diagram-row.connected[style="--steps:4"]{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr) 80px minmax(0,1fr) 80px minmax(0,1fr)}
.diagram-connection{align-self:start;margin:100px 0 0;pointer-events:none;width:100%;height:auto;transform:none}
.diagram-connection svg{display:block;width:100%;height:auto;overflow:visible}
.diagram-connection .arrow-line{stroke:#8b8b8b;stroke-width:1.3;stroke-dasharray:none;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}
.diagram-connection .arrow-tip{stroke:#8b8b8b;stroke-width:1.2;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;fill:none}
.diagram-connection .arrow-mobile{display:none}
.diagram-row:has(.diagram-note)>.diagram-connection{margin-top:10px}
@media(max-width:900px) and (min-width:651px){.diagram-row.connected[style="--steps:4"]{grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr) 45px minmax(0,1fr) 45px minmax(0,1fr)}.diagram-row.connected[style="--steps:3"]{grid-template-columns:minmax(0,1fr) 65px minmax(0,1fr) 65px minmax(0,1fr)}}
@media(max-width:650px){.diagram-connection,.diagram-row:has(.diagram-note)>.diagram-connection{width:100px;height:110px;align-self:center;margin:0;transform:none}.diagram-connection .arrow-desktop{display:none}.diagram-connection .arrow-mobile{display:block;height:110px;width:100px}.visual-diagram .diagram-row.connected{gap:12px}}

/* Clean interface exports keep captions in accessible HTML. */
.diagram-screen.phone-screen{max-width:280px;margin-inline:auto}
/* BookBook cover: a product composition, separate from the flow diagrams. */
.book-cover{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:1.75;background:#a29af2;border-radius:24px}
.book-cover-phone{display:block;position:absolute;width:29%;padding:5px;border:1px solid #ffffffb8;border-radius:29px;background:#f1f6fb;box-shadow:0 28px 40px -20px #4b4b4b65,0 8px 18px #4e4e4e1a;overflow:hidden;line-height:0}
.book-cover-phone img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;border-radius:24px;background:white;box-shadow:none!important;transform:none!important}
.book-cover-phone.phone-back{left:18%;top:11%;transform:rotate(-11deg);z-index:1}
.book-cover-phone.phone-front{left:50%;top:20%;transform:rotate(10deg);z-index:2}
button.book-cover-phone{cursor:zoom-in}
.project[data-case="bookbook"] .project-visual{padding:0}
.project-visual .book-cover{height:100%;border-radius:inherit;aspect-ratio:auto}
.project-visual .book-cover-phone{width:31%;padding:3px;border-radius:22px}
.project-visual .book-cover-phone img{border-radius:19px}
.project-visual .phone-back{left:17%;top:12%}
.project-visual .phone-front{left:51%;top:22%}
@media(max-width:650px){.book-cover{border-radius:18px;aspect-ratio:1.45}.book-cover-phone{padding:3px;border-radius:16px;width:34%}.book-cover-phone img{border-radius:13px}.book-cover-phone.phone-back{left:12%;top:12%}.book-cover-phone.phone-front{left:51%;top:22%}.project-visual .book-cover-phone{width:34%;border-radius:18px}.project-visual .book-cover-phone img{border-radius:15px}.diagram-screen.phone-screen{max-width:250px}}

/* BookBook: compact reading scale, with full-size screens available on click. */
body[data-case="bookbook"] .visual-diagram{padding:30px 32px;margin:30px 0 42px}
body[data-case="bookbook"] .diagram-heading{max-width:760px;margin:0 auto 28px}
body[data-case="bookbook"] .diagram-heading h2{margin-bottom:10px}
body[data-case="bookbook"] .diagram-row{gap:24px;margin:20px auto 30px;max-width:980px}
body[data-case="bookbook"] .diagram-row.connected{gap:0;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
body[data-case="bookbook"] .diagram-row[style="--steps:2"]{max-width:660px}
body[data-case="bookbook"] .diagram-row.connected[style="--steps:3"]{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr)}
body[data-case="bookbook"] .diagram-row.connected[style="--steps:4"]{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr)}
body[data-case="bookbook"] .diagram-screen.phone-screen{max-width:150px;border-radius:12px;box-shadow:0 8px 20px #20202016}
body[data-case="bookbook"] .diagram-item h4{margin-bottom:10px}
body[data-case="bookbook"] .diagram-item p{margin-top:12px}
body[data-case="bookbook"] .diagram-row>.diagram-item:nth-of-type(even){padding-top:16px}
body[data-case="bookbook"] .diagram-connection{margin-top:95px}
body[data-case="bookbook"] .diagram-row-label{margin:28px 0 12px;}
body[data-case="bookbook"] .diagram-note{padding:18px!important}
body[data-case="bookbook"] .diagram-footnote{margin-top:16px}
@media(max-width:650px){
 body[data-case="bookbook"] .visual-diagram{padding:24px 18px;margin:24px 0 32px}
 body[data-case="bookbook"] .diagram-heading{margin-bottom:22px;text-align:left}
 body[data-case="bookbook"] .visual-diagram .diagram-row{display:flex;flex-direction:row;align-items:flex-start;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 3px 18px;margin:16px 0 22px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#b3b8bd transparent}
 body[data-case="bookbook"] .diagram-row>.diagram-item{flex:0 0 155px;width:155px;max-width:none;margin:0;padding-top:0;scroll-snap-align:start}
 body[data-case="bookbook"] .diagram-screen.phone-screen{max-width:135px}
 body[data-case="bookbook"] .diagram-item h4{min-height:36px;margin-bottom:8px}
 body[data-case="bookbook"] .diagram-connection{flex:0 0 40px;width:40px;height:auto;align-self:flex-start;margin:105px -8px 0}
 body[data-case="bookbook"] .diagram-connection .arrow-desktop{display:block;width:40px;height:auto}
 body[data-case="bookbook"] .diagram-connection .arrow-mobile{display:none}
 body[data-case="bookbook"] .diagram-row-label{margin-top:22px;}
}
body[data-case="bookbook"] .supporting-screens{border-top:1px solid var(--case-border);margin-top:24px}
body[data-case="bookbook"] .supporting-screens summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:18px 0 0;color:var(--case-ink);list-style:none}
body[data-case="bookbook"] .supporting-screens summary::-webkit-details-marker{display:none}
body[data-case="bookbook"] .supporting-screens summary::after{content:'+';}
body[data-case="bookbook"] .supporting-screens[open] summary::after{content:'−'}
body[data-case="bookbook"] .supporting-screens summary:focus-visible{outline:2px solid var(--case-ink);outline-offset:5px;border-radius:4px}
body[data-case="bookbook"] .supporting-content{padding-top:8px}
@media(max-width:650px){}

/* Tactile project folders: real work peeking out of a neutral file cover. */
.project-list{gap:44px 36px}
.project.folder-project{overflow:visible}
.project-folder{display:block;position:relative;isolation:isolate;height:370px;margin:12px 0 0;text-decoration:none;perspective:2000px;border-radius:28px}
.project-folder:hover{text-decoration:none}
.folder-back{position:absolute;inset:15px 0 0;border:1px solid #d5dde5;border-radius:28px;background:linear-gradient(145deg,#e0e6ec,#edf1f5 65%,#e3e9ef);box-shadow:inset 0 2px 8px #00000008}
.folder-paper{display:block;position:absolute;inset:44px 23px 20px;background:white;border:1px solid #e4e9ee;border-radius:17px;box-shadow:0 3px 12px #00000009;transform-origin:50% 100%;transition:transform .35s ease}
.paper-back{transform:rotate(-4deg);inset:37px 32px 26px}
.paper-preview{transform:rotate(2deg);overflow:hidden;padding:12px}
.paper-preview img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:8px}
.folder-project[data-case="bookbook"] .paper-preview img{object-fit:contain;background:#f8fafc}
.folder-face{position:absolute;inset:105px 0 0;transform-origin:50% 100%;transition:transform .4s cubic-bezier(.2,.65,.3,1)}
.folder-front{position:absolute;inset:0;filter:drop-shadow(0 -5px 12px #00000008)}
.folder-front svg{display:block;width:100%;height:100%;overflow:visible}
.folder-label{position:absolute;inset:60px 32px 25px;display:flex;flex-direction:column;pointer-events:none}
.folder-number{color:#747474;margin-bottom:12px}
.folder-label h3{margin:0 0 10px;max-width:430px;color:#202020}
.folder-label p{color:#666;max-width:85%}
.folder-open{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:#646464;padding-top:16px}
.folder-open>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d0d5da;border-radius:50%;background:#ffffff80;transition:background .25s ease,transform .25s ease}
.project-folder:hover .paper-preview,.project-folder:focus-visible .paper-preview{transform:translateY(-14px) rotate(4deg)}
.project-folder:hover .paper-back,.project-folder:focus-visible .paper-back{transform:translateY(-8px) rotate(-6deg)}
.project-folder:hover .folder-face,.project-folder:focus-visible .folder-face{transform:rotateX(-28deg)}
.project-folder:hover .folder-open>span,.project-folder:focus-visible .folder-open>span{background:#fff;transform:translate(2px,-2px)}
.folder-project .project-info{padding:22px 8px 0}
.folder-project .project-role{margin:12px 0 0;color:#777}
@media(max-width:1000px){.project-folder{height:350px}.folder-label{inset:60px 24px 22px}.folder-face{top:95px}}
@media(max-width:650px){.project-list{gap:34px}.project-folder{height:350px;margin-top:4px}.folder-face{top:90px}.folder-label{inset:58px 24px 22px}.folder-project .project-info{padding:18px 4px 0}}
@media(prefers-reduced-motion:reduce){.folder-paper,.folder-face,.folder-open>span{transition:none}.project-folder:hover .folder-paper,.project-folder:focus-visible .folder-paper{transform:none}.project-folder:hover .folder-face,.project-folder:focus-visible .folder-face{transform:none}}

.pivot-screen-comparison{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 52px}.pivot-screen-comparison>div{min-width:0}.pivot-screen-comparison .eyebrow{margin-bottom:16px}.pivot-screen-comparison .case-figure{margin:0}.pivot-screen-comparison .image-button{height:460px;padding:16px;display:flex;align-items:flex-start;justify-content:center}.pivot-screen-comparison .image-button img{max-height:100%;max-width:100%;width:auto;height:auto;margin:0;object-fit:contain}.pivot-screen-comparison figcaption{max-width:48ch}@media(max-width:650px){.pivot-screen-comparison{grid-template-columns:1fr;gap:28px}.pivot-screen-comparison .image-button{height:auto;max-height:none}.pivot-screen-comparison .image-button img{max-height:520px}}