/*
  RC28 Abu Dhabi conference site
  A build-free static site designed for GitHub Pages.
*/

:root {
  /* NYU identity.
     Violet is NYU's primary brand colour and now carries every dark surface,
     accent and heading rule on the site. The sand tones are kept from the
     original design as a warm secondary — they read Abu Dhabi, and they are
     the one pairing that stops a violet-only palette going flat.
     Neutrals are tinted towards violet rather than the old teal-grey, so
     body copy and small labels sit in the same family as the brand colour. */
  --violet: #57068c;
  --violet-deep: #2b0a44;
  --violet-mid: #7b2ba8;

  --ink: #1c0b28;
  --ink-soft: #574364;
  --muted: #6b5b78;
  --deep: #57068c;
  --deep-2: #7b2ba8;
  --paper: #f7f5f9;
  --white: #fff;
  --sand: #e7bd76;
  --sand-soft: #f1dfbc;
  --mist: #efe9f4;
  --line: rgba(28, 11, 40, 0.16);
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(3.5rem, 6vw, 5.5rem);
  /* Display face. NYU's identity is built on a geometric sans, so headings
     move off Georgia. Montserrat is a stand-in until the official brand
     fonts are available; swapping it is a one-line change here. */
  --display: 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; }

.container {
  width: min(100%, calc(var(--container) + (var(--gutter) * 2)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  color: var(--white);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

.site-header.is-scrolled,
.site-header:has(.site-nav.is-open) {
  background: rgba(43, 10, 68, 0.97);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
}

.nav-shell {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.brand__mark {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.brand__mark span { color: var(--sand); }

.brand__place {
  padding-left: 0.8rem;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.7rem);
}

.site-nav a {
  position: relative;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background-color 180ms ease, color 180ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible,
.nav-cta.is-active {
  background: var(--white);
  color: var(--ink);
}

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.65rem 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.32rem 0;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }

/* Shared type and controls */
.eyebrow {
  margin-bottom: 1.35rem;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow--dark { color: var(--muted); }

.button {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.45rem;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.button:hover:not(:disabled), .button:focus-visible:not(:disabled) { transform: translateY(-2px); }
.button--light { background: var(--white); color: var(--ink); }
.button--light:hover:not(:disabled), .button--light:focus-visible:not(:disabled) { background: var(--sand); }
.button--dark { background: var(--deep); color: var(--white); }
.button--dark:hover, .button--dark:focus-visible { background: var(--sand); color: var(--ink); }
.button--muted { border-color: var(--line); background: transparent; color: var(--ink); }
.button:disabled { cursor: not-allowed; opacity: 0.55; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link span { transition: transform 180ms ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(0.25rem); }
.text-link--light { color: var(--white); }

/* Home hero */
.hero-slider, .hero-slider .splide__track, .hero-slider .splide__list { height: max(43rem, 100svh); }
.hero-slider { position: relative; background: var(--deep); color: var(--white); }

.hero-slide {
  position: relative;
  overflow: hidden;
  background-color: var(--deep);
  background-position: center;
  background-size: cover;
}


.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 6, 38, 0.25), transparent 55%);
}

.hero-slide__shade,
.page-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 6, 38, 0.5) 0%, rgba(24, 6, 38, 0.04) 28%, rgba(24, 6, 38, 0.48) 100%),
    linear-gradient(90deg, rgba(24, 6, 38, 0.74) 0%, rgba(24, 6, 38, 0.33) 44%, rgba(24, 6, 38, 0.05) 78%);
}

.hero-slide__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7rem;
  padding-bottom: 8rem;
}

.hero-slide h1,
.hero-slide h2 {
  max-width: 920px;
  margin-bottom: 1.7rem;
  font-family: var(--display);
  font-size: clamp(3.7rem, 7.8vw, 7.6rem);
  font-weight: 600;
  letter-spacing: -0.029em;
  line-height: 0.91;
}

