/* The chrome (overall fix PR rows A4 and A5, 26 Oct 2026): the header, phone
   menu and footer of every page, and the type scale they and the pages read.
   One file for both page kinds: the server-built pages link it first after
   clay-theme.css (lib/public-site/shell.ts), and the React invitee pages
   import it (components/page-shell.tsx) under the same markup
   (lib/public-site/shell.ts inviteeChrome), so an invitee sees one header,
   one footer and one type scale on every page. */
:root {
  --site-header-h: 64px;
  --site-gutter: 16px;
  /* The type scale (docs/public-site.md, "Type system"): eight sizes. KarmanFlow Soft
     for headings and the large statements only; Radio Canada for everything else,
     labels included; KarmanFlow Mono only for running times and code. */
  --kf-fs-display: clamp(40px, 5vw, 64px);
  --kf-fs-h2: clamp(28px, 3.2vw, 40px);
  --kf-fs-h3: clamp(22px, 2.2vw, 26px);
  --kf-fs-title: 20px;
  --kf-fs-body: 17px;
  --kf-fs-small: 15px;
  --kf-fs-meta: 13px;
  --kf-fs-label: 12px;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--kf-panel-solid); padding: 10px 14px; border-radius: 10px; z-index: 60; min-height: 44px; }
.skip:focus { left: 12px; }
.site-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--site-gutter); }
@media (min-width: 720px) { :root { --site-gutter: 28px; } }
.site-header { position: sticky; top: 0; z-index: 40; height: var(--site-header-h);
  background: var(--kf-paper); border-bottom: 1px solid var(--kf-line); }
.site-header .site-wrap { display: flex; align-items: center; gap: 8px; height: 100%; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 var(--kf-fs-title) var(--kf-sans); color: var(--kf-ink); text-decoration: none; margin-right: auto; }
.site-brand svg { width: 34px; height: 34px; flex: none; }
.site-brand { min-width: 44px; justify-content: flex-start; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: var(--kf-muted); font: 400 var(--kf-fs-small) var(--kf-sans); }
.site-nav a:hover { color: var(--kf-ink); }
.site-nav a[aria-current="page"] { color: var(--kf-ink); font-weight: 600; }
.site-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 600 var(--kf-fs-small) var(--kf-sans); color: var(--kf-ink); text-decoration: none; }
.site-signin:hover { text-decoration: underline; }
.site-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--kf-charcoal); color: #f6f1e6; font: 600 var(--kf-fs-small) var(--kf-sans); text-decoration: none; white-space: nowrap; }
.site-cta:hover { background: #1f2a33; }
.site-menu-btn { display: none; font: 600 var(--kf-fs-small) var(--kf-sans); background: transparent; color: var(--kf-ink); border: 1px solid var(--kf-line); border-radius: 999px; min-height: 44px; min-width: 44px; padding: 0 12px; cursor: pointer; }
.site-sheet { position: fixed; left: 0; right: 0; top: var(--site-header-h); z-index: 39; padding: 12px var(--site-gutter) 20px;
  background: var(--kf-panel-solid); border-bottom: 1px solid var(--kf-line); box-shadow: 0 18px 36px rgba(60, 40, 20, 0.16);
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease; }
.site-sheet[hidden] { display: none !important; }
/* While the sheet is open the page behind it holds still (chrome.js, site
   panel N1), and the sheet scrolls on its own when it is taller than the
   screen, without handing the scroll on to the page. */
html.kf-menu-open { overflow: hidden; }
.site-sheet { max-height: calc(100dvh - var(--site-header-h)); overflow-y: auto; overscroll-behavior: contain; }
.site-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
.site-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-sheet a { display: flex; align-items: center; min-height: 48px; padding: 0 8px; font: 600 var(--kf-fs-body) var(--kf-sans); color: var(--kf-ink); text-decoration: none; border-radius: 12px; }
.site-sheet a[aria-current="page"] { color: var(--kf-sienna-text); }
/* Five links since the site rebuild (24 Oct 2026; no Pause motion in the
   header): the header row holds the brand, the links, Sign in and the pill
   from 1240 px; below that the links move into the Menu sheet. */
@media (max-width: 1239px) {
  .site-nav { display: none; }
  .site-menu-btn { display: inline-flex; align-items: center; }
}
@media (min-width: 1240px) { .site-sheet { display: none !important; } }
@media (max-width: 440px) {
  .site-brand .site-brand-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .site-cta { padding: 0 14px; font-size: var(--kf-fs-meta); }
  .site-signin { padding: 0 6px; font-size: var(--kf-fs-meta); }
  .site-menu-btn { padding: 0 10px; font-size: var(--kf-fs-meta); }
}
@media (max-width: 350px) { .site-cta { padding: 0 10px; } }
.site-footer { padding: 48px 0 64px; border-top: 1px solid var(--kf-line); margin-top: 24px; }
.site-footer .tagline { font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); margin: 0 0 18px; color: var(--kf-ink); }
.site-footer .tagline span { color: #8a3c1f; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 0; margin-right: 10px; font: 400 var(--kf-fs-small) var(--kf-sans); color: var(--kf-ink); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer small { display: block; margin-top: 14px; color: var(--kf-muted); font-size: var(--kf-fs-meta); max-width: 720px; }
/* The invitee header: six links (Home, How it works, Try, Learn, Build,
   Films), Talk to the team and the pill; below 1260 px the links and Talk to
   the team move into the Menu sheet. */
.site-header.is-invitee .site-nav a { white-space: nowrap; padding: 0 9px; }
@media (max-width: 1259px) {
  .site-header.is-invitee .site-nav { display: none; }
  .site-header.is-invitee .site-menu-btn { display: inline-flex; align-items: center; }
}
@media (min-width: 1240px) and (max-width: 1259px) { .site-header.is-invitee ~ .site-sheet:not([hidden]) { display: block !important; } }
/* Talk to the team: a text link beside the pill while the links show, the
   sheet's last row below that. The pill's "on your exports" drops on phones. */
.site-talk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 600 var(--kf-fs-small) var(--kf-sans); color: var(--kf-ink); text-decoration: none; white-space: nowrap; }
.site-talk:hover { text-decoration: underline; }
@media (max-width: 1259px) { .site-header.is-invitee .site-talk { display: none; } }
.site-sheet .sheet-talk a { color: var(--kf-sienna-text); }
.site-cta .cta-more { white-space: pre; }
@media (max-width: 440px) { .site-cta .cta-more { display: none; } }

/* The footer: four groups (Try, Learn, Build, Trust). */
.footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
@media (max-width: 900px) { .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .footer-groups { grid-template-columns: minmax(0, 1fr); } }
.footer-group h2 { margin: 0 0 4px; font: 600 var(--kf-fs-label)/1.4 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.site-footer .footer-groups ul { display: grid; gap: 0; }
.site-footer .footer-groups a { min-height: 40px; margin-right: 0; }
@media (max-width: 720px) { .site-footer .footer-groups a { min-height: 44px; } }
/* The footer's last row: Sign in to the product (the product sign-in). */
.site-footer .footer-meta { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--kf-line); }
.site-footer .footer-meta a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--kf-fs-small) var(--kf-sans); color: var(--kf-ink); }

@media (prefers-reduced-motion: reduce) { .site-sheet { transition: none; } }
/* The React invitee pages wrap the chrome's markup in a box-less element, so
   the sticky header and the footer sit in the page's flow as on the
   server-built pages (components/page-shell.tsx). */
.kf-chrome { display: contents; }