/* ============================================================================
   Oxford Ministry for the Future (OMF) — Foundational Tokens
   colors_and_type.css

   Single source of truth for color + type. Import this first in any OMF
   artifact, then layer component styles on top.

   FONTS: No proprietary brand fonts exist. We infer an Oxford-appropriate
   pairing from Google Fonts:
     • EB Garamond  — display + headings (scholarly, old-style, gravitas)
     • Public Sans  — body, UI, labels (civic/"ministry", humanist, neutral)
   If OMF licenses bespoke faces later, swap the @import + the two --font vars.
   ========================================================================== */




:root {
  /* ----------------------------------------------------------------------
     1. CORE PALETTE — raw brand colors (do not use semantic vars below)
     ---------------------------------------------------------------------- */

  /* Slate — the structural anchor. From the logo's "MF". Headings, ink,
     dark sections. Cool, serious, calm. (token family kept as --slate-*) */
  --slate-900: #232C32;   /* darkest — deep sections / footer */
  --slate-800: #37444C;   /* THE OMF slate — headings, dark band, brand */
  --slate-700: #45525A;
  --slate-600: #56636B;
  --slate-500: #6B7780;   /* muted text */
  --slate-400: #8C969D;
  --slate-300: #AEB6BB;
  --slate-200: #CDD3D7;
  --slate-100: #E3E7E9;
  --slate-050: #F1F3F4;

  /* Cotswold stone — warm cream paper. The light-mode ground.
     Crimson + slate on warm cream = academic, literary, Oxford. */
  --stone-050: #FCFAF4;    /* lightest paper / card */
  --stone-100: #F7F2E8;    /* PAGE background — warm cream */
  --stone-200: #EFE8D8;
  --stone-300: #E4DAC5;    /* warm hairline / border */
  --stone-400: #D2C4A8;
  --stone-500: #B3A079;

  /* Crimson — THE brand accent. From the logo's globe + wordmark (#af1e37).
     Primary actions, links, eyebrows, marks. (token family kept as --crimson-*) */
  --crimson-700: #7E1024;  /* darkest — pressed / hover */
  --crimson-600: #951829;  /* hover */
  --crimson-500: #AF1E37;  /* THE OMF crimson — brand */
  --crimson-400: #C7405A;  /* lighter — focus ring, on-dark accents */
  --crimson-300: #DA7E8D;  /* light — accents on dark slate */
  --crimson-200: #EEC3CB;
  --crimson-100: #F7E3E7;  /* tint — badge / highlight backgrounds */

  /* Neutrals for ink + muted text (cool, to sit with slate) */
  --ink-900: #232C32;      /* primary body text */
  --ink-700: #37444C;
  --ink-500: #6B7780;      /* muted / secondary text */
  --ink-400: #8C969D;
  --ink-300: #AEB6BB;

  /* Signal colors (used sparingly) */
  --signal-error: var(--crimson-600);  /* brand crimson doubles as error */
  --signal-success: #2F6E4F;            /* discreet green — confirmations only */
  --signal-info: var(--slate-600);

  --white: #FFFFFF;
  --black: #000000;

  /* ----------------------------------------------------------------------
     2. SEMANTIC COLOR TOKENS — use THESE in components
     ---------------------------------------------------------------------- */
  --bg-page:        var(--stone-100);   /* default page ground */
  --bg-surface:     var(--stone-050);   /* cards, raised panels */
  --bg-inset:       var(--stone-200);   /* wells, inputs on cream */
  --bg-ink:         var(--slate-800);   /* dark sections / footer */
  --bg-ink-deep:    var(--slate-900);

  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-500);   /* secondary / muted text */
  --fg-3: var(--ink-400);   /* tertiary / captions, metadata */
  --fg-on-ink:      var(--stone-100);   /* text on slate surfaces */
  --fg-on-ink-mute: var(--slate-300);   /* muted text on slate */

  --heading: var(--slate-800);   /* serif headings default to OMF slate */
  --link:    var(--crimson-500);
  --link-hover: var(--crimson-700);

  --accent:       var(--crimson-500);  /* primary accent — OMF crimson */
  --accent-hover: var(--crimson-700);
  --highlight:    var(--crimson-500);  /* eyebrows / kickers / marks */

  --border:        var(--stone-300);  /* default hairline on cream */
  --border-strong: var(--stone-400);
  --border-on-ink: rgba(255,255,255,0.16);

  --focus-ring: var(--crimson-400);

  /* ----------------------------------------------------------------------
     3. TYPEFACES
     ---------------------------------------------------------------------- */
  --font-serif: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* No bespoke mono. For dates/codes we letterspace the sans in caps. */
  --font-mono:  ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ----------------------------------------------------------------------
     4. TYPE SCALE — fluid, editorial. Display is serif; UI/body is sans.
        Scale ~1.25 (major third). rem base = 16px.
     ---------------------------------------------------------------------- */
  --text-xs:   0.75rem;    /* 12px — fine print, legal */
  --text-sm:   0.875rem;   /* 14px — captions, metadata */
  --text-base: 1.0625rem;  /* 17px — body default (generous for reading) */
  --text-md:   1.1875rem;  /* 19px — lead paragraphs */
  --text-lg:   1.5rem;     /* 24px */
  --text-xl:   1.953rem;   /* ~31px */
  --text-2xl:  2.441rem;   /* ~39px */
  --text-3xl:  3.052rem;   /* ~49px */
  --text-4xl:  clamp(2.8rem, 1.6rem + 5vw, 4.6rem);   /* hero */
  --text-5xl:  clamp(3.4rem, 1.4rem + 8vw, 6.5rem);   /* display hero */

  --leading-tight: 1.08;
  --leading-snug:  1.22;
  --leading-body:  1.6;
  --leading-loose: 1.75;

  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.14em;   /* eyebrow / label letterspacing */

  /* ----------------------------------------------------------------------
     5. SPACING — 4px base, named steps
     ---------------------------------------------------------------------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */

  /* ----------------------------------------------------------------------
     6. RADII — restrained. Institution, not a startup. Mostly square.
     ---------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;    /* inputs, chips */
  --radius-md:   4px;    /* cards, buttons */
  --radius-lg:   8px;    /* large media panels */
  --radius-pill: 999px;  /* tags / filter pills only */

  /* ----------------------------------------------------------------------
     7. SHADOWS — soft, warm-tinted, low. Paper resting on paper.
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26, 22, 12, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 22, 12, 0.07);
  --shadow-md: 0 6px 20px rgba(26, 22, 12, 0.09);
  --shadow-lg: 0 18px 48px rgba(35, 44, 50, 0.18);
  --shadow-ring: 0 0 0 1px var(--border);  /* hairline as "shadow" */

  /* ----------------------------------------------------------------------
     8. MOTION — calm, editorial. No bounce. Ease-out for entrances.
     ---------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;

  --maxw-prose: 64ch;   /* reading measure */
  --maxw-page:  1200px; /* content container */
  --maxw-wide:  1360px;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt in by importing this file.
   Lightweight, non-destructive. Components can override.
   ========================================================================== */

