/* ── EventMedium design system (DS-1, EM-OBS-P1A) ──────────────────────
   Source of truth: the EventMedium Observatory mock-up (Main, Mobile and
   Story artboards). Loaded last in <head> on every page, so a rule here
   wins over a page rule of equal specificity. Pages keep their own variable
   names; their :root blocks point those names at the tokens below. */

/* Fonts: self-hosted, latin + latin-ext subsets, swap. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'),url(/fonts/archivo-latin-wdth-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:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations'),url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Figures: Atkinson Hyperlegible has a slashed zero and no plain alternate,
   so digits 0-9 come from Archivo everywhere the body face is used (F1). */
@font-face{font-family:'EM Figures';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'),url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:400;
  src:url(/fonts/atkinson-hyperlegible-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:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:700;
  src:url(/fonts/atkinson-hyperlegible-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:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:400;
  src:url(/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:700;
  src:url(/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Brand */
  --em-ink:#14161A;
  --em-vermilion:#C23A1A;
  --em-teal:#0F5E57;
  --em-ochre:#6E5200;
  --em-stone:#D6DAD3;
  --em-stone-light:#EEF1EC;
  /* Derived */
  --em-paper:#FFFFFF;
  --em-surface:#FFFFFF;          /* cards */
  --em-surface-2:#EEF1EC;        /* panels, table heads, quiet fills */
  --em-surface-3:#E3E7E0;        /* hover on surface-2 */
  --em-border:#D6DAD3;
  --em-border-strong:#82887F;    /* form controls: 3:1 on white */
  --em-text:#14161A;
  --em-text-2:#3B403B;           /* secondary copy */
  --em-muted:#4A4F4A;            /* labels, captions */
  --em-faint:#5E635E;            /* placeholders, least text; AA on white and stone-light */
  --em-accent:#C23A1A;           /* = vermilion: primary action */
  --em-accent-hover:#A3301A;
  --em-accent-ink:#B3361A;       /* vermilion text on its tint */
  --em-accent-tint:#FAEDE8;      /* vermilion text on it: 4.69:1 */
  --em-link:#0F5E57;             /* = teal */
  --em-ok:#0F5E57;
  --em-ok-tint:#E3EFEC;
  --em-warn:#6E5200;             /* = ochre */
  --em-warn-tint:#F3ECD9;
  --em-danger:#B3361A;
  --em-danger-tint:#FAEDE8;
  --em-notice:#FFF1B8;
  --em-on-ink-muted:#D6DAD3;     /* body copy on ink */
  --em-on-ink-accent:#F0B7A6;    /* labels on ink */
  --em-on-ink-ok:#7FC8BD;        /* success on ink */
  /* Type */
  --em-font-body:'EM Figures','Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --em-font-head:'Archivo','Atkinson Hyperlegible',system-ui,sans-serif;
  --em-font-mono:'EM Figures',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Spacing: 4px base */
  --em-s1:4px;--em-s2:8px;--em-s3:12px;--em-s4:16px;--em-s5:24px;--em-s6:32px;--em-s7:48px;--em-s8:64px;
  --em-radius:2px;
  --em-header-h:64px;            /* fixed nav height (nav.css); 56px under 640px */
  --em-banner-h:28px;            /* beta banner: one line; two lines under 640px */
  --em-focus:0 0 0 2px #FFFFFF,0 0 0 4px #14161A;
}

@media (max-width:640px){:root{--em-header-h:56px;--em-banner-h:44px}}

/* ── Base ── */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--em-font-body);color:var(--em-text)}
h1,h2,h3,h4{font-family:var(--em-font-head) !important;font-variation-settings:'wdth' 78;letter-spacing:-0.005em !important}
h1{font-weight:850}
.em-label{font-family:var(--em-font-head);font-variation-settings:'wdth' 90;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--em-muted)}
td,.em-num,code,pre,kbd,samp{font-variant-numeric:tabular-nums}

/* Focus: visible everywhere, including where a page set outline:none. */
:focus-visible{outline:2px solid var(--em-ink) !important;outline-offset:2px !important}
.nav :focus-visible,.em-on-ink :focus-visible{outline-color:currentColor !important}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0 !important}

