:root {
  color-scheme: dark;
  --bg: #0d0a0f;
  --surface: #171119;
  --surface-raised: #211828;
  --ink: #eee8dc;
  --muted: #a9a0a7;
  --gold: #b79a61;
  --gold-bright: #d4bd84;
  --accent: #735191;
  --accent-rgb: 115, 81, 145;
  --line: rgba(199, 174, 126, 0.24);
  --rail-width: 232px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --transition: 420ms cubic-bezier(.22, .72, .25, 1);
}

html[data-project="bi"] { --accent: #8e2729; --accent-rgb: 142, 39, 41; --gold: #aa8553; }
html[data-project="ic"] { --accent: #9883a7; --accent-rgb: 152, 131, 167; --gold: #cab67f; --ink: #f3eee5; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 16px; background: var(--ink); color: #111; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.side-rail { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--rail-width); padding: 34px 28px 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: rgba(11, 9, 12, .93); backdrop-filter: blur(12px); }
.brand, .mobile-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-mark { width: 45px; height: 45px; display: inline-grid; place-items: center; border: 1px solid var(--gold); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(183,154,97,.42); color: var(--gold-bright); font: 600 14px/1 var(--serif); letter-spacing: .12em; text-indent: 1px; }
.brand .brand-mark, .mobile-brand .brand-mark, .site-footer .brand-mark { position: relative; }
.brand-name { font: 600 24px/.82 var(--serif); letter-spacing: .02em; }
.series-label { margin: 24px 0 0; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.rail-nav { display: grid; gap: 10px; }
.rail-nav a { width: fit-content; color: var(--muted); font-size: 12px; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; transition: color .2s; }
.rail-nav a:hover { color: var(--gold-bright); }
.rail-nav a::before { content: "—"; margin-right: 9px; color: var(--gold); }
.rail-footer { display: grid; gap: 20px; color: #817981; font-size: 11px; }
.language-toggle { display: inline-flex; width: fit-content; align-items: center; gap: 8px; border: 0; padding: 7px 0; background: none; cursor: pointer; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.language-toggle:hover { color: var(--ink); }
.mobile-header { display: none; }

main, .site-footer { margin-left: var(--rail-width); }
.showcase { position: relative; min-height: 100svh; overflow: hidden; padding: 34px clamp(28px, 4vw, 72px) 30px; background: radial-gradient(circle at 70% 42%, rgba(var(--accent-rgb), .27), transparent 36%), linear-gradient(120deg, #100c12 0%, #19111e 55%, #0c090e 100%); transition: background var(--transition); }
.showcase::before { content: ""; position: absolute; inset: 0; opacity: .24; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, transparent, #000 35%, #000); }
.showcase::after { content: ""; position: absolute; width: min(62vw, 850px); aspect-ratio: 1; right: -16%; top: 8%; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 50%; box-shadow: 0 0 0 72px rgba(var(--accent-rgb), .025), 0 0 0 144px rgba(var(--accent-rgb), .018); pointer-events: none; }
.atmosphere i { position: absolute; z-index: 0; width: 2px; height: 54%; top: 20%; background: linear-gradient(transparent, rgba(203,179,128,.32), transparent); transform: rotate(22deg); }
.atmosphere i:nth-child(1) { right: 8%; }
.atmosphere i:nth-child(2) { right: 31%; height: 30%; top: 4%; }
.atmosphere i:nth-child(3) { left: 39%; top: 60%; height: 22%; }
.hero-copy { position: relative; z-index: 2; max-width: 560px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero-copy h1, .content-section h2 { margin: 0; font: 600 clamp(38px, 4vw, 66px)/.95 var(--serif); letter-spacing: -.025em; }
.hero-copy > p:last-child { max-width: 480px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.project-tabs { position: fixed; z-index: 25; left: calc(var(--rail-width) + clamp(28px, 4vw, 72px)); top: 44%; display: grid; gap: 8px; }
.project-tab { position: relative; width: 145px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; border: 0; padding: 9px 0; background: none; cursor: pointer; text-align: left; }
.project-tab::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--transition); }
.project-tab[aria-selected="true"]::after { width: 100%; }
.project-tab-code { color: #79717b; font: 600 13px var(--serif); letter-spacing: .15em; transition: color .2s; }
.project-tab-name { overflow: hidden; color: #79717b; font-size: 10px; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; transition: color .2s; }
.project-tab[aria-selected="true"] .project-tab-code { color: var(--gold-bright); font-size: 17px; }
.project-tab[aria-selected="true"] .project-tab-name { color: var(--ink); }

.showcase-stage { position: relative; z-index: 2; width: min(720px, 66vw); height: calc(100svh - 85px); min-height: 610px; margin: -92px auto 0; display: grid; place-items: center; }
.device { position: relative; width: clamp(310px, 24vw, 382px); height: min(72svh, 720px); min-height: 560px; padding: 12px; border: 1px solid rgba(197,173,125,.46); border-radius: 36px; background: linear-gradient(145deg, #272128, #0c0a0d 48%, #241d25); box-shadow: 0 34px 80px rgba(0,0,0,.55), 0 0 80px rgba(var(--accent-rgb), .12), inset 0 0 0 1px rgba(255,255,255,.04); }
.device::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.06); border-radius: 30px; pointer-events: none; }
.device-hardware { position: absolute; z-index: 4; top: 17px; left: 50%; width: 73px; height: 15px; border-radius: 0 0 12px 12px; background: #0d0b0e; transform: translateX(-50%); }
.device-hardware span { position: absolute; width: 5px; height: 5px; right: 15px; top: 3px; border-radius: 50%; background: #322839; }
.device-screen { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: 25px; background: #110d12; scroll-behavior: smooth; }
.device-screen::-webkit-scrollbar { display: none; }
.key-visual { min-height: 66%; border-radius: 25px 25px 0 0; }
.media-panel { position: relative; overflow: hidden; display: grid; place-items: end start; background: radial-gradient(circle at 58% 33%, rgba(var(--accent-rgb), .55), transparent 32%), linear-gradient(145deg, #2b1d32, #0c090d 65%); background-size: cover; background-position: center; }
.media-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(10,8,11,.96)), linear-gradient(115deg, transparent 40%, rgba(199,174,126,.12)); }
.media-panel.placeholder::after { content: attr(data-placeholder); position: relative; z-index: 1; margin: 20px; color: rgba(238,232,220,.68); font: 600 11px/1.4 var(--serif); letter-spacing: .18em; }
html[data-project="bi"] .media-panel { background: radial-gradient(circle at 68% 40%, rgba(193,54,40,.4), transparent 28%), repeating-linear-gradient(107deg, transparent 0 36px, rgba(195,111,54,.06) 37px 38px), linear-gradient(145deg, #481b1c, #10090a 67%); }
html[data-project="ic"] .media-panel { background: radial-gradient(circle at 52% 24%, rgba(222,207,181,.3), transparent 27%), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 58px), linear-gradient(145deg, #756c7b, #211b25 48%, #0f0c11); }
.project-content { position: relative; z-index: 1; margin-top: -60px; padding: 0 26px 34px; }
.project-heading h2 { max-width: 290px; margin: 0; color: #f2ebdf; font: 600 clamp(29px, 2.2vw, 38px)/.82 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.project-parent { min-height: 15px; margin: 0 0 6px; color: var(--gold); font-size: 11px; letter-spacing: .2em; }
.project-parent:empty { display: none; }
.project-subtitle { margin: 14px 0 0; color: #c6bfc5; font: 500 15px/1.3 var(--serif); }
.project-status { width: fit-content; margin: 18px 0 14px; border-left: 2px solid var(--gold); padding: 4px 10px; background: rgba(var(--accent-rgb), .18); color: var(--gold-bright); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.project-description { margin: 0; color: #a8a0a8; font-size: 12px; line-height: 1.7; }
.divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 18px; color: #8d848c; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.divider i { flex: 1; height: 1px; background: var(--line); }
.project-content h3 { margin: 0 0 12px; color: var(--gold); font: 600 11px var(--serif); letter-spacing: .13em; text-transform: uppercase; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 12px; color: #beb7bc; font-size: 11px; }
.feature-list li::before { content: ""; position: absolute; top: .62em; left: 0; width: 4px; height: 4px; border: 1px solid var(--gold); transform: rotate(45deg); }
.world-visual { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.device-cta, .primary-cta { display: flex; justify-content: center; align-items: center; min-height: 48px; border: 1px solid var(--gold); background: linear-gradient(115deg, rgba(var(--accent-rgb), .48), rgba(var(--accent-rgb), .19)); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-decoration: none; text-transform: uppercase; transition: background .2s, color .2s; }
.device-cta { margin-top: 20px; }
.device-cta:hover, .primary-cta:hover { background: var(--gold); color: #151016; }
.device-cta[aria-disabled="true"], .primary-cta[aria-disabled="true"] { border-color: rgba(184,155,98,.35); color: #777078; cursor: default; background: rgba(255,255,255,.025); }
.device-signature { margin: 22px 0 0; color: #7b727b; font-size: 10px; letter-spacing: .16em; text-align: center; }
.scroll-cue { position: absolute; bottom: -24px; left: 50%; display: grid; justify-items: center; gap: 7px; color: #6f6870; transform: translateX(-50%); }
.scroll-cue span { width: 1px; height: 27px; background: linear-gradient(transparent, var(--gold)); }
.scroll-cue b { font-size: 10px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
.world-caption { position: absolute; right: 0; top: 48%; display: grid; gap: 5px; transform: rotate(90deg) translateX(50%); transform-origin: right center; color: #837a85; font-size: 10px; letter-spacing: .2em; }
.world-number { color: var(--gold); }
.project-index { position: absolute; bottom: 2%; right: 1%; display: flex; align-items: center; gap: 9px; color: #756c77; font: 500 11px var(--serif); }
.project-index i { width: 38px; height: 1px; background: var(--line); }
.fixed-cta { position: fixed; z-index: 25; right: clamp(28px, 4vw, 72px); bottom: 36px; width: 190px; }

.content-section { position: relative; display: grid; grid-template-columns: 90px minmax(260px, .8fr) minmax(320px, 1.2fr); gap: clamp(24px, 4vw, 70px); padding: clamp(90px, 11vw, 160px) clamp(28px, 6vw, 100px); border-top: 1px solid var(--line); background: #100d11; }
.section-number { color: rgba(190,164,112,.2); font: 600 82px/.7 var(--serif); }
.section-heading > p:last-child { max-width: 460px; color: var(--muted); font-size: 13px; }
.section-copy { max-width: 650px; color: #b6afb3; }
.section-copy > p { margin-top: 0; }
.section-copy blockquote { margin: 36px 0 0; padding: 26px 0 0 28px; border-top: 1px solid var(--line); border-left: 2px solid var(--gold); color: var(--ink); font: 600 clamp(23px, 2.5vw, 36px)/1.1 var(--serif); }
.gallery-section { grid-template-columns: 90px minmax(250px, 330px) 1fr; background: #141016; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery-item { position: relative; min-height: 210px; overflow: hidden; border: 1px solid var(--line); padding: 0; cursor: pointer; color: var(--ink); text-align: left; }
.gallery-item:nth-child(3n + 1) { grid-row: span 2; min-height: 432px; }
.gallery-item .media-panel { position: absolute; inset: 0; transition: transform .45s; }
.gallery-item:hover .media-panel { transform: scale(1.025); }
.gallery-label { position: absolute; z-index: 2; inset: auto 14px 12px; display: flex; justify-content: space-between; gap: 10px; color: #d9d1d5; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.archive-note { grid-column: 3; margin: 8px 0 0; color: #8f868e; font-size: 11px; }
.support-section { grid-template-columns: 90px minmax(260px, .75fr) minmax(360px, 1.25fr); background: radial-gradient(circle at 75% 50%, rgba(var(--accent-rgb), .1), transparent 35%), #0e0b0f; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.support-item { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; border-bottom: 1px solid var(--line); padding: 0 15px; color: var(--ink); background: none; font-size: 11px; text-decoration: none; }
.support-item:nth-child(odd) { border-right: 1px solid var(--line); }
.support-item span:last-child { color: var(--gold); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.support-item.disabled { color: #6b646c; cursor: default; }
.support-item:not(.disabled):hover { background: rgba(var(--accent-rgb), .12); }
.site-footer { min-height: 190px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 40px clamp(28px, 6vw, 100px); border-top: 1px solid var(--line); color: #938a92; background: #090709; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.site-footer > div { display: flex; align-items: center; gap: 20px; color: var(--ink); font: 600 20px var(--serif); text-transform: none; }
.site-footer .brand-mark { width: 35px; height: 35px; font-size: 10px; }
.site-footer small { text-align: right; }

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(4,3,5,.91); backdrop-filter: blur(12px); }
.lightbox-dialog { position: relative; z-index: 1; width: min(1040px, calc(100vw - 48px)); display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; }
.lightbox-dialog figure { margin: 0; }
.lightbox-media { width: 100%; height: min(72vh, 720px); border: 1px solid var(--line); }
.lightbox-dialog figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; color: var(--muted); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.lightbox-nav, .lightbox-close { border: 0; background: none; color: var(--gold-bright); cursor: pointer; }
.lightbox-nav { height: 58px; font-size: 22px; }
.lightbox-close { position: absolute; z-index: 2; top: -48px; right: 48px; font-size: 28px; }
body.modal-open { overflow: hidden; }

.is-switching .device-screen { opacity: .35; transform: translateY(8px); }
.device-screen { transition: opacity 180ms, transform 180ms; }

@media (max-width: 1050px) {
  :root { --rail-width: 190px; }
  .side-rail { padding-inline: 22px; }
  .showcase-stage { width: 66vw; margin-left: 20%; }
  .project-tabs { top: 39%; }
  .fixed-cta { right: 26px; }
  .content-section, .gallery-section, .support-section { grid-template-columns: 55px minmax(220px, .7fr) minmax(290px, 1.3fr); gap: 28px; padding-inline: 34px; }
  .section-number { font-size: 58px; }
}

@media (max-width: 760px) {
  .side-rail { display: none; }
  .mobile-header { position: fixed; z-index: 30; inset: 0 0 auto; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); background: rgba(10,8,11,.92); backdrop-filter: blur(12px); }
  .mobile-brand { font: 600 19px var(--serif); }
  .mobile-brand .brand-mark { width: 31px; height: 31px; font-size: 9px; }
  main, .site-footer { margin-left: 0; }
  .showcase { min-height: 100svh; padding: 145px 16px 105px; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { font-size: clamp(37px, 12vw, 53px); }
  .hero-copy > p:last-child { margin-inline: auto; font-size: 12px; }
  .project-tabs { position: fixed; top: 70px; left: 50%; z-index: 25; margin: 0; display: flex; justify-content: center; border: 1px solid var(--line); background: rgba(14,10,15,.88); backdrop-filter: blur(8px); transform: translateX(-50%); }
  .project-tab { width: auto; min-width: 74px; display: block; padding: 10px 15px; text-align: center; }
  .project-tab + .project-tab { border-left: 1px solid var(--line); }
  .project-tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .project-tab[aria-selected="true"] .project-tab-code { font-size: 14px; }
  .project-tab::after { left: 15%; bottom: -1px; }
  .project-tab[aria-selected="true"]::after { width: 70%; }
  .showcase-stage { width: 100%; height: auto; min-height: 0; margin: 0; }
  .device { width: min(100%, 375px); height: min(68svh, 680px); min-height: 510px; }
  .world-caption, .project-index { display: none; }
  .fixed-cta { position: fixed; z-index: 25; right: 14px; bottom: 12px; left: 14px; width: auto; min-height: 51px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  .content-section, .gallery-section, .support-section { grid-template-columns: 1fr; gap: 25px; padding: 82px 20px; }
  .section-number { position: absolute; right: 20px; top: 84px; font-size: 54px; }
  .section-heading { padding-right: 48px; }
  .section-heading h2 { font-size: 42px; }
  .gallery-grid, .archive-note { grid-column: 1; }
  .gallery-item, .gallery-item:nth-child(3n + 1) { grid-row: auto; min-height: 220px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-item:nth-child(odd) { border-right: 0; }
  .site-footer { grid-template-columns: 1fr; min-height: 260px; gap: 15px; padding: 58px 20px 100px; text-align: left; }
  .site-footer small { text-align: left; }
  .lightbox-dialog { width: calc(100vw - 24px); grid-template-columns: 40px 1fr 40px; }
  .lightbox-media { height: 62vh; }
  .lightbox-close { right: 34px; }
}

@media (max-width: 430px) {
  .project-content { padding-inline: 21px; }
  .feature-list { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item { min-height: 250px; }
  .lightbox-dialog { grid-template-columns: 1fr; }
  .lightbox-nav { position: absolute; z-index: 2; bottom: 38px; width: 44px; background: rgba(10,8,11,.72); }
  .lightbox-prev { left: 0; }
  .lightbox-next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}