@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
:root{--bg:#f6f5f2;--ink:#1c211c;--muted:#62665f;--line:#d5d8ce;--accent:#b04d0d;--amber:#f5ac56;--night:#171b18;--wide:1440px;--gutter:clamp(22px,4.4vw,64px);--fg:var(--ink);--mut:var(--muted)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Manrope,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}
a,summary{-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}img{height:auto}
p,h1,h2,h3{margin:0}em{font-style:normal}
::selection{background:var(--amber);color:var(--night)}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:fixed;top:-80px;left:16px;padding:12px 20px;background:#fff;color:var(--night);z-index:100}
.skip-link:focus{top:12px}
.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:36px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:27px;font-weight:750;letter-spacing:-1.5px;line-height:1;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{margin-right:13px}
.brand-period{color:var(--accent)}
.site-header nav{display:flex;gap:36px}
.site-header nav a,.header-contact{font-size:14px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;gap:28px}
.header-contact{border-bottom:1px solid currentColor}
.site-header nav a{color:#555d53}
.site-header nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.home,.about{background:linear-gradient(var(--night) 104px,var(--bg) 104px)}
.home .site-header,.about .site-header{color:#f6f5ef}
.home .site-header nav a,.about .site-header nav a{color:#d9dfd5}
.home .brand-period,.about .brand-period{color:var(--amber)}
.hero-dark{background:var(--night);color:#f6f5ef;overflow:clip}
.home-hero{display:grid;grid-template-columns:1.04fr 1fr;gap:30px;align-items:center;min-height:632px;padding-top:38px;padding-bottom:30px}
.studio-label{font-size:13px;font-weight:500;line-height:1.6;margin-bottom:31px}
.hero-title{position:relative;z-index:4}
.hero-title h1{font-size:clamp(72px,7.5vw,108px);line-height:1.03;letter-spacing:-6.5px;font-weight:600}
.hero-title h1 em{color:var(--amber);white-space:nowrap}
.hero-note{max-width:43ch;color:#c0c8bd;font-size:17px;line-height:1.85;margin-top:29px}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:33px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:52px;padding:13px 20px;border:1px solid var(--ink);border-radius:3px;font-size:14px;font-weight:650}
.button.primary{background:var(--ink);color:var(--bg)}
.button:hover{text-decoration:none;background:#394036;color:white}
.hero-dark .button.primary,.about-hero .button.primary{background:var(--amber);color:#171b18;border-color:var(--amber)}
.hero-dark .button.primary:hover,.about-hero .button.primary:hover{background:#ffc482}
.text-link{font-size:14px;display:inline-flex;align-items:center;gap:26px;min-height:44px;font-weight:600;border-bottom:1px solid currentColor}
.text-link:hover{text-decoration:none;color:var(--accent)}
.hero-dark .text-link:hover,.studio-section .text-link:hover{color:var(--amber)}











.portfolio-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-top:25px;padding-bottom:28px;border-top:1px solid #3a4138;gap:22px}
.portfolio-nav a{display:flex;align-items:center;gap:11px;min-height:48px;font-size:13px;font-weight:550}
.portfolio-nav a>span:last-child{margin-left:auto;color:#b9c2b2}
.portfolio-nav .app-icon{width:34px;height:34px;border-radius:8px}
.app-icon{width:44px;height:44px;object-fit:cover;border-radius:10px;flex-shrink:0}
.portfolio{padding-top:92px;padding-bottom:80px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;padding-bottom:38px}
.section-kicker{font-size:13px;color:var(--muted);margin-bottom:17px}
.section-heading h2{font-size:clamp(38px,4.5vw,64px);font-weight:550;letter-spacing:-3px;line-height:1.13}
.section-heading>p{font-size:14px;line-height:1.8;color:var(--muted);padding-bottom:4px}
.section-heading.compact{align-items:center}
.section-heading.compact h2{font-size:38px;letter-spacing:-1.6px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 30px}
.sand{--art:#ebcd98;--art-ink:#3c301d}
.slate{--art:#25242c;--art-ink:#f0eaff}
.rose{--art:#f1d0d5;--art-ink:#5d2d3d}
.lilac{--art:#d8d1eb;--art-ink:#493467}
.plum{--art:#eadcd0;--art-ink:#623754}
.project-art{height:540px;background:var(--art);color:var(--art-ink);display:block;position:relative;overflow:hidden;padding:29px 32px;isolation:isolate;border-radius:4px}
.project-art:hover{text-decoration:none}
.art-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
.project-number{font-size:12px;font-weight:500}
.art-heading .app-icon{width:42px;height:42px}
.project-art h3{font-size:48px;font-weight:600;letter-spacing:-2px;line-height:1.1;margin-top:20px}
.art-line{margin-top:13px;font-size:19px;letter-spacing:-.5px;line-height:1.5;max-width:29ch;font-weight:500}



.project-caption{display:flex;gap:22px;justify-content:space-between;align-items:flex-start;padding-top:20px}
.project-description{font-size:15px;color:var(--muted);line-height:1.75;max-width:44ch}
.project-open{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:3px;flex-shrink:0;font-size:22px}
.project-open:hover{background:var(--ink);color:var(--bg);text-decoration:none}
.platform{margin-top:10px;font-size:12px;color:var(--muted)}
.web-work{padding-bottom:90px}
.web-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.web-project{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;display:flex;gap:23px}
.web-project:hover{text-decoration:none}
.web-number{color:var(--muted);font-size:12px;padding-top:6px}
.web-project h3{font-size:29px;font-weight:550;letter-spacing:-1px}
.web-project h3 span{font-size:22px;margin-left:8px}
.web-project p{font-size:14px;color:var(--muted);line-height:1.8;margin-top:11px;max-width:43ch}
.web-url{display:inline-block;font-size:12px;margin-top:19px}
.web-project:hover .web-url{text-decoration:underline;text-underline-offset:4px}
.studio-section{background:var(--night);color:var(--bg);padding-block:94px}
.studio-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px}
.studio-section .studio-label{color:#bbc6b4}
.studio-section h2{font-size:clamp(44px,5vw,70px);font-weight:550;line-height:1.14;letter-spacing:-3.7px}
.studio-section h2 em{color:var(--amber)}
.studio-copy{padding-top:3px;max-width:490px}
.studio-copy p{font-size:17px;line-height:1.85;color:#ccd4c6}
.studio-copy p+p{margin-top:22px}
.studio-copy .text-link{margin-top:29px}
.questions{padding-top:81px;padding-bottom:80px;display:grid;grid-template-columns:1fr 1.4fr;gap:65px}
.questions h2{font-size:34px;font-weight:550;line-height:1.3;letter-spacing:-1.4px}
.question-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:15px;font-weight:600;cursor:pointer;list-style:none;padding-block:18px}
summary::-webkit-details-marker{display:none}
summary>span{font-size:25px;font-weight:400}
details[open] summary>span{transform:rotate(45deg)}
details>p{padding:0 26px 24px 0;font-size:14px;color:var(--muted);line-height:1.85}
details a{text-decoration:underline;text-underline-offset:3px}
.contact-section{padding-block:54px 70px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.contact-section h2{font-size:38px;font-weight:550;letter-spacing:-1.6px;line-height:1.25}
.contact-section p{font-size:14px;color:var(--muted);margin-bottom:8px}
.contact-section .text-link{font-size:17px}
.site-footer{background:#e9eae3;border-top:1px solid var(--line)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:39px 22px}
.footer-top .brand{font-size:24px}
.footer-top p,.footer-top>a:last-child{font-size:12px;color:#545e50}
.footer-top>a:last-child{display:flex;align-items:center;gap:14px;min-height:44px}
.footer-apps{display:flex;flex-wrap:wrap;gap:8px 26px;padding-bottom:20px}
.footer-apps a{display:flex;align-items:center;min-height:44px;font-size:12px}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #cbd0c3;padding-block:14px 20px;font-size:11px;color:#545e50;align-items:center}
.footer-bottom nav{display:flex;gap:24px}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--muted);margin-block:15px 24px}
.app-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;padding:28px 0 64px;align-items:center}
.app-intro>.app-icon{width:64px;height:64px;border-radius:14px;margin-bottom:26px}
.app-intro .studio-label{margin-bottom:12px;color:var(--muted)}
.app-intro h1{font-size:clamp(56px,6.3vw,88px);line-height:1.12;letter-spacing:-4px;font-weight:600}
.app-tagline{font-size:27px;line-height:1.4;letter-spacing:-.7px;margin-top:20px;max-width:24ch}
.app-blurb{font-size:15px;color:var(--muted);margin-top:23px;max-width:53ch}
.app-platform{font-size:13px;font-weight:650;margin-top:20px}
.app-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:23px;align-items:center}
.app-actions .button{font-size:13px;gap:14px;padding-inline:15px}
.availability{font-size:14px;color:var(--muted)}
.app-actions>.text-link{margin-left:4px}
.app-visual{background:var(--art);height:635px;overflow:hidden;border-radius:4px;padding:40px 40px 0;display:flex;justify-content:center}


.app-features{padding-block:48px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.app-features h2,.app-support h2{font-size:32px;letter-spacing:-1px;font-weight:550}
.app-features ul{list-style:none;padding:0;margin:0}
.app-features li{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.app-features li:first-child{padding-top:0}
.app-support{border-top:1px solid var(--line);padding-block:45px 65px;display:flex;justify-content:space-between;gap:32px}
.app-support p{font-size:14px;color:var(--muted);margin-block:8px}
.policy-links{display:flex;flex-direction:column;align-items:flex-start;min-width:240px;gap:2px}
.policy-links a{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:32px;font-size:14px;width:100%}
.about-hero{background:var(--night);color:var(--bg);padding-block:70px 88px}
.about-hero h1{font-size:clamp(56px,7vw,100px);font-weight:550;letter-spacing:-5px;line-height:1.05}
.about-hero h1 em{color:var(--amber)}
.about-hero p:not(.studio-label){max-width:52ch;font-size:20px;color:#c7d1c0;margin-top:28px}
.about-hero .button{margin-top:32px}
.about-intro{padding-block:84px 66px;display:grid;grid-template-columns:1fr 1.2fr;gap:75px}
.about-intro h2{font-size:43px;font-weight:550;line-height:1.2;letter-spacing:-2px}
.about-intro p{color:var(--muted);line-height:1.9}
.about-intro p+p{margin-top:22px}
.disciplines{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-bottom:82px}
.disciplines article{border-top:1px solid var(--line);padding-top:22px}
.disciplines span{font-size:12px;color:var(--muted)}
.disciplines h2{font-size:23px;font-weight:600;letter-spacing:-.8px;margin-block:18px 12px}
.disciplines p{font-size:14px;color:var(--muted);line-height:1.85}
.about-products{padding-bottom:50px}
.about-product-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.about-product-list>a{display:flex;gap:20px;align-items:center;border-top:1px solid var(--line);padding-block:25px}
.about-product-list>a>span:last-child{margin-left:auto}
.about-product-list h3{font-size:21px;font-weight:600}
.about-product-list p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:5px}
.hero{padding-block:64px 48px}
.hero h1{font-size:clamp(48px,7vw,76px);font-weight:600;letter-spacing:-3px;line-height:1.1;margin-bottom:25px}
.hero p{max-width:62ch}
.hero .eyebrow{color:var(--muted);font-size:14px;margin-bottom:18px}
.hero a,.rise a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.rise{padding-block:36px;border-top:1px solid var(--line)}
.rise h2{font-size:25px;margin-bottom:16px;font-weight:550;letter-spacing:-.6px}
.note{max-width:70ch}
.policies{display:grid;margin-bottom:24px}
.policy{padding-block:17px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}
.legal-links{display:flex;gap:24px}
.legal-links a{min-height:44px;display:inline-flex;align-items:center}
@media(min-width:1500px){.home-hero{gap:65px}.home-hero{min-height:670px}.project-art{height:565px}}
@media(max-width:1100px){
 .site-header{gap:24px;height:92px}.home,.about{background:linear-gradient(var(--night) 92px,var(--bg) 92px)}
 .site-header nav{gap:25px}.brand{font-size:24px}.header-contact{gap:18px}
 .home-hero{gap:20px;min-height:570px;padding-top:22px}.hero-title h1{font-size:clamp(62px,7.8vw,86px);letter-spacing:-5px}
 .hero-note{font-size:15px}.hero-actions{gap:19px}.hero-actions .text-link{font-size:12px}
 
 
 .portfolio-nav{gap:20px}.portfolio-nav a{font-size:12px;gap:9px}.portfolio-nav a>span:last-child{display:none}
 .portfolio-nav .app-icon{width:30px;height:30px}.project-art{height:495px;padding:24px}.project-art h3{font-size:43px}
 .art-line{font-size:18px}
 .studio-grid{gap:45px}.studio-section h2{font-size:54px}.footer-top p{display:none}.questions{gap:35px}
 .app-hero{gap:36px}.app-visual{height:590px;padding-inline:20px}
}
@media(max-width:800px){
 .header-contact{display:none}.site-header nav{gap:25px}
 .home-hero{grid-template-columns:1fr;gap:10px;padding-top:32px;padding-bottom:20px}
 .hero-title{max-width:620px}.hero-title h1{font-size:clamp(70px,12vw,100px);letter-spacing:-5px}
 .hero-note{max-width:46ch;font-size:16px}.studio-label{margin-bottom:24px}
 
 
 
 .portfolio-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;padding-top:22px;padding-bottom:24px}
 .portfolio-nav a{font-size:13px}.portfolio-nav a>span:last-child{display:block}.portfolio-nav .app-icon{width:32px;height:32px}
 .portfolio{padding-top:64px}.section-heading h2{font-size:49px;letter-spacing:-2.5px}.section-heading>p{max-width:28ch;font-size:13px}
 .project-grid{gap:38px 22px}.project-art{height:460px;padding:23px}.project-art h3{font-size:39px}.art-line{font-size:17px}
 .project-number{font-size:10px}
 .art-heading .app-icon{width:36px;height:36px}.project-description{font-size:13px}
 .section-heading.compact h2{font-size:31px}.web-work{padding-bottom:65px}
 .studio-section{padding-block:65px}.studio-grid{grid-template-columns:1fr;gap:31px}.studio-section h2{font-size:62px}
 .studio-copy{max-width:56ch}.questions{grid-template-columns:1fr;gap:28px;padding-block:60px}
 .contact-section{align-items:flex-start}.contact-section h2{font-size:31px}.contact-section .text-link{font-size:14px}
 .footer-top>a:last-child{font-size:12px}.app-hero{gap:30px}.app-tagline{font-size:23px}
 .app-intro h1{font-size:62px}.about-intro{gap:40px}.about-intro h2{font-size:33px}
 .about-product-list{gap:0 25px}.disciplines{gap:24px}.disciplines h2{font-size:20px}
}
@media(max-width:600px){
 .site-header{height:82px;gap:18px}.home,.about{background:linear-gradient(var(--night) 82px,var(--bg) 82px)}
 .brand{font-size:23px;letter-spacing:-1.2px}.brand svg{width:23px;margin-right:8px}
 .site-header nav{gap:15px}.site-header nav a{font-size:12px}.site-header nav a:nth-child(3){display:none}
 .home-hero{padding-top:32px;padding-bottom:18px}.studio-label{font-size:11px;margin-bottom:22px}
 .hero-title h1{font-size:clamp(58px,12.8vw,76px);letter-spacing:-3.6px;line-height:1.06}
 .hero-note{font-size:14px;line-height:1.85;margin-top:23px;max-width:39ch}.hero-actions{gap:20px;margin-top:25px}
 .hero-actions .button{font-size:12px;gap:22px;padding:12px 15px;min-height:48px}.hero-actions .text-link{gap:13px;font-size:12px}
 
 
 
 
 
 .portfolio-nav{gap:12px 17px;padding-bottom:20px}.portfolio-nav a{gap:8px;font-size:11px}.portfolio-nav a>span:last-child{display:none}
 .portfolio-nav .app-icon{width:29px;height:29px}
 .portfolio{padding-top:46px;padding-bottom:50px}.section-heading{display:block;padding-bottom:29px}
 .section-kicker{font-size:11px;margin-bottom:12px}.section-heading h2{font-size:43px;letter-spacing:-2.2px}
 .section-heading>p{font-size:13px;max-width:35ch;margin-top:20px}.section-heading>p br{display:none}
 .project-grid{grid-template-columns:1fr;gap:34px}.project-art{height:465px;padding:25px}
 .project-art h3{font-size:43px;margin-top:20px}.art-line{font-size:19px;max-width:26ch}
 .project-number{font-size:11px}.art-heading .app-icon{width:40px;height:40px}
 .project-caption{gap:22px;padding-top:16px}
 .project-description{font-size:14px}.project-open{width:44px;height:44px}.platform{font-size:11px}
 .web-grid{grid-template-columns:1fr;gap:17px}.web-project{padding-block:23px}.web-project h3{font-size:27px}
 .section-heading.compact h2{font-size:32px;letter-spacing:-1.5px}.web-work{padding-bottom:48px}
 .studio-section{padding-block:53px}.studio-grid{gap:27px}.studio-section h2{font-size:clamp(40px,10vw,55px);letter-spacing:-2.4px}
 .studio-copy p{font-size:15px}.studio-copy .text-link{margin-top:22px}
 .questions{padding-top:47px;padding-bottom:42px;gap:23px}.questions h2{font-size:30px}
 summary{font-size:14px;min-height:73px;gap:16px}details>p{font-size:14px;padding-right:5px}
 .contact-section{display:block;padding-block:34px 48px}.contact-section h2{font-size:32px;margin-bottom:21px}
 .contact-section p{font-size:13px}.contact-section .text-link{font-size:15px}
 .footer-top{padding-block:28px 17px;flex-direction:column;align-items:flex-start;gap:7px}
 .footer-apps{gap:2px 23px;padding-bottom:19px}.footer-apps a{font-size:11px}
 .footer-bottom{flex-wrap:wrap;gap:4px 20px;font-size:10px;padding-bottom:15px}.footer-bottom nav{gap:16px}
 .footer-bottom>a:last-child{margin-left:auto}
 .back-link{margin-block:5px 13px}.app-hero{grid-template-columns:1fr;gap:32px;padding-top:12px;padding-bottom:38px}
 .app-intro h1{font-size:64px;letter-spacing:-3px}.app-intro>.app-icon{width:54px;height:54px}
 .app-tagline{font-size:24px}.app-blurb{font-size:14px}.app-visual{height:530px;padding-top:30px}
 .app-features{grid-template-columns:1fr;gap:25px;padding-block:32px}.app-support{display:block;padding-block:32px}
 .policy-links{margin-top:22px}.app-features h2,.app-support h2{font-size:29px}.app-features li{font-size:14px}
 .hero{padding-top:38px}.hero p,.rise p{font-size:15px}.rise{padding-block:28px}.policy strong{align-self:center}
 .about-hero{padding-block:42px 55px}.about-hero h1{font-size:clamp(43px,9.8vw,62px);letter-spacing:-2.5px}.about-hero p:not(.studio-label){font-size:17px}
 .about-intro{padding-block:46px;grid-template-columns:1fr;gap:25px}.about-intro h2{font-size:35px}.about-intro p{font-size:15px}
 .disciplines{grid-template-columns:1fr;gap:30px;padding-bottom:47px}.disciplines h2{font-size:24px}
 .about-product-list{grid-template-columns:1fr}.about-product-list>a{padding-block:21px}.about-products{padding-bottom:22px}
 .about-products .section-heading .text-link{margin-top:15px}.about-product-list h3{font-size:21px}
}
@media(max-width:370px){
 .brand{font-size:20px}.brand svg{width:21px}.site-header nav{gap:12px}.site-header nav a{font-size:11px}
 .hero-title h1{font-size:54px;letter-spacing:-3.2px}.hero-actions{gap:13px}.hero-actions .text-link{font-size:11px;gap:9px}
 
 .portfolio-nav{gap:9px 13px}.portfolio-nav a{font-size:10px}
 .portfolio-nav .app-icon{width:26px;height:26px}.project-art{padding:22px;height:445px}.art-line{font-size:18px}
 
 .section-heading h2{font-size:39px}.app-intro h1{font-size:56px}
}
.home,.about{background:var(--night)}
.home main,.about main{background:var(--bg)}
@media(max-width:600px){
 .site-header{height:auto;min-height:82px;flex-wrap:wrap;gap:0 14px;padding-block:12px}
 .site-header nav{gap:15px}.site-header nav a{font-size:11px}.site-header nav a:nth-child(3){display:inline-flex}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===================================================================
   The night sky: the five apps are the five stars of Lyra.
   Motion runs once on load (CSS) and site.js adds the tour, the
   pointer parallax, the section reveals and the light under the pointer.
   =================================================================== */
@property --glow{syntax:'<color>';inherits:true;initial-value:#f5a524}
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);interpolate-size:allow-keywords}

/* the faint field behind everything dark */
.hero-dark,.about-hero{position:relative;isolation:isolate}
.sky-field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(130% 100% at 70% 35%,#000 35%,transparent 90%);mask-image:radial-gradient(130% 100% at 70% 35%,#000 35%,transparent 90%)}
.sky-field svg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);fill:#eef3e4;translate:calc(var(--px,0)*-7px) calc(var(--py,0)*-5px)}
.sky-field .field-near{translate:calc(var(--px,0)*-18px) calc(var(--py,0)*-12px)}
.tw{animation:twinkle 5.2s ease-in-out infinite}
.live-ready [data-live]:not(.is-live) .tw,.is-still .tw{animation-play-state:paused}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.12}}

/* the chart */
.sky{position:relative;height:600px;min-width:0;--pw:clamp(176px,38%,220px);transition:--glow .9s ease}
.sky-legend{position:absolute;left:0;top:0;margin:0;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#7f8b79;line-height:1.5}
.sky-legend span{display:block;letter-spacing:0;text-transform:none;font-weight:500;font-size:12px;color:#aab4a2}
.lyra{position:absolute;left:3%;top:8%;width:58%;aspect-ratio:73.3/100;translate:calc(var(--px,0)*-9px) calc(var(--py,0)*-6px)}
.lyra-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lyra-lines path{fill:none}
.lyra-lines .figure{stroke:#f6f5ef;stroke-opacity:.42;stroke-width:.24;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.lyra-lines .graticule{stroke:#f6f5ef;stroke-opacity:.08;stroke-width:1;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.grid-label{position:absolute;font-size:10px;line-height:1;color:#6c7766;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.grid-label.dec{left:-9%;top:12.9%;translate:0 -150%}
.grid-label.ra{left:40.6%;top:100%;translate:7px 14px}
.stars{list-style:none;margin:0;padding:0}
.star{position:absolute;left:var(--x);top:var(--y);width:0;height:0;--s:52px}
.star.vega{--s:68px}
.star a{position:absolute;left:0;top:0;width:var(--s);height:var(--s);translate:-50% -50%;display:grid;place-items:center;border-radius:50%;transition:scale .6s var(--ease-out)}
.star a:hover{text-decoration:none;scale:1.12}
.star a:focus-visible{outline:2px solid var(--c);outline-offset:5px}
.star .app-icon{position:relative;z-index:1;width:var(--s);height:var(--s);border-radius:50%;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 75%,transparent),0 0 24px 3px color-mix(in srgb,var(--c) 38%,transparent);transition:box-shadow .6s ease}
.star-spikes{position:absolute;left:50%;top:50%;width:300%;height:300%;translate:-50% -50%;pointer-events:none;background:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--c) 55%,#fff) 50%,transparent 96%) center/100% 1.5px no-repeat,linear-gradient(0deg,transparent 4%,color-mix(in srgb,var(--c) 55%,#fff) 50%,transparent 96%) center/1.5px 100% no-repeat,radial-gradient(closest-side,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);opacity:.35;scale:.62;transition:opacity .6s ease,scale .9s var(--ease-out)}
.star.on .star-spikes{opacity:1;scale:1}
.star.on .app-icon{box-shadow:0 0 0 2px var(--c),0 0 36px 8px color-mix(in srgb,var(--c) 55%,transparent)}
.star.on a{scale:1.1}
.star-name{position:absolute;left:calc(var(--s)/2 + 8px);top:calc(var(--s)/2 - 16px);white-space:nowrap;font-size:12px;font-weight:650;line-height:1.25;color:#e3e9dc;opacity:.55;transition:opacity .5s ease;pointer-events:none}
.star-name small{display:block;font-size:10px;font-weight:500;color:#8c9886}
.star.on .star-name{opacity:1}

/* the phone shows whichever star is lit */
.sky-phone{position:absolute;right:2%;bottom:9%;width:var(--pw);display:block;z-index:2;transform:perspective(1100px) translate3d(calc(var(--px,0)*9px),calc(var(--py,0)*7px),0) rotateY(calc(var(--px,0)*-7deg)) rotateX(calc(var(--py,0)*5deg))}
.sky-phone:hover{text-decoration:none}
.sky-phone::before{content:"";position:absolute;inset:-22% -55%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 36%,transparent),transparent 78%);pointer-events:none}



.sky-caption{position:absolute;right:calc(2% + var(--pw)/2);bottom:0;width:300px;translate:50% 0;margin:0;text-align:center;font-size:13px;line-height:1.5;color:#c9d1c2;transition:opacity .18s ease,translate .18s ease}
.sky-caption.swap{opacity:0;translate:50% 4px}
.sky-caption b{color:#f6f5ef;font-weight:700}
.sky-star{display:block;font-size:11px;letter-spacing:.08em;font-weight:600;color:color-mix(in srgb,var(--glow) 70%,#f6f5ef);margin-bottom:2px}
.sky-pause{position:absolute;right:0;top:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid #3a4138;background:transparent;color:#aab4a2;cursor:pointer;transition:color .2s,border-color .2s}
.sky-pause[hidden]{display:none}
.sky-pause:hover{color:#f6f5ef;border-color:#6c7766}
.sky-pause:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sky-pause svg{fill:currentColor}
.sky-pause .i-play,.is-still .sky-pause .i-pause{display:none}
.is-still .sky-pause .i-play{display:block}

/* the strip under the hero follows the tour */
.portfolio-nav a{position:relative;transition:color .3s}
.portfolio-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--amber);scale:0 1;transform-origin:left;transition:scale .6s var(--ease-out)}
.portfolio-nav a.on::after,.portfolio-nav a:hover::after{scale:1 1}
.portfolio-nav a:hover{text-decoration:none}
.portfolio-nav .app-icon{transition:translate .35s var(--ease-out)}
.portfolio-nav a:hover .app-icon{translate:0 -3px}

/* small things that answer the pointer */
.site-header nav a{background:linear-gradient(currentColor,currentColor) 0 calc(50% + 12px)/0 1px no-repeat;transition:background-size .4s var(--ease-out),color .2s}
.site-header nav a:hover{text-decoration:none;background-size:100% 1px}
.button span[aria-hidden],.text-link span[aria-hidden],.web-project h3 span,.project-open span{display:inline-block;transition:translate .35s var(--ease-out)}
.button:hover span[aria-hidden],.text-link:hover span[aria-hidden],.web-project:hover h3 span,.project-open:hover span{translate:3px -3px}
.hero-actions .button:hover span[aria-hidden],.about-hero .button:hover span[aria-hidden]{translate:3px 3px}

/* the portfolio: PoCats leads across the full width */
.art-copy{position:relative;z-index:1}
.app-project.feature{grid-column:1/-1}
.feature .project-art{height:580px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto minmax(0,1fr);column-gap:40px;padding:34px 44px}
.feature .art-heading{grid-column:1/-1}
.feature .art-copy{align-self:center;padding-bottom:30px}
.feature .project-art h3{font-size:clamp(64px,7.4vw,112px);letter-spacing:-5px;line-height:1;margin-top:0}
.feature .art-line{font-size:clamp(20px,1.9vw,26px);max-width:20ch;margin-top:18px}
.art-star{margin-top:30px;font-size:13px;font-weight:650;letter-spacing:.03em;opacity:.72}


.project-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.26),transparent 62%);opacity:0;transition:opacity .45s ease}
.project-art:hover::after{opacity:1}





/* app pages: the phone stands in its own light, under its own star */
.app-hero{--c:var(--amber)}
.app-visual{position:relative;isolation:isolate}
.app-visual::before{content:"";position:absolute;left:50%;top:42%;width:min(560px,130%);aspect-ratio:1;translate:-50% -50%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent 72%);pointer-events:none}
.app-visual::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .45s ease}
.app-visual:hover::after{opacity:1}

.app-visual:hover img{--lift:-10px}
.star-chip{position:absolute;left:22px;top:18px;z-index:1;font-size:12px;font-weight:650;letter-spacing:.03em;color:var(--art-ink);opacity:.72}

/* the studio band carries the figure once more, drawn when it arrives */
.studio-section{position:relative;overflow:clip;isolation:isolate}
.studio-lyra,.about-lyra{position:absolute;z-index:-1;pointer-events:none;overflow:visible}
.studio-lyra{left:33%;top:50%;height:84%;translate:-50% -50%;opacity:.6}
.studio-lyra path,.about-lyra path{fill:none;stroke:#f6f5ef;stroke-opacity:.22;stroke-width:.22;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.studio-lyra circle,.about-lyra circle{fill:var(--amber);opacity:.85}
.about-hero{overflow:clip}
.about-lyra{right:7%;top:12%;height:78%;opacity:.7}

/* section headings rise line by line */
.ln{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:inline-block}

/* questions open and close instead of jumping */
summary>span{transition:transform .4s var(--ease-out)}
details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}

/* ---------- load choreography (CSS only, so it runs before any script) ---------- */
@media (prefers-reduced-motion:no-preference){
 .hero-title .studio-label,.hero-note,.hero-actions,.about-hero .studio-label,.about-hero p:not(.studio-label),.about-hero .button,.app-intro>*{animation:fade-up .9s var(--ease-out) backwards}
 .hero-title .studio-label,.about-hero .studio-label{animation-delay:.05s}
 .hero-title h1 .ln>span,.about-hero h1 .ln>span{animation:line-up 1.1s var(--ease-out) .12s backwards}
 .hero-title h1 .ln+.ln>span,.about-hero h1 .ln+.ln>span{animation-delay:.22s}
 .hero-note,.about-hero p:not(.studio-label){animation-delay:.38s}
 .hero-actions,.about-hero .button{animation-delay:.5s}
 .app-intro>:nth-child(2){animation-delay:.06s}.app-intro>:nth-child(3){animation-delay:.12s}.app-intro>:nth-child(4){animation-delay:.18s}.app-intro>:nth-child(5){animation-delay:.24s}.app-intro>:nth-child(n+6){animation-delay:.3s}
 .sky-legend,.lyra-lines .graticule,.grid-label{animation:fade 1.4s ease .2s backwards}
 .lyra-lines .figure,.about-lyra path{animation:draw 2.2s linear .55s backwards}
 .star a{animation:ignite 1s var(--ease-out) backwards;animation-delay:calc(.5s + var(--at)*2.2s)}
 .star-name{animation:fade .9s ease backwards;animation-delay:calc(.85s + var(--at)*2.2s)}
 .about-lyra circle{animation:fade .9s ease backwards;animation-delay:calc(.5s + var(--at)*2.2s)}
 .sky-phone{animation:phone-in 1.3s var(--ease-out) .3s backwards}
 .sky-caption{animation:fade 1s ease 1.5s backwards}
 .portfolio-nav a{animation:fade-up .8s var(--ease-out) backwards;animation-delay:calc(.9s + var(--i,0)*.07s)}
 
 .star-chip{animation:fade 1s ease .9s backwards}
}
@keyframes fade{from{opacity:0}}
@keyframes fade-up{from{opacity:0;translate:0 18px}}
@keyframes line-up{from{translate:0 105%}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes ignite{0%{opacity:0;scale:.25;filter:brightness(2.6)}55%{opacity:1;scale:1.18}100%{scale:1;filter:brightness(1)}}
@keyframes phone-in{from{opacity:0;translate:0 70px}}

/* on a phone the sky is below the fold: its intro waits until it is seen (site.js adds .lit) */
.live-ready .sky:not(.lit) :is(.sky-legend,.lyra-lines .figure,.lyra-lines .graticule,.grid-label,.star a,.star-name,.sky-phone,.sky-caption){animation-play-state:paused}

/* ---------- sections enter once, each its own way (site.js adds .in) ---------- */
.reveal-ready [data-reveal] .ln>span{translate:0 105%;transition:translate 1.1s var(--ease-out)}
.reveal-ready [data-reveal] .ln+.ln>span{transition-delay:.09s}
.reveal-ready [data-reveal].in .ln>span{translate:0 0}
.reveal-ready [data-reveal=heading] .section-kicker,.reveal-ready [data-reveal=heading]>p,.reveal-ready .about-intro>div{opacity:0;translate:0 14px;transition:opacity .8s ease .25s,translate 1s var(--ease-out) .25s}
.reveal-ready [data-reveal=heading].in .section-kicker,.reveal-ready [data-reveal=heading].in>p,.reveal-ready .about-intro.in>div{opacity:1;translate:0 0}
/* a card opens upward like a slot, then its phone rises out of it */
.reveal-ready [data-reveal=card] .project-art{clip-path:inset(100% 0 0 0 round 4px);transition:clip-path 1.05s var(--ease-io);transition-delay:calc(var(--d,0)*.12s)}
.reveal-ready [data-reveal=card].in .project-art{clip-path:inset(0 0 0 0 round 4px)}


.reveal-ready [data-reveal=card] .art-heading,.reveal-ready [data-reveal=card] .art-copy,.reveal-ready [data-reveal=card] .project-caption,.reveal-ready [data-reveal=card] .platform{opacity:0;translate:0 16px;transition:opacity .8s ease,translate 1s var(--ease-out);transition-delay:calc(var(--d,0)*.12s + .45s)}
.reveal-ready [data-reveal=card] .project-caption,.reveal-ready [data-reveal=card] .platform{transition-delay:calc(var(--d,0)*.12s + .7s)}
.reveal-ready [data-reveal=card].in :is(.art-heading,.art-copy,.project-caption,.platform){opacity:1;translate:0 0}


/* rows slide in one after another; the web rows draw their rules first */
.reveal-ready [data-reveal=rows]>*{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .9s var(--ease-out);transition-delay:calc(var(--i,0)*.08s)}
.reveal-ready [data-reveal=rows].in>*{opacity:1;translate:0 0}
.reveal-ready .question-list>details{translate:-18px 0}
.reveal-ready .question-list.in>details{translate:0 0}
.web-project{border:0;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 100% 100%/100% 1px no-repeat}
.reveal-ready .web-grid>.web-project{opacity:1;translate:0 0;background-size:0 1px,0 1px;transition:background-size 1.2s var(--ease-io);transition-delay:calc(var(--i,0)*.15s)}
.reveal-ready .web-grid.in>.web-project{background-size:100% 1px,100% 1px}
.reveal-ready .web-grid>.web-project>*{opacity:0;translate:0 12px;transition:opacity .7s ease,translate .9s var(--ease-out);transition-delay:calc(var(--i,0)*.15s + .45s)}
.reveal-ready .web-grid.in>.web-project>*{opacity:1;translate:0 0}
/* the studio band: the figure draws, its stars light, the words rise */
.reveal-ready .studio-section .studio-lyra path{stroke-dashoffset:1;transition:stroke-dashoffset 2.4s linear .2s}
.reveal-ready .studio-section.in .studio-lyra path{stroke-dashoffset:0}
.reveal-ready .studio-section .studio-lyra circle{opacity:0;transition:opacity .6s ease;transition-delay:calc(.2s + var(--at)*2.4s)}
.reveal-ready .studio-section.in .studio-lyra circle{opacity:.85}
.reveal-ready .studio-section .studio-label,.reveal-ready .studio-section .studio-copy>*{opacity:0;translate:0 16px;transition:opacity .8s ease .35s,translate 1s var(--ease-out) .35s}
.reveal-ready .studio-section .studio-copy>:nth-child(2){transition-delay:.47s}.reveal-ready .studio-section .studio-copy>:nth-child(3){transition-delay:.59s}
.reveal-ready .studio-section.in .studio-label,.reveal-ready .studio-section.in .studio-copy>*{opacity:1;translate:0 0}
.reveal-ready [data-reveal=contact]>div{opacity:0;translate:0 14px;transition:opacity .8s ease .3s,translate 1s var(--ease-out) .3s}
.reveal-ready [data-reveal=contact].in>div{opacity:1;translate:0 0}
.reveal-ready [data-reveal=contact] .text-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;border-bottom-color:transparent;transition:background-size 1.1s var(--ease-io) .6s,color .2s}
.reveal-ready [data-reveal=contact].in .text-link{background-size:100% 1px}

/* ---------- the sky at smaller widths ---------- */
@media(min-width:1500px){.sky{height:640px}}
@media(max-width:1100px){
 .sky{height:520px;--pw:166px}.lyra{top:10%;width:56%}.sky-phone{bottom:10%}.sky-caption{width:250px;font-size:12px}
 .star{--s:44px}.star.vega{--s:56px}.star-name{display:none}
 .feature .project-art{height:520px;padding:26px 30px;column-gap:24px}
}
@media(max-width:800px){
 .sky{width:min(100%,560px);height:480px;justify-self:center;margin-top:34px;--pw:172px}
 .sky-legend{top:-6px}
 .lyra{left:4%;top:12%;width:50%}
 .sky-phone{right:0;bottom:12%}
 .sky-caption{left:0;right:0;width:auto;translate:none;text-align:right}
 .sky-caption.swap{translate:0 4px}
 .grid-label.dec{left:-2%}
 .feature .project-art{display:block;height:470px;padding:23px}
 .feature .project-art h3{font-size:clamp(39px,9vw,64px);letter-spacing:-2.5px;margin-top:20px}
 .feature .art-line{font-size:17px}.art-star{display:none}
 .feature .art-copy{padding-bottom:0}
 
 
 .studio-lyra{left:auto;right:-4%;top:6%;height:44%;translate:none;opacity:.45}
 .about-lyra{right:-6%;top:auto;bottom:-6%;height:70%;opacity:.45}
}
@media(max-width:600px){
 .sky{height:430px;margin-top:26px;--pw:146px}
 .lyra{left:3%;top:14%;width:62%}
 .star{--s:40px}.star.vega{--s:50px}
 .star-name{display:none}
 .sky-phone{bottom:13%}
 .sky-caption{font-size:12px}
 .sky-pause{width:36px;height:36px}
 .grid-label{display:none}
 .feature .project-art{height:465px;padding:25px}.feature .project-art h3{font-size:43px}
 
}
@media(max-width:370px){
 .sky{height:400px;--pw:128px}.star{--s:36px}.star.vega{--s:46px}
}
@media(prefers-reduced-motion:reduce){
 .sky-phone,.lyra,.sky-field svg{transform:none;translate:none}
 .star a,.star-spikes,.project-art::after{transition:none}
 .tw{animation:none}
 details::details-content{transition:none}
}

/* ===================================================================
   The device: one phone frame for every screen on the site, and the
   layered stage each app stands on (a second screen behind, the main
   one in front, one real piece of the interface floating out of it).
   Images come from scripts/build-app-art.py.
   =================================================================== */
.device{position:relative;display:block;padding:3.4%;border-radius:15.5%/7.4%;background:linear-gradient(150deg,#7a7f76 0%,#30342e 8%,#161915 30%,#0d0f0d 62%,#272b25 88%,#62675d 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1.5px 1px rgba(255,255,255,.28),0 1px 1px rgba(0,0,0,.4),0 42px 70px -28px rgba(12,14,12,.58),0 16px 30px -16px rgba(12,14,12,.42)}
.device::before,.device::after{content:"";position:absolute;right:-1.1%;width:1.7%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#191c18,#4d5249)}
.device::before{top:19%;height:6%}
.device::after{top:27.5%;height:11%}
.glass{position:relative;display:block;aspect-ratio:9/19.5;border-radius:13%/6%;overflow:hidden;background:#050605;isolation:isolate}
.glass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.glass::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 27%,transparent 27.4%),linear-gradient(to bottom,rgba(255,255,255,.05),transparent 16%);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.65)}

/* the stage fills the art panel below the copy; phones run off its bottom edge */
.project-art{display:flex;flex-direction:column;height:600px}
.art-stage{position:relative;flex:1 1 auto;min-height:0;margin:22px 0 -29px;container-type:inline-size;
 --fw:40cqw;--fl:calc(50% - var(--fw)/2 + 8cqw);--bw:33cqw;--bl:calc(50% - var(--bw)/2 - 22cqw);--bt:8cqw;--br:-7deg;
 --chipw:min(calc(var(--fw)*var(--cwf,.6)),62cqw)}
.art-stage>*{position:absolute}
.art-stage .front{width:var(--fw);left:var(--fl);top:0;z-index:2;transform:translate3d(calc(var(--px,0)*6px),calc(var(--py,0)*5px - var(--lift,0px)),0);transition:transform .6s var(--ease-out)}
.art-stage .back{width:var(--bw);left:var(--bl);top:var(--bt);rotate:var(--br);z-index:1;transform:translate3d(calc(var(--px,0)*-5px),calc(var(--py,0)*-4px),0);transition:transform .6s var(--ease-out)}
.art-stage .back .glass::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(14,16,14,.16);pointer-events:none}
.art-stage .chip{z-index:3;width:var(--chipw);height:auto;left:max(2cqw,min(calc(var(--fl) + var(--fw)*var(--cxf,.6)),calc(98cqw - var(--chipw))));top:calc(var(--fw)*var(--cyf,.5));rotate:var(--cr,3deg);border-radius:calc(var(--chipw)*var(--crk,.05));outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;box-shadow:0 30px 46px -20px rgba(12,14,12,.6),0 10px 18px -8px rgba(12,14,12,.35);transform:translate3d(calc(var(--px,0)*14px),calc(var(--py,0)*11px - var(--lift,0px)*1.6),0);transition:transform .6s var(--ease-out)}
.art-stage .project-character{z-index:4;width:var(--pcw,36cqw);height:auto;left:var(--pcl,0);bottom:var(--pcb,-2px);transform:translate3d(calc(var(--px,0)*18px),calc(var(--py,0)*8px),0);transition:transform .6s var(--ease-out),translate .6s var(--ease-pop)}
.project-art:hover,.app-visual:hover{--lift:10px}
.project-art:hover .project-character{translate:0 -6px}
/* a pool of light behind the phones, so a dark frame never sinks into a dark panel */
.art-stage::before{content:"";position:absolute;z-index:0;left:calc(var(--fl) + var(--fw)/2);top:calc(var(--fw)*.75);width:calc(var(--fw)*2.6);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,var(--pool,rgba(255,255,255,.3)),transparent 72%);pointer-events:none}
.slate .art-stage{--pool:rgba(150,80,255,.32)}
/* where each app's floating piece sits, as fractions of its front phone */
[data-art=pocats]{--cwf:.5;--cxf:.8;--cyf:.6;--cr:6deg;--crk:.04}
[data-art=chadme]{--cwf:.6;--cxf:.7;--cyf:.4;--cr:4deg;--crk:.075}
[data-art=intoyou]{--cwf:1.1;--cxf:.3;--cyf:.95;--cr:-3deg;--crk:.045}
[data-art=rotless]{--cwf:.82;--cxf:.65;--cyf:.7;--cr:4deg;--crk:.05}
[data-art=venusly]{--cwf:1.1;--cxf:.25;--cyf:1;--cr:-3deg;--crk:.045}

/* PoCats leads: its stage is the right half, the pal behind it on the right, Biscuit's card on the left, Pip in front */
.feature .art-stage{grid-column:2;grid-row:2;align-self:stretch;margin:0 0 -34px;--fw:46cqw;--fl:calc(50% - var(--fw)/2 - 6cqw);--bw:38cqw;--bl:calc(50% - var(--bw)/2 + 31cqw);--bt:6cqw;--br:7deg;--pcw:32cqw;--pcl:-2cqw;--pcb:-4px}
.feature [data-art=pocats]{--cwf:.44;--cxf:-.5;--cyf:.2;--cr:-8deg}

/* the app pages stand the same stage in their art panel */
.app-visual{display:block;padding:0}
.app-visual .art-stage{position:absolute;inset:64px 0 0;margin:0;--fw:48cqw;--fl:calc(50% - var(--fw)/2 + 7cqw);--bw:40cqw;--bl:calc(50% - var(--bw)/2 - 24cqw);--bt:9cqw;--pcw:34cqw;--pcl:2cqw;--pcb:-2px}

/* the hero phone holds five screens and shows one */
.sky .sky-phone{position:absolute}
.sky-phone .glass{background:#0b0d0b}
.sky-shot{transition:opacity .5s ease .16s,scale .9s var(--ease-out) .16s,filter .5s ease .16s}
.sky-shot[data-off]{opacity:0;scale:1.04;filter:blur(2px);transition-duration:.28s;transition-delay:0s}

/* cards: the panel opens, the back phone slides out from behind, the front one rises, the piece pops out */
.reveal-ready [data-reveal=card] .art-stage .front{translate:0 42%;transition:translate 1.3s var(--ease-out) calc(var(--d,0)*.12s + .3s),transform .6s var(--ease-out)}
.reveal-ready [data-reveal=card] .art-stage .back{opacity:0;translate:14cqw 8cqw;transition:opacity .8s ease calc(var(--d,0)*.12s + .55s),translate 1.2s var(--ease-out) calc(var(--d,0)*.12s + .55s),transform .6s var(--ease-out)}
.reveal-ready [data-reveal=card] .art-stage .chip{opacity:0;scale:.55;transition:opacity .35s ease calc(var(--d,0)*.12s + .95s),scale .8s var(--ease-pop) calc(var(--d,0)*.12s + .95s),transform .6s var(--ease-out)}
.reveal-ready [data-reveal=card] .art-stage .project-character{opacity:0;scale:.4;transform-origin:50% 100%;transition:opacity .4s ease 1.15s,scale .8s var(--ease-pop) 1.15s,translate .6s var(--ease-pop),transform .6s var(--ease-out)}
.reveal-ready [data-reveal=card].in .art-stage :is(.front,.back){opacity:1;translate:0 0}
.reveal-ready [data-reveal=card].in .art-stage :is(.chip,.project-character){opacity:1;scale:1}
@media (prefers-reduced-motion:no-preference){
 .app-visual .front{animation:phone-in 1.2s var(--ease-out) .15s backwards}
 .app-visual .back{animation:slide-out 1.2s var(--ease-out) .45s backwards}
 .app-visual .chip,.app-visual .project-character{animation:pop-in .8s var(--ease-pop) .85s backwards}
}
@keyframes slide-out{from{opacity:0;translate:14cqw 8cqw}}
@keyframes pop-in{from{opacity:0;scale:.55}}

@media(max-width:1100px){
 .project-art{height:560px}
 .art-stage{--fw:44cqw;--fl:calc(50% - var(--fw)/2 + 8cqw);--bw:36cqw;--bl:calc(50% - var(--bw)/2 - 24cqw)}
 .feature .art-stage{--fw:48cqw;--bw:40cqw}
}
@media(max-width:800px){
 .project-art{height:520px}
 .art-stage{margin-bottom:-23px;--fw:50cqw;--fl:calc(50% - var(--fw)/2 + 9cqw);--bw:40cqw;--bl:calc(50% - var(--bw)/2 - 25cqw)}
 .feature .project-art{display:flex;height:520px}
 .feature .art-stage{margin:22px 0 -23px;--fw:50cqw;--fl:calc(50% - var(--fw)/2 + 9cqw);--bw:40cqw;--bl:calc(50% - var(--bw)/2 - 25cqw);--bt:8cqw;--br:-7deg;--pcw:38cqw;--pcl:-3cqw;--pcb:-4px}
 .feature [data-art=pocats]{--cwf:.5;--cxf:.8;--cyf:.6;--cr:6deg}
}
@media(max-width:600px){
 .project-art{height:500px}
 .art-stage{margin-bottom:-25px;--fw:56cqw;--fl:calc(50% - var(--fw)/2 + 9cqw);--bw:46cqw;--bl:calc(50% - var(--bw)/2 - 27cqw)}
 .feature .project-art{height:500px}
 .feature .art-stage{margin-bottom:-25px;--fw:56cqw;--fl:calc(50% - var(--fw)/2 + 9cqw);--bw:46cqw;--bl:calc(50% - var(--bw)/2 - 27cqw);--pcw:44cqw}
 .app-visual .art-stage{inset:52px 0 0;--fw:58cqw;--fl:calc(50% - var(--fw)/2 + 8cqw);--bw:46cqw;--bl:calc(50% - var(--bw)/2 - 28cqw)}
}
@media(prefers-reduced-motion:reduce){
 .art-stage>*,.sky-shot{transition:none!important;transform:none!important}
}