/* meet.probabilistic.bio
   Generated by scripts/assemble-css.py from copies of probabilistic.bio's styles
   (src-css/from-site/) plus src-css/outreach.css. Edit those and re-run the
   script; do not edit this file by hand. */

/* ===== src-css/fonts.css ===== */
/* Arimo (Apache-2.0) and JetBrains Mono (OFL-1.1), latin subset, copied from
   @fontsource 5.3.0 as used by probabilistic.bio. Licences sit beside the files. */
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/arimo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/arimo-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/arimo-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/arimo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/arimo-latin-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== tokens.css (verbatim) ===== */
/* Legacy --ink/--paper/--line/--cyan names are kept as literal duplicates of the
   --surface/--fg/--rule/--accent roles, not var() aliases: an alias declared here
   resolves against :root and inherits already-computed, so .panel-dark could never
   re-scope it. */
:root {
  --surface-0: #f7f4ec;
  --surface-1: #f2eee2;
  --surface-2: #ebe5d5;
  --fg: #1a1713;
  --fg-dim: rgb(26 23 19 / 0.6);
  --rule: rgb(26 23 19 / 0.18);
  --rule-strong: rgb(26 23 19 / 0.34);
  --accent: #b98f4a;
  --accent-quiet: #8d6c38;
  /* the accent dark enough to be read as small text on paper: --accent-quiet
     measures 4.4:1 there, just under the 4.5 minimum. */
  --accent-ink: #7d5f30;
  --veil: rgb(247 244 236 / 0.86);
  --raise: rgb(26 23 19 / 0.05);
  --sig: oklch(55% 0.19 32);
  --sig-pos: oklch(52% 0.13 150);
  --sig-warn: oklch(58% 0.13 65);

  --ink-0: #f7f4ec;
  --ink-1: #f2eee2;
  --ink-2: #ebe5d5;
  --paper: #1a1713;
  --paper-dim: rgb(26 23 19 / 0.6);
  --line: rgb(26 23 19 / 0.18);
  --line-strong: rgb(26 23 19 / 0.34);
  --cyan: #b98f4a;
  --cyan-dim: #8d6c38;
  --green: oklch(52% 0.13 150);
  --amber: oklch(58% 0.13 65);

  --glow: rgb(185 143 74 / 0.16);
  --grain: 0.03;

  /* A panel that sits above the paper rather than being cut out of it. The radius
     matches the CAD viewer's chips and the elevation matches the plate's notes,
     so a table reads as the same kind of object as those. */
  --surface-raised: rgb(255 255 255 / 0.62);
  --radius-panel: 1.15rem;
  --radius-chip: 0.6rem;
  --shadow-panel:
    0 1px 2px rgb(17 17 26 / 0.04),
    0 4px 16px rgb(17 17 26 / 0.05),
    0 8px 24px rgb(17 17 26 / 0.05),
    0 16px 56px rgb(17 17 26 / 0.05);

  /* Real Helvetica where the system has it — macOS and iOS both ship Helvetica
     Neue — and a metric-compatible Arimo served for everyone else. Nothing
     licensed is distributed either way. */
  --font-display: 'Helvetica Neue', Helvetica, 'Arimo', Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, 'Arimo', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.06rem);
  --text-hero: clamp(2.6rem, 1.1rem + 4.8vw, 5.4rem);
  --text-h2: clamp(1.8rem, 1.3rem + 2vw, 3.2rem);

  --space-section: clamp(4rem, 3rem + 5vw, 9rem);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --wrap-max: 1200px;
  --scene-max: 1800px;
  --nav-h: 76px;

  --duration-fast: 150ms;
  --duration-normal: 400ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-dark {
  --surface-0: oklch(15% 0.028 168);
  --surface-1: oklch(19% 0.032 168);
  --surface-2: oklch(24% 0.036 168);
  --fg: oklch(94% 0.012 160);
  --fg-dim: oklch(78% 0.025 160);
  --rule: oklch(45% 0.07 160 / 0.35);
  --rule-strong: oklch(60% 0.09 158 / 0.6);
  --accent: oklch(80% 0.14 155);
  --accent-quiet: oklch(65% 0.1 158);
  --veil: oklch(15% 0.028 168 / 0.85);
  --raise: oklch(17% 0.032 168 / 0.75);
  --sig: oklch(66% 0.17 34);
  --sig-pos: oklch(83% 0.17 145);
  --sig-warn: oklch(80% 0.14 75);

  --ink-0: oklch(15% 0.028 168);
  --ink-1: oklch(19% 0.032 168);
  --ink-2: oklch(24% 0.036 168);
  --paper: oklch(94% 0.012 160);
  --paper-dim: oklch(78% 0.025 160);
  --line: oklch(45% 0.07 160 / 0.35);
  --line-strong: oklch(60% 0.09 158 / 0.6);
  --cyan: oklch(80% 0.14 155);
  --cyan-dim: oklch(65% 0.1 158);
  --green: oklch(83% 0.17 145);
  --amber: oklch(80% 0.14 75);

  --glow: oklch(38% 0.05 168 / 0.55);

  color: var(--fg);
}


