/* Shared navigation and interaction surfaces. Content typography lives in styles.css. */
.ui-icon { display:inline-block; width:1.25rem; height:1.25rem; flex:0 0 1.25rem; vertical-align:middle; }
.ui-pair { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .6rem; line-height:1.4; }
.ui-pair [lang="en"] { font-size:.875em; font-weight:400; color:var(--muted); }
.ui-part { display:inline; margin-inline-start:.5em; }
.ui-part[lang="en"] { color:inherit; font-size:.875em; font-weight:400; letter-spacing:0; text-transform:none; }
.site-header { position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--paper) 96%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-shell { display:flex; align-items:center; gap:2rem; min-height:var(--header-height); }
.brand { display:inline-flex; align-items:baseline; gap:.6rem; min-height:44px; padding:.65rem 0; font-size:1rem; font-weight:620; white-space:nowrap; }
.brand [lang="en"] { font-size:.875rem; font-weight:400; color:var(--muted); }
.main-nav { display:flex; gap:2rem; margin-left:auto; align-items:center; }
.main-nav a { display:flex; align-items:center; position:relative; min-height:44px; padding:.5rem 0; font-size:1rem; color:var(--muted); }
.main-nav a[aria-current="page"] { color:var(--accent); font-weight:620; }
.main-nav a::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:currentColor; transform:scaleX(0); transition:transform .18s ease; }
.main-nav a[aria-current="page"]::after,.main-nav a:hover::after { transform:scaleX(1); }
.theme-toggle { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:50%; color:var(--ink); background:transparent; cursor:pointer; }
.theme-toggle:hover { background:var(--paper-strong); }
.project-nav { position:sticky; top:calc(var(--header-height) + 1px); z-index:80; background:var(--paper); border-block:1px solid var(--line); }
.project-nav-shell { display:flex; gap:2rem; align-items:center; min-height:4.5rem; }
.project-nav-origin { display:flex; flex:0 0 auto; align-items:center; gap:1.5rem; }
.project-nav-origin a { display:inline-flex; align-items:center; gap:.375rem; min-height:44px; font-size:.875rem; color:var(--muted); }
.project-nav-origin a [lang="en"] { display:none; }
.project-nav-name { font-size:.9375rem; font-weight:620; white-space:nowrap; }
.chapter-track { display:flex; flex:1; align-self:stretch; gap:1.5rem; min-width:0; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
.chapter-track::-webkit-scrollbar { display:none; }
.chapter-track a { display:flex; align-items:center; flex-shrink:0; min-height:44px; padding:.75rem 0; color:var(--muted); border-bottom:2px solid transparent; font-size:.875rem; }
.chapter-track .ui-pair { flex-direction:column; align-items:flex-start; gap:.15rem; }
.chapter-track .ui-pair [lang="en"] { font-size:.75rem; }
.chapter-track a[aria-current="location"] { color:var(--accent); border-color:var(--accent); font-weight:620; }
.chapter-index { display:none; }
.project-nav a:hover { color:var(--accent); }
.project-nav.is-stuck { box-shadow:0 4px 12px #00000004; }
.context-return { position:sticky; top:var(--header-height); z-index:80; border-bottom:1px solid var(--line); background:var(--paper-strong); }
.context-return .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.25rem; }
.context-return a { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; color:var(--accent); font-size:.875rem; }
.context-return p { margin:0; font-size:.875rem; color:var(--muted); }
.site-footer { margin-top:0; padding-bottom:2rem; border-top:1px solid var(--line); }
.journey-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:1rem 0; border-bottom:1px solid var(--line); }
.journey-links a { display:flex; justify-content:center; text-align:center; align-items:center; gap:.5rem; min-height:52px; padding:.35rem; color:color-mix(in srgb,var(--ink) 70%,var(--paper)); font-size:1rem; font-weight:400; transition:color .18s ease; }
.journey-links a + a { border-left:1px solid var(--line); }
.journey-links a:hover,.journey-links a:focus-visible { color:var(--ink); }
.next-project small { display:flex; align-items:baseline; justify-content:center; gap:.5rem; font-size:.8125rem; color:var(--muted); }
.next-project small [lang="en"] { font-size:.75rem; }
.next-project strong { display:block; margin-top:.15rem; font-size:1rem; font-weight:400; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; padding-top:2rem; }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { display:flex; align-items:center; min-height:44px; font-size:.875rem; }
.copyright { font-size:.75rem; color:var(--muted); }
.notes-jump { display:flex; gap:1.5rem; margin-top:1.5rem; }
.notes-jump a { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; border-bottom:1px solid var(--line); }
.notes-about { margin-top:5rem; border-top:1px solid var(--line); }
.notes-about .about-heading { padding-top:4rem; }
.notes-about .about-intro { padding-top:1.5rem; }
.timeline-entry h3 a { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.25em; }
.timeline-entry h3 a:hover { color:var(--accent); text-decoration-color:currentColor; }
.section-heading-pair { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; }
.text-link > .ui-icon,.publication-jump > .ui-icon { margin-left:.25rem; }
.inline-flow-icon { margin:0 .35em; width:1em; height:1em; vertical-align:-.1em; }
.return-target:focus,.project-index-row[data-return-focus]:focus { outline:none; }
.lightbox-open { overflow:hidden; }
.evidence-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:1.5rem; border:0; background:#101411f5; color:#f0f3ed; }
.evidence-dialog::backdrop { background:#101411ed; }
.evidence-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; }
.evidence-dialog-bar span { font-size:.875rem; }
.evidence-dialog-bar button { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; color:inherit; background:transparent; border:1px solid #ffffff50; cursor:pointer; }
.evidence-dialog-stage { display:flex; justify-content:center; align-items:flex-start; height:calc(100% - 60px); overflow:auto; padding-top:1rem; }
.evidence-dialog-stage img { width:auto; max-width:100%; height:auto; object-fit:contain; }
@media(max-width:64rem) {
  .project-nav-shell { gap:1.25rem; }
  .project-nav-origin { gap:1rem; }
  .chapter-track { gap:1.25rem; }
  .main-nav { gap:1.5rem; }
}
@media(max-width:48rem) {
  .nav-shell { gap:.75rem; }
  .brand { display:flex; flex-direction:column; justify-content:center; gap:0; line-height:1.35; padding:0; font-size:.9375rem; }
  .brand [lang="en"] { font-size:.6875rem; }
  .main-nav { gap:1rem; }
  .main-nav .ui-pair { flex-direction:column; gap:0; align-items:center; }
  .main-nav a { justify-content:center; min-width:44px; font-size:.9375rem; }
  .main-nav .ui-pair [lang="en"] { font-size:.6875rem; }
  .project-nav-shell { flex-direction:column; align-items:stretch; gap:0; padding-top:.15rem; }
  .project-nav-origin { justify-content:space-between; min-height:40px; }
  .project-nav-name { font-size:.875rem; }
  .chapter-track { min-height:52px; gap:1.5rem; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); }
  .chapter-track a { padding:.3rem 0 .5rem; font-size:.8125rem; }
  .chapter-track .ui-pair [lang="en"] { font-size:.6875rem; }
  .context-return p { display:none; }
  .context-return a .ui-pair { gap:0 .5rem; }
  .journey-links > a > .ui-pair { flex-direction:column; gap:0; }
  .next-project small { flex-direction:column; align-items:center; gap:0; }
  .footer-grid { display:grid; grid-template-columns:1fr auto; gap:1rem; }
  .footer-links { gap:1rem; }
  .footer-links .ui-pair { flex-direction:column; gap:0; }
  .copyright { grid-column:1 / -1; }
  .notes-about { margin-top:3rem; }
  .notes-about .about-heading { padding-top:3rem; }
}
@media(max-width:360px) {
  .main-nav { gap:.5rem; }
  .nav-shell { gap:.25rem; }
}