/* ==========================================================================
   AFRINIC-38 Public Policy Meeting

   Palette, nothing outside it: orange #d15e14 (AFRINIC), blue #001489,
   green #007749, yellow #ffb81c (the South African colours carried by the
   mark), white, ink #111111. No pastel teal, no greys.

   Roles, from the client's colour review of 2026-10-11 (which keeps the
   2026-09-14 layout directions):
     orange      -> primary: titles (h1, h2), the countdown, accent rules
     blue        -> structure: rules and grids, subtitles (h3, field labels),
                    the marquee, ticket field, asides and the onsite pass
     green       -> wayfinding and confirmation: controls (white capsule,
                    green border and label), links on hover, icons, the
                    current page, the remote pass, the live countdown label
     yellow      -> attention, small quantities only: button hover, the
                    agenda break marker, selection and focus
     ink         -> body copy (justified) and the footer ground
     grounds     -> white throughout.

   WCAG AA is binding. Green on white is 4.9:1 and blue 15:1, so both carry
   type at any size. Orange on white is 3.95:1, so it carries large type
   only (24px, or 18.66px bold, and up): every title qualifies, small labels
   such as the header wordmark stay green. Yellow is 1.7:1 and never
   carries type.
   ========================================================================== */

/* Brand cuts from the AF38 collateral (brand.json): Bold Extended is the display
   face, Medium Condensed Oblique the secondary. Headings and body stay on the
   system Helvetica stack at 700/400, as the guidelines say. Self-hosted, WOFF2. */
@font-face { font-family: "HN Bold Extended"; src: url("../assets/fonts/hn-bold-extended.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "HN Condensed Oblique"; src: url("../assets/fonts/hn-medium-condensed-oblique.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --orange: #d15e14;
  --blue: #001489;
  --green: #007749;
  --yellow: #ffb81c;
  --white: #fff;
  --ink: #111111;

  /* Type and rules, tinted from ink or from the foreground. No greys. */
  --body: var(--ink);
  --muted: rgba(17, 17, 17, .62);
  --on-ink: var(--white);
  --on-ink-soft: rgba(255, 255, 255, .78);
  --hair: rgba(0, 20, 137, .2);
  --hair-on-ink: rgba(255, 255, 255, .2);

  --font-title: "HN Bold Extended", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-secondary: "HN Condensed Oblique", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3rem, 6.5vw, 5.25rem);
  --header-h: 80px;
  --radius: 18px;
  --pill: 999px;
  --shadow: 0 24px 40px -24px rgba(17, 17, 17, .34), 0 2px 6px -2px rgba(17, 17, 17, .1);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Base and browser surfaces
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--orange) var(--white); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: var(--ink); }
/* Two rings, because one never clears both grounds: yellow reads on ink at
   10.9:1 but only 1.73:1 on white, so an ink ring sits outside it. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--yellow); border-radius: 4px; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: .18em; text-decoration-color: rgba(0, 119, 73, .5); }
a:hover { color: var(--green); text-decoration-color: currentColor; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
/* Titles in title case at the client's request; sentence-length statements opt out. */
h1, h2, h3 { text-transform: capitalize; }
.statement { text-transform: none; }
h1, h2 { color: var(--orange); }
h3, h4 { color: var(--blue); }
/* Justified, hyphenated running copy at the client's request. Justification
   needs hyphenation to avoid rivers in narrow measures. */
