/* ==========================================================================
   JSM 2027 — Conference Website Stylesheet
   Fonts: Adobe Garamond Pro (headings) + Barlow (body)
   Layout: CSS Grid for page sections, Flexbox for component internals
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors — swap the hex values per meeting, never the token names.
     Names are semantic (primary/secondary/tertiary), not color-literal, so
     component CSS stays untouched when a meeting's palette changes.

     SYNC RULE: the --*-rgb channel tokens are the same colors as comma-separated
     RGB channels, used by rgba() call sites that need alpha. They are NOT derived
     automatically — change a hex and you MUST change its -rgb partner on the same
     line, or the site will half-rebrand in a way that is very hard to spot.
     styleguide.cfm writes both halves together and can emit a correct block. */
  --primary:           #0A374C;   --primary-rgb:       10, 55, 76;
  --primary-dark:      #062030;   --primary-dark-rgb:   6, 32, 48;
  --primary-mid:       #1a5570;
  --secondary:         #22A5D8;   --secondary-rgb:     34, 165, 216;
  --secondary-dark:    #1882ae;
  --secondary-light:   #7dcaec;
  --tertiary:          #EFB254;   --tertiary-rgb:     239, 178, 84;
  --tertiary-dark:     #d4933a;
  --light:             #f4f9fa;
  --white:             #ffffff;
  --text:              #2c2c2c;
  --text-muted:        #5f6b7a;
  --border:            #dde4e8;
  --error:             #c0392b;

  /* Typography */
  --font-display: 'adobe-garamond-pro', serif;
  --font-body:    'Barlow', sans-serif;

  /* Spacing scale — px values below are the RENDERED size at the site's
     html { font-size: 17px }, not the 16px browser default. */
  --sp-1:   0.25rem;  /*   4.25px — micro gaps */
  --sp-2:   0.5rem;   /*   8.5px  — tight inline */
  --sp-3:   0.75rem;  /*  12.75px — button padding, eyebrow margin */
  --sp-4:   1rem;     /*  17px    — base unit */
  --sp-6:   1.5rem;   /*  25.5px  — card padding, heading margin */
  --sp-8:   2rem;     /*  34px    — card grid gap */
  --sp-12:  3rem;     /*  51px    — compact section padding, column gaps */
  --sp-20:  5rem;     /*  85px    — standard section padding */
  --sp-28:  7rem;     /* 119px    — hero/landing only */

  /* Layout */
  --container-max:   1280px;
  --nav-height:      68px;
  --header-height:   274px; /* accent bar + top bar + nav bar */

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   420ms ease;

  /* Shadows */
  --shadow-sm:  0 2px 8px  rgba(var(--primary-rgb), 0.08);
  --shadow-md:  0 4px 20px rgba(var(--primary-rgb), 0.12);
  --shadow-lg:  0 8px 40px rgba(var(--primary-rgb), 0.18);

  /* Border radius */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 14px;
}


/* --------------------------------------------------------------------------
   1b. BARLOW UTILITY CLASSES
   -------------------------------------------------------------------------- */
.barlow-regular         { font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; }
.barlow-medium          { font-family: "Barlow", sans-serif; font-weight: 500; font-style: normal; }
.barlow-semibold        { font-family: "Barlow", sans-serif; font-weight: 600; font-style: normal; }
.barlow-regular-italic  { font-family: "Barlow", sans-serif; font-weight: 400; font-style: italic; }
.barlow-medium-italic   { font-family: "Barlow", sans-serif; font-weight: 500; font-style: italic; }
.barlow-semibold-italic { font-family: "Barlow", sans-serif; font-weight: 600; font-style: italic; }


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
  display: block;
}

img:not([height]),
video {
  height: auto;
}

video {
  width: 100%;
  margin-block: 1.75rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

a {
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--secondary-dark); }

ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
address { font-style: normal; }
h1, h2, h3, h4, h5 { text-wrap: balance; }
p { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   3. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--tertiary);
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  z-index: 9999;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: 0.75rem;
  color: var(--primary);
}

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


/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 2rem;
}

.center { text-align: center; }


/* --------------------------------------------------------------------------
   5. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--sp-3);
}
.section-eyebrow.center { text-align: center; }
.section-eyebrow--light { color: rgba(255, 255, 255, 0.7); }

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--primary);
  margin-bottom: var(--sp-6);
}
.section-heading.center { text-align: center; }


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.72rem 1.8rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background-color: var(--tertiary);
  color: var(--primary);
  border: 2px solid var(--tertiary);
}
.btn-primary:hover {
  background-color: var(--tertiary-dark);
  border-color: var(--tertiary-dark);
  color: var(--primary);
  transform: translateY(-2px);
}

.btn-ghost {
  background-color: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  margin-top: 0;
  margin-bottom: 0;
}

/* Full-width button for narrow containers such as a 300px sidebar widget, where a long label
   plus the default side padding outgrows the box (.btn is nowrap). */
.btn-full {
  width: 100%;
  justify-content: center;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  white-space: normal;
  text-align: center;
}

.btn-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   7. SITE HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t-base);
}
.site-header.scrolled { box-shadow: var(--shadow-lg); }

/* Gradient accent bar at very top */
.header-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--tertiary) 0%, var(--secondary) 100%);
}

/* — Social icons in top bar — */
.header-social-links {
  display: flex;
  align-items: center;
  gap: 0.05rem;
}

.header-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.header-social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.header-social-link:hover {
  color: var(--secondary-dark);
  background-color: rgba(var(--secondary-rgb), 0.1);
}

.header-social-link {
  position: relative;
}

.header-social-link::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.header-social-link:hover::after {
  opacity: 1;
}

@media (max-width: 1100px) {
  .header-social-link::after { display: none; }
}

/* Thin vertical rule between groups */
.header-top-divider {
  width: 1px;
  height: 32px;
  background-color: var(--border);
  flex-shrink: 0;
  margin-inline: 0.4rem;
}

/* Compact search form in top bar */
.header-search-form {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  height: 38px;
}

.header-search-input {
  flex: 1;
  min-width: 0;
  padding: 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text);
  background-color: var(--light);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  outline: none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.header-search-input::placeholder { color: var(--text-muted); }
.header-search-input:focus {
  border-color: var(--secondary);
  background-color: var(--white);
}

.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  background-color: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
.header-search-btn:hover {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

/* — Top bar: logo + register + hamburger — */
.header-top-bar {
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
}

.header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
}

/* — Logo — */
.header-logo {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo-img {
  height: auto;
  max-height: 175px;
  width: auto;
  display: block;
  transition: opacity var(--t-fast);
}

.header-logo:hover .header-logo-img {
  opacity: 0.85;
}

/* — Top bar: right-side actions — */
.header-top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
  min-width: 240px;
}

.header-top-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* — Nav bar — */
.header-nav-bar {
  background-color: var(--primary);
}

.header-nav-bar .container {
  width: 100%;
}

/* Footer still uses text-based logo markup */
.logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: var(--tertiary);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-year {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.logo-name {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* — Primary Nav — */
.primary-nav {
  display: flex;
  align-items: stretch;
}

.nav-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--nav-height);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding-inline: clamp(0.38rem, 1.79vw - 0.85rem, 0.58rem);
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.25vw - 0.08rem, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
  position: relative;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.07);
}

.nav-link.active {
  color: var(--tertiary);
  background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-arrow {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-item.dropdown-open .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* — Dropdown Menu — */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background-color: var(--white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 200;
  padding-block: 0.5rem;
}

.nav-item.dropdown-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Desktop only: hover opens dropdowns + gold top border */
@media (min-width: 1101px) {
  .dropdown-menu { border-top: 3px solid var(--tertiary); }

  .nav-item:hover .dropdown-menu,
  .nav-item:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
  }
}

.dropdown-menu li a {
  display: block;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primary);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), padding-left var(--t-fast), padding-right var(--t-fast);
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: var(--light);
  color: var(--secondary-dark);
  padding-left: 1.5rem;
  padding-right: 0.9rem;
}