/* ===== global.css 1-378, 566-588 (investor footer and glass left out) ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.9rem var(--gutter);
  background: transparent;
  border: 0;
  pointer-events: none;
}

/* The bar itself is transparent, so only the marks in it should take clicks. */
.site-nav > * {
  pointer-events: auto;
}

/* Ink by default, with a paper halo that is invisible on the paper sections and
   lifts the type off the imagery. Over a genuinely dark band the whole nav flips
   rather than fighting it. */
.site-nav .wordmark,
.site-nav .nav-toggle {
  text-shadow:
    0 0 4px rgb(247 244 236 / 0.95),
    0 0 12px rgb(247 244 236 / 0.85),
    0 0 26px rgb(247 244 236 / 0.65);
}

.site-nav.is-inverted .mark-disc {
  fill: #f7f4ec;
}

.site-nav.is-inverted .mark-curve {
  stroke: #1a1713;
}

.site-nav.is-inverted .wordmark,
.site-nav.is-inverted .wordmark span,
.site-nav.is-inverted .nav-toggle {
  color: var(--surface-0);
  text-shadow:
    0 0 4px rgb(26 23 19 / 0.9),
    0 0 12px rgb(26 23 19 / 0.8),
    0 0 26px rgb(26 23 19 / 0.6);
}

/* The wordmark holds the middle column, so it stays centred on the page rather
   than drifting with whatever sits beside it. */
.wordmark {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

.wordmark .mark {
  display: block;
  flex: none;
}

.wordmark span {
  color: var(--fg);
}

.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--duration-fast) ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  color: var(--fg);
}

.nav-here {
  transition: opacity var(--duration-fast) ease;
}

/* At the top the label would only ever read About, so it stays out of the way
   until there is somewhere to have scrolled from. */
.site-nav:not(.is-scrolled) .nav-here {
  display: none;
}

.site-nav .wordmark {
  transition:
    opacity var(--duration-normal) ease,
    transform var(--duration-normal) var(--ease-out-expo);
}

.site-nav.is-tucked:not(.is-open) .wordmark {
  opacity: 0;
  transform: translateY(-0.6rem);
  pointer-events: none;
}

.nav-bars {
  position: relative;
  width: 18px;
  height: 9px;
  flex: none;
}

.nav-bars::before,
.nav-bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-fast) ease;
}

.nav-bars::before {
  top: 0;
}

.nav-bars::after {
  bottom: 0;
}

.site-nav.is-open .nav-bars::before {
  transform: translateY(4px) rotate(45deg);
}

.site-nav.is-open .nav-bars::after {
  transform: translateY(-4px) rotate(-45deg);
}

.nav-sheet {
  grid-column: 1 / -1;
  margin: 1.1rem calc(var(--gutter) * -1) calc(var(--gutter) * -0.4);
  padding: 1.4rem var(--gutter) 1.6rem;
  background: var(--veil);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--rule);
}

.nav-sheet ul {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--wrap-max);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .nav-sheet ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 2rem;
  }
}

/* Centring the wordmark needs three columns and slack on both sides of it. A phone
   has neither: the name is nearly the whole width on its own, so the outer columns
   collapse and the middle one is pushed around by whatever the toggle happens to be
   saying. Two columns here — name at the left edge, control at the right — which is
   where a narrow header wants them anyway. */
