:root { font-family: "Space Grotesk", Arial, sans-serif; color: #171717; background: #fafafa; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, summary { font: inherit; }
.header { display: flex; justify-content: space-between; gap: 24px; margin: 4% 3.8% 0; color: #6f6b6e; font-size: clamp(12px, .94vw, 18px); font-weight: 600; }
.header a { color: inherit; text-decoration: none; }
.scroll-stage { height: 400vh; }
.layout { height: 100%; display: grid; align-items: start; grid-template-columns: 25% minmax(0, 1fr); column-gap: 10.5%; margin: 9.2% 2.2% 8% 3.8%; }
.sidebar { max-width: 445px; }
.sidebar, .projects { position: sticky; top: 8vh; }
.intro { color: #777276; font-size: clamp(15px, .98vw, 19px); line-height: 1.26; letter-spacing: .005em; }
p { margin: 0; }
.intro p + p { margin-top: 1.3em; }
.navigation { margin-top: 5.3em; font-size: clamp(15px, .95vw, 18px); }
details { margin-bottom: 1.45em; }
summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { font-size: 1.25em; line-height: .8; transition: transform .2s; }
details[open] summary span { transform: rotate(45deg); }
.nav-content { display: grid; gap: .75em; padding: 1em 1.5em 0 0; font-size: .85em; line-height: 1.35; }
.nav-content button { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: #6f6b6e; }
.nav-content a { display: flex; justify-content: space-between; color: #6f6b6e; text-decoration: none; }
.nav-content button:hover, .nav-content a:hover { color: #111; }
.muted { color: #777276; }
.project-panels { display: flex; gap: clamp(7px, .65vw, 13px); height: min(32.2vw, 635px); min-height: 350px; }
.panel { min-width: 0; flex: 0 0 clamp(15px, 1.2vw, 24px); border: 0; border-radius: 3px; padding: 0; cursor: pointer; transition: flex-basis .6s cubic-bezier(.22,.61,.36,1), flex-grow .6s cubic-bezier(.22,.61,.36,1); }
.panel.active { flex: 1 1 0; }
.panel:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid #171717; outline-offset: 4px; }
.panel-0 { background: linear-gradient(165deg, #a5d6ce 0%, #536f69 100%); }
.panel-1 { background: linear-gradient(165deg, #bd48ce 0%, #310b38 100%); }
.panel-2 { background: linear-gradient(165deg, #35b4ca 0%, #456b70 100%); }
.panel-3 { background: linear-gradient(165deg, #96c99a 0%, #46634b 100%); }
.panel-4 { background: linear-gradient(165deg, #8b191b 0%, #250808 100%); }
.project-copy { max-width: 780px; margin-top: 28px; font-size: clamp(15px, 1vw, 19px); line-height: 1.5; }
.project-copy h1 { font-size: 1.1em; line-height: 1.3; margin: 0 0 .75em; font-weight: 600; }
.project-copy:empty { display: none; }
@media (min-width: 751px) {
  .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1; }
  .layout { position: fixed; top: calc(13.2vw + 1.2em); left: 3.8%; right: 2.2%; height: auto; margin: 0; }
  .sidebar, .projects { position: static; }
}
@media (max-width: 750px) {
  .header { margin: 25px 22px 0; font-size: 11px; }
  .scroll-stage { height: auto; }
  .layout { height: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; margin: 45px 22px 60px; }
  .sidebar { position: static; max-width: 520px; }
  .projects { position: static; width: 100%; }
  .intro { font-size: 16px; line-height: 1.35; }
  .navigation { margin-top: 28px; font-size: 16px; }
  .navigation details { margin-bottom: 1em; }
  .project-panels { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-height: none; gap: 8px; }
  .panel, .panel.active { display: flex; align-items: flex-end; min-height: 95px; padding: 12px; text-align: left; color: white; transition: none; }
  .panel::after { content: attr(data-label); font-size: 13px; line-height: 1.2; font-weight: 500; }
  .project-copy { margin-top: 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .panel, summary span { transition: none; } }