/* ==========================================================================
   WCMRI-2027 — Global ResInnov 2027
   Design system implemented from Website-Content.pdf
   "The Library of the Future" — old-world scholarship meeting future innovation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens  (PDF §1 Core Brand Palette)
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --charcoal-slate: #000000;  /* Primary Background */
  --oxford-brown:   #4B3B2A;  /* Primary Dark */
  --burnt-umber:    #8A4B2A;  /* Secondary Dark */
  --deep-chestnut:  #8B2C1F;  /* Research Accent */
  --forest-moss:    #3B3F2F;  /* Nature Accent */
  --muted-olive:    #85614B;  /* Secondary Green */
  --faded-gold:     #BFA76F;  /* Premium Accent */
  --dusty-taupe:    #8B7B6D;  /* Warm Neutral — see palette note in README */
  --antique-ivory:  #ffffff;  /* Primary Light */
  --vintage-maroon: #6B2E2F;  /* Secondary Accent */

  /* Supporting tones used by individual sections */
  --ivory-muted:    #CFC5BC;  /* hero supporting text, footer links */
  --ivory-dim:      #C5B8AA;  /* speaker designation */
  --body-brown:     #070605;  /* track descriptions */
  --card-ivory:     #F4EEE8;  /* track cards */
  --card-ivory-2:   #F5F0EA;  /* standard registration cards */
  --card-ivory-3:   #F8F4EF;  /* partner cards */
  --card-ivory-4:   #F7F2EC;  /* FAQ accordion */
  --border-sand:    #D4C6B8;  /* card border */
  /* The hairline used by the approved premium card — a warm gold tint rather
     than flat sand. Shared by every content card so the page reads as one set. */
  --hairline:       rgba(191, 167, 111, .30);
  --hairline-hover: rgba(191, 167, 111, .58);

  /* Button hovers (PDF §21) */
  --chestnut-hover: #6B2118;
  --gold-hover:     #AA915E;

  /* Accessible counterparts for use as TEXT on the light sections.
     #BFA76F on #EDE3DC is only 1.85:1 and #85614B is 4.36:1 — both below the
     WCAG AA 4.5:1 threshold. These deepened tones keep the same hue family and
     clear AA. Decorative gold (rules, borders, hover states) stays #BFA76F. */
  --gold-on-light:  #7A6026;  /* 4.71:1 on antique ivory */
  --olive-on-light: #7A5843;  /* 5.03:1 on antique ivory */
  /* Academic Glass lightens whatever it sits on, which drops --faded-gold to
     3.95:1 over Forest Moss. This lifted gold clears AA on every glass surface
     (4.94 on glassed moss, 7.29 on slate, 5.74 on oxford). */
  --gold-on-glass:  #D0BC89;

  /* Academic Glass (PDF §22) */
  --glass-bg:        rgba(237, 227, 220, 0.06);
  --glass-border:    rgba(191, 167, 111, 0.25);
  --glass-highlight: rgba(191, 167, 111, 0.10);
  --glass-blur:      18px;

  /* Typography
     Display face is Space Grotesk (Google Fonts, weights 300–700).
     NOTE: this replaces the Cormorant Garamond specified in PDF §23 — the site
     is sans-serif throughout rather than the serif + sans pairing in the spec. */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-ui:      "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --section-y:      clamp(3.5rem, 4vw, 6.5rem);
  --container-max: 85%;
  --radius:         4px;
  --radius-lg:      10px;
  --shadow-soft:    0 18px 45px rgba(44, 46, 48, .10);
  --shadow-dark:    0 20px 50px rgba(0, 0, 0, .35);
  --transition:     .32s cubic-bezier(.4, 0, .2, 1);
}

/* Numeric data gets lining, tabular figures so columns and the countdown do not
   jitter as digits change. (Space Grotesk is lining by default; this also kept
   the old Cormorant Garamond setting honest, so it is safe either way.) */
.countdown__num,
.beyond__giant,
.stat__num,
.hero__stat b,
.dt-tear__day,
.dt-tear__full,
.package__tier {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* Deliberately NO overflow-x here. Both `hidden` and `clip` on the root make
     it the sticky containing block and stop .site-header sticking (verified in
     Chromium). Horizontal overflow must be fixed at source, not clipped — test
     narrow widths (320/360) when adding wide content. */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--oxford-brown);
  background: var(--antique-ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--deep-chestnut);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--burnt-umber); }

::selection {
  background: var(--faded-gold);
  color: var(--charcoal-slate);
}

.container-wcmri {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Typography scale ------------------------------------------------------- */
/* Scale note: Space Grotesk is a grotesque with a large x-height, so it reads
   roughly 15% bigger than Cormorant Garamond did at the same font-size. The
   display scale below is tuned for it — if the display face ever reverts to a
   serif, step these clamps back up. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--charcoal-slate);
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.55rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
h4 { font-size: clamp(1.05rem, 1.45vw, 1.25rem); }

/* UI / section headings use the sans face (PDF §23) */
.eyebrow {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--burnt-umber);
  margin: 0 0 .85rem;
  display: block;
}
.eyebrow--gold { color: var(--faded-gold); }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: 1.075rem;
  line-height: 1.85;
  color: var(--body-brown);
}

/* Decorative gold rule (PDF §6) ------------------------------------------ */
.rule-gold {
  width: 62px;
  height: 2px;
  background: var(--faded-gold);
  border: 0;
  margin: 0 0 1.6rem;
  opacity: 1;
}
.rule-gold--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Section shells — enforces the 30/25/15/10/7/5/5/3 distribution (PDF §2)
   -------------------------------------------------------------------------- */
.section { padding:50px 0; position: relative; }

.section--ivory   { background: var(--antique-ivory); }
.section--slate   { background: var(--charcoal-slate); }
.section--oxford  { background: var(--oxford-brown); }
.section--moss    { background: var(--forest-moss); }

/* Everything inside a dark section inverts */
.section--slate,
.section--oxford,
.section--moss { color: var(--ivory-muted); }

.section--slate h1, .section--slate h2, .section--slate h3, .section--slate h4,
.section--oxford h1, .section--oxford h2, .section--oxford h3, .section--oxford h4,
.section--moss h1, .section--moss h2, .section--moss h3, .section--moss h4 {
  color: var(--antique-ivory);
}

.section-head { max-width: 760px; margin-bottom: 3rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--body-brown); }
.section--slate .section-head p,
.section--oxford .section-head p,
.section--moss .section-head p { color: var(--ivory-muted); }

.text-gold { color: var(--faded-gold); }

/* On the light sections the display gold is unreadable as text — swap in the
   accessible tone. Decorative gold rules and borders are unaffected. */
.section--ivory .text-gold,
.downloads .text-gold,
.wc-modal .text-gold { color: var(--gold-on-light); }

/* --------------------------------------------------------------------------
   4. Buttons  (PDF §21)
   -------------------------------------------------------------------------- */
.btn-wc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .95rem 1.9rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.2;
  text-align: center;
}

.btn-wc--primary {
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
  border-color: var(--deep-chestnut);
}
.btn-wc--primary:hover,
.btn-wc--primary:focus-visible {
  background: var(--chestnut-hover);
  border-color: var(--chestnut-hover);
  color: var(--antique-ivory);
}

.btn-wc--secondary {
  background: var(--faded-gold);
  color: var(--charcoal-slate);
  border-color: var(--faded-gold);
}
.btn-wc--secondary:hover,
.btn-wc--secondary:focus-visible {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--charcoal-slate);
}

.btn-wc--outline {
    background: #ffffff;
    color: #000000;
  border-color: var(--faded-gold);
}
.btn-wc--outline:hover,
.btn-wc--outline:focus-visible {
  background: var(--faded-gold);
  color: var(--charcoal-slate);
}

/* Outline variant for use on light sections */
.btn-wc--outline-dark {
  background: transparent;
  color: var(--deep-chestnut);
  border-color: var(--deep-chestnut);
}
.btn-wc--outline-dark:hover,
.btn-wc--outline-dark:focus-visible {
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
}

.btn-wc--sm { padding: .68rem 1.3rem; font-size: .74rem; }

/* No side margin on adjacent buttons — every row that holds two is a flex
   container with its own gap, so the margin only added to that gap and, in a
   column like the nav promo rail, knocked the second button out of line.
   Rows that are not flex use .btn-row below. */
.btn-wc + .btn-wc { margin-left: 0; }

/* Centred button rows that are not flex containers. The margin above used to
   space these; they carry their own gap now. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--faded-gold);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Academic Glass  (PDF §22) — used on exactly five surfaces
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
/* Fallback for browsers without backdrop-filter: solid tint, no blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(237, 227, 220, 0.09); }
}

/* --------------------------------------------------------------------------
   6. Top contact bar + navigation  (PDF §3)
   -------------------------------------------------------------------------- */
.topbar {
  background: #242628;
  color: var(--ivory-muted);
  font-family: var(--font-ui);
  font-size: .78rem;
  border-bottom: 1px solid rgba(191, 167, 111, .16);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .55rem;
}
.topbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar a { color: var(--ivory-muted); display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: var(--faded-gold); }
.topbar__deadline { color: var(--faded-gold); font-weight: 600; }
.topbar__social { display: flex; gap: 1rem; }
.topbar__social a { font-size: .95rem; }

/* Header ----------------------------------------------------------------- */
/* The mobile drawer lives inside this element, so the header must sit above
   both the nav backdrop (1032) and the floating actions (1040) — otherwise the
   backdrop covers the drawer and swallows its clicks. */
/* White bar with dark type. The topbar above it stays dark, so the two read as
   separate strips rather than one block.

   ⚠ --faded-gold measures 2.34:1 on white and cannot be used for text or icons
   anywhere inside this header. Accents use --gold-on-light (5.95:1) instead.
   Everything below that changes a colour is doing so for that reason. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1045;
  background: #fff;
  border-bottom: 1px solid var(--border-sand);
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(28, 29, 31, .12); }

.navbar-wc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-shrink: 0;
  /* Without this the link inherits the chestnut link colour; every child sets
     its own colour today, but a future child would be unreadable. Anchor it to
     the bar's own ink. */
  color: var(--charcoal-slate);
}
.brand:hover { color: var(--charcoal-slate); }
/* Logo images are sized by HEIGHT only — width stays auto so the artwork keeps
   its own ratio at every breakpoint (mark 0.92:1, full lockup 2.36:1). */
.brand__mark,
.brand__full {
  height: 46px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* The chip this used to carry existed only to give full-colour artwork a light
   ground over the dark bar. The bar is white now, so the logo sits on it
   directly. */
.brand__full { height: 58px; }
.brand__full--lg { height: 66px; }
.brand__text { line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--charcoal-slate);
  display: block;
}
.brand__name em { font-style: normal; color: var(--gold-on-light); }
.brand__sub {
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--body-brown);
  display: block;
  margin-top: .18rem;
}

/* Menu ------------------------------------------------------------------- */
.nav-list {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-item { position: relative; }
.nav-link {
  font-family: var(--font-ui);
  font-size: .83rem;
  font-weight: 600;

  color: var(--charcoal-slate);
  padding: .7rem .85rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-item.is-open > .nav-link { color: var(--gold-on-light); }
.nav-item.is-current > .nav-link { color: #ca112e; }

.nav-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}
.nav-item.is-open .nav-caret { transform: rotate(-135deg) translate(-2px, -2px); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  min-width: 290px;
  background: #fff;
  border: 1px solid var(--border-sand);
  border-radius: var(--radius);
  padding: .5rem;
  margin: 0;
  list-style: none;
  /* Softer than --shadow-dark, which is built for a dark panel on a dark bar. */
  box-shadow: 0 18px 44px rgba(28, 29, 31, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
}
.nav-item.is-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The last menus sit near the right edge — left-aligned panels would open past
   the viewport (Explore is 290px wide) and get clipped on narrower desktops.
   Anchor those to the right instead. */
@media (min-width: 992px) {
  .nav-item:nth-last-child(-n+2) > .nav-dropdown {
    left: auto;
    right: 0;
  }
}
.nav-dropdown a:not(.btn-wc) {
  display: block;
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--charcoal-slate);
  padding: .6rem .85rem;
  border-radius: var(--radius);
  border-left: 2px solid transparent;
}
.nav-dropdown__text { display: block; }

.nav-dropdown a:not(.btn-wc):hover {
  /* --faded-gold is 2.34:1 on white; --gold-on-light is 5.95:1. */
  color: var(--gold-on-light);
  background: rgba(191, 167, 111, .14);
  border-left-color: var(--gold-on-light);
}

/* The full-width panel is positioned against the navbar, so the navbar has to be
   the containing block. Without this the panel resolves to .site-header (which
   is sticky, therefore positioned) and loses the container gutters. */
.navbar-wc { position: relative; }

/* Mega panel -----------------------------------------------------------------
   The submenu is a full-width panel: two columns of entries and a promo rail
   carrying the next deadline and the two primary calls to action.
   -------------------------------------------------------------------------- */
.nav-dropdown__icon { display: none; }   /* drawer and desktop re-enable below */

@media (min-width: 992px) {
  /* The panel spans the navbar, so the item must not be the containing block.
     .navbar-wc becomes the positioning context instead. */
  .nav-item.has-dropdown { position: static; }

  .nav-dropdown,
  .nav-item:nth-last-child(-n+2) > .nav-dropdown {
    /* 60% of the navbar, centred under the menu. left:0 + right:0 + a definite
       width + auto inline margins is what centres an absolutely positioned
       element; the floor stops it becoming unusably narrow on small desktops. */
    left: 0;
    right: 0;
    width: 60%;
    min-width: 520px;
    margin-inline: auto;
    top: calc(100% + .4rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem 1.25rem;
    padding: 1.15rem;
    /* Room reserved on the right for the promo rail, which is out of flow. */
    padding-right: calc(240px + 2.4rem);
    min-height: 232px;
    border-radius: var(--radius-lg);
    border-top: 2px solid var(--faded-gold);
  }

  .nav-dropdown a:not(.btn-wc) {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .8rem;
    border-left: 0;
    border-radius: var(--radius);
  }
  .nav-dropdown__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(191, 167, 111, .2);
    color: var(--gold-on-light);
    transition: background .2s, color .2s;
  }
  .nav-dropdown a:not(.btn-wc):hover .nav-dropdown__icon {
    background: var(--gold-on-light);
    color: #fff;
  }
  .nav-dropdown__text b {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #482500;
    margin-bottom: .1rem;
  }
  .nav-dropdown__text i {
    display: block;
    font-style: normal;
    font-size: .71rem;
    line-height: 1.5;
    color: var(--body-brown);
  }

  /* Positioned rather than placed on the grid: 'grid-row: 1 / -1' only spans
     EXPLICIT rows, so with auto-placed links the rail covered a single row and
     the links flowed around it, leaving holes in the panel. */
  .nav-dropdown__promo {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    bottom: 1.15rem;
    width: 240px;
    display: flex;
    flex-direction: column;
    /* Centred, so the spare height on a tall panel splits evenly instead of
       leaving a gap in the middle of the card. */
    justify-content: center;
    gap: .5rem;
    padding: 1.15rem 1.1rem;
    background: linear-gradient(160deg, rgba(139, 44, 31, .10), rgba(191, 167, 111, .16));
    border: 1px solid var(--border-sand);
    border-radius: var(--radius-lg);
  }
  .nav-promo__eyebrow {
    font-family: var(--font-display);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-on-light);
  }
  .nav-promo__label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--oxford-brown);
    line-height: 1.35;
  }
  .nav-promo__date {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--deep-chestnut);
    margin-bottom: .35rem;
  }
  /* The rail's CTAs are real buttons; the .nav-dropdown a rules above exclude
     them with :not(.btn-wc), so only the full-width stacking is needed here. */
  .nav-dropdown__promo .btn-wc { width: 100%; }
  /* Second level: a flyout beside its parent entry, opened on hover or focus.
     The trigger is a button styled to match the links around it. */
  .nav-sub { position: relative; }
  .nav-sub__trigger {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .7rem .8rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--charcoal-slate);
  }
  .nav-sub__trigger:hover,
  .nav-sub:hover > .nav-sub__trigger,
  .nav-sub:focus-within > .nav-sub__trigger,
  .nav-sub.is-open > .nav-sub__trigger { background: rgba(191, 167, 111, .14); }
  .nav-sub:hover > .nav-sub__trigger .nav-dropdown__icon,
  .nav-sub:focus-within > .nav-sub__trigger .nav-dropdown__icon,
  .nav-sub.is-open > .nav-sub__trigger .nav-dropdown__icon {
    background: var(--gold-on-light);
    color: #fff;
  }
  /* Chevron, matching the one on the top-level items. */
  .nav-sub__caret {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold-on-light);
    border-bottom: 1.5px solid var(--gold-on-light);
    transform: rotate(-45deg);
    transition: transform .2s;
  }
  .nav-sub:hover .nav-sub__caret,
  .nav-sub.is-open .nav-sub__caret { transform: rotate(-45deg) translate(2px, -2px); }

  .nav-sub__menu {
    position: absolute;
    top: -.5rem;
    left: calc(100% - .35rem);
    z-index: 2;
    width: 262px;
    margin: 0;
    padding: .45rem;
    list-style: none;
    /* A shade off white, so the flyout separates from the panel behind it. */
    background: var(--card-ivory-2);
    border: 1px solid var(--border-sand);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 38px rgba(28, 29, 31, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav-sub:hover > .nav-sub__menu,
  .nav-sub:focus-within > .nav-sub__menu,
  .nav-sub.is-open > .nav-sub__menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  .nav-sub__menu a { padding: .6rem .7rem; }
  .nav-sub__menu .nav-dropdown__text b { margin-bottom: 0; }
}



/* At 60% width the panel is too narrow for two columns of links below 1366px:
   at 1200 that would leave ~132px per column. One column instead. */
@media (min-width: 992px) and (max-width: 1365px) {
  .nav-dropdown,
  .nav-item:nth-last-child(-n+2) > .nav-dropdown {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Drawer: the same entries stacked, with the promo card at the foot. */
@media (max-width: 991px) {
  .nav-dropdown a:not(.btn-wc) { display: flex; align-items: flex-start; gap: .65rem; }
  .nav-dropdown__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(191, 167, 111, .16);
    color: var(--gold-on-glass);
  }
  .nav-dropdown__text b { display: block; font-weight: 600; color: var(--antique-ivory); }
  .nav-dropdown__text i {
    display: block;
    font-style: normal;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--ivory-muted);
  }
  /* No hover on touch: the flyout expands inline instead, toggled by the
     trigger in main.js. */
  .nav-sub__trigger {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: 100%;
    padding: .6rem .85rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ivory-muted);
  }
  .nav-sub__caret {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold-on-glass);
    border-bottom: 1.5px solid var(--gold-on-glass);
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .nav-sub.is-open .nav-sub__caret { transform: rotate(-135deg); }

  .nav-sub__menu {
    list-style: none;
    margin: 0 0 .4rem;
    padding: 0 0 0 1.6rem;
    display: none;
  }
  .nav-sub.is-open > .nav-sub__menu { display: block; }
  .nav-sub__menu a { border-left: 2px solid rgba(191, 167, 111, .3); border-radius: 0; }

  .nav-dropdown__promo {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: .5rem;
    padding: .9rem;
    background: rgba(191, 167, 111, .12);
    border: 1px solid rgba(191, 167, 111, .28);
    border-radius: var(--radius);
  }
  .nav-promo__eyebrow {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-on-glass);
  }
  .nav-promo__label { font-size: .85rem; color: var(--antique-ivory); }
  .nav-promo__date { font-size: 1rem; font-weight: 700; color: var(--faded-gold); }
  .nav-dropdown__promo .btn-wc { width: 100%; justify-content: center; }
}


/* Sits above the open mobile drawer (1035) so the close button stays clickable */
.nav-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1036;
}

/* Mobile toggle ---------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-sand);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: var(--charcoal-slate);
  transform: translateX(-50%);
  transition: all var(--transition);
}
.nav-toggle span { top: 50%; margin-top: -.75px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after  { top: 6px;  left: 0; transform: none; }
.nav-toggle.is-active span { background: transparent; }
.nav-toggle.is-active span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-active span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero  (PDF §4 + §5)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Topmost layer: a left-side scrim for the copy column. The 158deg gradient
     below it is diagonal and clears the heading between roughly 992 and 1600px,
     where the bright part of slide.png shows through — the gold in the heading
     measured 2.20:1 there against AA's 3:1 for large text. Tuned by measuring
     the real paint behind each gold run, not by eye: worst case is now 4.00:1
     at 992px. It clears to nothing by 78% so the photograph still carries the
     right-hand side. Re-measure if slide.png changes. */
  background:
    linear-gradient(90deg, rgba(12, 10, 8, .72) 0%, rgba(12, 10, 8, .52) 40%, rgba(12, 10, 8, .16) 64%, rgba(12, 10, 8, 0) 78%),
    radial-gradient(1200px 620px at 78% 12%, rgb(138 75 42 / 32%), #0000008f 62%),
    linear-gradient(158deg, #2c2e3000 8%, #33302ca8 48%, #4b3b2a24 100%),
    url(../img/slide.png);
  /* Solid ground UNDER the gradient stack. Must come after the shorthand,
     which resets background-color. Keeps text legible if the image fails. */
  background-color: var(--charcoal-slate);
  color: var(--antique-ivory);
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: left;
}

/* Dark editorial Dubai photograph. Drop the file in and it takes over
   automatically — the gradient above remains as the base layer. */
.hero__photo {
  position: absolute;
  inset: 0;
  background-image: var(--hero-photo, none);
  background-size: cover;
  background-position: center 35%;
  opacity: .34;
  filter: grayscale(.45) sepia(.22) contrast(1.06) brightness(.62);
  z-index: -2;
}

/* Decorative engraving layer — kept at very low opacity per the PDF */
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .13;
}
.hero__decor svg { width: 100%; height: 100%; }

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(20, 21, 22, .65) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 0rem);
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faded-gold);
  border: 1px solid rgba(191, 167, 111, .4);
  border-radius: 100px;
  padding: .45rem 1.1rem;
  margin-bottom: 1.5rem;
}
.hero__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faded-gold);
}

.offer-banner.glass.is-visible {
    background: #2C2E30;
}


/* The conference name is the heading now. It is a much longer string than the
   theme it replaced, so it is set smaller and tighter — at the old size it ran
   to five lines and pushed the CTAs below the fold. */
.hero__title {
  font-size: clamp(1.6rem, 3.1vw, 2.6rem);
  color: var(--antique-ivory);
  margin-bottom: .85rem;
  font-weight: 600;
  line-height: 1.22;
  max-width: 20ch;
}

/* The tail of the name, from the last "&" onward, carries the gold. */
.hero__title span { color: var(--faded-gold); }
/* The short name leads on its own line. It is a span, so the gold above
   already applies — this only breaks the line. */
.hero__title-name { display: block; }

.hero__theme {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--antique-ivory);
  border-left: 2px solid var(--faded-gold);
  padding-left: 1.15rem;
  margin-bottom: 1.75rem;
  max-width: 52ch;
  line-height: 1.5;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-ui);
  font-size: .92rem;
  color: var(--antique-ivory);
}
.hero__meta > span { display: inline-flex; align-items: flex-start; gap: .55rem; }
.hero__meta svg { flex-shrink: 0; margin-top: 3px; color: var(--faded-gold); }

.hero__mode {
  font-size: .92rem;
  color: var(--ivory-muted);
  max-width: 56ch;
  margin-bottom: 1.9rem;
}
.hero__mode strong { color: var(--faded-gold); font-weight: 600; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }

.hero__organiser {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(191, 167, 111, .2);
}
.hero__organiser-label {
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.hero__organiser-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--antique-ivory);
  font-weight: 600;
}
/* White chip, same reasoning as .brand__full in the header: the logo is
   full-colour artwork with dark text and cannot sit on the dark hero unaided.
   Height is fixed and width follows the 250x60 artwork, so nothing reflows
   while the image loads. */
.hero__organiser-logo {
  height: 52px;
  width: auto;
  display: block;
  flex-shrink: 0;
  background: #fff;
  padding: 5px 9px;
  border-radius: 6px;
}
@media (max-width: 575.98px) {
  .hero__organiser { gap: .75rem; }
  .hero__organiser-logo { height: 44px; padding: 4px 7px; }
}

/* Hero aside — conference photo + countdown + statistics on Academic Glass.
   Padding lives in variables so the full-bleed figure's negative margins always
   track it, at every breakpoint. */
.hero__aside {
  --aside-pad-y: 2rem;
  --aside-pad-x: 1.75rem;
  padding: var(--aside-pad-y) var(--aside-pad-x);
}

/* Full-bleed photo at the top of the glass card. The card grows upward into the
   empty column space, so the aside reads as one object rather than a floating
   panel. Warm grade keeps it inside the palette without a heavy sepia. */
.hero__figure {
  margin: calc(var(--aside-pad-y) * -1) calc(var(--aside-pad-x) * -1) 1.6rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--glass-border);
  background: var(--oxford-brown);
}
/* Slideshow stage — slides are stacked and crossfaded */
.hero__slides {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

.hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.94) sepia(.12);
  transform: scale(1);
  transition: transform 7s linear;
}
/* Slow drift on the visible slide — switched off for reduced-motion below */
.hero__slide.is-active img { transform: scale(1.05); }
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 46, 48, .82) 0%, rgba(44, 46, 48, .1) 42%, transparent 68%);
  pointer-events: none;
}
.hero__figure figcaption {
  position: absolute;
  left: 1.1rem;
  bottom: .8rem;
  z-index: 3;
  max-width: calc(100% - 6.5rem);
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faded-gold);
  transition: opacity .35s ease;
}
.hero__figure figcaption.is-fading { opacity: 0; }

/* Gold on Academic Glass needs the lifted tone — the translucent overlay
   lightens the ground beneath it. */
.glass .eyebrow--gold,
.glass .btn-wc--outline,
.route .btn-wc--outline { color: var(--gold-on-glass); }
.glass .btn-wc--outline,
.route .btn-wc--outline { border-color: var(--gold-on-glass); }
.glass .btn-wc--outline:hover,
.glass .btn-wc--outline:focus-visible,
.route .btn-wc--outline:hover,
.route .btn-wc--outline:focus-visible {
  background: var(--gold-on-glass);
  color: var(--charcoal-slate);
}

/* Slide indicators */
.hero__dots {
  position: absolute;
  right: 1rem;
  bottom: .85rem;
  z-index: 3;
  display: flex;
  gap: .4rem;
}
.hero__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(237, 227, 220, .38);
  cursor: pointer;
  transition: all var(--transition);
}
.hero__dot:hover { background: rgba(237, 227, 220, .7); }
.hero__dot.is-active {
  background: var(--faded-gold);
  width: 18px;
  border-radius: 4px;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-bottom: 1.75rem;
}
.countdown__cell { text-align: center; }
.countdown__num {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 700;
  color: var(--faded-gold);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin-top: .45rem;
  display: block;
}
.countdown__title,
.hero__aside-title {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  text-align: center;
  margin-bottom: 1.1rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(191, 167, 111, .2);
  border-top: 1px solid rgba(191, 167, 111, .2);
  padding-top: 1px;
}
.hero__stat {
      background: #352925;
    padding: 1rem .5rem;
    text-align: center;
}
.hero__stat b {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff4db;
  display: block;
  line-height: 1;
}
.hero__stat span {
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin-top: .4rem;
  display: block;
}

/* --------------------------------------------------------------------------
   8. Trust strip — associates, ISO badge, indexing databases
   -------------------------------------------------------------------------- */
/* White strip. Everything below that sets a colour does so because the old
   values were chosen for the dark ground this used to have — --ivory-muted
   measures 1.70:1 on white and --faded-gold 2.34:1, so neither can be used for
   text here. */
.trust {
  background: #fff;
  border-top: 1px solid var(--border-sand);
  padding-block: 2.5rem;
}
.trust__label {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  width: 100%;
  text-align: center;
  margin-bottom: .25rem;
}
.trust__note {
  text-align: center;
  font-size: .86rem;
  color: var(--oxford-brown);
  max-width: 900px;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-sand);
}
.trust__note strong { color: var(--gold-on-light); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Quick Downloads
   -------------------------------------------------------------------------- */
.downloads { background: var(--card-ivory); padding-block: 3rem; }
.downloads__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1rem;
}
.download-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transition: all var(--transition);
  color: var(--charcoal-slate);
}
.download-card:hover {
  border-color: var(--faded-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  color: var(--charcoal-slate);
}
.download-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--antique-ivory);
  border-radius: var(--radius);
  color: var(--deep-chestnut);
  flex-shrink: 0;
}
.download-card__label {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
}
.download-card__meta {
  font-family: var(--font-ui);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  display: block;
  margin-top: .15rem;
}

/* --------------------------------------------------------------------------
   10. Welcome / About  (PDF §6)
   -------------------------------------------------------------------------- */
