/* ==========================================================================
   SDSS 2027 — Website Stylesheet
   Spun off from MeetingsTemplate
   Fonts: URW Century Schoolbook (display) + Myriad (body) via Monotype
   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. */
  /* SDSS 2027 palette (graphic standards, 2026-08-17). Four brand colors:
     Dark Blue-Gray #122a30 (546 C) -- primary
     Med Blue       #53a1b7 (7702 C) -- secondary
     Light Blue-Gray #d7eef4 (656 C) -- secondary-light
     Brown          #73574e (7518 C) -- tertiary
     The -dark/-mid tokens are derived shades, not brand colors; each was
     chosen to keep its own text contrast at or above WCAG AA. */
  --primary:           #122a30;   --primary-rgb:         18, 42, 48;
  --primary-dark:      #0b1a1e;   --primary-dark-rgb:    11, 26, 30;
  --primary-mid:       #1e4451;
  --secondary:         #53a1b7;   --secondary-rgb:       83, 161, 183;
  --secondary-dark:    #3c7484;
  --secondary-light:   #d7eef4;   --secondary-light-rgb: 215, 238, 244;
  --tertiary:          #73574e;
  --tertiary-dark:     #5a443d;
  --light:             #eef6f9;
  --white:             #ffffff;
  --white-70:          rgba(255, 255, 255, 0.7);
  --text:              #222222;
  --text-muted:        #6f6f6f;
  --border:            #dddddd;
  --error:             #c0392b;

  /* Typography */
  --font-display: 'URW Century Schoolbook W01', serif;
  --font-body:    'Myriad W01', sans-serif;

  /* Spacing scale */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-12:  3rem;
  --sp-20:  5rem;
  --sp-28:  7rem;

  /* Layout */
  --container-max:   1280px;
  --nav-height:      68px;
  --header-height:   273px; /* accent bar (4px) + top bar (201px) + nav bar (68px) */

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

  /* Shadows */
  /* Shadows are tinted with --primary so they follow the palette on a rebrand.
     These previously used a hardcoded #1a3560, a navy that was not any brand
     token — so no palette swap could ever update it. Changed 2026-08-03; this
     shifted the rendered shadow hue from rgb(26, 53, 96) to the --primary
     channels, now rgb(18, 42, 48) under the SDSS palette. */
  --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;
}


/* --------------------------------------------------------------------------
   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-weight: 200;
  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-dark);
  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; }
em { font-style: italic; font-weight: inherit; }
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(--white);
  font-size: 0.875rem;
  font-weight: 300;
  border-radius: var(--radius-sm);
  z-index: 9999;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: 0.75rem;
  color: var(--white);
}

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

.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;
}


/* --------------------------------------------------------------------------
   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: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tertiary);
  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.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--primary);
  margin-bottom: var(--sp-6);
  text-wrap: balance;
}
.section-heading.center { text-align: center; }

.text-sm { font-size: 0.875em; }


/* --------------------------------------------------------------------------
   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.95rem;
  font-weight: 300;
  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);
}

/* Brown carries WHITE text, not --primary. The template's tertiary was a light
   green that took dark text; SDSS's tertiary is a dark brown, so the lightness
   relationship inverts. --primary on --tertiary is 2.29:1 -- illegible. */
.btn-primary {
  background-color: var(--tertiary);
  color: var(--white);
  border: 2px solid var(--tertiary);
}
.btn-primary:hover {
  background-color: var(--tertiary-dark);
  border-color: var(--tertiary-dark);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0) scale(0.96); }

.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-ghost:active { transform: scale(0.96); }

.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-outline:active { transform: translateY(0) scale(0.96); }

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

.btn-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   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); }

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

.header-social-links {
  display: flex;
  align-items: center;
  gap: 0.05rem;
}

.header-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
  position: relative;
}
.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::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: 300;
  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; }
}

.header-top-divider {
  width: 1px;
  height: 24px;
  background-color: var(--border);
  flex-shrink: 0;
  margin-inline: 0.4rem;
}

.header-search-form {
  display: flex;
  align-items: stretch;
  height: 32px;
}

.header-search-input {
  width: 200px;
  padding: 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 200;
  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), width var(--t-slow), 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);
  width: 260px;
}

.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  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.75rem;
  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);
}

.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);
}

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

.header-logo-img {
  height: auto;
  /* SDSS-specific: 175px, not the template's 150px. The SDSS lockup stacks five
     tiers at an ~8:1 ratio, so at 150px its lower bands rendered at 9.6px and
     below -- under the legible floor. 175px lifts "DATA SCIENCE & STATISTICS"
     to ~11.2px. Source art is 480x375, so this is still a 2.14x downscale, not
     an upscale. Changing this REQUIRES updating --header-height to match: the
     token is a hand-maintained mirror of the rendered height and three calc()
     scroll offsets read from it. */
  max-height: 175px;
  width: auto;
  display: block;
  transition: opacity var(--t-fast);
}
.header-logo:hover .header-logo-img { opacity: 0.85; }

.header-top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 240px;
}

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

.header-nav-bar {
  background-color: var(--primary);
}

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

.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: 200;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.primary-nav {
  display: flex;
  align-items: stretch;
}

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