.omf, body.omf {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — serif, slate, tight */
.omf h1, .omf h2, .omf h3, .omf h4,
.omf-h1, .omf-h2, .omf-h3, .omf-h4 {
  font-family: var(--font-serif);
  color: var(--heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.omf h1, .omf-h1 { font-size: var(--text-3xl); font-weight: 600; }
.omf h2, .omf-h2 { font-size: var(--text-2xl); }
.omf h3, .omf-h3 { font-size: var(--text-xl); font-weight: 600; }
.omf h4, .omf-h4 { font-size: var(--text-lg); }

.omf-display {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--heading);
  text-wrap: balance;
}

/* Lead paragraph */
.omf-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-1);
  max-width: var(--maxw-prose);
}

.omf p { max-width: var(--maxw-prose); }

/* Eyebrow / kicker — sans, uppercase, tracked, crimson */
.omf-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--highlight);
}

/* Metadata line — small caps-ish sans, muted */
.omf-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

/* Pull quote — serif italic, large */
.omf-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--slate-700);
  text-wrap: pretty;
}

.omf a, .omf-link {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--crimson-200);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.omf a:hover, .omf-link:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

::selection { background: var(--crimson-100); color: var(--crimson-700); }


/* OMF website — component styles, built on colors_and_type.css */

*, *::before, *::after { box-sizing: border-box; }

