@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=IBM+Plex+Mono:wght@300;400;500;600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ====================================================
   CSAW '26 — THE HEIST
   Design System: NYU Blend
   NYU Purple (#57068c) header · dark-purple hero · white panels
   Fonts: Cormorant / IBM Plex Mono / DM Sans
   ==================================================== */

:root {
  /* NYU Brand */
  --nyu:          #57068c;      /* NYU official purple */
  --nyu-dark:     #3d0566;      /* Deeper header/footer shade */
  --nyu-deep:     #14002b;      /* Near-black with purple cast */
  --nyu-mid:      #702082;      /* Middle purple for gradients */
  --nyu-soft:     rgba(87,6,140,0.10);
  --nyu-glow:     rgba(87,6,140,0.28);
  --nyu-border:   rgba(87,6,140,0.18);

  /* Light section tokens (white content panels) */
  --bg:           #ffffff;
  --bg-alt:       #f9f6fc;      /* Faint purple-tinted off-white */
  --bg-card:      #ffffff;
  --text:         #14002b;      /* Dark purple-black for headings */
  --text-mid:     #4a2d6b;      /* Muted paragraph text */
  --text-dim:     #7a5a96;      /* Dimmer label text */
  --text-ghost:   #a88ec0;      /* Placeholder / ghost text */
  --border:       rgba(87,6,140,0.14);
  --border-soft:  rgba(87,6,140,0.07);

  /* Dark section tokens (header, hero, footer) */
  --dark-text:    #f0e8ff;      /* Lavender-white */
  --dark-dim:     #c4a8d8;      /* Dimmed on dark */
  --dark-ghost:   #8c6aaa;      /* Very dim on dark */
  --dark-border:  rgba(240,232,255,0.10);
  --dark-border-soft: rgba(240,232,255,0.05);

  --w:            1240px;
  --header-h:     90px;
  --ff-display:   'Cormorant', Georgia, serif;
  --ff-mono:      'IBM Plex Mono', 'Courier New', monospace;
  --ff-body:      'DM Sans', Helvetica, sans-serif;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

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

ul.menu, ol.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.menu li, ol.menu li {
  list-style: none;
  list-style-image: none;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Subtle grain over the whole page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
}

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--nyu); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.1;
}

p { line-height: 1.8; }


/* ============================================
   SITE HEADER — NYU Purple
   ============================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  background: var(--nyu);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  /* Shadow ensures the bar is always visually separated from white content below */
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
  overflow: visible;
}

/* Stronger shadow when scrolled over light/white content */
.site-header.scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,0.40);
  background: var(--nyu-dark);
}

/* Subtle NYU-purple shimmer line at bottom of header */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

.site-header .logo a {
  font-family: var(--ff-display);
  font-size: 1.725rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ffffff;
  position: relative;
}

.site-header .logo a::after {
  content: "'26";
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.1em;
  vertical-align: super;
  margin-left: 2px;
}

/* Navigation — absolutely centred in the header bar, items sit at the bottom. */
.site-header .navigation {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  padding-bottom: 14px;
  pointer-events: none;
}

/* Re-enable pointer events on every actual nav child */
.site-header .navigation > * {
  pointer-events: auto;
}

.site-header .navigation .menu {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0; padding: 0;
}

.site-header .navigation .menu .menu-item {
  list-style: none;
  list-style-image: none;
  margin: 0; padding: 0;
  position: relative;
}

.site-header .navigation .menu .menu-item > a,
.site-header .navigation .menu .menu-item > span {
  font-family: var(--ff-mono);
  font-size: 0.825rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  padding: 0.5rem 1rem;
  display: block;
  position: relative;
  cursor: default;          /* span has no pointer, a keeps its own */
  transition: color .25s var(--ease);
}

/* restore pointer cursor for real links */
.site-header .navigation .menu .menu-item > a { cursor: pointer; }

.site-header .navigation .menu .menu-item > a::after,
.site-header .navigation .menu .menu-item > span::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 1rem; right: 1rem;
  height: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.site-header .navigation .menu .menu-item > a:hover,
.site-header .navigation .menu .menu-item:hover > span { color: #ffffff; }

.site-header .navigation .menu .menu-item > a:hover::after,
.site-header .navigation .menu .menu-item:hover > span::after,
.site-header .navigation .menu .menu-item.menu-item--active-trail > a::after,
.site-header .navigation .menu .menu-item.menu-item--active-trail > span::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header .navigation .menu .menu-item.menu-item--active-trail > a,
.site-header .navigation .menu .menu-item.menu-item--active-trail > span {
  color: #ffffff;
}

/* Dropdown */
.site-header .navigation .menu .menu-item > .menu {
  display: none;
  position: absolute;
  top: 100%;
  /* Align right edge to trigger so it opens leftward —
     prevents the panel running off the right side of the viewport
     when the nav is centred in the header */
  right: 0;
  left: auto;
  background: var(--nyu-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid rgba(255,255,255,0.25);
  padding: 0.5rem 0;
  /* Width fits the longest competition name without clipping */
  width: max-content;
  min-width: 260px;
  max-width: min(420px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 100;
}

.site-header .navigation .menu .menu-item:hover > .menu { display: flex; }

.site-header .navigation .menu .menu-item > .menu .menu-item > a {
  padding: 0.55rem 1.25rem;
  display: block;
  font-size: 0.825rem;
  /* Allow wrapping so long names don't clip */
  white-space: normal;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .2s var(--ease), color .2s var(--ease);
}

.site-header .navigation .menu .menu-item > .menu .menu-item:last-child > a {
  border-bottom: none;
}

.site-header .navigation .menu .menu-item > .menu .menu-item > a:hover {
  color: #fff;
  background: rgba(255,255,255,0.07);
  padding-left: 1.5rem;
}

.site-header .navigation .menu .menu-item > .menu .menu-item > a::after { display: none; }

/* Hide page-title block from header region */
.site-header .navigation .block-page-title-block,
.site-header .navigation #block-csaw-theme-page-title { display: none; }

/* Breadcrumb block also lives in the header region, so it renders inside
   the nav/drawer as a stray, faint "Home" link (muted var(--text-mid) on
   the purple drawer). It's already hidden on the front page via the
   .path-frontpage rules; hide it in the nav/drawer on every page too —
   the drawer is for the main menu only, same rationale as the page-title
   hide above. */
.site-header .navigation .block-system-breadcrumb-block,
.site-header .navigation #block-csaw-theme-breadcrumbs,
.site-header .navigation nav.breadcrumb,
.site-header .navigation nav[aria-labelledby="system-breadcrumb"] { display: none; }

/* Block titles (h2/h3 headings that Drupal renders inside each block)
   cause the nav to overflow below the 68px header.  Hide them all. */
.site-header .navigation .block__title,
.site-header .navigation h2,
.site-header .navigation h3 { display: none; }

/* Primary local tasks (View / Edit / Delete / Revisions tabs) also add
   unwanted height — hide from header, they render fine in the content area */
.site-header .navigation .block-local-tasks-block,
.site-header .navigation nav[aria-label="Tabs"] { display: none; }

/* Narrow / duplicate search form — keep only the wide one */
.site-header .navigation #block-csaw-theme-search-form-narrow { display: none; }

/* Search bar — top-right corner of the header */
.site-header .navigation .search-block-form,
.site-header .navigation #block-csaw-theme-search-form-wide {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: 14px;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
}

.site-header .navigation .search-block-form form { display: flex; align-items: center; }

.site-header .navigation .search-block-form .form-item { margin: 0; }
.site-header .navigation .search-block-form .container-inline { display: flex; }

.site-header .navigation .search-block-form input[type="search"] {
  width: 150px;
  padding: 0.3rem 0.75rem;
  height: 30px;
  font-size: 0.825rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  color: #fff;
  font-family: var(--ff-mono);
  letter-spacing: 0.05em;
  outline: none;
  transition: background .25s var(--ease), width .3s var(--ease);
}

.site-header .navigation .search-block-form input[type="search"]::placeholder { color: rgba(255,255,255,0.4); }

.site-header .navigation .search-block-form input[type="search"]:focus {
  width: 200px;
  background: rgba(255,255,255,0.18);
}

.site-header .navigation .search-block-form input[type="submit"],
.site-header .navigation .search-block-form button[type="submit"] {
  height: 30px;
  padding: 0 0.75rem;
  font-size: 0.775rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.2);
  border-left: none;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-family: var(--ff-mono);
  transition: all .25s var(--ease);
}

.site-header .navigation .search-block-form input[type="submit"]:hover,
.site-header .navigation .search-block-form button[type="submit"]:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Mobile toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: #ffffff;
  margin: 5px 0;
  transition: var(--ease) .3s;
}

.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

.mobile-overlay.active { display: block; }


/* ============================================
   LAYOUT — Inner pages
   ============================================ */

.layout-container {
  padding-top: var(--header-h);
  background: var(--bg);
}

.layout-container > header[role="banner"] {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--nyu);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.layout-container > header[role="banner"] .menu {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0; padding: 0;
}

.layout-container > header[role="banner"] .menu .menu-item {
  list-style: none;
  list-style-image: none;
  position: relative;
}

/* NOTE: inner-page-only duplicates of the menu-link styling used to live
   here (`.layout-container > header[role="banner"] .menu .menu-item > a`).
   They set the SAME values as the shared `.site-header .navigation .menu
   .menu-item > a` rules above, so they were redundant on desktop — but,
   because they only matched inner pages (whose header is wrapped in
   `.layout-container`) AND out-specified the ≤1024px mobile-drawer rules,
   they made the inner-page drawer's top-level links render differently
   from the homepage drawer. Removed so the shared `.site-header` cascade
   governs both pages identically. Don't reintroduce them. */


.layout-content {
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  min-height: 60vh;
}

.layout-container > main[role="main"] {
  background: var(--bg);
}

.layout-container > footer[role="contentinfo"] {
  background: var(--nyu-deep);
  border-top: none;
  padding: 3rem clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  color: var(--dark-text);
}

.layout-container > footer[role="contentinfo"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--nyu), transparent);
}


/* ============================================
   FRONT PAGE HERO — Dark NYU purple
   ============================================ */

.front-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Top padding MUST clear the fixed 90px header for everyone. Previously it
     was 0 here and the header-clearance only came from the
     `body.toolbar-tray-open` rule below — so anonymous visitors (and admins
     with the toolbar collapsed) had the "CSAW '26" title slide up under the
     header. The toolbar rule still adds the extra Drupal-toolbar offset on
     top of this for logged-in editors. */
  padding: calc(var(--header-h) + 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  /* Deep-to-NYU purple gradient */
  background: linear-gradient(165deg, var(--nyu-deep) 0%, #220040 55%, var(--nyu-dark) 100%);
}

/* Blueprint grid in purple tones */
.front-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,232,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,232,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* XXII Roman numeral watermark */
.front-hero::after {
  content: 'XXII';
  position: absolute;
  top: 50%;
  right: -0.05em;
  transform: translateY(-55%);
  font-family: var(--ff-display);
  font-size: clamp(18rem, 30vw, 32rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240,232,255,0.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.front-hero__dossier {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  letter-spacing: 0.22em;
  color: var(--dark-ghost);
  text-transform: uppercase;
  margin-bottom: 2rem;
  display: block;
  position: relative;
  z-index: 1;
}

.front-hero__grid-bg,
.front-hero__scanlines { display: none; }

.front-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w);
  width: 100%;
  /* align-self: center centers the inner within the flex-column hero.
     margin: auto does NOT work here because align-items: normal (stretch)
     overrides it; align-self explicitly overrides the container. */
  align-self: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.front-hero__scroll { display: none; }


/* ─── Node content as hero (dark section) ─── */

.front-hero .node,
.front-hero .block { max-width: var(--w); }

.front-hero .node__title,
.front-hero h1.node__title,
.front-hero .page-title {
  font-family: var(--ff-display);
  font-size: clamp(3.625rem, 8.5vw, 8.625rem);
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: -0.01em;
  color: var(--dark-text);
  margin-bottom: 1.5rem;
}

.front-hero .node__title::after,
.front-hero .page-title::after { display: none; }

/* Date / type fields */
.front-hero .field--name-field-date,
.front-hero .field--name-field-event-date,
.front-hero .field--name-field-type {
  font-family: var(--ff-mono);
  font-size: clamp(0.775rem, 1.2vw, 0.975rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #c4a8d8;
  margin-bottom: 1.5rem;
}

.front-hero .node__content::before { display: none; }

/* Body text on dark */
.front-hero .field--name-body p,
.front-hero .node__content > p {
  font-family: var(--ff-body);
  font-size: clamp(1.075rem, 1.5vw, 1.225rem);
  font-weight: 300;
  color: var(--dark-dim);
  max-width: 580px;
  line-height: 1.85;
  margin-bottom: 1rem;
}

/* Highlight list (stats summary inline) */
.front-hero .field--name-field-stats-summary .field__items,
.front-hero .field--name-field-highlights .field__items {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.front-hero .field--name-field-stats-summary .field__item,
.front-hero .field--name-field-highlights .field__item {
  font-family: var(--ff-mono);
  font-size: 0.825rem;
  color: var(--dark-ghost);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.front-hero .field--name-field-stats-summary .field__item::before,
.front-hero .field--name-field-highlights .field__item::before {
  content: '';
  display: block;
  width: 16px; height: 1px;
  background: rgba(255,255,255,0.4);
}

/* Stat tiles (paragraph entities) — white cards on dark bg */
.front-hero .field--type-entity-reference-revisions,
.front-hero .field--name-field-stats {
  margin-top: 3rem;
  border-top: 1px solid var(--dark-border);
  padding-top: 2rem;
}

.front-hero .field--type-entity-reference-revisions > .field__label,
.front-hero .field--name-field-stats > .field__label {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  letter-spacing: 0.15em;
  color: var(--dark-ghost);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
}

.front-hero .field--type-entity-reference-revisions .field__items,
.front-hero .field--name-field-stats .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--dark-border);
  border: 1px solid var(--dark-border);
}

.front-hero .paragraph--type--stat,
.front-hero .field--type-entity-reference-revisions .field__item {
  background: rgba(255,255,255,0.04);
  padding: 1.5rem 1.75rem;
  transition: background .25s var(--ease);
  backdrop-filter: blur(4px);
}

.front-hero .paragraph--type--stat:hover,
.front-hero .field--type-entity-reference-revisions .field__item:hover {
  background: rgba(255,255,255,0.08);
}

.front-hero .field--name-field-stat-number,
.front-hero .field--name-field-number {
  font-family: var(--ff-mono);
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 500;
  color: #ffffff;
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.front-hero .field--name-field-stat-label,
.front-hero .field--name-field-label {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  font-weight: 300;
  color: var(--dark-ghost);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Block section headings — on dark hero */
.front-hero .block__title {
  font-family: var(--ff-display);
  font-size: clamp(2.125rem, 4.5vw, 3.325rem);
  font-weight: 600;
  line-height: 1;
  color: var(--dark-text);
  letter-spacing: -0.01em;
  margin-top: 5rem;
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dark-border);
}


/* ─── Views blocks inside hero → white floating panels ─── */

.front-hero .views-element-container {
  background: var(--bg);
  /* Full-viewport-width bleed from a centered max-width container.
     position:relative + left:50% + translateX(-50%) + width:100vw
     shifts the panel to x=0 regardless of how wide the viewport is. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin-top: 4rem;
  /* Horizontal padding: at least the base gutter, expands at wide viewports
     so content inside stays within the --w column */
  padding: clamp(3rem, 5vw, 5rem)
           max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - var(--w)) / 2 + clamp(1.25rem, 4vw, 2.5rem)));
  border-top: 3px solid var(--nyu);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
}

/* Block titles inside white panels */
.front-hero .views-element-container .block__title,
.front-hero .views-element-container h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.125rem, 4vw, 3.125rem);
  font-weight: 600;
  color: var(--text);
  margin-top: 0;
  margin-bottom: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  letter-spacing: -0.01em;
}


/* ─── Views TABLE format inside white panels → horizontal row ─── */
/* When Drupal renders a View as an HTML <table>, transform it to
   a flex row so all stat items appear on a single line.           */

.front-hero .views-element-container .views-table,
.front-hero .views-element-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Hide any column headers (e.g. "Number", "Label") */
.front-hero .views-element-container .views-table thead,
.front-hero .views-element-container table thead {
  display: none;
}

/* Turn the <tbody> into a flex row */
.front-hero .views-element-container .views-table tbody,
.front-hero .views-element-container table tbody {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  background: var(--border);
  gap: 1px;
  border: 1px solid var(--border);
}

/* Each <tr> becomes a flex column (one stat) */
.front-hero .views-element-container .views-table tbody tr,
.front-hero .views-element-container table tbody tr {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-card);
  padding: 1.5rem 1rem;
  border: none;
  min-width: 0;
}

.front-hero .views-element-container .views-table tbody tr:hover,
.front-hero .views-element-container table tbody tr:hover {
  background: var(--bg-alt);
}

/* Each <td> inside the row */
.front-hero .views-element-container .views-table tbody td,
.front-hero .views-element-container table tbody td {
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
}

