:root {
  --sp: 4s;

  --burger-thickness: 4px;
  --navigation__transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  --base-color: white;
  --text-color: #000;
  --text-span: #83bbad;
  /* Light mode background gradient */
  --body-gradient-top: hsla(0, 0%, 100%, 0.95);
  /* almost white */
  --body-gradient-bottom: hsla(0, 0%, 100%, 0.35);
  /* light blue/gray */

  /* Light mode grid line color */
  --body-grid-line: rgba(0, 0, 0, 1);
  /* subtle dark lines */
  --gradient: linear-gradient(45deg, #3392ffa4, #6bdfff00, #8f88bb, #e3e4fa);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --shadow: 0 30px 100px rgba(148, 151, 189, 0.966);


  /* Step -1: 14.1667px → 16px */
  --step--1: clamp(0.8854rem, 0.8553rem + 0.1508cqi, 1rem);
  /* Step 0: 17px → 20px */
  --step-0: clamp(1.0625rem, 1.0132rem + 0.2467cqi, 1.25rem);
  /* Step 1: 20.4px → 25px */
  --step-1: clamp(1.275rem, 1.1993rem + 0.3783cqi, 1.5625rem);
  /* Step 2: 24.48px → 31.25px */
  --step-2: clamp(1.53rem, 1.4187rem + 0.5567cqi, 1.9531rem);
  /* Step 3: 29.376px → 39.0625px */
  --step-3: clamp(1.836rem, 1.6767rem + 0.7966cqi, 2.4414rem);


  /* Space 3xs: 4px → 5px */
  --space-3xs: clamp(0.25rem, 0.2336rem + 0.0822cqi, 0.3125rem);
  /* Space 2xs: 9px → 10px */
  --space-2xs: clamp(0.5625rem, 0.5461rem + 0.0822cqi, 0.625rem);
  /* Space xs: 13px → 15px */
  --space-xs: clamp(0.8125rem, 0.7796rem + 0.1645cqi, 0.9375rem);
  /* Space s: 17px → 20px */
  --space-s: clamp(1.0625rem, 1.0132rem + 0.2467cqi, 1.25rem);
  /* Space m: 26px → 30px */
  --space-m: clamp(1.625rem, 1.5592rem + 0.3289cqi, 1.875rem);
  /* Space l: 34px → 40px */
  --space-l: clamp(2.125rem, 2.0263rem + 0.4934cqi, 2.5rem);
  /* Space xl: 51px → 60px */
  --space-xl: clamp(3.1875rem, 3.0395rem + 0.7401cqi, 3.75rem);
  /* Space 2xl: 68px → 80px */
  --space-2xl: clamp(4.25rem, 4.0526rem + 0.9868cqi, 5rem);
  /* Space 3xl: 102px → 120px */
  --space-3xl: clamp(6.375rem, 6.0789rem + 1.4803cqi, 7.5rem);
  /* Space 4xl: 119px → 140px */
  --space-4xl: clamp(7.4375rem, 7.0921rem + 1.727cqi, 8.75rem);
  /* Space 5xl: 136px → 160px */
  --space-5xl: clamp(8.5rem, 8.1053rem + 1.9737cqi, 10rem);
  /* Space 6xl: 153px → 180px */
  --space-6xl: clamp(9.5625rem, 9.1184rem + 2.2204cqi, 11.25rem);
  /* Space 7xl: 170px → 200px */
  --space-7xl: clamp(10.625rem, 10.1316rem + 2.4671cqi, 12.5rem);


  --pt-serif-regular: "PT Serif",
    serif;
  --pt-serif-italic: "PT Serif Italic",
    serif;
  --font-weight-1: 400;
  --font-style-1: italic;


  --ff-monoton-regular: "Monoton",
    sans-serif;
  --font-weight-regular: 400;
  --font-style-regular: normal;
}

@layer support.demo {
  * {
    box-sizing: border-box;
    margin: 0;
  }
}

/*Dark mode overrides */
.darkmode {
  --base-color: #000;
  --text-color: #fff;
  --text-span: #83bbad;

  /* Light mode background gradient */
  --body-gradient-top: hsla(0, 0%, 3%, 0.95);
  /* almost white */
  --body-gradient-bottom: hsla(0, 0%, 3%, 0.35);
  /* light blue/gray */

  /* Light mode grid line color */
  --body-grid-line: rgba(255, 255, 255, 0.8);
  /* subtle dark lines */
}


body {
  background-color: var(--base-color);
  font-family: var(--pt-serif-italic);
  font-weight: var(--font-weight-1);
  font-style: var(--font-style-1);
  font-size: var(--step--1);
}

.bg-image {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 20vw;
  /* Decreased from 40vw */
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  object-fit: cover;
  z-index: 1000;
  opacity: 1;
  pointer-events: none;
}

body:before {
  opacity: 1;
  pointer-events: none;
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background:
    linear-gradient(to bottom,
      var(--body-gradient-bottom) 0%,
      var(--body-gradient-top) 100%),
    linear-gradient(90deg,
      var(--body-grid-line)0 1px,
      transparent 1px 30px) 100% 100% / 30px 30px,
    linear-gradient(180deg,
      var(--body-grid-line)0 1px,
      transparent 1px 30px) 100% 100% / 30px 30px;
  mask: linear-gradient(-100deg, transparent 0%, var(--body-grid-line))0%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
    background-position 0.3s ease-in-out;
  z-index: -1;
  overflow: hidden;
}

/* --------------------------------------- */

header {
  display: flex;
  justify-content: space-between;
}

header .h {
  padding: var(--space-xs) 0 0 var(--space-xs);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  /* Adds a bit of spacing between letters */
  color: var(--text-color);
}

header .h span {
  color: var(--text-span);
  /* Uses your accent color variable */
  font-size: var(--step-0);
  /* Slightly larger for emphasis */
  padding: var(--space-xs) 0 0 var(--space-3xs);
}

header .bars {
  position: relative;
  height: 3px;
  width: 20px;
  border-radius: 2px;
  background-color: #888888;
  margin-left: var(--space-s);
  display: none;
  cursor: pointer;
  z-index: 2000;
  /* Ensure it's above the nav links */
}

header .bars.is-active {
  margin-top: var(--space-xs);
  transform-origin: right;
  padding: 0 var(--space-xs) 0 var(--space-2xs);
  transition: transform 0.5s ease-in-out;
  /*transform: translateY(15px) rotate(45deg);*/
  transform: translate(0) rotate(45deg);
  cursor: pointer;
  z-index: 2000;
  /* Ensure it's above the nav links */
}

header .bars::after,
header .bars::before {
  position: absolute;
  content: "";
  height: 3px;
  left: 0;
  width: 20px;
  border-radius: 2px;
  background: #888888;
  cursor: pointer;
}

header .bars::after {
  bottom: 7px;
}

header .bars::before {
  top: 7px;
}

button {
  padding: var(--space-xs) var(--space-s) 0 0;
  background-color: var(--base-color);
  color: var(--text-color);
  cursor: pointer;
}

.theme-switch {
  width: var(--space-l);
  height: var(--space-l);
  /* Add height to match width */
  padding: 0;
  border: none;
  margin: var(--space-2xs) 0;
  /* Fix margin syntax */
  border-radius: 50%;
  background-color: var(--base-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 1%;
  right: 1%;
  z-index: 1001;
  /* Ensure it's clickable */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Add transition */
}

.theme-switch svg {
  fill: var(--text-color);
  transition: fill 0.3s ease;
  /* Transition SVG fill color */
}

.theme-switch svg:last-child {
  display: none;
}

.darkmode .theme-switch svg:first-child {
  display: none;
}

.darkmode .theme-switch svg:last-child {
  display: block;
}

main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.profile-title {
  font-size: var(--step-0);
  text-align: center;
  color: var(--text-color);
  padding: var(--space-3xs) var(--space-s);
  margin-block: var(--space-3xs) var(--space-s);
  background: var(--gradient);
  background-size: 400% 400%;
  animation: gradient var(--sp) linear infinite;
  border-radius: var(--space-l);
  box-shadow: var(--shadow);
  max-width: 25ch;
  /* limits width to about 16 characters */
  margin-inline: auto;
  /* centers the title */
  display: block;
  /* ensures margin works */
}

.burger-check {
  display: none;
}

.burger {
  display: block;
  position: fixed;
  top: var(--space-3xl);
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-l);
  height: var(--space-m);
  background: none;
  color: var(--text-color);
  padding: 0;
  cursor: pointer;
  z-index: 300;
  border: none;
}

.burger span {
  display: block;
  width: 100%;
  height: var(--burger-thickness, 4px);
  background: currentColor;
  margin: 3px 0;
  border-radius: 2px;
  transition: 0.3s;
  color: var(--text-color);
}

.burger::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.crew-details.burger {
  display: block;
  position: fixed;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-l);
  height: var(--space-m);
  background: none;
  color: var(--text-color);
  padding: 0;
  cursor: pointer;
  z-index: 300;
  border: none;
}

