/* Compact navigation and content indexes. */
:root {
  --paper: #fafafa;
  --ink: #202120;
  --muted: #656562;
  --accent: #964425;
  --rule: #c8c9c4;
  --wash: #edede9;
}

@media (prefers-color-scheme: dark) {
  :root { --paper: #1e1e1e; --ink: #edeee8; --muted: #b1b2ab; --accent: #efac90; --rule: #494a44; --wash: #2d2e29; }
}

:root[data-appearance="light"] { color-scheme: light; }
:root[data-appearance="dark"] { color-scheme: dark; }
:root[data-appearance="light"] { --paper: #fafafa; --ink: #202120; --muted: #656562; --accent: #964425; --rule: #c8c9c4; --wash: #edede9; }
:root[data-appearance="dark"] { --paper: #1e1e1e; --ink: #edeee8; --muted: #b1b2ab; --accent: #efac90; --rule: #494a44; --wash: #2d2e29; }

.site-layout { max-width: 1010px; margin: auto; padding: 55px 42px 25px; }
.site-main { padding-top: 32px; }
.site-main > article { max-width: 700px; margin: 12px auto 0; }
.site-main .article-header h1 { font-size: 2.3rem; font-weight: 500; letter-spacing: -.04em; }
.index-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; padding-bottom: 23px; border-bottom: 1px solid var(--ink); }
.index-header nav { display: flex; gap: 1.55rem; font: .74rem var(--sans); }
.index-header nav a, .index-feed { padding: .3rem 0; }
.index-header a { text-decoration: none; }
.index-header a:hover { text-decoration: underline; }
.index-header .index-signature { justify-self: start; font: 500 .94rem/1.5 var(--sans); letter-spacing: -.02em; padding: .15em 0; }
.index-alias { margin-left: .4rem; color: var(--muted); font: .76rem var(--mono); letter-spacing: -.03em; white-space: nowrap; }
.index-tools { display: flex; align-items: center; justify-self: end; gap: 1.1rem; font: .74rem var(--sans); }
.theme-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .45rem; min-height: 32px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); background: transparent; cursor: pointer; }
.theme-toggle:hover { border-color: var(--muted); background: var(--wash); }
.theme-toggle svg { flex: none; }
:root[data-appearance="light"] .theme-sun, :root[data-appearance="dark"] .theme-moon { display: none; }
.index-topics { display: flex; flex-wrap: wrap; gap: .4rem .85rem; font: 400 .68rem/1.8 var(--mono); letter-spacing: .045em; text-transform: uppercase; color: var(--muted); padding: 30px 0 36px; }
.site-main > .index-topics { padding-top: 0; }
.index-section { display: grid; grid-template-columns: 160px minmax(0, 1fr); border-top: 1px solid var(--rule); padding: 28px 0; gap: 35px; }
.index-section > h2 { font-size: 1.04rem; font-weight: 550; }
.index-section > h2 a { text-decoration-color: var(--rule); text-underline-offset: .3em; }
.index-section > h2 a:hover { text-decoration-color: currentColor; }
.index-section .project-list { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.index-section .project + .project { border: 0; padding-top: .4rem; }
.index-section .project h3 { font-family: var(--mono); font-size: .92rem; letter-spacing: -.045em; }
.index-section .project p { margin-top: .9rem; }
.index-section .project .small-link { color: var(--muted); }
.index-section .writing-entry { padding: 0; }
.index-section .writing-entry + .writing-entry { margin-top: 1.3rem; padding-top: 1.3rem; }
.index-section .writing-entry h3 { max-width: 550px; margin-top: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.45; }
.index-section .writing-entry p { max-width: 510px; font-size: .85rem; }
.browse-link { display: inline-block; font-size: .76rem; margin-top: 1.1rem; }
.browse-tags { margin-left: 1.2rem; color: var(--muted); }
.site-layout .site-footer { margin-top: 1rem; }
.site-footer a { display: inline-block; padding: .25rem 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: .3em; }
.site-footer a:hover { color: var(--accent); text-decoration-color: currentColor; }
.site-footer a span { display: inline-block; margin-left: .2rem; color: var(--muted); }
.catalog-heading { padding: 40px 0 30px; }
.catalog-heading h1, .site-main > h1:not(.index-topics) { font-size: 2.1rem; font-weight: 500; letter-spacing: -.04em; }
.catalog-heading p { color: var(--muted); font-size: .88rem; margin-top: 1rem; }
.catalog-heading > .small-link { display: inline-block; margin-bottom: 1.3rem; color: var(--muted); }
.site-main > .catalog-heading { padding-top: 0; }
.software-catalog { max-width: 700px; }
.software-catalog .project { padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.software-catalog .project h2 { font: 500 1rem/1.5 var(--mono); }
.software-catalog .project h2 a { text-decoration: none; }
.software-catalog .project h2 a:hover { text-decoration: underline; }

/* Tags are ordinary links, with no client-side filtering or hidden content. */
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: .85rem 0 0; padding: 0; font: .68rem/1.7 var(--mono); color: var(--muted); }
.post-tags a { display: inline-block; padding: .15rem 0; text-decoration-color: var(--rule); text-underline-offset: .3em; }
.post-tags a:hover { text-decoration-color: currentColor; }
.post-tags a span, .tag-hash { color: var(--accent); margin-right: .15em; }
.tag-index { list-style: none; margin: 0; padding: 0; max-width: 700px; }
.tag-index li + li { border-top: 1px solid var(--rule); }
.tag-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; font: .87rem/1.6 var(--mono); }
.tag-count { color: var(--muted); font: .72rem var(--sans); white-space: nowrap; }