.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1;
  justify-content: center;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding-inline: 0.65rem;
  width: 100%;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 300;
  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);
}
/* The old --tertiary text measured 1.97:1 on this bar once the palette went brown.
   Two constraints pull against each other here: the color must clear 4.5:1 against
   the nav bar, AND stay visibly distinct from the inactive links, which composite
   to about rgb(214,218,219). Plain --secondary is 4.4:1 (just short) and
   --secondary-light is 10.7:1 but only 1.17 away from the inactive links -- it
   reads as "not active". Lightening --secondary ~15% clears both: 5.27:1 on the
   bar, 1.74 against the inactive links.
   Do NOT add a bottom-border/underline indicator here: .dropdown-menu already
   carries `border-top: 3px solid var(--tertiary)` and the two collide. */
.nav-link.active {
  color: color-mix(in srgb, var(--secondary) 85%, var(--white));
  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 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background-color: var(--white);
  border-top: 3px solid var(--tertiary);
  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);
}

@media (min-width: 1101px) {
  .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.92rem;
  font-weight: 200;
  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: 300;
  background-color: var(--light);
  border-left: 3px solid var(--tertiary);
  padding-left: calc(1.2rem - 3px);
}

.btn-register {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.5rem;
  background-color: var(--tertiary);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base);
  white-space: nowrap;
}
.btn-register:hover {
  background-color: var(--tertiary-dark);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-register:active { transform: translateY(0) scale(0.96); }

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
}

.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. WELCOME SECTION
   -------------------------------------------------------------------------- */
.welcome-section {
  padding: var(--sp-20) 0;
  background-color: var(--white);
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  /* --sp-20, not --sp-12. At --sp-12 the gutter computed to 51px against a
     1212px row and the carousel crowded the copy; the live SDSS 2026 site runs
     ~144px there. --sp-20 gives 85px and lands the text measure on ~676px,
     within 2px of 2026's. Also applied to MeetingsTemplate 2026-08-18 -- keep
     the two in sync. Narrowing this column changes the slide box, which is
     height-locked at 325px; see Carousel Slide Sizing in CLAUDE.md. */
  gap: var(--sp-20);
  align-items: start;
}

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

.welcome-visual { position: relative; }

.welcome-image-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.welcome-image-frame img {
  width: 100%;
  object-fit: cover;
  display: block;
  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));
}

/* Welcome-section inline carousel */
.welcome-carousel {
  position: relative;
  overflow: hidden;
  /* Required. This is a grid item, so its default min-width: auto is its
     min-content size -- and main.js writes slide.style.width from this
     element's own offsetWidth. Those fixed-width slides then become the
     min-content, ratcheting the carousel open so it can never shrink back
     and overflowing the track on narrow viewports. min-width: 0 breaks the
     loop; without it the slide is clipped below ~600px. */
  min-width: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  user-select: none;
}

.welcome-carousel-track {
  display: flex;
  transition: transform 500ms ease;
  will-change: transform;
}

.welcome-slide {
  flex: 0 0 auto;
  /* width set by JS to match carousel container exactly */
}

.welcome-slide a { display: block; }

.welcome-slide img {
  width: 100%;
  /* Fixed RATIO, not a fixed height. A hardcoded height meant the box ratio
     followed the column width -- 1.39 on desktop but 3.39 once the grid
     collapsed at 1100px, so object-fit: cover sheared the top and bottom off
     any slide with text in it. Locking the ratio makes the crop constant at
     every viewport: a slide authored at 1.388 is never cropped at all.
     451/325 is the measured desktop box. See Carousel Slide Sizing in
     CLAUDE.md before changing this. */
  aspect-ratio: 451 / 325;
  height: auto;
  object-fit: cover;
  display: block;
}

.welcome-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(var(--primary-rgb), 0.6);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  padding-bottom: 5px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  backdrop-filter: blur(4px);
}
.welcome-carousel-btn:hover {
  background: var(--tertiary);
  border-color: var(--tertiary);
  transform: translateY(-50%) scale(1.08);
}
.welcome-carousel-prev { left: 0.6rem; }
.welcome-carousel-next { right: 0.6rem; }

.welcome-carousel-dots {
  position: absolute;
  bottom: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 10;
}

.welcome-carousel-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}
.welcome-carousel-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}
.welcome-carousel-dot:hover { background: rgba(255, 255, 255, 0.75); }
.welcome-carousel-dot--active {
  background: var(--white);
  transform: scale(1.4);
}


/* --------------------------------------------------------------------------
   10. STATS BAR
   -------------------------------------------------------------------------- */
/* --primary, not --secondary: this band and its four children are all white or
   translucent-white, and white on Med Blue is 2.94:1. */
.stats-bar {
  background-color: var(--primary);
  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: 0.75rem;
  font-weight: 300;
  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;
}


/* --------------------------------------------------------------------------
   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;
  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(--secondary-dark);
  font-size: 0.68rem;
  font-weight: 300;
  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;
  text-wrap: balance;
}

.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: 300;
  color: var(--tertiary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: gap var(--t-fast), color var(--t-fast);
  margin-top: auto;
}
.card-link:hover {
  color: var(--tertiary-dark);
  gap: 0.6rem;
}


/* --------------------------------------------------------------------------
   12. SEARCH & SOCIAL SECTION (above footer)
   -------------------------------------------------------------------------- */

