/* ==========================================================================
   Home page (index.html)
   Reused site-wide: .home-topbar / .site-title are the shared header,
   restyled per page (position:fixed instead of absolute) everywhere
   else. ========================================================== */

/* --- Layout: full-bleed video background, topbar + events box
   overlaid on top of it --- */

body.home {
  /* 100vh ignores the mobile browser's address/toolbar chrome, which
     shows and hides on scroll — content can end up clipped behind it.
     100svh ("small viewport height") always accounts for that chrome
     being visible, so nothing gets cut off. Plain vh stays as a
     fallback for browsers that don't support svh yet. */
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
}

.home-layout {
  position: relative;
  height: 100%;
}

/* --- Topbar: site title + nav --- */

.home-topbar {
  position: fixed;
  top: 7px;
  left: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.home-topbar .site-title {
  font-weight: normal;
  font-size: 2rem;
  margin: 0;
  color: #23241f;
}

.home-topbar nav ul {
  display: flex;
  gap: 40px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-topbar nav a {
  font-style: italic;
  font-size: 1.1875rem;
  text-decoration: none;
  color: inherit;
}

.home-topbar nav a:hover,
.home-topbar nav a.active {
  text-decoration: underline;
}

/* --- Hero video + top/bottom fade-to-white gradients --- */

.home-image {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

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

.home-image::before,
.home-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  pointer-events: none;
}

.home-image::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(253, 253, 253, 1) 0%,
    rgba(253, 253, 253, 0.987) 8.1%,
    rgba(253, 253, 253, 0.951) 15.5%,
    rgba(253, 253, 253, 0.896) 22.5%,
    rgba(253, 253, 253, 0.825) 29%,
    rgba(253, 253, 253, 0.741) 35.3%,
    rgba(253, 253, 253, 0.648) 41.2%,
    rgba(253, 253, 253, 0.55) 47.1%,
    rgba(253, 253, 253, 0.45) 52.9%,
    rgba(253, 253, 253, 0.352) 58.8%,
    rgba(253, 253, 253, 0.259) 64.7%,
    rgba(253, 253, 253, 0.175) 71%,
    rgba(253, 253, 253, 0.104) 77.5%,
    rgba(253, 253, 253, 0.049) 84.5%,
    rgba(253, 253, 253, 0.013) 91.9%,
    rgba(253, 253, 253, 0) 100%
  );
}

.home-image::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(253, 253, 253, 1) 0%,
    rgba(253, 253, 253, 0.987) 8.1%,
    rgba(253, 253, 253, 0.951) 15.5%,
    rgba(253, 253, 253, 0.896) 22.5%,
    rgba(253, 253, 253, 0.825) 29%,
    rgba(253, 253, 253, 0.741) 35.3%,
    rgba(253, 253, 253, 0.648) 41.2%,
    rgba(253, 253, 253, 0.55) 47.1%,
    rgba(253, 253, 253, 0.45) 52.9%,
    rgba(253, 253, 253, 0.352) 58.8%,
    rgba(253, 253, 253, 0.259) 64.7%,
    rgba(253, 253, 253, 0.175) 71%,
    rgba(253, 253, 253, 0.104) 77.5%,
    rgba(253, 253, 253, 0.049) 84.5%,
    rgba(253, 253, 253, 0.013) 91.9%,
    rgba(253, 253, 253, 0) 100%
  );
}

/* --- Events box, overlaid on top of the video, bottom right --- */

.home-content {
  position: fixed;
  right: 32px;
  bottom: 32px;
  left: 32px;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.home-main {
  width: 100%;
  max-width: 560px;
}

.events-box {
  background: #fdfdfd;
  border: 0.5px solid #23241f;
  border-radius: 12px;
  padding: 16px 20px;
}

/* Home's own box floats over the hero video, so it gets a
   translucent white instead of the solid #fdfdfd used on
   calendar.html's own page. */
.home-main .events-box {
  background: rgba(253, 253, 253, 0.65);
}

.events-heading {
  margin: 0 0 10px;
  font-style: italic;
  font-weight: 600;
  font-size: calc(1.0625rem - 0.5pt);
}

.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Matches the calendar page's own font-size bump — kept in sync
   since this list mirrors calendar.html's. */
.home-main .events-list li {
  font-size: calc(1.0625rem + 0.5pt);
}

.events-list li {
  display: flex;
  justify-content: space-between;
  font-style: italic;
  font-size: 1.0625rem;
  padding: 3px 0;
}

/* Rows for events with a source link (e.g. an Instagram or festival
   page) wrap their spans in an <a> instead of using them directly —
   this makes the whole row (name, date and location) the click
   target, not just a piece of text within it. */
.events-list li > a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
}

