/* The site nav: the landing page, the blog and the other public pages.
   The same look as the dashboard's top nav ("Forests", Oct 19): the
   wordmark in Playfair, places as small bold words, where you are in blue
   with a short glowing line under it, one blue call to action, and a
   menu of intro + icon items on hover. Scoped to .sn so it can sit on pages
   with their own tokens; every rule leads with #siteNav so a page's own
   "#page a" or "#page h4" rules can't reach in. */
#siteNav {
  --sn-blue: #9db8ff; --sn-blue-bright: #b6c9ff;
  --sn-ink: #f2f2f2; --sn-muted: rgba(242, 242, 242, .74); --sn-dim: rgba(242, 242, 242, .55);
  --sn-line: rgba(200, 220, 255, .18); --sn-bg: #0b0b0b; --sn-radius: 14px;
  --sn-serif: "Playfair Display", "Iowan Old Style", "Times New Roman", serif;
  --sn-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 30px;
  height: 76px; padding: 0 clamp(16px, 4vw, 64px) 0 clamp(70px, 6vw, 96px);  /* clear of the beta ribbon */
  font-family: var(--sn-sans); color: var(--sn-ink);
}
/* A wash behind the row once the page has scrolled, so content can't ghost
   through it. At the very top the hero is right there and needs nothing. */
#siteNav::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 -26px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.94) 72%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  opacity: 0; transition: opacity .25s ease;
}
#siteNav.is-scrolled::before { opacity: 1; }
#siteNav a { text-decoration: none; }
#siteNav .sn-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sn-ink); white-space: nowrap; }
#siteNav .sn-brand img { width: 24px; height: 24px; display: block; }
#siteNav .sn-brand span { font-family: var(--sn-serif); font-weight: 800; font-size: 21px; letter-spacing: .005em; }
#siteNav .sn-tabs { display: flex; align-items: center; gap: 6px; }
#siteNav .sn-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
#siteNav .sn-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: none; border: none; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1.2 var(--sn-sans); color: var(--sn-muted); transition: color .15s; }
#siteNav .sn-tab:hover, #siteNav .sn-tab.is-open { color: var(--sn-blue-bright); }
#siteNav .sn-tab.is-active { color: var(--sn-blue); }
#siteNav .sn-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--sn-blue); box-shadow: 0 0 10px rgba(157,184,255,.7); }
#siteNav .sn-chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6; }
#siteNav .sn-cta { height: 42px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 2px;
  border: 1px solid var(--sn-blue); background: var(--sn-blue); color: #0a0a0a !important;
  font: 500 14.5px/1 var(--sn-sans); letter-spacing: .01em; white-space: nowrap; transition: background .15s, border-color .15s; }
#siteNav .sn-cta:hover { background: var(--sn-blue-bright); border-color: var(--sn-blue-bright); }
#siteNav .sn-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(11,11,11,.82); color: var(--sn-ink); cursor: pointer; align-items: center; justify-content: center; }

/* The menus: opaque, our corners, the cards' glint on the edge. */
#siteNav .sn-menu { position: absolute; top: calc(100% - 6px); z-index: 70; display: flex; align-items: stretch; padding: 24px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--sn-bg); border: 1px solid var(--sn-line); border-radius: var(--sn-radius);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.8), 0 30px 70px rgba(0,0,0,.55); }
#siteNav .sn-menu[hidden] { display: none; }
#siteNav .sn-menu::after { content: ""; position: absolute; inset: -1px; border-radius: calc(var(--sn-radius) + 1px); padding: 1px;
  pointer-events: none;
  background: conic-gradient(transparent 100deg, rgba(130,230,255,.42) 106deg, transparent 112deg,
    transparent 168deg, rgba(255,215,140,.42) 182deg, transparent 196deg,
    transparent 300deg, rgba(255,150,190,.42) 313deg, transparent 326deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
#siteNav .sn-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }  /* hover bridge */
#siteNav .sn-intro { flex: 0 0 230px; padding: 4px 26px 4px 6px; margin-right: 10px; border-right: 1px solid var(--sn-line); }
#siteNav .sn-intro h4 { margin: 0 0 10px; font-family: var(--sn-serif); font-size: 28px; font-weight: 800; line-height: 1.05;
  color: var(--sn-ink); text-transform: uppercase; letter-spacing: .01em; }
#siteNav .sn-intro h4 em { font-style: normal; color: var(--sn-blue); }
#siteNav .sn-intro p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--sn-muted); }
#siteNav .sn-intro a { color: var(--sn-blue); font-size: 15px; font-weight: 500; }
#siteNav .sn-intro a:hover { color: var(--sn-blue-bright); }
#siteNav .sn-items { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(180px, 250px));
  align-content: start; column-gap: 10px; row-gap: 6px; }
#siteNav .sn-items.one-col { grid-template-columns: minmax(180px, 240px); }
#siteNav .sn-menu--small { padding: 10px; }
#siteNav .sn-items a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--sn-ink); }
#siteNav .sn-items a:hover, #siteNav .sn-items a:focus-visible { background: rgba(200,220,255,.06); outline: none; }
#siteNav .sn-items svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--sn-blue); }
#siteNav .sn-items b { display: block; font-size: 15px; font-weight: 500; }
#siteNav .sn-items small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--sn-dim); line-height: 1.4; }
@media (max-width: 1000px) { #siteNav .sn-intro { display: none; } }

/* Phones and narrow windows: the words go behind one menu button. */
#siteNav .sn-sheet { position: absolute; top: calc(100% - 4px); right: clamp(12px, 3vw, 28px); z-index: 70;
  width: min(300px, 86vw); padding: 10px; background: var(--sn-bg); border: 1px solid var(--sn-line); border-radius: var(--sn-radius);
  box-shadow: 0 30px 70px rgba(0,0,0,.6); }
#siteNav .sn-sheet[hidden] { display: none; }
#siteNav .sn-sheet a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--sn-muted); font-size: 14.5px; }
#siteNav .sn-sheet a:hover { color: var(--sn-ink); background: rgba(200,220,255,.06); }
#siteNav .sn-sheet .sn-sheet-head { padding: 10px 14px 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sn-dim); }
@media (max-width: 900px) {
  #siteNav { gap: 14px; height: 68px; }
  #siteNav .sn-tabs, #siteNav .sn-login { display: none; }
  #siteNav .sn-burger { display: inline-flex; }
  #siteNav .sn-cta { height: 38px; padding: 0 16px; font-size: 13.5px; }
}
@media (max-width: 460px) {
  #siteNav .sn-brand span { font-size: 18px; }
  #siteNav .sn-cta { display: none; }
}

/* Anything the script hides (Log in, once signed in) stays hidden whatever its display rule. */
#siteNav [hidden] { display: none !important; }