/* =============================================================================
   Atlassian Spacing Tokens  —  8px base unit
   https://atlassian.design/foundations/spacing
   Same token set as the `about` and `home` repos — see their READMEs'
   "Style guide" section (this file mirrors it, per the shared design
   system this repo now also follows).
   ============================================================================= */
:root {
  --space-025:   2px;
  --space-050:   4px;
  --space-075:   6px;
  --space-100:   8px;
  --space-150:  12px;
  --space-200:  16px;
  --space-250:  20px;
  --space-300:  24px;
  --space-400:  32px;
  --space-500:  40px;
  --space-600:  48px;
  --space-800:  64px;
  --space-1000: 80px;

  /* ── Figma colour tokens ── */
  --c-bg:         #ffffff;
  --c-dark:       #0d0d0c;          /* rgb(13,13,12)   */
  --c-light-bg:   #f8f7f4;          /* rgb(248,247,244)*/
  --c-accent:     #5533ee;          /* rgb(85,51,238)  */
  --c-red:        #f03d1f;          /* rgb(240,61,31)  */
  /* Deeper red-orange — the gradient's closing stop, promoted to a token
     of its own. Link text on a white/light ground uses this: --c-red
     only reaches ~3.9:1 against white, this clears 4.5:1. --c-red stays
     the brand accent for fills, borders, icons, tags and labels. */
  --c-red-dark:   #df3611;
  --c-gray:       #888680;          /* rgb(136,134,128)*/
  --c-gray-dark:  #54534f;          /* body copy needing real contrast (~8:1 on white), matches `home` */
  --c-white:      #ffffff;

  /* Paragraph+Background gradient (orbital overlay)
     stop 0 = #5533ee, stop 81% = #df3611 (rgb 223,54,17)
     angle ≈ 150 deg based on Figma handle positions              */
  --c-gradient: linear-gradient(150deg, #5533ee 0%, var(--c-red-dark) 81%);

  /* ── Figma typography tokens ── */
  /* Two families, no third — and the split is by what the text IS, not by
     heading level. --f-serif: page titles, and titles of works or names of
     people (a post title, a paper title, a person's name), plus pull-quote
     copy. --f-sans: section headings, card and UI labels, running prose,
     metadata, controls and uppercase micro-labels.
     The one that trips people up: a SECTION HEADING IS NOT SERIF. Serif
     marks a thing that has its own name; sans marks the furniture around
     it. See README -> Typography. */
  --f-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  /* -- Type scale (sitewide -- see README) --------------------------------
     Fluid: each clamp() interpolates between the mobile floor and the
     desktop ceiling, so tablet needs no separate breakpoint override.
     12px is the hard floor; nothing on the site ships smaller.         */
  --fs-display:     clamp(36px, 22.7px + 3.70vw, 76px);
  --fs-h1:          clamp(36px, 29.3px + 1.85vw, 56px);
  --fs-h2:          clamp(26px, 21.3px + 1.30vw, 40px);
  --fs-h3:          clamp(20px, 18.7px + 0.37vw, 24px);
  --fs-lede:        clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-small-serif: 15px;   /* EB Garamond runs ~1px small beside DM Sans */
  --fs-micro:       12px;   /* uppercase labels, tags, meta -- the floor */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-lede:    1.26;
  --lh-title:   1.3;
  --lh-body:    1.55;

  /* ── Page layout ── */
  --max-w: 1440px;
  --pad-x: var(--space-1000);   /* 80px side padding — page-level rhythm */
}

/* Side padding scales down on smaller screens, backported from `home`
   (about's README recommends this for anything wider than a headline/
   paragraph — this page is just that, but scaling the padding costs
   nothing and keeps the eyebrow/title from crowding the edge on phones). */
@media (max-width: 900px) {
  :root { --pad-x: var(--space-400); }  /* 32px */
}
@media (max-width: 480px) {
  :root { --pad-x: var(--space-250); }  /* 20px */
}

/* =============================================================================
   Reset
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  color: var(--c-dark);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}

/* =============================================================================
   Shared inner container
   Same shared-selector convention as `about`/`home`: add any new
   section's `__inner` to this list rather than writing a one-off rule.
   ============================================================================= */
.openings__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* =============================================================================
   Job Openings
   ============================================================================= */
.openings {
  position: relative;
  background: var(--c-bg);
  padding-top: var(--space-1000);
  padding-bottom: var(--space-1000);
}

.openings__title {
  font-family: var(--f-serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--c-accent);
  /* Heading immediately followed by body copy: flat --space-300 (24px)
     gap, per the shared style guide's heading/body-copy convention. */
  margin-bottom: var(--space-250);
}

.openings__lead {
  font-family: var(--f-sans);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-lede);
  letter-spacing: 0;
  color: var(--c-dark);
}

