/* Homepage sections, accordion behavior, and content blocks. JS adds .js-collapse to ; section headers become index rows that expand their section in place. Without JS the class is never added and the whole page renders as one document. */ .nav-label { color: var(--color-text-muted); font-size: var(--text-min); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; } section.page-section { margin-bottom: 4.5rem; scroll-margin-top: 1.5rem; } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } .section-breadcrumb { color: var(--color-text-muted); font-size: var(--text-small); font-weight: 500; } .section-breadcrumb .num { color: var(--color-warning); margin-right: 0.6rem; font-size: var(--text-min); } .section-breadcrumb .sep { color: var(--color-accent); margin: 0 0.3rem; } .section-breadcrumb .leaf { color: var(--color-text); } .section-desc { color: var(--color-text-muted); font-size: var(--text-min); margin-left: auto; } .section-toggle { color: var(--color-text-muted); font-size: var(--text-min); min-width: 14px; text-align: right; transition: color 0.12s; } .section-header:hover .section-toggle { color: var(--color-accent); } /* Without JS there is nothing to toggle — hide the markers */ body:not(.js-collapse) .section-toggle, body:not(.js-collapse) .section-desc { display: none; } /* ---------- Accordion (js-collapse) ---------- */ body.js-collapse section.page-section { margin-bottom: 0; } /* The accordion script wraps everything after the header in .section-body > .section-body-inner. Animating the grid row 0fr → 1fr slides the section open at its natural height. */ body.js-collapse .section-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; } body.js-collapse section.open .section-body { grid-template-rows: 1fr; } body.js-collapse .section-body-inner { overflow: hidden; min-height: 0; padding: 1.8rem 0 1.5rem; visibility: hidden; /* collapsed content is unfocusable; flips at transition end */ opacity: 0; transform: translateY(-10px); transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s, visibility 0.4s; } body.js-collapse section.open .section-body-inner { visibility: visible; opacity: 1; transform: none; } body.js-collapse .section-header { border-top: 1px solid var(--color-border); border-bottom: none; padding: 0.65rem 0; margin-bottom: 0; min-height: var(--touch-target); align-items: center; cursor: pointer; user-select: none; transition: background 0.12s ease; } body.js-collapse section.page-section:last-of-type:not(.open) .section-header { border-bottom: 1px solid var(--color-border); } body.js-collapse .section-header:hover, body.js-collapse .section-header:focus-visible { background: var(--color-accent-tint); } body.js-collapse .section-header:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: -2px; } body.js-collapse .section-header:hover .leaf, body.js-collapse .section-header:focus-visible .leaf { color: var(--color-accent); } /* ---------- Content blocks ---------- */ .block { border-left: 2px solid var(--color-border); padding-left: 1.2rem; margin-bottom: 2rem; } .block-label { color: var(--color-warning); font-size: var(--text-min); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; } .block p { color: var(--color-text); font-size: var(--text-body); line-height: var(--leading-reading); max-width: var(--measure); } .block p + p { margin-top: 0.8rem; } .block ul { list-style: none; margin-top: 0.6rem; font-size: var(--text-body); line-height: var(--leading-reading); max-width: var(--measure); } .block ul li::before { content: '·'; color: var(--color-accent); margin-right: 0.6rem; } .block .note { color: var(--color-text-soft); font-size: var(--text-small); margin-top: 0.6rem; } .block .note.tight { margin-top: 0.2rem; }