/* IEDRI visual system.

   Three layers, so nothing can drift out of sync:
   1. Brand colors live in _data/branding.yml and are turned into custom
      properties in _layouts/default.html (ink, green, purple, gold, aqua, linen).
   2. The semantic tokens below (--bg, --text, --accent...) say what each color is
      FOR. Light mode, dark mode, and the per-page colorway only change these.
   3. Components use the semantic tokens, never the raw brand colors, except for
      the dark bands that are dark in both modes. */

/* Inclusive Sans is bundled with the site (SIL Open Font License, see
   assets/fonts/inclusive-sans/OFL.txt), so no request leaves the domain. */
@font-face {
  font-family: "Inclusive Sans"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/inclusive-sans/inclusive-sans-latin-wght-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: "Inclusive Sans"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/inclusive-sans/inclusive-sans-latin-ext-wght-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: "Inclusive Sans"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/inclusive-sans/inclusive-sans-latin-wght-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;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  color-scheme: light dark;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.3,.7,.4,1);

  /* Page colorway: set per page with `colorway:` in front matter. Purple is the
     default; green and ink (the blue) are the other two primaries. Gold and
     aqua are highlights and are never a colorway. */
  --cw: var(--purple);

  /* Semantic tokens, light mode */
  --bg: var(--linen);
  --surface: var(--white);
  --band: color-mix(in srgb, var(--cw) 8%, var(--linen));
  --text: var(--ink);
  --text-soft: color-mix(in srgb, var(--ink) 68%, var(--linen));
  --line: color-mix(in srgb, var(--text) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 30%, transparent);
  --accent: var(--cw);                     /* fills and full-width bands */
  --accent-text: var(--cw);                /* eyebrows, links, markers */
  --accent-deep: color-mix(in srgb, var(--cw) 80%, black);
  --purple-text: var(--purple);
  --purple-light: color-mix(in srgb, var(--purple) 45%, var(--white));
  --green-light: color-mix(in srgb, var(--green) 45%, var(--white));

  /* The brand hues, in the order they are cycled through the page. Fills and
     borders use --hue-n; text uses --t-n, which stays legible on the surface. */
  --hue-1: var(--purple);
  --hue-2: var(--green);
  --hue-3: var(--ink);
  --t-1: var(--purple);
  --t-2: var(--green);
  --t-3: var(--ink);
  --btn-bg: var(--cw);
  --btn-bg-hover: var(--accent-deep);
  --btn-fg: var(--white);
  --focus-ring: var(--ink);
  --gold-wash: color-mix(in srgb, var(--gold) 22%, var(--bg));
  --aqua-wash: color-mix(in srgb, var(--aqua) 32%, var(--bg));
  --on-dark: color-mix(in srgb, var(--white) 82%, transparent);
  --line-light: color-mix(in srgb, var(--white) 32%, transparent);
}
[data-colorway="green"] { --cw: var(--green); }
[data-colorway="ink"] { --cw: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: color-mix(in srgb, var(--ink) 62%, black);
    --surface: color-mix(in srgb, var(--ink) 86%, var(--white));
    --band: var(--ink);
    --text: var(--linen);
    --text-soft: color-mix(in srgb, var(--linen) 74%, var(--ink));
    --accent-text: var(--gold);
    --purple-text: color-mix(in srgb, var(--purple) 32%, var(--white));
    --hue-1: var(--purple-light);
    --hue-2: var(--green-light);
    --hue-3: color-mix(in srgb, var(--ink) 45%, var(--white));
    --t-1: var(--purple-light);
    --t-2: var(--green-light);
    --t-3: var(--linen);
    --btn-bg: var(--gold);
    --btn-bg-hover: color-mix(in srgb, var(--gold) 80%, var(--white));
    --btn-fg: var(--ink);
    --focus-ring: var(--linen);
  }
}

body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inclusive Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl { margin-top: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); line-height: 1.2; }
h3 { font-size: 1.3rem; line-height: 1.35; letter-spacing: -.006em; }
p { margin-bottom: 1.15em; }
p:last-child { margin-bottom: 0; }
/* Two-tone focus ring: a solid outline in the text color plus a gold halo, so
   one of the two always clears 3:1 whatever surface the element sits on. */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; box-shadow: 0 0 0 6px var(--gold); }
::selection { background: var(--gold); color: var(--ink); }

.shell { width: min(1140px, calc(100% - 3rem)); margin-inline: auto; }
/* .narrow keeps the shell's gutters, so narrowed text still starts on the same
   left edge as full-width content instead of floating inward. */