.welcome__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.welcome__aside {
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
}
.welcome__aside::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(191, 167, 111, .38);
  border-radius: var(--radius);
  pointer-events: none;
}
.welcome__aside h3 { font-size: 1.5rem; }
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li {
  display: flex;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(191, 167, 111, .3);
  font-size: .92rem;
}
.fact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-list dt,
.fact-list__key {
  font-family: var(--font-ui);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  min-width: 92px;
  flex-shrink: 0;
  padding-top: .3rem;
}
.fact-list__val { color: var(--charcoal-slate); font-weight: 500; line-height: 1.5; }

.about__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   11. Theme pillars  (PDF §7) — academic book plates
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.35rem;
}
.pillar {
  position: relative;
  padding: 2.1rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(191, 167, 111, .3);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pillar::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(237, 227, 220, .14);
  border-radius: var(--radius);
  pointer-events: none;
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-dark); }

.pillar--research      { background: var(--charcoal-slate); }
.pillar--innovation    { background: var(--deep-chestnut); }
.pillar--collaboration { background: var(--forest-moss); }
.pillar--2030          { background: var(--faded-gold); }

.pillar h3 { color: var(--antique-ivory); font-size: 1.75rem; margin-bottom: .6rem; }
.pillar p  { color: rgba(237, 227, 220, .82); font-size: .88rem; line-height: 1.65; margin: 0; }

.pillar--2030 h3 { color: var(--charcoal-slate); }
.pillar--2030 p  { color: var(--charcoal-slate); }   /* .78 alpha over gold = 3.86:1 — fails AA */

.pillar__num {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: rgba(237, 227, 220, .12);
  line-height: 1;
}
.pillar--2030 .pillar__num { color: rgba(44, 46, 48, .16); }

/* --------------------------------------------------------------------------
   12. Why attend
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}
.why-card {
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.6rem;
  transition: all var(--transition);
}
.why-card:hover {
  border-color: var(--faded-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.why-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--antique-ivory);
  color: var(--burnt-umber);
  margin-bottom: 1.15rem;
  border: 1px solid rgba(138, 75, 42, .22);
}
.why-card h4 { font-size: 1.22rem; margin-bottom: .55rem; }
.why-card p { font-size: .9rem; color: var(--body-brown); margin: 0; line-height: 1.7; }

/* --------------------------------------------------------------------------
   13. Research tracks / Call for Papers  (PDF §8) — library catalogue look
   -------------------------------------------------------------------------- */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.25rem;
}
.track {
  position: relative;
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem 3.9rem;
  transition: all var(--transition);
}
.track:hover {
  border-color: var(--faded-gold);
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}
.track__num {
  position: absolute;
  top: 1.5rem;
  left: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--deep-chestnut);
  line-height: 1;
  width: 1.9rem;
}
.track__num::after {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: var(--faded-gold);
  margin-top: .5rem;
}
.track h4 {
  font-size: 1.16rem;
  color: var(--charcoal-slate);
  margin-bottom: .85rem;
  line-height: 1.35;
}
.sdg-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.sdg-badge {
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--body-brown);
  background: var(--antique-ivory);
  border: 1px solid var(--border-sand);
  border-radius: 100px;
  padding: .3rem .7rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.4;
}
.sdg-badge b {
  color: var(--deep-chestnut);
  font-weight: 700;
  font-family: var(--font-ui);
}
/* Official SDG artwork at the head of the chip. Square and small, so the tile
   reads as a mark rather than a picture; padding on the left is trimmed so the
   art sits flush inside the pill. */
.sdg-badge { padding-left: .3rem; }
.sdg-badge__art {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
  display: block;
}
/* No artwork for this goal — a coloured number square instead of a gap. Ink is
   chosen per goal in PHP; several SDG colours are too light for white. */
.sdg-badge__art--fallback {
  display: grid;
  place-items: center;
  background: var(--sdg, var(--charcoal-slate));
  color: var(--sdg-ink, #fff);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   14. Important dates  (PDF §10)
   -------------------------------------------------------------------------- */
/* Important Dates — see section 41 for the calendar-tear cards this section
   used to hold. The old .timeline / .date-card rules were removed with the
   markup that used them. */

/* --------------------------------------------------------------------------
   15. Panel discussion
   -------------------------------------------------------------------------- */
.panel-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
}
.panel-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-style: italic;
  color: var(--antique-ivory);
  margin: 0;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   16. Global Research Network  (PDF §11) + statistics (§12)
   -------------------------------------------------------------------------- */
.network { position: relative; overflow: hidden; }
.network__map {
  position: relative;
  width: 100%;
  max-width: 1050px;
  margin: 0 auto 3rem;
}
.network__map svg { width: 100%; height: auto; display: block; overflow: visible; }

.map-land      { fill: rgba(237, 227, 220, .07); }
.map-graticule { stroke: rgba(191, 167, 111, .10); stroke-width: .5; fill: none; }
.map-arc {
  fill: none;
  stroke: var(--faded-gold);
  stroke-width: 1;
  opacity: .55;
  stroke-linecap: round;
}
.map-arc--dash {
  stroke-dasharray: 4 5;
  animation: arc-flow 22s linear infinite;
}
@keyframes arc-flow { to { stroke-dashoffset: -180; } }

.map-node        { fill: var(--burnt-umber); }
.map-node--major { fill: var(--deep-chestnut); }
.map-node--hub   { fill: var(--faded-gold); }
.map-node-ring {
  fill: none;
  stroke: var(--faded-gold);
  stroke-width: 1;
  opacity: .55;
}
.map-hub-pulse {
  fill: none;
  stroke: var(--faded-gold);
  stroke-width: 1;
  transform-origin: center;
  animation: hub-pulse 3.4s ease-out infinite;
}
@keyframes hub-pulse {
  0%   { r: 5;  opacity: .85; }
  100% { r: 26; opacity: 0; }
}
.map-label {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--ivory-dim);
}
.map-label--hub {
  fill: var(--faded-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: rgba(191, 167, 111, .2);
  border: 1px solid rgba(191, 167, 111, .2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--charcoal-slate);
  padding: 2rem 1rem;
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.3vw, 2.6rem);
  font-weight: 700;
  color: var(--faded-gold);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--antique-ivory);
  margin-top: .75rem;
  display: block;
}

/* --------------------------------------------------------------------------
   17. "2030 & Beyond"  (PDF §13)
   -------------------------------------------------------------------------- */
.beyond { position: relative; overflow: hidden; }
.beyond__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
  padding: 2rem 0;
}
.beyond__giant {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 10rem);
  font-weight: 700;
  color: var(--faded-gold);
  line-height: .85;
  margin: 0;
  letter-spacing: -.02em;
  position: relative;
  z-index: 2;
  text-align: center;
}
.beyond__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.beyond__lines line { stroke: var(--faded-gold); stroke-width: .6; opacity: .28; }

.beyond__domains {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.beyond__domain {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--antique-ivory);
  background: rgba(59, 63, 47, .82);
  border: 1px solid rgba(191, 167, 111, .35);
  border-radius: 100px;
  padding: .45rem 1rem;
  white-space: nowrap;
  pointer-events: auto;
  transition: all var(--transition);
}
.beyond__domain:hover {
  border-color: var(--faded-gold);
  color: var(--faded-gold);
}

/* Mobile: abandon the radial arrangement for a legible stack */
.beyond__domains--stack {
  display: none;
  position: static;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-top: 2rem;
}
.beyond__domains--stack .beyond__domain { position: static; transform: none; }

/* --------------------------------------------------------------------------
   18. Glimpses gallery
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   19. Publication  (PDF §15)
   -------------------------------------------------------------------------- */
.pub__note {
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--deep-chestnut);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-size: .92rem;
  color: var(--body-brown);
}
.pub__note strong { color: var(--charcoal-slate); }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1rem;
}
.partner-card {
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 1rem;
  transition: all var(--transition);
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--body-brown);
  text-align: center;
}
.partner-card img { filter: grayscale(1) contrast(.85); opacity: .78; transition: all var(--transition); max-height: 54px; }
.partner-card:hover { border-color: var(--faded-gold); color: var(--charcoal-slate); }
.partner-card:hover img { filter: grayscale(1) contrast(1); opacity: 1; }

/* Journal packages */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.25rem;
}
.package {
  position: relative;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  transition: all var(--transition);
}
.package:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--faded-gold); }
.package--featured {
  background: var(--charcoal-slate);
  border-color: var(--charcoal-slate);
}
.package__tier {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--deep-chestnut);
  line-height: 1;
  display: block;
}
.package--featured .package__tier { color: var(--faded-gold); }
.package__kind {
  font-family: var(--font-ui);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  display: block;
  margin: .6rem 0 1rem;
}
.package--featured .package__kind { color: var(--ivory-dim); }
.package__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--charcoal-slate);
  display: block;
  margin-bottom: 1rem;
}
.package--featured .package__name { color: var(--antique-ivory); }
.package__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--faded-gold);
  color: var(--charcoal-slate);
  padding: .35rem .9rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   20. Registration teaser  (PDF §14)
   -------------------------------------------------------------------------- */
.reg-feature {
  background: var(--charcoal-slate);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.25rem);
  color: var(--antique-ivory);
  position: relative;
  overflow: hidden;
}
.reg-feature h3 { color: var(--antique-ivory); }
.reg-feature p { color: var(--ivory-muted); }

/* --------------------------------------------------------------------------
   21. Get involved — volunteer / scholarship / speaker / ambassador
   -------------------------------------------------------------------------- */
.involve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr));
  gap: 1.35rem;
}
.involve-card {
  display: flex;
  flex-direction: column;
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .25);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem;
  transition: all var(--transition);
}
.involve-card:hover {
  border-color: var(--faded-gold);
  background: rgba(237, 227, 220, .08);
  transform: translateY(-4px);
}
.involve-card h4 { color: var(--antique-ivory); font-size: 1.28rem; margin-bottom: .55rem; }
.involve-card__tag {
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faded-gold);
  display: block;
  margin-bottom: .85rem;
}
.involve-card p { color: var(--ivory-muted); font-size: .89rem; line-height: 1.7; flex-grow: 1; }
.involve-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: .86rem;
  color: var(--ivory-muted);
}
.involve-card ul li {
  padding-left: 1.15rem;
  position: relative;
  margin-bottom: .4rem;
  line-height: 1.6;
}
.involve-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  background: var(--faded-gold);
  border-radius: 50%;
}
.involve-card .btn-wc { align-self: flex-start; margin-top: auto; }

/* --------------------------------------------------------------------------
   22. Venue + Explore Dubai
   Ported from the supplied dubai_venue_section_complete design. The structure
   and proportions are that design's; the colours, type and radii are swapped
   for this site's tokens so the band sits with the rest of the page — the
   supplied sheet hardcoded #342719, Arial and its own golds.

   #venue carries Bootstrap's p-0 so the photograph can reach the band's edges.
   -------------------------------------------------------------------------- */
.venue-main {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: stretch;
}
.venue-main__body {
  /* Matches the supplied 70/40/50/8% padding, but the inline start is tied to
     the page container so the copy lines up with every other section above and
     below it: (100% - var(--container-max)) / 2 plus the container's own
     1.25rem gutter. */
  padding: 4.4rem 2.5rem 3.2rem calc((100% - var(--container-max)) / 2 + 1.25rem);
  min-width: 0;
}

/* Eyebrow with the rule beside it rather than beneath ------------------------ */
.venue-label {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  /* 4.58:1 on --oxford-brown. */
  color: var(--faded-gold);
}
.venue-label::after {
  content: "";
  width: 75px;
  height: 2px;
  background: var(--faded-gold);
}

.venue-main__title {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--antique-ivory);
}
/* Presentational only — the <b> carries no emphasis, just the second colour. */
.venue-main__title b {
  font-weight: inherit;
  /* 6.06:1 on --oxford-brown. */
  color: var(--gold-on-glass);
}

/* One row, never two. The copy column is only about 400px at the narrowest
   side-by-side width, so the pair is sized down here to hold that line rather
   than left at the page default, which overflowed by up to 114px. They stack
   deliberately at the 700px breakpoint. */
.venue-main__actions { display: flex; flex-wrap: nowrap; gap: .6rem; margin-top: 2.2rem; }
.venue-main__actions .btn-wc {
  gap: .45rem;
  min-width: 0;
  padding: .72rem 1rem;
  font-size: .68rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* The supplied design pairs a gold fill with a gold-bordered ghost. The site's
   .btn-wc--outline is a white fill, so the ghost is defined here rather than
   changed globally — that variant is used on a dozen other sections. */
.btn-wc--ghost {
  background: transparent;
  /* 8.90:1 on --oxford-brown. */
  color: var(--antique-ivory);
  border-color: var(--faded-gold);
}
.btn-wc--ghost:hover,
.btn-wc--ghost:focus-visible {
  background: var(--faded-gold);
  color: var(--charcoal-slate);
  border-color: var(--faded-gold);
}

/* Photograph ----------------------------------------------------------------
   The artwork carries captions in its top-right and bottom-right corners, so
   the frame is locked to the source ratio and object-fit has nothing to trim.
   Centred, because between roughly 1350 and 1500 the locked ratio is shorter
   than the copy beside it and equal bands read better than one heavy one. */
.venue-main__media {
  position: relative;
  align-self: center;
  margin: 0;
  min-width: 0;
  line-height: 0;
  background: var(--oxford-brown);
}
.venue-main__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 910 / 600;
  object-fit: cover;
}
/* Fades the photograph's left edge into the brown so the two columns meet
   without a hard seam, and settles the foot of the frame. */
.venue-main__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(75, 59, 42, 1), rgba(75, 59, 42, 0) 28%),
    linear-gradient(0deg,  rgba(75, 59, 42, .34), rgba(75, 59, 42, 0) 42%);
}
.venue-main__tag {
  position: absolute;
  z-index: 2;
  top: 2.1rem;
  left: 22%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--antique-ivory);
  /* The sunset sky behind this runs to near-white, where ivory text alone sat
     at about 1.1:1. A text-shadow cannot be measured by the contrast
     algorithm, so the text gets its own dark plate instead. */
  padding: .5rem .85rem;
  border-radius: var(--radius);
  background: rgba(30, 23, 15, .88);
  backdrop-filter: blur(2px);
}
.venue-main__tag span { line-height: 0; color: var(--gold-on-glass); }
.venue-main__tag small {
  flex-basis: 100%;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ivory-muted);
}

/* Explore Dubai — horizontal scroller under the actions ----------------------
   The places used to sit in a cream band of their own below this section; they
   moved up into the copy column, so the cards are now on --oxford-brown and use
   the dark-surface inks. Data is shared with venue.php (includes/data.php). */
.venue-places { margin-top: 2.6rem; }
/* Doubled up: .section--oxford h3 is 0,1,1 and would otherwise repaint this
   ivory, the same trap the Explore heading hit. */
.venue-places .venue-places__title {
  margin: 0 0 .9rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* 4.58:1 on --oxford-brown. */
  color: var(--faded-gold);
}
.venue-places__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.venue-places__head .venue-places__title { margin: 0; }
.venue-places__nav { display: flex; gap: .4rem; }
.venue-places__btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(237, 227, 220, .06);
  color: var(--antique-ivory);
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.venue-places__btn:hover:not(:disabled) { background: var(--faded-gold); color: var(--charcoal-slate); border-color: var(--faded-gold); }
.venue-places__btn:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 2px; }
/* Dimmed rather than hidden, so the row does not reflow at either end. */
.venue-places__btn:disabled { opacity: .3; cursor: default; }
.venue-places__btn--prev svg { transform: rotate(180deg); }

.venue-places__row {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--faded-gold) rgba(237, 227, 220, .1);
}
.venue-places__row:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 4px; }
.venue-places__row > li { flex: 0 0 auto; scroll-snap-align: start; }
.venue-places__row::-webkit-scrollbar { height: 6px; }
.venue-places__row::-webkit-scrollbar-track { background: rgba(237, 227, 220, .1); border-radius: 3px; }
.venue-places__row::-webkit-scrollbar-thumb { background: var(--faded-gold); border-radius: 3px; }

.place-chip {
  display: flex;
  flex-direction: column;
  width: 168px;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: rgba(237, 227, 220, .05);
  transition: border-color var(--transition), transform var(--transition);
}
.place-chip:hover,
.place-chip:focus-visible { transform: translateY(-4px); border-color: var(--hairline-hover); }
.place-chip:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 2px; }
.place-chip__media { display: block; overflow: hidden; line-height: 0; }
.place-chip__media img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  transition: transform .5s ease;
}
.place-chip:hover .place-chip__media img,
.place-chip:focus-visible .place-chip__media img { transform: scale(1.07); }
.place-chip__body { display: flex; flex-direction: column; flex: 1; padding: .6rem .7rem .7rem; }
.place-chip__name {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-display);
  font-size: .78rem;
  line-height: 1.35;
  /* 8.90:1 on --oxford-brown. */
  color: var(--antique-ivory);
}
.place-chip__tag {
  display: block;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* 6.06:1 on --oxford-brown. */
  color: var(--gold-on-glass);
}

@media (max-width: 1350px) {
  /* Stacks earlier than the supplied 1100px: below about 1350 the 42% copy
     column is under 400px and wraps hard enough to outgrow the ratio-locked
     photograph beside it. */
  .venue-main { grid-template-columns: 1fr; }
  .venue-main__body { padding: 3.4rem 1.25rem 2.4rem; width: var(--container-max); margin-inline: auto; }
  /* #venue carries p-0 so the photograph can reach the band's edges when the
     columns sit side by side. Stacked there is nothing beneath it, so the
     figure carries the closing gap itself. */
  .venue-main__media { width: var(--container-max); margin: 0 auto var(--section-y); }
  /* No left column to blend into once stacked. */
  .venue-main__media::after { background: linear-gradient(0deg, rgba(75, 59, 42, .3), rgba(75, 59, 42, 0) 42%); }
  .venue-main__tag { left: 1.25rem; }
}

@media (max-width: 700px) {
  .venue-main__actions { flex-direction: column; align-items: stretch; }
  .venue-main__actions .btn-wc { justify-content: center; }
}


/* --------------------------------------------------------------------------
   23. Submission CTA band + FAQ links
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 62ch; margin-inline: auto; }
/* Inline links inside a CTA band sit on oxford/slate/moss, where the default
   deep chestnut is unreadable on the dark CTA grounds (1.27:1). */
.section--oxford .cta-band p a,
.section--slate  .cta-band p a,
.section--moss   .cta-band p a {
  color: var(--gold-on-glass);
  text-decoration: underline;
  text-decoration-color: var(--hairline-hover);
  text-underline-offset: 2px;
}
.section--oxford .cta-band p a:hover,
.section--slate  .cta-band p a:hover,
.section--moss   .cta-band p a:hover { color: var(--antique-ivory); }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }

.faq-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.25rem;
}
.faq-link {
  display: block;
  background: var(--card-ivory-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem;
  transition: all var(--transition);
  color: var(--charcoal-slate);
}
.faq-link:hover {
  border-color: var(--deep-chestnut);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  color: var(--charcoal-slate);
}
.faq-link h4 { font-size: 1.2rem; margin-bottom: .5rem; }
.faq-link p { font-size: .86rem; color: var(--body-brown); margin: 0 0 1rem; }
.faq-link__more {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* --------------------------------------------------------------------------
   24. IFERP services
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.35rem;
}
.service-card {
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}
.service-card:hover {
  border-color: var(--faded-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.service-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--antique-ivory);
  border: 1px solid rgba(138, 75, 42, .2);
  color: var(--burnt-umber);
  margin-bottom: 1.1rem;
}
.service-card h4 { font-size: 1.2rem; margin-bottom: .5rem; }
.service-card p { font-size: .87rem; color: var(--body-brown); flex-grow: 1; margin-bottom: 1.1rem; line-height: 1.7; }
.service-card__cta {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* --------------------------------------------------------------------------
   25. Reviews carousel
   -------------------------------------------------------------------------- */
.reviews { overflow: hidden; }
.review {
  background: var(--oxford-brown);
  border: 1px solid rgba(191, 167, 111, .22);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.6rem;
}
.review__quote {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: .8;
  color: var(--faded-gold);
  display: block;
  margin-bottom: .6rem;
}
.review p { color: var(--antique-ivory); font-size: .92rem; line-height: 1.75; margin-bottom: 1.15rem; }
.review__author {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  color: var(--antique-ivory);
  display: block;
}
.review__meta {
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

/* --------------------------------------------------------------------------
   26. Contact  (PDF §19)
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.25rem;
}
.contact-card {
  background: var(--charcoal-slate);
  border: 1px solid rgba(191, 167, 111, .2);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.6rem;
  transition: all var(--transition);
}
.contact-card:hover { border-color: var(--faded-gold); transform: translateY(-4px); }
.contact-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(191, 167, 111, .4);
  color: var(--faded-gold);
  margin-bottom: 1.1rem;
}
.contact-card h4 {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: .65rem;
}
.contact-card p, .contact-card a { color: var(--antique-ivory); font-size: .92rem; line-height: 1.65; }
.contact-card a:hover { color: var(--faded-gold); }

/* --------------------------------------------------------------------------
   27. Footer  (PDF §20)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--charcoal-slate);
  color: var(--ivory-muted);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.site-footer h5 {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--antique-ivory);
  margin-bottom: 1.25rem;
}
.site-footer p { font-size: .88rem; line-height: 1.75; }
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: .6rem; }
.footer__links a { color: var(--ivory-muted); font-size: .88rem; }
.footer__links a:hover { color: var(--faded-gold); }
.site-footer a { color: var(--ivory-muted); }
.site-footer a:hover { color: var(--faded-gold); }

.footer__social { display: flex; gap: .75rem; margin-top: 1.35rem; }
.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(191, 167, 111, .35);
  border-radius: 50%;
  color: var(--faded-gold);
  transition: all var(--transition);
}
.footer__social a:hover { background: var(--faded-gold); color: var(--charcoal-slate); }

.footer__alert {
  background: rgba(139, 44, 31, .14);
  border: 1px solid rgba(139, 44, 31, .45);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.footer__alert h6 {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E0A79A;
  margin: 0 0 .5rem;
}
.footer__alert p { font-size: .83rem; margin: 0; color: var(--ivory-muted); }

.footer__bottom {
  border-top: 1px solid rgba(191, 167, 111, .18);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   28. Floating actions (WhatsApp / chat) + back to top
   -------------------------------------------------------------------------- */
.floaties {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.floatie {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(191, 167, 111, .4);
  background: var(--charcoal-slate);
  color: var(--faded-gold);
  box-shadow: var(--shadow-dark);
  transition: all var(--transition);
  cursor: pointer;
  padding: 0;
}
.floatie:hover { background: var(--faded-gold); color: var(--charcoal-slate); transform: translateY(-3px); }
.floatie--whatsapp { background: #1B7A43; border-color: #1B7A43; color: #fff; }
.floatie--whatsapp:hover { background: #17703d; border-color: #17703d; color: #fff; }
.floatie--top { opacity: 0; visibility: hidden; }
.floatie--top.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   29. Modal (subscribe / speaker)
   -------------------------------------------------------------------------- */
.wc-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 21, 22, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wc-modal.is-open { display: flex; }
.wc-modal__dialog {
  background: var(--antique-ivory);
  border-radius: var(--radius-lg);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  position: relative;
  border-top: 3px solid var(--deep-chestnut);
}
.wc-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-sand);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--body-brown);
  display: grid;
  place-items: center;
  transition: all var(--transition);
}
.wc-modal__close:hover { background: var(--deep-chestnut); color: var(--antique-ivory); border-color: var(--deep-chestnut); }

/* Forms ------------------------------------------------------------------ */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-brown);
  margin-bottom: .4rem;
}
.field label .req { color: var(--deep-chestnut); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--charcoal-slate);
  background: #fff;
  border: 1px solid var(--border-sand);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--faded-gold);
  box-shadow: 0 0 0 3px rgba(191, 167, 111, .22);
}
.field textarea { min-height: 96px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-note { font-size: .78rem; color: var(--olive-on-light); margin-top: .75rem; }
.form-status { font-size: .86rem; margin-top: .9rem; display: none; padding: .7rem .9rem; border-radius: var(--radius); }
.form-status.is-success { display: block; background: rgba(59, 63, 47, .12); border: 1px solid var(--forest-moss); color: var(--forest-moss); }
.form-status.is-error   { display: block; background: rgba(139, 44, 31, .10); border: 1px solid var(--deep-chestnut); color: var(--deep-chestnut); }

/* --------------------------------------------------------------------------
   29b. Inner-page banner + breadcrumb
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 82% 20%, rgba(138, 75, 42, .28), transparent 62%),
    linear-gradient(150deg, var(--charcoal-slate) 10%, #33302c 55%, var(--oxford-brown) 100%);
  /* After the shorthand — see the note on .hero */
  background-color: var(--charcoal-slate);
  color: var(--antique-ivory);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__decor { position: absolute; inset: 0; z-index: -1; opacity: .12; pointer-events: none; }
.page-hero__decor svg { width: 100%; height: 100%; }
.page-hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-hero__title {
  color: var(--antique-ivory);
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  max-width: 20ch;
}
.page-hero__lead { color: var(--ivory-muted); max-width: 58ch; margin: 0; font-size: 1.02rem; }

.crumbs { margin-bottom: 1.35rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.crumbs li + li::before { content: "/"; margin-right: .55rem; color: rgba(191, 167, 111, .55); }
.crumbs a { color: var(--ivory-dim); }
.crumbs a:hover { color: var(--faded-gold); }
.crumbs [aria-current="page"] { color: var(--faded-gold); }

/* --------------------------------------------------------------------------
   29c. Submission page — two-column shell, form blocks, dropzone
   -------------------------------------------------------------------------- */
.submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.submit-form { max-width: 780px; }

.form-block {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--card-ivory);
  padding: 1.85rem 1.6rem 1.6rem;
  margin: 0 0 1.5rem;
}
.form-block legend {
  display: flex;
  align-items: center;
  gap: .7rem;
  float: none;
  width: auto;
  padding: 0 .65rem;
  margin-left: -.65rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--charcoal-slate);
  background: var(--card-ivory);
}
.form-block__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-chestnut);
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
}

.form-counter { display: block; color: var(--muted-olive); margin-top: .2rem; }

.submit-form__submit { width: 100%; margin-top: .5rem; }

/* Dropzone --------------------------------------------------------------- */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-align: center;
  padding: 2.25rem 1.25rem;
  border: 1.5px dashed var(--border-sand);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: all var(--transition);
  cursor: pointer;
}
.dropzone:hover,
.dropzone.is-dragover,
.dropzone:focus-within {
  border-color: var(--faded-gold);
  background: #fffdfa;
}
.dropzone.is-dragover { box-shadow: 0 0 0 4px rgba(191, 167, 111, .18); }

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--antique-ivory);
  color: var(--deep-chestnut);
  margin-bottom: .3rem;
}
.dropzone__label {
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 700;
  color: var(--charcoal-slate);
}
.dropzone__hint { font-size: .78rem; color: var(--olive-on-light); }

.dropzone__file {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .85rem;
  padding: .5rem .75rem;
  background: var(--antique-ivory);
  border: 1px solid var(--border-sand);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--charcoal-slate);
  position: relative;
  z-index: 2;
  max-width: 100%;
}
.dropzone__filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__remove {
  border: 0;
  background: transparent;
  color: var(--deep-chestnut);
  cursor: pointer;
  padding: .2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.dropzone__remove:hover { background: rgba(139, 44, 31, .12); }

/* Sidebar cards ---------------------------------------------------------- */
.submit-aside { display: grid; gap: 1rem; position: sticky; top: 108px; }

.conf-card,
.help-card {
  background: var(--card-ivory);
  border: 1px solid rgba(191, 167, 111, .28);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.conf-card:hover,
.help-card:hover {
  border-color: rgba(191, 167, 111, .55);
  box-shadow: 0 10px 28px rgba(44, 46, 48, .07);
}

/* Card headings share one rhythm: eyebrow, title, short gold rule */
.conf-card > .eyebrow,
.help-card > .eyebrow,
.deadline-card > .eyebrow { margin-bottom: .5rem; }

.conf-card h4 + .rule-gold,
.help-card h4 + .rule-gold { display: none; }

.conf-card h4,
.help-card h4 {
  font-size: 1.12rem;
  margin: 0 0 .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(191, 167, 111, .3);
  color: var(--charcoal-slate);
}

.deadline-card {
  background: var(--charcoal-slate);
  border: 1px solid rgba(191, 167, 111, .3);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  color: var(--ivory-muted);
  position: relative;
  overflow: hidden;
}
/* Thin gold spine so the dark card reads as the accent card in the stack */
.deadline-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--faded-gold);
}

/* Sidebar navigation lists — links, not statements, so they get an arrow
   affordance rather than the tick used for content bullets. */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { border-top: 1px solid rgba(191, 167, 111, .22); }
