@import url('./fonts.css');

:root {
  --text-color: #013950;
  --bg-color: #f6deb8;
  --bg-color2: #e7e9f6;
  --inverted-text: #ffffff;
  --accent-color: #ffffff;
  --accent-color2: #013950;
  --footer-color: #013950;
  --nav-bg-color: #013950;
  --nav-text-color: #ffffff;
  --default-wght: 400;
  --dark-text: var(--text-color);
  --light-text: #ffffff;

  /* Text box color variables */
  --box-bg: #f8e6cb;
  --box-text-color: #003b4f;

  --content-width: 1600px;
  --day-header-height: 2rem;

  /* Decorative background pattern */
  --arch-scale: 1;
  --row-step: 50%;
  --pattern-opacity: 0.1;
  --footer-overlap: 14vw;
}

@media (max-width: 768px) {
  :root {
    --day-header-height: 2rem;
  }
}

@media (max-width: 700px) {
  :root {
    --arch-scale: 0.6;
  }
}

@media (max-width: 900px) {
  :root {
    --footer-overlap: 10vw;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0b0e14;
    --text-color: #f2f4f7;
    --inverted-text: var(--bg-color);
    --accent-color: #ffc600;
    --accent-color2: #5c7cfa;
    --dark-accent-color2: #4c6ef5;
    --footer-color: #0b0e14;
    --default-wght: 460;
    --dark-text: #1a1f2b;
    --light-text: #f2f4f7;
    --bg-color2: color-mix(in srgb, var(--accent-color2) 20%, var(--bg-color));
  }
}

html {
  font-size: 18px;
  background-color: var(--bg-color);
  overflow-x: hidden;
}

body {
  margin: 0;
  position: relative;
  background-color: transparent;
  color: var(--text-color);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-optical-sizing: auto;
  /* auto (not reset.css's 100%) so the viewport scrolls, not body */
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

#page-wrapper,
.page-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
}

main {
  flex: 1;
}

/* All sections transparent so background pattern shows continuously across the full page */
main,
.title-row-container,
.title-row,
.event-info-container,
.panorama-section,
.description-footer-section,
.description-box-container,
#footer-container,
.content-block-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Decorative background pattern ── */
#bg-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bg-color);
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  animation: none;
  transition: none;
}

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

  #bg-pattern {
    animation: none !important;
    transition: none !important;
  }
}

nav {
  --menu-height: 4.5rem;
  --menu-padding: 2rem;

  padding: 0 max(2rem, 4vw);
  min-height: var(--menu-height);

  display: grid;
  align-items: center;
  grid-template-columns: auto auto auto;
  position: relative;
  z-index: 50;

  --inner-pad: 1ch;
  box-shadow: 0 4px 24px 0 rgba(1, 57, 80, 0.35);
  background-color: var(--nav-bg-color);
}

@media (prefers-color-scheme: dark) {
  nav {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.4);
    background-color: #1a1f2b;
  }
}

/* Footer nav is plain text on the footer background, not a menu bar */
footer nav {
  background-color: transparent;
  box-shadow: none;
}

nav > a:first-child {
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  text-decoration: none;
  height: var(--menu-height);
  z-index: 20;
}

#nav-logo {
  display: block;
  position: relative;
  height: var(--menu-height);
  width: 21rem;
}

#nav-logo img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 21rem;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 6px 12px rgba(1, 57, 80, 0.25));
}

@media screen and (max-width: 1280px) {
  nav > a:first-child,
  #nav-logo,
  #nav-logo img {
    width: 18rem;
  }
}

@media screen and (max-width: 1024px) {
  nav > a:first-child,
  #nav-logo,
  #nav-logo img {
    width: 16rem;
  }
}

@media only screen and (max-width: 768px) {
  nav > a:first-child,
  #nav-logo,
  #nav-logo img {
    width: 15rem;
    max-width: calc(100vw - 4.5rem);
  }
}

@media only screen and (max-width: 1200px) {
  nav {
    --menu-height: 3.75rem;
    --menu-padding: 1rem;
    padding: 0 clamp(16px, 4vw, 24px);
  }
}

nav ul.main-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  gap: clamp(0.75rem, 2vw, 2rem);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  padding: 0;
  margin: 0;
  list-style: none;
  grid-column: 3;
  justify-self: end;
  --link-color: var(--accent-color);
  position: relative;
}

nav ul.secondary-menu {
  list-style: none;

  --inner-pad: 0.75rem;

  display: flex;
  flex-direction: column;

  width: max-content;
  min-width: 220px;

  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  padding: 0.5rem;

  background-color: #012433;

  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);

  overflow: hidden;

  z-index: 100;
}

@media (prefers-color-scheme: dark) {
  nav ul.secondary-menu {
    background-color: #012433;
    border-color: rgba(255, 255, 255, 0.25);
  }
}

nav ul.secondary-menu li:hover a {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

nav ul.secondary-menu li a,
nav ul.main-menu li a {
  font-family: 'Lexend', sans-serif;
  text-decoration: none;
  transition: all 0.2s ease;
}

nav ul.secondary-menu li a:not(.no-root-link),
nav ul.main-menu li a:not(.no-root-link),
nav ul.secondary-menu li a.no-root-link,
nav ul.main-menu li a.no-root-link {
  text-decoration: none;
}

nav ul.main-menu > li > a {
  white-space: nowrap;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  padding: 0.4rem 0.5rem;
  color: var(--nav-text-color);
  text-decoration: none;
}

@media screen and (max-width: 1280px) {
  nav ul.main-menu > li > a {
    font-size: 0.9rem;
    padding-inline: calc(var(--inner-pad) * 0.8);
  }
  .main-menu .submenu-toggle {
    width: 1rem;
  }
}

@media screen and (max-width: 1024px) {
  nav ul.main-menu > li > a {
    font-size: 0.85rem;
    padding-inline: calc(var(--inner-pad) * 0.7);
  }
  .main-menu .submenu-toggle {
    width: 0.8rem;
  }
}

@media screen and (max-width: 900px) {
  nav ul.main-menu > li > a {
    font-size: 0.8rem;
    padding-inline: calc(var(--inner-pad) * 0.6);
  }
}

nav ul.secondary-menu li a {
  color: #ffffff;
  font-size: 0.85rem;
  --inner-pad: 1.5ch;
  padding: calc(var(--inner-pad) * 2 / 3) var(--inner-pad);
  font-weight: 450;
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  display: block;
  box-sizing: border-box;
}

nav ul.secondary-menu li a:hover,
nav ul.secondary-menu li:hover > a {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  nav ul.secondary-menu li a {
    color: #f2f4f7;
  }
}

nav ul.main-menu > li {
  border-radius: 0.35rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

nav ul.main-menu > li.selected-link {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
@media screen and (max-width: 768px) {
  nav ul.main-menu > li.selected-link {
    padding: 0.5rem 0.8rem;
  }
}

nav ul.main-menu > li.selected-link > a {
  text-decoration: none;
  color: #ffffff;
}

@media only screen and (min-width: 768px) {
  nav ul.main-menu > li:hover,
  nav ul.main-menu > li.open {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: all 0.15s ease;
  }

  nav ul.main-menu > li:hover .submenu-toggle > span:before,
  nav ul.main-menu > li.open .submenu-toggle > span:before {
    border-color: #ffffff;
  }

  nav ul.main-menu > li.selected-link .submenu-toggle > span:before {
    border-color: #ffffff;
  }

  nav ul.main-menu > li:hover > a,
  nav ul.main-menu > li.open > a {
    text-decoration: none;
    color: #ffffff;
  }

  nav ul.main-menu > li.selected-link > a {
    text-decoration: none;
    color: #ffffff;
  }
}

@media (prefers-color-scheme: dark) {
  nav ul.main-menu > li:hover > a,
  nav ul.main-menu > li.open > a {
    color: #ffffff !important;
  }

  nav ul.main-menu > li.selected-link > a {
    color: #ffffff !important;
  }
}

nav ul.main-menu li,
nav ul.secondary-menu li {
  list-style: none;
  transition: border-color 0.75s ease 0.5s;
  display: flex;
  align-items: stretch;
}

nav ul.main-menu > li {
  border-radius: 0.2rem;
  border: 1px solid transparent;
}

nav ul.main-menu > li.mobile-only {
  display: none;
}

@media only screen and (max-width: 768px) {
  nav ul.main-menu > li.mobile-only {
    display: block;
  }
}

/* Menu hover thing */

@media only screen and (min-width: 1201px) {
  ul.main-menu li ul {
    visibility: hidden;
    opacity: 0;
  }
}

ul.main-menu li ul {
  transition:
    opacity 0.08s ease,
    visibility 0.08s ease;
}
ul.main-menu li:hover ul,
ul.main-menu li.open ul {
  transition: all 0s;
  visibility: visible;
  opacity: 1;
}

/* Unavailable (to be announced) items in header and footer menus */
nav ul.main-menu > li.is-unavailable > a,
nav ul.secondary-menu li.is-unavailable > a,
.footer-menu li.is-unavailable > a {
  color: color-mix(in srgb, var(--light-text), transparent 40%) !important;
  cursor: not-allowed;
}

nav ul.main-menu > li.is-unavailable:hover,
nav ul.secondary-menu li.is-unavailable > a:hover,
nav ul.secondary-menu li.is-unavailable:hover > a {
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none;
}

.visually-hidden {
  visibility: hidden;
  position: absolute;
}

.submenu-toggle {
  width: 1.5rem;
  background-color: transparent;
  border: none;
}

.submenu-toggle > span {
  display: flex; /* centers arrow */
}

.submenu-toggle > span:before {
  content: '';
  border: solid var(--nav-text-color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: translateY(-2px) rotate(45deg);
}

#menu-toggle {
  display: none;
  background-color: var(--nav-bg-color);
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
  justify-self: end;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  min-width: 44px;
  height: 44px;
  width: 44px;
  padding: 0;

  grid-column: 2;

  position: fixed;
  right: 1.5rem;
  top: 1rem;
  z-index: 100;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff, transparent 70%);
}

#menu-toggle:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.hamburger {
  width: 2rem;
  height: 0.25rem;
  background-color: #ffffff;
  position: relative;
  display: flex;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

.hamburger:before,
.hamburger:after {
  content: '';
  width: 2rem;
  height: 0.25rem;
  background-color: #ffffff;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.hamburger:before {
  transform: translateY(-0.6rem);
}

.hamburger:after {
  transform: translateY(0.6rem);
}

@media only screen and (min-width: 1201px) {
  #menu-container {
    display: block;
    position: static;
    grid-column: 3;
    justify-self: flex-end;
  }

  #menu-toggle {
    display: none;
  }

  .has-submenu {
    padding-right: 0.4rem;
    position: relative;
  }
}

