/* Tusome design tokens — ported from the Tusome Design System
   (claude.ai/design, project "Tusome Design System"). Source of truth
   there: tokens/colors.css, typography.css, spacing.css, borders.css,
   texture.css, motion.css, fonts.css. Keep values in sync if the system
   changes. No raw hex outside this file. */

/* ---- Fonts ----
   Self-hosted (latin subset) instead of the Google Fonts stylesheet. That
   stylesheet is cross-origin and render-blocking: on a slow mobile
   connection the DNS + TLS + CSS round trips sat in front of first paint.
   Same origin as the page, the files ride the connection that already
   exists. The two above-the-fold faces are preloaded in each page's <head>;
   keep those hrefs in step with the urls here. Source Sans 3 is a variable
   font, so one file covers 400 to 700. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-black-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/kalam-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/kalam-700-latin.woff2") format("woff2");
}

/* Metric-matched stand-ins for Source Sans 3 while it loads. It is about 6 to
   8% narrower than Arial with a taller ascent, so without these the body copy
   reflows when the real font swaps in and nudges the sections below the hero
   (a small layout shift). size-adjust and the vertical overrides make Arial
   occupy the same space; the numbers come from the font file's own advance
   widths and hhea metrics. Regenerate them if the font file changes. */
@font-face {
  font-family: "Source Sans 3 Fallback";
  font-style: normal;
  font-weight: 400 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 94.27%;
  ascent-override: 108.63%;
  descent-override: 42.43%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  font-style: normal;
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 92.16%;
  ascent-override: 111.11%;
  descent-override: 43.4%;
  line-gap-override: 0%;
}

:root {
  /* ---- Color ---- */
  --paper: #E9E4D6;
  --paper-2: #DFD9C8;
  --grid: rgba(70, 100, 135, .14);
  --ink: #171512;
  --ink-2: #4A463D;
  --ink-3: #8A8477;
  --cream: #FAF7EF;
  --tape: #F2CE3C;
  --tape-2: #E0B92A;
  /* Light wash of the tape yellow, the same weight as the *-soft tints
     below. Used for the navbar's hover and current-section selection. */
  --tape-soft: #F7E5A0;
  --blue: #1E4FD8;
  --blue-soft: #D9E1FA;
  --red: #DA3520;
  --red-soft: #FBE2DE;
  --green: #0F7B54;
  --green-soft: #D8EEE3;
  --dough: #E7C48D;
  --crust: #B8873F;
  --char: #7A4A1E;
  --slate: #1B1F26;
  --white: #FFFFFF;

  /* ---- Type ---- */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Source Sans 3", "Source Sans 3 Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Kalam", "Comic Sans MS", cursive;

  /* The app holds body at one size because lesson prose sits in a narrow
     column with a nav rail either side. A marketing page is read at arm's
     length, once, often on a phone in daylight, so the reading sizes here
     step up and scale with the viewport. Faces and roles stay the same. */
  --text-size-body: clamp(18px, 0.55vw + 16.2px, 20.5px);
  --text-lh-body: 1.6;

  --text-size-lead: clamp(20px, 1.15vw + 16.4px, 26px);
  --text-lh-lead: 1.45;

  --text-size-hero: clamp(40px, 8.4vw, 76px);
  --text-lh-hero: .92;
  --text-ls-hero: -.032em;

  --text-size-h2: clamp(29px, 3.6vw + 8px, 46px);
  --text-lh-h2: 1.04;
  --text-ls-h2: -.022em;

  --text-size-h3: clamp(19px, 0.7vw + 17px, 23px);
  --text-ls-h3: -.01em;

  --text-size-eyebrow: 14.5px;
  --text-ls-eyebrow: .1em;

  --text-size-label: 11.5px;
  --text-ls-label: .08em;

  --text-size-hand: clamp(19px, 1vw + 16px, 24px);
  --text-size-hand-sm: 17px;

  --text-size-micro: 13.5px;
  --text-size-caption: 15.5px;

  --weight-strong: 700;
  --measure-prose: 54ch;
  --measure-lead: 34ch;
  /* Px-based, not ch: a bold condensed display face makes ch an
     unreliable unit at heading sizes (the same ch count sets much
     wider or narrower depending on the actual letters in the string).
     680px reads as roughly a 10-14 word line at the hero/h2 sizes here,
     which is a normal measure for a headline, not an artificially
     narrow one. */
  --measure-heading: 680px;

  /* ---- Brand lockup ----
     "Stamped" mark (ink T on a torn tape patch) + TUSOME wordmark set live in
     --font-display (Archivo Black), uppercase, -0.01em. */
  --lockup-icon: 34px;
  --lockup-text: 28px;
  --lockup-gap: 9px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --gutter-page: 28px;
  --gutter-page-mobile: 18px;
  --stack-block: 22px;
  --stack-section: 40px;

  --tap-min: 44px;
  --page-max: 1180px;
  --content-max: 720px;

  --bp-tablet: 760px;
  --bp-desktop: 1120px;

  /* ---- Borders / shadow ---- */
  --radius: 0;
  --border-w: 2.5px;
  --border-w-thin: 2px;
  --border-w-accent: 6px;
  --border-w-accent-sm: 4px;
  --border: var(--border-w) solid var(--ink);
  --border-thin: var(--border-w-thin) solid var(--ink);

  --hard-sm: 3px 3px 0 var(--ink);
  --hard: 4px 4px 0 var(--ink);
  --hard-lg: 6px 6px 0 var(--ink);
  --hard-xl: 7px 7px 0 var(--ink);
  --hard-none: 0 0 0 var(--ink);

  --focus-ring: 3px solid var(--blue);
  --focus-offset: 3px;

  /* ---- Motion ---- */
  --snap-dur: 130ms;
  --snap-ease: cubic-bezier(.2, .9, .25, 1);
  --snap: 130ms cubic-bezier(.2, .9, .25, 1);
  --shake-dur: 200ms;
  --lift: translate(-2px, -2px);
  --press: translate(2px, 2px);
  --pop-rotate: -1.5deg;

  /* ---- Texture ---- */
  --grid-size: 24px;
  --grid-lines: linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  --halftone: radial-gradient(circle at 1px 1px, rgba(23, 21, 18, .16) 1.5px, transparent 1.6px);
  --halftone-size: 9px 9px;
  --tape-clip: polygon(0% 6%, 7% 0%, 26% 5%, 48% 0%, 72% 6%, 93% 1%, 100% 8%, 99% 92%, 90% 100%, 68% 95%, 44% 100%, 22% 94%, 6% 99%, 1% 90%);
  --tape-rotate: -1.8deg;

  /* ---- Scrollbar ---- */
  --scrollbar-size: 6px;
  --scrollbar-track: var(--paper-2);
  --scrollbar-thumb: var(--ink-3);
  --scrollbar-thumb-hover: var(--ink-2);
}

@media (min-width: 760px) {
  :root {
    --lockup-icon: 38px;
    --lockup-text: 32px;
    --lockup-gap: 10px;
    --stack-section: 52px;
  }
}

@media (min-width: 1120px) {
  :root {
    --lockup-icon: 42px;
    --lockup-text: 35px;
    --stack-section: 64px;
  }
}

@keyframes tusome-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes tusome-pop {
  0% { transform: scale(.94) rotate(0); }
  60% { transform: scale(1.05) rotate(var(--pop-rotate)); }
  100% { transform: scale(1) rotate(var(--pop-rotate)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal {
    opacity: 1 !important;
    translate: 0 !important;
  }
}