@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both journey-out; }
::view-transition-new(root) { animation: 240ms ease-out both journey-in; }
@keyframes journey-out { to { opacity: 0; } }
@keyframes journey-in { from { opacity: 0; } }
.home-header,.site-header,body>nav:not(.chapter-rail) { view-transition-name: site-header; }
.eyebrow { font: 13px/1.5 Arial,Helvetica,sans-serif; color: #95938b; }
.accent { color: #e8693c; }

/* Project index overlay */
.atlas-is-open { overflow: hidden; }
.atlas { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0b0a; color: #ecebe6; font-family: Arial,Helvetica,sans-serif; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 80px 8px; }
.atlas::backdrop { background: #0b0b0a; }
.atlas * { box-sizing: border-box; }
.atlas a { color: inherit; text-decoration: none; }
.atlas :focus-visible { outline: 2px solid #e8693c; outline-offset: 4px; }
.atlas-top { display: flex; justify-content: space-between; align-items: center; min-height: 72px; padding: 0 32px; position: sticky; top: 0; z-index: 2; background: #0b0b0a; border-bottom: 0; }
.atlas-brand { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.atlas-close { min-width: 44px; min-height: 44px; border: 0; padding: 0; font: 700 15px Arial,sans-serif; background: transparent; color: #95938b; cursor: pointer; }
.atlas-close:hover { color: #ecebe6; }
.atlas-close span { font-size: 20px; margin-left: 10px; vertical-align: -2px; }
.atlas-layout { max-width: 1280px; margin: auto; padding: 56px 32px 72px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8vw; }
.atlas-index h2 { font-size: clamp(40px,5vw,72px); font-weight: 700; letter-spacing: -.045em; margin: 16px 0 40px; line-height: 1; }
.atlas-group { margin-bottom: 36px; }
.atlas-group h3 { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 0; font: 13px Arial,Helvetica,sans-serif; color: #95938b; font-weight: 700; }
.atlas-link { color: #b8b6ae; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 600; border-bottom: 0; font-size: clamp(18px,1.8vw,24px); letter-spacing: -.02em; transition: color .15s; }
.atlas-link:hover,.atlas-link:focus-visible { color: #e8693c; }
.atlas-link[aria-current] span:first-child::after { content: "  — here"; color: #95938b; font-size: 13px; letter-spacing: 0; }
.atlas-kind { display: none; }
.atlas-about { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #95938b; }
.atlas-about:hover { color: #ecebe6; }
.atlas-preview { position: sticky; top: 128px; align-self: start; padding-top: 88px; }
.atlas-picture { aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; padding: 0; background: transparent; border: 0; }
.atlas-picture img { width: 100%; height: 100%; object-fit: contain; }
.atlas-rel { font: 900 110px "Arial Black",Arial,sans-serif; color: #ecebe6; }
.atlas-name { font-size: 32px; font-weight: 700; letter-spacing: -.035em; margin: 24px 0 0; }

@media(max-width:700px) { .atlas { scroll-padding-block-start: 72px; } .atlas-top { padding: 0 24px; min-height: 64px; } .atlas-layout { grid-template-columns: 1fr; padding: 32px 24px 56px; } .atlas-preview { display: none; } .atlas-link { font-size: 20px; }  }
@media(prefers-reduced-motion:reduce) { @view-transition { navigation: none; } ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; } .atlas-link { transition: none; } }