@media only screen and (max-width: 1200px) {
  #menu-toggle {
    display: flex;
    grid-column: 3;
  }

  #menu-container {
    display: none; /* Hide menu by default */
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: scroll;
    z-index: 1;
    background-color: color-mix(in srgb, var(--nav-bg-color), transparent 5%);

    backdrop-filter: blur(5px);
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  #menu-container.open {
    display: block; /* Show menu when toggled */
    top: 0;
    padding-right: 6rem;
    z-index: 99;
  }

  #menu-container.open:before {
    content: '';
    position: fixed;
    right: 5rem;
    top: 1rem;
    bottom: 1rem;
    border-right: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
  }

  /* Match desktop: dark tinted dropdown panel with white text */
  nav ul.secondary-menu {
    background-color: #012433;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    position: static;
    border-radius: 0.35rem;
    padding: 0.5rem;
    margin-top: 0.35rem;
  }

  /* Selected or open parent */
  nav ul.main-menu > li.open,
  nav ul.main-menu > li.selected-link {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  nav ul.main-menu > li.open > a,
  nav ul.main-menu > li.selected-link > a {
    color: #ffffff;
    text-decoration: none;
  }

  /* Secondary submenu links: white text with hover box */
  nav ul.secondary-menu li a {
    color: #ffffff;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    display: block;
  }

  nav ul.secondary-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    nav ul.secondary-menu {
      background-color: #012433;
      border-color: rgba(255, 255, 255, 0.25);
    }

    nav ul.main-menu > li.open > a,
    nav ul.main-menu > li.selected-link > a {
      color: #ffffff;
    }

    nav ul.secondary-menu li a {
      color: #ffffff;
    }

    nav ul.secondary-menu li a:hover {
      background-color: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
    }
  }

  .has-submenu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .submenu-toggle {
    display: none;
  }

  #menu-toggle.active {
    z-index: 101;
  }

  #menu-toggle.active .hamburger {
    background-color: transparent;
  }

  #menu-toggle.active .hamburger:before {
    transform: rotate(45deg);
  }
  #menu-toggle.active .hamburger:after {
    transform: rotate(-45deg);
  }

  nav ul.main-menu {
    flex-direction: column;
    gap: 1rem;
  }

  /* position/box-shadow for secondary-menu set above; keep dropdown shadow on mobile */

  nav ul.main-menu > li > a {
    padding: 0;
  }

  nav ul.secondary-menu li a {
    padding-left: 1.25rem;
  }

  /* Sub-menus are always expanded in the tablet/phone menu, marked with a '>' prefix */
  li.has-submenu > a:before {
    content: '>';
    display: inline-block;
    padding-right: 0.5ch;
  }

  /* Tap-to-open version, kept for reference (also uncomment the matching code in menu.js):

  Sub-menus start collapsed; tapping the section toggles .open (menu.js)
  nav ul.main-menu > li.has-submenu > ul.secondary-menu {
    display: none;
  }

  nav ul.main-menu > li.has-submenu.open > ul.secondary-menu {
    display: flex;
  }

  Chevron after the section name: points down when closed, up when open
  li.has-submenu > a:after {
    content: '';
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.6ch;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.2em) rotate(45deg);
    transition: transform 0.15s ease;
  }

  li.has-submenu.open > a:after {
    transform: translateY(0.05em) rotate(-135deg);
  }
  */

  nav li,
  nav li a,
  .secondary-menu {
    width: 100%;
  }
}

body.menu-open {
  overscroll-behavior: contain;
}

.content-block-container {
  padding: 0 max(2rem, 4vw);
  min-height: 40vh;
  background-image: url('imgs/bg-tile.svg');
  background-repeat: repeat;
  background-size: 160px 160px;
}

@media (prefers-color-scheme: dark) {
  .content-block-container {
    background-image: none;
    background-color: var(--bg-color);
  }

  footer .content-block-container {
    background-color: transparent;
  }
}

/* Footer inner container: transparent so footer dark bg (#013950) shows through */
footer .content-block-container {
  background-image: none;
  background-color: transparent;
  min-height: unset;
}

/* Ensure no white-box backgrounds on footer links */
footer a,
footer a:visited,
footer a:hover {
  background-color: transparent;
}

@media only screen and (max-width: 768px) {
  .content-block-container {
    padding: 0 1rem;
  }
}

main.content-block-container {
  margin-top: 3.5rem;
}

@media screen and (max-width: 768px) {
  main.content-block-container {
    margin-top: 2rem;
  }
}

h1 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.9rem;
  color: var(--accent-color2);
  line-height: 1.5;
  margin-bottom: 2rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  h1 {
    color: #f2f4f7;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    margin-bottom: 1rem;
  }
}

.sub-menu {
  display: block;
  font-variant-caps: small-caps;
  text-transform: lowercase;
}

.small-caps {
  font-variant-caps: small-caps;
  text-transform: lowercase;
}

.event-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
  text-align: right;
}

.event-info-container .event-info,
h2.event-info,
.event-info {
  font-family: 'Lexend', sans-serif;
  color: var(--accent-color2);
  line-height: 1.3;
  font-size: 1.4rem !important;
  font-weight: 700;
  text-transform: none !important;
  text-align: right;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .event-info-container .event-info,
  h2.event-info,
  .event-info {
    color: #f2f4f7;
  }
}

#denver-img {
  width: 100%;
  aspect-ratio: 5/2;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.text-img,
.text-img * {
  border-radius: 0.5rem;
}

@media only screen and (max-width: 768px) {
  h1 {
    font-size: 1.4rem;
  }

  .event-info-container {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 1rem;
  }

  .event-info-container .event-info,
  h2.event-info,
  .event-info {
    text-align: left;
    margin-bottom: 0.5rem;
  }

  #denver-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

p {
  line-height: 1.6;
  font-weight: var(--default-wght);
  max-width: var(--contentWidth);
  background-color: transparent;
  padding: 1rem;
}

@media (prefers-color-scheme: dark) {
  p {
    background-color: transparent;
  }
}
.text-block a,
.styled-link,
.text-block a:visited,
.styled-link:visited {
  color: var(--accent-color2);
  text-decoration-color: var(--accent-color2);
  padding: 0 0.2ex;
  border-radius: 0.2ex;
  margin-right: -0.4ex;
  position: relative;
  left: -0.2ex;
}
.text-block a:hover,
.styled-link:hover {
  background-color: var(--accent-color2);
  color: var(--light-text);
  text-decoration: none;
}

a:has(> img):hover,
.text-block a:has(> img):hover {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

p + p {
  margin-top: 0;
}

ul + p {
  margin-top: 1.6em;
}

.grid-helper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;

  width: 100%;

  list-style: none;
  padding: 0;
}

.grid-helper.airy-grid {
  gap: 1rem 3rem;
}

@media only screen and (max-width: 768px) {
  .grid-helper {
    display: flex;
    flex-direction: column;
  }
}

.grid-helper .grid-item h2 {
  font-family: 'Lexend', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.grid-helper.colored-boxes > .grid-item,
.highlighted-block {
  background-color: #013950;
  border: none;
  border-radius: 1.25rem;

  --text-color: #ffffff;
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  .grid-helper.colored-boxes > .grid-item,
  .highlighted-block {
    background-color: #012a3a;
    border-color: #012a3a;
    --text-color: #f2f4f7;
  }
}

.highlighted-block {
  padding: 1.5rem 1.8rem;
  margin-bottom: 2.2rem;
  border-radius: 1.25rem;
  box-shadow: 0 6px 20px rgba(1, 57, 80, 0.12);
}

/* Announcement / Register block */
#announcement-block {
  position: relative;
  background-color: #013950;
  border-radius: 1.25rem;
  padding: 1.75rem 2rem 2.5rem 2rem;
  margin-bottom: 2.8rem;
}

#announcement-block h3 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

#announcement-block p {
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.2rem; /* was 0.6rem — tightened to prose-like spacing */
}

#announcement-block p:last-of-type {
  margin-bottom: 0;
}

/* Register now pill button overlapping the bottom border */
.register-pill-btn,
.highlighted-block a.register-pill-btn {
  position: absolute;
  right: 2rem;
  bottom: -1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  color: #013950 !important;
  border: 3.5px solid #013950;
  border-radius: 0.65rem;
  padding: 0.55rem 1.6rem;
  font-family: 'Lexend', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  z-index: 5;
}

.register-pill-btn:hover,
.highlighted-block a.register-pill-btn:hover {
  background-color: #f7dfbe;
  color: #013950 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.register-pill-btn:focus-visible {
  outline: 3px solid #013950;
  outline-offset: 3px;
}

/* Venue pill button under event location text */
.venue-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  color: #013950 !important;
  border: 3.5px solid #013950;
  border-radius: 0.65rem;
  padding: 0.65rem 1.6rem;
  font-family: 'Lexend', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.venue-pill-btn:hover {
  background-color: #f7dfbe;
  color: #013950 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.venue-pill-btn:focus-visible {
  outline: 3px solid #013950;
  outline-offset: 3px;
}

@media only screen and (max-width: 600px) {
  #announcement-block {
    padding-bottom: 3.2rem;
  }
  .register-pill-btn,
  .highlighted-block a.register-pill-btn {
    right: 1.25rem;
    bottom: -1.2rem;
    font-size: 0.95rem;
    padding: 0.45rem 1.25rem;
  }
  .venue-pill-btn {
    font-size: 1rem;
    padding: 0.55rem 1.3rem;
  }
}

@media (prefers-color-scheme: dark) {
  .register-pill-btn,
  .highlighted-block a.register-pill-btn,
  .venue-pill-btn {
    border-color: #5c7cfa;
    color: #f2f4f7 !important;
    background-color: var(--bg-color);
  }
  .register-pill-btn:hover,
  .highlighted-block a.register-pill-btn:hover,
  .venue-pill-btn:hover {
    background-color: rgba(92, 124, 250, 0.2);
    color: #f2f4f7 !important;
  }
}

/* Updates Card */
.updates-block {
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  padding: 1.6rem 1.8rem;
}

.updates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
}

.updates-header h3 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.updates-arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 0.25rem;
  border-radius: 0.35rem;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.updates-arrow-link:hover {
  transform: translateX(5px);
  opacity: 0.85;
}

.updates-arrow-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.updates-scroll-container {
  max-height: 290px;
  overflow-y: auto;
  padding-right: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.08);
}

.updates-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.updates-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.updates-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.updates-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.grid-item.span4c .highlighted-block {
  min-height: 206px;
}

.full-bleed-banner,
.highlighted-block.image-container {
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-block: 2.5rem;
  max-width: 100vw;
  overflow: hidden;
}

#porto-img,
#hero-banner-img {
  width: 100%;
  /* Use max-height instead of height so the browser never upscales the image
     beyond its natural pixel height (which would cause blur). On wide screens
     it is capped at 620px; on smaller screens it shrinks naturally with
     aspect-ratio so the full native resolution is always used. */
  height: auto;
  max-height: clamp(280px, 36vw, 620px);
  aspect-ratio: 2940 / 1044; /* match the actual pixel dimensions of hero-banner.png */
  object-fit: cover;
  object-position: center;
  display: block;
}

@media only screen and (max-width: 768px) {
  #porto-img,
  #hero-banner-img {
    /* On mobile, drop the aspect-ratio cap so the image fills naturally.
       The banner will be shorter (natural proportions) but always crisp. */
    max-height: none;
    aspect-ratio: auto;
    height: auto;
  }
}

/* highlighted-block is always dark (#013950), so links must always be white */
.highlighted-block a {
  color: #ffffff !important;
}
.highlighted-block a:hover {
  color: var(--accent-color) !important;
}