.crew-details.burger span {
  display: block;
  width: 100%;
  height: var(--burger-thickness, 4px);
  background: currentColor;
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.3s;
}

.crew-details .burger::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.burger-check:checked~.burger {
  border-bottom: var(--burger-thickness) solid transparent;
  transition: transform 0.5s, top 0.5s, opacity 0.5s;
  -webkit-transition: border-bottom 1s ease-in-out;
}

/* Navigation */
.navigation {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.burger-check:checked~.navigation {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.4s, max-height 0.5s ease-in;
  max-height: 100dvh;
}

.burger-check:checked~.navigation li {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(.45s * var(--i));
}

.navigation ul {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  list-style: none;
  box-shadow: var(--shadow);
  border-radius: var(--space-l);
  z-index: 200;
  opacity: 1;
  pointer-events: all;
  padding-inline: var(--space-l);
}

.navigation li {
  position: relative;
  box-shadow: var(--shadow);
  border-radius: var(--space-l);
  padding-inline: var(--space-2xl);
}

.navigation a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Stack SVG and text vertically, remove if you want them side by side */
  font-size: var(--step-0);
  color: var(--base-color);
  border-radius: var(--space-l);
}

.navigation svg {
  width: var(--space-l);
  height: var(--space-l);
  fill: var(--text-color);
  margin-bottom: 0.25em;
  color: white;
  /* Space between icon and text, adjust as needed */
}