.site {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  min-height: 100vh;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }

/* ---------- text layout utilities ----------
   Reusable rules for the patterns we standardised on. Add the class to any
   <p>/<h*>; `.omf` prefix gives them enough specificity to win over the default
   `.omf p { max-width }` prose cap. */
.omf .text-block  { text-align: justify; hyphens: auto; }      /* justified "block text" (Blocksatz), even left+right edges */
.omf .text-edge   { max-width: none; }                          /* span the FULL width of the container (overrides prose cap) */
.omf .text-balance{ text-wrap: balance; }                       /* balanced line wrapping for short headings/leads */
/* Common combo: full-width justified copy that reaches a box/board edge. */
.omf .text-fill   { max-width: none; text-align: justify; hyphens: auto; }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.btn i { font-size: 18px; }
.btn--primary { background: var(--slate-800); color: var(--stone-100); }
.btn--primary:hover { background: var(--slate-900); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--crimson-600); color: #fff; }
.btn--accent:hover { background: var(--crimson-700); box-shadow: var(--shadow-md); }
.btn--secondary { background: transparent; color: var(--slate-800); border-color: var(--slate-800); }
.btn--secondary:hover { background: var(--slate-050); }
.btn--ghost { background: transparent; color: var(--slate-700); padding-left: 6px; padding-right: 6px; }
.btn--ghost:hover { color: var(--slate-900); }
.btn--onlight { background: var(--stone-100); color: var(--slate-800); }
.btn--onlight:hover { background: #fff; box-shadow: var(--shadow-md); }
.btn--ondark { background: transparent; color: var(--stone-100); border-color: var(--border-on-ink); }
.btn--ondark:hover { background: rgba(255,255,255,.08); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Style-guide rule: buttons never carry a trailing directional arrow. */
.btn .ph-arrow-right, .btn .ph-arrow-up-right, .btn .ph-caret-right, .btn .ph-arrow-right-bold { display: none; }

/* ---------- eyebrow / meta ---------- */
.eyebrow { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--highlight); margin: 0; }
.eyebrow--mute { color: var(--fg-2); }
.metaline { font-size: 14px; font-weight: 500; color: var(--fg-2); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; margin: 0; }
.metaline span { display: inline-flex; align-items: center; gap: 6px; }
.metaline i { font-size: 16px; color: var(--fg-2); }

/* ---------- pills / badges ---------- */
.pill { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg-1); background: transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.pill:hover { border-color: var(--slate-500); }
.pill--on { background: var(--slate-800); color: var(--stone-100); border-color: var(--slate-800); }
.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 5px 10px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; }
.badge--up { background: var(--crimson-100); color: var(--crimson-700); }
.badge--past { background: var(--stone-200); color: var(--ink-500); }
.badge--video { background: rgba(35,44,50,.82); color: var(--stone-100); backdrop-filter: blur(4px); }

/* ---------- avatar (monogram) ---------- */
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; color: var(--stone-100); flex: none; letter-spacing: .01em; }

/* ---------- media panel (duotone placeholder) ---------- */
.media { position: relative; overflow: hidden; background: var(--slate-800); }
.media::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 80% 0%, rgba(175,30,55,.26), transparent 58%); }
.media__play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(247,242,232,.16); border: 1px solid rgba(247,242,232,.5); color: var(--stone-100);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); z-index: 2; transition: background var(--dur-base) var(--ease-out); }
.media__play i { font-size: 30px; margin-left: 3px; }
.media__label { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600;
  letter-spacing: .03em; color: rgba(247,242,232,.82); text-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* ---------- cards ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer; text-align: left;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); display: block; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card:hover .media__play { background: rgba(247,242,232,.28); }

hr.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }


/* OMF UI kit — screen / layout styles */

