@charset "UTF-8";

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Photo layer — always fills the frame, so no letterbox band can appear. */
.cover-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  background: #1a100d;
}

body:not(.embed):not(.fit) .cover-bg {
  height: 100svh;
  min-height: var(--cover-h, 0px);
}

/* Embed / scaled-down phone view: photo height mirrors the stage (JS --cover-h). */
body.embed .cover-bg,
body.fit .cover-bg {
  height: var(--cover-h, 56.25vw);
}

/* Phone: the 16:9 cover is much shorter than the tall screen, so centre it instead of
   leaving the whole lower half empty. */
body.fit {
  --cover-top: max(0px, calc((100svh - 56.25vw - var(--nav-height)) / 2));
}

body.fit .main-cover { margin-top: var(--cover-top); }
body.fit .cover-bg { top: var(--cover-top); }

.cover-bg .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 49%;
}

.cover-bg::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 12, 10, 0.83) 0 17%, rgba(20, 12, 10, 0.12) 36%, transparent 54%),
    linear-gradient(270deg, rgba(31, 18, 14, 0.9) 0 22%, rgba(31, 18, 14, 0.46) 31%, transparent 50%),
    linear-gradient(0deg, rgba(17, 9, 7, 0.48), transparent 34%);
  content: "";
}

.cover-bg::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  content: "";
}

/* Content stage — 16:9 design box (1440 x 810). All inner sizes in cqw: design px / 14.4. */
.main-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
  container-type: inline-size;
}

/* Desktop browser keeps the approved full-window cover; the ratio lock is for embeds and
   for phones, where the visual viewport is far taller than the 1180px layout width. */
body:not(.embed):not(.fit) .main-cover {
  height: 100svh;
  min-height: 620px;
  aspect-ratio: auto;
}

/* Short windows: the title used to be capped by viewport height. vh is safe outside embeds. */
body:not(.embed):not(.fit) .main-title {
  font-size: max(30px, min(6.56cqw, 10.5vh));
}

/* Embed: the nav bar keeps its px height while the stage shrinks, so keep the strip clear of it. */
body.embed .main-schedule,
body.fit .main-schedule {
  top: max(5.2%, calc(var(--nav-height) + 6px));
}

/* fx.js entrance targets `main`; a transform on the stage would shift its absolute children. */
main.main-cover.fx-enter {
  animation: none !important;
  transform: none !important;
}

.main-nav {
  background: transparent;
}

.main-nav .nav-shell {
  justify-content: flex-end;
}

.main-nav .nav-brand {
  position: absolute;
  bottom: -5px;
  left: clamp(22px, 3.5vw, 68px);
  opacity: 0.9;
}

.main-nav .nav-links {
  margin-right: clamp(18px, 1.5vw, 30px);
  margin-left: 0;
}

.main-schedule {
  position: absolute;
  top: 5.2%;
  bottom: 4.5%;
  left: 2.6cqw;
  display: grid;
  /* lower bound keeps the strip head clear of the nav wordmark on narrow frames */
  width: max(205px, 16cqw);
  grid-template-rows: auto repeat(7, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.54);
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.schedule-label {
  display: flex;
  min-height: max(58px, 4cqw);
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.48);
  font-size: max(10px, 0.7cqw);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.schedule-label b {
  color: var(--peach);
}

.main-schedule li {
  display: grid;
  grid-template-columns: 4.3cqw 1fr auto;
  align-items: center;
  gap: 0.7cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.main-schedule li b {
  color: var(--pink);
  font-size: max(9px, 0.9cqw);
  font-weight: 950;
}

.main-schedule li strong {
  font-size: max(11px, 1.05cqw);
  font-weight: 900;
}

.main-schedule li small {
  color: rgba(255, 255, 255, 0.46);
  font-size: max(9px, 0.7cqw);
  font-weight: 800;
}

.main-copy {
  position: absolute;
  z-index: 5;
  top: 12%;
  right: 4.3cqw;
  display: flex;
  width: 25cqw;
  align-items: flex-end;
  flex-direction: column;
  gap: 1.38cqw;
  text-align: right;
}

.main-title {
  font-family: var(--hand);
  font-size: max(30px, 6.56cqw);
  font-weight: 700;
  line-height: 0.75;
  letter-spacing: -0.11em;
  text-shadow: 0 4px 24px rgba(16, 7, 5, 0.36);
}

.main-title small {
  display: block;
  margin-top: 1.53cqw;
  color: var(--pink);
  font-family: var(--sans);
  font-size: max(12px, 1.11cqw);
  letter-spacing: 0.18em;
}

.main-about {
  max-width: 26.4cqw;
}

.main-about b,
.main-next span {
  display: block;
  margin-bottom: 0.55cqw;
  color: var(--peach);
  font-size: max(9px, 0.83cqw);
  font-weight: 950;
  letter-spacing: 0.15em;
}

.main-about p {
  color: rgba(255, 255, 255, 0.88);
  font-size: max(11px, 1.04cqw);
  font-weight: 700;
  line-height: 1.65;
}

.main-next strong {
  display: block;
  font-size: max(13px, 1.35cqw);
}

.main-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55cqw;
}

.main-copy .soft-button,
.main-copy .outline-button {
  min-height: 3.2cqw;
  padding: 0 1.39cqw;
  font-size: max(11px, 0.97cqw);
}

.main-polaroids {
  position: absolute;
  z-index: 7;
  bottom: 4.5%;
  left: 21.5cqw;
  width: 29cqw;
  height: 18.75cqw;
  pointer-events: none;
}

.main-polaroids .paper-photo {
  position: absolute;
  width: 49%;
  height: 91%;
  padding: 0.63cqw 0.63cqw 3.2cqw;
}

.main-polaroids .paper-photo::before {
  top: -0.9cqw;
  width: 5.3cqw;
  height: 1.67cqw;
}

.main-polaroids .paper-photo figcaption {
  right: 0.97cqw;
  bottom: 0.83cqw;
  left: 0.97cqw;
  font-size: max(11px, 1.18cqw);
}

.main-polaroids .paper-photo:first-child {
  top: 0;
  left: 0;
  transform: rotate(-5deg);
}

.main-polaroids .paper-photo:last-child {
  right: 0;
  bottom: 0;
  transform: rotate(4deg);
}

.cover-signature {
  position: absolute;
  z-index: 6;
  right: 4.2cqw;
  bottom: 4.3%;
  display: flex;
  align-items: baseline;
  gap: 0.7cqw;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--hand);
  font-size: max(13px, 1.74cqw);
}