.grid-helper li.grid-item {
  font-weight: bold;
  padding: 1rem;

  display: flex;
  flex-direction: column;
}

.grid-item.small-hero p {
  font-size: 0.8rem;
}

.grid-helper .grid-item.span2c {
  grid-column: span 2;
}

.grid-helper .grid-item.span3c {
  grid-column: span 3;
}

.grid-helper .grid-item.span4c {
  grid-column: span 4;
}

.grid-helper .grid-item.span5c {
  grid-column: span 5;
}

.grid-helper .grid-item.span6c {
  grid-column: span 6;
}

.grid-helper .grid-item.span7c {
  grid-column: span 7;
}

.grid-helper .grid-item.span8c {
  grid-column: span 8;
}

.grid-helper .grid-item.span9c {
  grid-column: span 9;
}

.grid-helper .grid-item.span10c {
  grid-column: span 10;
}

.grid-helper .grid-item.span11c {
  grid-column: span 11;
}

.grid-helper .grid-item.span12c {
  grid-column: span 12;
}

.grid-helper .grid-item.span2r {
  grid-row: span 2;
}

.grid-helper .grid-item.span3r {
  grid-row: span 3;
}

.grid-helper .grid-item.span4r {
  grid-row: span 4;
}

footer .grid-helper {
  position: relative;
  row-gap: 0;
  margin-top: 0;
  margin-bottom: 2rem;
}

footer picture {
  display: block;
  position: relative;
  width: 21rem;
  margin-top: 0;
  z-index: 10;
}

footer picture img {
  display: block;
  width: 21rem;
  height: auto;
}

footer hr {
  border: none;
  border-bottom: 1px solid var(--light-text);
  margin-top: 1rem;
}

.footer-menu {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  padding-bottom: 4rem;
}

@media screen and (max-width: 1280px) {
  footer picture {
    width: 18rem;
  }
  footer picture img {
    width: 18rem;
  }
}

@media screen and (max-width: 1024px) {
  footer picture {
    width: 16rem;
  }
  footer picture img {
    width: 16rem;
  }
}

@media only screen and (max-width: 768px) {
  footer picture {
    width: 15rem;
    height: auto;
    max-width: calc(100vw - 2rem);
  }
  footer picture img {
    width: 15rem;
    max-width: calc(100vw - 2rem);
  }
  .footer-menu {
    display: flex;
    flex-direction: column;
  }
}

.footer-menu,
.footer-menu ul {
  padding-left: 0;
  list-style: none;
}

.footer-menu > li > a {
  font-weight: bold;
}

.footer-menu a {
  color: var(--light-text);
  font-size: 0.8rem;
  text-decoration: none;
}

.footer-menu a[href]:hover {
  text-decoration: underline;
}

.footer-menu li ul li {
  padding-left: 1ex;
}

.footer-menu li ul,
.footer-menu li ul li + li {
  margin-top: 0.8rem;
  line-height: 1.2;
}

.footer-menu li {
  padding: 0;
  font-family: 'Lexend', sans-serif;
}

.cta {
  background-color: var(--accent-color2);
  font-family: 'Lexend', sans-serif;
  color: var(--light-text);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin-top: 1rem;
  display: block;
  width: fit-content;
  text-decoration: none;
}
.cta:hover {
  background-color: black;
}

footer {
  min-height: auto;
  margin-top: 0;
  background-color: var(--footer-color);
  color: white;
  padding-top: 0;
  position: relative;
  overflow: visible;
}

@media (prefers-color-scheme: dark) {
  footer {
    background-color: #1a1f2b;
  }
}

footer p {
  font-weight: 600;
  font-family: 'Lexend', sans-serif;
  background-color: transparent;
  padding: 0;
}

@media only screen and (max-width: 1280px) {
  .hide-on-small-screens {
    display: none;
  }
}

.text-block {
  grid-column: 3 / span 8;
  background-color: var(--bg-color);
  background-color: color-mix(in srgb, var(--bg-color) 92%, transparent);
  border-radius: 0.75rem;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 2px 12px rgba(1, 57, 80, 0.05);
}

@media (prefers-color-scheme: dark) {
  .text-block {
    background-color: var(--bg-color);
    background-color: color-mix(in srgb, var(--bg-color) 92%, transparent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
}

.highlighted-block .text-block {
  background-color: transparent;
  padding: 0.5rem;
  box-shadow: none;
}

.text-block h2 {
  font-family: 'Lexend', sans-serif;
  margin-block: 4rem 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.text-block h3,
.text-block h4 {
  font-family: 'Lexend', sans-serif;
  line-height: 1.3;
}

.text-block h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-block: 3rem 1rem;
}

.text-block h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-block: 1.75rem 0.65rem;
}

.text-block h3 + h4 {
  margin-block-start: 1rem;
}

.text-block h2 + h3,
.text-block h1 + h2 {
  margin-block: 2rem 1rem;
}

.text-block ul,
.text-block ol {
  padding: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  padding-block: 0.5rem;
  gap: 0.5rem;
  list-style-position: outside;
  --bullet-margin: 1ch;
}

.text-block ol {
  list-style: none;
  counter-reset: items;
}

.text-block ol > li {
  counter-increment: item;
}

.text-block ol > li:before {
  content: counter(item) '.';
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  text-align: right;
}

@media only screen and (min-width: 768px) {
  .text-block ol > li {
    position: relative;
    padding-left: 2rem;
    left: -1.5rem;
  }

  .text-block ol > li:before {
    position: absolute;
    left: calc(var(--bullet-margin) * -1 / 2);
    top: 0.2rem;
    width: 1.5rem;
  }
}

.text-block ul {
  list-style-type: '\203A';
}

.text-block ul ul,
.text-block ol ul {
  padding-left: 2ch;
  list-style-type: '\203A\203A';
}

.text-block ul li {
  padding-left: var(--bullet-margin);
}

#updates {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

.text-block #updates li {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.text-block #updates li:first-child {
  padding-top: 0;
}

.text-block #updates li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.text-block .updates-dates {
  font-family: 'Lexend', sans-serif;
  position: relative;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.2rem;
  display: block;
}

.text-block #updates li a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  font-size: 0.88rem;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.text-block #updates li a:hover {
  color: var(--accent-color) !important;
  text-decoration: underline !important;
}

@media only screen and (max-width: 768px) {
  .text-block ul {
    --bullet-margin: 0.75ch;
  }
}

.quote {
  font-family: 'Lexend', sans-serif;
  font-style: italic;
  text-align: left;
}
.quote .author {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  margin-top: 0.5rem;
  text-align: right;
  font-size: 0.9rem;
  display: block;
}

.quote .author:before {
  content: '— ';
}

ul.committee-members {
  --profile-width: 16rem;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2rem;
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  ul.committee-members {
    grid-template-columns: 1fr;
  }
}

ul.committee-members li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

ul.committee-members img,
.img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1ch;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.33);
}

ul.committee-members li > div.member {
  text-align: center;
  display: flex;
  flex-direction: column;
}

ul.committee-members .members-name {
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--accent-color2);
}

/* Organizing Committee page: full width (lined up with the logo, like the home page),
   role + email in a left column, people in a wide grid on the right */
.committee-page .grid-helper {
  display: block;
  margin-bottom: 0;
}

/* Breathing room between the last committee section and the footer */
.committee-page {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.committee-page .text-block {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.committee-page h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.committee-role,
.venue-section {
  /* Sakura divider (Organizing Committee roles, Venue sections): the flower shape
     (from imgs/sakura-light.png, used as a mask) sits at the top-left and its stem is
     continued by a line to the right edge, both in --sakura-color. Stem measured from
     the 155x79 image: about 4.2px thick centred on row 43.5, ending in a rounded tip
     at x = 145-155. */
  --sakura-h: 56px;
  /* Colour presets (swap the value to test):
     #c4422e  deeper favicon coral (current, light mode: 3.85:1 on the beige background)
     #f96f5c  favicon / footer-sun coral (current in dark mode below: 5.7:1 on navy)
     #013950  header navy (light mode only; vanishes on the dark-mode navy)
     #9ed0e6  light blue, like the dark-mode titles
     #9b0033  crimson, the colour of imgs/sakura-light.png */
  --sakura-color: #c4422e;

  position: relative;
  padding-top: calc(var(--sakura-h) + 1.5rem);
}

.committee-role {
  display: grid;
  /* Role heading on its own line, photos below centred across the page.
     Previously the heading sat in a left column beside the photos:
  grid-template-columns: minmax(12rem, 1fr) 3fr;
  gap: 1.5rem 3rem;
  */
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
}

.committee-role::before,
.committee-role::after,
.venue-section::before,
.venue-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Flower */
.committee-role::before,
.venue-section::before {
  top: 0;
  left: 0;
  /* cut off before the image's rounded stem tip (x = 145 of 155); the line below takes over */
  width: calc(var(--sakura-h) * 145 / 79);
  height: var(--sakura-h);
  background-color: var(--sakura-color);
  -webkit-mask: url('imgs/sakura-light.png') left top / calc(var(--sakura-h) * 155 / 79) var(--sakura-h)
    no-repeat;
  mask: url('imgs/sakura-light.png') left top / calc(var(--sakura-h) * 155 / 79) var(--sakura-h)
    no-repeat;
}

/* Stem continued to the right edge, overlapping the end of the image's stem so there is no seam */
.committee-role::after,
.venue-section::after {
  top: calc(var(--sakura-h) * 41.4 / 79);
  left: calc(var(--sakura-h) * 135 / 79);
  right: 0;
  height: calc(var(--sakura-h) * 4.2 / 79);
  background-color: var(--sakura-color);
  border-radius: 999px;
}

/* Dark mode: the favicon coral itself */
@media (prefers-color-scheme: dark) {
  .committee-role,
  .venue-section {
    /* was #031824 (dark header navy), too faint on the navy background */
    --sakura-color: #f96f5c;
  }
}

/* Soft sakura pink was tried here before:
@media (prefers-color-scheme: dark) {
  .committee-role {
    --sakura-color: #f0a6ba;
  }
}
*/

.committee-role .role-info h2 {
  margin: 0 0 0.5rem;
}

.committee-role .role-info p {
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere; /* long email addresses wrap instead of overflowing */
}

/* Photos keep their previous size (about 330px); as many per row as fit. A wrapping flex row
   centres every row, including a leftover photo on its own line (e.g. 3 people, 2 per row).
   Earlier grid versions, kept for reference:
   grid-template-columns: repeat(auto-fill, 18.5rem);
   grid-template-columns: repeat(auto-fit, 18.5rem); justify-content: center; */
.committee-page ul.committee-members {
  display: flex;
  flex-direction: row; /* .text-block ul sets column */
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.committee-page ul.committee-members li {
  padding: 0;
  gap: 0.75rem;
  width: 18.5rem;
}

/* Photo outline in the header colour, darker than the page background */
.committee-page ul.committee-members img,
.committee-page .img-placeholder {
  box-sizing: border-box;
  border: 4px solid var(--nav-bg-color);
}

.committee-page .affiliation {
  font-size: 0.95rem;
  font-style: normal;
}

/* Names bold and upright (the shared style elsewhere is italic, weight 500) */
.committee-page ul.committee-members .members-name {
  font-style: normal;
  font-weight: 700;
}

/* No longer needed now that every row is centred (it centred a single photo across all
   slots, which on wide laptops didn't line up with the pairs):
@media screen and (min-width: 769px) {
  .committee-page ul.committee-members > li:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 18.5rem;
  }
}
*/

/* Tablets and phones: role heading above its people, one full-width photo per row (as before) */
@media screen and (max-width: 768px) {
  .committee-role,
  .venue-section {
    --sakura-h: 48px;
    padding-top: calc(var(--sakura-h) + 1.25rem);
  }

  .committee-role {
    grid-template-columns: 1fr;
    padding-bottom: 2rem;
  }

  .committee-role .role-info h2 {
    font-size: 1.3rem;
  }

  .committee-page ul.committee-members {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .committee-page ul.committee-members li {
    width: 100%;
  }
}

/* Venue page: full width (lined up with the logo, like the home and committee pages),
   text in light boxes like the home page, sakura dividers between sections */
.venue-page {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.venue-page h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Full-width photo: no box border or rounded corners */
.venue-page .highlighted-block.image-container {
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  margin-block: 2.5rem; /* photo now sits between the intro box and the address box */
}

.venue-page #venue-img {
  display: block;
  width: 100%;
  height: clamp(260px, 40vw, 620px);
  object-fit: cover;
  object-position: center 40%;
}

/* Full-width cut-out tests, no longer used (the cut-out now sits in the intro box):
   1) within the photo strip height (narrower, centred):
  object-fit: contain;
  object-position: center bottom;
   2) full page width at its natural proportions (too big):
.venue-page #venue-img.venue-img-cutout {
  height: auto;
  object-fit: fill;
}
*/

/* Building cut-out (transparent background) in the top-right corner of the intro box,
   overlapping the box's top edge a little. Laptops only; hidden on tablet/phone. */
.venue-page .venue-intro {
  position: relative;
}

@media only screen and (min-width: 1201px) {
  /* (same specificity as the .venue-box padding rule, plus one, so this padding wins) */
  .venue-page .text-block.venue-box.venue-intro {
    --building-w: min(30%, 26rem);
    padding-right: calc(var(--building-w) + 3rem);
  }

  .venue-page .venue-intro-building {
    --building-w: min(30%, 26rem);
    position: absolute;
    top: -3.5rem;
    right: 2rem;
    width: var(--building-w);
    height: auto;
    pointer-events: none;
  }
}

@media only screen and (max-width: 1200px) {
  .venue-page .venue-intro-building {
    display: none;
  }
}

/* Light text boxes, same look as the home page boxes (beige / lighter blue in dark mode) */
.venue-page .text-block.venue-box {
  grid-column: auto;
  background-color: var(--box-bg);
  color: var(--box-text-color);
  border-radius: 0;
  padding: 40px;
  box-shadow: 0 8px 24px rgba(0, 59, 79, 0.16);
}

.venue-page .venue-box h2,
.venue-page .venue-box h3,
.venue-page .venue-box p,
.venue-page .venue-box li,
.venue-page .venue-box strong {
  color: var(--box-text-color);
}

.venue-page .venue-box h2 {
  margin: 0 0 1rem;
}

.venue-page .venue-box h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.2rem;
}

.venue-page .venue-box > h3:first-child {
  margin-top: 0;
}

.venue-page .venue-box p {
  padding: 0;
  margin: 0 0 0.9rem;
}

/* Avoid a single word alone on the last line (browsers that support it; the HTML also
   joins the last two words of each paragraph with   for the others) */
.venue-page p,
.venue-page li {
  text-wrap: pretty;
}

.venue-page .venue-box > :last-child {
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  .venue-page .text-block.venue-box {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

/* Section headings and intro text sit on the page, the details in boxes */
.venue-section {
  margin-top: 3rem;
}

.venue-section > h2 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.venue-section > p {
  padding: 0;
  margin: 0 0 0.75rem;
  /* max-width: 70ch; (cut the intro lines in two; intros now sit in full-width boxes) */
}

/* Section heading with an icon (train, airplane) */
.venue-heading {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/* Black line icons used as a mask so they take the text colour of each mode:
   dark blue on the light background, light blue on the dark background */
.venue-icon {
  --venue-icon-color: #013950;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  background-color: var(--venue-icon-color);
  -webkit-mask: var(--venue-icon) center / contain no-repeat;
  mask: var(--venue-icon) center / contain no-repeat;
}

.venue-icon-train {
  --venue-icon: url('imgs/assets-27-venue/train.png');
}

.venue-icon-airplane {
  --venue-icon: url('imgs/assets-27-venue/airplane-mode.png');
}

@media (prefers-color-scheme: dark) {
  .venue-icon {
    --venue-icon-color: #9ed0e6;
  }
}

.venue-section > .venue-box,
.venue-cards {
  margin-top: 1.5rem;
}

/* Full-width horizontal panels, one below the other.
   Previously side by side on wide screens:
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
*/
.venue-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Lists with the sakura favicon as bullet (decorative; still announced as a list) */
.venue-page ul.sakura-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.venue-page ul.sakura-list li {
  position: relative;
  padding-left: 1.6em;
}

.venue-page ul.sakura-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.05em;
  height: 1.05em;
  background: url('imgs/favicon-assets.png') center / contain no-repeat;
}

@media screen and (max-width: 768px) {
  .venue-page .text-block.venue-box {
    padding: clamp(20px, 4vw, 24px);
  }
}

ul.pc-members,
ul.workshop-organizers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.666rem;
}

ul.pc-members .pc-member {
  line-height: 1.2;
}

ul.pc-members .pc-name,
ul.workshop-organizers .name {
  font-weight: bold;
}

ul.pc-members .pc-institution,
ul.pc-members .pc-country,
ul.workshop-organizers .affiliation {
  font-style: italic;
  font-family: 'Lexend', sans-serif;
  font-size: 0.9rem;
  opacity: 0.8;
}

ul.workshop-organizers .affiliation a {
  word-break: break-all;
}

.blog-post-separator {
  border: none;
  border-top: 2px solid var(--accent-color);
}

.blog-post-separator {
  margin-block: 5rem;
}

.blog-post {
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 5rem;
  margin-bottom: 5rem;
}

.blog-post-date,
.subtitle {
  display: block;
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0.666;
  margin-block: 0.25rem 2rem;
}

.center {
  text-align: center;
}

.generic-separator {
  margin-block: 1rem;
  border: none;
}

.visible-separator {
  border-top: 1px solid var(--text-color);
  margin-block: 2rem;
}

.deadlines-summary {
  font-size: 0.85rem;
}

.crossed-out {
  text-decoration: line-through;
  opacity: 0.666;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  margin-block: 2rem;
  font-family: 'Lexend', sans-serif;
  font-size: 0.9rem;
  text-align: left;
}

.pricing-table th,
.pricing-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

.pricing-table th {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 92%);
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pricing-table td:first-child {
  font-style: italic;
}

.pricing-table tr:last-child td {
}

/* Mobile-friendly layout */
@media only screen and (max-width: 768px) {
  .pricing-table thead {
    display: none;
  }

  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table td {
    display: block;
    width: 100%;
  }

  .pricing-table tr {
    margin-bottom: 2rem;
    background-color: color-mix(in srgb, var(--accent-color2), transparent 96%);
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .pricing-table td {
    border: none;
    padding: 0.5rem 1rem;
    position: relative;
  }

  .pricing-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.6;
    margin-bottom: 0.25rem;
    font-family: 'Lexend', sans-serif;
    text-transform: uppercase;
  }

  .pricing-table td:first-child {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--accent-color2);
  }
}

@media (prefers-color-scheme: dark) {
  .pricing-table th {
    background-color: color-mix(in srgb, var(--accent-color2), black 40%);
  }

  .pricing-table td {
    border-color: color-mix(in srgb, var(--text-color), transparent 85%);
  }
}

ul.workshop-organizers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

.workshop + .workshop {
  margin-top: 8rem;
  border-top: 2px solid var(--accent-color);
}

.workshop h2 {
  position: sticky;
  top: 0;
  background-color: color-mix(in srgb, var(--bg-color), transparent 8%);
  backdrop-filter: blur(5px);
  padding-bottom: 0.125rem;
  z-index: 1;
  box-shadow: 0 0.5rem 10px var(--bg-color);
}

#hero {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

#hero img {
  border-radius: 0.5rem;
}

#hero h2 {
  font-size: 2rem;
  color: var(--accent-color);
  font-family: 'Lexend', sans-serif;
  font-style: italic;
  margin-block: 1rem 0.5rem;
  line-height: 1.15;
}

#hero h3 {
  margin: 0;
  font-weight: 400;
}

ul.jennys-links {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.jennys-links li {
  display: flex;
  gap: 0.25rem;
  align-items: center;

  flex: 0 1 auto;
}

.jennys-links svg {
  width: 1.25rem;
  fill: var(--text-color);
}

/* dark mode */
/* @media (prefers-color-scheme: dark) {
  .jennys-links li {
    color: var();
  } /* dark-mode color */
/* } */

.jennys-links a {
  text-decoration: none;
}

.jennys-links svg {
  max-height: 1.25rem;
  min-width: 1rem;
}

#keynote-teaser {
}

#keynote-teaser h2 {
  font-size: 0.8rem;
  margin: 0;
}

#keynote-teaser h3 {
  font-size: 1.5rem;
  color: var(--accent-color);
  font-family: 'Lexend', sans-serif;
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  #keynote-teaser h3 {
    color: var(--text-color);
  }
}

#keynote-teaser span.role {
  font-weight: 400;
  font-size: 1rem;
  font-style: italic;
  opacity: 0.666;
}

.keynote-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.keynote-info * {
  line-height: 1.6;
}

.jenny-vertical {
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.25);
}

.jenny-vertical img {
  max-height: 66vh;
  margin: 2rem auto;
}

.accepted-paper {
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 0.5rem;
}

.accepted-paper {
  margin-top: 4rem;
}

.accepted-paper h2 {
  grid-row: 2;
  margin: 0;
}

.paper-type {
  grid-row: 1;
  justify-self: start;
  display: inline-block;
  font-variant-caps: small-caps;
  text-transform: lowercase;
  padding: 0 0.5rem 0.25rem 0.5rem;
  font-weight: 500;
  background-color: var(--light-text);
  color: var(--accent-color2);
  line-height: 1;
  border-radius: 0.25rem;

  display: none;
}

#awards-list .author-list,
.accepted-paper .author-list,
.paper-item .author-list {
  grid-row: 3;
  list-style: none;

  padding: 0 0 0 0.5rem;
  margin: 0;
  display: inline;
}

.author-list li {
  display: inline;
  padding: 0 !important;
}

.author-list li:not(:last-child)::after {
  content: ', ';
}
.author-list li:nth-last-child(2):first-child::after {
  content: ''; /* cancel the comma */
}

.author-list li:last-child:not(:first-child)::before {
  content: 'and ';
}

/* Schedule Header Styles */
.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.schedule-header:nth-of-type(2) {
  margin-top: 6rem;
}

.schedule-header h2 {
  margin: 0;
}

.schedule-link {
  font-size: 0.85rem;
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
}

/* Mobile responsiveness for schedule header */
@media only screen and (max-width: 768px) {
  .schedule-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .schedule-link {
    font-size: 0.8rem;
  }
}

/* Schedule Table Styles */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 2rem;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  text-align: left;
  table-layout: fixed;
  z-index: 2;
  position: relative;
  background-color: var(--bg-color);
}

.schedule-table th,
.schedule-table td {
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
  vertical-align: top;
}

.schedule-table th {
  background-color: var(--accent-color2);
  color: var(--light-text);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
}

.schedule-table .session-item {
  display: block;
  margin-bottom: 0.5rem;
}

.schedule-table .session-item:last-child {
  margin-bottom: 0;
}

.schedule-table .session-code {
  font-weight: 580;
  color: var(--accent-color2);
  display: block;
  font-size: 0.85rem;
}

.schedule-table .session-name {
  display: block;
  font-style: italic;
  font-weight: 450;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.schedule-table .session-type {
  font-weight: 600;
  color: var(--accent-color2);
  display: block;
  margin-bottom: 0.25rem;
}

.schedule-table .session-time {
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'Lexend', sans-serif;
}

.schedule-table .session-divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--text-color), transparent 85%);
  margin: 0.75rem 0;
}

.schedule-table .paper-sessions {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 97%);
}
.schedule-table .paper-sessions:not(:last-of-type),
.schedule-table .break-session:not(:last-of-type) {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}
.schedule-table .paper-sessions:not(:first-of-type),
.schedule-table .break-session:not(:first-of-type) {
  border-top: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

.schedule-table .break-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  text-align: left;
}

.schedule-table .lunch-session {
  background-color: color-mix(in srgb, var(--text-color), transparent 10%);
  color: var(--light-text);
  text-align: left;
}

.schedule-table .lunch-session .session-type {
  color: var(--light-text);
}

.schedule-table .conference-opening {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  text-align: left;
}

.schedule-table .special-session {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 94%);
  text-align: left;
}

.schedule-table .closing-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  text-align: left;
}

.schedule-table .empty-cell {
  background-color: color-mix(in srgb, var(--text-color), transparent 98%);
}

/* Sunday Table Specific Styles */
.sunday-table {
  margin-bottom: 3rem;
}

.sunday-table th {
  text-align: left;
  font-size: 0.9rem;
}

.sunday-table .sunday-event {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.sunday-table .session-item {
  text-align: left;
}

.session-item a.session-link {
  display: inline-block;
  text-decoration-color: color-mix(in srgb, var(--text-color) 50%, transparent);
}
.session-item a.session-link:hover {
  text-decoration-color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  background-color: transparent;
  text-decoration: underline;
}

.sunday-table .session-type {
  font-weight: 600;
  color: var(--text-color);
  display: block;
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* Registration Table Specific Styles */
.registration-table {
  margin-bottom: 3rem;
}

.registration-table th {
  text-align: left;
  font-size: 0.9rem;
  background-color: color-mix(in srgb, var(--accent-color2), transparent 96%);
  color: var(--text-color);
}

.registration-table .registration-event {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 96%);
  text-align: left;
}

.registration-table .session-item {
  text-align: left;
}

.registration-table .session-type {
  font-weight: 600;
  color: var(--text-color);
  display: block;
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* Hide mobile section headers on desktop */
.schedule-table .mobile-section-header {
  display: none;
}

/* Mobile responsiveness for schedule table */
@media only screen and (max-width: 768px) {
  .schedule-table thead {
    display: none;
  }

  .schedule-table,
  .schedule-table tbody,
  .schedule-table tr,
  .schedule-table td {
    display: block;
    width: 100%;
  }

  .schedule-table tr {
    margin-bottom: 3rem;
    background-color: color-mix(in srgb, var(--accent-color2), transparent 98%);
    border-radius: 0.5rem;
    padding: 0rem;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
  }

  /* Sunday table mobile styles */
  .sunday-table thead {
    display: block;
  }

  .sunday-table th {
    display: block;
    width: 100%;
    background-color: var(--accent-color2);
    color: var(--light-text);
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
    position: static;
    z-index: auto;
    box-shadow: none;
  }

  .sunday-table tr {
    background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
    margin-bottom: 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .sunday-table tr:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .sunday-table tr:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
  }

  /* Registration table mobile styles */
  .registration-table thead {
    display: none;
  }

  .registration-table tr {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 96%);
    margin-bottom: 2rem;
    border-radius: 0.5rem;
  }

  .registration-table .registration-event {
    padding: 1rem;
  }

  .sunday-table .sunday-event {
    padding: 1rem;
  }

  /* Show and style mobile section headers */
  .schedule-table .mobile-section-header {
    display: block;
    background-color: var(--text-color);
    color: var(--inverted-text);
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    text-align: left;
    padding: 0rem;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .schedule-table .mobile-section-header td {
    padding: 0.25rem 1rem;
    margin: 0;
  }

  .schedule-table .mobile-section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: none;
    font-family: 'Lexend', sans-serif;
  }

  .schedule-table .mobile-section-header td::before {
    display: none;
  }

  .schedule-table td {
    border: none;
    padding: 1rem 1rem;
    position: relative;
    margin-bottom: 1rem;
  }

  .schedule-table td:last-child {
    margin-bottom: 0;
  }

  .schedule-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 1;
    margin-bottom: 0.5rem;
    font-family: 'Lexend', sans-serif;
    text-transform: uppercase;
    /* color: var(--accent-color2); */
  }

  .schedule-table .session-code {
    font-size: 0.9rem;
  }

  .schedule-table .session-name {
    font-size: 0.95rem;
  }

  .schedule-table .session-type {
    font-size: 0.95rem;
  }

  .schedule-table .session-time {
    font-size: 0.8rem;
  }

  .schedule-table .session-divider {
    margin: 1rem 0;
  }
}

@media (prefers-color-scheme: dark) {
  .schedule-table th {
    background-color: var(--accent-color2);
  }

  .schedule-table td {
    border-color: color-mix(in srgb, var(--text-color), transparent 85%);
  }

  .schedule-table .paper-sessions {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 95%);
  }

  .schedule-table .break-session {
    background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  }

  .schedule-table .lunch-session {
    background-color: color-mix(in srgb, var(--text-color), transparent 94%);
  }

  .schedule-table .conference-opening {
    background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  }

  .schedule-table .special-session {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 90%);
  }

  .schedule-table .closing-session {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  }
}

/* Full Schedule Styles */
.day-schedule {
  margin-bottom: 3rem;
  z-index: 2;
  position: relative;
  background-color: var(--bg-color);
}

.day-header {
  font-size: 1.5rem;
  color: var(--accent-color2);
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.5rem;
  padding-inline: 1rem;
  position: sticky;
  top: 0;
  background-color: var(--bg-color);
  z-index: 2;
}

/* default: show long, hide short */
.date-long {
  display: inline;
}
.date-short {
  display: none;
  padding-left: 0.75rem;
}

/* on small screens, swap them */
@media (max-width: 768px) {
  .date-long {
    display: none;
  }
  .date-short {
    display: inline;
  }
}

.day-header-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: sticky;
  top: 0;
  background-color: var(--accent-color2);
  color: var(--inverted-text);
  z-index: 3;
  min-height: var(--day-header-height);
  border-bottom: 2px solid var(--accent-color2);
  padding: 0.75rem 0 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.day-header-container .day-header {
  margin: 0;
  border: none;
  padding: 0;
  position: static;
  background: none;
  height: auto;
  color: var(--inverted-text);
}

.day-navigation {
  display: flex;
  gap: 1rem;
  align-items: center;
  position: relative;
  top: 0.125rem;
}

@media screen and (max-width: 768px) {
  .day-navigation {
    gap: 0.5rem;
  }
}

.day-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 1.5rem;
  background-color: transparent;
  color: var(--inverted-text) !important;

  text-decoration: none;
  border-radius: 0.25rem;
  font-size: 1.3rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.day-nav-btn:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 10%) !important;
  background-color: transparent !important;
}

.day-nav-btn.day-nav-disabled {
  visibility: hidden;
  pointer-events: none;
}

.time-slot {
  margin-bottom: 2rem;
  overflow: visible;
}

.time-slot.break-slot {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.time-slot.keynote-slot {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.time-slot.special-slot {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 94%);
}

.time-slot.closing-slot {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.time-slot.registration-slot {
  background-color: color-mix(in srgb, var(--text-color), transparent 98%);
}

.time-slot-header {
  padding: 1rem;
  background-color: var(--bg-color2);
  z-index: 1;
  position: sticky;
  top: var(--day-header-height);
  z-index: 2;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 30%, transparent);
}

.time-slot.lunch-slot .time-slot-header {
  background-color: color-mix(in srgb, var(--accent-color) 40%, var(--bg-color));
}

.time-slot.lunch-slot .slot-title,
.time-slot.lunch-slot .time-range {
  color: var(--accent-color2);
}

@media (prefers-color-scheme: dark) {
  .time-slot-header {
    background-color: var(--bg-color2);
    border-bottom-color: color-mix(in srgb, var(--text-color), transparent 85%);
    color: var(--text-color);
  }

  .time-slot.break-slot .time-slot-header {
    background-color: color-mix(in srgb, var(--accent-color) 10%, var(--bg-color));
  }

  .time-slot.keynote-slot .time-slot-header {
    background-color: color-mix(in srgb, var(--accent-color) 12%, var(--bg-color));
  }

  .time-slot.special-slot .time-slot-header {
    background-color: color-mix(in srgb, var(--accent-color2) 20%, var(--bg-color));
  }

  .time-slot.closing-slot .time-slot-header {
    background-color: color-mix(in srgb, var(--accent-color) 15%, var(--bg-color));
  }

  .time-slot.registration-slot .time-slot-header {
    background-color: color-mix(in srgb, var(--text-color) 6%, var(--bg-color));
  }

  .time-slot.lunch-slot .time-slot-header {
    background-color: color-mix(in srgb, var(--accent-color) 15%, var(--bg-color));
  }

  .time-slot.lunch-slot .slot-title,
  .time-slot.lunch-slot .time-range,
  .time-slot.lunch-slot .session-room-name {
    color: var(--text-color);
  }
}

.time-slot,
.paper-item,
.program-block {
  scroll-margin-top: calc(var(--day-header-height) + 0.5rem);
}

.time-range {
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.slot-title {
  margin: 0;
  font-size: 1.25rem;
}

.program-block {
  padding: 1rem;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--dark-text) 40%, transparent);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.session-header {
  font-size: 1.1rem;
  color: var(--accent-color2);
  margin-bottom: 1rem;
  font-weight: 600;
}

.paper-list {
  margin-bottom: 2rem;
}

.paper-list:last-child {
  margin-bottom: 0;
}

.paper-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--dark-text) 40%, transparent);
}

.paper-item .author-list {
  padding: 0;
  font-size: 0.9rem;
  --bullet-margin: 0;
}

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

.paper-tags {
  margin-bottom: 0.5rem;
}

.paper-tag {
  display: flex;
  width: max-content;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  background-color: var(--bg-color2);
  color: var(--accent-color2);
  font-family: 'Lexend', sans-serif;
}

.paper-tag.honorable-tag,
.paper-tag.social-impact-tag {
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.25rem;
}

.paper-tag.honorable-tag::before,
.paper-tag.social-impact-tag::before,
#awards-banner h3:after {
  content: '';
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.paper-tag.honorable-tag::before,
#awards-banner h3:after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%231226AA" d="M341.9 38.1C328.5 29.9 311.6 29.9 298.2 38.1C273.8 53 258.7 57 230.1 56.4C214.4 56 199.8 64.5 192.2 78.3C178.5 103.4 167.4 114.5 142.3 128.2C128.5 135.7 120.1 150.4 120.4 166.1C121.1 194.7 117 209.8 102.1 234.2C93.9 247.6 93.9 264.5 102.1 277.9C117 302.3 121 317.4 120.4 346C120 361.7 128.5 376.3 142.3 383.9C164.4 396 175.6 406 187.4 425.4L138.7 522.5C132.8 534.4 137.6 548.8 149.4 554.7L235.4 597.7C246.9 603.4 260.9 599.1 267.1 587.9L319.9 492.8L372.7 587.9C378.9 599.1 392.9 603.5 404.4 597.7L490.4 554.7C502.3 548.8 507.1 534.4 501.1 522.5L452.5 425.3C464.2 405.9 475.5 395.9 497.6 383.8C511.4 376.3 519.8 361.6 519.5 345.9C518.8 317.3 522.9 302.2 537.8 277.8C546 264.4 546 247.5 537.8 234.1C522.9 209.7 518.9 194.6 519.5 166C519.9 150.3 511.4 135.7 497.6 128.1C472.5 114.4 461.4 103.3 447.7 78.2C440.2 64.4 425.5 56 409.8 56.3C381.2 57 366.1 52.9 341.7 38zM320 160C373 160 416 203 416 256C416 309 373 352 320 352C267 352 224 309 224 256C224 203 267 160 320 160z"/></svg>');
}

.paper-tag.social-impact-tag::before {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%231226AA" d="M6.1 444.3c-9.6 10.8-7.5 27.6 4.5 35.7l68.8 27.9c9.9 6.7 23.3 5 31.3-3.8l91.8-101.9-79.2-87.9-117.2 130zm435.8 0s-292-324.6-295.4-330.1c15.4-8.4 40.2-17.9 77.5-17.9s62.1 9.5 77.5 17.9c-3.3 5.6-56 64.6-56 64.6l79.1 87.7 34.2-38c28.7-31.9 33.3-78.6 11.4-115.5l-43.7-73.5c-4.3-7.2-9.9-13.3-16.8-18-40.7-27.6-127.4-29.7-171.4 0-6.9 4.7-12.5 10.8-16.8 18l-43.6 73.2c-1.5 2.5-37.1 62.2 11.5 116L337.5 504c8 8.9 21.4 10.5 31.3 3.8l68.8-27.9c11.9-8 14-24.8 4.3-35.6z"/></svg>');
}

#awards-banner h3:after {
  width: 1.5rem;
  height: 1.5rem;
  float: right;
  position: relative;
  top: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .paper-tag {
    color: var(--dark-accent-color2);
  }
  .paper-tag.honorable-tag::before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23ffd43b" d="M341.9 38.1C328.5 29.9 311.6 29.9 298.2 38.1C273.8 53 258.7 57 230.1 56.4C214.4 56 199.8 64.5 192.2 78.3C178.5 103.4 167.4 114.5 142.3 128.2C128.5 135.7 120.1 150.4 120.4 166.1C121.1 194.7 117 209.8 102.1 234.2C93.9 247.6 93.9 264.5 102.1 277.9C117 302.3 121 317.4 120.4 346C120 361.7 128.5 376.3 142.3 383.9C164.4 396 175.6 406 187.4 425.4L138.7 522.5C132.8 534.4 137.6 548.8 149.4 554.7L235.4 597.7C246.9 603.4 260.9 599.1 267.1 587.9L319.9 492.8L372.7 587.9C378.9 599.1 392.9 603.5 404.4 597.7L490.4 554.7C502.3 548.8 507.1 534.4 501.1 522.5L452.5 425.3C464.2 405.9 475.5 395.9 497.6 383.8C511.4 376.3 519.8 361.6 519.5 345.9C518.8 317.3 522.9 302.2 537.8 277.8C546 264.4 546 247.5 537.8 234.1C522.9 209.7 518.9 194.6 519.5 166C519.9 150.3 511.4 135.7 497.6 128.1C472.5 114.4 461.4 103.3 447.7 78.2C440.2 64.4 425.5 56 409.8 56.3C381.2 57 366.1 52.9 341.7 38zM320 160C373 160 416 203 416 256C416 309 373 352 320 352C267 352 224 309 224 256C224 203 267 160 320 160z"/></svg>');
  }
  .paper-tag.social-impact-tag::before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23ffd43b" d="M6.1 444.3c-9.6 10.8-7.5 27.6 4.5 35.7l68.8 27.9c9.9 6.7 23.3 5 31.3-3.8l91.8-101.9-79.2-87.9-117.2 130zm435.8 0s-292-324.6-295.4-330.1c15.4-8.4 40.2-17.9 77.5-17.9s62.1 9.5 77.5 17.9c-3.3 5.6-56 64.6-56 64.6l79.1 87.7 34.2-38c28.7-31.9 33.3-78.6 11.4-115.5l-43.7-73.5c-4.3-7.2-9.9-13.3-16.8-18-40.7-27.6-127.4-29.7-171.4 0-6.9 4.7-12.5 10.8-16.8 18l-43.6 73.2c-1.5 2.5-37.1 62.2 11.5 116L337.5 504c8 8.9 21.4 10.5 31.3 3.8l68.8-27.9c11.9-8 14-24.8 4.3-35.6z"/></svg>');
  }
}

.paper-title {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-color);
}

/* Responsive Design for Full Schedule */
@media (max-width: 768px) {
  .day-schedule {
    margin-bottom: 2rem;
  }

  .day-header {
    font-size: 1.3rem;
  }

  .time-slot-header,
  .program-block {
    padding: 0.75rem;
  }

  .slot-title {
    font-size: 1.1rem;
  }

  .session-header {
    font-size: 1rem;
  }

  .paper-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  .time-range {
    margin: 0;
  }
  .slot-title {
    line-height: 1.3;
  }
}

.session-number {
  font-weight: 800;
  color: var(--accent-color2);
}

.session-topic {
  font-style: italic;
}

/* ================================
   DIV-BASED SCHEDULE GRID (A11y)
   Column-major layout
   ================================ */

.schedule-grid {
  width: 100%;
  margin-block: 2rem;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  position: relative;
  z-index: 2;
  background-color: var(--bg-color);

  /* Column-major: the grid itself defines the columns */
  display: grid;
  grid-template-columns: repeat(var(--day-count, 5), 1fr);
  grid-auto-rows: auto;
  gap: 0; /* borders meet cleanly */
}

/* Header “cells” placed at grid-row: 1 */
.schedule-grid-th {
  padding: 0.75rem;
  background-color: var(--accent-color2);
  color: var(--light-text);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

/* Body cells */
.schedule-grid-td {
  padding: 0.75rem;
  vertical-align: top;
  border-right: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
  border-bottom: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

/* First column left border (no row wrapper, so do it per cell) */
.schedule-grid > .schedule-grid-th[style*='grid-column:1'],
.schedule-grid > .schedule-grid-td[style*='grid-column:1'] {
  border-left: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

/* Category backgrounds (carry-overs) */
.schedule-grid-td.paper-sessions {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 97%);
}
.schedule-grid-td.break-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  text-align: left;
}
.schedule-grid-td.conference-opening {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  text-align: left;
}
.schedule-grid-td.special-session {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 94%);
  text-align: left;
}
.schedule-grid-td.closing-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  text-align: left;
}
.schedule-grid-td.empty-cell {
  background-color: color-mix(in srgb, var(--text-color), transparent 98%);
}

/* Inner content (same look as before) */
.schedule-grid-td .session-item {
  display: block;
  margin-bottom: 0.5rem;
}
.schedule-grid-td .session-item:last-child {
  margin-bottom: 0;
}
.schedule-grid-td .session-code {
  font-weight: 580;
  color: var(--accent-color2);
  display: block;
  font-size: 0.85rem;
}

.room-name,
.poster-room-name {
  font-size: 0.8rem;
  font-weight: 500;
  display: block;
}

.room-name::before {
  content: 'Room: ';
}

.schedule-grid-td .session-name {
  display: block;
  font-style: italic;
  font-weight: 450;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}
.schedule-grid-td .session-type {
  font-weight: 600;
  color: var(--accent-color2);
  display: block;
  margin-bottom: 0.25rem;
}
.schedule-grid-td .session-time {
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'Lexend', sans-serif;
}
.schedule-grid-td .session-divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--text-color), transparent 85%);
  margin: 0.75rem 0;
}

.schedule-grid .mobile-section-header {
  display: none;
}

.session-room-name,
.fs-poster-room-name {
  display: block;
  font-family: 'Lexend', sans-serif;
  font-size: 0.8rem;
  font-style: italic;
}

.session-room-name::before {
  content: 'Room: ';
}

/* Mobile: stack to one column; keep sticky header feel */
@media (max-width: 768px) {
  .schedule-grid {
    grid-template-columns: 1fr;
  }

  .schedule-grid-th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .schedule-grid-td {
    border-left: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
    margin-bottom: 0 !important;
    padding: 1rem;
  }

  .schedule-grid-td .session-code {
    font-size: 0.9rem;
  }
  .schedule-grid-td .session-name {
    font-size: 0.95rem;
  }
  .schedule-grid-td .session-type {
    font-size: 0.95rem;
  }
  .schedule-grid-td .session-time {
    font-size: 0.8rem;
  }
  .schedule-grid-td .session-divider {
    margin: 1rem 0;
  }
}

/* Dark mode tweaks */
@media (prefers-color-scheme: dark) {
  .schedule-grid-td {
    border-color: color-mix(in srgb, var(--text-color), transparent 85%);
  }
  .schedule-grid-td.paper-sessions {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 95%);
  }
  .schedule-grid-td.break-session {
    background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  }
  .schedule-grid-td.lunch-session {
    background-color: color-mix(in srgb, var(--text-color), transparent 94%);
  }
  .schedule-grid-td.conference-opening {
    background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  }
  .schedule-grid-td.special-session {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 90%);
  }
  .schedule-grid-td.closing-session {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  }
}

.schedule-grid {
  --day-count: 5;
} /* default */
.schedule-grid.daycount-1 {
  --day-count: 1;
}
.schedule-grid.daycount-2 {
  --day-count: 2;
}
.schedule-grid.daycount-3 {
  --day-count: 3;
}
.schedule-grid.daycount-4 {
  --day-count: 4;
}
.schedule-grid.daycount-5 {
  --day-count: 5;
}
.schedule-grid.daycount-6 {
  --day-count: 6;
}
.schedule-grid.daycount-7 {
  --day-count: 7;
}

/* Use --day-count to define columns */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(var(--day-count), 1fr);
  grid-auto-rows: auto;
}

@media (max-width: 768px) {
  .schedule-grid {
    grid-template-columns: 1fr;
  }
  .schedule-grid > .schedule-grid-th,
  .schedule-grid > .schedule-grid-td {
    grid-column: 1 / -1; /* stack; ignore gc-* */
    grid-row: auto; /* let rows flow; ignore gr-* */
  }
  /* optional: hide purely decorative empty placeholders on mobile */
  .schedule-grid > .empty-cell {
    display: none;
  }
}

/* ==============
   Column-major grid (no inline styles)
   ============== */

/* Container */
.schedule-grid {
  --day-count: 5; /* default; overridden by .daycount-* below */
  display: grid;
  grid-template-columns: repeat(var(--day-count), 1fr);
  grid-auto-rows: auto;
  gap: 0;
}

.schedule-grid.daycount-1 {
  --day-count: 1;
}
.schedule-grid.daycount-2 {
  --day-count: 2;
}
.schedule-grid.daycount-3 {
  --day-count: 3;
}
.schedule-grid.daycount-4 {
  --day-count: 4;
}
.schedule-grid.daycount-5 {
  --day-count: 5;
}
.schedule-grid.daycount-6 {
  --day-count: 6;
}
.schedule-grid.daycount-7 {
  --day-count: 7;
}

/* Header cells */
.schedule-grid-th {
  padding: 0.75rem;
  background-color: var(--accent-color2);
  color: var(--light-text);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

/* Body cells */
.schedule-grid-td {
  padding: 0.75rem;
  vertical-align: top;
  border-right: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
  border-bottom: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

/* First column left border (class-based now, not [style*=]) */
.schedule-grid > .gc-1 {
  border-left: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

/* ---- Position helpers ---- */
.schedule-grid .gc-1 {
  grid-column: 1;
}
.schedule-grid .gc-2 {
  grid-column: 2;
}
.schedule-grid .gc-3 {
  grid-column: 3;
}
.schedule-grid .gc-4 {
  grid-column: 4;
}
.schedule-grid .gc-5 {
  grid-column: 5;
}
.schedule-grid .gc-6 {
  grid-column: 6;
}
.schedule-grid .gc-7 {
  grid-column: 7;
}

/* Rows (safe upper bound; extend if needed) */
.schedule-grid .gr-1 {
  grid-row: 1;
}
.schedule-grid .gr-2 {
  grid-row: 2;
}
.schedule-grid .gr-3 {
  grid-row: 3;
}
.schedule-grid .gr-4 {
  grid-row: 4;
}
.schedule-grid .gr-5 {
  grid-row: 5;
}
.schedule-grid .gr-6 {
  grid-row: 6;
}
.schedule-grid .gr-7 {
  grid-row: 7;
}
.schedule-grid .gr-8 {
  grid-row: 8;
}
.schedule-grid .gr-9 {
  grid-row: 9;
}
.schedule-grid .gr-10 {
  grid-row: 10;
}
.schedule-grid .gr-11 {
  grid-row: 11;
}
.schedule-grid .gr-12 {
  grid-row: 12;
}
.schedule-grid .gr-13 {
  grid-row: 13;
}
.schedule-grid .gr-14 {
  grid-row: 14;
}
.schedule-grid .gr-15 {
  grid-row: 15;
}
.schedule-grid .gr-16 {
  grid-row: 16;
}
.schedule-grid .gr-17 {
  grid-row: 17;
}
.schedule-grid .gr-18 {
  grid-row: 18;
}
.schedule-grid .gr-19 {
  grid-row: 19;
}
.schedule-grid .gr-20 {
  grid-row: 20;
}

.schedule-grid-td.paper-sessions {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 97%);
}
.schedule-grid-td.break-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  text-align: left;
}
.schedule-grid-td.lunch-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--text-color);
  text-align: left;
}
.schedule-grid-td.lunch-session .session-type {
  color: var(--text-color);
}
.schedule-grid-td.conference-opening {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  text-align: left;
}
.schedule-grid-td.special-session {
  background-color: color-mix(in srgb, var(--accent-color2), transparent 94%);
  text-align: left;
}
.schedule-grid-td.closing-session {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  text-align: left;
}
.schedule-grid-td.empty-cell {
  background-color: color-mix(in srgb, var(--text-color), transparent 98%);
}

/* Inner content */
.schedule-grid-td .session-item {
  display: block;
  margin-bottom: 0.5rem;
}
.schedule-grid-td .session-item:last-child {
  margin-bottom: 0;
}
.schedule-grid-td .session-code {
  font-weight: 580;
  color: var(--accent-color2);
  display: block;
  font-size: 0.85rem;
}
.schedule-grid-td .session-room {
  display: block;
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.7;
  margin-top: 0.1rem;
}
.schedule-grid-td .session-name {
  display: block;
  font-style: italic;
  font-weight: 450;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}
.schedule-grid-td .session-type {
  font-weight: 600;
  color: var(--accent-color2);
  display: block;
  margin-bottom: 0.25rem;
}
.schedule-grid-td .session-time {
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'Lexend', sans-serif;
}
.schedule-grid-td .session-divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--text-color), transparent 85%);
  margin: 0.75rem 0;
}

/* Mobile: stack to one column and ignore gc-/gr- placement */
@media (max-width: 768px) {
  .schedule-grid {
    grid-template-columns: 1fr;
  }
  .schedule-grid > .schedule-grid-th,
  .schedule-grid > .schedule-grid-td {
    grid-column: 1 / -1; /* stack */
    grid-row: auto; /* flow */
  }
  .schedule-grid > .empty-cell {
    display: none;
  }
  .schedule-grid-th {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .schedule-grid-td {
    border-left: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
    margin-bottom: 1rem;
    padding: 1rem;
  }
}

/* Dark mode tweaks (unchanged) */
@media (prefers-color-scheme: dark) {
  .schedule-grid-td {
    border-color: color-mix(in srgb, var(--text-color), transparent 85%);
  }
  .schedule-grid-td.paper-sessions {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 95%);
  }
  .schedule-grid-td.break-session {
    background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  }
  .schedule-grid-td.lunch-session {
    background-color: color-mix(in srgb, var(--text-color), transparent 94%);
  }
  .schedule-grid-td.conference-opening {
    background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  }
  .schedule-grid-td.special-session {
    background-color: color-mix(in srgb, var(--accent-color2), transparent 90%);
  }
  .schedule-grid-td.closing-session {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  }
}

div h2.day-heading {
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--light-text);
}
div h3.time-heading {
  margin: 0 0 0.5rem 0;
  font-family: 'Lexend', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
}
div h4.session-heading {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  line-height: 1.3;
}

.poster-group-title {
  font-family: 'Lexend', sans-serif;
  font-size: 1.2rem;
  color: var(--accent-color2);
  margin-bottom: 1rem;
}

.poster-group:not(:first-of-type) .poster-group-title {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--dark-text) 40%, transparent);
}

.poster-group .affiliation {
  display: none;
}

.session-pill {
  padding: 0.75rem;
  border-radius: 0.5rem;
  display: block;
  box-sizing: border-box;
  background-color: var(--accent-color2);
  color: var(--light-text);
}
.session-pill p {
  margin: 0;
  padding: 0;
  max-width: none;
  background-color: transparent;
  color: inherit;
}
.session-pill .session-times {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  /* border-top: 1px solid color-mix(in srgb, var(--light-text) 70%, transparent); */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media only screen and (max-width: 768px) {
  .session-pill {
    display: block;
    width: 100%;
  }
}

.poster-nav {
  font-family: 'Lexend', sans-serif;
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.poster-nav a:last-child {
  margin-left: auto;
}

@media only screen and (max-width: 480px) {
  .poster-nav {
    flex-direction: column;
    gap: 0.5rem;
  }
  .poster-nav a:last-child {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

.sponsors a {
  margin-right: 2rem;
  margin-bottom: 1rem;
  display: inline-block;
  vertical-align: middle;
}

.sponsors a img {
  display: inline-block;
  width: auto;
  max-width: none;
}

@media (prefers-color-scheme: dark) {
  .sponsors img {
    padding: 0.75rem;
    background-color: color-mix(in srgb, var(--text-color), transparent 10%);
    border-radius: 0.375rem;
  }
}

/* Fix link color for Hybrid Social Event (RSVP link) */
#tuesday-lunch-1230-1400-x2 .rsvp-link {
  text-decoration: underline;
  font-weight: 600;
  color: var(--inverted-text);
}

/* Hover and visited states on desktop */
#tuesday-lunch-1230-1400-x2 .rsvp-link:hover {
  color: var(--accent-color);
  background-color: var(--inverted-text);
}

.iframe-wrapper-home,
.iframe-wrapper-attending {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.iframe-wrapper-home {
  aspect-ratio: 4 / 5;
}
.iframe-wrapper-attending {
  aspect-ratio: 16 / 9;
}

.iframe-wrapper-home iframe,
.iframe-wrapper-attending iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#awards-banner {
  margin-bottom: 2rem;
}

#awards-banner ul#awards-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  gap: 2rem;
  margin-top: 1rem;
}

@media screen and (min-width: 769px) and (max-width: 1152px) {
  #awards-banner ul#awards-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
  }
}

@media screen and (max-width: 768px) {
  #awards-banner ul#awards-list {
    grid-template-columns: 1fr;
  }

  #awards-banner ul#awards-list > li + li {
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--dark-text) 40%, transparent);
  }
}

#awards-banner ul#awards-list h4 {
  margin-block: 0 0.5rem;
  line-height: 1.2;
}

#awards-banner ul#awards-list p {
  font-size: 0.8rem;
}

#awards-banner ul#awards-list .author-list {
  padding: 0;
}

#awards-banner .awarded-authors {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

#awards-banner .awarded-authors li {
  display: inline;
}

#awards-banner .awarded-authors li:nth-last-child(2) .name:before {
  content: ' and ';
}

#awards-banner .awarded-authors li:nth-last-child(2) .name:after {
  content: '';
}

#awards-banner .awarded-authors li:last-child {
  display: block;
  position: relative;
  margin-top: 0.5rem;
}
#awards-banner .awarded-authors li:last-child:before {
  position: absolute;
  content: '';
  left: 0;
  width: 6rem;
  border-top: 1px solid color-mix(in srgb, var(--dark-text) 40%, transparent);
}

#awards-banner .awarded-authors .name,
#awards-banner .awarded-authors li:before {
  font-size: 0.8rem !important;
}

#awards-banner .author-list .name {
  font-weight: 540;
}

#awards-banner .name:after {
  content: ', ';
}

#awards-banner .affiliation {
  font-style: italic;
  font-family: 'Lexend', sans-serif;
  opacity: 0.7;
  font-size: 0.82rem;
  font-weight: 500;
}

#awards-committee {
  font-style: italic;
  margin-top: 0.5rem;
}

#sigaccess-impact {
  margin-top: 0.5rem;
}

/* ─── 2027 Landing Page Update (Refined Layout) ─── */

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: auto;
  height: auto;
}

/* Global media responsiveness */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

/* Unused: old TBA-mode logo-only header and landing footer, kept for reference
   (the landing page now uses the shared menu.html / footer.html).

Logo-only landing page header, padded like .title-row-container:
.site-header {
  --menu-height: 4.5rem;

  position: relative;
  z-index: 50;
  min-height: var(--menu-height);
  padding: 0 max(2rem, 4vw);
  box-sizing: border-box;
  background-color: var(--nav-bg-color);
  box-shadow: 0 4px 24px 0 rgba(1, 57, 80, 0.35);
}

.site-header > a {
  display: flex;
  width: fit-content;
  height: var(--menu-height);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .site-header {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.4);
    background-color: #1a1f2b;
  }
}

@media only screen and (max-width: 1200px) {
  .site-header {
    --menu-height: 3.75rem;
  }
}

@media only screen and (max-width: 900px) {
  .site-header {
    padding: 0 max(1rem, 3vw);
  }
}

.site-header a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

Landing page had no footer illustration to overlap:
.landing-footer {
  margin-top: 0 !important;
}

Keep the lone footer link at least 24px tall (WCAG 2.5.8 target size):
.landing-footer .footer-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
*/

/* Text read by screen readers but not shown on screen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keep footer links at least 24px tall (WCAG 2.5.8 target size) */
.footer-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Title row container matching header left & right padding */
.title-row-container {
  width: 100%;
  max-width: 100%;
  padding-left: max(2rem, 4vw);
  padding-right: max(2rem, 4vw);
  padding-bottom: 84px; /* at least 80px space */
  box-sizing: border-box;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 0;
  width: 100%;
}

.title-row h1.conference-title,
h1.conference-title {
  font-family: 'Lexend', sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  font-weight: 700;
  color: var(--accent-color2, #003b4f);
  line-height: 1.25;
  margin: 0;
  padding: 0;
  text-align: left;
  flex: 1 1 auto;
}

.title-desktop-break {
  display: block;
}

.title-row .event-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.title-row .event-info,
h2.event-info {
  font-family: 'Lexend', sans-serif;
  color: var(--accent-color2, #003b4f);
  line-height: 1.25;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem) !important;
  font-weight: 700;
  text-transform: none !important;
  text-align: right;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

@media only screen and (max-width: 900px) {
  .title-row-container {
    padding-left: max(1rem, 3vw);
    padding-right: max(1rem, 3vw);
    padding-bottom: 40px;
  }

  .title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0;
  }

  .title-row .event-info-container,
  .title-row .event-info,
  h2.event-info {
    align-items: flex-start;
    text-align: left;
    white-space: normal;
    font-size: clamp(1.15rem, 3.5vw, 1.75rem) !important;
  }

  .title-desktop-break {
    display: inline;
  }
  .title-desktop-break::before {
    content: ' ';
  }
}

/* Full width panorama section with venue button */
.panorama-section {
  width: 100%;
  position: relative;
  margin-top: 0;
  margin-bottom: 56px;
  overflow: visible;
}

#hero-banner-img {
  width: 100%;
  height: auto;
  min-height: 200px;
  max-height: clamp(280px, 36vw, 620px);
  aspect-ratio: 2940 / 1044;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 'Check out the venue' button: 5px radius, overlapping top right on desktop,
   right edge lined up with the title row text (same side padding) */
.venue-btn {
  position: absolute;
  top: 0;
  right: max(2rem, 4vw);
  transform: translateY(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #003b4f;
  color: #ffffff !important;
  font-family: 'Lexend', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  height: 64px;
  padding: 0 2.4rem 0 2rem;
  border-radius: 5px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 59, 79, 0.3);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}

.venue-btn:hover {
  background-color: #002836;
  color: #ffffff !important;
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 6px 18px rgba(0, 59, 79, 0.45);
}

.venue-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
  box-shadow:
    0 0 0 3px #003b4f,
    0 0 0 6px #ffffff;
}

@media only screen and (max-width: 700px) {
  .panorama-section {
    margin-bottom: 32px;
  }

  #hero-banner-img {
    min-height: 220px;
    height: 220px;
  }

  .venue-btn {
    position: static;
    transform: none;
    margin: 1rem auto 0 auto;
    border-radius: 5px;
    min-height: 44px;
    height: 48px;
    padding: 0 1.8rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 2rem);
  }

  .venue-btn:hover {
    transform: translateY(-2px);
  }
}

/* Section wrapping Description Box and Footer Illustration as background layer */
.description-footer-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  /* Room for the visible top part of the footer illustration */
  padding-bottom: calc(100% * (1080 / 1920) * 0.25);
  box-sizing: border-box;
}

/* Container aligning description box to the left with header/title padding */
.description-box-container {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-left: max(2rem, 4vw);
  padding-right: max(2rem, 4vw);
  box-sizing: border-box;
  margin-bottom: calc(var(--footer-overlap) + 32px);
}

@media only screen and (max-width: 900px) {
  .description-box-container {
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
  }
}

/* Text boxes */
.highlighted-block,
.main-description-box {
  background-color: var(--box-bg) !important;
  color: var(--box-text-color) !important;
  border: 4px solid #003b4f !important;
  border-radius: 1.25rem;
  opacity: 1 !important;
}

.highlighted-block h2,
.highlighted-block h3,
.highlighted-block p,
.highlighted-block span,
.highlighted-block li,
.main-description-box p {
  color: var(--box-text-color) !important;
}

.highlighted-block a,
.main-description-box a {
  color: var(--box-text-color) !important;
}

/* Main description box: full width of the padded container */
.main-description-box {
  position: relative;
  z-index: 3;
  background-color: var(--box-bg);
  color: var(--box-text-color);
  border: none !important;
  border-radius: 0;
  padding: 40px;
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 59, 79, 0.08);
}

.main-description-box p {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--box-text-color);
  padding: 0;
  margin: 0;
  max-width: 100%;
  background-color: transparent;
}

/* Volunteer announcement: square box like the description box, no outline, with shadow */
.announcement-wrapper {
  position: relative;
  margin-bottom: calc(2.5rem + 32px); /* room for the button overlapping the bottom edge */
}

.description-box-container #announcement-block {
  background-color: var(--box-bg);
  color: var(--box-text-color);
  border: none;
  border-radius: 0;
  padding: 40px 40px 56px; /* extra bottom space so the overlapping button clears the text */
  margin: 0;
  box-shadow: 0 8px 24px rgba(0, 59, 79, 0.16);
}

.description-box-container #announcement-block h3 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--box-text-color);
  margin: 0 0 0.75rem;
}

.description-box-container #announcement-block p {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--box-text-color);
  margin: 0;
  padding: 0;
}

/* Interest form button: same look as the venue button, overlapping the box's bottom-right edge */
.interest-btn {
  top: auto;
  bottom: 0;
  right: 0;
  transform: translateY(50%);
}

.interest-btn:hover {
  transform: translateY(calc(50% - 2px));
}

@media (prefers-color-scheme: dark) {
  .description-box-container #announcement-block {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

@media only screen and (max-width: 900px) {
  .description-box-container #announcement-block {
    padding: clamp(20px, 4vw, 24px);
  }
}

/* On phones the button sits below the box, like the venue button */
@media only screen and (max-width: 700px) {
  .announcement-wrapper {
    margin-bottom: 2rem;
  }

  .interest-btn,
  .interest-btn:hover {
    transform: none;
  }
}

/* Decorative footer illustration as background layer on desktop */
.footer-illustration-bg,
.footer-illustration-bg img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.footer-illustration-bg img {
  position: static;
}

@media only screen and (max-width: 900px) {
  .description-footer-section {
    padding-bottom: 0;
    overflow: visible;
  }

  .description-box-container {
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
    margin-bottom: 0;
  }

  .footer-illustration-bg {
    position: relative;
    margin-top: -14vw;
  }

  .main-description-box {
    padding: clamp(20px, 4vw, 24px);
    gap: 1rem;
    max-width: 100%;
    width: 100%;
  }

  .main-description-box p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Footer layout */
#footer-container {
  margin: 0;
  padding: 0;
}

footer {
  position: relative;
  z-index: 2;
  /* Previously every page's footer overlapped the content above it, which hid the end
     of content pages; now only the home page overlaps (its footer illustration):
  margin-top: calc(-1 * var(--footer-overlap)) !important;
  */
  margin-top: 0 !important;
  margin-bottom: 0;
  padding-bottom: 2rem;
  min-height: auto;
  background-color: var(--footer-color) !important;
  color: white;
  overflow: hidden;
}

/* Home page: footer slides up over the bottom of the footer illustration */
#footer-container.overlaps-illustration footer {
  margin-top: calc(-1 * var(--footer-overlap)) !important;
}

@media only screen and (max-width: 900px) {
  footer picture {
    width: 14rem;
    height: auto;
    max-width: 100%;
  }

  footer picture img {
    width: 14rem;
    max-width: 100%;
    height: auto;
  }

  .footer-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .footer-menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  .footer-menu li ul li + li,
  .footer-menu li ul {
    margin-top: 0.25rem;
  }
}


/* ==========================================================================
   Accessibility Utilities (WCAG 2.2 AA)
   ========================================================================== */

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background-color: var(--nav-bg-color, #013950);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid #f6deb8;
  outline-offset: 2px;
}

/* Main focus outline reset when activated by skip link */
main:focus {
  outline: none;
}

/* Enhanced focus-visible indicators */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--text-color, #013950);
  outline-offset: 2px;
}

footer a:focus-visible,
#nav-container a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

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

/* ==========================================================================
   Navy dark mode (all pages; overrides the earlier generic dark values)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #072436;
    --text-color: #eef5f8;
    --accent-color2: #9ed0e6;
    --nav-bg-color: #031824;
    --footer-color: #031824;
    --light-text: #eef5f8;

    /* Text boxes: a lifted blue panel instead of beige */
    --box-bg: #0f3d55;
    --box-text-color: #eef5f8;

    /* Light pattern lines so the arches stay visible on navy */
    --pattern-line-color: #bfe3f0;
    --pattern-opacity: 0.14;
  }

  nav {
    background-color: var(--nav-bg-color);
  }

  .main-description-box {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }

  a:focus-visible {
    outline-color: #ffffff;
  }

  .venue-btn {
    background-color: var(--box-bg);
    border: 2px solid var(--accent-color2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }

  .venue-btn:hover {
    background-color: #155070;
  }
}

/* ==========================================================================
   TBA mode (<body class="tba-mode">): only the background, "ASSETS 2027"
   and "To be announced". Remove the class to restore the full landing page.
   ========================================================================== */

body.tba-mode .skip-link,
body.tba-mode #nav-container,
body.tba-mode #footer-container,
body.tba-mode .landing-full {
  display: none;
}

.tba-hero {
  display: none;
}

body.tba-mode .tba-hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem max(1rem, 4vw);
  box-sizing: border-box;
  text-align: center;
}

.tba-title {
  font-family: 'Lexend', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 11vw, 10rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--accent-color2, #013950);
  margin: 0;
}

.tba-subtitle {
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 3rem);
  line-height: 1.2;
  color: var(--accent-color2, #013950);
  margin: clamp(0.75rem, 2vw, 1.5rem) 0 0;
  padding: 0;
}