/* ---------- masthead ---------- */
.mast { position: sticky; top: 0; z-index: 50; background: rgba(247,242,232,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--slate-800);
  border-bottom: 1px solid var(--border); transition: background var(--dur-base), backdrop-filter var(--dur-base), box-shadow var(--dur-base); }
.mast--scrolled { background: rgba(247,242,232,0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-xs); }
.mast__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.mast__brand { display: flex; align-items: center; gap: 13px; cursor: pointer; text-decoration: none; }
.mast__words { display: flex; flex-direction: column; line-height: 1.1; }
.mast__name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--slate-800); letter-spacing: .005em; }
.mast__sub { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--crimson-500); margin-top: 3px; }
.mast__nav { display: flex; align-items: center; gap: 26px; }
.mast__link { font-size: 15px; font-weight: 500; color: var(--slate-600); cursor: pointer; text-decoration: none; padding: 4px 0; position: relative; transition: color var(--dur-fast); }
.mast__link:hover { color: var(--slate-900); }
.mast__link.is-active { color: var(--crimson-600); }
.mast__link.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--crimson-500); }
.mast__icon { background: transparent; border: 0; color: var(--slate-600); cursor: pointer; font-size: 20px; display: flex; padding: 4px; }
.mast__icon:hover { color: var(--crimson-600); }
.mast__search { border-top: 1px solid var(--border); background: var(--stone-050); }
.mast__search-inner { display: flex; align-items: center; gap: 12px; height: 64px; color: var(--slate-500); }
.mast__search-inner i { font-size: 22px; }
.mast__search-inner input { flex: 1; background: transparent; border: 0; outline: none; color: var(--slate-900); font-family: var(--font-sans); font-size: 18px; }
.mast__search-inner input::placeholder { color: var(--slate-400); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--slate-800); color: var(--stone-100); overflow: hidden; }
.hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(110% 80% at 78% -10%, rgba(175,30,55,.34), transparent 58%),
  radial-gradient(80% 70% at 105% 115%, rgba(199,64,90,.16), transparent 55%); }
