/* Generated by scripts/build-tokens.js from tokens/tokens.json. Do not edit. Dark theme only (founder decision, Gate 2). */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/playfair-display-latin-500-normal.woff2") format("woff2"),url("fonts/playfair-display-latin-500-normal.woff") format("woff");}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/playfair-display-latin-700-normal.woff2") format("woff2"),url("fonts/playfair-display-latin-700-normal.woff") format("woff");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"),url("fonts/source-sans-3-latin-400-normal.woff") format("woff");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"),url("fonts/source-sans-3-latin-600-normal.woff") format("woff");}
:root{
  color-scheme: dark;
  /* colour */
  --color-ground: #151110; /* Warm black. The ground of every layout, page, email and print piece. About 70 percent of any composition. */
  --color-ground-raised: #1F1917; /* One step above ground: cards, form fields, code, quote panels. Never as a large field on its own. */
  --color-ink: #EDE3D2; /* Bone. Primary text and headlines on ground or ground-raised. Also the mono-bone logo colour. */
  --color-ink-muted: #BBAE9C; /* Stone. Captions, counters, metadata, secondary text on ground, ground-raised or placeholder. */
  --color-accent: #D9895A; /* Copper. The one accent: the mark, one key word per headline, button fills, links, rules. No more than about 10 percent of any composition. */
  --color-on-accent: #151110; /* Text and icons on an accent (copper) fill. Always the ground colour. Never bone on copper: that pair fails contrast. */
  --color-line: #3A2F27; /* Hairline rules and dividers (1px). Decoration only: carries no meaning on its own and is never used for text. */
  --color-rust: #B9573A; /* Graphic and large display only: large numerals, big rules, a fill behind large bone text. Not for body text on ground (fails 4.5:1). */
  --color-olive: #8C9160; /* Quiet labels and pillar tags. Passes 4.5:1 on ground and ground-raised. */
  --color-placeholder: #2B231E; /* Photo placeholder fill until the shoot exists. Label it in ink-muted. */
  /* font */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* Display and headlines. Weights 500 and 700. High contrast serif, so keep to 28px and up. */
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Body, captions, interface and small labels. Weights 400 and 600. */
  /* type scale */
  --type-display-size: 72px; /* Hero line on web and large print. One per screen. */
  --type-display-weight: 500;
  --type-display-line-height: 1.05;
  --type-display-tracking: -0.01em;
  --type-h1-size: 48px; /* Page title, one per page. */
  --type-h1-weight: 500;
  --type-h1-line-height: 1.12;
  --type-h1-tracking: -0.005em;
  --type-h2-size: 36px; /* Section heading on web and print. */
  --type-h2-weight: 500;
  --type-h2-line-height: 1.2;
  --type-h2-tracking: 0;
  --type-h3-size: 28px; /* Sub-heading. 28px is the floor for Playfair Display. */
  --type-h3-weight: 700;
  --type-h3-line-height: 1.25;
  --type-h3-tracking: 0;
  --type-body-size: 18px; /* Running text. Keep lines to about 65 characters. */
  --type-body-weight: 400;
  --type-body-line-height: 1.6;
  --type-body-tracking: 0;
  --type-caption-size: 14px; /* Captions, slide counter, metadata. Colour ink-muted or ink. Never below 14px. */
  --type-caption-weight: 400;
  --type-caption-line-height: 1.5;
  --type-caption-tracking: 0.01em;
  --type-carousel-headline-size: 88px; /* Carousel cover and body headline on the 1080 by 1350 canvas. Eight words at most. */
  --type-carousel-headline-weight: 700;
  --type-carousel-headline-line-height: 1.08;
  --type-carousel-headline-tracking: -0.01em;
  --type-thumb-headline-size: 128px; /* YouTube thumbnail text on the 1280 by 720 canvas. Four words at most; must read at 168 by 94. */
  --type-thumb-headline-weight: 700;
  --type-thumb-headline-line-height: 1;
  --type-thumb-headline-tracking: -0.01em;
  /* spacing, 4px base */
  --space-1: 4px; /* Base unit. Hairline gaps, icon padding. */
  --space-2: 8px; /* Tight gaps between related items. */
  --space-3: 12px; /* Small component padding. */
  --space-4: 16px; /* Default gap and page gutter on phones. */
  --space-6: 24px; /* Component padding, paragraph gap. */
  --space-8: 32px; /* Group separation. */
  --space-12: 48px; /* Section padding on phones. */
  --space-16: 64px; /* Section padding on desktop. */
  --space-24: 96px; /* Social canvas margin (carousels, 1080 wide) and large section gaps. */
  /* radius */
  --radius-none: 0; /* Photos, full-bleed canvases, the square in the mark. */
  --radius-sm: 2px; /* Tags and small chips. */
  --radius-md: 6px; /* Buttons, fields, cards. */
  --radius-lg: 12px; /* Large panels and the favicon tile. */
  --radius-pill: 999px; /* Pill buttons and handle chips, sparingly. */
  /* effect */
  --grain-opacity-max: 0.06; /* Film grain on large dark grounds only, never above 6 percent, never on thumbnails or under body text. */
  --hairline: 1px; /* Rule weight for dividers and frames. */
  /* motion */
  --motion-fade-min: 400ms; /* Shortest fade for Reels and web transitions. Slow on purpose. */
  --motion-fade-max: 600ms; /* Longest standard fade. */
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Standard ease in-out. No bounce, overshoot or spring anywhere. */
}

/* type classes: .ts-display, .ts-h1 ... */
.ts-display{font-family:var(--font-display);font-weight:var(--type-display-weight);font-size:var(--type-display-size);line-height:var(--type-display-line-height);letter-spacing:var(--type-display-tracking);}
.ts-h1{font-family:var(--font-display);font-weight:var(--type-h1-weight);font-size:var(--type-h1-size);line-height:var(--type-h1-line-height);letter-spacing:var(--type-h1-tracking);}
.ts-h2{font-family:var(--font-display);font-weight:var(--type-h2-weight);font-size:var(--type-h2-size);line-height:var(--type-h2-line-height);letter-spacing:var(--type-h2-tracking);}
.ts-h3{font-family:var(--font-display);font-weight:var(--type-h3-weight);font-size:var(--type-h3-size);line-height:var(--type-h3-line-height);letter-spacing:var(--type-h3-tracking);}
.ts-body{font-family:var(--font-body);font-weight:var(--type-body-weight);font-size:var(--type-body-size);line-height:var(--type-body-line-height);letter-spacing:var(--type-body-tracking);}
.ts-caption{font-family:var(--font-body);font-weight:var(--type-caption-weight);font-size:var(--type-caption-size);line-height:var(--type-caption-line-height);letter-spacing:var(--type-caption-tracking);}
.ts-carousel-headline{font-family:var(--font-display);font-weight:var(--type-carousel-headline-weight);font-size:var(--type-carousel-headline-size);line-height:var(--type-carousel-headline-line-height);letter-spacing:var(--type-carousel-headline-tracking);}
.ts-thumb-headline{font-family:var(--font-display);font-weight:var(--type-thumb-headline-weight);font-size:var(--type-thumb-headline-size);line-height:var(--type-thumb-headline-line-height);letter-spacing:var(--type-thumb-headline-tracking);}