.dropdown-menu li a.active {
  color: var(--secondary-dark);
  font-weight: 600;
  background-color: var(--light);
  border-left: 3px solid var(--tertiary);
  padding-left: calc(1.2rem - 3px);
}

/* — Register Button — */
.btn-register {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.5rem;
  background-color: var(--tertiary);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  white-space: nowrap;
}
.btn-register:active {
  transform: scale(0.96);
}
.btn-register:hover {
  background-color: var(--tertiary-dark);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--tertiary-rgb), 0.45);
}

/* — Mobile Toggle — */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
  transform-origin: center;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   8. PROMO IMAGE GRID
   -------------------------------------------------------------------------- */
.promo-section {
  padding-block: var(--sp-12);
  background: var(--white);
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--sp-2);
}

.promo-item {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.promo-item:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.promo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.promo-item:hover img {
  transform: scale(1.02);
}


/* --------------------------------------------------------------------------
   8b. TESTIMONIAL QUOTE
   -------------------------------------------------------------------------- */
.quote-section {
  background-color: var(--primary);
  padding-block: var(--sp-12);
}

/* Slides are stacked in a single grid cell rather than absolutely positioned, so
   the rotator sizes itself to whichever quote is tallest. The old
   `position: absolute` + `min-height: 200px` pair could not do this: absolutely
   positioned children contribute nothing to the parent's height, so any quote
   taller than the fixed box overflowed it instead of expanding it. */
.testimonial-rotator {
  display: grid;
  max-width: 780px;
  margin-inline: auto;
}

.testimonial {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  opacity: 0;
  transition: opacity var(--t-slow);
  pointer-events: none;
}

.testimonial--active {
  opacity: 1;
  pointer-events: auto;
}

.testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.testimonial-attribution {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-attribution a {
  color: inherit;
}

.testimonial-attribution a:hover {
  color: var(--white);
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: calc(var(--sp-8) + 0.5rem);
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--t-base), transform var(--t-base);
}

.testimonial-dot:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.testimonial-dot--active {
  background-color: var(--tertiary);
  transform: scale(1.35);
}


/* --------------------------------------------------------------------------
   9. STATS BAR
   -------------------------------------------------------------------------- */
.stats-bar {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  padding: var(--sp-12) 0;
}

.stats-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.stat-item {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.75rem 1.5rem;
}

.stat-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  line-height: 1;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--white);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: rgba(255, 255, 255, 0.65);
}

.stat-label {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.35rem;
}

.stat-divider {
  width: 1px;
  height: 54px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
  align-self: center;
}


/* --------------------------------------------------------------------------
   9b. HIGHLIGHTS STRIP
   -------------------------------------------------------------------------- */
.highlights-strip {
  background-color: var(--white);
  padding: var(--sp-12) 0;
}

.highlights-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.highlights-strip-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  border-right: 1px solid var(--border);
}
.highlights-strip-item:first-child { padding-left: 0; }
.highlights-strip-item:last-child  { border-right: none; padding-right: 0; }

.highlights-strip-icon {
  font-size: 2rem;
  color: var(--primary);
  flex-shrink: 0;
  width: 2.25rem;
  text-align: center;
  margin-top: 2px;
}

.highlights-strip-body { flex: 1; }

.highlights-strip-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  margin: 0 0 var(--sp-2) 0;
  line-height: 1.2;
}

.highlights-strip-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .highlights-strip-grid {
    grid-template-columns: 1fr;
  }
  .highlights-strip-item {
    padding: var(--sp-4) 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .highlights-strip-item:last-child {
    border-bottom: none;
  }
}


/* --------------------------------------------------------------------------
   10. WELCOME SECTION
   -------------------------------------------------------------------------- */
.welcome-section {
  padding: var(--sp-20) 0;
  background-color: var(--light);
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.welcome-body {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
}

.welcome-visual {
  position: relative;
}

.welcome-image-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.welcome-image-frame img {
  width: 100%;
  object-fit: cover;
  display: block;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform var(--t-slow);
}
.welcome-image-frame:hover img { transform: scale(1.03); }

.image-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tertiary), var(--secondary));
}

/* Floating year badge */
.welcome-image-badge {
  position: absolute;
  bottom: -1.2rem;
  left: -1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.badge-number {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--secondary-light);
}
.badge-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 0.2rem;
}


/* --------------------------------------------------------------------------
   11. FEATURED CARDS
   -------------------------------------------------------------------------- */
.featured-section {
  padding: var(--sp-20) 0;
  background-color: var(--light);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform var(--t-slow);
}
.feature-card:hover .card-image img { transform: scale(1.06); }

.card-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-tag {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 3px;
  margin-bottom: 0.7rem;
  align-self: flex-start;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: 0.7rem;
  line-height: 1.25;
}

.card-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.68;
  flex: 1;
  margin-bottom: 1.25rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: gap var(--t-fast), color var(--t-fast);
  margin-top: auto;
}
.card-link:hover {
  color: var(--secondary-dark);
  gap: 0.45rem;
}


/* --------------------------------------------------------------------------
   12. SEARCH & SOCIAL SECTION
   -------------------------------------------------------------------------- */
.search-social-section {
  padding: var(--sp-12) 0;
  background-color: var(--primary);
}

.search-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: start;
}

.block-heading {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.block-subtext {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

/* Social icons */
.social-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.social-icon-link:hover {
  background: rgba(var(--secondary-rgb), 0.2);
  border-color: var(--secondary);
  color: var(--secondary-light);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(var(--secondary-rgb), 0.2);
}

.social-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}


/* Google CSE / Search area */
.cse-wrapper {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 1rem;
  min-height: 56px;
}

.cse-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 70px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}
.cse-placeholder p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.35);
}
.cse-placeholder em { font-style: italic; }

/* CSE search form */
#cse-search-box {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  margin: 0 !important;
  width: 100%;
}

#cse-search-box .searchfield {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  outline: none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

#cse-search-box .searchfield::placeholder,
#cse-search-box .searchfield[value="Search"] {
  color: rgba(255, 255, 255, 0.4);
}

#cse-search-box .searchfield:focus {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: var(--secondary);
}

#cse-search-box button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.1rem;
  background-color: var(--secondary);
  color: var(--white);
  border: 1px solid var(--secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}

#cse-search-box button[type="submit"]:hover {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

/* Remove extra margin injected by inline style via specificity */
.cse-wrapper #cse-search-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override Google CSE's default max-width on wrapper */
.gsc-wrapper {
    max-width: none !important;
    width: 100% !important;
}


/* --------------------------------------------------------------------------
   12b. HOUSING PAGE
   -------------------------------------------------------------------------- */

/* Intro grid: text left, location card right */
.housing-intro-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-8);
}

.location-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  flex-shrink: 0;
}

.location-card-header {
  background: var(--primary);
  color: var(--white);
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Selector carries the parent twice on purpose: `.interior-content h3` (section
   I-3) is the same specificity and comes later in the file, so a plain
   `.location-card-header h3` loses the tie on source order and the heading picks
   up 2rem of top margin that inflates the header bar. */
.location-card .location-card-header h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.location-card-header i {
  color: var(--secondary-light);
  font-size: 0.85rem;
}

.location-card-body {
  padding: var(--sp-6);
}

.location-card-body p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.location-card-body p:last-child {
  margin-bottom: 0;
}

.location-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--primary);
  font-weight: 400;
  display: block;
  margin-bottom: var(--sp-1);
}

/* Callout box — inline highlight for CTAs or notable statements */
.callout-box {
  border: 1px solid var(--border);
  background: var(--light);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  margin: var(--sp-6) 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.callout-box a {
  font-weight: 600;
}

/* Alert boxes */
.alert-box {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
}

.alert-box-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  padding-top: 0.55rem;
}

