.detail-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; font-size: 12px; }
.detail-header .brand { color: var(--paper); }.back-link { color: var(--acid); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.back-link span, .detail-actions span, .detail-next span { display: inline-block; margin-left: 8px; font-size: 16px; transition: transform .25s ease; }.back-link:hover span, .detail-actions a:hover span, .detail-next a:hover span { transform: translate(3px, -3px); }
.detail-hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 17vh 10vw 12vh; overflow: hidden; background: var(--ink); }.detail-hero:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 75% 48%, rgba(213,255,79,.12), transparent 31%), linear-gradient(115deg, transparent 0 48%, rgba(255,118,92,.06) 75%, transparent); }.detail-hero-copy { position: relative; z-index: 2; width: min(720px, 72vw); }.detail-kicker, .detail-section-label { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .12em; }.detail-kicker { margin: 0 0 42px; }.detail-kicker span, .detail-section-label span { color: var(--paper); margin: 0 8px; }.detail-hero .eyebrow { margin-bottom: 20px; }.detail-hero h1 { max-width: 900px; margin: 0; font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: .92; letter-spacing: -.06em; overflow-wrap: anywhere; }.detail-lede { max-width: 500px; margin: 40px 0 32px; color: var(--prose); font-size: 15px; line-height: 1.75; }.detail-actions { display: flex; align-items: center; gap: 30px; }.detail-orbit { position: absolute; z-index: 1; width: min(44vw, 620px); aspect-ratio: 1; right: 3vw; top: 52%; transform: translateY(-50%); }.detail-orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Same as the homepage: the project hero title and labels must not highlight blue when the user drags the orbiting planet behind them. Body copy and links stay selectable. */
.detail-header, .detail-hero h1, .detail-kicker, .detail-section-label, .detail-story h2, .detail-facts dt, .detail-next a { user-select: none; }
.detail-facts { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8vw; max-width: 1050px; margin: 0 auto; padding: 42px 5vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.detail-facts dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 0; }.detail-facts dl div { min-width: 0; }.detail-facts dt { margin-bottom: 9px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.detail-facts dd { margin: 0; color: var(--paper); font-size: 12px; line-height: 1.5; }.detail-tags { display: flex; align-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }.detail-tags li { padding: 8px 11px; border: 1px solid rgba(240,238,232,.18); color: var(--muted); font: 10px var(--mono); }
.detail-story { max-width: 1050px; margin: 0 auto; padding: 16vh 5vw 14vh; }.detail-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-top: 12vh; }.detail-story h2 { margin: 0; font-size: clamp(2.2rem, 3.8vw, 3.8rem); line-height: .95; letter-spacing: -.05em; }.detail-story h2 em { color: var(--acid); font-family: var(--serif); font-weight: 400; }.detail-prose { max-width: 450px; padding-top: 12px; }.detail-prose p { margin: 0 0 25px; color: var(--prose); font-size: 14px; line-height: 1.85; }
.detail-tech { max-width: 1050px; margin: 0 auto; padding: 16vh 5vw 14vh; border-top: 1px solid var(--line); }.detail-tech .eyebrow { margin: 9vh 0 30px; }.detail-tech .detail-prose { max-width: 680px; padding-top: 0; }.detail-tech-list { list-style: none; margin: 8vh 0 0; padding: 0; max-width: 1050px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.detail-tech-list li { padding: 18px 20px; background: #101217; border: 1px solid rgba(240,238,232,.1); color: var(--prose); font-size: 13px; line-height: 1.7; }.detail-tech-list li::before { content: '— '; color: var(--acid); }
.detail-gallery { padding: 0 5vw 16vh; }.detail-gallery > .detail-section-label { max-width: 1050px; margin: 0 auto 28px; }.detail-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1050px; margin: auto; }.detail-media { margin: 0; }.detail-media-frame { position: relative; overflow: hidden; aspect-ratio: 1.35; background: #11151c; border: 1px solid rgba(240,238,232,.1); }.detail-media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }.detail-media-image { width: 100%; height: 100%; }.media-fallback { position: absolute; inset: 0; }.detail-media-trigger { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent; cursor: zoom-in; }.detail-media-trigger:focus-visible { outline: 2px solid var(--acid); outline-offset: -5px; }.detail-media-frame:after { content: '↗'; position: absolute; z-index: 3; right: 16px; bottom: 13px; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(240,238,232,.6); border-radius: 50%; color: var(--paper); background: rgba(8,10,14,.55); font-size: 18px; pointer-events: none; opacity: .75; transition: background .25s ease, color .25s ease, transform .25s ease; }.detail-media-frame:hover:after, .detail-media-trigger:focus-visible ~ .media-number + *:after { background: var(--acid); color: var(--ink); transform: translate(2px, -2px); }.detail-media figcaption { margin-top: 13px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }.media-number { position: absolute; top: 15px; right: 17px; z-index: 2; color: rgba(240,238,232,.6); font: 10px var(--mono); }.detail-related { max-width: 1050px; margin: 8vh auto 0; padding-top: 22px; border-top: 1px solid var(--line); }.detail-related .detail-section-label { margin-bottom: 18px; }.detail-related-link { display: inline-flex; align-items: baseline; gap: 13px; margin: 0 28px 12px 0; color: var(--paper); font-size: 14px; }.detail-related-link span { color: var(--coral); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.detail-related-link b { color: var(--acid); font-size: 16px; font-weight: 400; }.detail-related-link:hover { color: var(--acid); }.media-lightbox-open { overflow: hidden; }.media-lightbox[hidden] { display: none; }.media-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(4,6,9,.94); backdrop-filter: blur(12px); }.media-lightbox-panel { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: minmax(0, 1fr) auto; gap: 0 16px; width: min(1180px, 94vw); height: min(90vh, 900px); }.media-lightbox-stage { position: relative; grid-column: 2; grid-row: 1; display: grid; place-items: center; min-width: 0; min-height: 0; border: 1px solid rgba(240,238,232,.2); background: #0b0e13; }.media-lightbox-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }.media-lightbox-art { position: absolute; inset: 0; }.media-lightbox-close { position: absolute; z-index: 4; top: -40px; right: 0; width: 34px; height: 34px; border: 1px solid rgba(240,238,232,.45); border-radius: 50%; color: var(--paper); background: transparent; font-size: 24px; line-height: 1; cursor: pointer; }.media-lightbox-close:hover, .media-lightbox-close:focus-visible { border-color: var(--acid); color: var(--acid); }.media-lightbox-nav { align-self: center; width: 48px; height: 48px; border: 1px solid rgba(240,238,232,.38); border-radius: 50%; color: var(--paper); background: transparent; font-size: 23px; cursor: pointer; }.media-lightbox-nav:hover, .media-lightbox-nav:focus-visible { border-color: var(--acid); color: var(--acid); background: rgba(213,255,79,.08); }.media-lightbox-prev { grid-column: 1; grid-row: 1; }.media-lightbox-next { grid-column: 3; grid-row: 1; }.media-lightbox-meta { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.media-lightbox-counter { color: var(--acid); }.detail-next { display: grid; place-items: center; padding: 10vh 5vw 15vh; text-align: center; background: #17191e; }.detail-next a { color: var(--paper); font-size: clamp(1.5rem, 2.6vw, 2.5rem); letter-spacing: -.05em; }.detail-next a span { color: var(--coral); }
/* Light theme: surfaces that were hardcoded dark flip to light. */
html[data-theme="light"] .detail-tags li { border-color: rgba(22, 24, 29, .18); }
html[data-theme="light"] .detail-tech-list li { background: #f4f3ee; border-color: rgba(22, 24, 29, .16); }
html[data-theme="light"] .detail-next { background: #dfe0e4; }
.art-impasse { background: linear-gradient(135deg, #122c2b, #172424); }.art-impasse:before, .art-impasse:after { content: ''; position: absolute; inset: 17%; background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(145,186,255,.4) 29px 30px), repeating-linear-gradient(90deg, transparent 0 28px, rgba(213,255,79,.45) 29px 30px); transform: skewY(-20deg) rotate(10deg); }.art-impasse:after { inset: 39%; border: 2px solid var(--coral); background: var(--acid); box-shadow: 0 0 30px rgba(213,255,79,.7); transform: rotate(45deg); }
.art-chaos { background: radial-gradient(circle at 24% 32%, var(--acid) 0 3%, transparent 3.5%), radial-gradient(circle at 71% 59%, var(--coral) 0 5%, transparent 5.5%), radial-gradient(circle at 53% 26%, var(--blue) 0 2%, transparent 2.5%), #131923; }.art-chaos:before { content: ''; position: absolute; inset: 15%; border: 1px dashed rgba(240,238,232,.45); border-radius: 50%; transform: rotate(-30deg) scaleY(.55); box-shadow: 0 0 0 48px rgba(145,186,255,.08), 0 0 0 95px rgba(255,118,92,.06); }.art-chaos:after { content: ''; position: absolute; width: 17%; aspect-ratio: 1; top: 42%; left: 43%; border-radius: 50%; background: var(--paper); box-shadow: 0 0 35px var(--paper); }
.art-planet { background: radial-gradient(circle at 38% 38%, #d9e6ff 0 2%, #5778c4 3% 8%, transparent 8.5%), radial-gradient(circle at 50% 50%, #5e7bca 0 22%, #182b58 23% 41%, transparent 42%), #090c14; }.art-planet:before { content: ''; position: absolute; width: 70%; height: 24%; left: 15%; top: 38%; border: 3px solid rgba(213,255,79,.8); border-radius: 50%; transform: rotate(-18deg); box-shadow: 0 0 20px rgba(213,255,79,.45); }.art-planet:after { content: ''; position: absolute; inset: 10%; background: repeating-radial-gradient(circle at 30% 40%, transparent 0 12px, rgba(145,186,255,.15) 13px 15px); mix-blend-mode: screen; }
.art-gravity { background: radial-gradient(circle at 50% 50%, var(--acid) 0 3%, transparent 3.6%), #111827; }.art-gravity:before, .art-gravity:after { content: ''; position: absolute; inset: 13%; border: 1px dashed rgba(145,186,255,.5); border-radius: 50%; transform: rotate(-20deg) scaleY(.5); }.art-gravity:after { inset: 27%; border-color: rgba(255,118,92,.65); transform: rotate(36deg) scaleY(.4); }
.art-tools { background: linear-gradient(135deg, #142d2b, #263f3b); }.art-tools:before { content: ''; position: absolute; inset: 17%; background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(213,255,79,.65) 29px 31px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(145,186,255,.5) 29px 31px); transform: rotate(12deg); }.art-tools:after { content: ''; position: absolute; width: 25%; aspect-ratio: 1; right: 14%; bottom: 16%; border: 2px solid var(--coral); transform: rotate(45deg); }
.art-menu { background: linear-gradient(145deg, #20283a, #11151d); }.art-menu:before { content: ''; position: absolute; inset: 18%; border: 1px solid rgba(240,238,232,.6); box-shadow: 14px 14px 0 -1px rgba(145,186,255,.55), 28px 28px 0 -1px rgba(213,255,79,.55); }.art-menu:after { content: ''; position: absolute; width: 42%; height: 8px; top: 38%; left: 29%; background: var(--coral); box-shadow: 0 20px 0 rgba(240,238,232,.6), 0 40px 0 rgba(145,186,255,.7); }
.art-portal { background: radial-gradient(ellipse at center, transparent 0 18%, rgba(213,255,79,.75) 18.5% 19.5%, transparent 20% 31%, rgba(145,186,255,.75) 31.5% 32.5%, transparent 33% 45%, rgba(255,118,92,.5) 45.5% 46.5%, transparent 47%), #111827; }.art-proxy { background: conic-gradient(from 25deg at 50% 50%, #202837, #101419, #38465a, #101419, #202837); }.art-proxy:before { content: ''; position: absolute; inset: 18%; border: 1px solid rgba(213,255,79,.75); transform: rotate(28deg); box-shadow: 35px -20px 0 -1px rgba(145,186,255,.7), -35px 20px 0 -1px rgba(255,118,92,.55); }.art-meeting { background: radial-gradient(circle at 25% 34%, var(--acid) 0 3%, transparent 3.5%), radial-gradient(circle at 72% 67%, var(--coral) 0 3%, transparent 3.5%), #182033; }.art-meeting:before { content: ''; position: absolute; inset: 20% 15%; border: 1px solid rgba(145,186,255,.6); transform: skewY(-12deg); }.art-meeting:after { content: ''; position: absolute; width: 60%; height: 1px; top: 50%; left: 20%; background: rgba(240,238,232,.6); transform: rotate(22deg); box-shadow: 0 -38px 0 rgba(240,238,232,.35), 0 38px 0 rgba(240,238,232,.35); }
.art-archive { background: repeating-linear-gradient(135deg, #2c2638 0 14px, #171421 14px 28px); }.art-archive:before { content: ''; position: absolute; inset: 20%; border: 1px solid var(--acid); transform: rotate(45deg); box-shadow: 18px 18px 0 -1px var(--coral), 36px 36px 0 -1px var(--blue); }.art-tunnel { background: radial-gradient(ellipse at center, var(--coral) 0 2%, #151a25 2.5% 9%, var(--blue) 9.5% 10%, #151a25 10.5% 18%, var(--acid) 18.5% 19%, #151a25 19.5% 30%, var(--blue) 30.5% 31%, #10141b 31.5%); }.art-instagram { background: linear-gradient(135deg, #39223d, #17213a 48%, #bf5b70); }.art-instagram:before { content: ''; position: absolute; width: 25%; aspect-ratio: 1; top: 35%; left: 37%; border: 3px solid var(--paper); border-radius: 8px; box-shadow: 0 0 0 18px rgba(213,255,79,.28); }.art-youtube { background: linear-gradient(145deg, #3a171f, #15171e); }.art-youtube:before { content: ''; position: absolute; top: 35%; left: 38%; border-top: 34px solid transparent; border-bottom: 34px solid transparent; border-left: 52px solid var(--coral); filter: drop-shadow(0 0 18px rgba(255,118,92,.5)); }