/* Draft G's shared chrome (2026-09-28): the palette, the pill and the top bar and footer, in one
   file so the homepage and every sub-page (About, Privacy, Terms, Credits, Support) wear the same
   ones. Loaded after lounge.css and round3.css, in the place g.html's inline tokens stood, so the
   cascade on the homepage is unchanged. build_live_g.py copies it to dist/g/chrome.css.

   Blush paper, plum ink, a dusty rose accent, and plum instead of black for the deep bands, so the
   dark sections read as evening, not night. */
:root {
  --bg: #f6eeea; --bg-2: #efe3de; --ink: #2b1f25; --soft: #6f5c64; --dim: #cdbcc1;
  --accent: #a8575f; --link: #2b1f25; --line: rgba(43,31,37,.12);
  --tile: #efe3de; --tile-2: #e6d6d0; --nav-bg: rgba(246,238,234,.82); --foot-bg: #efe3de;
  --plum: #2b1f25; --rose-soft: #e9cfcc;
}
.btn { background: var(--ink); color: #f6eeea; }

/* The page you are on is bold in the top bar and the footer (aria-current="page"). Each text link
   carries its own label in data-text. Two copies of it in the bold weight ride on the link:
   ::after, invisible and zero-height, holds the link at its bold width on every page, so nothing
   beside it moves when one turns bold; ::before lies exactly over the regular text and is the bold
   you see. Turning bold is a cross-fade, never a weight switch: the regular text fades to
   transparent while the bold layer fades in (2026-09-29, web motion law). On a page load the bold
   fades in once from regular, which is what a browser without View Transitions shows; with them,
   the header also cross-fades from the old page's header, so the old page's bold fades out. */
.nav .links a:not(.btn), .foot nav a { position: relative; display: inline-flex; flex-direction: column; align-items: center; text-decoration-line: none; }
.foot nav a { align-items: flex-start; } /* the footer reads left to right; the spare width goes after the word */
.nav .links a:not(.btn)::after, .foot nav a::after,
.nav .links a:not(.btn)::before, .foot nav a::before {
  content: attr(data-text); content: attr(data-text) / "";
  font-weight: 600; pointer-events: none; user-select: none;
}
.nav .links a:not(.btn)::after, .foot nav a::after { height: 0; overflow: hidden; visibility: hidden; }
.nav .links a:not(.btn)::before, .foot nav a::before {
  position: absolute; inset: 0; text-align: center; color: var(--ink); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.foot nav a::before { text-align: left; }
.nav .links a:not(.btn):not([aria-current]):hover, .foot nav a:not([aria-current]):hover { color: var(--ink); }
.nav .links a[aria-current="page"], .foot nav a[aria-current="page"] {
  color: transparent; transition: color var(--dur-base) var(--ease-in-out);
  animation: bold-regular-out var(--dur-base) var(--ease-in-out) var(--page-in-start) backwards;
}
.nav .links a[aria-current="page"]::before, .foot nav a[aria-current="page"]::before {
  opacity: 1; animation: bold-in var(--dur-base) var(--ease-in-out) var(--page-in-start) backwards;
}
@keyframes bold-in { from { opacity: 0; } }
@keyframes bold-regular-out { from { color: var(--soft); } }
@media (forced-colors: active) {
  .nav .links a:not(.btn)::before, .foot nav a::before { display: none; }
  .nav .links a[aria-current="page"], .foot nav a[aria-current="page"] { color: LinkText; font-weight: 600; }
}

/* WEB MOTION (2026-09-29, docs/handoff/claude-memory/web-motion-law.md). Timing tokens: base.css.

   Page to page, same tab: cross-document View Transitions (Chrome 126+, Safari 18.2+). The top bar
   is its own layer (site-nav) and stays put; the old and new bar cross-fade in place, which is what
   fades the old page's bold out and the new page's bold in. The old page fades out on top of the new
   one, whose content is live and runs its own entrance cascade (page.css, the hero in g.html), so
   the old page fades out while the new one cascades in. Without View Transitions (Firefox) the new
   page still cascades in on load. Nothing is ever hidden by script, and the cascade is CSS
   animations with a backwards fill: if the CSS fails, the text is simply there. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: page-out var(--dur-page-out) var(--ease-in-out) both; mix-blend-mode: normal; z-index: 1; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(site-nav) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-in-out); }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-in-out); }
@keyframes page-out { to { opacity: 0; } }

/* the entrance cascade's two moves: text rises in, the lock-screen cards settle down into place */
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(calc(-1 * var(--hero-drop))) scale(var(--settle-scale)); } } /* the hero's original ls-in */

/* in-page links glide; the sticky top bar never covers the heading you land on. Reduced motion
   leaves scroll-behavior at auto, so anchors jump. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:root { --nav-h: 52px; }
[id] { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* nav: About and Privacy stay in the bar on phones; the in-page links give way below 600 px */
@media (max-width: 600px) {
  .nav .links a:not(.btn) { display: none; }
  .nav .links { gap: 14px; }
  .nav .links a.keep { display: inline-flex; }
  .nav .brand { font-size: 17px; gap: 8px; }
  .nav .brand img { width: 32px; }
  .nav .links .btn { white-space: nowrap; padding-inline: 14px; }
  .nav .links .btn .long { display: none; } /* the App Store's own word on a phone: Get */
}
@media (max-width: 380px) { .nav .links { gap: 8px; } /* the bold reserve already adds air around each link */ .nav .wrap { gap: 10px; } .nav .brand { font-size: 16px; gap: 6px; } .nav .brand img { width: 28px; } }