/*
 * site-chrome.css — the joelbondoux.net shell for standalone pages
 * ---------------------------------------------------------------------------
 * The homepage (index.html) is a compiled bundle: its nav, footer, design
 * tokens, fonts and animated canvas all live inside that bundle's template
 * string. Standalone pages (tools.html, and privacy.html / action-items.html
 * when they adopt this) can't reach any of it, which is why they used to look
 * like a different website.
 *
 * This file + site-chrome.js reproduce that shell:
 *   - the same tokens, including the `[data-theme="dark"]` set the site's own
 *     toggle drives (NOT prefers-color-scheme alone — see site-chrome.js)
 *   - the same three families, from real files in /fonts extracted out of the
 *     bundle rather than re-downloaded from Google
 *   - the same fixed nav, footer and animated canvas backdrop
 *
 * ⚠️ DUPLICATION IS DELIBERATE, AND A LIABILITY. These values are copied from
 * the bundle because the bundle's source isn't in this repo. If the homepage's
 * palette, nav or fonts change, this drifts. The durable fix is to generate the
 * bundle from a source that shares this file. Until then, change both together.
 *
 * Usage:  <link rel="stylesheet" href="/site-chrome.css">
 *         <script src="/site-chrome.js" defer></script>
 * ---------------------------------------------------------------------------
 */

/* --- fonts: extracted from the bundle into /fonts (variable, so one file per
   subset covers every weight via a range) ---------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens: verbatim from the bundle ------------------------------------- */
:root {
  color-scheme: light;
  --accent: #6B022C;
  --bg: #f4ebe7; --ink: #241a1e; --body: #584a4e; --muted: #6c5a5f; --muted2: #7a666c;
  --surface: rgba(236,224,221,0.72); --surface-hover: rgba(236,224,221,0.5);
  --soft: rgba(244,235,231,0.6); --nav-bg: rgba(244,235,231,0.55); --menu-bg: rgba(244,235,231,0.98);
  --line-08: rgba(36,26,30,0.08); --line-10: rgba(36,26,30,0.1); --line-14: rgba(36,26,30,0.14);
  --line-16: rgba(36,26,30,0.16); --line-22: rgba(36,26,30,0.22); --line-25: rgba(36,26,30,0.25); --line-30: rgba(36,26,30,0.3);
}
[data-theme="dark"] {
  color-scheme: dark;
  --accent: #CE5F86;
  --bg: #17100f; --ink: #f0e6e4; --body: #cbbabb; --muted: #a68f93; --muted2: #8f7a7e;
  --surface: rgba(52,38,42,0.5); --surface-hover: rgba(62,45,50,0.5);
  --soft: rgba(38,27,30,0.55); --nav-bg: rgba(23,16,15,0.62); --menu-bg: rgba(23,16,15,0.97);
  --line-08: rgba(240,230,232,0.08); --line-10: rgba(240,230,232,0.1); --line-14: rgba(240,230,232,0.14);
  --line-16: rgba(240,230,232,0.16); --line-22: rgba(240,230,232,0.22); --line-25: rgba(240,230,232,0.26); --line-30: rgba(240,230,232,0.34);
}

/* --- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease, color 0.5s ease;
  min-height: 100vh;
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-160%);
  background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; transition: transform 0.25s ease;
}
.skip-link:focus-visible { transform: none; color: var(--bg); outline-offset: 2px; }

/* --- animated backdrop (site-chrome.js paints this) ---------------------- */
#jb-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.jb-page { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

/* --- nav ----------------------------------------------------------------- */
.jb-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  backdrop-filter: blur(10px); background: var(--nav-bg);
  border-bottom: 1px solid var(--line-08);
}
.jb-nav-in {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(24px, 5vw, 72px);
}
.jb-brand { display: flex; align-items: baseline; gap: 12px; }
.jb-brand .jb-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; line-height: 1; letter-spacing: 0.5px; }
.jb-brand .jb-est { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.jb-links {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.jb-links a { color: var(--muted); }
.jb-links a:hover, .jb-links a[aria-current="page"] { color: var(--ink); }
.jb-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line-22); border-radius: 100px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.jb-toggle:hover { border-color: var(--ink); }
.jb-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px;
  border: 1px solid var(--ink); border-radius: 100px; color: var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.jb-cta:hover { background: var(--ink); color: var(--bg); }
.jb-burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px; margin: -11px -11px -11px 0;
  background: transparent; border: none; cursor: pointer; position: relative; z-index: 22;
}
.jb-burger span {
  display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.38s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease;
}
.jb-menu {
  position: fixed; inset: 0; z-index: 21; background: var(--menu-bg);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px clamp(24px, 7vw, 72px) 48px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.jb-menu[data-open="true"] { opacity: 1; visibility: visible; }
.jb-menu a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: clamp(34px, 8.5vw, 58px); letter-spacing: -1px; color: var(--ink);
  padding: 8px 0; border-bottom: 1px solid var(--line-10);
}
.jb-menu a:hover { color: var(--accent); }
.jb-menu a .n { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; color: var(--muted2); }
@media (max-width: 820px) {
  .jb-links { display: none; }
  .jb-burger { display: flex; }
}

/* --- footer -------------------------------------------------------------- */
.jb-footer {
  position: relative; z-index: 2; margin-top: auto;
  border-top: 1px solid var(--line-10); background: var(--soft); backdrop-filter: blur(6px);
}
.jb-footer-in {
  max-width: 1400px; margin: 0 auto; padding: 44px clamp(24px, 5vw, 72px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.jb-footer .jb-fname { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; }
.jb-footer nav {
  display: flex; flex-wrap: wrap; gap: 26px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.jb-footer nav a:hover { color: var(--accent); }

/* --- content shell for a standalone page --------------------------------- */
.jb-main {
  flex: 1; width: 100%; max-width: 1000px; margin: 0 auto;
  padding: calc(clamp(24px, 5vw, 72px) + 92px) clamp(24px, 5vw, 72px) 90px;
}
.jb-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted2);
}
.jb-eyebrow .dash { display: block; width: 34px; height: 1px; background: var(--line-30); }
.jb-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: clamp(38px, 6vw, 68px); letter-spacing: -2px; line-height: 0.98;
  margin: 22px 0 0;
}
.jb-lede { max-width: 56ch; font-size: 17px; line-height: 1.7; color: var(--body); margin: 22px 0 0; }