/* Type — four faces, five roles.
   Display and emphasis: Space Grotesk. Body: Inter. Meta: JetBrains Mono. Ceremony: Cormorant Garamond.
   Negative tracking on every display size. Mono labels always uppercase, separated by ` · `.
   Never Roboto, Arial, or a system stack. */
:root{
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-ceremony:"Cormorant Garamond",Georgia,serif;

  /* Display scale — fluid, clamped */
  --display-1:clamp(38px,5.4vw,64px); /* @kind font */
  --display-2:clamp(32px,4vw,48px); /* @kind font */
  --display-3:clamp(26px,2.6vw,34px); /* @kind font */
  --display-4:clamp(20px,1.7vw,24px); /* @kind font */
  --display-lh:1.03; /* @kind other */
  --display-lh-loose:1.06; /* @kind other */
  --display-track:-0.028em; /* @kind other */
  --display-track-tight:-0.03em; /* @kind other */
  --display-weight:400; /* @kind other */
  --display-weight-emphasis:600; /* @kind other */

  /* Ceremony — MTP, manifesto pulls. The ONLY serif use. */
  --ceremony-size:clamp(32px,4.4vw,60px); /* @kind font */
  --ceremony-size-sm:clamp(24px,2.6vw,34px); /* @kind font */
  --ceremony-lh:1.08; /* @kind other */
  --ceremony-weight:600; /* @kind other */

  /* Body */
  --body-lg:17px;
  --body-md:15px;
  --body-sm:14px;
  --body-xs:12px;   /* the floor. Body text never goes below 12px. */
  --body-lh:1.7; /* @kind other */
  --body-lh-tight:1.6; /* @kind other */
  --body-lh-loose:1.75; /* @kind other */
  --body-weight:400; /* @kind other */
  --body-weight-medium:500; /* @kind other */
  --body-weight-strong:600; /* @kind other */

  /* Meta / labels — mono, uppercase, wide */
  --meta-md:10px;
  --meta-sm:9px;
  --meta-xs:8.5px;  /* the floor. Mono labels never go below 8.5px. */
  --meta-track:0.16em; /* @kind other */
  --meta-track-wide:0.2em; /* @kind other */
  --meta-track-tight:0.1em; /* @kind other */
  --meta-weight:400; /* @kind other */
  --meta-weight-strong:500; /* @kind other */

  /* Numeric / data readouts */
  --data-lg:28px;
  --data-md:18px;
  --data-sm:13px;
  --data-track:-0.01em; /* @kind other */
}

/* Role classes. Use these, or copy their declarations — either way the values are the same. */
.ob-display{font-family:var(--font-display);font-size:var(--display-1);font-weight:var(--display-weight);line-height:var(--display-lh);letter-spacing:var(--display-track);color:var(--text-display);text-wrap:pretty}
.ob-display-2{font-family:var(--font-display);font-size:var(--display-2);font-weight:var(--display-weight);line-height:var(--display-lh-loose);letter-spacing:var(--display-track);color:var(--text-display);text-wrap:pretty}
.ob-display-3{font-family:var(--font-display);font-size:var(--display-3);font-weight:var(--display-weight-emphasis);line-height:1.12;letter-spacing:var(--display-track);color:var(--text-display)}
/* The signature move: a plain 400 question, then a 600 teal answer. */
.ob-answer{font-family:var(--font-display);font-weight:var(--display-weight-emphasis);color:var(--text-accent);letter-spacing:var(--display-track)}
.ob-ceremony{font-family:var(--font-ceremony);font-size:var(--ceremony-size);font-weight:var(--ceremony-weight);line-height:var(--ceremony-lh);letter-spacing:0;color:var(--text-display);text-wrap:pretty}
.ob-body{font-family:var(--font-body);font-size:var(--body-md);font-weight:var(--body-weight);line-height:var(--body-lh);color:var(--text-body);text-wrap:pretty}
.ob-body-lg{font-family:var(--font-body);font-size:var(--body-lg);font-weight:var(--body-weight);line-height:var(--body-lh-loose);color:var(--text-body);text-wrap:pretty}
.ob-meta{font-family:var(--font-mono);font-size:var(--meta-md);font-weight:var(--meta-weight);text-transform:uppercase;letter-spacing:var(--meta-track);color:var(--text-meta)}
.ob-meta-sm{font-family:var(--font-mono);font-size:var(--meta-sm);font-weight:var(--meta-weight);text-transform:uppercase;letter-spacing:var(--meta-track-wide);color:var(--text-meta)}
.ob-data{font-family:var(--font-mono);font-size:var(--data-md);font-weight:var(--meta-weight-strong);letter-spacing:var(--data-track);color:var(--text-display);font-variant-numeric:tabular-nums}