/* The header every page outside the app shares (scripts/pages/site.mjs), made like the front door's (styles.css,
   .landing-pages): the mark, the pages in spaced capitals, the language to go to by its own name. A wide screen has
   the pages as a row between the mark and the language; a narrow one has a key that opens them as a list (a script
   in the header toggles data-open; with no script the pages stay a row under the mark). */
.site {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 18px;
  box-sizing: border-box; padding: 12px max(16px, calc((100% - 1000px) / 2));
  background: rgba(6, 8, 11, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* The mark is the app's (wordmark.css, from packages/deck), at the size of the app's own top bar. */
.site .brand { flex: none; display: block; color: var(--ink); text-decoration: none; }
.site .brand .wordmark { font-size: 17px; }
[dir='rtl'] .site .brand { direction: ltr; }
.site nav {
  display: flex; flex: 1; flex-wrap: wrap; justify-content: center; gap: 2px 13px; margin: 0;
  font-family: 'Chakra Petch', Barlow, sans-serif; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
}
[lang='he'] .site nav { font-family: 'IBM Plex Sans Hebrew', Barlow, sans-serif; font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.site nav a { padding: 6px 0; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap; }
.site nav a:hover, .site nav a:focus-visible { color: var(--ink); border-bottom-color: #ffe066; outline: none; }
.site nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.site .lang { flex: none; padding: 5px 12px; font-size: 13px; line-height: 1.2; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-2); border-radius: 2px; }
.site .lang:hover { color: #fff; border-color: #fff; }
.site .menu-key { display: none; }
@media (max-width: 1099.98px) {
  .site { gap: 10px; padding-inline: 14px; }
  .site .lang { margin-inline-start: auto; }
  /* No script: the pages as a row of their own under the mark and the language. */
  .site { flex-wrap: wrap; }
  .site nav { flex: 1 1 100%; order: 3; justify-content: flex-start; padding-bottom: 6px; }
  /* With one: a key in the corner, and the pages as a list under it when it is open. */
  html.js .site { flex-wrap: nowrap; }
  html.js .site nav {
    display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 14px; width: min(280px, calc(100vw - 28px)); max-height: calc(100dvh - 90px); overflow-y: auto;
    flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; padding: 6px;
    font-size: 13px; letter-spacing: 0.1em;
    background: rgba(4, 6, 10, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(150, 168, 186, 0.2); border-radius: 3px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  }
  [lang='he'] html.js .site nav, html.js [lang='he'] .site nav { font-size: 15px; }
  html.js .site[data-open] nav { display: flex; }
  html.js .site nav a { display: block; padding: 14px; border-bottom: 0; border-inline-start: 2px solid transparent; }
  html.js .site nav a:hover, html.js .site nav a:active { background: rgba(255, 224, 102, 0.1); border-inline-start-color: #ffe066; }
  html.js .site nav a[aria-current='page'] { border-inline-start-color: var(--accent); }
  html.js .site .menu-key {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 30px; padding: 0; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  }
  .site .menu-key .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .site .menu-key .cross { display: none; }
  .site[data-open] .menu-key { color: #ffe066; }
  .site[data-open] .menu-key .bars { display: none; }
  .site[data-open] .menu-key .cross { display: inline; }
}

/* The home page's look, without the galaxy: the app's own palette, its soft overhead glows and the faint 46px deck
   grid that lies under the galaxy (styles.css, body), square keys like the door's, and the door's mono labels.
   Every page that links this file takes it: the section pages, the topic pages, the simulations library. */
:root { --font-display: 'Chakra Petch', Barlow, sans-serif; --signal: #ffc61a; --signal-bright: #ffe066; --signal-glow: rgba(255, 190, 20, 0.55); --bg: #06080b; --ink: #dcedf6; --ink-2: #8fabbd; --ink-3: #5d7688; --line: rgba(168, 196, 210, 0.14); --line-2: rgba(150, 190, 205, 0.28); --accent: #ffc61a; --card: rgba(9, 12, 16, 0.62); }
html { background: var(--bg); }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 138, 61, 0.07), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 115%, rgba(125, 140, 245, 0.05), transparent 60%),
    linear-gradient(rgba(126, 180, 208, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 180, 208, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--accent); }
.site { background: rgba(6, 8, 11, 0.86); }
.site nav a[aria-current='page'] { border-bottom-color: var(--accent); }
.kicker, .part .kicker { font-family: ui-monospace, 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.18em; }
/* The door's key: a square outline, spaced capitals, lit white on hover. The one filled look the pages had (a round
   blue pill) is gone with the blue. */
.go, .part .go {
  display: inline-block; margin: 0; padding: 14px 30px; border-radius: 0;
  font-family: 'Chakra Petch', Barlow, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: transparent; border: 1px solid #fff; text-decoration: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
[lang="he"] .go { font-family: 'IBM Plex Sans Hebrew', Barlow, sans-serif; letter-spacing: 0.04em; text-transform: none; }
.go:hover { background: #fff; color: var(--bg); box-shadow: 0 0 28px -6px rgba(255, 255, 255, 0.6); filter: none; }
.go.quiet { color: var(--ink-2); border-color: var(--line-2); background: transparent; }
.go.quiet:hover { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
.part .panel, dl, .landing-guide { border-radius: 2px; }
.landing-guide img, .lead img { border-radius: 2px; }

/* One width for every page: the section pages, the topic pages and the library. The header's content and the page's
   content start and end on the same lines (1000px, the header's own measure, plus the 16px gutters). Text keeps a
   reading measure of its own inside it (topic.css, pages.css). */
main, main.wide, main.library { max-width: 1032px; margin: 0 auto; padding: 40px 16px 80px; box-sizing: border-box; }
@media (max-width: 640px) { main, main.wide, main.library { padding-inline: 14px; } } /* the phone header's own gutter */

footer { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 16px; }
/* The privacy and terms pages: the same width as the rest, their prose in a line a person can read. */
main > section > :is(p, ul, ol, h1, h2, .meta) { max-width: 46em; }

/* Going from one of these pages to another changes the content and the background; the header stays where it is.
   A cross-page view transition (Chrome, Edge, Safari 18.2+; elsewhere the page simply loads, with the same header in
   the same place). No script. The header is a layer of its own, shown as the new page's, so it never fades. */
@view-transition { navigation: auto; }
.site { view-transition-name: site; }
::view-transition-old(site) { display: none; }
::view-transition-new(site) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}