p, dd { margin: 0 0 1rem; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
dd { margin-bottom: 0; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }
.icon { width: 1.1em; height: 1.1em; flex: none; color: var(--green); }
.icon-lg { width: 2.5rem; height: 2.5rem; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
/* Two white sections in a row share one interval; a ruled band keeps its own,
   and so does the section after one, which would otherwise sit on its rule. */
.section + .section:not(.band-rule) { padding-top: 0; }
.section.band-rule + .section { padding-top: var(--section); }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--white); padding: .6rem 1rem; border-radius: 8px; z-index: 200; font-weight: 700; }
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.display { font-family: var(--font-title); font-size: clamp(1.6rem, 2.9vw, 2.25rem); letter-spacing: 0; line-height: 1.12; }
/* The subtitle tier: the blue line under a green title. */
.lead, .subtitle { font-family: var(--font-secondary); font-weight: 500; font-style: italic; font-size: 1.35rem; line-height: 1.35; color: var(--blue); max-width: 46ch; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.subtitle { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: .9rem; }
.note { color: var(--muted); font-size: .95rem; margin-top: 2rem; max-width: 70ch; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.prose { max-width: 66ch; }
.prose h2 { font-size: 1.55rem; margin: 2.5rem 0 .75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 1.9rem 0 .5rem; }
.prose h2 + h3 { margin-top: .9rem; }
.prose .btn { margin-top: 1rem; }
.prose-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split-center { align-items: center; }
.split-text { padding-top: .4rem; }
.split-text .btn { margin-top: 1.5rem; }
.split .display { max-width: 18ch; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; margin-top: .5rem; }
.text-link:hover { color: var(--green); }
.text-link .icon { transition: transform .3s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }
.text-link-cal { margin-top: 0; }
.text-link-cal:hover .icon { transform: none; }
.inline-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.notes { margin-top: 2.5rem; max-width: 72ch; color: var(--muted); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Buttons: one capsule everywhere, white with the mark's green border and
   label, yellow under the pointer with an ink label (10.9:1).
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; line-height: 1; border-radius: var(--pill); border: 2px solid var(--green); background: var(--white); color: var(--green); padding: .95rem 1.6rem; font-size: 1rem; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--yellow); color: var(--ink); transform: translateY(-1px); }
.btn:hover .icon { color: var(--ink); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .65rem 1.2rem; font-size: .92rem; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   Logo. The official mark carries its own white field, so nothing is drawn
   behind it and nothing clips it. The wrapper only reserves the square.
   -------------------------------------------------------------------------- */
.logo-badge { display: block; aspect-ratio: 1; flex: none; }
.logo-badge img { width: 100%; height: auto; border-radius: 50%; }

/* A ruled band: white ground closed by hairlines, with registration corner
   marks in orange. The only ornament the pages carry. */
.band-rule { position: relative; border-block: 1px solid var(--hair); }
.band-rule::before, .band-rule::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background:
  linear-gradient(var(--orange), var(--orange)) left / 1px 100% no-repeat,
  linear-gradient(var(--orange), var(--orange)) right / 1px 100% no-repeat; }
.band-rule::before { top: 0; }
.band-rule::after { bottom: 0; }

/* --------------------------------------------------------------------------
   Header: white, closed by a hairline. "About AFRINIC-38" and "Travel" carry
   submenus that open on hover or keyboard focus with no script involved.
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--hair); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .9rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-logo { width: 54px; }
.brand-meta { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; font-size: 1rem; color: var(--green); }
.header-cta { display: none; }
.brand-place { font-family: var(--font-secondary); font-weight: 500; font-style: italic; color: var(--blue); font-size: .95rem; }
.nav-list { display: flex; align-items: center; gap: 1.9rem; }
.nav-list a:not(.btn) { font-weight: 400; font-size: .97rem; color: var(--ink); text-decoration: none; }
.nav-list > li > a:not(.btn) { display: inline-block; padding-block: .35rem; position: relative; }
.nav-list > li > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-list a:not(.btn):hover { color: var(--green); }
.nav-list > li > a:not(.btn):hover::after, .nav-list > li > a[aria-current="page"]::after, .has-sub:focus-within > a::after { transform: scaleX(1); }
.has-sub { position: relative; }
.sub-list { position: absolute; top: 100%; left: -1.1rem; min-width: 15rem; margin-top: .5rem; padding: .5rem 0; background: var(--white); border: 1px solid var(--hair); box-shadow: var(--shadow); display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; }
/* Bridges the gap between the parent link and the panel so the pointer can cross it. */
.sub-list::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.has-sub:hover .sub-list, .has-sub:focus-within .sub-list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s; }
.sub-list a:not(.btn) { display: block; padding: .5rem 1.1rem; }
.sub-list a[aria-current="page"] { color: var(--green); font-weight: 700; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero (home): white, green title, blue subtitle, ink copy, the mark at the
   right, and the meeting's facts as a ruled register underneath.
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--white); color: var(--body); }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); }
.hero h1 { font-family: var(--font-title); font-size: clamp(2.4rem, 5.4vw, 4.25rem); font-weight: 700; letter-spacing: 0; line-height: 1.02; color: var(--orange); }
.hero-sub { font-family: var(--font-secondary); font-weight: 500; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.3; color: var(--blue); margin: 1rem 0 1.5rem; text-align: left; }
.hero-lead { max-width: 52ch; font-size: 1.1rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.5rem; }
.hero-visual { display: flex; justify-content: center; align-items: center; }
/* The mark is six stacked SVG layers that main.js assembles on load: the
   strokes draw through masks, the pieces turn in from behind the page. Layers
   start hidden and the masks open, so the mark is complete with scripting off
   (noscript rule in index.html) or with motion reduced. */
