/* ============================================================
   Pharos - shared chrome and design tokens
   Source of truth for navigation, footer, palette, easing.
   Imported by every page. Page-specific styles stay inline.

   Path from each page:
     pharos/index.html                                   -> _admin/pharos.css
     pharos/<module>/index.html                          -> ../_admin/pharos.css
     pharos/<module>/<sub-page>/index.html               -> ../../_admin/pharos.css

   Convention: anything universal (palette, chrome, footer)
   lives here. Anything scene-specific or module-specific
   stays in the page's own <style> block.
============================================================ */

/* ---- design tokens ---- */
:root {
  /* Backgrounds - warm cream hierarchy */
  --bg:              #faf7f2;
  --bg-2:            #f3ece2;
  --bg-3:            #ede4d6;
  --surface:         #ffffff;
  --surface-2:       #fdf9f4;

  /* Borders */
  --border:          #e6d9c8;
  --border-2:        #d0c3b0;

  /* Text */
  --text:            #231a14;
  --text-dim:        #5a4a40;
  --text-muted:      #9a8878;

  /* Sunset accents */
  --coral:           #c84820;
  --coral-soft:      #e07848;
  --amber:           #a86010;
  --amber-soft:      #d09040;
  --lavender:        #6848a8;
  --lavender-soft:   #9878c8;
  --teal:            #2e7878;
  --teal-soft:       #5ea0a0;
  --rose:            #a84860;

  /* Layer accent palette (scene 7 / authoring layers) */
  --layer-1:         #a86010;
  --layer-2:         #2e7878;
  --layer-3:         #c84820;
  --layer-4:         #6848a8;
  --layer-5:         #a84860;

  /* Premium easing for entrance + hover transitions */
  --ease-premium:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Reserve space at the top of the viewport when scrolling to an anchor
   or via scrollIntoView, so the fixed nav (~124px tall) does not cover
   the start of the targeted section. */
html { scroll-padding-top: 130px; }

/* ============================================================
   MOBILE / VIEWPORT SIZING
   `.scene` is defined in each page's inline <style> as
   `min-height: 100vh`. That inline block loads AFTER this file, so
   a bare `.scene` selector here would lose the cascade tie. We raise
   specificity with `body .scene` to win it across every page.

   100dvh tracks the dynamic mobile viewport (the height that changes
   as the address bar shows/hides). Raw 100vh is the full height
   including the area behind the bar, which makes each scene taller
   than the screen and causes the scroll "jump" on phones. dvh removes
   it. The 100vh line stays first as a fallback for old browsers.
============================================================ */
body .scene { min-height: 100vh; min-height: 100dvh; }

@media (max-width: 768px) {
  /* The desktop scene padding (120px 40px 80px) eats a phone screen.
     96px top still clears the ~64px fixed nav. */
  body .scene { padding: 96px 20px 64px; }
  body .scene-mid { padding: 80px 20px; }
  .pharos-nav { padding: 16px 20px; }
}

/* ============================================================
   Scene-1 "Enter" button (module hero CTA)
   Sits at the bottom of scene-1, same size/treatment as the
   home page's "Enter the workspace" button. Modules use this
   to give the reader a clickable entry into the first content
   scene instead of a passive scroll hint.
============================================================ */
.scene-enter {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff3df 0%, #f0d8a0 45%, #d8a854 100%);
  border: 1px solid rgba(168, 96, 16, 0.5);
  border-radius: 4px;
  padding: 14px 32px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3a1f08;
  cursor: pointer;
  opacity: 0;
  box-shadow:
    0 4px 14px rgba(168, 96, 16, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(120, 60, 12, 0.2);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}
.scene-enter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-premium);
  pointer-events: none;
}
.scene-enter:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px rgba(168, 96, 16, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(120, 60, 12, 0.25);
}
.scene-enter:hover::before { transform: translateX(100%); }
.scene-enter > * { position: relative; z-index: 1; }