.hero__grain { position:absolute; inset:0; opacity:.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; padding: 92px 32px 100px; }
.hero__title { font-family: var(--font-serif); font-size: clamp(3rem, 1.4rem + 6vw, 5.2rem); line-height: .98; letter-spacing: -.02em; font-weight: 600; color: var(--stone-100); margin: 18px 0 0; }
.hero__title em { font-style: italic; color: var(--crimson-300); }
.hero__lead { max-width: 50ch; font-size: 19px; line-height: 1.6; color: var(--slate-100); margin: 24px 0 0; }
.hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- sections ---------- */
.section { padding: 64px 32px; }
.sechead { position: relative; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; }
.sechead h2 { font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--heading); margin: 0; }
.sechead__rule { position: absolute; left: 0; right: 0; bottom: 0; }
.sechead__action { background: transparent; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--link); display: inline-flex; align-items: center; gap: 6px; }
.sechead__action i { font-size: 17px; transition: transform var(--dur-fast); }
.sechead__action:hover i { transform: translateX(3px); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---------- intro strip (homepage section 1) ---------- */
.intro-strip { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
.intro-strip__title { font-family:var(--font-serif); font-size:clamp(1.9rem,2.5vw,2.8rem); line-height:1.1; font-weight:600; color:var(--heading); margin:0 0 1.1rem; }
.intro-strip__lead { font-size:var(--text-base); line-height:1.7; color:var(--fg-2); margin:0 0 1.75rem; }
.intro-strip__lead a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.intro-strip__lead a:hover { color:var(--link-hover); }
@media(max-width:720px){ .intro-strip { grid-template-columns:1fr; } .intro-strip__media { min-height:220px; } }

/* ---------- feature ---------- */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.feature__body { padding: 40px 40px; }
.feature__title { font-family: var(--font-serif); font-size: 38px; line-height: 1.06; font-weight: 600; color: var(--heading); margin: 12px 0 14px; }
.feature__stand { font-size: 17px; line-height: 1.6; color: var(--fg-1); margin: 0 0 22px; }
.feature__spk { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.feature__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- speaker chip ---------- */
.spkchip { display: inline-flex; align-items: center; gap: 11px; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.spkchip:hover { border-color: var(--slate-400); background: var(--slate-050); }
.spkchip__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.spkchip__name { font-size: 14.5px; font-weight: 600; color: var(--fg-1); }
.spkchip__role { font-size: 12px; color: var(--fg-2); }

/* ---------- event card ---------- */
.evcard { display: flex; flex-direction: column; height: 100%; }
.evcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.evcard__badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.evcard__title { font-family: var(--font-serif); font-size: 23px; line-height: 1.16; font-weight: 600; color: var(--heading); margin: 8px 0 20px; }
.evcard__body .metaline { margin-top: auto; }

.evrow { display: grid; grid-template-columns: 230px 1fr; }
.evrow__body { padding: 22px 26px; }
.evrow__title { font-family: var(--font-serif); font-size: 27px; line-height: 1.08; font-weight: 600; color: var(--heading); margin: 9px 0 10px; }
.evrow__stand { font-size: 15.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 14px; max-width: 60ch; }
.evlist { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }

/* ---------- band (oxford blue) ---------- */
.band { background: var(--slate-800); color: var(--stone-100); }
.band__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 76px 32px; align-items: start; }
.band__title { font-family: var(--font-serif); font-size: 36px; line-height: 1.14; font-weight: 600; color: var(--stone-100); margin: 14px 0 0; text-wrap: balance; }
.band__col p { font-size: 17px; line-height: 1.66; color: var(--slate-100); margin: 0 0 22px; }

/* ---------- page heads ---------- */
.pagehead { background: var(--slate-800); color: var(--stone-100); padding: 64px 0 56px; }
.pagehead__title { font-family: var(--font-serif); font-size: 58px; line-height: 1; font-weight: 600; color: var(--stone-100); margin: 14px 0 0; letter-spacing: -.015em; }
.pagehead__lead { max-width: 56ch; font-size: 18px; line-height: 1.6; color: var(--slate-100); margin: 20px 0 0; }
.page { padding-bottom: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }

/* ---------- speaker grid card ---------- */
.spkcard { padding: 30px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.spkcard__name { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--heading); margin: 16px 0 4px; }
.spkcard__role { font-size: 13.5px; color: var(--fg-2); margin: 0; }

/* ---------- detail ---------- */
.detail__back { padding-top: 28px; }
.backlink { background: transparent; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--link); display: inline-flex; align-items: center; gap: 7px; }
.backlink i { font-size: 17px; }
.detail__head { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding-top: 26px; padding-bottom: 8px; align-items: start; }
.detail__title { font-family: var(--font-serif); font-size: 50px; line-height: 1.02; font-weight: 600; color: var(--heading); margin: 14px 0 18px; letter-spacing: -.015em; }
.detail__stand { font-size: 20px; line-height: 1.55; color: var(--fg-1); margin: 0; max-width: 36ch; }
.detail__facts { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-xs); }
.fact { display: flex; gap: 13px; align-items: flex-start; }
.fact > i { font-size: 21px; color: var(--crimson-600); margin-top: 2px; }
.fact__label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); }
.fact__value { display: block; font-size: 16px; font-weight: 500; color: var(--fg-1); margin-top: 2px; }
.detail__facts .btn { width: 100%; justify-content: center; margin-top: 4px; }

.detail__body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; padding: 24px 32px 8px; }
.prose p { font-size: 18px; line-height: 1.7; color: var(--fg-1); margin: 0 0 20px; max-width: 60ch; }
.pullquote { font-family: var(--font-serif); font-style: italic; font-size: 27px; line-height: 1.3; color: var(--slate-700); border-left: 2px solid var(--crimson-500); padding-left: 24px; margin: 28px 0; }
.pullquote--big { font-size: 32px; border-left: 0; padding: 0; text-align: center; margin: 40px auto; color: var(--slate-700); }
.detail__spk { }
.detail__spkhead { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); margin: 0 0 16px; }
.detail__spk .spkchip { display: flex; margin-bottom: 12px; }