/* Body copy gets no max-width of its own — it fills the full width of
   the padded __inner container. See the shared style guide's "Heading
   and body-copy positioning" note for why. */

/* =============================================================================
   Job posting
   Used when there is a live opening; the empty-state .openings__lead above
   stays in the markup as a comment so it can be restored when postings close.
   Body copy here deliberately carries no measure cap either, per the note
   directly above — this repo fills the padded column.
   ========================================================================== */
.job { margin-top: var(--space-600); }

/* Divider only between postings, never above the first one. */
.job + .job {
  margin-top: var(--space-800);
  padding-top: var(--space-800);
  border-top: 1px solid rgba(13, 13, 12, 0.12);
}

/* A role name labels a category rather than naming a work or a person, so it
   is sans, not serif — same call as events' .event-card__title. */
.job__title {
  font-family: var(--f-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--c-red);
  margin-bottom: var(--space-300);
}

.job__body p {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--c-dark);
}
.job__body p + p { margin-top: var(--space-250); }
.job__body strong { font-weight: 600; }

.job__meta { color: var(--c-gray-dark); }

/* Category 1 — in-text link on a white ground: --c-red-dark at weight 500,
   no underline, fading on hover. Colour is the affordance. */
.job__inline {
  color: var(--c-red-dark);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.job__inline:hover,
.job__inline:focus-visible { opacity: 0.7; }

/* Category 2 — independent link. As a standalone control it gets the hairline
   and the trailing arrow that in-text links never carry. */
.job__apply {
  display: inline-block;
  margin-top: var(--space-400);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 13, 12, 0.35);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.job__apply:hover,
.job__apply:focus-visible {
  color: var(--c-red-dark);
  border-bottom-color: var(--c-red-dark);
}
.job__apply span { margin-left: var(--space-075); }

@media (max-width: 480px) {
}

/* =============================================================================
   Scroll-triggered reveal
   Progressive enhancement: the opacity/transform rule only applies once
   the page's own script has confirmed it can run (js-reveal-ready on
   <html>), so a page with JS disabled or blocked never gets stuck with
   invisible content — everything just renders normally instead. Same
   pattern as `about`/`home`.
   ============================================================================= */
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(56px) scale(0.97);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Trailing-margin guard ─────────────────────────────────────────────────
   These pages are embedded in an iframe that is resized to the height this
   page reports, and that height is measured from document.body.

   A bottom margin on the last element COLLAPSES THROUGH body and out to
   <html>. It never appears in body.scrollHeight, but it does extend
   documentElement.scrollHeight — so the frame gets sized short of the real
   document, the embedded page is left with a few px it can scroll, and it
   swallows the visitor's wheel events: the outer page then only scrolls when
   the cursor is over its scrollbar. It has bitten twice (home, 64px;
   grants-overview, 80px) and it is invisible in the builder.

   display: flow-root makes body a block formatting context, so descendant
   margins can no longer escape it and the measured height is always the whole
   document. Cheap, and it removes a whole class of bug rather than one
   instance. If a page grows here, something was relying on a margin escaping
   — convert that margin to padding rather than removing this.
   ====================================================================== */
body { display: flow-root; }

/* ── Page end ──────────────────────────────────────────────────────────
   Sitewide (Sept 2026): the last section sits flush on the global footer,
   which opens with its own 132px white signal band. That band is the gap
   before the footer on every page. The old 80px trailing space on top of it
   left 200px+ of white at the end of some pages. */
.openings { padding-bottom: 0; }