.shell.narrow > * { max-width: 780px; }
.center { text-align: center; }
.shell.center > * { margin-inline: auto; }
.section { padding: clamp(4rem, 7.5vw, 7rem) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .75rem 1.2rem; border-radius: var(--radius-pill); background: var(--gold); color: var(--ink); font-weight: 700; transform: translateY(-250%); }
.skip-link:focus { transform: translateY(0); }

.eyebrow { display: block; margin-bottom: .9rem; color: var(--accent-text); font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.section-heading { max-width: 640px; margin-bottom: 3rem; }
.section-note { margin-top: 1rem; color: var(--text-soft); }
.prose-large { font-size: 1.125rem; }
.prose-large p:last-of-type { margin-bottom: 1.6rem; }

/* A small hand-placed flourish, used to close a block rather than to divide every one. */
.dot-divider { display: flex; align-items: center; gap: .65rem; width: max-content; margin: 2rem 0 0; padding: 0; list-style: none; }
.dot-divider span { width: 7px; height: 7px; border-radius: 50%; background: var(--hue-1); }
.dot-divider span:nth-child(2) { width: 5px; height: 5px; background: var(--gold); }
.dot-divider span:nth-child(3) { background: var(--hue-2); }

/* ---------- Brand stripe ----------
   All five brand colors in one hard-edged bar. It crowns the hero and every
   page header, so purple, green, blue, gold, and aqua are all present on every
   page. */
.hero::before, .page-hero::before { display: block; height: 7px; margin: calc(-1 * clamp(3rem, 5vw, 4.5rem)) 0 clamp(3rem, 5vw, 4.5rem); content: "";
  background: linear-gradient(90deg, var(--hue-1) 0 34%, var(--hue-2) 34% 58%, var(--hue-3) 58% 78%, var(--gold) 78% 90%, var(--aqua) 90% 100%); }
.page-hero::before { margin: calc(-1 * clamp(4rem, 8vw, 6.5rem)) 0 clamp(4rem, 8vw, 6.5rem); }
.page-hero.compact::before { margin: calc(-1 * clamp(3.5rem, 6vw, 5rem)) 0 clamp(3.5rem, 6vw, 5rem); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: .45rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; color: var(--text); text-decoration: none; }
.brand .logo img { width: 62px; height: 62px; }
.brand .logo { flex: none; }
.brand-text { display: flex; flex-direction: column; font-size: .95rem; font-weight: 600; line-height: 1.2; }
/* wrap rather than overflow if the labels ever outgrow the bar (large text sizes) */
.primary-nav ul { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: clamp(.7rem, 1.5vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.primary-nav a { position: relative; padding: .5rem .1rem; font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.primary-nav a:not(.nav-button)::after { position: absolute; right: 0; bottom: .1rem; left: 0; height: 2px; background: var(--accent-text); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .2s var(--ease); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.primary-nav a[aria-current="page"] { font-weight: 700; }
.primary-nav .nav-button { padding: .65rem 1.2rem; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; }
.primary-nav .nav-button:hover { background: var(--btn-bg-hover); }
.nav-toggle { display: none; align-items: center; gap: .6rem; padding: .5rem; border: 0; background: transparent; color: var(--text); font-weight: 700; border-radius: var(--radius-s); }
.nav-toggle-icon { display: grid; gap: 4px; width: 22px; }
.nav-toggle-icon i { display: block; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }

/* ---------- Buttons & links ---------- */
.button-group { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius-pill); font-size: .98rem; font-weight: 700; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s var(--ease); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--btn-bg); color: var(--btn-fg); }
.button-primary:hover { background: var(--btn-bg-hover); }
.button-outline { border-color: var(--text); color: var(--text); }
.button-outline:hover { background: var(--text); color: var(--bg); }
.button-light { background: var(--white); color: var(--ink); }
.button-light:hover { background: var(--linen); }
.text-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--accent-text); font-weight: 700; text-decoration-thickness: .1em; }
.text-link span { transition: transform .18s var(--ease); }
.text-link:hover span { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 5vw, 4.5rem) 0 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; column-gap: clamp(1.5rem, 4vw, 4rem); }
.hero-grid h1 { grid-column: 1 / -1; max-width: 22em; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero-copy { align-self: center; max-width: 36rem; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* The emblem: its supports run down to the hero's bottom border. It has its
   own grid cell, so it never sits behind the text. */
.hero-figure { color: var(--accent-text); pointer-events: none; }
.hero-figure svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hero-figure .fig-hub { fill: var(--bg); }
.hero-figure .fig-riders circle { stroke: var(--bg); stroke-width: 3; paint-order: stroke; }
.hero-figure .fig-car path { fill: currentColor; }
.hero-lead { max-width: 33em; margin-bottom: 2rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--text-soft); }

/* ---------- Dark bands ----------
   The accent intro band and the ink programs band share one inverted treatment
   so the two read as the same device. Anything with its own color further
   down the sheet has to be re-stated here, since those rules are more specific
   than plain inheritance. These bands stay dark in both color schemes. */
.intro-section, .work-section, .status-band { color: var(--white); }
.intro-section { background: var(--accent); }
.intro-section .eyebrow, .work-section .eyebrow { color: var(--gold); }
.intro-section p, .work-section p, .status-band p { color: var(--on-dark); }
.intro-section .section-note, .work-section .section-note { color: color-mix(in srgb, var(--white) 72%, transparent); }
.intro-section .text-link { color: var(--gold); }
/* Membership's intro band is prose only, with no heading or grid to fill it,
   so the text is sized up to read as a statement instead of stranded body copy. */
.intro-section .shell.narrow.prose-large { font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
.intro-section :focus-visible, .work-section :focus-visible,
.status-band :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }

/* ---------- Principles ---------- */
.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 5rem; }
.principle-grid.flush { margin-top: 0; }
.principle { --ph: var(--hue-1); --ph-on: var(--white); padding-top: 1.5rem; border-top: 3px dashed color-mix(in srgb, var(--ph) 60%, transparent); }
.principle:nth-child(3n+2) { --ph: var(--hue-2); }
.principle:nth-child(3n+3) { --ph: var(--hue-3); }
.principle-icon { display: grid; width: 48px; height: 48px; margin-bottom: 1.4rem; place-items: center; border-radius: 50%; background: var(--ph); color: var(--ph-on); }
.principle-icon svg { width: 24px; height: 24px; }
/* on the accent band the colors are the highlights */
.intro-section .principle { --ph: var(--gold); --ph-on: var(--ink); border-top-color: var(--line-light); }
.intro-section .principle:nth-child(3n+2) { --ph: var(--aqua); }
.intro-section .principle:nth-child(3n+3) { --ph: var(--white); }
@media (prefers-color-scheme: dark) { .principle { --ph-on: var(--ink); } }
.principle h3 { margin-bottom: .6rem; }
.principle p { color: var(--text-soft); }
.intro-section .principle p { color: var(--on-dark); }