/* Stat number cell */
.front-hero .views-element-container table tbody td:first-child {
  font-family: var(--ff-mono);
  font-size: clamp(1.525rem, 2.5vw, 2.125rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.4rem;
}

/* Stat label cell */
.front-hero .views-element-container table tbody td:last-child {
  font-family: var(--ff-mono);
  font-size: 0.745rem;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================
   TICKER STRIP — NYU Purple
   ============================================ */

.ticker-strip {
  background: var(--nyu);
  padding: 0.7rem 0;
  overflow: hidden;
  border-top: none;
  border-bottom: none;
  position: relative;
  z-index: 10;
}

/* White shimmer lines on ticker */
.ticker-strip::before,
.ticker-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.15);
}

.ticker-strip::before { left: 0; }
.ticker-strip::after { right: 0; }

.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: ticker 35s linear infinite;
}

.ticker-item {
  font-family: var(--ff-mono);
  font-size: 0.825rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  padding: 0 2.5rem;
  flex-shrink: 0;
}

.ticker-item::after {
  content: '·';
  margin-left: 2.5rem;
  opacity: 0.4;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================
   SECTIONS — General (inner pages)
   ============================================ */

.section {
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  background: var(--bg);
}

.section--alt { background: var(--bg-alt); }

.section__inner {
  max-width: var(--w);
  margin: 0 auto;
}

.section__label {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  color: var(--nyu);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

.section__title {
  font-family: var(--ff-display);
  font-size: clamp(2.125rem, 4.5vw, 3.625rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.laser-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nyu), transparent);
  margin: 0;
}


/* ============================================
   VIEWS — Partner & Sponsor Cards (white panels)
   ============================================ */

.view { margin-bottom: 2rem; }

.view .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

/* Card base — white */
.view .views-row {
  background: var(--bg-card);
  border: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}

.view .views-row:hover {
  background: var(--bg-alt);
  box-shadow: 0 4px 24px rgba(87,6,140,0.10);
}

/* NYU purple left-edge accent on hover */
.view .views-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nyu);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease);
  z-index: 2;
}

.view .views-row:hover::before { transform: scaleY(1); }

/* Logo / image area — light gray showcase */
.views-row .views-field-field-logo,
.views-row .views-field-field-image,
.views-row .views-field-field-partner-logo,
.views-row .views-field-field-sponsor-logo,
.views-row .field--type-image,
.views-row .field--name-field-logo,
.views-row .field--name-field-image {
  order: -1;
  background: #f4f0f9;   /* Faint NYU-purple tint */
  width: 100%;
  min-height: 163px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft);
}

.views-row .field--type-image img,
.views-row .views-field-field-logo img,
.views-row .views-field-field-image img,
.views-row .field--name-field-logo img,
.views-row .field--name-field-image img {
  max-height: 85px;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

/* Title on white card */
.views-row .views-field-title,
.views-row h2, .views-row h3 {
  padding: 1rem 1rem 0.75rem;
  font-family: var(--ff-display);
  font-size: 1.175rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
  width: 100%;
}

.views-row .views-field-title a,
.views-row h2 a, .views-row h3 a {
  color: var(--text);
}

.views-row .views-field-title a:hover,
.views-row h2 a:hover { color: var(--nyu); }

/* URL field — hidden (use Views rewrite to link the title instead) */
.views-row .views-field-field-url,
.views-row .views-field-field-website,
.views-row .field--name-field-url,
.views-row .field--name-field-website {
  display: none;
}

/* Body text in view rows */
.views-row .views-field-body,
.views-row .field--name-body {
  padding: 0.25rem 1.25rem 1.25rem;
  font-family: var(--ff-body);
  font-size: 0.945rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* Text-only rows (no logo) — purple left border
   Scoped to inner-page contexts only; excluded from front-page white panels
   to avoid conflicting with the stats horizontal table layout.          */
.section .views-row:not(:has(.field--type-image)):not(:has(.views-field-field-logo)),
.layout-container > main .views-row:not(:has(.field--type-image)):not(:has(.views-field-field-logo)) {
  border-left: 3px solid var(--nyu);
  padding: 1.75rem;
}

.section .views-row:not(:has(.field--type-image)):not(:has(.views-field-field-logo)) .views-field-title {
  padding: 0 0 0.25rem;
}

.section .views-row:not(:has(.field--type-image)):not(:has(.views-field-field-logo)) .views-field-body,
.section .views-row:not(:has(.field--type-image)):not(:has(.views-field-field-logo)) .field--name-body {
  padding: 0;
}

.section .views-row:not(:has(.field--type-image)):not(:has(.views-field-field-logo)) .views-field-title a {
  font-family: var(--ff-display);
  font-size: 1.425rem;
  font-weight: 600;
  color: var(--text);
}


/* ============================================
   PAGE TITLE & NODE CONTENT (inner pages)
   ============================================ */

.page-title {
  font-family: var(--ff-display);
  font-size: clamp(2.625rem, 5vw, 4.125rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  padding-bottom: 1.25rem;
  position: relative;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 2px;
  background: var(--nyu);
}

/* Hide the page-title block, breadcrumb, AND the homepage node's own
   title <h2> — the hero band already conveys what page you're on, so
   any "Home" heading or one-link "Home" breadcrumb is just noise.
   These blocks all remain rendered on inner pages where they're
   useful.

   The node title selector is the important one: node.html.twig always
   emits <h2><a><span class="field--name-title">Home</span></a></h2>
   inside the article when the view mode is `full`. .path-frontpage
   scopes to the homepage so other Basic Pages keep their titles. */
.path-frontpage .block-page-title-block,
.path-frontpage #block-csaw-theme-page-title,
body.path-frontpage h1.page-title,
body.path-frontpage .page-title,
.path-frontpage .block-system-breadcrumb-block,
.path-frontpage #block-csaw-theme-breadcrumbs,
.path-frontpage nav.breadcrumb,
.path-frontpage nav[aria-labelledby="system-breadcrumb"],
.path-frontpage .front-hero article.node--type-page > h2,
.path-frontpage .front-hero .node--type-page > h2:first-child,
.path-frontpage .front-hero .node > h2:has(.field--name-title) {
  display: none !important;
}

.node { margin-bottom: 2rem; }

.node__content {
  color: var(--text-mid);
  line-height: 1.8;
}

.node__content h2,
.node__content h3,
.node__content h4 {
  color: var(--text);
  margin: 2rem 0 1rem;
  font-family: var(--ff-display);
}

.node__content p { margin-bottom: 1rem; color: var(--text-mid); }
.node__content a { color: var(--nyu); }
.node__content a:hover { color: var(--nyu-mid); }
.node__content img { margin: 1.5rem 0; }

.node__content ul,
.node__content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-mid);
}

.node__content li { margin-bottom: 0.5rem; }

.node__meta {
  font-family: var(--ff-mono);
  font-size: 0.825rem;
  color: var(--text-dim);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.05em;
}

/* Block headings on inner pages */
.block { margin-bottom: 2rem; }

.block h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  color: var(--text);
  margin-bottom: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  position: relative;
}

/* ============================================
   FORMS
   ============================================ */

.form-item { margin-bottom: 1.25rem; }

.form-item label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.845rem;
  font-weight: 400;
  color: var(--text-mid);
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 1.025rem;
  border-radius: 0;
  transition: border-color .25s var(--ease);
  outline: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--nyu);
  box-shadow: 0 0 0 2px var(--nyu-soft);
}

input[type="submit"],
button,
.button,
.btn {
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mid);
  cursor: pointer;
  transition: all .25s var(--ease);
  border-radius: 0;
}

input[type="submit"]:hover,
button:hover,
.button:hover,
.btn:hover {
  border-color: var(--nyu);
  color: var(--nyu);
  background: var(--nyu-soft);
}

.btn--filled {
  background: var(--nyu);
  border-color: var(--nyu);
  color: #ffffff;
}

.btn--filled:hover {
  background: var(--nyu-mid);
  border-color: var(--nyu-mid);
  box-shadow: 0 0 20px var(--nyu-glow);
}


/* ============================================
   TABLES
   ============================================ */

table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }

th {
  font-family: var(--ff-mono);
  font-size: 0.805rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.875rem 1rem;
  border-bottom: 2px solid var(--nyu);
  background: var(--bg-alt);
}

td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 1.025rem;
  color: var(--text-mid);
  font-family: var(--ff-body);
}

tr:hover td { background: var(--bg-alt); }


/* ============================================
   PAGER
   ============================================ */

.pager { margin-top: 3rem; }

.pager__items {
  display: flex;
  justify-content: center;
  gap: 2px;
  list-style: none;
  padding: 0;
}

.pager__item a,
.pager__item.is-active a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: all .25s var(--ease);
}

.pager__item a:hover {
  border-color: var(--nyu);
  color: var(--nyu);
}

.pager__item.is-active a {
  background: var(--nyu);
  border-color: var(--nyu);
  color: #ffffff;
}


/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--w);
  margin: 0 auto;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0; margin: 0;
}

.breadcrumb li {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.breadcrumb li a { color: var(--text-mid); }
.breadcrumb li a:hover { color: var(--nyu); }

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


/* ============================================
   TABS
   ============================================ */

.tabs { border-bottom: 2px solid var(--nyu); margin-bottom: 2rem; }

.tabs ul { display: flex; list-style: none; padding: 0; margin: 0; }

.tabs li a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-family: var(--ff-mono);
  font-size: 0.845rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .25s var(--ease);
}

.tabs li a:hover,
.tabs li a.is-active {
  color: var(--nyu);
  border-bottom-color: var(--nyu);
}


/* ============================================
   STATUS MESSAGES
   ============================================ */

.messages {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid;
  font-family: var(--ff-body);
  font-size: 1rem;
  background: var(--bg-alt);
  color: var(--text);
}

.messages--status  { border-left-color: #16a34a; }
.messages--warning { border-left-color: #ca8a04; }
.messages--error   { border-left-color: #dc2626; }


/* ============================================
   FOOTER — 3-column dark layout
   ============================================ */

.site-footer {
  background: #0d0d0d;
  padding: 0;
  position: relative;
  color: rgba(255,255,255,0.8);
}

/* NYU Purple accent stripe at top */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nyu);
}

.site-footer__inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

/* Remove old brand line — copyright handles branding */
.site-footer__brand { display: none; }

/* ── Footer block grid ── */
.site-footer .region-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  padding: 2.5rem 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer .region-footer .block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Block titles */
.site-footer .block__title {
  font-family: var(--ff-display);
  font-size: clamp(1.125rem, 2vw, 1.475rem);
  font-weight: 600;
  color: #ffffff !important;
  margin-bottom: 1.5rem;
  border-top: none !important;
  padding-top: 0 !important;
  text-align: center;
  width: 100%;
}

/* Body text (address etc.) */
.site-footer .block__content p,
.site-footer .block__content address {
  font-family: var(--ff-body);
  font-size: 1.025rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  font-style: normal;
  margin-bottom: 0;
}

/* ── Get in Touch — social icons ──
   Horizontal row of circular icon links. Was previously hard-coded
   to a 2-column grid which forced the icons to wrap into a 2×2 even
   on wide viewports. Flex + wrap keeps them on a single row when
   there's space and gracefully wraps below ~200px width. */
.footer-social-links {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.footer-social-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.75);
  color: #ffffff;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.footer-social-link:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
}

.footer-mailing-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--ff-body);
  font-size: 1.025rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: color .2s var(--ease);
}

.footer-mailing-link:hover { color: #ffffff; }

/* ── Partners column — vertical link list ── */
.site-footer .menu {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer .menu a {
  font-family: var(--ff-body);
  font-size: 1.025rem;
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}

.site-footer .menu a:hover {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,0.65);
}

/* ── Copyright bar ── */
.site-footer__copyright {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
  padding: 1.5rem 0;
}

/* ── Legal bar — NYU compliance text, full-width at the very bottom ── */
.site-footer__legal {
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer__legal-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
}

/* The blocks are inside a Drupal region wrapper (see region.html.twig),
   so the flex layout has to target the region — not the outer
   .site-footer__legal-inner — otherwise the region wrapper is the only
   flex child and the actual block divs fall back to stacking. */
.site-footer__legal-inner > .region,
.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 4rem;
  align-items: flex-start;
}

.site-footer__legal-inner > .region {
  flex: 1 1 100%;
  padding: 0;
  margin: 0;
}

/* Each block becomes an equal-width column that can shrink on mobile. */
.site-footer__legal-inner > .region > .block {
  flex: 1 1 320px;
  min-width: 0;
}

/* Hide Drupal block titles in this region */
.site-footer__legal .block__title { display: none; }

/* All text inside the legal bar */
.site-footer__legal p,
.site-footer__legal .block__content {
  font-family: var(--ff-body);
  font-size: 0.775rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.75;
  margin: 0;
  max-width: 640px;
}

/* Heading / org name if present */
.site-footer__legal strong,
.site-footer__legal b {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.725rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.5rem;
}

/* Links inside legal text */
.site-footer__legal a {
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}

.site-footer__legal a:hover {
  color: rgba(255,255,255,0.85);
  text-decoration-color: rgba(255,255,255,0.5);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .site-footer .region-footer {
    gap: 2.5rem;
  }
  .site-footer__legal-inner {
    flex-direction: column;
    gap: 1rem;
  }
}


/* ============================================
   COMPETITION NODE — detail page
   CSS uses node--type-competition-edition (machine name "competition").
   Verify at /admin/structure/types — if the machine name differs,
   do a find-and-replace on "competition" below.
   ============================================ */

/* ── All field labels: mono uppercase label ── */
.node--type-competition-edition .field__label {
  font-family: var(--ff-mono);
  font-size: 0.725rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nyu);
  display: block;
  margin-bottom: 0.35rem;
}

/* ── Metadata strip: Base Competition + Year inline ── */
.node--type-competition-edition .field--name-field-base-competition,
.node--type-competition-edition .field--name-field-year {
  display: inline-block;
  vertical-align: top;
  margin-right: 3rem;
  margin-bottom: 1.75rem;
}

.node--type-competition-edition .field--name-field-base-competition .field__item a {
  color: var(--nyu);
  font-weight: 500;
  font-size: 1.125rem;
}

.node--type-competition-edition .field--name-field-year .field__item {
  font-family: var(--ff-mono);
  font-size: 1.125rem;
  color: var(--text-mid);
}

/* ── Region tags ──
   Pills for the multi-value field_region taxonomy reference. Used on
   competition_base AND competition_edition node pages — selectors target
   the field machine name only (no bundle prefix) because:
     1. The name is unique to this content model — no leak risk.
     2. The field renders the same way on both bundles, and tying the
        pills to one bundle leaves the other bundle showing Drupal's
        default vertical list with the label visible.
   Same pattern as the Discord/GitHub buttons further up. */
.field--name-field-region {
  clear: both;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

/* Hide the "Region" label that Drupal renders above the field by
   default. Pills speak for themselves. */
.field--name-field-region > .field__label {
  display: none !important;
}

/* Pill row — handle both DOM shapes Drupal emits:
   1. Label = Above/Inline → items wrapped in `.field__items`
   2. Label = Hidden       → items are direct children of the field
                              wrapper (no `.field__items` between)
   The `:has(> .field__item)` selector catches case 2 by detecting
   when the field wrapper itself directly contains the items. */
.field--name-field-region .field__items,
.field--name-field-region:has(> .field__item) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0;
}

.field--name-field-region .field__item {
  font-family: var(--ff-mono);
  font-size: 0.745rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nyu);
  background: var(--nyu-soft);
  border: 1px solid var(--nyu-border);
  padding: 0.22rem 0.7rem;
  line-height: 1.8;
}

/* Strip default link styling from the term names inside each pill —
   the pill IS the visual; an underlined blue link inside would fight
   the design. */
.field--name-field-region .field__item a {
  color: inherit !important;
  text-decoration: none !important;
}

.field--name-field-region .field__item a:hover {
  color: var(--nyu-dark, var(--nyu)) !important;
  text-decoration: none !important;
}