/* ============================================================
   Per-scene "Next" button
   Sits at the bottom of each scene to advance the reader without
   manual scrolling. Smaller sibling of the hero "Begin module"
   button. Used by every module via <div class="scene-next-wrap">.
============================================================ */
.scene-next-wrap { text-align: center; margin-top: 56px; }
.scene-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff3df 0%, #f0d8a0 45%, #d8a854 100%);
  border: 1px solid rgba(168, 96, 16, 0.5);
  border-radius: 4px;
  padding: 11px 28px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a1f08;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(168, 96, 16, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), gap 0.3s;
}
.scene-next::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-premium);
  pointer-events: none;
}
.scene-next:hover {
  transform: translateY(-1px);
  gap: 12px;
  box-shadow: 0 6px 18px rgba(168, 96, 16, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.scene-next:hover::before { transform: translateX(100%); }
.scene-next > * { position: relative; z-index: 1; }

/* ---- progress bar (top edge of viewport) ---- */
#progress-bar {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--amber));
  z-index: 200;
}

/* ============================================================
   BODY SCENE TYPOGRAPHY - shared across module pages.
   Page-specific overrides are allowed inline (notice page does this
   for slightly larger section copy).
============================================================ */
.eyebrow {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.eyebrow:not(#s1-eyebrow)::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-soft), transparent);
}

/* Hero eyebrow on scene-1: Cinzel with amber gradient lines flanking
   the text (matches the home page hero treatment). Override the
   default .eyebrow underline rule via :not(#s1-eyebrow) above. */
#s1-eyebrow {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--amber);
  padding: 0 28px;
  margin-bottom: 22px;
}
#s1-eyebrow::before,
#s1-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-soft), transparent);
}
#s1-eyebrow::before { right: 100%; }
#s1-eyebrow::after  { left: 100%; }

/* Replaced by the eyebrow's built-in gradient underline above.
   Kept as a no-op so existing markup does not need to change. */
.scene-divider { display: none; }

/* ============================================================
   Inline glossary term + hover tooltip
   <span class="term" data-tip="...">grep</span>
   Visual cue: teal underline. Hover reveals a rounded cream-amber
   tooltip with the data-tip content. Tooltip is pure CSS (no JS).
============================================================ */
.term {
  color: var(--teal);
  border-bottom: 1px dashed var(--teal);
  cursor: help;
  position: relative;
  font-weight: 500;
  transition: color 0.2s ease;
}
.term:hover { color: var(--coral); border-bottom-color: var(--coral); }
.term::before,
.term::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
}
.term::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 320px;
  padding: 11px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(254, 244, 226, 0.99) 0%, rgba(250, 230, 196, 0.99) 100%);
  border: 1px solid rgba(212, 160, 87, 0.4);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(120, 70, 30, 0.18), 0 2px 6px rgba(120, 70, 30, 0.1);
  z-index: 50;
}
.term::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, rgba(254, 244, 226, 0.99) 0%, rgba(250, 230, 196, 0.99) 100%);
  border-right: 1px solid rgba(212, 160, 87, 0.4);
  border-bottom: 1px solid rgba(212, 160, 87, 0.4);
  z-index: 51;
}
.term:hover::before,
.term:hover::after,
.term:focus::before,
.term:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.term:hover::before,
.term:focus::before {
  transform: translateX(-50%) translateY(0) rotate(45deg);
}
.section-title {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.section-body {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 460px;
}
.inline-chip {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(46,120,120,0.1);
  border: 1px solid var(--teal-soft);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--teal);
}

