@font-face{font-family:Archivo;src:url('assets/archivo-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('assets/archivo-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url('assets/archivo-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Syne;src:url('assets/fonts/syne-variable.ttf') format('truetype');font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{color-scheme:light;--paper:#f3ebe4;--card:#fcf6f0;--ink:#342924;--muted:#6b5a52;--line:#d0baad;--accent:#9b4936;--soft:#e9dace;--pine:#2f4a3c;--pine-line:#a9bcaf;--band:#e8e9e0;--select:#dccff5;--ridge:#342924;--frame:#976754;--halftone-dot:#a15b45;--field-line:#b69a8b;--placeholder:#73766e;--hairline:rgba(52,41,36,.12);--logo-ink:brightness(0) opacity(.78);--sun:#eeb38f;--sun-halo:rgba(238,179,143,.22);--moon:#eee3cf;--star:#f3eadf;--contour:rgba(151,103,84,.32);--contour-lit:#9b4936;--contour-glow:rgba(155,73,54,.4);font-family:Manrope,Archivo,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
/* Dark theme: theme.js sets data-theme from the viewer's system setting, or their own choice. */
:root[data-theme="dark"]{color-scheme:dark;--paper:#1c1815;--card:#25201c;--ink:#eee5da;--muted:#b3a497;--line:#4a3e36;--accent:#e0896a;--soft:#2e2621;--pine:#93b89f;--pine-line:#3e5546;--band:#202620;--select:#4b3c7a;--ridge:#0f0d0c;--frame:#b98a73;--halftone-dot:#c2705a;--field-line:#6b5d53;--placeholder:#9a8b7f;--hairline:rgba(255,240,225,.09);--logo-ink:brightness(0) invert(1) opacity(.82);--contour:rgba(147,184,159,.2);--contour-lit:rgba(246,196,140,.9);--contour-glow:rgba(246,190,120,.55)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
/* Selected text takes the lavender of the climbing rope. */
::selection{background:var(--select);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-family:Syne,Manrope,Arial,sans-serif;line-height:1.16;letter-spacing:-.035em;font-weight:600}
.shell{width:calc(100% - 88px);max-width:1160px;margin-inline:auto}
.site-header{height:92px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.wordmark{font-family:Syne,Manrope,Arial,sans-serif;font-size:21px;letter-spacing:-.035em;font-weight:600;min-height:44px;display:flex;align-items:center}
.name-dot{color:var(--accent)}
.site-header nav{display:flex;gap:30px;align-items:center;font-size:13px}
.site-header nav a{min-height:44px;display:flex;align-items:center}
.site-header a:hover,.text-link:hover,.back-link:hover,.site-footer a:hover,.timeline a:hover{color:var(--accent)}
.resume-nav{gap:13px}
.home-intro{display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-areas:"heading portrait" "copy portrait";gap:20px 72px;align-items:start;padding:45px 0 43px}
.intro-heading{grid-area:heading}
.intro-portrait{grid-area:portrait;align-self:center;width:290px;height:auto;aspect-ratio:1;object-fit:cover}
.eyebrow,.category{font-size:12px;line-height:1.5;color:var(--muted);letter-spacing:0}
.home-intro h1{font-size:clamp(38px,4.9vw,66px);margin-top:18px;letter-spacing:-.055em;font-weight:600;line-height:1.03}
.intro-copy{grid-area:copy;max-width:690px;padding-bottom:2px}
.intro-copy p{font-size:16px;line-height:1.65;margin-bottom:12px}
.intro-copy p+p{font-size:13px;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;min-height:44px;gap:24px;font-size:13px;font-weight:600;border-bottom:1px solid currentColor}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:24px}
.section-heading h2{font-size:28px}
.section-heading p{font-size:13px;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px}
.project-card{border:1px solid var(--line);background:var(--card);min-width:0;transition:border-color .18s}
.project-card:hover{border-color:var(--muted)}
.card-media{display:block}
.project-card{display:flex;flex-direction:column}
.card-copy{display:flex;flex-direction:column;flex:1}
.card-heading a:hover{color:var(--accent)}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 27px;border-bottom:1px solid var(--line)}
.card-heading h3{font-size:24px}
.card-heading .category{text-align:right}
.card-image{aspect-ratio:16/9;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.portfolio-home .card-image video{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.portfolio-home .work-index .work-museum .project-media-frame::before{bottom:32px}
.contain-image img{object-fit:contain;padding:24px}
.card-media:hover .card-image img{transform:scale(1.015)}
.card-copy{padding:24px 27px 25px}
.card-copy h3{font-size:25px;margin:8px 0 11px;display:flex;justify-content:space-between;gap:10px}
.card-copy h3 span{font-size:21px;font-weight:400;color:var(--muted)}
.card-copy>p{font-size:15px;line-height:1.65;max-width:440px;min-height:50px}
.card-role{display:block;font-size:12px;color:var(--muted);margin-top:18px}
.card-action{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;margin-top:18px;font-size:12px;font-weight:600;min-height:44px;align-items:center}
.card-action:hover{color:var(--accent)}
.document-preview{padding:9% 10%;height:100%;display:flex;flex-direction:column;justify-content:space-between;background:#e5e9df;color:#3b4935}
.document-preview>span{font-size:11px}
.document-preview strong{font-size:clamp(25px,3vw,40px);line-height:1.15;font-weight:400;letter-spacing:-.04em}
.document-rule{height:1px;background:#bac3b3;width:100%}
.studio-feature{margin-top:28px;padding:33px 36px;border:1px solid var(--line);display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center}
.studio-feature h3{font-size:27px;margin:10px 0 14px}
.studio-feature p{font-size:14px;line-height:1.7;max-width:465px}
.studio-feature .text-link{margin-top:10px}
.verdant-banner{display:block;width:100%;height:auto;aspect-ratio:4/1;object-fit:contain}
.verdant-cover{margin-bottom:44px}
.background-section{padding:86px 0 0}
.background-section .section-heading{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:0}
.background-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:10%}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:125px 1fr;gap:25px;border-bottom:1px solid var(--line);padding:28px 0}
.timeline-date{font-size:12px;color:var(--muted);padding-top:3px;line-height:1.6}
.timeline h3{font-size:19px;line-height:1.25}
.company{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.timeline p{font-size:13px;margin-top:11px}
.timeline a{display:inline-flex;align-items:center;min-height:38px;font-size:12px;font-weight:600;gap:15px;margin-top:6px}
.education{padding-top:29px}
.education h3{font-size:17px;margin:0 0 19px}
.education>div{margin-bottom:20px}
.education strong{font-size:14px;font-weight:600}
.education p{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.7}
.education h3:not(:first-child){margin-top:30px;margin-bottom:14px}
.contact-section{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:60px;align-items:center;margin:72px 0 52px;padding-top:36px;border-top:1px solid var(--ink)}
.contact-section h2{font-size:clamp(25px,3vw,39px);max-width:650px}
.contact-copy>p{font-size:14px;color:var(--muted);margin-top:15px}
.contact-portrait{width:180px;height:auto;aspect-ratio:1;object-fit:cover}
.email-link{font-size:clamp(18px,2.4vw,29px);display:inline-flex;gap:26px;min-height:44px;align-items:center;margin-top:18px;letter-spacing:-.03em;color:var(--accent)}
.footer-landscape{width:100%;height:clamp(64px,8.75vw,140px);margin-top:20px;overflow:hidden;line-height:0;pointer-events:none}
.footer-landscape svg{display:block;width:100%;height:100%}
.site-footer{border-top:1px solid var(--line);padding-block:23px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}
.site-footer>div{display:flex;gap:24px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.case-page{padding-top:28px}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:30;background:var(--line);pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.reading-progress[hidden],.reading-position[hidden]{display:none}
.case-nav nav>.reading-position{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600;margin-top:-9px;margin-bottom:10px}
.motion-controls{display:flex;justify-content:flex-end;margin-top:5px}
.motion-controls button{border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--accent);font:inherit;font-size:12px;min-height:38px;padding:0 2px}
.motion-controls button[hidden]{display:none}
.case-demo,.edit-study{margin-top:28px}
.case-demo video{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--soft)}
.case-demo:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.demo-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:9px;font-size:12px;color:var(--muted)}
.demo-actions button,.demo-actions a{background:none;border:0;border-bottom:1px solid currentColor;color:var(--ink);padding:3px 0;min-height:36px;font-size:12px}
.demo-actions button[hidden]{display:none}
.edit-instructions{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.edit-instructions>div{display:grid;grid-template-columns:110px 1fr;gap:24px}
.edit-instructions dt{font-size:12px;color:var(--muted)}
.edit-instructions dd{font-size:14px;line-height:1.65;max-width:690px}
.edit-study-views{display:flex;gap:26px;margin:6px 0 15px}
.edit-study-views[hidden]{display:none}
.edit-study-views button{background:none;border:0;border-bottom:2px solid transparent;padding:7px 0;min-height:40px;font-size:13px;color:var(--muted)}
.edit-study-views button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.edit-study-image{position:relative;background:var(--soft)}
.edit-study-image img{display:block;width:100%;height:auto}
.edit-study-mask{position:absolute;inset:0;pointer-events:none;background:rgba(109,231,184,.5);mask-size:100% 100%;mask-mode:luminance;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.edit-study-mask[hidden]{display:none}
@media(hover:none){.demo-actions>span{display:none}}
@media(max-width:520px){.edit-instructions>div{grid-template-columns:75px 1fr;gap:14px}.edit-study-views{gap:22px}.demo-actions{gap:18px}}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.case-heading{padding:27px 0 35px}
.case-heading h1{font-size:clamp(42px,6vw,76px);line-height:1.04;letter-spacing:-.055em;margin:12px 0 18px}
.case-tagline{font-size:clamp(19px,2.3vw,27px);line-height:1.4;letter-spacing:-.025em;max-width:800px}
.case-meta{display:grid;grid-template-columns:1.1fr .7fr 1.3fr;gap:30px;border-top:1px solid var(--line);padding-top:24px;margin-top:32px}
.case-meta dt{font-size:12px;color:var(--muted);margin-bottom:7px}
.case-meta dd{font-size:13px;line-height:1.65;max-width:375px}
.project-figure{margin-top:27px;min-width:0}
.video-loop>video{display:block;width:100%;height:auto;aspect-ratio:auto;border:1px solid var(--line);background:#101010}
.video-loop .motion-controls{justify-content:space-between;align-items:center;gap:20px}
.video-loop .motion-controls a{font-size:11px;text-decoration:underline;text-underline-offset:3px}
.orb-study{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center;gap:42px;margin-top:34px}
.orb-loop{margin-top:0}
.orb-loop>video{border-radius:50%;border:0}
.orb-study h3{font-size:24px;margin-bottom:18px}
.orb-study p{font-size:15px;line-height:1.85}
.orb-study p+p{margin-top:15px}
@media(max-width:600px){.orb-study{grid-template-columns:1fr;gap:23px}.orb-loop{width:min(100%,300px);margin-inline:auto}.orb-study h3{font-size:22px}}
.artist-display{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:50px;margin:34px 0 0;padding:32px 0;border-block:1px solid var(--line)}
.artist-display[hidden],.resident-list[hidden]{display:none}
.orb-preview{min-width:0}
.orb-preview canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;image-rendering:pixelated}
.orb-preview figcaption{margin-top:16px}
.artist-display fieldset{min-width:0;border:0;padding:0;margin:0}
.artist-display legend{width:100%;font-size:12px;font-weight:600;letter-spacing:0;margin-bottom:12px}
.orb-artists legend{display:flex;justify-content:space-between;gap:15px}
.orb-artists legend span{font-size:11px;font-weight:400;color:var(--muted)}
.orb-artist-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:51px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.orb-artist-option:has(input:checked){background:var(--card);font-weight:600}
.orb-artist-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;z-index:1}
.orb-artist-name{display:flex;align-items:center;gap:11px;font-size:16px}
.orb-artist-name::before{content:'';width:7px;height:7px;border:1px solid currentColor;border-radius:50%}
.orb-artist-option:has(input:checked) .orb-artist-name::before{background:currentColor}
.orb-swatches{display:flex;flex-shrink:0;border:1px solid var(--line)}
.orb-swatches i{display:block;width:20px;height:17px}
.orb-artist-notes{margin-top:26px;min-height:144px}
.orb-artist-notes h3{font-size:23px;margin-bottom:13px}
.orb-artist-notes p{font-size:14px;line-height:1.8}
.orb-artist-notes .orb-voice{font-size:12px;color:var(--muted);margin-top:10px}
.orb-voice>span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.artist-display .orb-modes{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:27px}
.orb-modes label{display:flex;align-items:center;gap:8px;font-size:12px;min-height:38px;cursor:pointer}
.orb-modes input{accent-color:var(--accent);width:14px;height:14px;margin:0}
.orb-state-note{font-size:12px;line-height:1.7;min-height:41px;margin-top:12px;color:var(--muted)}
.orb-play{padding:6px 0;min-height:40px;font-size:12px;background:transparent;border:0;border-bottom:1px solid currentColor;color:var(--accent)}
@media(max-width:1000px){.artist-display{grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:30px}.orb-artist-option{gap:10px;padding-inline:9px}.orb-swatches i{width:16px}}
@media(max-width:760px){.artist-display{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}}
@media(max-width:600px){.artist-display{grid-template-columns:1fr;gap:26px;padding:24px 0}.orb-preview{order:1;width:min(100%,300px);margin-inline:auto}.orb-choices{display:contents}.orb-artists{order:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.orb-artists legend{grid-column:1/-1}.orb-artist-option{min-height:44px;padding:9px 6px;gap:6px}.orb-artist-option:last-child{grid-column:1/-1}.orb-artist-name{font-size:13px;gap:6px}.orb-swatches i{width:11px;height:14px}.orb-artist-notes{order:2;min-height:0;margin-top:0}}
.image-button{padding:0;border:1px solid var(--line);background:var(--soft);display:block;position:relative;width:100%;overflow:hidden}
.image-button img{width:100%;height:auto}
.image-zoom{position:absolute;bottom:12px;right:12px;background:var(--card);color:var(--ink);padding:5px 10px;font-size:10px;opacity:0;transition:opacity .15s}
.image-button:hover .image-zoom,.image-button:focus-visible .image-zoom{opacity:1}
figcaption{font-size:12px;color:var(--muted);line-height:1.6;margin-top:11px;max-width:800px}
.case-cover{margin-top:0;margin-bottom:46px}
.case-cover .image-button{max-height:655px}
.case-cover img{max-height:655px;object-fit:contain}
.gybe-cover .image-button{padding:32px;background:var(--soft)}
.gybe-cover img{max-height:530px}
.case-layout{display:grid;grid-template-columns:175px minmax(0,1fr);gap:70px;align-items:start}
.case-content{min-width:0}
.case-nav{position:sticky;top:35px;padding-top:5px}
.case-nav nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.case-nav nav>span{font-size:12px;color:var(--muted);margin-bottom:4px}
.case-nav a{font-size:12px;line-height:1.55;display:block;padding-block:4px}
.case-nav a:hover{color:var(--accent)}
.case-nav .case-home{width:100%;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px}
.case-nav a[href^="#"]{border-left:2px solid transparent;padding-left:10px}
.case-nav a[aria-current="location"]{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.case-mobile-nav{display:none}
@media(max-width:760px){.case-detail{padding-bottom:66px}.case-mobile-nav{position:fixed;inset:auto 0 0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 20px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}.case-mobile-nav a{font-size:12px;min-height:44px;line-height:44px}.case-mobile-nav>a:first-child{flex-shrink:0}.case-mobile-nav [data-current-section]{color:var(--accent);font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.case-nav nav>.case-home{flex-basis:100%}}
.case-section{margin-bottom:64px;scroll-margin-top:32px}
.case-section h2{font-size:clamp(25px,3vw,35px);margin-bottom:23px;max-width:730px}
.case-section>p{max-width:740px;margin-bottom:17px;font-size:16px;line-height:1.85}
.case-section.overview>p{font-size:18px;line-height:1.75}
.math-equation{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;border-block:1px solid var(--line);padding:25px 0;margin:28px 0}
.math-equation>div>span{font-size:12px;color:var(--muted)}
.math-equation pre{font-family:ui-monospace,monospace;font-size:clamp(14px,1.5vw,18px);line-height:1.9;margin:12px 0 0;white-space:pre-wrap}
.math-equation figcaption{font-size:14px;line-height:1.75;margin:0}
.print-proof{max-width:590px}
.mathrender-detail .wordmark{white-space:nowrap}
@media(max-width:600px){.math-equation{grid-template-columns:1fr;gap:18px}.math-equation pre{font-size:17px}}
@media(max-width:360px){.mathrender-detail .site-header{height:auto;min-height:96px;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}}
.resident-list{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--line)}
.resident-list>li{display:grid;grid-template-columns:145px minmax(0,1fr);gap:30px;padding:23px 0;border-bottom:1px solid var(--line)}
.resident-name h3{font-size:20px;line-height:1.25;margin-bottom:13px}
.resident-palette{display:flex;width:max-content;border:1px solid var(--line)}
.resident-palette i{display:block;width:23px;height:16px}
.resident-brief p{font-size:15px;line-height:1.65}
.resident-brief p+p{font-size:13px;color:var(--muted);margin-top:7px}
.resident-brief p>span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-right:5px}
@media(max-width:520px){.resident-list>li{grid-template-columns:1fr;gap:13px;padding:21px 0}.resident-name{display:flex;align-items:center;justify-content:space-between;gap:20px}.resident-name h3{margin-bottom:0}.resident-brief p{font-size:14px}}
.project-uses{list-style:none;padding:0;margin:26px 0 23px;border-top:1px solid var(--line)}
.project-uses>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.project-use-mark{display:flex;align-items:center;justify-content:center;min-height:64px}
.project-use-mark img{width:auto;height:auto;max-width:140px;max-height:64px}
.project-uses h3{font-size:20px;line-height:1.3;letter-spacing:-.025em;margin-bottom:6px}
.project-uses p{font-size:14px;line-height:1.75;max-width:570px}
.case-section>.project-use-connection{font-size:15px}
.case-section>.project-use-source{font-size:12px;margin-top:4px}
.project-use-source a{text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px;gap:6px}
.project-use-source a:hover{color:var(--accent)}
@media(max-width:520px){.project-uses>li{grid-template-columns:88px minmax(0,1fr);gap:20px;padding:22px 0}.project-use-mark img{max-width:88px;max-height:58px}.project-uses h3{font-size:18px}.project-uses p{font-size:13px}}
.project-links{display:flex;flex-wrap:wrap;gap:13px 27px;margin-top:24px}
.project-links a{border-bottom:1px solid var(--ink);font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.project-links a:hover{color:var(--accent);border-color:var(--accent)}
.decision-list{border-top:1px solid var(--line);margin-top:24px}
.decision-list>div{display:grid;grid-template-columns:170px 1fr;gap:25px;padding:21px 0;border-bottom:1px solid var(--line)}
.decision-list dt{font-size:15px;font-weight:600}
.decision-list dd{font-size:14px;line-height:1.8}
.team-perspectives{margin-top:28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.team-focus{padding:14px 0;font-size:13px;font-weight:600}
.team-perspectives dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.team-perspectives dl>div{padding:22px 20px;border-right:1px solid var(--line)}
.team-perspectives dl>div:first-child{padding-left:0}
.team-perspectives dl>div:last-child{border-right:0;padding-right:0}
.team-perspectives dt{font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.025em;margin-bottom:12px}
.team-perspectives dd{font-size:13px;line-height:1.8;color:var(--muted)}
.press-source{display:flex;flex-direction:column;align-items:flex-start;gap:9px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
.press-source a{display:inline-flex;align-items:center;gap:10px;font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.press-source a:hover{color:var(--accent)}
.field-images{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:start;margin-top:28px}
.field-images .project-figure{margin:0}
.field-images .image-button{background:var(--paper)}
.field-images img{width:100%;height:auto}
.team-photo .image-button{background:var(--paper)}
.team-photo .image-button img{width:100%;height:auto}
/* Laptop mockups are cut out on transparency and sit on a panel tinted with the accent colour. */
.device-mockup .image-button{background:color-mix(in srgb,var(--accent) 16%,var(--paper));padding:5% 7% 3.5%}
.device-mockup .image-button img{outline:0}
.gybe-report .paper-copy .paper-title{font-size:25px;line-height:1.25;margin:15px 0}
.paper-brandline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.paper-brandline .publication-brand{width:100px;height:28px}
.publication-section .paper-card+.paper-card{margin-top:25px}
.related-research{margin-top:32px}
.related-research h3{font-size:20px;margin-bottom:17px}
.related-research ul{list-style:none;padding:0;margin:0}
.related-research li{border-top:1px solid var(--line);padding:17px 0}
.related-research li>a{font-size:14px;text-decoration:underline;text-underline-offset:4px;line-height:1.7}
.related-research li>a:hover{color:var(--accent)}
.related-research li>p{font-size:12px;color:var(--muted);line-height:1.7;margin-top:6px}
@media(max-width:650px){.field-images{grid-template-columns:1fr;gap:25px}.gybe-report .paper-copy .paper-title{font-size:23px}}
@media(max-width:600px){.team-perspectives dl{grid-template-columns:1fr}.team-perspectives dl>div,.team-perspectives dl>div:first-child,.team-perspectives dl>div:last-child{padding:19px 0;border-right:0;border-bottom:1px solid var(--line)}.team-perspectives dl>div:last-child{border-bottom:0}}
.photo-pair,.video-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.photo-pair .image-button{aspect-ratio:3/4}
.photo-pair img{height:100%;object-fit:cover}
.photo-pair .project-figure{margin-top:14px}
.video-pair{margin-top:26px}
video{display:block;width:100%;background:#20241e;aspect-ratio:16/9}
.workflow{padding:0;margin:28px 0 0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.workflow li{padding:24px 20px;border-right:1px solid var(--line)}
.workflow li:first-child{padding-left:0}
.workflow li:last-child{border-right:0}
.workflow h3{font-size:17px}
.workflow p{font-size:13px;color:var(--muted);margin-top:12px}
.next-project{margin:28px 0 55px;padding-top:25px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:20px}
.next-project>span{font-size:12px;color:var(--muted)}
.next-project>a{font-size:26px;font-weight:600;letter-spacing:-.04em;display:flex;gap:35px;align-items:center;min-height:44px}
.source-note{font-size:12px!important;color:var(--muted);line-height:1.75!important}
.skip-link{position:fixed;top:12px;left:20px;transform:translateY(-160%);background:var(--ink);color:var(--paper);z-index:10;padding:12px 20px}
.skip-link:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:18px;max-width:min(1180px,calc(100vw - 40px));max-height:95dvh}
dialog::backdrop{background:rgba(30,35,28,.83)}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:12px}
.viewer-bar h2{font-size:14px;font-weight:400;letter-spacing:0}
.viewer-bar button{background:transparent;border:0;min-height:44px;min-width:75px;padding:5px 0;font-size:13px;display:flex;align-items:center;gap:20px}
.viewer-bar button span{font-size:23px}
dialog>img{max-height:75dvh;width:auto;max-width:100%;object-fit:contain;margin-inline:auto}
dialog>p{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6;max-width:950px}
@media(max-width:1000px){.shell{width:calc(100% - 56px)}.home-intro{gap:6%;padding:50px 0}.home-intro h1{font-size:50px}.intro-copy p{font-size:14px}.card-copy{padding:21px}.card-copy>p{font-size:14px;min-height:69px}.card-role{min-height:36px}.case-layout{gap:35px;grid-template-columns:145px minmax(0,1fr)}.case-meta{grid-template-columns:1fr .65fr 1.2fr;gap:20px}.case-section>p{font-size:15px}.case-section.overview>p{font-size:17px}.background-grid{gap:6%;grid-template-columns:1.6fr 1fr}.timeline li{grid-template-columns:110px 1fr;gap:15px}.studio-feature{padding:26px}}
@media(max-width:760px){.shell{width:calc(100% - 40px)}.site-header{height:77px}.wordmark{font-size:19px}.site-header nav{gap:19px;font-size:12px}.resume-nav{display:none!important}.home-intro{grid-template-columns:1fr;gap:24px;padding:40px 0}.home-intro h1{font-size:50px}.intro-copy{max-width:590px}.intro-copy p{font-size:15px}.intro-copy p+p{font-size:13px}.eyebrow{font-size:11px}.section-heading{display:block;margin-bottom:22px}.section-heading h2{font-size:25px}.section-heading>p{font-size:12px;margin-top:9px}.project-grid{gap:22px}.card-copy{padding:18px}.card-copy h3{font-size:22px}.card-copy>p{font-size:13px;min-height:84px}.card-role{font-size:11px;min-height:36px}.category{font-size:11px}.card-action{margin-top:14px;font-size:11px}.studio-feature{grid-template-columns:1fr;gap:22px;padding:26px}.studio-feature h3{font-size:25px}.background-section{padding-top:58px}.background-section .section-heading{display:flex}.background-grid{grid-template-columns:1fr;gap:30px}.timeline li{grid-template-columns:120px 1fr;gap:20px}.education{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.education h3{grid-column:1/-1;margin-top:12px}.education h3:not(:first-child){margin-top:15px}.education>p{grid-column:1/-1}.contact-section{margin-top:50px}.contact-section h2{font-size:30px}.contact-section p{font-size:13px}.case-page{padding-top:19px}.case-heading{padding-top:22px;padding-bottom:26px}.case-heading h1{font-size:50px}.case-tagline{font-size:21px}.case-meta{grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.case-meta>div:last-child{grid-column:1/-1}.case-cover{margin-bottom:30px}.case-layout{grid-template-columns:1fr;gap:33px}.case-nav{position:static;padding-bottom:17px;border-bottom:1px solid var(--line)}.case-nav nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px}.case-nav nav>span{flex-basis:100%;margin-bottom:4px}.case-nav a{font-size:11px;min-height:32px}.case-section{margin-bottom:44px}.case-section h2{font-size:29px;margin-bottom:20px}.case-section>p{font-size:15px;line-height:1.8}.case-section.overview>p{font-size:17px}.project-figure{margin-top:23px}figcaption{font-size:11px}.decision-list>div{grid-template-columns:135px 1fr;gap:20px}.decision-list dd{font-size:13px}.workflow{grid-template-columns:1fr}.workflow li,.workflow li:first-child{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}.workflow li:last-child{border-bottom:0}.image-zoom{opacity:1;font-size:9px;bottom:8px;right:8px;padding:3px 7px}}
@media(max-width:520px){.shell{width:calc(100% - 36px)}.site-header nav{gap:16px;font-size:11px}.wordmark{font-size:18px}.home-intro h1{font-size:44px}.project-grid{grid-template-columns:1fr;gap:25px}.card-copy{padding:22px}.card-copy h3{font-size:25px}.card-copy>p{font-size:14px;min-height:0}.card-role{min-height:0;font-size:12px}.card-action{font-size:12px;margin-top:18px}.card-image{aspect-ratio:16/10}.document-preview strong{font-size:30px}.studio-feature{padding:23px}.background-section .section-heading{align-items:flex-start;gap:12px}.background-section .text-link{font-size:11px;gap:10px;min-height:34px}.timeline li{grid-template-columns:1fr;gap:8px;padding:24px 0}.timeline-date{font-size:11px}.timeline h3{font-size:19px}.timeline p{margin-top:9px}.education{display:block}.education h3{margin-top:22px}.case-heading h1{font-size:43px}.case-tagline{font-size:21px}.case-meta{gap:20px 25px}.case-meta dd{font-size:12px}.case-section h2{font-size:27px}.decision-list>div{grid-template-columns:1fr;gap:7px}.photo-pair,.video-pair{grid-template-columns:1fr;gap:23px}.photo-pair .image-button{aspect-ratio:4/5}.source-note{font-size:11px!important}.site-footer{align-items:flex-start;font-size:10px}.site-footer>div{gap:17px;flex-wrap:wrap}.next-project>a{font-size:23px}.gybe-cover .image-button{padding:18px}.viewer-bar h2{font-size:11px;line-height:1.6}.viewer-bar{gap:15px}.viewer-bar button{min-width:65px;font-size:11px}dialog{padding:12px}dialog>p{font-size:11px}.email-link{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.case-nav a { min-height:44px; display:flex; align-items:center; }
@media (max-width:520px){.card-heading{padding:20px 22px}.card-heading h3{font-size:23px}}

.brand-logo{display:block;width:140px;height:32px;object-fit:contain;flex-shrink:0}
.brand-logo.brand-gybe{background:#173d46;object-fit:cover}
.brand-stillroom{width:21px;height:21px}
.brand-verdant{width:64px;height:57px;padding:7px;background:#27382d;object-fit:contain}
.card-name{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.card-name h3{min-width:0}
.card-brand{width:96px;height:26px}
.case-brandline{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.case-brandline .brand-logo{width:155px;height:36px}
.case-brandline .brand-gybe{width:130px}
.case-brandline .brand-stillroom{width:26px;height:26px}
.case-brandline .brand-verdant{width:69px;height:62px}
.studio-feature .verdant-banner{min-width:0}
@media(max-width:760px){.studio-feature .verdant-banner{grid-row:1}.verdant-cover{margin-bottom:30px}}
.publication-section{margin-top:66px}
.patent-group{grid-column:1/-1;margin-bottom:12px}
.paper-group{grid-column:1/-1}
.paper-group>h3{font-size:23px;margin-bottom:20px}
.paper-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 60px}
.portfolio-home .patent-list{column-gap:60px}
.portfolio-home .publication-section .paper-card+.paper-card{margin-top:0}
.patent-group>h3{font-size:23px;margin-bottom:20px}
.patent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.patent-entry{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.patent-brandline{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.patent-brandline .category{min-width:0}
.patent-brandline .patent-brand{width:90px;height:auto;max-height:25px;flex-shrink:0}
.patent-entry h3,.patent-entry h4{font-size:23px;line-height:1.3;letter-spacing:-.025em;margin:12px 0 14px}
.patent-description{font-size:14px;line-height:1.75;margin-bottom:18px}
.patent-reference{font-size:12px;line-height:1.8;color:var(--muted);margin-top:auto}
.patent-entry .project-links{margin-top:16px;gap:12px 22px;flex-wrap:wrap}
.case-section .patent-list{margin-top:26px}
@media(max-width:700px){.patent-list{grid-template-columns:1fr;gap:30px}.patent-entry h3,.patent-entry h4{font-size:22px}}
@media(max-width:760px){.paper-list{grid-template-columns:1fr;gap:28px}}
.paper-card{display:grid;grid-template-columns:175px minmax(0,1fr);gap:34px;padding:29px;border:1px solid var(--line);background:var(--card);align-items:start}
.paper-cover{display:block;border:1px solid var(--line)}
.paper-cover img{width:100%;height:auto}
.paper-copy .paper-title{font-size:31px;margin:9px 0 10px}
.paper-copy .paper-subtitle{font-size:18px;line-height:1.45;letter-spacing:-.015em;margin-bottom:16px;max-width:780px}
.paper-copy>p{font-size:14px;line-height:1.75;max-width:780px}
.paper-copy .paper-credit{margin-top:15px;font-weight:600;font-size:12px}
.paper-copy .project-links{margin-top:14px}
.table-scroll{overflow-x:auto;margin:27px 0;border-top:1px solid var(--line);max-width:100%}
.model-table{width:100%;border-collapse:collapse;min-width:620px;text-align:left;font-size:13px;line-height:1.65}
.model-table caption{text-align:left;padding:16px 0;font-size:12px;color:var(--muted)}
.model-table th,.model-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.model-table thead th{font-weight:600;font-size:12px}
.model-table tbody th{font-weight:600;width:18%}
.model-table td:nth-child(2){width:24%}
.model-table td:nth-child(3){width:20%}
.section-note{margin-top:15px!important}
.visualization-subheading{margin-top:44px;font-size:23px;line-height:1.3;letter-spacing:-.02em}
@media(max-width:760px){.paper-card{grid-template-columns:130px minmax(0,1fr);padding:23px;gap:25px}.paper-copy .paper-subtitle{font-size:17px}.publication-section{margin-top:45px}.case-brandline .brand-logo{max-width:130px}.card-name{gap:8px}.card-brand{width:85px;height:24px}}
@media(max-width:520px){.paper-card{grid-template-columns:1fr;padding:23px;gap:22px}.paper-cover{width:140px}.paper-copy .paper-title{font-size:28px}.paper-copy .paper-subtitle{font-size:18px}.case-section .paper-card{padding:20px}.card-brand{width:82px;height:22px}.card-name h3{font-size:21px}.brand-verdant{width:57px;height:51px}}
.table-hint{display:none}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:650px){.table-hint{display:block;font-size:11px!important;color:var(--muted);margin:18px 0 0!important}}
@media(max-width:760px){.case-layout{grid-template-columns:minmax(0,1fr)}}

/* Affiliation marks stay attached to the work and credentials they identify. */
.employer-mark{display:inline-flex;align-items:center;justify-content:flex-start;min-height:44px}
.background-brand{width:112px;height:31px;object-fit:contain}
.brand-verdant.background-brand{width:61px;height:55px}
.intro-employers{display:flex;flex-wrap:wrap;align-items:center;gap:23px;min-height:44px;margin:3px 0 11px}
.intro-employers .background-brand{width:102px;height:28px}
.intro-employers .brand-verdant{width:49px;height:44px;padding:5px}
.timeline-identity{min-width:0}
.timeline-identity .timeline-date{display:block}
.timeline .employer-mark{margin:9px 0 0;padding:0;min-height:44px}
.education{display:block}
.background-group+.background-group{margin-top:29px}
.education .background-group h3{margin:0 0 18px;font-size:18px}
.education-schools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.credential-item{min-width:0}
.school-credential .credential-mark{display:flex;align-items:center;justify-content:flex-start;min-height:65px;margin-bottom:12px}
.school-credential .credential-mark img{width:100%;height:auto;max-width:180px;max-height:62px;object-fit:contain;object-position:left center}
.credential-copy strong{display:block;font-size:13px;line-height:1.5;font-weight:600}
.education .credential-copy p{font-size:12px;margin-top:5px;line-height:1.65}
.work-discovery{padding:20px 0 23px;margin-bottom:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:24px}
.discovery-top{display:flex;align-items:center;justify-content:space-between;gap:30px}
.discovery-top label{font-size:16px;font-weight:600;letter-spacing:-.02em}
.discovery-top p{font-size:12px;color:var(--muted);margin-top:3px}
.work-query-wrap{display:flex;align-items:center;gap:12px;flex:0 1 470px}
#work-query{appearance:none;width:100%;min-width:0;border:1px solid var(--field-line);background:var(--card);font:inherit;font-size:14px;color:var(--ink);padding:11px 13px;min-height:46px;border-radius:0}
#work-query::placeholder{color:var(--placeholder);opacity:1}
#work-query:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.search-clear{border:0;background:none;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px}
.discovery-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.work-filters{display:flex;flex-wrap:wrap;gap:4px 19px}
.work-filters button{padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;min-height:36px;font-size:12px;color:var(--muted)}
.work-filters button[aria-pressed="true"]{border-bottom-color:var(--ink);color:var(--ink);font-weight:600}
.work-filters button:hover,.skill-tags button:hover{color:var(--accent);border-color:var(--accent)}
.work-result-count{font-size:12px;color:var(--muted);white-space:nowrap}
.skill-tags{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;padding:0;margin:18px 0 0}
.skill-tags button{display:block;font-size:12px;line-height:1.5;border:1px solid var(--line);background:none;padding:5px 9px;min-height:30px}
.card-copy .work-match,.studio-feature .work-match{border-left:2px solid var(--accent);padding-left:12px;margin-top:17px;font-size:13px;line-height:1.7;min-height:0;color:var(--ink)}
.card-copy .card-action{margin-top:auto;padding-top:14px;margin-bottom:0}
.card-copy .card-role{margin-bottom:18px}
.card-copy .work-match{margin-top:0;margin-bottom:18px}
[data-work-id][hidden],.work-discovery[hidden],.skill-tags[hidden],.work-match[hidden],.work-empty[hidden],.background-results[hidden]{display:none!important}
.work-empty{padding:36px 0 15px}
.work-empty h3,.background-results h3{font-size:22px}
.work-empty p{font-size:14px;color:var(--muted);margin-top:11px}
.work-empty button{border:0;border-bottom:1px solid currentColor;padding:0;min-height:44px;background:none;font-size:13px;margin-top:12px}
.background-results{margin-top:30px}
.background-results ul{list-style:none;padding:0;margin:18px 0 0}
.background-results li{border-top:1px solid var(--line)}
.background-results li:last-child{border-bottom:1px solid var(--line)}
.background-results li a{display:grid;grid-template-columns:1fr 1.3fr auto;gap:22px;align-items:center;padding:18px 0;font-size:13px}
.background-results li strong{font-weight:600}
.background-results li span{color:var(--muted)}
.background-results a:hover strong{color:var(--accent)}
.is-searching .project-grid{grid-template-columns:1fr;gap:20px}
.is-searching .project-card{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto 1fr}
.is-searching .card-heading{grid-column:2;grid-row:1;border-bottom:0;padding:22px 25px 0}
.is-searching .card-media{grid-column:1;grid-row:1/3;align-self:center;margin:20px 0 20px 20px}
.is-searching .card-image{aspect-ratio:4/3;border:1px solid var(--line)}
.is-searching .card-image img{object-fit:contain}
.is-searching .contain-image img{padding:12px}
.is-searching .card-copy{grid-column:2;grid-row:2;padding:14px 25px 20px}
.is-searching .card-copy>p:first-child{display:none}
.is-searching .skill-tags{margin-top:0}
.is-searching .card-role{margin:10px 0 12px}
.is-searching .card-copy .work-match{margin-bottom:12px}
@media(max-width:760px){.discovery-top{align-items:flex-start;flex-direction:column;gap:13px}.work-query-wrap{flex-basis:auto;width:100%}.discovery-bottom{align-items:flex-start;flex-direction:column;gap:12px}.work-filters{gap:3px 17px}.work-discovery{margin-bottom:24px}.skill-tags{gap:7px}.background-results li a{grid-template-columns:1fr auto;gap:5px 15px}.background-results li a>span:first-of-type{grid-column:1;grid-row:2}.background-results li a>span:last-child{grid-column:2;grid-row:1/3}}
@media(max-width:650px){.is-searching .project-card{grid-template-columns:1fr}.is-searching .card-heading{grid-column:1;grid-row:1;padding:21px 21px 0}.is-searching .card-copy{grid-column:1;grid-row:2;padding:15px 21px 20px}.is-searching .card-media{display:none}.is-searching .card-heading h3{font-size:23px}.is-searching .studio-feature .verdant-banner{display:none}.is-searching .studio-feature{margin-top:20px}}
.certification-list{display:grid;gap:18px}
.certification-credential{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center}
.certification-credential .credential-mark{display:flex;align-items:center;justify-content:center;min-height:76px}
.certification-credential .credential-mark img{width:76px;height:76px;object-fit:contain}
@media(max-width:760px){.education-schools{max-width:560px;gap:30px}.certification-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.school-credential .credential-mark{max-width:185px}.background-group+.background-group{margin-top:32px}.intro-employers{gap:24px}}
@media(max-width:520px){.timeline-identity{display:flex;align-items:center;justify-content:space-between;gap:18px}.timeline .employer-mark{margin:0;min-height:35px}.timeline .background-brand{width:101px;height:27px}.timeline .brand-verdant{width:50px;height:45px;padding:5px}.education-schools{gap:20px}.certification-list{grid-template-columns:1fr;gap:22px}.certification-credential{grid-template-columns:78px minmax(0,1fr)}.intro-employers{gap:20px}.intro-employers .background-brand{width:97px}.intro-employers .brand-verdant{width:47px}}
@media(max-width:1000px){.home-intro{grid-template-columns:minmax(0,1fr) 220px;gap:18px 44px}.intro-portrait{width:220px}.home-intro h1{font-size:46px}.contact-section{gap:32px}}
@media(max-width:760px){.home-intro{grid-template-columns:132px minmax(0,1fr);grid-template-areas:"portrait heading" "copy copy";gap:24px}.intro-portrait{width:132px}.home-intro h1{font-size:46px;margin-top:12px}.intro-copy{grid-column:1/-1}.contact-section{grid-template-columns:minmax(0,1fr) 140px;gap:28px}.contact-portrait{width:140px}.contact-section h2{font-size:28px}.contact-section .email-link{font-size:21px}}
@media(max-width:520px){.home-intro{grid-template-columns:108px minmax(0,1fr);gap:20px 18px}.intro-portrait{width:108px}.home-intro h1{font-size:35px;margin-top:10px}.intro-heading .eyebrow{font-size:10px}.contact-section{grid-template-columns:1fr;gap:25px}.contact-portrait{width:160px}.contact-copy .email-link{font-size:21px}}

/* Theme toggle in the header: a moon in light mode, a sun in dark mode. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;margin-right:-12px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:hover{color:var(--accent)}
.theme-sun{display:none}
[data-theme="dark"] .theme-moon{display:none}
[data-theme="dark"] .theme-sun{display:block}

/* Company, school and client logos in one ink colour so brand colours don't compete with the
   palette. Certification badges stay recognisable as badges, just quieter. */
.brand-logo,.employer-mark img,.school-credential .credential-mark img,.project-use-mark img{filter:var(--logo-ink)}
/* Gybe has detail inside its globe that a flat recolour would lose, so it has a version for each
   theme and is shown in greyscale instead. Verdant is single-colour line art and takes ink like the rest. */
.brand-logo.brand-gybe,img.brand-verdant{background:none}
.brand-logo.brand-gybe{filter:grayscale(1);object-fit:contain;object-position:left center}
.brand-for-dark,[data-theme="dark"] .brand-for-light{display:none}
[data-theme="dark"] .brand-for-dark{display:block}

/* Logos that are links show their own colours on hover. In the dark theme most logos have dark
   lettering that would vanish, so only Gybe and the certification badges colour up there. */
.brand-logo,.credential-mark img{transition:filter .2s,opacity .2s,background-color .2s}
:root:not([data-theme="dark"]) a:is(:hover,:focus-visible) .brand-logo,
:root:not([data-theme="dark"]) a.credential-mark:is(:hover,:focus-visible) img,
a:is(:hover,:focus-visible) .brand-logo.brand-gybe,
.certification-credential a.credential-mark:is(:hover,:focus-visible) img{filter:none;opacity:1}
/* Verdant's own colours are white art on its dark green. The green reaches past the logo as a
   shadow, so hovering doesn't shift anything. */
a:is(:hover,:focus-visible) img.brand-verdant{filter:none;opacity:1;background:#27382d;box-shadow:0 0 0 6px #27382d}

/* Logos keep even spacing in a row: Gybe's box hugs its artwork instead of leaving empty space after
   it, and Verdant no longer carries the padding its old block needed. */
img.brand-logo.brand-gybe:is(.brand-for-light,.brand-for-dark){width:auto}
img.brand-logo.brand-verdant{padding:0}
.certification-credential .credential-mark img{filter:grayscale(1) sepia(.3) contrast(1.05);opacity:.9}
[data-theme="dark"] .technology-link img{filter:grayscale(1) brightness(0) invert(.86)}

/* Photos of people get a shaped frame like the portraits; work images stay rectangular. The
   Fortrea team photo has room above everyone's heads, so an arch only trims wall. */
.portfolio-home .work-applied-ai .card-media,.team-photo .image-button:has(img[src*="fortrea-team-photo"]){position:relative;isolation:isolate}
.portfolio-home .work-applied-ai .card-image,.team-photo .image-button img[src*="fortrea-team-photo"]{border-radius:50% 50% 0 0/26% 26% 0 0}
.team-photo .image-button:has(img[src*="fortrea-team-photo"]){overflow:visible;border:0;background:none;border-radius:50% 50% 0 0/26% 26% 0 0}
.portfolio-home .work-applied-ai .card-media::after,.team-photo .image-button:has(img[src*="fortrea-team-photo"])::after{content:"";position:absolute;inset:0;z-index:-1;border:1.5px solid var(--frame);border-radius:50% 50% 0 0/26% 26% 0 0;transform:translate(10px,10px);pointer-events:none}
/* Verdant's card shows its banner art rather than a screenshot, so it gets a leaf: two opposite corners
   rounded, with the same offset outline. The logo sits clear of the rounded top-left corner. */
.portfolio-home .work-verdant .card-media{position:relative;isolation:isolate}
.portfolio-home .work-verdant .card-image{border-radius:40% 0/58% 0}
.portfolio-home .work-verdant .card-media::after{content:"";position:absolute;inset:0;z-index:-1;border:1.5px solid var(--frame);border-radius:40% 0/58% 0;transform:translate(10px,10px);pointer-events:none}

/* A hairline keeps light screenshots from bleeding into the paper. */
.portfolio-home .work-index .card-image img,.image-button img{outline:1px solid var(--hairline);outline-offset:-1px}

.footer-landscape{color:var(--ridge)}
/* Phones: the header nav fills the row, so the header toggle is hidden there. */
@media(max-width:520px){.site-header .theme-toggle{display:none}}
/* Floating toggle, shown by theme.js whenever the header toggle is out of sight. */
.theme-toggle-float{position:fixed;right:20px;bottom:20px;z-index:20;margin:0;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 3px 14px rgba(26,18,14,.14);visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.theme-toggle-float.is-shown{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .25s}

/* Copy button beside the email address. */
.email-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px}
.copy-email{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:18px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.copy-email svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.copy-email:hover{color:var(--accent);border-color:var(--accent)}
.copy-email.is-copied{color:var(--pine);border-color:var(--pine)}

/* Sky behind the footer ridge: a sun in the light theme, a moon and stars in the dark. Sizes follow
   the ridge's height so it holds from phone to desktop. Changing theme sets one body behind the
   ridge before the other rises; the stars come out last. */
.footer-landscape{--land-h:clamp(64px,8.75vw,140px);position:relative;isolation:isolate}
.footer-landscape svg{position:relative;z-index:1}
.footer-sky{position:absolute;inset:0}
.footer-sky .sun,.footer-sky .moon{position:absolute;left:73.4%;border-radius:50%;transition:transform 1.6s cubic-bezier(.45,0,.2,1)}
.footer-sky .sun{top:calc(var(--land-h)*.19);width:calc(var(--land-h)*.44);height:calc(var(--land-h)*.44);background:var(--sun);box-shadow:0 0 0 calc(var(--land-h)*.06) var(--sun-halo);transform:translateX(-50%);transition-delay:.5s}
.footer-sky .moon{top:calc(var(--land-h)*.1);width:calc(var(--land-h)*.34);height:calc(var(--land-h)*.34);box-shadow:inset calc(var(--land-h)*-.085) calc(var(--land-h)*.035) 0 0 var(--moon);transform:translate(-50%,calc(var(--land-h)*1.1))}
[data-theme="dark"] .footer-sky .sun{transform:translate(-50%,calc(var(--land-h)*1.1));transition-delay:0s}
[data-theme="dark"] .footer-sky .moon{transform:translateX(-50%);transition-delay:.5s}
.footer-sky .star{position:absolute;border-radius:50%;background:var(--star);opacity:0;transition:opacity .9s}
[data-theme="dark"] .footer-sky .star{opacity:var(--glow);transition-delay:1.2s}
[data-theme="dark"] .footer-sky .twinkle{animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:var(--glow)}to{opacity:.15}}
/* Links inside case-study prose read as links. */
.case-section p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.case-section p a:hover{color:var(--accent)}
/* Verdant's wider portfolio: one row of cards that scrolls sideways, so it stays short. */
.portfolio-hint.table-hint{display:block;margin:18px 0 0;font-size:12px;color:var(--muted)}
.portfolio-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,calc((100% - 28px) / 3));gap:14px;margin-top:12px;padding-bottom:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.portfolio-strip:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.portfolio-card{display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;border:1px solid var(--line);background:var(--card)}
.portfolio-card>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:white;border-bottom:1px solid var(--line)}
.portfolio-card>div{padding:16px 18px 20px}
.portfolio-card h3{font-size:19px;line-height:1.25;margin:6px 0 8px}
.portfolio-card p{font-size:13px;line-height:1.65;color:var(--muted)}
.portfolio-card p.studio-my-work{margin-top:10px;color:var(--ink)}
.studio-my-work strong{font-weight:700}
@media(max-width:760px){.portfolio-strip{grid-auto-columns:80%}}
.prompt-layers{list-style:none;counter-reset:layer;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.prompt-layers li{counter-increment:layer;display:grid;grid-template-columns:44px 170px 1fr;gap:6px 22px;padding:21px 0;border-bottom:1px solid var(--line)}
.prompt-layers li::before{content:counter(layer,decimal-leading-zero);grid-row:span 2;font-size:13px;font-weight:600;color:var(--accent);padding-top:2px}
.prompt-layers h3{grid-row:span 2;font-size:15px;font-weight:600;margin:0}
.case-section .prompt-layers p{font-size:14px;line-height:1.75;margin:0}
.prompt-layers blockquote{margin:6px 0 0;padding:10px 14px;border-left:2px solid var(--accent);background:var(--soft);font-size:13px;line-height:1.7;color:var(--muted);font-style:italic}
.prompt-full{margin:18px 0 26px;border:1px solid var(--line);background:var(--card)}
.prompt-full summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;list-style:none}
.prompt-full summary::-webkit-details-marker{display:none}
.prompt-full summary::after{content:"";width:7px;height:7px;margin-left:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.prompt-full[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.prompt-full summary:hover,.prompt-full summary:focus-visible{color:var(--accent)}
.prompt-full-open,.prompt-full[open] .prompt-full-closed{display:none}
.prompt-full[open] .prompt-full-open{display:inline}
.prompt-full pre{margin:0;padding:4px 16px 18px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
@media(max-width:600px){.prompt-layers li{grid-template-columns:34px 1fr;gap:6px 12px}.prompt-layers h3{grid-row:auto}.prompt-layers li::before{grid-row:span 3}}
@media(prefers-reduced-motion:reduce){.prompt-full summary::after{transition:none}}
.personal-mark{display:block;flex:none;width:22px;height:22px;margin-right:9px;border-radius:5px}
.card-personal-mark{width:20px;height:20px;margin:0;filter:var(--logo-ink)}
@media(max-width:520px){.wordmark .personal-mark{width:20px;height:20px;margin-right:8px}}
.resume-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px;white-space:nowrap}
.resume-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.resume-link:hover,.resume-link:focus-visible{color:var(--accent);border-color:var(--accent)}
.email-row .resume-link{margin-top:18px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 6px;border-block:1px solid var(--line)}
.stat-row>div{display:flex;flex-direction:column-reverse;gap:4px;padding:18px 20px 16px 0}
.stat-row>div+div{border-left:1px solid var(--line);padding-left:20px}
.stat-row dd{margin:0;font-family:Syne,Manrope,Arial,sans-serif;font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--accent)}
.stat-row dt{font-size:12px;color:var(--muted)}
@media(max-width:520px){.stat-row{grid-template-columns:1fr}.stat-row>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}}

/* Studio page: inventions, each with an animated drawing of what its published application describes. */
/* Studio page cover: Fortrea's logo beside the arched team photo, on the same tint as the drawings. */
.studio-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,6vw,80px);align-items:center;margin-bottom:46px;padding:clamp(24px,4vw,52px) clamp(24px,5vw,64px) clamp(28px,4vw,48px);border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,var(--paper))}
.studio-logo{display:block;width:100%;max-width:340px;height:auto}
.studio-logo .logo-text{fill:var(--ink)}
.studio-cover-brand p{margin-top:18px;font-size:13px;color:var(--muted)}
.studio-cover .project-figure{margin:0}
@media(max-width:760px){.studio-cover{grid-template-columns:1fr}.studio-logo{max-width:230px}}
.inventions{display:grid;gap:56px;margin-top:30px}
.invention{border-top:1px solid var(--line);padding-top:20px}
.invention h3{font-size:clamp(22px,2.4vw,27px);line-height:1.25;letter-spacing:-.025em;margin:12px 0 14px;max-width:700px}
.invention-summary{font-size:15px;line-height:1.75;max-width:730px}
.invention-figure{margin:26px 0 0;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,var(--paper));padding:clamp(14px,3vw,32px) clamp(14px,3vw,32px) 10px}
.invention-drawing svg{display:block;width:100%;height:auto}
.invention-steps{list-style:none;counter-reset:step;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));gap:0 18px}
.invention-capture{--steps:4;--cap:10s}
.invention-guidance{--steps:5;--gd:12s}
.invention-steps li{counter-increment:step;border-top:2px solid var(--line);padding-top:11px}
.invention-steps h4{display:flex;gap:7px;font-size:13px;line-height:1.35;font-weight:600}
.invention-steps h4::before{content:counter(step);color:var(--accent);font-variant-numeric:tabular-nums}
.invention-steps p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:6px}
.invention-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;border-top:1px solid var(--line)}
.invention-foot figcaption{font-size:11px;line-height:1.5;color:var(--muted);padding:10px 0}
.invention .patent-reference{margin-top:16px}
.invention .project-links{margin-top:8px}
@media(max-width:900px){.invention-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}}
@media(max-width:520px){.invention-steps{grid-template-columns:1fr}.invention-foot{flex-direction:column;align-items:flex-start;gap:0}}

/* Flow graphs: steps joined by arrows, where one step forks into two that join again. Left to right on wide screens, top to bottom from 1200px down. */
.flow-graph{--gap:30px;--stub:14px;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;gap:0 var(--gap);align-items:center}
.flow-graph ol{position:relative;list-style:none;padding:0;margin:0;display:grid;grid-auto-rows:1fr;gap:var(--stub)}
.flow-node{position:relative;background:var(--card);border:1px solid var(--line);padding:12px 13px 13px}
.flow-node strong{display:block;font-size:13px;line-height:1.35;font-weight:600}
.flow-node p{font-size:12px;line-height:1.55;color:var(--muted);margin-top:5px}
.flow-graph>.flow-node:last-child{border-color:var(--accent)}
.flow-fork{position:relative;padding-inline:var(--stub)}
.flow-graph>.flow-node:not(:first-child)::before,.flow-fork .flow-node::before{content:'';position:absolute;right:calc(100% + 1px);top:50%;width:var(--gap);height:9px;margin-top:-4.5px;background:var(--frame);clip-path:polygon(0 4px,calc(100% - 8px) 4px,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,calc(100% - 8px) 5px,0 5px)}
.flow-fork .flow-node::before{width:calc(var(--stub) - 1px)}
.flow-fork::before,.flow-fork .flow-node::after,.flow-fork ol::before,.flow-fork ol::after{content:'';position:absolute;background:var(--frame)}
.flow-fork::before{right:100%;top:50%;width:var(--gap);height:1px}
.flow-fork .flow-node::after{left:calc(100% + 1px);top:50%;width:calc(var(--stub) - 1px);height:1px}
.flow-fork ol::before,.flow-fork ol::after{top:calc(25% - var(--stub) / 4);bottom:calc(25% - var(--stub) / 4);width:1px}
.flow-fork ol::before{left:calc(-1 * var(--stub))}
.flow-fork ol::after{right:calc(-1 * var(--stub))}
@media(max-width:1200px){.flow-graph{grid-template-columns:minmax(0,1fr);gap:var(--gap) 0;max-width:560px}.flow-fork{padding-inline:0;padding-block:var(--stub)}.flow-fork ol{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.flow-graph>.flow-node:not(:first-child)::before,.flow-fork .flow-node::before{right:auto;left:50%;top:auto;bottom:calc(100% + 1px);width:9px;height:var(--gap);margin:0 0 0 -4.5px;clip-path:polygon(4px 0,5px 0,5px calc(100% - 8px),100% calc(100% - 8px),50% 100%,0 calc(100% - 8px),4px calc(100% - 8px))}.flow-fork .flow-node::before{height:calc(var(--stub) - 1px)}.flow-fork::before{right:auto;left:50%;top:auto;bottom:100%;width:1px;height:var(--gap)}.flow-fork .flow-node::after{left:50%;top:calc(100% + 1px);width:1px;height:calc(var(--stub) - 1px)}.flow-fork ol::before,.flow-fork ol::after{left:calc(25% - var(--stub) / 4);right:calc(25% - var(--stub) / 4);width:auto;height:1px}.flow-fork ol::before{top:calc(-1 * var(--stub));bottom:auto}.flow-fork ol::after{top:auto;bottom:calc(-1 * var(--stub))}}

/* Invention drawings: parts and colours, so both themes work. */
.d-window{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.d-window-back{fill:var(--soft);stroke:var(--line);stroke-width:1.5}
.d-card{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.d-rule{fill:none;stroke:var(--line);stroke-width:1.5}
.d-soft{fill:var(--soft)}
.d-dot,.d-slot{fill:var(--line)}
.d-ink{fill:var(--ink);opacity:.82}
.d-muted{fill:var(--muted);opacity:.38}
.d-input{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.d-device{fill:var(--ridge);stroke:var(--line);stroke-width:1.5}
.d-screen{fill:var(--card)}
.d-paper{fill:var(--paper);stroke:var(--line);stroke-width:1.2}
.d-qr-ink{fill:var(--ink)}
.d-qr-paper{fill:var(--card)}
.d-accent-fill{fill:var(--accent)}
.d-pine-fill{fill:var(--pine)}
.d-reject{fill:var(--muted)}
.d-mark{fill:none;stroke:var(--card);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.d-node{fill:var(--soft);stroke:var(--line);stroke-width:1.5}
.d-chip,.d-pill{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.d-button{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.d-icon{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-viewfinder{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.d-shutter{fill:none;stroke:var(--line);stroke-width:3}
.d-link{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 6;opacity:.6}
.d-flow{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cap-badge,.cap-ring,.gd-ring,.gd-check,.gd-reject{transform-box:fill-box;transform-origin:center}

/* Capture drawing (10 s): pair, capture, extract, fill. The still state is the finished form. */
.cap-qrview{opacity:0;animation:cap-qrview var(--cap) linear infinite}
.cap-docview{animation:cap-docview var(--cap) linear infinite}
.cap-scan{fill:var(--accent);opacity:0;animation:cap-scan var(--cap) linear infinite}
.cap-badge{animation:cap-badge var(--cap) ease-out infinite}
.cap-shot{fill:#fff;opacity:0;animation:cap-shot var(--cap) linear infinite}
.cap-packet{fill:var(--accent);opacity:0;animation:cap-packet var(--cap) ease-in-out infinite}
.cap-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;animation:cap-ring var(--cap) ease-out infinite}
.cap-flash{fill:var(--accent);opacity:0}
.cap-value{fill:var(--ink);opacity:.8;transform-box:fill-box;transform-origin:left center}
.cap-row-1 .cap-value{animation:cap-value-1 var(--cap) ease-out infinite}
.cap-row-2 .cap-value{animation:cap-value-2 var(--cap) ease-out infinite}
.cap-row-3 .cap-value{animation:cap-value-3 var(--cap) ease-out infinite}
.cap-row-4 .cap-value{animation:cap-value-4 var(--cap) ease-out infinite}
.cap-row-1 .cap-flash{animation:cap-flash-1 var(--cap) linear infinite}
.cap-row-2 .cap-flash{animation:cap-flash-2 var(--cap) linear infinite}
.cap-row-3 .cap-flash{animation:cap-flash-3 var(--cap) linear infinite}
.cap-row-4 .cap-flash{animation:cap-flash-4 var(--cap) linear infinite}
.invention-capture .invention-steps li:nth-child(1){animation:cap-s1 var(--cap) linear infinite}
.invention-capture .invention-steps li:nth-child(2){animation:cap-s2 var(--cap) linear infinite}
.invention-capture .invention-steps li:nth-child(3){animation:cap-s3 var(--cap) linear infinite}
.invention-capture .invention-steps li:nth-child(4){animation:cap-s4 var(--cap) linear infinite}
@keyframes cap-qrview{0%,21%{opacity:1}23%,97%{opacity:0}100%{opacity:1}}
@keyframes cap-docview{0%,21%{opacity:0}23%,97%{opacity:1}100%{opacity:0}}
@keyframes cap-scan{0%,3%{opacity:0;transform:translateY(0)}5%{opacity:1;transform:translateY(0)}17%{opacity:1;transform:translateY(104px)}19%,100%{opacity:0;transform:translateY(104px)}}
@keyframes cap-badge{0%,17%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1.2)}22%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.3)}}
@keyframes cap-shot{0%,35%{opacity:0}37%{opacity:.85}43%,100%{opacity:0}}
@keyframes cap-packet{0%,44%{opacity:0;transform:translate(0,0)}46%{opacity:1;transform:translate(0,0)}54%{opacity:1;transform:translate(-105px,38px)}55%,59%{opacity:0;transform:translate(-105px,38px)}60%{opacity:1;transform:translate(-105px,38px)}64%{opacity:1;transform:translate(-245px,0)}68%{opacity:1;transform:translate(-325px,-130px)}70%,100%{opacity:0;transform:translate(-325px,-130px)}}
@keyframes cap-ring{0%,54%{opacity:0;transform:scale(.96)}56%{opacity:.9;transform:scale(1)}61%,100%{opacity:0;transform:scale(1.08)}}
@keyframes cap-value-1{0%,68%{transform:scaleX(0)}73%,96%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
@keyframes cap-value-2{0%,72%{transform:scaleX(0)}77%,96%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
@keyframes cap-value-3{0%,76%{transform:scaleX(0)}81%,96%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
@keyframes cap-value-4{0%,80%{transform:scaleX(0)}85%,96%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
@keyframes cap-flash-1{0%,68%{opacity:0}70%{opacity:.2}78%,100%{opacity:0}}
@keyframes cap-flash-2{0%,72%{opacity:0}74%{opacity:.2}82%,100%{opacity:0}}
@keyframes cap-flash-3{0%,76%{opacity:0}78%{opacity:.2}86%,100%{opacity:0}}
@keyframes cap-flash-4{0%,80%{opacity:0}82%{opacity:.2}90%,100%{opacity:0}}
@keyframes cap-s1{0%,21%{opacity:1;border-top-color:var(--accent)}23%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes cap-s2{0%,21%{opacity:.45;border-top-color:var(--line)}23%,43%{opacity:1;border-top-color:var(--accent)}45%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes cap-s3{0%,43%{opacity:.45;border-top-color:var(--line)}45%,67%{opacity:1;border-top-color:var(--accent)}69%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes cap-s4{0%,67%{opacity:.45;border-top-color:var(--line)}69%,96%{opacity:1;border-top-color:var(--accent)}99%,100%{opacity:.45;border-top-color:var(--line)}}

/* Guidance drawing (12 s): chunk, match, prompt, check, filter. The still state is the reviewed draft. */
.gd-chunk{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 5}
.gd-step-1{animation:gd-chunk-1 var(--gd) linear infinite}
.gd-step-2{animation:gd-chunk-2 var(--gd) linear infinite}
.gd-step-3{animation:gd-chunk-3 var(--gd) linear infinite}
.gd-step-4{animation:gd-chunk-4 var(--gd) linear infinite}
.gd-target{fill:var(--accent);opacity:.14;animation:gd-target var(--gd) linear infinite}
.gd-match{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:var(--accent);stroke-width:1.5;animation:gd-match var(--gd) linear infinite}
.gd-link-match{animation:gd-draw-match var(--gd) ease-out infinite}
.gd-packet{fill:var(--accent);opacity:0}
.gd-packet-draft{animation:gd-packet-draft var(--gd) ease-in-out infinite}
.gd-packet-guide{animation:gd-packet-guide var(--gd) ease-in-out infinite}
.gd-packet-out{animation:gd-packet-out var(--gd) ease-in-out infinite}
.gd-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;animation:gd-ring var(--gd) ease-out infinite}
.gd-card1{animation:gd-card1 var(--gd) ease-out infinite}
.gd-link-source{animation:gd-draw-source var(--gd) ease-out infinite}
.gd-check{animation:gd-check var(--gd) ease-out infinite}
.gd-card2{opacity:.4;animation:gd-card2 var(--gd) ease-out infinite}
.gd-strike{stroke-width:2.5;animation:gd-draw-strike var(--gd) ease-out infinite}
.gd-reject{animation:gd-reject var(--gd) ease-out infinite}
.gd-accepted{fill:var(--accent);animation:gd-accepted var(--gd) linear infinite}
.invention-guidance .invention-steps li:nth-child(1){animation:gd-s1 var(--gd) linear infinite}
.invention-guidance .invention-steps li:nth-child(2){animation:gd-s2 var(--gd) linear infinite}
.invention-guidance .invention-steps li:nth-child(3){animation:gd-s3 var(--gd) linear infinite}
.invention-guidance .invention-steps li:nth-child(4){animation:gd-s4 var(--gd) linear infinite}
.invention-guidance .invention-steps li:nth-child(5){animation:gd-s5 var(--gd) linear infinite}
@keyframes gd-chunk-1{0%,1%{opacity:0}4%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes gd-chunk-2{0%,5%{opacity:0}8%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes gd-chunk-3{0%,9%{opacity:0}12%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes gd-chunk-4{0%,13%{opacity:0}16%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes gd-draw-match{0%,19%{stroke-dashoffset:1}27%,95%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes gd-match{0%,25%{opacity:0}29%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes gd-target{0%,33%{opacity:0}36%,95%{opacity:.14}98%,100%{opacity:0}}
@keyframes gd-packet-draft{0%,34%{opacity:0;transform:translate(0,0)}35%{opacity:1;transform:translate(0,0)}42%{opacity:1;transform:translate(7px,32px)}43%,100%{opacity:0;transform:translate(7px,32px)}}
@keyframes gd-packet-guide{0%,34%{opacity:0;transform:translate(0,0)}35%{opacity:1;transform:translate(0,0)}42%{opacity:1;transform:translate(-47px,114px)}43%,100%{opacity:0;transform:translate(-47px,114px)}}
@keyframes gd-ring{0%,42%{opacity:0;transform:scale(.8)}45%{opacity:.9;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.3)}}
@keyframes gd-packet-out{0%,46%{opacity:0;transform:translate(0,0)}47%{opacity:1;transform:translate(0,0)}51%{opacity:1;transform:translate(48px,22px)}52%,100%{opacity:0;transform:translate(48px,22px)}}
@keyframes gd-card1{0%,48%{opacity:0;transform:translateY(12px)}53%,95%{opacity:1;transform:translateY(0)}98%,100%{opacity:0;transform:translateY(0)}}
@keyframes gd-draw-source{0%,54%{stroke-dashoffset:1}61%,95%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes gd-check{0%,60%{opacity:0;transform:scale(.3)}63%{opacity:1;transform:scale(1.2)}65%,95%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.3)}}
@keyframes gd-card2{0%,68%{opacity:0;transform:translateY(12px)}72%,78%{opacity:1;transform:translateY(0)}84%,95%{opacity:.4;transform:translateY(0)}98%,100%{opacity:0;transform:translateY(0)}}
@keyframes gd-draw-strike{0%,75%{stroke-dashoffset:1}80%,95%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes gd-reject{0%,77%{opacity:0;transform:scale(.3)}80%{opacity:1;transform:scale(1.2)}82%,95%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.3)}}
@keyframes gd-accepted{0%,85%{opacity:0}89%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes gd-s1{0%,17%{opacity:1;border-top-color:var(--accent)}19%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes gd-s2{0%,17%{opacity:.45;border-top-color:var(--line)}19%,33%{opacity:1;border-top-color:var(--accent)}35%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes gd-s3{0%,33%{opacity:.45;border-top-color:var(--line)}35%,51%{opacity:1;border-top-color:var(--accent)}53%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes gd-s4{0%,51%{opacity:.45;border-top-color:var(--line)}53%,67%{opacity:1;border-top-color:var(--accent)}69%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes gd-s5{0%,67%{opacity:.45;border-top-color:var(--line)}69%,95%{opacity:1;border-top-color:var(--accent)}98%,100%{opacity:.45;border-top-color:var(--line)}}
/* Paused or off screen, a drawing shows its finished state; it restarts from the first step when it plays. */
.invention-figure[data-motion="paused"] *{animation:none!important}

/* Verdant diagrams: the same figure panel as the patent drawings, with the email graph and rules engine
   drawn in theme colours. The rules engine runs its ruleset twice per 14 s loop; its still is the plain ruleset. */
.vd text{font-family:inherit}
.vd-node{fill:var(--card);stroke:var(--line);stroke-width:1.25}
.vd-kind,.vd-hub-kind{font-size:13px;letter-spacing:1.2px}
.vd-kind{fill:var(--muted)}
.vd-name,.vd-hub-name{font-size:25px;font-weight:500;letter-spacing:-.5px}
.vd-name{fill:var(--ink)}
.vd-rules .vd-name,.vd-rules .vd-hub-name{font-size:21px;letter-spacing:-.3px}
.vd-hub{fill:var(--pine)}
.vd-hub-kind,.vd-hub-meta{fill:var(--card);opacity:.78}
.vd-hub-name{fill:var(--card)}
.vd-hub-meta{font-size:13px}
.vd-hub-rule{fill:none;stroke:var(--card);opacity:.35}
.vd-edge,.vd-arrow{fill:none;stroke:var(--muted);stroke-width:1.8}
.vd-relation{fill:var(--muted);font-size:12px;letter-spacing:.7px}
.vd-rules .vd-relation{font-size:11px;letter-spacing:.6px}
.vd-lit-edge{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.vd-lit-node{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-width:2.5;opacity:0}
.vd-lit-hub{fill:none;stroke:var(--accent);stroke-width:3;opacity:0}
.verdant-run{--steps:2;--run:14s}
.verdant-run .invention-steps h4::before{content:none}
.vr-start{animation:vr-start var(--run) linear infinite}
.vr-q1{animation:vr-q1 var(--run) linear infinite}
.vr-q2{animation:vr-q2 var(--run) linear infinite}
.vr-act{animation:vr-act var(--run) linear infinite}
.vr-some{animation:vr-some var(--run) linear infinite}
.vr-none{animation:vr-none var(--run) linear infinite}
.vr-e-start{animation:vr-e-start var(--run) ease-out infinite}
.vr-e-q1-q2{animation:vr-e-q1-q2 var(--run) ease-out infinite}
.vr-e-q2-act{animation:vr-e-q2-act var(--run) ease-out infinite}
.vr-e-act-some{animation:vr-e-act-some var(--run) ease-out infinite}
.vr-e-q1-act{animation:vr-e-q1-act var(--run) ease-out infinite}
.vr-e-act-none{animation:vr-e-act-none var(--run) ease-out infinite}
.vr-l-q1-no{animation:vr-l-q1-no var(--run) linear infinite}
.vr-l-q2-no{animation:vr-l-q2-no var(--run) linear infinite}
.vr-l-made{animation:vr-l-made var(--run) linear infinite}
.vr-l-q1-yes{animation:vr-l-q1-yes var(--run) linear infinite}
.vr-l-cant{animation:vr-l-cant var(--run) linear infinite}
.verdant-run .invention-steps li:nth-child(1){animation:vr-s1 var(--run) linear infinite}
.verdant-run .invention-steps li:nth-child(2){animation:vr-s2 var(--run) linear infinite}
/* Run 1 (0–48%): start, no, no, decision made. Run 2 (50–98%): start, yes, can't decide. */
@keyframes vr-start{0%,46%{opacity:1}49%,50%{opacity:0}51%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes vr-q1{0%,8%{opacity:0}10%,46%{opacity:1}49%,58%{opacity:0}60%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes vr-q2{0%,18%{opacity:0}20%,46%{opacity:1}49%,100%{opacity:0}}
@keyframes vr-act{0%,28%{opacity:0}30%,46%{opacity:1}49%,68%{opacity:0}70%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes vr-some{0%,38%{opacity:0}40%,46%{opacity:1}49%,100%{opacity:0}}
@keyframes vr-none{0%,78%{opacity:0}80%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes vr-e-start{0%,3%{stroke-dashoffset:1;opacity:1}8%,46%{stroke-dashoffset:0;opacity:1}49%{stroke-dashoffset:0;opacity:0}50%,53%{stroke-dashoffset:1;opacity:1}58%,95%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes vr-e-q1-q2{0%,13%{stroke-dashoffset:1;opacity:1}18%,46%{stroke-dashoffset:0;opacity:1}49%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes vr-e-q2-act{0%,23%{stroke-dashoffset:1;opacity:1}28%,46%{stroke-dashoffset:0;opacity:1}49%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes vr-e-act-some{0%,33%{stroke-dashoffset:1;opacity:1}38%,46%{stroke-dashoffset:0;opacity:1}49%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes vr-e-q1-act{0%,63%{stroke-dashoffset:1;opacity:1}68%,95%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes vr-e-act-none{0%,73%{stroke-dashoffset:1;opacity:1}78%,95%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes vr-l-q1-no{0%,12%{fill:var(--muted)}14%,46%{fill:var(--accent)}49%,100%{fill:var(--muted)}}
@keyframes vr-l-q2-no{0%,22%{fill:var(--muted)}24%,46%{fill:var(--accent)}49%,100%{fill:var(--muted)}}
@keyframes vr-l-made{0%,32%{fill:var(--muted)}34%,46%{fill:var(--accent)}49%,100%{fill:var(--muted)}}
@keyframes vr-l-q1-yes{0%,62%{fill:var(--muted)}64%,95%{fill:var(--accent)}98%,100%{fill:var(--muted)}}
@keyframes vr-l-cant{0%,72%{fill:var(--muted)}74%,95%{fill:var(--accent)}98%,100%{fill:var(--muted)}}
@keyframes vr-s1{0%,47%{opacity:1;border-top-color:var(--accent)}49%,100%{opacity:.45;border-top-color:var(--line)}}
@keyframes vr-s2{0%,49%{opacity:.45;border-top-color:var(--line)}51%,96%{opacity:1;border-top-color:var(--accent)}98%,100%{opacity:.45;border-top-color:var(--line)}}

/* In Residence: one generation cycle on a second orb, and a real gallery note. */
.orb-cycle-body{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center}
.orb-cycle-body:has(.orb-cycle-display[hidden]){grid-template-columns:1fr}
.orb-cycle-display[hidden]{display:none}
.orb-cycle-display canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;image-rendering:pixelated}
.orb-cycle-steps{list-style:none;padding:0;margin:0}
.orb-cycle-steps li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:3px 16px;padding:11px 0;border-top:1px solid var(--line);transition:opacity .3s,border-color .3s}
.orb-cycle-steps li>span{grid-row:1/3;padding-top:2px;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.orb-cycle-steps h4{font-size:14px;line-height:1.35;font-weight:600}
.orb-cycle-steps p{font-size:12.5px;line-height:1.55;color:var(--muted)}
.orb-cycle.is-playing .orb-cycle-steps li:not(.is-active){opacity:.42}
.orb-cycle.is-playing .orb-cycle-steps li.is-active{border-top-color:var(--accent)}
.orb-cycle.is-playing .orb-cycle-steps li.is-active>span{color:var(--accent)}
@media(max-width:600px){.orb-cycle-body{grid-template-columns:1fr}.orb-cycle-display{width:min(200px,70%);margin-inline:auto}}
.gallery-note{margin:6px 0 34px;padding:4px 0 4px 22px;border-left:2px solid var(--accent);max-width:680px}
.gallery-note p{font-size:17px;line-height:1.7;font-style:italic}
.gallery-note footer{margin-top:10px;font-size:12px;color:var(--muted)}
/* FORM: the Lorenz attractor drawn live, on the same panel as the other drawings. */
.lorenz-figure[hidden]{display:none}
.lorenz-figure canvas{display:block;width:100%;height:auto;aspect-ratio:16/10}
.lorenz-controls{display:flex;align-items:center;gap:18px;flex-shrink:0}
.lorenz-readout{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:pre}
@media(max-width:520px){.lorenz-controls{width:100%;justify-content:space-between}.lorenz-readout{font-size:10px}}
/* One piece from each resident, in a row under their briefs. */
.resident-work{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:28px 0 6px}
.resident-work .project-figure{margin:0}
.resident-work .image-zoom{display:none}
.resident-work figcaption{margin-top:8px;font-size:11.5px;line-height:1.4}
@media(max-width:760px){.resident-work{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.resident-work{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Studio page: the studio's publicly described work, and its public timeline. */
.public-work{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.public-work li{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:20px 20px 22px;border:1px solid var(--line);background:var(--card)}
.public-work-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;margin-bottom:18px}
.public-work-icon{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.public-work-top span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.public-work h3{font-size:17px;line-height:1.3;letter-spacing:-.02em}
.public-work p{font-size:13px;line-height:1.7;color:var(--muted);margin-top:8px}
.public-work a{display:inline-flex;align-items:flex-end;min-height:40px;margin-top:auto;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.public-work a:hover,.milestones a:hover{color:var(--accent)}
.milestones{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 18px}
.milestones li{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:30px}
.milestones li::before{content:"";position:absolute;top:5px;left:0;right:-18px;height:1px;background:var(--line)}
.milestones li:last-child::before{right:0}
.milestones li::after{content:"";position:absolute;top:0;left:0;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--accent);background:var(--paper)}
.milestones li:last-child::after{background:var(--accent)}
.milestone-date{font-size:12px;font-weight:600;color:var(--accent)}
.milestones h3{font-size:16px;line-height:1.3;letter-spacing:-.02em;margin-top:6px}
.milestones p{font-size:12.5px;line-height:1.65;color:var(--muted);margin-top:8px}
.milestones a{display:inline-flex;align-items:center;min-height:40px;margin-top:4px;font-size:12px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media(max-width:900px){.public-work{grid-template-columns:repeat(2,minmax(0,1fr))}.milestones{grid-template-columns:1fr;gap:0}.milestones li{padding:0 0 22px 30px}.milestones li::before{top:5px;bottom:0;left:5px;right:auto;width:1px;height:auto}.milestones li:last-child::before{display:none}}
@media(max-width:520px){.public-work{grid-template-columns:1fr}}