.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .68rem .1rem;
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 600;
  color: var(--charcoal-slate);
  line-height: 1.45;
  transition: color var(--transition), padding-left var(--transition);
}
.link-list a::after {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-top: 1.6px solid var(--gold-on-light);
  border-right: 1.6px solid var(--gold-on-light);
  transform: rotate(45deg);
  transition: transform var(--transition), border-color var(--transition);
}
.link-list a:hover,
.link-list a:focus-visible {
  color: var(--deep-chestnut);
  padding-left: .35rem;
}
.link-list a:hover::after { border-color: var(--deep-chestnut); transform: rotate(45deg) translate(2px, -2px); }

/* Dark-card variant */
.deadline-card .link-list a { color: var(--antique-ivory); }
.deadline-card .link-list li + li { border-color: rgba(191, 167, 111, .2); }
.deadline-card .link-list a:hover { color: var(--faded-gold); }
.deadline-card .link-list a:hover::after { border-color: var(--faded-gold); }

/* Contact rows — label above value, so they never collide on one line
   (the old markup reused .deadline-list and rendered "info@wcmri.in Email"). */
.contact-rows { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.contact-rows li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(191, 167, 111, .2);
}
.contact-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-rows__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(191, 167, 111, .38);
  color: var(--faded-gold);
  margin-top: .1rem;
}
.contact-rows__label {
  display: block;
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: .12rem;
}
.contact-rows__value {
  display: block;
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 600;
  color: var(--antique-ivory);
  word-break: break-word;
}
a.contact-rows__value:hover { color: var(--faded-gold); }
.deadline-list { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.deadline-list li {
  padding: .7rem 0;
  border-bottom: 1px solid rgba(191, 167, 111, .2);
}
.deadline-list li:last-child { border-bottom: 0; }
.deadline-list time {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--faded-gold);
  font-variant-numeric: lining-nums;
}
.deadline-list span {
  font-family: var(--font-ui);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--ivory-dim);
}

.help-card h4 { font-size: 1.15rem; margin-bottom: .9rem; }
.tick-list { list-style: none; margin: 0; padding: 0; font-size: .89rem; }
.tick-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .65rem;
  line-height: 1.6;
  color: var(--body-brown);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .38em;
  width: 5px;
  height: 9px;
  border-right: 1.7px solid var(--gold-on-light);
  border-bottom: 1.7px solid var(--gold-on-light);
  transform: rotate(45deg);
}

@media (max-width: 991px) {
  .submit-layout { grid-template-columns: 1fr; }
  .submit-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .submit-form { max-width: none; }
}

/* --------------------------------------------------------------------------
   29d. Guidelines page — spec lists, step grid, evaluation process
   -------------------------------------------------------------------------- */
.guide-block {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--card-ivory);
  padding: 1.9rem 1.7rem 1.7rem;
  margin: 0 0 1.5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.guide-block:hover {
  border-color: var(--hairline-hover);
  box-shadow: 0 10px 28px rgba(44, 46, 48, .07);
}
.guide-block__head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin: 0 0 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--charcoal-slate);
}
.guide-block__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-chestnut);
  font-variant-numeric: lining-nums;
  flex-shrink: 0;
}
.guide-sub {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin: 1.75rem 0 .85rem;
}
.guide-lead { font-size: .95rem; color: var(--body-brown); margin-bottom: .7rem; }
.guide-note {
  background: var(--antique-ivory);
  border-left: 3px solid var(--faded-gold);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .92rem;
  color: var(--body-brown);
  margin: 1.5rem 0 0;
}
.guide-note strong { color: var(--charcoal-slate); }
.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}
.guide-actions .btn-wc + .btn-wc { margin-left: 0; }

/* Label / value specification list */
.spec-list { margin: 0; padding: 0; }
.spec-list__row {
  display: grid;
  grid-template-columns: minmax(min(120px, 30%), auto) 1fr;
  gap: .3rem 1.25rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(191, 167, 111, .32);
}
.spec-list__row:first-child { padding-top: 0; }
.spec-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list dt {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  padding-top: .18rem;
}
.spec-list dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--body-brown);
}
.spec-list dd strong { color: var(--charcoal-slate); }

/* Numbered content-section cards */
.step-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: .9rem;
}
.step-card {
  position: relative;
  background: var(--antique-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.15rem 1.15rem 1rem;
  transition: all var(--transition);
}
.step-card:hover { border-color: var(--faded-gold); transform: translateY(-3px); }
.step-card__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--deep-chestnut);
  font-variant-numeric: lining-nums;
  display: block;
  margin-bottom: .35rem;
}
.step-card h4 { font-size: 1.05rem; margin: 0 0 .3rem; color: var(--charcoal-slate); }
.step-card p { font-size: .85rem; color: var(--body-brown); margin: 0; line-height: 1.6; }

/* Sidebar download list */
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list li { border-bottom: 1px solid rgba(191, 167, 111, .3); }
.dl-list li:last-child { border-bottom: 0; }
.dl-list a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 0;
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 600;
  color: var(--charcoal-slate);
}
.dl-list a:hover { color: var(--deep-chestnut); }
.dl-list svg { color: var(--deep-chestnut); flex-shrink: 0; }

/* Evaluation process — vertical stepper on the dark band */
.eval-note {
  max-width: 720px;
  margin: 0 auto 2.75rem;
  padding: 1rem 1.4rem;
  font-size: .92rem;
  color: var(--antique-ivory);
  text-align: center;
}
.eval-note strong { color: var(--faded-gold); }

.process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.1rem;
  counter-reset: process;
}
.process__step {
  display: flex;
  gap: 1.1rem;
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .22);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.35rem;
  transition: all var(--transition);
}
.process__step:hover {
  border-color: var(--faded-gold);
  background: rgba(237, 227, 220, .08);
}
.process__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--faded-gold);
  line-height: 1;
  font-variant-numeric: lining-nums;
  flex-shrink: 0;
  padding-top: .1rem;
}
.process__body h3 {
  font-size: 1.12rem;
  color: var(--antique-ivory);
  margin: 0 0 .35rem;
}
.process__body p {
  font-size: .89rem;
  color: var(--ivory-muted);
  margin: 0;
  line-height: 1.7;
}
.process__body strong { color: var(--faded-gold); font-weight: 600; }

/* --------------------------------------------------------------------------
   29e. Mode of Presentation
   -------------------------------------------------------------------------- */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.25rem;
}
.mode-card {
  display: flex;
  flex-direction: column;
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem;
  color: var(--charcoal-slate);
  transition: all var(--transition);
}
.mode-card:hover {
  border-color: var(--faded-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  color: var(--charcoal-slate);
}
.mode-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--antique-ivory);
  border: 1px solid rgba(138, 75, 42, .2);
  color: var(--burnt-umber);
  margin-bottom: 1.05rem;
}
.mode-card h3 { font-size: 1.25rem; margin-bottom: .45rem; }
.mode-card p { font-size: .89rem; color: var(--body-brown); flex-grow: 1; margin-bottom: 1rem; }
.mode-card__more {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Text + image split for a format section */
.mode-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.mode-split--reverse .mode-figure { order: -1; }

.mode-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--oxford-brown);
  position: relative;
}
.mode-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03) sepia(.08);
  transition: transform .6s ease;
}
.mode-figure:hover img { transform: scale(1.03); }
.mode-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem .85rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--antique-ivory);
  background: linear-gradient(to top, rgba(44, 46, 48, .88) 0%, rgba(44, 46, 48, .1) 70%, transparent 100%);
}
/* On dark sections the frame border picks up the gold hairline instead */
.section--oxford .mode-figure,
.section--slate .mode-figure { border-color: rgba(191, 167, 111, .3); }

/* Poster specification diagram — stands in for a poster-session photograph */
.poster-diagram {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(191, 167, 111, .3);
  background: linear-gradient(150deg, rgba(44, 46, 48, .55), rgba(59, 63, 47, .35));
  position: relative;
}
.poster-diagram svg { display: block; width: 100%; height: auto; }
.poster-diagram figcaption {
  padding: .85rem 1.1rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ivory-dim);
  border-top: 1px solid rgba(191, 167, 111, .22);
  background: rgba(44, 46, 48, .45);
}
.pd-dim {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  fill: #BFA76F;
}
.pd-note {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: #EDE3DC;
}
.pd-note--dim { fill: #C5B8AA; font-weight: 400; text-transform: none; letter-spacing: .02em; }

@media (max-width: 575px) {
  .pd-note { font-size: 21px; }
  .pd-dim { font-size: 24px; }
}

/* Three-up photo strip */
.pres-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}
.pres-strip__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--oxford-brown);
}
.pres-strip__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.9) contrast(1.03) sepia(.1);
  transition: transform .6s ease, filter var(--transition);
}
.pres-strip__item:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.03) sepia(0); }

@media (max-width: 860px) {
  .mode-split { grid-template-columns: 1fr; }
  .mode-split--reverse .mode-figure { order: 0; }
}

/* Shared timing rule */
.timing-banner {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 2.25rem 0 0;
  padding: 1.1rem 1.4rem;
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--deep-chestnut);
  border-radius: var(--radius);
  font-size: .95rem;
  color: var(--body-brown);
}
.timing-banner svg { color: var(--deep-chestnut); flex-shrink: 0; }
.timing-banner strong { color: var(--charcoal-slate); }
.timing-banner--dark {
  background: rgba(237, 227, 220, .06);
  border-color: rgba(191, 167, 111, .25);
  border-left-color: var(--faded-gold);
  color: var(--ivory-muted);
}
.timing-banner--dark svg { color: var(--faded-gold); }
.timing-banner--dark strong { color: var(--faded-gold); }

/* 6-6-6 rule */
.rule666 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: .85rem;
  margin-bottom: .5rem;
}
.rule666__cell {
  text-align: center;
  background: var(--antique-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.2rem .85rem;
}
.rule666__note {
  display: block;
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
}
.rule666__n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--deep-chestnut);
  font-variant-numeric: lining-nums;
}
.rule666__label {
  display: block;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--body-brown);
}

/* Guideline blocks on dark and light grounds */
.mode-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1.25rem;
}
.mode-block {
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .25);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  transition: all var(--transition);
}
.mode-block:hover { border-color: var(--faded-gold); background: rgba(237, 227, 220, .08); }
.mode-block h4 { color: var(--antique-ivory); font-size: 1.15rem; margin-bottom: .85rem; }
.mode-block ul { list-style: none; margin: 0; padding: 0; }
.mode-block li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .6rem;
  font-size: .89rem;
  line-height: 1.7;
  color: var(--ivory-muted);
}
.mode-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faded-gold);
}
.mode-block li strong { color: var(--antique-ivory); }
.mode-block__tag {
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faded-gold);
  display: block;
  margin-bottom: .5rem;
}

/* Light variant for the virtual section */
.mode-blocks--light .mode-block {
  background: var(--card-ivory);
  border-color: var(--border-sand);
}
.mode-blocks--light .mode-block:hover { border-color: var(--faded-gold); background: var(--card-ivory); }
.mode-blocks--light .mode-block h4 { color: var(--charcoal-slate); }
.mode-blocks--light .mode-block li { color: var(--body-brown); }
.mode-blocks--light .mode-block li strong { color: var(--charcoal-slate); }
.mode-blocks--light .mode-block li::before { background: var(--deep-chestnut); }
.mode-blocks--light .mode-block__tag { color: var(--olive-on-light); }

/* --------------------------------------------------------------------------
   29g. Registration pages — deliverables, refund tiers, payment, bank details
   -------------------------------------------------------------------------- */
.deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: .7rem;
}
.deliverables li {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--antique-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-size: .91rem;
  color: var(--charcoal-slate);
}
.deliverables__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--card-ivory);
  color: var(--burnt-umber);
  flex-shrink: 0;
}

/* Refund tiers */
.refund-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: .9rem;
  margin-bottom: .5rem;
}
.refund-tier {
  background: var(--antique-ivory);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--faded-gold);
  border-radius: var(--radius);
  padding: 1.25rem 1.15rem;
}
.refund-tier--good { border-top-color: var(--forest-moss); }
.refund-tier--mid  { border-top-color: var(--burnt-umber); }
.refund-tier--none { border-top-color: var(--deep-chestnut); }
.refund-tier__pct {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--charcoal-slate);
  font-variant-numeric: lining-nums;
}
.refund-tier__label {
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  display: block;
  margin: .3rem 0 .7rem;
}
.refund-tier p { font-size: .87rem; color: var(--body-brown); margin: 0; line-height: 1.6; }
.refund-tier p strong { color: var(--charcoal-slate); }

/* Payment method cards */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.25rem;
}
.pay-card {
  position: relative;
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem 1.6rem;
  transition: all var(--transition);
}
.pay-card:hover { border-color: var(--faded-gold); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.pay-card__num {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(139, 44, 31, .14);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.pay-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--antique-ivory);
  border: 1px solid rgba(138, 75, 42, .2);
  color: var(--burnt-umber);
  margin-bottom: 1.05rem;
}
.pay-card h3 { font-size: 1.28rem; margin-bottom: .2rem; }
.pay-card__sub {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  display: block;
  margin-bottom: .8rem;
}
.pay-card p { font-size: .89rem; color: var(--body-brown); margin: 0; line-height: 1.7; }

/* Callouts */
.callout {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: 2.25rem auto 0;
  max-width: 860px;
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius);
  font-size: .93rem;
  line-height: 1.7;
}
.callout svg { flex-shrink: 0; margin-top: .18rem; }
.callout--action {
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--deep-chestnut);
  color: var(--body-brown);
}
.callout--action svg { color: var(--deep-chestnut); }
.callout--warn {
  background: rgba(139, 44, 31, .16);
  border: 1px solid rgba(139, 44, 31, .45);
  color: var(--ivory-muted);
}
.callout--warn svg { color: #E0A79A; }
.callout--warn strong { color: #E8C4B9; }
/* The default chestnut link colour measures 1.53:1 on this ground — and this is
   the fraud-reporting address, so it has to be the most readable thing here. */
.callout--warn a {
  color: var(--faded-gold);          /* 5.56:1 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.callout--warn a:hover { color: var(--antique-ivory); }

/* Bank details */
.bank-card { max-width: 780px; margin-inline: auto; padding: .5rem 1.5rem; }
.bank-list { margin: 0; padding: 0; }
.bank-list__row {
  display: grid;
  grid-template-columns: minmax(min(190px, 40%), auto) 1fr;
  gap: .4rem 1.5rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(191, 167, 111, .22);
}
.bank-list__row:last-child { border-bottom: 0; }
.bank-list dt {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.bank-list dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.bank-list__value {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--antique-ivory);
  letter-spacing: .02em;
  word-break: break-word;
}
.bank-copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1px solid rgba(191, 167, 111, .35);
  border-radius: var(--radius);
  color: var(--faded-gold);
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  cursor: pointer;
  transition: all var(--transition);
}
.bank-copy:hover { background: var(--faded-gold); color: var(--charcoal-slate); }
.bank-copy.is-copied { background: var(--forest-moss); border-color: var(--forest-moss); color: var(--antique-ivory); }

@media (max-width: 575px) {
  .bank-list__row { grid-template-columns: 1fr; }
  .bank-copy__text { display: none; }
}

/* --------------------------------------------------------------------------
   29i. Journals & Publications — quotes, indexing grid, research journey
   -------------------------------------------------------------------------- */
/* Publication Opportunities (left) beside the Indexing panel (right) */
.pub-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: start;
}
.pub-split__main h2 { margin-bottom: .9rem; }
.pub-split__prose {
  color: var(--body-brown);
  font-size: 1rem;
  line-height: 1.85;
  margin: 0;
}

.pub-split__aside {
  background: var(--card-ivory);
  border: 1px solid rgba(191, 167, 111, .3);
  border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.pub-split__aside h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .8rem; }

@media (max-width: 900px) {
  .pub-split { grid-template-columns: 1fr; }
}

.pull-quote {
  position: relative;
  max-width: 760px;
  margin: 0 0 1.5rem;
  padding: 0 0 0 3rem;
  border: 0;
}
.pull-quote__mark {
  position: absolute;
  left: 0;
  top: -.4rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  /* Display gold is 2.34:1 on the light ground — washed out. The dark quote
     mark on .journey-quote sits on glass and keeps --faded-gold. */
  color: var(--gold-on-light);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--charcoal-slate);
  margin: 0;
}

.prose-center {
  max-width: 760px;
  margin-inline: auto;
  color: var(--body-brown);
  font-size: 1.0rem;
  line-height: 1.85;
}

/* Indexing logo grid — slots degrade to a text chip until the file lands */
.index-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1rem;
}
/* White ground: the supplied logos are PNGs without alpha, so a tinted card
   would show a white rectangle behind each one. */
.index-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.15rem 1rem;
  transition: all var(--transition);
}
.index-card:hover {
  border-color: var(--faded-gold);
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}
/* These are recognition marks — they do their job in their own colours, so
   they are shown as-is rather than given the §15 monochrome partner treatment. */
.index-card img {
  max-height: 55px;
  width: auto;
  opacity: .95;
  transition: opacity var(--transition);
}
.index-card:hover img { opacity: 1; }

/* Compact variant for the narrower right-hand column */
.index-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr));
  gap: .7rem;
}
.index-grid--compact .index-card { min-height: 84px; padding: .8rem .7rem; gap: .35rem; }
/* .index-grid--compact .index-card img { max-height: 32px; } */

/* Callout sized for a sidebar column rather than a full-width band */
.callout--tight {
  margin: 1.25rem 0 0;
  max-width: none;
  padding: .95rem 1.1rem;
  font-size: .85rem;
  line-height: 1.65;
  gap: .7rem;
}
.index-card__name {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--body-brown);
  text-align: center;
}
/* Each logo already carries its own name, so the caption is hidden once the
   image loads. It remains as the visible fallback when data-optional-img
   removes a missing file, and alt text covers screen readers either way. */
.index-card img + .index-card__name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Research journey */
.journey-quote {
  position: relative;
  max-width: 860px;
  margin: 0 auto 2.75rem;
  padding: 1.75rem 1.9rem 1.75rem 4rem;
  border-radius: var(--radius-lg);
}
.journey-quote__mark {
  position: absolute;
  left: 1.4rem;
  top: .9rem;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--faded-gold);
}
.journey-quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--antique-ivory);
}

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.15rem;
  counter-reset: journey;
}
.journey__step {
  position: relative;
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .22);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem 1.5rem;
  transition: all var(--transition);
}
.journey__step:hover {
  border-color: var(--faded-gold);
  background: rgba(237, 227, 220, .08);
  transform: translateY(-4px);
}
.journey__num {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(191, 167, 111, .22);
  font-variant-numeric: lining-nums;
}
.journey__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(191, 167, 111, .4);
  color: var(--faded-gold);
  margin-bottom: 1.1rem;
}
.journey__step h3 {
  font-size: 1.18rem;
  color: var(--antique-ivory);
  margin-bottom: .5rem;
  padding-right: 2.2rem;
}
.journey__step p {
  font-size: .89rem;
  line-height: 1.75;
  color: var(--ivory-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   29j. Journal routes, research guidance, publishing steps, ethics cards
   -------------------------------------------------------------------------- */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.15rem;
}
.route {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .25);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.5rem 1.5rem;
  transition: all var(--transition);
}
.route:hover {
  border-color: var(--faded-gold);
  background: rgba(237, 227, 220, .08);
  transform: translateY(-4px);
}
.route--featured {
  background: rgba(191, 167, 111, .1);
  border-color: rgba(191, 167, 111, .5);
}
.route__flag {
  position: absolute;
  top: -10px;
  left: 1.4rem;
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--faded-gold);
  color: var(--charcoal-slate);
  padding: .3rem .75rem;
  border-radius: 100px;
}
.route__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(191, 167, 111, .4);
  color: var(--faded-gold);
  margin-bottom: 1rem;
}
.route h3 { font-size: 1.18rem; color: var(--antique-ivory); margin-bottom: .5rem; }
.route p { font-size: .87rem; line-height: 1.7; color: var(--ivory-muted); margin: 0 0 1rem; }
.route__issues { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.route__issues li {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--antique-ivory);
  border: 1px solid rgba(191, 167, 111, .35);
  border-radius: 100px;
  padding: .28rem .7rem;
}
.route__cta { align-self: flex-start; margin-top: auto; }

/* Research guidance */
.guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1.25rem;
}
.guidance-card {
  background: var(--card-ivory);
  border: 1px solid rgba(191, 167, 111, .28);
  border-radius: 10px;
  padding: 1.7rem 1.5rem;
  transition: all var(--transition);
}
.guidance-card:hover { border-color: var(--faded-gold); box-shadow: var(--shadow-soft); }
.guidance-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--antique-ivory);
  border: 1px solid rgba(138, 75, 42, .2);
  color: var(--burnt-umber);
  margin-bottom: 1rem;
}
.guidance-card h3 {
  font-size: 1.16rem;
  margin-bottom: .9rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(191, 167, 111, .3);
}
.guidance-card .tick-list li { font-size: .88rem; margin-bottom: .5rem; }

/* Publication inquiry band */
.enquiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.75rem;
  align-items: center;
  margin-top: 2.25rem;
  padding: 1.9rem 1.8rem;
  background: var(--card-ivory);
  border: 1px solid rgba(191, 167, 111, .32);
  border-left: 3px solid var(--deep-chestnut);
  border-radius: 10px;
}
@media (max-width: 700px) {
  .enquiry { grid-template-columns: 1fr; }
  .enquiry .btn-wc { justify-self: start; }
}

/* Ten-step publishing process */
.pubsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 1.1rem;
}
.pubstep {
  display: flex;
  gap: 1.1rem;
  background: var(--card-ivory);
  border: 1px solid rgba(191, 167, 111, .28);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  transition: all var(--transition);
}
.pubstep:hover { border-color: var(--faded-gold); box-shadow: var(--shadow-soft); }
.pubstep__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--deep-chestnut);
  font-variant-numeric: lining-nums;
  flex-shrink: 0;
  padding-top: .12rem;
}
.pubstep__body h3 { font-size: 1.1rem; margin: 0 0 .6rem; color: var(--charcoal-slate); }
.pubstep__body ul { list-style: none; margin: 0; padding: 0; }
.pubstep__body li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: .45rem;
  font-size: .87rem;
  line-height: 1.65;
  color: var(--body-brown);
}
.pubstep__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-on-light);
}
.pubstep__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .7rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
}

/* Ethics + malpractice cards */
.ethics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1.1rem;
}
.ethics-card {
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .22);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  transition: all var(--transition);
}
.ethics-card:hover { border-color: var(--faded-gold); background: rgba(237, 227, 220, .08); }
.ethics-card h4 { font-size: 1.08rem; color: var(--antique-ivory); margin-bottom: .7rem; }
.ethics-card ul { list-style: none; margin: 0; padding: 0; }
.ethics-card li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .5rem;
  font-size: .87rem;
  line-height: 1.7;
  color: var(--ivory-muted);
}
.ethics-card li:last-child { margin-bottom: 0; }
.ethics-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faded-gold);
}
/* Awaiting copy from the content team */
.ethics-card--pending { border-style: dashed; }
.ethics-card__pending {
  font-size: .84rem;
  font-style: italic;
  color: var(--ivory-dim);
  margin: 0;
}

/* --------------------------------------------------------------------------
   29k. Conference Registration — offers and the four-step instructions
   -------------------------------------------------------------------------- */
.offer-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--radius-lg);
}
.offer-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  border: 1px solid rgba(191, 167, 111, .4);
  border-radius: 100px;
  padding: .35rem .85rem;
  margin-bottom: 1rem;
}
.offer-banner h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--antique-ivory);
  margin-bottom: .7rem;
}
.offer-banner p { color: var(--ivory-muted); font-size: .93rem; margin: 0; max-width: 60ch; }
.offer-banner__actions { display: flex; flex-direction: column; gap: .7rem; }
.offer-banner__actions .btn-wc { margin-left: 0; }

.offer-strip {
      background: #4d392b;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: 1.4rem 1.6rem;
  /* background: rgba(237, 227, 220, .05); */
  border: 1px solid rgba(191, 167, 111, .25);
  border-left: 3px solid var(--faded-gold);
  border-radius: var(--radius-lg);
}
.offer-strip h3 { font-size: 1.2rem; color: var(--antique-ivory); margin-bottom: .35rem; }
.offer-strip p { color: var(--ivory-muted); font-size: .9rem; margin: 0; }
.offer-strip p strong { color: var(--faded-gold); }
.offer-strip .btn-wc--outline { color: var(--gold-on-glass); border-color: var(--gold-on-glass); }
.offer-strip .btn-wc--outline:hover { background: var(--gold-on-glass); color: var(--charcoal-slate); }

@media (max-width: 820px) {
  .offer-banner,
  .offer-strip { grid-template-columns: 1fr; }
  .offer-banner__actions { flex-direction: row; flex-wrap: wrap; }
  .offer-strip .btn-wc { justify-self: start; }
}

/* Four-step instructions, connected by a dashed rule */
.regsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}
.regstep {
  position: relative;
  text-align: center;
  padding: 0 .5rem;
}
/* Connector runs between icons, not past the last one */
.regstep::after {
  content: "";
  position: absolute;
  top: 76px;
  left: calc(50% + 44px);
  right: calc(-50% + 44px);
  border-top: 2px dashed var(--border-sand);
}
.regstep:last-child::after,
.regstep:nth-child(4n)::after { display: none; }

.regstep__label {
  display: block;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--charcoal-slate);
  margin-bottom: 1rem;
}
.regstep__icon {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #fff;
}
.regstep__icon--moss     { color: var(--forest-moss); }
.regstep__icon--slate    { color: var(--charcoal-slate); }
.regstep__icon--umber    { color: var(--burnt-umber); }
.regstep__icon--chestnut { color: var(--deep-chestnut); }

.regstep h3 {
  font-size: 1.02rem;
  color: var(--charcoal-slate);
  margin-bottom: .45rem;
  line-height: 1.4;
}
.regstep p { font-size: .85rem; color: var(--body-brown); margin: 0; line-height: 1.65; }

@media (max-width: 1099px) {
  .regsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regstep:nth-child(2n)::after { display: none; }
}

/* Stacked: the horizontal connector would point nowhere */
@media (max-width: 700px) {
  .regsteps { grid-template-columns: 1fr; gap: 1.75rem; }
  .regstep::after { display: none; }
}

/* --------------------------------------------------------------------------
   29l. Registration — fee tables, packages, add-ons, order summary
   -------------------------------------------------------------------------- */
.reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
/* Without min-width:0 a grid item refuses to shrink below its content, so the
   wide fee table pushed the whole page sideways instead of scrolling. */
.reg-layout__main,
.reg-summary { min-width: 0; }
@media (max-width: 1099px) { .reg-layout { grid-template-columns: minmax(0, 1fr); } }

/* Wide tables scroll inside their own box rather than the page */
/* position:relative matters: the fee radios inside are position:absolute, and
   without a positioned ancestor here their containing block was further up the
   tree, so they escaped this scroll container and dragged the page sideways. */
.fee-wrap {
  position: relative;
  overflow-x: auto;
  margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}
.fee-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .88rem;
}
.fee-table th,
.fee-table td {
  border: 1px solid var(--border-sand);
  padding: .6rem .8rem;
  text-align: left;
  vertical-align: middle;
}
.fee-table thead th {
  background: var(--antique-ivory);
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--charcoal-slate);
  text-align: center;
}
.fee-table thead th:first-child { text-align: left; }
.fee-table tbody th {
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 600;
  color: var(--charcoal-slate);
  background: #fff;
  max-width: 320px;
}
.fee-table td { text-align: center; background: #fff; padding: 0; }
.fee-flag {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  margin-bottom: .15rem;
}
.fee-note {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  font-style: italic;
  color: var(--olive-on-light);
  margin-top: .2rem;
}

/* Each price cell is a radio target */
.fee-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .65rem .5rem;
  cursor: pointer;
  min-height: 46px;
  transition: background var(--transition);
}
.fee-pick input { position: absolute; opacity: 0; pointer-events: none; }
.fee-pick:hover { background: var(--card-ivory); }
.fee-pick__amount {
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 700;
  color: var(--charcoal-slate);
}
.fee-pick__suffix { font-size: .68rem; color: var(--olive-on-light); }
.fee-pick.is-picked { background: rgba(139, 44, 31, .1); box-shadow: inset 0 0 0 2px var(--deep-chestnut); }
.fee-pick.is-picked .fee-pick__amount { color: var(--deep-chestnut); }
.fee-pick input:focus-visible + .fee-pick__amount { outline: 2px solid var(--faded-gold); outline-offset: 3px; }

.fee-footnote { font-size: .78rem; color: var(--olive-on-light); margin: .35rem 0 0; }


/* Fee category tabs ------------------------------------------------------ */
.fee-tabs { margin-bottom: 1rem; }
.fee-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.25rem;
}
.fee-tab {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: .7rem 1.05rem;
  margin-bottom: -1px;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--body-brown);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.fee-tab::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition);
}
.fee-tab:hover { color: var(--deep-chestnut); background: var(--antique-ivory); }
.fee-tab.is-active { color: var(--deep-chestnut); }
.fee-tab.is-active::after { background: var(--deep-chestnut); }
.fee-tab:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 2px; }