.hero-lede {
  max-width: 630px;
  margin-bottom: 2.4rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.mobile-break { display: none; }

.hero-controls {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 2.2rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  pointer-events: none;
}

.hero-controls > * { pointer-events: auto; }

.hero-arrow {
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.hero-arrow:hover, .hero-arrow:focus-visible { background: var(--white); color: var(--ink); }

.hero-progress {
  width: clamp(5rem, 10vw, 8rem);
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.hero-progress span {
  display: block;
  width: 33.33%;
  height: 100%;
  background: var(--white);
  transition: width 400ms ease;
}

.hero-counter {
  min-width: 4.3rem;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.hero-slide__content > * { opacity: 1; transform: none; }

/* Content sections */
.section { padding-block: var(--section); }
.section--tint { background: var(--mist); }

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.75fr);
  gap: clamp(3rem, 9vw, 9rem);
}

/* Where the right column is much shorter than the display title, top
   alignment drops all the slack below the paragraph and it reads as an
   empty corner. Centring the two against each other puts the text where
   the eye expects it. Only for the short ones: on a page like registration,
   where the right column runs long, the title should stay at the top. */
.two-column--center { align-items: center; }

.display-title {
  max-width: 720px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5.7vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -0.028em;
}

.display-title--small { font-size: clamp(2.8rem, 5vw, 4.8rem); }

.prose { color: var(--ink-soft); font-size: 1.08rem; }
.prose p { margin-bottom: 1.5rem; }
.prose .text-link { margin-top: 0.8rem; color: var(--ink); font-size: 0.76rem; }
/* A single column of prose with nothing beside it needs a measure, or lines run
   the full container width. Used by the code of conduct. */
.prose--measure { max-width: 46rem; }

.facts { padding-bottom: var(--section); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.fact-card {
  min-height: 26rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  border-right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fact-card:last-child { border-right: 1px solid var(--line); }
.fact-card__number { margin-left: auto; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; }
.fact-card .eyebrow { margin-top: auto; margin-bottom: 1rem; }
.fact-card h3 { max-width: 14ch; margin-bottom: 1rem; font-family: var(--display); font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 600; letter-spacing: -0.017em; }
.fact-card > p:last-of-type { max-width: 26rem; margin-bottom: 0; color: var(--ink-soft); }
.fact-card .text-link { margin-top: 1.5rem; }

.fact-card--accent { border-color: var(--deep); background: var(--deep); color: var(--white); }
.fact-card--accent .fact-card__number, .fact-card--accent > p:last-of-type { color: rgba(255, 255, 255, 0.7); }

.closing-cta { background: var(--sand-soft); }
.closing-cta__inner { display: grid; grid-template-columns: 1fr minmax(20rem, 1.8fr) auto; align-items: end; gap: 3rem; }
.closing-cta__inner .eyebrow { margin-bottom: 0.55rem; }
.closing-cta h2 { max-width: 780px; margin: 0; font-family: var(--display); font-size: clamp(2.4rem, 4.8vw, 4.5rem); font-weight: 600; letter-spacing: -0.025em; }

/* Page heroes */
.page-hero {
  position: relative;
  min-height: 34rem;
  display: flex;
  align-items: flex-end;
  background-color: var(--deep);
  background-position: center 55%;
  background-size: cover;
  color: var(--white);
}

.page-hero--committee { background-position: center 52%; }
.page-hero--program { background-position: center 58%; }
.page-hero--registration { background-position: center 68%; }

.page-hero__shade {
  background:
    linear-gradient(180deg, rgba(24, 6, 38, 0.52), rgba(24, 6, 38, 0.08) 35%, rgba(24, 6, 38, 0.65)),
    linear-gradient(90deg, rgba(24, 6, 38, 0.48), transparent 70%);
}

.page-hero__content { position: relative; z-index: 1; padding-top: 10rem; padding-bottom: 4.5rem; }
.page-hero h1 { margin-bottom: 0.9rem; font-family: var(--display); font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 600; letter-spacing: -0.028em; }
.page-hero__content > p:last-child { max-width: 40rem; margin: 0; color: rgba(255, 255, 255, 0.84); font-size: 1.13rem; }

.section-heading {
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: 1.2fr 0.7fr;
  gap: 3rem;
  align-items: end;
}

.section-heading--spaced { margin-top: clamp(5rem, 9vw, 8rem); }
.section-heading .eyebrow { margin-bottom: 1rem; }
.section-heading h2, .program-intro h2 { margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5vw, 4.7rem); font-weight: 600; letter-spacing: -0.028em; }
.section-heading > p { max-width: 32rem; margin: 0 0 0 auto; color: var(--ink-soft); }

/* Committee */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

.person-card {
  min-height: 27rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  transition: background-color 180ms ease, transform 180ms ease;
}

.person-card:hover { background: var(--white); transform: translateY(-4px); }

.person-card__initials {
  width: 5.3rem;
  height: 5.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sand-soft);
  font-family: var(--display);
  font-size: 1.45rem;
}

.person-card__role { margin-bottom: 0.8rem; color: var(--muted); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.person-card h3 { margin-bottom: 0.7rem; font-family: var(--display); font-size: 1.8rem; font-weight: 600; letter-spacing: -0.017em; }
.person-card div > p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

.name-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.name-list article { min-height: 10rem; padding: 2rem 2rem 2rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; }
.name-list article:nth-child(odd) { border-right: 1px solid var(--line); }
.name-list article:nth-child(even) { padding-left: 2rem; }
.name-list article > span { align-self: start; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.1em; }
.name-list h3 { margin-bottom: 0.5rem; font-family: var(--display); font-size: 1.55rem; font-weight: 600; }
.name-list p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

/* Program */
.program-section { overflow: hidden; }
.program-heading {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 0.75fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: end;
}
.program-heading .eyebrow { margin-bottom: 1rem; }
.program-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5vw, 4.7rem); font-weight: 600; letter-spacing: -0.028em; }
.program-copy > p:first-child { color: var(--ink-soft); }
.program-note { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.82rem; }
.program-message { margin-bottom: 1rem; padding: 1rem 1.2rem; border-left: 3px solid var(--sand); background: var(--sand-soft); font-size: 0.9rem; }
.program-message[hidden] { display: none; }
.program-message--error { border-color: #a33b31; background: #f3dfd9; color: #6d231c; }

/* Conferia theme bridge. Variables are set on the host to override both the
   library defaults and its automatic dark-mode palette. */
.conferia-shell,
dialog.conferia-dialog {
  --schedule-board-background: #f2eef6;
  --schedule-board-grid: #e2d9ea;
  --element-background: #fff;
  --font-color: var(--ink);
  --font-color-muted: var(--muted);
  --button-background: #fff;
  --button-background-hover: var(--sand-soft);
  --button-color: var(--ink);
  --element-shadow-color: rgba(28, 11, 40, 0.11);
  --input-background: #fff;
  --placeholder-color: var(--muted);
  --border-color: rgba(28, 11, 40, 0.22);
  --accent-color: var(--violet);
  --accent-color-contrast: #fff;
  --keynote-background: #f4e1bd;
  --special-background: #ece5f3;
  --meta-background: var(--paper);
  --live-indicator-red: #bd3026;
  --cf-border-radius: 2px;
}

.conferia-shell { min-width: 0; }

.conferia-shell #conferia-wrapper {
  max-height: min(75rem, calc(100vh - 2rem));
  min-height: 46rem;
  border-radius: 2px;
  font-family: var(--sans);
}

.conferia-shell #conferia-toolbar { padding: 0.65rem; background: var(--deep); border-color: var(--deep); }
.conferia-shell #conferia-toolbar label { color: var(--white); }
.conferia-shell #conferia-toolbar button,
.conferia-shell #conferia-toolbar input { min-height: 2.2rem; }
.conferia-shell #conferia-toolbar input { min-width: min(17rem, 52vw); }
.conferia-shell #conferia-day-gutter { font-family: var(--display); }
.conferia-shell #conferia-footer { padding: 0.55rem 0.75rem; background: var(--deep); border-color: var(--deep); color: rgba(255,255,255,0.72); font-size: 0.72rem; }
.conferia-shell #conferia-footer a { color: var(--sand); }
.conferia-shell #conferia-schedule-board .event { transition: border-color 160ms ease, box-shadow 160ms ease; }
.conferia-shell #conferia-schedule-board .event:hover { border-color: var(--accent-color); box-shadow: 7px 7px 8px var(--element-shadow-color); }
.conferia-shell #conferia-schedule-board .cf-event-title { font-family: var(--display); font-weight: 600; }

dialog.conferia-dialog { font-family: var(--sans); }
dialog.conferia-dialog h3.cf-event-title { font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 600; }

/* Registration */
.registration-banner { min-height: 17rem; padding: clamp(2rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; background: var(--deep); color: var(--white); }
.registration-banner .eyebrow { color: var(--sand); }
.registration-banner h2 { margin: 0; font-family: var(--display); font-size: clamp(3rem, 5vw, 5rem); font-weight: 600; letter-spacing: -0.028em; }
.registration-banner > p { max-width: 30rem; margin: 0; color: rgba(255,255,255,0.74); }
/* The program page puts two paragraphs in the right column instead of one, so
   they are wrapped: three direct children would each take a grid cell and break
   the two-column band. The first paragraph carries the status, so it is set
   brighter than the summary beneath it. */
.registration-banner__body { max-width: 30rem; display: grid; gap: 0.9rem; }
.registration-banner__body p { margin: 0; color: rgba(255,255,255,0.74); }
.registration-banner__body p:first-child { color: rgba(255,255,255,0.95); font-size: 1.02rem; }
.registration-banner__body a { color: var(--sand); text-underline-offset: 0.18em; }
.registration-banner__body a:hover, .registration-banner__body a:focus-visible { color: var(--white); }
/* The membership requirement sits under the dates in the same column, set off
   by a rule so it reads as a second point rather than a continuation. */
.registration-banner__membership { padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.registration-banner__membership strong { color: var(--white); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.price-card { min-height: 31rem; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-right: 0; display: flex; flex-direction: column; }
.price-card:last-child { border-right: 1px solid var(--line); }
.price-card--featured { border-color: var(--deep); background: var(--deep); color: var(--white); transform: translateY(-1.25rem); }
.price-card h3 { margin-bottom: 1.5rem; font-family: var(--display); font-size: 1.75rem; font-weight: 600; }
.price { margin-bottom: 2rem; font-family: var(--display); font-size: 3.3rem; line-height: 1; }
.price-card ul { margin: 0 0 2.5rem; padding: 0; list-style: none; color: var(--ink-soft); }
.price-card--featured ul { color: rgba(255,255,255,0.72); }
.price-card li { padding: 0.55rem 0 0.55rem 1.3rem; border-bottom: 1px solid currentColor; position: relative; font-size: 0.9rem; }
.price-card li::before { content: '·'; position: absolute; left: 0; }
.price-card .button { width: 100%; margin-top: auto; }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 1.6rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-family: var(--display); font-size: 1.3rem; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { font-family: var(--sans); transition: transform 180ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { padding: 0 3rem 1.6rem 0; color: var(--ink-soft); }

/* Footer */
.site-footer { padding-block: 4.5rem; background: var(--violet-deep); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.6fr 0.9fr; gap: 4rem; align-items: end; }
.brand--footer { margin-bottom: 1.2rem; }
.footer-grid > div > p { max-width: 27rem; margin: 0; color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.footer-grid nav { display: grid; gap: 0.55rem; }
.footer-grid nav a { color: rgba(255,255,255,0.75); font-size: 0.82rem; text-decoration: none; }
.footer-grid nav a:hover, .footer-grid nav a:focus-visible { color: var(--white); }
.footer-meta { margin: 0; color: rgba(255,255,255,0.48); font-size: 0.78rem; text-align: right; }

/* Responsive */
@media (max-width: 900px) {
  .nav-shell { min-height: 5rem; }
  .nav-toggle { display: block; z-index: 2; }
  .site-nav {
    position: fixed;
    inset: 0;
    padding: 8rem var(--gutter) 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    background: var(--deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { font-family: var(--display); font-size: clamp(2.3rem, 9vw, 4rem); font-weight: 600; letter-spacing: -0.017em; text-transform: none; }
  .nav-cta { padding: 0.5rem 0; border: 0; }
  .nav-cta:hover, .nav-cta:focus-visible, .nav-cta.is-active { background: transparent; color: var(--sand); }

  .hero-slide__content { padding-top: 6rem; }
  .hero-controls { justify-content: flex-start; }
  .hero-lede { max-width: 34rem; }
  .two-column, .section-heading, .program-heading { grid-template-columns: 1fr; }
  .section-heading > p { margin-left: 0; }
  .people-grid, .fact-grid, .price-grid { grid-template-columns: 1fr; }
  .fact-card, .fact-card:last-child, .price-card, .price-card:last-child { border: 1px solid var(--line); border-bottom: 0; }
  .fact-card:last-child, .price-card:last-child { border-bottom: 1px solid var(--line); }
  .fact-card { min-height: 21rem; }
  .closing-cta__inner { grid-template-columns: 1fr; align-items: start; }
  .closing-cta__inner .button { justify-self: start; }
  .price-card--featured { transform: none; }
  .registration-banner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-meta { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 620px) {
  :root { --gutter: 1.2rem; }
  .brand__place { font-size: 0.62rem; }
  .hero-slider, .hero-slider .splide__track, .hero-slider .splide__list { height: max(42rem, 100svh); }
  .hero-slide { background-position: 62% center; }
  .hero-slide h1, .hero-slide h2 { font-size: clamp(3.15rem, 14vw, 4.3rem); }
  .mobile-break { display: inline; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .hero-controls { bottom: 1.25rem; }
  .hero-progress { width: 4rem; }
  .page-hero { min-height: 29rem; }
  .page-hero__content { padding-bottom: 3rem; }
  .name-list { grid-template-columns: 1fr; }
  .name-list article:nth-child(odd) { border-right: 0; }
  .name-list article:nth-child(even) { padding-left: 0; }
  .conferia-shell #conferia-wrapper { min-height: 40rem; max-height: calc(100vh - 1rem); }
  .conferia-shell #conferia-toolbar input { min-width: 0; width: 100%; }
  .conferia-shell #conferia-footer { align-items: flex-start; flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-meta { grid-column: auto; }
}

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

/* ===================================================================
   EXTENDED NAVIGATION
   Eight top-level items with two dropdowns. Rules below intentionally
   come after the original nav block and override it where they overlap.
   =================================================================== */

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.85vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list > li { position: relative; }

.site-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.745rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-nav .nav-cta {
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.nav-caret {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 200ms ease;
}

.has-dropdown[data-open='true'] .nav-caret { transform: translateY(0.1rem) rotate(-135deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 1.45rem);
  left: -1.3rem;
  z-index: 5;
  min-width: 17.75rem;
  margin: 0;
  padding: 0.55rem 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 2px solid var(--sand);
  background: rgba(43, 10, 68, 0.98);
  backdrop-filter: blur(12px);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.45rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

/* Keeps hover alive while the pointer crosses the gap to the panel. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 1.55rem;
}

.has-dropdown[data-open='true'] > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-nav .nav-dropdown .nav-link {
  display: block;
  padding: 0.66rem 1.5rem;
  font-size: 0.705rem;
  letter-spacing: 0.07em;
  white-space: normal;
  transition: background-color 160ms ease, color 160ms ease;
}

.site-nav .nav-dropdown a::after { content: none; }

.site-nav .nav-dropdown .nav-link:hover,
.site-nav .nav-dropdown .nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: var(--sand);
}

.site-nav .nav-dropdown .nav-link.is-active { color: var(--sand); }

/* Mobile / narrow: full-screen menu with the dropdowns as open accordions. */
@media (max-width: 1080px) {
  .nav-shell { min-height: 5rem; }
  .nav-toggle { display: block; z-index: 2; }

  .site-nav {
    position: fixed;
    inset: 0;
    display: block;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }

  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 7rem var(--gutter) 4rem;
  }

  .nav-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.11); }

  .site-nav .nav-link {
    width: 100%;
    padding: 1.05rem 0;
    font-family: var(--display);
    font-size: clamp(1.5rem, 5.2vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.011em;
    text-transform: none;
  }

  .site-nav .nav-parent { justify-content: space-between; }
  .nav-caret { width: 0.55rem; height: 0.55rem; }

  .nav-dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0.9rem;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    display: none;
  }

  .nav-dropdown::before { content: none; }
  .has-dropdown[data-open='true'] > .nav-dropdown { display: block; visibility: visible; }

  .site-nav .nav-dropdown .nav-link {
    padding: 0.6rem 0 0.6rem 1.1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    font-family: var(--sans);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .site-nav .nav-cta {
    margin-top: 1.6rem;
    padding: 0.95rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    text-align: center;
    font-family: var(--sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .nav-list > li:last-child { border-bottom: 0; }
}

/* ===================================================================
   HERO SLIDER ENHANCEMENTS
   Slow zoom on the active slide, staggered copy, autoplay timer bar
   and a pause control (WCAG 2.2.2 requires one for auto-advancing
   content). All motion is disabled under prefers-reduced-motion.
   =================================================================== */

.hero-slide__bg {
  position: absolute;
  inset: 0;
  background-color: var(--deep);
  background-position: center;
  background-size: cover;
  transform: scale(1.001);
  transition: transform 900ms ease;
  will-change: transform;
}



.splide__slide.is-active .hero-slide__bg {
  transform: scale(1.075);
  transition: transform 9s linear;
}

.hero-slide__content > * {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity 780ms ease, transform 780ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.splide__slide.is-active .hero-slide__content > * { opacity: 1; transform: none; }
.splide__slide.is-active .hero-slide__content > *:nth-child(1) { transition-delay: 160ms; }
.splide__slide.is-active .hero-slide__content > *:nth-child(2) { transition-delay: 280ms; }
.splide__slide.is-active .hero-slide__content > *:nth-child(3) { transition-delay: 400ms; }
.splide__slide.is-active .hero-slide__content > *:nth-child(4) { transition-delay: 520ms; }

.hero-progress span { width: 0; transition: none; }

.hero-toggle {
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.hero-toggle:hover, .hero-toggle:focus-visible { background: var(--white); color: var(--ink); }
.hero-toggle__icon { display: block; width: 0.72rem; height: 0.72rem; fill: currentColor; }
/* The icon shows the action available: pause while playing, play while paused. */
.hero-toggle[aria-pressed='true'] .hero-toggle__play,
.hero-toggle[aria-pressed='false'] .hero-toggle__pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .splide__slide.is-active .hero-slide__bg { transform: none; transition: none; }
  .hero-slide__content > * { opacity: 1; transform: none; }
}

/* ===================================================================
   SHARED PAGE COMPONENTS
   Used by the pages added for the full sitemap.
   =================================================================== */

.page-hero--awards { background-position: center 46%; }
.page-hero--gallery { background-position: center 50%; }
.page-hero--location { background-position: center 62%; }
.page-hero--contact { background-position: center 44%; }
.page-hero--culture { background-position: center 40%; }

/* Key links strip (home) */
.key-links { border-top: 1px solid var(--line); }
.key-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); }

.key-link {
  min-height: 15rem;
  padding: 2.2rem clamp(1.4rem, 2.2vw, 2.2rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.key-link:first-child { border-left: 1px solid var(--line); }
.key-link:hover, .key-link:focus-visible { background: var(--white); }
.key-link__meta { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.key-link h3 { margin: auto 0 0.4rem; font-family: var(--display); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.011em; }
.key-link p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.key-link__arrow { margin-top: 0.9rem; font-size: 0.9rem; transition: transform 180ms ease; }
.key-link:hover .key-link__arrow { transform: translateX(0.3rem); }

/* News */
.news-list { border-top: 1px solid var(--line); }

.news-item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: 2rem;
  align-items: baseline;
}

.news-item time { color: var(--muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
.news-item h3 { margin-bottom: 0.5rem; font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 600; letter-spacing: -0.011em; }
.news-item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.news-item__tag { padding: 0.35rem 0.75rem; border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.64rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

/* Generic card grid: awards, location, campus facts */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.card-grid--two { grid-template-columns: repeat(2, 1fr); }

.info-card {
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.4);
}

.info-card__label { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; }
.info-card h3 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 600; letter-spacing: -0.011em; }
.info-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.info-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.95rem; }
.info-card li { margin-bottom: 0.5rem; }
.info-card .text-link { margin-top: auto; padding-top: 1.2rem; font-size: 0.74rem; }
.info-card--accent { border-color: var(--deep); background: var(--deep); color: var(--white); }
.info-card--accent p, .info-card--accent ul { color: rgba(255, 255, 255, 0.74); }
.info-card--accent .info-card__label { color: var(--sand); }

/* Deadline table */
.deadline-table { width: 100%; border-collapse: collapse; }
.deadline-table caption { margin-bottom: 1.2rem; color: var(--ink-soft); font-size: 0.9rem; text-align: left; }
.deadline-table th, .deadline-table td { padding: 1.15rem 1rem 1.15rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.deadline-table th { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.deadline-table td:first-child { font-family: var(--display); font-size: 1.2rem; }
.deadline-table td:last-child { color: var(--ink-soft); font-size: 0.92rem; }
.deadline-table tr[data-status='open'] td:first-child { color: var(--ink); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

.gallery-item {
  position: relative;
  overflow: hidden;
  min-height: 17rem;
  border: 1px solid var(--line);
  background: var(--mist) center / cover no-repeat;
  display: flex;
  align-items: flex-end;
}

.gallery-item--tall { grid-row: span 2; min-height: 35rem; }
.gallery-item--wide { grid-column: span 2; }
.gallery-item figcaption { position: relative; z-index: 1; width: 100%; padding: 1.2rem 1.4rem; background: linear-gradient(180deg, transparent, rgba(24, 6, 38, 0.82)); color: var(--white); font-size: 0.82rem; }
.gallery-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.contact-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact-lines li { padding: 1.35rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: baseline; }
.contact-lines dt, .contact-lines span:first-child { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
.contact-lines a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-lines a:hover, .contact-lines a:focus-visible { border-color: currentColor; }

/* Long-form pages */
.prose-columns { columns: 2; column-gap: clamp(2.5rem, 6vw, 5rem); color: var(--ink-soft); font-size: 1.02rem; }
.prose-columns p { margin: 0 0 1.4rem; break-inside: avoid; }
.lede { max-width: 46rem; color: var(--ink-soft); font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.6; }

@media (max-width: 1080px) {
  .key-link-grid { grid-template-columns: repeat(2, 1fr); }
  .key-link:first-child { border-left: 1px solid var(--line); }
  .key-link:nth-child(3) { border-left: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .card-grid, .card-grid--two, .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--tall, .gallery-item--wide { grid-row: auto; grid-column: auto; min-height: 17rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .prose-columns { columns: 1; }
  .news-item { grid-template-columns: 1fr; gap: 0.7rem; }
  .news-item__tag { justify-self: start; }
}

@media (max-width: 620px) {
  .key-link-grid { grid-template-columns: 1fr; }
  .key-link, .key-link:nth-child(3) { border-left: 1px solid var(--line); }
  .deadline-table thead { display: none; }
  .deadline-table tr { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
  .deadline-table td { display: block; padding: 0.2rem 0; border: 0; }
  .contact-lines li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ===================================================================
   FIX: full-screen mobile menu
   backdrop-filter on the header makes it a containing block for
   position: fixed descendants, so the open menu was being clipped to
   the height of the header bar instead of covering the viewport.
   Dropping the filter while the menu is open restores it.
   =================================================================== */
body.nav-open .site-header,
.site-header:has(.site-nav.is-open) { backdrop-filter: none; }
body.nav-open .site-header { background: transparent; box-shadow: none; }
body.nav-open .brand { position: relative; z-index: 2; }

/* External links in the nav (the submission system lives on another host).
   The selector needs .nav-link twice over: the underline rule above is
   .site-nav a:not(.nav-cta)::after, and :not() contributes its argument's
   specificity, so that rule scores higher than it looks. */
.site-nav .nav-link.nav-link--external::after {
  content: '\2197';
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 0.28rem;
  background: none;
  font-size: 0.82em;
  line-height: 1;
  opacity: 0.75;
  transform: none;
  transition: opacity 160ms ease;
}

.site-nav .nav-link.nav-link--external:hover::after,
.site-nav .nav-link.nav-link--external:focus-visible::after { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .site-nav .nav-link.nav-link--external::after { margin-left: 0.5rem; font-size: 0.6em; }
}

/* ===================================================================
   PROGRAM PAGE: let the header get out of the way
   Conferia's wrapper is close to viewport height and carries its own
   sticky toolbar, so at the natural reading position that toolbar --
   including the search field -- parks underneath the fixed site header.
   On this page only, the header retracts while scrolling down and comes
   back on the way up.
   =================================================================== */
.site-header { transition: background-color 240ms ease, box-shadow 240ms ease, transform 280ms ease; }
.site-header.is-retracted { transform: translateY(-100%); }
body.nav-open .site-header.is-retracted { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Submit sits beside Registration as a second action. Filled rather than
   outlined so the pair reads as primary + secondary instead of two
   identical buttons. */
.site-nav .nav-submit {
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--sand);
  background: var(--sand);
  color: var(--ink);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.site-nav .nav-submit:hover,
.site-nav .nav-submit:focus-visible {
  border-color: var(--white);
  background: var(--white);
}

@media (max-width: 1080px) {
  .site-nav .nav-submit {
    margin-top: 0.7rem;
    padding: 0.95rem 1.4rem;
    border: 1px solid var(--sand);
    font-family: var(--sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .site-nav .nav-submit .nav-link--external::after { margin-left: 0.4rem; }
}

/* ===================================================================
   ORGANISING TEAM CARDS
   Portraits fall back to initials until photographs are supplied, so
   the layout is identical either way and adding a photo is a one-line
   change per person.
   =================================================================== */
.people-grid--team .person-card {
  min-height: 0;
  gap: 1.6rem;
  justify-content: flex-start;
}

.person-card__portrait {
  width: 6.5rem;
  height: 6.5rem;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sand-soft);
}

.person-card__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.person-card__portrait--initials {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--ink);
}

.people-grid--team .person-card__role { min-height: 2.6rem; }
.people-grid--team .person-card h3 { margin-bottom: 0.45rem; font-size: 1.6rem; }
.people-grid--team .person-card .text-link { margin-top: 1.1rem; font-size: 0.7rem; }

@media (max-width: 900px) {
  .people-grid--team .person-card__role { min-height: 0; }
}

.person-card__contact { margin: 0.55rem 0 0; font-size: 0.85rem; }
.person-card__contact a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.person-card__contact a:hover, .person-card__contact a:focus-visible { color: var(--ink); border-color: currentColor; }

/* Campus map: a tall diagram, so cap its width and let it open as a PDF. */
.campus-map { max-width: 48rem; margin: 0 auto; }
/* Ben Rosche, October 6: show every page of the map, larger. Three pages need
   the full container width and space between them; the single-page version
   above keeps its measure. */
.campus-map--full { max-width: none; display: grid; gap: 1.1rem; }
.campus-map a { display: block; border: 1px solid var(--line); background: var(--white); }
.campus-map img { width: 100%; height: auto; }
.campus-map figcaption { margin-top: 1rem; color: var(--ink-soft); font-size: 0.85rem; text-align: center; }
.campus-map figcaption a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
.campus-map figcaption a:hover, .campus-map figcaption a:focus-visible { border-color: currentColor; }

/* ===================================================================
   HERO IMAGES
   Point at assets/images/hero/. Replacing a photograph is now a matter
   of dropping a file in at the same name; nothing here changes.
   =================================================================== */
.hero-slide--one .hero-slide__bg { background-image: url('../images/hero/hero-city.webp'); }
.hero-slide--two .hero-slide__bg { background-image: url('../images/hero/hero-campus.webp'); }
.hero-slide--three .hero-slide__bg { background-image: url('../images/campus/campus-center.webp'); }

/* ===================================================================
   DEADLINES TILE
   Sits in the key-links strip. Shows the next deadline, and opens a
   panel with all five on hover, focus or tap.
   =================================================================== */
.key-link--deadlines {
  position: relative;
  padding: 0;
  background: var(--deep);
  border-color: var(--deep);
  color: var(--white);
}

.deadline-trigger {
  width: 100%;
  min-height: 15rem;
  padding: 2.2rem clamp(1.4rem, 2.2vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.key-link--deadlines .key-link__meta { color: var(--sand); }
.key-link--deadlines h3 { margin: auto 0 0.4rem; font-family: var(--display); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.011em; }

.deadline-next {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
}

.deadline-trigger__hint {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sand);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deadline-trigger__hint .nav-caret { border-color: currentColor; }
.key-link--deadlines[data-open='true'] .deadline-trigger__hint .nav-caret { transform: translateY(0.1rem) rotate(-135deg); }

.deadline-panel {
  position: absolute;
  z-index: 6;
  top: calc(100% - 1px);
  right: -1px;
  left: -1px;
  padding: 0.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 2px solid var(--sand);
  background: rgba(43, 10, 68, 0.98);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.key-link--deadlines[data-open='true'] .deadline-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.deadline-rows { margin: 0; padding: 0; list-style: none; }

.deadline-rows li {
  padding: 0.72rem 1.4rem;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.deadline-rows li:last-child { border-bottom: 0; }
.deadline-rows__date { color: var(--sand); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.deadline-rows__what { color: rgba(255, 255, 255, 0.86); font-size: 0.85rem; }
.deadline-rows li.is-next { background: rgba(231, 189, 118, 0.14); }
.deadline-rows li.is-past .deadline-rows__date,
.deadline-rows li.is-past .deadline-rows__what { opacity: 0.45; }

/* ===================================================================
   SPONSORS & PARTNERS
   =================================================================== */
.partners { background: var(--mist); }
.partners__head { max-width: 44rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.partners__head h2 { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 600; letter-spacing: -0.022em; }
.partners__head > p:last-child { margin: 0; color: var(--ink-soft); }
.partners__head .eyebrow { margin-bottom: 0.9rem; }

.partner-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.partner-tile {
  min-height: 8.5rem;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.partner-tile img { max-height: 5rem; width: auto; object-fit: contain; }
.partners__note { margin: 2rem 0 0; color: var(--muted); font-size: 0.8rem; text-align: center; }

@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .deadline-panel { position: static; opacity: 1; visibility: hidden; transform: none; display: none; border-left: 0; border-right: 0; }
  .key-link--deadlines[data-open='true'] .deadline-panel { display: block; visibility: visible; }
}

@media (max-width: 620px) {
  .partner-grid { grid-template-columns: 1fr; }
  .deadline-rows li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ===================================================================
   GALLERY GRID AND LIGHTBOX
   Equal square tiles. Hover lifts and zooms on pointer devices; a tap
   or click opens the full-size viewer, which is what makes the page
   usable on a phone where hover does not exist.
   =================================================================== */
.photo-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.photo-tile { position: relative; aspect-ratio: 1; }

.photo-tile__button {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
  cursor: pointer;
  display: block;
  position: relative;
}

.photo-tile__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.photo-tile__zoom {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: rgba(24, 6, 38, 0.72);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 200ms ease;
}

.photo-tile__button:hover img,
.photo-tile__button:focus-visible img { transform: scale(1.07); }
.photo-tile__button:hover .photo-tile__zoom,
.photo-tile__button:focus-visible .photo-tile__zoom { opacity: 1; }

.photo-tile--empty {
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.35);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(23, 5, 37, 0.95);
}

.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: min(92vw, 1200px); max-height: 86vh; display: flex; flex-direction: column; gap: 1rem; }
.lightbox__figure img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox__figure figcaption { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; text-align: center; }

.lightbox__close,
.lightbox__nav {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.lightbox__close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 1.5rem; line-height: 1; }
.lightbox__close:hover, .lightbox__nav:hover,
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { background: var(--white); color: var(--ink); }

@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .lightbox { flex-wrap: wrap; }
  .lightbox__figure { order: -1; width: 100%; }
}

/* Social links. The pending state shows the design without implying an
   account exists to click through to. */
.social-link { margin: auto 0 0; display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.social-link__icon { width: 1.35rem; height: 1.35rem; flex: none; }
.social-link--pending { color: var(--muted); cursor: default; }
.social-link:not(.social-link--pending) { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.social-link:not(.social-link--pending):hover { border-color: currentColor; }

/* The deadlines tile is dark, so it must opt out of the light hover the
   other key-link tiles use, or its white text vanishes on hover. */
.key-link.key-link--deadlines:hover,
.key-link.key-link--deadlines:focus-within { background: var(--deep); }

/* The real campus photographs are lighter than the images this shade was
   tuned for, which pushed the slide-two lede just under 4.5:1 against
   white. A slightly deeper left gradient brings every slide over the line
   without visibly muddying the picture. */
.hero-slide__shade {
  background:
    linear-gradient(180deg, rgba(24, 6, 38, 0.52) 0%, rgba(24, 6, 38, 0.06) 28%, rgba(24, 6, 38, 0.52) 100%),
    linear-gradient(90deg, rgba(24, 6, 38, 0.82) 0%, rgba(24, 6, 38, 0.42) 46%, rgba(24, 6, 38, 0.06) 80%);
}

/* Interior page headers use a real NYUAD photograph too, so no
   AI-generated imagery remains anywhere on the site. */
.page-hero,
.page-hero--committee,
.page-hero--program,
.page-hero--registration,
.page-hero--awards,
.page-hero--gallery,
.page-hero--location,
.page-hero--contact,
.page-hero--culture {
  background-image: url('../images/page-hero.webp');
}

/* Per-page header photographs. Each is chosen for the page it sits on:
   the mosque on the page about seeing the city, the daytime skyline on the
   page about arriving, the campus entrance on the page about the campus.
   Everything else keeps the shared image. */
.page-hero--abudhabi { background-image: url('../images/page-hero-abu-dhabi.webp'); background-position: center 58%; }
.page-hero--travel { background-image: url('../images/page-hero-travel.webp'); background-position: center 62%; }
.page-hero--venue { background-image: url('../images/page-hero-venue.webp'); background-position: center 85%; }

/* ===================================================================
   NYU IDENTITY PASS
   Appended last so it wins on equal specificity. Everything above still
   describes the original build; this section is what makes the site read
   as NYU. Colour and type are handled in :root — these are the pieces
   that needed more than a token swap.
   =================================================================== */

/* --- Brand mark ---------------------------------------------------- */

/* On light headers the "28" was sand on sand-adjacent ground. Violet is the
   stronger read, and matches the wordmark in the footer lockup. */
.site-header:not(.site-header--overlay) .brand__mark span,
.site-header.is-stuck .brand__mark span { color: var(--violet); }

/* --- Selection and focus ------------------------------------------- */

::selection { background: var(--violet); color: var(--white); }

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

/* Dark surfaces need the inverse, or the ring disappears into the violet. */
.hero-slider :focus-visible,
.site-footer :focus-visible,
.registration-banner :focus-visible,
.key-link--deadlines :focus-visible {
  outline-color: var(--sand);
}

/* --- Section rule -------------------------------------------------- */

/* A short violet rule above section eyebrows. Small, repeated, and the
   cheapest way to carry the brand colour through pages that are mostly
   text. */
.eyebrow--dark::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0 0 1rem;
  background: var(--violet);
}

.partners__head .eyebrow--dark::before { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------- */

/* Violet is now the dark button, so the hover cannot also be violet.
   Sand stays the hover, which keeps the original interaction intact. */
.button--dark { background: var(--violet); color: var(--white); }
.button--dark:hover, .button--dark:focus-visible { background: var(--sand); color: var(--ink); }

.button--muted:hover, .button--muted:focus-visible {
  border-color: var(--violet);
  color: var(--violet);
}

/* --- Price ---------------------------------------------------------- */

/* Set explicitly: this rule never carried a weight, so the geometric face
   would have rendered it at 400 next to headings now sitting at 600. */
.price { font-weight: 600; letter-spacing: -0.02em; }
.person-card__portrait--initials { font-weight: 600; }

/* --- Sponsors ------------------------------------------------------- */

/* Two tiles rather than six. A three-across grid holding two items leaves a
   visible hole, so the pair gets its own width and a centred track. */
.partner-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 58rem;
  margin-inline: auto;
  gap: 1.5rem;
}

.partner-grid--pair .partner-tile {
  min-height: 11rem;
  gap: 1.4rem;
  align-content: center;
  padding: 2rem 2.25rem;
  border-top: 3px solid var(--violet);
}

.partner-tile__logo {
  max-height: 3.6rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The RC28 lockup is wider and lighter than the NYUAD one; matching their
   heights would leave it looking twice the size. */
.partner-tile__logo--rc28 { max-height: 2.9rem; }
.partner-tile__logo--nyuad { max-height: 6.2rem; } /* file includes its clear-space margin */

.partner-tile__role {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .partner-grid--pair { grid-template-columns: 1fr; }
}

/* --- Footer lockup --------------------------------------------------- */

/* The host institution belongs in the footer as its own mark, not only as a
   sentence. Reversed to white, which is how the NYUAD lockup is used on
   dark ground. */
.footer-lockup {
  margin: 1.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Official NYUAD artwork (intranet "Primary Logo", digital PNG). The white
   version goes straight onto the dark footer: the brand guidelines forbid a
   colored shape around the logo, which rules out the old white plate. The
   files carry their own transparent margin, measured wider than the torch
   height the guidelines require as clear space, so no extra padding is
   added -- and the height is set to account for that margin. */
/* Brand team, 25 September 2026: align the logo with the text above it on the
   left, and it may be larger. The official PNG carries a transparent margin of
   7.64% of its width on the left, which at this height is 1.09rem of empty
   pixels -- that is what made the logo look indented. The negative margin
   cancels exactly that, so the artwork itself lines up with the text, and the
   file's own clear space is still there in the pixels. Recompute the offset if
   the height changes: 0.194 x height. */
.footer-lockup img {
  height: 5.6rem;
  width: auto;
  margin-left: -1.09rem;
}

/* The footer is identical on every page, home page included: the brand team
   asked for two logos on the first page this time (Evelyn Schwarcz, 25
   September 2026), which overrides the once-per-homepage reading of the
   guidelines that previously hid this one. */

.footer-lockup__caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Deadlines tile ---------------------------------------------------- */

/* Pre-existing bug, exposed by the recolour: `.key-link p` (0,1,1) outranks
   `.deadline-next` (0,1,0), so the dark body colour was overriding the light
   one intended for this dark tile. Matching on two classes wins it back. */
.key-link--deadlines .deadline-next { color: rgba(255, 255, 255, 0.82); }

/* --- Travel header scrim ---------------------------------------------- */

/* Measured, not guessed: with the shared scrim the lede on this page sits at
   4.33:1 against its background, just under the 4.5:1 body-text threshold.
   The travel photograph is a bright daytime skyline, so it is the one header
   that needs a deeper wash. Every other page clears the threshold on the
   shared value and is left alone. */
.page-hero--travel .page-hero__shade {
  background:
    linear-gradient(180deg, rgba(24, 6, 38, 0.6), rgba(24, 6, 38, 0.2) 35%, rgba(24, 6, 38, 0.74)),
    linear-gradient(90deg, rgba(24, 6, 38, 0.72), rgba(24, 6, 38, 0.12) 78%);
}

/* --- Mobile menu panel ------------------------------------------------- */

/* Brand violet is right for buttons and small blocks, but a full screen of
   it is a lot to look at. The menu takes the deeper violet instead, which
   also matches the footer and the desktop dropdown panel. */
@media (max-width: 1080px) {
  .site-nav { background: var(--violet-deep); }
}

/* ===================================================================
   PROVISIONAL CONTENT MARKERS
   =================================================================== */

/* A bracketed token like [THEME TBC] that is waiting on a decision. Styled
   so it reads as a deliberate placeholder rather than a broken string, and
   so it is impossible to miss on a page someone is proofreading. Sand on
   both light and dark ground; the token text stays literal and greppable. */
.tbc {
  display: inline-block;
  padding: 0.12em 0.5em;
  background: var(--sand);
  color: var(--ink);
  font-size: 0.82em;
  font-weight: 750;
  letter-spacing: 0.06em;
  white-space: nowrap;
  vertical-align: baseline;
}

.price .tbc { font-size: 0.42em; letter-spacing: 0.08em; }

/* Dates and place under the hero headline. */
.hero-meta {
  margin: -0.6rem 0 1.4rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.person-card__role--confirmed { color: var(--violet); }

/* Conference dates in the footer, under the strapline. Matched on the same
   descendant path as `.footer-grid > div > p` rather than reached for with
   !important, which would only have hidden the specificity clash. */
.footer-grid > div > p.footer-dates {
  margin: 0.55rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Special events: the number of cards here changes as events are confirmed,
   and each unconfirmed event lives on its own branch. An auto-fitting track
   means a branch adds a card without touching this container's class, so two
   event branches merge into main without conflicting over the same line. */
.card-grid--auto { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

@media (max-width: 720px) {
  .card-grid--auto { grid-template-columns: 1fr; }
}

/* The token is inline-block, so the sentence's full stop is a separate inline
   item and can wrap onto a line of its own. Keep the two together. */
.tbc-wrap { white-space: nowrap; }

/* Standing-policy note between the registration banner and the fee cards. */
.registration-note {
  max-width: 46rem;
  margin: 2.5rem 0 3.5rem;
}

/* A call-to-action sitting under a card grid. */
.section-actions { margin-top: 3rem; }

/* The conference theme, on the call for papers. It is the meeting's
   intellectual identity, so it gets a line of its own rather than being
   folded into a sentence. */
.call-theme {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--violet);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

/* --- Call for papers body ---------------------------------------------- */

/* `.section-heading` is a two-column grid with `align-items: end`, built for a
   heading beside a short paragraph. Five paragraphs went into its right-hand
   column, so the column grew to several hundred pixels while the heading
   stayed pinned to the bottom -- leaving a large white void above it. The
   heading keeps its short lede; everything else moves here. */
.call-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.call-body .prose p:last-child { margin-bottom: 0; }

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

/* Two keynote speakers, not four. A three-column track holding two cards
   leaves a hole on the right, so the pair gets its own centred track. */
/* The pair was capped at 62rem inside a 1280px container, which left the two
   keynote cards narrow and floating in the middle of the page. They are the
   headline of the program, so they now use the full container width (Ben
   Rosche, 29 September 2026). */
.people-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
}

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

/* --- Fee cards ---------------------------------------------------------- */

/* Each category carries two rates, so the headline price needs a line saying
   which one it is and a second line for the other. */
.price-when {
  margin: -1.4rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-alt {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.price-card--featured .price-when { color: var(--sand); }
.price-card--featured .price-alt { color: rgba(255, 255, 255, 0.78); }

.price-footnote {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Media consent — the verbatim release statement on the registration page.
   Set quietly: legal text that has to be readable and complete, but should
   not compete with the fee table above it. */
.consent-statement {
  max-width: 52rem;
  margin: 0;
  padding: 0 0 0 clamp(1.2rem, 3vw, 2.2rem);
  border-left: 3px solid var(--violet);
  background: none;
  quotes: none;
}

.consent-statement p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.72;
}

.consent-statement p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.consent-statement a { color: var(--violet); text-underline-offset: 0.18em; }

/* Photo credit in the footer — NYUAD Public Affairs confirmed the campus
   photography is credited to the university, not to an individual. */
.footer-credit { color: rgba(255, 255, 255, 0.52); }

/* Dining table on the Abu Dhabi page — same treatment as the deadline table. */
.dining-table { width: 100%; border-collapse: collapse; }
.dining-table caption { margin-bottom: 1.2rem; color: var(--ink-soft); font-size: 0.9rem; text-align: left; }
.dining-table th, .dining-table td { padding: 1.05rem 1rem 1.05rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dining-table th { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.dining-table td:first-child { font-family: var(--display); font-size: 1.05rem; }
.dining-table td:last-child { color: var(--ink-soft); font-size: 0.92rem; }
.table-scroll { overflow-x: auto; }

/* Restaurant names are links, but they are names first — the text-link
   treatment (uppercase, letter-spaced) is for call-to-actions, not proper
   nouns, so the cells keep the table's display face. */
.dining-table td:first-child a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(87, 6, 140, 0.35);
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.dining-table td:first-child a:hover,
.dining-table td:first-child a:focus-visible {
  color: var(--violet);
  text-decoration-color: var(--violet);
}

/* ===================================================================
   NAVIGATION FOR READERS WHO DON'T SPEAK HAMBURGER
   Below 1080px -- which a laptop reaches with browser zoom turned up --
   the whole menu folds behind the three-line icon. Readers who don't
   recognize that icon saw no navigation at all, Home included. Naming
   the button fixes it without touching the full-width layout. The label
   is generated here rather than in the markup so all sixteen pages pick
   it up at once; the "/ ''" alt text keeps screen readers on the
   button's existing "Toggle navigation" label instead of reading both.
   =================================================================== */
.nav-toggle { position: relative; }
.nav-toggle::before {
  content: "Menu";
  content: "Menu" / "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3rem;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}
.nav-toggle[aria-expanded='true']::before { content: "Close"; content: "Close" / ""; }

/* The active page's underline is a full-width line in the folded menu.
   While that menu is closed it has no business painting anywhere -- a
   report of "a line through 2027" in the top-left of the home page fits
   it leaking over the hero in some browsers. Remove it outright rather
   than rely on the panel's visibility. */
@media (max-width: 1080px) {
  .site-nav:not(.is-open) a::after { display: none; }
}

/* ===================================================================
   FOOTER TEXTURE: the NYUAD Arabesque pattern
   Official asset (intranet downloads, "Arabesque Pattern", digital, light
   violet). The brand guidelines allow it as a texture provided it stays
   monochrome, is not altered, and is either cropped at a torch centre or
   faded to zero opacity -- here it fades to zero toward the text, so it
   never ends on a hard edge inside the footer. Kept faint enough that the
   footer text contrast is unaffected.
   On phones the footer stacks into one tall column, where the side panel
   would stretch the pattern; there it sits along the bottom instead and
   fades upward, which keeps the torches at the same scale as on desktop.
   =================================================================== */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 760px);
  background: url("../images/brand/arabesque-light-violet.webp") center / cover no-repeat;
  opacity: 0.11;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .site-footer::before {
    top: auto;
    left: 0;
    width: 100%;
    height: 60%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  }
}

/* Committee page: one list, each person tagged with their committee
   (Ben's decision, 23 September 2026) instead of separate sections. */
.committee-intro { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.person-card__committee {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.person-card__committee--organizing { border-color: rgba(87, 6, 140, 0.28); background: var(--mist); color: var(--violet); }
.person-card__committee--scientific { border-color: rgba(28, 11, 40, 0.18); background: var(--sand-soft); color: var(--ink); }

.person-card__committees { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.person-card .person-card__committees .person-card__committee { margin: 0; font-size: 0.62rem; } /* beats .person-card div > p:last-child */
.person-card .person-card__committees .person-card__committee--scientific { color: var(--ink); }

/* ===================================================================
   CALL FOR PAPERS
   The stand-alone CFP page: the theme and the submit action sit in the
   header, and every key date is visible without a click.
   =================================================================== */
.page-hero--cfp { background-image: url('../images/page-hero.webp'); background-position: center 58%; }

.page-hero__theme {
  max-width: 34rem;
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--white);
}

.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }

.button--outline-light {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.button--outline-light:hover, .button--outline-light:focus-visible { background: rgba(255, 255, 255, 0.14); color: var(--white); }

.cfp-dates {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.cfp-dates li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.cfp-dates__date { font-weight: 700; letter-spacing: 0.01em; color: var(--ink); }
.cfp-dates__what { color: var(--ink-soft); }
.cfp-dates__meeting .cfp-dates__date, .cfp-dates__meeting .cfp-dates__what { color: var(--violet); font-weight: 650; }

@media (max-width: 640px) {
  .cfp-dates li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Keynote portraits. The shared 6.5rem circle is right for a twelve-card
   committee grid, but the two keynote speakers are the headline of the
   program and were far too small next to their biographies. */
/* The photograph sat alone at the top-left of a wide card with every line of
   text beneath it, which left it looking small and stranded. Name, role and
   affiliation now sit beside it as one header block, and the biography runs
   underneath at the card's full width (Ben Rosche and HY, 29 September 2026).
   The portraits stay at 13rem: the source files are 400x400, so anything
   larger is upscaled on a retina screen. Ask the speakers for higher-
   resolution headshots and this can grow. */
.people-grid--pair .person-card { gap: 1.8rem; justify-content: flex-start; }
.people-grid--pair .person-card__lead { display: flex; align-items: center; gap: 1.6rem; }
.people-grid--pair .person-card__ident { min-width: 0; }
.people-grid--pair .person-card__ident .person-card__role { margin-bottom: 0.45rem; }
.people-grid--pair .person-card__ident h3 { margin-bottom: 0.35rem; }
.people-grid--pair .person-card__ident > p:last-child { margin-bottom: 0; }
.people-grid--pair .person-card__portrait { width: 13rem; height: 13rem; border-radius: 4px; }

/* The biography needs air. Two paragraphs at 0.55rem apart read as one block,
   and the credentials, which are reference material rather than prose, were
   set at the same weight as the argument. So: a rule under the header, real
   space between paragraphs, the credentials one step quieter, and the links
   on their own line. Full card width would also run a line to roughly ninety
   characters, which is past comfortable reading. */
.people-grid--pair .person-card__body { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.people-grid--pair .person-card__bio,
.people-grid--pair .person-card__meta,
.people-grid--pair .person-card__links { max-width: 64ch; }
.people-grid--pair .person-card__bio { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.62; color: var(--ink-soft); }
.people-grid--pair .person-card__bio + .person-card__meta { margin-top: 1.3rem; }
.people-grid--pair .person-card__meta { margin: 0; font-size: 0.8rem; line-height: 1.58; color: var(--muted); }
.people-grid--pair .person-card__links { margin: 1.1rem 0 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.people-grid--pair .person-card__links a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.people-grid--pair .person-card__links a:hover,
.people-grid--pair .person-card__links a:focus-visible { color: var(--violet); border-color: currentColor; }

@media (max-width: 520px) {
  .people-grid--pair .person-card__lead { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .people-grid--pair .person-card__portrait { width: 9.5rem; height: 9.5rem; }
}

.table-more { margin-top: 1.4rem; }

/* Program highlights on the homepage. The portraits are the point, so they
   are large and sit at the top of the card. */
.feature-card__portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  background: var(--sand-soft);
}

.feature-card h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.feature-card .text-link { margin-top: auto; }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card__portrait { max-width: 15rem; }
}

/* Tablet tier. Cards dropped straight from three columns to one below 900px,
   which made the location pages very long on an iPad -- where most of the
   hierarchy complaints came from. Two columns in between. */
@media (min-width: 620px) and (max-width: 900px) {
  .card-grid, .card-grid--two, .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* An event's one-line strapline, above its description. */
.event-tagline { margin: -0.2rem 0 0; font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--violet); }

/* The England session is the headline event on the special events page, so it
   gets a full-width violet panel rather than a card in a grid. */
.event-feature {
  padding: clamp(2.2rem, 5vw, 4rem);
  background: var(--violet);
  color: var(--white);
}

.event-feature h2 {
  margin: 0.7rem 0 1.1rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--white);
}

.event-feature .eyebrow { color: var(--sand); }

/* Paula England's portrait sits beside the title rather than above it, so the
   panel keeps its headline proportions. Circular to match every other portrait
   on the site, which also takes the corners off the red jacket where it meets
   the brand violet. The hairline ring stops the lighter edges of the photograph
   dissolving into the panel. */
.event-feature__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}

.event-feature__portrait {
  width: clamp(7rem, 12vw, 10rem);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.event-feature__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .event-feature__head { grid-template-columns: 1fr; }
  .event-feature__portrait { width: 7rem; }
}

.event-feature__lede {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.event-feature__meta {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
}

/* Committee tabs. Ben Rosche, October 6: the Scientific Committee was too far
   down the page. Two tabs side by side, the panel below swaps.
   Redesigned the same day because thin text tabs were easy to miss: each tab
   is now a boxed switch, the selected one filled violet with a notch pointing
   at the panel it opens. The bar only exists once JavaScript is running --
   without it both panels are already open under their own headings, and a row
   of switches that do nothing would be worse than none. */
.committee-tabs {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.js-tabs .committee-tabs { display: grid; }

.committee-tab {
  position: relative;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--violet);
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.committee-tab:hover { background: var(--white); border-color: rgba(28, 11, 40, 0.3); }

.committee-tab[aria-selected="true"] {
  border-color: var(--violet);
  background: var(--violet);
  color: var(--white);
}

/* The notch under the selected tab, pointing at its panel. */
.committee-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: clamp(1.5rem, 3vw, 2.25rem);
  bottom: -0.55rem;
  width: 1rem;
  height: 1rem;
  background: var(--violet);
  transform: rotate(45deg);
}

.committee-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* The panel's own heading repeats the tab label, which is useful without
   JavaScript and redundant with it. Hidden once the tabs are live. */
/* Each panel keeps its own heading for the no-JavaScript view and for screen
   readers, and loses it visually once the tabs are live, where it only repeats
   the selected tab. The intro sits directly under the tab bar. */
.committee-panel__title { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; }
.js-tabs .committee-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.committee-panel__intro { margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--ink-soft); }


/* ===================================================================
   COMMITTEE LISTS
   The Scientific Committee and the support list are names rather than
   people to look at, so they are a plain three-column list instead of
   portrait cards (Berkay Ozcan, 26 September 2026).
   =================================================================== */
.committee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2rem) clamp(1.6rem, 3vw, 2.6rem);
}

.committee-list li {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.committee-list__name {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.committee-list__name a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(87, 6, 140, 0.3); }
.committee-list__name a:hover, .committee-list__name a:focus-visible { color: var(--violet); border-color: currentColor; }

.committee-list__role { margin: 0 0 0.15rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.4; }
.committee-list__org { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }

@media (max-width: 900px) {
  .committee-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .committee-list { grid-template-columns: 1fr; }
}

/* ===================================================================
   UAE CULTURE STORY
   The three-paragraph introduction to the country is the centre of the
   culture page, so each paragraph gets its own ruled row with one figure
   from its text beside it, rather than sitting in a card or a column.
   =================================================================== */
.culture-story { border-top: 1px solid var(--line); }

.culture-story__item {
  padding: clamp(2.4rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.culture-story__label { margin: 0 0 1.2rem; color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; }
.culture-story__figure { margin: 0 0 0.5rem; font-family: var(--display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--violet); }
.culture-story__caption { max-width: 16rem; margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.4; }
.culture-story__text { max-width: 46rem; margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; }

@media (max-width: 900px) {
  .culture-story__item { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* Safety and cancellation commitments, closing the fees section on the
   registration page. Ruled off from the price cards so it reads as its own
   statement rather than another footnote. */
.policy-block {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

.policy-block .eyebrow { margin-bottom: 1rem; }
.policy-block h2 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 600; letter-spacing: -0.025em; }
.policy-block .prose p:last-child { margin-bottom: 0; }
.policy-block .prose strong { color: var(--ink); }

/* The "A few specifics" notes on the culture page run the full container
   width beneath their heading, so they need three columns to keep a
   comfortable line length. */
.prose-columns--three { columns: 3; }
/* A section introduced by a label alone, with no heading below it. */
.eyebrow + .prose-columns--three,
.eyebrow + .card-grid--two { margin-top: 1.2rem; }

@media (max-width: 1080px) {
  .prose-columns--three { columns: 2; }
}

@media (max-width: 900px) {
  .prose-columns--three { columns: 1; }
}

/* --- Campus photographs on the venue page --------------------------- */
/* A plain three-up strip. Deliberately not the gallery's .photo-grid, which
   is a square-cropped lightbox: these are 16:10 and are there to be looked
   at in passing, not opened. */
.campus-photos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem;
}

/* The radius and the clipping live on the item so the image can grow inside
   it on hover without spilling over the corners. */
.campus-photos li {
  overflow: hidden;
  border-radius: 4px;
}

.campus-photos img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Only where there is a real pointer: on a touchscreen :hover sticks after a
   tap and the photo stays zoomed. */
@media (hover: hover) {
  .campus-photos li:hover img,
  .campus-photos li:focus-within img { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .campus-photos img { transition: none; }
  .campus-photos li:hover img,
  .campus-photos li:focus-within img { transform: none; }
}

.photo-credit { margin: 1rem 0 0; color: var(--muted); font-size: 0.74rem; }

/* Three across holds down to about 926px, measured in Chromium against this
   page's real container; below that auto-fit drops to two tracks and the third
   photograph would sit half-width on its own row, so it spans both instead.
   The span must be undone in the single-column range below, or it would create
   an implicit second column. The breakpoint is measured, not guessed -- the
   earlier fixed-column version used 900px, which left 901-925px orphaned. */
@media (max-width: 925px) {
  .campus-photos li:last-child { grid-column: span 2; }
}

@media (max-width: 620px) {
  .campus-photos { grid-template-columns: 1fr; }
  .campus-photos li:last-child { grid-column: auto; }
}

/* A speaker's lecture title, under their affiliation. Marked provisional
   until they confirm it; the marker is a separate span so it can be dropped
   without touching the title. */
.person-card__talk { margin: 0.9rem 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.person-card__talk .tbc { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Bluesky and LinkedIn. Icons in the footer on every page and at the foot of
   the folded mobile menu; the desktop nav is already full, so they stay out
   of it. The URLs live in tools/site-data.json (bluesky_url, linkedin_url). */
.follow-links { display: flex; gap: 0.9rem; justify-content: flex-end; margin: 0.75rem 0; }
.follow-link { display: inline-flex; color: rgba(255, 255, 255, 0.75); transition: color 160ms ease; }
.follow-link:hover, .follow-link:focus-visible { color: var(--white); }
.follow-icon { width: 1.15rem; height: 1.15rem; }

@media (max-width: 900px) {
  .follow-links { justify-content: flex-start; }
}

.nav-follow { display: none; }
.site-nav .nav-follow a::after { content: none; }
.site-nav .nav-follow .follow-link { color: rgba(255, 255, 255, 0.75); }
.site-nav .nav-follow .follow-link:hover,
.site-nav .nav-follow .follow-link:focus-visible { color: var(--white); }

@media (max-width: 1080px) {
  .nav-list > li.nav-follow { display: flex; gap: 1.4rem; padding-top: 2rem; border-bottom: 0; }
  .nav-list > li:nth-last-child(2) { border-bottom: 0; }
  .nav-follow .follow-icon { width: 1.5rem; height: 1.5rem; }
}

/* Home page: the follow line under the news list. */
.news-follow { margin: 1.6rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.news-follow a { color: var(--violet); }

/* A section heading that is only an eyebrow label (contact page): the large
   gap under it was sized for a display-size h2, so close it up. */
.section-heading--label { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-heading--label .eyebrow { margin-bottom: 0; }

/* A section that is only a banner, followed by another plain section (the
   program page): each carries the full section padding, so the two stacked
   into a gap of about 275px under the box. The next section's own top padding
   is the gap now, which matches the space above the banner. */
.section--band { padding-bottom: 0; }

/* The home page headlines are full phrases rather than the three-word lines
   they replaced, and the first is the whole conference theme, so all three
   share a smaller size that keeps them to two or three lines. */
.hero-slide .hero-title--long { max-width: 1100px; font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 0.98; }
@media (max-width: 900px) {
  .hero-slide .hero-title--long { font-size: clamp(2.2rem, 9.5vw, 3.4rem); }
  .hero-title--long .hero-break { display: none; }
}

/* Contact page. The address to write to is the point of the page, so it is set
   large on the left with the follow links under it; the facts sit together in
   one card on the right instead of as six separate rows. */
.contact-email {
  display: inline-block;
  margin-top: 2rem;
  color: var(--violet);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 2px solid rgba(87, 6, 140, 0.3);
  overflow-wrap: anywhere;
  transition: border-color 160ms ease;
}
.contact-email:hover, .contact-email:focus-visible { border-color: var(--violet); }

.contact-follow { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.contact-social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.contact-social:hover, .contact-social:focus-visible { background: var(--white); border-color: rgba(28, 11, 40, 0.3); }
.contact-social__icon { width: 1.05rem; height: 1.05rem; }

.contact-facts { margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--line); display: grid; gap: 1.6rem; }
.contact-facts > div { display: grid; gap: 0.4rem; }
.contact-facts > div + div { padding-top: 1.6rem; border-top: 1px solid var(--line); }
.contact-facts dt { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
.contact-facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
.contact-facts a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-facts a:hover, .contact-facts a:focus-visible { border-color: currentColor; }