/* Shared chrome for the homepage and blog: sticky top bar, theme toggle, mobile menu, and footer. */
:root {
  --pe-forest: #123526;
  --pe-deep: #0D281C;
  --pe-cream: #EFE7D6;
  --pe-sand: #F1EADB;
  --pe-paper: #F8F4EA;
  --pe-accent: #A9CBA4;
  --pe-accent-ink: #3F6B41;
  --pe-on-dark: #D5DCCF;
  --pe-label-dark: #B9C4B4;
  --pe-label: #4B5F54;
  --pe-muted: #3C5247;
  --pe-ink-soft: #2E4A3C;
  --pe-line: rgba(18, 53, 38, 0.24);
  --pe-line-dark: rgba(239, 231, 214, 0.16);
  --pe-sans: 'Zilla Slab', Rockwell, Georgia, serif;
  --pe-serif: 'Newsreader', Georgia, serif;
  --pe-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pe-gutter: clamp(20px, 5vw, 64px);
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--pe-cream); color: var(--pe-forest);
  font-family: var(--pe-sans); font-weight: 600; border-radius: 22px; text-decoration: none;
}
.skip-link:focus { top: 16px; }
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pe-wrap { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 0 var(--pe-gutter); }

/* Same-site navigations cross-fade, and the top bar and chat dock hold their place, so moving
   between pages reads as one continuous page. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.pe-topbar { view-transition-name: pe-topbar; }

/* Top bar: stays pinned while the page scrolls. */
html { scroll-padding-top: 88px; } /* in-page links land below the pinned bar */
/* No smooth scroll until load, so arriving at /page/#section lands exactly (chrome.js adds .pe-ready). */
html:not(.pe-ready) { scroll-behavior: auto !important; }
.pe-topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--pe-forest); color: var(--pe-cream); border-bottom: 1px solid var(--pe-line-dark);
  font-family: var(--pe-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.pe-topbar *, .pe-topbar *::before, .pe-topbar *::after { box-sizing: border-box; }
body .pe-topbar a { color: inherit; } /* beats page-level link colors such as .pe-home a */
.pe-topbar :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pe-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 14px 0; }
.pe-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.pe-brand img { display: block; }
.pe-brand span { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pe-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.pe-links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; }
.pe-topbar .pe-links a:hover, .pe-topbar .pe-links a[aria-current] { color: #FFFFFF; }
.pe-topbar .pe-links a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.pe-links .pe-navcta { height: 44px; padding: 0 20px; font-weight: 500; border: 1px solid rgba(239, 231, 214, 0.6); border-radius: 22px; }
.pe-theme, .pe-menu {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: transparent; color: inherit; border: 1px solid rgba(239, 231, 214, 0.35); border-radius: 50%; cursor: pointer;
}
.pe-theme:hover { background: rgba(239, 231, 214, 0.1); }
.pe-theme[hidden] { display: none; }
.pe-theme .icon-moon { display: none; }
.pe-menu { display: none; width: 48px; height: 48px; border-color: rgba(239, 231, 214, 0.6); }
.pe-mobile-menu { display: flex; flex-direction: column; padding: 4px 0 20px; }
.pe-mobile-menu[hidden] { display: none; }
.pe-mobile-menu a {
  display: flex; align-items: center; min-height: 56px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  text-decoration: none; border-bottom: 1px solid rgba(239, 231, 214, 0.12);
}
.pe-topbar .pe-mobile-menu a.pe-mobile-cta {
  justify-content: center; height: 52px; min-height: 0; margin-top: 16px; font-size: 16px; font-weight: 600;
  background: var(--pe-cream); color: var(--pe-forest); border: 1px solid var(--pe-cream); border-radius: 26px;
}
.pe-logo-cream { display: none !important; }

/* Footer */
.pe-footer {
  padding: 0; border: 0; background: var(--pe-deep); color: var(--pe-label-dark);
  font-family: var(--pe-sans); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.pe-footer-inner {
  padding-top: 72px; padding-bottom: 120px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; font-size: 14px;
}
.pe-wordmark {
  flex: 1 1 100%; padding-bottom: 40px; font-size: clamp(44px, 10.5vw, 148px); line-height: 0.95; font-weight: 500;
  letter-spacing: -0.045em; color: var(--pe-cream);
}
.pe-wordmark em { font-family: var(--pe-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--pe-accent); }
.pe-footer-brand { display: flex; align-items: center; gap: 12px; color: var(--pe-cream); }
.pe-footer-brand img { display: block; }
.pe-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.pe-footer-links a, .pe-footer-links button {
  display: flex; align-items: center; min-height: 44px; color: var(--pe-label-dark);
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.pe-footer-links button { padding: 0; background: none; border: 0; cursor: pointer; }
.pe-footer-links a:hover, .pe-footer-links button:hover { color: #FFFFFF; }
.pe-madewith {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 20px;
  border-top: 1px solid rgba(239, 231, 214, 0.14); font-size: 15px; color: var(--pe-cream);
}

@media (max-width: 760px) {
  .pe-links > a { display: none; }
  .pe-links { gap: 4px 10px; }
  .pe-menu { display: flex; }
}

/* Cream (light) theme */
[data-theme="cream"] .pe-topbar { background: var(--pe-paper); color: var(--pe-forest); border-bottom-color: var(--pe-line); }
[data-theme="cream"] .pe-topbar .pe-links a:hover, [data-theme="cream"] .pe-topbar .pe-links a[aria-current] { color: var(--pe-deep); }
[data-theme="cream"] .pe-links .pe-navcta { border-color: rgba(18, 53, 38, 0.5); }
[data-theme="cream"] .pe-theme { border-color: var(--pe-line); }
[data-theme="cream"] .pe-theme:hover { background: rgba(18, 53, 38, 0.06); }
[data-theme="cream"] .pe-theme .icon-sun { display: none; }
[data-theme="cream"] .pe-theme .icon-moon { display: block; }
[data-theme="cream"] .pe-menu { border-color: rgba(18, 53, 38, 0.5); }
[data-theme="cream"] .pe-mobile-menu a { border-bottom-color: var(--pe-line); }
[data-theme="cream"] .pe-topbar .pe-mobile-menu a.pe-mobile-cta { background: var(--pe-forest); color: var(--pe-cream); border-color: var(--pe-forest); }
[data-theme="cream"] .pe-logo-forest { display: none !important; }
[data-theme="cream"] .pe-logo-cream { display: block !important; }
[data-theme="cream"] .pe-footer { background: var(--pe-sand); color: var(--pe-muted); }
[data-theme="cream"] .pe-wordmark, [data-theme="cream"] .pe-footer-brand, [data-theme="cream"] .pe-madewith { color: var(--pe-forest); }
[data-theme="cream"] .pe-wordmark em { color: var(--pe-accent-ink); }
[data-theme="cream"] .pe-footer-links a, [data-theme="cream"] .pe-footer-links button { color: var(--pe-muted); }
[data-theme="cream"] .pe-footer-links a:hover, [data-theme="cream"] .pe-footer-links button:hover { color: var(--pe-deep); }
[data-theme="cream"] .pe-madewith { border-top-color: var(--pe-line); }
[data-theme="cream"] .pe-madewith svg { fill: var(--pe-accent-ink); }