.interior-content .alert-box-content h2 {
  display: block;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.alert-box-content p:last-child {
  margin-bottom: 0;
}

.alert-box--info {
  background: rgba(var(--secondary-rgb), 0.12);
  border: 1px solid rgba(var(--secondary-rgb), 0.35);
}

.alert-box--info .alert-box-icon { color: var(--secondary-dark); }

.alert-box--warning {
  background: rgba(var(--tertiary-rgb), 0.14);
  border: 1px solid rgba(var(--tertiary-rgb), 0.4);
}

.alert-box--warning .alert-box-icon { color: var(--tertiary-dark); }

/* Full-width horizontal banner variant */
.location-card--banner {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--sp-8);
}

.location-card--banner .location-card-header {
  border-radius: 0;
}

.location-card-banner-img {
  width: 260px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  outline: 1px solid rgba(var(--primary-rgb), 0.12);
}

.location-card-banner-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.location-card-banner-text .location-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 600px) {
  .location-card--banner {
    flex-direction: column;
  }
  .location-card-banner-img {
    width: 100%;
    max-height: 180px;
  }
}

/* --------------------------------------------------------------------------
   12c. LOCAL INFORMATION PAGE
   -------------------------------------------------------------------------- */

.page-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.page-jump-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.page-jump-nav a i {
  color: var(--secondary);
  font-size: 0.8rem;
}

.page-jump-nav a:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}

.page-jump-nav a:hover i {
  color: rgba(255, 255, 255, 0.85);
}

/* Offset anchor targets so sticky header doesn't cover them.
   --header-height is kept in sync with the real rendered height by main.js. */
[id] {
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

/* Icon inside h2 headings */
.interior-content h2 i {
  color: var(--secondary);
  font-size: 0.9em;
  margin-right: 0.3rem;
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   12d. REGISTRATION PAGE
   -------------------------------------------------------------------------- */
.reg-notice {
  background: var(--light);
  border: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--sp-6);
}

.interior-content .reg-notice p {
  font-size: inherit;
  font-weight: inherit;
  text-align: inherit;
  margin-bottom: var(--sp-3);
}

.interior-content .reg-notice p:last-child {
  margin-bottom: 0;
}

/* Contact block — Questions? section */
.contact-block {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-6);
}

.contact-block strong {
  display: block;
  color: var(--primary);
  margin-bottom: var(--sp-1);
}

/* Registration tips card */
.reg-tips-card {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.reg-tips-card .reg-tips-heading {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}

.reg-tips-heading i {
  color: var(--secondary);
  font-size: 1rem;
}

.reg-tips-card .reg-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tips;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.reg-tips-card .reg-tips-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  counter-increment: tips;
  list-style: none;
  margin-bottom: 0;
}

.reg-tips-list li::before {
  content: counter(tips);
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  background: var(--secondary);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.75rem;
}

/* Registration guide callout */
.reg-guide-callout {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.reg-guide-icon {
  font-size: 2.2rem;
  color: var(--secondary);
  flex-shrink: 0;
  line-height: 1;
}

.reg-guide-text { flex: 1; }

.reg-guide-text strong {
  display: block;
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.reg-guide-callout .reg-guide-text p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.reg-guide-callout--cover {
  padding: 0;
  align-items: stretch;
  cursor: pointer;
  transition: box-shadow var(--t-base), transform var(--t-base);
  color: var(--text);
}

.reg-guide-callout--cover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text);
}

.reg-guide-cover-img {
  width: 250px;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.reg-guide-callout--cover .reg-guide-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6);
}

.reg-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--secondary);
  margin-top: var(--sp-2);
}

@media (max-width: 640px) {
  .reg-tips-card { padding: var(--sp-4); }
  .reg-guide-callout { flex-wrap: wrap; }
  .reg-guide-callout .btn { width: 100%; text-align: center; justify-content: center; }
  .reg-guide-callout--cover { flex-direction: column; }
  .reg-guide-cover-img { width: 100%; height: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; }
}

.table-responsive {
  overflow-x: auto;
  margin-bottom: var(--sp-6);
}

.reg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
  margin-bottom: var(--sp-6);
}

/* Meeting Registration Fees table: widen the Early/Regular/Late price columns
   so the two-line date-range headers don't feel cramped. */
.reg-table--fees {
  table-layout: fixed;
}

.reg-table--fees th:nth-child(2),
.reg-table--fees td:nth-child(2),
.reg-table--fees th:nth-child(3),
.reg-table--fees td:nth-child(3),
.reg-table--fees th:nth-child(4),
.reg-table--fees td:nth-child(4) {
  width: 16%;
}

.reg-table--compact th,
.reg-table--compact td {
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  text-align: left;
}

/* Exhibitor / Career Service schedule widget list */
.exhibitor-schedule,
.careerservice-schedule {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exhibitor-schedule-group {
  margin-bottom: 0.75rem;
}

.exhibitor-schedule-group:last-child {
  margin-bottom: 0;
}

.exhibitor-schedule-group > strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.exhibitor-schedule-group > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
}

.exhibitor-schedule-group > ul > li {
  display: block;
  font-size: 0.8rem;
  color: var(--text);
  padding: 0.2rem 0;
  border-bottom: 1px dotted var(--border);
  list-style: none !important;
}

.exhibitor-schedule-group > ul > li::marker {
  display: none;
}

.exhibitor-schedule-group > ul > li:last-child {
  border-bottom: none;
}

.exhibitor-schedule-group > ul > li span:first-child {
  display: block;
  color: var(--text-muted);
}

.exhibitor-schedule-group > ul > li span:last-child {
  display: block;
}

.reg-table th,
.reg-table td {
  padding: 0.6rem 0.85rem;
  text-align: center;
  border: 1px solid var(--border);
}

.reg-table th {
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
}

.reg-table th.th-sub {
  background-color: var(--primary-mid);
  font-weight: 500;
}

.reg-table td.td-indent {
  padding-left: 2rem;
}

.reg-table th:first-child,
.reg-table td:first-child {
  text-align: left;
}

/* Left-align every column instead of the default centered value columns
   (advertise.cfm rates). Prices and dimension notes are ragged-right strings of
   very different lengths, so centering them leaves no common edge to read down.
   MUST stay below the `.reg-table th, .reg-table td` centering rule above — same
   specificity (0,1,1), so source order is the only thing that decides. */
.reg-table--left th,
.reg-table--left td {
  text-align: left;
}

/* Sticky first column inside a scrollable wrapper */
.table-responsive .reg-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--primary);
}

.table-responsive .reg-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--white);
  box-shadow: 2px 0 6px rgba(var(--primary-rgb), 0.08);
}

.table-responsive .reg-table tbody tr:nth-child(even) td:first-child {
  background-color: var(--light);
}

.table-responsive .reg-table tbody tr:hover td:first-child {
  background-color: rgba(var(--secondary-rgb), 0.08);
}

.reg-table tbody tr:nth-child(even) {
  background-color: var(--light);
}

.reg-table tbody tr:hover {
  background-color: rgba(var(--secondary-rgb), 0.08);
}

.fee-dates {
  font-weight: 400;
  font-size: 0.78rem;
  opacity: 0.85;
}

.table-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: calc(var(--sp-3) * -1);
  margin-bottom: var(--sp-6);
}


/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--primary-dark);
  padding-top: var(--sp-20);
}

.footer-grid {
  display: grid;
  /* grid-template-columns: 1fr 380px; */ /* restore when meetingrequests.cfm goes live */
  grid-template-columns: 1fr 315px;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-bottom: 1.2rem;
}

.footer-favicon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-tagline {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.55;
}

.footer-address {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.75;
}
.footer-address a {
  color: rgba(255, 255, 255, 0.42);
}
.footer-address a:hover { color: var(--secondary-light); }