.hero-mark { position: relative; width: min(100%, 440px); aspect-ratio: 1; perspective: 1200px; }
.hero-mark-layer { position: absolute; inset: 0; opacity: 0; transform-origin: 50% 50%; }
.hero-mark svg { display: block; width: 100%; height: 100%; }
.hero-mark mask path { stroke-dashoffset: 0; }
.hero .hero-facts { margin-top: 0; }

.countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 1rem; font-size: .95rem; color: var(--muted); text-align: left; }
/* Orange is 3.95:1 on white, so the numerals stay large and bold, where 3:1 applies. */
.countdown-unit b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--orange); font-variant-numeric: tabular-nums; margin-right: .35rem; }
.countdown-label { flex-basis: 100%; font-size: .85rem; }
.countdown.is-live .countdown-label { color: var(--green); font-weight: 700; }

/* One authored moment: the copy settles on load while the mark assembles. Nothing else animates on scroll. */
.hero-copy > * { animation: settle .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; }
.hero-copy > :nth-child(3) { animation-delay: .12s; }
.hero-copy > :nth-child(4) { animation-delay: .18s; }
.hero-copy > :nth-child(5) { animation-delay: .24s; }
.hero-copy > :nth-child(6) { animation-delay: .3s; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Page banner (inner pages): the same title, subtitle and copy as the hero.
   -------------------------------------------------------------------------- */
.page-banner { position: relative; background: var(--white); color: var(--body); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--hair); }
.page-banner .container { position: relative; }
.page-banner h1 { font-family: var(--font-title); color: var(--orange); font-size: clamp(1.9rem, 3.9vw, 3rem); font-weight: 700; letter-spacing: 0; max-width: 18ch; }
.banner-lead { font-family: var(--font-secondary); font-weight: 500; font-style: italic; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.35; color: var(--blue); max-width: 60ch; margin-top: 1.25rem; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .88rem; margin-bottom: 1.5rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current] { color: var(--ink); }

/* Sub-navigation for a page and its subpage (About AFRINIC-38 / Remote). */
.subnav { display: flex; flex-wrap: wrap; gap: 0 2rem; border-bottom: 1px solid var(--hair); }
.subnav a { display: inline-block; padding: 1rem 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--green); }
.subnav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }

/* --------------------------------------------------------------------------
   Marquee band. Not a ticker: the track is wider than the viewport, centred,
   and slides sideways in step with the page scroll (main.js). One band per
   page, carrying short caps only. Blue at the client's request.
   -------------------------------------------------------------------------- */