@media (max-width: 699px) {
  /* minmax(0, auto), not auto: the wordmark is nowrap, so in a plain auto column it
     takes its intrinsic width whatever the screen is and shoves the toggle off the
     right edge. This lets the column shrink instead. */
  .site-nav {
    grid-template-columns: minmax(0, auto) 1fr;
  }

  .wordmark {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    overflow: hidden;
  }

  /* Tracking is what makes this name wide. Below a certain width it has to give some
     back, or there is no room left for the control beside it. */
  .wordmark span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-toggle {
    grid-column: 2;
    justify-self: end;
  }

  /* The section label and the name were competing for the same row; the name wins,
     and the label is repeated in the sheet the toggle opens. */
  .nav-here {
    display: none;
  }
}

@media (max-width: 430px) {
  .wordmark {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    gap: 0.45rem;
  }
}

.site-nav a {
  color: var(--fg-dim);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--fg);
  text-decoration: none;
}

.site-nav a[data-current] {
  color: var(--fg);
}

.site-nav a[data-current]::before {
  content: '— ';
  color: var(--accent);
}

.btn {
  display: inline-block;
  padding: 0.8em 1.5em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: var(--cyan);
  border: 1px solid var(--cyan);
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--cyan);
}

.btn-ghost:hover {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}

.frame {
  border: 1px solid var(--line-strong);
  background: var(--raise);
  position: relative;
}

.frame-label {
  position: absolute;
  top: -0.7em;
  left: 1rem;
  padding-inline: 0.5em;
  background: var(--ink-0);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-dim);
}

.titleblock {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.titleblock > div {
  padding: 0.5rem 0.9rem;
  border-right: 1px solid var(--line);
}

.titleblock dt {
  color: var(--cyan-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.titleblock dd {
  margin: 0;
  color: var(--paper);
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

section[id],
.milestone,
#invest,
#contact {
  scroll-margin-top: var(--nav-h);
}

.milestone {
  padding-block: calc(var(--space-section) / 2);
}


/* ===== typography.css (verbatim) ===== */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.hero-title {
  font-size: var(--text-hero);
  text-wrap: balance;
}

.hero-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-quiet);
}

h2 {
  font-size: var(--text-h2);
}

h2 em {
  font-style: italic;
  font-weight: 700;
}

.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 1.15vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--fg-dim);
  max-width: 46ch;
}

.hero-sub em {
  font-style: italic;
  color: var(--accent-quiet);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-quiet);
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: var(--fg-dim);
  max-width: 58ch;
  text-wrap: pretty;
}

.mono {
  font-family: var(--font-mono);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}


/* ===== plate.css 1-56, 208-216 (plate, graticule, survey) ===== */
/* Survey overlay: a graticule and hairline panels that sit over full-bleed imagery.
   The grid is deliberately contemporary — it is what stops a painterly plate from
   reading as a period picture. */

.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-0);
}

.plate-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.plate-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.graticule {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      to right,
      var(--rule) 0 1px,
      transparent 1px var(--grat-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--rule) 0 1px,
      transparent 1px var(--grat-step)
    );
  mask-image: linear-gradient(to bottom, transparent, #000 12% 88%, transparent);
}

.graticule-dashed {
  --grat-step: 96px;
  background-image:
    repeating-linear-gradient(
      to right,
      var(--rule) 0 1px,
      transparent 1px var(--grat-step)
    );
}

/* Panels float over the plate: hard rectangles, one hairline, no shadow. */
/* The one hi-vis element on a plate. Used once per screen, never twice. */

.survey {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2774%27%20height%3D%2774%27%3E%3Cg%20stroke%3D%27rgb%28113%2C109%2C106%29%27%20fill%3D%27none%27%20stroke-width%3D%271%27%3E%3Cpath%20d%3D%27M73.5%200V74%27%20stroke-dasharray%3D%271%201%27%20opacity%3D%270.75%27%2F%3E%3Cpath%20d%3D%27M0%2073.5H74%27%20stroke-dasharray%3D%271%201%27%20opacity%3D%270.75%27%2F%3E%3Cpath%20d%3D%27M36.5%200V74%27%20stroke-dasharray%3D%273%203%27%20opacity%3D%270.25%27%2F%3E%3Cpath%20d%3D%27M0%2036.5H74%27%20stroke-dasharray%3D%273%203%27%20opacity%3D%270.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 74px 74px;
  background-repeat: repeat;
}