/* ---------- intro film (Vimeo) ---------- */
.film__head { margin-bottom: 22px; }
.film__title { font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--heading); margin: 6px 0 0; }
.filmframe { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--slate-900); }
.filmframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- player ---------- */
.player .media { border-radius: var(--radius-lg); overflow: hidden; }
.player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; border: 0; display: block; }
.player__cover { position: absolute; inset: 0; z-index: 3; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.player__btn { width: 78px; height: 78px; border-radius: 50%; background: rgba(247,242,232,.18); border: 1px solid rgba(247,242,232,.55); color: var(--stone-100); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.player__btn i { font-size: 38px; margin-left: 4px; }
.player__cover:hover .player__btn { transform: scale(1.06); background: rgba(247,242,232,.3); }
.player__cap { font-size: 15px; font-weight: 600; color: var(--stone-100); letter-spacing: .02em; }
.player__live { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--stone-100); }
.player__live p { font-size: 15px; color: var(--slate-100); margin: 0; }
.player__bars { display: flex; gap: 5px; align-items: flex-end; height: 34px; }
.player__bars span { width: 5px; background: var(--crimson-300); border-radius: 2px; animation: eq 1.1s ease-in-out infinite; }
.player__bars span:nth-child(1){height:40%;animation-delay:0s}
.player__bars span:nth-child(2){height:90%;animation-delay:.18s}
.player__bars span:nth-child(3){height:60%;animation-delay:.36s}
.player__bars span:nth-child(4){height:100%;animation-delay:.54s}
@keyframes eq { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }
.player__controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(transparent, rgba(20,26,30,.85)); }
.player__controls i { font-size: 20px; color: var(--stone-100); cursor: pointer; }
.player__scrub { flex: 1; height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.player__scrub span { display: block; height: 100%; background: var(--crimson-300); }
.player__time { font-size: 12.5px; color: var(--slate-100); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .player__bars span { animation: none; } }

/* ---------- profile ---------- */
.profile { display: grid; grid-template-columns: 200px 1fr; gap: 44px; padding-top: 20px; padding-bottom: 8px; align-items: start; }
.profile__name { font-family: var(--font-serif); font-size: 48px; line-height: 1.02; font-weight: 600; color: var(--heading); margin: 12px 0 18px; }
.profile__bio { font-size: 19px; line-height: 1.66; color: var(--fg-1); margin: 0; max-width: 60ch; }
.profile__note { font-size: 13px; color: var(--fg-3); font-style: italic; margin: 16px 0 0; }

/* ---------- about ---------- */
.about-hero { position: relative; background: var(--slate-800); color: var(--stone-100); overflow: hidden; }
.about-hero__inner { position: relative; padding: 84px 32px 76px; }
.about-hero__title { font-family: var(--font-serif); font-size: clamp(2.6rem,1.4rem+4vw,4rem); line-height: 1.04; font-weight: 600; color: var(--stone-100); margin: 16px 0 0; text-wrap: balance; }
.about-body { padding: 60px 32px 20px; }
.about-body .lead-p { font-size: 22px; line-height: 1.55; color: var(--fg-1); margin: 0 0 24px; }
.about-body p { font-size: 18px; line-height: 1.72; color: var(--fg-1); margin: 0 0 22px; }
.founder { display: flex; gap: 22px; padding: 28px; align-items: flex-start; text-align: left; }
.founder__name { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--heading); margin: 0 0 3px; }
.founder__role { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--crimson-600); margin: 0 0 12px; }
.founder__bio { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.about-cta { text-align: center; }
.about-cta h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 600; color: var(--heading); margin: 0 0 24px; }