.marquee { display: flex; justify-content: center; overflow: hidden; background: var(--blue); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.25rem); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.marquee-track { display: flex; flex: none; width: max-content; align-items: center; gap: 2.25rem; padding-block: 1.15rem; will-change: transform; }
.marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--white); }

/* --------------------------------------------------------------------------
   Facts (definition list, hairline rules)
   -------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: clamp(3rem, 6vw, 5rem); }
.facts-3 { grid-template-columns: repeat(3, 1fr); }
.facts > div { padding: 1.4rem 1.5rem 1.4rem 0; border-right: 1px solid var(--hair); margin-right: 1.5rem; }
.facts > div:last-child { border-right: 0; margin-right: 0; }
.facts dt { font-family: var(--font-secondary); font-weight: 500; font-style: italic; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin-bottom: .35rem; }
.facts dd { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.35; text-align: left; }
.aside .facts { grid-template-columns: 1fr; margin-top: 1rem; margin-bottom: 1.75rem; border-top: 0; border-bottom-color: var(--hair-on-ink); }
.aside .facts > div { border-right: 0; margin-right: 0; padding: .9rem 0; border-top: 1px solid var(--hair-on-ink); }
.aside .facts dt { color: var(--on-ink-soft); }
.aside .facts dd { color: var(--white); font-size: 1rem; }

/* Aside: the blue panel the guidelines reserve for wayfinding. */
.aside { position: sticky; top: calc(var(--header-h) + 1.5rem); background: var(--blue); color: var(--on-ink-soft); padding: 1.75rem; }
.aside h2 { font-size: 1.25rem; color: var(--white); }
.aside a:not(.btn) { color: var(--white); text-decoration-color: rgba(255, 255, 255, .5); }
.aside a:not(.btn):hover { color: var(--yellow); text-decoration-color: currentColor; }
.aside .text-link { color: var(--white); }
.aside .text-link:hover { color: var(--yellow); }
.aside .note, .aside p { color: var(--on-ink-soft); }
.aside .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Why participate (statement + list)
   -------------------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.why-grid h2 { font-family: var(--font-title); font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: 0; line-height: 1.12; }
.why-item { padding: 1.6rem 0; border-top: 1px solid var(--hair); }
.why-item:last-child { border-bottom: 1px solid var(--hair); }
.why-item h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.why-item p { max-width: 52ch; }

/* --------------------------------------------------------------------------
   Photo slides (home). A scroll-snap strip that works with no script; the
   arrows are added by main.js. Frames without a photograph yet say so.
   The strip runs edge to edge of the window, starting at its left edge.
   -------------------------------------------------------------------------- */
.slides { padding-block: 0 var(--section); }
.slides-track { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-inline: 0; padding-bottom: 1rem; }
.slide { position: relative; flex: 0 0 min(100% - 2 * var(--gutter), 720px); aspect-ratio: 3 / 2; scroll-snap-align: start; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-placeholder { display: flex; align-items: flex-end; padding: 1.25rem 1.5rem; border: 1px solid var(--hair); color: var(--muted); font-family: var(--font-display); font-size: .92rem; background:
  linear-gradient(var(--orange), var(--orange)) left top / 1px 9px no-repeat,
  linear-gradient(var(--orange), var(--orange)) right top / 1px 9px no-repeat,
  linear-gradient(var(--orange), var(--orange)) left bottom / 1px 9px no-repeat,
  linear-gradient(var(--orange), var(--orange)) right bottom / 1px 9px no-repeat; }
.slide-placeholder .icon { position: absolute; inset: 0; margin: auto; width: 2.5rem; height: 2.5rem; opacity: .55; }
.slides-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; margin-top: 1.5rem; }
.slides-foot p { max-width: 62ch; margin: 0; }
.slides-foot .slides-note { font-family: var(--font-secondary); font-weight: 500; font-style: italic; color: var(--blue); font-size: 1rem; margin-bottom: .6rem; text-align: left; }
.slides-actions { display: flex; align-items: center; gap: 1.25rem; }
.slides-nav { display: flex; gap: .6rem; }
.slides-nav button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--green); background: var(--white); color: var(--green); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.slides-nav button:hover { background: var(--yellow); color: var(--ink); }
.slides-nav button:hover .icon { color: var(--ink); }
.slides-nav .icon { width: 1.25rem; height: 1.25rem; }

