/* ===========================================================================
   Shared chrome for every public page.
   ===========================================================================
   These pages were written self-contained, each with its own <style>, and the
   navigation drifted accordingly: the landing page had a real nav bar while
   every other page had a breadcrumb and no way to get anywhere except back to
   the front. Two pages had also quietly lost their link styling altogether.
   One file, linked by all of them, is the only way a "shared nav" stays
   shared.

   It is deliberately the ONLY stylesheet request these pages make. Everything
   page-specific stays inline, so a page still renders correctly on its own if
   this file fails to load — the nav degrades to a plain row of links rather
   than disappearing.
   =========================================================================== */

:root {
  /* Measured, not guessed: the bar is 65px tall at desktop sizes and 55px
     once the mobile padding kicks in. Everything that has to clear it or
     scroll past it is derived from this. */
  --nav-h: 65px;
}
@media (max-width: 900px) { :root { --nav-h: 55px; } }

/* --- links ---------------------------------------------------------------
   Lived in each page's own <style>, and the two that forgot rendered every
   prose link in browser-default blue on a warm-dark page. One rule now. */
a { color: var(--amber, #d4a574); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Keyboard focus. :focus-visible so a mouse click leaves no ring behind. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3);
}

/* --- the nav -------------------------------------------------------------- */
/* Nine tab stops now sit in front of the content on every page, so keyboard
   users get a way past them. Moved rather than hidden: display:none and
   visibility:hidden both take it out of the tab order, which is the one thing
   it must stay in. */
.sitenav-skip {
  position: absolute;
  top: 10px; left: 12px;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--amber, #d4a574);
  color: var(--bg, #0c0c0a);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform 0.15s ease;
}
.sitenav-skip:focus { transform: translateY(0); text-decoration: none; }

.sitenav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 48px;
  /* Pages set line-height for body copy; inherited into the bar it makes the
     bar's height depend on which page it is on. Pin it. */
  line-height: 1.1;
  background: rgba(12, 12, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, #2a2820);
}

.sitenav-brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink, #f4ede0);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sitenav-brand:hover { text-decoration: none; }
.sitenav-brand .zero { color: var(--amber, #d4a574); font-size: 23px; }

/* Which page you are on. The breadcrumb these pages already had, kept —
   losing it to gain a nav would trade one kind of orientation for another. */
.sitenav-crumb {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint, #6b6359);
  flex: 0 0 auto;
}

.sitenav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: 18px;
  /* Room for a focus ring: overflow-x makes this a scroll container, and a
     scroll container clips a box-shadow that reaches outside its padding box.
     Without this, tabbing into the nav shows nothing at all. */
  padding: 4px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  /* Both of these matter: min-width lets the flex item shrink below its
     content, and the scroll is what it does once it has. Without them a
     laptop-width window between the desktop layout and the 900px breakpoint
     pushed the whole page into a horizontal scroll. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sitenav-links::-webkit-scrollbar { display: none; }
.sitenav-links a {
  color: var(--ink-dim, #a8a094);
  text-decoration: none;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.sitenav-links a:hover { color: var(--ink, #f4ede0); text-decoration: none; }
/* The page you are on should not offer to take you to itself. */
.sitenav-links a[aria-current="page"]:not(.sitenav-cta) { color: var(--amber, #d4a574); }

/* Deliberately a sibling of .sitenav-links, not a child: the link list scrolls
   on a narrow screen, and inside it the button — the one control these pages
   exist to offer — scrolled off the right edge of a phone and was simply not
   there. It also means `.sitenav-links a` (0,1,1) no longer outranks it; the
   selectors below stay defensive about that anyway. */
.sitenav .sitenav-cta {
  flex: 0 0 auto;
  background: var(--amber, #d4a574);
  color: var(--bg, #0c0c0a);
  padding: 9px 16px;
  border-radius: 4px;
  border: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.sitenav .sitenav-cta:hover {
  background: #e8b87d;
  color: var(--bg, #0c0c0a);
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(212, 165, 116, 0.3);
}
/* On the trial page itself the button is a label, not an invitation. */
.sitenav .sitenav-cta[aria-current="page"],
.sitenav .sitenav-cta[aria-current="page"]:hover {
  background: transparent;
  color: var(--amber, #d4a574);
  box-shadow: inset 0 0 0 1px var(--amber, #d4a574);
}

/* Push page content clear of the fixed bar. Every page wraps its content in
   one of these two, and each sets its own top padding, so replace it with a
   value measured from the bar rather than hoping the old one still clears. */
body.has-sitenav .wrap { padding-top: calc(var(--nav-h) + 40px); }
body.has-sitenav > main { padding-top: calc(var(--nav-h) + 40px); }
/* An in-page anchor must not land underneath the bar. */
:target { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* The crumb is the first thing to go: it says where you already are, which
   the page itself also says, while every link next to it goes somewhere. */
@media (max-width: 1100px) {
  .sitenav-crumb { display: none; }
}

@media (max-width: 900px) {
  .sitenav { padding: 12px 20px; gap: 14px; }
  /* The landing page used to hide every link below this width, which left a
     phone with no navigation at all. They scroll instead (see above): no JS,
     no hamburger, and nothing becomes unreachable. */
  .sitenav-links { gap: 20px; margin-right: 6px; }
  .sitenav .sitenav-cta { padding: 8px 12px; }
}