/* LFE topic structure, shared by every page.
   Bar 1 (.site-bar): the site and its topics. Bar 2 (.topic-bar, sticky): this topic's parts.
   Each page's stylesheet sets --page-w to its own content width so the bars line up.
   House tokens only. Load after lfe.css. */
:root { --page-w: min(1060px, calc(100% - 80px)); }
.bar-inner { width: var(--page-w); margin-inline: auto; display: flex; align-items: center; }

.site-bar { border-bottom: 1px solid var(--hairline); }
.site-bar .bar-inner { gap: 26px; padding: 14px 0; }
.site-bar .wordmark { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.site-bar nav { display: flex; gap: 22px; margin-left: auto; font-size: 16px; }
.site-bar nav a { text-decoration: none; color: var(--muted); padding-block: 6px; transition: color 200ms ease; }
.site-bar nav a:hover, .site-bar nav a:focus-visible { color: var(--accent); }
.site-bar nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.site-bar .theme-toggle { color: var(--muted); min-height: 32px; }

.topic-bar { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.topic-bar .bar-inner { gap: 22px; padding: 10px 0; align-items: baseline; }
.topic-bar .topic-name { font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; margin-right: 6px; }
.topic-bar nav { display: flex; gap: 20px; font-size: 16px; }
.topic-bar nav a { text-decoration: none; color: var(--muted); padding-block: 4px; }
.topic-bar nav a:hover { color: var(--accent); }
.topic-bar nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; text-decoration-thickness: 1.5px; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

@media (max-width: 760px) {
  :root { --page-w: calc(100% - 36px); }
  .site-bar .bar-inner { flex-wrap: wrap; gap: 4px 16px; padding-block: 10px; }
  .site-bar .wordmark { flex: 1; font-size: 11px; }
  .site-bar nav { order: 3; width: 100%; margin-left: 0; gap: 20px; font-size: 15px; }
  .topic-bar .bar-inner { gap: 14px; flex-wrap: wrap; }
  .topic-bar .topic-name { font-size: 16px; }
  .topic-bar nav { gap: 16px; font-size: 15px; }
}

@media print { [data-reveal], .ideas-list > li { opacity: 1 !important; transform: none !important; } .topic-bar { position: static; } }