:root {
  --header-height: 110px;
}

body {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  color: #181A18;
  font-size: 20px;
  line-height: 1.5;
  background-color: #FFFEEF;
}

section + section,
section + footer {
  margin-top: 40px;
}

.tiles + .tiles {
  margin-top: 0;
}

h1 {
  max-width: 220px;
  flex-shrink: 0;
}

h1 img {
  width: 220px;
  height: auto;
  display: block;
}

  section.text-section p.nyt {
    font-size: 36px;
  }

@media (min-width: 741px) {
  h1 {
    max-width: 320px;
  }

  h1 img {
    width: clamp(200px, 27vw, 320px);
  }
}

a {
  text-decoration: none;
  color: #E70209;
  font-size: 16px;
}

p a,
li a,
.footer-right a {
  font-size: inherit;
}

.nav-left a,
.nav-right a {
  font-size: 20px;
}

header {
  height: var(--header-height);
  display: flex;
  align-items: center;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  width: 100%;
  height: 100%;
  font-family: "Space Grotesk", sans-serif;
  position: relative;
}

.nav-toggle {
  display: none;
}

.hamburger-label {
  display: none;
  cursor: pointer;
}

.hamburger-label img {
  width: 28px;
  height: 28px;
  display: block;
}

.nav-links {
  display: contents;
}

.nav-left {
  order: 1;
}

h1 {
  order: 2;
}

.nav-right {
  order: 3;
}

nav h2 {
  font-weight: 400;
  margin: 0;
}

.hero {
  position: relative;
  height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  padding: 0 40px;
}

.hero-logo {
  max-width: 280px;
  margin-bottom: 24px;
}

.hero-logo.eggo {
  max-width: 280px;
  margin-bottom: 24px;
  display: none;
}

.hero-text {
  color: #FFFEEF;
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 32px;
  line-height: 1.5;
}

/* .nav-top {
  background-image: url(hero.jpg);
  background-size: cover;
  background-position: center center;
  height: 600px;
} */

.nav-left a {
 margin-right: 20px;
}

.nav-right a {
  margin-left: 20px;
}

.selected {
  border-bottom: 1px solid #E70209;
}

hr {
    display: block;
    height: 2px;
    border: 0;
    border-top: 2px solid rgb(27, 27, 27);
    /* margin: 1em 0; */
    padding: 0;
}

.about {
  display: flex;
}

.about div {
  width: 100%;
}

.tiles {
    align-items: center;
  display: flex;
  justify-content: center;
}

.tile {
  /* background-color: #2c9bff; */
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.tile a {
  display: block;
  position: relative;
}

.tile-photo {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter 0.6s ease;
}

.tile a:hover .tile-photo {
  filter: grayscale(0%);
}

.tile-photo-edge {
  filter: grayscale(100%) brightness(40%);
}

.tile img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 741px) {
  nav {
    padding: 0 40px;
  }

  .tiles-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tiles {
    max-height: 50%;
    overflow: hidden;
  }

  .tile {
    max-height: 100%;
    overflow: hidden;
  }

  .tile a {
    max-height: 100%;
    overflow: hidden;
  }
}

.about-text {
  background-color: #FFFEEF;
  padding-top: 60px;
  padding-left: 100px;
  padding-right: 100px;
  text-align: center;
}

.about-text p {
  padding-bottom: 60px;
}

.campaign-text {
  background-color: #FFFEEF;
  padding-top: 60px;
  padding-left: 100px;
  padding-right: 100px;
  text-align: center;
  padding-bottom: 60px;
  max-width: 780px;
  margin: 0 auto;
}

.campaign-text h2 {
  font-size: 30px;
  text-decoration: underline;
}

.campaign-text p {
  text-align: left;
}

.credits {
  text-align: center;
  padding: 40px 20px 60px;
}

.credits a {
  font-size: inherit;
}

.film-slideshow {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 40px 20px;
}

.film-viewport {
  overflow: hidden;
}

.film-track {
  display: flex;
  transition: transform 0.5s ease;
}

.film-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.film-slide h2 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  margin: 0 0 8px;
}