.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;
  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-color 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.25);
  border-color: var(--secondary);
  color: var(--secondary-light);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(var(--secondary-rgb), 0.25);
}
.social-icon-link:active { transform: scale(0.96); box-shadow: none; }

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


.cse-wrapper #cse-search-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.gsc-wrapper {
  max-width: none !important;
  width: 100% !important;
}


/* --------------------------------------------------------------------------
   13. NEWSLETTER CALLOUT
   -------------------------------------------------------------------------- */
.newsletter-section {
  background-color: var(--secondary-dark);
  padding: var(--sp-12) 0;
}

/* --tertiary (brown) is fine for an eyebrow on a light section, but this one sits
   on the --secondary-dark band, where it drops to ~1.3:1. Scoped override only. */
.newsletter-section .section-eyebrow {
  color: var(--white);
}

.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: 200;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.4rem;
  text-wrap: balance;
}

/* The newsletter band is --secondary-dark, a mid-tone: it is the one surface here
   where neither white nor dark text is comfortably safe. 0.55 alpha was already
   failing before the SDSS palette (3.17:1) and got worse (2.74:1) -- 0.9 clears AA. */
.newsletter-callout-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
  margin: 0;
}

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


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

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  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 text alphas were 0.42 (tagline/address) and 0.32 (copyright/legal), which
   measured 4.05:1 and 2.88:1 on the dark footer -- both failing AA, and failing
   before the SDSS palette too. Raised to 0.55 (6.07:1) and 0.48 (~5:1); the
   relative hierarchy is preserved and font-size still carries most of it. */
.footer-tagline {
  font-size: 0.9rem;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

.footer-address {
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
}
.footer-address a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }

/* Links inside the tagline and copyright lines had no footer-scoped rule, so they
   fell through to the global `a` color. That is --secondary-dark, which is a blue
   meant for light backgrounds and measures 3.41:1 down here. Inheriting the parent
   keeps them at whatever their surrounding text already passes at. */
.footer-tagline a,
.footer-copyright a { color: inherit; }
.footer-address a:hover { color: var(--secondary-light); }

.footer-col-heading {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tertiary);
  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);
}

.footer-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 3rem;
  align-items: center;
  padding-block: var(--sp-6);
}

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

.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-legal a:hover { color: var(--secondary-light); }


/* --------------------------------------------------------------------------
   15. BACK TO TOP
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background-color var(--t-fast);
  font-size: 0.875rem;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background-color: var(--tertiary); }
.back-to-top:active { transform: scale(0.96); }

/* --- 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: 300;
  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-light);
  border-bottom: 2px solid var(--secondary-light);
  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-light));
}

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

.accordion-body {
  padding: var(--sp-6);
  background: var(--light);
  overflow: hidden;
  display: flow-root;
}

.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);
}

.accordion-body ul,
.accordion-body ol {
  padding-left: 2.25rem;
}

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

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

.opp-title {
  font-size: 1.15rem;
  color: var(--secondary-dark);
  margin-bottom: 0.25rem;
}

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


/* --------------------------------------------------------------------------
   20. ATTENDEE SEARCH & RESULTS
   -------------------------------------------------------------------------- */

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

.attendee-search-form .form-group { margin-bottom: 1.25rem; }

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

.attendee-search-form input[type="text"] {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 200;
  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.12);
}

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

.attendee-search-form label.error {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  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: 1.5rem;
  margin-top: -0.5rem;
}

.attendee-search-form .form-actions { margin-top: 0.25rem; }

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

.results-count {
  font-weight: 300;
  color: var(--tertiary);
}

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

.results-actions { margin-top: 1.5rem; text-align: center; }


