/* Labs: the public pages at /labs/ (the index, the posts and the standalone builds). Load after tokens.css and portal.css
   where a page uses the kit; a standalone build (the 10x study, Big Dumb Ideas, Brand Scorecard) loads only this.
   The chrome is the site's own: scripts/build-portals.mjs writes the markup from src/partials (header, menu, footer)
   into every Labs page between its <!-- labs:chrome --> and <!-- labs:footer --> markers, and /portal/labs-menu.js
   runs the menu with the site's module (menu-light.js). Portal pages can't load the site's hashed /assets/ CSS
   (PORTAL-BUILD-SPEC 1.2), so the rules below mirror src/styles/_chrome.scss with every value written out on the
   chrome itself: they hold on a page that brings its own stylesheet and none of the kit. If _chrome.scss changes,
   change this block to match.
   Also here: the title reveal (MR7 Split light, driven by labs.js), the action's ink and the toy band. */

/* ---------- Site chrome: the corner icon, the three-line menu (M3 Into the light), the footer (12.12) ---------- */
.skip, .site-head, .site-menu, .site-foot {
  --ch-margin: 20px; --ch-max: 1440px; --ch-mark: 26px;
  --ch-bar-t: 3px; --ch-bar-gap: 3px; --ch-bar-w: 20px;
  --ch-grouped: 16px; --ch-siblings: 56px; --ch-blocks: 80px;
  --ch-black: #0E0E0E; --ch-white: #F5F5F5; --ch-gray: #888888; --ch-red: #E5223B;
  --ch-head: 'Monument Extended', 'Arial Black', sans-serif; --ch-body: 'Satoshi', Arial, sans-serif;
  --ch-ease: cubic-bezier(.4, 0, .2, 1);
  box-sizing: border-box;
}
@media (min-width: 744px) {
  .skip, .site-head, .site-menu, .site-foot { --ch-margin: 40px; --ch-mark: 30px; --ch-bar-gap: 4px; --ch-bar-w: 23px; }
}
@media (min-width: 1200px) {
  .skip, .site-head, .site-menu, .site-foot { --ch-margin: 64px; --ch-mark: 34px; --ch-bar-t: 4px; --ch-bar-w: 26px;
    --ch-grouped: 24px; --ch-siblings: 96px; --ch-blocks: 144px; }
}
.site-head *, .site-menu *, .site-foot * { box-sizing: border-box; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: 8px 16px;
  background: var(--ch-black); color: var(--ch-white);
  font: 700 14px/1.35 var(--ch-body); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; outline: 2px solid var(--ch-red); outline-offset: 3px; }

/* The corners stay put. Their ink follows the surface underneath (labs-menu.js sets data-tone); white until it runs. */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  width: 100%; max-width: calc(var(--ch-max) + 2 * var(--ch-margin)); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--ch-margin) var(--ch-margin) 0;
  color: var(--ch-white);
  pointer-events: none;
  transition: color 200ms var(--ch-ease);
}
.site-head[data-tone="light"], html.menu-light .site-head { color: var(--ch-black); }
.site-head > * { pointer-events: auto; }
.site-head .site-head__mark { display: block; height: var(--ch-mark); width: calc(var(--ch-mark) * 71.2 / 63.2); line-height: 0; }
.site-head__mark svg { display: block; width: 100%; height: 100%; max-width: none; }

/* 44px target; the bars sit flush with the right margin and centered on the icon */
.site-head .site-head__menu {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: var(--ch-bar-gap);
  width: 44px; height: 44px; padding: 0;
  margin: calc((var(--ch-mark) - 44px) / 2) 0 0;
  background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.site-head__menu span {
  display: block; width: var(--ch-bar-w); height: var(--ch-bar-t); background: currentColor;
  transition: transform 400ms var(--ch-ease), opacity 200ms var(--ch-ease);
}
.site-head__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--ch-bar-t) + var(--ch-bar-gap))) rotate(45deg); }
.site-head__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-head__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-1 * (var(--ch-bar-t) + var(--ch-bar-gap)))) rotate(-45deg); }
.site-head a:focus-visible, .site-head button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* The menu, M3 Into the light: a hard-edged circle of light grows out of the bars until it fills the screen
   (menu-light.js clips the layer), then the names come in black out of a blur */
