/* Self-hosted brand faces. Newsreader and Source Sans 3 are both under the SIL
   Open Font License 1.1, which permits redistribution from IARO's own host.
   Serving them here removes the last third-party request the site makes, and
   keeps the site legible in countries where Google's font CDN is blocked. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/assets/fonts/newsreader-latin-opsz-normal.f94a697b1650.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/assets/fonts/newsreader-latin-opsz-italic.e97067eb043b.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/assets/fonts/source-sans-3-latin-wght-normal.30164609c163.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/assets/fonts/source-sans-3-latin-wght-italic.71c881907d08.woff2") format("woff2");
}

:root {
  --bg: #f6f3ec;
  --bg-2: #efebe2;
  --bg-3: #e4ddd0;
  --paper: #f6f3ec;
  --paper-2: #fffcf7;
  --ink: #1a1f2b;
  --muted: #5b6573;
  --navy: #010042;
  --navy-deep: #010042;
  --gold: #b0893e;
  --gold-2: #c4a265;
  --sky: #7eb6de;
  --line: rgba(28, 42, 110, 0.12);
  --line-dark: rgba(16, 24, 32, 0.12);
  --shadow: 0 18px 40px rgba(20, 30, 82, 0.08);
  --radius: 18px;
  --header-h: 84px;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  letter-spacing: 0;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.skip {
  position: absolute; left: -999px; top: 8px;
}
.skip:focus { left: 8px; z-index: 100; background: var(--gold); color: var(--ink); padding: 8px 12px; }

.wrap {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.wrap-wide {
  width: min(1320px, calc(100% - 32px));
  margin-inline: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--navy);
}
.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.45;
  color: #3d4654;
}
.muted { color: var(--muted); }
.ink { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: linear-gradient(180deg, #e8d3a2, #c4a265);
  color: #1a1408;
}
.btn-gold:hover { filter: brightness(1.05); }
.btn-ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--navy);
}
.btn-ghost:hover { border-color: var(--navy); background: rgba(28,42,110,0.04); }
.btn-navy {
  background: var(--navy);
  color: white;
}
.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header — the whole of it, every width, in one place.
   Signed out: navigation, a "Member login" text link, one Join button.
   Members: navigation and the gold Member mark. Below 1180px the navigation
   folds into the menu panel; below 640px the header keeps the logo, one
   action and the menu button. */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 80;
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  width: min(1320px, calc(100% - 32px));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  min-width: max-content;
}
.brand img.iaro-mark, .brand svg { width: 42px; height: 42px; }
.brand img.iaro-logo {
  width: auto;
  height: 52px;
  max-width: 220px;
  border-radius: 6px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.brand-text span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted);
  margin-top: 4px;
}
.nav {
  display: flex; align-items: center; gap: 2px;
}
.nav a, .nav-toggle {
  position: relative;
  padding: 8px 11px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  white-space: nowrap;
  border-radius: 6px;
}
.nav a:hover, .nav-toggle:hover { background: rgba(1, 0, 66, .05); }
/* The current section is underlined, echoing the rule under the wordmark. */
.nav > a.is-active::after, .nav-toggle.is-active::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--navy);
}
.nav-group { position: relative; }
.nav-group-label { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
}
.nav-toggle svg { transition: transform .2s var(--ease); }
.nav-toggle[aria-expanded="true"] { background: rgba(1, 0, 66, .05); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub {
  display: none;
  position: absolute; top: calc(100% + 12px); left: -10px;
  width: 310px;
  padding: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.nav-group.is-open .nav-sub { display: grid; gap: 2px; }
.nav-sub a { display: block; padding: 10px 12px; border-radius: 8px; white-space: normal; }
.nav-sub a strong { display: block; font-weight: 600; }
.nav-sub a span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.nav-sub a.is-active { background: rgba(1, 0, 66, .06); }
.nav-account { display: none; }
.header-cta { display: flex; gap: 18px; align-items: center; }
.header-cta .btn { min-height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.header-login { font-weight: 600; font-size: 15px; color: var(--navy); white-space: nowrap; }
.header-login:hover { text-decoration: underline; text-underline-offset: 4px; }
html:not(.js-enabled) .nav-group, html:not(.js-enabled) .nav-sub { display: contents; }
html:not(.js-enabled) .nav-toggle, html:not(.js-enabled) .nav-sub a span { display: none; }
html:not(.js-enabled) .nav-sub a strong { font-weight: inherit; }
.menu-btn {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 18px; height: 1.5px; background: var(--navy); position: relative;
}
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0;
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
body.nav-open { overflow: hidden; }
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 90;
    padding: 12px 24px 28px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px rgba(20, 30, 82, .12);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open a { padding: 12px 6px; font-size: 17px; border-radius: 0; }
  .nav.is-open > a.is-active::after { display: none; }
  .nav.is-open a.is-active { font-weight: 700; background: none; }
  /* In the panel Resources is a labelled group, not a second tap. */
  .nav-toggle { display: none; }
  .nav-group-label {
    display: block; margin: 14px 6px 2px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .nav-sub, .nav-group.is-open .nav-sub {
    display: block; position: static; width: auto;
    margin: 0 0 8px 6px; padding: 0 0 0 12px;
    background: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .nav-sub a strong { font-weight: 500; }
  .nav-sub a span { display: none; }
  .nav.is-open .nav-account { display: block; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 700; }
  html:not(.js-enabled) .site-header { position: relative; height: auto; }
  html:not(.js-enabled) .header-inner { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js-enabled) .nav { display: flex; flex-wrap: wrap; }
  html:not(.js-enabled) .nav-group-label { display: none; }
  html:not(.js-enabled) .nav-account { display: inline-flex; }
  html:not(.js-enabled) .menu-btn { display: none; }
}
@media (max-width: 640px) {
  .header-inner { gap: 8px; }
  .brand img.iaro-logo { width: 132px; max-width: 132px; height: auto; }
  .header-cta { gap: 8px; }
  .header-cta .btn { padding-inline: 14px; font-size: 13px; }
  .header-login { display: none; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + 24px) 0 72px;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
}
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,30,82,.42) 0%, rgba(20,30,82,.18) 32%, rgba(20,30,82,.55) 72%, var(--bg) 100%),
    linear-gradient(90deg, rgba(20,30,82,.38), transparent 62%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  max-width: 18ch;
  color: white;
  font-weight: 500;
}
.hero h1 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: #e8f2fb;
}
.hero .kicker { color: #d7ebf8; }
.hero .kicker::before { background: var(--sky); }
.hero .lede { color: rgba(255,255,255,.88); }
.hero-subtitle {
  color: #e8f2fb;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  margin: 18px 0 0;
}
.hero-subtitle + .hero-copy { margin-top: 12px; }
.hero-copy {
  max-width: 38rem;
  margin: 22px 0 28px;
}
.hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 52rem;
}
.hero-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 5.6rem;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: rgba(1,0,42,.32);
  backdrop-filter: blur(10px);
  transition: transform .25s, background .25s, border-color .25s;
}
a.hero-action:visited { color: #fff; }
.hero-action:hover {
  transform: translateY(-1px);
  border-color: #fff;
  background: rgba(1,0,42,.46);
}
.hero-action strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fff;
}
.hero-action-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d7ebf8;
}
.hero-action-meta {
  font-size: 0.86rem;
  line-height: 1.3;
  color: rgba(255,255,255,.82);
}
.hero-action-express {
  background: rgba(126,182,222,.28);
  border-color: var(--sky);
}
/* A member's first card: gold edge and kicker, the member colour. */
.hero-action-member { border-color: #c9a457; }
.hero-action-member .hero-action-kicker { color: #ecd59a; }
.hero-action-member:hover { border-color: #ecd59a; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-meta { border-top-color: rgba(255,255,255,.22); }
.hero-meta div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: white;
}
.hero-meta div span {
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.flight-path {
  position: absolute; inset: 18% 8% 30% 40%;
  z-index: 2; pointer-events: none; opacity: .7;
}
.flight-path path {
  fill: none; stroke: var(--gold-2); stroke-width: 1.2;
  stroke-dasharray: 6 10;
  animation: dash 18s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -400; } }

/* Logo rail */
.logo-rail {
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.logo-rail-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
  font-weight: 600;
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee-set { display: flex; gap: 12px; padding-inline: 6px; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.logo-tile {
  width: 168px; height: 80px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid; place-items: center;
  padding: 12px 14px;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}
a.logo-tile:hover, a.logo-tile:focus-visible {
  border-color: var(--navy);
  box-shadow: 0 8px 18px rgba(20, 30, 82, .10);
}
.logo-tile img {
  width: 100%;
  height: 48px;
  object-fit: contain;
}
.logo-rail-quiet {
  padding: 14px 0 16px;
  background: var(--paper);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.logo-rail-quiet .logo-rail-label {
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 500;
  margin-bottom: 10px;
}
.logo-rail-quiet .logo-tile {
  width: 120px;
  height: 104px;
  padding: 10px;
  border-radius: 8px;
  background: transparent;
}
.logo-rail-quiet .logo-tile img { height: 80px; }
.logo-rail-quiet .marquee-track { animation-duration: 72s; }

/* Sections */
.section { padding: 48px 0; }
.section + .section { padding-top: 32px; }
.section-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 420px);
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
}
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.section-head p { margin: 0; color: var(--muted); }

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

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 0;
  box-shadow: var(--shadow);
}
.card h2, .card h3 { font-size: 1.55rem; margin-bottom: 10px; }
.card p { color: #3d4654; margin: 0; }
.card .num {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 18px;
}
.card-stack { display: grid; gap: 16px; align-content: start; }

.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
/* A portrait beside the name, not a half-page photograph above it. */
.person-card {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
}
.person-card picture { display: block; height: 100%; }
.person-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 168px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}
.person-card .person-copy { padding: 20px 22px; }
.person-card h2 { font-size: 1.6rem; }
@media (max-width: 520px) {
  .person-card { grid-template-columns: 112px minmax(0, 1fr); }
  .person-card img { min-height: 112px; }
  .person-card .person-copy { padding: 16px; overflow-wrap: anywhere; }
}

.photo-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  min-height: 420px;
  margin: 0;
  align-self: stretch;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px;
  background: linear-gradient(transparent, rgba(20,30,82,.82));
  color: white;
}
.photo-card figcaption h2,
.photo-card figcaption .kicker { color: white; }
.photo-card figcaption .kicker::before { background: var(--sky); }
.photo-card figcaption p { color: rgba(255,255,255,.9); margin: 12px 0 0; max-width: 36rem; }
.photo-card figcaption .btn-row { margin-top: 22px; }
.photo-card .btn-gold { background: var(--sky); color: var(--navy); }
.photo-card .btn-ghost { color: white; border-color: rgba(255,255,255,.65); }
.photo-card .photo-licence { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.72); }
.photo-card .photo-licence a { text-decoration: underline; text-underline-offset: 2px; }
.home-join { min-height: min(560px, 72vh); }
.home-join-note { margin: 16px 0 0; max-width: 62ch; }
.home-work { align-items: stretch; margin-top: 28px; }
.home-work-title { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 16ch; }
.home-close { margin-top: 28px; align-items: start; }
.home-close .explore-search { margin-block: 16px 0; }
.fee-points { margin: 14px 0 0; padding-left: 1.15em; display: grid; gap: 10px; color: #3d4654; }
.card .fee-points-more { margin-top: 14px; }
.home-work .photo-credit {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
}
.home-work .photo-credit img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center 40%;
}