.film-subtitle {
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  margin: 0 0 24px;
}

.film-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #181A18;
}

.film-video iframe,
.film-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.film-slide p {
  font-size: 18px;
  text-align: left;
  margin: 16px 0 0;
}

.film-video + p {
  margin-top: 24px;
}

.film-slide em {
  font-style: italic;
  font-synthesis: weight style;
}

.film-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

.film-nav-btn {
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #E70209;
  transition: opacity 0.2s ease;
}

.film-nav-btn:hover {
  opacity: 0.6;
}

.film-link {
  text-align: center;
  padding: 0 20px 80px;
}

.film-link a {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .film-track {
    transition: none;
  }
}

.campaign-heading-plain {
  font-size: 30px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.inline-logo {
  height: 1.15em;
  width: auto;
  vertical-align: -0.15em;
  display: inline;
  margin: 0 6px;
}

h3 {
  font-size: 40px;
  font-weight: 700;
}

.resume-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 100px;
}

.resume-image {
  width: 100%;
  max-width: 850px;
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.resume-download-btn {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 36px;
  background-color: #E70209;
  color: #FFFEEF;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

.resume-download-btn:hover {
  opacity: 0.85;
}

.campaign-section {
  padding-left: 20px;
  padding-right: 20px;
}

.campaign-logo {
  max-width: 400px;
  margin: auto;
  margin-bottom: 50px;
}

.campaign-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-section img {
  width: 100%;
  height: auto;
  display: block;
}

.split-section {
  display: flex;
  align-items: stretch;
}

.split-image {
  flex: 1 1 50%;
  min-width: 0;
}

.split-image-60 {
  flex: 1 1 60%;
}

.split-text-40 {
  flex: 1 1 40%;
}

.overlap-section {
  position: relative;
}

.overlap-base {
  width: 100%;
  height: auto;
  display: block;
}

.overlap-top {
  position: absolute;
  top: 62%;
  right: 8%;
  width: 22%;
  max-width: 320px;
  transform: translateY(-50%) rotate(8deg);
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.polaroid-image img {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  transform: rotate(-15deg);
  display: block;
}

.polaroid-image.tilt-right img {
  transform: rotate(15deg);
}

.trio-section {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 60px 100px;
}

.trio-section img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
  display: block;
}

.split-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 80px;
}

.split-logo {
  max-width: 280px;
  width: 100%;
  height: auto;

  display: block;
  margin-bottom: 30px;
}

.about-section .split-text {
  text-align: left;
  align-items: flex-start;
  font-size: 14px;
}

.about-section .split-text a {
  font-size: inherit;
}

.about-intro {
  font-size: 18px;
}

.about-list {
  padding-left: 20px;
  margin: 20px 0;
}

.about-list li {
  margin-bottom: 12px;
}

.about-photo {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  padding: 40px 20px 20px 20px;
}

.split-text p {
  align-self: stretch;
  text-align: left;
}

.split-heading {
  align-self: stretch;
  text-align: left;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 20px;
}

.split-heading strong {
  font-weight: 700;
}

.text-section {
  padding: 60px 100px;
  text-align: center;
}

.text-section p{
  text-align: left;
}

.section-heading {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto;
}

.location-heading {
  text-align: left;
  font-weight: 400;
  font-family: "Unbounded", sans-serif;
  font-size: 22px;
  padding: 0 40px;
  margin: 0 0 20px;
}

.location-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.announcement-photo {
  padding: 0 100px;
}

.announcement-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.campaign-slide {

}

/* .about-h3 {
  padding-bottom: 100px;
} */

footer {
  background-color: #FFFEEF;
  padding: 0px 15px 15px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  font-family: "Space Grotesk", sans-serif;
}

@media (max-width: 400px) {

  section.hero p.hero-text {

  }

}

@media (min-width: 741px) {
  footer {
    padding: 25px 40px;
  }
}

.footer-left {
 margin-right: 20px;
 display: flex;
 gap: 20px;
}

.footer-right-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.scroll-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 12px 6px;
  margin: -12px -12px -12px -6px;
}