.events-list li > a:hover {
  text-decoration: underline;
}

.events-list li span {
  flex: 1;
}

.events-list li span:nth-child(2) {
  text-align: center;
}

.events-list li span:nth-child(3) {
  text-align: right;
}

/* 2-column row: name+date stacked on the left, location on the
   right — same structure/classes as calendar.css, which the home
   preview box must stay in sync with. */
.events-list .event-name {
  flex: 2;
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.events-list .event-date {
  font-size: 0.85em;
  opacity: 0.7;
  margin-top: 1px;
}

.events-box .events-list .event-location {
  flex: 1;
  text-align: right;
}

.events-box hr {
  border: none;
  border-top: 0.5px solid #23241f;
  margin: 0 -20px 20px;
  width: calc(100% + 40px);
}

.site-title-mobile {
  display: none;
}

/* --- Mobile / stacked layout (<=1100px) --- */

@media (max-width: 1100px) {
  .home-layout {
    display: block;
    padding: 0;
  }

  .home-topbar {
    left: 24px;
    right: 24px;
    width: calc(100% - 48px);
    top: 20px;
    justify-content: center;
  }

  .home-topbar .site-title {
    display: none;
  }

  .home-topbar nav {
    width: 100%;
  }

  .home-topbar nav ul {
    gap: 0;
    justify-content: space-between;
  }

  .home-topbar nav a {
    font-size: calc(clamp(1.15rem, 1.9vw, 1.3125rem) + 0.5pt);
  }

  .home-image::before {
    height: 15%;
  }

  .home-image::after {
    height: 65%;
    /* Same curve as the shared gradient, but held flat at full white
       for the bottom 40% first, so the content underneath always
       sits on solid white instead of a lingering partial tint. */
    background: linear-gradient(
      to top,
      rgba(253, 253, 253, 1) 0%,
      rgba(253, 253, 253, 1) 40%,
      rgba(253, 253, 253, 0.987) 44.9%,
      rgba(253, 253, 253, 0.951) 49.3%,
      rgba(253, 253, 253, 0.896) 53.5%,
      rgba(253, 253, 253, 0.825) 57.4%,
      rgba(253, 253, 253, 0.741) 61.2%,
      rgba(253, 253, 253, 0.648) 64.7%,
      rgba(253, 253, 253, 0.55) 68.3%,
      rgba(253, 253, 253, 0.45) 71.7%,
      rgba(253, 253, 253, 0.352) 75.3%,
      rgba(253, 253, 253, 0.259) 78.8%,
      rgba(253, 253, 253, 0.175) 82.6%,
      rgba(253, 253, 253, 0.104) 86.5%,
      rgba(253, 253, 253, 0.049) 90.7%,
      rgba(253, 253, 253, 0.013) 95.1%,
      rgba(253, 253, 253, 0) 100%
    );
  }

  .home-content {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 24px 24px;
    box-sizing: border-box;
  }

  .home-main {
    max-width: none;
  }

  .home-main {
    margin-top: 0;
  }

  .site-title-mobile {
    display: block;
    font-weight: normal;
    font-size: 1.75rem;
    margin: 0 0 16px;
    color: #23241f;
    width: 100%;
    text-align: center;
  }

  /* Linear/stacked layout instead of the 2-column name+date / location
     row: with longer venue names and event titles, two independently
     wrapping columns side by side got visually messy on narrow
     screens. Name, date and location now just read top to bottom. */
  .events-list li,
  .events-list li > a {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .events-box .events-list .event-location {
    text-align: left;
  }

}

@media (max-width: 480px) {
  .site-title-mobile {
    font-size: 8.3vw;
    text-align: left;
    white-space: nowrap;
  }
}