@media (max-width: 850px) {
  .site-layout { padding-left: 28px; padding-right: 28px; }
  .index-section { grid-template-columns: 140px minmax(0, 1fr); gap: 25px; }
  .index-section .project-list { display: block; }
  .index-section .project + .project { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
}

@media (max-width: 720px) {
  .index-header { grid-template-columns: minmax(0, 1fr) auto; gap: .9rem .8rem; }
  .index-header .index-signature { grid-column: 1 / -1; }
  .index-header nav { justify-content: flex-start; flex-wrap: wrap; gap: .6rem .85rem; font-size: .72rem; }
  .index-tools { gap: .75rem; font-size: .72rem; }
}

@media (max-width: 620px) {
  .site-layout { padding: 26px 22px 20px; }
  .index-topics { padding: 24px 0 28px; font-size: .62rem; column-gap: .6rem; letter-spacing: .02em; }
  .index-section { display: block; padding-top: 23px; }
  .index-section > h2 { margin-bottom: 1.5rem; }
  .index-section .writing-entry h3 { font-size: 1.15rem; }
  .site-main .article-header h1 { font-size: 1.9rem; }
}

@media (max-width: 380px) {
  .index-header { column-gap: .5rem; }
  .index-header nav { column-gap: .55rem; }
  .index-tools { gap: .5rem; }
}

.index-afterword { display: flex; justify-content: flex-end; padding: 18px 0 2px; }
.pendulum { width: 270px; max-width: 100%; margin: 0; }
.pendulum figcaption { text-align: center; font: .62rem/1.4 var(--mono); color: var(--muted); }
.pendulum svg { display: block; width: 100%; height: auto; overflow: visible; }
.pendulum-arc { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; }
.pendulum-tick { fill: none; stroke: var(--rule); stroke-width: 1; }
.pendulum-mount { fill: none; stroke: var(--muted); stroke-width: 1; }
.pendulum-arm { stroke: var(--accent); stroke-width: 1.5; fill: var(--accent); }
.pendulum-pivot { fill: var(--ink); }
.pendulum-label { font: 12px var(--mono); fill: var(--muted); }
.pendulum[data-mood="back"] .pendulum-over, .pendulum[data-mood="over"] .pendulum-back { display: none; }
.pendulum[data-mood="back"] .label-back, .pendulum[data-mood="over"] .label-over { fill: var(--ink); font-weight: 600; }

@media print {
  :root, :root[data-appearance] { color-scheme: light; --paper: white; --ink: black; --muted: #444; --rule: #aaa; --accent: black; }
  .theme-toggle, .index-afterword { display: none; }
  .site-layout { padding: 0; }
  .site-layout > header, .site-layout > footer { display: none; }
}