/* Events */
.event {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.event-date {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
}
.event h3 { font-size: 1.55rem; margin-bottom: 6px; }
.event p { margin: 0; color: var(--muted); }

/* Members grid */
.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.member-card {
  background: var(--paper-2);
  border-radius: 18px;
  padding: 22px 18px 16px;
  color: var(--ink);
  min-height: 160px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.member-card img {
  width: 100%;
  height: 52px;
  object-fit: contain;
  object-position: left center;
}
.member-card small {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--navy);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.chip.is-on, .chip:hover { background: var(--navy); color: white; border-color: var(--navy); }

/* Map */
.map-shell {
  position: relative;
  background: #dce7f2;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  min-height: 560px;
}
#arotw-map {
  width: 100%;
  height: 620px;
}
.map-shell svg, .map-bg {
  width: 100%;
  height: auto;
  display: block;
}
.hotspot {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 8px rgba(196,162,101,.18);
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 0;
  padding: 0;
}
.hotspot::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(232,211,162,.4);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  from { transform: scale(.4); opacity: .8; }
  to { transform: scale(1.6); opacity: 0; }
}
.hotspot-card {
  position: absolute;
  right: 22px; top: 22px;
  width: min(360px, calc(100% - 44px));
  background: rgba(255,252,247,.94);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(12px);
  z-index: 400;
  max-height: calc(100% - 44px);
  overflow: auto;
}
.hotspot-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.hotspot-card p { margin: 0; color: #3d4654; font-size: 15px; }
.hotspot-card ul { margin: 10px 0 0; padding-left: 18px; color: #3d4654; }
.leaflet-container { font-family: var(--font); background: #dce7f2; }
.link-type {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky);
}

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.price {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 18px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price.is-featured {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-8px);
}
.price .amount {
  font-family: var(--font-display);
  font-size: 2.35rem;
  margin: 12px 0 6px;
}
.price .amount span { font-size: 1rem; letter-spacing: 0; font-family: var(--font); }
.price ul { padding-left: 18px; color: inherit; opacity: .82; margin: 8px 0 18px; flex: 1; }
.price .btn { margin-top: auto; align-self: flex-start; }
.price.is-featured .btn { background: var(--navy); color: white; }

/* Forms */
.form {
  display: grid; gap: 14px;
  background: var(--paper-2);
  color: var(--ink);
  padding: 32px;
  border-radius: 24px;
}
.form label { font-size: 13px; font-weight: 600; }
.form input, .form select, .form textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 12px 14px;
  background: white;
  color: var(--ink);
}
.form input[type="checkbox"],
.form input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  flex: 0 0 auto;
  accent-color: var(--navy, #010042);
}
.form textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note { font-size: 13px; color: var(--muted); }

/* Credited photographs. Licensed images (Creative Commons) must carry the
   photographer and the licence, so the caption travels with the picture
   rather than living in a footer someone later deletes. */
.photo-credit { margin: 0 0 28px; }
.photo-credit img { display: block; width: 100%; height: auto; border-radius: 4px; }
.photo-credit figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.photo-credit figcaption a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.event-video { display: block; width: 100%; height: auto; margin: 0 0 8px; border-radius: 4px; background: var(--navy, #010042); }
.event-video-note { margin: 0 0 28px; }
/* On the programme page the timetable is what the visitor came for, so the
   photograph is a band rather than a full-height picture. */
.photo-credit--band img { max-height: 260px; object-fit: cover; object-position: center 60%; }
.event-lookback {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.event-lookback h2 { font-size: 2rem; margin: 8px 0 12px; }
.event-lookback .lede { max-width: 65ch; }
.event-lookback-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.event-lookback-photos .photo-credit { margin: 0; }
@media (max-width: 700px) {
  .event-lookback-photos { grid-template-columns: 1fr; }
}

/* News */
.news-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.news-item time {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.news-item h3 { font-size: 1.35rem; margin: 8px 0 6px; }
.news-item ul { margin: 0; padding-left: 18px; color: #3d4654; }

/* Page hero */
.page-hero {
  padding: calc(var(--header-h) + 64px) 0 48px;
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(126,182,222,.22), transparent 50%),
    var(--bg);
}
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); max-width: 16ch; }

/* Light band */
.band-paper {
  background: var(--paper);
  color: var(--ink);
}
.band-paper .muted { color: var(--muted); }
.band-paper .kicker { color: var(--navy); }
.band-paper .kicker::before { background: var(--navy); }
.band-paper .card {
  background: white;
  border-color: var(--line-dark);
  color: var(--ink);
}
.band-paper .card p { color: #3d4754; }

.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.4;
  font-style: italic;
  max-width: 36rem;
}

/* Footer */
.site-footer {
  padding: 64px 0 28px;
  border-top: 1px solid transparent;
  background: var(--navy-deep);
  color: #e8eef6;
}
.site-footer .brand-text strong { color: white; }
.site-footer .brand-text span { color: rgba(255,255,255,.65); }
.site-footer .muted { color: rgba(255,255,255,.62); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.site-footer h2 {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 14px;
}
.site-footer a { display: block; padding: 4px 0; color: rgba(232,238,246,.78); }
.site-footer a:hover { color: white; }
.legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: rgba(232,238,246,.5);
}
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.site-footer .legal a { display: inline; color: rgba(232,238,246,.78); }
.site-footer .legal a:hover { color: white; }
.legal address { font-style: normal; display: block; margin-top: 6px; }

.js-enabled .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-enabled .reveal.is-visible { opacity: 1; transform: none; }
.js-enabled .reveal.is-visible:nth-child(2) { transition-delay: .08s; }
.js-enabled .reveal.is-visible:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1100px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .section-head, .grid-3, .grid-2, .grid-4, .member-grid, .people-grid, .price-grid, .form-row, .event {
    grid-template-columns: 1fr;
  }
  .hero { align-items: center; }
  .hero-meta { gap: 16px; }
  .event { gap: 8px; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .hotspot-card { position: relative; right: auto; top: auto; margin: 16px; width: auto; }
  .map-shell { min-height: 420px; }
}
@media (max-width: 640px) {
  .member-grid { grid-template-columns: 1fr; }
  .brand-text span { display: none; }
  .hero h1 { font-size: 2.35rem; max-width: 18ch; }
  .section { padding: 36px 0; }
  .section + .section { padding-top: 24px; }
}

/* Managed website: extend the paper, navy and sky IARO identity. */
:root { --radius: 12px; }
html { scroll-padding-top: calc(var(--header-h) + 20px); }
:focus-visible { outline: 3px solid #2672a3; outline-offset: 4px; }
.btn-gold { background: var(--navy); color: white; }
.hero .btn-gold { background: var(--sky); color: var(--navy); }
.hero .btn-ghost { color: white; border-color: rgba(255,255,255,.6); }
.hero-media::after { background: linear-gradient(90deg, rgba(1,0,42,.76), rgba(1,0,42,.24)), linear-gradient(0deg, rgba(1,0,42,.85), transparent 80%); }
.hero-meta { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.hero-meta div strong { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.hero-meta div span { color: #e0e9f0; }
.price.is-featured { background: #ddecf6; color: var(--navy); }
.price.is-featured .btn { background: var(--navy); color: white; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.directory-hero { padding-bottom: 30px; }
.directory-hero h1 { max-width: 24ch; font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
.directory-hero .lede { max-width: 65ch; margin-bottom: 20px; }
.member-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 14px 0 6px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.member-nav a {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
}
.member-nav a.is-current {
  background: rgba(1, 0, 66, 0.08);
  text-decoration: none;
}
.directory-section { padding-top: 0; }
.text-link, .access-note a, .prose a:not(.btn) { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover, .prose a:not(.btn):hover { color: #235f88; }
/* `.prose a` (0,1,1) outranks `.btn-navy` (0,1,0), so without the :not() a navy
   button inside prose got navy text on a navy ground and vanished. */
.explore-grid { align-items: center; }
.explore-grid h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.explore-grid .lede { margin-block: 20px; }
.explore-grid .photo-card h3 { color: white; font-size: 2rem; }
.explore-search { margin-block: 24px 18px; }
.explore-search label { display: block; margin-bottom: 8px; font-weight: 600; }
.explore-search > div { display: flex; gap: 10px; }
.explore-search input { min-width: 0; flex: 1; width: 100%; padding: 12px; border: 1px solid #7e8794; border-radius: 5px; background: white; }
.explore-search .person-confirm { margin: 12px 0 0; font-weight: 500; }
.explore-search .person-confirm input { flex: none; width: 20px; min-height: 20px; padding: 0; border: 0; }
.recaptcha-note { margin: 12px 0 0; }
.recaptcha-field { margin: 16px 0; }
.grecaptcha-badge { visibility: hidden; }
.access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.access-card { padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.access-card-member { background: #e4eff6; border-top: 3px solid var(--navy); }
.access-card h3 { font-size: 1.8rem; }
.access-card ul { margin: 20px 0 26px; padding-left: 20px; }
.access-card li + li { margin-top: 10px; }
.benefits-table { width: 100%; border-collapse: collapse; }
.benefits-table th, .benefits-table td { padding: 18px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.benefits-table thead { background: #e4eff6; }
.benefits-table tbody th { width: 30%; font-weight: 600; }
.benefits-table td { width: 35%; }
.access-note { padding: 16px 20px; border-left: 3px solid var(--sky); background: #e8f0f5; font-size: 1rem; }
.access-note h2 { font-size: 1.55rem; }
/* The member mark: a gold coin, and a foil pill in the header. Gold means
   "IARO member" and nothing else on the site, so this is the one place it is
   allowed to shine. The coin is the same aircraft and gold as the map pins. */
.member-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 16px 8px 10px;
  max-width: 100%;
  border-radius: 999px;
  background: #fbf4e1;
  border: 1px solid #c9a457;
  color: var(--member-ink, #6d5320);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
}
.member-mark__seal {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%27.15%27%20y1%3D%270%27%20x2%3D%27.85%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fbf0cf%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%23e0bf74%27%2F%3E%3Cstop%20offset%3D%27.64%27%20stop-color%3D%27%23b38a3a%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ead196%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2731%27%20fill%3D%27url%28%23g%29%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2730.2%27%20fill%3D%27none%27%20stroke%3D%27%238a682a%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2725.6%27%20fill%3D%27none%27%20stroke%3D%27%23fff7e2%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M32%207.5c2.05%200%203.35%202.4%203.35%206.05v5.1l17.15%2010.05v5.35L35.35%2028.5v9.15l6.1%204.3v4.4L32%2043.5l-9.45%202.85v-4.4l6.1-4.3V28.5L11.5%2034.05V28.7l17.15-10.05v-5.1C28.65%209.9%2029.95%207.5%2032%207.5Z%27%20fill%3D%27%23010042%27%20transform%3D%27translate%2832%2032%29%20scale%28.64%29%20translate%28-32%20-26.9%29%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  box-shadow: 0 1px 2px rgba(80, 55, 10, .35);
}
.member-mark__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.member-mark__detail {
  display: block;
  margin-top: 1px;
  font-weight: 500;
  color: #4a3d22;
  font-size: .86rem;
}
/* Banner: a champagne card under a gold rule, the label in spaced capitals. */
.member-mark--banner {
  gap: 14px;
  padding: 16px 22px 14px 16px;
  margin: 0 0 4px;
  border-radius: 12px;
  box-shadow: inset 0 3px 0 #d4b062, 0 1px 3px rgba(80, 55, 10, .08);
}
.member-mark--banner .member-mark__seal { width: 40px; height: 40px; }
.member-mark--banner .member-mark__detail { font-size: .95rem; margin-top: 2px; }
/* Header: a foil pill, with a sheen that crosses it on hover or focus. */
.member-mark--header {
  position: relative;
  overflow: hidden;
  margin: 0;
  gap: 8px;
  padding: 5px 15px 5px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3a2a08;
  background: linear-gradient(135deg, #f8ecc9 0%, #e5c67f 36%, #c79e4e 62%, #f1dda7 100%);
  border-color: #a07a32;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(110, 78, 20, .25), 0 1px 3px rgba(80, 55, 10, .22);
}
.member-mark--header .member-mark__seal { width: 22px; height: 22px; }
.member-mark--header:hover { color: #3a2a08; background: linear-gradient(135deg, #fbf1d4 0%, #e9cb86 36%, #cba355 62%, #f4e2b0 100%); }
.member-mark--header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
.member-mark--header:hover::after, .member-mark--header:focus-visible::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .member-mark--header::after { display: none; } }
.search-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding: 22px; border: 1px solid var(--line); background: var(--paper-2); border-radius: 12px; }
.search-bar > div { flex: 1 1 180px; min-width: 0; }
.search-bar > .search-wide { flex: 3 1 260px; }
.search-bar label, .field > label { display: block; font-weight: 600; margin-bottom: 5px; }
.search-bar input, .search-bar select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #7e8794; border-radius: 5px; background: white; }
.search-bar .text-link { align-self: center; }
.results-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 16px; }
.results-heading h2 { font-size: 1.6rem; }
.record-list { border-top: 1px solid var(--line); }
.record-card { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.record-card.is-member { box-shadow: inset 3px 0 0 var(--navy); padding-left: 16px; }
.record-card h3 { font-size: 1.75rem; margin: 8px 0; }
.record-card h3 a:hover, .content-card h2 a:hover, .content-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.record-card p { margin: 4px 0; }
.record-title { font-weight: 600; }
.record-aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: end; justify-content: space-between; gap: 16px; }
.eyebrow { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: #445166; font-weight: 600; }
.status-tag { display: inline-block; padding: 5px 11px; border-radius: 4px; font-size: .83rem; color: var(--navy); background: #e1ecf4; }
.status-tag.is-member { color: #fff; background: var(--navy); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; align-items: center; margin-top: 32px; }
.directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 24px; }
.organisation-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.organisation-card h2, .content-card h2, .content-card h3 { font-size: 1.7rem; margin: 12px 0; overflow-wrap: anywhere; }
.organisation-card .status-tag { margin-bottom: 8px; }
.organisation-card .org-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 28px 28px;
}
.organisation-card .org-card-body .text-link { margin-top: auto; padding-top: 12px; }
.org-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
  color: inherit;
}
.organisation-card .org-media {
  border-radius: 17px 17px 0 0;
}
.org-media--profile {
  border-radius: 12px;
  margin-bottom: 12px;
  max-height: 280px;
}
.org-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.org-media-fallback {
  display: block;
  width: 100%;
  height: 100%;
  /* A member without a photograph gets the database map, dimmed, rather than
     a flat navy block: the same ground the directory title stands on. */
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(126, 182, 222, 0.28), transparent 56%),
    linear-gradient(165deg, rgba(1, 0, 66, 0.86) 0%, rgba(22, 28, 94, 0.92) 100%),
    url("/static/assets/images/hero-map.ab7d066b6253.webp") center / cover no-repeat #010042;
}
.org-logo-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 56px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(1, 0, 66, 0.16);
}
.org-logo-chip img {
  height: 36px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
  background: #fff;
}
.org-media--profile .org-logo-chip {
  height: 64px;
  padding: 10px 14px;
}
.org-media--profile .org-logo-chip img {
  height: 42px;
  max-width: 180px;
}
.logo-rail-more {
  text-align: center;
  margin: 16px 0 0;
}
.content-card { display: flex; flex-direction: column; align-items: start; }
.content-card > .text-link { margin-top: auto; }
.empty-state { grid-column: 1/-1; padding: 44px 28px; background: var(--paper-2); border: 1px solid var(--line); text-align: center; border-radius: 12px; }
.empty-state h2 { font-size: 2rem; }
.empty-state p { max-width: 65ch; margin: 20px auto; }
.detail-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); align-items: start; gap: 44px; }
.detail-kicker { display: block; margin-top: 24px; }
.detail-kicker::before { display: none; }
.prose { max-width: 78ch; overflow-wrap: anywhere; }
.prose h2 { font-size: 2rem; margin: 28px 0 14px; }
.prose > p:first-child { margin-top: 0; }
.member-notes { margin-top: 16px; padding-top: 26px; border-top: 2px solid var(--member, #b0893e); }
.record-facts h2 { font-size: 1.65rem; }
/* Headings reset to margin 0 site-wide, so a section here sat flush under the
   link above it. Only headings that follow something get the gap. */
.record-facts * + h2 { margin-top: 26px; }
.record-facts .facts-action { margin-top: 18px; }
.record-facts dt { color: var(--muted); margin-top: 18px; font-size: .85rem; }
.record-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.record-facts a { overflow-wrap: anywhere; }
.map-disclosure { margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.map-disclosure summary { cursor: pointer; font-weight: 600; color: var(--navy); }
#database-map { height: 370px; margin-top: 14px; border-radius: 8px; z-index: 1; background: #e8eef1; }
.checkbox { display: flex !important; align-items: center; gap: 10px; font-weight: 400; }
.checkbox input { width: 1.125rem !important; height: 1.125rem !important; min-height: 0 !important; margin: 0; flex: 0 0 auto; }
.form .field { display: grid; gap: 5px; }
.form .field > .note { margin-top: -8px; }
.form label[for="id_consent"] { font-weight: 400; }
.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.form legend { font-size: 13px; font-weight: 600; }
.form fieldset > div {
  display: grid;
  gap: 8px;
}
.form fieldset label {
  font-weight: 400;
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.35;
}
.form ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.form ul label { font-weight: 400; display: flex; gap: 10px; align-items: center; line-height: 1.35; }
.fee-band-summary {
  margin: 2px 0 0;
  padding: 12px 14px;
  max-width: 54ch;
  background: var(--paper-2, #f4f1ea);
  border-left: 3px solid var(--gold, #b0893e);
}
/* "Who is joining?" on the application: one card per fee band. */
.band-options { display: grid; gap: 8px; }
.form .band-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: white;
  font-size: 15px;
  cursor: pointer;
}
.form .band-option input { margin-top: 3px; }
.form .band-option:has(input:checked) {
  border-color: var(--navy, #010042);
  box-shadow: inset 0 0 0 1px var(--navy, #010042);
}
.band-option__text { display: grid; gap: 2px; }
.band-option__text strong { font-weight: 600; }
.band-option__text span { font-size: 13px; color: var(--muted); }
.field-error .band-option { border-color: #a83025; }
.org-only { display: grid; gap: 14px; }
/* .org-only and .field set display, which would otherwise beat [hidden]. */
[data-org-only][hidden] { display: none !important; }
.plain-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.plain-list .note { margin: 0; }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.dash-card h2 { font-size: 1.6rem; margin: 8px 0 12px; }
.dash-card .btn { margin-top: 14px; }
.record-aside form { margin-top: 8px; }
@media (max-width: 980px) {
  .dash-grid { grid-template-columns: 1fr; }
}
.error-summary { background: #fff1ee; border: 2px solid #a83025; padding: 18px; }
.error-summary h2 { font-size: 1.4rem; color: #7c261d; }
.error-summary a { text-decoration: underline; }
.field-error input, .field-error textarea, .field-error select { border-color: #a83025; }
.field-message, .errorlist { color: #9a251a; margin: 0; }
.auth-wrap { max-width: 580px; }
.auth-wrap .form { margin-top: 22px; }
.site-footer .legal { color: #c0c6d8; }
@media (max-width: 800px) {
  .hero-actions { grid-template-columns: 1fr; max-width: 28rem; }
  .hero-action { min-height: 0; }
}
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px 32px;
  }
  .footer-grid > :first-child { grid-column: 1 / -1; max-width: 42ch; }
  .directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-grid, .join-layout, .value-grid { grid-template-columns: 1fr; gap: 26px; }
  .record-aside { max-width: 40%; }
  .hero-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .price.is-featured { transform: none; }
  .join-aside { position: static; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :first-child { grid-column: auto; max-width: none; }
  .directory-grid { grid-template-columns: 1fr; }
  .directory-section { padding-top: 0; }
  .search-bar { padding: 16px; }
  .record-card { flex-direction: column; gap: 16px; }
  .record-aside { flex-direction: row; align-items: center; flex-wrap: wrap; max-width: none; }
  .hero { min-height: auto; padding-bottom: 40px; }
  .hero-meta { margin-top: 32px; }
  .access-grid { grid-template-columns: 1fr; }
  .access-card { padding: 24px; }
  .explore-search > div { flex-wrap: wrap; }
  .explore-search input { flex-basis: 100%; }
  .benefits-table th, .benefits-table td { padding: 12px 6px; font-size: .85rem; overflow-wrap: anywhere; }
}
@media (max-width: 980px) {
  .value-grid,
  .join-layout {
    grid-template-columns: 1fr;
  }
  .join-aside { position: static; }
  .price.is-featured { transform: none; }
}
@media (max-width: 640px) {
  .benefits-table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-enabled .reveal { opacity: 1; transform: none; }
  .marquee { mask-image: none; overflow: visible; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; transform: none !important; }
  .marquee-set { flex-wrap: wrap; justify-content: center; }
  .marquee-set[aria-hidden="true"] { display: none; }
}

/* ---- Airport map: drawn in-house, no tiles, no third-party requests ---- */
.airport-map {
  position: relative;
  height: clamp(380px, 52vh, 560px);
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #e8eef4;
  touch-action: pan-y;
}
.airport-map__canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.airport-map.is-dragging .airport-map__canvas { cursor: grabbing; }
.airport-map__grid path { stroke: rgba(1, 0, 66, .10); stroke-width: .6; fill: none; }
.airport-map__land path {
  fill: #fbf8f2;
  stroke: rgba(1, 0, 66, .28);
  stroke-width: .7;
  stroke-linejoin: round;
}
.airport-map__pin {
  fill: var(--sky);
  stroke: var(--navy);
  stroke-width: 1.4;
  paint-order: stroke;
}
.airport-map__pin.is-quiet { fill: #fff; stroke: #7b8598; stroke-dasharray: 2.2 1.8; }
.airport-map__pin.is-member { fill: var(--navy); stroke: #c4a35a; stroke-width: 2.2; }
.airport-map__cluster { fill: rgba(1, 0, 66, .90); stroke: #fff; stroke-width: 1.6; }
.airport-map__cluster.is-member { stroke: #c4a35a; }
.airport-map__count {
  fill: #fff;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
}
.airport-map__pins g { cursor: pointer; }
.airport-map__pins g:hover .airport-map__pin,
.airport-map__pins g:focus-visible .airport-map__pin { fill: #fff; stroke-width: 2.4; }
.airport-map__pins g:hover .airport-map__cluster,
.airport-map__pins g:focus-visible .airport-map__cluster { fill: #2672a3; }
.airport-map__pins g.is-selected .airport-map__pin { fill: #fff; stroke-width: 3; }
.airport-map__pins g:focus { outline: none; }
.airport-map__pins g:focus-visible circle { outline: 3px solid #2672a3; outline-offset: 3px; }
.airport-map.is-animated .airport-map__pins g { transition: opacity .18s ease; }

.airport-map__controls { position: absolute; top: 12px; right: 12px; display: grid; gap: 6px; }
.airport-map__controls button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .95);
  color: var(--navy);
  font-size: 17px; font-weight: 600; line-height: 1;
  cursor: pointer;
}
.airport-map__controls button:hover { background: #fff; border-color: var(--navy); }

.airport-map__tip {
  position: absolute;
  transform: translate(-50%, -160%);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.airport-map__hint {
  position: absolute; inset: auto 0 14px;
  margin-inline: auto;
  width: max-content; max-width: 90%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(1, 0, 66, .88);
  color: #fff;
  font-size: 13px;
}
.airport-map__status { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }

.airport-map__panel {
  position: absolute; left: 12px; bottom: 12px;
  width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 252, 247, .98);
  box-shadow: 0 18px 40px rgba(20, 30, 82, .18);
}
.airport-map__panel h3 { font-size: 1.25rem; margin: 4px 0 12px; }
.airport-map__close {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.airport-map__close:hover { background: var(--bg-2); color: var(--navy); }
.airport-map__records { list-style: none; margin: 0 0 14px; padding: 0; }
.airport-map__records li { padding: 8px 0; border-top: 1px solid var(--line); }
.airport-map__records li:first-child { border-top: 0; }
.airport-map__records a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.airport-map__records span, .airport-map__records em {
  display: block; font-style: normal; font-size: .84rem; color: var(--muted);
}
.airport-map__provenance { margin: 12px 0 0; font-size: .76rem; color: var(--muted); }
.airport-map__loading { margin: 0; color: var(--muted); }
.airport-map.is-failed .airport-map__canvas, .airport-map.is-failed .airport-map__controls { display: none; }

@media (max-width: 640px) {
  /* Tall enough to work in, short enough not to be mostly ocean. */
  .airport-map { height: min(58vh, 360px); }
  .airport-map__panel { left: 8px; right: 8px; width: auto; bottom: 8px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .airport-map__pins g { transition: none !important; }
}
.map-block { margin-top: 26px; }
.map-block__head h2 { font-size: 1.9rem; margin-bottom: 6px; }
.map-block__head .note { max-width: 70ch; }
.map-block__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 12px 0 0; font-size: .86rem; color: var(--muted); }
.map-block__legend .key { width: 13px; height: 13px; border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.key-live { background: var(--sky); border: 1.5px solid var(--navy); }
.key-member { background: var(--navy); border: 1.5px solid #c4a35a; }
.key-quiet { background: #fff; border: 1.5px dashed #7b8598; }
.key-cluster { background: var(--navy); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--line); }

/* The homepage map sits in a two-column band: let its shape follow the world
   rather than the column, so it is not marooned in a field of empty ocean. */
.explore-grid .airport-map { height: auto; aspect-ratio: 16 / 10; margin-top: 0; }
@media (max-width: 980px) { .explore-grid .airport-map { aspect-ratio: 3 / 2; } }

/* Introductory offer: stated once, plainly, wherever a fee is shown. */
.offer {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  margin-bottom: 26px; padding: 18px 22px;
  border: 1px solid var(--navy); border-left-width: 4px; border-radius: 10px;
  background: #e4eff6;
}
.offer__flag {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.offer__body { margin: 0; flex: 1 1 340px; color: var(--ink); }
.offer__inline { margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: #e4eff6; }

.join-hero h1 { max-width: 18ch; }
.join-hero .lede { max-width: 62ch; margin: 18px 0 22px; }
.join-hero .btn-row { margin-bottom: 6px; }
.join-hero .offer { margin: 28px 0 0; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.value-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 26px;
}
.value-card h3 { font-size: 1.7rem; margin: 8px 0 12px; }
.value-card p { margin: 0; color: #3d4654; }
.join-steps {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.join-steps li {
  position: relative;
  padding: 0 0 18px 42px;
  color: #3d4654;
}
.join-steps li:last-child { padding-bottom: 0; }
.join-steps__n {
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: grid; place-items: center;
}
.join-steps strong { color: var(--navy); }
.join-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr);
  gap: 36px;
  align-items: start;
}
.join-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.join-aside .kicker { margin-bottom: 10px; }
.join-aside .join-steps { margin-top: 8px; }
.join-aside .btn-row { margin-top: 18px; }
.join-event-card .btn { margin-top: 18px; }
.join-layout .form {
  border: 1px solid var(--line);
  border-radius: 12px;
}
.price-grid + .note { margin-top: 18px; }

@media (max-width: 980px) {
  .value-grid,
  .join-layout {
    grid-template-columns: 1fr;
  }
  .join-aside { position: static; }
  .price.is-featured { transform: none; }
}
@media (max-width: 640px) {
  .benefits-table { display: block; overflow-x: auto; }
}

/* ============================================================================
   IARO — map surface and member treatment.

   Append to the end of styles.css. Everything here overrides the earlier
   .airport-map rules by source order alone, so nothing above needs editing.

   Gold is reserved. The site's own palette moved to navy and sky (--gold was
   redefined to #7eb6de further up this file), which left gold unused — so it
   is claimed here for one meaning only: an IARO member. Nothing else on the
   map or in the panel may use it, which is what makes ten pins out of 270
   findable at a glance.
   ========================================================================= */

:root {
  --member: #b0893e;
  --member-light: #e8d3a2;
  --member-ink: #6d5320;
}

/* ---- Surface ---- */
.airport-map {
  border-color: rgba(1, 0, 66, .14);
  border-radius: 16px;
  background: #dfe9f2;
  box-shadow:
    0 1px 2px rgba(20, 30, 82, .05),
    0 18px 44px -24px rgba(20, 30, 82, .35);
}
/* A hairline of light along the top edge: the cheapest way to make a flat
   panel read as a surface rather than a hole in the page. */
.airport-map::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(1, 0, 66, .05);
}

.airport-map__grid path { stroke: rgba(1, 0, 66, .07); stroke-width: .6; fill: none; }

/* Wide, faint pass under the coastline — a soft shadow in the water. */
.airport-map__coast path {
  fill: none;
  stroke: rgba(1, 0, 66, .085);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.airport-map__land path {
  fill: #fdfbf6;
  stroke: rgba(1, 0, 66, .30);
  stroke-width: .7;
  stroke-linejoin: round;
}

/* ---- Ordinary airports ---- */
.airport-map__pin {
  fill: var(--sky);
  stroke: var(--navy);
  stroke-width: 1.4;
  paint-order: stroke;
}
.airport-map__pin.is-quiet { fill: #fff; stroke: #7b8598; stroke-dasharray: 2.2 1.8; }

.airport-map__cluster {
  fill: rgba(1, 0, 66, .88);
  stroke: #fff;
  stroke-width: 1.8;
  paint-order: stroke;
}
.airport-map__count {
  fill: #fff;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
}

/* ---- Members ----
   Bigger, gold, ringed in white and lifted by a faint halo, in a group that is
   painted after everything else. A member is never drawn under another mark. */
/* A ring, not a filled wash. A member pin is painted over everything else, so
   anything solid around it blots out the cluster it happens to land on; an
   open ring lifts the pin off the map while hiding almost nothing. */
.airport-map__halo {
  fill: none;
  stroke: rgba(176, 137, 62, .40);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.airport-map__emblem { fill: #010042; pointer-events: none; }
.airport-map__member,
.airport-map__member-cluster {
  stroke: #fff;
  stroke-width: 2.2;
  paint-order: stroke;
}
.airport-map__count.is-member { fill: #2a1f08; }

/* The name, set with a paper-coloured halo so it stays legible over land,
   sea or another pin without needing a box behind it. */
.airport-map__label {
  fill: var(--navy);
  stroke: rgba(253, 251, 246, .92);
  stroke-width: 3.4;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
}

/* ---- States ---- */
.airport-map__pins g { cursor: pointer; }
.airport-map__pins g:hover .airport-map__pin,
.airport-map__pins g:focus-visible .airport-map__pin { fill: #fff; stroke-width: 2.4; }
.airport-map__pins g:hover .airport-map__cluster,
.airport-map__pins g:focus-visible .airport-map__cluster { fill: #2672a3; }
.airport-map__pins g.is-selected .airport-map__pin { fill: #fff; stroke-width: 3; }

.airport-map__pins--member g:hover .airport-map__halo,
.airport-map__pins--member g:focus-visible .airport-map__halo,
.airport-map__pins--member g.is-selected .airport-map__halo {
  stroke: rgba(176, 137, 62, .85);
  stroke-width: 2;
}
.airport-map__pins--member g:hover .airport-map__member,
.airport-map__pins--member g:focus-visible .airport-map__member,
.airport-map__pins--member g.is-selected .airport-map__member { stroke-width: 3.2; }

.airport-map__pins g:focus { outline: none; }
.airport-map__pins g:focus-visible circle { outline: 3px solid #2672a3; outline-offset: 3px; }

.airport-map.is-animated .airport-map__halo,
.airport-map.is-animated .airport-map__member,
.airport-map.is-animated .airport-map__pin,
.airport-map.is-animated .airport-map__cluster {
  transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease;
}
/* The map arrives once, quietly. Pins are rebuilt on every zoom step, so the
   entrance belongs on the canvas, not on the marks. */
.airport-map .airport-map__canvas { opacity: 0; }
.airport-map.is-ready .airport-map__canvas { opacity: 1; transition: opacity .45s var(--ease); }

/* ---- Controls and chrome ---- */
.airport-map__controls { top: 14px; right: 14px; gap: 7px; }
.airport-map__controls button {
  width: 36px; height: 36px;
  border-color: rgba(1, 0, 66, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(20, 30, 82, .10);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--ease);
}
.airport-map__controls button:hover { background: #fff; border-color: var(--navy); transform: translateY(-1px); }

.airport-map__tip {
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(1, 0, 66, .95);
  box-shadow: 0 6px 18px rgba(20, 30, 82, .28);
  font-weight: 500;
}
.airport-map__tip.is-member {
  background: linear-gradient(180deg, #e8d3a2, #c4a265);
  color: #2a1f08;
}

.airport-map__hint { box-shadow: 0 8px 22px rgba(20, 30, 82, .25); }

/* ---- Panel ---- */
.airport-map__panel {
  border-radius: 14px;
  border-color: rgba(1, 0, 66, .10);
  background: rgba(255, 253, 249, .97);
  backdrop-filter: blur(10px);
  box-shadow:
    0 2px 6px rgba(20, 30, 82, .08),
    0 24px 50px -18px rgba(20, 30, 82, .38);
}
/* A gold edge on the panel for a member airport, matching the pin that opened it. */
.airport-map__panel.is-member { border-top: 3px solid var(--member); }

.airport-map__records li.is-member { border-left: 2px solid var(--member); padding-left: 10px; }
.airport-map__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(176, 137, 62, .14);
  color: var(--member-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* ---- Legend ----
   The member key carries the same aircraft as the pin it explains, so the
   legend shows the mark rather than describing it. */
.map-block__legend { gap: 10px 22px; }
.map-block__legend .key { width: 13px; height: 13px; }
.key-member {
  width: 17px; height: 17px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%27.15%27%20y1%3D%270%27%20x2%3D%27.85%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fbf0cf%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%23e0bf74%27%2F%3E%3Cstop%20offset%3D%27.64%27%20stop-color%3D%27%23b38a3a%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ead196%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2731%27%20fill%3D%27url%28%23g%29%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2730.2%27%20fill%3D%27none%27%20stroke%3D%27%238a682a%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2725.6%27%20fill%3D%27none%27%20stroke%3D%27%23fff7e2%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M32%207.5c2.05%200%203.35%202.4%203.35%206.05v5.1l17.15%2010.05v5.35L35.35%2028.5v9.15l6.1%204.3v4.4L32%2043.5l-9.45%202.85v-4.4l6.1-4.3V28.5L11.5%2034.05V28.7l17.15-10.05v-5.1C28.65%209.9%2029.95%207.5%2032%207.5Z%27%20fill%3D%27%23010042%27%20transform%3D%27translate%2832%2032%29%20scale%28.64%29%20translate%28-32%20-26.9%29%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  box-shadow: 0 0 0 2px rgba(176, 137, 62, .22);
  vertical-align: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .airport-map .airport-map__canvas,
  .airport-map.is-ready .airport-map__canvas { opacity: 1; transition: none; }
}

/* ============================================================================
   Record list — the results under the map.

   The markup already carries .record-card.is-member, so all of this is done
   by stylesheet: no template changes, and nothing to conflict with.

   The seal below is the same gold disc and aircraft as the map pin, so
   "member" looks identical on the map, in the map panel and in this list
   rather than being three unrelated decorations.
   ========================================================================= */

.results-heading { margin: 34px 0 18px; align-items: end; }
.results-heading h2 { font-size: 1.75rem; letter-spacing: -.01em; }
.results-heading .note { max-width: 46ch; text-align: right; }

/* Rows separated by hairlines read as a table of data. Cards on paper, with
   air between them, read as a collection worth browsing. */
.record-list { border-top: 0; display: grid; gap: 12px; }
.record-card {
  position: relative;
  padding: 22px 24px;
  border: 1px solid rgba(1, 0, 66, .10);
  border-bottom: 1px solid rgba(1, 0, 66, .10);
  border-radius: 14px;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(20, 30, 82, .04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.record-card:hover {
  border-color: rgba(1, 0, 66, .22);
  box-shadow: 0 2px 4px rgba(20, 30, 82, .06), 0 16px 32px -20px rgba(20, 30, 82, .40);
  transform: translateY(-1px);
}
.record-card h3 { font-size: 1.45rem; margin: 6px 0 2px; letter-spacing: -.01em; }
.record-card .record-title { font-weight: 600; color: var(--navy); }
.record-card .muted { color: var(--muted); }

/* Member records: a warm ground, a gold edge, and the seal in its own gutter
   so it never crowds the status tag on the other side of the card. */
.record-card.is-member {
  padding-left: 74px;
  border-color: rgba(176, 137, 62, .38);
  background:
    linear-gradient(90deg, rgba(176, 137, 62, .07), rgba(176, 137, 62, 0) 220px),
    var(--paper-2);
  box-shadow: inset 3px 0 0 var(--member), 0 1px 2px rgba(20, 30, 82, .04);
}
.record-card.is-member:hover {
  border-color: rgba(176, 137, 62, .60);
  box-shadow:
    inset 3px 0 0 var(--member),
    0 2px 4px rgba(20, 30, 82, .06),
    0 16px 32px -20px rgba(120, 90, 30, .45);
}
.record-card.is-member::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%27.15%27%20y1%3D%270%27%20x2%3D%27.85%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fbf0cf%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%23e0bf74%27%2F%3E%3Cstop%20offset%3D%27.64%27%20stop-color%3D%27%23b38a3a%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ead196%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2731%27%20fill%3D%27url%28%23g%29%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2730.2%27%20fill%3D%27none%27%20stroke%3D%27%238a682a%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2725.6%27%20fill%3D%27none%27%20stroke%3D%27%23fff7e2%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M32%207.5c2.05%200%203.35%202.4%203.35%206.05v5.1l17.15%2010.05v5.35L35.35%2028.5v9.15l6.1%204.3v4.4L32%2043.5l-9.45%202.85v-4.4l6.1-4.3V28.5L11.5%2034.05V28.7l17.15-10.05v-5.1C28.65%209.9%2029.95%207.5%2032%207.5Z%27%20fill%3D%27%23010042%27%20transform%3D%27translate%2832%2032%29%20scale%28.64%29%20translate%28-32%20-26.9%29%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  box-shadow: 0 0 0 3px rgba(176, 137, 62, .16), 0 2px 5px rgba(120, 90, 30, .28);
}

.status-tag {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: #e6eef6;
  border: 1px solid rgba(1, 0, 66, .08);
}
.status-tag.is-member {
  color: var(--member-ink);
  background: rgba(176, 137, 62, .13);
  border-color: rgba(176, 137, 62, .34);
}

@media (max-width: 640px) {
  .record-card { padding: 18px 18px; }
  .record-card.is-member { padding-left: 18px; padding-top: 66px; }
  .record-card.is-member::before { top: 18px; left: 18px; }
  .results-heading .note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .record-card, .record-card:hover { transform: none; transition: none; }
}

/* IARO Express archive */
.express-callout{margin:0 0 20px}
.express-year{margin:28px 0 8px}
.express-year__label{font-size:1.05rem;letter-spacing:.02em;color:var(--navy,#010042);border-bottom:1px solid rgba(1,0,66,.15);padding-bottom:6px;margin:0 0 12px}
.express-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.express-item{padding:0 0 12px;border-bottom:1px solid rgba(1,0,66,.06)}
.express-item__title{font-weight:600;text-decoration:none}
.express-item__date{display:inline-block;margin-left:10px;font-size:.82rem;color:#5a5a72}
.express-item__lines{margin:4px 0 0;color:#3a3a52;font-size:.92rem}

/* ── Conference programme (events/<slug>/programme) ───────────────────────
   The programme is a timetable, so it is set as one: times in tabular figures
   against a hairline track, each item a stop hanging off it. The marker colour
   encodes the kind of item — session, site visit, social, break — rather than
   decorating it. Tokens are the site's own; nothing new is introduced. */
.prog-hero h1 { display: flex; flex-direction: column; gap: 2px; }
.prog-sub { font-style: italic; font-weight: 400; color: var(--gold); font-size: .62em; }
.prog-when { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 14px 0 0; font-size: 1.05rem; }
.prog-dot { color: var(--line-dark); }
/* Venue and dates wrap onto separate lines on a phone, leaving the separator
   dangling at the end of the first one. */
@media (max-width: 640px) { .prog-dot { display: none; } }
.prog-note {
  margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--gold);
  background: rgba(255,255,255,.5); font-size: .95rem; color: var(--muted);
  max-width: 62ch; display: flex; gap: 16px; align-items: center; justify-content: space-between;
}
.prog-eu { width: 84px; height: auto; flex: none; }
.prog-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 24px 0 0; }

.prog-controls { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.prog-tabs { display: flex; border-bottom: 1px solid var(--line); }
.prog-tab {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 600; color: var(--muted);
  padding: 10px 18px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.prog-tab .d { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.prog-tab:hover { color: var(--ink); }
.prog-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); }
.prog-view { display: flex; gap: 4px; padding: 3px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 999px; }
.prog-vbtn {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .84rem; font-weight: 600; color: var(--muted); padding: 6px 15px; border-radius: 999px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.prog-vbtn[aria-pressed="true"] { background: var(--navy); color: var(--paper); }

.prog-venue { margin: 26px 0 0; font-size: .95rem; color: var(--muted); }
.prog-venue b { color: var(--ink); }
.prog-dayintro { margin: 8px 0 0; color: var(--muted); max-width: 66ch; font-size: .97rem; }

.prog-table { list-style: none; padding: 0; margin: 14px 0 0; position: relative; }
.prog-table::before { content: ""; position: absolute; left: 81px; top: 14px; bottom: 14px; width: 1px; background: var(--line-dark); }
.prog-stop { display: grid; grid-template-columns: 66px 30px 1fr; align-items: start; padding: 16px 0; }
.prog-stop + .prog-stop { border-top: 1px solid var(--line); }
.prog-time { font-variant-numeric: tabular-nums; font-size: .98rem; font-weight: 700; color: var(--navy); text-align: right; padding-top: 2px; }
.prog-time-end { display: block; color: var(--muted); font-size: .78em; font-weight: 600; }
.prog-time.tbc { font-weight: 600; font-size: .84rem; color: var(--muted); }
.prog-mark { position: relative; height: 22px; }
.prog-mark::after {
  content: ""; position: absolute; left: 8px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--paper);
}
.prog-stop[data-type="visit"]  .prog-mark::after { background: var(--gold); }
.prog-stop[data-type="social"] .prog-mark::after { background: var(--sky); }
.prog-stop[data-type="break"]  .prog-mark::after { background: var(--paper); border: 2px solid var(--line-dark); width: 9px; height: 9px; top: 7px; left: 9px; }
.prog-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.22rem; line-height: 1.25; margin: 0; color: var(--ink); }
.prog-body > p { margin: 7px 0 0; color: var(--muted); font-size: .97rem; max-width: 66ch; }
.prog-where { display: inline-block; margin: 8px 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.prog-talks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.prog-talk { padding-left: 15px; border-left: 2px solid var(--line); }
.prog-talk h4 { margin: 0; font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.prog-talk.is-panel h4 { font-style: italic; font-weight: 500; color: var(--muted); }
.prog-who { margin: 3px 0 0; font-size: .92rem; color: var(--muted); }
.prog-who b { color: var(--ink); font-weight: 600; }
.prog-status { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--navy); font-size: .68rem; font-weight: 700; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; vertical-align: .08em; }
.prog-talk ul { margin: 7px 0 0; padding-left: 17px; font-size: .92rem; color: var(--muted); }
.prog-talk ul li { margin: 3px 0; }

.prog-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 24px 0 0; }
.prog-sp { background: var(--paper); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.prog-sp-name { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.prog-sp-role { font-size: .88rem; color: var(--muted); line-height: 1.4; }
.prog-sp-org { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.prog-sp-talks { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; color: var(--muted); line-height: 1.35; }
.prog-sp-day { font-weight: 700; color: var(--navy); }

.prog-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 44px 0 0; }
.prog-card { padding: 24px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.prog-card h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; margin: 0; color: var(--navy); }
.prog-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.prog-foot { margin: 30px 0 0; font-size: .9rem; color: var(--muted); }

@media (max-width: 640px) {
  .prog-table::before { left: 47px; }
  .prog-stop { grid-template-columns: 38px 22px 1fr; padding: 14px 0; }
  .prog-time { font-size: .88rem; text-align: left; }
  .prog-mark::after { left: 4px; }
  .prog-stop[data-type="break"] .prog-mark::after { left: 5px; }
  .prog-note { flex-direction: column; align-items: flex-start; }
}

/* Insights, before any curated news exists: show the newest Express issues
   rather than an "archive being imported" notice that stopped being true. */
.express-latest { grid-column: 1 / -1; padding: 30px 28px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: var(--radius); }
.express-latest-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; margin: 0; color: var(--navy); }
.express-latest-head p { margin: 8px 0 0; color: var(--muted); font-size: .96rem; max-width: 62ch; }
.express-latest-list { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-direction: column; }
.express-latest-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.express-latest-list a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; border-bottom: 1px solid transparent; }
.express-latest-list a:hover { color: var(--navy); border-bottom-color: var(--gold); }
.express-latest-date { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.express-latest-summary { flex-basis: 100%; margin: 3px 0 0; max-width: 78ch; color: var(--muted); font-size: .96rem; }
.library-guide { margin-bottom: 36px; }
.library-guide h2, .member-start-intro h2 { margin-top: 0; }
.member-start-intro { max-width: 75ch; margin-bottom: 24px; }
.home-event-invitation { padding-top: 32px; padding-bottom: 32px; }
.editorial-title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 10px 0 24px; }

/* Programme: who is hosting, and room for the two calls to action. */
.prog-hosts { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end; margin: 26px 0 0; }
.prog-host { display: flex; flex-direction: column; gap: 7px; }
.prog-host-role { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.prog-host img { height: 42px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.detail-actions { margin: 22px 0 0; }

/* Membership prompt. Shown to anyone who is not a member, on the Express pages
   where the gap between what they can see and what members read is the point. */
.upsell {
  grid-column: 1 / -1; margin: 40px 0 0; padding: 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px 40px; align-items: center;
  background: var(--navy); border-radius: var(--radius); color: var(--paper);
}
.upsell-eyebrow { margin: 0 0 6px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.upsell h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.7rem; line-height: 1.15; margin: 0; color: var(--paper); }
.upsell p { margin: 10px 0 0; color: var(--paper); opacity: .8; font-size: .97rem; max-width: 60ch; }
.upsell-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .95rem; color: var(--paper); opacity: .9; }
.upsell-list b { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 700; }
.upsell-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.upsell-actions .text-link { color: var(--paper); opacity: .75; white-space: nowrap; }
.upsell-actions .text-link:hover { color: var(--gold); opacity: 1; }
@media (max-width: 720px) { .upsell { grid-template-columns: 1fr; padding: 26px 22px; } }

/* ── IARO Express issue ───────────────────────────────────────────────────
   An issue is five or six separate stories, not one article. Rendered as a
   flat run of paragraphs they were indistinguishable, so the headline, the
   body and the source credit are now three different things on the page. */
.express-issue { max-width: 74ch; }
.express-issue-date { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }

.express-contents { padding: 22px 26px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: var(--radius); }
.express-contents h2 { font-family: var(--font); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 0 0 12px; }
.express-contents ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 7px; }
.express-contents li::marker { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 700; }
.express-contents a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; font-size: 1.02rem; }
.express-contents a:hover { color: var(--navy); border-bottom-color: var(--gold); }

.express-stories { margin: 34px 0 0; }
.express-story + .express-story { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.express-story h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.62rem; line-height: 1.2;
  margin: 0 0 14px; color: var(--navy); letter-spacing: -.01em; scroll-margin-top: 100px;
}
.express-story p { margin: 0 0 14px; line-height: 1.68; }
.express-story p:last-child { margin-bottom: 0; }
.express-source { margin-top: 16px !important; font-size: .87rem; color: var(--muted); }
.express-source span {
  display: inline-block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--gold); margin-right: 8px;
}

.express-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.express-pager__link { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: rgba(255,255,255,.5); }
.express-pager__link:hover { border-color: var(--gold); }
.express-pager__link--next { text-align: right; }
.express-pager__dir { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.express-pager__title { color: var(--ink); font-weight: 600; font-size: .97rem; line-height: 1.3; }
@media (max-width: 640px) { .express-pager { grid-template-columns: 1fr; } .express-pager__link--next { text-align: left; } }

/* Relaunch: stable member identities, clear verification and optional onboarding. */
.marquee { overflow: visible; mask-image: none; }
.marquee-track { width: auto; animation: none; transform: none; justify-content: center; }
.marquee-set { flex-wrap: wrap; justify-content: center; }
.marquee-set[aria-hidden="true"] { display: none; }
.form-extra { margin: 20px 0; padding: 20px; border: 1px solid var(--line, #d5d4cf); border-radius: 8px; }
.form-extra summary { cursor: pointer; font-weight: 600; }
.form-extra[open] summary { margin-bottom: 16px; }
.verification-note { max-width: 70ch; padding: 14px 18px; margin-top: 20px; border-left: 3px solid #9c752a; background: #f4eedf; color: #302e28; }
.network-topics { margin-top: 24px; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.ops-number { font-size: 2rem; font-weight: 650; margin: 8px 0; }
.ops-table { width: 100%; border-collapse: collapse; }
.ops-table th, .ops-table td { padding: 12px; border-bottom: 1px solid #d5d4cf; text-align: left; }
.ops-table-wrap { overflow-x: auto; }
.usage-section { margin-top: 56px; }
.usage-section h2 { margin-bottom: 6px; }
.usage-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 40px; }
.usage-pair > .usage-section { min-width: 0; }
.usage-days > summary { cursor: pointer; font-weight: 600; color: var(--navy); }

.hero-media { overflow: hidden; }
.explore-search input[name="website_check"] { inset: 0 auto auto 0; }

.hero-offer { max-width: 58ch; margin: 24px 0; color: #fff; font-size: 1rem; line-height: 1.55; }
.hero-offer a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* A temporary service condition outranks everything else on a record: someone
   reading it may be about to travel. Distinct from the verification note, which
   is about how much to trust the record rather than what is running today. */
.service-notice {
  margin: 14px 0 0; padding: 13px 16px; border-radius: var(--radius);
  background: rgba(176, 137, 62, .12); border-left: 3px solid var(--gold);
  font-size: .96rem; color: var(--ink); max-width: 66ch;
}
.service-notice strong { color: var(--navy); }
.member-notes__age {
  margin: 0 0 10px; font-size: .85rem; color: var(--muted); font-style: italic;
}
.directory-cta { margin: 20px 0 0; }

/* The joining offer, in the one place it is now stated. */
.offer-panel {
  margin: 26px 0 0; padding: 22px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.62); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  max-width: 68ch;
}
.offer-panel__flag {
  margin: 0 0 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold);
}
.offer-panel__body { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.offer-panel__event { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .96rem; color: var(--muted); }
.offer-panel__event strong { color: var(--ink); display: block; margin-bottom: 3px; }
.offer-panel__terms { margin: 14px 0 0; padding: 14px 0 0 18px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.offer-panel__terms li { margin: 5px 0; }

/* Member resources are usable before opening account administration. */
.member-start { margin-bottom: 24px; }
.member-start .dash-card { display: flex; flex-direction: column; align-items: flex-start; }
.member-start .dash-card > .btn { margin-top: auto; }
.member-settings { padding: 24px 0; border-top: 1px solid var(--line, #d6d3cb); margin-top: 24px; }
.member-settings > summary { cursor: pointer; font-size: 1.2rem; font-weight: 600; }
.member-settings[open] > summary { margin-bottom: 24px; }
.member-settings .form { margin-top: 24px; }
.member-settings h2 { font-size: 1.5rem; }
.dash-card .plain-list li { margin-bottom: 14px; }
.express-story a { overflow-wrap: anywhere; }

.member-hero { padding-top: calc(var(--header-h) + 36px); padding-bottom: 22px; }
.library-filters { grid-column: 1 / -1; width: 100%; }
.library-filters > summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 8px 0; }
.library-filter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 16px 0; }
.library-filter-grid > div { min-width: 0; }
.library-filter-grid input, .library-filter-grid select { width: 100%; }
@media (max-width: 640px) {
  .library-filter-grid { grid-template-columns: 1fr; }
  .member-hero { padding-top: calc(var(--header-h) + 28px); }
}

/* Reference tables with several columns — the privacy record and the cookie
   list. Distinct from .benefits-table, whose fixed 30/35/35 widths assume three
   columns: applied to a four- or five-column table they sum past 100%, so every
   column is squeezed, every cell wraps over many lines, and the table grows
   absurdly tall. Let the content size the columns instead. */
.table-scroll { overflow-x: auto; margin: 22px 0 0; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: .95rem; }
.data-table th, .data-table td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  background: #e4eff6; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
/* The row label identifies the row, so keep it on one line and let the prose
   columns take the space they need. */
.data-table tbody th { font-weight: 600; white-space: nowrap; padding-right: 24px; }
.data-table td { min-width: 14ch; }
.data-table td:last-child { min-width: 10ch; }
@media (max-width: 720px) {
  .data-table { font-size: .88rem; }
  .data-table th, .data-table td { padding: 11px 12px; }
  .data-table tbody th { white-space: normal; }
}

/* One shared member wall on the homepage and membership page. */
.member-logos { padding: 24px 0; }
/* Five a row and a short last row centred, so no logo sits alone however
   many members there are. Each tile may set --logo-h / --logo-w: a box of the
   same size makes a hairline wordmark faint and a solid mark loud, so the
   bold ones are set smaller and the light ones larger, by eye. */
.member-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.member-logo-grid .logo-tile { flex: 0 0 calc((100% - 4 * 10px) / 5); width: auto; height: 82px; min-width: 0; padding: 10px 14px; overflow: hidden; }
.member-logo-grid .logo-tile img { width: 100%; max-width: var(--logo-w, 150px); height: var(--logo-h, 50px); }
@media (max-width: 700px) {
  .member-logo-grid { gap: 8px; }
  .member-logo-grid .logo-tile { flex-basis: calc((100% - 2 * 8px) / 3); padding: 8px 10px; }
  .member-logo-grid .logo-tile img { height: calc(var(--logo-h, 50px) * .8); }
}
@media (max-width: 380px) { .member-logo-grid .logo-tile { flex-basis: calc((100% - 8px) / 2); } }

.library-shortcuts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

/* ---- Homepage film ---- */
.home-film-figure { margin: 28px 0 0; max-width: 980px; }
.home-film-video {
  display: block; width: 100%; height: auto;
  border-radius: 6px;
  background: var(--navy);
  box-shadow: var(--shadow);
}

/* ---- Members directory: the database map behind the title ----
   Light-on-dark rules follow .hero; signed-in members' badge and tabs get
   light versions here. */
.map-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #06083f;
  color: #fff;
  padding-bottom: 56px;
}
.map-hero-media { position: absolute; inset: 0; z-index: -1; }
.map-hero-media picture { display: block; width: 100%; height: 100%; }
.map-hero-media img,
.map-hero-media .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 8%;
}
.map-hero-media .hero-video { opacity: 0; transition: opacity .8s var(--ease); }
.map-hero-media .hero-video.is-playing { opacity: 1; }
.map-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(1,0,42,.84) 0%, rgba(1,0,42,.58) 46%, rgba(1,0,42,.14) 100%),
    linear-gradient(0deg, rgba(1,0,42,.5), transparent 40%);
}
.map-hero h1 { color: #fff; }
.map-hero .kicker { color: #d7ebf8; }
.map-hero .kicker::before { background: var(--sky); }
.map-hero .lede { color: rgba(255,255,255,.88); }
.map-hero .btn-gold { background: var(--sky); color: var(--navy); }
.map-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.map-hero .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.map-hero .text-link { color: #fff; }
.map-hero .text-link:hover { color: #d7ebf8; }
.map-hero .member-mark { background: rgba(1, 0, 66, .55); border-color: #c9a457; color: #ecd59a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); }
.map-hero .member-mark__detail { color: rgba(255, 255, 255, .85); }
.map-hero .member-nav { border-top-color: rgba(255,255,255,.2); }
.map-hero .member-nav a { color: #fff; }
.map-hero .member-nav a:hover { background: rgba(255,255,255,.08); }
.map-hero .member-nav a.is-current { background: rgba(255,255,255,.16); }

/* ---- Expertise tags (members' own lists, directory cards and profiles) ----
   Cards show three and a count, so one long list cannot stretch its card. */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; padding: 0; list-style: none; }
.tag-list li {
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: #e1ecf4;
  color: var(--navy);
  font-size: .84rem;
  line-height: 1.35;
}
.tag-list li.tag-more { background: transparent; color: var(--muted); padding-inline: 4px; }
.prose .tag-list-label { margin-bottom: 8px; }
.prose .tag-list { margin-top: 0; }

/* ---- Inner page headers: an IARO photograph beside the title ---- */
.page-hero-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.page-hero-split--top { align-items: start; }
.page-hero-photo { margin: 0; }
.page-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
.page-hero-photo figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); }
@media (max-width: 900px) { .page-hero-split { grid-template-columns: 1fr; gap: 26px; } }

/* ============================================================================
   Members' Forum. One narrow column, like a conversation: a short header, a
   list of topics with one line of detail each, and threads read top to
   bottom with the reply box underneath.
   ========================================================================= */
.forum-page { padding: calc(var(--header-h) + 44px) 0 72px; }
.forum-wrap { width: min(820px, calc(100% - 40px)); margin-inline: auto; }
.forum-head { display: flex; gap: 16px 28px; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.forum-head h1 { margin: 0 0 8px; font-size: clamp(2.2rem, 4.5vw, 3rem); }
.forum-head p { margin: 0; max-width: 52ch; color: var(--muted); }
.forum-head .btn { flex: 0 0 auto; }
.forum-list { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(1, 0, 66, .12); border-radius: 14px; background: var(--paper-2); overflow: hidden; }
.forum-item { position: relative; padding: 16px 22px; }
.forum-item + .forum-item { border-top: 1px solid rgba(1, 0, 66, .08); }
.forum-item.is-linked:hover { background: rgba(1, 0, 66, .03); }
.forum-item.is-hidden { opacity: .55; }
.forum-item__excerpt {
  margin: 6px 0 0; color: var(--ink); font-size: .97rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.forum-item__title { display: block; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.3; color: var(--navy); }
/* The whole row opens the topic, which is a bigger target on a phone. */
.forum-item.is-linked .forum-item__title::after { content: ""; position: absolute; inset: 0; }
/* Spaced rather than dotted, so a wrapped line never starts with a stray dot. */
.forum-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.forum-tag { padding: 1px 8px; border-radius: 999px; background: #e4eff6; color: var(--navy); font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.forum-tag--pinned { background: var(--navy); color: #fff; }
.forum-item--empty { color: var(--muted); }
.forum-lock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.forum-back { display: inline-block; margin-bottom: 14px; font-weight: 600; color: var(--navy); }
.forum-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.forum-title { margin: 0 0 10px; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; }
.forum-about { margin: 0 0 22px; color: var(--muted); }
.forum-thread { margin-top: 22px; border: 1px solid rgba(1, 0, 66, .12); border-radius: 14px; background: var(--paper-2); }
.forum-post { padding: 20px 24px; }
.forum-post + .forum-post { border-top: 1px solid rgba(1, 0, 66, .08); }
.forum-post.is-hidden { opacity: .55; }
.forum-post__meta { display: flex; flex-wrap: wrap; margin: 0 0 8px; font-size: .92rem; color: var(--muted); }
.forum-post__meta strong { color: var(--navy); }
.forum-post__meta > * + *::before { content: "·"; margin: 0 8px; color: rgba(1, 0, 66, .3); font-weight: 400; }
.forum-post__body p { margin: 0 0 10px; }
.forum-post__body p:last-child { margin-bottom: 0; }
.forum-post__body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.forum-compose { margin-top: 22px; }
.forum-compose__label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--navy); }
.forum-compose textarea, .forum-compose input[type="text"] { width: 100%; padding: 12px 14px; border: 1px solid #7e8794; border-radius: 10px; background: #fff; font: inherit; }
.forum-compose .field + .field { margin-top: 16px; }
.forum-compose .field label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--navy); }
.forum-compose__foot { display: flex; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 12px; }
.forum-compose__foot .btn { flex: 0 0 auto; }
.forum-rules { margin: 0; max-width: 56ch; font-size: .88rem; color: var(--muted); }
.forum-closed { margin-top: 22px; color: var(--muted); }
.forum-link { margin-top: 22px; }
.forum-card { grid-column: 1 / -1; }
.value-card--wide { grid-column: 1 / -1; }
.forum-compose select { width: 100%; padding: 11px 12px; border: 1px solid #7e8794; border-radius: 10px; background: #fff; font: inherit; }
.forum-section { margin-top: 40px; }
.forum-section__head { display: flex; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.forum-section__head .forum-subhead { margin: 0; }
.forum-subhead { margin: 0 0 6px; font-size: 1.55rem; }
.forum-subnote { margin: 0 0 14px; color: var(--muted); }

/* Work Groups: the four groups as cards, then each group's own page. */
.forum-wrap--wide { width: min(1040px, calc(100% - 40px)); }
.wg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wg-card { position: relative; display: flex; flex-direction: column; padding: 24px 26px 20px; border: 1px solid rgba(1, 0, 66, .12); border-radius: 14px; background: var(--paper-2); }
.wg-card:hover { border-color: rgba(1, 0, 66, .3); }
.wg-card.is-hidden { opacity: .55; }
.wg-card__head { display: flex; gap: 16px; align-items: center; }
.wg-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; }
.wg-icon--lg { width: 64px; height: 64px; }
.wg-icon--lg svg { width: 30px; height: 30px; }
.wg-num { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wg-card__title { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.wg-card__title a { color: var(--navy); }
.wg-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.wg-card__title a:focus-visible { outline: none; }
.wg-card:has(.wg-card__title a:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
.wg-card__purpose { margin: 16px 0 8px; font-weight: 700; color: var(--navy); }
.wg-scope { margin: 0; padding-left: 1.15em; color: #3d4654; }
.wg-scope li + li { margin-top: 4px; }
.wg-scope li::marker { color: var(--sky); }
.wg-card__meta { margin-top: auto; padding-top: 14px; }
.wg-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.wg-head .forum-title { margin: 0; }
.wg-purpose { margin: 0 0 10px; font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.4; color: var(--navy); }
.wg-scope--page { font-size: 1.05rem; }
.wg-lead { margin: 16px 0 0; color: var(--muted); }
.wg-join { margin-top: 24px; padding: 20px 24px; border-radius: 14px; background: #e4eff6; }
.wg-join p { margin: 0 0 14px; }
.wg-join .forum-lock { margin-right: 6px; }
.wg-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wg-members li { padding: 10px 16px; border: 1px solid rgba(1, 0, 66, .08); border-radius: 10px; background: var(--paper-2); }
@media (max-width: 760px) {
  .wg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .forum-head { flex-direction: column; align-items: stretch; }
  .forum-head .btn { align-self: flex-start; }
  .forum-item, .forum-post { padding: 14px 16px; }
  .forum-compose__foot { flex-direction: column; align-items: stretch; }
  .forum-compose__foot .btn { align-self: flex-start; }
  .forum-section__head { flex-direction: column; align-items: flex-start; }
  .wg-card { padding: 20px 18px 18px; }
  .wg-join { padding: 18px; }
}

/* Membership: the film has the full content width. The joining offer follows it. */
.membership-feature { margin-top: 44px; }
.membership-film { margin: 0; }
.membership-film h2 { margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.15rem); }
.membership-film figcaption p { margin: 8px 0 16px; max-width: 62ch; font-size: .98rem; color: var(--muted); }
.membership-film figcaption span { white-space: nowrap; }
.membership-film-details { margin-top: 12px; font-size: .85rem; color: var(--muted); }
.membership-film-details summary { cursor: pointer; }
.membership-film-details p { margin: 12px 0; }
.membership-feature .offer-panel { margin-top: 22px; }

/* Online payment on the application and account pages (portal/payments.py). */
/* Messages ("You have joined…", "Your password is saved") open the page: below the
   fixed header, with the page's own header spacing taken up here instead. */
.site-messages { padding-top: calc(var(--header-h) + 22px); display: grid; gap: 8px; }
main > .site-messages + * { padding-top: 28px; }
.join-pay { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.join-pay__title { font-size: 1.55rem; margin: 0; }
.band-option__price { font-weight: 600; color: var(--navy, #010042); }
.join-total { font-weight: 600; color: var(--navy, #010042); margin: 8px 0 4px; }
[data-invoice-only][hidden], [data-individual-only][hidden], .band-option[hidden] { display: none !important; }
.renewal-card { margin-bottom: 28px; }
.renewal-card .form { max-width: 60ch; }

/* Page not found: a search and the main sections, under the message. */
.not-found-search { margin-top: 32px; max-width: 560px; }
.not-found-search label { display: block; font-weight: 600; margin-bottom: 8px; }
.not-found-links { margin-top: 20px; color: var(--muted); }

/* Join page aside: what membership gives, who is in, and the deadline. */
.join-aside__list { margin: 10px 0 0; padding-left: 1.1em; display: grid; gap: 8px; }
.join-aside__list li { line-height: 1.45; }
.join-aside__deadline { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #fbf4e2; border: 1px solid #ead196; line-height: 1.45; }
.join-aside__brussels { margin: 10px 0 0; color: var(--navy); font-weight: 600; line-height: 1.45; }
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0 0; }
.logo-strip img { height: var(--logo-h, 22px); width: auto; max-width: 96px; object-fit: contain; }
.logo-strip .text-link { font-size: 0.9rem; }

/* Railway record: the membership prompt names this country. */
.record-upsell .btn-row { margin-top: 14px; align-items: center; gap: 12px 18px; }
/* The note's link colour must not swallow the button's white label. */
.access-note .btn-navy, .access-note .btn-navy:visited, .access-note .btn-navy:hover { color: #fff; text-decoration: none; }
.record-upsell__price { margin: 10px 0 0; }
.record-upsell__express { margin: 14px 0 0; }