/* ============================================================
   TOP NAV - sticky, condenses on scroll
============================================================ */
.pharos-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s var(--ease-premium),
              backdrop-filter 0.3s var(--ease-premium),
              padding 0.3s var(--ease-premium),
              border-bottom-color 0.3s var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.pharos-nav.condensed {
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 40px;
  border-bottom-color: var(--border);
}
.pharos-nav-brand {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.005em;
  text-decoration: none;
  line-height: 1;
  background: linear-gradient(120deg, var(--coral) 0%, var(--amber) 60%, var(--coral-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: filter 0.25s var(--ease-premium);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pharos-nav-brand:hover { filter: brightness(1.1) saturate(1.15); }
.pharos-nav-logo {
  height: 84px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(168, 96, 16, 0.18));
  flex-shrink: 0;
}
.pharos-nav-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* nav links + Modules dropdown */
.pharos-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.pharos-nav-trigger {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s var(--ease-premium), filter 0.2s var(--ease-premium);
}
.pharos-nav-trigger:hover { transform: translateY(-1px); filter: brightness(1.04); }
.pharos-nav-trigger:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.hamburger-bar {
  width: 26px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(135deg,
    #7a6845 0%,
    #d6c8a8 28%,
    #fef8e8 50%,
    #d6c8a8 72%,
    #7a6845 100%);
  box-shadow:
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 -0.5px 1px rgba(0, 0, 0, 0.40),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(60, 30, 15, 0.22);
  transition: transform 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium);
}
.pharos-nav-dropdown.open .hamburger-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.pharos-nav-dropdown.open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.pharos-nav-dropdown.open .hamburger-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.pharos-nav-link {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 4px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.25s var(--ease-premium);
  line-height: 1;
}
.pharos-nav-link:hover { color: var(--coral); }
.pharos-nav-link.active { color: var(--coral); }
.pharos-nav-dropdown { position: relative; }
.pharos-nav-caret {
  font-size: 14px;
  transition: transform 0.25s var(--ease-premium);
}
.pharos-nav-dropdown.open .pharos-nav-caret { transform: rotate(180deg); }
.pharos-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  transform: translateY(-6px);
  min-width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 38px rgba(60,30,15,0.12), 0 2px 8px rgba(60,30,15,0.06);
  padding: 14px 6px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium);
  z-index: 110;
}
.pharos-nav-dropdown.open .pharos-nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pharos-nav-dropdown-section + .pharos-nav-dropdown-section {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.pharos-nav-dropdown-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 14px 6px;
}
.pharos-nav-dropdown-menu a,
.pharos-nav-dropdown-menu .pharos-nav-dropdown-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 6px;
  background-image: linear-gradient(120deg, var(--coral) 0%, var(--amber) 60%, var(--coral-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-color 0.2s, filter 0.2s;
}
.pharos-nav-dropdown-menu a:hover {
  background-color: var(--bg-2);
  filter: brightness(1.08) saturate(1.12);
}
.pharos-nav-dropdown-menu a.active {
  background-color: var(--bg-2);
  filter: brightness(1.05) saturate(1.15);
}
.pharos-nav-dropdown-sublink {
  padding-left: 28px !important;
}
.pharos-nav-dropdown-disabled {
  color: var(--text-muted);
  cursor: default;
}
.tag-soon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 3px;
}
@media (max-width: 720px) {
  .pharos-nav-meta { display: none; }
  .pharos-nav-links { gap: 12px; }
}

/* ============================================================
   SIDE TOC - sticky right-side scene index, sub-pages only
============================================================ */
.side-toc {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  z-index: 90;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  opacity: 0;
  animation: toc-fade-in 0.6s var(--ease-premium) 0.4s forwards;
}
@keyframes toc-fade-in { to { opacity: 1; } }
@media (max-width: 1240px) { .side-toc { display: none; } }

.side-toc-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 14px 8px 20px;
  border-bottom: 1px solid var(--border);
  margin: 0 8px 8px 0;
}
.side-toc-item {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 14px 6px 20px;
  border-left: 2px solid transparent;
  transition: color 0.25s var(--ease-premium),
              border-left-color 0.25s var(--ease-premium),
              padding-left 0.25s var(--ease-premium);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-toc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
  transition: color 0.25s, opacity 0.25s;
}
.side-toc-item:hover {
  color: var(--text-dim);
  padding-left: 22px;
}
.side-toc-item.active {
  color: var(--coral);
  border-left-color: var(--coral);
  font-weight: 500;
}
.side-toc-item.active .side-toc-num {
  color: var(--coral);
  opacity: 1;
}