.site-menu {
  position: fixed; inset: 0; z-index: 110;
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--ch-black);
}
.site-menu[hidden] { display: none; }
.site-menu__layer { position: fixed; inset: 0; background: #FFFFFF; pointer-events: none; }
.site-menu .site-menu__nav {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; align-items: center;
  max-width: calc(var(--ch-max) + 2 * var(--ch-margin)); margin: 0 auto;
  padding: calc(2 * var(--ch-margin) + var(--ch-mark)) var(--ch-margin) var(--ch-blocks);
}
.site-menu .site-menu__nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ch-grouped); margin: 0; padding: 0; list-style: none; }
.site-menu .site-menu__nav li { margin: 0; padding: 0; }
.site-menu .site-menu__nav a {
  display: inline-block;
  font-family: var(--ch-head); font-weight: 900; line-height: .95; letter-spacing: 0;
  /* On a phone the size shrinks so "How we work", the longest name, fits on one line inside the margins */
  font-size: min(clamp(32px, 4.6vw, 72px), calc((100vw - 2 * var(--ch-margin)) / 11.6));
  text-transform: uppercase; text-decoration: none; color: var(--ch-black);
}
.site-menu .site-menu__nav a[aria-current="page"] { color: var(--ch-red); }
.site-menu .site-menu__nav a:not([aria-current]):is(:hover, :focus-visible) { animation: sg-nav-light 840ms both; }
.site-menu .site-menu__nav a:focus-visible { outline: 2px solid var(--ch-black); outline-offset: 6px; }
html.menu-open { overflow: hidden; }

/* NV9 on the light menu: the flicker returns to black */
@keyframes sg-nav-light {
  0%      { color: #0E0E0E; animation-timing-function: step-end; }
  6.548%  { color: #5BBA47; animation-timing-function: step-end; }
  13.095% { color: #E5223B; animation-timing-function: step-end; }
  19.643% { color: #0359A7; animation-timing-function: step-end; }
  26.19%  { color: #0E0E0E; animation-timing-function: step-end; }
  32.738% { color: #5BBA47; animation-timing-function: step-end; }
  39.286% { color: #E5223B; animation-timing-function: step-end; }
  45.833% { color: #0359A7; animation-timing-function: step-end; }
  52.381% { color: #0359A7; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100%    { color: #0E0E0E; }
}

/* Footer: the line, then the wordmark and one row of links. Its own surface, padding and grid, whatever the
   page's .sec, .grid and link rules say. */
footer.site-foot {
  display: block; margin: 0;
  padding: var(--ch-blocks) 0;
  background: var(--ch-black); color: var(--ch-white);
  font-family: var(--ch-body);
}
.site-foot .site-foot__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--ch-blocks); column-gap: 0; align-items: start;
  width: auto; max-width: calc(var(--ch-max) + 2 * var(--ch-margin)); margin: 0 auto;
  padding: 0 var(--ch-margin);
}
.site-foot .site-foot__line {
  margin: 0; max-width: 65ch;
  font: 400 19px/1.6 var(--ch-body); color: var(--ch-white);
}
.site-foot .site-foot__line a {
  display: inline; min-height: 0; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--ch-red); text-decoration: none;
}
.site-foot .site-foot__line a:focus-visible { outline: 2px solid var(--ch-red); outline-offset: 3px; }
.site-foot .site-foot__bar { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ch-grouped); }
.site-foot .site-foot__mark { display: block; width: 200px; line-height: 0; color: var(--ch-white); }
.site-foot__mark svg { display: block; width: 100%; height: auto; max-width: none; }
.site-foot .site-foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; line-height: 1.35; }
.site-foot .site-foot__links a {
  display: inline-block; padding: 8px 0;
  font-weight: 400; color: var(--ch-gray); text-decoration: none;
  transition: color 200ms var(--ch-ease);
}
.site-foot .site-foot__links a:hover, .site-foot .site-foot__links a:focus-visible { color: var(--ch-white); }
.site-foot .site-foot__links a[aria-current="page"] { color: var(--ch-white); font-weight: 700; }
.site-foot .site-foot__links a:focus-visible, .site-foot .site-foot__mark:focus-visible { outline: 2px solid var(--ch-red); outline-offset: 3px; }
@media (min-width: 1200px) {
  .site-foot .site-foot__bar { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--ch-siblings); }
}

/* ---------- Titles: Monument display, sized so the longest word always fits a phone ----------
   --name-fit is that word's letter count (1.1em a letter covers Monument 900 caps, as on the portal front page). */
.labs-title { position: relative; font-size: min(var(--t-display), calc((100vw - 2 * var(--grid-margin)) / (var(--name-fit, 8) * 1.1))); }
/* MR7 Split light: held back until labs.js plays it. If the script never runs, the title shows at 4s anyway. */
.sl-on [data-split-light] { opacity: 0; animation: sl-safety 1ms linear 4s forwards; }
@keyframes sl-safety { to { opacity: 1; } }
.sl-svg { position: absolute; display: block; max-width: none; overflow: hidden; pointer-events: none; }

/* ---------- The Labs page runs on the brand book's tones (/portal/book.css): PB1 takes the tone's ink ---------- */
.tone .pb { border-color: var(--ink); color: var(--ink); }
.tone .pb:is(:hover, :focus-visible, .tap) { color: #FFFFFF; transition: color 200ms var(--ease) 560ms; }

/* ---------- The toy band (Big Dumb Ideas, on the post its note names) ---------- */
.lab-toy iframe { display: block; width: 100%; height: 100vh; height: 100svh; min-height: 560px; border: 0; background: var(--p-dark); }