.navigation a>span {
  display: block;
  text-align: center;
  color: var(--text-color);
}

@keyframes gradient {

  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.crew-details {
  display: none;
}

.section-title {
  font-size: var(--step-0);
  text-align: center;
  color: var(--text-color);
  padding: var(--space-3xs) var(--space-s);
  margin-block: var(--space-3xs) var(--space-s);
  background: var(--gradient);
  background-size: 400% 400%;
  animation: gradient var(--sp) linear infinite;
  border-radius: var(--space-l);
  box-shadow: var(--shadow);
  max-width: 25ch;
  /* limits width to about 16 characters */
  margin-inline: auto;
  /* centers the title */
  display: block;
  /* ensures margin works */
}

/* Fallback for browsers that do not support background-position animations */
@supports not (animation: gradient) {
  .section-title {
    background: linear-gradient(45deg, #33ffc9a4, #6bdfffa4, #453d78a4, #646593a4);
    background-size: 100%;
  }
}

.crew-details.genesis.show,
.crew-details.early.show,
.crew-details.beginnings.show,
.crew-details.ryerson.show {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  align-items: center;
  gap: var(--space-l);
  padding: var(--space-2xl) var(--space-2xs);
  margin-inline: auto;
  text-align: center;
}

.crew-details>* .row-text.text {
  color: var(--text-color);
  font-size: var(--step-0);
}

.crew-details>* .row-text .ya {
  font-size: var(--step-2);
  color: var(--text-color);
}

.crew-details .row-img>img {
  width: 350px;
  /* or your preferred size */
  height: auto;
  /* makes all images square and equal */
  max-width: 100%;
  /* responsive on small screens */
  object-fit: cover;
  /* crop to fit the box */
  border-radius: 50%;
  /* if you want them round */
  display: block;
  margin-inline: auto;
  box-shadow: var(--shadow);
}

@container (max-width: 768px) {
  .crew-details>* {
    grid-template-rows: auto;
    margin-inline: auto;
  }

  .crew-details.show .row-img>img {
    width: 180px;
    height: auto;
    border-radius: 50%;
    /* if you want them round */
    box-shadow: var(--shadow);
  }
}