/* ============================================================
   BACK-TO-TOP - circular button, sub-pages only
============================================================ */
.back-to-top {
  position: fixed;
  /* Sits above the persistent .contact-floater pill (bottom:20) so the two
     bottom-right controls stack instead of overlapping. */
  bottom: 84px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.32s var(--ease-premium),
              transform 0.32s var(--ease-premium),
              background 0.25s, color 0.25s, border-color 0.25s;
  z-index: 90;
  box-shadow: 0 4px 16px rgba(60,30,15,0.08);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--coral);
  color: var(--surface);
  border-color: var(--coral);
}
.back-to-top svg { width: 16px; height: 16px; }
/* Mobile: clear the smaller mobile floater pill (bottom:14). */
@media (max-width: 600px) {
  .back-to-top { bottom: 70px; right: 16px; }
}

/* ============================================================
   SOURCES LIST - cited references in module Sources scenes
============================================================ */
.sources-intro {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 8px;
}
.sources-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}
.source-item {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.25s var(--ease-premium),
              box-shadow 0.25s var(--ease-premium);
}
.source-item:hover {
  border-color: var(--lavender-soft);
  box-shadow: 0 4px 18px rgba(104,72,168,0.08);
}
.source-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 24px;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.source-info { flex: 1; min-width: 0; }
.source-publisher {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
  background: rgba(104,72,168,0.08);
  border: 1px solid rgba(104,72,168,0.2);
  padding: 2px 7px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.source-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: color 0.2s;
  line-height: 1.4;
}
.source-title:hover { color: var(--coral); }
.source-context {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 6px;
}
.source-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  word-break: break-all;
  display: block;
  letter-spacing: 0.01em;
}

/* ============================================================
   PHAROS FOOTER - shared across every page
============================================================ */
.pharos-footer {
  border-top: 1px solid var(--border);
  padding: 28px 40px;
  background: var(--bg-2);
}
.pharos-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}
.pharos-footer-brand {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.pharos-footer-brand a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--border-2);
  padding-bottom: 1px;
}
.pharos-footer-brand a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.pharos-footer-meta { color: var(--text-muted); }
.pharos-footer-meta strong { color: var(--text-dim); font-weight: 500; }

/* ============================================================
   HERO GLOW PARALLAX - subtle depth drift on scene-hero radial glows
   Added 2026-05-23 per roadmap P3 "Pharos visual polish".

   Scene-hero pseudo-element backgrounds across pages are radial gradients
   sitting behind the content. This adds a very slow vertical drift so the
   glow reads as a separate depth layer instead of pinned wallpaper. No JS,
   no scroll listener; the animation runs at a calm 16s loop and is
   imperceptible at any single moment, only present as ambient motion.
============================================================ */
@keyframes hero-glow-drift {
  0%   { transform: translate3d(0, 0, 0)     scale(1.00); opacity: 1; }
  50%  { transform: translate3d(0, -14px, 0) scale(1.04); opacity: 0.96; }
  100% { transform: translate3d(0, 0, 0)     scale(1.00); opacity: 1; }
}

#scene-hero::before,
[data-hero-glow]::before {
  will-change: transform, opacity;
  animation: hero-glow-drift 16s ease-in-out infinite;
}

/* ============================================================
   REDUCED MOTION - chrome animations off
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .side-toc { opacity: 1; animation: none; }
  .pharos-nav,
  .pharos-nav.condensed,
  .pharos-nav-caret,
  .pharos-nav-dropdown-menu,
  .back-to-top {
    transition-duration: 0.01s !important;
  }
  /* Parallax off for users who have asked OS-level to reduce motion. */
  #scene-hero::before,
  [data-hero-glow]::before {
    animation: none !important;
  }
}