/* Turnstone home v4 tokens (v3 + brand-011 + v4 block). Provisional faces and colours (direction.md); swap through here only. */
@font-face {
  font-family: "Young Serif";
  src: url("fonts/YoungSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Turnstone Serif";
  src: url("fonts/TurnstoneSerif-Soft2.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* colour */
  --cream: #F5EDE0;
  --cream-hi: #FBF7F0; /* brand cream.100 */
  --paper: #FFFDF9; /* brand cream.50 */
  --side: #F0E9DE; /* brand cream.200 */
  --bubble: color-mix(in srgb, var(--side) 78%, var(--paper)); /* the app's Marcus bubble fill (design-031) */
  --ink: #2B1D19; /* brand cocoa.900 */
  --ink-2: #493935; /* brand cocoa.700 */
  --muted: #725E4F; /* brand text-muted: UI labels and large text only */
  --muted-body: #524F49; /* brand cream.700: any muted text under 18px */
  --line: rgba(43, 29, 25, .12);
  --line-soft: rgba(43, 29, 25, .07);
  --coral: #EC6754; /* brand coral.500, decorative only */
  --coral-deep: #C64D3E; /* brand coral.600; labels on it are --paper */
  --gold: #F2B545; /* brand gold.400 */
  --yc-orange: #F26522; /* Y Combinator's mark, brand-owned colour, used only in the eyebrow */
  --earth-1: #6B4532;
  --earth-2: #4A2E22;
  --earth-3: #3A231A;
  --on-earth: #F0E9DE; /* brand cream.200 */
  --on-earth-2: #E5DDD0; /* brand cream.300, solid */

  /* status tints (app window) */
  --ok-ink: #4A592A; /* brand sage.800 */
  --ok-bg: #E4F1CF; /* brand sage.100 */
  --work-ink: color-mix(in srgb, var(--coral-deep) 78%, var(--ink));
  --work-bg: color-mix(in srgb, var(--coral) 16%, transparent);
  --queue-ink: var(--ink-2);
  --queue-bg: color-mix(in srgb, var(--ink) 8%, transparent);

  /* families */
  --f-display: "Turnstone Serif", "Young Serif", "Iowan Old Style", Georgia, serif;
  --f-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type sizes (mobile values; overridden from 834px) */
  --t-hero: clamp(68px, 10.6vw, 164px);
  --t-close: clamp(52px, 8.2vw, 128px);
  --t-lede: 18px;
  --t-body: 16px;
  --t-ui: 15px;
  --t-btn: 17px;
  --t-label: 13px;
  --t-app: 15.5px;

  /* spacing, named by px */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-72: 72px; --s-96: 96px; --s-128: 128px; --s-160: 160px;

  /* radii */
  --r-5: 5px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-18: 18px; --r-20: 20px; --r-16: 16px; --r-pill: 999px;

  /* shadows, all tinted warm */
  --sh-header: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 var(--line), 0 10px 30px -18px rgba(70, 38, 20, .28);
  --sh-window: 0 0 0 1px rgba(43, 29, 25, .14), inset 0 1px 0 rgba(255, 255, 255, .8),
    0 2px 3px rgba(70, 38, 20, .06), 0 18px 36px -12px rgba(70, 38, 20, .20), 0 60px 110px -30px rgba(70, 38, 20, .42);
  --sh-btn-stone: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 1px 2px rgba(120, 40, 25, .22), 0 10px 20px -10px rgba(194, 67, 47, .55);
  /* Buttons (design-033). Warm drops tinted from --ink, never grey or black. The cocoa lip (inset top highlight, inset bottom dark) stays. */
  --sh-btn-cocoa: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), inset 0 -2px 0 color-mix(in srgb, black 16%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent),
    0 8px 16px -6px color-mix(in srgb, var(--ink) 35%, transparent),
    0 22px 36px -14px color-mix(in srgb, var(--ink) 40%, transparent);
  /* pressed: the long layer is gone, the contact stays, the lip flattens (the button also moves down 1px) */
  --sh-btn-cocoa-down: inset 0 1px 0 color-mix(in srgb, black 10%, transparent), inset 0 -1px 0 color-mix(in srgb, white 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent),
    0 2px 4px -2px color-mix(in srgb, var(--ink) 20%, transparent),
    0 0 0 transparent;
  /* cocoa button inside a drawn app window (s4's Submit): the small drop only, a window control is not a page CTA */
  --sh-btn-cocoa-ui: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), inset 0 -2px 0 color-mix(in srgb, black 16%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 32%, transparent), 0 10px 20px -10px color-mix(in srgb, var(--ink) 55%, transparent);
  --sh-btn-quiet: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
    0 8px 16px -8px color-mix(in srgb, var(--ink) 18%, transparent);
  --sh-btn-quiet-down: 0 1px 1px color-mix(in srgb, var(--ink) 12%, transparent);
  /* on the night band the drop is a darker cocoa, not a glow */
  --sh-btn-night: 0 1px 2px color-mix(in srgb, #120A08 55%, transparent),
    0 8px 16px -6px color-mix(in srgb, #120A08 55%, transparent),
    0 22px 36px -14px color-mix(in srgb, #120A08 60%, transparent);
  --sh-card: 0 1px 2px rgba(70, 38, 20, .06), 0 6px 14px -8px rgba(70, 38, 20, .16);
  /* macOS menu material (design-025): 1px outline, inner top highlight, then contact, 12px mid and 40px long layers */
  --sh-pop: 0 0 0 1px rgba(43, 29, 25, .10), inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(70, 38, 20, .14), 0 6px 12px -2px rgba(70, 38, 20, .13), 0 20px 40px -8px rgba(70, 38, 20, .26);

  /* v4 */
  --night: #2B1D19; /* cocoa.900, night band ground (sections 5 and 6) */
  --night-2: #3A2924; /* raised surfaces on night */
  --on-night: #F0E9DE; /* cream.200 */
  --on-night-2: #CFC3B3; /* 9.4:1 on --night; muted text and headline tone on night */
  --line-night: rgba(240, 233, 222, .14);
  --line-earth: rgba(240, 233, 222, .16);
  --glass: color-mix(in srgb, var(--paper) 64%, transparent); /* section 4 only */
  /* strata, light to dark: direction.md starting points kept (see shots/tokens/strata.png) */
  --strata-1: #E9CFA6; --strata-2: #D9A066; --strata-3: #C0703F; --strata-4: #9E5434; --strata-5: #7A3F28; /* used only by system.html */
  --earth-floor: rgb(43 17 11); /* the footer image's own last rows; the ground under the arch image, so the page ends with no seam */
  --earth-start: .52; /* where the footer image's cut-away strata end and the ruled grid's zone begins, fraction of image height */
  --wm-1: var(--strata-1); /* giant wordmark: lightest stratum, also the 1.5px top-light edge on its letters */
  --wm-2: var(--strata-2); /* stratum 2 */
  --wm-3: var(--strata-3); /* stratum 3 */
  --wm-4: color-mix(in srgb, var(--strata-3) 45%, var(--strata-4)); /* stratum 4, lifted to hold 3:1 on the floor */
  --wm-5: var(--strata-4); /* stratum 5, lifted from strata-4 for the same reason */
  --stage-blur: 4px; /* 6px from 834px */
  --t-h2: clamp(40px, 5.15vw, 74px); /* design-027: 74 at 1440 and up; set once, no section overrides it */
  --t-h3: 18px;
  --t-sec-body: 17px;
  --t-num: 28px;
  --t-price: clamp(96px, 11vw, 168px);

  /* layout */
  --gutter: 20px;
  --content: 1312px;
}
@media (min-width: 834px) {
  :root {
    --gutter: 40px;
    --t-lede: 21px;
    --t-label: 14px;
    --t-h3: 20px;
    --t-sec-body: 19px;
    --stage-blur: 6px;
  }
}
@media (min-width: 1280px) {
  :root { --gutter: 64px; }
}

/* type utilities: face, size, leading, tracking, axes */
.t-hero, .t-close, .t-lede, .t-body, .t-ui, .t-btn, .t-label, .t-app, .t-h2, .t-h3, .t-sec-body, .t-num, .t-price {
  font-kerning: normal; font-synthesis: none; margin: 0;
}
.t-hero  { font-family: var(--f-display); font-weight: 400; font-size: var(--t-hero);  line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.t-close { font-family: var(--f-display); font-weight: 400; font-size: var(--t-close); line-height: .96; letter-spacing: -.03em;  text-wrap: balance; }
.t-lede  { font-family: var(--f-text); font-weight: 400; font-size: var(--t-lede); line-height: 1.45; letter-spacing: -.005em; text-wrap: balance; }
.t-body  { font-family: var(--f-text); font-weight: 400; font-size: var(--t-body); line-height: 1.5;  letter-spacing: 0; }
.t-ui    { font-family: var(--f-text); font-weight: 500; font-size: var(--t-ui);   line-height: 1.2;  letter-spacing: 0; font-variant-numeric: tabular-nums; }
.t-btn   { font-family: var(--f-text); font-weight: 600; font-size: var(--t-btn);  line-height: 1;    letter-spacing: -.005em; }
.t-label { font-family: var(--f-text); font-weight: 500; font-size: var(--t-label); line-height: 1;   letter-spacing: 0; font-variant-numeric: tabular-nums; }
.t-app   { font-family: var(--f-text); font-weight: 400; font-size: var(--t-app);  line-height: 1.45; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* v4 type utilities. Young Serif has one weight: never bold or italicise it. */
.t-h2       { font-family: var(--f-display); font-weight: 400; font-size: var(--t-h2); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.t-h3       { font-family: var(--f-text); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.005em; }
.t-sec-body { font-family: var(--f-text); font-weight: 400; font-size: var(--t-sec-body); line-height: 1.5; letter-spacing: 0; }
.t-num      { font-family: var(--f-display); font-weight: 400; font-size: var(--t-num); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.t-price    { font-family: var(--f-display); font-weight: 400; font-size: var(--t-price); line-height: .9; letter-spacing: -.04em; }