.fee-panel:focus { outline: none; }
.fee-panel:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 4px; }

@media (max-width: 560px) {
  .fee-tabs__list { gap: .2rem; }
  .fee-tab { padding: .6rem .7rem; font-size: .74rem; white-space: normal; flex: 1 1 auto; text-align: center; }
}

/* Publication support packages */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .9rem;
}
.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .15rem;
  background: var(--antique-ivory);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.6rem 1rem 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.pkg input { position: absolute; opacity: 0; pointer-events: none; }
.pkg:hover { border-color: var(--faded-gold); transform: translateY(-3px); }
.pkg--featured { border-color: rgba(191, 167, 111, .7); background: var(--card-ivory); }
.pkg.is-picked {
  border-color: var(--deep-chestnut);
  box-shadow: 0 0 0 2px var(--deep-chestnut), var(--shadow-soft);
}
.pkg__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--faded-gold);
  color: var(--charcoal-slate);
  padding: .28rem .7rem;
  border-radius: 100px;
  white-space: nowrap;
}
.pkg__tier {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--deep-chestnut);
  font-variant-numeric: lining-nums;
}
.pkg__kind {
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-on-light);
}
.pkg__name { font-family: var(--font-ui); font-size: .9rem; font-weight: 700; color: var(--charcoal-slate); margin-top: .35rem; }
.pkg__special { font-family: var(--font-ui); font-size: 1.1rem; font-weight: 700; color: var(--charcoal-slate); margin-top: .5rem; }
.pkg__regular { font-size: .74rem; color: var(--olive-on-light); text-decoration: line-through; }
.pkg__pick {
  margin-top: .8rem;
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  border: 1px solid var(--deep-chestnut);
  border-radius: var(--radius);
  padding: .3rem .8rem;
}
.pkg.is-picked .pkg__pick { background: var(--deep-chestnut); color: var(--antique-ivory); }
.pkg-clear {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: .76rem;
  font-weight: 600;
  color: var(--deep-chestnut);
  text-decoration: underline;
  cursor: pointer;
}

/* Add-ons */
.addon-list { list-style: none; margin: 0; padding: 0; }
.addon-list li + li { border-top: 1px solid var(--border-sand); }
.addon {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .2rem;
  cursor: pointer;
}
.addon input { width: 18px; height: 18px; accent-color: var(--deep-chestnut); flex-shrink: 0; }
.addon__label { flex-grow: 1; font-size: .9rem; color: var(--body-brown); }
.addon__price { font-family: var(--font-ui); font-size: .88rem; font-weight: 700; color: var(--charcoal-slate); white-space: nowrap; }

/* Order summary */
.reg-summary { position: sticky; top: 108px; }
.summary-card {
  background: var(--charcoal-slate);
  border: 1px solid rgba(191, 167, 111, .3);
  border-radius: 10px;
  padding: 1.6rem 1.4rem;
  color: var(--ivory-muted);
}
.summary-card h3 { color: var(--antique-ivory); font-size: 1.3rem; }
.summary-card .eyebrow { color: var(--gold-on-glass); }
.summary-list { margin: 0 0 1.1rem; padding: 0; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(191, 167, 111, .2);
}
.summary-row dt {
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 700;
  color: var(--antique-ivory);
  margin: 0;
}
.summary-row dd { margin: 0; text-align: right; flex-shrink: 0; }
.summary-row dd b {
  font-family: var(--font-ui);
  font-size: .95rem;
  color: var(--faded-gold);
  display: block;
}
.summary-note {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  color: var(--ivory-dim);
  margin-top: .2rem;
  line-height: 1.5;
}
.summary-row dd .summary-note { max-width: 150px; }

.premium-toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.premium-toggle input { width: 16px; height: 16px; accent-color: var(--faded-gold); flex-shrink: 0; }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .9rem 0 1.1rem;
  border-top: 2px solid var(--faded-gold);
}
.summary-total span {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--antique-ivory);
}
.summary-total b {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--faded-gold);
  font-variant-numeric: lining-nums;
}
.summary-total__cur { font-size: .8rem !important; letter-spacing: .08em; color: var(--ivory-dim) !important; }
.summary-checkout { width: 100%; }
.summary-card .fee-footnote { color: var(--ivory-dim); }
.summary-card .fee-footnote a { color: var(--gold-on-glass); }

@media (max-width: 1099px) { .reg-summary { position: static; } }

/* --------------------------------------------------------------------------
   29m. Sessions & Tracks — track cards and the SDG legend
   -------------------------------------------------------------------------- */
.tracks-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.35rem;
}
.track-card {
  display: flex;
  flex-direction: column;
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.track-card:hover {
  border-color: var(--hairline-hover);
  box-shadow: 0 14px 34px rgba(44, 46, 48, .10);
  transform: translateY(-4px);
}

.track-card__media { position: relative; background: var(--oxford-brown); }
.track-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  object-fit: cover;
  transition: transform .6s ease;
}
.track-card:hover .track-card__media img { transform: scale(1.04); }
.track-card__num {
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--antique-ivory);
  background: var(--deep-chestnut);
  padding: .5rem .8rem;
  border-radius: 0 var(--radius) 0 0;
  font-variant-numeric: lining-nums;
}

.track-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.35rem 1.35rem 1.2rem;
}
.track-card__body h3 {
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--charcoal-slate);
  margin-bottom: 1rem;
}
.track-card__sdg-label {
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin-bottom: .5rem;
}

/* SDG icons are the official coloured tiles — shown as-is, never recoloured.
   Each sits on a numbered tile in that goal's official colour, so a missing
   icon file degrades to a correct, readable badge instead of a broken image.
   (assets/img/ ships sdg-1…sdg-16; SDG 17 is referenced but has no file yet.) */
.sdg-icons {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sdg-tile {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--sdg, var(--charcoal-slate));
  flex-shrink: 0;
}
.sdg-tile__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 800;
  /* Ink is chosen per goal in PHP — several SDG colours are too light for white */
  color: var(--sdg-ink, #fff);
  line-height: 1;
}
/* When the real icon loaded, the number underneath is redundant. Removing it
   keeps it out of the accessibility tree and out of contrast audits. */
.sdg-tile:has(img) .sdg-tile__num { display: none; }
.sdg-tile img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sdg-tile--lg { width: 44px; height: 44px; }

.track-card__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
}

/* Legend on the dark band */
.sdg-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: .9rem;
}
.sdg-legend li {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .22);
  border-radius: var(--radius-lg);
  padding: .8rem .9rem;
  transition: all var(--transition);
}
.sdg-legend li:hover { border-color: var(--faded-gold); background: rgba(237, 227, 220, .08); }
.sdg-legend .sdg-tile { flex-shrink: 0; }
.sdg-legend span { font-size: .84rem; line-height: 1.45; color: var(--ivory-muted); }
.sdg-legend b {
  display: block;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faded-gold);
  margin-bottom: .12rem;
}

/* --------------------------------------------------------------------------
   29n. Agenda — facts strip, day tabs, session cards, speaker card
   -------------------------------------------------------------------------- */
.agenda-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}
.agenda-facts li {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  padding: .95rem 1.1rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.agenda-facts__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .2);
  color: var(--gold-on-light);
}
.agenda-facts span b {
  display: block;
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin-bottom: .12rem;
}
.agenda-facts span { font-size: .88rem; color: var(--charcoal-slate); line-height: 1.4; }

/* Day switcher ------------------------------------------------------------- */
.agd__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2.25rem;
}
.agd-tab {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .95rem;
  background: var(--antique-ivory);
  border: 1px solid var(--border-sand);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: background .22s, border-color .22s, box-shadow .22s;
}
.agd-tab:hover { border-color: var(--hairline-hover); box-shadow: 0 6px 18px rgba(44, 46, 48, .08); }
.agd-tab__badge {
  flex: 0 0 auto;
  padding: .5rem .7rem;
  border-radius: var(--radius);
  background: var(--charcoal-slate);
  color: var(--antique-ivory);
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.agd-tab__when { display: block; line-height: 1.25; min-width: 0; }
.agd-tab__when b {
  display: block;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--charcoal-slate);
}
.agd-tab__when i {
  display: block;
  font-style: normal;
  font-size: .74rem;
  color: var(--olive-on-light);
}
.agd-tab.is-active {
  background: var(--deep-chestnut);
  border-color: var(--deep-chestnut);
  box-shadow: 0 8px 22px rgba(139, 44, 31, .22);
}
.agd-tab.is-active .agd-tab__badge  { background: var(--chestnut-hover); color: var(--antique-ivory); }
.agd-tab.is-active .agd-tab__when b { color: var(--antique-ivory); }
.agd-tab.is-active .agd-tab__when i { color: rgba(255, 255, 255, .84); }
.agd-tab:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 2px; }

/* Session cards ------------------------------------------------------------ */
.agd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.agd-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-width: 0;
  padding: 1.15rem 1.25rem;
  background: var(--card-ivory-3);
  border: 1px dashed var(--border-sand);
  border-radius: var(--radius-lg);
  transition: border-color .22s, box-shadow .22s;
}
.agd-row:hover { border-color: var(--hairline-hover); box-shadow: 0 8px 22px rgba(44, 46, 48, .07); }

.agd-row__when { min-width: 0; padding-right: 1.1rem; }
.agd-row__time {
  display: inline-block;
  padding: .42rem .75rem;
  border-radius: var(--radius);
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.agd-row__dur {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--olive-on-light);
}
.agd-row__dur svg { flex: 0 0 auto; }

/* The accent rule is the main column's left border, so it always runs the
   full height of whichever column is taller. */
.agd-row__main {
  min-width: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--deep-chestnut);
  /* Cancel then re-add the card padding so the rule runs the full card height
     rather than only the height of the content box. */
  margin-block: -1.15rem;
  padding-block: 1.15rem;
}

.agd-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  margin-bottom: .6rem;
  border-radius: 999px;
  background: var(--oxford-brown);
  color: var(--antique-ivory);
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .09em;
}
.agd-chip svg { flex: 0 0 auto; }

.agd-row__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--charcoal-slate);
  line-height: 1.3;
}
.agd-row__badge {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest-moss);
  border: 1px dashed var(--forest-moss);
  border-radius: 999px;
  padding: .22rem .55rem;
  white-space: nowrap;
}
.agd-row__panel {
  font-style: italic;
  font-size: .89rem;
  color: var(--gold-on-light);
  margin: 0 0 .45rem;
}
.agd-row__text {
  font-size: .89rem;
  line-height: 1.7;
  color: var(--body-brown);
  margin: 0;
}
.agd-row__empty {
  font-style: italic;
  font-size: .86rem;
  color: var(--olive-on-light);
  margin: 0 0 .55rem;
}
.agd-row__apply {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 44, 31, .35);
  padding-bottom: .12rem;
}
.agd-row__apply:hover { color: var(--chestnut-hover); border-bottom-color: var(--chestnut-hover); }
.agd-row__label {
  margin: 1.1rem 0 .55rem;
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--olive-on-light);
}

/* Row states --------------------------------------------------------------- */
.agd-row--break {
  background: rgba(191, 167, 111, .11);
  border-style: solid;
  border-color: var(--hairline);
}
.agd-row--break .agd-row__time { background: var(--muted-olive); }
.agd-row--break .agd-row__main { border-left-color: var(--muted-olive); }
.agd-row--break .agd-chip      { background: var(--muted-olive); }
.agd-row--break .agd-row__title { font-size: .98rem; color: var(--oxford-brown); }

.agd-row--feature {
  background: linear-gradient(135deg, rgba(139, 44, 31, .07), rgba(191, 167, 111, .10));
  border-style: solid;
  border-color: rgba(139, 44, 31, .28);
}
.agd-row--feature .agd-row__title { font-size: 1.18rem; }

.agd-row--slot { background: var(--antique-ivory); }
.agd-row--slot .agd-row__time { background: var(--forest-moss); }
.agd-row--slot .agd-row__main { border-left-color: var(--forest-moss); }
.agd-row--slot .agd-chip      { background: var(--forest-moss); }

/* Speaker card ------------------------------------------------------------- */
.speaker-card {
  display: flex;
  gap: .95rem;
  padding: 1rem 1.15rem;
  background: var(--charcoal-slate);
  border-radius: var(--radius-lg);
}
.speaker-card__avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oxford-brown);
  color: var(--faded-gold);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(191, 167, 111, .45);
}
.speaker-card__body { min-width: 0; }
.speaker-card__role {
  display: block;
  font-family: var(--font-display);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  margin-bottom: .18rem;
}
.speaker-card h5 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--antique-ivory);
}
.speaker-card__org {
  display: block;
  font-size: .78rem;
  color: var(--ivory-muted);
  margin-bottom: .45rem;
}
.speaker-card__session {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ivory-muted);
  margin: 0 0 .5rem;
}
.speaker-card__bio summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
}
.speaker-card__bio summary::-webkit-details-marker { display: none; }
.speaker-card__bio summary::before { content: "+ "; }
.speaker-card__bio[open] summary::before { content: "− "; }
.speaker-card__bio summary:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 2px; }
.speaker-card__bio p {
  margin: .5rem 0 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ivory-muted);
}

@media (max-width: 760px) {
  .agd-row { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.05rem; }
  .agd-row__when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    padding-right: 0;
    padding-bottom: .85rem;
  }
  .agd-row__dur { margin-top: 0; }
  .agd-row__main {
    padding-left: 0;
    padding-top: .9rem;
    padding-bottom: 0;
    margin-block: 0;
    border-left: 0;
    border-top: 3px solid var(--deep-chestnut);
  }
  .agd-row--break .agd-row__main { border-top-color: var(--muted-olive); }
  .agd-row--slot  .agd-row__main { border-top-color: var(--forest-moss); }
  .agd-tab { width: 100%; }
}


/* --------------------------------------------------------------------------
   29h. Plagiarism threshold band
   -------------------------------------------------------------------------- */
.threshold {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.1rem;
}
.threshold__cell {
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--deep-chestnut);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}
.threshold__cell--good { border-top-color: var(--forest-moss); }
.threshold__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--charcoal-slate);
  font-variant-numeric: lining-nums;
}
.threshold__label {
  display: block;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin: .55rem 0 .8rem;
}
.threshold__cell p {
  font-size: .87rem;
  color: var(--body-brown);
  margin: 0;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   29f. FAQ accordion — PDF §18
   -------------------------------------------------------------------------- */
.accordion-wc { display: grid; gap: .75rem; }

.accordion-wc__item {
  background: var(--card-ivory-4);
  border: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.accordion-wc__item.is-open {
  border-left-color: var(--deep-chestnut);
  box-shadow: var(--shadow-soft);
}
.accordion-wc__heading { margin: 0; font-family: var(--font-ui); }

.accordion-wc__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.15rem 1.35rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--charcoal-slate);
  transition: color var(--transition);
}
.accordion-wc__trigger:hover { color: var(--deep-chestnut); }

.accordion-wc__q {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--deep-chestnut);
  font-variant-numeric: lining-nums;
  flex-shrink: 0;
  padding-top: .1rem;
}
.accordion-wc__label { flex-grow: 1; }

.accordion-wc__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: .28rem;
}
.accordion-wc__icon::before,
.accordion-wc__icon::after {
  content: "";
  position: absolute;
  background: var(--deep-chestnut);
  transition: transform var(--transition), opacity var(--transition);
}
.accordion-wc__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.accordion-wc__icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.accordion-wc__item.is-open .accordion-wc__icon::after { transform: rotate(90deg); opacity: 0; }

.accordion-wc__body {
  padding: 0 1.35rem 1.35rem 3.05rem;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--body-brown);
}
.accordion-wc__body p:last-child { margin-bottom: 0; }
.accordion-wc__body strong { color: var(--charcoal-slate); }

.faq-criteria { list-style: none; margin: 0; padding: 0; }
.faq-criteria li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .5rem;
}
.faq-criteria li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-on-light);
}

@media (max-width: 575px) {
  .accordion-wc__trigger { font-size: .93rem; padding: 1rem 1.1rem; gap: .6rem; }
  .accordion-wc__body { padding: 0 1.1rem 1.15rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   30. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   31. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside { max-width: 560px; }
  .welcome__grid { grid-template-columns: 1fr; }
  .panel-feature { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

@media (max-width: 991px) {
  .nav-toggle { display: block; }
  .nav-actions .btn-wc { display: none; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(370px, 88vw);
    background: var(--charcoal-slate);
    border-left: 1px solid rgba(191, 167, 111, .2);
    padding: 5.5rem 1.25rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 1035;
  }
  .site-nav.is-open { transform: translateX(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid rgba(191, 167, 111, .14); }
  .nav-link { justify-content: space-between; padding: .95rem .5rem; font-size: .9rem; width: 100%; }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: rgba(0, 0, 0, .22);
    border-radius: var(--radius);
    display: none;
    margin-bottom: .6rem;
  }
  .nav-item.is-open > .nav-dropdown { display: block; }

  .nav-mobile-cta { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.5rem; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 21, 22, .6);
    z-index: 1032;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

@media (min-width: 992px) {
  .nav-mobile-cta { display: none; }
  .nav-backdrop { display: none; }
}

/* Desktop navbar sizing.
   Measured: brand 277 + menus 622 + actions 330 + gaps 48 = 1277px natural,
   against a container that caps at 1200px inner width. The row therefore
   overflowed at every desktop size and pushed the CTAs off-screen. These two
   tiers bring it inside the container at each width. */
@media (min-width: 992px) {
  .navbar-wc { gap: 1rem; }
  .brand { min-width: 0; }
  .brand__mark { height: 42px; width: auto; }
  /* The wordmark is a wide lockup — 235x61, nearly 4:1 — so a flat 58px made
     it 223px across and the header overflowed between about 1190 and 1270px,
     where the nav is already at full width but the container is not yet wide
     enough to carry both. Scaling with the viewport closes that gap rather
     than pinching at one more breakpoint. */
  .brand__full { height: clamp(40px, 3.4vw, 58px); width: auto; }
  .brand__name { font-size: 1.15rem; }
  .brand__sub { font-size: .58rem; letter-spacing: .13em; }
  .nav-link { padding: .7rem .58rem; font-size: 15px; }
  .nav-actions { gap: .45rem; }
  .nav-actions .btn-wc--sm { padding: .62rem 1.05rem; font-size: .71rem; }
}

/* Below 1200 the secondary CTA has to go, or "Register Now" is pushed out.
   (The compact logo lockup freed ~140px, so both CTAs now fit from 1200 up —
   this threshold was 1280 while the brand was a wide text lockup.) */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-wc { gap: .8rem; }
  .nav-actions .btn-wc--outline { display: none; }
  .nav-link { padding: .7rem .46rem; font-size: 15px; }
  .brand__sub { display: none; }
  .brand__name { font-size: 1.08rem; }
}

/* The tightest desktop band, right where the drawer hands over to the full
   menu row: squeeze the last ~45px so nothing spills. */
@media (min-width: 992px) and (max-width: 1049px) {
  .navbar-wc { gap: .55rem; }
  .brand__mark { height: 36px; width: auto; }
  .brand__full { height: 46px; width: auto; }
  .brand__name { font-size: 1rem; }
  .nav-link { padding: .7rem .32rem; font-size: .725rem; }
  .nav-actions .btn-wc--sm { padding: .58rem .85rem; font-size: .68rem; }
}

@media (max-width: 860px) {
  .beyond__domains { display: none; }
  .beyond__domains--stack { display: flex; }
  .beyond__lines { display: none; }
  .beyond__stage { min-height: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Very narrow phones: the fact list's fixed 92px key column plus long words
   ("Multidisciplinary") gives .welcome__aside a 288px minimum, which was the
   last source of horizontal scroll at 320px. Stack key over value instead. */
@media (max-width: 400px) {
  .welcome__aside { padding: 1.35rem 1.15rem; }
  .welcome__aside::before { inset: 6px; }
  .fact-list li { flex-direction: column; gap: .2rem; }
  .fact-list__key { min-width: 0; padding-top: 0; }
  .fact-list__val { overflow-wrap: anywhere; }
}

/* Narrow phones (360px and below): the brand lockup is wide enough to push the
   menu button off-screen, because .brand does not shrink. Let it shrink and
   truncate so the toggle always stays reachable. */
@media (max-width: 480px) {
  .navbar-wc { gap: .75rem; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand__text { min-width: 0; }
  .brand__mark { height: 40px; width: auto; }
  .brand__full { height: 44px; width: auto; }
  .brand__name { font-size: 1.08rem; }
  .brand__sub { font-size: .56rem; letter-spacing: .12em; }
  .brand__name,
  .brand__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  :root { --section-y: 3rem; }
  .topbar__inner { justify-content: center; text-align: center; }
  .hero__meta { gap: .6rem 1.25rem; font-size: .86rem; }
  .hero__cta .btn-wc { width: 100%; }
  .countdown { grid-template-columns: repeat(4, 1fr); gap: .3rem; }
  .hero__aside { --aside-pad-y: 1.5rem; --aside-pad-x: 1.15rem; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cta-band__actions .btn-wc { width: 100%; }
}

/* --------------------------------------------------------------------------
   32. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* No drift, no crossfade — the slideshow becomes a manual, dot-driven gallery */
  .hero__slide.is-active img { transform: none; }
  .hero__slide { transition: none; }
}

@media print {
  .topbar, .site-header, .floaties, .hero__decor, .wc-modal { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
}


/* Markers on dark grounds keep the display gold — the accessible tone is only
   needed against the light surfaces. */
.section--slate .tick-list li::before,
.section--oxford .tick-list li::before,
.section--moss .tick-list li::before,
.deadline-card .tick-list li::before {
  border-right-color: var(--faded-gold);
  border-bottom-color: var(--faded-gold);
}
.deadline-card .link-list a::after {
  border-top-color: var(--faded-gold);
  border-right-color: var(--faded-gold);
}

/* --------------------------------------------------------------------------
   29o. Agenda layout variants (DESIGN REVIEW ONLY)
   ------------------------------------------------------------------------
   Three alternative presentations of the same $AGENDA data, namespaced
   .agv1- / .agv2- / .agv3- so they cannot touch the live agenda styles in
   §29n. Delete this whole section — plus agenda-v1/v2/v3.php and
   includes/variant-bar.php — once a layout is chosen.
   -------------------------------------------------------------------------- */

/* Variant switcher bar ------------------------------------------------------ */
.vbar {
  background: var(--charcoal-slate);
  border-bottom: 1px solid var(--hairline);
}
.vbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: .85rem;
}
.vbar__label {
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
}
.vbar__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.vbar__link {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .42rem .85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  line-height: 1.25;
  transition: border-color .2s, background .2s;
}
.vbar__link b    { font-size: .78rem; color: var(--antique-ivory); font-weight: 600; }
.vbar__link span { font-size: .62rem; color: var(--ivory-muted); }
.vbar__link:hover { border-color: var(--hairline-hover); background: rgba(191, 167, 111, .08); }
.vbar__link.is-current {
  background: var(--faded-gold);
  border-color: var(--faded-gold);
}
.vbar__link.is-current b    { color: var(--charcoal-slate); }
.vbar__link.is-current span { color: var(--charcoal-slate); }   /* .85 alpha over gold = 4.42:1 */

/* ==========================================================================
   VARIANT 1 — Session cards
   ========================================================================== */
.agv1__switch {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding: .35rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  width: fit-content;
  margin-inline: auto;
  max-width: 100%;
  flex-wrap: wrap;
}
.agv1__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  padding: .6rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  line-height: 1.25;
  transition: background .22s, color .22s;
}
.agv1__pill b    { font-size: .95rem; font-weight: 600; color: var(--oxford-brown); }
.agv1__pill span { font-size: .68rem; color: var(--olive-on-light); }
.agv1__pill:hover { background: rgba(191, 167, 111, .14); }
.agv1__pill.is-active { background: var(--charcoal-slate); }
.agv1__pill.is-active b    { color: var(--antique-ivory); }
.agv1__pill.is-active span { color: var(--gold-on-glass); }

.agv1__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;   /* sparse open-slot cards should not stretch to the tallest in the row */
}
@media (max-width: 1100px) { .agv1__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .agv1__grid { grid-template-columns: minmax(0, 1fr); } }

.agv1-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem 1.35rem 1.45rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.agv1-card:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 46, 48, .09);
}
.agv1-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .85rem;
}
.agv1-card__time {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--charcoal-slate);
  background: rgba(191, 167, 111, .24);
  border-radius: 999px;
  padding: .3rem .7rem;
  white-space: nowrap;
}
.agv1-card__tag {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest-moss);
  border: 1px dashed var(--forest-moss);
  border-radius: 999px;
  padding: .24rem .55rem;
  white-space: nowrap;
}
.agv1-card__tag--ftr {
  color: var(--deep-chestnut);
  border-style: solid;
  border-color: rgba(139, 44, 31, .45);
}
.agv1-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--oxford-brown);
  margin: 0 0 .45rem;
  line-height: 1.35;
}
.agv1-card__panel {
  font-style: italic;
  font-size: .84rem;
  color: var(--gold-on-light);
  margin: 0 0 .5rem;
}
.agv1-card__text {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--body-brown);
  margin: 0;
}
.agv1-card__empty {
  font-size: .82rem;
  color: var(--olive-on-light);
  font-style: italic;
  margin: 0 0 .6rem;
}
.agv1-card__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 44, 31, .35);
  padding-bottom: .12rem;
}
.agv1-card__cta:hover { color: var(--chestnut-hover); border-bottom-color: var(--chestnut-hover); }

.agv1-card--slot {
  background: transparent;
  border-style: dashed;
  border-color: rgba(59, 63, 47, .35);
}
.agv1-card--slot:hover { border-color: var(--forest-moss); }

/* Featured sessions and breaks break the grid: 1 / -1 rather than "span N",
   which would create an implicit column at 1-up and push the page sideways. */
.agv1-card--feature {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(139, 44, 31, .07), rgba(191, 167, 111, .10));
  border-color: rgba(139, 44, 31, .3);
}
.agv1-card--feature .agv1-card__title { font-size: 1.25rem; }

.agv1-card--break {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: .35rem 0;
  background: none;
  border: 0;
}
.agv1-card--break:hover { transform: none; box-shadow: none; }
.agv1-card__rule { flex: 1; height: 1px; background: var(--hairline); }
.agv1-card__brk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--olive-on-light);
  font-size: .78rem;
}
.agv1-card__brk b { font-weight: 600; color: var(--oxford-brown); }
.agv1-card__brk i { font-style: normal; font-size: .72rem; }

.agv1-speaker {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--hairline);
}
.agv1-speaker__avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal-slate);
  color: var(--faded-gold);
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(191, 167, 111, .4);
}
.agv1-speaker__role {
  display: block;
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  font-weight: 700;
}
.agv1-speaker b { display: block; font-size: .9rem; color: var(--oxford-brown); }
.agv1-speaker__org { display: block; font-size: .72rem; color: var(--olive-on-light); }

/* ==========================================================================
   VARIANT 2 — Two-day board (both days on screen, no tabs)
   ========================================================================== */
.agv2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 900px) { .agv2 { grid-template-columns: minmax(0, 1fr); } }

.agv2__day {
  min-width: 0;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.agv2__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  background: var(--charcoal-slate);
}
.agv2__head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--antique-ivory);
  font-weight: 600;
}
.agv2__head time {
  display: block;
  font-size: .74rem;
  color: var(--gold-on-glass);
  letter-spacing: .04em;
}
.agv2__count {
  text-align: right;
  font-size: .68rem;
  color: var(--ivory-muted);
  line-height: 1.4;
  white-space: nowrap;
}
.agv2__count b { display: block; font-size: 1.1rem; color: var(--antique-ivory); font-weight: 600; }
.agv2__count i { font-style: normal; color: var(--gold-on-glass); }

.agv2__list { list-style: none; margin: 0; padding: 0; }
.agv2-item {
  position: relative;
  padding: .95rem 1.4rem;
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.agv2__list > .agv2-item:first-child { border-top: 0; }
.agv2-item__time {
  display: block;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  margin-bottom: .2rem;
}
.agv2-item__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 .3rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--oxford-brown);
  line-height: 1.35;
}
.agv2-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest-moss);
}
.agv2-item__open {
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest-moss);
}
.agv2-item__panel {
  font-style: italic;
  font-size: .8rem;
  color: var(--gold-on-light);
  margin: 0 0 .35rem;
}
.agv2-item__text {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--body-brown);
  margin: 0;
}
.agv2-item__speaker {
  margin: .55rem 0 0;
  padding: .55rem .75rem;
  background: rgba(191, 167, 111, .13);
  border-left: 2px solid var(--faded-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.agv2-item__speaker b    { display: block; font-size: .85rem; color: var(--oxford-brown); }
.agv2-item__speaker span { font-size: .7rem; color: var(--olive-on-light); }
.agv2-item__cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .45rem;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
}
.agv2-item__cta:hover { color: var(--chestnut-hover); text-decoration: underline; }

.agv2-item--break {
  background: rgba(191, 167, 111, .10);
  padding-block: .6rem;
}
.agv2-item--break .agv2-item__title { font-size: .86rem; font-weight: 500; color: var(--olive-on-light); }
.agv2-item--break .agv2-item__text  { display: none; }
.agv2-item--feature { background: rgba(139, 44, 31, .06); }
.agv2-item--feature::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--deep-chestnut);
}
.agv2-item--slot .agv2-item__title { color: var(--forest-moss); }