/* ---------- Programs (dark band) ---------- */
.work-section { background: var(--ink); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.work-card { --wh: var(--purple-light); display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid rgba(255,255,255,.18); border-top: 5px solid var(--wh); border-radius: var(--radius-l); transition: border-color .18s ease, background .18s ease; }
.work-card:nth-child(4n+2) { --wh: var(--green-light); }
.work-card:nth-child(4n+3) { --wh: var(--gold); }
.work-card:nth-child(4n+4) { --wh: var(--aqua); }
.work-card:hover { border-color: var(--wh); background: rgba(255,255,255,.04); }
.work-card h3 { margin-bottom: .7rem; font-size: 1.45rem; }
.work-card p { margin-bottom: 1.6rem; color: var(--on-dark); }
.work-card a { margin-top: auto; color: var(--wh); font-weight: 700; text-decoration-thickness: .1em; }
.work-card a span { display: inline-block; transition: transform .18s var(--ease); }
.work-card a:hover span { transform: translateX(4px); }

/* ---------- Status band ---------- */
.status-band { background: var(--green); }
.status-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.status-inner h2 { margin-bottom: .8rem; }
.status-inner p { max-width: 60ch; }

/* ---------- Updates / closing note ---------- */
.updates-section { background: var(--band); border-top: 1px solid var(--line); }
.updates-section h2 { margin-bottom: 1rem; }
.updates-action { margin-top: 1.2rem; font-weight: 700; }

/* ---------- Page heroes ---------- */
.page-hero { padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem); background: var(--band); border-bottom: 1px solid var(--line); }
.page-hero.compact { padding-block: clamp(3.5rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem); }
.page-hero h1 { margin-bottom: 1.2rem; }
.page-lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--text-soft); }

