/* ============================================================================
   Takeroom brand layer — shared by every page.
   Tokens: REMAKE-PLAN §2.0. Markup contract: §5.3 and notes/wave1-contract.md.
   Rules: colours only from the tokens below; radii 0 / 12 / 999; no shadows,
   no gradients (the mark's own artwork is the only gradient), no glass.
   ========================================================================= */

/* --- faces -----------------------------------------------------------------
   Generated from the fonts on disk by tools/font_fallback.py: run it after
   tools/build_fonts.sh. Everything between the two markers is overwritten. */
/* @generated:font-faces begin (tools/font_fallback.py; do not edit by hand) */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-Black.f6bd9e0b.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-Bold.8042af7e.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.1d35aa3e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.5fcc4f7a.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Medium.1e9d04d9.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* SchibstedGrotesk-Black vs LiberationSans-Bold.ttf */
@font-face {
  font-family: "TR Schibsted Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 900;
  font-style: normal;
  size-adjust: 105.17%;
  ascent-override: 92.86%;
  descent-override: 24.51%;
  line-gap-override: 0.00%;
}
/* SchibstedGrotesk-Bold vs LiberationSans-Bold.ttf */
@font-face {
  font-family: "TR Schibsted Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 700;
  font-style: normal;
  size-adjust: 101.57%;
  ascent-override: 96.15%;
  descent-override: 25.38%;
  line-gap-override: 0.00%;
}
/* Inter-Regular vs LiberationSans-Regular.ttf */
@font-face {
  font-family: "TR Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  font-weight: 400;
  font-style: normal;
  size-adjust: 107.34%;
  ascent-override: 90.25%;
  descent-override: 22.47%;
  line-gap-override: 0.00%;
}
/* Inter-SemiBold vs LiberationSans-Bold.ttf */
@font-face {
  font-family: "TR Inter Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 600;
  font-style: normal;
  size-adjust: 101.06%;
  ascent-override: 95.86%;
  descent-override: 23.87%;
  line-gap-override: 0.00%;
}
/* JetBrainsMono-Medium vs LiberationMono-Regular.ttf */
@font-face {
  font-family: "TR Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono");
  font-weight: 500;
  font-style: normal;
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30.00%;
  line-gap-override: 0.00%;
}
/* @generated:font-faces end */

/* --- tokens: the light brand (notes/BRAND-LIGHT.md) ---------------------------
   White and red lead; warm hues and one cool sky support. There is no dark
   mode: the founder ruled it out (2026-10-29), so no ground or media query
   turns the page black. Black is ink only. */
:root {
  --paper: #FFFFFF;
  --sand: #F7F3EF;
  --blush: #FFE9E5;
  --peach: #FFD9C2;
  --coral: #FF7A59;
  --rose: #FF3D5E;
  --sky: #DDEBFF;
  --ink: #111114;
  --slate: #5C5C66;             /* 6.6:1 on paper, 6.0:1 on sand */
  --hairline: #ECE7E2;          /* only inside controls, never under words */
  --white: #FFFFFF;
  --red-mark: #E0102B;          /* actions and key marks */
  /* Legacy names some pages still use; all light now. */
  --studio: #111114;
  --studio-surface: #F7F3EF;
  --studio-border: #ECE7E2;

  --bg: var(--paper);
  --surface: var(--sand);
  --text: var(--ink);
  --text-2: var(--slate);
  --line: var(--hairline);
  --red-text: #C80D25;          /* 5.9:1 on paper */
  --focus: var(--red-mark);
  --pill-bg: var(--red-mark);   /* white on red 4.9:1 */
  --pill-text: var(--white);
  --shadow-soft: 0 20px 60px -24px rgba(17, 17, 20, 0.18);

  /* type — §2.0, §5.2 */
  --font-display: "Schibsted Grotesk", "TR Schibsted Fallback", system-ui, sans-serif;
  --font-sans: "Inter", "TR Inter Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "TR Mono Fallback", ui-monospace, monospace;
  --track-display: -0.045em;
  --track-wordmark: -0.04em;

  /* shape and layout */
  --r-0: 0;
  --r-12: 12px;
  --r-pill: 999px;
  --gutter: 20px;
  --page-max: 1200px;
  --tap: 44px;

  /* motion — motion.ts:28-66 via §2.0 */
  --dur-micro: 120ms;
  --dur-standard: 200ms;
  --dur-sheet: 320ms;
  --dur-punch-in: 380ms;
  --dur-wipe: 420ms;
  --dur-rise: 360ms;
  --exit-scale: 0.8;            /* exits run at 0.8x the enter duration on --ease-accel */
  --ease-decel: cubic-bezier(.33, 0, .1, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1);
  --ease-accel: cubic-bezier(.3, 0, 1, 1);
  --ease-print: cubic-bezier(.65, 0, .35, 1);

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

/* --- grounds: both are light now ------------------------------------------- */
[data-ground="studio"], [data-ground="paper"] { color-scheme: light; }

/* --- reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-sans);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
body > main { flex: 1 0 auto; }

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
img, video { border-radius: var(--r-0); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
abbr[title] { text-decoration: underline dotted; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

::selection { background: var(--blush); color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

/* --- focus ring: 2px, offset 2px -------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- skip link -------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 12px;
  left: var(--gutter);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-text);
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus-visible { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform var(--dur-standard) var(--ease-decel); }
}

/* --- header ----------------------------------------------------------------- */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 18px var(--gutter);
  min-height: 72px;
}

/* --- wordmark: Monogram T at the name's cap height (x 1440/2048), 0.18em gap --- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  min-height: var(--tap);
  color: var(--text);
  font: 900 24px/1 var(--font-display);
  letter-spacing: var(--track-wordmark);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark {
  width: auto;
  height: calc(1em * 1440 / 2048);
  aspect-ratio: 1;
  flex: none;
}
.wordmark__name { display: block; }
.wordmark--sm { font-size: 20px; }

/* --- chip: small label, radius 12 -------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: transparent;
  color: var(--text);
  font: 500 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- pill: the one primary control, radius 999 ------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-text);
  font: 600 16px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.pill:active { transform: scale(0.98); }
@media (prefers-reduced-motion: no-preference) {
  .pill { transition: transform var(--dur-micro) var(--ease-decel); }
}

/* --- footer ------------------------------------------------------------------ */
.site-foot {
  width: 100%;
  max-width: var(--page-max);
  margin: 96px auto 0;
  padding: 40px var(--gutter) 48px;
  color: var(--text-2);
}
.site-foot .wordmark { color: var(--text); margin-bottom: 16px; }

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 25px;
  /* Separators that land at the start of a wrapped line fall outside this box
     and are clipped; the 4px pad keeps the focus ring inside it. */
  overflow: hidden;
  padding: 4px;
  margin: 0 -4px 20px;
}
.site-foot__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  font: 400 15px/1.4 var(--font-sans);
  text-decoration: none;
}
.site-foot__links a:hover { color: var(--red-text); }
.site-foot__links a + a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 1px;
  height: 14px;
  margin-top: -7px;
  background: var(--text-2);
  pointer-events: none;
}

.site-foot__legal {
  max-width: 72ch;
  color: var(--text-2);
  font: 400 13px/20px var(--font-sans);
}
.site-foot__legal + .site-foot__legal { margin-top: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .site-foot__links a { transition: color var(--dur-micro) var(--ease-decel); }
}