:root {
  color-scheme: dark;
  --background: #101917;
  --text: #ebe7d5;
  --muted: #a0b1a5;
  --gold: #cabc93;
  --line: #77998630;
  --serif: Georgia, 'Times New Roman', serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); scroll-padding-top: 28px; }
body { margin: 0; color: var(--text); background: var(--background); font: 14px/1.6 system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 2px; }
::selection { background: #cabc9338; color: #fff4cb; }
.page { max-width: 1100px; margin: auto; padding: 0 48px 70px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 15px; letter-spacing: 1px; }
nav { display: flex; gap: 28px; }
nav a { padding: 12px 0; color: var(--muted); font-size: 12px; }
h1 { margin: 55px 0 30px; font: normal 52px/1.1 var(--serif); }
h2 { margin: 0 0 12px; color: var(--gold); font: normal 30px/1.2 var(--serif); }
ul { list-style: none; padding: 0; margin: 0; }
.project-list { border-top: 1px solid var(--line); }
.project-list li { border-bottom: 1px solid var(--line); }
.project-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 24px; padding: 28px 0; }
.project-name { font: normal 27px/1.3 var(--serif); }
.domain { color: var(--muted); font-size: 12px; }
.arrow { color: var(--gold); font: 16px/1.5 system-ui, sans-serif; }
.addons { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; padding-top: 55px; }
.addon-root { padding-top: 14px; }
.profile-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--muted); font-size: 12px; }
.addon-branches { padding-left: 28px; }
.addon-branches li { position: relative; padding-left: 25px; }
.addon-branches li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.addon-branches li:first-child::before { top: 30px; }
.addon-branches li:last-child::before { bottom: calc(100% - 30px); }
.addon-branches li::after { content: ''; position: absolute; left: 0; top: 30px; width: 15px; border-top: 1px solid var(--line); }
.addon-branches a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 17px 0; font: normal 22px/1.4 var(--serif); }
.addon-branches .arrow { flex-shrink: 0; }
.skip-link { position: absolute; top: 8px; left: 12px; transform: translateY(-200%); background: var(--background); padding: 10px 15px; }
.skip-link:focus { transform: none; }
@media (max-width: 760px) {
  .page { padding: 0 24px 45px; }
  .project-list a { grid-template-columns: minmax(0, 1fr) 18px; gap: 8px 18px; padding: 24px 0; }
  .project-name { font-size: 26px; }
  .domain { grid-column: 1; }
  .project-list .arrow { grid-column: 2; grid-row: 1 / 3; }
  .addons { grid-template-columns: 1fr; gap: 15px; padding-top: 38px; }
  .addon-branches { padding-left: 0; }
  .addon-branches a { font-size: 22px; }
}
@media (max-width: 400px) {
  .site-header { gap: 15px; }
  nav { gap: 16px; }
  nav a { font-size: 11px; }
  h1 { font-size: 44px; margin-top: 40px; }
}