.scroll-top-btn img {
  width: 16px;
  height: auto;
  display: block;
}

.footer-left img {
  max-width: 30px;
}

.footer-right {
  margin-left: 20px;
  text-align: right;
  color: #E70209;
  font-size: 16px;
  font-weight: 400;
}

.campaign-text {
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 60px;
  max-width: 780px;
}

@media (max-width:1070px) {
  .about-h3 {
    padding-bottom: 50px;
  }

  .about-text p {
    font-size: 16px;
  }
}

@media (max-width:920px) {

  :root {
    --header-height: 80px;
  }

  .nav-top {
    height: 80px;
  }

  .about-h3 {
    font-size: 32px;
    padding-bottom: 30px;
  }

  .about-text {
    padding-top: 40px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }

  .about-text p {
    font-size: 14px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

@media (max-width:740px) {
  /* .about {
    flex-direction: column-reverse;
  } */

  .nav-left a,
  .nav-right a {
    font-size: 16px;
  }

  .resume-section {
    padding: 40px 20px;
  }

  .film-slideshow {
    padding: 30px 20px 10px;
  }

  .film-slide h2 {
    font-size: 24px;
  }

  .film-subtitle {
    font-size: 16px;
  }

  .film-slide p {
    font-size: 16px;
  }

  .film-nav-btn {
    font-size: 24px;
  }

  .hamburger-label {
    display: block;
    order: 1;
  }

  h1 {
    order: 0;
    margin: 0;
  }

  .nav-links {
    display: none;
  }

  nav:has(.nav-toggle:checked) .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFFEEF;
    padding: 24px 30px;
    z-index: 20;
  }

  .nav-links .nav-left,
  .nav-links .nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nav-links .nav-left a,
  .nav-links .nav-right a {
    margin-left: 0;
    margin-right: 0;
  }

  .about-text {
    padding-bottom: 40px;
  }

  .tiles {
    flex-direction: column;
  }

  .tiles .tile:first-child,
  .tiles .tile:last-child {
    display: none;
  }

  .tile-photo {
    filter: none;
  }

  .trio-section {
    flex-direction: column;
    padding: 40px 30px;
  }

  .split-section {
    flex-direction: column;
  }

  .split-text {
    padding: 40px 30px;
  }

  .split-image {
    order: -1;
  }

  .about-section .split-text {
    order: 0;
  }

  .about-section .split-image {
    order: -1;
  }

  .polaroid-image {
    order: -2;
    margin-bottom: 30px;
  }

  .announcement-photo {
    padding: 0;
  }

  .announcement-photo img {
    border-radius: 0;
  }
}

@media (max-width: 600px) {
    .hero-content {
    max-width: 100%;
  }

  .hero-text {
    font-size: 16px;
  }
}

@media (max-width:570px) {

  a {
    font-size: 10pt;
  }

  footer {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .footer-left {
    margin-right: 0;
    gap: 16px;
  }

  .footer-right {
    margin-left: 0;
  }

  .footer-right-group {
    gap: 14px;
    margin-left: auto;
  }

  body {
    background-color: #FFFEEF;
  }

  nav {
    padding: 0 10px;
  }

  /* .hero-content {
    max-width: 85%;
  } */

  .hero-text {
    font-size: 16px;
  }

  .hero-logo.eggo {
  display: block;
}

  section.text-section p.nyt {
    font-size: 28px;
  }

  .about-text {
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .about-text p {
    padding-bottom: 15px;
  }
}

@media (max-width:570px) {

  .campaign-text {
  padding-left: 30px;
  padding-right: 30px;
}

section.campaign-section div.campaign-text {
  padding-top: 30px;
  padding-bottom: 30px;
}

section.campaign-section div.campaign-logo {
  padding: 30px;
}

section.campaign-section h2.campaign-heading-plain {
     font-size: 18px;
     text-align: left;
}

  .campaign-text p {
  font-size: 16px;
}

  div.split-text p{
      font-size: 16px;
}

  div.split-text h2 {
    font-size: 32px;
  }

  div.campaign-text h3 {
        font-size: 36px;
  }

  section.text-section {
    padding-left: 50px;
    padding-right: 50px;
  }

    section.text-section {
      padding-top: 20px;
      padding-bottom: 20px;
    }

  section.text-section h2.section-heading {
    font-size: 24px;
  }

   section.text-section p {
    font-size: 16px;
  }
}

@media (min-width:570px) {

  .filters-list {
    display: block !important;
  }
}

.film-watch-link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.film-watch-link > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.film-watch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  transition: background 0.3s ease;
}

.film-watch-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFEEF;
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  text-align: center;
}

.film-watch-logo {
  width: 40%;
  max-width: 260px;
  height: auto;
  margin-top: 12px;
}

.film-watch-link:hover > img {
  transform: scale(1.03);
}

.film-watch-link:hover::after {
  background: rgba(0,0,0,0.2);
}

@media (max-width:740px) {
  .film-watch-text {
    font-size: 16px;
  }
}

/* ===== Eggo Connections game ===== */

.eggo-game-crop {
  width: 100%;
}

.eggo-game {
  position: relative;
  width: 100%;
}

.split-image .eggo-game img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.eggo-game-board {
  position: absolute;
  left: 22.13%;
  top: 32.92%;
  width: 55.74%;
  container-type: inline-size;
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.2;
  color: #181A18;
}

.eggo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc((100cqw - 7.8cqw) / 4);
  gap: 2.6cqw;
}