/* ===== landing.css 1-96, 136-175, 204-207, 221-260 (hero, glass panel, section, rules) ===== */
.hero {
  --grat-step: 88px;
  /* The opening screen is the hero and nothing else, at any screen height. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 8vh, 6rem);
}

.hero .plate-media img {
  object-fit: contain;
  object-position: 74% 42%;
}

@media (max-width: 899px) {
  /* The panel is centred, so half of any slack lands under it as empty ground —
     and here the painting has nothing down there to fill it. Less height and a
     shallower floor; the panel keeps its overlap with the mouse. */
  .hero {
    min-height: 100svh;
    padding-bottom: clamp(1.75rem, 4vh, 3rem);
  }

  .hero .plate-media img {
    object-position: 62% 8%;
  }
}

/* Phones: the opening screen stops being a full screen. A screen-tall hero left
   half a phone of empty ground under the panel, and the glass sat on the
   mouse's foot with nothing behind it. Here the painting is laid out in the
   flow at full width, and the panel is pulled up over it so the glass covers
   the belly and legs while the face, the raised hand and the chest stay clear. */
@media (max-width: 699px) {
  .hero {
    display: block;
    min-height: 0;
    padding-block: 0 2rem;
  }

  .hero .plate-media {
    position: relative;
    inset: auto;
  }

  .hero .plate-media img {
    height: auto;
    object-fit: initial;
  }

  /* The mouse's chest ends about 45% down the painting, which is 1600 x 1362,
     so 45% of its height is 0.45 x 0.85 of the screen's width. */
  .hero .hero-grid {
    margin-top: -38vw;
  }
}

.hero .hero-title {
  font-size: clamp(2rem, 1rem + 3.4vw, 3.9rem);
  text-wrap: balance;
}

.hero-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* Glass, because there is a painting behind it. The ring is an inset shadow
   rather than a border: a real border shrinks the backdrop-filter region to the
   padding box and leaves an unfiltered gap inside the edge. The ground here is
   light, so the veil lifts rather than darkens the way the facility plate's does. */
.hero-panel,
.grail-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  border-radius: var(--radius-panel);
  background: rgb(255 255 255 / 0.14);
  backdrop-filter: blur(11px) saturate(1.3) brightness(1.03);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.5),
    inset 0 1px 0 rgb(255 255 255 / 0.8),
    inset 0 -1px 0 rgb(255 255 255 / 0.28),
    var(--shadow-panel);
}

/* The panel keeps to the left half so the mouse has the right. This used to fall
   out of a two-column grid; with only the panel left in it that rule read as dead,
   so the constraint is stated on the panel itself where it cannot be mistaken. */
@media (min-width: 900px) {
  .hero-panel {
    max-width: 85%;
  }
}

.hero-panel .hero-description {
  margin-top: 1.1rem;
}

/* Same size as the line above it: both say what we do. What we build is set
   bold in the gold the italics use, so it reads at a glance. */
.hero-description b {
  font-weight: 700;
  color: var(--accent-quiet);
}

.hero-panel .hero-sub {
  margin-top: 1.1rem;
}

/* On the glass the dim grey washed out, so both lines under the title are set
   near-black; size, not colour, keeps them below the title. The panel sets the
   measure, so they run its full width. */
.hero-panel .hero-sub,
.hero-panel .hero-description {
  color: rgb(26 23 19 / 0.85);
  max-width: none;
}

.hero-panel .hero-sub em {
  white-space: nowrap;
}

/* The gold words sit over the mouse's fur, where the site gold is too light to
   read. Inside this panel only, they take a deeper gold, both bold so they match, and the glass is a
   little frostier. The gold everywhere else is unchanged. */
.hero-panel {
  background: rgb(255 255 255 / 0.4);
}

.hero-panel .hero-sub em,
.hero-panel .hero-description b {
  color: #7a5a26;
  font-weight: 700;
}

.section {
  padding-block: calc(var(--space-section) / 2);
}


/* Columns divided by a rule at the top, not boxed. The number sets the heading
   rather than floating in a notch cut out of a border. */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin-top: 2.6rem;
}

.lede + .rules-grid {
  margin-top: 3rem;
}

.rule {
  padding-top: 0.95rem;
  border-top: 1px solid var(--rule-strong);
}

.rule-no {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent-quiet);
}

.rule h3 {
  margin-bottom: 0.55rem;
  font-size: 1.12rem;
  line-height: 1.3;
  text-wrap: balance;
}

.rule p {
  color: var(--fg-dim);
  font-size: 0.92rem;
  line-height: 1.6;
  text-wrap: pretty;
}