/* --------------------------------------------------------------------------
   16. INTERIOR PAGE STYLES
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding: var(--sp-8) 0 0;
  margin-bottom: 1.25rem;
  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-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-muted); }


.interior-wrap { padding-block: 1.5rem 4rem; }

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

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

.interior-content--full { grid-column: 1 / -1; }

.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;
  text-wrap: balance;
}

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

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

.interior-content h2.center { justify-content: center; }

.interior-content h3 {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  color: var(--primary);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
}

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

.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 ul,
.interior-content ol {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  padding-left: 2.25rem;
  margin-bottom: 1.25rem;
}

.interior-content ul li { list-style: disc; margin-bottom: 0.4rem; }
.interior-content ul li::marker { color: var(--tertiary); }
.interior-content ol li { list-style: decimal; margin-bottom: 0.4rem; }
.interior-content ol ul li { list-style: disc; }
.interior-content ol ul { margin-bottom: 0; }
.interior-content strong { font-weight: 300; color: var(--primary); }

/* 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: 1.5rem;
}

.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;
}

/* sidebar-widget-header/body kept for backwards compat */
.sidebar-widget-header {
  background: var(--primary);
  color: var(--white);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sidebar-widget-body { padding: var(--sp-6); }

.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: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.widget-header-accent {
  display: block;
  width: 3px;
  height: 1.1rem;
  background: var(--tertiary);
  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;
}

/* Document cover in a sidebar widget (the Opportunities Guide). The covers are
   mostly white at the edges and the widget body is white, so the 1px border is
   what shows where the clickable cover ends -- the same line the widget uses. */
.widget-cover-img {
  display: block;
  max-width: 100%;
  margin: 0 auto var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sidebar-links a {
  font-size: 0.875rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.sidebar-links a:last-child { border-bottom: none; }
.sidebar-links a:hover { color: var(--secondary-dark); padding-left: 0.3rem; }
.sidebar-links a.active { color: var(--tertiary); font-weight: 300; }

/* Callout box */
.callout-box {
  border: 1px solid var(--border);
  background: var(--light);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin: var(--sp-6) 0;
  font-size: 1.05rem;
  line-height: 1.6;
}
.callout-box a { font-weight: 300; }

/* Alert boxes */
.alert-box {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  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; }
.alert-box-content h2 { display: block; margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
.alert-box--info {
  background: rgba(var(--secondary-rgb), 0.08);
  border: 1px solid rgba(var(--secondary-rgb), 0.35);
}
.alert-box--info .alert-box-icon { color: var(--secondary-dark); }
.alert-box--warning {
  background: color-mix(in srgb, var(--tertiary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tertiary) 40%, transparent);
}
.alert-box--warning .alert-box-icon { color: var(--tertiary-dark); }

/* Key dates list (sidebar / keydates.cfm) */
.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:first-child {
  padding-top: 0;
}

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

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

.key-date-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  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,
.pastdate .key-date-desc { color: var(--text-muted); }

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

.reg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

/* Fee tables (registration.cfm): widen the Early/Regular price columns so
   the two-line "Early / Through August 31" 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) {
  width: 22%;
}

.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: 300;
  font-size: 0.925rem;
  line-height: 1.4;
}

.reg-table th.th-sub { background-color: var(--primary-mid); font-weight: 300; }
.reg-table td.td-indent { padding-left: 2rem; }

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

.reg-table tbody tr:nth-child(even) { background-color: var(--light); }
.reg-table tbody tr:hover { background-color: rgba(var(--secondary-rgb), 0.06); }

/* The "Through August 31" sub-line inside a fee-table header. registration.cfm
   has always emitted .fee-dates but this stylesheet had no rule for it, so the
   sub-line rendered at full header size. Ported from JSMTemplate (its section
   16, .fee-dates) at weight 200 rather than its 400: the Monotype kit this
   instance loads ships the body face only in 100/200/300, and this sub-line
   must read lighter than the 300 of the .reg-table th around it. */
.fee-dates {
  font-weight: 200;
  font-size: 0.78rem;
  opacity: 0.85;
}

.reg-table--compact th,
.reg-table--compact td { padding: 0.4rem 0.65rem; font-size: 0.8rem; 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);
}

/* Key dates list (inline content, pre-existing) */
.keydates-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.keydates-list li {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.keydates-list li:last-child { border-bottom: none; }
.keydates-date {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--tertiary);
  min-width: 110px;
  flex-shrink: 0;
}
.keydates-event {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}

[id] { scroll-margin-top: calc(var(--header-height) + 6rem); }


/* --------------------------------------------------------------------------
   16b. LOCATION CARDS
   -------------------------------------------------------------------------- */

.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-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: 0.35rem;
}

/* Full-width horizontal banner — image left, text right */
.location-card--banner {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--sp-8);
}

.location-card-banner-img {
  width: 260px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.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;
}

/* Float-right variant — image on top, text below, card floats right */
.location-card--photo-right {
  float: right;
  width: 280px;
  margin: 0 0 var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
}

.location-card--photo-right .location-card-banner-img {
  width: 100%;
  height: 175px;
}

@media (max-width: 600px) {
  .location-card--banner {
    flex-direction: column;
  }
  .location-card--banner .location-card-banner-img {
    width: 100%;
    max-height: 180px;
  }
  .location-card--photo-right {
    float: none;
    width: 100%;
    margin: 0 0 var(--sp-6) 0;
  }
  .location-card--photo-right .location-card-banner-img {
    height: 200px;
  }
}


/* --------------------------------------------------------------------------
   16c. REGISTRATION PAGE
   -------------------------------------------------------------------------- */

.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-dark);
  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-text p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.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 h2 {
  margin-top: 0;
}

.reg-tips-card .reg-tips-heading {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  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-dark);
  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(--primary);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 300;
  text-align: center;
  line-height: 1.75rem;
}

/* Cover image variant — image left, text right, full card is a clickable link */
.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: 300;
  color: var(--secondary-dark);
  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;
  }
}


/* --------------------------------------------------------------------------
   16d. PROGRAM SCHEDULE
   -------------------------------------------------------------------------- */

.schedule { margin-bottom: var(--sp-12); }

.schedule .schedule-day {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 300;
  color: var(--primary);
  border-bottom: 2px solid var(--secondary);
  padding-bottom: var(--sp-2);
  margin-top: var(--sp-8);
  margin-bottom: 0;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-table td {
  padding: var(--sp-2) var(--sp-3);
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.schedule-table td:first-child {
  width: 220px;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.875rem;
  padding-right: var(--sp-6);
}

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

/* --------------------------------------------------------------------------
   16e. CONFERENCE COMMITTEE
   -------------------------------------------------------------------------- */

.committee-group { margin-bottom: var(--sp-12); }

.committee-group > h2 {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 300;
  color: var(--primary);
  border-bottom: 2px solid var(--secondary);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* Photo layout */
.committee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-4);
}

.committee-member {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.committee-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.committee-info { font-size: 0.9375rem; line-height: 1.5; }
.committee-info strong { display: block; color: var(--primary); margin-bottom: 2px; }
.committee-info em { color: var(--text-muted); font-style: normal; font-size: 0.875rem; }

/* Text-only layout */
.committee-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-8);
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
}