/* ==========================================================================
   VARIANT 3 — Programme board (dark, collapsed rows, hour markers)
   ========================================================================== */
.agv3-head a {
  color: var(--gold-on-glass);   /* --deep-chestnut on charcoal is 1.61:1 */
  text-decoration-color: var(--hairline-hover);
}
.agv3-head a:hover { color: var(--antique-ivory); }

.agv3__switch {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.agv3__tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .7rem 1.9rem 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ivory-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .22s, border-color .22s;
}
.agv3__tab span {
  display: block;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ivory-muted);   /* --dusty-taupe on charcoal is only 3.34:1 */
  margin-top: .12rem;
}
.agv3__tab:hover { color: var(--antique-ivory); }
.agv3__tab.is-active { color: var(--antique-ivory); border-bottom-color: var(--faded-gold); }
.agv3__tab.is-active span { color: var(--gold-on-glass); }

.agv3__board {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(237, 227, 220, .03);
}

.agv3__hour {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 1.2rem;
  background: rgba(191, 167, 111, .09);
  border-block: 1px solid var(--hairline);
}
.agv3__hour span {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold-on-glass);
}
.agv3__hour::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.agv3__board > .agv3__hour:first-child { border-top: 0; }

.agv3-row { border-bottom: 1px solid rgba(191, 167, 111, .16); }
.agv3__board > .agv3-row:last-child { border-bottom: 0; }

.agv3-row__head {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.2rem;
  cursor: pointer;
  list-style: none;
  transition: background .18s;
}
.agv3-row__head::-webkit-details-marker { display: none; }
.agv3-row__head:hover { background: rgba(191, 167, 111, .08); }
.agv3-row--static .agv3-row__head { cursor: default; }
.agv3-row--static .agv3-row__head:hover { background: none; }
.agv3-row__head:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: -2px; }

.agv3-row__time {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold-on-glass);
  white-space: nowrap;
}
.agv3-row__title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  color: var(--antique-ivory);
  min-width: 0;
}
.agv3-row__chip {
  font-size: .55rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .24rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.agv3-row__chip--open { color: #A9C08A; border: 1px dashed rgba(169, 192, 138, .6); }
.agv3-row__chip--brk  { color: var(--ivory-muted); border: 1px solid rgba(207, 197, 188, .35); }
.agv3-row__chip--ftr  { color: var(--charcoal-slate); background: var(--faded-gold); }
.agv3-row__chip--spk  { color: var(--gold-on-glass); border: 1px solid var(--hairline-hover); }
.agv3-row__caret {
  display: grid;
  place-items: center;
  color: var(--dusty-taupe);
  transition: transform .25s;
}
.agv3-row[open] > .agv3-row__head .agv3-row__caret { transform: rotate(180deg); }
.agv3-row[open] > .agv3-row__head { background: rgba(191, 167, 111, .10); }

.agv3-row__body {
  padding: 0 1.2rem 1.15rem calc(172px + 2.2rem);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ivory-muted);
}
.agv3-row__body p { margin: 0 0 .6rem; color: var(--ivory-muted); }
.agv3-row__body p:last-child { margin-bottom: 0; }
.agv3-row__panel { font-style: italic; color: var(--gold-on-glass) !important; }
.agv3-row__empty { font-style: italic; color: var(--ivory-muted) !important; }
.agv3-row__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-hover);
  padding-bottom: .1rem;
}
.agv3-row__cta:hover { color: var(--antique-ivory); border-bottom-color: var(--antique-ivory); }

.agv3-row--break .agv3-row__title { color: var(--ivory-muted); font-weight: 400; }
.agv3-row--feature { background: rgba(191, 167, 111, .07); }

.agv3-speaker {
  display: flex;
  gap: .9rem;
  margin-top: .85rem;
  padding: .95rem 1.1rem;
  background: rgba(237, 227, 220, .05);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.agv3-speaker__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal-slate);
  color: var(--faded-gold);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(191, 167, 111, .45);
}
.agv3-speaker__role {
  display: block;
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-on-glass);
}
.agv3-speaker b { display: block; font-size: 1rem; color: var(--antique-ivory); }
.agv3-speaker__org { display: block; font-size: .76rem; color: var(--ivory-muted); margin-bottom: .5rem; }

.agv3__note {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.75rem 0 0;
  padding: .9rem 1.15rem;
  background: rgba(191, 167, 111, .09);
  border-left: 3px solid var(--faded-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .82rem;
  color: var(--ivory-muted);
}
.agv3__note svg { flex: 0 0 auto; color: var(--gold-on-glass); margin-top: .12rem; }
.agv3__note strong { color: var(--antique-ivory); }

@media (max-width: 760px) {
  .agv3-row__head {
    grid-template-columns: minmax(0, 1fr) auto 22px;
    grid-template-areas:
      "time  status caret"
      "title title  title";
    gap: .35rem .7rem;
  }
  .agv3-row__time   { grid-area: time; }
  .agv3-row__status { grid-area: status; }
  .agv3-row__caret  { grid-area: caret; }
  .agv3-row__title  { grid-area: title; }
  .agv3-row__body   { padding-left: 1.2rem; }
}

/* --------------------------------------------------------------------------
   29p. Committee — roster, empty state, eligibility, application form
   -------------------------------------------------------------------------- */

/* Roster (renders only once $COMMITTEE is populated) ------------------------ */
.cmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.25rem;
}
.cmt-card {
  min-width: 0;
  text-align: center;
  padding: 1.6rem 1.25rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.cmt-card:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 46, 48, .09);
}
.cmt-card__avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto .85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal-slate);
  color: var(--faded-gold);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(191, 167, 111, .38);
}
.cmt-card h3 { font-size: 1.05rem; margin: 0 0 .2rem; color: var(--oxford-brown); }
.cmt-card__role {
  display: block;
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  margin-bottom: .4rem;
}
.cmt-card p { font-size: .82rem; color: var(--olive-on-light); margin: 0; line-height: 1.6; }

/* "Will update soon" -------------------------------------------------------- */
.cmt-empty {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  padding: 2.6rem 1.75rem;
  background: var(--card-ivory-3);
  border: 1px dashed var(--border-sand);
  border-radius: var(--radius-lg);
}
.cmt-empty__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .2);
  color: var(--gold-on-light);
}
.cmt-empty h3 { font-size: 1.32rem; margin: 0 0 .5rem; color: var(--oxford-brown); }
.cmt-empty p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--body-brown);
  margin: 0 auto 1.5rem;
  max-width: 46ch;
}

/* Eligibility --------------------------------------------------------------- */
.cmt-intro {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.cmt-intro h3 { font-size: 1.5rem; margin: 0 0 .7rem; color: var(--oxford-brown); }
.cmt-intro .lead { margin: 0; }

.cmt-elig {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 3.25rem;
}
@media (max-width: 900px) { .cmt-elig { grid-template-columns: minmax(0, 1fr); } }

.cmt-elig__panel {
  min-width: 0;
  padding: 1.75rem 1.85rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.cmt-elig__panel h3 { font-size: 1.24rem; margin: 0 0 .5rem; color: var(--oxford-brown); }
.cmt-elig__panel .tick-list { margin-top: 1.1rem; }

.cmt-elig__aside {
  min-width: 0;
  padding: 1.75rem 1.6rem;
  background: var(--charcoal-slate);
  border-radius: var(--radius-lg);
}
.cmt-elig__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .18);
  color: var(--gold-on-glass);
  margin-bottom: 1rem;
}
.cmt-elig__aside p {
  font-size: .89rem;
  line-height: 1.75;
  color: var(--ivory-muted);
  margin: 0 0 1.35rem;
}

.cmt-subhead {
  text-align: center;
  font-size: 1.5rem;
  color: var(--oxford-brown);
  margin: 0 0 1.75rem;
}

/* Application form ---------------------------------------------------------- */
.cmt-form {
  max-width: 880px;
  margin-inline: auto;
}
/* Title sits beside the two name fields and needs far less room than they do.
   Declared after the 640px .field-row flatten in the base sheet, so this block
   restates the stack itself rather than relying on that rule. */
.field-row--3 { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) {
  .field-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   29q. Venue — location panel and places-to-see rows
   -------------------------------------------------------------------------- */
.venue-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .venue-hero { grid-template-columns: minmax(0, 1fr); } }

.venue-hero__figure { margin: 0; min-width: 0; align-self: center; }
/* Same ratio lock as the homepage band: the artwork has captions in its
   top-right and bottom-right corners, so cover must have nothing to trim. */
.venue-hero__figure picture,
.venue-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 910 / 600;
  object-fit: cover;
}

.venue-hero__body { min-width: 0; padding: 2rem 2.1rem; }
.venue-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  margin-bottom: .85rem;
  border-radius: 999px;
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.venue-hero__badge svg { flex: 0 0 auto; }
.venue-hero__body h3 {
  font-size: 1.45rem;
  margin: 0 0 1.25rem;
  color: var(--oxford-brown);
  line-height: 1.3;
}

.venue-facts { margin: 0 0 1.6rem; display: grid; gap: .9rem; }
.venue-facts dt {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin-bottom: .2rem;
}
.venue-facts dd {
  margin: 0;
  font-size: .89rem;
  line-height: 1.65;
  color: var(--body-brown);
}
.venue-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Places -------------------------------------------------------------------- */
.places { display: grid; gap: 3.5rem; }

.place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
/* Ordering rather than direction: the media column keeps its internal layout. */
.place--flip .place__media { order: 2; }
@media (max-width: 860px) {
  .place { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .place--flip .place__media { order: 0; }
}

/* The square inset overlaps the lead frame; padding on the wrapper reserves the
   space so the overlap can never spill outside the column. */
.place__media {
  position: relative;
  min-width: 0;
  padding-bottom: 2.75rem;
  padding-inline-end: 2.75rem;
}
.place--flip .place__media { padding-inline: 2.75rem 0; }

.place__shot { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.place__shot img { display: block; width: 100%; height: auto; }

.place__shot--a {
  box-shadow: 0 18px 40px rgba(44, 46, 48, .14);
}
.place__shot--b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  border: 5px solid var(--antique-ivory);
  box-shadow: 0 12px 28px rgba(44, 46, 48, .16);
}
.place--flip .place__shot--b { right: auto; left: 0; }

.place__body { min-width: 0; }
.place__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(139, 44, 31, .16);
  margin-bottom: .35rem;
}
.place__body h3 {
  font-size: 1.6rem;
  margin: 0 0 .35rem;
  color: var(--oxford-brown);
  line-height: 1.25;
}
.place__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  margin-bottom: .9rem;
}
.place__body p {
  font-size: .94rem;
  line-height: 1.8;
  color: var(--body-brown);
  margin: 0;
}

@media (max-width: 560px) {
  /* Too little room for the overlap — stack the two frames instead. */
  .place__media,
  .place--flip .place__media { padding: 0; display: grid; gap: .75rem; }
  .place__shot--b,
  .place--flip .place__shot--b {
    position: static;
    width: 100%;
    border: 0;
  }
  .place__num { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   29r. About us — intro split, stats, features, theme band, objectives, reasons
   -------------------------------------------------------------------------- */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: center;
  margin-bottom: 3rem;
}
@media (max-width: 900px) { .about-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.about-split__body { min-width: 0; }
.about-split__body h2 { margin-bottom: .6rem; }
.about-split__body .lead { margin-bottom: 1rem; }
.about-split__body p { color: var(--body-brown); line-height: 1.8; }

.about-split__figure {
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
}
.about-split__figure img { display: block; width: 100%; height: auto; }
.about-split__figure figcaption,
.about-gallery figcaption {
  padding: .7rem .95rem;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--olive-on-light);
}

.about-meta {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.about-meta li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  color: var(--charcoal-slate);
}
.about-meta svg { flex: 0 0 auto; color: var(--gold-on-light); }

/* Purpose ------------------------------------------------------------------- */
.purpose-panel {
  max-width: 900px;
  margin-inline: auto;
  padding: 2rem 2.25rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.purpose-panel h3 {
  font-size: 1.15rem;
  margin: 0 0 1.1rem;
  color: var(--oxford-brown);
}

/* Key features -------------------------------------------------------------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}
.feat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.6rem 1.5rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.feat-card:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 46, 48, .09);
}
.feat-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .2);
  color: var(--gold-on-light);
  margin-bottom: 1rem;
}
.feat-card h3 {
  font-size: 1.08rem;
  margin: 0 0 .5rem;
  color: var(--oxford-brown);
  line-height: 1.35;
}
.feat-card p {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--body-brown);
  margin: 0;
}
.feat-card__cta {
  margin-top: 1rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 44, 31, .35);
  padding-bottom: .12rem;
}
.feat-card__cta:hover { color: var(--chestnut-hover); border-bottom-color: var(--chestnut-hover); }

/* Theme band ---------------------------------------------------------------- */
.theme-band { max-width: 900px; margin-inline: auto; text-align: center; }
.theme-band__quote {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  color: var(--antique-ivory);
  margin: .3rem 0 0;
}
.theme-band__text { margin-top: 1.75rem; text-align: left; }
.theme-band__text p {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--ivory-muted);
  margin: 0 0 1rem;
}
.theme-band__text p:last-child { margin-bottom: 0; }

/* Objectives ---------------------------------------------------------------- */
.obj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 1.1rem;
}
.obj-item {
  display: flex;
  gap: 1.1rem;
  min-width: 0;
  padding: 1.35rem 1.5rem;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--deep-chestnut);
  border-radius: var(--radius-lg);
}
.obj-item__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(139, 44, 31, .28);
}
.obj-item h3 {
  font-size: 1.02rem;
  margin: 0 0 .35rem;
  color: var(--oxford-brown);
  line-height: 1.35;
}
.obj-item p {
  font-size: .87rem;
  line-height: 1.7;
  color: var(--body-brown);
  margin: 0;
}

/* Reasons to attend --------------------------------------------------------- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 1.1rem;
}
.reason-card {
  display: flex;
  gap: .95rem;
  min-width: 0;
  padding: 1.35rem 1.4rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, box-shadow .22s;
}
.reason-card:hover { border-color: var(--hairline-hover); box-shadow: 0 10px 24px rgba(44, 46, 48, .08); }
.reason-card__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal-slate);
  color: var(--faded-gold);
}
.reason-card h3 {
  font-size: 1rem;
  margin: 0 0 .3rem;
  color: var(--oxford-brown);
  line-height: 1.35;
}
.reason-card p {
  font-size: .86rem;
  line-height: 1.7;
  color: var(--body-brown);
  margin: 0;
}

/* Gallery ------------------------------------------------------------------- */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}
.about-gallery figure {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.about-gallery img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   29u. Photographic CTA band
   ------------------------------------------------------------------------
   A dark-section modifier that puts a photograph behind the band.

   ⚠ CONTRAST: a CSS scrim alone cannot guarantee AA over a photograph — the
   ratio depends on the pixels. So the image is darkened AT BUILD TIME
   (brightness .20, saturation .62, tinted #6B5A45 — see the generator in the
   README) and then measured. The brightest text-sized block in the finished
   file has luminance .0259; under the .35 scrim below the effective ground is
   ~#3D3630, which is DARKER than --oxford-brown. That matters: the site-wide
   contrast audit resolves this section to its --oxford-brown background-color,
   so the audit stays a valid upper bound rather than being fooled by the photo.

   Measured over the brightest block: faded-gold 5.07, ivory-muted 6.99,
   antique-ivory 11.87 — all clear of the 4.5 threshold.

   Swapping the photograph means re-running the generator and re-measuring.
   -------------------------------------------------------------------------- */
.section--photo {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- Dubai skyline (CTA bands) ------------------------------------------- */
.section--photo-dubai {
  background-image:
    linear-gradient(rgba(75, 59, 42, .35), rgba(75, 59, 42, .35)),
    url('../img/venue/dubai-band.jpg');
  background-position: center 38%;
  /* After the image, per the note on .hero — a bare colour declared before a
     background shorthand or image is overwritten by it. */
  background-color: var(--oxford-brown);
}
@supports (background-image: image-set(url('../img/venue/dubai-band.webp') type('image/webp'))) {
  .section--photo-dubai {
    background-image:
      linear-gradient(rgba(75, 59, 42, .35), rgba(75, 59, 42, .35)),
      image-set(url('../img/venue/dubai-band.webp') type('image/webp'),
                url('../img/venue/dubai-band.jpg')  type('image/jpeg'));
  }
}

/* --- Conference theme artwork -------------------------------------------
   Same rule as the Dubai band: the source is a bright blue-sky collage, so it
   is darkened AT BUILD TIME (brightness .22, saturation .5, tinted #3A3A3C)
   and then measured. The brightest text-sized block in the finished file,
   under the .35 scrim below, gives an effective ground of ~#313131 —
   DARKER than --charcoal-slate, so the site-wide contrast audit (which
   resolves this section to its background-color) stays a valid upper bound.

   Measured over that block: faded-gold 5.57, ivory-muted 7.67,
   antique-ivory 13.03 — all clear of the 4.5 threshold.

   Swapping the artwork means re-running the generator and re-measuring. */
.section--photo-theme {
  background-image:
    linear-gradient(rgba(44, 46, 48, .35), rgba(44, 46, 48, .35)),
    url('../img/theme/theme-band.jpg');
  background-position: center;
  background-color: var(--charcoal-slate);
}
@supports (background-image: image-set(url('../img/theme/theme-band.webp') type('image/webp'))) {
  .section--photo-theme {
    background-image:
      linear-gradient(rgba(44, 46, 48, .35), rgba(44, 46, 48, .35)),
      image-set(url('../img/theme/theme-band.webp') type('image/webp'),
                url('../img/theme/theme-band.jpg')  type('image/jpeg'));
  }
}

/* A hairline of gold top and bottom so the band reads as deliberate. */
.section--photo::before,
.section--photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline);
}
.section--photo::before { top: 0; }
.section--photo::after  { bottom: 0; }

@media (min-width: 992px) {
  .section--photo { background-attachment: fixed; }
}
/* A fixed attachment janks on touch and is ignored by iOS Safari anyway. */
@media (prefers-reduced-motion: reduce) {
  .section--photo { background-attachment: scroll; }
}

/* --------------------------------------------------------------------------
   29v. About IFERP + Past speakers
   -------------------------------------------------------------------------- */
/* Intro: photo collage on the left, copy on the right. */
.iferp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) { .iferp-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } }

.iferp-split__body { min-width: 0; }
.iferp-split__body h2 { margin: .35rem 0 .6rem; }
.iferp-split__body p { color: var(--body-brown); line-height: 1.85; margin-bottom: 1.1rem; }
.iferp-split__body p:last-child { margin-bottom: 0; }

.iferp-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  min-width: 0;
  /* Tiles are two different aspect ratios. Without this they stretch to the
     row height while the image inside stays auto, leaving white space under
     the 4:3 frames. */
  align-items: start;
}
.iferp-collage__item {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 26px rgba(44, 46, 48, .10);
}
.iferp-collage__item img { display: block; width: 100%; height: auto; }

/* Drop the right-hand column so the four frames read as a collage rather than
   a plain 2x2 grid. Only above the stacking breakpoint — offsetting a stacked
   column just leaves a gap. */
@media (min-width: 901px) {
  .iferp-collage__item--b,
  .iferp-collage__item--d { margin-top: 2.25rem; }
}

/* Mission & vision ---------------------------------------------------------- */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.5rem;
}
.mv-card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 2rem 1.9rem 1.9rem;
  background: rgba(237, 227, 220, .05);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--faded-gold);
  border-radius: var(--radius-lg);
}
.mv-card--vision { border-top-color: var(--deep-chestnut); }
.mv-card__label {
  display: block;
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  margin-bottom: .8rem;
}
.mv-card--vision .mv-card__label { color: #E8A497; }
.mv-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--antique-ivory);
}
.mv-card::before {
  content: '\201C';
  position: absolute;
  top: .5rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(191, 167, 111, .35);
}

/* External links ------------------------------------------------------------ */
.iferp-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}
.iferp-link {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  padding: 1.15rem 1.25rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.iferp-link:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 46, 48, .09);
}
.iferp-link__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .2);
  color: var(--gold-on-light);
}
.iferp-link__body { min-width: 0; flex: 1; }
.iferp-link__body b {
  display: block;
  font-size: .95rem;
  color: var(--oxford-brown);
  margin-bottom: .1rem;
}
.iferp-link__body i {
  display: block;
  font-style: normal;
  font-size: .78rem;
  color: var(--olive-on-light);
}
.iferp-link__go { flex: 0 0 auto; color: var(--deep-chestnut); transition: transform .22s; }
.iferp-link:hover .iferp-link__go { transform: translateX(4px); }

/* Speaker boards ------------------------------------------------------------ */
.spk-board {
  margin-bottom: 2.5rem;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spk-board:last-of-type { margin-bottom: 2rem; }
.spk-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.35rem 1.6rem;
  border-bottom: 1px solid var(--hairline);
}
.spk-board__head h3 { font-size: 1.3rem; margin: 0 0 .25rem; color: var(--oxford-brown); }
.spk-board__head p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--body-brown);
  max-width: 62ch;
}
/* The boards are posters with the captions set as pixels, so they are shown at
   their natural width and centred rather than stretched to the column. */
.spk-board__figure {
  display: block;
  padding: 1.25rem;
  background: #fff;
  text-align: center;
}
.spk-board__figure img {
  display: inline-block;
  width: 100%;
  max-width: 1100px;
  height: auto;
}

/* --------------------------------------------------------------------------
   29w. Contact us + Other services
   -------------------------------------------------------------------------- */
.ctc-grid {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.1rem;
}
.ctc-card {
  min-width: 0;
  padding: 1.6rem 1.4rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.ctc-card:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 46, 48, .09);
}
.ctc-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .2);
  color: var(--gold-on-light);
  margin-bottom: .9rem;
}
.ctc-card__label {
  display: block;
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin-bottom: .45rem;
}
.ctc-card__line {
  margin: 0 0 .2rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--charcoal-slate);
  overflow-wrap: anywhere;
}
.ctc-card__line a { color: var(--deep-chestnut); font-weight: 600; }
.ctc-card__line a:hover { color: var(--chestnut-hover); }
.ctc-card__note {
  display: block;
  margin-top: .5rem;
  font-size: .73rem;
  font-style: italic;
  color: var(--olive-on-light);
}

.ctc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.ctc-actions .btn-wc { display: inline-flex; align-items: center; gap: .45rem; }

/* The office is in Chennai, the conference is in Dubai — this band exists so
   the two are never confused. */
.ctc-venue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.6rem 1.75rem;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--deep-chestnut);
  border-radius: var(--radius-lg);
}
.ctc-venue > div { flex: 1 1 320px; min-width: 0; }
.ctc-venue__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(139, 44, 31, .12);
  color: var(--deep-chestnut);
}
.ctc-venue p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--body-brown);
}
.ctc-venue strong { color: var(--oxford-brown); }

/* Services ------------------------------------------------------------------ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem 1.5rem 1.6rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.svc-card:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(44, 46, 48, .10);
}
.svc-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--charcoal-slate);
  color: var(--faded-gold);
  margin-bottom: 1rem;
}
.svc-card h3 {
  font-size: 1.14rem;
  margin: 0 0 .5rem;
  color: var(--oxford-brown);
}
.svc-card p {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--body-brown);
  margin: 0 0 1.1rem;
}
.svc-card__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 44, 31, .35);
  padding-bottom: .14rem;
}
.svc-card__cta:hover { color: var(--chestnut-hover); border-bottom-color: var(--chestnut-hover); }
.svc-card__host {
  position: absolute;
  top: 1.5rem;
  right: 1.4rem;
  font-size: .66rem;
  letter-spacing: .03em;
  color: var(--olive-on-light);
}

/* --------------------------------------------------------------------------
   29x. History — the WCMRI series
   -------------------------------------------------------------------------- */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }

.hist-item {
  display: grid;
  grid-template-columns: 92px 200px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 1.6rem 1.75rem 1.6rem 0;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, box-shadow .22s;
}
.hist-item:hover { border-color: var(--hairline-hover); box-shadow: 0 12px 28px rgba(44, 46, 48, .08); }

/* Year rail */
.hist-item__rail {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--hairline);
}
.hist-item__dot {
  position: absolute;
  top: 1.9rem;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--deep-chestnut);
  box-shadow: 0 0 0 3px var(--card-ivory-3);
}
.hist-item__year {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--deep-chestnut);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Cover. The five artworks arrive at different sizes, so the frame is a fixed
   aspect box and the image is centred inside it rather than stretched. */
.hist-item__cover {
  margin: 0;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border-sand);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}
.hist-item__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.4;
  object-fit: contain;
}
.hist-item__cover figcaption {
  padding: .45rem;
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  border-top: 1px solid var(--hairline);
}

.hist-item__body { min-width: 0; }
.hist-item__body h3 {
  font-size: 1.4rem;
  margin: 0 0 .7rem;
  color: var(--oxford-brown);
}

.hist-meta {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .65rem;
}
.hist-meta li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(191, 167, 111, .18);
  font-size: .76rem;
  color: var(--charcoal-slate);
}
.hist-meta svg { flex: 0 0 auto; color: var(--gold-on-light); }

.hist-shots {
  display: grid;
  /* Fixed two columns, not auto-fit: an edition with a single photograph should
     show it at the same size as the two-photo rows, not stretched across. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: 1.1rem;
}
@media (max-width: 620px) {
  .hist-shots { grid-template-columns: minmax(0, 1fr); }
}
.hist-shots figure {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
}
.hist-shots img { display: block; width: 100%; height: auto; }

/* Editions with no photograph that can be tied to them — an explicit,
   visible gap rather than a picture from the wrong year. */
.hist-nophoto {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 1.1rem;
  padding: .85rem 1rem;
  border: 1px dashed var(--border-sand);
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--olive-on-light);
}
.hist-nophoto svg { flex: 0 0 auto; color: var(--dusty-taupe); margin-top: .1rem; }

.hist-item__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 44, 31, .35);
  padding-bottom: .14rem;
}
.hist-item__cta:hover { color: var(--chestnut-hover); border-bottom-color: var(--chestnut-hover); }

@media (max-width: 820px) {
  .hist-item {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.35rem 1.35rem 1.35rem 1.35rem;
  }
  /* The vertical year rail has nowhere to go at this width — the year moves
     into the body as a chip instead. */
  .hist-item__rail { display: none; }
}
@media (max-width: 520px) {
  .hist-item { grid-template-columns: minmax(0, 1fr); }
  .hist-item__cover { max-width: 180px; }
}

/* --------------------------------------------------------------------------
   29y. Session detail
   -------------------------------------------------------------------------- */

/* Photographic hero banner (opt-in via $HERO_BG) --------------------------
   TWO treatments, because the two kinds of artwork need different things.

   DEFAULT (.page-hero--photo) — "open". Dark across the text column on the
   left, then clearing to nothing by the right edge so a photograph is seen at
   its own colour. For banner photography where the right-hand side is the
   subject and carries no text of ours.

   DENSE (.page-hero--photo-dense) — near-flat .74-.90 the whole way across,
   set by session.php.
   ⚠ The ten session artworks have near-white areas (session 1 peaks at
   #FAF5E7) exactly where the text sits. Measured on the untouched images, the
   dim gold breadcrumb would need a .93 overlay to clear AA — which would hide
   the picture completely. So on a photographic hero the hero text is WHITE
   instead of gold, and white needs only .66. The plateau is .74, which leaves
   margin on the worst image (session 10). Do not lighten it without
   re-measuring all ten.

   Both declare a background-color: the automated contrast audit cannot see a
   gradient or an image, so it must find a ground at least as dark as the paint.
   The open treatment clears to transparent on the right, so its floor is the
   darkest measured ground rather than the gradient's own end. */