/* ===== review-approved.css 42-57, 67 (booking dialog) ===== */
.founder-booking:focus-visible, .booking-heading button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.booking-open { overflow: hidden; }
.booking-dialog { margin: auto; width: min(960px, calc(100vw - 32px)); max-width: none; height: min(850px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--surface-0); color: var(--fg); box-shadow: var(--shadow-panel); }
.booking-dialog::backdrop { background: rgb(26 23 19 / .6); backdrop-filter: blur(8px); }
.booking-dialog[open] { display: flex; flex-direction: column; }
.booking-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; }
.booking-heading h2 { font-size: 1.3rem; }
.booking-heading button { border: 0; background: transparent; color: inherit; font-size: 1.4rem; padding: .5rem; cursor: pointer; }
.booking-body { position: relative; flex: 1; min-height: 0; display: flex; }
.booking-dialog iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: white; opacity: 0; transition: opacity var(--duration-fast, .2s); }
.booking-dialog.is-loaded iframe { opacity: 1; }
.booking-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; margin: 0; color: var(--fg-dim); font: 500 .95rem var(--font-body); }
.booking-dialog.is-loaded .booking-loading { display: none; }
.booking-spinner { width: 28px; height: 28px; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: booking-spin .9s linear infinite; }
@keyframes booking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .booking-spinner { animation-duration: 3s; } }
@media (max-width: 700px) {
  .booking-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
}


/* ===== src-css/outreach.css ===== */
/* ---- Outreach pages ---------------------------------------------------------
   One offer per page: hero, three ruled points, the booking call over a
   painting. Written phone-first; the wide layout is the exception below. */

/* The investor site's nav is sticky and tucks on scroll. These pages are short
   and have no menu, so it simply sits at the top in the flow. */
.ol-nav {
  position: relative;
}

.ol-lang {
  grid-column: 3;
  justify-self: end;
  padding: 0.6rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 699px) {
  .ol-lang {
    grid-column: 2;
  }
}

/* -- hero ------------------------------------------------------------------ */

.ol .hero-panel .kicker {
  margin-bottom: 0.9rem;
  color: #7a5a26;
}

.ol .hero .hero-title {
  font-size: clamp(1.9rem, 1rem + 3vw, 3.5rem);
}

.ol .hero-panel .hero-sub {
  font-size: clamp(1.02rem, 0.94rem + 0.45vw, 1.28rem);
  line-height: 1.5;
}

.ol .hero-panel .hero-sub b {
  font-weight: 700;
  color: #7a5a26;
}

@media (min-width: 700px) {
  /* A full screen of hero hid the points below it; this leaves their top in view. */
  .ol .hero {
    min-height: min(86svh, 54rem);
  }
}

@media (min-width: 900px) {
  .ol .hero-panel {
    max-width: min(85%, 42rem);
  }
}

/* -- the three points ------------------------------------------------------ */

.ol-points .rules-grid {
  margin-top: 0;
}

/* Small gold type on paper takes the darker accent, which passes AA there. */
.ol-points .rule-no {
  color: var(--accent-ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ol-points .rule h2 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.18rem, 1.08rem + 0.4vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ol-points .rule p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(26 23 19 / 0.78);
}

.ol-path {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--rule);
}

.ol-path + .ol-path {
  margin-top: 0.9rem;
}

.ol-points .rule .ol-path-label {
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* -- the call -------------------------------------------------------------- */

.ol-cta {
  background: var(--surface-0);
}

.ol-cta-media {
  position: relative;
}

.ol-cta-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ol-cta-panel {
  padding: 1.75rem 0 3rem;
}

.ol-cta-panel h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  text-wrap: balance;
}

.ol-cta-panel h2 em {
  color: var(--accent-quiet);
}

.ol-cta-panel p {
  margin-top: 0.9rem;
  max-width: 42ch;
  color: rgb(26 23 19 / 0.78);
  text-wrap: pretty;
}

/* The investor page's founder button, sized for a thumb: full width on a phone. */
.ol-book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  min-height: 52px;
  margin-top: 1.5rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--fg);
  font: 500 1rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.ol-book:hover,
.ol-book:focus-visible {
  background: #cfa462;
  text-decoration: none;
}

.ol-book:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 4px;
}

@media (min-width: 560px) {
  .ol-book {
    display: inline-flex;
    width: auto;
  }
}