/* ---------- Events ---------- */
.detail-list { margin: 2rem 0 0; }
.detail-list div { display: grid; grid-template-columns: 7rem 1fr; gap: .25rem 1.5rem; padding: .85rem 0; border-bottom: 2px dashed var(--line); }
.detail-list dt { color: var(--accent-text); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.9; }
.detail-list dd { margin: 0; font-weight: 600; }
.access-note { margin-top: 2rem; padding: 1.3rem 1.5rem; border-radius: var(--radius-m); background: var(--band); font-size: .95rem; }
.access-note strong { display: block; margin-bottom: .3rem; }
.seminars-section { background: var(--band); }
.empty-state { padding: 1.3rem 1.5rem; border: 2px dashed var(--line-strong); border-radius: var(--radius-m); color: var(--text-soft); }

/* ---------- Press ---------- */
.series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.series-card { padding: clamp(1.75rem, 3vw, 2.5rem); border: 2px solid var(--text); border-radius: var(--radius-l); background: var(--surface); box-shadow: 7px 7px 0 var(--gold); }
.series-card:nth-child(2) { box-shadow: 7px 7px 0 var(--aqua); }
.series-card:nth-child(3) { box-shadow: 7px 7px 0 var(--hue-2); }
.series-source { margin-bottom: .6rem; color: var(--purple-text); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.series-card h3 { margin-bottom: .8rem; font-size: 1.6rem; }
.series-contains-label { margin: 1.5rem 0 .6rem; font-weight: 700; font-size: .95rem; }
.library-section { background: var(--band); }

/* ---------- Services / process ---------- */
.offering-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.offering-card { --oh: var(--hue-1); padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line-strong); border-top: 6px solid var(--oh); border-radius: var(--radius-l); background: var(--surface); transition: border-color .18s ease; }
.offering-card:nth-child(4n+2) { --oh: var(--hue-2); }
.offering-card:nth-child(4n+3) { --oh: var(--hue-3); }
.offering-card:nth-child(4n+4) { --oh: var(--gold); }
.offering-card:hover { border-color: var(--oh); }
.offering-card h2 { margin-bottom: .8rem; font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.offering-card h3 { margin-bottom: .7rem; font-size: 1.3rem; }
.deliverable { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 2px dashed var(--line); }
.deliverable strong { color: var(--accent-text); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.process-section { background: var(--band); }
.process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.process-list li { --pl: var(--hue-1); --pt: var(--t-1); display: flex; gap: 1.2rem; padding-top: 1.4rem; border-top: 3px dashed var(--pl); }
.process-list li:nth-child(3n+2) { --pl: var(--hue-2); --pt: var(--t-2); }
.process-list li:nth-child(3n+3) { --pl: var(--hue-3); --pt: var(--t-3); }
.process-list > li > span { color: var(--pt); font-weight: 700; }
.process-list h3 { margin-bottom: .5rem; }
.process-list p { color: var(--text-soft); }

/* ---------- Membership ---------- */
.membership-section { background: var(--band); }
.access-box { max-width: 720px; margin: 3.5rem 0 0; padding: 1.8rem 2rem; border: 2px solid var(--purple-text); border-radius: var(--radius-l); background: var(--surface); box-shadow: 7px 7px 0 color-mix(in srgb, var(--purple-text) 22%, transparent); }
.access-box h3 { margin-bottom: .5rem; }

/* ---------- Contact ---------- */
.contact-section { background: transparent; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); }
.contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.contact-details h2 { font-size: 1.75rem; }
.contact-email { color: var(--accent-text); font-size: 1.15rem; font-weight: 700; }
.response-time { padding: .9rem 1.2rem; border-radius: var(--radius-m); border-left: 3px solid var(--gold); background: var(--gold-wash); }
.form-panel { padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--radius-l); background: var(--band); }
.form-panel h2 { margin-bottom: 1rem; font-size: 1.6rem; }
.topic-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.topic-list li { padding: .35rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: .85rem; }
.contact-form { display: grid; gap: 1.3rem; }
.contact-form label { display: grid; gap: .4rem; font-size: .88rem; font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--text); }
.contact-form textarea { resize: vertical; }
.contact-form .button { justify-self: start; }

/* ---------- Callout ---------- */
/* Always its own band: the hairline keeps it legible even when the section
   above shares its background, which also stops the padding from doubling up
   into a large empty gap. */