/* --------------------------------------------------------------------------
   Agenda. Breaks are lifted on a yellow field, one of the South African
   colours the mark carries, so the day's shape reads at a glance.
   -------------------------------------------------------------------------- */
.agenda-time { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.agenda-time span, .facts dd span { padding-inline: .25rem; }
.agenda { border-top: 1px solid var(--hair); }
.agenda-row { display: grid; grid-template-columns: 170px 1fr; gap: .5rem 2.5rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--hair); }
.agenda-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.agenda-title { font-weight: 400; color: var(--ink); font-size: 1.05rem; }
.agenda-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; font-size: .85rem; color: var(--muted); }
.agenda-tag { font-family: var(--font-display); font-weight: 700; color: var(--blue); letter-spacing: .02em; text-decoration: none; }
.agenda-tag:hover { color: var(--green); text-decoration: underline; }
.agenda-policy .agenda-title { color: var(--ink); font-weight: 700; }
.agenda-institutional .agenda-note { color: var(--green); font-weight: 700; }
.agenda-break .agenda-title::before { content: ""; display: inline-block; width: 1.1rem; height: .4rem; margin-right: .6rem; vertical-align: .2em; border-radius: 2px; background: var(--yellow); }
.agenda-break .agenda-title { color: var(--ink); }
.agenda-break .agenda-time { color: var(--ink); }
.agenda-title a { color: inherit; text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .3); text-underline-offset: .2em; }
.agenda-title a:hover { color: var(--green); }

/* --------------------------------------------------------------------------
   Proposals (ruled list)
   -------------------------------------------------------------------------- */
.proposal-id { font-family: var(--font-secondary); font-weight: 500; font-style: italic; font-size: 1rem; letter-spacing: .04em; color: var(--blue); }
.proposal-status { font-size: .85rem; color: var(--muted); font-weight: 400; margin-top: .5rem; text-align: left; }
.proposal-list { margin-top: 2rem; border-top: 1px solid var(--hair); }
.proposal-list li { display: grid; grid-template-columns: 220px 1fr; gap: .75rem 2.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--hair); }
.proposal-list h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.proposal-list h3 a { color: inherit; text-decoration: none; }
.proposal-list h3 a:hover { color: var(--green); }
.proposal-list p { max-width: 62ch; }
.proposal-list .text-link { margin-top: .25rem; }

/* --------------------------------------------------------------------------
   Sponsorship packages: the proposals' ruled register, with the package,
   its price and its availability in the left column.
   -------------------------------------------------------------------------- */