.ol-cta-panel .ol-mail,
.ol-cta-panel .ol-forward {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.ol-mail a {
  color: var(--accent-ink);
}

/* Wide screens: the painting fills the band and the words sit in the plate's
   dark glass, the way the ethics and ask plates carry theirs. */
@media (min-width: 900px) {
  .ol-cta {
    display: flex;
    align-items: flex-end;
    min-height: min(56.25vw, 50rem);
  }

  .ol-cta-media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .ol-cta-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: var(--focus, 60% 50%);
  }

  .ol-cta-wrap {
    width: 100%;
    padding-block: clamp(2rem, 5vw, 4rem);
  }

  .ol-cta-panel {
    --fg: #fff;
    --accent: #e8c27e;
    --accent-quiet: #e8c27e;
    --accent-ink: #e8c27e;

    max-width: 34rem;
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    border-radius: var(--radius-panel);
    color: #fff;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.4),
      inset 0 0 2px 1px rgb(0 0 0 / 0.15),
      inset 0 0 10px 4px rgb(0 0 0 / 0.1),
      0 4px 16px rgb(17 17 26 / 0.05),
      0 8px 24px rgb(17 17 26 / 0.05),
      0 16px 56px rgb(17 17 26 / 0.05);
    -webkit-backdrop-filter: blur(6px) brightness(0.5) saturate(1.2);
    backdrop-filter: blur(6px) brightness(0.5) saturate(1.2);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
  }

  .ol-cta-panel p {
    color: rgb(255 255 255 / 0.88);
  }

  .ol-book {
    color: #1a1713;
    text-shadow: none;
  }

  .ol-book:hover,
  .ol-book:focus-visible {
    background: #f4d69f;
  }

  .ol-book:focus-visible {
    outline-color: #fff;
  }
}

/* -- footer ---------------------------------------------------------------- */

.ol-foot {
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.ol-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-block: 1.4rem 2rem;
}

.ol-foot-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fg);
}

.ol-foot a {
  color: var(--fg-dim);
  padding-block: 0.4rem;
}

.ol-foot a:hover,
.ol-foot a:focus-visible {
  color: var(--fg);
}

/* -- the index of pages ---------------------------------------------------- */

.ol-index {
  padding-block: clamp(2.5rem, 8vh, 6rem) calc(var(--space-section) / 2);
}

.ol-index h1 {
  font-size: clamp(1.9rem, 1rem + 3vw, 3.2rem);
  max-width: 20ch;
  text-wrap: balance;
}

.ol-index .rules-grid {
  margin-top: 2.4rem;
}

.ol-index .rule a {
  display: block;
  padding-block: 0.25rem;
  font-size: 1.05rem;
  color: var(--fg);
}

.ol-index .rule a:hover,
.ol-index .rule a:focus-visible {
  color: var(--accent-ink);
}

/* -- Japanese -------------------------------------------------------------- */

/* Helvetica (or Arimo) keeps the Latin; the Japanese falls through to the
   platform's gothic. Mono labels get the same gothic for their kana. */
html:lang(ja) {
  --font-display: 'Helvetica Neue', Helvetica, 'Arimo', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, 'Arimo', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  --font-mono: 'JetBrains Mono', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', Meiryo, monospace;
}

html:lang(ja) body {
  line-height: 1.8;
}

/* Headings break only at the <wbr> phrase marks in the markup, so a line never
   ends in the middle of a word; anywhere is the fallback for a phrase that is
   wider than the screen. */
html:lang(ja) :is(h1, h2, h3) {
  line-height: 1.42;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html:lang(ja) em {
  font-style: normal;
}

html:lang(ja) .ol .hero .hero-title {
  font-size: clamp(1.55rem, 1rem + 2.3vw, 2.85rem);
}

html:lang(ja) .ol-points .rule h2 {
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  letter-spacing: 0.02em;
}

html:lang(ja) .ol-points .rule p,
html:lang(ja) .ol-cta-panel p {
  line-height: 1.85;
}

html:lang(ja) .kicker,
html:lang(ja) .rule-no,
html:lang(ja) .ol-path-label {
  letter-spacing: 0.08em;
}

html:lang(ja) .ol-cta-panel h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem);
}

/* -- Netlify's badge --------------------------------------------------------
   The Free plan injects a "Powered by Netlify" badge as an iframe; turning it
   off is a paid setting, and the localStorage keys probabilistic.bio sets do
   not stop this newer badge. Hiding the frame does. */
iframe#nl-badge-frame,
iframe#nl-hud-frame {
  display: none !important;
}