.cover-signature small {
  color: var(--peach);
  font-family: var(--sans);
  font-size: max(9px, 0.7cqw);
  font-weight: 900;
  letter-spacing: 0.18em;
}

/* Below 820 the ratio box is released, so every cqw above must be restated in real px. */
@media (max-width: 820px) {
  html,
  body {
    overflow: auto;
  }

  .main-cover {
    width: auto;
    min-height: 920px;
    aspect-ratio: auto;
    container-type: normal;
  }

  body:not(.embed):not(.fit) .main-cover {
    height: 100svh;
    min-height: 920px;
  }

  body:not(.embed):not(.fit) .main-title {
    font-size: clamp(64px, 18vw, 94px);
  }

  .cover-bg {
    height: var(--cover-h, 920px);
    min-height: 0;
  }

  .cover-bg .hero-image {
    object-position: 47% 48%;
  }

  .cover-bg::before {
    background:
      linear-gradient(180deg, rgba(18, 11, 9, 0.66) 0 17%, transparent 38%),
      linear-gradient(0deg, rgba(18, 11, 9, 0.98) 0 45%, rgba(18, 11, 9, 0.2) 72%);
  }

  .main-nav .nav-brand {
    position: static;
    margin-right: auto;
  }

  .main-nav .nav-shell {
    justify-content: initial;
  }

  .main-schedule {
    top: auto;
    right: 18px;
    bottom: 24px;
    left: 18px;
    width: auto;
    height: 186px;
    grid-template-rows: 42px 1fr;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    overflow-x: auto;
    border-bottom: 0;
    scrollbar-width: none;
  }

  .main-schedule::-webkit-scrollbar {
    display: none;
  }

  .schedule-label {
    position: sticky;
    z-index: 2;
    left: 0;
    min-height: 58px;
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 14px;
    background: rgba(20, 12, 10, 0.72);
    font-size: 10px;
  }

  .main-schedule li {
    min-width: 96px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 6px;
    padding: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
  }

  .main-schedule li b {
    font-size: 13px;
  }

  .main-schedule li strong {
    font-size: 15px;
  }

  .main-schedule li small {
    display: none;
  }

  .main-copy {
    top: auto;
    right: 20px;
    bottom: 245px;
    left: 20px;
    width: auto;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
  }

  .main-title {
    font-size: clamp(64px, 18vw, 94px);
  }

  .main-title small {
    margin-top: 22px;
    font-size: 16px;
  }

  .main-about {
    max-width: 80%;
  }

  .main-about b,
  .main-next span {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .main-about p {
    font-size: 15px;
  }

  .main-next strong {
    font-size: 19px;
  }

  .main-socials {
    justify-content: flex-start;
    gap: 8px;
  }

  .main-copy .soft-button,
  .main-copy .outline-button {
    min-height: 46px;
    padding: 0 20px;
    font-size: 14px;
  }

  .main-polaroids {
    top: 108px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: min(56vw, 330px);
    height: 250px;
  }

  .main-polaroids .paper-photo {
    width: 57%;
    height: 78%;
    padding: 9px 9px 46px;
  }

  .main-polaroids .paper-photo::before {
    top: -13px;
    width: 76px;
    height: 24px;
  }

  .main-polaroids .paper-photo figcaption {
    right: 14px;
    bottom: 12px;
    left: 14px;
    font-size: 17px;
  }

  .main-polaroids .paper-photo:last-child {
    top: 50px;
  }

  .cover-signature {
    display: none;
  }
}

@media (max-width: 520px) {
  .main-cover,
  body:not(.embed):not(.fit) .main-cover {
    min-height: 860px;
  }

  .cover-bg {
    height: var(--cover-h, 860px);
  }

  .cover-bg .hero-image {
    object-position: 45% 35%;
  }

  .main-polaroids {
    top: 94px;
    width: 230px;
    height: 190px;
  }

  .main-polaroids .paper-photo {
    padding: 6px 6px 36px;
  }

  .main-copy {
    bottom: 226px;
  }

  .main-title,
  body:not(.embed) .main-title {
    font-size: clamp(58px, 19vw, 78px);
  }

  .main-title small {
    font-size: 14px;
  }

  .main-about {
    max-width: 100%;
  }

  .main-about p {
    font-size: 14px;
  }
}