.page-hero--photo {
  background-image:
    linear-gradient(90deg,
      rgba(28, 29, 31, .90) 0%,
      rgba(28, 29, 31, .86) 34%,
      rgba(28, 29, 31, .78) 58%,
      rgba(28, 29, 31, .42) 80%,
      rgba(28, 29, 31, .06) 100%),
    var(--hero-jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1C1D1F;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .page-hero--photo {
    background-image:
      linear-gradient(90deg, rgba(28, 29, 31, .90) 0%, rgba(28, 29, 31, .86) 34%, rgb(28 29 31 / 78%) 58%, rgb(28 29 31 / 42%) 80%, rgb(28 29 31 / 6%) 100%),
      image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  }
}

/* Session detail pages — see the contrast note above. */
.page-hero--photo-dense {
  background-image:
    linear-gradient(90deg,
      rgba(28, 29, 31, .90) 0%,
      rgba(28, 29, 31, .86) 34%,
      rgba(28, 29, 31, .74) 52%,
      rgba(28, 29, 31, .42) 74%,
      rgba(28, 29, 31, .18) 100%),
    var(--hero-jpg);
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .page-hero--photo-dense {
    background-image:
      linear-gradient(90deg, rgba(28, 29, 31, .90) 0%, rgba(28, 29, 31, .86) 34%, rgb(28 29 31 / 85%) 52%, rgb(28 29 31 / 76%) 74%, rgb(28 29 31 / 74%) 100%),
      image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  }
}

/* Below the two-column breakpoint the text runs the full width, so the overlay
   has to as well — there is no clear side left to show the picture through.
   Both treatments collapse to the same flat scrim here; a directional fade
   cannot help when the type spans the whole band. */
@media (max-width: 900px) {
  .page-hero--photo,
  .page-hero--photo-dense {
    background-image:
      linear-gradient(rgba(28, 29, 31, .84), rgba(28, 29, 31, .84)),
      var(--hero-jpg);
  }
  @supports (background-image: image-set(url("a.webp") type("image/webp"))) {
    .page-hero--photo,
    .page-hero--photo-dense {
      background-image:
        linear-gradient(rgba(28, 29, 31, .84), rgba(28, 29, 31, .84)),
        image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
    }
  }
}

/* The engraved SVG overlay competes with a photograph — dial it back. */
.page-hero--photo .page-hero__decor { opacity: .05; }

/* Gold is too dim to survive over artwork without crushing it (see above), so
   hero text goes white on a photographic banner. */
.page-hero--photo .crumbs ol,
.page-hero--photo .crumbs a,
.page-hero--photo .crumbs [aria-current="page"],
.page-hero--photo .page-hero__eyebrow { color: var(--antique-ivory); }
.page-hero--photo .crumbs a:hover { color: var(--antique-ivory); text-decoration: underline; }
.page-hero--photo .crumbs li + li::before { color: rgba(255, 255, 255, .75); }
.page-hero--photo .page-hero__badge {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: var(--antique-ivory);
}
.page-hero--photo .page-hero__lead { color: var(--antique-ivory); }

/* Hero badge + eyebrow (opt-in; every other page leaves these unset) -------- */
.page-hero__head { display: flex; align-items: flex-start; gap: 1.1rem; }
.page-hero__head > div { min-width: 0; }
.page-hero__badge {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-top: .35rem;
  border-radius: var(--radius-lg);
  background: rgba(191, 167, 111, .16);
  border: 1px solid var(--hairline);
  color: var(--gold-on-glass);
}
.page-hero__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  margin-bottom: .3rem;
}
@media (max-width: 560px) {
  .page-hero__badge { width: 46px; height: 46px; }
}

/* Two-column body ---------------------------------------------------------- */
.ses-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 940px) { .ses-layout { grid-template-columns: minmax(0, 1fr); } }

.ses-main { min-width: 0; display: grid; gap: 1.1rem; }

.ses-card {
  min-width: 0;
  padding: 1.5rem 1.6rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.ses-card h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.12rem;
  margin: 0 0 .7rem;
  color: var(--oxford-brown);
}
.ses-card__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .22);
  color: var(--gold-on-light);
}
.ses-card p { margin: 0; font-size: .94rem; line-height: 1.75; color: var(--body-brown); }

/* Expected outcomes gets the accent treatment */
.ses-card--outcome {
  background: linear-gradient(135deg, rgba(139, 44, 31, .06), rgba(191, 167, 111, .09));
  background-color: var(--card-ivory-2);
  border-color: rgba(139, 44, 31, .25);
  border-left: 3px solid var(--deep-chestnut);
}
.ses-card--outcome .ses-card__icon { background: rgba(139, 44, 31, .14); color: var(--deep-chestnut); }

.ses-core { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ses-core li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--body-brown);
}
.ses-core__num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: .1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(139, 44, 31, .12);
  color: var(--deep-chestnut);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
}

/* Sidebar ------------------------------------------------------------------ */
.ses-side { min-width: 0; display: grid; gap: 1.1rem; }

.ses-panel {
  padding: 1.3rem 1.35rem;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.ses-panel__label {
  display: block;
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive-on-light);
  margin-bottom: .9rem;
}

.ses-sdgs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ses-sdgs li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .6rem;
  background: var(--antique-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.ses-sdgs .sdg-tile { flex: 0 0 auto; width: 40px; height: 40px; }
.ses-sdgs__name { min-width: 0; font-size: .84rem; line-height: 1.4; color: var(--body-brown); }
.ses-sdgs__name b {
  display: block;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--deep-chestnut);
}

.ses-focus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ses-focus li {
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(191, 167, 111, .2);
  border: 1px solid var(--hairline);
  font-size: .78rem;
  color: var(--charcoal-slate);
}

.ses-submit {
  padding: 1.4rem 1.35rem;
  background: linear-gradient(150deg, var(--charcoal-slate), var(--oxford-brown));
  /* After the gradient, per the note on .hero. Declared as the LIGHTER end of
     the gradient so the automated contrast audit — which can only see a solid
     background-color — tests the worst case rather than being blind to it.
     Measured on the painted pixels: gold-on-glass 5.84, ivory-muted 6.43. */
  background-color: var(--oxford-brown);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.ses-submit__label {
  display: block;
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  margin-bottom: .6rem;
}
.ses-submit p {
  margin: 0 0 1.1rem;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--ivory-muted);
}
.ses-submit .btn-wc { width: 100%; justify-content: center; }
.ses-submit__alt {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .8rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-on-glass);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-hover);
  padding-bottom: .1rem;
}
.ses-submit__alt:hover { color: var(--antique-ivory); border-bottom-color: var(--antique-ivory); }

/* Previous / all / next ---------------------------------------------------- */
.ses-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: .9rem;
  margin-top: 2rem;
}
@media (max-width: 760px) {
  .ses-nav { grid-template-columns: minmax(0, 1fr); }
  .ses-nav__all { order: 3; justify-self: stretch; text-align: center; }
}

.ses-nav__side {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  padding: 1rem 1.2rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.ses-nav__side:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44, 46, 48, .08);
}
.ses-nav__side--next { text-align: right; }
.ses-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-on-light);
}
.ses-nav__side--next .ses-nav__dir { justify-content: flex-end; }
/* The arrow points the way the link goes. */
.ses-nav__side--prev .ses-nav__dir svg { transform: rotate(180deg); }
.ses-nav__side b {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--oxford-brown);
}
.ses-nav__side:hover b { color: var(--deep-chestnut); }

.ses-nav__all {
  align-self: center;
  padding: .8rem 1.4rem;
  background: var(--charcoal-slate);
  color: var(--antique-ivory);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .22s;
}
.ses-nav__all:hover { background: var(--oxford-brown); color: var(--antique-ivory); }

/* Chooser shown when a session has no published detail page yet ------------- */
.ses-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ses-list__item {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  padding: .95rem 1.2rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.ses-list__item.is-pending { background: transparent; border-style: dashed; }
.ses-list__num {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--deep-chestnut);
}
.ses-list__item a { font-size: .96rem; font-weight: 600; color: var(--oxford-brown); }
.ses-list__item a:hover { color: var(--deep-chestnut); }
.ses-list__item > span:not(.ses-list__num) { font-size: .96rem; color: var(--olive-on-light); }
.ses-list__item em {
  font-size: .72rem;
  font-style: italic;
  color: var(--olive-on-light);
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   29z. Sessions & Tracks layout variants (DESIGN REVIEW ONLY)
   ------------------------------------------------------------------------
   Four alternative presentations of the same $TRACKS data, namespaced
   .tv1- .tv2- .tv3- .tv4- so they cannot touch the live tracks page.
   Delete this section — plus tracks-v1..v4.php — once a layout is chosen.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   VARIANT 1 — Index list
   ========================================================================== */
.tv1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .15rem 2.5rem;
}
@media (max-width: 860px) { .tv1 { grid-template-columns: minmax(0, 1fr); } }

.tv1__row { min-width: 0; border-bottom: 1px solid var(--hairline); }
.tv1__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem .35rem;
  text-decoration: none;
  transition: background .2s, padding-left .2s;
}
.tv1__link:hover { background: rgba(191, 167, 111, .1); padding-left: .8rem; }
.tv1__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  /* Muted, but readable: at rgba(.3) this was 1.71:1 against white and the
     number is the row's identifier, not decoration. */
  color: var(--olive-on-light);
  transition: color .2s;
}
.tv1__link:hover .tv1__num { color: var(--deep-chestnut); }
.tv1__body { flex: 1; min-width: 0; }
.tv1__body b {
  display: block;
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--oxford-brown);
  margin-bottom: .35rem;
}
.tv1__sdgs { display: flex; flex-wrap: wrap; gap: .3rem; }
.tv1__sdgs i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .18rem .45rem;
  border-radius: 3px;
  background: var(--sdg);
  color: var(--sdg-ink);
}
.tv1__go { flex: 0 0 auto; color: var(--deep-chestnut); transition: transform .2s; }
.tv1__link:hover .tv1__go { transform: translateX(4px); }

/* ==========================================================================
   VARIANT 2 — Editorial grid
   ========================================================================== */
.tv2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1000px) { .tv2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .tv2 { grid-template-columns: minmax(0, 1fr); } }

.tv2-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.tv2-card:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(44, 46, 48, .1);
}
/* The lead card spans the row and sits image-left. */
.tv2-card--feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.tv2-card--feature .tv2-card__media { flex: 0 0 46%; }
.tv2-card--feature .tv2-card__body { flex: 1; padding: 1.9rem 2rem; }
.tv2-card--feature h3 { font-size: 1.5rem; }
@media (max-width: 860px) {
  .tv2-card--feature { flex-direction: column; }
  .tv2-card--feature .tv2-card__media { flex: none; }
}

.tv2-card__media { position: relative; display: block; min-width: 0; overflow: hidden; }
.tv2-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tv2-card__num {
  position: absolute;
  top: .8rem;
  left: .85rem;
  padding: .28rem .6rem;
  border-radius: var(--radius);
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.tv2-card__body { padding: 1.25rem 1.3rem 1.35rem; min-width: 0; }
.tv2-card__body h3 { font-size: 1.03rem; margin: 0 0 .6rem; line-height: 1.4; }
.tv2-card__body h3 a { color: var(--oxford-brown); text-decoration: none; }
.tv2-card__body h3 a:hover { color: var(--deep-chestnut); }
.tv2-card__body p { font-size: .89rem; line-height: 1.7; color: var(--body-brown); margin: 0 0 1rem; }

/* ==========================================================================
   VARIANT 3 — Expandable rows
   ========================================================================== */
.tv3 { display: grid; gap: .55rem; }
.tv3-row {
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tv3-row[open] { border-color: var(--hairline-hover); }
.tv3-row summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  transition: background .18s;
}
.tv3-row summary::-webkit-details-marker { display: none; }
.tv3-row summary:hover { background: rgba(191, 167, 111, .1); }
.tv3-row summary:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: -2px; }
.tv3-row__num {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--deep-chestnut);
}
.tv3-row__title { font-size: .98rem; font-weight: 600; color: var(--oxford-brown); min-width: 0; }
.tv3-row__chips { display: flex; gap: .25rem; }
.tv3-row__chips i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--sdg);
  color: var(--sdg-ink);
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
}
.tv3-row__caret { display: grid; place-items: center; color: var(--olive-on-light); transition: transform .25s; }
.tv3-row[open] .tv3-row__caret { transform: rotate(180deg); }
.tv3-row__body { padding: 0 1.3rem 1.3rem 3.3rem; }
.tv3-row__body p { font-size: .92rem; line-height: 1.75; color: var(--body-brown); margin: 0 0 .9rem; }
.tv3-row__body .tick-list { margin-bottom: 1rem; }
.tv3-row__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 44, 31, .35);
  padding-bottom: .12rem;
}
.tv3-row__cta:hover { color: var(--chestnut-hover); border-bottom-color: var(--chestnut-hover); }
@media (max-width: 640px) {
  .tv3-row summary { grid-template-columns: auto minmax(0, 1fr) 20px; gap: .6rem; }
  .tv3-row__chips { display: none; }
  .tv3-row__body { padding-left: 1.3rem; }
}

/* ==========================================================================
   VARIANT 4 — Filter by SDG
   ========================================================================== */
.tv4__bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.tv4__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--antique-ivory);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  color: var(--oxford-brown);
  transition: background .18s, border-color .18s, color .18s;
}
.tv4__chip span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .3rem;
  border-radius: 999px;
  background: rgba(44, 46, 48, .1);
  font-size: .64rem;
}
.tv4__chip:hover { border-color: var(--hairline-hover); }
.tv4__chip.is-active { background: var(--sdg, var(--charcoal-slate)); color: var(--sdg-ink, #fff); border-color: transparent; }
.tv4__chip.is-active span { background: rgba(0, 0, 0, .2); color: inherit; }

.tv4__count {
  text-align: center;
  font-size: .82rem;
  color: var(--olive-on-light);
  margin: 0 0 1.5rem;
}

.tv4__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1rem;
}
/* Each card carries its own session banner.
   ⚠ CONTRAST: the ten banners are bright (they peak around #FAF3D9). Measured
   on the finished card derivatives, white text needs a .59 overlay to clear
   AA — the .78 below leaves the tightest run (the card number) at 4.39:1
   against a 3.0 requirement, measured on the rendered cards. The card text is therefore WHITE, not the
   dark ivory-card palette, and the hover colour is ivory rather than gold
   (gold is too dim to survive over artwork — same finding as the session hero).
   Re-measure if the banners change. */
.tv4-card {
  min-width: 0;
  padding: 1.4rem 1.35rem;
  background-image:
    linear-gradient(rgba(28, 29, 31, .78), rgba(28, 29, 31, .78)),
    var(--card-jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* After the image, per the note on .hero — and it is what the automated
     contrast audit resolves to, so it must be at least as dark as the paint. */
  background-color: #1C1D1F;
  border: 1px solid rgba(191, 167, 111, .28);
  border-radius: var(--radius-lg);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .tv4-card {
    background-image:
      linear-gradient(rgba(28, 29, 31, .78), rgba(28, 29, 31, .78)),
      image-set(var(--card-webp) type("image/webp"), var(--card-jpg) type("image/jpeg"));
  }
}
.tv4-card:hover {
  border-color: var(--faded-gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(28, 29, 31, .32);
}
.tv4-card[hidden] { display: none; }
.tv4-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-on-glass);
  margin-bottom: .5rem;
}
.tv4-card h3 { font-size: 1rem; margin: 0 0 .9rem; line-height: 1.45; }
.tv4-card h3 a { color: var(--antique-ivory); text-decoration: none; }
.tv4-card h3 a:hover { color: var(--antique-ivory); text-decoration: underline; }

/* --------------------------------------------------------------------------
   30. Trust strip — partner marquee + indexing logos
   -------------------------------------------------------------------------- */
.trust__block { padding-block: 1.1rem; }
.trust__block + .trust__block { border-top: 1px solid var(--border-sand); }

/* The label is a <span>, so the width:100% + text-align:center it carries from
   the old (now deleted) flex row layout did nothing here — an inline box
   ignores both.
   Make it a block so the heading centres over its row. */
.trust__block > .trust__label {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: .8rem;
}

/* Marquee ------------------------------------------------------------------ */
.trust-marquee {
  overflow: hidden;
  /* Fade the ends so logos enter and leave instead of being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.trust-marquee__track {
  display: flex;
  width: max-content;
  /* 60 logos twice over is a ~16,400px track, so one pass moves ~8,200px.
     At 240s that drifts at roughly 34px/s — slow enough to read a logo as it
     goes by, where 110s (75px/s) read as a conveyor belt. */
  animation: trust-scroll 240s linear infinite;
}
/* Pause on hover and whenever a logo inside takes focus. */
.trust-marquee:hover .trust-marquee__track,
.trust-marquee:focus-within .trust-marquee__track { animation-play-state: paused; }

.trust-marquee__list {
  display: flex;
  align-items: center;
  gap: .7rem;
  list-style: none;
  margin: 0;
  padding: 0 .35rem;
}
.trust-marquee__list li { flex: 0 0 auto; }
.trust-marquee img {
  display: block;
  width: 130px;
  height: 73px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
  padding: .3rem .45rem;
  opacity: 1;
  transition: opacity .2s, transform .2s;
      border: 1px solid #0000001f;
}
.trust-marquee img:hover { opacity: 1; transform: translateY(-2px); }

/* The track is the list twice over, so one full pass is exactly half of it. */
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* An endlessly moving strip is exactly what this setting exists to stop.
   Turn it into a normal scrollable row instead. */
@media (prefers-reduced-motion: reduce) {
  .trust-marquee { overflow-x: auto; }
  .trust-marquee__track { animation: none; }
}

/* Indexing databases — static, per the brief -------------------------------- */
.trust-index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-index li {
  display: grid;
  place-items: center;
  min-width: 134px;
  height: 74px;
  padding: .4rem .9rem;
  background: #fff;
  border: 1px solid var(--border-sand);
  border-radius: var(--radius);
}
/* All five are 120x62, which overflowed the old 52px tile. A percentage
   max-height does not constrain a grid item reliably here — it rendered at the
   full natural 62px — so the cap is in pixels. */
.trust-index img { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; }
.trust-index__text {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--charcoal-slate);
}

/* Gallery empty state — shown when assets/img/gallery/ has no photographs. */
.gallery-empty {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  max-width: 620px;
  margin: 0 auto;
  padding: 1.1rem 1.35rem;
  border: 1px dashed var(--border-sand);
  border-radius: var(--radius-lg);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--olive-on-light);
}
.gallery-empty svg { flex: 0 0 auto; color: var(--dusty-taupe); margin-top: .15rem; }

/* Sessions & Tracks — action row under the grid ---------------------------- */
.track-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 3rem;
}
.track-actions .btn-wc { display: inline-flex; align-items: center; gap: .45rem; }

/* Brochure modal ----------------------------------------------------------- */
.brochure-embed iframe { width: 100%; min-height: 420px; border: 0; }
.brochure-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 1.1rem;
  padding: .9rem 1.1rem;
  background: var(--card-ivory-2);
  border: 1px dashed var(--border-sand);
  border-radius: var(--radius);
  font-size: .87rem;
  line-height: 1.65;
  color: var(--body-brown);
}
.brochure-note svg { flex: 0 0 auto; color: var(--gold-on-light); margin-top: .15rem; }

/* --------------------------------------------------------------------------
   31. Submission guidelines — grouped rules + "haven't heard from us"
   -------------------------------------------------------------------------- */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.1rem;
  align-items: start;
}
.gl-group {
  min-width: 0;
  padding: 1.5rem 1.6rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.gl-group__title {
  font-size: 1.06rem;
  margin: 0 0 .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--oxford-brown);
}
.gl-group .tick-list li { font-size: .89rem; }
.gl-group__sublabel {
  margin: 1rem 0 .5rem;
  font-size: .89rem;
  color: var(--body-brown);
}
.gl-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 .9rem;
  display: grid;
  gap: .45rem;
  border-left: 2px solid var(--hairline);
}
.gl-sub li {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--body-brown);
}

/* The AI prohibition is a rule people get rejected over — give it its own band. */
.gl-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 780px;
  margin: 0 auto 2rem;
  padding: 1.1rem 1.35rem;
  background: rgba(139, 44, 31, .07);
  border: 1px solid rgba(139, 44, 31, .3);
  border-left: 3px solid var(--deep-chestnut);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--body-brown);
}
.gl-alert svg { flex: 0 0 auto; color: var(--deep-chestnut); margin-top: .15rem; }
.gl-alert strong { color: var(--deep-chestnut); }

/* Haven't heard from us ----------------------------------------------------- */
.nh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 1rem;
}
.nh-list li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  min-width: 0;
  padding: 1.25rem 1.35rem;
  background: var(--card-ivory-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  font-size: .91rem;
  line-height: 1.7;
  color: var(--body-brown);
}
.nh-list__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(191, 167, 111, .2);
  color: var(--gold-on-light);
}
.nh-list strong { color: var(--oxford-brown); }

/* ==========================================================================
   32. Submission guidelines — spec/section layout
   ========================================================================== */

/* Button row under each guideline block. */
.gl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.25rem;
}
.gl-actions .btn-wc { display: inline-flex; align-items: center; gap: .45rem; }

.gl-subhead {
  margin: 2.75rem 0 1.1rem;
  font-size: 1.25rem;
  color: var(--oxford-brown);
  text-align: center;
}

/* The eight required sections read as an ordered sequence, so number them. */
.paper-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: .7rem;
}
.paper-sections li {
  display: flex;
  gap: .85rem;
  align-items: baseline;
  min-width: 0;
  padding: 1rem 1.1rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--faded-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.paper-sections__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-on-light);
  font-variant-numeric: lining-nums;
  flex-shrink: 0;
}
.paper-sections b {
  display: block;
  font-size: .93rem;
  color: var(--oxford-brown);
  margin-bottom: .15rem;
}
.paper-sections span:not(.paper-sections__num) {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--body-brown);
}

/* "Important Note" sits in the stepper but is an aside, not a numbered step. */
.process__step--note {
  background: rgba(191, 167, 111, .12);
  border-color: var(--faded-gold);
}
.process__step--note .process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(191, 167, 111, .18);
  padding-top: 0;
}

/* ==========================================================================
   33. Breadcrumb banner — DESIGN REVIEW ONLY
   Drives crumb-v1.php … crumb-v4.php. Delete this whole section and those four
   pages once a treatment is chosen; nothing in the live site uses it.
   Each variant only restyles the banner — the page below it is untouched.
   ========================================================================== */

/* -- V1 · Split panel -------------------------------------------------------
   Picture stays bright on the right; the text sits on a solid oxford panel so
   contrast is a known quantity rather than something measured off a photo. */
.page-hero--v1 {
  background-image: var(--hero-jpg);
  background-size: cover;
  background-position: center right;
  background-color: #1C1D1F;
  position: relative;
  overflow: hidden;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .page-hero--v1 {
    background-image: image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  }
}
.page-hero--v1::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(58%, 760px);
  background: var(--oxford-brown);
  /* Angled edge so the panel reads as a designed cut, not a crop. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
}
.page-hero--v1 .page-hero__inner { position: relative; z-index: 1; }
.page-hero--v1 .page-hero__decor { opacity: .06; }
.page-hero--v1 .page-hero__title,
.page-hero--v1 .page-hero__lead,
.page-hero--v1 .crumbs ol,
.page-hero--v1 .crumbs a,
.page-hero--v1 .crumbs [aria-current="page"] { color: var(--antique-ivory); }
.page-hero--v1 .page-hero__inner > * { max-width: min(48%, 620px); }
@media (max-width: 900px) {
  /* No room for a side-by-side split — the panel covers the band instead. */
  .page-hero--v1::before { width: 100%; clip-path: none; background: rgba(75, 59, 42, .92); }
  .page-hero--v1 .page-hero__inner > * { max-width: none; }
}

/* -- V2 · Glass card --------------------------------------------------------
   Full-bleed picture with a light scrim; the text rides in a frosted card, so
   the photograph is never the ground for the type. */
.page-hero--v2 {
  background-image: linear-gradient(rgba(28, 29, 31, .38), rgba(28, 29, 31, .52)), var(--hero-jpg);
  background-size: cover;
  background-position: center;
  background-color: #1C1D1F;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .page-hero--v2 {
    background-image:
      linear-gradient(rgba(28, 29, 31, .38), rgba(28, 29, 31, .52)),
      image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  }
}
.page-hero--v2 .page-hero__decor { opacity: .04; }
.page-hero--v2 .page-hero__inner > * { position: relative; z-index: 1; }
/* The text must stay inside the card — measured: at 62ch the lead ran onto the
   photograph and dropped to 3.38:1. Tie both to the card width instead. */
.page-hero--v2 .crumbs,
.page-hero--v2 .page-hero__title,
.page-hero--v2 .page-hero__lead { max-width: min(54%, 560px); }
.page-hero--v2 .page-hero__inner::before {
  content: "";
  position: absolute;
  inset: clamp(1rem, 3vw, 2rem) auto clamp(1rem, 3vw, 2rem) 0;
  width: min(68%, 760px);
  /* Opaque enough to be the measured ground on its own; blur is an enhancement. */
  background: rgba(20, 21, 23, .82);
  backdrop-filter: blur(7px);
  border-left: 3px solid var(--faded-gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.page-hero--v2 .page-hero__title,
.page-hero--v2 .page-hero__lead,
.page-hero--v2 .crumbs ol,
.page-hero--v2 .crumbs a,
.page-hero--v2 .crumbs [aria-current="page"] { color: var(--antique-ivory); }
@media (max-width: 900px) {
  .page-hero--v2 .page-hero__inner::before { inset: 0; width: 100%; border-left: 0; border-radius: 0; }
  .page-hero--v2 .crumbs,
  .page-hero--v2 .page-hero__title,
  .page-hero--v2 .page-hero__lead { max-width: none; }
}

/* -- V3 · Crumb rail above the picture --------------------------------------
   The breadcrumb is navigation, not decoration, so it gets a solid bar of its
   own. The photograph becomes a shallow title band underneath it. */
.page-hero--v3 {
  background-image: linear-gradient(90deg, rgba(28, 29, 31, .88) 0%, rgba(28, 29, 31, .72) 46%, rgba(28, 29, 31, .30) 100%), var(--hero-jpg);
  background-size: cover;
  background-position: center;
  background-color: #1C1D1F;
  padding-top: 0;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .page-hero--v3 {
    background-image:
      linear-gradient(90deg, rgba(28, 29, 31, .88) 0%, rgba(28, 29, 31, .72) 46%, rgba(28, 29, 31, .30) 100%),
      image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  }
}
.page-hero--v3 .page-hero__decor { opacity: .04; }
.page-hero--v3 .page-hero__inner { padding-block: 0; }
.page-hero--v3 .crumbs {
  /* Break the rail out of the container so it spans the full band. */
  margin: 0 calc(50% - 50vw) clamp(2rem, 5vw, 3.25rem);
  padding: .7rem calc(50vw - 50%);
  background: rgba(12, 13, 14, .88);
  border-bottom: 1px solid rgba(191, 167, 111, .3);
}
.page-hero--v3 .page-hero__title,
.page-hero--v3 .page-hero__lead,
.page-hero--v3 .crumbs ol,
.page-hero--v3 .crumbs a,
.page-hero--v3 .crumbs [aria-current="page"] { color: var(--antique-ivory); }
.page-hero--v3 .page-hero__title { position: relative; padding-bottom: .7rem; }
.page-hero--v3 .page-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74px;
  height: 3px;
  background: var(--faded-gold);
}
.page-hero--v3 .page-hero__inner > :last-child { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 900px) {
  .page-hero--v3 {
    background-image: linear-gradient(rgba(28, 29, 31, .82), rgba(28, 29, 31, .82)), var(--hero-jpg);
  }
}

/* -- V4 · Centred, gold frame -----------------------------------------------
   Symmetrical and formal — the ceremonial option. Even scrim, so the crop can
   change without re-measuring one bright corner. */
.page-hero--v4 {
  background-image: linear-gradient(rgba(24, 25, 27, .74), rgba(24, 25, 27, .80)), var(--hero-jpg);
  background-size: cover;
  background-position: center;
  background-color: #18191B;
  text-align: center;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .page-hero--v4 {
    background-image:
      linear-gradient(rgba(24, 25, 27, .74), rgba(24, 25, 27, .80)),
      image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  }
}
.page-hero--v4 .page-hero__decor { opacity: .07; }
.page-hero--v4 .page-hero__inner {
  max-width: 880px;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.page-hero--v4 .crumbs ol { justify-content: center; }
.page-hero--v4 .page-hero__lead { margin-inline: auto; }
.page-hero--v4 .page-hero__title,
.page-hero--v4 .page-hero__lead,
.page-hero--v4 .crumbs ol,
.page-hero--v4 .crumbs a,
.page-hero--v4 .crumbs [aria-current="page"] { color: var(--antique-ivory); }
.page-hero--v4 .page-hero__title {
  position: relative;
  padding-block: 1.1rem;
  margin-block: .4rem .9rem;
}
/* Double rule above and below the title — the "premium accent" cue used on
   certificates, kept decorative so it announces nothing to a screen reader. */
.page-hero--v4 .page-hero__title::before,
.page-hero--v4 .page-hero__title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 70%);
  height: 3px;
  border-top: 1px solid var(--faded-gold);
  border-bottom: 1px solid rgba(191, 167, 111, .45);
}
.page-hero--v4 .page-hero__title::before { top: 0; }
.page-hero--v4 .page-hero__title::after  { bottom: 0; }

/* Size/type hint inside a download button — secondary to the label. */
.btn-wc__meta { opacity: .72; font-weight: 500; }

/* ==========================================================================
   34. Welcome section — collage + overlapping panel, prose cards, facts strip
   ========================================================================== */