/* Beats .interior-content ul { padding-left; margin-bottom } and ul li specificity */
.interior-content .committee-list { padding-left: 0; margin-bottom: 0; }
.interior-content .committee-list li { list-style: none; margin-bottom: 0; }

.committee-list li { font-size: 0.9375rem; line-height: 1.5; padding-bottom: var(--sp-3); }

.committee-list li strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--primary);
  margin-bottom: 1px;
}

.committee-list .committee-affiliation {
  display: block;
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 2px;
}

.committee-list li em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--secondary-dark);
}

/* Role-led layout: the role is the label and the people sit under it, which is
   how rosters actually arrive from organizers. Use this when one role can hold
   several people (co-chairs, track chairs); use .committee-list above when each
   person has a distinct title. The label is deliberately lighter than
   .committee-group > h2 -- a roster runs to a dozen roles, and a bordered rule
   on each one turns the page into a stack of dividers. */
.committee-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-4);
}

.interior-content .committee-role h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin: 0 0 var(--sp-2);
}

.interior-content .committee-role p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--primary);
  margin-bottom: 0;
}

/* Several people under one role: one <span> each, so a small gap can sit
   between people without also opening up a wrapped affiliation. <br> can't do
   that -- line-height spaces wrapped lines and new people alike. */
.interior-content .committee-people > span { display: block; margin-bottom: 0.35em; }
.interior-content .committee-people > span:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16f. FEATURED SPEAKERS
   -------------------------------------------------------------------------- */

.interior-content .speaker-section-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  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);
}

img.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: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

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

.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-dark);
  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);
}

img.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(--primary);
  margin-top: 0.3rem;
}

/* Speaker bio popup -- a .speaker-bio-btn names a <template> by data-bio-id;
   js/main.js copies it into the one #bio-modal <dialog> and opens it.
   The dialog sits inside .interior-content, so bio paragraphs take the page's
   body type. Padding lives on .bio-modal-inner, not the dialog, so a click on
   the dialog element itself can only be a backdrop click. */
.speaker-bio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--sp-2);
  padding: 0.3rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--white);
  border: 1px solid var(--secondary-dark);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.speaker-bio-btn:hover,
.speaker-bio-btn:focus-visible {
  background: var(--secondary-light);
}

.bio-modal {
  width: min(640px, calc(100% - 2 * var(--sp-4)));
  /* The section 2 reset (* { margin: 0 }) strips the UA's margin: auto, which is
     what centres a modal <dialog> in the viewport. Put it back. */
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  color: var(--text);
}

.bio-modal::backdrop {
  background: rgba(var(--primary-dark-rgb), 0.6);
}

/* The inner wrapper scrolls, not the dialog -- a click on a scrollbar of the
   dialog itself would read as a backdrop click and close it. */
.bio-modal-inner {
  position: relative;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
}

.interior-content .bio-modal-body h2 {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 0.2rem;
  padding-right: var(--sp-8);
}

.interior-content .bio-modal-body .bio-modal-affil {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.interior-content .bio-modal-body p:last-child { margin-bottom: 0; }

.bio-modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--primary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast);
}

.bio-modal-close:hover,
.bio-modal-close:focus-visible {
  background: var(--light);
}

/* --------------------------------------------------------------------------
   16g. SHORT COURSES
   -------------------------------------------------------------------------- */

/* List layout (.sc-session / .sc-entry) */
.sc-session { margin-bottom: var(--sp-12); }

.sc-session > h2 {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 300;
  color: var(--primary);
  border-bottom: 2px solid var(--secondary);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.sc-session-time {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0;
  margin-bottom: var(--sp-6);
}

.sc-entry { margin-bottom: var(--sp-8); }

.sc-entry > h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: var(--sp-2);
}

.sc-instructors {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: 0;
  margin-bottom: var(--sp-3);
}

/* Card layout (.sc-card) — activate by swapping in the commented-out block */
.sc-time-heading {
  font-size: 1.2rem;
  line-height: 1.4;
  border-bottom: 2px solid var(--secondary);
  padding-bottom: var(--sp-2);
  margin: var(--sp-8) 0 var(--sp-6);
}

.sc-time-heading-sub {
  font-size: 0.9rem;
  font-weight: 200;
  font-style: italic;
  color: var(--text-muted);
}

.sc-card {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--white);
  margin-bottom: var(--sp-6);
  transition: box-shadow var(--t-base);
}

.sc-card:hover { box-shadow: var(--shadow-md); }

.sc-card-body > h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: var(--sp-1);
}

.sc-card-code {
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin-top: 0;
  margin-bottom: var(--sp-3);
}

.sc-card-instructors {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
  padding-top: var(--sp-2);
}

.sc-card-instructor { text-align: center; }

.sc-card-photo {
  width: 90px;
  height: 100px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
  display: block;
  margin: 0 auto var(--sp-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sc-card-name {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--primary);
  line-height: 1.4;
  margin: 0;
}

.sc-card-name span {
  display: block;
  font-weight: 200;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .sc-card {
    grid-template-columns: 1fr;
  }
  .sc-card-instructors {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-2);
  }
}


