:root{
  --bg:#0e1012;--bg2:#181b1e;--paper:#f4f3ee;--ink:#0c0d0f;--white:#f9faf8;--muted:#9aa0a5;--line:rgba(255,255,255,.16);--line-dark:rgba(12,13,15,.15);--signal:#b9ff39;--wrap:min(1240px,calc(100% - 64px));--mono:'DM Mono',monospace;--display:'Space Grotesk',sans-serif;--serif:'Instrument Serif',serif;--header:74px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0d0f11;color:var(--white);font:400 16px/1.6 var(--display);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}.wrap{width:var(--wrap);margin-inline:auto}.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}.skip-link{position:fixed;left:18px;top:-60px;z-index:999;background:var(--signal);color:#000;padding:10px 14px}.skip-link:focus{top:16px}
.ambient{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 14% 8%,rgba(255,255,255,.09),transparent 26%),radial-gradient(circle at 88% 18%,rgba(255,255,255,.06),transparent 24%),linear-gradient(118deg,#090a0b 0%,#181b1f 32%,#0b0d0f 56%,#262a2e 79%,#0b0c0e 100%);background-size:140% 140%;filter:saturate(.82)}.ambient:after{content:"";position:absolute;inset:0;opacity:.2;background:repeating-linear-gradient(110deg,transparent 0 2px,rgba(255,255,255,.015) 3px 4px,transparent 5px 9px);mix-blend-mode:soft-light;pointer-events:none}
.kicker,.project-meta{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}.kicker{color:var(--signal)}
.site-header{position:fixed;z-index:100;left:0;right:0;top:0;height:var(--header);display:flex;align-items:center;border-bottom:1px solid transparent;transition:.25s ease;background:linear-gradient(180deg,rgba(8,9,10,.68),rgba(8,9,10,.18));backdrop-filter:blur(18px)}.site-header.is-scrolled{background:rgba(10,11,12,.78);border-color:rgba(255,255,255,.1)}.nav-shell{width:var(--wrap);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}.wordmark{font-size:15px;letter-spacing:-.03em;white-space:nowrap}.wordmark strong{font-weight:700}.site-nav{display:flex;align-items:center;gap:28px}.nav-main,.nav-social{display:flex;align-items:center;gap:24px}.nav-main a,.nav-social a{font-size:12px;color:#d9dddf;position:relative}.nav-main a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--signal);transition:.25s ease}.nav-main a:hover:after,.nav-main a.is-active:after{right:0}.nav-social{gap:14px;border-left:1px solid var(--line);padding-left:22px}.nav-social a{font:500 10px var(--mono);letter-spacing:.08em}.nav-cta{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:600}.nav-cta span{color:var(--signal);transition:transform .2s}.nav-cta:hover span{transform:translate(3px,-3px)}.nav-toggle{display:none;background:none;border:0;color:#fff;width:40px;height:40px;position:relative}.nav-toggle i{position:absolute;width:22px;height:1px;background:#fff;left:9px;top:16px}.nav-toggle i+ i{top:23px}
.hero{min-height:100svh;padding:calc(var(--header) + 92px) 0 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.hero-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.72fr);align-items:center;gap:8vw}.hero-copy{padding-top:4vh}.hero h1{margin:30px 0 32px;font-size:clamp(5rem,8.7vw,9rem);line-height:.78;letter-spacing:-.075em;font-weight:600;max-width:850px}.hero h1 span,.hero h1 strong,.hero h1 em{display:block}.hero h1 em{font:italic 400 .56em/1 var(--serif);letter-spacing:-.02em;color:#bfc3c6;margin-left:11%;margin-block:.13em}.hero h1 strong{font-weight:600;color:var(--signal)}.hero-support{max-width:590px;color:#c6cbcf;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5}.hero-actions{display:flex;gap:26px;margin-top:42px;flex-wrap:wrap}.line-link{display:inline-flex;align-items:center;gap:28px;border-bottom:1px solid currentColor;padding:0 0 7px;font-size:13px;font-weight:600;transition:.2s}.line-link span{transition:.2s;color:var(--signal)}.line-link:hover{gap:34px}.line-link.ghost{color:#aeb4b8}.portrait-stage{margin:0;position:relative;justify-self:end;width:min(100%,520px)}.portrait-metal{position:relative;padding:1px;background:linear-gradient(145deg,#f1f2f3 0%,#656b70 17%,#17191c 43%,#9fa5aa 70%,#2a2d30 100%);box-shadow:0 40px 100px rgba(0,0,0,.36)}.portrait-inner{position:relative;aspect-ratio:.83;overflow:hidden;background:linear-gradient(135deg,#d9dadd,#747a80 45%,#1b1e21 100%)}.portrait-inner:after{content:"";position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(transparent,rgba(10,11,12,.75));pointer-events:none}.portrait-inner img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(.82) contrast(1.03)}.corner{position:absolute;width:20px;height:20px;border-color:var(--signal);z-index:2}.corner.tl{left:-8px;top:-8px;border-left:1px solid;border-top:1px solid}.corner.tr{right:-8px;top:-8px;border-right:1px solid;border-top:1px solid}.corner.bl{left:-8px;bottom:-8px;border-left:1px solid;border-bottom:1px solid}.corner.br{right:-8px;bottom:-8px;border-right:1px solid;border-bottom:1px solid}.portrait-stage figcaption{display:flex;justify-content:space-between;margin-top:14px;color:#aeb4b8;font:400 10px var(--mono);letter-spacing:.1em}.hero-foot{display:flex;align-items:center;gap:24px;margin-top:50px;color:#8f969b;font:500 10px var(--mono);letter-spacing:.13em;text-transform:uppercase}.hero-foot i{display:block;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.4),transparent);flex:1}
.selected-work{background:var(--paper);color:var(--ink);padding:150px 0 80px;position:relative}.work-intro{padding-left:140px}.work-intro .kicker{color:#667078}.work-intro h2{font-size:clamp(3.8rem,7vw,7.2rem);line-height:.92;letter-spacing:-.065em;max-width:900px;margin:20px 0 120px;font-weight:600}.work-intro h2 em{font:italic 400 1em var(--serif);color:#737b81}.work-sequence{position:relative}.work-spine{position:absolute;left:51px;top:70px;bottom:100px;width:2px}.spine-line,.spine-progress{position:absolute;inset:0 auto 0 0;width:1px}.spine-line{background:rgba(12,13,15,.16)}.spine-progress{background:var(--ink);height:0;bottom:auto;transition:height .25s ease}.project{position:relative;display:grid;grid-template-columns:105px minmax(0,.82fr) minmax(460px,1.18fr);gap:46px;align-items:center;padding:80px 0 150px}.project:nth-of-type(3){grid-template-columns:105px minmax(460px,1.18fr) minmax(0,.82fr)}.project:nth-of-type(3) .project-index{grid-column:1}.project:nth-of-type(3) .web-illustration{grid-column:2}.project:nth-of-type(3) .project-copy{grid-column:3}.project-index{align-self:start;position:sticky;top:120px;width:74px;height:74px;border:1px solid rgba(12,13,15,.28);border-radius:50%;background:var(--paper);z-index:3;display:grid;place-items:center;transition:.25s}.project-index:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#a8adb0;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}.project-index span{font:500 18px var(--mono)}.project.is-active .project-index{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 8px var(--paper)}.project.is-active .project-index span{color:var(--signal)}.project-copy{max-width:500px}.project-meta{color:#6e757a;margin:0 0 18px}.project-copy h3{font-size:clamp(3rem,5.2vw,5.8rem);line-height:.9;letter-spacing:-.06em;margin:0 0 24px;font-weight:600}.project-lede{font-size:1.35rem!important;line-height:1.35!important;color:#202326!important;max-width:440px}.project-copy>p:not(.project-meta,.project-lede){color:#646b70;max-width:470px}.project-proof{display:flex;align-items:flex-end;gap:14px;margin:30px 0}.project-proof strong{font-size:3.2rem;letter-spacing:-.06em;line-height:.8}.project-proof span{font:500 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#676e72;max-width:90px}.project-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px}.selected-work .line-link span{color:#4a5054}.selected-work .line-link.ghost{color:#6b7277}
.editor-demo{border:1px solid #2e3437;background:#0b1612;color:#f3f5ef;box-shadow:0 36px 70px rgba(9,14,12,.17);overflow:hidden;min-height:540px}.demo-top{height:46px;border-bottom:1px solid rgba(255,255,255,.14);display:flex;align-items:center;padding:0 16px;gap:7px;font:400 9px var(--mono);letter-spacing:.08em}.demo-top>span{width:7px;height:7px;border-radius:50%;background:#6a7570}.demo-top strong{margin-left:8px;font-weight:400;color:#aeb8b2}.demo-top em{margin-left:auto;color:var(--signal);font-style:normal}.demo-stage{display:grid;grid-template-columns:1fr 165px;min-height:330px}.footage{position:relative;overflow:hidden;background:#aebdc0}.sky{position:absolute;inset:0 0 46%;background:linear-gradient(#adc0c5,#d4dedf)}.hill{position:absolute;border-radius:50% 50% 0 0}.h1{width:130%;height:55%;left:-15%;bottom:-15%;background:#718475}.h2{width:90%;height:40%;left:20%;bottom:-9%;background:#456353}.subject{position:absolute;left:57%;bottom:24%;width:40px;height:96px}.subject i{display:block;width:30px;height:30px;border-radius:50%;background:#c8a27b;margin:auto}.subject b{display:block;width:40px;height:66px;background:#17324a}.face-box{position:absolute;left:calc(57% - 2px);bottom:calc(24% + 64px);width:44px;height:42px;border:1px solid var(--signal)}.face-box small{position:absolute;top:-14px;color:var(--signal);font:500 7px var(--mono)}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:48px 48px}.scan{position:absolute;left:0;right:0;height:1px;background:var(--signal);box-shadow:0 0 18px rgba(185,255,57,.45);top:24%;opacity:.8}.editor-demo.is-running .scan{animation:scan 2.2s ease-in-out infinite}@keyframes scan{50%{top:80%}}.analysis-panel{background:#0f211a;padding:24px 17px}.analysis-panel p{color:var(--signal);font:500 9px var(--mono);letter-spacing:.1em}.analysis-panel dl{margin-top:30px}.analysis-panel dl div{border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0}.analysis-panel dt{font:400 8px var(--mono);color:#87918c}.analysis-panel dd{margin:2px 0 0;font:500 13px var(--mono)}.analysis-panel dd.signal{color:var(--signal)}.meter{height:3px;background:rgba(255,255,255,.12);margin-top:22px}.meter i{display:block;height:100%;width:32%;background:var(--signal);transition:width .45s ease}.timeline{padding:16px;background:#09120f;border-top:1px solid rgba(255,255,255,.12)}.timeline-head,.timeline-foot{display:flex;justify-content:space-between;align-items:center;font:400 8px var(--mono);color:#7f8a84}.timeline-head strong{font-weight:400;color:#d7ddd8}.frames{height:54px;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:12px 0;position:relative}.frames i{background:linear-gradient(145deg,#274037 0 48%,#15251f 49%)}.frames i.selected{outline:1px solid var(--signal);background:linear-gradient(145deg,#426251 0 48%,#233b31 49%)}.frames b{position:absolute;left:48%;top:-5px;bottom:-5px;width:1px;background:#fff}.timeline-foot strong{color:var(--signal);font-weight:500;letter-spacing:.08em}
.web-illustration{position:relative;min-height:510px;display:grid;place-items:center}.web-window{width:88%;aspect-ratio:1.22;position:relative;z-index:3;background:#d9d5c9;border:1px solid #2c3034;box-shadow:0 35px 70px rgba(20,22,24,.16);overflow:hidden}.web-chrome{height:36px;background:#ece8dd;display:flex;align-items:center;gap:6px;padding:0 12px;color:#24272a}.web-chrome span{width:7px;height:7px;border-radius:50%;background:#a7a39a}.web-chrome b{font:500 8px var(--mono);margin-left:8px}.web-chrome em{font:500 7px var(--mono);font-style:normal;margin-left:auto;color:#936d27}.web-artboard{position:relative;height:calc(100% - 36px);background:#071d2d;overflow:hidden;color:#f4efe3}.web-artboard:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 45%,rgba(186,150,72,.16),transparent 28%),linear-gradient(100deg,rgba(255,255,255,.02),transparent 50%)}.web-nav{height:42px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;z-index:2}.web-nav strong{font:600 8px var(--display);letter-spacing:.08em}.web-nav span{font:500 5px var(--mono);color:#a7b0b6}.web-hero-art{height:62%;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding:24px 35px;position:relative;z-index:2}.web-copy small{font:500 5px var(--mono);color:#c29a4d;letter-spacing:.13em}.web-copy h4{font:italic 400 34px/1 var(--serif);margin:8px 0}.web-copy p{font-size:7px;line-height:1.5;color:#c3c9cb;width:78%}.web-copy i{display:inline-block;width:48px;height:12px;border:1px solid #b78d3d;margin-right:6px}.web-portrait-art{justify-self:end;width:78%;height:75%;position:relative;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,#c1b69d,#6e766e 50%,#17263a);overflow:hidden}.web-portrait-art .head{position:absolute;width:28%;aspect-ratio:1;border-radius:50%;background:#c7aa84;left:36%;top:12%}.web-portrait-art .coat{position:absolute;width:58%;height:60%;border-radius:45% 45% 0 0;background:#343738;left:21%;bottom:0}.book-stack{position:absolute;bottom:8%;right:5%;display:flex;gap:3px}.book-stack b{display:block;width:18px;height:42px;background:#86563e;border:1px solid #ceb276}.book-stack b:nth-child(2){height:48px;background:#a58d5a}.book-stack b:nth-child(3){height:38px;background:#55453a}.web-book-strip{position:absolute;left:0;right:0;bottom:0;height:28%;background:#f0eadb;display:flex;gap:13px;padding:12px 34px}.web-book-strip div{display:grid;grid-template-columns:20px 1fr;gap:7px;flex:1}.web-book-strip i{background:#274255}.web-book-strip span{height:5px;background:#a4a39d;margin-top:4px;box-shadow:0 8px 0 #c7c5be,0 16px 0 #d6d3ca}.web-cursor{position:absolute;color:#d4a64f;font-size:22px;right:25%;top:44%;transform:rotate(-28deg);transition:.5s}.web-illustration.is-running .web-cursor{animation:pointer 3.2s ease-in-out infinite}@keyframes pointer{50%{transform:translate(-55px,40px) rotate(-28deg)}}.web-shadow-card{position:absolute;width:74%;aspect-ratio:1.24;border:1px solid rgba(12,13,15,.18);background:#d7d2c5;left:5%;top:13%;transform:rotate(-4deg)}.web-shadow-card.two{left:18%;top:6%;transform:rotate(4deg);background:#c4c2bc}
.harp-demo{border:1px solid #bdc2c4;background:#eef0ed;box-shadow:0 32px 65px rgba(20,22,24,.13);min-height:520px}.harp-tabs{display:grid;grid-template-columns:repeat(3,1fr);height:55px;border-bottom:1px solid #ccd0d2}.harp-tabs span{display:flex;align-items:center;justify-content:center;font:500 7px var(--mono);letter-spacing:.08em;color:#a0a5a8;border-bottom:2px solid transparent}.harp-tabs span.is-active{color:#1d2225;border-color:#1d2225}.harp-canvas{position:relative;min-height:465px;overflow:hidden;background-image:linear-gradient(rgba(34,48,57,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(34,48,57,.055) 1px,transparent 1px);background-size:28px 28px}.harp-theory,.harp-code,.harp-graph{position:absolute;transition:opacity .55s ease,transform .55s ease}.harp-theory{left:34px;top:34px;color:#17232b}.harp-theory b{display:block;font:italic 400 28px var(--serif)}.harp-theory span{font:500 8px var(--mono);color:#64809a}.harp-theory p{font:italic 400 18px var(--serif);margin-top:22px}.harp-code{right:24px;top:44px;width:56%;padding:16px;background:rgba(255,255,255,.9);border:1px solid #cbd3d7;color:#687d8a;font:400 8px/1.7 var(--mono);white-space:pre-wrap}.harp-code b{color:#22405a}.harp-graph{width:74%;height:auto;left:14%;top:83px}.harp-graph .edge{fill:none;stroke:#415d6f;stroke-width:2;opacity:.7}.harp-graph .node circle{fill:#f7f9f7;stroke:#223947;stroke-width:2}.harp-graph .node text,.harp-graph .layer-label,.harp-graph .edge-label{fill:#233845;font:500 12px var(--mono);text-anchor:middle}.harp-graph .layer{fill:rgba(185,255,57,.12);stroke:rgba(88,116,61,.32)}.harp-graph .layer-label{fill:#74877c}.harp-caption{position:absolute;right:24px;bottom:18px;color:#33454f;font:500 8px var(--mono);letter-spacing:.1em}.harp-demo[data-stage="0"] .harp-code,.harp-demo[data-stage="0"] .harp-graph{opacity:.08}.harp-demo[data-stage="0"] .harp-theory{opacity:1}.harp-demo[data-stage="1"] .harp-theory{opacity:.22}.harp-demo[data-stage="1"] .harp-code{opacity:1;transform:translateY(0)}.harp-demo[data-stage="1"] .harp-graph{opacity:.12}.harp-demo[data-stage="2"] .harp-theory{opacity:.18}.harp-demo[data-stage="2"] .harp-code{opacity:.26}.harp-demo[data-stage="2"] .harp-graph{opacity:1}
.creative-section{padding:150px 0;background:linear-gradient(120deg,#07090b 0%,#16191c 42%,#090b0d 100%);position:relative;overflow:hidden}.creative-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(185,255,57,.07),transparent 25%),linear-gradient(90deg,transparent 0 49.9%,rgba(255,255,255,.03) 50%,transparent 50.1%);pointer-events:none}.creative-shell{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start}.creative-copy{position:sticky;top:125px}.creative-copy h2{font-size:clamp(3.8rem,6vw,6.4rem);line-height:.91;letter-spacing:-.06em;margin:24px 0 30px}.creative-copy h2 em{font:italic 400 1em var(--serif);color:#b7bec2}.creative-copy>p:last-child{color:#9aa1a6;max-width:470px}.creative-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}.metric,.media-card{border:1px solid rgba(255,255,255,.16);position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));backdrop-filter:blur(8px)}.metric{min-height:230px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end}.metric strong{font-size:clamp(4rem,7.5vw,7.8rem);line-height:.8;letter-spacing:-.07em}.metric span{font:500 9px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#aeb5b9;margin-top:20px;max-width:170px}.metric-main{grid-column:1/3;min-height:330px}.metric-main strong{font-size:clamp(7rem,13vw,13rem);color:var(--signal)}.metric-main:after{content:"";position:absolute;right:-5%;top:-30%;width:52%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 40px rgba(255,255,255,.015),0 0 0 80px rgba(255,255,255,.01)}.media-card{min-height:220px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end}.media-card span{position:absolute;left:20px;top:18px;font:500 8px var(--mono);letter-spacing:.1em;color:var(--signal)}.media-card strong{font-size:1.3rem;line-height:1.1;max-width:220px}.media-card small{color:#92999e;margin-top:8px;font-size:.8rem}.frame-lines{position:absolute;right:18px;top:18px;width:90px;height:60px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1px,transparent 1px 9px)}.play-mark{position:absolute;right:22px;top:22px;font-size:38px;color:rgba(255,255,255,.16)}.cutmarks{position:absolute;right:20px;top:24px;display:flex;gap:5px}.cutmarks i{display:block;width:23px;height:34px;background:#3a4146;transform:skew(-10deg)}.creative-axis{grid-column:1/3;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;gap:12px;align-items:center;color:#7f878c;font:500 8px var(--mono);letter-spacing:.1em;margin-top:18px}.creative-axis i{height:1px;background:linear-gradient(90deg,#646d72,rgba(255,255,255,.08))}
.capabilities{background:var(--paper);color:var(--ink);padding:150px 0}.capability-shell{display:grid;grid-template-columns:.58fr 1.42fr;gap:100px}.capability-intro{position:sticky;top:130px;align-self:start}.capability-intro .kicker{color:#636b70}.capability-intro h2{font-size:clamp(4rem,6vw,6.8rem);line-height:.88;letter-spacing:-.065em;margin:20px 0}.capability-intro h2 em{font:italic 400 1em var(--serif);color:#737b80}.capability-list{border-top:1px solid var(--ink)}.capability-list details{border-bottom:1px solid var(--line-dark)}.capability-list summary{list-style:none;display:grid;grid-template-columns:52px 1fr minmax(180px,.5fr) 30px;gap:20px;align-items:center;min-height:138px;cursor:pointer}.capability-list summary::-webkit-details-marker{display:none}.capability-list summary>span{font:500 11px var(--mono);color:#8c9296}.capability-list summary strong{font-size:clamp(2.7rem,4.4vw,5.1rem);letter-spacing:-.055em;line-height:.9}.capability-list summary em{font-style:normal;color:#737b80;font-size:.88rem}.capability-list summary i{font:400 24px var(--display);transition:transform .25s}.capability-list details[open] summary strong{color:#000}.capability-list details[open] summary i{transform:rotate(45deg)}.capability-list details>p{margin:-12px 50px 38px 72px;max-width:650px;color:#5c6367;font-size:1.05rem}
.about-section{padding:160px 0;background:linear-gradient(128deg,#111316 0%,#2a2e32 25%,#0f1113 58%,#202428 100%);position:relative}.about-section:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(255,255,255,.028),transparent 48%);pointer-events:none}.about-shell{display:grid;grid-template-columns:.72fr 1.28fr;gap:100px;position:relative;z-index:1}.about-intro{position:sticky;top:120px;align-self:start}.about-intro h2{font-size:clamp(4.5rem,7vw,7.4rem);letter-spacing:-.07em;line-height:.9;margin:20px 0 30px}.about-lede{font-size:1.45rem;line-height:1.38;color:#f4f5f3;max-width:520px}.about-intro>p:not(.kicker,.about-lede){color:#aeb4b8;max-width:530px}.about-actions{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}.career{border-top:1px solid rgba(255,255,255,.36)}.career-head{display:flex;justify-content:space-between;padding:15px 0 12px;color:#aeb5b9;font:500 9px var(--mono);letter-spacing:.1em}.career-head.secondary{margin-top:65px;border-top:1px solid rgba(255,255,255,.36)}.career-list details{border-top:1px solid rgba(255,255,255,.12)}.career-list details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}.career-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:38px 1fr 155px 20px;gap:14px;padding:24px 0;align-items:start}.career-list summary::-webkit-details-marker{display:none}.career-num{font:500 9px var(--mono);color:var(--signal)}.career-list summary strong{display:block;font-size:1rem}.career-list summary small{display:block;color:#92999e;margin-top:3px}.career-list time{font:500 8px var(--mono);color:#91989d;text-align:right}.career-list summary i{font-style:normal;color:#9ca3a8;transition:transform .2s}.career-list details[open] summary i{transform:rotate(45deg);color:var(--signal)}.career-body{padding:0 30px 26px 52px;max-width:670px}.career-body p{color:#b7bdc1}.career-body span{font:500 8px var(--mono);letter-spacing:.08em;color:var(--signal)}.compact-records{border-top:1px solid rgba(255,255,255,.12)}.compact-records>div{display:grid;grid-template-columns:45px 1fr;border-bottom:1px solid rgba(255,255,255,.12);padding:18px 0}.compact-records>div>span{font:500 8px var(--mono);color:#7f878c}.compact-records p{margin:0}.compact-records strong{display:block;font-size:.95rem}.compact-records small{display:block;color:#8f979c;margin-top:2px}
.contact-section{padding:170px 0 110px;background:#070809;position:relative;overflow:hidden}.contact-section:before{content:"";position:absolute;width:850px;height:850px;border-radius:50%;right:-380px;top:-420px;background:radial-gradient(circle,rgba(185,255,57,.1),transparent 63%)}.contact-shell{position:relative}.contact-shell h2{font-size:clamp(5rem,10vw,11rem);letter-spacing:-.08em;line-height:.77;margin:28px 0 36px;max-width:1100px}.contact-shell h2 span{display:block;font:italic 400 .42em/1.1 var(--serif);letter-spacing:-.02em;color:#9ca3a7;margin-bottom:.16em}.contact-shell>p:not(.kicker){color:#92999d;max-width:560px}.contact-primary{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.55);padding:18px 0;margin-top:50px;font-size:clamp(1.25rem,2.4vw,2.2rem);max-width:880px}.contact-primary span{color:var(--signal);transition:.2s}.contact-primary:hover span{transform:translate(5px,-5px)}.contact-links{margin-top:90px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.contact-links a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;font:500 10px var(--mono);letter-spacing:.1em;color:#aab0b4}.contact-links i{height:1px;background:rgba(255,255,255,.23);transition:.25s}.contact-links b{font-weight:400;color:var(--signal)}.contact-links a:hover i{background:var(--signal)}.site-footer{padding:26px 0;background:#070809;border-top:1px solid rgba(255,255,255,.11);color:#878f94}.footer-grid{display:flex;align-items:center;gap:18px;font-size:11px}.footer-grid strong{color:#d9dddf}.footer-grid nav{margin-left:auto;display:flex;gap:22px}.footer-grid nav a:hover{color:#fff}
.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}.js .reveal.is-visible{opacity:1;transform:none}
/* Case-study compatibility */
.subpage{background:var(--paper);color:var(--ink)}.subpage .ambient{display:none}.subpage .site-header{background:rgba(9,10,11,.92)}.case-hero{padding:160px 0 90px;background:linear-gradient(120deg,#0a0b0d,#24282c 45%,#0b0c0e);color:#fff}.back-link,.case-eyebrow{font:500 10px var(--mono);letter-spacing:.1em}.back-link{color:#aab0b4}.case-eyebrow{margin-top:70px;color:var(--signal)}.case-hero h1{font-size:clamp(4rem,8vw,8rem);line-height:.85;letter-spacing:-.07em;margin:18px 0 30px}.case-lede{max-width:850px;font-size:1.35rem;color:#c0c5c8}.case-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:35px}.case-meta span{border:1px solid rgba(255,255,255,.2);padding:7px 9px;font:500 8px var(--mono);letter-spacing:.07em}.case-proof,.case-section{padding:100px 0}.case-proof{background:#111315;color:#fff}.case-proof-grid{display:grid;grid-template-columns:repeat(2,220px) 1fr;gap:40px;align-items:end}.case-proof-grid div strong{display:block;font-size:4rem;line-height:.9;color:var(--signal)}.case-proof-grid div span{font:500 9px var(--mono);text-transform:uppercase;color:#9da4a8}.case-proof-grid>p{color:#aeb4b8}.case-columns{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}.case-columns h2,.case-process>h2{font-size:clamp(3rem,5vw,5rem);line-height:.95;letter-spacing:-.055em;margin:16px 0}.case-copy{max-width:760px;color:#535b60}.case-copy h3{color:#111;margin-top:42px}.case-note{border-left:2px solid var(--signal);padding:12px 18px;background:#ecece7;margin-top:30px}.case-section.alt{background:#e9e9e4}.pipeline{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:55px 0 0;border-top:1px solid #bbb}.pipeline li{padding:24px;border-right:1px solid #c7c7c1;min-height:190px}.pipeline li span{font:500 9px var(--mono);color:#7b8388}.pipeline li strong{display:block;font-size:1.25rem;margin:24px 0 10px}.pipeline li p{font-size:.9rem;color:#666e73}.code-sample{background:#101214;color:#c9d1d5;padding:22px;overflow:auto;font:400 12px/1.65 var(--mono)}.code-sample b{color:var(--signal)}.decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#bbb;margin-top:60px}.decision-grid article{background:#f4f3ee;padding:28px}.decision-grid span{font:500 9px var(--mono)}.technical-visual img{width:100%;height:auto}.visual-caption{font-size:.8rem;color:#777;margin-top:10px}.case-next{background:#111315;color:#fff;padding:40px 0}.case-next .wrap{display:flex;justify-content:space-between}.case-next a{color:var(--signal)}
@media(max-width:1100px){:root{--wrap:min(100% - 44px,1040px)}.site-nav{gap:18px}.nav-main{gap:18px}.nav-social{display:none}.hero-shell{grid-template-columns:1fr .78fr;gap:5vw}.hero h1{font-size:clamp(4.6rem,9vw,7.5rem)}.project{grid-template-columns:90px 1fr 1fr;gap:30px}.project:nth-of-type(3){grid-template-columns:90px 1fr 1fr}.creative-shell,.about-shell{gap:55px}.capability-shell{gap:60px}.capability-list summary{grid-template-columns:42px 1fr 150px 25px}}
@media(max-width:820px){:root{--wrap:calc(100% - 34px);--header:66px}.nav-toggle{display:block}.site-nav{position:fixed;left:0;right:0;top:var(--header);background:rgba(8,9,10,.97);padding:30px 20px 34px;display:none;flex-direction:column;align-items:stretch;border-top:1px solid var(--line)}.site-nav.is-open{display:flex}.nav-main{flex-direction:column;align-items:flex-start;gap:18px}.nav-main a{font-size:1.2rem}.nav-social{display:flex;border:0;padding:0}.nav-cta{margin-top:8px}.hero{padding-top:110px}.hero-shell{grid-template-columns:1fr}.hero-copy{padding-top:0}.hero h1{font-size:clamp(4.6rem,17vw,8rem);max-width:700px}.portrait-stage{width:min(82vw,480px);justify-self:end;margin-top:35px}.work-intro{padding-left:0}.work-intro h2{margin-bottom:75px}.work-spine{left:36px}.project,.project:nth-of-type(3){grid-template-columns:72px 1fr;gap:22px;padding:60px 0 110px}.project-index{width:58px;height:58px}.project-copy{grid-column:2}.editor-demo,.harp-demo,.web-illustration,.project:nth-of-type(3) .web-illustration{grid-column:2;margin-top:20px}.project:nth-of-type(3) .project-copy{grid-column:2;grid-row:auto}.project:nth-of-type(3) .project-index{grid-column:1}.project-web .web-illustration{grid-row:3}.project-web .project-copy{grid-row:2}.demo-stage{grid-template-columns:1fr 130px}.creative-shell,.about-shell,.capability-shell{grid-template-columns:1fr}.creative-copy,.about-intro,.capability-intro{position:static}.creative-board{margin-top:20px}.capability-list summary{grid-template-columns:40px 1fr 25px}.capability-list summary em{display:none}.about-shell{gap:70px}.case-columns{grid-template-columns:1fr;gap:30px}.case-proof-grid{grid-template-columns:1fr 1fr}.case-proof-grid>p{grid-column:1/3}.pipeline{grid-template-columns:1fr 1fr}.decision-grid{grid-template-columns:1fr}.footer-grid nav{display:none}}
@media(max-width:560px){:root{--wrap:calc(100% - 26px)}.hero{padding-top:98px}.hero h1{font-size:clamp(4.2rem,20vw,6.8rem)}.hero h1 em{margin-left:4%}.hero-support{font-size:1rem}.hero-actions{gap:18px}.portrait-stage{width:92vw}.selected-work,.creative-section,.capabilities,.about-section{padding:105px 0}.work-intro h2{font-size:3.8rem}.work-spine{left:28px}.project,.project:nth-of-type(3){grid-template-columns:56px 1fr;gap:16px}.project-index{width:48px;height:48px}.project-index span{font-size:13px}.project-copy h3{font-size:3.5rem}.editor-demo{min-height:0}.demo-stage{grid-template-columns:1fr}.analysis-panel{display:none}.footage{height:260px}.web-window{width:100%}.web-shadow-card{display:none}.web-illustration{min-height:360px}.harp-demo{min-height:430px}.harp-canvas{min-height:375px}.harp-tabs span{font-size:5px}.harp-code{left:12px;right:12px;width:auto;top:80px;font-size:6px}.harp-graph{width:94%;left:3%;top:105px}.creative-board{grid-template-columns:1fr}.metric-main,.creative-axis{grid-column:1}.metric-main{min-height:270px}.metric-main strong{font-size:8rem}.metric{min-height:180px}.media-card{min-height:190px}.creative-axis{font-size:6px;gap:7px}.capability-list summary{min-height:108px}.capability-list summary strong{font-size:2.5rem}.capability-list details>p{margin:-5px 30px 30px 56px}.career-list summary{grid-template-columns:30px 1fr 18px}.career-list time{grid-column:2;text-align:left}.career-list summary i{grid-column:3;grid-row:1}.career-body{padding-left:44px}.contact-shell h2{font-size:5.5rem}.contact-links{grid-template-columns:1fr}.case-proof-grid{grid-template-columns:1fr}.case-proof-grid>p{grid-column:auto}.pipeline{grid-template-columns:1fr}.case-hero h1{font-size:4.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js .reveal{opacity:1;transform:none}.harp-demo[data-stage] .harp-theory,.harp-demo[data-stage] .harp-code,.harp-demo[data-stage] .harp-graph{opacity:1}}

/* ---- Final refinement patch: 2026-08-28 ---- */
/* Hero: keep the full composition inside the first viewport without clipping. */
.hero{min-height:calc(100svh - var(--header));padding:calc(var(--header) + 46px) 0 28px;justify-content:center}
.hero-shell{min-height:0;align-items:center;gap:6vw}
.hero-copy{padding-top:0}
.hero h1{margin:22px 0 24px;font-size:clamp(4.5rem,7.7vw,8.1rem);line-height:.79}
.hero-support{font-size:clamp(1rem,1.35vw,1.2rem)}
.hero-actions{margin-top:28px}
.portrait-stage{width:min(100%,470px)}
.portrait-inner{aspect-ratio:.84;max-height:62svh}
.hero-foot{margin-top:24px}

/* Make the intro phrase read as two clear words, not a ligature-like collision. */
.work-intro h2 em{word-spacing:.18em;letter-spacing:-.035em}

/* Research Software / HARP */
.project-harp .harp-demo{grid-column:2;grid-row:1;width:100%;min-width:0;align-self:center;justify-self:stretch}
.project-harp .project-copy{grid-column:3;grid-row:1}
.harp-demo{min-height:500px;overflow:hidden}
.harp-canvas{min-height:445px}
.harp-code{width:55%;right:22px;top:58px}
.harp-graph{width:76%;left:12%;top:80px}
.research-links{margin-top:30px;border-top:1px solid rgba(12,13,15,.18)}
.research-link{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:14px 0;border-bottom:1px solid rgba(12,13,15,.18);align-items:center}
.research-link span{font-weight:600;font-size:.95rem}.research-link small{grid-column:1;color:#70777c;font:500 8px var(--mono);letter-spacing:.06em;text-transform:uppercase}.research-link b{grid-column:2;grid-row:1/3;color:#555;font-weight:400;transition:transform .2s}.research-link:hover b{transform:translate(3px,-3px)}

/* Creative intro: the first viewport is just the thesis + proof numbers. */
.creative-section{padding:0;background:linear-gradient(122deg,#06080a 0%,#15181b 42%,#090b0d 100%)}
.creative-intro{min-height:calc(100svh - var(--header));display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center;padding-top:58px;padding-bottom:58px}
.creative-copy{position:static}
.creative-copy h2{font-size:clamp(3.8rem,5.6vw,6rem);line-height:.94;letter-spacing:-.06em;margin:20px 0 28px;max-width:560px}
.creative-copy h2 em{display:block;font:italic 400 .9em/1.08 var(--serif);color:#c4c9cb;margin-top:.18em;word-spacing:.18em;letter-spacing:-.025em}
.creative-copy>p:last-child{color:#aab0b4;max-width:520px;font-size:1rem}
.creative-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:center}
.stat{border:1px solid rgba(255,255,255,.17);min-height:190px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));position:relative;overflow:hidden}
.stat-primary{grid-column:1/3;min-height:265px}
.stat strong{font-size:clamp(4.3rem,7.5vw,7.7rem);letter-spacing:-.075em;line-height:.82;color:#f7f8f6}
.stat-primary strong{font-size:clamp(6.4rem,11vw,10.2rem);color:var(--signal)}
.stat>span:not(.stat-prefix){font:500 8px/1.35 var(--mono);letter-spacing:.1em;color:#aeb4b8;margin-top:16px;max-width:210px}
.stat-prefix{position:absolute;top:20px;left:22px;color:var(--signal);font:500 8px var(--mono);letter-spacing:.12em}

/* Scroll-through creative archive: restrained case-file interaction, integrated into our own visual system. */
.creative-archive{height:300svh;position:relative;border-top:1px solid rgba(255,255,255,.12)}
.archive-sticky{position:sticky;top:var(--header);height:calc(100svh - var(--header));overflow:hidden;background:linear-gradient(120deg,#07090b 0%,#11151a 52%,#080a0c 100%);display:grid;grid-template-rows:auto 1fr auto;padding:22px 0 18px}
.archive-top,.archive-progress{display:flex;align-items:center;justify-content:space-between;font:500 8px var(--mono);letter-spacing:.12em;color:#7f888e}
.archive-window{overflow:hidden;min-height:0;display:flex;align-items:center}
.archive-track{display:flex;gap:5vw;padding-left:10vw;padding-right:10vw;will-change:transform;transform:translate3d(0,0,0)}
.archive-card{width:min(810px,76vw);height:min(560px,63svh);flex:0 0 auto;border:1px solid rgba(255,255,255,.28);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));display:grid;grid-template-columns:.46fr 1fr;grid-template-rows:42px 1fr;box-shadow:0 35px 80px rgba(0,0,0,.2);position:relative}
.archive-card-head{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.23);font:500 7px var(--mono);letter-spacing:.12em;color:#aab0b4}
.archive-visual{border-right:1px solid rgba(255,255,255,.22);position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 13px)}
.archive-card-copy{padding:clamp(28px,4vw,58px);display:flex;flex-direction:column;justify-content:center}
.archive-card-copy small{font:500 8px var(--mono);letter-spacing:.1em;color:var(--signal);text-transform:uppercase}
.archive-card-copy h3{font:400 clamp(2.8rem,5.1vw,5.2rem)/.9 var(--serif);letter-spacing:-.035em;margin:18px 0 24px}
.archive-card-copy p{max-width:520px;color:#aeb5b9;font-size:.96rem;line-height:1.65}
.archive-links{display:flex;gap:22px;margin-top:22px}.archive-links a{border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:5px;font-size:.82rem;font-weight:600}.archive-links a:hover{color:var(--signal)}
.film-edit:before{content:"";position:absolute;left:14%;right:14%;top:20%;height:48%;border:1px solid rgba(255,255,255,.22);background:linear-gradient(145deg,#20252a,#111418)}
.film-edit i{position:absolute;bottom:20%;width:17%;height:9%;background:#596168}.film-edit i:nth-child(1){left:14%}.film-edit i:nth-child(2){left:34%}.film-edit i:nth-child(3){left:54%;background:var(--signal)}.film-edit b{position:absolute;left:14%;right:14%;bottom:15%;height:1px;background:rgba(255,255,255,.35)}
.freelance-collage i{position:absolute;border:1px solid rgba(255,255,255,.24);background:#1a1e22}.freelance-collage i:nth-child(1){width:44%;height:34%;left:15%;top:18%;transform:rotate(-5deg)}.freelance-collage i:nth-child(2){width:42%;height:32%;right:14%;top:38%;transform:rotate(5deg)}.freelance-collage i:nth-child(3){width:36%;height:28%;left:22%;bottom:10%;transform:rotate(2deg)}.freelance-collage b{position:absolute;width:42%;height:1px;background:var(--signal);left:28%;top:52%;transform:rotate(-18deg)}
.social-grid div{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:clamp(4rem,7vw,7rem);letter-spacing:-.07em;color:var(--signal);font-weight:600}.social-grid i{position:absolute;width:18%;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.22);background:#1a1e22}.social-grid i:nth-of-type(1){left:12%;top:14%}.social-grid i:nth-of-type(2){right:12%;top:18%}.social-grid i:nth-of-type(3){right:16%;bottom:12%}
.archive-progress{gap:22px}.archive-progress i{display:block;height:1px;flex:1;background:linear-gradient(90deg,var(--signal) 0 var(--archive-progress,0%),rgba(255,255,255,.15) var(--archive-progress,0%) 100%)}

/* Capability menu opens on hover/focus; it is no longer a click-driven accordion. */
.capability-intro h2{font-size:clamp(3.8rem,5.5vw,6rem)}
.capability-list summary{cursor:default}
.capability-list details>p{max-height:0;opacity:0;overflow:hidden;margin-top:0;margin-bottom:0;padding-top:0;transition:max-height .28s ease,opacity .2s ease,margin .28s ease}
.capability-list details[open]>p{max-height:130px;opacity:1;margin:-12px 50px 38px 72px}
.capability-list details[open] summary strong{color:#000}.capability-list details[open] summary i{transform:rotate(45deg)}

/* About / résumé: one complete, paper-like record that fits comfortably in a desktop viewport. */
.about-section{min-height:calc(100svh - var(--header));padding:58px 0;display:flex;align-items:center}
.about-shell.about-compact{grid-template-columns:.58fr 1.42fr;gap:58px;align-items:center}
.about-intro{position:static}
.about-intro h2{font-size:clamp(4rem,5.8vw,6.4rem);margin:14px 0 22px}
.about-lede{font-size:1.22rem;line-height:1.42}
.about-intro>p:not(.kicker,.about-lede){font-size:.92rem;line-height:1.62}
.about-actions{margin-top:24px}
.resume-sheet{background:#f3f1ea;color:#101214;border:1px solid #777d80;padding:28px 30px 24px;box-shadow:0 28px 70px rgba(0,0,0,.22);max-height:calc(100svh - var(--header) - 96px);overflow:hidden;position:relative}
.resume-sheet:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.35),transparent 25%,transparent 75%,rgba(0,0,0,.025))}
.resume-education{display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:center;padding-bottom:22px;border-bottom:1px solid #9b9d9b;position:relative;z-index:1}
.resume-education img{width:72px;height:72px;object-fit:contain;filter:saturate(.92)}
.resume-education span,.resume-label{font:500 7px var(--mono);letter-spacing:.12em;color:#6a7074}
.resume-education h3{font:400 clamp(1.85rem,2.8vw,3rem)/.95 var(--serif);margin:5px 0 3px;letter-spacing:-.025em}.resume-education p{margin:0;font-size:.9rem;font-weight:600}.resume-education small{color:#73797d;font-size:.72rem}
.resume-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;padding-top:22px;position:relative;z-index:1}.resume-label{margin:0 0 10px}
.resume-experience article{display:grid;grid-template-columns:27px 1fr;gap:10px;padding:10px 0;border-top:1px solid #c1c2bd}.resume-experience article:last-child{border-bottom:1px solid #c1c2bd}.resume-experience article>span{font:500 7px var(--mono);color:#80868a}.resume-experience h4{font-size:.84rem;margin:0;line-height:1.25}.resume-experience p{margin:1px 0;color:#555c60;font-size:.72rem}.resume-experience small{display:block;font:500 6px var(--mono);letter-spacing:.07em;color:#7c8286}
.resume-knowledge ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}.resume-knowledge li{font-size:.7rem;line-height:1.35;color:#4d5458;padding-left:12px;position:relative}.resume-knowledge li:before{content:"•";position:absolute;left:0;color:#667078}
.resume-projects{border-top:1px solid #9b9d9b;margin-top:19px;padding-top:12px;display:flex;align-items:center;gap:18px;position:relative;z-index:1}.resume-projects>span{font:500 7px var(--mono);letter-spacing:.12em;color:#6a7074;margin-right:auto}.resume-projects a{font-size:.72rem;font-weight:600;border-bottom:1px solid #555;padding-bottom:2px}

/* Contact: simple, direct form integrated into the existing visual language. */
.contact-section{padding:92px 0 76px}
.contact-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:end}
.contact-heading h2{font-size:clamp(4.6rem,7.5vw,8.5rem);margin:22px 0 28px}.contact-heading h2 span{display:block;font:italic 400 .38em/1.1 var(--serif);letter-spacing:-.02em;color:#9ca3a7;margin-bottom:.2em}
.contact-heading>p:not(.kicker){color:#9ba2a6;max-width:430px}.contact-links.compact{margin-top:46px;grid-template-columns:1fr;gap:16px;max-width:370px}
.contact-form{display:grid;gap:0}.contact-form label{display:block;border-bottom:1px solid rgba(255,255,255,.45);padding:15px 0 10px}.contact-form label span{display:block;color:#9da4a8;font-size:.82rem;margin-bottom:5px}.contact-form input,.contact-form textarea{width:100%;border:0;outline:0;background:transparent;color:#fff;font:400 1rem var(--display);padding:4px 0;resize:vertical}.contact-form textarea{min-height:92px}.contact-form label:focus-within{border-color:var(--signal)}.form-bottom{display:flex;align-items:center;gap:20px;margin-top:18px}.contact-form button{border:1px solid rgba(255,255,255,.38);background:transparent;color:#fff;padding:12px 16px;font:500 8px var(--mono);letter-spacing:.12em;cursor:pointer;transition:.2s}.contact-form button span{color:var(--signal);margin-left:12px}.contact-form button:hover{border-color:var(--signal)}.contact-form button:disabled{opacity:.55;cursor:wait}.form-bottom p{margin:0;color:#9da4a8;font-size:.78rem}.form-bottom p.is-success{color:var(--signal)}.form-bottom p.is-error{color:#ff8e8e}

@media(max-width:1100px){
  .creative-intro{grid-template-columns:.78fr 1.22fr;gap:45px}
  .archive-card{width:min(760px,80vw)}
  .about-shell.about-compact{grid-template-columns:.62fr 1.38fr;gap:38px}
  .resume-sheet{padding:24px}.resume-grid{gap:20px}
  .contact-shell{gap:45px}
}
@media(max-width:820px){
  .hero{min-height:auto;padding-top:100px;padding-bottom:55px}.portrait-inner{max-height:none}.hero-foot{display:none}
  .project-harp .project-copy,.project-harp .harp-demo{grid-column:2;grid-row:auto}.project-harp .harp-demo{margin-top:20px}
  .creative-intro{min-height:auto;grid-template-columns:1fr;padding-top:110px;padding-bottom:90px}.creative-stats{margin-top:12px}.creative-copy h2{max-width:680px}
  .creative-archive{height:auto}.archive-sticky{position:relative;top:auto;height:auto;min-height:0;padding:42px 0}.archive-window{overflow:visible}.archive-track{transform:none!important;display:grid;padding:35px var(--mobile-wrap,17px);gap:24px}.archive-card{width:100%;height:auto;min-height:500px}.archive-progress{display:none}
  .capability-list details[open]>p{margin:-5px 30px 30px 56px}
  .about-section{min-height:auto;padding:100px 0}.about-shell.about-compact{grid-template-columns:1fr;gap:55px}.resume-sheet{max-height:none;overflow:visible}.resume-grid{grid-template-columns:1fr 1fr}
  .contact-shell{grid-template-columns:1fr;gap:55px}.contact-heading h2{font-size:clamp(4.6rem,13vw,7rem)}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(4rem,18vw,6rem)}
  .work-intro h2{font-size:3.45rem}
  .harp-demo{min-height:390px}.harp-canvas{min-height:335px}.harp-code{top:72px}.harp-graph{top:88px}
  .creative-intro{padding-top:88px;padding-bottom:70px}.creative-copy h2{font-size:3.55rem}.creative-stats{grid-template-columns:1fr}.stat-primary{grid-column:1}.stat,.stat-primary{min-height:180px}.stat-primary strong{font-size:7rem}
  .archive-top{padding-inline:4px}.archive-top span:last-child{display:none}.archive-track{padding-left:13px;padding-right:13px}.archive-card{grid-template-columns:1fr;grid-template-rows:40px 210px auto}.archive-card-head{grid-column:1}.archive-visual{border-right:0;border-bottom:1px solid rgba(255,255,255,.22)}.archive-card-copy{padding:28px}.archive-card-copy h3{font-size:3rem}
  .capability-list details[open]>p{margin:-4px 18px 26px 56px}
  .resume-sheet{padding:20px}.resume-education{grid-template-columns:58px 1fr}.resume-education img{width:54px;height:54px}.resume-grid{grid-template-columns:1fr}.resume-projects{align-items:flex-start;flex-wrap:wrap}.resume-projects>span{width:100%;margin-right:0}.resume-knowledge li{font-size:.73rem}
  .contact-section{padding:85px 0 65px}.contact-heading h2{font-size:4.7rem}.contact-form label{padding-top:13px}
}
@media(prefers-reduced-motion:reduce){.archive-track{transform:none!important}}

/* Final interaction/layout corrections */
@media (min-width:821px){
  .creative-archive{height:calc(100svh - var(--header));min-height:620px;position:relative}
  .archive-sticky{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:620px}
  .archive-window{width:100%}
  .archive-track{transition:transform .08s linear}
}

.capability-list summary{cursor:pointer}
.capability-list summary:hover strong,.capability-list summary:focus-visible strong{color:var(--signal)}

/* Hero portrait: contained editorial frame, no accidental crop/overflow. */
.hero-shell{grid-template-columns:minmax(0,1fr) minmax(360px,.76fr);gap:clamp(48px,7vw,110px)}
.portrait-stage{width:min(100%,500px);align-self:center}
.portrait-metal{padding:14px;background:linear-gradient(145deg,#34383c 0%,#141619 34%,#4a4f54 72%,#0e1012 100%);border:1px solid rgba(255,255,255,.32);box-shadow:0 34px 90px rgba(0,0,0,.38)}
.portrait-inner{aspect-ratio:1 / 1.05;max-height:none;background:linear-gradient(135deg,#cfd2d4 0%,#8b9196 48%,#33383d 100%);border:1px solid rgba(255,255,255,.22)}
.portrait-inner img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.portrait-inner:after{height:18%;background:linear-gradient(transparent,rgba(10,11,12,.56))}
.portrait-stage figcaption{padding:0 2px}

/* About / resume card: square, dark-on-dark by default, paper inversion on hover. */
.about-shell.about-compact{align-items:center}
.resume-sheet{aspect-ratio:1 / 1;width:min(100%,620px);max-height:none;overflow:hidden;background:#171a1d;color:#f6f5f0;border:1px solid rgba(255,255,255,.78);padding:clamp(24px,2.4vw,34px);box-shadow:0 28px 80px rgba(0,0,0,.26);transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease}
.resume-sheet:after{opacity:.16}
.resume-sheet:hover{background:#f5f3ed;color:#101214;border-color:#fff;transform:translateY(-3px)}
.resume-education{display:block;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.28)}
.resume-education span,.resume-label{color:#aeb5b9;transition:color .28s ease}
.resume-education h3{font-size:clamp(1.75rem,2.45vw,2.65rem)}
.resume-education p{color:inherit}.resume-education small{color:#a9b0b4;transition:color .28s ease}
.resume-grid{gap:24px;padding-top:18px}.resume-experience article{border-top-color:rgba(255,255,255,.18);padding:8px 0}.resume-experience article:last-child{border-bottom-color:rgba(255,255,255,.18)}
.resume-experience article>span,.resume-experience small,.resume-experience p,.resume-knowledge li,.resume-projects>span{color:#aeb5b9;transition:color .28s ease}
.resume-projects{border-top-color:rgba(255,255,255,.28);margin-top:14px;padding-top:10px}.resume-projects a{border-bottom-color:rgba(255,255,255,.6)}
.resume-sheet:hover .resume-education{border-bottom-color:#9b9d9b}.resume-sheet:hover .resume-education span,.resume-sheet:hover .resume-label,.resume-sheet:hover .resume-education small,.resume-sheet:hover .resume-experience article>span,.resume-sheet:hover .resume-experience small,.resume-sheet:hover .resume-experience p,.resume-sheet:hover .resume-knowledge li,.resume-sheet:hover .resume-projects>span{color:#5d6468}
.resume-sheet:hover .resume-experience article{border-top-color:#c1c2bd}.resume-sheet:hover .resume-experience article:last-child{border-bottom-color:#c1c2bd}.resume-sheet:hover .resume-projects{border-top-color:#9b9d9b}.resume-sheet:hover .resume-projects a{border-bottom-color:#555}

@media(max-width:1100px) and (min-width:821px){
  .hero-shell{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:44px}
  .portrait-stage{width:min(100%,430px)}
  .resume-sheet{width:min(100%,560px)}
}
@media(max-width:820px){
  .portrait-stage{width:min(92vw,480px);justify-self:center;margin-top:18px}
  .portrait-inner{aspect-ratio:1 / 1.05}
  .resume-sheet{aspect-ratio:auto;width:100%;min-height:0}
}


/* v4 — true archive scroll lock. On desktop the archive itself is exactly one
   viewport tall; JS owns wheel/trackpad input while this viewport is aligned
   beneath the header, so the page cannot advance vertically until the final
   case has been reached. */
@media (min-width:821px){
  .creative-archive{
    height:calc(100svh - var(--header))!important;
    min-height:620px;
    position:relative!important;
    overflow:hidden!important;
  }
  .creative-archive .archive-sticky{
    position:relative!important;
    top:auto!important;
    height:100%!important;
    min-height:620px;
    overflow:hidden!important;
  }
  .creative-archive .archive-window{
    width:100%;
    overflow:hidden!important;
    min-height:0;
  }
  .creative-archive .archive-track{
    transform:translate3d(0,0,0);
    transition:none!important;
    will-change:transform;
    padding-left:10vw;
    padding-right:10vw;
  }
}


/* v5 — Research Software showcase: HarpGraph2 / Hurwitz / Quantum Wordle */
.research-demo{min-height:540px;background:#555b5e;border:1px solid rgba(10,12,13,.28);box-shadow:0 30px 65px rgba(10,12,13,.17);overflow:hidden;position:relative}
.research-demo .harp-tabs{height:48px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.24);background:#575d60}
.research-demo .harp-tabs button{border:0;border-right:1px solid rgba(255,255,255,.18);background:transparent;color:#c8cdcf;font:500 8px/1 var(--mono);letter-spacing:.08em;cursor:pointer;position:relative;transition:background .22s ease,color .22s ease}
.research-demo .harp-tabs button:last-child{border-right:0}.research-demo .harp-tabs button:hover,.research-demo .harp-tabs button:focus-visible{color:#fff;outline:0;background:rgba(255,255,255,.055)}
.research-demo .harp-tabs button.is-active{background:var(--signal);color:#111315}.research-demo .harp-tabs button.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#111315}
.research-canvas{position:relative;min-height:492px;background:linear-gradient(145deg,#5d6366 0%,#555b5e 48%,#494f52 100%);overflow:hidden}
.research-panel{position:absolute;inset:0;padding:22px 24px 20px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .36s ease,transform .36s ease}
.research-panel.is-active{opacity:1;transform:none;pointer-events:auto}.research-panel[hidden]{display:block}
.research-panel-head,.research-panel-foot{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:3;color:rgba(255,255,255,.68);font:500 7px/1 var(--mono);letter-spacing:.11em}.research-panel-head{top:18px}.research-panel-head b,.research-panel-foot b{color:var(--signal);font-weight:500}.research-panel-foot{bottom:14px}
.harpgraph-live{position:absolute;inset:42px 18px 32px;width:calc(100% - 36px);height:calc(100% - 74px);overflow:visible}.harpgraph-live line{stroke:#edf0ee;stroke-width:1.7;opacity:.87}.harpgraph-live line.edge-blue{stroke:#91aee8;stroke-width:2.5}.harpgraph-live line.edge-magenta{stroke:#ca83c9;stroke-width:2.5}.harpgraph-live line.edge-cyan{stroke:#6ad7d7;stroke-width:2.5}.graph-node circle{fill:#3e4346;stroke:#f5f6f3;stroke-width:2.4}.graph-node text{fill:#fff;text-anchor:middle;font:600 17px var(--display)}.layer-node circle{stroke:rgba(255,255,255,.45);stroke-width:1.4}.layer-node text{font-size:15px}.layer-green circle{fill:#84c88c}.layer-blue circle{fill:#8ca4d6}.layer-cyan circle{fill:#65c1c4}.layer-magenta circle{fill:#ad70aa}.graph-note{fill:#e6e9e7;font:500 7px var(--mono);letter-spacing:.11em}

.hurwitz-panel{padding:20px}.ide-window{height:100%;border:1px solid rgba(255,255,255,.22);background:#15191d;box-shadow:0 22px 55px rgba(0,0,0,.18);overflow:hidden}.ide-top{height:40px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid #343b41;background:#1f252a;color:#aeb7bd;font:400 8px var(--mono)}.ide-top>span{width:7px;height:7px;border-radius:50%;background:#697178}.ide-top b{font-weight:400;margin-left:7px}.ide-top em{margin-left:auto;color:var(--signal);font-style:normal;letter-spacing:.08em}.ide-body{height:calc(100% - 40px);display:grid;grid-template-columns:135px 1fr}.ide-sidebar{padding:18px 12px;border-right:1px solid #30373c;background:#1b2025;color:#747f86;font:500 7px/1.8 var(--mono);letter-spacing:.08em}.ide-sidebar span{display:block;color:#aeb7bd;margin-bottom:14px}.ide-sidebar b,.ide-sidebar small{display:block;font-weight:400;color:#d8dcde}.ide-sidebar small{color:#778087;margin-top:8px}.ide-editor{display:grid;grid-template-rows:auto 1fr 115px;min-width:0}.install-line{padding:13px 18px;border-bottom:1px solid #30373c;background:#171c20;font:400 10px var(--mono);color:#dfe3e5}.install-line span{color:var(--signal);margin-right:9px}.install-line code{color:#f1f4f4}.code-area{position:relative;display:grid;grid-template-columns:34px 1fr;padding:17px 16px 12px 0;overflow:hidden;background:linear-gradient(90deg,#171c20,#15191d)}.line-numbers{color:#586168;text-align:right;padding-right:10px;font:400 10px/1.85 var(--mono);user-select:none}.code-area pre{margin:0;position:relative;white-space:pre-wrap;overflow:hidden;color:#e9edef;font:400 10px/1.85 var(--mono)}.code-area code .kw{color:#d77ad7}.code-area code .fn{color:#8ecbf3}.code-area code .num{color:#d9bc78}.code-area code .comment{color:#6d7a82}.type-caret{display:inline-block;width:1px;height:13px;background:var(--signal);vertical-align:-2px;animation:caretBlink .72s steps(1) infinite}@keyframes caretBlink{50%{opacity:0}}.ide-terminal{border-top:1px solid #30373c;background:#101419;min-height:0}.ide-terminal>div{height:30px;padding:0 14px;display:flex;align-items:center;gap:18px;border-bottom:1px solid #242b30;font:500 7px var(--mono);letter-spacing:.08em;color:#9ba5aa}.ide-terminal>div span{color:var(--signal)}.ide-terminal pre{margin:0;padding:14px 16px;color:#f7f7f3;font:500 12px var(--mono);white-space:pre-wrap}.ide-terminal pre:empty:before{content:"waiting for output…";color:#596269;font-weight:400}

.wordle-panel{padding:0}.quantum-stage{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 55% 48%,rgba(185,255,57,.06),transparent 34%),linear-gradient(145deg,#20272b,#11171b 66%,#0c1114)}.quantum-meta{position:absolute;left:22px;right:22px;top:18px;display:flex;justify-content:space-between;z-index:5;color:#aab4ba;font:500 7px var(--mono);letter-spacing:.1em}.quantum-meta b{color:var(--signal);font-weight:500}.quantum-circuit{position:absolute;inset:44px 16px 52px;width:calc(100% - 32px);height:calc(100% - 96px);opacity:.72}.circuit-lines path{stroke:#58656d;stroke-width:1.3;fill:none}.circuit-gates rect,.circuit-gates circle{fill:#182126;stroke:#a9b4ba;stroke-width:1.4}.circuit-gates line{stroke:#9aa6ad;stroke-width:1.2}.circuit-gates text{fill:#dce2e4;text-anchor:middle;font:500 10px var(--mono)}.circuit-pulse{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:14 690;opacity:0;filter:drop-shadow(0 0 5px rgba(185,255,57,.65))}.quantum-stage.is-measuring .circuit-pulse{opacity:1;animation:circuitPulse 1.45s ease-out forwards}@keyframes circuitPulse{from{stroke-dashoffset:0}to{stroke-dashoffset:-690}}
.wordle-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(5,76px);gap:10px;z-index:6}.quantum-tile{width:76px;height:76px;border:1px solid rgba(255,255,255,.44);background:rgba(15,20,24,.74);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,.18);transition:background .3s ease,border-color .3s ease,transform .3s ease}.quantum-tile strong,.quantum-tile .ghost-letter{position:absolute;font:600 36px/1 var(--display);color:#f4f6f5;transition:.3s ease}.quantum-tile strong{opacity:.08;filter:blur(4px);transform:scale(1.08)}.ghost-letter{opacity:.32;filter:blur(2.8px);transform:translate(-7px,-2px)}.ghost-letter.b{transform:translate(8px,4px);opacity:.22}.quantum-stage.is-measuring .quantum-tile{border-color:rgba(185,255,57,.78);background:rgba(185,255,57,.08)}.quantum-stage.is-measuring .quantum-tile strong{opacity:1;filter:none;transform:none;color:var(--signal)}.quantum-stage.is-measuring .ghost-letter{opacity:0;filter:blur(8px);transform:scale(.82)}.measurement-copy{position:absolute;left:22px;right:22px;bottom:17px;display:flex;justify-content:space-between;align-items:center;z-index:6;font:500 7px var(--mono);letter-spacing:.09em;color:#7f8a90}.measurement-copy span{color:var(--signal)}.measurement-copy b{font-weight:400;color:#aab4ba}

@media(max-width:1100px) and (min-width:821px){.research-demo{min-height:500px}.research-canvas{min-height:452px}.wordle-grid{grid-template-columns:repeat(5,62px)}.quantum-tile{width:62px;height:62px}.quantum-tile strong,.quantum-tile .ghost-letter{font-size:31px}.ide-body{grid-template-columns:108px 1fr}.ide-sidebar{font-size:6px}}
@media(max-width:820px){.project-harp .project-copy,.project-harp .harp-demo{grid-column:2;grid-row:auto}.research-demo{min-height:510px;margin-top:26px}.research-canvas{min-height:462px}.research-demo .harp-tabs button{font-size:6px}.harpgraph-live{inset:48px 5px 34px;width:calc(100% - 10px);height:calc(100% - 82px)}.ide-body{grid-template-columns:1fr}.ide-sidebar{display:none}.ide-editor{grid-template-rows:auto 1fr 112px}.wordle-grid{grid-template-columns:repeat(5,minmax(44px,62px));gap:6px}.quantum-tile{width:auto;height:auto;aspect-ratio:1}.quantum-tile strong,.quantum-tile .ghost-letter{font-size:clamp(25px,7vw,34px)}}
@media(max-width:560px){.research-demo{min-height:450px}.research-canvas{min-height:402px}.research-panel{padding:14px}.research-panel-head,.research-panel-foot{left:14px;right:14px}.harpgraph-live{inset:42px 0 30px;width:100%;height:calc(100% - 72px)}.graph-note{display:none}.ide-window{height:100%}.install-line{font-size:8px}.code-area pre,.line-numbers{font-size:7.5px}.ide-terminal pre{font-size:10px}.wordle-grid{width:calc(100% - 28px);grid-template-columns:repeat(5,1fr)}.measurement-copy b{display:none}.quantum-meta b{display:none}}
@media(prefers-reduced-motion:reduce){.type-caret{animation:none}.quantum-stage.is-measuring .circuit-pulse{animation:none}.research-panel{transition:none}}

/* subtle quantum superposition motion; stops on measurement */
.quantum-stage:not(.is-measuring) .ghost-letter{animation:quantumGhostA 1.25s ease-in-out infinite alternate}
.quantum-stage:not(.is-measuring) .ghost-letter.b{animation:quantumGhostB 1.05s ease-in-out infinite alternate-reverse}
@keyframes quantumGhostA{from{opacity:.16;transform:translate(-8px,-3px) scale(.96)}to{opacity:.4;transform:translate(-4px,1px) scale(1.04)}}
@keyframes quantumGhostB{from{opacity:.12;transform:translate(9px,5px) scale(1.04)}to{opacity:.33;transform:translate(5px,1px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.quantum-stage:not(.is-measuring) .ghost-letter,.quantum-stage:not(.is-measuring) .ghost-letter.b{animation:none}}

/* v7 — final spacing and interaction polish */
@media (min-width:821px){
  /* Pull the first selected build closer to the section heading. */
  .work-intro h2{margin-bottom:42px}
  .work-sequence .project:first-of-type{padding-top:34px}

  /* Keep the About copy on the left and anchor the résumé card to the right edge. */
  .about-shell.about-compact{gap:72px}
  .resume-sheet{justify-self:end}
}

/* Capability labels stay neutral on pointer hover. */
.capability-list summary:hover strong{color:inherit}
.capability-list summary:focus-visible strong{color:var(--signal)}

/* The generic reveal transition previously made the résumé color inversion instant.
   Preserve the reveal motion while also easing the card and its internal tones. */
.js .resume-sheet.reveal,
.js .resume-sheet.reveal.is-visible{
  transition:opacity .65s ease,
             transform .52s cubic-bezier(.22,.61,.36,1),
             background-color .52s cubic-bezier(.22,.61,.36,1),
             color .52s cubic-bezier(.22,.61,.36,1),
             border-color .52s ease,
             box-shadow .52s ease;
}
.resume-sheet:hover{box-shadow:0 36px 92px rgba(0,0,0,.32)}
.resume-education,
.resume-experience article,
.resume-projects,
.resume-projects a{transition:border-color .48s ease}
.resume-education span,.resume-label,.resume-education small,
.resume-experience article>span,.resume-experience small,.resume-experience p,
.resume-knowledge li,.resume-projects>span{transition:color .48s ease}

/* v8 — final readability/layout refinements */
.stat>span:not(.stat-prefix){
  font-size:10px;
  line-height:1.55;
  letter-spacing:.11em;
  max-width:280px;
  position:relative;
  z-index:1;
}
.stat-primary{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(120px,16vw,200px);
  grid-template-rows:auto auto;
  align-items:end;
  align-content:end;
  column-gap:28px;
  padding-right:30px;
}
.stat-primary strong{grid-column:1;grid-row:1}
.stat-primary>span{grid-column:1;grid-row:2;margin-top:14px;max-width:300px}
.stat-youtube-logo{
  grid-column:2;
  grid-row:1 / span 2;
  justify-self:end;
  align-self:center;
  width:clamp(120px,15vw,190px);
  aspect-ratio:1 / 1;
  object-fit:contain;
  opacity:.95;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

@media (min-width:821px){
  .about-shell.about-compact{
    grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr);
    gap:clamp(28px,3vw,42px);
    align-items:center;
  }
  .about-intro{max-width:510px}
  .resume-sheet{
    justify-self:end;
    width:min(100%,760px);
    aspect-ratio:1.18 / 1;
    padding:clamp(24px,2.1vw,34px) clamp(28px,2.45vw,38px);
  }
  .resume-grid{grid-template-columns:1.05fr .95fr;gap:28px}
}

@media (max-width:1100px) and (min-width:821px){
  .resume-sheet{width:min(100%,690px);aspect-ratio:1.12 / 1}
}

@media (max-width:820px){
  .stat>span:not(.stat-prefix){font-size:9px;max-width:none}
  .stat-primary{grid-template-columns:minmax(0,1fr) 120px;column-gap:20px}
  .stat-youtube-logo{width:110px}
}

@media (max-width:560px){
  .stat-primary{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:8px;padding-right:22px}
  .stat-primary strong{grid-column:1;grid-row:1}
  .stat-primary>span{grid-column:1;grid-row:2;margin-top:10px}
  .stat-youtube-logo{grid-column:1;grid-row:3;justify-self:end;width:84px}
}

/* v9 — final density/layout pass */

/* Creative stats: four evenly sized tiles in a balanced 2x2 rectangle. */
.creative-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.creative-stats .stat,
.creative-stats .stat-primary{
  grid-column:auto;
  min-height:220px;
  display:flex;
  padding:24px;
}
.creative-stats .stat strong,
.creative-stats .stat-primary strong{
  font-size:clamp(4.6rem,7vw,7rem);
  color:#f7f8f6;
}
.creative-stats .stat>span,
.creative-stats .stat-primary>span{
  font-size:10px;
  line-height:1.6;
  letter-spacing:.11em;
  max-width:260px;
}
.stat-youtube-logo{display:none !important}

/* Featured work: tighten the vertical handoff from hero into section. */
.selected-work{
  padding-top:52px;
}
.work-intro{
  padding-top:0;
}
.work-intro h2{
  margin-top:12px;
  margin-bottom:28px;
}
.work-sequence .project:first-of-type{
  padding-top:0;
}
@media (min-width:821px){
  .hero-foot{
    margin-top:26px;
  }
}

/* About / resume: reduce the central gap and remove wasted internal space.
   Make the resume wider, content-driven in height, and typographically larger. */
@media (min-width:821px){
  .about-shell.about-compact{
    grid-template-columns:minmax(300px,.74fr) minmax(0,1.26fr);
    gap:26px;
    align-items:start;
  }
  .about-intro{
    max-width:500px;
    padding-top:10px;
  }
  .resume-sheet{
    width:min(100%,860px);
    aspect-ratio:auto;
    min-height:0;
    padding:32px 34px 28px;
  }
  .resume-grid{
    grid-template-columns:1.05fr .95fr;
    gap:30px;
    padding-top:24px;
  }
}

.resume-education{
  padding-bottom:24px;
}
.resume-education h3{
  font-size:clamp(2.2rem,3vw,3.45rem);
  line-height:.96;
  margin:8px 0 6px;
}
.resume-education p{
  font-size:1.05rem;
  font-weight:600;
}
.resume-education small{
  font-size:.88rem;
}
.resume-label{
  font-size:11px;
  margin-bottom:14px;
}
.resume-experience article{
  grid-template-columns:34px 1fr;
  gap:12px;
  padding:12px 0;
}
.resume-experience article>span{
  font-size:8px;
}
.resume-experience h4{
  font-size:1.18rem;
  line-height:1.2;
}
.resume-experience p{
  font-size:.98rem;
  margin:4px 0;
}
.resume-experience small{
  font-size:7px;
  letter-spacing:.08em;
}
.resume-knowledge ul{
  gap:10px;
  margin-top:6px;
}
.resume-knowledge li{
  font-size:.98rem;
  line-height:1.45;
  padding-left:14px;
}
.resume-projects{
  margin-top:18px;
  padding-top:14px;
  display:grid;
  grid-template-columns:minmax(150px,.9fr) 1fr 1fr;
  gap:18px;
  align-items:start;
}
.resume-projects > span{
  width:auto;
  margin-right:0;
  font-size:11px;
  padding-top:4px;
}
.resume-projects a{
  font-size:1rem;
  padding-bottom:4px;
  justify-self:start;
}

@media (max-width:820px){
  .creative-stats{grid-template-columns:1fr 1fr}
  .selected-work{padding-top:44px}
  .work-intro h2{margin-bottom:24px}
  .resume-projects{grid-template-columns:1fr 1fr;gap:14px}
  .resume-projects > span{grid-column:1 / -1}
}
@media (max-width:560px){
  .creative-stats{grid-template-columns:1fr}
  .creative-stats .stat,
  .creative-stats .stat-primary{min-height:180px}
  .resume-education h3{font-size:2rem}
  .resume-experience h4{font-size:1rem}
  .resume-experience p,
  .resume-knowledge li,
  .resume-projects a{font-size:.88rem}
}

/* v10 — anchor alignment + final featured-work spacing */
#work,
#creative,
#about,
#contact{
  scroll-margin-top:calc(var(--header) + 18px);
}

/* A touch more separation between the featured-work headline and first project. */
.work-intro h2{
  margin-bottom:38px;
}

@media (max-width:820px){
  #work,
  #creative,
  #about,
  #contact{
    scroll-margin-top:calc(var(--header) + 12px);
  }
  .work-intro h2{margin-bottom:32px}
}

/* v11 — exact section landing, full first viewport, larger header type */

/* Anchor targets should begin directly under the fixed header with no strip
   of the preceding section left visible. */
#work,
#creative,
#about,
#contact{
  scroll-margin-top:var(--header);
}

/* Keep the landing hero filling the entire initial viewport so the light
   Featured Work section only appears after the user starts scrolling. */
.hero{
  min-height:100svh;
}

/* Slightly increase header/navigation type without changing its structure. */
.wordmark{font-size:17px}
.nav-main a{font-size:14px}
.nav-social a{font-size:11px}
.nav-cta{font-size:14px}

@media (max-width:820px){
  #work,
  #creative,
  #about,
  #contact{
    scroll-margin-top:var(--header);
  }
  .wordmark{font-size:16px}
  .nav-main a{font-size:1.3rem}
  .nav-social a{font-size:11px}
  .nav-cta{font-size:14px}
}

/* v13 — mobile-only layout rebuild. Desktop remains unchanged. */
.mobile-viz-toggle{display:none}

@media (max-width:820px){
  html,body{overflow-x:hidden}

  /* Landing: a clean single-column flow with no portrait/text collision. */
  .hero{
    min-height:100svh;
    padding:calc(var(--header) + 38px) 0 62px;
    display:block;
    overflow:hidden;
  }
  .hero-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    min-height:0;
    align-items:start;
  }
  .hero-copy{width:100%;min-width:0;padding:0}
  .hero-copy .kicker{
    font-size:9px;
    line-height:1.35;
    letter-spacing:.12em;
    white-space:nowrap;
  }
  .hero h1{
    width:100%;
    max-width:100%;
    margin:24px 0 24px;
    font-size:clamp(3.1rem,14vw,4.2rem);
    line-height:.86;
    letter-spacing:-.065em;
    overflow:visible;
  }
  .hero h1 span,.hero h1 em,.hero h1 strong{max-width:100%}
  .hero h1 em{
    margin:.15em 0 .12em 8px;
    font-size:.59em;
    line-height:1;
  }
  .hero-support{
    max-width:330px;
    font-size:1.04rem;
    line-height:1.52;
    margin:0;
  }
  .hero-actions{
    width:min(100%,320px);
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:30px;
  }
  .hero-actions .line-link{
    width:100%;
    justify-content:space-between;
    gap:16px;
    font-size:14px;
  }
  .portrait-stage{
    width:min(100%,310px);
    justify-self:center;
    margin:46px auto 0;
  }
  .portrait-metal{padding:9px}
  .portrait-inner{
    width:100%;
    aspect-ratio:1 / 1.06;
    max-height:none;
  }
  .portrait-inner img{
    object-position:50% 18%;
  }
  .portrait-stage figcaption{
    margin-top:10px;
    gap:12px;
    font-size:7px;
    letter-spacing:.09em;
  }

  /* Featured work: keep the index rail, but give the copy usable width. */
  .selected-work{padding:76px 0 50px}
  .work-intro{padding-left:0}
  .work-intro h2{
    font-size:clamp(3rem,13vw,4.2rem);
    line-height:.92;
    margin:14px 0 42px;
  }
  .work-spine{left:24px;top:46px;bottom:64px}
  .project,
  .project:nth-of-type(3){
    grid-template-columns:48px minmax(0,1fr);
    column-gap:14px;
    row-gap:0;
    align-items:start;
    padding:48px 0 72px;
  }
  .project-index,
  .project:nth-of-type(3) .project-index{
    grid-column:1;
    grid-row:auto;
    order:0;
    width:48px;
    height:48px;
    top:calc(var(--header) + 18px);
  }
  .project-index span{font-size:12px}
  .project-copy,
  .project-web .project-copy,
  .project-harp .project-copy,
  .project:nth-of-type(3) .project-copy{
    grid-column:2 !important;
    grid-row:auto !important;
    order:1;
    min-width:0;
    max-width:none;
  }
  .project-meta{font-size:8px;line-height:1.45;letter-spacing:.11em;margin-bottom:12px}
  .project-copy h3{
    font-size:clamp(2.55rem,11vw,3.6rem);
    line-height:.92;
    margin-bottom:18px;
  }
  .project-lede{font-size:1.08rem!important;line-height:1.4!important}
  .project-copy>p:not(.project-meta,.project-lede){font-size:.94rem;line-height:1.6}
  .project-proof{margin:24px 0}
  .project-proof strong{font-size:2.65rem}
  .project-actions{gap:18px;margin-top:24px}
  .project-actions .line-link{font-size:13px;gap:15px}
  .research-links{margin-top:24px}
  .research-link{padding:12px 0}

  /* Mobile visualization dropdown. Visuals do not occupy space until opened. */
  .mobile-viz-toggle{
    grid-column:2;
    grid-row:auto;
    order:2;
    width:min(100%,360px);
    margin:26px 0 0;
    padding:13px 0 11px;
    border:0;
    border-top:1px solid rgba(12,13,15,.45);
    border-bottom:1px solid rgba(12,13,15,.45);
    background:transparent;
    color:#202326;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    font:600 12px/1 var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .mobile-viz-toggle i{
    font:400 18px/1 var(--display);
    font-style:normal;
    transition:transform .22s ease;
  }
  .mobile-viz-toggle[aria-expanded="true"] i{transform:rotate(180deg)}

  .mobile-viz-target{
    grid-column:2 !important;
    grid-row:auto !important;
    order:3;
    width:min(100%,360px) !important;
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
    margin:16px 0 0 !important;
    justify-self:start !important;
    overflow:hidden !important;
  }
  .mobile-viz-target:not(.is-mobile-visible){display:none !important}
  .mobile-viz-target.is-mobile-visible.reveal{opacity:1!important;transform:none!important}

  /* 01 — compact square editor visualization. */
  .editor-demo.mobile-viz-target.is-mobile-visible{
    display:grid !important;
    grid-template-rows:36px minmax(0,1fr) 92px;
  }
  .editor-demo .demo-top{
    height:auto;
    min-height:36px;
    padding:0 10px;
    gap:5px;
    font-size:7px;
  }
  .editor-demo .demo-top>span{width:6px;height:6px}
  .editor-demo .demo-stage{display:block;min-height:0;height:auto}
  .editor-demo .footage{height:100%!important}
  .editor-demo .analysis-panel{display:none!important}
  .editor-demo .timeline{padding:8px 10px}
  .editor-demo .timeline-head,.editor-demo .timeline-foot{font-size:6px}
  .editor-demo .frames{height:34px;margin:7px 0;gap:2px}
  .editor-demo .subject{transform:scale(.82);transform-origin:bottom center}
  .editor-demo .face-box{transform:scale(.82);transform-origin:bottom left}

  /* 02 — compact website square; remove the oversized Mike Walling title/cursor. */
  .web-illustration.mobile-viz-target.is-mobile-visible{
    display:grid !important;
    place-items:stretch;
    min-height:0!important;
  }
  .web-illustration .web-window{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    box-shadow:none;
  }
  .web-illustration .web-shadow-card{display:none!important}
  .web-illustration .web-chrome{height:31px;padding:0 9px}
  .web-illustration .web-chrome b{font-size:6px}
  .web-illustration .web-chrome em{font-size:5px}
  .web-illustration .web-artboard{height:calc(100% - 31px)}
  .web-illustration .web-nav{height:34px;padding:0 12px}
  .web-illustration .web-nav strong{font-size:6px}
  .web-illustration .web-nav span{font-size:4px}
  .web-illustration .web-hero-art{height:62%;padding:12px 16px;grid-template-columns:1.05fr .95fr}
  .web-illustration .web-copy h4,
  .web-illustration .web-cursor{display:none!important}
  .web-illustration .web-copy small{font-size:4px}
  .web-illustration .web-copy p{width:100%;font-size:5.5px;line-height:1.45;margin:8px 0}
  .web-illustration .web-copy i{width:28px;height:8px;margin-right:3px}
  .web-illustration .web-portrait-art{width:88%;height:78%}
  .web-illustration .book-stack b{width:11px;height:26px}
  .web-illustration .book-stack b:nth-child(2){height:30px}
  .web-illustration .book-stack b:nth-child(3){height:23px}
  .web-illustration .web-book-strip{height:27%;gap:7px;padding:7px 13px}
  .web-illustration .web-book-strip div{grid-template-columns:14px 1fr;gap:4px}

  /* 03 — same square footprint for the research visualization and all tabs. */
  .harp-demo.mobile-viz-target.is-mobile-visible{
    display:grid !important;
    grid-template-rows:40px minmax(0,1fr);
  }
  .research-demo .harp-tabs{height:40px;min-height:40px}
  .research-demo .harp-tabs button{font-size:5.5px;letter-spacing:.045em;padding:0 3px}
  .research-canvas,.harp-canvas{min-height:0!important;height:100%!important}
  .research-panel{padding:11px}
  .research-panel-head,.research-panel-foot{left:11px;right:11px;font-size:5.5px}
  .research-panel-head{top:11px}.research-panel-foot{bottom:9px}
  .harpgraph-live{inset:34px 0 24px;width:100%;height:calc(100% - 58px)}
  .graph-note{display:none}
  .hurwitz-panel{padding:8px}
  .ide-top{height:30px;padding:0 8px;font-size:6px}
  .ide-body{height:calc(100% - 30px);grid-template-columns:1fr}
  .ide-sidebar{display:none}
  .ide-editor{grid-template-rows:auto 1fr 60px}
  .install-line{padding:8px 10px;font-size:6.5px}
  .code-area{grid-template-columns:24px 1fr;padding:8px 8px 6px 0}
  .line-numbers,.code-area pre{font-size:6px;line-height:1.55}
  .ide-terminal>div{height:22px;padding:0 8px;font-size:5.5px}
  .ide-terminal pre{padding:7px 9px;font-size:8px}
  .quantum-meta{left:10px;right:10px;top:10px;font-size:5px}
  .quantum-circuit{inset:32px 7px 36px;width:calc(100% - 14px);height:calc(100% - 68px)}
  .wordle-grid{width:calc(100% - 20px);grid-template-columns:repeat(5,1fr);gap:3px}
  .quantum-tile{width:auto;height:auto;aspect-ratio:1}
  .quantum-tile strong,.quantum-tile .ghost-letter{font-size:clamp(16px,5vw,22px)}
  .measurement-copy{left:10px;right:10px;bottom:9px;font-size:5px}
  .measurement-copy b,.quantum-meta b{display:none}
}

@media (max-width:430px){
  .hero-copy .kicker{font-size:8px;letter-spacing:.105em}
  .hero h1{font-size:clamp(3rem,13.6vw,3.65rem)}
  .portrait-stage{width:min(100%,292px)}
}