/* ── Text content sections (exact machine names) ── */
.node--type-competition-edition .field--name-field-eligibility,
.node--type-competition-edition .field--name-field-challenge-details,
.node--type-competition-edition .field--name-field-rules,
.node--type-competition-edition .field--name-field-criteria,
.node--type-competition-edition .field--name-field-registration-guidelines,
.node--type-competition-edition .field--name-field-submission-guidelines,
.node--type-competition-edition .field--name-field-resources,
.node--type-competition-edition .field--name-field-awards,
.node--type-competition-edition .field--name-field-winners,
.node--type-competition-edition .field--name-body {
  margin: 2rem 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

/* Section headings for all text fields */
.node--type-competition-edition .field--name-field-eligibility > .field__label,
.node--type-competition-edition .field--name-field-challenge-details > .field__label,
.node--type-competition-edition .field--name-field-rules > .field__label,
.node--type-competition-edition .field--name-field-criteria > .field__label,
.node--type-competition-edition .field--name-field-registration-guidelines > .field__label,
.node--type-competition-edition .field--name-field-submission-guidelines > .field__label,
.node--type-competition-edition .field--name-field-resources > .field__label,
.node--type-competition-edition .field--name-field-awards > .field__label,
.node--type-competition-edition .field--name-field-winners > .field__label,
.node--type-competition-edition .field--name-body > .field__label {
  font-family: var(--ff-display);
  font-size: clamp(1.325rem, 2.5vw, 1.725rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

/* Body text within all text fields */
.node--type-competition-edition .field--name-field-eligibility .field__item p,
.node--type-competition-edition .field--name-field-challenge-details .field__item p,
.node--type-competition-edition .field--name-field-rules .field__item p,
.node--type-competition-edition .field--name-field-criteria .field__item p,
.node--type-competition-edition .field--name-field-registration-guidelines .field__item p,
.node--type-competition-edition .field--name-field-submission-guidelines .field__item p,
.node--type-competition-edition .field--name-field-resources .field__item p,
.node--type-competition-edition .field--name-field-awards .field__item p,
.node--type-competition-edition .field--name-field-winners .field__item p,
.node--type-competition-edition .field--name-body .field__item p {
  font-size: 1.075rem;
  line-height: 1.9;
  color: var(--text-mid);
  margin-bottom: 0.85rem;
}

/* Links within text fields */
.node--type-competition-edition .field--name-field-eligibility .field__item a,
.node--type-competition-edition .field--name-field-challenge-details .field__item a,
.node--type-competition-edition .field--name-field-rules .field__item a,
.node--type-competition-edition .field--name-field-criteria .field__item a,
.node--type-competition-edition .field--name-field-registration-guidelines .field__item a,
.node--type-competition-edition .field--name-field-submission-guidelines .field__item a,
.node--type-competition-edition .field--name-field-resources .field__item a,
.node--type-competition-edition .field--name-body .field__item a {
  color: var(--nyu);
  text-decoration: underline;
  text-decoration-color: var(--nyu-border);
  text-underline-offset: 3px;
}

/* Bullet lists within text fields */
.node--type-competition-edition .field--name-field-eligibility .field__item ul,
.node--type-competition-edition .field--name-field-registration-guidelines .field__item ul,
.node--type-competition-edition .field--name-field-submission-guidelines .field__item ul,
.node--type-competition-edition .field--name-field-rules .field__item ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.node--type-competition-edition .field--name-field-eligibility .field__item li,
.node--type-competition-edition .field--name-field-registration-guidelines .field__item li,
.node--type-competition-edition .field--name-field-submission-guidelines .field__item li,
.node--type-competition-edition .field--name-field-rules .field__item li {
  font-size: 1.075rem;
  color: var(--text-mid);
  margin-bottom: 0.4rem;
  line-height: 1.7;
}

/* ── Organizers & Judges ── */
/* Selector uses [class*=] as fallback for any machine name containing "organizer" */
.node--type-competition-edition [class*="field--name"][class*="organizer"] {
  margin-top: 2.5rem;
}

.node--type-competition-edition [class*="field--name"][class*="organizer"] > .field__label {
  font-family: var(--ff-display);
  font-size: clamp(1.325rem, 2.5vw, 1.725rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

/* Cards grid */
.node--type-competition-edition [class*="field--name"][class*="organizer"] > .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Individual organizer card */
.node--type-competition-edition [class*="field--name"][class*="organizer"] > .field__items > .field__item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.node--type-competition-edition [class*="field--name"][class*="organizer"] > .field__items > .field__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--nyu);
}

/* Organizer photo — full-bleed top of card */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .field--type-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Padding wrapper for text inside card */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .paragraph,
.node--type-competition-edition [class*="field--name"][class*="organizer"] article {
  padding: 1.1rem 1.25rem 1.25rem;
}

/* Sub-labels (Name, Type, Affiliation, Position, Link) */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .field__label {
  font-size: 0.695rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-top: 0.85rem;
  margin-bottom: 0.2rem;
}

/* Name — prominent */
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-name"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-name"] .field__item {
  font-family: var(--ff-display);
  font-size: 1.225rem;
  font-weight: 600;
  color: var(--text);
}

/* Type — badge pill */
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-type"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-type"] .field__item {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.705rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nyu);
  background: var(--nyu-soft);
  border: 1px solid var(--nyu-border);
  padding: 0.15rem 0.55rem;
}

/* Affiliation & Position — muted text */
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-affiliation"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-position"] .field__item {
  font-size: 0.975rem;
  color: var(--text-mid);
}

/* Affiliation link (e.g. NYU) */
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-affiliation"] a {
  color: var(--nyu);
}

/* External link */
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-link"] a,
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-linkedin"] a {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nyu);
  border-bottom: 1px solid var(--nyu-border);
  padding-bottom: 2px;
  word-break: break-all;
  transition: color .2s var(--ease);
}

.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-link"] a:hover {
  color: var(--nyu-dark);
}

/* ============================================
   COMPETITION BASE — detail page
   node--type-competition-base
   ============================================ */

.node--type-competition-base .node__meta { display: none; }

/* 2-column flex: independent columns so sidebar height never affects main */
.node--type-competition-base .node__content--competition-base {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: flex-start;
}

/* Left column — grows to fill remaining space */
.node--type-competition-base .cb-main {
  flex: 1 1 0;
  min-width: 0;
}

/* Right sidebar — fixed width, independent height */
.node--type-competition-base .cb-sidebar {
  flex: 0 0 260px;
  width: 260px;
}

/* Logo */
.node--type-competition-base .field--name-field-logo-cb {
  margin-bottom: 1.25rem;
}

/* Partners — full width inside main column */
.node--type-competition-base .field--name-field-partner {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ── Logo ── */
.node--type-competition-base .field--name-field-logo-cb > .field__label { display: none; }

.node--type-competition-base .field--name-field-logo-cb img {
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  background: #111111 !important;
  padding: 1.5rem !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* ── Short name badge ── */
.node--type-competition-base .field--name-field-short-name > .field__label { display: none; }

.node--type-competition-base .field--name-field-short-name .field__item {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nyu);
  background: var(--nyu-soft);
  border: 1px solid var(--nyu-border);
  padding: 0.25rem 0.7rem;
  margin-bottom: 1.25rem;
}

/* ── Discord + GitHub — outline buttons ──
   These fields used to live on competition_base; they moved to
   competition_edition. We deliberately do NOT scope these selectors to
   a bundle class — Drupal can render the same field outside the node
   wrapper (as a standalone Field Block in Block Layout, in a View,
   inside an entity-reference view-mode, etc.), and a bundle-scoped
   selector silently fails in those cases. The field machine names
   are unique enough on their own — there's only one
   `field_discord_link` / `field_github_link` in this content
   model. The `!important` flags fight the global link-defaults
   elsewhere in this stylesheet that otherwise win on specificity. */
.field--name-field-discord-link > .field__label,
.field--name-field-github-link > .field__label { display: none !important; }

.field--name-field-discord-link,
.field--name-field-github-link {
  margin-bottom: 0.6rem;
}

.field--name-field-discord-link a,
.field--name-field-github-link a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  font-family: var(--ff-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 0.7rem 1.25rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mid);
  /* Collapse the raw URL / link text — the ::before below provides a
     clean injected label so the field renders consistently whether the
     editor sets a Link Text on the field or leaves it blank. */
  font-size: 0 !important;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.field--name-field-discord-link a:hover,
.field--name-field-github-link a:hover {
  border-color: var(--nyu);
  color: var(--nyu);
  background: var(--nyu-soft);
}

.field--name-field-discord-link a::before,
.field--name-field-github-link a::before {
  font-family: var(--ff-mono);
  font-size: 0.805rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

.field--name-field-discord-link a::before  { content: '⌥ Join Discord'; }
.field--name-field-github-link a::before { content: '⌥ GitHub Repository'; }

/* ── Base Competition reference — hide the "BASE COMPETITION" label ──
   field_base_competition is the entity-reference from competition_edition
   back to its umbrella competition_base. The label adds noise above the
   linked title (which is contextual, not a section header), so we strip
   it. Field-name-targeted, so it works wherever the field renders. */
.field--name-field-base-competition > .field__label {
  display: none !important;
}

/* ── Tagline — italic subtitle ── */
.node--type-competition-base .field--name-field-tagline > .field__label { display: none; }

.node--type-competition-base .field--name-field-tagline .field__item {
  font-family: var(--ff-display);
  font-size: clamp(1.225rem, 2vw, 1.525rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* ── Description ── */
.node--type-competition-base .field--name-field-description {
  margin-bottom: 2rem;
}

.node--type-competition-base .field--name-field-description > .field__label {
  font-family: var(--ff-display);
  font-size: clamp(1.225rem, 2vw, 1.525rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  display: block;
}

.node--type-competition-base .field--name-field-description p {
  font-size: 1.075rem;
  line-height: 1.9;
  color: var(--text-mid);
  margin-bottom: 0.85rem;
}

.node--type-competition-base .field--name-field-description a {
  color: var(--nyu);
  text-decoration: underline;
  text-decoration-color: var(--nyu-border);
  text-underline-offset: 3px;
}

/* ── Partners — card grid ── */
/* Section headings on the competition_base page (the field labels rendered
   "above"). `field_editions` shares the Partner label treatment so both read
   as matching section headers — teal-underlined, display font, same size. Add
   any future competition_base section field to this selector list to keep them
   consistent. */
.node--type-competition-base .field--name-field-partner > .field__label,
.node--type-competition-base .field--name-field-editions > .field__label {
  font-family: var(--ff-display);
  font-size: clamp(1.225rem, 2vw, 1.525rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  display: block;
}

/* Flex layout: a single partner sits in a 240px card (does not stretch to
   full width); multiple partners distribute evenly and wrap as needed.
   No background-as-divider trick — that's what produced the wide
   lavender bar when only one partner was present. */
.node--type-competition-base .field--name-field-partner .field__items,
.node--type-competition-base .field--name-field-partner .partner-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: transparent;
  border: none;
  padding: 0;
}

.node--type-competition-base .field--name-field-partner .field__item,
.node--type-competition-base .field--name-field-partner .partner-card {
  flex: 0 1 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.25rem;
  text-align: center;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  transition: background .2s var(--ease), border-color .2s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.node--type-competition-base .field--name-field-partner .partner-card:hover {
  background: var(--bg-alt);
  border-color: var(--nyu-border);
}

.node--type-competition-base .field--name-field-partner .partner-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease);
}

.node--type-competition-base .field--name-field-partner .partner-card__link:hover {
  color: var(--nyu);
}

.node--type-competition-base .field--name-field-partner .partner-card__logo {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 2px;
  overflow: hidden;
}

.node--type-competition-base .field--name-field-partner .partner-card__logo img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.node--type-competition-base .field--name-field-partner .partner-card__name {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

/* Fallback for the legacy formatter (entity-reference label) — a plain
   text link inside .field__item without the .partner-card wrappers. */
.node--type-competition-base .field--name-field-partner .field__item > a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.node--type-competition-base .field--name-field-partner .field__item > a:hover {
  color: var(--nyu);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .node--type-competition-base .node__content--competition-base {
    flex-direction: column;
  }
  .node--type-competition-base .cb-sidebar {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* ============================================
   COMPETITION BASE — CURRENT / PREVIOUS EDITIONS
   The current-year edition is embedded in full below the description (see
   csaw_theme_preprocess_node → _csaw_theme_competition_base_editions and
   node--competition-base.html.twig). Older years render as a link list; when
   there is no current edition we show a "coming soon" or "not running" note.
   ============================================ */

/* Section headings ("This year · 2026", "Previous editions") — match the
   edition's own section-heading look for a consistent page. */
.node--type-competition-base .competition-section-heading {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

/* Current edition — the embedded node carries its own
   `.node--type-competition-edition …` styling. Hide its duplicate <h2> title
   (the section heading above already labels it) and drop its top spacing. */
.node--type-competition-base .competition-current-edition .node--type-competition-edition > h2 {
  display: none;
}
.node--type-competition-base .competition-current-edition .node--type-competition-edition {
  margin-top: 0;
}

/* "Coming soon" / "not running this year" notes. */
.node--type-competition-base .competition-coming-soon,
.node--type-competition-base .competition-archived-note {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--nyu);
  background: var(--nyu-soft);
  border-radius: 2px;
}
.node--type-competition-base .competition-coming-soon p,
.node--type-competition-base .competition-archived-note p {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* Inline variant — shown under "This year" when a competition runs somewhere
   but is archived in one or more regions. No box; just a muted line. */
.node--type-competition-base .competition-archived-note--inline {
  margin: -0.5rem 0 1.5rem;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Previous editions — a simple bordered list, newest first. */
.node--type-competition-base .competition-previous-editions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.node--type-competition-base .competition-previous-editions__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.node--type-competition-base .competition-previous-editions__link {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--nyu);
  overflow-wrap: anywhere;
  min-width: 0;
}
.node--type-competition-base .competition-previous-editions__link:hover {
  color: var(--text);
  text-decoration: underline;
}
.node--type-competition-base .competition-previous-editions__year {
  flex: 0 0 auto;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .node--type-competition-base .competition-section-heading { margin-top: 2.25rem; }
  .node--type-competition-base .competition-previous-editions__item { padding: 0.7rem 0; }
}

/* Previous-edition competitions — the agenda-page block listing competitions
   that aren't running this year (field_archived ON). Scoped by the view's
   machine name (create it as `previous_competitions`) so it can't leak. Card
   grid mirrors the agenda / regional-partners look; border-only so it reads on
   the light inner-page background. */
.view-id-previous_competitions .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.view-id-previous_competitions .views-row {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.25rem;
  transition: border-color .15s ease;
}
.view-id-previous_competitions .views-row:hover { border-color: var(--nyu); }
.view-id-previous_competitions .views-field-title a,
.view-id-previous_competitions .views-field-name a {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.view-id-previous_competitions .views-field-title a:hover,
.view-id-previous_competitions .views-field-name a:hover { color: var(--nyu); }
.view-id-previous_competitions img {
  max-height: 64px;
  width: auto;
  margin-bottom: 0.75rem;
}
@media (max-width: 640px) {
  .view-id-previous_competitions .view-content { grid-template-columns: 1fr; }
}


/* ============================================
   RESOURCES — link list
   ============================================ */

/* Hide sub-field labels INSIDE resource paragraphs only — not the section heading */
.node--type-competition-edition .field--name-field-resources .paragraph .field__label { display: none; }

/* Link field: JS hides this once it wires the label as an anchor.
   Keep visible here as native fallback if JS doesn't find both fields. */
.node--type-competition-edition .field--name-field-resources [class*="field--name-field-link"] a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.925rem;
  color: var(--nyu);
  text-decoration: none;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.node--type-competition-edition .field--name-field-resources [class*="field--name-field-link"] a::before { content: '→'; }
.node--type-competition-edition .field--name-field-resources [class*="field--name-field-link"] a:hover { color: var(--nyu-dark); gap: 0.75rem; }

/* Container */
.node--type-competition-edition .field--name-field-resources > .field__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
  background: transparent !important;
  border: none !important;
}

/* Each resource entry */
.node--type-competition-edition .field--name-field-resources > .field__items > .field__item {
  border: none !important;
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 0.7rem 0 !important;
  background: transparent !important;
}

/* Link — arrow + mono style */
.node--type-competition-edition .field--name-field-resources .field__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.925rem;
  letter-spacing: 0.04em;
  color: var(--nyu);
  text-decoration: none;
  transition: color .2s var(--ease), gap .2s var(--ease);
}

.node--type-competition-edition .field--name-field-resources .field__item a::before {
  content: '→';
  transition: transform .2s var(--ease);
}

.node--type-competition-edition .field--name-field-resources .field__item a:hover { color: var(--nyu-dark); gap: 0.75rem; }

/* Anchored label (added by JS) */
.node--type-competition-edition .field--name-field-resources .resource-label-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.925rem;
  color: var(--nyu);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.node--type-competition-edition .field--name-field-resources .resource-label-link::before { content: '→'; }
.node--type-competition-edition .field--name-field-resources .resource-label-link:hover { color: var(--nyu-dark); }


/* ============================================
   AWARDS — ranked prize list
   ============================================ */

.node--type-competition-edition .field--name-field-awards .paragraph .field__label { display: none; }

.node--type-competition-edition .field--name-field-awards > .field__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
  background: transparent !important;
  border: none !important;
}

.node--type-competition-edition .field--name-field-awards > .field__items > .field__item {
  display: block;
  padding: 1rem 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border-soft) !important;
  background: transparent !important;
}

/* The paragraph wrapper is the direct child — make it flex so rank + prize sit side by side */
.node--type-competition-edition .field--name-field-awards > .field__items > .field__item > * {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

/* Rank number */
.node--type-competition-edition .field--name-field-awards [class*="field--name-field-rank"] {
  flex-shrink: 0;
}

.node--type-competition-edition .field--name-field-awards [class*="field--name-field-rank"] .field__item {
  font-family: var(--ff-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--nyu);
  line-height: 1;
  min-width: 2.5rem;
}

/* Prize name — takes remaining space, no wrapping issues */
.node--type-competition-edition .field--name-field-awards [class*="field--name-field-prize-name"] {
  flex: 1;
  min-width: 0;
}

.node--type-competition-edition .field--name-field-awards [class*="field--name-field-prize-name"] .field__item {
  font-size: 1.025rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Prize name when wired as a link (by JS) */
.node--type-competition-edition .field--name-field-awards [class*="field--name-field-prize-name"] a {
  color: var(--nyu);
  text-decoration: underline;
  text-decoration-color: var(--nyu-border);
  text-underline-offset: 3px;
  font-weight: 500;
}

.node--type-competition-edition .field--name-field-awards [class*="field--name-field-prize-name"] a:hover { color: var(--nyu-dark); }

/* Hide raw prize link URL — JS has wired it to the name */
.node--type-competition-edition .field--name-field-awards [class*="field--name-field-prize-link"] { display: none; }

/* ── Prize list — JS-rendered per-region rows inside each rank's
   prize cell. Markup built by the "Awards prize text → per-region
   rows" block in csaw-theme.js. */
.node--type-competition-edition .field--name-field-awards .prize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
}

.node--type-competition-edition .field--name-field-awards .prize-list__item {
  display: contents;
}

.node--type-competition-edition .field--name-field-awards .prize-list__region {
  font-family: var(--ff-mono);
  font-size: 0.745rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nyu);
  white-space: nowrap;
  align-self: baseline;
  padding-top: 0.15rem;
}

.node--type-competition-edition .field--name-field-awards .prize-list__value {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .node--type-competition-edition .field--name-field-awards .prize-list {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
  }
  .node--type-competition-edition .field--name-field-awards .prize-list__item {
    display: block;
    margin-bottom: 0.6rem;
  }
  .node--type-competition-edition .field--name-field-awards .prize-list__region {
    display: block;
    margin-bottom: 0.1rem;
  }
}


/* ============================================
   WINNERS — team podium cards
   ============================================ */

.node--type-competition-edition .field--name-field-winners .paragraph .field__label { display: none; }

.node--type-competition-edition .field--name-field-winners > .field__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
  background: transparent !important;
  border: none !important;
}

.node--type-competition-edition .field--name-field-winners > .field__items > .field__item {
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  padding: 1.25rem 1.25rem 1.25rem 5rem !important;
  position: relative;
  display: block;
}

/* NYU left accent */
.node--type-competition-edition .field--name-field-winners > .field__items > .field__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--nyu);
}

/* Rank — absolutely positioned left badge */
.node--type-competition-edition .field--name-field-winners [class*="field--name-field-rank"] {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
}

.node--type-competition-edition .field--name-field-winners [class*="field--name-field-rank"] .field__item {
  font-family: var(--ff-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--nyu);
  line-height: 1;
}

/* University / team name — prominent */
.node--type-competition-edition .field--name-field-winners [class*="field--name-field-university"] .field__item,
.node--type-competition-edition .field--name-field-winners [class*="field--name-field-winner"] .field__item {
  font-family: var(--ff-body);
  font-size: 1.075rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

/* Team members — inline chips */
.node--type-competition-edition .field--name-field-winners [class*="field--name-field-team"] .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  background: transparent !important;
  border: none !important;
}

.node--type-competition-edition .field--name-field-winners [class*="field--name-field-team"] .field__item {
  font-family: var(--ff-mono);
  font-size: 0.805rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.node--type-competition-edition .field--name-field-winners [class*="field--name-field-team"] .field__item::before {
  content: '·';
  margin-right: 0.3rem;
  color: var(--nyu-border);
}


/* ─── Hide "Submitted by" node meta on competition pages ─── */
.node--type-competition-edition .node__meta { display: none; }

/* ─── Two-column layout: text left, sidebar right ─── */
.node--type-competition-edition .node__content {
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 3rem;
  align-items: start;
}

/* Metadata strip spans full width */
.node--type-competition-edition .field--name-field-base-competition,
.node--type-competition-edition .field--name-field-year {
  grid-column: 1 / -1;
}
.node--type-competition-edition .field--name-field-region {
  grid-column: 1 / -1;
}

/* Left column — all text content fields */
.node--type-competition-edition .field--name-field-eligibility,
.node--type-competition-edition .field--name-field-challenge-details,
.node--type-competition-edition .field--name-field-rules,
.node--type-competition-edition .field--name-field-criteria,
.node--type-competition-edition .field--name-field-registration-guidelines,
.node--type-competition-edition .field--name-field-submission-guidelines,
.node--type-competition-edition .field--name-field-resources,
.node--type-competition-edition .field--name-field-awards,
.node--type-competition-edition .field--name-field-awards-note,
.node--type-competition-edition .field--name-field-winners,
.node--type-competition-edition .field--name-body {
  grid-column: 1;
}

/* ── Awards Note — footnote style, no section heading ── */
.node--type-competition-edition .field--name-field-awards-note {
  margin-top: -1.25rem; /* pull up to sit tight under awards */
  margin-bottom: 2rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--nyu-border);
  background: var(--bg-alt);
}

.node--type-competition-edition .field--name-field-awards-note > .field__label {
  display: none;
}

.node--type-competition-edition .field--name-field-awards-note p,
.node--type-competition-edition .field--name-field-awards-note .field__item p {
  font-family: var(--ff-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Right sidebar — timeline only. Organizers used to live here too
   but are now rendered in a full-width section AFTER .node__content
   by the bundle template (node--type-competition-edition.html.twig).
   See "Competition edition organizers grid" further down. */
.node--type-competition-edition .field--name-field-timeline {
  grid-column: 2;
  grid-row: span 6;
}

/* ─── Organizer card: photo at top ─── */

/* Make the paragraph a flex column so we can reorder image to top */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .paragraph,
.node--type-competition-edition [class*="field--name"][class*="organizer"] article {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
}

/* Image — pushed below all text fields */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .field--type-image {
  order: 10;
  margin: 0;
  padding: 0 !important;
}

.node--type-competition-edition [class*="field--name"][class*="organizer"] .field--type-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Pad all non-image sub-fields */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .field:not(.field--type-image) {
  padding: 0 1.25rem !important;
  margin-top: 0.6rem !important;
}

/* Extra bottom padding on last sub-field */
.node--type-competition-edition [class*="field--name"][class*="organizer"] .field:last-child {
  padding-bottom: 1.25rem !important;
  margin-bottom: 0;
}

/* Name — large */
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-name"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="organizer"] [class*="field--name-field-name"] .field__item {
  font-family: var(--ff-display) !important;
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-top: 0.25rem;
}

/* ─── Timeline ─── */

.node--type-competition-edition [class*="field--name"][class*="timeline"] {
  margin-top: 2rem;
  border-top: none;
  padding-bottom: 0;
}

/* Section heading */
.node--type-competition-edition [class*="field--name"][class*="timeline"] > .field__label {
  font-family: var(--ff-mono);
  font-size: 0.725rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nyu);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 0;
  display: block;
}

/* Hide sub-field labels inside timeline paragraphs only — not the "Timeline" section heading */
.node--type-competition-edition [class*="field--name"][class*="timeline"] .paragraph .field__label {
  display: none;
}

/* ─── Items container — vertical timeline ───
   Dot is keyed off each date field (not each .field__item), so the
   timeline renders correctly whether the events are stored as one
   paragraph per event OR a single paragraph with multi-value
   date/timezone/label sub-fields. Either DOM shape produces one dot
   per visible event. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] > .field__items {
  display: block;
  position: relative;
  padding-left: 1.75rem;
  margin-top: 1.25rem;
  background: transparent;
  border: none;
}

/* Single vertical connecting line behind everything. Stops at the
   last date — the disclaimer text below the last event sits outside
   the timeline visually. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] > .field__items::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--nyu) 0%, var(--nyu) 80%, rgba(87,6,140,0.12) 100%);
}

/* Each paragraph wrapper inside the timeline — plain block, no chrome. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] > .field__items > .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] .paragraph,
.node--type-competition-edition [class*="field--name"][class*="timeline"] article {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

/* ── DATE FIELD — the anchor for each event ──
   Each occurrence of the date field becomes:
   - a block-level event boundary (so events stack cleanly)
   - the dot's positioning context (the dot pseudo sits to its left)
   - the visible event date in mono purple. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-date"],
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-date"] {
  display: block;
  position: relative;
  margin: 1.75rem 0 0.4rem;
  padding: 0;
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nyu);
  line-height: 1.3;
}

/* First date sits at the top of the timeline — no extra margin pushing
   it down past the connecting line's top anchor. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-date"]:first-of-type,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-date"]:first-of-type {
  margin-top: 0;
}

/* Dot marker — on every date field, sitting on the connecting line.
   The container has `padding-left: 1.75rem` and the line is at left:5px;
   dot `left: -1.75rem` puts the dot at the container's left edge,
   straddling the line. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-date"]::before,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-date"]::before {
  content: '';
  position: absolute;
  left: calc(-1.75rem + 5px - 4.5px);
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nyu);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px var(--nyu-border), 0 0 0 5px var(--nyu-soft);
  z-index: 1;
}

/* Inner field__items / field__item / time element for the date —
   render inline so multiple date deltas don't double-break. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-date"] .field__items,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-date"] .field__items,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-date"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-date"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-date"] time,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-date"] time {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ── TIMEZONE — block right under the date, small pill ──
   `field_timezone` on the timeline paragraph. The `!important`s here
   are intentional: globally there's a `.field__item` baseline that
   forces `display: block` and resets backgrounds — without
   `!important` the pill collapses back to a plain text row, which is
   exactly the bug we hit. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-timezone"],
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-timezone"] {
  display: block !important;
  margin: 0 0 0.4rem !important;
}

.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-timezone"] .field__items,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-timezone"] .field__items {
  display: inline !important;
}

.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-timezone"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-timezone"] .field__item {
  display: inline-block !important;
  font-family: var(--ff-mono) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--nyu) !important;
  background: var(--nyu-soft) !important;
  border: 1px solid var(--nyu-border) !important;
  border-radius: 2px;
  padding: 0.15rem 0.5rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}

/* ── LABEL — the event name (e.g. "48-hour Qualifying round begins") ── */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-label"],
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-label"] {
  display: block;
  margin: 0 0 0.3rem;
}

.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-label"] .field__items,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-label"] .field__items {
  display: block;
}

