:root{--sans:"Plus Jakarta Sans",Arial,sans-serif;--content:1240px;--gutter:24px;--radius:28px;--ink:#f4f1ea;--muted:rgba(255,255,255,.82);--line:rgba(255,255,255,.14);--glass:rgba(255,255,255,.06);font-family:var(--sans);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:110px}body{margin:0;background:var(--p-bg-deep);color:var(--ink);line-height:1.65;isolation:isolate}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 15%,color-mix(in srgb,var(--p-accent) 6%,transparent),transparent 60%),radial-gradient(ellipse at 95% 48%,color-mix(in srgb,var(--p-accent) 5%,transparent),transparent 60%),radial-gradient(ellipse at 35% 95%,color-mix(in srgb,var(--p-accent) 4%,transparent),transparent 60%)}
a{color:inherit;text-decoration:none;overflow-wrap:anywhere}button{font:inherit;cursor:pointer;color:inherit}a,button{touch-action:manipulation;min-height:44px}img{display:block;width:100%;height:auto;object-fit:contain}figure{margin:0}h1,h2,h3,.next-title{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;text-wrap:balance;line-height:1.12}h2{font-size:clamp(2.2rem,5vw,4.6rem);margin:0}h3{font-size:clamp(1.25rem,2vw,1.8rem);margin:0 0 10px}em.script{font-family:"Pinyon Script",cursive;font-style:normal;font-weight:400;font-size:1.22em;letter-spacing:0;color:color-mix(in srgb,var(--p-accent) 80%,white);white-space:nowrap}p{max-width:72ch}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #f4f1ea;outline-offset:4px}
.content-wrap{width:min(var(--content),calc(100% - var(--gutter)*2));margin-inline:auto}.section-pad{padding-block:clamp(48px,7vw,96px)}
/* A bounded tint and one surface layer keep translucent text backgrounds predictable. */
.topbar,.project-hero,.hero-facts,.overview-copy,.timeline-item,.feature-card,.feature-stage,.step-list,.gallery-item,.stack-detail,.project-links,.next-band,.contact-band,.stack-pill,.pill-button{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.18)}
.topbar{position:sticky;top:12px;z-index:10;width:min(var(--content),calc(100% - var(--gutter)*2));margin:12px auto 24px;min-height:66px;padding:10px 20px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(10,12,16,.8)}.wordmark{font:800 25px Archivo,Arial,sans-serif;letter-spacing:-.03em;display:inline-flex;align-items:center}.wordmark span{color:#c8e86a}.topbar nav{display:flex;align-items:center;gap:20px;font-size:.85rem;font-weight:600}.topbar nav>a{display:inline-flex;align-items:center}.pill-button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;border-radius:999px;padding:0 9px 0 19px;min-height:48px;font-size:.82rem;font-weight:700;line-height:1.4;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.arrow-badge{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--p-bg-deep);color:var(--ink);font-size:16px}.pill-button:hover{background:rgba(255,255,255,.1)}.nav-contact,.hero-links .pill-button{background:var(--p-accent);color:var(--p-bg-deep)}.nav-contact:hover,.hero-links .pill-button:hover{background:var(--p-accent);text-decoration:underline}
.project-hero{width:min(1440px,calc(100% - var(--gutter)*2));margin:auto;padding:clamp(24px,3vw,44px);display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);align-items:center;gap:clamp(24px,4vw,64px)}.project-hero.no-media{grid-template-columns:1fr}.no-media .hero-copy{max-width:960px}.no-media h1{max-width:none;font-size:clamp(3rem,8vw,7rem)}.hero-copy{min-width:0}.kind-label{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.74rem;font-weight:700}.hero-meta{margin:18px 0 24px;color:var(--muted);font-size:.75rem;font-weight:600}.project-hero h1{font-size:clamp(2.8rem,5.8vw,6.4rem);margin:0 0 22px;max-width:13ch;overflow-wrap:anywhere}.tagline{font-size:clamp(1rem,1.45vw,1.24rem);line-height:1.65;margin:0 0 24px;color:var(--muted)}.stack-list{display:flex;flex-wrap:wrap;gap:8px}.stack-pill{border-radius:999px;padding:8px 12px;font-size:.75rem;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.hero-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.hero-links:empty{display:none}.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;padding:18px;border-radius:24px}.fact{min-width:0;display:flex;flex-direction:column;gap:5px}.fact span{font-size:.7rem;color:var(--muted)}.fact strong{font-size:.8rem;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
/* Thin dark bezels; the browser bar occupies 20px, separate from the 9px padding. */
.hero-media,.media-frame{min-width:0;padding:9px;background:rgba(10,12,16,.55);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero-media img,.media-frame img{border-radius:16px;border:0;max-height:68vh}.hero-media.landscape::before,.feature-slide.landscape .media-frame::before,.gallery-item.landscape .media-frame::before,.lightbox .media-frame[data-orientation="landscape"]::before{content:"";display:block;flex:none;align-self:stretch;height:20px;margin-bottom:6px;background:radial-gradient(circle at 6px 8px,#817876 0 3px,transparent 3.5px),radial-gradient(circle at 20px 8px,#817f71 0 3px,transparent 3.5px),radial-gradient(circle at 34px 8px,#718477 0 3px,transparent 3.5px);background-repeat:no-repeat}.hero-media.portrait img{width:auto;max-width:100%;max-height:68vh}figcaption{font-size:.75rem;font-weight:500;line-height:1.5;color:var(--muted);padding-top:10px;align-self:stretch}.hero-media figcaption{color:var(--ink)}
.overview-grid,.stack-grid,.links-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.35fr);gap:clamp(24px,6vw,80px);align-items:start}.section-intro{margin-bottom:36px}.overview-copy,.stack-detail,.project-links{padding:clamp(24px,3vw,38px)}.overview-copy p{font-size:clamp(1.1rem,1.7vw,1.5rem);margin:0;color:var(--muted)}.timeline{list-style:none;padding:0;margin:0;display:grid;gap:14px}.timeline-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;padding:26px}.timeline-number,.feature-index{font-size:1rem;font-weight:800;color:var(--ink)}.timeline-item p,.feature-card p{font-size:.94rem;color:var(--muted);margin:0}.feature-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feature-card{padding:26px}.feature-index{display:inline-block;margin-bottom:22px}.feature-card h3{font-size:1.28rem}.feature-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.65fr);gap:clamp(24px,4vw,60px);align-items:center}.feature-stage{min-width:0;padding:0 0 40px;position:relative}.feature-slide{display:none;width:100%;flex-direction:column;align-items:center}.feature-slide[aria-hidden="false"]{display:flex}.feature-slide.portrait .media-frame{width:min(100%,360px)}.feature-slide figcaption{padding:12px 8px 0}.slide-counter{position:absolute;right:20px;bottom:8px;margin:0;font-size:.85rem;color:var(--muted)}.feature-copy{min-width:0}.stage-controls{display:flex;gap:10px;margin-bottom:20px}.icon-button{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:rgba(10,12,16,.55);font-size:1.25rem}.icon-button:hover{background:var(--p-bg-deep)}.step-list{display:flex;flex-direction:column;max-height:320px;overflow:auto;padding:8px;border-radius:24px}.step-button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:16px;padding:12px;color:var(--muted);font-size:.78rem;line-height:1.5}.step-button span{font-weight:800}.step-button[aria-pressed="true"]{border-color:var(--line);color:var(--ink);background:rgba(10,12,16,.55)}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.gallery-item{min-width:0;padding:0}.gallery-item figcaption{padding:12px 8px 6px}.gallery-trigger{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;border-radius:24px;cursor:zoom-in}.gallery-item img{max-height:410px}.gallery-item.portrait img{width:auto;max-width:100%}.gallery-open{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#0a0c10;color:var(--ink)}.project-links{display:flex;flex-wrap:wrap;gap:10px}.next-band{position:relative;min-height:230px;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-right:100px}.next-kicker,.contact-kicker{font-size:.8rem;margin:0 0 12px;color:var(--muted)}.next-title{font-size:clamp(1.8rem,4.5vw,4rem);overflow-wrap:anywhere}.next-band>.arrow-badge{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:48px;height:48px;background:var(--p-accent);color:var(--p-bg-deep)}.all-projects{display:inline-flex;align-items:center;margin-top:16px;font-size:.85rem;color:var(--muted)}.contact-band{padding:clamp(32px,6vw,80px);text-align:center}.contact-band p{margin-inline:auto}.email-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:24px 0;font-size:clamp(.9rem,2vw,1.35rem);font-weight:600;overflow-wrap:anywhere;max-width:100%}.email-link span{flex:none}.contact-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.site-footer{width:min(var(--content),calc(100% - var(--gutter)*2));margin:auto;min-height:90px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.78rem}.site-footer a{display:inline-flex;align-items:center}
.lightbox{border:1px solid var(--line);padding:64px 14px 14px;width:min(1280px,calc(100% - 24px));max-width:none;max-height:calc(100svh - 24px);background:#0a0c10;color:var(--ink);border-radius:24px;overflow:auto}.lightbox::backdrop{background:rgba(8,12,9,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.lightbox-inner{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px}.lightbox-inner figure{min-width:0;grid-column:2;grid-row:1}.lightbox img{width:100%;height:auto;max-height:65svh;object-fit:contain}.lightbox figcaption{color:var(--ink);text-align:center}.lightbox-prev,.lightbox-next,.lightbox-close{border:1px solid var(--line);border-radius:50%;width:44px;height:44px;background:#151921;font-size:1.25rem}.lightbox-prev{grid-column:1;grid-row:1}.lightbox-next{grid-column:3;grid-row:1}.lightbox-close{position:absolute;right:0;top:-54px}.lightbox-counter{grid-column:2;text-align:center;font-size:.75rem;margin:6px 0}
@media(max-width:1000px){.feature-cards,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-hero{gap:24px}.project-hero h1{font-size:clamp(2.8rem,5.8vw,5rem)}.hero-facts{grid-template-columns:1fr}.feature-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
@media(max-width:720px){:root{--gutter:16px;--radius:24px}.topbar{padding:8px 14px;gap:12px}.topbar nav{gap:12px;font-size:.75rem}.topbar .pill-button{padding-left:12px;gap:8px}.project-hero{grid-template-columns:1fr;padding:24px}.project-hero h1{font-size:clamp(2.5rem,11vw,5rem)}.hero-facts{grid-template-columns:1fr}.overview-grid,.stack-grid,.links-grid,.feature-layout{grid-template-columns:1fr;gap:24px}.section-intro{margin-bottom:24px}.feature-cards{grid-template-columns:1fr}.timeline-item{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:22px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery-item{padding:0}.next-band{padding:28px 80px 28px 24px;min-height:190px}.next-band>.arrow-badge{right:16px}.contact-band{padding:32px 18px}.email-link{display:block;font-size:1rem}.lightbox-inner{grid-template-columns:1fr 1fr;gap:10px}.lightbox-inner figure{grid-column:1/-1;grid-row:1}.lightbox-prev{grid-column:1;grid-row:2}.lightbox-next{grid-column:2;grid-row:2;justify-self:end}.lightbox-counter{grid-column:1/-1;grid-row:3}.lightbox img{max-height:55svh}}
@media(max-width:390px){.gallery-grid{grid-template-columns:1fr}.topbar nav{gap:8px}.topbar .pill-button{padding-left:10px}.topbar .arrow-badge{display:none}}
@supports not (backdrop-filter:blur(1px)){:root{--glass:#20242b}.topbar{background:#10141b}}
@media(prefers-reduced-transparency:reduce){:root{--glass:#20242b}.topbar{background:#10141b}body::before{display:none}.topbar,.project-hero,.hero-facts,.overview-copy,.timeline-item,.feature-card,.feature-stage,.step-list,.gallery-item,.stack-detail,.project-links,.next-band,.contact-band,.stack-pill,.pill-button{backdrop-filter:none;-webkit-backdrop-filter:none}.hero-media,.media-frame{background:#10141b}.lightbox::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.project-hero.no-media h1{max-width:none;font-size:clamp(3rem,8vw,7rem)}.topbar nav>a{min-width:44px}