.tier-list { border-top: 1px solid var(--hair); }
.tier-list > li { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: .75rem 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--hair); }
.tier-head h3 { font-size: 1.4rem; }
.tier-price { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: .6rem 0 .3rem; text-align: left; }
.tier-cap { font-family: var(--font-secondary); font-weight: 500; font-style: italic; font-size: 1rem; letter-spacing: .04em; color: var(--blue); margin-top: .6rem; text-align: left; }
.tier-price + .tier-cap { margin-top: 0; }
.tier-body p { max-width: 62ch; }
.benefit-list { columns: 2 17rem; column-gap: 2.5rem; margin-top: 1.25rem; }
.benefit-list li { break-inside: avoid; padding: .6rem 0; border-top: 1px solid var(--hair); font-size: .98rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Passes (flat colour blocks). Blue is the onsite panel; green marks the
   remote, live side of the meeting.
   -------------------------------------------------------------------------- */
.passes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.passes-lg { gap: 1.5rem; }
.pass { display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--radius); color: var(--white); }
.passes-lg .pass { padding: 2.25rem; }
.pass-blue { background: var(--blue); }
.pass-green { background: var(--green); }
.pass h2, .pass h3 { color: var(--white); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.pass-price { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: var(--white); line-height: 1.1; margin: .5rem 0 .15rem; text-align: left; }
.pass-note { color: var(--white); font-size: .95rem; text-align: left; }
.register-action { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.register-action .note { margin-top: 0; }

.check-list { display: grid; gap: .6rem; margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.check-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; }
.check-list li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; background: var(--white); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* --------------------------------------------------------------------------
   Photo and info list
   -------------------------------------------------------------------------- */
.photo { margin: 0; }
/* height: auto lets aspect-ratio win over the height attribute; each photo sets
   its own focal point inline with object-position. */
.photo img, .photo-placeholder { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 400; }
.photo-placeholder .icon { opacity: .7; }
.photo-wide { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* A photo directly under the banner sits closer to it than a full section interval. */
.section-photo { padding-top: clamp(2.5rem, 5vw, 4rem); }
.photo figcaption { margin-top: .75rem; font-size: .88rem; color: var(--muted); }
/* Venue: the hotel photograph is small (510 x 450), so it sits at its own
   size and shape beside the hotel details rather than stretched to 16:9. */
.venue-intro { display: grid; grid-template-columns: minmax(0, 510px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.venue-intro:last-child { margin-bottom: 0; }
.photo-venue img { width: 100%; height: auto; aspect-ratio: 510 / 450; object-fit: cover; }
.info-list.info-list-single { grid-template-columns: 1fr; }
.info-list-single > div:first-child { border-top: 0; padding-top: 0; }
.info-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); }
.info-list > div { padding: 1.75rem 0; border-top: 1px solid var(--hair); }
.info-list dt { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--blue); margin-bottom: .5rem; }
.info-list dd { max-width: 52ch; }
.info-list dd + dd { margin-top: .75rem; }
/* A field whose value the client has yet to supply: shown as such, never simulated. */
/* A short ruled list inside prose: the page's hairline register at list scale.
   The base reset removes bullets, so the rules are what separate the items. */
.rule-list { margin-top: 1.25rem; border-top: 1px solid var(--hair); }
.rule-list li { max-width: 60ch; padding: .9rem 0; border-bottom: 1px solid var(--hair); }

.pending { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .95rem; }
.pending dt { color: var(--blue); font-family: var(--font-display); font-weight: 700; }
.pending dd { color: var(--muted); text-align: left; }

/* --------------------------------------------------------------------------
   Remote
   -------------------------------------------------------------------------- */
.icon-list li { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.25rem 0; border-top: 1px solid var(--hair); }
.icon-list li:last-child { border-bottom: 1px solid var(--hair); }
.icon-list .icon { width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
.icon-list div { display: flex; flex-direction: column; gap: .15rem; }
.icon-list strong { font-family: var(--font-display); color: var(--blue); font-size: 1.1rem; }
.icon-list span { color: var(--muted); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Ticket call to action, partners and footer. The blue field carries only
   the ticket; the ticket itself is white, so the reading copy still sits on
   white as it does everywhere else.
   -------------------------------------------------------------------------- */
.ticket-section { background: var(--blue); padding-block: clamp(3rem, 7vw, 5.5rem); }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px 300px; align-items: stretch; background: var(--white); color: var(--body); border-radius: 32px; overflow: hidden; }
.ticket-main { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
.ticket-logo { width: clamp(96px, 11vw, 150px); }
.ticket h2 { font-family: var(--font-title); color: var(--orange); font-size: clamp(1.3rem, 2.1vw, 1.8rem); letter-spacing: 0; line-height: 1.15; max-width: 22ch; margin-bottom: 1.5rem; }
.ticket-perf { position: relative; justify-self: center; align-self: stretch; width: 0; border-left: 2px dashed rgba(17, 17, 17, .3); }
.ticket-perf::before, .ticket-perf::after { content: ""; position: absolute; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); transform: translateX(-50%); }
.ticket-perf::before { top: -22px; }
.ticket-perf::after { bottom: -22px; }
.ticket-stub { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2rem 2.5rem 2rem 1.75rem; }
.ticket-stub h3 { color: var(--blue); font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }
.ticket-price { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(3rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: -.03em; color: var(--orange); margin: .5rem 0 .4rem; text-align: left; }
.ticket-note { color: var(--muted); font-size: .92rem; max-width: 20ch; text-align: left; }
.ticket .btn .icon { transition: transform .3s var(--ease); }
.ticket .btn:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Partner logo wall / single partner showcase (home).
   -------------------------------------------------------------------------- */
.section.partners { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.partners .lead { margin-top: 1rem; max-width: 62ch; }
.partner-showcase { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 2.25rem; opacity: 0; transition: opacity .3s ease-out; }
.partner-showcase.is-visible { opacity: 1; }
.partner-role-label { font-family: var(--font-display); font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); margin-bottom: 1.25rem; text-align: center; }
.partner-logo-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; padding: .5rem; border-radius: 4px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.partner-logo-link:hover { opacity: .85; transform: translateY(-2px); }
.partner-logo-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.partner-logo-link img { width: 100%; max-width: 520px; height: auto; display: block; }
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; opacity: 0; transition: opacity .3s ease-out; }
.logo-wall.is-visible { opacity: 1; }
.logo-wall-single { grid-template-columns: minmax(0, 320px); }
.logo-slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 221 / 128; border: 1px solid var(--hair); color: var(--muted); font-family: var(--font-display); font-weight: 400; font-size: .92rem; }
a.logo-slot { text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
a.logo-slot:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.host-showcase { display: flex; justify-content: center; align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.host-logo-box { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; padding: .5rem; border-radius: 4px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.host-logo-box:hover { opacity: .85; transform: translateY(-2px); }
.host-logo-box:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.host-logo-box img { width: 100%; max-width: 520px; height: auto; display: block; }
.prose .host-logo-box { display: flex; margin: 0 auto clamp(2rem, 4vw, 3rem); }

.site-footer { background: var(--ink); color: var(--on-ink-soft); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) 3rem; border-bottom: 1px solid var(--hair-on-ink); }
.footer-logo { width: 84px; margin-bottom: 1.25rem; }
.footer-date { color: var(--white); font-family: var(--font-display); font-weight: 400; line-height: 1.45; text-align: left; }
/* Green on ink is 3.36:1, so the address is set large (1.2rem bold) where 3:1 applies. */
.footer-email { color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.footer-email:hover { color: var(--white); }
.footer-nav h2 { color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.footer-nav ul { display: grid; gap: .55rem; }
.footer-nav a, .footer-legal a, .footer-legal button { color: var(--on-ink-soft); text-decoration: none; }
.footer-nav a:hover, .footer-legal a:hover, .footer-legal button:hover { color: var(--green); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; font-size: .88rem; }
.footer-bottom p { text-align: left; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cookie-prefs-item { display: none; }
html.js .cookie-prefs-item { display: list-item; }
.cookie-prefs-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; transition: color .2s var(--ease); }

/* --------------------------------------------------------------------------
   Cookie management banner
   -------------------------------------------------------------------------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--white); border-top: 2px solid var(--blue); box-shadow: 0 -4px 24px rgba(17, 17, 17, .12); padding-block: clamp(1rem, 2vw, 1.5rem); }
.cookie-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.cookie-banner-copy { flex: 1 1 34rem; }
.cookie-banner-copy h2 { color: var(--orange); font-size: 1.25rem; font-weight: 700; margin-bottom: .35rem; }
.cookie-banner-copy p { color: var(--ink); font-size: .95rem; line-height: 1.5; margin: 0; text-align: left; }
.cookie-banner-copy a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.cookie-banner-copy a:hover { color: var(--green); }
.cookie-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Motion preferences and responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { animation: none; }
  .hero-mark-layer { opacity: 1; }
  .marquee-track { transform: none !important; }
  .logo-wall, .partner-showcase { transition: none; }
  .sub-list { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1024px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts > div:nth-child(3n) { border-right: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .ticket { grid-template-columns: minmax(0, 1fr) 72px 240px; }
  .ticket-stub { padding-inline: 1.5rem 1.25rem; }
}

@media (max-width: 860px) {
  .hero-inner, .split, .why-grid, .prose-grid, .info-list, .venue-intro { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-mark { width: min(70%, 290px); }
  .hero h1 { letter-spacing: -.03em; }
  .aside { position: static; }
  .split .display { max-width: none; }
  .proposal-list li, .tier-list > li { grid-template-columns: 1fr; gap: .5rem; }
  .slides-foot { grid-template-columns: 1fr; }

  .ticket { grid-template-columns: 1fr; border-radius: 24px; }
  .ticket-main { flex-direction: column; align-items: flex-start; padding: 2rem; }
  .ticket-logo { width: 96px; }
  .ticket-perf { justify-self: stretch; align-self: auto; width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(17, 17, 17, .3); }
  .ticket-perf::before, .ticket-perf::after { top: 50%; transform: translateY(-50%); }
  .ticket-perf::before { left: -22px; }
  .ticket-perf::after { left: auto; right: -22px; }
  .ticket-stub { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: 1.5rem 2rem; }
  .ticket-stub h3 { flex-basis: 100%; }
  .ticket-price { margin: 0; }
  .ticket-note { max-width: none; }

  .nav-toggle { display: flex; }
  /* Register stays one tap away in the phone header; the drawer keeps its own. */
  .header-cta { display: inline-flex; margin-left: auto; }
  .header-inner { gap: .75rem; }
  .primary-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--white); padding: 1.5rem var(--gutter); transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; overflow-y: auto; }
  .primary-nav.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--hair); }
  .nav-list > li > a:not(.btn) { display: block; padding: 1rem 0; font-size: 1.25rem; }
  .nav-list > li > a:not(.btn)::after { display: none; }
  .nav-list a:not(.btn)[aria-current="page"] { color: var(--green); }
  /* The submenu is simply part of the list in the drawer. */
  .sub-list { position: static; min-width: 0; margin: 0; padding: 0 0 .75rem 1.25rem; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .sub-list::before { display: none; }
  .sub-list a:not(.btn) { padding: .5rem 0; font-size: 1.05rem; }
  .nav-cta { padding-top: 1.25rem; border-bottom: 0; }
  .nav-cta .btn { width: 100%; }
  html.nav-open { overflow: hidden; }
}

@media (max-width: 600px) {
  .brand-meta { display: none; }
  .passes, .footer-inner { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--hair); }
  .facts > div:last-child { border-bottom: 0; }
  .agenda-row { grid-template-columns: 1fr; gap: .25rem; }
  .pending { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .pending dd { margin-bottom: .5rem; }
  .btn-lg { width: 100%; }
  .hero-actions { flex-direction: column; }
  .countdown-unit b { font-size: 2rem; }
  .hero-inner { padding-top: 2rem; gap: 1.5rem; }
  .hero-mark { width: min(45%, 170px); }
  .subnav { gap: 0 1.25rem; }
  .cookie-banner-inner { gap: 1rem; }
  .cookie-banner-actions { width: 100%; flex-direction: column; }
  .cookie-banner-actions .btn { width: 100%; }
}