@view-transition { navigation: auto; }

:root {
    color-scheme: dark;
    --graphite-950: #0d0f0d;
    --graphite-900: #111411;
    --graphite-850: #161916;
    --ivory: #f1eee5;
    --ivory-muted: #c7c7bd;
    --steel: #858c84;
    --line: #2b302b;
    --line-strong: #424942;
    --signal: #efa83a;
    --accent: var(--signal);
    --sidebar: clamp(19rem, 29vw, 31rem);
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    --sans: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    font-family: var(--sans);
    background: var(--graphite-950);
    color: var(--ivory);
}

* { box-sizing: border-box; }
html { background: var(--graphite-950); scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--graphite-950); color: var(--ivory); }
body[data-accent="#f2a93b"], body[data-accent="#efa83a"] { --accent: #efa83a; }
body[data-accent="#4da3ff"] { --accent: #4da3ff; }
body[data-accent="#72d6a0"] { --accent: #72d6a0; }
body[data-accent="#d98cff"] { --accent: #d98cff; }
body.is-transitioning { cursor: progress; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-underline-offset: .25em; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: .75rem;
    left: .75rem;
    padding: .75rem 1rem;
    background: var(--ivory);
    color: var(--graphite-950);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.system-label, .system-state, .keyboard-hint, .language-switcher, .project-kicker, .block-index, .story-end, .news-list time {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.deck {
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    background:
        linear-gradient(90deg, transparent calc(var(--sidebar) - 1px), var(--line) var(--sidebar), transparent calc(var(--sidebar) + 1px)),
        var(--graphite-950);
}

.deck-sidebar {
    min-height: 0;
    padding: var(--space-4);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-6);
}

.deck-brand-row, .deck-footer, .public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.deck-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--steel);
}

.language-switcher a {
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.language-switcher a:hover,
.language-switcher a.is-active {
    color: var(--ivory);
}

.language-switcher a.is-active {
    text-shadow: 0 0 12px var(--accent);
}

.brand {
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-decoration: none;
}

.system-state { color: var(--steel); }
.system-state i { display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 1rem color-mix(in srgb, var(--signal), transparent 30%); }

.identity-statement { max-width: 27rem; }
.identity-statement .system-label { color: var(--signal); }
.identity-statement h2 { margin: 1rem 0; font-size: clamp(1.55rem, 2.2vw, 2.6rem); line-height: 1.02; letter-spacing: -.045em; }
.identity-statement > p:last-child { margin: 0; color: var(--steel); font-size: .9rem; line-height: 1.55; }

.project-navigation { --project-row-height: 4.75rem; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.project-navigation ol { min-width: 0; margin: 0; padding: 0; list-style: none; }
.project-navigation-group { min-width: 0; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); }
.project-navigation-group:not(.is-grouped) { display: block; }
.project-group-label { min-width: 0; grid-column: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1px solid var(--line); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); color: var(--accent); font: .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.project-navigation-projects { min-width: 0; grid-column: 2; }
.project-navigation-group:not(.is-grouped) .project-navigation-projects { display: block; }
.project-navigation-projects a { min-width: 0; min-height: var(--project-row-height); display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-content: center; gap: 1rem; padding: 1rem .25rem; border-top: 1px solid var(--line); text-decoration: none; transition: color 180ms ease, padding 180ms ease; }
.project-navigation-projects li:last-child a { border-bottom: 1px solid var(--line); }
.project-navigation a:hover, .project-navigation a.is-active { padding-left: .65rem; color: var(--accent); }
.project-navigation a.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 90%), transparent); }
.project-number { padding-top: .2rem; color: var(--steel); font-family: var(--mono); font-size: .68rem; }
.project-navigation-copy { min-width: 0; overflow: hidden; }
.project-navigation strong { font-size: 1rem; }
.project-navigation small { margin-top: .25rem; color: var(--steel); font-size: .72rem; }
.project-overflow-text { min-width: 0; display: block; overflow: hidden; white-space: nowrap; }
.project-overflow-text > span { width: max-content; display: block; transform: translateX(0); }
.project-overflow-text.is-overflowing > span { animation: project-text-pan var(--overflow-duration, 5s) ease-in-out 1s infinite alternate; }

@keyframes project-text-pan {
    0%, 12% { transform: translateX(0); }
    88%, 100% { transform: translateX(var(--overflow-offset)); }
}

.deck-footer { color: var(--steel); }
.deck-footer nav { display: flex; gap: 1rem; }
.deck-footer a { font-size: .75rem; text-decoration: none; }

.deck-stage { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.scroll-progress { position: sticky; z-index: 20; top: 0; height: 2px; background: var(--line); }
.scroll-progress i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.project-story { min-height: 100%; outline: none; }

.project-hero {
    min-height: min(51rem, calc(100dvh - 2px));
    padding: clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent), transparent 82%), transparent 35%);
    background-size: 4rem 4rem, 4rem 4rem, auto;
}