/* -- Intro + collage ------------------------------------------------------ */
.wlc-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Copy sits straight on the section — no card, no panel, no tinted ground. */
.wlc-intro { min-width: 0; }
.wlc-intro h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .3rem 0 0; }
.wlc-intro .rule-gold { margin-top: 1.05rem; margin-bottom: 1.4rem; }
.wlc-intro p { margin-bottom: 1rem; }
.wlc-intro p:last-of-type { margin-bottom: 0; }
.wlc-intro__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.5rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  border-bottom: 2px solid rgba(139, 44, 31, .3);
  padding-bottom: .2rem;
}
.wlc-intro__link:hover { color: var(--deep-chestnut); border-bottom-color: var(--deep-chestnut); }
.wlc-intro__link svg { transition: transform var(--transition); }
.wlc-intro__link:hover svg { transform: translateX(3px); }

/* Collage: one large frame, a second lifted over its lower-right corner, and a
   small organiser chip on the lower left. Bottom padding reserves the space the
   inset hangs into, so it never collides with whatever follows. */
.wlc-collage {
  position: relative;
  min-width: 0;
  padding: 0 0 clamp(3rem, 7vw, 5.5rem) 0;
}
.wlc-collage figure { margin: 0; }
.wlc-collage__main,
.wlc-collage__inset { overflow: hidden; border-radius: var(--radius-lg); }
.wlc-collage__main img,
.wlc-collage__inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wlc-collage__main {
  box-shadow: 0 16px 40px rgba(28, 29, 31, .14);
}
.wlc-collage__main img { height: clamp(280px, 30vw, 420px); }
.wlc-collage__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(58%, 300px);
  /* A white rim separates the two photographs where they overlap. */
  border: 5px solid var(--antique-ivory);
  border-radius: calc(var(--radius-lg) + 5px);
  box-shadow: 0 14px 34px rgba(28, 29, 31, .22);
}
.wlc-collage__inset img { height: clamp(150px, 17vw, 220px); }
@media (max-width: 900px) {
  .wlc-feature { grid-template-columns: 1fr; gap: 2rem; }
  /* Copy first on a phone — the picture is supporting, not the headline. */
  .wlc-intro { order: 1; }
  .wlc-collage { order: 2; }
}
@media (max-width: 479.98px) {
  .wlc-collage__inset { width: 62%; }
}

/* -- About + Purpose cards ------------------------------------------------ */
.wlc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.1rem;
}
.wlc-card {
  position: relative;
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: 2.6rem;
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
}
.wlc-card:hover { border-color: var(--faded-gold); transform: translateY(-2px); }
/* Watermark numeral: ornament only, hidden from assistive tech, and never the
   only thing distinguishing the two cards. */
.wlc-card__num {
  position: absolute;
  top: .7rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--oxford-brown);
  opacity: .07;
  font-variant-numeric: lining-nums;
  pointer-events: none;
}
.wlc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--oxford-brown);
  color: var(--faded-gold);
}
.wlc-card h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  margin: .35rem 0 0;
  color: var(--oxford-brown);
}
/* .rule-gold ships with no top margin — fine under a one-line heading, but it
   collides with the descenders of a wrapped one. */
.wlc-card .rule-gold { margin-top: 1.05rem; margin-bottom: 1.4rem; }
.wlc-card p { margin-bottom: 1rem; color: #000; }
.wlc-card p:last-of-type { margin-bottom: 0; }
.wlc-card__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.4rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--deep-chestnut);
  border-bottom: 2px solid rgba(139, 44, 31, .3);
  padding-bottom: .2rem;
}
.wlc-card__link:hover { color: var(--deep-chestnut); border-bottom-color: var(--deep-chestnut); }
.wlc-card__link svg { transition: transform var(--transition); }
.wlc-card__link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   35. Organiser band — IFERP Academy
   ========================================================================== */
.org-band {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  /* Gradient plus a flat colour: the automated contrast audit cannot read a
     gradient, so the declared colour must be at least as dark as the paint. */
  background-color: var(--oxford-brown);
  background-image: linear-gradient(135deg, #4B3B2A 0%, #3A2E22 55%, #2C2E30 100%);
}
.org-band__media { position: relative; padding-bottom: 5.5rem; }
.org-band__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.org-band__photo img {
  display: block;
  width: 100%;
  height: clamp(300px, 30vw, 400px);
  object-fit: cover;
}
/* Logo card lifted over the lower edge of the photograph. */
/* Placement only — the card's look lives in .photo-card.
   Anchored to the PHOTO's bottom edge, not the column's: with bottom:0 the card
   sat inside the reserved padding and stopped overlapping the photograph
   whenever its text was short enough to be under ~88px tall. Sitting half over
   the edge holds regardless of how many lines the card carries. */
.org-band__logo {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translate(-50%, 50%);
  width: min(92%, 320px);
}
.org-band__body h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  margin: .35rem 0 1.1rem;
  color: var(--antique-ivory);
}
.org-band__body p {
  font-size: .92rem;
  line-height: 1.75;
  margin-bottom: .9rem;
  color: var(--ivory-muted);
}
.org-band__body p:last-of-type { margin-bottom: 0; }
.org-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.7rem;
}
.org-band__actions .btn-wc { display: inline-flex; align-items: center; gap: .45rem; }



/* A single remaining card should not stretch the full width of the page. */
.wlc-cards:has(> .wlc-card:only-of-type) { grid-template-columns: minmax(0, 1fr); }

/* Kept for a band that carries more than one block of copy; the hairline
   separates them. Nothing uses it today — the IFERP write-up that was the
   second block now lives only on about-iferp.php. */
.org-band__block + .org-band__block {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(191, 167, 111, .25);
}

/* One block of copy again, so the photograph centres against it rather than
   being pinned to the top. */
.org-band { align-items: center; }

/* ==========================================================================
   36. Light header — the pieces that assume a dark bar
   Scoped to .site-header so the same classes keep their dark-surface styling
   everywhere else on the site.
   ========================================================================== */

/* "Submit Abstract" is .btn-wc--outline, which is gold-on-transparent for dark
   sections — 2.34:1 on white. Restyle it here rather than changing the markup,
   so the same button on a dark band is untouched. */
.site-header .btn-wc--outline {
  color: var(--gold-on-light);
  border-color: var(--gold-on-light);
}
.site-header .btn-wc--outline:hover,
.site-header .btn-wc--outline:focus-visible {
  background: var(--gold-on-light);
  color: #fff;
}

/* The dropdown panel stays dark — it is a surface in its own right, and its
   contents were measured against that ground. Only its tether to the bar
   changes, so it does not read as a shadow of the white header. */
.site-header .nav-dropdown { border-top-color: var(--border-sand); }

@media (max-width: 1199.98px) {
  /* The slide-in drawer is the same nav links as the desktop bar. Now that
     those links are dark, the drawer has to be light too or they vanish. */
  .site-nav { background: #fff; border-left: 1px solid var(--border-sand); }
  .site-nav .nav-link { color: var(--charcoal-slate); }
  .site-nav .nav-item + .nav-item { border-top-color: var(--hairline); }
}

/* The hero banner crops to its bright sunset sky at narrow widths, and the text
   column spans the full width there. Measured on the real page, the gold theme
   line fell to 3.36:1 and the badge to 3.54:1 over that sky. Deepen the scrim
   below the two-column breakpoint so both clear AA with margin. */
@media (max-width: 991.98px) {
  .hero__vignette {
    background:
      radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(20, 21, 22, .65) 100%),
      linear-gradient(rgba(18, 19, 20, .52), rgba(18, 19, 20, .60));
  }
}

/* The left column is a photograph and its logo card again, not a column of
   copy, so it goes back to a fixed-width media rail beside the text. */
/* The rail scales with the viewport rather than staying at a fixed 380px —
   fixed, it ate the text column down to ~253px just above the breakpoint. */
.org-band { grid-template-columns: minmax(0, clamp(240px, 26vw, 380px)) minmax(0, 1fr); }
.org-band__media {
  position: relative;
  top: auto;
  /* Room for the half of the logo card that hangs below the photograph. */
  padding-bottom: 5.5rem;
}
/* Restated after the rule above: the earlier collapse sits higher in the file,
   and a media query adds no specificity, so source order would otherwise keep
   the fixed rail at narrow widths and push the page into a horizontal scroll.
   Collapsing at 992 rather than 860: measured, a 380px rail left the copy in a
   157-253px column between those widths, which is too narrow to read. */
@media (max-width: 991.98px) {
  .org-band { grid-template-columns: 1fr; }
  .org-band__media { max-width: 420px; margin-inline: auto; }
}


/* Testimonial carousel --------------------------------------------------- */
.rev-carousel { position: relative; }
.rev-carousel__viewport { overflow: hidden; }

.rev-carousel__track {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Enhanced by JS: the track is transformed, so it must not also scroll.
   Before the script runs (or if it never does) the rules below keep it a
   plain scrollable row, so no review is unreachable. */
.rev-carousel:not(.is-enhanced) .rev-carousel__viewport {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--faded-gold) transparent;
}
.rev-carousel.is-enhanced .rev-carousel__track {
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .rev-carousel.is-enhanced .rev-carousel__track { transition: none; }
}

.rev-slide {
  flex: 0 0 clamp(260px, 30%, 360px);
  display: flex;
}
.rev-slide .review { width: 100%; }

/* Arrows, outside the cards so they never sit over the text. */
.rev-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--antique-ivory);
  border: 1px solid var(--border-sand);
  /* Chestnut on white — 8.48:1. */
  color: var(--deep-chestnut);
  box-shadow: 0 8px 20px rgba(14, 15, 17, .28);
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.rev-nav:hover:not(:disabled) { background: var(--deep-chestnut); color: var(--antique-ivory); }
.rev-nav:disabled { opacity: 0; pointer-events: none; }
.rev-nav--prev { left: clamp(-1.25rem, -2vw, 0rem); }
.rev-nav--next { right: clamp(-1.25rem, -2vw, 0rem); }
.rev-nav--prev svg { transform: rotate(90deg); }
.rev-nav--next svg { transform: rotate(-90deg); }

/* Page dots. */
.rev-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
}
.rev-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(237, 227, 220, .32);
  transition: background var(--transition), width var(--transition);
}
.rev-dot.is-active { background: var(--faded-gold); width: 22px; border-radius: 99px; }

/* Card tweaks for the carousel: cards in a row should match height. */
.rev-slide .review {
  display: flex;
  flex-direction: column;
  background: rgba(237, 227, 220, .05);
}
.rev-slide .review p:last-of-type { margin-bottom: auto; }
.rev-slide .review cite {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(191, 167, 111, .22);
  font-style: normal;
}
.review__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(191, 167, 111, .18);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .85rem;
  color: var(--faded-gold);
}

@media (max-width: 767.98px) {
  /* No room for arrows beside the cards — drop them under the track. */
  .rev-nav { top: auto; bottom: -3.75rem; transform: none; }
  .rev-nav--prev { left: calc(50% - 3rem); }
  .rev-nav--next { right: calc(50% - 3rem); }
  .rev-dots { margin-bottom: 3.5rem; }
}

/* Indexing cards holding a logo rather than a name.
   Two overrides of .partner-card img are needed: the shared rule greyscales and
   fades partner logos to 78%, which left these unrecognisable — and since the
   jou-*.png files have no alpha channel, the grey then showed as a hard box on
   the ivory card. Indexing marks are a trust signal, so they run full colour on
   a white ground of their own. */
.partner-card--logo { padding: .6rem .9rem; background: #fff; }
.partner-card--logo img {
  display: block;
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  filter: none;
  opacity: 1;
}
.partner-card--logo:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   37. Mosaic gallery + full-size viewer
   ========================================================================== */

/* Four columns of fixed-height rows; tiles claim different spans to build the
   mosaic. `dense` lets a small tile backfill a gap a large one left behind, so
   the grid stays solid whatever the photo count. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(110px, 12vw, 165px);
  grid-auto-flow: dense;
  gap: .7rem;
}
.mosaic__item {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--oxford-brown);
  cursor: pointer;
  /* A button, so it inherits none of the type it would otherwise pick up. */
  font: inherit;
  color: inherit;
  display: block;
}
.mosaic__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The sources are 4:3; the wide tiles in the pattern crop them to about 2.3:1,
     which takes the crop out of the top and bottom. Biasing upward keeps heads
     in frame — a centred crop beheaded the speaker in the lectern photo. */
  object-position: center 32%;
  /* Photographs run at their own colour. The §24 brief asked for a warm
     monochrome archive treatment, and this carried sepia(.3) saturate(.8) —
     removed on request so the originals show. The derivatives themselves were
     never graded, so nothing needs regenerating to undo this. */
  transition: transform .6s ease;
}
.mosaic__item:hover img,
.mosaic__item:focus-visible img { transform: scale(1.06); }
.mosaic__item:focus-visible { outline: 3px solid var(--faded-gold); outline-offset: 2px; }

/* Zoom affordance, so it reads as openable before anyone hovers. */
.mosaic__zoom {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 21, 22, .62);
  color: var(--antique-ivory);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}
.mosaic__item:hover .mosaic__zoom,
.mosaic__item:focus-visible .mosaic__zoom { opacity: 1; transform: none; }

/* The pattern. Repeats every 8 tiles, so a longer set keeps the rhythm.
   Every span is chosen so the tile stays near the 4:3 of the source files: a
   2x1 tile measured 3.45:1, which letterboxed a 4:3 photo down to a 39% band
   and cut the speaker's head off. Wide tiles are therefore 2x2, never 2x1. */
/* Explicit placement, not spans + dense flow.
   Spans alone could not be made to pack: mixed 2x2 / 1x2 / 1x1 items place in
   source order, so a 2x2 that will not fit the remaining gap pushes to the next
   row and leaves a hole — the grid filled only 76% however the spans were
   balanced. Naming the areas guarantees a perfect 4x4 for the eight photographs.

   Every slot is near the 4:3 of the source files or taller — never the 3.45:1
   letterbox that cut a speaker's head off. */
.mosaic {
  grid-template-areas:
    'a a b c'
    'a a b d'
    'e e f g'
    'e e h g';
}
.mosaic__item:nth-child(1) { grid-area: a; }
.mosaic__item:nth-child(2) { grid-area: b; }
.mosaic__item:nth-child(3) { grid-area: c; }
.mosaic__item:nth-child(4) { grid-area: d; }
.mosaic__item:nth-child(5) { grid-area: e; }
.mosaic__item:nth-child(6) { grid-area: f; }
.mosaic__item:nth-child(7) { grid-area: g; }
.mosaic__item:nth-child(8) { grid-area: h; }

@media (max-width: 767.98px) {
  /* Three columns is the floor at which a "small" tile is still a photograph
     rather than a thumbnail. The named layout goes with it — below this the
     tiles are a plain equal grid. */
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-template-areas: none; }
  .mosaic__item { grid-area: auto !important; }
}
@media (max-width: 479.98px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}

.mosaic__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 1.25rem 0 0;
  font-size: .82rem;
  color: var(--body-brown);
}
.mosaic__hint svg { color: var(--gold-on-light); flex-shrink: 0; }

/* Viewer ------------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 13, 14, .93);
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__figure img { transition: none; }
}

.lightbox__figure {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.lightbox__figure img {
  display: block;
  max-width: 100%;
  /* Leave room for the caption under the photograph at every height. */
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.lightbox__figure figcaption {
  max-width: 70ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.6;
  /* On the .93 scrim over near-black — measured 13.4:1. */
  color: var(--ivory-muted);
}

.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(237, 227, 220, .12);
  border: 1px solid rgba(191, 167, 111, .4);
  color: var(--antique-ivory);
  transition: background var(--transition), color var(--transition);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--faded-gold); color: var(--charcoal-slate); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 3px solid var(--faded-gold); outline-offset: 3px; }

.lightbox__close { position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__nav--prev svg { transform: rotate(90deg); }
.lightbox__nav--next svg { transform: rotate(-90deg); }

@media (max-width: 575.98px) {
  /* No side room for arrows — move them under the photograph. */
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__figure { grid-column: 1; grid-row: 1; }
  .lightbox__figure img { max-height: calc(100vh - 14rem); }
  .lightbox__nav--prev,
  .lightbox__nav--next { grid-row: 2; }
  .lightbox__nav--prev { grid-column: 1; justify-self: center; transform: translateX(-2rem); }
  .lightbox__nav--next { grid-column: 1; justify-self: center; transform: translateX(2rem); }
}

/* Body does not scroll behind an open viewer. */
body.has-lightbox { overflow: hidden; }

/* Review text: clamped until expanded ------------------------------------- */

/* Only clamp once JS has added the toggle. Without it, .is-clampable is never
   set and the full text shows — no review is ever cut off with no way to read
   the rest. */
.review__body.is-clampable {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
}
.review__body.is-clampable.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}
/* The clamp collapses the paragraph margins inside a -webkit-box, so restore
   the gap between paragraphs explicitly. */
.review__body p { margin-bottom: 1rem; }
.review__body p:last-child { margin-bottom: 0; }

.review__toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .7rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  /* Gold over the oxford card — 4.58:1, measured. */
  color: var(--faded-gold);
}
.review__toggle:hover { color: var(--antique-ivory); }
.review__toggle:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 3px; border-radius: 2px; }
.review__toggle svg { transition: transform var(--transition); }
.review__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Never show scroll chrome on the carousel, in either state. The fallback stays
   scrollable for touch and trackpad, but the bar itself is noise under a row of
   cards that has its own arrows. */
.rev-carousel__viewport { scrollbar-width: none; -ms-overflow-style: none; }
.rev-carousel__viewport::-webkit-scrollbar { display: none; }

/* Panel Discussion banner -------------------------------------------------- */
.panel-banner {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);

  /* Holding colour while the artwork loads. The section is light now, so this
     is a warm neutral rather than the old moss — a dark block flashing on a
     white page is more jarring than a pale one. */
  background: var(--card-ivory-2);
  line-height: 0;
}
.panel-banner img { display: block; width: 100%; height: auto; }
.panel-banner__cta { margin-top: 1.75rem; text-align: center; }
.panel-banner__cta .btn-wc { display: inline-flex; align-items: center; gap: .45rem; }

/* ==========================================================================
   38. Photo card — the white card lifted over a photograph
   One class, used by the welcome collage and the organiser band, so the two
   photo treatments cannot drift apart.
   ========================================================================== */
.photo-card {
  padding: 1.1rem 1.25rem;
  text-align: center;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(14, 15, 17, .32);
}
.photo-card__logo { display: block; width: auto; height: 42px; margin: 0 auto .7rem; }
.photo-card__sub {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  line-height: 1.5;
  /* On the white card, not on the band behind it. */
  color: var(--body-brown);
}
.photo-card__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  color: var(--oxford-brown);
}

/* Placement on the welcome collage: lower-left of the large frame, hanging
   slightly off its edge the way the organiser card does. */
.wlc-collage__card {
  position: absolute;
  left: clamp(-.75rem, -1.5vw, 0rem);
  bottom: clamp(3.4rem, 8vw, 6.4rem);
  width: min(62%, 250px);
  z-index: 1;
}
@media (max-width: 479.98px) {
  .wlc-collage__card { left: 0; width: min(70%, 220px); }
  .photo-card { padding: .9rem 1rem; }
  .photo-card__logo { height: 34px; }
}

/* Fallback panel when the banner artwork is absent. The base .panel-feature is
   built for a dark band — ivory type on a glass surface — so the light section
   needs its own ink and ground. */
.panel-feature--light {
  background: var(--card-ivory-2);
  border: 1px solid var(--border-sand);
}
.panel-feature--light .panel-feature__title { color: var(--oxford-brown); }

/* Stats on a light card ----------------------------------------------------
   The base .stats is built for the dark network band: gold numerals and ivory
   labels on charcoal tiles. On the ivory About card the gold measures 2.07:1
   and the ivory labels effectively vanish, so both are re-inked here.
   Measured on --card-ivory-2: gold-on-light 5.25, body-brown 17.87,
   faded-gold 2.07. */
.stats--light {
  background: var(--border-sand);
  border-color: var(--border-sand);
  margin-top: 1.75rem;
}
.stats--light .stat {     background: #ffffff;
    padding: 1.35rem .75rem; }
.stats--light .stat__num { color: #8b2c1f; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.stats--light .stat__label {    color: #000000;
    font-size: 12px;
    margin-top: .5rem;
    font-weight: 600;}

/* Indexing grid, three to a row. auto-fit would collapse to two whenever the
   column got tight, so the count is fixed and relaxed only where three genuinely
   does not fit. */
.partners-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.partners-grid--3 .partner-card { min-height: 78px; padding: .5rem; }

/* Between 992 and 1199 the col-lg-4 column is at its narrowest while still being
   a side column. Measured there, three across left each card 73px and the logo
   inside it 42px — Clarivate and DOAJ were unreadable. Two across instead. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .partners-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .partners-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Equal halves: stretch so the two columns end level rather than one running on. */
.pub-split-row > [class^="col-"] { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   CTA band on a conference photograph.

   No flat black scrim: the overlay is a brand gradient (oxford -> slate ->
   chestnut) so the band reads as part of the palette rather than a dimmed
   photo. The photograph itself is only lightly graded now (brightness .78)
   instead of being crushed to .30.

   ⚠ The text is centred across the FULL width of the band, so a directional
   gradient cannot be allowed to run pale anywhere the type sits. The stops
   below were tuned against measurements taken from the rendered page — the
   real paint behind each text run, with the text hidden — not chosen by eye.
   Figures are in the note under .cta-band--photo's measurement comment.

   background-color is the darkest stop, so the site-wide contrast audit (which
   cannot read a gradient or an image) still resolves to a valid upper bound.
   Re-measure if the photograph or the stops change.
   -------------------------------------------------------------------------- */
.cta-band--photo {
  background-image:
   linear-gradient(135deg, rgb(73 38 0 / 52%) 0%, rgb(15 25 35 / 81%) 45%, rgb(73 0 1 / 63%) 100%), image-set(url(../img/cta/cta-band.webp) type('image/webp'), url(../img/cta/cta-band.jpg) type('image/jpeg'));
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  background-color: #2C2E30;
}
@supports (background-image: image-set(url('../img/cta/cta-band.webp') type('image/webp'))) {
  /* .cta-band--photo {
    background-image:
      linear-gradient(135deg,
        rgba(75, 59, 42, .95) 0%,
        rgba(44, 46, 48, .92) 45%,
        rgba(107, 46, 47, .90) 100%),
      image-set(url('../img/cta/cta-band.webp') type('image/webp'),
                url('../img/cta/cta-band.jpg')  type('image/jpeg'));
  } */
}

/* ==========================================================================
   39. SDG colour rail — track cards
   Chosen from four reviewed treatments; sdg-v1..v4.php and the icon-wall,
   named-chip and overlay-badge rules were deleted with the decision.

   No artwork at all, just the palette — which is also why SDG 17 needs no
   fallback here: assets/img/ has sdg-1…sdg-16 only, and track 1 is aligned
   to 17.
   ========================================================================== */
.sdg-rail {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.sdg-rail__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-left: .55rem;
  border-left: 4px solid var(--sdg, var(--charcoal-slate));
  min-height: 30px;
}
.sdg-rail__no {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 3px;
  background: var(--sdg, var(--charcoal-slate));
  color: var(--sdg-ink, #fff);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: .76rem;
}
.sdg-rail__name {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--oxford-brown);
}

/* ==========================================================================
   40. Homepage Call for Papers — DESIGN REVIEW ONLY
   Drives cfp-v1.php … cfp-v3.php. Delete this section and those three pages
   once a treatment is chosen; nothing in the live site uses it.

   Classes are prefixed .cfp-* so they cannot collide with the live section's
   .tracks / .track / .sdg-badge — reusing .sdg-badge for a variant is exactly
   what clipped the homepage chips into circles earlier.
   ========================================================================== */

/* Shared SDG number pips ---------------------------------------------------- */
.cfp-sdg {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.cfp-sdg li {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--sdg, var(--charcoal-slate));
  /* Ink chosen per goal in PHP — several SDG colours are too light for white. */
  color: var(--sdg-ink, #fff);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: .78rem;
  line-height: 1;
}
.cfp-sdg--inline li {
  width: auto;
  gap: .4rem;
  grid-auto-flow: column;
  padding: .25rem .6rem .25rem .3rem;
  border-radius: 999px;
}
.cfp-sdg--inline li b { font-size: .74rem; font-weight: 700; }

/* -- V1 · Photo cards ------------------------------------------------------ */
.cfp-photo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.1rem;
}
.cfp-photo__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.cfp-photo__item:hover { border-color: var(--faded-gold); transform: translateY(-3px); }
.cfp-photo__media { position: relative; background: var(--oxford-brown); }
.cfp-photo__media img { display: block; width: 100%; height: auto; aspect-ratio: 2.5 / 1; object-fit: cover; }
.cfp-photo__num {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .3rem .7rem;
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
}
.cfp-photo__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.cfp-photo__body h3 { font-size: 1.02rem; line-height: 1.4; margin: 0; color: var(--oxford-brown); }
.cfp-photo__body .cfp-sdg { margin-top: auto; padding-top: .9rem; }

/* -- V2 · Numbered index --------------------------------------------------- */
.cfp-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0 2.5rem;
}
.cfp-index__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.cfp-index__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  /* 5.25:1 on the ivory ground — these are identifiers, not ornament. */
  color: var(--gold-on-light);
  font-variant-numeric: lining-nums;
}
.cfp-index__item h3 { font-size: .98rem; line-height: 1.45; margin: 0 0 .35rem; color: var(--oxford-brown); }
.cfp-index__sdg { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.cfp-index__sdg span {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .12rem .45rem;
  border-radius: 3px;
  /* Tint only — the label itself stays dark so it never depends on the goal
     colour being dark enough for white text. */
  background: color-mix(in srgb, var(--sdg) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--sdg) 45%, transparent);
  color: var(--oxford-brown);
}

/* -- V3 · Accordion rows --------------------------------------------------- */
.cfp-rows { border-top: 1px solid var(--hairline); }
.cfp-row { border-bottom: 1px solid var(--hairline); }
.cfp-row > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem .25rem;
  cursor: pointer;
  list-style: none;
}
.cfp-row > summary::-webkit-details-marker { display: none; }
.cfp-row > summary:focus-visible { outline: 3px solid var(--faded-gold); outline-offset: 2px; }
.cfp-row__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-on-light);
  flex-shrink: 0;
  font-variant-numeric: lining-nums;
}
.cfp-row__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--oxford-brown);
}
.cfp-row__chevron {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--deep-chestnut);
  border-bottom: 2px solid var(--deep-chestnut);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.cfp-row[open] .cfp-row__chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.cfp-row__body { padding: 0 .25rem 1.3rem 3rem; }
.cfp-row__body p { font-size: .9rem; margin: 0; color: var(--body-brown); }
.cfp-row__body .cfp-sdg { margin-top: .8rem; }
@media (max-width: 575.98px) {
  .cfp-row__body { padding-left: .25rem; }
}

/* The eyebrow on the photo band measured 4.60:1 against a 4.5 threshold —
   too little margin over a photograph, where JPEG noise moves the ground.
   --gold-on-glass is the palette's lighter gold, kept for exactly this case. */
.cta-band--photo .eyebrow--gold { color: var(--gold-on-glass); }

/* The promo rail's calls to action are <a> elements inside .nav-dropdown, so
   `.nav-dropdown a` (0,1,1) outranks `.btn-wc--primary` (0,1,0) and was
   repainting the button label. Measured: white-on-chestnut 8.48 became
   charcoal-on-chestnut 2.48. Restate the button inks at higher specificity. */
.nav-dropdown .btn-wc--primary { color: var(--antique-ivory); }
.nav-dropdown .btn-wc--primary:hover { color: var(--antique-ivory); }
.nav-dropdown .btn-wc--outline,
.nav-dropdown .btn-wc--outline-dark {
  color: var(--deep-chestnut);
  border-color: var(--deep-chestnut);
  background: transparent;
}
.nav-dropdown .btn-wc--outline:hover,
.nav-dropdown .btn-wc--outline-dark:hover {
  background: var(--deep-chestnut);
  color: var(--antique-ivory);
}

/* Submission guidelines, side by side ---------------------------------------
   Abstract rules left, full paper rules right, so the two sets can be compared
   rather than scrolled between. Each column keeps its own heading and id. */
.rules-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.rules-split__col { min-width: 0; }
.rules-split .section-head { margin-bottom: 1.5rem; }
.rules-split .section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.rules-split .gl-alert { max-width: none; margin-bottom: 1.1rem; }
.rules-split .form-note { margin-top: 1.1rem; }

/* Inside a half-width column the guideline grid is a single stack — the
   auto-fit grid it uses full width would drop to one column anyway, and saying
   so avoids a 340px minimum fighting the column. */