.callout-section { background: var(--band); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.callout { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 4.5vw, 3.5rem); border: 2px dashed color-mix(in srgb, var(--hue-1) 55%, transparent); border-radius: var(--radius-l); }
.callout h2 { margin-bottom: .8rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.callout p { max-width: 62ch; color: var(--text-soft); }

/* ---------- Policy pages ---------- */
.policy-layout { display: grid; grid-template-columns: 230px 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.policy-nav { position: sticky; top: 7.5rem; padding: 1.4rem 1.5rem; border-radius: var(--radius-m); border-left: 3px solid var(--accent-text); background: var(--band); }
.policy-nav h2 { margin-bottom: .6rem; font-size: .95rem; }
.policy-nav ol { margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.policy-nav li { margin-top: .5rem; }
.policy-content { max-width: 68ch; }
.policy-section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 2px dashed var(--line); scroll-margin-top: 7.5rem; }
.policy-section h2 { margin-bottom: 1rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.policy-updated { color: var(--text-soft); font-size: .9rem; }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; margin: .6rem 0; padding-left: 1.7rem; }
.check-list li::before { position: absolute; left: 0; top: -.05em; color: var(--accent-text); font-weight: 700; content: "\2713"; }

.error-page { min-height: 60vh; display: grid; place-items: center; padding: 5rem 0; text-align: center; }
.error-page .shell > * { margin-inline: auto; }
.error-page p { margin-bottom: 2rem; color: var(--text-soft); }

/* ---------- Footer ---------- */
.site-footer { padding: 4rem 0 1.5rem; background: var(--ink); color: color-mix(in srgb, var(--white) 84%, transparent); }
.footer-grid { display: grid; grid-template-columns: 1.7fr .65fr .65fr; gap: clamp(2rem, 5vw, 4rem); padding-bottom: 2.5rem; }
.brand-light { color: var(--white); }
.site-footer .brand .logo img { width: 76px; height: 76px; }
.footer-brand p { max-width: 42ch; margin-top: 1.3rem; color: color-mix(in srgb, var(--white) 72%, transparent); }
.footer-heading { margin-bottom: 1rem; color: var(--gold); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin: .6rem 0; }
.site-footer a:not(.brand) { text-decoration: none; }
.site-footer a:not(.brand):hover { color: var(--gold); text-decoration: underline; }
.site-footer .dot-divider { margin-inline: auto; }
.site-footer .dot-divider span:nth-child(1) { background: var(--gold); }
.site-footer .dot-divider span:nth-child(2) { background: var(--white); }
.site-footer .dot-divider span:nth-child(3) { background: var(--aqua); }
.footer-bottom { display: flex; justify-content: space-between; gap: 2.5rem; padding-top: 1.8rem; color: color-mix(in srgb, var(--white) 60%, transparent); font-size: .78rem; }
.footer-bottom p { max-width: 55ch; }
.footer-bottom p:last-child { text-align: right; }

@media (max-width: 64em) {
  .shell { width: min(100% - 2.5rem, 720px); }
  .nav-toggle { display: inline-flex; }
  .primary-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: 1rem 1.5rem 1.5rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav-open .primary-nav { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .primary-nav a { display: block; padding: .8rem .2rem; font-size: 1rem; }
  .primary-nav .nav-button { margin-top: .6rem; text-align: center; }
  .nav-open .nav-toggle-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle-icon i:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .split-heading, .contact-grid, .status-inner, .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 2.5rem; }
  .status-inner { justify-items: start; }
  .principle-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3.5rem; }
  .work-grid, .series-grid, .offering-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; gap: 1.5rem; }
  .callout { grid-template-columns: 1fr; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-nav { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .brand .logo img { width: 54px; height: 54px; }
  .brand-text { font-size: .82rem; }
  .button-group { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .text-link { justify-content: center; }
  .field-row { grid-template-columns: 1fr; }
  .series-card, .access-box { box-shadow: 5px 5px 0 var(--gold); }
  .series-card:nth-child(2) { box-shadow: 5px 5px 0 var(--aqua); }
  .series-card:nth-child(3) { box-shadow: 5px 5px 0 var(--hue-2); }
  .access-box { box-shadow: 5px 5px 0 color-mix(in srgb, var(--purple-text) 22%, transparent); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: .8rem; }
  .footer-bottom p:last-child { text-align: left; }
}
@media (max-width: 420px) {
  /* Keep the name for assistive technology; the badge already says IEDRI. */
  .brand-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .button:hover { transform: none; }
}

@media (forced-colors: active) {
  .hero-figure { color: CanvasText; }
  .button, .work-card, .offering-card, .series-card, .access-box, .callout, .topic-list li, .empty-state { border: 2px solid ButtonText; }
  .series-card, .access-box { box-shadow: none; }
}