.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-label"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-label"] .field__item {
  display: block;
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
}

/* ── LOCATION / NOTE — secondary text under the timezone
   (e.g. "ONLINE", "Hybrid mode, region dependent"). On this site the
   field machine name is `field_note_t`; the substring selector
   `[class*="field--name-field-note"]` matches `field--name-field-note-t`
   because it's a substring match. Same `!important` rationale as
   the timezone pill — `.field__item` baseline has to be overridden. */
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-location"],
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-note"],
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-location"],
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-note"] {
  display: block !important;
  margin: 0 0 0.4rem !important;
}

.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-location"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-field-note"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-location"] .field__item,
.node--type-competition-edition [class*="field--name"][class*="timeline"] [class*="field--name-note"] .field__item {
  display: block !important;
  font-family: var(--ff-body) !important;
  font-size: 0.815rem !important;
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  line-height: 1.5 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Competition edition organizers grid ──
   Rendered in its own `.competition-edition__organizers` section
   AFTER `.node__content` by the bundle template (see
   node--type-competition-edition.html.twig). Each organizer is a
   Paragraph entity with name / role / org / photo / region / email /
   links sub-fields. Cards auto-fit at ~220px wide; the section
   scales gracefully from 5 to 50+ people. */
.node--type-competition-edition .competition-edition__organizers {
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  clear: both;
}

/* Section heading — uses Drupal's own field-label markup
   (`<div class="field__label">`). Editors control the text from
   /admin/structure/types/manage/competition_edition/display by
   setting the field's Label position to "Above" and the label text
   to whatever they want ("Organizing Committee & Judges",
   "Organizers", etc.). The CSS makes that div look like a section
   heading. If label position is set to "Hidden", the heading
   disappears — also valid (the field still renders with cards). */
.node--type-competition-edition .competition-edition__organizers .field--name-field-organizers > .field__label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.725rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nyu);
  margin: 0 0 1.5rem;
  padding: 0;
  border: none;
}

/* Inner field wrapper inside the section — strip the default field
   chrome since the section itself carries the heading. */
.node--type-competition-edition .competition-edition__organizers .field--name-field-organizers {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
  grid-column: auto;
}

/* The grid itself — auto-fit on 220px columns, but with a 280px max
   so a single-card edition doesn't stretch one card across the
   entire row (image would distort, see the earlier bug). Tracks
   left-align via `justify-content: start` so leftover space sits on
   the right rather than spreading the cards out. */