.eggo-tile {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  border: 0;
  padding: 1cqw;
  border-radius: 1.7cqw;
  background: #F8C85E;
  color: #DA291C;
  font-family: inherit;
  font-weight: 800;
  font-size: 3.6cqw;
  line-height: 1.15;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.eggo-tile.is-long {
  font-size: 3.2cqw;
}

.eggo-tile.is-longer {
  font-size: 2.8cqw;
}

.eggo-tile[aria-pressed="true"] {
  background: #DA291C;
  color: #F8C85E;
}

.eggo-tile:active {
  transform: scale(0.96);
}

.eggo-tile.is-jump {
  animation: eggo-jump 0.3s ease;
}

.eggo-tile.is-shake {
  animation: eggo-shake 0.4s ease;
}

.eggo-solved {
  grid-column: 1 / -1;
  border-radius: 1.7cqw;
  padding: 0 3cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eggo-solved.is-new {
  animation: eggo-pop 0.35s ease-out;
}

.eggo-solved-name {
  font-weight: 800;
  font-size: 3.8cqw;
  text-transform: uppercase;
}

.eggo-solved-words {
  font-size: 3.4cqw;
  margin-top: 0.8cqw;
}

.eggo-solved--syrup {
  background: #274ba3;
  color: #FFF;
}

.eggo-solved--sky {
  background: #00abbc;
  color: #FFF;
}

.eggo-solved--lemon {
  background: #FFE45C;
  color: #181A18;
}

.eggo-solved--steel {
  background: #cd253f;
  color: #FFFFFF;
}

.eggo-toast {
  position: absolute;
  top: -9cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: #181A18;
  color: #FFFFFF;
  font-size: 3.6cqw;
  padding: 1.8cqw 3.6cqw;
  border-radius: 1.2cqw;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.eggo-toast.is-visible {
  opacity: 1;
}

.eggo-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  min-height: 5cqw;
  margin-top: 5.2cqw;
  font-size: 3.7cqw;
  color: #5E5E5E;
  text-align: center;
}

.eggo-dots {
  display: flex;
  gap: 2.6cqw;
}

.eggo-dot {
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: #5C606A;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.eggo-dot.is-used {
  transform: scale(0);
  opacity: 0;
}

.eggo-controls {
  display: flex;
  justify-content: center;
  gap: 2.9cqw;
  margin-top: 6.4cqw;
}

.eggo-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  height: 13cqw;
  padding: 0 5cqw;
  border: 1px solid #181A18;
  border-radius: 999px;
  background: #FFFFFF;
  color: #181A18;
  font-family: inherit;
  font-size: 3.9cqw;
  font-weight: 500;
  cursor: pointer;
}

.eggo-btn:disabled {
  border-color: #8A8A8A;
  color: #8A8A8A;
  cursor: default;
}

.eggo-btn--primary:not(:disabled) {
  background: #181A18;
  color: #FFFFFF;
}

.eggo-tile:focus-visible,
.eggo-btn:focus-visible {
  outline: 2px solid #181A18;
  outline-offset: 2px;
}

@keyframes eggo-jump {
  50% { transform: translateY(-2.5cqw); }
}

@keyframes eggo-shake {
  20%, 60% { transform: translateX(-1.5cqw); }
  40%, 80% { transform: translateX(1.5cqw); }
}

@keyframes eggo-pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eggo-tile.is-jump,
  .eggo-tile.is-shake,
  .eggo-solved.is-new {
    animation: none;
  }
}