/* ---------- footer ---------- */
.foot { background: var(--slate-900); color: var(--slate-100); padding: 64px 0 0; }
.foot__inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 56px; padding-bottom: 48px; }
.foot__blurb { font-size: 15.5px; line-height: 1.62; color: var(--slate-200); max-width: 38ch; margin: 20px 0 22px; }
.foot__social { display: flex; gap: 14px; }
.foot__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: var(--slate-100); cursor: pointer; font-size: 19px; transition: background var(--dur-fast), color var(--dur-fast); }
.foot__social a:hover { background: rgba(255,255,255,.1); color: #fff; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot__col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--crimson-500); margin: 6px 0 16px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { margin-bottom: 11px; }
.foot__col a { font-size: 15px; color: var(--slate-100); cursor: pointer; text-decoration: none; }
.foot__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 22px 32px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--slate-300); }
.foot__legal em { font-style: italic; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 100; background: var(--slate-900); color: var(--stone-100); padding: 15px 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; border: 1px solid rgba(255,255,255,.12); }
.toast i { font-size: 20px; color: var(--crimson-300); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feature, .band__inner, .detail__head, .detail__body, .profile, .foot__inner { grid-template-columns: 1fr; }
  .evrow { grid-template-columns: 1fr; }
  .mast__nav .mast__link { display: none; }
}



  html, body { margin: 0; padding: 0; background: var(--slate-900); }


/* ============================================================================
   STATIC-SITE COMPATIBILITY
   The original React app set .site-scroll to height:100vh; overflow-y:auto
   inline and toggled .mast--scrolled via JS. As a static site we use natural
   document scroll instead, so the sticky header works without any JavaScript.
   ========================================================================== */
html { scroll-behavior: smooth; }
.site-scroll { height: auto; overflow: visible; }
.mast__brand, .mast__link, .sechead__action, .backlink,
.foot__col a, .foot__social a { cursor: pointer; }
.foot__col a, .foot__social a { text-decoration: none; color: inherit; }

/* ---------- mobile menu (no JavaScript) ---------- */
.mast__mobile { display:none; }
.mast__burger { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--slate-700); font-size:26px; }
.mast__burger::-webkit-details-marker { display:none; }
.mast__mobile[open] .mast__burger { color:var(--crimson-600); }
.mast__drawer { position:absolute; left:0; right:0; top:100%; background:var(--stone-100); border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); display:flex; flex-direction:column; padding:10px 0 16px; z-index:60; }
.mast__drawer a { padding:13px 32px; font-size:17px; font-weight:500; color:var(--slate-800); text-decoration:none; }
.mast__drawer a:hover { background:var(--stone-200); }
.mast__drawer a.btn { margin:12px 32px 4px; justify-content:center; color:#fff; }
@media (max-width:920px){ .mast__nav{ display:none; } .mast__mobile{ display:block; } }

/* ---------- nav dropdown (About sub-pages) ---------- */
.mast__dropdown { position: relative; }
.mast__dropdown > .mast__link::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  vertical-align: middle;
  position: relative; top: -1px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
}
.mast__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--stone-050);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(35,44,50,.14);
  min-width: 224px;
  padding: 6px 0;
  z-index: 200;
  white-space: nowrap;
}
.mast__dropdown:hover .mast__dropdown-menu { display: block; }
/* invisible bridge across the 12px gap so the cursor can travel from
   "About" down to the menu without losing :hover */
.mast__dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.mast__dropdown-menu a {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate-700);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mast__dropdown-menu a:hover { background: var(--stone-100); color: var(--slate-900); }
.dropdown-divider { height: 1px; background: var(--border); margin: 5px 0; }
/* mobile drawer: indented sub-links */
.mast__drawer-sub { padding-left: 3rem !important; font-size: 15px !important; opacity: .75; }

/* ---------- OMF heading visibility fix (dark sections) ---------- */
/* .omf h1 (0,1,1) was overriding single-class section titles (0,1,0),
   rendering dark headings on dark backgrounds. Raise specificity. */
body.omf .hero__title,
body.omf .pagehead__title,
body.omf .band__title,
body.omf .about-hero__title { color: var(--stone-100); }
body.omf .hero__title em { color: var(--crimson-500); }
/* buttons are <a>; .omf a underline (0,1,1) beat .btn (0,1,0) — restore no-underline */
body.omf .btn, body.omf .btn:hover { text-decoration: none; }