.project-kicker { display: flex; justify-content: space-between; color: var(--steel); }
.project-state { display: flex; align-items: center; gap: 1rem; }
.lifecycle-status { color: var(--accent); }
.project-hero h1 { max-width: 13ch; margin: clamp(3rem, 10vh, 8rem) 0 clamp(2.75rem, 4vw, 4.5rem); font-size: clamp(4rem, 10vw, 11rem); line-height: .82; letter-spacing: -.075em; text-wrap: balance; }
.project-subtitle { max-width: 32ch; margin: 0; color: var(--accent); font-size: clamp(1.35rem, 2.5vw, 2.7rem); line-height: 1.05; letter-spacing: -.035em; }
.project-lead { max-width: 47rem; margin: 2rem 0 0; color: var(--ivory-muted); font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.65; }
.project-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.project-tags li { padding: .35rem .65rem; border: 1px solid var(--line-strong); color: var(--steel); font: .65rem var(--mono); text-transform: uppercase; }

.project-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); max-width: 55rem; margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.project-facts div { min-width: 0; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; column-gap: 1.5rem; }
.project-facts dt { color: var(--steel); font: .68rem/1.4 var(--mono); text-transform: uppercase; }
.project-facts dd { min-width: 0; margin: 0; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.project-actions { display: flex; gap: 1rem; margin-top: 2rem; }
.action-link { padding-bottom: .35rem; border-bottom: 1px solid var(--accent); text-decoration: none; }

.project-cover { margin: 0; background: var(--graphite-850); }
.project-cover img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

.story-block { display: grid; grid-template-columns: clamp(3rem, 8vw, 8rem) minmax(0, 1fr); min-height: 22rem; padding: clamp(3rem, 7vw, 8rem); border-top: 1px solid var(--line); }
.block-index { color: var(--accent); }
.block-content { max-width: 66rem; }
.block-content h2 { max-width: 15ch; margin: 0 0 2rem; font-size: clamp(2.5rem, 6vw, 6rem); line-height: .94; letter-spacing: -.06em; text-wrap: balance; }
.long-copy, .editorial-copy { max-width: 45rem; color: var(--ivory-muted); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.75; white-space: pre-line; }
.story-quote blockquote { margin: 0; }
.story-quote blockquote p { max-width: 24ch; margin: 0; font-size: clamp(2rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -.045em; }
.story-quote cite { display: block; margin-top: 2rem; color: var(--accent); font: normal .75rem var(--mono); }
.media-frame { margin: 0; }
.media-frame img, .media-frame video { width: 100%; background: var(--graphite-850); }
.media-frame figcaption, .media-gallery figcaption { margin-top: .75rem; color: var(--steel); font: .68rem var(--mono); }
.media-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.media-gallery figure { margin: 0; }
.media-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--graphite-850); }

.story-end { min-height: 12rem; padding: 3rem clamp(3rem, 7vw, 8rem); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--steel); }
.story-end a { color: var(--ivory); }

[data-assemble] > * { opacity: 0; transform: translateY(1.25rem); }
.is-assembled [data-assemble] > * { opacity: 1; transform: none; transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.8,.2,1); }
.is-assembled [data-assemble] > *:nth-child(2) { transition-delay: 70ms; }
.is-assembled [data-assemble] > *:nth-child(3) { transition-delay: 130ms; }
.is-assembled [data-assemble] > *:nth-child(4) { transition-delay: 190ms; }

.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 3rem; border: 0; background: rgb(7 8 7 / 96%); color: var(--ivory); }
.lightbox::backdrop { background: rgb(7 8 7 / 90%); }
.lightbox img { width: 100%; height: calc(100% - 3rem); object-fit: contain; }
.lightbox button { float: right; margin-bottom: 1rem; padding: .5rem 0; border: 0; background: transparent; color: var(--ivory); cursor: pointer; }
[data-lightbox-source] { cursor: zoom-in; }

.public-header { min-height: 5rem; padding: 1rem clamp(1rem, 5vw, 5rem); border-bottom: 1px solid var(--line); }
.public-header nav { display: flex; gap: 1.5rem; }
.public-header nav a { color: var(--steel); font: .72rem var(--mono); text-decoration: none; text-transform: uppercase; }
.public-header nav a:hover { color: var(--ivory); }
.editorial-page { width: min(100% - 2rem, 90rem); margin: 0 auto; padding: clamp(4rem, 10vw, 10rem) clamp(0rem, 5vw, 5rem); }
.editorial-page > .system-label { color: var(--signal); }
.editorial-page > h1 { max-width: 15ch; margin: 2rem 0 5rem; font-size: clamp(4rem, 10vw, 10rem); line-height: .86; letter-spacing: -.075em; text-wrap: balance; }
.contact-panel { margin-top: 8rem; padding: 2rem 0; display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--steel); font: .72rem var(--mono); }
.contact-panel a { color: var(--ivory); }
.news-list { margin: 0; padding: 0; list-style: none; }
.news-list li { display: grid; grid-template-columns: 9rem 1fr; padding: 2rem 0; border-top: 1px solid var(--line); }
.news-list time { color: var(--steel); }
.news-list a { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 2rem; text-decoration: none; }
.news-list strong { font-size: 1.25rem; }
.news-list span { color: var(--steel); line-height: 1.55; }
.article-summary { max-width: 45rem; margin: -2rem 0 4rem; color: var(--signal); font-size: 1.5rem; line-height: 1.4; }
.back-link { display: inline-block; margin-top: 5rem; }

.studio-page { min-height: 100vh; display: grid; place-items: center; }
.login-panel { width: min(32rem, calc(100% - 2rem)); padding: 2rem; border: 1px solid var(--line); }
.login-panel h1 { margin: 1rem 0 2rem; font-size: 3rem; }
.login-panel form { display: grid; gap: 1rem; }
.login-panel label { display: grid; gap: .5rem; color: var(--steel); }
.login-panel input, .login-panel button { padding: .9rem 1rem; border: 1px solid var(--line); background: var(--graphite-850); color: var(--ivory); }
.login-panel button { border-color: var(--signal); cursor: pointer; }

.studio-shell { min-height: 100vh; background: #0e100e; }
.studio-header { position: sticky; z-index: 30; top: 0; min-height: 4.5rem; padding: 1rem 2rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; border-bottom: 1px solid var(--line); background: rgb(13 15 13 / 94%); backdrop-filter: blur(1rem); }
.studio-header nav { display: flex; gap: 1.25rem; }
.studio-header nav a, .text-button { padding: 0; border: 0; background: transparent; color: var(--steel); font: .7rem var(--mono); text-decoration: none; text-transform: uppercase; cursor: pointer; }
.studio-header nav a:hover, .text-button:hover { color: var(--ivory); }
.studio-main { width: min(100% - 2rem, 92rem); margin: 0 auto; padding: 4rem 1rem 8rem; }
.studio-main.narrow { max-width: 70rem; }
.studio-title { margin-bottom: 3rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.studio-title h1 { margin: .75rem 0 0; font-size: clamp(3rem, 7vw, 6rem); line-height: .9; letter-spacing: -.06em; }
.studio-title-small { margin-top: 6rem; }
.studio-title-small h2 { margin: .75rem 0 0; font-size: 2.5rem; }
.studio-inline-actions { display: flex; align-items: center; gap: 1rem; }
.studio-action { display: inline-block; padding: .8rem 1rem; border: 1px solid var(--signal); background: transparent; color: var(--ivory); text-decoration: none; cursor: pointer; }
.studio-table { border-top: 1px solid var(--line); }
.studio-row { min-height: 4.5rem; padding: 1rem; display: grid; grid-template-columns: 5rem minmax(12rem, 1fr) 9rem 5rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.studio-row:hover:not(.studio-row-head) { background: var(--graphite-850); }
.studio-row-head { min-height: 2.5rem; color: var(--steel); font: .65rem var(--mono); text-transform: uppercase; }
.studio-row strong, .studio-row small { display: block; }
.studio-row small { margin-top: .25rem; color: var(--steel); }
.studio-row a { justify-self: end; }
.status { width: max-content; padding: .35rem .55rem; border: 1px solid var(--line); color: var(--steel); font: .65rem var(--mono); }
.status.is-published { border-color: #72d6a0; color: #72d6a0; }
.studio-form { padding: 2rem; border: 1px solid var(--line); background: var(--graphite-900); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.form-grid label, .upload-form label { display: grid; gap: .55rem; color: var(--steel); font: .7rem var(--mono); text-transform: uppercase; }
.form-grid input, .form-grid textarea, .form-grid select, .upload-form input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); background: var(--graphite-850); color: var(--ivory); font: .9rem var(--sans); text-transform: none; }
.form-grid textarea { resize: vertical; line-height: 1.55; }
.form-grid label > small { color: #f08b78; text-transform: none; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .checkbox { display: flex; flex-direction: row; align-items: center; }
.form-grid .checkbox input { width: auto; }
.danger-zone { margin-top: 3rem; padding: 1.5rem; display: flex; justify-content: space-between; border: 1px solid #6b3028; }
.danger-zone button, .danger { color: #f08b78; }
.studio-flashes { margin-bottom: 1.5rem; }
.flash { padding: .9rem 1rem; border: 1px solid var(--line); }
.flash-success { border-color: #386a4d; color: #72d6a0; }
.flash-error { border-color: #6b3028; color: #f08b78; }
.upload-form { margin-bottom: 4rem; padding: 2rem; display: grid; grid-template-columns: 1fr 2fr auto; align-items: end; gap: 1rem; border: 1px solid var(--line); }
.media-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.media-library article { border: 1px solid var(--line); background: var(--graphite-900); }
.media-library img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--graphite-850); }
.media-library article > div { padding: 1rem; }
.media-library code { display: block; overflow: hidden; color: var(--signal); text-overflow: ellipsis; white-space: nowrap; }
.media-library small { color: var(--steel); }
.media-library form { margin-top: 1rem; }

@media (max-width: 800px) {
    .deck { height: auto; min-height: 100dvh; display: block; overflow: visible; background: var(--graphite-950); }
    .deck-sidebar { min-height: auto; padding: 1.25rem 1rem; display: block; border-bottom: 1px solid var(--line); }
    .identity-statement { padding: 4rem 0 3rem; }
    .identity-statement h2 { font-size: 2.35rem; }
    .project-navigation { --project-row-height: 5rem; margin: 0 -1rem; padding: 0 1rem; }
    .deck-footer { display: none; }
    .deck-stage { overflow: visible; }
    .scroll-progress { position: fixed; right: 0; left: 0; }
    .project-hero { min-height: 80dvh; padding: 3rem 1rem; background-size: 2rem 2rem, 2rem 2rem, auto; }
    .project-hero h1 { font-size: clamp(4rem, 20vw, 7rem); }
    .project-facts { grid-template-columns: 1fr; }
    .story-block { grid-template-columns: 2rem 1fr; padding: 4rem 1rem; }
    .media-gallery { grid-template-columns: 1fr; }
    .story-end { padding: 3rem 1rem; }
    .keyboard-hint { display: none; }
    .news-list li, .news-list a { grid-template-columns: 1fr; gap: .75rem; }
    .contact-panel { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .studio-header { position: static; grid-template-columns: 1fr auto; }
    .studio-header nav { grid-column: 1 / -1; overflow-x: auto; }
    .studio-row { grid-template-columns: 3rem minmax(9rem, 1fr) 6rem 4rem; padding-inline: .25rem; font-size: .8rem; }
    .form-grid, .upload-form { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
}

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