/* Portfolio design system — progressive enhancement, content stays semantic. */
:root{--surface:#faf9f5;--soft:#eae7df;--radius:20px;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:132px}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body:not(.accessible){--paper:#f3f1eb;--ink:#262722;--muted:#62635b;--orange:#b83b19;--line:#d6d4cb;-webkit-font-smoothing:antialiased}
html[data-theme=dark] body:not(.accessible){--paper:#191b18;--surface:#232620;--soft:#2b2e27;--ink:#eeeee5;--muted:#b9bdb0;--line:#3d4238;--orange:#f6966c}
body:not(.accessible) .wrap{max-width:1500px;padding-inline:6%}
body:not(.accessible)>header{position:sticky;top:14px;z-index:30;max-width:1372px;margin:18px auto 0;width:calc(100% - 64px);height:78px;padding:0 26px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:box-shadow .35s}
body:not(.accessible)>header.is-scrolled{box-shadow:0 8px 35px #0000000a}
body:not(.accessible) .brand{font-size:40px;letter-spacing:-5px}
body:not(.accessible)>header nav{gap:28px;font-size:12px}
body:not(.accessible)>header nav a{position:relative;padding-block:12px}
body:not(.accessible)>header nav a:after{content:"";position:absolute;height:2px;background:var(--orange);bottom:3px;left:0;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
body:not(.accessible)>header nav a:hover:after,body:not(.accessible)>header nav a[aria-current=location]:after{transform:scaleX(1)}
body:not(.accessible) #accessible,body:not(.accessible) #theme-toggle,body:not(.accessible) #motion-toggle{border:1px solid var(--line);font-size:10px;padding:9px 12px;min-height:35px;line-height:1.3;background:transparent;border-radius:30px;white-space:nowrap}
body:not(.accessible) #accessible:hover,body:not(.accessible) #theme-toggle:hover,body:not(.accessible) #motion-toggle:hover{border-color:var(--ink);background:var(--soft)}
body:not(.accessible) .display-controls{gap:7px}
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--orange);width:100%;transform:scaleX(0);transform-origin:left;z-index:100;pointer-events:none}
body:not(.accessible) .hero{padding-top:54px;padding-bottom:0}
body:not(.accessible) .hero>.eyebrow{font-size:10px;letter-spacing:1.8px}
body:not(.accessible) .hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:32px;min-height:575px;align-items:center;padding:40px 0 48px}
body:not(.accessible) .hero h1{font-weight:600;font-size:clamp(58px,6.6vw,100px);line-height:1.035;letter-spacing:-.065em;margin:0 0 30px;white-space:normal}
.hero-line{display:block}.hero-line em{font-style:normal}
body:not(.accessible) .hero .intro{font-size:17px;line-height:1.8;max-width:38ch;margin-bottom:28px}
body:not(.accessible) .button{border-radius:50px;padding:17px 25px;font-size:13px;font-weight:500;gap:28px;transition:background .25s,color .25s,box-shadow .25s;min-height:48px}
body:not(.accessible) .button:hover{box-shadow:0 5px 20px #00000012}
body:not(.accessible) .hero .button{background:var(--ink);color:var(--paper)}
body:not(.accessible) .hero .text-link{font-size:12px;margin-left:24px}
body:not(.accessible) .text-link,body:not(.accessible) .case-link{transition:color .2s;text-underline-offset:5px}
body:not(.accessible) .hero .signal{height:450px;border:1px solid #51554a;border-radius:28px;transform:none;margin:0;background:radial-gradient(ellipse at 45% 50%,#383d2b 0,#22251d 45%,#191c17 85%);color:#eeeee5;box-shadow:0 22px 50px -25px #26272255}
body:not(.accessible) .signal:before{content:"CREATIVE SYSTEM / 001";position:absolute;top:22px;left:24px;z-index:2;font-size:8px;letter-spacing:1.6px;color:#bec2b2}
body:not(.accessible) .signal-grid{opacity:.45}
body:not(.accessible) .signal-label{font-size:8px;letter-spacing:1.6px;left:24px;bottom:23px;color:#e1e4d5}
body:not(.accessible) .signal-coord{font-size:7px;letter-spacing:1px;right:22px;bottom:23px;color:#b5bdab}
body:not(.accessible) .hero .gyro-stage{transform:scale(.94)}
body:not(.accessible) .hero-foot{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:8px;letter-spacing:1.5px;color:var(--muted)}
body:not(.accessible) .hero-foot i{font-size:16px;color:var(--orange);padding-inline:13px}
body:not(.accessible) .work{padding-block:110px 100px}
body:not(.accessible) .section-heading{align-items:flex-start;gap:40px}
body:not(.accessible) .section-heading h2,body:not(.accessible) .about h2,body:not(.accessible) .sound h2{font-weight:500;font-size:clamp(38px,4.1vw,62px);line-height:1.12;letter-spacing:-.055em}
body:not(.accessible) .section-heading>p{align-self:flex-end;font-size:14px;line-height:1.8;padding-bottom:4px;max-width:32ch}
body:not(.accessible) .eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px}
body:not(.accessible) .filters{display:flex;gap:7px;flex-wrap:wrap;margin:40px 0 35px;padding-bottom:20px;border-bottom:1px solid var(--line)}
body:not(.accessible) .filters button{border:1px solid transparent;border-radius:30px;padding:11px 19px;font-size:11px;line-height:1.3;background:transparent;color:var(--muted)}
body:not(.accessible) .filters button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
body:not(.accessible) .filters button:hover:not([aria-pressed=true]){background:var(--soft);color:var(--ink)}
body:not(.accessible) .projects{column-gap:28px;row-gap:50px}
body:not(.accessible) .project{min-width:0;position:relative}
body:not(.accessible) .project-art{height:370px;border-radius:18px;padding:28px;transform:none!important;box-shadow:inset 0 0 0 1px #00000008;transition:box-shadow .4s}
body:not(.accessible) .project-art:hover{box-shadow:0 12px 24px -15px #00000045}
body:not(.accessible) .project-art>img:not(.app-screenshot){transition:scale .7s var(--ease)}
@media(hover:hover){body:not(.accessible) .project-art:hover>img:not(.app-screenshot){scale:1.035}}
body:not(.accessible) .project-art .art-top{font-size:11px;letter-spacing:1.4px}
body:not(.accessible) .project-meta{padding:4px 3px 0;margin-top:20px;align-items:flex-start}
body:not(.accessible) .project-meta h3{font-size:21px;font-weight:600;letter-spacing:-.75px;line-height:1.35;margin-bottom:10px}
body:not(.accessible) .project-meta h3 a{display:inline-flex;align-items:baseline;gap:10px}
body:not(.accessible) .project-meta h3 span{display:inline-block;color:var(--orange);transition:transform .3s}
body:not(.accessible) .project-meta h3 a:hover span{transform:translate(3px,-3px)}
body:not(.accessible) .project-meta p{font-size:12px;line-height:1.65;margin-top:12px;color:var(--muted)}
body:not(.accessible) .case-link{font-size:11px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;display:inline-block}
body:not(.accessible) .tag{font-size:8px;padding:7px 10px;border-color:var(--line);white-space:nowrap;margin-top:2px}
body:not(.accessible) .project-note{margin-top:35px;font-size:10px;color:var(--muted);max-width:75ch;line-height:1.8}
body:not(.accessible) .about{padding-block:95px 110px;column-gap:65px;row-gap:30px}
body:not(.accessible) .about-profile h2{margin-top:0}
body:not(.accessible) .about-portrait{margin-top:34px;max-width:460px}
body:not(.accessible) .about-portrait img{height:430px;border-radius:18px}
body:not(.accessible) .about-copy .large-copy{font-size:25px;line-height:1.45;letter-spacing:-.75px;margin-bottom:28px}
body:not(.accessible) .about-copy p{font-size:15px;line-height:1.9}
body:not(.accessible) .skills{gap:8px;margin-block:28px}
body:not(.accessible) .skills span{font-size:10px;padding:9px 13px;border-radius:30px;border-color:var(--line);background:var(--surface)}
body:not(.accessible) .sound{margin:0 24px;border-radius:28px;background:#1b211b;overflow:hidden;color:#eeeee5}
body:not(.accessible) .sound-copy{max-width:1260px;padding:78px 6% 65px}
body:not(.accessible) .sound h2{font-size:clamp(44px,5.3vw,78px);letter-spacing:-.06em}
body:not(.accessible) .sound h2 em{color:#f6966c}
body:not(.accessible) .sound-name{font-size:13px;letter-spacing:5px;margin:35px 0}
body:not(.accessible) .cover-carousel{margin:34px 0 38px}
body:not(.accessible) .cover-carousel-track{--cover-gap:40px}
body:not(.accessible) .cover-carousel-track img{border-radius:10px;border:1px solid #ffffff12}
body:not(.accessible) .cover-carousel-toggle{font-size:10px;color:#c4cabb;border-color:#535b4c}
body:not(.accessible) .sound-copy>p:not(.sound-name){font-size:17px;line-height:1.85;max-width:65ch;color:#bfc7b7}
body:not(.accessible) .sound .button{background:#eeeee5;color:#20271e}
body:not(.accessible) .platforms{gap:0 30px;margin-top:40px}
body:not(.accessible) .platforms>a{font-size:14px;padding-block:19px;border-color:#4c5545}
body:not(.accessible) .platforms>a:hover{color:#f6966c}
body:not(.accessible) .sound details{font-size:13px;margin-top:30px}
body:not(.accessible) .contact{padding-block:115px 85px}
body:not(.accessible) .contact h2{font-size:clamp(64px,8vw,118px);font-weight:500;letter-spacing:-.065em;line-height:1.03;margin:30px 0 40px}
body:not(.accessible) .contact h2>a{width:90px;height:90px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;font-size:54px;letter-spacing:0;transition:background .3s,color .3s}
body:not(.accessible) .contact h2>a:hover{background:var(--ink);color:var(--paper)}
body:not(.accessible) .contact-bottom p{font-size:15px;line-height:1.8}
body:not(.accessible) .contact-bottom>a{font-size:19px;letter-spacing:-.4px}
body:not(.accessible)>footer{padding-block:30px;border-top:1px solid var(--line);font-size:11px;gap:30px}
body:not(.accessible)>footer .brand{font-size:34px}
body:not(.accessible)>footer>div{gap:22px}
/* Long-form project pages use a calm editorial reading system. */
body.case-page:not(.accessible) .case-hero{max-width:1100px;padding:70px 0 55px}
body.case-page:not(.accessible) .case-hero>.text-link{font-size:11px;color:var(--muted)}
body.case-page:not(.accessible) .case-hero h1{font-size:clamp(52px,6.5vw,88px);font-weight:500;line-height:1.06;letter-spacing:-.055em;margin:25px 0}
body.case-page:not(.accessible) .case-intro{font-size:21px;line-height:1.75;max-width:51ch;letter-spacing:-.25px}
body.case-page:not(.accessible) .case-status{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:0 12px 12px 0;font-size:12px;padding:20px 24px;max-width:80ch;color:var(--muted)}
body.case-page:not(.accessible) .case-layout{column-gap:clamp(45px,7vw,100px);padding-top:45px}
body.case-page:not(.accessible) .case-layout>aside nav{position:sticky;top:130px;max-height:calc(100vh - 160px);overflow-y:auto;padding-right:15px;display:flex;flex-direction:column;gap:0}
body.case-page:not(.accessible) .case-layout>aside nav>a{font-size:11px;line-height:1.6;padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}
body.case-page:not(.accessible) .case-layout>aside nav>a:hover,body.case-page:not(.accessible) .case-layout>aside nav>a[aria-current=location]{color:var(--orange)}
body.case-page:not(.accessible) .case-body{max-width:65ch}
body.case-page:not(.accessible) .case-body section{padding:45px 0 48px;scroll-margin-top:135px}
body.case-page:not(.accessible) .case-body h2{font-size:clamp(28px,2.6vw,37px);font-weight:500;letter-spacing:-1.3px;line-height:1.22;margin-bottom:28px}
body.case-page:not(.accessible) .case-body p{font-size:16px;line-height:1.95;color:var(--muted);max-width:65ch}
body.case-page:not(.accessible) .case-feature{padding-top:28px}
body.case-page:not(.accessible) .case-feature h3{font-size:20px;line-height:1.4;font-weight:700;border-left-width:2px;padding-left:15px;margin-bottom:14px}
body.case-page:not(.accessible) .case-body li{font-size:16px;line-height:1.9;margin-bottom:10px;color:var(--muted)}
body.case-page:not(.accessible) .screenshot-gallery{padding-block:45px 60px;scroll-margin-top:130px}
body.case-page:not(.accessible) .screenshot-gallery>h2{font-size:clamp(32px,3.8vw,52px);line-height:1.12;font-weight:500;letter-spacing:-.05em;margin:24px 0}
body.case-page:not(.accessible) .gallery-intro{font-size:15px;line-height:1.9;margin-bottom:35px}
body.case-page:not(.accessible) .screenshot-grid{column-gap:30px}
body.case-page:not(.accessible) .screenshot-grid figure>a,body.case-page:not(.accessible) .screenshot-grid video{border-radius:12px!important;overflow:hidden}
body.case-page:not(.accessible) .screenshot-grid figcaption strong{font-size:19px;letter-spacing:-.4px;font-weight:600}
body.case-page:not(.accessible) .screenshot-grid figcaption p{font-size:13px;line-height:1.85}
body.case-page:not(.accessible) .screenshot-grid figcaption a{font-size:11px}
body.case-page:not(.accessible) .app-download{max-width:none;position:relative;padding:38px 42px 42px;margin:10px 0 55px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
body.case-page:not(.accessible) .app-download h2{font-size:38px;line-height:1.2;letter-spacing:-1.5px;margin:24px 0}
body.case-page:not(.accessible) .app-download p,body.case-page:not(.accessible) .app-download li{font-size:14px;line-height:1.85;max-width:72ch;color:var(--muted)}
body.case-page:not(.accessible) .app-download h3{font-size:19px;margin:30px 0 15px}
body.case-page:not(.accessible) .app-download .button{margin:10px 0 20px}
body.case-page:not(.accessible) .case-next .button{margin-bottom:12px}
body.audit-product:not(.accessible) .product-hero{padding:80px 0 75px;gap:55px}
body.audit-product:not(.accessible) .product-hero h1{font-size:clamp(44px,4.8vw,70px);font-weight:500;letter-spacing:-.055em}
body.audit-product:not(.accessible) .product-hero img{border-radius:16px;box-shadow:0 20px 50px -20px #0004}
body.audit-product:not(.accessible) .product-features article{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
body.audit-product:not(.accessible) .product-features>div{gap:24px}
body.audit-product:not(.accessible) .product-features h3{font-size:21px;margin-top:20px}
body.audit-product:not(.accessible) .product-features p,body.audit-product:not(.accessible) .product-workflow p,body.audit-product:not(.accessible) .product-context p{font-size:15px;line-height:1.9}
body.audit-product:not(.accessible) .product-doc-hero{padding-top:70px}
/* Keep SYSTEM 174's artist-led identity. */
body.system-project:not(.accessible) .system-art{border-radius:18px;overflow:hidden}
body.system-project:not(.accessible) .cover-track{padding-block:30px;gap:28px}
body.system-project:not(.accessible) .track-cover img{border-radius:8px}
body.system-project:not(.accessible) .artist-sidebar{border-radius:16px}
/* Accessibility and motion are modes, not alternative content. */
body.accessible .scroll-progress,body.accessible #motion-toggle{display:none}
body.accessible .hero-line{display:block}
body.accessible .case-layout>aside nav{position:static;max-height:none}
@media(min-width:1600px){body:not(.accessible) .hero h1{font-size:105px}}
@media(max-width:1100px){body:not(.accessible)>header{padding-inline:20px;width:calc(100% - 40px)}body:not(.accessible)>header nav{gap:18px;font-size:11px}body:not(.accessible) #accessible,body:not(.accessible) #theme-toggle,body:not(.accessible) #motion-toggle{font-size:9px;padding:9px 10px}body:not(.accessible) .hero-grid{gap:24px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:520px}body:not(.accessible) .hero h1{font-size:clamp(54px,6.3vw,78px)}body:not(.accessible) .hero .signal{height:400px}body:not(.accessible) .hero .gyro-stage{transform:scale(.82)}body:not(.accessible) .project-art{height:330px}body:not(.accessible) .project-meta{flex-wrap:wrap}body:not(.accessible) .project-meta h3{font-size:20px}body:not(.accessible) .about{column-gap:40px}body:not(.accessible) .hero .text-link{margin-left:16px}}
@media(max-width:800px){body:not(.accessible)>header{top:8px;margin-top:10px;height:auto;min-height:70px;flex-wrap:wrap;gap:10px 14px;padding:15px 18px;width:calc(100% - 28px)}body:not(.accessible)>header>nav{order:3;width:100%;justify-content:space-between;margin:0;border-top:1px solid var(--line);padding-top:7px;gap:14px}body:not(.accessible) .display-controls{margin-left:auto}body:not(.accessible) .hero{padding-top:35px}body:not(.accessible) .location{font-size:8px;letter-spacing:.5px}body:not(.accessible) .hero-grid{display:grid;grid-template-columns:1fr;gap:35px;padding-top:38px}body:not(.accessible) .hero h1{font-size:clamp(56px,9.8vw,90px);max-width:11ch}body:not(.accessible) .hero .intro{max-width:42ch}body:not(.accessible) .hero .signal{height:380px;max-width:none}body:not(.accessible) .hero .gyro-stage{transform:scale(.9)}body:not(.accessible) .hero-foot{font-size:7px;gap:15px}body:not(.accessible) .hero-foot>span:nth-child(2){display:none}body:not(.accessible) .work{padding-block:75px}body:not(.accessible) .section-heading{display:block}body:not(.accessible) .section-heading>p{margin-top:25px;max-width:none}body:not(.accessible) .projects{gap:38px 22px}body:not(.accessible) .about{padding-block:75px;gap:28px}body:not(.accessible) .about-copy{margin-top:8px}body:not(.accessible) .about-portrait{max-width:420px}body:not(.accessible) .sound{margin-inline:14px;border-radius:22px}body:not(.accessible) .sound-copy{padding:55px 7%}body:not(.accessible) .contact{padding-block:75px 55px}body:not(.accessible) .contact-bottom{display:block}body:not(.accessible) .contact-bottom>a{display:inline-block;margin-top:18px}body.case-page:not(.accessible) .case-hero{padding:45px 0 35px}body.case-page:not(.accessible) .case-intro{font-size:19px}body.case-page:not(.accessible) .case-layout{display:block;padding-top:20px}body.case-page:not(.accessible) .case-layout>aside nav{position:static;max-height:none;padding-bottom:25px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}body.case-page:not(.accessible) .case-layout>aside nav>.eyebrow{grid-column:1/-1}body.audit-product:not(.accessible) .product-hero{padding-top:50px;gap:30px}}
@media(max-width:600px){body:not(.accessible) .wrap{padding-inline:6%}body:not(.accessible) .brand{font-size:34px}body:not(.accessible) .brand span{font-size:10px}body:not(.accessible) #accessible,body:not(.accessible) #theme-toggle,body:not(.accessible) #motion-toggle{font-size:8px;padding:8px;min-height:32px}body:not(.accessible) .display-controls{gap:5px}body:not(.accessible)>header{padding:12px 13px;gap:10px}body:not(.accessible) .hero>.eyebrow{font-size:8px;letter-spacing:1.2px}.hero>.eyebrow .location{display:none}body:not(.accessible) .hero h1{font-size:clamp(51px,10.5vw,64px);letter-spacing:-.065em;max-width:none}body:not(.accessible) .hero .intro{font-size:16px;line-height:1.8}body:not(.accessible) .hero-grid{gap:34px;padding-bottom:30px}body:not(.accessible) .hero .signal{height:330px;border-radius:22px}body:not(.accessible) .hero .gyro-stage{transform:scale(.77)}body:not(.accessible) .hero .text-link{font-size:10px;margin-left:16px}body:not(.accessible) .hero .button{font-size:12px;padding:15px 20px;gap:18px}body:not(.accessible) .hero-foot{font-size:6px;letter-spacing:1px}body:not(.accessible) .section-heading h2,body:not(.accessible) .about h2{font-size:38px}body:not(.accessible) .filters{margin-top:30px;gap:4px}body:not(.accessible) .filters button{font-size:10px;padding:10px 13px}body:not(.accessible) .projects{grid-template-columns:1fr;row-gap:35px}body:not(.accessible) .project-art{height:330px;border-radius:16px;padding:24px}body:not(.accessible) .project-meta{flex-wrap:nowrap;gap:10px}body:not(.accessible) .project-meta h3{font-size:20px;max-width:22ch}body:not(.accessible) .tag{font-size:7px;padding:6px 8px}body:not(.accessible) .about-portrait img{height:390px}body:not(.accessible) .about-copy .large-copy{font-size:23px}body:not(.accessible) .sound h2{font-size:48px}body:not(.accessible) .sound .cover-carousel-track{--cover-gap:20px}body:not(.accessible) .sound-copy>p:not(.sound-name){font-size:15px}body:not(.accessible) .platforms{column-gap:20px}body:not(.accessible) .platforms>a{font-size:12px}body:not(.accessible) .contact h2{font-size:65px}body:not(.accessible) .contact h2>a{width:56px;height:56px;font-size:35px}body:not(.accessible) .contact-bottom>a{font-size:16px}body:not(.accessible)>footer{flex-wrap:wrap;align-items:center;gap:20px}body:not(.accessible)>footer>div{width:100%;display:flex;justify-content:space-between;font-size:10px;gap:12px}body.case-page:not(.accessible) .case-hero h1{font-size:clamp(43px,9vw,58px)}body.case-page:not(.accessible) .case-intro{font-size:17px;line-height:1.85}body.case-page:not(.accessible) .case-status{font-size:12px;padding:17px 20px}body.case-page:not(.accessible) .case-layout>aside nav{grid-template-columns:1fr}body.case-page:not(.accessible) .case-body section{padding-block:35px 38px}body.case-page:not(.accessible) .case-body h2{font-size:29px}body.case-page:not(.accessible) .case-body p,body.case-page:not(.accessible) .case-body li{font-size:16px;line-height:1.9}body.case-page:not(.accessible) .screenshot-gallery{padding-block:35px 40px}body.case-page:not(.accessible) .screenshot-gallery>h2{font-size:34px}body.case-page:not(.accessible) .app-download{padding:25px 23px 30px;border-radius:14px}body.case-page:not(.accessible) .app-download h2{font-size:31px}body.case-page:not(.accessible) .app-download .button{max-width:100%;white-space:normal;font-size:12px;line-height:1.5;gap:12px}body.system-project:not(.accessible) .cover-track{gap:17px}body.system-project:not(.accessible) .track-actions{gap:12px}body.audit-product:not(.accessible) .product-hero h1{font-size:45px}body.audit-product:not(.accessible) .product-features article{padding:24px}body.audit-product:not(.accessible) .product-features>div{display:block}body.audit-product:not(.accessible) .product-hero{grid-template-columns:1fr}}
@media(max-width:360px){body:not(.accessible)>header .display-controls{flex-basis:100%;justify-content:flex-start}body:not(.accessible)>header nav{font-size:10px}body:not(.accessible) .hero .text-link{margin-left:0;display:block;margin-top:20px}body:not(.accessible) .project-meta{flex-wrap:wrap}body:not(.accessible) .hero h1{font-size:47px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}.scroll-progress{display:none}}
body:not(.accessible) .tekniq .app-screenshot{top:70px;left:6%;width:88%;height:calc(100% - 116px);object-fit:cover;object-position:50% 30%;transform:rotate(-2deg);border-radius:9px;box-shadow:0 15px 28px #0003}
html[data-motion=off] .gyro-stage .orbit,html[data-motion=off] .cover-carousel-track{animation-play-state:paused!important}
@media(min-width:361px) and (max-width:600px){body:not(.accessible) #accessible,body:not(.accessible) #theme-toggle,body:not(.accessible) #motion-toggle{font-size:9.5px;min-height:36px;padding:8px 9px}}
body:not(.accessible) section[id],body:not(.accessible) video[id]{scroll-margin-top:0}
@media(max-width:360px){html{scroll-padding-top:190px}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation-play-state:paused!important}
body.accessible .location{display:inline}

/* One up-right arrow and one interaction language for text links. */
.link-arrow{display:inline-block;white-space:nowrap;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;vertical-align:baseline;transition:transform .25s var(--ease),color .25s;transform:translate(0,0)}
a:hover .link-arrow,a:focus-visible .link-arrow{transform:translate(3px,-3px)}
.project-meta h3 .link-arrow{color:var(--orange)}
body:not(.accessible) .project-meta h3 a:hover .link-arrow{transform:translate(3px,-3px)}
body:not(.accessible) header nav a .link-arrow{font-size:11px;margin-left:3px}
body:not(.accessible) .case-layout>aside nav a .link-arrow{float:right;margin-left:10px;margin-top:3px}
body:not(.accessible) .text-link:hover,body:not(.accessible) .case-link:hover,body:not(.accessible) .platforms a:hover{color:var(--orange)}
@media(prefers-reduced-motion:reduce){a:hover .link-arrow,a:focus-visible .link-arrow{transform:none!important;transition:none!important}}
body.accessible a:hover .link-arrow,body.accessible a:focus-visible .link-arrow{transform:none!important}

/* November refinement: readable controls, visible focus and deliberate type. */
html{scroll-padding-top:var(--header-clearance,132px)}
body:not(.accessible) :is(a,button,summary):focus-visible{outline:2px solid var(--orange);outline-offset:5px;border-radius:4px}
body:not(.accessible) :is(h1,h2,h3){text-wrap:balance}
body:not(.accessible) :is(.case-body p,.case-intro,.gallery-intro,.about-copy p){text-wrap:pretty}
body:not(.accessible) :is(#accessible,#theme-toggle,#motion-toggle,.filters button,.cover-carousel-toggle){min-height:44px}
body:not(.accessible) .case-layout>aside nav>a{font-size:12px;min-height:44px}
body:not(.accessible) .screenshot-grid figcaption a{font-size:13px;display:inline-block;padding-block:8px}
body:not(.accessible) .section-heading>p{align-self:flex-start;padding-top:6px}
body:not(.accessible) button{touch-action:manipulation}
@media(max-width:800px){
 body:not(.accessible)>header .display-controls{flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px;margin-left:0;order:2}
 body:not(.accessible) :is(#accessible,#theme-toggle,#motion-toggle){font-size:11px;padding:10px 12px;min-height:44px}
 body:not(.accessible)>header>nav{font-size:12px;gap:10px;padding-top:4px}
 body:not(.accessible)>header>nav a{min-height:44px;display:inline-flex;align-items:center;gap:3px}
 body:not(.accessible) .filters button{font-size:12px}
}
@media(prefers-reduced-motion:no-preference){
 body:not(.accessible) button:active{filter:brightness(.96)}
}