.footer-col-heading {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-light);
  margin-bottom: 0.9rem;
  display: block;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.footer-links a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--t-fast);
  display: block;
}
.footer-links a:hover {
  color: var(--white);
}

/* Tone down block-heading/subtext when used inside the footer */
.site-footer .block-heading {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-4);
}
.site-footer .block-subtext {
  font-size: 0.83rem;
  margin-bottom: 1.25rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: var(--sp-6);
}

.footer-copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.32);
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.32);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-legal a:hover { color: var(--secondary-light); }


/* --------------------------------------------------------------------------
   14. ANIMATIONS
   -------------------------------------------------------------------------- */
/* Stats counter: triggered by JS once IntersectionObserver fires */
.stat-number.is-animating {
  animation: none; /* JS handles the count-up */
}

@media (prefers-reduced-motion: no-preference) {
  .stat-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms ease;
  }
  .stat-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 14b. Nav fluid scaling now handled directly in .nav-link base styles via clamp(). */


/* --------------------------------------------------------------------------
   15. RESPONSIVE — TABLET (≤ 1100px) → Mobile Menu
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  /* Show hamburger, pin it top-right */
  .mobile-menu-toggle { display: flex; }
  .header-top-inner {
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
  }
  .mobile-menu-toggle {
    position: absolute;
    top: var(--sp-3);
    right: 0;
  }

  /* Logo: full-width centered; side padding mirrors hamburger width so image stays visually centered */
  .header-logo {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    padding: 0.25rem 3.5rem;
  }
  .header-logo-img { max-height: 120px; }

  /* Actions: full-width column, items centered */
  .header-top-actions {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
    padding-block: 0.25rem 0.75rem;
  }

  /* Social row: centered; hide vertical divider */
  .header-top-row { justify-content: center; }
  .header-top-divider { display: none; }

  .header-search-form { display: none; }

  /* Drawer — slides in from the right */
  .header-nav-bar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    z-index: 999;
    background-color: var(--primary-dark);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    box-shadow: -8px 0 32px rgba(var(--primary-dark-rgb), 0.35);
  }

  /* Transition only enabled after first hamburger interaction — prevents flash on breakpoint cross */
  .header-nav-bar.nav-ready {
    transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 380ms;
  }

  .header-nav-bar.mobile-open {
    visibility: visible;
    transform: translateX(0);
  }

  .header-nav-bar .container { padding-inline: 0; }

  .primary-nav {
    display: block;
    padding-top: var(--sp-8);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    width: 100%;
  }

  .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-direction: column;
    align-items: stretch;
  }

  .nav-link {
    height: auto;
    padding: 0.9rem 1.75rem;
    font-size: 0.9rem;
    justify-content: space-between;
    align-items: flex-start;
    white-space: normal;
  }

  .nav-link .dropdown-arrow {
    margin-top: 0.2rem;
    flex-shrink: 0;
  }

  .nav-link.active::after { display: none; }

  /* Mobile: dropdown is stacked below parent, toggled by JS click */
  .dropdown-menu {
    position: static;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    padding: 0;
    transition: opacity var(--t-base), max-height var(--t-base), visibility var(--t-base);
    background-color: rgba(0, 0, 0, 0.25);
  }

  .nav-item.dropdown-open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 400px !important;
    padding-block: 0.5rem !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
  }

  .dropdown-menu li a {
    padding: 0.55rem 2.5rem;
    color: rgba(255, 255, 255, 0.78);
    border-bottom: none;
  }
  .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--secondary-light);
    padding-left: 2.75rem;
  }
  .dropdown-menu li a.active {
    color: var(--white);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--tertiary);
    padding-left: calc(2.5rem - 3px);
  }

  /* Layout adjustments */
  .welcome-grid,
  .search-social-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .welcome-image-badge {
    left: 1rem;
    bottom: -1rem;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(var(--primary-dark-rgb), 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-slow), visibility var(--t-slow);
  }

  .nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }
}


/* --------------------------------------------------------------------------
   16. RESPONSIVE — MOBILE (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  .container { padding-inline: 1.25rem; }

  /* Further reduce logo on small mobile */
  .header-logo-img { max-height: 90px; }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .stats-flex {
    flex-direction: column;
    gap: 0;
  }
  .stat-divider {
    width: 50px;
    height: 1px;
    margin-block: 0.5rem;
  }

  .promo-section {
    padding-block: var(--sp-6) var(--sp-8);
  }

  .promo-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .promo-item:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-brand { grid-column: auto; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-legal { justify-content: center; }

  .social-icons-row { justify-content: center; }

  .search-social-section { padding: var(--sp-12) 0; }
}


/* --------------------------------------------------------------------------
   17. NEWSLETTER CALLOUT (homepage)
   -------------------------------------------------------------------------- */
.newsletter-section {
  background: linear-gradient(135deg, var(--secondary-dark) 0%, color-mix(in srgb, var(--primary) 35%, var(--secondary-dark)) 100%);
  padding: var(--sp-12) 0;
}

.newsletter-callout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-12);
  align-items: center;
}

.newsletter-callout-heading {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.newsletter-callout-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.55;
  margin: 0;
}

.newsletter-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Screen-reader only utility */
.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;
}

@media (max-width: 900px) {
  .newsletter-callout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}


/* ==========================================================================
   INTERIOR PAGE TEMPLATE
   Shared styles for all secondary pages (conferenceinfo, program, expo, etc.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   I-1. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding: var(--sp-8) 0 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.breadcrumb li + li::before {
  content: '/';
  color: var(--border);
}

.breadcrumb a {
  color: var(--secondary);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb [aria-current="page"] {
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   I-2. INTERIOR LAYOUT GRID
   -------------------------------------------------------------------------- */
.interior-wrap {
  padding-block: 2.5rem 4rem;
}

.interior-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-12);
  align-items: start;
}

.interior-layout > * {
  min-width: 0;
}


/* Full-width variant — no sidebar (e.g. search results) */
.interior-content--full {
  grid-column: 1 / -1;
}


/* --------------------------------------------------------------------------
   I-3. MAIN CONTENT COLUMN
   -------------------------------------------------------------------------- */
.interior-content .page-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 400;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.interior-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 400;
  color: var(--primary);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.interior-content h2.center { justify-content: center; }

.interior-content h2 > i {
  line-height: 1;
  flex-shrink: 0;
}

/* h3 and h4 had no rule at all, so the global reset's `margin: 0` left them flush
   against the content below. The only gap was the *preceding* element's bottom
   margin, which grouped each heading with the section above it instead of the one
   it introduces. Space above therefore exceeds space below in both rules.

   These MUST stay above `.accordion-body h4` (section I-11), which is the same
   specificity and deliberately keeps a wider top margin for headings that follow a
   list inside an accordion — source order is the only thing deciding that. */
.interior-content h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.interior-content h4 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

/* A subheading directly beneath its parent heading is a pair, not a new block. */
.interior-content h3 + h4 {
  margin-top: var(--sp-3);
}

.interior-content p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text);
  margin-bottom: 1rem;
}

.interior-content p a,
.interior-content li a,
.interior-content td a,
.interior-content address a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--secondary-light);
}
.interior-content p a:hover,
.interior-content li a:hover,
.interior-content td a:hover,
.interior-content address a:hover {
  text-decoration-color: var(--secondary);
}
.interior-content a[class*="btn"] {
  text-decoration: none;
}

.interior-content code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: var(--light);
  border: 1px solid var(--border);
  padding: 0.1em 0.45em;
  border-radius: var(--radius-sm);
  color: var(--primary);
}