/* --------------------------------------------------------------------------
   16h. EXHIBITOR LOGO GRID (explore.cfm)
   -------------------------------------------------------------------------- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-8);
}

.logo-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3);
  min-height: 100px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.logo-grid-cell:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.logo-grid-cell img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.logo-grid-cell--text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--primary);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
}


/* --------------------------------------------------------------------------
   16i. SPONSOR LOGO GRID (sponsors.cfm)
   -------------------------------------------------------------------------- */

.interior-content .sponsor-level-heading {
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 200;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-6);
  justify-content: center;
}

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

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

.sponsor-logo-grid--principal  .sponsor-logo-item { width: 300px; }
.sponsor-logo-grid--supporting .sponsor-logo-item { width: 240px; }

.sponsor-logo-item img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .sponsor-logo-grid--principal  .sponsor-logo-item { width: 160px; }
  .sponsor-logo-grid--supporting .sponsor-logo-item { width: 130px; }
}


/* --------------------------------------------------------------------------
   16j. BADGES
   -------------------------------------------------------------------------- */

/* Inline label used next to a link or heading. Rounded rectangle, not a pill --
   this one predates the status pills below and sits in running text, not in a
   flex row. */
.badge-new {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--tertiary);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  line-height: 1.6;
}

/* Submission-window status pill for a <details> summary on a submissions page.
   The CFIF that decides whether it renders lives in the page, not here.
   `margin-left: auto` + `flex-shrink: 0` place the pill against the chevron --
   they depend on `.accordion-item summary` being `display: flex`, which it is.

   NOTE THE INVERTED SEMANTICS vs JSM. JSMTemplate's .badge-open renders DURING
   the submission window ("Now Open") and disappears once it closes; the CFIF
   there is a two-sided range. This site does the opposite: nothing shows while
   the window is live, and .badge-closed appears AFTER the deadline, so the CFIF
   is a single lower bound. Both are deliberate house conventions -- do not
   "fix" one to match the other, and read the page's CFIF before assuming which
   way a given site runs.

   Ported from JSMTemplate's .badge-open. TWO of its declarations were changed
   on the way in, and both would have been silent faults:

   1. `font-weight: 700` -> 300. JSM sets Barlow, which ships 700. This site is
      on Myriad W01, whose kit ships 100/200/300 only, so 700 gets a synthesised
      fake-bold. 300 is the heaviest real weight here and is what .badge-new
      above already uses.
   2. `color: var(--primary)` on `background: var(--tertiary)` -> white on
      --text-muted. That pairing reads as dark-navy-on-gold in JSM, where
      --tertiary is #EFB254. Here --tertiary is #73574e, a muted brown, so the
      same two tokens give #122a30 on #73574e -- 2.29:1, unreadable. The tokens
      transferred; the contrast did not. Re-check this pairing on any reskin.

   Grey is also the right reading for the state: a closed window is inactive and
   should not draw the eye the way JSM's gold "Now Open" is meant to. */
.badge-closed {
  display: inline-block;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15em 0.55em;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--white);
  background: var(--text-muted);
  border-radius: 100px;
  vertical-align: middle;
  line-height: 1.6;
}

/* REQUIRED wrapper whenever a summary's label contains any element. The summary
   is `display: flex; justify-content: space-between`, so a bare label is one
   anonymous flex item sitting flush left. Wrapping a word in a <span> silently
   splits it into TWO items, and space-between then shoves the rest of the label
   into the middle of the bar while the span pins left -- it reads as a centred
   title next to an orphaned tag. Keep the whole label inside .summary-label so
   it stays a single item, and the bar matches its neighbours. */
.summary-label {
  min-width: 0;
}

/* Inline "NEW!" flag at the head of a <details> summary. Colour only: the
   summary already sets the family, size and weight, and Myriad W01 tops out at
   300, so there is no heavier weight to lean on for emphasis.

   CONTRAST: --secondary measures 5.11:1 against the --primary summary bar
   (#53a1b7 on #122a30), clearing the 4.5:1 AA floor. --secondary-dark was tried
   first and is NOT usable here -- same hue, but 2.87:1 on this bar. The darker
   token is for brand text on light ground (see .committee-role h3); on the dark
   chrome it goes muddy. Section 7's .nav-link.active note records the same
   tension solved on the nav bar, where --tertiary fell to 1.97:1 after the
   palette went brown. Re-measure both on any reskin. */
.summary-new {
  color: var(--secondary);
}


/* --------------------------------------------------------------------------
   16k. TRACK LIST — conferenceinfo.cfm
   -------------------------------------------------------------------------- */

/* Pairs a 100px topic icon with an accordion drawer. Layout only: the drawer
   itself is the shared .accordion-item component and is not restyled here, so
   the JS open/close animation in main.js applies unchanged.

   The icon deliberately sits OUTSIDE the drawer rather than inside <summary>,
   which is how the SDSS 2026 page does it: when a drawer opens, its panel
   aligns with the header bar instead of running under the icon. */

.track-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin: var(--sp-8) 0;
}

.track-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.track-icon {
  flex: 0 0 100px;   /* never shrinks -- the drawer absorbs the width change */
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  display: block;
}