.node--type-competition-edition .competition-edition__organizers .field--name-field-organizers > .field__items {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: start;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Each organizer card — clean bordered card; flex column so the
   photo can sit at the top via `order: 10` on the image (existing
   organizer-card CSS handles internal layout — see the
   "Organizer card" block above). */
.node--type-competition-edition .competition-edition__organizers .field--name-field-organizers > .field__items > .field__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.node--type-competition-edition .competition-edition__organizers .field--name-field-organizers > .field__items > .field__item:hover {
  border-color: var(--nyu);
  box-shadow: 0 4px 16px rgba(87, 6, 140, 0.08);
}

/* Card image — show the FULL uploaded photo, no cropping.
   `object-fit: contain` fits the whole image inside the cell; any
   leftover space gets a faint lavender tint so it looks like a
   framed letterbox rather than an empty rectangle.
   The image cell still flex-grows to fill the bottom of the card
   (so card heights line up across a row), and we center the image
   inside that cell. Photos of any aspect ratio — square headshot,
   tall portrait, occasional landscape — render in their natural
   proportions without faces being chopped. */
.node--type-competition-edition .competition-edition__organizers [class*="field--name"][class*="organizer"] .field--type-image {
  flex: 1 1 240px;
  min-height: 200px;
  background: rgba(87, 6, 140, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.node--type-competition-edition .competition-edition__organizers [class*="field--name"][class*="organizer"] .field--type-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .node--type-competition-edition .node__content {
    grid-template-columns: 1fr;
  }
  .node--type-competition-edition .field--name-field-timeline {
    grid-column: 1;
    grid-row: auto;
  }
  .node--type-competition-edition .competition-edition__organizers .field--name-field-organizers > .field__items {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .node--type-competition-edition .competition-edition__organizers .field--name-field-organizers > .field__items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .node--type-competition-edition .field--name-field-base-competition,
  .node--type-competition-edition .field--name-field-year {
    display: block;
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  .node--type-competition-edition [class*="field--name"][class*="organizer"] > .field__items {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   TAXONOMY TERM — Region listing page
   /taxonomy/term/{id}
   The view machine name is "taxonomy_term" → selector: .view-id-taxonomy_term
   Nodes render in "teaser" view mode.
   NOTE: the view block is NOT inside .taxonomy-term — it is a sibling block
   directly inside .layout-content, so all selectors must root from
   .view-id-taxonomy_term (confirmed via DOM inspection).
   ============================================ */

/* ── 1. Fix the broken card grid ──
   Generic .view .view-content uses repeat(auto-fill, minmax(165px, 1fr))
   with background: var(--border) — creates ~6 tiny purple-gapped columns.
   Replace with a full-width vertical list. */
.view-id-taxonomy_term .view-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ── 2. Each row: full-width, divider between items ── */
.view-id-taxonomy_term .views-row {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  padding: 2rem 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.view-id-taxonomy_term .views-row:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}

/* Remove the left-edge ::before accent from the generic .views-row hover */
.view-id-taxonomy_term .views-row::before {
  display: none !important;
}

/* ── 3. Collapse the node's 2-column grid ──
   node__content is display:grid with 1fr 300px — too wide for a listing row. */
.view-id-taxonomy_term .node--type-competition-edition .node__content {
  display: block !important;
}

/* ── 4. Hide long-form detail fields — show only title/base comp/year/region ──
   Confirmed from live DOM: challenge-details, criteria, and organizer
   fields appear in the "teaser" display mode. */
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-eligibility,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-challenge-details,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-rules,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-criteria,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-registration-guidelines,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-submission-guidelines,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-resources,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-awards,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-awards-note,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-winners,
.view-id-taxonomy_term .node--type-competition-edition .field--name-body,
.view-id-taxonomy_term .node--type-competition-edition [class*="field--name"][class*="organizer"],
.view-id-taxonomy_term .node--type-competition-edition [class*="field--name"][class*="timeline"],
.view-id-taxonomy_term .node--type-competition-edition .node__meta {
  display: none !important;
}

/* ── "Read more" link on teaser rows — not needed in listing ── */
.view-id-taxonomy_term .node__read-more,
.view-id-taxonomy_term .links.inline,
.view-id-taxonomy_term ul.links {
  display: none !important;
}

/* ── RSS feed icon — hidden site-wide ── */
.feed-icons,
.feed-icon {
  display: none !important;
}

/* ── 5. Center-align all listing card content ── */
.view-id-taxonomy_term .views-row {
  text-align: center !important;
}
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-region .field__items {
  justify-content: center;
}

/* ── Node title ── */
.view-id-taxonomy_term .node--type-competition-edition h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.525rem, 2.5vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.view-id-taxonomy_term .node--type-competition-edition h2 a {
  color: var(--text);
  transition: color .2s var(--ease);
}

.view-id-taxonomy_term .node--type-competition-edition h2 a:hover { color: var(--nyu); }

/* Arrow affordance on hover */
.view-id-taxonomy_term .node--type-competition-edition h2 a::after {
  content: ' →';
  font-family: var(--ff-mono);
  font-size: 0.8em;
  color: var(--nyu);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.view-id-taxonomy_term .node--type-competition-edition h2 a:hover::after { opacity: 1; }

/* ── 6. Metadata strip — base comp + year inline ── */
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-base-competition,
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-year {
  display: inline-block !important;
  vertical-align: top;
  margin-right: 2.5rem;
  margin-bottom: 0.6rem;
}

/* ── 7. Region tags ── */
.view-id-taxonomy_term .node--type-competition-edition .field--name-field-region {
  clear: left;
  margin-top: 0.4rem;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ── 8. Empty state ── */
.view-id-taxonomy_term .view-empty {
  font-family: var(--ff-mono);
  font-size: 0.975rem;
  color: var(--text-dim);
  padding: 3rem 0;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ── 9. Standalone node pages: suppress the duplicate H2 ──
   node.html.twig now always emits <h2> so the page-title H1 block
   would create a duplicate on /node/* pages. Hide it via body class. */
.page-node-type-competition-edition .node--type-competition-edition > h2,
.page-node-type-competition-edition .node--type-competition-edition .node__title {
  display: none;
}
.page-node-type-competition-base .node--type-competition-base > h2,
.page-node-type-competition-base .node--type-competition-base .node__title {
  display: none;
}


/* ============================================
   AGENDA — 5 region cards
   View machine name assumed: agenda
   ============================================ */

/* Grid of 5 cards — wraps to 2–3 cols on smaller screens */
.view-agenda .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  background: transparent;
  border: none;
}

/* Region card */
.view-agenda .views-row {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  border-left: none; /* override default text-row left-border */
}

.view-agenda .views-row:hover {
  border-color: var(--nyu);
  box-shadow: 0 6px 28px rgba(87,6,140,0.14);
}

/* Region image — full bleed top */
.view-agenda .views-row .views-field-field-region-image img {
  width: 100%;
  height: 175px;
  object-fit: cover;
  display: block;
}

/* Fallback when no image: show a purple band */
.view-agenda .views-row .views-field-field-region-image:empty,
.view-agenda .views-row:not(:has(img)) {
  padding-top: 2.5rem;
}

/* Region name */
.view-agenda .views-row .views-field-title {
  padding: 1.25rem 1rem 0.5rem;
  width: 100%;
}

.view-agenda .views-row .views-field-title a,
.view-agenda .views-row .views-field-title span {
  font-family: var(--ff-display);
  font-size: 1.525rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  text-decoration: none;
  transition: color .2s var(--ease);
}

.view-agenda .views-row:hover .views-field-title a {
  color: var(--nyu);
}

/* "View Agenda →" label from the link field */
.view-agenda .views-row .views-field-field-agenda-link {
  padding: 0.5rem 1rem 1.5rem;
}

.view-agenda .views-row .views-field-field-agenda-link a {
  font-family: var(--ff-mono);
  font-size: 0.775rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nyu);
  border-bottom: 1px solid var(--nyu-border);
  padding-bottom: 2px;
  transition: color .2s var(--ease);
}

.view-agenda .views-row:hover .views-field-field-agenda-link a {
  color: var(--nyu-dark);
}

/* Stretch the entire card as one click target */
.view-agenda .views-row .views-field-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* NYU purple top-edge accent on hover */
.view-agenda .views-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nyu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.view-agenda .views-row:hover::before { transform: scaleX(1); }

/* Page title for the Agenda page */
.path-agenda .page-title,
.view-id-agenda .page-title {
  margin-bottom: 2.5rem;
}


/* ============================================
   HOMEPAGE BELOW-HERO SECTION
   White content area that sits between the hero and the ticker strip.
   ============================================ */

.homepage-below-hero {
  background: var(--bg);
  border-top: 3px solid var(--nyu);
}

.homepage-below-hero__inner {
  max-width: var(--w);
  margin: 0 auto;
  /* padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 4vw, 2.5rem); */
}


/* ============================================
   SPONSOR CTA BLOCK
   Custom block type: sponsor_cta
   Template: block--block-content--sponsor-cta.html.twig
   ============================================ */

/* Drupal adds .block--type-sponsor-cta when custom template isn't loaded */
.block--type-sponsor-cta,
.sponsor-cta {
  padding: 4rem clamp(1.25rem, 4vw, 2.5rem);
  max-width: 640px;
}

/* Teal heading — works with both the custom template (.sponsor-cta__heading)
   and Drupal's default field rendering */
.block--type-sponsor-cta [class*="field--name-field-cta-heading"] .field__item,
.sponsor-cta__heading {
  font-family: var(--ff-display);
  font-size: clamp(1.725rem, 3.5vw, 2.925rem);
  font-weight: 600;
  color: #0099a0;
  line-height: 1.25;
  margin-bottom: 2rem;
}
.block--type-sponsor-cta [class*="field--name-field-cta-heading"] .field__item p { margin: 0; }

.sponsor-cta__heading {
  font-family: var(--ff-display);
  font-size: clamp(1.725rem, 3.5vw, 2.925rem);
  font-weight: 600;
  color: #0099a0;           /* teal — matches the screenshot */
  line-height: 1.25;
  margin-bottom: 2.5rem;
}

/* Strip any paragraph margin Drupal adds inside the heading field */
.sponsor-cta__heading p { margin: 0; }

.sponsor-cta__contact-label {
  font-family: var(--ff-display);
  font-size: clamp(1.225rem, 2.5vw, 1.725rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

/* ── Contact list — horizontal row of name + envelope pairs.
   Wraps to a new line when the container is too narrow, so it stays
   responsive regardless of how many contacts are attached. */
.sponsor-cta__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

/* Each contact: name + envelope icon side-by-side */
.sponsor-cta__contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sponsor-cta__name {
  font-family: var(--ff-body);
  font-size: 1.125rem;
  color: var(--nyu);
}

.sponsor-cta__name a {
  color: var(--nyu);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.sponsor-cta__name a:hover { color: var(--nyu-dark); }

.sponsor-cta__email-icon a {
  display: inline-flex;
  color: var(--text);
  opacity: 0.6;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}

.sponsor-cta__email-icon a:hover {
  opacity: 1;
  color: var(--nyu);
}

/* ── "CSAW Contact Details" block — matches the sponsor CTA look
   wherever it's placed ──
   A **Sponsor CTA** (`sponsor_cta`) content block whose ID contains
   `csawcontactdetails`. It carries only `field_contact_name` +
   `field_contact_email` (paired by index). The per-page question lives in
   the block *placement title*, which is what lets the SAME block entity be
   placed on both /sponsors and /speakers with a different heading each —
   so the contact list has exactly one source of truth. The pairing JS in
   csaw-theme.js builds the `.sponsor-cta__contacts` list inside it
   (styled above). These rules match by ID substring so any placement
   (`csawcontactdetails`, `csawcontactdetails-2`, …) gets the same look.

   No max-width: the block spans the full content column. It used to be
   capped at 640px to keep the old `field_heading` intro paragraph at a
   readable line length, but that field has been removed — the cap only
   made the title wrap early and left dead space beside the contacts. */
[id*="csawcontactdetails"] {
  padding: 2rem clamp(1.25rem, 3vw, 2rem);
  max-width: none;
  width: 100%;
}

/* Kill the global Galmuri11 pixel-font h2 default; replace with the
   sponsor CTA teal display heading. */
[id*="csawcontactdetails"] > h2,
[id*="csawcontactdetails"] .block__title {
  font-family: var(--ff-display) !important;
  font-size: clamp(1.525rem, 3vw, 2.25rem) !important;
  font-weight: 600 !important;
  color: #0099a0 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  border: none !important;
}

/* Slight breathing room around the paired contact list once it's
   rendered by the JS. */
[id*="csawcontactdetails"] .sponsor-cta__contacts {
  margin-top: 0.5rem;
}


/* ============================================
   MENU BLOCKS — content / sidebar contexts
   (outside the site header; header menus have
    their own rules scoped to .site-header)
   ============================================ */

/* Strip any inherited section background so the block is always
   transparent — prevents the purple-tinted --bg-alt from leaking in */
main .block-menu,
.layout-sidebar-first .block-menu,
.layout-sidebar-second .block-menu {
  background: transparent;
}

main .block-menu .menu,
.layout-sidebar-first .block-menu .menu,
.layout-sidebar-second .block-menu .menu {
  display: flex;
  flex-direction: column;
  background: transparent;
}

main .block-menu .menu .menu-item > a,
.layout-sidebar-first .block-menu .menu .menu-item > a,
.layout-sidebar-second .block-menu .menu .menu-item > a {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--ff-body);
  font-size: 1.025rem;
  font-weight: 400;
  color: var(--nyu);
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

main .block-menu .menu .menu-item > a:hover,
.layout-sidebar-first .block-menu .menu .menu-item > a:hover,
.layout-sidebar-second .block-menu .menu .menu-item > a:hover {
  color: var(--nyu-dark);
  padding-left: 0.5rem;
}

main .block-menu .menu .menu-item--active-trail > a,
.layout-sidebar-first .block-menu .menu .menu-item--active-trail > a,
.layout-sidebar-second .block-menu .menu .menu-item--active-trail > a {
  color: var(--nyu-dark);
  font-weight: 500;
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  word-wrap: normal;
}

.visually-hidden.focusable:focus {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  clip: auto;
  width: auto; height: auto;
  padding: 1rem;
  background: var(--nyu);
  color: #ffffff;
  font-family: var(--ff-mono);
  font-size: 0.975rem;
  text-align: center;
  z-index: 10000;
}


/* ============================================
   DRUPAL TOOLBAR — offset for fixed header
   ============================================ */

body.toolbar-fixed .site-header,
body.toolbar-tray-open .site-header {
  top: var(--drupal-displace-offset-top, 39px);
}

body.toolbar-fixed .front-hero,
body.toolbar-tray-open .front-hero {
  padding-top: calc(var(--drupal-displace-offset-top, 39px) + var(--header-h) + 3rem);
}


/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.fade-in.visible { opacity: 1; transform: translateY(0); }


/* ============================================
   FRONT PAGE — fallback (before cache cleared)
   ============================================ */

/* Push content below fixed header when front-hero wrapper isn't rendered yet */
body.path-frontpage main:not(:has(.front-hero)) {
  padding-top: var(--header-h);
  background: var(--nyu-deep);
  min-height: 100vh;
}

body.path-frontpage main:not(:has(.front-hero)) > .section {
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--nyu-deep);
}

/* Hero-like node title before cache clear */
body.path-frontpage #block-csaw-theme-content .node__title,
body.path-frontpage #block-csaw-theme-content h1.node__title {
  font-family: var(--ff-display);
  font-size: clamp(3.125rem, 8vw, 8.125rem);
  font-weight: 600;
  line-height: 0.93;
  color: var(--dark-text);
  margin-bottom: 1.5rem;
}

body.path-frontpage #block-csaw-theme-content .node__content p { color: var(--dark-dim); }

body.path-frontpage #block-csaw-theme-content .node__content::before { display: none; }


/* ============================================
   GIVE NOW PAGE — /give-now
   A Basic page (node title "Give Now", URL alias /give-now). The big
   lowercase "give now" headline you see in the reference is the node's
   title field; we restyle .page-title under this body class. Region
   subheads ("US-Canada Region", "India Region", etc.) come through as
   <h2> inside the body field. The "Give Now" CTA is a plain CKEditor
   link with class="give-now-button" added via the Source toggle.
   ============================================ */

.path-give-now .layout-content,
.path-give-now main[role="main"] .node--type-page,
.path-give-now main[role="main"] article {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 1rem;
}

/* Big lowercase teal headline — applies to whatever Drupal renders as
   the page title for this path. We hit both the dedicated block ID and
   the inline h1 inside the node template. */
.path-give-now h1.page-title,
.path-give-now .block-page-title-block h1,
.path-give-now .node--type-page > h2:first-child,
.path-give-now .node__title {
  font-family: var(--ff-display);
  font-size: clamp(3.25rem, 9vw, 6rem);
  font-weight: 700;
  color: #1a8088;                 /* same teal as the press archive */
  text-transform: lowercase;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 2.5rem;
}

/* Region subheadings inside the body — purple. */
.path-give-now .layout-content h2,
.path-give-now .field--name-body h2 {
  font-family: var(--ff-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--nyu);
  letter-spacing: 0;
  text-transform: none;
  margin: 2.5rem 0 1rem;
}

.path-give-now .layout-content p,
.path-give-now .field--name-body p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1rem;
}

.path-give-now .layout-content ul,
.path-give-now .field--name-body ul {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  padding-left: 1.5rem;
  margin: 0.5rem 0 1.5rem;
}

.path-give-now .layout-content ul li,
.path-give-now .field--name-body ul li {
  margin-bottom: 0.5rem;
}

/* Outlined Give Now button — teal border, fills on hover. */
.path-give-now a.give-now-button {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  margin: 1.5rem 0 2rem;
  border: 2px solid #1a8088;
  border-radius: 2px;
  color: var(--text);
  font-family: var(--ff-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.path-give-now a.give-now-button:hover,
.path-give-now a.give-now-button:focus {
  background: #1a8088;
  color: #fff;
  outline: none;
}


/* ============================================
   CODE OF CONDUCT PAGE — /code-of-conduct
   Basic page (node title "Code of Conduct"). The visible headings
   ("Code of Conduct for the Virtual Platform", "Reporting an Incident")
   live inside the body as <h2>; the Drupal page-title block is hidden
   on this path so the body's h2s carry the entire heading hierarchy.
   ============================================ */

.path-code-of-conduct .layout-content,
.path-code-of-conduct main[role="main"] .node--type-page,
.path-code-of-conduct main[role="main"] article {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 1rem;
}

/* Hide the small Drupal page title block so the body's <h2>s are the
   only visible section markers. */
.path-code-of-conduct h1.page-title,
.path-code-of-conduct .block-page-title-block,
.path-code-of-conduct .node--type-page > h2:first-child,
.path-code-of-conduct .node__title {
  display: none;
}

/* Large teal section headings in the body. */
.path-code-of-conduct .layout-content h2,
.path-code-of-conduct .field--name-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #1a8088;                 /* teal — matches press archive */
  margin: 2.75rem 0 1.25rem;
}

.path-code-of-conduct .layout-content h2:first-child,
.path-code-of-conduct .field--name-body h2:first-child {
  margin-top: 0;
}

.path-code-of-conduct .layout-content p,
.path-code-of-conduct .field--name-body p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 1.15rem;
}

.path-code-of-conduct .layout-content ul,
.path-code-of-conduct .field--name-body ul {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  padding-left: 1.5rem;
  margin: 0.5rem 0 1.5rem;
}

.path-code-of-conduct .layout-content ul li,
.path-code-of-conduct .field--name-body ul li {
  margin-bottom: 0.85rem;
}

.path-code-of-conduct .layout-content a,
.path-code-of-conduct .field--name-body a {
  color: #1a8088;
  text-decoration: underline;
  text-decoration-color: rgba(26, 128, 136, 0.4);
  text-underline-offset: 3px;
}

.path-code-of-conduct .layout-content a:hover,
.path-code-of-conduct .field--name-body a:hover {
  color: var(--nyu);
  text-decoration-color: var(--nyu);
}


/* ============================================
   RESPONSIVE
   ============================================ */

/* ── Tablet / narrow-desktop nav drawer ──
   Bumped from 768 → 1024 because the horizontal desktop nav doesn't
   actually fit until ~1100px once Search + 7 menu items + the centred
   logo are in play. Below 1024 we use the hamburger drawer instead. */
@media (max-width: 1024px) {
  .view .view-content {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .site-header { padding: 0 1.25rem; }
  .mobile-menu-toggle { display: block; }

  /* Hide the wide search block in mobile — the drawer doesn't include
     a search affordance by design (use the search page itself).
     Targets the actual block id Drupal renders, plus the generic class. */
  .site-header .navigation .search-block-form,
  .site-header #block-csaw-theme-search-form-wide,
  .site-header #block-csaw-theme-search-form-narrow {
    display: none !important;
  }

  /* Mobile nav drawer — slides in from the RIGHT, never pushes content.
     Sits above the page (`z-index: 1001`) and the dimmer (`1000`). */
  .site-header .navigation {
    position: fixed !important;
    top: 0;
    right: 0;
    left: auto;
    width: min(320px, 88vw);
    height: 100dvh;
    background: var(--nyu-dark);
    border-left: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + 1.5rem) 1.25rem 2rem;
    margin: 0;
    /* Park the drawer off-screen with a TRANSFORM, not `right: -100%`.
       A position:fixed element pushed off-screen via a right/left offset
       EXTENDS the mobile scrollable width — the whole page then scrolls
       sideways (dark gutter, shifted header) and `overflow-x: hidden` can't
       help because it never clips fixed-position descendants. A transform
       moves the drawer visually without adding to layout/scroll width. */
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1001;
    pointer-events: auto;
    box-sizing: border-box;
  }

  .site-header .navigation.open { transform: translateX(0); }

  /* Overlay must sit BELOW the site-header so the drawer (inside the
     header) receives clicks. Same z-index + later DOM position was making
     the overlay win, intercepting every tap and silently closing the
     drawer before the menu item ever saw the click. */
  .mobile-overlay { z-index: 998; }
  .site-header { z-index: 1000; }

  /* Top-level menu — vertical list filling the drawer. */
  .site-header .navigation .menu {
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding: 0;
    margin: 0;
  }

  .site-header .navigation .menu .menu-item {
    width: 100%;
  }

  .site-header .navigation .menu .menu-item > a,
  .site-header .navigation .menu .menu-item > span {
    padding: 0.85rem 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .site-header .navigation .menu .menu-item > a::after,
  .site-header .navigation .menu .menu-item > span::after { display: none; }

  /* Parent items that have children get a chevron indicator on the right.
     The JS swaps a `.is-open` class to rotate it and reveal the submenu. */
  .site-header .navigation .menu .menu-item--has-children > a,
  .site-header .navigation .menu .menu-item--has-children > span {
    position: relative;
    padding-right: 2rem;
    cursor: pointer;
  }

  .site-header .navigation .menu .menu-item--has-children > a::before,
  .site-header .navigation .menu .menu-item--has-children > span::before {
    content: '';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    transform: translateY(-65%) rotate(45deg);
    transform-origin: center;
    transition: transform 0.25s ease;
  }

  .site-header .navigation .menu .menu-item--has-children.is-open > a::before,
  .site-header .navigation .menu .menu-item--has-children.is-open > span::before {
    transform: translateY(-35%) rotate(-135deg);
  }

  /* Submenu — collapsed by default, expanded when parent has `.is-open`.
     Drops the desktop dropdown's `width: max-content; min-width: 260px;`
     rule, otherwise long competition names ("AI Hardware Attack
     Challenge", "Operational Technology Security Competition") overflow
     the drawer and clip on the right edge. */
  .site-header .navigation .menu .menu-item > .menu {
    position: static !important;
    display: none !important;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    border-left: 2px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0.25rem 0 0.5rem 0.85rem;
    margin: 0;
    z-index: auto;
  }

  .site-header .navigation .menu .menu-item.is-open > .menu {
    display: flex !important;
  }

  /* Override the desktop `:hover > .menu { display: flex }` rule —
     touch devices fire phantom hover that would otherwise force every
     submenu open and steal the first tap. */
  .site-header .navigation .menu .menu-item:hover > .menu {
    display: none !important;
  }
  .site-header .navigation .menu .menu-item.is-open:hover > .menu {
    display: flex !important;
  }

  .site-header .navigation .menu .menu-item > .menu .menu-item > a {
    padding: 0.55rem 0.5rem 0.55rem 0;
    font-size: 0.775rem;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-header .navigation .menu .menu-item > .menu .menu-item:last-child > a {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }

  /* Prevent horizontal scroll on mobile */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* NOTE: an obsolete rule used to live here —
     `.layout-container > header[role="banner"] .menu { display: none; }`
     — a leftover from before the slide-in drawer existed. It only
     matched INNER pages (whose header is wrapped in `.layout-container`;
     the front page's header is not), so at ≤768px it hid the entire
     main-navigation `<ul class="menu">` inside the mobile drawer,
     leaving inner-page drawers empty while the homepage drawer worked.
     The ≤1024px drawer media query already lays the menu out as a
     vertical column, so the rule was removed. Don't reintroduce it. */

  /* ── Competition base: stack columns vertically ── */
  .node--type-competition-base .node__content--competition-base {
    flex-direction: column;
  }
  .node--type-competition-base .cb-sidebar {
    flex: 0 0 auto;
    width: 100%;
  }
  /* ── Competition edition: stack columns ── */
  .node--type-competition-edition .node__content {
    grid-template-columns: 1fr;
  }
  .node--type-competition-edition .field--name-field-organizers,
  .node--type-competition-edition .field--name-field-timeline {
    grid-column: 1;
    grid-row: auto;
  }

  /* ── Views grid: 2 columns ── */
  .view .view-content { grid-template-columns: repeat(2, 1fr); }

  /* ── Inner page layout ── */
  .layout-content {
    padding: 2rem 1.25rem;
  }

  /* ── Front hero ── */
  .front-hero {
    padding: calc(var(--header-h) + 1.5rem) 1.25rem 3.5rem;
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 3rem);
  }

  .front-hero .node__title,
  .front-hero h1.node__title { letter-spacing: -0.005em; }

  .front-hero .field--type-entity-reference-revisions .field__items,
  .front-hero .field--name-field-stats .field__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .front-hero .views-element-container {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .view .view-content { grid-template-columns: 1fr; }

  .front-hero .field--type-entity-reference-revisions .field__items,
  .front-hero .field--name-field-stats .field__items {
    grid-template-columns: 1fr;
  }

}

/* ============================================
   PRESS ARCHIVE — /press-page
   View machine name: press_page
   Renders Press Item rows grouped by year. The unscoped grid/flex rules
   elsewhere in this stylesheet catch the View's row wrappers and force
   them inline — these rules pull them back into a vertical list and
   restyle the year group heading to look like the csaw.io reference.
   ============================================ */

.path-press-page .view-press-page,
.path-press-page .view-id-press_page {
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem 0 4rem;
}

/* Year group heading (rendered by Views' grouping). It comes through as
   the group-title element; force it back to a regular block heading. */
.path-press-page .view-press-page .view-content > h3,
.path-press-page .view-press-page .views-view-grouping-header,
.path-press-page .view-press-page .views-view-grouping > h3,
.path-press-page .view-press-page h3.views-group-header {
  display: block !important;
  width: 100% !important;
  font-family: var(--ff-display);
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a8088;                 /* teal, matching the reference image */
  margin: 3rem 0 1.5rem;
  padding: 0;
  background: transparent !important;
  border: none !important;
}

/* The grouping wrapper itself — kill any inherited flex/grid. */
.path-press-page .view-press-page .views-view-grouping,
.path-press-page .view-press-page .view-content,
.path-press-page .view-press-page .view-content > div {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  width: 100% !important;
}

/* Each press item — stacked block, title on its own line, source + date below. */
.path-press-page .view-press-page .views-row {
  display: block !important;
  width: 100% !important;
  flex: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.75rem !important;
  text-align: left !important;
}

/* Title field — visible only field besides Source + Date.
   Explicit overrides for the global `.views-row .views-field-title` rule
   above (line ~998) which adds card-style padding, centers text, and
   sets the title font size for the typical listing views. Without these
   resets the press title appears horizontally centered inside its
   column. */
.path-press-page .view-press-page .views-row .views-field-title,
.path-press-page .view-press-page .views-row .views-field-title .field-content {
  text-align: left !important;
  padding: 0 !important;
  width: auto !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.path-press-page .view-press-page .views-row .views-field-title {
  margin-bottom: 0.15rem;
}

/* Primary title link — every <a> the preprocess hook emits uses one of
   these classes. The bare `.views-field-title a` rule is kept as a
   fallback for the unlinked variant. */
.path-press-page .view-press-page .views-row .views-field-title a,
.path-press-page .view-press-page .press-title__link,
.path-press-page .view-press-page .press-title {
  font-family: var(--ff-body);
  font-size: 1.075rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(20, 0, 43, 0.35);
  text-underline-offset: 3px;
}

.path-press-page .view-press-page .press-title--unlinked {
  text-decoration: none;
  color: var(--text-mid);
}

.path-press-page .view-press-page .views-row .views-field-title a:hover,
.path-press-page .view-press-page .press-title__link:hover {
  color: var(--nyu);
  text-decoration-color: var(--nyu);
}

/* "(PDF)" hint after a primary title that links directly to a PDF. */
.path-press-page .view-press-page .press-title__link--pdf::after {
  content: ' (PDF)';
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-decoration: none;
  margin-left: 0.35rem;
  vertical-align: 0.05em;
}

/* Extra-link "badges" — render INLINE, right after the title text, as
   small parenthesised tags ("(PDF)", "(Spanish)" etc.). Matches the
   same visual treatment that `.press-title__link--pdf::after` gives a
   PDF-only press item, so the single-PDF case and the multi-link case
   look consistent. */
.path-press-page .view-press-page .press-link-badges {
  display: inline;
  margin: 0;
  padding: 0;
}

.path-press-page .view-press-page .press-link-badge {
  display: inline;
  margin-left: 0.35rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  overflow: visible;
  vertical-align: 0.08em;
  transition: color 0.2s ease;
}

.path-press-page .view-press-page .press-link-badge::before {
  content: '(';
}

.path-press-page .view-press-page .press-link-badge::after {
  content: ')';
}

.path-press-page .view-press-page .press-link-badge:hover {
  color: var(--nyu);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Suppress the standalone PDF arrow — the parentheses are enough.
   Anything that was previously prepending "↓ " is now no-op. */
.path-press-page .view-press-page .press-link-badge--pdf::before {
  content: '(';
}

/* Source — Date line. Inline-fields gives us
   "<source-field> — <date-field>" already; just tone it down visually. */
.path-press-page .view-press-page .views-row .views-field-field-source,
.path-press-page .view-press-page .views-row .views-field-field-publication-date {
  display: inline;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--text-mid);
}

/* ============================================
   CYBERBYTES ARCHIVE — year-grouped list on /cyberbytes
   Same model + markup as the press archive (reused fields
   field_source/field_publication_date/field_external_url/field_press_file,
   the same `_csaw_theme_press_*` title link-out hook, and Views year
   grouping), but the list is a *block* placed below the "What is
   CyberBytes?" node body — so scope by the view id only (`view-id-cyberbytes`),
   not a path. These rules mirror the press-archive treatment above; if you
   restyle one, mirror the change here.
   ============================================ */
.view-id-cyberbytes .view-content { width: 100%; }

/* Year group heading (Views grouping). */
.view-id-cyberbytes .view-content > h3,
.view-id-cyberbytes .views-view-grouping-header,
.view-id-cyberbytes .views-view-grouping > h3,
.view-id-cyberbytes h3.views-group-header {
  display: block !important;
  width: 100% !important;
  font-family: var(--ff-display);
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a8088;
  margin: 2.5rem 0 1.5rem;
  padding: 0;
  background: transparent !important;
  border: none !important;
}
.view-id-cyberbytes .view-content > h3:first-child { margin-top: 1rem; }

/* Kill inherited flex/grid on the grouping + row wrappers. */
.view-id-cyberbytes .views-view-grouping,
.view-id-cyberbytes .view-content,
.view-id-cyberbytes .view-content > div {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  width: 100% !important;
}

/* Each issue — stacked block, title on its own line, source + date below. */
.view-id-cyberbytes .views-row {
  display: block !important;
  width: 100% !important;
  flex: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.75rem !important;
  text-align: left !important;
}
.view-id-cyberbytes .views-row .views-field-title,
.view-id-cyberbytes .views-row .views-field-title .field-content {
  text-align: left !important;
  padding: 0 !important;
  width: auto !important;
  font: inherit;
  color: inherit;
}
.view-id-cyberbytes .views-row .views-field-title { margin-bottom: 0.15rem; }

/* Title link — the preprocess hook emits `.press-title__link` etc. */
.view-id-cyberbytes .views-row .views-field-title a,
.view-id-cyberbytes .press-title__link,
.view-id-cyberbytes .press-title {
  font-family: var(--ff-body);
  font-size: 1.075rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(20, 0, 43, 0.35);
  text-underline-offset: 3px;
}
.view-id-cyberbytes .press-title--unlinked {
  text-decoration: none;
  color: var(--text-mid);
}
.view-id-cyberbytes .views-row .views-field-title a:hover,
.view-id-cyberbytes .press-title__link:hover {
  color: var(--nyu);
  text-decoration-color: var(--nyu);
}
.view-id-cyberbytes .press-title__link--pdf::after {
  content: ' (PDF)';
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-decoration: none;
  margin-left: 0.35rem;
  vertical-align: 0.05em;
}

/* Extra-link badges. */
.view-id-cyberbytes .press-link-badges { display: inline; margin: 0; padding: 0; }
.view-id-cyberbytes .press-link-badge {
  display: inline;
  margin-left: 0.35rem;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 0.08em;
  transition: color 0.2s ease;
}
.view-id-cyberbytes .press-link-badge::before { content: '('; }
.view-id-cyberbytes .press-link-badge::after { content: ')'; }
.view-id-cyberbytes .press-link-badge:hover {
  color: var(--nyu);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Source — Date line. */
.view-id-cyberbytes .views-row .views-field-field-source,
.view-id-cyberbytes .views-row .views-field-field-publication-date {
  display: inline;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--text-mid);
}

/* "CSAW Press" intro block above the archive — tighten spacing. */
.path-press-page .block-block-content,
.path-press-page #block-csaw-theme-csawpress {
  max-width: 880px;
  margin: 0 auto 1rem;
  padding: 0;
}

.path-press-page .block-block-content h2,
.path-press-page #block-csaw-theme-csawpress h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.path-press-page .block-block-content p,
.path-press-page #block-csaw-theme-csawpress p {
  font-family: var(--ff-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}


/* ============================================
   SPONSORS LANDING — /sponsors
   Basic Page (node title "Sponsors", URL alias /sponsors).
   Mirrors the /give-now structure: page-title becomes the big teal
   headline; body <h2>s become tier or section subheads; CTA links use
   class="sponsors-cta-button" added via the CKEditor Source toggle.
   The "limited availability" callout is whatever the editor wraps in
   <p class="sponsors-callout">…</p> in the body.
   ============================================ */

.path-sponsors .layout-content,
.path-sponsors main[role="main"] .node--type-page,
.path-sponsors main[role="main"] article {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 1rem;
}

.path-sponsors h1.page-title,
.path-sponsors .block-page-title-block h1,
.path-sponsors .node--type-page > h2:first-child,
.path-sponsors .node__title {
  font-family: var(--ff-display);
  font-size: clamp(3.25rem, 9vw, 6rem);
  font-weight: 700;
  color: #1a8088;
  text-transform: lowercase;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 2.5rem;
}

.path-sponsors .layout-content h2,
.path-sponsors .field--name-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: #1a8088;
  letter-spacing: -0.005em;
  margin: 2.5rem 0 1rem;
}

.path-sponsors .layout-content h3,
.path-sponsors .field--name-body h3 {
  font-family: var(--ff-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--nyu);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2rem 0 0.75rem;
}

.path-sponsors .layout-content p,
.path-sponsors .field--name-body p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 1.15rem;
}

.path-sponsors .layout-content ul,
.path-sponsors .field--name-body ul {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  padding-left: 1.5rem;
  margin: 0.5rem 0 1.5rem;
}

.path-sponsors .layout-content ul li,
.path-sponsors .field--name-body ul li {
  margin-bottom: 0.6rem;
}

/* In-body links pick up the same teal as the headings. */
.path-sponsors .layout-content a:not(.sponsors-cta-button),
.path-sponsors .field--name-body a:not(.sponsors-cta-button) {
  color: #1a8088;
  text-decoration: underline;
  text-decoration-color: rgba(26, 128, 136, 0.4);
  text-underline-offset: 3px;
}

.path-sponsors .layout-content a:not(.sponsors-cta-button):hover,
.path-sponsors .field--name-body a:not(.sponsors-cta-button):hover {
  color: var(--nyu);
  text-decoration-color: var(--nyu);
}

/* Outlined CTA button — same family as the Give Now button so the
   visual language is consistent across landing pages. */
.path-sponsors a.sponsors-cta-button {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  margin: 1.5rem 0 2rem;
  border: 2px solid #1a8088;
  border-radius: 2px;
  color: var(--text);
  font-family: var(--ff-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.path-sponsors a.sponsors-cta-button:hover,
.path-sponsors a.sponsors-cta-button:focus {
  background: #1a8088;
  color: #fff;
  outline: none;
}

/* "Limited availability" callout — wrap the warning text in
   <p class="sponsors-callout">…</p> via CKEditor Source. */
.path-sponsors p.sponsors-callout {
  display: block;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  background: rgba(26, 128, 136, 0.06);
  border-left: 3px solid #1a8088;
  font-size: 0.95rem;
  color: var(--text);
}

/* Contact block (Basic block placed on /sponsors). Same shape as the
   CSAW Press intro: editor's <h2> carries the heading, plain copy
   below. The block ID changes per install, so target by region path. */
.path-sponsors .block-block-content {
  max-width: 880px;
  margin: 0 auto 1.5rem;
  padding: 0;
}

/* ── Sponsor / Partner logo grid ──
   Two view blocks — `homepage_sponsors` and `homepage_partners` —
   share the same clean logo-wall treatment. The sponsor block can
   render on the homepage AND on /sponsors (as "Previous Sponsors");
   the partner block renders on the homepage (as "Partners"). Both
   benefit from the same overrides because the default .views-row
   card chrome (purple left bar, title below the logo, light-purple
   logo background) makes the grid look cluttered.

   Scope is by view machine name + block class only — NO page-scope.
   The same clean white-on-white grid renders identically wherever
   either view appears. `!important` is used heavily because the
   global .views-element-container rules in `.front-hero` are
   stronger by specificity otherwise.

   Selectors cover both spelling conventions Drupal Views emits:
   - `view-homepage-sponsors` / `view-homepage-partners` (CSS class)
   - `view-id-homepage_sponsors` / `view-id-homepage_partners` (canonical)
   - block-wrapper attribute matches for the `.views-element-container`
     layer that the .front-hero rules target.

   If you ever add a third "logo wall" view (e.g. `homepage_speakers`
   for past speakers), the easiest extension is to append its
   selectors to every rule below. */
.block-views-blockhomepage-sponsors-block-1,
.block-views-blockhomepage-partners-block-1,
[class*="block-views-block"][class*="sponsor"],
[class*="block-views-block"][class*="partner"],
.view-homepage-sponsors,
.view-homepage-partners,
.view-id-homepage_sponsors,
.view-id-homepage_partners {
  max-width: 100%;
  margin: 3rem auto 0;
  padding: 0;
  background: transparent;
}

/* Defeat the .front-hero panel chrome around the sponsor block when
   it renders inside the hero — strip the white-panel background, the
   purple top-border, the heavy box-shadow, and the inner padding so
   the grid is the only visual. Targets the wrapping
   `.views-element-container` that the front-hero rules style. */
.front-hero .views-element-container:has(.view-id-homepage_sponsors),
.front-hero .views-element-container:has(.view-homepage-sponsors) {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  margin-top: 3rem !important;
  padding: 0 !important;
}

/* Block title — "Previous Sponsors" on /sponsors, "Sponsors" on the
   homepage. Match the page's teal section headings. */
.block-views-blockhomepage-sponsors-block-1 > h2,
[class*="block-views-block"][class*="sponsor"] > h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: #1a8088;
  letter-spacing: -0.005em;
  margin: 0 0 1.5rem;
  text-transform: none;
}

/* When the block is inside the front-hero (dark band), flip the
   heading to lavender-white so it reads against the violet background. */
.front-hero .block-views-blockhomepage-sponsors-block-1 > h2,
.front-hero [class*="block-views-block"][class*="sponsor"] > h2 {
  color: #c4a8d8 !important;
}

/* Strip the global purple side-bar decoration on each row. */
.view-homepage-sponsors .views-row::before,
.view-id-homepage_sponsors .views-row::before,
[class*="block-views-block"][class*="sponsor"] .views-row::before {
  display: none !important;
  content: none !important;
}

/* Hide the sponsor name above each logo — logos speak for themselves.
   Also hide the link field cell — the JS reads the URL from it and
   wraps the logo in an <a>; the field doesn't need to render as text.
   IMPORTANT: use `display: none` (NOT "Exclude from display" in the
   View admin). "Exclude from display" omits the field from the DOM
   entirely, so the JS has nothing to read; `display: none` keeps the
   element in the DOM but invisible — best of both worlds. */
.view-homepage-sponsors .views-row .views-field-title,
.view-id-homepage_sponsors .views-row .views-field-title,
[class*="block-views-block"][class*="sponsor"] .views-row .views-field-title,
.view-homepage-sponsors .views-row h2,
.view-id-homepage_sponsors .views-row h2,
.view-homepage-sponsors .views-row h3,
.view-id-homepage_sponsors .views-row h3,
.view-homepage-sponsors .views-row [class*="views-field-field-link"],
.view-id-homepage_sponsors .views-row [class*="views-field-field-link"],
.view-homepage-sponsors .views-row [class*="views-field-field-url"],
.view-id-homepage_sponsors .views-row [class*="views-field-field-url"],
.view-homepage-sponsors .views-row [class*="views-field-field-website"],
.view-id-homepage_sponsors .views-row [class*="views-field-field-website"],
[class*="block-views-block"][class*="sponsor"] .views-row [class*="views-field-field-link"],
[class*="block-views-block"][class*="sponsor"] .views-row [class*="views-field-field-url"],
[class*="block-views-block"][class*="sponsor"] .views-row [class*="views-field-field-website"] {
  display: none !important;
}

/* Grid — auto-fit ~5 columns on desktop, fewer on narrower screens. */
.view-homepage-sponsors .view-content,
.view-id-homepage_sponsors .view-content,
[class*="block-views-block"][class*="sponsor"] .view-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 1rem !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Each card — clean white box with a thin neutral border, logo centered. */
.view-homepage-sponsors .views-row,
.view-id-homepage_sponsors .views-row,
[class*="block-views-block"][class*="sponsor"] .views-row {
  background: #ffffff !important;
  border: 1px solid var(--border-soft, rgba(87, 6, 140, 0.12)) !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem 1rem !important;
  margin: 0 !important;
  min-height: 130px !important;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.view-homepage-sponsors .views-row:hover,
.view-id-homepage_sponsors .views-row:hover,
[class*="block-views-block"][class*="sponsor"] .views-row:hover {
  border-color: rgba(87, 6, 140, 0.3) !important;
  box-shadow: 0 4px 12px rgba(87, 6, 140, 0.06);
}

/* Logo cell — strip the global light-purple background, padding, and
   border-bottom so the logo sits cleanly on white.
   IMPORTANT: the sponsor logo field machine name is `field_logo1` (the
   trailing 1 is real — that's how this site's vocabulary was set up).
   The selector list covers `field_logo1` as the primary target plus a
   few defensive aliases. */
.view-homepage-sponsors .views-row [class*="views-field-field-logo"],
.view-id-homepage_sponsors .views-row [class*="views-field-field-logo"],
[class*="block-views-block"][class*="sponsor"] .views-row [class*="views-field-field-logo"],
.view-homepage-sponsors .views-row .views-field-field-sponsor-logo,
.view-homepage-sponsors .views-row .views-field-field-image,
.view-id-homepage_sponsors .views-row .views-field-field-sponsor-logo,
.view-id-homepage_sponsors .views-row .views-field-field-image,
[class*="block-views-block"][class*="sponsor"] .views-row .views-field-field-sponsor-logo,
[class*="block-views-block"][class*="sponsor"] .views-row .views-field-field-image {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  min-height: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Logo image — consistent vertical sizing so cards line up cleanly. */
.view-homepage-sponsors .views-row img,
.view-id-homepage_sponsors .views-row img,
[class*="block-views-block"][class*="sponsor"] .views-row img {
  display: block !important;
  max-height: 56px !important;
  max-width: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  .view-homepage-sponsors .view-content,
  .view-id-homepage_sponsors .view-content,
  [class*="block-views-block"][class*="sponsor"] .view-content {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .view-homepage-sponsors .views-row,
  .view-id-homepage_sponsors .views-row,
  [class*="block-views-block"][class*="sponsor"] .views-row {
    min-height: 100px !important;
    padding: 0.9rem 0.6rem !important;
  }

  .view-homepage-sponsors .views-row img,
  .view-id-homepage_sponsors .views-row img,
  [class*="block-views-block"][class*="sponsor"] .views-row img {
    max-height: 44px !important;
  }
}


/* ── Partner logo grid — mirrors the sponsor block above ──
   The `homepage_partners` view block renders on the homepage with
   the heading "Partners". Same clean treatment as the sponsor grid:
   white cards, hidden titles, hidden link fields, consistent logo
   sizing. The selector list is defensive — covers `partners` (most
   likely view machine name), `partner` (singular fallback), and the
   block-wrapper attribute matcher.

   The click-through JS in csaw-theme.js handles both blocks
   identically (any .views-row with an image gets its logo wrapped
   in <a> using any of field_link / field_link_s / field_url /
   field_website), so this CSS is purely visual.

   To unify with sponsors later, replace both blocks with a single
   `:is(...)` selector. For now, parallel rules are easier to read
   and don't risk breaking the sponsor styling we just got right. */
.block-views-blockhomepage-partners-block-1,
[class*="block-views-block"][class*="partner"],
.view-homepage-partners,
.view-id-homepage_partners {
  max-width: 100%;
  margin: 3rem auto 0;
  padding: 0;
  background: transparent;
}

.front-hero .views-element-container:has(.view-id-homepage_partners),
.front-hero .views-element-container:has(.view-homepage-partners) {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  margin-top: 3rem !important;
  padding: 0 !important;
}

.block-views-blockhomepage-partners-block-1 > h2,
[class*="block-views-block"][class*="partner"] > h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: #1a8088;
  letter-spacing: -0.005em;
  margin: 0 0 1.5rem;
  text-transform: none;
}

.front-hero .block-views-blockhomepage-partners-block-1 > h2,
.front-hero [class*="block-views-block"][class*="partner"] > h2 {
  color: #c4a8d8 !important;
}

.view-homepage-partners .views-row::before,
.view-id-homepage_partners .views-row::before,
[class*="block-views-block"][class*="partner"] .views-row::before {
  display: none !important;
  content: none !important;
}

.view-homepage-partners .views-row .views-field-title,
.view-id-homepage_partners .views-row .views-field-title,
[class*="block-views-block"][class*="partner"] .views-row .views-field-title,
.view-homepage-partners .views-row h2,
.view-id-homepage_partners .views-row h2,
.view-homepage-partners .views-row h3,
.view-id-homepage_partners .views-row h3,
.view-homepage-partners .views-row [class*="views-field-field-link"],
.view-id-homepage_partners .views-row [class*="views-field-field-link"],
.view-homepage-partners .views-row [class*="views-field-field-url"],
.view-id-homepage_partners .views-row [class*="views-field-field-url"],
.view-homepage-partners .views-row [class*="views-field-field-website"],
.view-id-homepage_partners .views-row [class*="views-field-field-website"],
[class*="block-views-block"][class*="partner"] .views-row [class*="views-field-field-link"],
[class*="block-views-block"][class*="partner"] .views-row [class*="views-field-field-url"],
[class*="block-views-block"][class*="partner"] .views-row [class*="views-field-field-website"] {
  display: none !important;
}

.view-homepage-partners .view-content,
.view-id-homepage_partners .view-content,
[class*="block-views-block"][class*="partner"] .view-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 1rem !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
}

.view-homepage-partners .views-row,
.view-id-homepage_partners .views-row,
[class*="block-views-block"][class*="partner"] .views-row {
  background: #ffffff !important;
  border: 1px solid var(--border-soft, rgba(87, 6, 140, 0.12)) !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem 1rem !important;
  margin: 0 !important;
  min-height: 130px !important;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.view-homepage-partners .views-row:hover,
.view-id-homepage_partners .views-row:hover,
[class*="block-views-block"][class*="partner"] .views-row:hover {
  border-color: rgba(87, 6, 140, 0.3) !important;
  box-shadow: 0 4px 12px rgba(87, 6, 140, 0.06);
}

/* Partner logo field — same machine-name uncertainty as sponsors;
   use a wildcard. Field names seen historically: field_logo,
   field_partner_logo, field_logo_cb, field_image. */
.view-homepage-partners .views-row [class*="views-field-field-logo"],
.view-id-homepage_partners .views-row [class*="views-field-field-logo"],
[class*="block-views-block"][class*="partner"] .views-row [class*="views-field-field-logo"],
.view-homepage-partners .views-row .views-field-field-partner-logo,
.view-id-homepage_partners .views-row .views-field-field-partner-logo,
.view-homepage-partners .views-row .views-field-field-image,
.view-id-homepage_partners .views-row .views-field-field-image,
[class*="block-views-block"][class*="partner"] .views-row .views-field-field-partner-logo,
[class*="block-views-block"][class*="partner"] .views-row .views-field-field-image {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  min-height: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.view-homepage-partners .views-row img,
.view-id-homepage_partners .views-row img,
[class*="block-views-block"][class*="partner"] .views-row img {
  display: block !important;
  max-height: 56px !important;
  max-width: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  .view-homepage-partners .view-content,
  .view-id-homepage_partners .view-content,
  [class*="block-views-block"][class*="partner"] .view-content {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .view-homepage-partners .views-row,
  .view-id-homepage_partners .views-row,
  [class*="block-views-block"][class*="partner"] .views-row {
    min-height: 100px !important;
    padding: 0.9rem 0.6rem !important;
  }

  .view-homepage-partners .views-row img,
  .view-id-homepage_partners .views-row img,
  [class*="block-views-block"][class*="partner"] .views-row img {
    max-height: 44px !important;
  }
}


/* ============================================
   CURRENT-EDITION LANDING — /csaw-26 (or whatever the editor names it)
   Body class .path-csaw-26 is what Drupal emits for URL alias /csaw-26;
   if the alias changes year-to-year (e.g. /csaw-27), add a sibling
   selector here or rename in one place. This block keeps styling
   intentionally minimal — the goal is "this is where speakers /
   workshops / schedule live for the current year". The editor builds
   the page inside CKEditor; no custom fields needed.
   ============================================ */

[class*="path-csaw-2"] .layout-content,
[class*="path-csaw-2"] main[role="main"] .node--type-page,
[class*="path-csaw-2"] main[role="main"] article {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 1rem;
}

[class*="path-csaw-2"] h1.page-title,
[class*="path-csaw-2"] .block-page-title-block h1,
[class*="path-csaw-2"] .node__title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #1a8088;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 0 2rem;
}

/* Body H2 → section headers (Speakers, Workshops, Schedule, etc.) */
[class*="path-csaw-2"] .field--name-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.75vw, 2rem);
  font-weight: 700;
  color: var(--nyu);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(87, 6, 140, 0.15);
}

[class*="path-csaw-2"] .field--name-body p,
[class*="path-csaw-2"] .field--name-body li {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
}

[class*="path-csaw-2"] .field--name-body a {
  color: #1a8088;
  text-decoration: underline;
  text-decoration-color: rgba(26, 128, 136, 0.4);
  text-underline-offset: 3px;
}

[class*="path-csaw-2"] .field--name-body a:hover {
  color: var(--nyu);
  text-decoration-color: var(--nyu);
}


/* ============================================
   REGIONAL PARTNERS BLOCK
   Homepage View `regional_partners` — lists Regions taxonomy terms as
   cards (term name overlay + host university + region logo). Follows
   the same visual pattern as Partners / Previous Sponsors because the
   view machine name contains "partner" and the block wrapper class
   `block-views-blockregional-partners-block-1` matches the wildcards
   `[class*="block-views-block"][class*="partner"]` and
   `[class*="views-field-field-logo"]` — so 90% of the styling is
   inherited automatically.

   Extras below make each card clearly clickable (JS wraps the logo
   and the name overlay in an <a href="/agenda#<slug>"> — see
   csaw-theme.js "Regional Partners homepage block → /agenda").
   ============================================ */

.view-id-regional_partners .views-row {
  cursor: pointer;
}

/* When the logo (or name overlay) has been wrapped in a link, keep
   the link's default color / decoration inherited so we don't turn
   the card into blue-underlined chrome. */
.view-id-regional_partners .views-row a {
  color: inherit;
  text-decoration: none;
}

/* Slightly stronger hover affordance than the base partner card — a
   thin teal outer glow signals interactivity beyond just the border
   colour change. */
.view-id-regional_partners .views-row:hover {
  border-color: rgba(26, 128, 136, 0.5) !important;
  box-shadow: 0 4px 20px rgba(26, 128, 136, 0.12);
}

/* Strip the white front-hero panel so the cards sit directly on the
   dark band, exactly like the Partners grid. Without this the
   `.views-element-container` wrapper keeps its white background + 64px
   padding, boxing the grid inside a white panel that Partners doesn't
   have. Mirror of the `homepage_partners` override further up. */
.front-hero .views-element-container:has(.view-id-regional_partners),
.front-hero .views-element-container:has(.view-regional-partners) {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  margin-top: 3rem !important;
  padding: 0 !important;
}

/* Match the Partners grid exactly: logo-only clean white cards.
   This view is taxonomy-based, so its label fields are
   `views-field-name` (region) and `views-field-field-host-university`
   — NOT `views-field-title` — so the Partners hide-list further up
   doesn't catch them, and they were rendering as static text above
   each logo. Hide them here. Each card stays clickable: the logo keeps
   its own <a href="/agenda#<slug>"> wrapper (see csaw-theme.js
   "Regional Partners homepage block → /agenda"), so hiding the name
   text does NOT remove the link. */
.view-id-regional_partners .views-row .views-field-name,
.view-id-regional_partners .views-row .views-field-field-host-university {
  display: none !important;
}

/* Cap logos to the same height as the Partners grid (56px). Required
   because this block sits inside `.front-hero`, whose
   `.front-hero .views-element-container:has(img) .views-row img` rule
   sets `max-height: 75%` and outranks the 56px partner cap (it's more
   specific). That mismatch is what made the tall Universidad
   Iberoamericana logo balloon to ~130px while IIT Kanpur shrank to
   ~25px. The !important here beats the un-!important 75% rule. */
.view-id-regional_partners .views-row img {
  max-height: 56px !important;
  max-width: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

@media (max-width: 640px) {
  .view-id-regional_partners .views-row img {
    max-height: 44px !important;
  }
}


/* ============================================
   GLOBAL REGIONS GRID
   Driven by a Drupal View — machine name `global_regions` — that lists
   nodes of a content type `region` (admin-created, see admin/SETUP.md).
   The view block can sit anywhere; styling auto-applies wherever it
   renders (homepage, /global, sidebar, etc.).

   Expected per-row markup (Views' default for Fields display):
     .views-row
       .views-field-title              → region name
       .views-field-field-host-university → host university
       .views-field-field-region-logo  → image (and link wrapper if set)

   Field machine names follow the documented admin setup. If editors
   pick different names, the selectors below need a one-line update
   per field.
   ============================================ */

.view-global-regions,
.view-id-global_regions {
  width: 100%;
  margin: 3rem 0;
}

.view-global-regions .view-header,
.view-id-global_regions .view-header {
  font-family: 'Galmuri11', var(--ff-display), monospace;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #57068c;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(87, 6, 140, 0.15);
}

.view-global-regions .view-content,
.view-id-global_regions .view-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 2.5rem 2rem;
  background: transparent !important;
  border: none !important;
  width: 100%;
}

/* Card — name, university, logo stacked. */
.view-global-regions .views-row,
.view-id-global_regions .views-row {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
}

/* Region name — teal, uppercase, large, mirrors the legacy layout
   shown in the reference screenshot. */
.view-global-regions .views-row .views-field-title,
.view-id-global_regions .views-row .views-field-title,
.view-global-regions .views-row .views-field-title .field-content,
.view-id-global_regions .views-row .views-field-title .field-content {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #1a8088;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}

.view-global-regions .views-row .views-field-title a,
.view-id-global_regions .views-row .views-field-title a {
  color: inherit;
  text-decoration: none;
}

.view-global-regions .views-row .views-field-title a:hover,
.view-id-global_regions .views-row .views-field-title a:hover {
  color: var(--nyu);
}

/* Host university name. */
.view-global-regions .views-row .views-field-field-host-university,
.view-id-global_regions .views-row .views-field-field-host-university {
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin: 0.25rem 0 0.75rem;
}

/* Logo. Constrain to a sane size so a tall logo doesn't make a card
   twice the height of its neighbours. Native aspect ratio preserved. */
.view-global-regions .views-row .views-field-field-region-logo,
.view-id-global_regions .views-row .views-field-field-region-logo {
  margin-top: 0.5rem;
  width: 100%;
}

.view-global-regions .views-row .views-field-field-region-logo img,
.view-id-global_regions .views-row .views-field-field-region-logo img {
  display: block;
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* If the View is placed as a homepage block, the front-hero scoping
   above forces white panels with heavy padding. Neutralise those so
   the regions section sits flush in the dark hero band — same approach
   used elsewhere when overriding `.front-hero .views-element-container`. */
.front-hero .views-element-container:has(.view-id-global_regions) {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  margin-top: 3rem !important;
  padding: 0 !important;
}

.front-hero .view-global-regions .view-header,
.front-hero .view-id-global_regions .view-header {
  color: #c4a8d8 !important;
  border-bottom-color: rgba(196, 168, 216, 0.25) !important;
}

.front-hero .view-global-regions .views-row .views-field-field-host-university,
.front-hero .view-id-global_regions .views-row .views-field-field-host-university {
  color: #c4a8d8 !important;
}

@media (max-width: 768px) {
  .view-global-regions .view-content,
  .view-id-global_regions .view-content {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 2rem 1.25rem;
  }

  .view-global-regions .views-row .views-field-title,
  .view-id-global_regions .views-row .views-field-title {
    font-size: 1.5rem;
  }
}


/* ============================================
   AGENDA PAGE — /agenda
   A View `agenda` displays competition_base nodes grouped by region.
   The page renders one section per region:

     <h3>EUROPE</h3>          ← group title, rendered by Views grouping
     [competition card]       ← .views-row
     [competition card]
     [competition card]

     <h3>INDIA</h3>
     ...

   Each <h3> wraps an empty anchor <span id="europe"> injected by
   csaw_theme_preprocess_views_view_grouping() in csaw_theme.theme, so
   the Agenda menu dropdown can link to /agenda#europe, /agenda#india,
   /agenda#us-canada, etc. The slug is derived from the region's
   display title (lowercased, non-alphanumerics → dashes).

   If you place the `global_regions` view block ABOVE this view on the
   same page, it acts as a visual TOC — region cards (name + university
   + logo) up top, then per-region competition lists below.
   ============================================ */

.path-agenda .layout-content,
.path-agenda main[role="main"] .view-id-agenda {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 1rem;
}

.path-agenda h1.page-title,
.path-agenda .block-page-title-block h1 {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #1a8088;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 0 2.5rem;
}

/* Anchor span — empty, just carries the id. scroll-margin-top
   offsets the fixed site header so the section title isn't hidden
   when the browser jumps to the anchor. */
.view-id-agenda .agenda-region-anchor {
  display: block;
  position: relative;
  height: 0;
  width: 0;
  scroll-margin-top: 110px;
}

/* Region grouping wrapper — h3 that Drupal Views emits around the
   banner. When the banner div is present inside, the h3 is
   transparent — the banner provides the visual. When the banner
   div is missing (PHP hook didn't fire — file not deployed, cache
   stale, etc.), the h3 falls back to a big teal heading so the
   page still looks acceptable.
   `grid-column: 1 / -1` makes it span every column when its parent
   is a grid (the common case here — .view-content holds h3 + rows
   as siblings). */
.view-id-agenda h3 {
  display: block !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
  margin: 3.5rem 0 1.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

/* Fallback styling for the bare h3 when no banner is inside. */
.view-id-agenda h3:not(:has(.agenda-region-banner)) {
  font-family: var(--ff-display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #1a8088 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px solid rgba(26, 128, 136, 0.2) !important;
}

/* When the banner IS inside, strip the h3 so the banner is the only
   visual layer. */
.view-id-agenda h3:has(.agenda-region-banner) {
  font: inherit !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.view-id-agenda h3:first-child,
.view-id-agenda > div > h3:first-of-type,
.view-id-agenda .view-content > h3:first-of-type {
  margin-top: 0.5rem !important;
}

/* Region banner — the visual heading inside the h3. Built by
   _csaw_theme_agenda_region_banner() in csaw_theme.theme. Left side:
   region name (huge teal uppercase) stacked over university name
   (muted neutral). Right side: university logo, right-anchored. */
.agenda-region-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 1.75rem;
  background: rgba(26, 128, 136, 0.04);
  border-top: 1px solid rgba(26, 128, 136, 0.2);
  border-bottom: 1px solid rgba(26, 128, 136, 0.2);
  scroll-margin-top: 110px;
}

.agenda-region-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}

.agenda-region-banner__name {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #1a8088;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* When the banner wraps an <a> (term has field_region_url set), it's
   clickable. Strip default link chrome, add an external-link arrow
   next to the region name, and darken the background slightly on
   hover so the affordance is obvious. */
a.agenda-region-banner--linked,
a.agenda-region-banner--linked:hover,
a.agenda-region-banner--linked:focus {
  text-decoration: none;
  color: inherit;
}

.agenda-region-banner--linked .agenda-region-banner__name::after {
  content: '\2197';                       /* ↗ U+2197 North-East Arrow */
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.65em;
  font-weight: 600;
  color: #1a8088;
  opacity: 0.45;
  vertical-align: 0.15em;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.agenda-region-banner--linked:hover {
  background: rgba(26, 128, 136, 0.09);
  border-top-color: rgba(26, 128, 136, 0.35);
  border-bottom-color: rgba(26, 128, 136, 0.35);
}

.agenda-region-banner--linked:hover .agenda-region-banner__name::after,
.agenda-region-banner--linked:focus-visible .agenda-region-banner__name::after {
  opacity: 1;
  transform: translate(2px, -2px);
}

.agenda-region-banner--linked:focus-visible {
  outline: 2px solid #1a8088;
  outline-offset: 2px;
}

.agenda-region-banner__university {
  font-family: var(--ff-body);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 500;
  color: var(--text-mid);
  line-height: 1.4;
}

.agenda-region-banner__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 240px;
}

.agenda-region-banner__logo img {
  display: block;
  max-width: 240px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: right center;
}

/* Mobile — stack the banner so neither the text nor the logo gets
   squeezed. Logo left-aligns so it doesn't look orphaned. */
@media (max-width: 640px) {
  .agenda-region-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.1rem;
  }

  .agenda-region-banner__logo {
    align-self: flex-start;
    justify-content: flex-start;
    max-width: 100%;
  }

  .agenda-region-banner__logo img {
    object-position: left center;
    max-height: 64px;
  }
}

.view-id-agenda h3:first-child,
.view-id-agenda > div > h3:first-of-type,
.view-id-agenda .view-content > h3:first-of-type {
  margin-top: 0.5rem !important;
}

/* Block ANY inherited grid/flex on the outer wrappers — the actual
   cards are grouped by a wrapper Drupal picks at render time, and
   the global `.view .view-content { grid-template-columns: ... }`
   rule elsewhere in this stylesheet otherwise sucks the h3 into a
   single grid cell next to the cards. */
.view-id-agenda,
.view-id-agenda > div,
.view-id-agenda .view-content,
.view-id-agenda .views-view-grouping,
.view-id-agenda .views-view-grouping-header {
  display: block !important;
  width: 100% !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: none !important;
}

/* Find the actual row container (could be .views-view-grouping-content,
   a bare div under .views-view-grouping, a <ul>, etc.) and turn IT
   into the card grid via :has() — modern CSS, widely supported. */
.view-id-agenda div:has(> .views-row),
.view-id-agenda ul:has(> li > .views-row),
.view-id-agenda .views-view-grouping-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 1.25rem !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  list-style: none;
}

/* If rows are wrapped in <li> (Views' default list grouping), strip
   the <li> chrome so the card itself is the grid item. */
.view-id-agenda li:has(> .views-row) {
  display: contents;
  list-style: none;
}

/* Competition card. */
.view-id-agenda .views-row {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px;
  padding: 0.85rem 1rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.85rem;
  min-height: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  /* Override any text-align inherited from the global views rules. */
  text-align: left !important;
}

.view-id-agenda .views-row:hover {
  border-color: var(--nyu);
  box-shadow: 0 4px 16px rgba(87, 6, 140, 0.08);
}

/* Logo — sized as a 56px square thumbnail on the left of each card. */
.view-id-agenda .views-row .views-field-field-logo-cb,
.view-id-agenda .views-row .views-field-field-logo {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-id-agenda .views-row .views-field-field-logo-cb img,
.view-id-agenda .views-row .views-field-field-logo img {
  display: block;
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain;
  border-radius: 2px;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strip any padding Drupal's field formatter may have wrapped around
   the image (e.g. .field__item, image-style wrapper). */
.view-id-agenda .views-row .views-field-field-logo-cb,
.view-id-agenda .views-row .views-field-field-logo,
.view-id-agenda .views-row .views-field-field-logo-cb .field__item,
.view-id-agenda .views-row .views-field-field-logo .field__item,
.view-id-agenda .views-row .views-field-field-logo-cb time,
.view-id-agenda .views-row .views-field-field-logo .field__items {
  padding: 0 !important;
  margin: 0 !important;
}

/* Wrap title + short_name in a column to the right of the logo. */
.view-id-agenda .views-row .views-field-title,
.view-id-agenda .views-row .views-field-field-short-name,
.view-id-agenda .views-row .views-field-field-tagline {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Competition name — moderate size, no shouting. */
.view-id-agenda .views-row .views-field-title {
  font-family: var(--ff-display);
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  text-transform: none !important;
  letter-spacing: 0;
}

.view-id-agenda .views-row .views-field-title a {
  color: inherit;
  text-decoration: none;
}

.view-id-agenda .views-row .views-field-title a:hover {
  color: var(--nyu);
}

/* Short name / tagline — small muted line below title. Sits under the
   title in the same flex column since both have flex:1 auto width. */
.view-id-agenda .views-row .views-field-field-short-name,
.view-id-agenda .views-row .views-field-field-tagline {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  color: var(--text-mid);
  margin-top: 0.15rem !important;
  width: 100%;
}

/* Workaround: if there's both a title and a short_name, they live as
   sibling flex children of .views-row alongside the logo. Push them
   into their own column with a wrapping div via grid-area or just
   absolute order. Simpler: make .views-row a CSS grid. */
.view-id-agenda .views-row {
  display: grid !important;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  align-items: center;
}

.view-id-agenda .views-row .views-field-field-logo-cb,
.view-id-agenda .views-row .views-field-field-logo {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.view-id-agenda .views-row .views-field-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.view-id-agenda .views-row .views-field-field-short-name,
.view-id-agenda .views-row .views-field-field-tagline {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.view-id-agenda .views-row .field__label {
  display: none !important;
}

@media (max-width: 768px) {
  .view-id-agenda div:has(> .views-row),
  .view-id-agenda .views-view-grouping-content {
    grid-template-columns: 1fr !important;
  }

  .view-id-agenda h3 {
    font-size: 1.75rem !important;
  }
}


/* ============================================
   SPEAKERS — /speakers
   A schedule grid of Speaker Event nodes (talks), rendered as accordion
   cards by node--speaker.html.twig. The View outputs each node as a
   rendered entity, so the styling keys off the .speaker-card BEM classes
   (bundle-agnostic) plus .view-id-speakers for the grid container.
   Cards: talk title + speaker(s) + org/time/location meta always visible;
   abstract + bio(s) reveal on .is-open (toggled by csaw-theme.js). No
   photos in the data model — this is intentionally text-forward.
   ============================================ */

/* Grid container — same rhythm as the partners/press listings. */
.path-speakers .view-id-speakers .view-content,
.view-id-speakers .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 3rem;
  /* Cards must size to their own content. Without this, grid's default
     `align-items: stretch` forces every card in a row to the height of the
     TALLEST one — so opening one accordion card blew its whole row out to
     ~900px and left its neighbours as giant, mostly-empty boxes. */
  align-items: start;
  /* Override the global .view-content lavender panel — cards sit directly
     on the page background as independent boxes (no covering container). */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Year group heading, injected into the grid by csaw-theme.js. Spans all
   columns so the cards below it flow underneath. Mirrors the press-archive /
   agenda teal heading treatment. */
.speakers-year-heading {
  grid-column: 1 / -1;
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #1a8088;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 1.75rem 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(26, 128, 136, 0.25);
}
.speakers-year-heading:first-child { margin-top: 0; }

/* Reset any global .views-row flex/background rules that would fight the grid. */
.view-id-speakers .views-row {
  display: block !important;
  width: 100% !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.speaker-card {
  background: #ffffff;
  border: 1px solid var(--border-soft, rgba(87, 6, 140, 0.12));
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Force left alignment: a global/container rule centers headings and text on
   this page, which left the title + abstract centered while the meta was
   left-aligned. Keep the whole card left-aligned for consistency. */
.speaker-card,
.speaker-card__head,
.speaker-card__title,
.speaker-card__detail,
.speaker-card__abstract,
.speaker-card__bio {
  text-align: left !important;
}
.speaker-card:hover {
  border-color: rgba(87, 6, 140, 0.3);
  box-shadow: 0 6px 20px rgba(87, 6, 140, 0.07);
}
.speaker-card.is-open {
  border-color: rgba(26, 128, 136, 0.45);
  box-shadow: 0 8px 26px rgba(26, 128, 136, 0.12);
}

/* Head is a full-width button — reset native button chrome. */
.speaker-card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "lead chevron"
    "meta chevron";
  gap: 0.35rem 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.15rem 1.25rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.speaker-card__lead { grid-area: lead; }
.speaker-card__meta { grid-area: meta; }
.speaker-card__chevron { grid-area: chevron; align-self: center; }

.speaker-card__title {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

.speaker-card__people {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}
.speaker-card__name { font-weight: 600; }
.speaker-card__role { color: var(--text-muted, #6b5b7e); }
.speaker-card__role::before { content: "— "; }
.speaker-card__sep { margin: 0 0.4rem; color: var(--text-muted, #6b5b7e); }

.speaker-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-family: 'Galmuri11', var(--ff-display), monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #6b5b7e);
}
.speaker-card__time { color: #1a8088; }

/* The Speaker Event fields still render their own Drupal labels
   ("Organization", "Location", "Abstract") depending on the teaser
   display config. The card supplies its own structure, so suppress the
   field labels and collapse the field wrappers to inline inside the meta
   row. Scoped to .speaker-card so it can't leak to other content. */
.speaker-card .field__label { display: none !important; }
.speaker-card__meta .field,
.speaker-card__meta .field__item,
.speaker-card__org .field,
.speaker-card__loc .field {
  display: inline !important;
  margin: 0 !important;
}
.speaker-card__abstract .field,
.speaker-card__abstract .field__item { margin: 0 !important; }

/* Chevron rotates when open. */
.speaker-card__chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid #1a8088;
  border-bottom: 2px solid #1a8088;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.speaker-card.is-open .speaker-card__chevron {
  transform: rotate(-135deg);
}

/* Revealed detail. The [hidden] attribute is toggled by JS; this is the
   styling for the shown state. */
.speaker-card__detail {
  padding: 0 1.25rem 1.35rem;
  border-top: 1px solid var(--border-soft, rgba(87, 6, 140, 0.1));
  margin-top: -0.15rem;
  padding-top: 1rem;
}
.speaker-card__detail[hidden] { display: none; }

.speaker-card__abstract {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.speaker-card__bio {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted, #4a2d6b);
}
.speaker-card__bio-name {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.15rem;
}

@media (max-width: 640px) {
  .view-id-speakers .view-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .speaker-card__head { padding: 1rem; }
  .speaker-card__detail { padding-left: 1rem; padding-right: 1rem; }
}