/* ── Nav: wordmark only (mock-up). The gradient logo mark is hidden. ── */
.nav{background:var(--em-paper) !important;backdrop-filter:none !important;border-bottom:1px solid var(--em-border) !important}
.nav-brand img,.nav-logo img,.nav-drawer-brand img,.topbar-brand > img,a.logo > img,.nav-dot,.logo-dot,.logo .ld{display:none !important}
.nav-name,.nav-logo{font-family:var(--em-font-head);font-variation-settings:'wdth' 100;font-weight:800 !important;letter-spacing:-0.01em}
.nav-logo{background:none !important;width:auto !important;height:auto !important;color:var(--em-ink) !important}
.nav-logo span{color:var(--em-vermilion) !important}
.nav-link.active{color:var(--em-ink) !important;font-weight:700 !important}
.nav-link:hover{background:var(--em-surface-2) !important}
.nav-cta,.nav-drawer-cta{background:var(--em-accent) !important;color:#fff !important;border-radius:var(--em-radius) !important;font-weight:700 !important}
.nav-cta:hover,.nav-drawer-cta:hover{background:var(--em-accent-hover) !important}

/* Beta banner: it sat behind the fixed nav. It now sits just below it and
   scrolls away; its height is reserved at the top of the body. */
.beta-banner{position:absolute;top:var(--em-header-h);left:0;right:0;z-index:99;box-sizing:border-box;min-height:var(--em-banner-h);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 4px;line-height:16px !important;padding:6px 16px !important}
body:has(> .beta-banner){padding-top:var(--em-banner-h)}

/* Toasts hide by sliding below the viewport; keep the empty box out of view
   (and out of full-page captures) until one is shown. */
.toast:not(.show){visibility:hidden}

/* ── Buttons ── */
.em-btn,.em-btn-secondary,.em-btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--em-radius);font:700 15px/1.2 var(--em-font-body);text-decoration:none;cursor:pointer;border:1.5px solid transparent}
.em-btn{background:var(--em-accent);color:#fff}
.em-btn:hover{background:var(--em-accent-hover);color:#fff}
.em-btn-secondary{background:transparent;color:var(--em-ink);border-color:var(--em-ink)}
.em-btn-secondary:hover{background:var(--em-ink);color:#fff}
.em-btn-quiet{background:transparent;color:var(--em-link);padding:0 8px}
.em-btn-quiet:hover{text-decoration:underline;color:var(--em-ink)}
.em-btn[disabled],.em-btn-secondary[disabled]{background:var(--em-surface-2);color:var(--em-faint);border-color:var(--em-border);cursor:not-allowed}

/* ── Chips: outlined, uppercase ── */
.em-chip{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1.5px solid currentColor;border-radius:var(--em-radius);background:transparent;
  font:700 12px/1 var(--em-font-head);font-variation-settings:'wdth' 88;letter-spacing:.06em;text-transform:uppercase;color:var(--em-accent-ink)}
.em-chip-teal{color:var(--em-teal)}.em-chip-ochre{color:var(--em-ochre)}.em-chip-ink{color:var(--em-ink)}

/* ── Cards ── */
.em-card{border:1px solid var(--em-border);border-radius:var(--em-radius);background:var(--em-surface)}

/* Error pages */
.em-error{max-width:640px;margin:0 auto;padding:96px 24px}
.em-error h1{font-size:44px;line-height:1.05;margin:12px 0 12px}
.em-error p{font-size:17px;line-height:1.6;color:var(--em-text-2);margin:0 0 24px}
.em-error p a{color:var(--em-link)}
.em-error .em-actions{display:flex;flex-wrap:wrap;gap:12px}