@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Karla:wght@400;500;600;700;800&family=Fraunces:wght@500;600;700&display=swap');

:root{--ink:#28233b;--paper:#fff7e9;--muted:#777184;--purple:#6e4ee6;--coral:#fa806b;--yellow:#f8dc63;--mint:#b8e5c7;--lavender:#eee9ff;--line:#e0d7e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 'Karla',sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
section[id],main[id]{scroll-margin-top:16px}

.topbar,footer{width:min(1200px,calc(100% - 64px));margin:auto;display:flex;align-items:center;justify-content:space-between}
.topbar{min-height:88px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.13em;line-height:1.15;text-decoration:none}
.brand small{display:block;margin-top:4px;color:var(--muted);font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--yellow);font:700 12px 'IBM Plex Mono',monospace;letter-spacing:-.08em}
.top-link{display:flex;align-items:center;gap:10px;color:var(--ink);font:600 11px 'IBM Plex Mono',monospace;text-decoration:none}
.top-link b{width:30px;height:30px;display:grid;place-items:center;background:var(--coral)}
.top-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.top-link:hover{color:var(--purple)}
.skip-link{position:absolute;z-index:1000;top:12px;left:12px;padding:10px 14px;background:var(--ink);color:#fff;text-decoration:none;transform:translateY(calc(-100% - 18px))}
.skip-link:focus{transform:translateY(0)}

/* The project index sits around the centered introduction. */
.hero{position:relative;isolation:isolate;min-height:680px;padding:54px 24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(90deg,var(--lavender) 0 50%,var(--mint) 50% 100%)}
.playground{position:absolute;z-index:0;inset:0;pointer-events:none}
.playground-label{position:absolute;top:23px;left:max(24px,calc((100% - 1200px)/2));color:#4d5e51;font:9px 'IBM Plex Mono',monospace;letter-spacing:.1em}
.hero-project{position:absolute;top:50%;width:210px;min-height:205px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:6px 7px 0 #28233b30;text-decoration:none;pointer-events:auto;transition:transform .2s,box-shadow .2s}
.hero-project:hover{box-shadow:9px 10px 0 #28233b30}
.hero-project-number{font:10px 'IBM Plex Mono',monospace;color:var(--purple)}
.hero-project>svg{width:80px;height:72px;margin:auto;fill:none;stroke:var(--purple);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-project>span:last-child{font:700 9px 'IBM Plex Mono',monospace;letter-spacing:.06em}
.hero-website{left:max(24px,calc((100% - 1200px)/2));transform:translateY(-50%) rotate(-3deg)}
.hero-website:hover{transform:translateY(calc(-50% - 4px)) rotate(-1deg)}
.hero-game{right:max(24px,calc((100% - 1200px)/2));background:#302746;color:#fff7e9;transform:translateY(-50%) rotate(3deg)}
.hero-game>svg{stroke:var(--yellow)}
.hero-game .hero-project-number{color:var(--coral)}
.hero-game:hover{transform:translateY(calc(-50% - 4px)) rotate(1deg)}
.hero-copy{position:relative;z-index:2;width:min(100%,560px);padding:36px 42px 34px;border:1px solid #fff;border-radius:2px;background:var(--paper);box-shadow:10px 11px 0 #28233b35;text-align:center}
.eyebrow{margin:0 0 13px;color:var(--muted);font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.hero h1{margin:0;color:var(--ink);font:700 clamp(48px,6vw,66px)/.95 'Fraunces',sans-serif;letter-spacing:-.075em}
.hero h1 em{color:var(--purple);font-style:normal}
.hero .lede{max-width:430px;margin:17px auto 20px;color:#5e586b;font-size:14px;line-height:1.8}
.hero .lede i{font-style:normal;font-weight:700;color:var(--ink)}
.button{display:inline-flex;align-items:center;gap:24px;padding:12px 15px;background:var(--purple);color:#fff;font-size:11px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s}
.button:hover{background:var(--ink);transform:translateY(-2px)}
.button svg{width:17px;height:17px;fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.intro{padding:54px max(24px,calc((100% - 900px)/2));background:var(--coral);color:var(--ink)}
.intro .eyebrow{color:#5e3d5b}
.intro h2{max-width:820px;margin:0;font:600 clamp(28px,4vw,43px)/1.2 'Fraunces',sans-serif;letter-spacing:-.04em}

.things{width:100%;margin:0;padding:68px max(24px,calc((100% - 1080px)/2)) 76px;display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--lavender)}
.section-heading{grid-column:1/-1;margin-bottom:4px;display:flex;align-items:end;justify-content:space-between;gap:25px}
.section-heading .eyebrow{color:var(--purple)}
.section-heading h2{margin:0;font:700 clamp(32px,4.5vw,48px)/1 'Fraunces',sans-serif;letter-spacing:-.06em}
.section-heading>p{max-width:260px;margin:0 0 2px;color:#5e586b;font-size:11px}
.product-card{min-width:0;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);box-shadow:4px 5px 0 #28233b20;text-decoration:none;transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-4px);box-shadow:7px 8px 0 #28233b24}
.product-art{position:relative;min-height:250px;display:grid;place-items:center;overflow:hidden;background:#c9bafa}
.product-sticker{position:absolute;z-index:2;top:15px;left:15px;padding:7px 9px;background:var(--ink);color:#fff;font:8px 'IBM Plex Mono',monospace;letter-spacing:.05em}
.browser-card{position:relative;z-index:1;width:72%;background:#fffdf8;border:1px solid #d8d0e1;box-shadow:5px 6px 0 #28233b20}
.browser-head{height:27px;padding:0 9px;display:flex;align-items:center;gap:4px;border-bottom:1px solid #e9e3d8}
.browser-head i{width:6px;height:6px;border-radius:50%;background:var(--coral)}
.browser-head i:nth-child(2){background:var(--yellow)}
.browser-head i:nth-child(3){background:var(--mint)}
.browser-head span{margin-left:auto;color:var(--muted);font:6px 'IBM Plex Mono',monospace}
.browser-body{position:relative;min-height:150px;padding:19px;display:flex;align-items:center}
.browser-body>b{font:700 clamp(23px,3vw,34px)/.98 'Fraunces',sans-serif;letter-spacing:-.06em}
.browser-body em{color:var(--purple);font-style:normal}
.browser-icon{position:absolute;right:12%;width:44px;height:44px;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.browser-foot{padding:8px 10px;display:flex;justify-content:space-between;border-top:1px solid #e9e3d8;color:var(--muted);font:7px 'IBM Plex Mono',monospace}
.product-info{min-height:205px;padding:23px;display:flex;flex:1;flex-direction:column;justify-content:space-between}
.product-info .eyebrow{margin-bottom:9px;color:var(--purple);font-size:9px}
.product-info h3{margin:0;font:700 clamp(27px,3vw,36px)/1 'Fraunces',sans-serif;letter-spacing:-.06em}
.product-info>div>p:last-child{max-width:390px;margin:11px 0 18px;color:#5e586b;font-size:11px;line-height:1.75}
.product-cta{padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}
.product-cta>span{color:var(--muted);font:9px 'IBM Plex Mono',monospace}
.product-cta b{font-size:10px}
.product-cta i{display:inline-flex;width:14px;height:14px;margin-left:4px;vertical-align:middle}
.product-cta svg{width:100%;height:100%;fill:none;stroke:var(--purple);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lastlight-art{background:#302746}
.lastlight-art:before{position:absolute;inset:0 0 auto;height:60%;background:#48406b;content:'';clip-path:polygon(0 0,100% 0,100% 65%,70% 100%,42% 53%,20% 100%,0 59%)}
.lastlight-sun{position:absolute;top:24%;right:23%;width:42px;height:42px;border-radius:50%;background:var(--yellow)}
.lastlight-hills{position:absolute;right:0;bottom:0;left:0;width:100%;height:70%;fill:#171526;stroke:#9f92df;stroke-width:2;stroke-linejoin:round}
.night-title{position:relative;z-index:1;margin-left:-28%;color:#fff7e9;font:700 clamp(34px,4vw,48px)/.82 'Fraunces',sans-serif;letter-spacing:-.06em}

.privacy-page{min-height:calc(100svh - 196px);padding:48px max(24px,calc((100% - 1040px)/2));display:grid;place-items:center;background:var(--lavender)}
.privacy-card{width:min(820px,100%);padding:clamp(26px,5vw,58px);background:var(--paper);box-shadow:8px 9px 0 #28233b20}
.privacy-card>.eyebrow{color:var(--purple)}
.privacy-card h1{margin:0;font:700 clamp(42px,7vw,68px)/1 'Fraunces',sans-serif;letter-spacing:-.07em}
.privacy-lede{max-width:650px;margin:18px 0 30px;color:#5e586b;font-size:16px;line-height:1.75}
.privacy-details{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.privacy-details section{padding-top:12px;border-top:2px solid var(--coral)}
.privacy-details h2{margin:0 0 7px;font:600 15px 'Fraunces',sans-serif}
.privacy-details p{margin:0;color:#5e586b;font-size:11px;line-height:1.8}
.privacy-details a{text-decoration:underline;text-underline-offset:2px}
.privacy-back{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding-bottom:5px;border-bottom:1px solid #b8a8ea;color:#5037bd;font-size:11px;font-weight:700;text-decoration:none}
.privacy-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

footer{min-height:94px;gap:20px;flex-wrap:wrap}
footer>span{color:var(--muted);font-size:9px}

@media(max-width:1050px){.hero{min-height:640px}.hero-project{width:150px;min-height:175px}.hero-project>svg{width:65px;height:58px}.hero-copy{width:min(100%,500px)}}
@media(max-width:850px){.topbar,footer{width:calc(100% - 40px)}.topbar{min-height:76px}.brand{gap:9px}.brand-mark{width:36px;height:36px;font-size:10px}.brand small{font-size:7px;letter-spacing:.1em}.top-link{gap:7px;font-size:9px}.top-link b{width:25px;height:25px}.hero{min-height:620px;padding:35px 18px;background:linear-gradient(180deg,var(--lavender) 0 50%,var(--mint) 50% 100%)}.hero-copy{width:min(100%,520px);padding:30px 22px}.hero h1{font-size:clamp(46px,12vw,60px)}.hero .lede{font-size:13px}.hero-project{top:auto;bottom:22px;width:calc(50% - 27px);min-height:120px;padding:10px;transform:none}.hero-project:hover{transform:translateY(-3px)}.hero-website{left:18px}.hero-game{right:18px}.hero-project>svg{width:42px;height:38px}.hero-project>span:last-child{font-size:7px}.playground-label{top:12px;left:18px;font-size:8px}.intro{padding:45px 22px}.intro h2{font-size:clamp(27px,7vw,38px)}.things{padding:52px 20px 58px;grid-template-columns:1fr;gap:15px}.section-heading{display:block}.section-heading>p{margin-top:10px}.product-art{min-height:230px}.product-info{min-height:190px;padding:20px}.product-cta{align-items:flex-start;flex-direction:column;gap:7px}.privacy-page{min-height:auto;padding:32px 20px}.privacy-card{padding:25px 21px}.privacy-details{grid-template-columns:1fr;gap:14px}.privacy-lede{font-size:14px}footer{padding:20px 0;justify-content:flex-start}footer>span{width:100%}}
@media(max-width:380px){.hero{min-height:650px}.hero-copy{padding:25px 17px}.hero-project{width:calc(50% - 23px);min-height:110px}.hero-website{left:15px}.hero-game{right:15px}.hero-project>span:last-child{font-size:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Updated brand system: logo artwork, real workspace photography, and clearer photo attribution. */
.brand-logo{display:block;width:166px;height:auto;max-height:64px;object-fit:contain}
.hero{background:#252337}
.hero-background{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;opacity:.72}
.playground{z-index:1}
.hero-copy{border:0;border-radius:3px 18px 4px 18px;box-shadow:0 18px 52px #16142166}
.hero-project{border:0;box-shadow:0 12px 32px #16142170}
.hero-project:hover{box-shadow:0 16px 36px #16142182}
.brand-mark{display:none}
footer .brand-logo{width:150px}
.home-photo-credit{flex-basis:100%;font-size:9px;color:var(--muted)}
.home-photo-credit a{text-decoration:underline;text-underline-offset:2px}
.privacy-page{background:#292536}
.privacy-card{overflow:hidden;border-radius:3px 18px 4px 18px;box-shadow:0 18px 52px #16142155}
.privacy-photo{display:block;width:100%;height:210px;margin:-1px 0 30px;object-fit:cover;object-position:center 48%}
.website-art{background:#3a3444}
.website-art:before{position:absolute;inset:0;background:#201c28aa;content:''}
.product-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.product-art:not(.lastlight-art){background:#302746 url("https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1200&q=85") center/cover}
.product-art:not(.lastlight-art):after{position:absolute;inset:0;background:#201c2852;content:''}
.browser-card{box-shadow:0 12px 30px #16142170}
@media(max-width:850px){.brand-logo{width:145px;max-height:54px}.hero-background{object-position:52% center}.privacy-photo{height:170px}}

/* Split editorial opening based on the supplied page artboard. */
.hero{min-height:0;padding:58px max(32px,calc((100% - 1160px)/2));display:grid;grid-template-columns:.82fr 1.18fr;gap:68px;place-items:center;background:var(--paper);overflow:visible}
.hero-background,.hero .playground{display:none}
.hero-copy{width:100%;max-width:500px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left}
.hero h1{font-size:clamp(60px,7.4vw,92px);line-height:.91;letter-spacing:-.07em}
.hero .lede{margin:20px 0 24px}
.home-hero-photo{position:relative;width:100%;height:500px;margin:0;overflow:hidden;background:#d6cfc3}
.home-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.home-hero-photo:after{position:absolute;inset:58% 0 0;background:linear-gradient(transparent,#151522a6);content:''}
.home-hero-photo figcaption{position:absolute;z-index:1;left:20px;bottom:17px;color:#fff;font:10px 'IBM Plex Mono',monospace;letter-spacing:.04em}
.top-link{padding:9px 13px;background:var(--coral);color:var(--ink)}
.top-link b{background:none}
.top-link:hover{color:var(--ink);background:#f0673a}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:30px;padding:42px 24px 48px}.hero-copy{max-width:650px}.hero h1{font-size:clamp(56px,11vw,78px)}.home-hero-photo{height:420px}}
@media(max-width:500px){.hero{padding:32px 20px 40px}.home-hero-photo{height:320px}.home-hero-photo figcaption{font-size:8px;left:13px;bottom:12px}}