/* .accordion-item is display: block by default and would size to its content;
   min-width: 0 lets it shrink inside the flex row instead of forcing overflow. */
.track-row .accordion-item {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}


/* --------------------------------------------------------------------------
   16l. EXHIBIT PAGE — includes list beside a note — exhibit.cfm
   -------------------------------------------------------------------------- */

/* Sets the "Exhibitors receive the following" list next to the space/registration
   note. A real CSS float was the first instinct and is wrong here: the note is
   taller than the five-item list, so it would run past the list and the next
   <h2> would wrap alongside it. A two-column grid keeps both blocks in their
   own cell and clears cleanly. */

.exhibit-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: 1.25rem;
}

/* the list already carries .interior-content ul margin-bottom; the wrapper owns it now */
.exhibit-split > ul { margin-bottom: 0; }

.exhibit-note {
  background: var(--light);
  border-left: 3px solid var(--secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-6);
}

.exhibit-note p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.exhibit-note p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .exhibit-split {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .exhibit-split > ul { margin-bottom: var(--sp-2); }
}


/* --------------------------------------------------------------------------
   16m. EVENT PHOTO STRIP — events.cfm
   -------------------------------------------------------------------------- */

/* A three-up band of candid conference photos under the page copy. The three
   source images are near-identical in subject (attendees talking at high-tops),
   so they are presented as a gallery rather than floated beside a heading to
   "illustrate" it — none of them illustrates one section better than another.

   aspect-ratio + object-fit: cover locks the row to a single ratio no matter
   what a future replacement photo measures. Do NOT swap this for a fixed
   height: that makes the box ratio a byproduct of the column width and shears
   the photo at some viewports — the same bug the carousel had before 08-18. */

.event-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-4);
}

.event-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.event-photos-caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* Three across a phone leaves each face about 100px wide, which is not worth
   showing. Stack them instead. */
@media (max-width: 640px) {
  .event-photos {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}


/* --------------------------------------------------------------------------
   17. RESPONSIVE — NARROW DESKTOP
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) and (min-width: 1201px) {
  .nav-link { padding-inline: 0.5rem; font-size: 0.85rem; letter-spacing: 0.02em; }
}

@media (max-width: 1200px) and (min-width: 1101px) {
  .nav-link { padding-inline: 0.4rem; font-size: 0.8rem; letter-spacing: 0; }
}


/* --------------------------------------------------------------------------
   18. RESPONSIVE — TABLET (≤ 1100px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .mobile-menu-toggle {
    display: flex;
    position: absolute;
    top: var(--sp-3);
    right: 0;
  }

  .header-top-inner {
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
  }

  .header-logo {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    padding: 0.25rem 3.5rem;
  }
  .header-logo-img { max-height: 120px; }

  .header-top-actions {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    padding-block: 0.25rem 0.75rem;
  }

  .header-top-row { justify-content: center; }

  .header-top-divider { display: none; }

  .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);
  }

  .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;
  }

  .dropdown-menu {
    position: static;
    border-top: 2px solid var(--tertiary);
    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-top: 2px solid var(--tertiary) !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);
  }
  .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: 300;
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--tertiary);
    padding-left: calc(2.5rem - 3px);
  }

  .welcome-grid { grid-template-columns: 1fr; gap: 2.5rem; }

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

  /* Single column here, so the carousel would otherwise stretch to the full
     container (~1017px at 1100px viewport) and, with the old fixed height,
     shear designed slides. Cap and centre it instead. 560px is a little wider
     than the 451px desktop box -- it uses the room a single column offers
     without ballooning. Ratio is locked on .welcome-slide img, so no height
     is set here and nothing is ever stretched, only cropped. */
  /* width: min() rather than max-width. .welcome-carousel is a GRID ITEM, and
     an auto inline margin disables grid stretch alignment -- with only
     max-width set it then sized to fit-content (a flat 560px) and overflowed
     the track on any viewport under 560px, clipping the slide. An explicit
     width can never exceed the track. */
  .welcome-carousel { width: min(100%, 560px); margin-inline: auto; }

  .footer-grid { gap: 2rem; }

  .interior-layout { grid-template-columns: 1fr; }

  .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;
  }
}


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

  .container { padding-inline: 1.25rem; }

  /* Track list (16k): stack the icon above its drawer rather than beside it --
     a 100px icon plus a drawer leaves too little room for the longest title
     ("Systems and Infrastructure for Applied Data Science") at this width.
     Matches how the SDSS 2026 page reflows. */
  .track-row { flex-direction: column; gap: var(--sp-3); }

  .header-logo-img { max-height: 90px; }
  .header-search-form { display: none; }
  .header-top-divider { display: none; }

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

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

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

  .footer-bottom { grid-template-columns: 1fr; text-align: center; }

  .footer-legal { justify-content: center; }

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

  .newsletter-callout { grid-template-columns: 1fr; gap: 1.75rem; }

  .schedule-table td:first-child {
    width: auto;
    white-space: normal;
    display: block;
    padding-bottom: 0;
  }
  .schedule-table td:last-child { display: block; padding-top: var(--sp-1); }

  .committee-grid,
  .committee-roles,
  .committee-list { grid-template-columns: 1fr; }

  .speaker-card,
  .speaker-group-item { grid-template-columns: 100px 1fr; }

  img.speaker-card-photo,
  img.speaker-group-photo { width: 100px; height: 120px; }

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

  .speaker-card--group-header { padding-left: calc(100px + var(--sp-4)); }
}