.interior-content ul:not(.event-list):not(.employer-logo-grid):not(.exhibitor-list):not(.employer-key):not(.cosponsors-list),
.interior-content ol {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.interior-content ul:not(.event-list):not(.employer-logo-grid):not(.exhibitor-list):not(.employer-key):not(.cosponsors-list) li {
  list-style: disc;
  margin-bottom: 0.4rem;
}

.interior-content ul:not(.event-list):not(.employer-logo-grid):not(.exhibitor-list):not(.employer-key):not(.cosponsors-list) li::marker {
  color: var(--secondary);
}

.interior-content ol li {
  list-style: decimal;
  margin-bottom: 0.4rem;
}

.interior-content blockquote {
  margin: 0 0 1.25rem 30px;
  padding: 0;
}

.interior-content blockquote p {
  margin: 0 0 var(--sp-4);
}

.interior-content blockquote p:last-child {
  margin-bottom: 0;
}

.interior-content strong {
  font-weight: 700;
  color: var(--primary);
}

/* Inline video block */
.interior-content video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: var(--sp-6) 0;
  border-radius: var(--radius-sm);
}

/* Co-sponsors list — unstyled, two-column on wider screens */
.cosponsors-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem 1.5rem;
}

.cosponsors-list li {
  font-size: 0.92rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.cosponsor-note {
  font-size: 1em;
  font-weight: bold;
  margin-left: 0.15em;
  vertical-align: baseline;
}

.interior-content .cosponsors-key {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  margin-bottom: 1.5rem;
}

.cosponsors-key sup {
  font-weight: bold;
}

/* JSM Is... highlight list */
.highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
  padding: 0.65rem 0.85rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.highlights-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  margin-top: 0.5rem;
}


/* --------------------------------------------------------------------------
   I-4. SIDEBAR
   -------------------------------------------------------------------------- */
.interior-sidebar {
  align-self: start;
}

.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sidebar-widget + .sidebar-widget {
  margin-top: var(--sp-8);
}

.sidebar-widget--cta {
  background: var(--primary);
  border-color: var(--primary);
  text-align: center;
}

.sidebar-widget--cta .widget-body p {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}

/* --- EXPO cards --- */
.expo-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.expo-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.expo-card--reverse {
  grid-template-columns: 1fr 280px;
}

.expo-card--reverse .expo-card-img,
.expo-card--reverse .expo-card-accent-panel {
  order: 2;
}

.expo-card--reverse .expo-card-text {
  order: 1;
}

.expo-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  align-self: stretch;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}

.expo-card-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--secondary-dark);
  flex-shrink: 0;
  margin: 0 auto var(--sp-4);
}

.expo-card-text {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
  line-height: 1.4;
  padding: var(--sp-6);
}

.expo-card-accent-panel {
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  align-self: stretch;
  font-size: 2.5rem;
  color: var(--tertiary);
}

@media (max-width: 600px) {
  .expo-card,
  .expo-card--reverse {
    grid-template-columns: 1fr;
  }
  .expo-card--reverse .expo-card-img,
  .expo-card--reverse .expo-card-accent-panel,
  .expo-card--reverse .expo-card-text {
    order: unset;
  }
  .expo-card-img {
    height: 180px;
  }
  .expo-card-accent-panel {
    min-height: 140px;
  }
}

.widget-header {
  background: var(--primary);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.widget-header h2 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.widget-header-accent {
  display: block;
  width: 3px;
  height: 1.1rem;
  background: var(--secondary-light);
  border-radius: 2px;
  flex-shrink: 0;
}

.widget-body {
  padding: 1rem 1.25rem 1.25rem;
}

.widget-body p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

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

.widget-body ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin-bottom: 0.75rem;
}

.widget-body ul:last-child {
  margin-bottom: 0;
}

.widget-body ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

.sidebar-widget--dont-miss {
  position: relative;
}

.sidebar-widget--dont-miss::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-image: url('../images/starburst.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.15;
  pointer-events: none;
}

.widget-body .dont-miss-list {
  list-style: none;
  padding-left: 0;
}

.dont-miss-list li {
  padding-left: 1.4em;
  position: relative;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

.employer-key {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 var(--sp-4);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.employer-key li {
  margin-bottom: 0.25rem;
  font-style: italic;
}

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

.hours-group-heading,
.widget-body .hours-group-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin: var(--sp-6) -1.25rem var(--sp-2);
  padding: 0.35em 1.25rem;
  background: var(--light);
}

.hours-group-heading:first-child,
.widget-body .hours-group-heading:first-child {
  margin-top: 0;
}

.hours-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.hours-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hours-item dt {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hours-item dd {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
}

.dont-miss-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url('../images/stars-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   I-5. KEY DATES LIST
   -------------------------------------------------------------------------- */
.key-dates-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.key-date-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.key-date-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.key-date-group-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin: 0.9rem 0 0.45rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  display: block;
}

.key-date-group-label:first-child {
  margin-top: 0;
}

.key-date-value {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}

.key-date-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text);
}

.pastdate {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.45;
}

.pastdate:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pastdate .key-date-value {
  color: var(--text-muted, #6b7280);
}

.pastdate .key-date-desc {
  color: var(--text-muted, #6b7280);
}


/* --------------------------------------------------------------------------
   I-6. RESPONSIVE — INTERIOR PAGES
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .interior-layout {
    grid-template-columns: 1fr;
  }

  .interior-sidebar {
    position: static;
  }

  .cosponsors-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .interior-wrap {
    padding-block: 1.5rem 3rem;
  }
}


/* --------------------------------------------------------------------------
   I-7. PROGRAM OVERVIEW PAGE
   -------------------------------------------------------------------------- */

.program-dates-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
}

.program-date-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0.25rem 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.program-date-item:last-child {
  border-bottom: none;
}

.program-date-value {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
}

.program-date-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
}

@media (max-width: 600px) {
  .program-date-item {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}


/* --------------------------------------------------------------------------
   I-8. PROGRAM COMMITTEE PAGE
   -------------------------------------------------------------------------- */

.committee-chair {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-8);
  overflow: hidden;
}

.committee-chair-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.25);
}

.committee-chair-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary-light);
  margin-bottom: 0.25rem;
}

.committee-chair-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 0.15rem;
}

.committee-chair-affil {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
}

.committee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

/* Optical match to a text-led page such as program.cfm. There the h1 is followed
   by a paragraph whose first line sits about 7px below its own box top because of
   half-leading, so the copy reads as further from the heading than the box gap
   says. A card grid has no such inset -- the card edge starts at the box top -- so
   an identical 26px gap looks tighter. The h1's --sp-6 bottom margin collapses
   with whatever is set here, so the value has to exceed it before it does
   anything: --sp-8 lands the gap at 34px and puts the two pages in optical
   agreement. Excludes the staff grid, which follows .committee-dept-heading and
   has its own deliberate spacing. */
.committee-grid:not(.committee-grid--staff) {
  margin-top: var(--sp-8);
}

.committee-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.committee-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.committee-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.committee-card-info {
  padding: 0.6rem 0.75rem 0.75rem;
  flex: 1;
}

