*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; font-size: 15px; line-height: 1.55; color: #1a1a1a; background: #f5f5f4; }
.layout { display: flex; min-height: 100vh; align-items: stretch; }
.side-nav {
  flex: 0 0 min(320px, 38vw);
  max-width: 380px;
  background: #1c1917;
  color: #e7e5e4;
  padding: 1.25rem 0 2rem;
  overflow-y: auto;
  border-right: 1px solid #292524;
}
.side-nav h2 {
  margin: 0 1rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a29e;
}
.side-nav ul.nav-root,
.side-nav ul.nav-accordion-panel {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-nav ul.nav-root > li {
  margin: 0;
  border-top: 1px solid #292524;
}
.side-nav ul.nav-root > li:first-child { border-top: none; }
.side-nav .nav-home a {
  display: block;
  padding: 0.45rem 1rem;
  color: #e7e5e4;
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
}
.side-nav .nav-home a:hover { background: #292524; color: #fff; }
.side-nav details.nav-accordion { margin: 0; }
.side-nav summary.nav-accordion-summary {
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d6d3d1;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  user-select: none;
}
.side-nav summary.nav-accordion-summary::-webkit-details-marker { display: none; }
.side-nav summary.nav-accordion-summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid #a8a29e;
  border-bottom: 1.5px solid #a8a29e;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.side-nav details.nav-accordion[open] summary.nav-accordion-summary::after {
  transform: rotate(-135deg);
}
.side-nav summary.nav-accordion-summary:hover {
  background: #292524;
  color: #fff;
}
.side-nav summary.nav-accordion-summary:hover::after {
  border-color: #e7e5e4;
}
.side-nav .nav-accordion-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
}
.side-nav .nav-accordion-label { color: inherit; }
.side-nav .nav-accordion-count {
  font-weight: 500;
  color: #78716c;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
}
.side-nav ul.nav-accordion-panel li {
  margin: 0;
  border-top: 1px solid #1f1d1b;
}
.side-nav ul.nav-accordion-panel a {
  display: block;
  padding: 0.4rem 1rem 0.4rem 1.35rem;
  color: #e7e5e4;
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.35;
}
.side-nav ul.nav-accordion-panel a:hover { background: #292524; color: #fff; }
.main-content {
  flex: 1;
  min-width: 0;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
  max-width: 52rem;
}
.main-content h1 { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 2.5vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; }
.main-content .subtitle { margin: 0 0 2rem; font-size: 0.95rem; color: #57534e; }
.main-content .about-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #78716c; margin-bottom: 0.5rem; }
.main-content .about-text { margin: 0; font-size: 1.05rem; color: #292524; }
@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .side-nav { flex: none; max-width: none; max-height: 40vh; border-right: none; border-bottom: 1px solid #292524; }
}