/* --------------------------------------------------------------------------
   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;
  }
}


/* --------------------------------------------------------------------------
   21. STYLE GUIDE CHROME (styleguide.cfm only)

   Scaffolding for the unlisted developer page at styleguide.cfm. Every rule
   here is prefixed .sg- and NOTHING in this section styles a real site
   component -- the guide renders live components from the sections above, so
   any "helpful" override here would make the guide lie about the site.

   Numbered 21 because CLAUDE.md says new global components take the next
   unused number above 20. The sibling JSMTemplate calls its equivalent I-20;
   the contents are the same idea, the numbering follows each repo's own map.
   -------------------------------------------------------------------------- */

/* --- Page intro --- */
.sg-intro {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}

.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-4);
}

.sg-lede {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
  max-width: 70ch;
  margin-bottom: var(--sp-4);
}

.sg-note {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 70ch;
  background: var(--light);
  border-left: 3px solid var(--tertiary);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-3);
}

.sg-note--warn { border-left-color: var(--error); }

/* 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. Scoped to the
   wrapper, so the standalone .sg-note--warn in the forms section is untouched. */
.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-note code,
.sg-lede code,
.sg-desc code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  background: rgba(var(--primary-rgb), 0.07);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

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

.sg-jump a {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 200;
  color: var(--primary);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.sg-jump a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* --- Sections --- */
.sg-section {
  padding-block: var(--sp-12);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-height) + var(--sp-4));
}

.sg-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 400;
  color: var(--primary);
  margin-bottom: var(--sp-2);
}

/* Weight 300, not JSM's 600 -- see the note on .sg-editor-title. */
.sg-h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.sg-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 74ch;
  margin-bottom: var(--sp-6);
}

/* Label above an individual specimen. Block-level so it never sits inline
   with the component it introduces. */
.sg-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.sg-label:first-of-type { margin-top: 0; }

/* --- Specimen rows --- */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.sg-row--dark {
  background: var(--primary);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
}

/* Neutral stage for components that normally sit on the page background.
   flow-root (not overflow:hidden) contains the float from
   .location-card--photo-right without clipping component box-shadows. */
.sg-stage {
  display: flow-root;
  background: var(--light);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.sg-stage--white { background: var(--white); }

/* Constrains the sidebar widget to the 300px column it gets on real pages. */
.sg-stage--sidebar > * { max-width: 300px; }

/* --- Color swatches --- */
.sg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
}

.sg-chip {
  display: block;
  height: 62px;
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-1);
  box-shadow: var(--shadow-sm);
}

.sg-chip--bordered { border: 1px solid var(--border); }

.sg-swatch code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  color: var(--primary);
}

.sg-swatch em {
  font-style: normal;
  color: var(--text-muted);
  text-transform: uppercase;
}

.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);
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.sg-scale code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  min-width: 72px;
  color: var(--primary);
}

.sg-scale span {
  display: block;
  height: 16px;
  background: var(--secondary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.sg-scale em {
  font-style: normal;
  color: var(--text-muted);
}

/* --- Radius / shadow tiles --- */
.sg-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  padding: var(--sp-2);
}

.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);
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sg-tile code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--primary);
}

/* --- Theme editor -----------------------------------------------------------
   Deliberately kept in sync with JSMTemplate's I-20 .sg-editor: an in-flow,
   full-width sticky panel, not a docked corner box. Two deviations, both
   forced by this template rather than chosen:

   1. font-weight is 300, not JSM's 600. The Monotype kit this instance loads
      ships the body face only in 100/200/300 -- 600 would be synthesised.
   2. The unstick breakpoint is 1100px, not JSM's 900px, because that is where
      this template's mobile nav takes over and --header-height stops
      describing the real header, which would leave `top` wrong.

   The panel must stay a DIRECT child of .container: a position:sticky element
   only travels inside its parent's content box, and .container spans the page.
   Nesting it in a shorter wrapper would give it no travel.
   -------------------------------------------------------------------------- */
.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.
   Collapsing it reclaims the viewport: this site's sticky header is 273px,
   and header + open panel take roughly half of an 800px-tall 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: 300;
  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 -- a 0.5rem two-border square rotated 45deg, rotating again on open.
   Reusing the template's existing collapse icon rather than inventing a second
   one. 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;
  cursor: pointer;
}

.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, "Cascadia Mono", Consolas, 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);
}

/* --- Style guide responsive --- */
@media (max-width: 1100px) {
  /* Below this width the mobile nav replaces the desktop header, so
     --header-height no longer describes it and a sticky offset would be
     wrong. Drop back to normal flow, as JSMTemplate does at its own
     nav breakpoint. */
  .sg-editor { position: static; }
}

/* Its own breakpoint, not the 1100px one above: that width is about the nav
   swap invalidating --header-height, which says nothing about how wide two
   columns of prose can be. 900px matches the other two guides, so all three
   stack at the same place. */
@media (max-width: 900px) {
  .sg-intro-notes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sg-tile-row { gap: var(--sp-4); }
  .sg-tile { width: 100%; }
  .sg-scale code { min-width: 60px; }
}


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