/* On phones, crop the white space around the mockup so the game is bigger */
@media (max-width:740px) {
  .eggo-game-crop {
    overflow: hidden;
  }

  .eggo-game {
    width: 153%;
    margin: -26.6% 0 -26.6% -26.6%;
  }
}

/* ===== Tablet and mobile improvements ===== */

/* 1. Hamburger menu on tablets (920px and narrower) */
@media (max-width:920px) {
  .nav-left a,
  .nav-right a {
    font-size: 16px;
  }

  .hamburger-label {
    display: block;
    order: 1;
  }

  h1 {
    order: 0;
    margin: 0;
  }

  .nav-links {
    display: none;
  }

  nav:has(.nav-toggle:checked) .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFFEEF;
    padding: 24px 30px;
    z-index: 20;
  }

  .nav-links .nav-left,
  .nav-links .nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nav-links .nav-left a,
  .nav-links .nav-right a {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 2. Stack image-and-text sections on tablets */
@media (max-width:920px) {
  .split-section {
    flex-direction: column;
  }

  .split-text {
    padding: 50px 60px;
  }

  .split-image {
    order: -1;
  }

  .about-section .split-text {
    order: 0;
  }

  .about-section .split-image {
    order: -1;
  }
}

@media (max-width:740px) {
  .split-text {
    padding: 40px 30px;
  }
}

/* 3. Campaign heroes on phones turned sideways */
@media (orientation: landscape) and (max-height: 600px) {
  .hero {
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
  }

  .hero-content {
    margin-top: 0 !important;
  }

  .hero-logo {
    max-width: 180px;
    margin-bottom: 12px;
  }

  .hero-text {
    font-size: 18px;
  }
}

/* 4. Full-color home page tiles on touchscreens (no hover to reveal them) */
@media (hover: none) {
  .tile-photo {
    filter: none;
  }

  .tile-photo-edge {
    filter: grayscale(100%) brightness(40%);
  }
}

/* ===== Campaign page navigation (bottom of campaign pages) ===== */

.campaign-nav {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 20px 40px 60px;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 22px);
  line-height: 1.4;
  text-transform: uppercase;
}

.campaign-nav-list {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.campaign-nav-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.campaign-nav-list li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 0.4em;
  color: #181A18;
}

.campaign-nav a {
  color: #181A18;
  font-size: inherit;
  transition: color 0.2s ease;
}

.campaign-nav-list a:hover {
  color: #E70209;
}

.campaign-nav .selected {
  border-bottom: 2px solid #181A18;
}

.campaign-nav-arrow {
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.campaign-nav-arrow img {
  width: 1.4em;
  height: auto;
  display: block;
}

.campaign-nav-prev:hover {
  transform: translateX(-4px);
}

.campaign-nav-next:hover {
  transform: translateX(4px);
}

@media (max-width:740px) {
  .campaign-nav {
    font-size: 13px;
    gap: 12px;
    padding: 10px 20px 40px;
  }

  .campaign-nav-list {
    column-gap: 14px;
    row-gap: 6px;
  }

  .campaign-nav-list li:not(:last-child)::after {
    display: none;
  }

  .campaign-nav-arrow img {
    width: 26px;
  }
}

strong,
b {
  font-weight: 700;
}