.committee-card-role {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

/* Reserve three lines for the role so member names share one baseline across a
   row. Section names run 1, 2 or 3 lines (5, 30 and 14 of the 49 cards), which
   otherwise lands the name at three different heights and gives the grid nothing
   to scan along. Keep the multiplier in step with the line-height above. Staff
   cards are excluded: they put the role BELOW the name, so reserving space there
   would only add dead height to the bottom of each card. */
.committee-card:not(.committee-card--staff) .committee-card-role {
  min-height: calc(1.3em * 3);
}

.committee-card-name {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.committee-card-affil {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.committee-card--staff .committee-card-role {
  color: var(--secondary-dark);
}

.committee-dept-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-6);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.committee-dept-heading::before,
.committee-dept-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.committee-grid--staff {
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.committee-contact {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: calc(var(--sp-4) * -1);
  text-align: center;
}

@media (max-width: 600px) {
  .committee-chair {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-6);
  }
  .committee-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --------------------------------------------------------------------------
   I-8b. JSM SPOTLIGHT PAGE
   -------------------------------------------------------------------------- */

.spotlight-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.spotlight-gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

.spotlight-schedule-day {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.35rem;
  margin: var(--sp-6) 0 var(--sp-2);
}

.spotlight-schedule {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
}

.spotlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.spotlight-item:last-child {
  border-bottom: none;
}

.spotlight-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 2.25rem;
  color: var(--secondary);
}

.spotlight-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.spotlight-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--secondary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spotlight-name {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--primary);
  font-weight: 600;
}

.spotlight-sponsor {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.spotlight-desc {
  font-size: 0.875rem;
  color: var(--text);
}

@media (max-width: 600px) {
  .spotlight-gallery,
  .dataartshow-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.das-intro {
  display: grid;
  grid-template-columns: 1fr 225px;
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-6);
}

.das-intro-text p:last-child {
  margin-bottom: 0;
}

.das-intro-img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 680px) {
  .das-intro {
    grid-template-columns: 1fr;
  }
  .das-intro-img {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   I-8c. RECRUIT PAGE
   -------------------------------------------------------------------------- */

.recruit-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.recruit-card {
  display: grid;
  grid-template-columns: 1fr 225px;
  gap: var(--sp-6);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.recruit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.recruit-card--text-only {
  grid-template-columns: 1fr;
}

.recruit-card-body h3 {
  margin-top: 0;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 1.2rem;
}


.recruit-card-photos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.recruit-photo {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.recruit-card-photos .recruit-card-caption {
  font-size: 0.8rem;
  font-style: italic;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.4;
}

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

  .recruit-card-photos {
    flex-direction: row;
  }

  .recruit-card-photos .recruit-photo {
    flex: 1;
  }
}

.dataartshow-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.dataartshow-gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   I-8d. EXHIBITORS PAGE
   -------------------------------------------------------------------------- */

/* Two columns via GRID, not column-count. Multicol balances by picking a target
   height and filling, so with unbreakable items of uneven height the second
   column overshoots the first -- measured at 3376px vs 3324px on a 98-item list.
   A grid whose two columns share one set of row tracks cannot do that: each row
   is as tall as its taller cell, so the columns end level by construction.
   grid-auto-flow: column keeps the list reading alphabetically DOWN each column
   rather than across, which is the whole reason not to use plain row flow.
   The page must supply --exhibitor-rows as ceiling(recordCount / 2); CSS cannot
   count children. The fallback is deliberately huge so a page that forgets
   degrades to one long column instead of one very long ROW. */
.exhibitor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--exhibitor-rows, 999), auto);
  column-gap: var(--sp-6);
}

.exhibitor-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1em;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.exhibitor-name {
  font-family: var(--font-body);
  font-size: 0.925rem;
  color: var(--primary);
  font-weight: 600;
}

.exhibitor-booth {
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .exhibitor-list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* --------------------------------------------------------------------------
   I-9. FEATURED EVENTS PAGE
   -------------------------------------------------------------------------- */

.event-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.event-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.event-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

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

.event-item-body {
  padding: var(--sp-4) var(--sp-6);
  background: var(--light);
}

.event-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
}

.event-meta {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-bottom: 0.35rem;
}

.event-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.event-meta-item i {
  color: var(--secondary);
  font-size: 0.78rem;
}

.event-sponsor {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  .event-item {
    grid-template-columns: 1fr;
  }
  .event-item-img {
    height: 180px;
  }
}


/* --------------------------------------------------------------------------
   I-10. FEATURED SPEAKERS PAGE
   -------------------------------------------------------------------------- */

.speaker-section-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  border-bottom: 2px solid var(--secondary);
  padding-bottom: 0.4rem;
  margin: var(--sp-8) 0 var(--sp-6);
}

.speaker-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.speaker-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 var(--sp-6);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.speaker-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.speaker-card-photo {
  width: 140px;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  display: block;
  flex-shrink: 0;
}

.speaker-card:not(.speaker-card--group) > div {
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
}

.speaker-award {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin-bottom: 0.2rem;
}

.speaker-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 0.1rem;
}

.speaker-affil {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.speaker-talk {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.speaker-datetime {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.speaker-datetime i {
  color: var(--secondary);
  margin-right: 0.2rem;
}

/* Multi-speaker award sessions */
.speaker-card--group {
  grid-template-columns: 1fr;
}

.speaker-card--group-header {
  grid-column: 1 / -1;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) calc(140px + var(--sp-6));
  margin-bottom: var(--sp-2);
}

.speaker-card--group-header .speaker-datetime {
  margin-top: 0.4rem;
}

.speaker-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.speaker-group-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 var(--sp-6);
  align-items: start;
  border-top: 1px solid var(--border);
}

.speaker-group-photo {
  width: 140px;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.speaker-group-body {
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
}

.speaker-subaward {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--secondary-dark);
  margin-top: 0.3rem;
}

@media (max-width: 600px) {
  .speaker-card {
    grid-template-columns: 100px 1fr;
  }
  .speaker-card-photo {
    width: 100px;
    height: 120px;
  }
  .speaker-card:not(.speaker-card--group) > div {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  }
  .speaker-group-item {
    grid-template-columns: 100px 1fr;
  }
  .speaker-group-photo {
    width: 100px;
    height: 120px;
  }
  .speaker-card--group-header {
    padding-left: calc(100px + var(--sp-4));
  }
}


/* ==========================================================================
   I-11. BE ON THE PROGRAM SECTION
   ========================================================================== */

/* --- Child sub-navigation (pill chips for session/PD sub-pages) --- */
.section-subnav--child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.section-subnav--child a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 50rem;
  background: var(--white);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.section-subnav--child a:hover {
  background: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}

.section-subnav--child a.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  font-weight: 600;
  pointer-events: none;
}

/* --- Submission detail blocks --- */
.submission-block {
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
  background: color-mix(in srgb, var(--secondary) 5%, transparent);
}

.submission-block h2 {
  margin-top: 0;
}

.submission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-4);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-radius: var(--radius-sm);
}

.submission-meta-item {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.82rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
}

.submission-meta-label {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* --- Accordion --- */
.accordion {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-8);
}

h1 + .accordion,
h2 + .accordion,
h3 + .accordion {
  margin-top: var(--sp-4);
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}

.accordion-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem var(--sp-6);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  background: var(--primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--t-fast);
}

.accordion-item summary::-webkit-details-marker { display: none; }

.accordion-item summary::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(45deg);
  transition: transform var(--t-base);
  flex-shrink: 0;
  margin-left: var(--sp-4);
}

.accordion-item[open] > summary::after {
  transform: rotate(-135deg);
}

.accordion-item summary:hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--secondary));
}

.accordion-item[open] > summary {
  border-bottom: 1px solid var(--border);
}

.accordion-body {
  padding: var(--sp-6);
  background: var(--light);
}

.accordion-body > *:first-child { margin-top: 0; }
.accordion-body > *:last-child  { margin-bottom: 0; }

.accordion-body h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--primary);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}

/* The top margin above is sized to clear a preceding <ul>. When an h4 follows its
   own parent h3 they are a heading pair, so that break-away space reads as a gap. */
.accordion-body h3 + h4 { margin-top: var(--sp-3); }

/* Poster session times, sitting inside an <li> in the Poster Presenters accordion.
   Both columns left-aligned like the EXPO hours table, and the day column shrinks
   to its content so the times sit beside the day rather than across a wide gap.
   The `td:last-child` rule MUST stay below `.reg-table th, .reg-table td` — it is
   overriding that rule's centering. */
.poster-session-times {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.poster-session-times td:first-child {
  width: 1%;
  white-space: nowrap;
}

.poster-session-times td:last-child {
  text-align: left;
}

.accordion-body ul:not(.event-list):not(.employer-logo-grid),
.accordion-body ol {
  padding-left: 2.25rem;
}

/* --- Sponsor list page (sponsorlist.cfm) --- */

.interior-content .sponsor-level-heading {
  background-color: var(--secondary);
  color: var(--white);
  padding: 0.4rem 1rem;
  border-bottom: 5px solid transparent;
  text-align: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-6);
}

