/* ---- the agenda: a sticky strip of the page's sections, each with its own progress bar ---- */
.agenda { position: sticky; top: 80px; z-index: 29; background: color-mix(in srgb, var(--background-2) 92%, transparent); backdrop-filter: blur(10px); border-bottom: var(--border-w) solid var(--border-subtle); }
.agenda ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); }
.agenda li { flex: 1 1 0; min-width: 0; }
.agenda a { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 14px 0 12px; color: var(--text); text-decoration: none; transition: color .2s ease; }
.agenda a:hover { color: var(--text-heading); }
.agenda a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 3px; }
.agenda .n { color: var(--link); }
.agenda .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda .bar { grid-column: 1 / 3; display: block; height: 2px; background: var(--border-subtle); border-radius: 1px; overflow: hidden; }
.agenda .bar b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--link); transition: width .12s linear; }
.agenda li.cur a { color: var(--text-heading); }
.agenda li.done .n { color: var(--text); }
/* light theme (owner, 2026-10-06: "these sub nav colors feel inaccessible compared to the dark mode"): --background-2
   is a mid grey there (#abacc7), which muddied the strip, set the amber numbers at low contrast and hid the bar's
   track (--border-subtle is the same grey). Dark mode sets the strip a step DEEPER than the page; light mode now sets
   it a step LIGHTER, so the track shows and every label reads. */
:root[data-theme="light"] .agenda { background: color-mix(in srgb, color-mix(in srgb, var(--background) 55%, #fff) 92%, transparent); }
.sec, .cta, .contact { scroll-margin-top: 132px; }  /* site nav 80 + agenda 52, so a click lands with the heading clear of both */
@media (max-width: 860px) { .agenda ol { gap: var(--sp-3); } .agenda .t { display: none; } .agenda a { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .agenda .bar b { transition: none; } }
/* the About page under the agenda: the year counter clears it, and a click lands with the heading clear */
.counter { top: 164px; }
.brief, .chapter-label, .now { scroll-margin-top: 132px; }   /* bar 80 + agenda 52, as on Brand: a click lands just past the reading line */
/* the reel in the lightbox: the frame is already 16:9, and the video fills it */
.lb video { display: block; width: 100%; height: 100%; background: #000; }
/* a link inside a paragraph reads as a link (owner, the same day: "make that inverted chaos link a proper link
   color and hover"); the page sets a { color: inherit } for its nav and footer, which left it looking like text */
.brief .txt p a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s ease, text-decoration-thickness .2s ease; }
.brief .txt p a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.brief .txt p a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
/* the hero's secondary buttons are frosted glass over the dot field (owner, the same day: "make these secondary
   buttons actually have a frosted glassmorphism 'transparent' blurred background"); hover keeps its solid fill */
.hero .btn-secondary { background: color-mix(in srgb, var(--background) 40%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
.hero .btn-secondary:hover { background: var(--btn-bg); }