.gl-grid--stack { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  /* Two columns of dense rules become unreadable before the cards themselves
     get narrow — stack well before the grid is forced to. */
  .rules-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   41. Important Dates — calendar-tear cards
   Chosen from the two reviewed treatments; dates-v1/v2.php and the countdown
   rail rules were deleted with the decision.

   Each card takes one of the four theme-pillar colours, with --dt-ink as the
   readable-on-that-colour partner. Gold is the one that flips: white on it is
   2.34:1, charcoal is 5.82:1.
   ========================================================================== */
.dt-tear__item--slate    { --dt: var(--charcoal-slate); --dt-ink: #fff; }
.dt-tear__item--chestnut { --dt: var(--deep-chestnut);  --dt-ink: #fff; }
.dt-tear__item--moss     { --dt: var(--forest-moss);    --dt-ink: #fff; }
.dt-tear__item--gold     { --dt: var(--faded-gold);     --dt-ink: var(--charcoal-slate); }

/* Cards -------------------------------------------------------------------- */
/* Explicit column counts rather than auto-fit: with exactly four deadlines,
   auto-fit produced a 3 + 1 row at 992px, leaving the last card stranded beside
   547px of empty space. Four, then two, then one — never ragged. */
.dt-tear {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 1199.98px) {
  .dt-tear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 519.98px) {
  .dt-tear { grid-template-columns: minmax(0, 1fr); }
}
.dt-tear__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-sand);
  background: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}
.dt-tear__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.dt-tear__head {
  position: relative;
  padding: 1.15rem 1.15rem 1rem;
  background: var(--dt);
  color: var(--dt-ink);
  text-align: center;
}
.dt-tear__day {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.dt-tear__mon {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .88;
}
.dt-tear__icon {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Tint of the card's own ink, so it works on both the dark and gold heads. */
  background: color-mix(in srgb, var(--dt-ink) 16%, transparent);
}
.dt-tear__body { padding: 1.05rem 1.15rem 1.25rem; text-align: center; }
.dt-tear__label {
  display: block;
  font-family: var(--font-ui);
      font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: #000;
}
.dt-tear__full {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  color: var(--body-brown);
  font-variant-numeric: lining-nums;
}

/* Published papers panel ----------------------------------------------------
   Replaces the "Partner Journal" placeholders with the real Scopus listing.
   Dense by design: eight entries beside a column of prose, so each is a tight
   four-line block rather than a card. */
.pub-papers {
  background: var(--card-ivory-3);
  border: 1px solid var(--border-sand);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  height: 100%;
}
.pub-papers__title { font-size: 1.25rem; }
.pub-papers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.pub-paper {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--hairline);
}
.pub-paper:last-child { padding-bottom: 0; border-bottom: 0; }

.pub-paper__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.pub-paper__type,
.pub-paper__open {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .16rem .45rem;
  border-radius: 3px;
}
.pub-paper__type {
  background: rgba(44, 46, 48, .08);
  border: 1px solid var(--border-sand);
  color: var(--oxford-brown);
}
/* Chestnut on its own tint — 6.9:1, rather than white on chestnut at this size. */
.pub-paper__open {
  background: rgba(139, 44, 31, .1);
  border: 1px solid rgba(139, 44, 31, .3);
  color: var(--deep-chestnut);
}
.pub-paper__name {
  display: block;
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--oxford-brown);
  margin-bottom: .2rem;
}
.pub-paper__authors {
  display: block;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--body-brown);
  margin-bottom: .25rem;
}
.pub-paper__src {
  display: block;
  font-size: .72rem;
  line-height: 1.45;
  /* 5.25:1 on the card — the journal name is the point of the entry. */
  color: var(--gold-on-light);
  font-weight: 600;
}
.pub-paper__meta {
  display: block;
  font-weight: 500;
  color: var(--body-brown);
  font-variant-numeric: lining-nums;
}

/* Published papers carousel -------------------------------------------------
   Two papers to a page. Each slide holds a stacked pair, so the carousel pages
   sideways while the pair reads top to bottom. */
.pub-carousel { position: relative; }
.pub-carousel__viewport { overflow: hidden; }
/* Before JS runs (or if it never does) the track stays a scrollable row so no
   paper is unreachable. The scrollbar itself is hidden — the arrows are the
   affordance once the script is in. */
.pub-carousel:not(.is-enhanced) .pub-carousel__viewport { overflow-x: auto; }
.pub-carousel__viewport { scrollbar-width: none; -ms-overflow-style: none; }
.pub-carousel__viewport::-webkit-scrollbar { display: none; }

.pub-carousel__track {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pub-carousel.is-enhanced .pub-carousel__track {
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .pub-carousel.is-enhanced .pub-carousel__track { transition: none; }
}
.pub-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  gap: .9rem;
  /* Two rows of equal height, so a short paper does not leave the pair ragged. */
  grid-template-rows: repeat(2, minmax(0, auto));
  align-content: start;
}
.pub-slide .pub-paper { padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); }
.pub-slide .pub-paper:last-child { padding-bottom: 0; border-bottom: 0; }

/* Arrows, under the track so they never sit over a title. */
.pub-nav {
  position: absolute;
  bottom: -.35rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--border-sand);
  /* 8.48:1 on white. */
  color: var(--deep-chestnut);
  transition: background var(--transition), color var(--transition);
}
.pub-nav:hover:not(:disabled) { background: var(--deep-chestnut); color: #fff; }
.pub-nav:disabled { opacity: 0; pointer-events: none; }
.pub-nav:focus-visible { outline: 3px solid var(--faded-gold); outline-offset: 2px; }
.pub-nav--prev { left: 0; }
.pub-nav--next { left: 44px; }
.pub-nav--prev svg { transform: rotate(90deg); }
.pub-nav--next svg { transform: rotate(-90deg); }

.pub-dots {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  margin-top: 1.4rem;
  min-height: 34px;
  align-items: center;
}
.pub-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--border-sand);
  transition: background var(--transition), width var(--transition);
}
.pub-dot.is-active { background: var(--deep-chestnut); width: 20px; border-radius: 99px; }

/* ==========================================================================
   42. Get involved — feature split
   Chosen from four reviewed treatments; involve-v1..v4.php and the photo-card,
   split-row and photo-tile rules were deleted with the decision.

   Three compact entries left, two photographic features right. Copy comes from
   includes/involve.php.
   ========================================================================== */

/* Bullet points, used by the feature cards ---------------------------------- */
.inv-card__points {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.inv-card__points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ivory-muted);
}
.inv-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faded-gold);
}

/* Layout ------------------------------------------------------------------- */
.inv-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.35rem;
  /* stretch, not start: three cards on the left are naturally shorter than two
     feature cards on the right, which left a gap under the left column. */
  align-items: stretch;
}
.inv-split__list,
.inv-split__features {
  display: grid;
  gap: 1.35rem;
  min-width: 0;
  /* Equal rows, so the three and the two both divide the same total height. */
  grid-auto-rows: 1fr;
}

/* Compact entries ---------------------------------------------------------- */
.inv-mini {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .22);
  transition: border-color var(--transition);
}
.inv-mini:hover { border-color: var(--faded-gold); }
.inv-mini__thumb { overflow: hidden; border-radius: var(--radius); align-self: stretch; }
.inv-mini__thumb img {
  display: block;
  /* width: 100%;
  height: 100%; */
  min-height: 96px;
  object-fit: cover;
  /* 4:3 cropped square — bias upward so faces survive. */
  object-position: center 32%;
}
.inv-mini__body { min-width: 0; display: flex; flex-direction: column; }
.inv-mini__tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* 5.82:1 on the slate band — gold at full strength would be 2.3 on white but
     this sits on dark, so --faded-gold is the right token here. */
  color: var(--faded-gold);
  margin-bottom: .3rem;
}
.inv-mini__body h3 { font-size: .98rem; line-height: 1.4; color: var(--antique-ivory); margin: 0 0 .35rem; }
.inv-mini__body p {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ivory-muted);
  margin: 0 0 .7rem;
  /* Three lines, so the three cards stay level against the features beside
     them. The full copy is on each item's own page. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.inv-mini__link {
     align-self: flex-start;
    margin-top: 11px;
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* The chip keeps its gold label readable: at #ffffff47 (28%) the ground
     lightened to #504F4F and the gold label measured 3.49:1, under the 4.5
     needed at this size. 14% holds the same look at 5.87:1. */
  background: rgba(255, 255, 255, .14);
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--faded-gold);
    border-radius: 5px;
}
.inv-mini__link:hover { color: var(--antique-ivory); }
.inv-mini__link:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 3px; }

/* Photographic features ---------------------------------------------------- */
.inv-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(191, 167, 111, .22);
  /* Ground under the photograph, and what the automated audit resolves to. */
  background: #1C1D1F;
}
.inv-feature__media { position: absolute; inset: 0; z-index: -1; }
.inv-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* Heavier than it looks like it needs to be, and deliberately so: a scrim over
   an arbitrary photograph cannot be shown to clear AA by eye. These stops were
   set from measurements of the real paint behind each text run. */
.inv-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18, 19, 21, .96) 55%,
    rgba(18, 19, 21, .82) 78%,
    rgba(18, 19, 21, .55) 100%);
}
.inv-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 1.5rem 1.5rem 1.6rem;
}
.inv-feature__body h3 { font-size: 1.15rem; line-height: 1.35; color: var(--antique-ivory); margin: 0 0 .4rem; }
.inv-feature__body p { font-size: .84rem; line-height: 1.6; color: var(--ivory-muted); margin: 0; }
.inv-feature__strap {
  font-family: var(--font-ui);
  font-size: .76rem !important;
  letter-spacing: .05em;
  color: var(--gold-on-glass) !important;
  margin-bottom: .45rem !important;
}
.inv-feature__cta { margin-top: 1.1rem; }

@media (max-width: 900px) {
  /* One column: the features go first, since they carry the primary actions. */
  .inv-split { grid-template-columns: 1fr; }
  .inv-split__features { order: -1; }
}
@media (max-width: 460px) {
  .inv-mini { grid-template-columns: 1fr; }
  .inv-mini__thumb img { height: 150px; }
}

/* ==========================================================================
   43. Call for Volunteers
   Role cards carrying a bullet list (.why-card holds a single paragraph, so it
   could not be reused), the requirements / how-to-apply split, and the step
   list. Both role sets use the same markup — one set sits on the slate band,
   which is what --dark switches.
   ========================================================================== */
.vol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.35rem;
}
.vol-role {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--card-ivory);
  border: 1px solid var(--hairline);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.vol-role:hover { border-color: var(--faded-gold); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.vol-role__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: var(--antique-ivory);
  border: 1px solid rgba(138, 75, 42, .22);
  /* 5.31:1 on --antique-ivory. */
  color: var(--burnt-umber);
}
.vol-role h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 .8rem; }
.vol-role .tick-list li:last-child { margin-bottom: 0; }

/* On the slate band the ivory card and its brown ink both invert. */
.vol-role--dark {
  background: rgba(237, 227, 220, .05);
  border-color: rgba(191, 167, 111, .22);
}
.vol-role--dark:hover { border-color: var(--faded-gold); box-shadow: none; }
.vol-role--dark .vol-role__icon {
  background: rgba(191, 167, 111, .12);
  border-color: rgba(191, 167, 111, .3);
  /* 5.82:1 on --charcoal-slate. */
  color: var(--faded-gold);
}
/* 10.72:1 on --charcoal-slate. */
.vol-role--dark h3 { color: var(--antique-ivory); }
/* 7.29:1 — the light-band tick-list ink would be 1.4 here. */
.tick-list--dark li { color: var(--ivory-muted); }
.tick-list--dark li::before { border-color: var(--faded-gold); }

/* Requirements / how to apply ----------------------------------------------- */
.vol-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 1.5rem;
  align-items: start;
}
.vol-panel {
  padding: 2rem 1.9rem 2.1rem;
  border-radius: var(--radius-lg);
  background: var(--card-ivory-2);
  border: 1px solid var(--hairline);
}
.vol-panel h2 { font-size: 1.55rem; margin: .4rem 0 0; }
.vol-panel .rule-gold { margin: 1.1rem 0 1.5rem; }

.vol-reqs { margin: 0; display: grid; gap: 1.1rem; }
.vol-reqs__item { padding-left: 1.1rem; border-left: 2px solid var(--hairline); }
.vol-reqs dt {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  margin-bottom: .25rem;
  /* 5.31:1 on --card-ivory-2. */
  color: var(--burnt-umber);
}
.vol-reqs dd { margin: 0; font-size: .89rem; line-height: 1.7; color: var(--body-brown); }

.vol-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; counter-reset: none; }
.vol-steps li { display: flex; gap: .95rem; align-items: flex-start; }
.vol-steps__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  /* Decorative — the step order is already carried by the <ol>. */
  color: var(--faded-gold);
}
.vol-steps__body { font-size: .89rem; line-height: 1.7; color: var(--body-brown); }
.vol-steps__body strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--body-brown); }

.vol-deadline {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.6rem 0 0;
  padding: .75rem .95rem;
  border-radius: var(--radius);
  font-size: .86rem;
  /* 5.31:1 on this tint. */
  color: var(--burnt-umber);
  background: rgba(138, 75, 42, .07);
  border: 1px solid rgba(138, 75, 42, .2);
}
.vol-deadline span { line-height: 0; }
.vol-deadline strong { color: var(--burnt-umber); }

@media (max-width: 540px) {
  .vol-panel { padding: 1.5rem 1.25rem 1.6rem; }
  .vol-role { padding: 1.35rem 1.2rem; }
}

/* ==========================================================================
   44. Call for Papers — track carousel
   One session at a time on the moss band: a dark panel carrying the title and
   its SDGs, a white panel carrying the focus areas and outcome. Driven by the
   generic [data-carousel] module, so the slides are 100% of the viewport and
   it measures one per page.
   ========================================================================== */
.section--oxford #cfp-title em { font-style: italic; color: var(--gold-on-glass); }

/* A patterned ground rather than flat brown. Same motif as the hero's SVG
   engraving — a 34px diagonal in --faded-gold — so the two read as one
   language, but done in CSS here rather than as another asset. The warm glow
   at the top right keeps the band from looking like a slab.

   isolation + z-index: -1 puts the pattern above the section's own background
   and below everything in the section; the carousel arrows are positioned, so
   they stay clear of it. */
#call-for-papers { position: relative; isolation: isolate; }
#call-for-papers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(760px 420px at 88% 6%, rgba(191, 167, 111, .11), transparent 62%),
    repeating-linear-gradient(135deg,
      rgba(191, 167, 111, .12) 0 1px,
      transparent 1px 34px);
}

.cfp-car {
  position: relative;
  /* Room for the arrows, which sit outside the panel on wide screens. */
  padding-inline: 3.6rem;
}
.cfp-car__viewport { overflow: hidden; border-radius: var(--radius-lg); }
.cfp-car__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  /* No-JS fallback: a native scroll-snap scroller, so every track is reachable
     without the arrows. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.cfp-car__track::-webkit-scrollbar { display: none; }
/* Once main.js takes over it moves the track with transform. Leaving the
   scroller on would clip slides 2-10 inside the track itself — the transform
   then slides the first one out and nothing replaces it. The viewport does the
   clipping instead. */
.cfp-car.is-enhanced .cfp-car__track {
  overflow: visible;
  scroll-snap-type: none;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .cfp-car.is-enhanced .cfp-car__track { transition: none; }
}
.cfp-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

.cfp-track {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: stretch;
  min-height: 300px;
}

/* Left panel ---------------------------------------------------------------- */
.cfp-track__side {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2rem 1.9rem 2.1rem;
  /* A shade under --oxford-brown so the panel reads as a card on the band. */
  background: #3B2E21;
}
.cfp-track__ghost {
  position: absolute;
  z-index: -1;
  right: -.4rem;
  top: -1.4rem;
  font-family: var(--font-display);
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(237, 227, 220, .06);
  pointer-events: none;
}
.cfp-track__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.1rem;
  border-radius: var(--radius);
  background: rgba(191, 167, 111, .14);
  border: 1px solid rgba(191, 167, 111, .3);
  /* 5.17:1 on #3B2E21. */
  color: var(--faded-gold);
}
.cfp-track__side h3 {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  margin: 0 0 1.4rem;
  color: var(--antique-ivory);
}

.cfp-track__label {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
/* Gold on the dark panel; olive on the white one. */
.cfp-track__side .cfp-track__label { color: var(--faded-gold); }
.cfp-track__body .cfp-track__label { color: var(--olive-on-light); }
.cfp-track__body .cfp-track__label + * { margin-top: 0; }

/* Right panel --------------------------------------------------------------- */
.cfp-track__body {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.9rem 1.5rem;
  background: #fff;
}
.cfp-track__focus { margin: 0 0 1.4rem; }
.cfp-track__focus li { margin-bottom: .5rem; }
.cfp-track__focus li:last-child { margin-bottom: 0; }
.cfp-track__outcome {
  margin: 0;
  padding-bottom: 1.3rem;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--body-brown);
  border-bottom: 1px solid var(--hairline);
}
.cfp-track__count {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* 5.03:1 on white. */
  color: var(--olive-on-light);
}

/* Arrows -------------------------------------------------------------------- */
.cfp-car__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(191, 167, 111, .45);
  background: rgba(237, 227, 220, .06);
  /* 5.74:1 on the moss band. */
  color: var(--faded-gold);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cfp-car__nav:hover { background: var(--faded-gold); color: var(--charcoal-slate); border-color: var(--faded-gold); }
.cfp-car__nav:focus-visible { outline: 2px solid var(--faded-gold); outline-offset: 3px; }
.cfp-car__nav--prev { left: 0; }
.cfp-car__nav--prev svg { transform: rotate(180deg); }
.cfp-car__nav--next { right: 0; }

.cfp-actions { margin-top: 2.4rem; }

@media (max-width: 860px) {
  /* Panels stack and the arrows move to a centred pair beneath the card.
     They stay absolutely positioned against .cfp-car rather than becoming grid
     items: making the carousel a grid gave .cfp-car__viewport a max-content
     width — the full width of all ten slides — and the card rendered empty. */
  .cfp-car { padding-inline: 0; padding-bottom: 3.9rem; }
  .cfp-track { grid-template-columns: 1fr; min-height: 0; }
  .cfp-car__nav { top: auto; bottom: 0; transform: none; }
  .cfp-car__nav--prev { left: 50%; margin-left: -2.9rem; }
  .cfp-car__nav--next { right: 50%; margin-right: -2.9rem; }
}

@media (max-width: 520px) {
  .cfp-track__side,
  .cfp-track__body { padding: 1.5rem 1.25rem; }
  .cfp-track__ghost { font-size: 5.5rem; }
}

/* ==========================================================================
   45. SDG alignment grid
   The seventeen goals on a single card, with the ones our tracks map to picked
   out. Named .goal-* rather than .sdg-* because .sdg-tile already exists, at a
   fixed 46x46, for the per-track chips on session.php and session-and-tracks.
   Tile colours come from $SDG_COLOURS as a --sdg custom property, and
   --sdg-ink is whichever of white / near-black sdg_ink() measured as readable
   on that colour — several goal colours are light enough that white fails.
   ========================================================================== */
.sdg-align {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.sdg-align__bar {
  padding: 1.1rem 1.6rem;
  background: var(--charcoal-slate);
  text-align: center;
}
.sdg-align__bar h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  /* 10.72:1 on the slate bar. */
  color: var(--antique-ivory);
}
/* 5.82:1 on the slate bar. */
.sdg-align__bar h2 span { color: var(--faded-gold); }

.sdg-align__intro { padding: 1.5rem 1.6rem 0; }
.sdg-align__intro p {
  max-width: 86ch;
  margin: 0 auto;
  text-align: center;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--body-brown);
}

.sdg-align__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 1.6rem 1.2rem;
}
.sdg-align__head h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.sdg-align__head p { margin: 0; font-size: .85rem; color: var(--body-brown); }

.sdg-align__figures { display: flex; gap: 1.9rem; margin: 0; }
.sdg-align__figures div { text-align: center; }
.sdg-align__figures dt {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  /* 6.24:1 on white. */
  color: var(--deep-chestnut);
}
.sdg-align__figures dd {
  margin: .25rem 0 0;
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  /* 5.03:1 on white. */
  color: var(--olive-on-light);
}

/* Tiles --------------------------------------------------------------------- */
.goals-grid {
  list-style: none;
  margin: 0;
  padding: 0 1.6rem 1.4rem;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: .55rem;
}
.goal {
  min-width: 0;
  transition: transform var(--transition);
}
/* The caption sits outside the coloured square, on the card's white ground.
   Inside it the official artwork left only ~46px of tile for a 53px line, so
   overflow clipped it — and 9px of ink on the goal colour would not have been
   readable anyway. */
.goal__art {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sdg);
  /* Goals no track maps to recede. Only the square dims; the caption below
     keeps its full contrast, so every goal stays readable. */
  opacity: .4;
  transition: opacity var(--transition);
}
.goal.is-covered .goal__art,
.goal:hover .goal__art { opacity: 1; }

.goal:hover { transform: translateY(-3px); }

.goal__art { display: block; line-height: 0; }
.goal__art img { display: block; width: 100%; height: auto; }
/* Fallback when the artwork is missing — currently goal 17. */
.goal__no {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sdg-ink);
}
.goal__name {
  display: block;
  padding: .4rem .1rem 0;
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.4;
  /* 12.6:1 on the card's white ground. */
  color: var(--body-brown);
}
.goal__name b { color: var(--olive-on-light); }

.sdg-align__note {
  margin: 0;
  padding: 0 1.6rem 1.6rem;
  text-align: center;
  font-size: .76rem;
  color: var(--olive-on-light);
}

@media (max-width: 1100px) { .goals-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .goals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .goals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 1.1rem; }
  .sdg-align__intro,
  .sdg-align__head,
  .sdg-align__note { padding-inline: 1.1rem; }
  .sdg-align__head { align-items: flex-start; }
  .sdg-align__figures { gap: 1.2rem; }
}

/* ==========================================================================
   46. Research journey path
   The six IFERP steps as a path: a 3 x 2 grid read left-to-right then
   right-to-left, threaded with a dotted rule. Connectors are pseudo-elements,
   so they stay out of the accessibility tree; the <ol> carries the order.
   ========================================================================== */
.rj {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.1rem, 2.5vw, 2.25rem) clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--card-ivory-3);
}
.rj__head { text-align: center; margin-bottom: 1.4rem; }

/* The Lottie stage. 2100x1080 is the animation's own box, so reserving that
   ratio keeps the section from jumping when it loads. */
.rj__stage { max-width: 1100px; margin: 0 auto; }
.rj__anim { width: 100%; aspect-ratio: 2100 / 1080; }
/* Empty until the player renders into it, so it holds no height of its own. */
.rj__anim:not([data-lottie-ready]) { aspect-ratio: auto; }
/* The written version steps aside only once the animation is actually on
   screen — see sections/research-journey.php. */
.rj__anim[data-lottie-ready] + .rj__fallback { display: none; }

@media (max-width: 900px) {
  /* The animation's text is baked into the artwork, so at 414px it renders
     about 275x141 and is unreadable. Below 900px the written version takes
     over instead. A display:none element never intersects, so the 510 KB of
     player and JSON are not fetched on a phone either. */
  .rj__anim { display: none; }
  .rj__anim[data-lottie-ready] + .rj__fallback { display: block; }
}
.rj__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--charcoal-slate);
}
/* 6.24:1 on --card-ivory-3. */
.rj__title span { color: var(--deep-chestnut); font-style: italic; }

.rj__quote {
  position: relative;
  max-width: 68ch;
  margin: 0 auto 2.4rem;
  padding-left: 2.6rem;
  border: 0;
}
.rj__quote-mark {
  position: absolute;
  left: 0;
  top: -.5rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  /* 5.95:1 on --card-ivory-3. */
  color: var(--gold-on-light);
}
.rj__quote p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--body-brown);
}

/* The path ------------------------------------------------------------------ */
.rj__path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.6rem 2.2rem;
  counter-reset: none;
}
.rj__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  min-width: 0;
}
/* Serpentine: the second row runs right to left, so 4 sits under 3. */
.rj__step:nth-child(4) { grid-column: 3; grid-row: 2; }
.rj__step:nth-child(5) { grid-column: 2; grid-row: 2; }
.rj__step:nth-child(6) { grid-column: 1; grid-row: 2; }

/* Dotted connector to the next node, drawn in the gap between columns. */
.rj__step::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 2.2rem;
  border-top: 2px dotted var(--hairline-hover);
  pointer-events: none;
}
.rj__step:nth-child(1)::after,
.rj__step:nth-child(2)::after { left: 100%; }
/* Row two runs backwards, so its connectors point the other way. */
.rj__step:nth-child(5)::after,
.rj__step:nth-child(6)::after { right: 100%; }
/* 3 to 4 is a row change, not a step across — no connector. */
.rj__step:nth-child(3)::after,
.rj__step:nth-child(4)::after { content: none; }

.rj__node { position: relative; flex: 0 0 auto; }
.rj__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--hairline);
  /* 5.31:1 on white. */
  color: var(--burnt-umber);
}
.rj__num {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  background: var(--deep-chestnut);
  /* 8.48:1 on --deep-chestnut. */
  color: var(--antique-ivory);
}

.rj__body { min-width: 0; font-size: .82rem; line-height: 1.65; color: var(--body-brown); }
.rj__body b {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--charcoal-slate);
}

.rj__actions { margin-top: 2.4rem; }

@media (max-width: 900px) {
  .rj__path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.6rem; }
  /* Two columns cannot hold the serpentine, so the explicit placement and the
     connectors both come off and the steps simply read in order. */
  .rj__step:nth-child(n) { grid-column: auto; grid-row: auto; }
  .rj__step::after { content: none; }
}

@media (max-width: 560px) {
  .rj__path { grid-template-columns: 1fr; gap: 1.5rem; }
  .rj__quote { padding-left: 2.1rem; margin-bottom: 1.8rem; }
  .rj__quote-mark { font-size: 2.4rem; }
}

/* ==========================================================================
   47. Partners page — logo wall and indexing grid
   The homepage shows these logos in a scrolling strip; here they sit still so
   they can be read. Each logo was normalised to 260x72 on white, so the tiles
   are a fixed ratio and the artwork is contained rather than cropped.
   ========================================================================== */
.plogos {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: .9rem;
}
.plogo {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: .9rem 1rem;
  border-radius: var(--radius);
  /* The artwork carries its own white ground, so the tile matches it rather
     than framing it in a different tint. */
  background: #fff;
  border: 1px solid var(--hairline);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.plogo:hover {
  border-color: var(--hairline-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.plogo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58px;
  /* contain, not cover: a cropped institutional mark is worse than a small one. */
  object-fit: contain;
}

/* Indexing ------------------------------------------------------------------ */
.idx-grid {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}
.idx-grid li {
  display: grid;
  place-items: center;
  min-width: 150px;
  padding: 1rem 1.3rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(191, 167, 111, .3);
}
.idx-grid img { display: block; width: auto; max-width: 120px; height: auto; }
.idx-grid__text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  /* 6.24:1 on white. */
  color: var(--deep-chestnut);
}

.idx-note {
  max-width: 70ch;
  margin: 0 auto;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  text-align: center;
  font-size: .86rem;
  line-height: 1.7;
  /* 7.29:1 on --charcoal-slate. */
  color: var(--ivory-muted);
  background: rgba(237, 227, 220, .05);
  border: 1px solid rgba(191, 167, 111, .22);
}
/* 5.82:1 on the same ground. */
.idx-note strong { color: var(--faded-gold); }

@media (max-width: 520px) {
  .plogos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .plogo { padding: .7rem .75rem; }
  .idx-grid li { min-width: 0; flex: 1 1 140px; }
}

/* ==========================================================================
   48. Floating call to action
   A dark pill at the foot of the viewport holding the hero's two actions.
   Shown by main.js once the hero has scrolled away; see includes/footer.php.
   ========================================================================== */
.cta-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1035;          /* under .floaties (1040) so it never covers them */
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem;
  border-radius: 999px;
  background: var(--charcoal-slate);
  border: 1px solid rgba(191, 167, 111, .34);
  box-shadow: var(--shadow-dark);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.cta-dock.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* display: flex above beats the browser's own [hidden] { display: none }, so
   with JS off the pill still took up space. Restated here. */
.cta-dock[hidden] { display: none; }

/* Pill ends, and .btn-wc + .btn-wc carries no side margin — the gap does it. */
.cta-dock .btn-wc { border-radius: 999px; white-space: nowrap; gap: .45rem; }

/* The dock sits centred and the round floaties sit bottom-right. Below this
   they would overlap, so the dock stops short of them rather than sliding
   under: it gives up the centre and takes the left instead. */
@media (max-width: 720px) {
  .cta-dock {
    left: 14px;
    right: 84px;           /* clear of the 48px floaties plus their gutter */
    transform: translateY(14px);
    justify-content: center;
  }
  .cta-dock.is-visible { transform: translateY(0); }
  .cta-dock .btn-wc { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .7rem; }
}

@media (max-width: 420px) {
  /* Two labels plus two icons will not fit; the icons go and the labels stay,
     since the words are what tell you where the button leads. */
  .cta-dock .btn-wc svg { display: none; }
  .cta-dock .btn-wc { font-size: .64rem; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-dock { transition: opacity var(--transition), visibility var(--transition); transform: translateX(-50%); }
  .cta-dock.is-visible { transform: translateX(-50%); }
}