.interior-content .sponsor-level-heading--platinum { border-bottom-color: var(--primary); }
.interior-content .sponsor-level-heading--gold     { border-bottom-color: var(--tertiary); }
.interior-content .sponsor-level-heading--silver   { border-bottom-color: var(--secondary-light); }

.sponsor-logo-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  justify-items: center;
  margin-bottom: var(--sp-12);
}

.sponsor-logo-grid--platinum { grid-template-columns: repeat(2, 1fr); }
.sponsor-logo-grid--gold     { grid-template-columns: repeat(3, 1fr); }
.sponsor-logo-grid--silver   { grid-template-columns: repeat(4, 1fr); }

.sponsor-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sponsor-logo-item img {
  max-width: 100%;
  display: block;
}

@media (max-width: 900px) {
  .sponsor-logo-grid--platinum,
  .sponsor-logo-grid--gold,
  .sponsor-logo-grid--silver { grid-template-columns: 1fr; }
}

/* --- Sponsor opportunity items (sponsor.cfm) --- */

.accordion-body .opp-title {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.25rem;
}

.badge-new {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--primary);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  line-height: 1.6;
}

.opp-pricing {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.opp-pricing--taken {
  color: var(--text-muted);
}

.opp-sponsored {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.82em;
  margin-left: 0.75rem;
  vertical-align: middle;
  line-height: 1.6;
}

.opp-sponsored i {
  color: var(--tertiary);
  margin-right: 0;
}

.opp-cosponsor-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.opp-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

.accordion-body .opp-divider:last-child {
  display: none;
}

.badge-open {
  display: inline-block;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15em 0.55em;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
  background: var(--tertiary);
  border-radius: 100px;
  vertical-align: middle;
  line-height: 1.6;
}

/* --- Inline list-item disclosure (e.g. Session Room AV on beontheprogram.cfm) --- */
.list-disclosure {
  display: inline;
}

.list-disclosure summary {
  display: inline;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: rgba(var(--secondary-rgb), 0.45);
  cursor: pointer;
  color: var(--secondary);
  font-size: inherit;
  font-family: inherit;
}

.list-disclosure summary::-webkit-details-marker { display: none; }

.list-disclosure summary:hover {
  color: var(--secondary-dark);
  text-decoration-color: var(--secondary);
}

.list-disclosure-body {
  margin-top: 0.6rem;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
}

.list-disclosure-body p { margin: 0 0 0.6rem; }
.list-disclosure-body p:last-child { margin-bottom: 0; }

/* ============================================================
   EMPLOYER LOGO GRID
   Used on careerservice.cfm (Past Employers section)
============================================================ */
.employer-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  list-style: none;
  padding: 0;
}

.employer-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  min-height: 80px;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}

.employer-logo-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--secondary);
}

.employer-logo-item img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter var(--t-fast), opacity var(--t-fast);
}

.employer-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}


/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background-color: var(--secondary);
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background-color var(--t-fast);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--secondary-dark);
}

@media (max-width: 640px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==========================================================================
   ATTENDEE SEARCH & RESULTS
   ========================================================================== */

/* Search form card */
.attendee-search-form {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  max-width: 100%;
  box-shadow: var(--shadow-sm);
  margin-top: var(--sp-6);
}

.attendee-search-form .form-group { margin-bottom: var(--sp-6); }

.attendee-search-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-2);
}

.attendee-search-form input[type="text"] {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.975rem;
  color: var(--text);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.attendee-search-form input[type="text"]:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.15);
}

.attendee-search-form input[type="text"].error { border-color: var(--error); }

.attendee-search-form label.error {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--error);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.35rem;
}

.attendee-search-form .form-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
  margin-top: -0.5rem;
}

.attendee-search-form .form-actions { margin-top: var(--sp-1); }

/* Results page */
.results-summary {
  margin-bottom: var(--sp-6);
  color: var(--text-muted);
}

.results-count {
  font-weight: 700;
  color: var(--secondary-dark);
}

.results-empty {
  padding: var(--sp-8);
  text-align: center;
  color: var(--text-muted);
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
}

.results-actions { margin-top: var(--sp-6); text-align: center; }

/* --------------------------------------------------------------------------
   I-12. ONSITE PAGE
   -------------------------------------------------------------------------- */

.onsite-quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.onsite-quick-card {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  transition: transform var(--t-base), box-shadow var(--t-base);
  box-shadow: var(--shadow-md);
}
.onsite-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.onsite-quick-card i {
  font-size: 2.25rem;
  color: rgba(255,255,255,0.85);
}
.onsite-quick-card span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  line-height: 1.35;
}
.onsite-quick-card--program { background: var(--tertiary-dark); }
.onsite-quick-card--program i    { color: rgba(var(--primary-rgb), 0.65); }
.onsite-quick-card--program span { color: var(--primary); }
.onsite-quick-card--guide   { background: var(--secondary-dark); }

.onsite-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.onsite-info-box {
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.onsite-info-box--wifi {
  background: color-mix(in srgb, var(--secondary-light) 35%, white);
  border: 1px solid var(--secondary-light);
}
.onsite-info-box--wifi h3  { color: var(--primary); }
.onsite-info-box--wifi p   { color: var(--text); }
.onsite-info-box--wifi i   { font-size: 2rem; color: var(--primary); }
.onsite-info-box--app      { background: var(--primary); }
.onsite-info-box--app h3   { color: var(--white); }
.onsite-info-box--app p    { color: rgba(255, 255, 255, 0.8); }
.onsite-info-box--app i    { font-size: 2rem; color: rgba(255, 255, 255, 0.8); }
.onsite-info-box--app .onsite-app-placeholder { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }
.onsite-info-box h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  margin: var(--sp-3) 0 var(--sp-2);
}

.onsite-tv-banner {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  margin-bottom: var(--sp-8);
  box-shadow: var(--shadow-md);
}
.onsite-tv-banner a { text-decoration: none; }
.onsite-tv-banner a:hover { text-decoration: none; opacity: 0.9; }
.onsite-tv-banner i {
  font-size: 2.5rem;
  color: var(--tertiary);
  display: block;
  margin-bottom: var(--sp-3);
}
.onsite-tv-banner .onsite-tv-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  margin: 0 0 var(--sp-2);
}
.onsite-tv-banner .onsite-tv-subtitle {
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-size: 0.9rem;
}

.onsite-hours-block { margin-bottom: var(--sp-8); }
.onsite-hours-block h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: var(--sp-1);
}
.onsite-hours-block .hours-location {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--sp-3);
  margin-top: 0;
}
.onsite-hours-block .reg-table td:first-child { width: 200px; }

@media (max-width: 900px) {
  .onsite-quick-links { grid-template-columns: repeat(2, 1fr); }
  .onsite-info-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .onsite-quick-links { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   I-13. PARTICIPANT GUIDELINES PAGE
   -------------------------------------------------------------------------- */

.guidelines-chart-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  background: var(--white);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
}

.guidelines-chart-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   I-14. PROFESSIONAL DEVELOPMENT PAGE
   -------------------------------------------------------------------------- */

.pd-section-group {
  margin-left: 30px;
}

.pd-section-group h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--primary);
}

.pd-section-group p {
  margin-bottom: var(--sp-6);
}

.pd-section-group p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   I-15. SPONSOR CHART TABLE
   -------------------------------------------------------------------------- */

.sponsor-chart-wrap {
  position: relative; /* containing block for .sr-only cells, or they escape the scroll clip */
  overflow-x: auto;
  margin: var(--sp-8) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.sponsor-chart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}

.sponsor-chart thead th {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  text-align: center;
  vertical-align: top;
  background: #fff;
  border-bottom: 2px solid var(--border);
}