/* button text colours — .omf a (0,1,1) overrode the .btn--* variant colours */
body.omf .btn--primary  { color: var(--stone-100); }
body.omf .btn--accent   { color: #fff; }
body.omf .btn--secondary{ color: var(--slate-800); }
body.omf .btn--ghost    { color: var(--slate-700); }
body.omf .btn--onlight  { color: var(--slate-800); }
body.omf .btn--ondark   { color: var(--stone-100); }

/* ── events intro grid (text + image, alternating) ── */
.evintro { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3rem); align-items:center; }
.evintro + .evintro { margin-top:clamp(2rem,4vw,3rem); }
.evintro__text { font-size:var(--text-base); line-height:1.75; color:var(--fg-2); }
.evintro__media { border-radius:var(--radius-lg); overflow:hidden; }
@media(max-width:720px){ .evintro { grid-template-columns:1fr; } .evintro .evintro__media:first-child { order:-1; } }

/* ── programme schedule ── */
.prog__day { background:var(--slate-800); color:var(--stone-100); border-radius:var(--radius-md); padding:10px 18px; font-size:14px; font-weight:600; letter-spacing:.01em; margin:28px 0 0; }
.prog__item { display:flex; gap:20px; padding:14px 0; border-top:1px solid var(--border); align-items:start; }
.prog__time { font-size:12.5px; font-weight:600; color:var(--fg-3); min-width:90px; padding-top:3px; white-space:nowrap; }
.prog__body { flex:1; }
.prog__body h4 { font-size:15px; font-weight:600; color:var(--fg-1); margin:0 0 4px; }
.prog__body p { font-size:14px; line-height:1.6; color:var(--fg-2); margin:0; }
.prog__body p + p { margin-top:8px; }
.prog__body a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }

/* ── collaboration note (events) ── */
.evnote { background:var(--stone-100); border:1px solid var(--border); border-left:3px solid var(--slate-400); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:14px 20px; font-size:14px; line-height:1.65; color:var(--fg-2); margin-top:28px; }
.evnote a { color:var(--link); }

/* ── past events box ── */
.evpast { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 32px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-surface); }
.evpast__title { font-family:var(--font-serif); font-size:clamp(1.2rem,2vw,1.5rem); font-weight:600; color:var(--heading); margin:0 0 6px; }
.evpast__sub { font-size:15px; color:var(--fg-2); margin:0; line-height:1.5; }
@media(max-width:600px){ .evpast { flex-direction:column; align-items:flex-start; } }

/* ── OMF photo splash hero (from design, replaces intro-strip on homepage) ── */
.splash { position:relative; min-height:600px; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; }
.splash__bg {
  position:absolute; inset:0;
  background-image:url('hero-bg.jpg');
  background-size:cover; background-repeat:no-repeat; background-position:center 42%;
}
.splash__bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(270deg,
    rgba(247,242,232,1)   0%,
    rgba(247,242,232,1)   41%,
    rgba(247,242,232,.85) 47%,
    rgba(247,242,232,0)   58%);
}
.splash__panel {
  position:relative; z-index:2;
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,52px);
  max-width:520px; margin-left:auto;
}
.splash__kicker { font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--crimson); margin:0 0 16px; }
.splash__title { font-family:var(--font-serif); font-weight:600; font-size:clamp(36px,3.2vw,46px); line-height:1.06; letter-spacing:-.015em; color:var(--slate-800); margin:0; }
.splash__stand { font-family:var(--font-serif); font-size:clamp(18px,1.6vw,22px); line-height:1.42; color:var(--slate-700); margin:22px 0 0; }
.splash__detail { font-size:16px; line-height:1.65; color:var(--slate-500); margin:16px 0 28px; }
.splash__detail a { color:var(--crimson); text-decoration:underline; text-underline-offset:2px; }
.splash__detail a:hover { color:var(--crimson-700); }

@media (max-width:1080px) {
  .splash { display:block; min-height:0; }
  .splash__bg { position:relative; height:56vw; max-height:380px; inset:auto; }
  .splash__bg::after { background:linear-gradient(0deg, rgba(247,242,232,1) 0%, rgba(247,242,232,0) 42%); }
  .splash__panel { max-width:none; margin:0; padding:28px clamp(20px,5vw,40px) 44px; }
}

/* grid-2 mobile stack — multi-video years stack on phones (desktop unchanged) */
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }