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

:root {
  --text-color: black;
  --bg-color: #f8f3e4;
  --inverted-text: white;
  --accent-color: black;
  --accent-color2: black;
  --footer-color:  #8DAA91;
  --default-wght: 400;
  --dark-text: var(--text-color);
  --light-text: white;

  --content-width: 1280px;
  --day-header-height: 2rem;
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #003b1f;
    --text-color: #f4f4df;
    --inverted-text: var(--bg-color);
    --accent-color: #ffde00;
    --accent-color2: #9e8bfb; /*#7e65fe;*/
    --dark-accent-color2: #7e65fe;
    --footer-color: #8154fd;
    --default-wght: 460;
    --dark-text: var(--bg-color);
    --light-text: #ffffff;
  }
}

html {
  font-size: 18px;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Roboto', serif;
  font-optical-sizing: auto;

  min-height: 100vh;
}

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

  padding: max(var(--menu-padding), 2vw) max(var(--menu-padding), 50vw - var(--content-width) / 2);

  display: grid;
  align-items: center;
  grid-template-columns: auto auto auto;
  row-gap: 2rem;

  --inner-pad: 1ch;
}

#nav-logo {
  display: flex;
  align-items: center;

  justify-self: start;
}

#nav-logo img {
  display: block;
  width: 18rem;
  max-width: calc(100vw - 3rem - 4rem); /* avoids overlap of padding and hamburger */
}

@media screen and (max-width: 1280px) {
  #nav-logo img {
    width: 14rem;
  }
}
@media screen and (max-width: 1152px) {
  #nav-logo img {
    width: 12rem;
  }
}

@media screen and (max-width: 1024px) {
  #nav-logo img {
    width: 10rem;
  }
}

@media only screen and (max-width: 768px) {
  nav {
    --menu-padding: 1rem;
  }
  #nav-logo img {
    width: 18rem;
  }
}

nav ul.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.5ch;
  padding: 0;

  grid-column: 3;
  justify-self: end;

  --link-color: var(--accent-color);

  position: relative;
}

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

  --inner-pad: 1ch;
  --link-color: var(--accent-color2);

  display: flex;
  flex-direction: column;

  width: max-content;

  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;

  background-color: white;

  border-radius: calc(var(--inner-pad) / 4);
  box-shadow:
    color-mix(in srgb, var(--dark-text), transparent 95%) 0px 6px 24px 0px,
    color-mix(in srgb, var(--dark-text), transparent 92%) 0px 0px 0px 1px;

  overflow: hidden; /* hides rounded corners of first and last menu items */

  z-index: 3;
}

nav ul.secondary-menu li:hover a {
  background-color: var(--link-color);
  color: var(--light-text);
}

nav ul.secondary-menu li a,
nav ul.main-menu li a {
  font-family: 'Roboto', sans-serif;
  text-decoration: underline;
  transition: text-decoration-color 2s ease 1s;
}

nav ul.secondary-menu li a:not(.no-root-link),
nav ul.main-menu li a:not(.no-root-link) {
  text-decoration-color: color-mix(in srgb, var(--link-color), transparent 30%);
}
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 {
  padding: 0 calc(var(--inner-pad) * 0.9);
  font-size: 1rem;
  color: var(--text-color);
}

@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: var(--dark-text);
  font-size: 0.85rem;
  --inner-pad: 1.5ch;
  padding: calc(var(--inner-pad) * 2 / 3) var(--inner-pad);
  font-weight: 450;
  width: 100%;
}

nav ul.main-menu > li.selected-link {
  background-color: var(--link-color);
  /* padding-left: 1ch; */
  border-color: var(--link-color);
}
@media screen and (max-width: 768px) {
  nav ul.main-menu > li.selected-link {
    padding: 1ch;
  }
}

nav ul.main-menu > li.selected-link > a {
  text-decoration-color: transparent;
  color: var(--inverted-text);
}

@media only screen and (min-width: 768px) {
  nav ul.main-menu > li:hover,
  nav ul.main-menu > li.open,
  nav ul.main-menu > li.selected-link {
    background-color: var(--link-color);
    border-color: var(--link-color);
    transition: background-color 0.05s ease;
  }

  nav ul.main-menu > li:hover .submenu-toggle > span:before,
  nav ul.main-menu > li.open .submenu-toggle > span:before,
  nav ul.main-menu > li.selected-link .submenu-toggle > span:before {
    border-color: var(--inverted-text);
  }

  nav ul.main-menu > li:hover > a,
  nav ul.main-menu > li.open > a,
  nav ul.main-menu > li.selected-link > a {
    text-decoration-color: transparent;
    transition: text-decoration-color 0.05s ease;
    color: var(--inverted-text);
  }
}

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: 768px) {
  ul.main-menu li ul {
    visibility: hidden;
    opacity: 0;
  }
}

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

.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(--text-color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: translateY(-2px) rotate(45deg);
}

#menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  justify-self: end;

  height: 2rem;
  width: 2rem;

  grid-column: 2;

  position: fixed;
  right: 2rem;
  top: 1.5rem;
  z-index: 2;
}

.hamburger {
  width: 2rem;
  height: 0.25rem;
  background-color: var(--text-color);
  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: var(--text-color);
  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: 768px) {
  #menu-container {
    grid-column: 3;
    justify-self: flex-end;
  }

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

@media only screen and (max-width: 768px) {
  #menu-toggle {
    display: block;
    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(--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;
  }

  #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%);
  }

  nav ul.secondary-menu {
    background-color: transparent;
    width: 100%;
  }

  nav .has-submenu.selected-link ul.secondary-menu li a {
    color: var(--light-text);
    text-decoration: none;
  }

  @media (prefers-color-scheme: dark) {
    nav .has-submenu.selected-link ul.secondary-menu li:not(:hover) a {
      color: var(--dark-text);
    }

    nav .has-submenu:not(.selected-link) ul.secondary-menu li:not(:hover) a {
      color: var(--light-text);
    }
  }

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

  .submenu-toggle {
    display: none;
  }

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

  nav ul.secondary-menu {
    position: static; /* Remove absolute positioning */
    box-shadow: none;
  }

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

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

  li.has-submenu > a:before {
    content: '>';
    display: inline-block;
    padding-right: 0.5ch;
  }

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

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

.content-block-container {
  padding: 0 max(2rem, 50vw - var(--content-width) / 2);
  min-height: 40vh;
}

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

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

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

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

@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 {
  font-family: 'Roboto', sans-serif;
  color: var(--accent-color);
  line-height: 1.3;
  font-size: 1.4rem;
  text-align: right;
}

#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 {
    text-align: left;
    margin-bottom: 1rem;
  }

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

p {
  line-height: 1.6;
  font-weight: var(--default-wght);
  max-width: var(--contentWidth);
}
.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,
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: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.grid-helper.colored-boxes > .grid-item,
.highlighted-block {
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);

  --text-color: var(--dark-text);
  color: var(--text-color);
}

.highlighted-block {
  padding: 1rem;
}

@media (prefers-color-scheme: dark) {
  .highlighted-block a {
    color: var(--dark-accent-color2) !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 picture {
  width: 18rem;
}

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

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

@media only screen and (max-width: 768px) {
  footer picture {
    width: 100%;
    max-width: 20rem;
  }
  .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;
}

.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: 'Roboto', sans-serif;
}

.cta {
  background-color: var(--accent-color2);
  font-family: 'Roboto', 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: 50vh;
  margin-top: 10rem;
  background-color: var(--footer-color);
  color: white;
  padding-top: 2rem;
}

footer p {
  font-weight: 600;

  font-family: 'Roboto', sans-serif;
}

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

.text-block {
  grid-column: 3 / span 8;
}

.text-block h2 {
  margin-block: 4rem 1rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.text-block h3,
h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;

  margin-block: 3rem 1rem;
}

.text-block h3 {
  text-transform: uppercase;
  font-weight: 700;
}

.text-block h4 {
  font-weight: 480;
}

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

.text-block ul,
.text-block ol {
  padding: 0;
  display: flex;
  flex-direction: column;
  padding-block: 0.5rem;
  gap: 0.5rem;
  list-style-position: outside;
  --bullet-margin: 1ch;
  width: calc(100% + var(--bullet-margin));
  position: relative;
  left: calc(var(--bullet-margin) * -1);
}

.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: 'Roboto', 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: 1rem;
}

.text-block #updates li {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: min-content auto; */
}

.text-block .updates-dates {
  font-family: 'Roboto', sans-serif;
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  display: block;
}

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

.quote {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  text-align: left;
}
.quote .author {
  font-family: 'Besley', 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;

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

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: 'Roboto', 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: 'Roboto', 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: 'Roboto', 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: 'Roboto', 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: 'Roboto', 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: 'Roboto', 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;
}

.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: 'Roboto', 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: 'Roboto', 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-color);
  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: 'Roboto', 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: 'Roboto', 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: 'Roboto', 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-color);
  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(--bg-color);
  z-index: 3;
  height: var(--day-header-height);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.day-header-container .day-header {
  margin: 0;
  border: none;
  padding: 0;
  position: static;
  background: none;
  height: auto;
}

.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: color-mix(in srgb, var(--inverted-text) 50%, transparent);
  color: var(--accent-color) !important;

  text-decoration: none;
  border-radius: 0.25rem;
  font-size: 1.3rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.day-nav-btn:hover {
  background-color: var(--inverted-text) !important;
}

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

.time-slot {
  margin-bottom: 2rem;
  border: 1px solid color-mix(in srgb, var(--light-text) 30%, transparent);
  border-radius: 0.5rem;
  overflow: visible;
  background-color: color-mix(in srgb, var(--accent-color2), transparent 85%);
}

.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-color);
  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), transparent 10%);
}

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

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

.time-range {
  font-family: 'Roboto', 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: color-mix(in srgb, var(--light-text) 80%, transparent);
  color: var(--accent-color2);
  font-family: 'Roboto', sans-serif;
}

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

.paper-tag.honorable-tag::before {
  content: '';
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  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="%233366b8" 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>');
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

@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="%237e65fe" 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-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: 'Roboto', 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.lunch-session {
  background-color: color-mix(in srgb, var(--text-color), transparent 10%);
  color: var(--light-text);
  text-align: left;
}
.schedule-grid-td.lunch-session .session-type {
  color: var(--light-text);
}
.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;
}
.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-color);
  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: 'Roboto', 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;
}

/* 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(--text-color), transparent 10%);
  color: var(--light-text);
  text-align: left;
}
.schedule-grid-td.lunch-session .session-type {
  color: var(--light-text);
}
.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-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-color);
  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: 'Roboto', 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: 'Roboto', 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: 'Roboto', 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;
}

/* Small reusable pill used for displaying a date/time block (used on poster pages)
   Matches the schedule's blue background and becomes full-width on small screens */
.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;
}
.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: 'Roboto', 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;
  }
}

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