.sponsor-chart thead th:first-child {
  text-align: left;
}

.sponsor-chart-tier {
  width: 115px;
}

.sponsor-chart-tier--platinum { border-top: 4px solid var(--primary); }
.sponsor-chart-tier--gold     { border-top: 4px solid var(--tertiary); }
.sponsor-chart-tier--silver   { border-top: 4px solid var(--secondary-light); }

.sponsor-chart-tier-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sponsor-chart-tier--platinum .sponsor-chart-tier-name { color: var(--primary); }
.sponsor-chart-tier--gold .sponsor-chart-tier-name     { color: var(--tertiary-dark); }
.sponsor-chart-tier--silver .sponsor-chart-tier-name   { color: var(--secondary); }

.sponsor-chart-tier-amount {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--sp-1);
  line-height: 1.4;
}

.sponsor-chart tbody tr:nth-child(odd)  { background: var(--light); }
.sponsor-chart tbody tr:nth-child(even) { background: #fff; }

.sponsor-chart tbody td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}

.sponsor-chart tbody td:first-child {
  text-align: left;
  color: var(--text);
}

.sponsor-chart-check i { font-size: 1.15rem; }

.sponsor-chart tbody td:nth-child(2) .fa-check { color: var(--primary); }
.sponsor-chart tbody td:nth-child(3) .fa-check { color: var(--tertiary-dark); }
.sponsor-chart tbody td:nth-child(4) .fa-check { color: var(--secondary); }

.sponsor-chart-note {
  display: block;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* --------------------------------------------------------------------------
   I-16. JSM TV PAGE
   -------------------------------------------------------------------------- */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: var(--sp-6);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   I-17. EXPO 2027 PAGE
   -------------------------------------------------------------------------- */

.expo-hours-table td:last-child {
  text-align: left;
}

/* --------------------------------------------------------------------------
   I-18. INVITED SESSIONS PAGE
   -------------------------------------------------------------------------- */

/* Society list — 2-column on wider viewports for easier scanning */
.societies-list {
  column-count: 2;
  column-gap: var(--sp-6);
}

@media (max-width: 640px) {
  .societies-list {
    column-count: 1;
  }
}

/* --------------------------------------------------------------------------
   I-19. WEBCASTS PAGE
   -------------------------------------------------------------------------- */

/* Reuses .video-embed (I-16) but capped narrower than the page's full-width
   article so videos don't stretch edge-to-edge at 1200px+. Each lecture is
   its own card so items read as distinct units instead of one long stack. */
.webcast-video-item {
  max-width: 860px;
  margin-inline: auto;
  padding: var(--sp-8);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.webcast-video-item + .webcast-video-item {
  margin-top: var(--sp-12);
}

.webcast-video-item-header {
  border-left: 3px solid var(--tertiary);
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.webcast-video-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 400;
  color: var(--primary);
  margin: 0 0 var(--sp-1);
}

.webcast-video-item-header p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.webcast-video-item-header p em {
  color: var(--text);
  font-style: italic;
}

@media (max-width: 640px) {
  .webcast-video-item {
    padding: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   LANDSCAPE PHONE — non-sticky header
   On phones in landscape the header eats ~half the viewport; let it scroll.
   max-height: 500px catches landscape phones without affecting tablets/desktop.
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header {
    position: relative;
  }
}



/* --------------------------------------------------------------------------
   I-20. STYLE GUIDE PAGE
   Chrome for styleguide.cfm only — swatch grids, spec labels, editor panel.
   Touches no site component. Safe to delete with the page.
   -------------------------------------------------------------------------- */
.sg-intro { padding-block: var(--sp-8) var(--sp-4); }

/* Mirrors .interior-content .page-title. The style guide is full-width and so
   sits outside .interior-content, where that rule cannot reach it — using
   .page-title here would be an inert class on the one page whose job is showing
   components as they actually render. */
.sg-page-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 400;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: var(--sp-6);
}
.sg-lede { font-size: 1.1rem; max-width: 70ch; }
.sg-note {
  max-width: 70ch;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--light);
  border-left: 3px solid var(--tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
/* Two intro notes side by side. The 1100px cap keeps each column near the 70ch
   measure the notes are written to; max-width is released on the notes themselves
   so they fill their column instead of leaving a gutter down the middle. Default
   stretch alignment is deliberate -- matched bottoms read as a pair. */
.sg-intro-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 1100px;
  margin-top: var(--sp-3);
}
.sg-intro-notes .sg-note { margin-top: 0; max-width: none; }
.sg-section {
  padding-block: var(--sp-12);
  border-top: 1px solid var(--border);
}
.sg-h2 {
  font-family: var(--font-display);
  color: var(--primary);
  margin-bottom: var(--sp-2);
}
.sg-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block: var(--sp-8) var(--sp-3);
}
.sg-desc { color: var(--text-muted); margin-bottom: var(--sp-6); max-width: 70ch; }
.sg-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--primary-mid);
}

/* Swatches */
.sg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-4);
}
.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: 0.8rem;
}
.sg-chip {
  height: 62px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-1);
}
.sg-chip--bordered { border: 1px solid var(--border); }
.sg-swatch em { font-style: normal; color: var(--text-muted); }
.sg-swatch small { color: var(--secondary-dark); font-size: 0.72rem; }

/* Spacing scale */
.sg-scale {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.sg-scale code { flex: 0 0 5.5rem; }
.sg-scale span {
  height: 15px;
  background: var(--secondary);
  border-radius: var(--radius-sm);
}
.sg-scale em { font-style: normal; color: var(--text-muted); font-size: 0.8rem; }

/* Radius / shadow tiles */
.sg-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.sg-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 165px;
  height: 105px;
  background: var(--white);
  border: 1px solid var(--border);
  text-align: center;
}
.sg-tile em { font-style: normal; color: var(--text-muted); font-size: 0.78rem; }

/* Demo helpers */
.sg-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.sg-row--dark {
  background: var(--primary);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
}
.sg-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block: var(--sp-6) var(--sp-2);
}

/* Theme editor panel */
.sg-editor {
  position: sticky;
  top: calc(var(--header-height) + var(--sp-2));
  z-index: 20;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
}
/* The panel is a <details>, so this row doubles as the collapse control --
   header plus open panel eats a lot of vertical space on a short window.
   Padded and negatively inset so the hover highlight spans the panel's full
   inner width without changing the panel's own padding. */
.sg-editor-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sg-editor-title:hover {
  background: var(--light);
  color: var(--primary);
}
.sg-editor-title::-webkit-details-marker { display: none; }
.sg-editor[open] > .sg-editor-title { margin-bottom: var(--sp-3); }

/* Collapse chevron, drawn the same way .accordion-item summary::after draws
   its own, so the site has one collapse icon rather than two. Colored
   --primary because this summary sits on white, not on the accordion's
   --primary bar. */
.sg-editor-title::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
/* Open = chevron points up. Closed = points down, i.e. "there is more below". */
.sg-editor[open] > .sg-editor-title::after { transform: rotate(-135deg); }
.sg-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sg-field { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.78rem; }
.sg-field input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.sg-field-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sg-editor-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.sg-editor-status { font-size: 0.78rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .sg-editor { position: static; }
  .sg-intro-notes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sg-scale code { flex-basis: 4.5rem; }
  .sg-tile { width: 100%; }
}


/* --------------------------------------------------------------------------
   I-21. POSTER TIPS PAGE
   -------------------------------------------------------------------------- */

/* Under Helpful Online Resources, the printing-services entry is a lead-in line
   with its link on the next line, indented beneath it — the arrangement the JSM
   2026 page uses. That page indents with a run of &nbsp;; this uses the spacing
   scale so the indent survives a font change. */
.resource-sublink {
  display: inline-block;
  margin-top: var(--sp-1);
  margin-left: var(--sp-6);
}