@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Book.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Medium.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --ink: #071c22;
  --deep: #0a2a31;
  --teal: #104d57;
  --water: #327a8a;
  --gold: #c6a15b;
  --gold-light: #ead9ad;
  --ivory: #fffdf1;
  --canvas: #e8e2d3;
  --black: #050708;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  font-family: "Gotham", Arial, sans-serif;
}

body { touch-action: none; }

#presentation {
  position: relative;
  display: grid;
  grid-template-rows: 8.3vh 1fr 7.2vh;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 120% 15%, rgba(50, 122, 138, .28), transparent 36%),
    linear-gradient(145deg, #09252c 0%, var(--ink) 42%, #061417 100%);
}

#presentation::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .12;
  background-image: repeating-linear-gradient(118deg, transparent 0 16px, rgba(255,255,255,.06) 17px 18px);
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6vh 5.5vw 1.15vh;
  border-bottom: 1px solid rgba(198, 161, 91, .5);
}

.brandmark {
  display: block;
  width: min(42vw, 340px);
  height: 5.1vh;
  object-fit: contain;
  object-position: left center;
}

.freshwater-tag,
.eyebrow,
.media-caption,
.available,
.location,
dt {
  letter-spacing: .16em;
  text-transform: uppercase;
}

.freshwater-tag {
  padding: .6em .8em .5em;
  color: var(--gold-light);
  border: 1px solid rgba(198, 161, 91, .58);
  font-size: clamp(9px, 1.45vw, 18px);
  font-weight: 600;
}

.story {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 62%) minmax(0, 38%);
  gap: 0;
  padding: 2vh 3.5vw 1.6vh;
  min-height: 0;
}

.media-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(198, 161, 91, .72);
  background: #061216;
  box-shadow: 0 3vh 8vh rgba(0, 0, 0, .35);
}

.media-shell::after {
  position: absolute;
  inset: 1.1vh 1.8vw;
  z-index: 4;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255, 253, 241, .2);
}

#feature-video,
.fallback,
.media-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#feature-video {
  z-index: 2;
  opacity: 0;
  background: var(--black);
  transition: opacity .75s ease;
}

.has-video #feature-video { opacity: 1; }

.fallback {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8vh 7vw 8vh;
  background:
    linear-gradient(180deg, rgba(5,7,8,.06) 0%, rgba(5,7,8,.82) 77%),
    radial-gradient(circle at 72% 28%, rgba(50,122,138,.9), transparent 34%),
    linear-gradient(135deg, #123f48, #06191e 68%);
}

.fallback::before {
  position: absolute;
  top: -10%;
  right: -38%;
  width: 88%;
  height: 130%;
  content: "";
  opacity: .25;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transform: rotate(-12deg);
  box-shadow: 0 0 0 8vw rgba(198,161,91,.05), 0 0 0 16vw rgba(198,161,91,.025);
}

.fallback-grain {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: repeating-linear-gradient(80deg, transparent 0 8px, rgba(255,255,255,.04) 9px 10px);
}

.fallback h1 {
  position: relative;
  max-width: 92%;
  margin: .25em 0 .3em;
  font-size: clamp(42px, 8vw, 94px);
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.fallback-copy {
  position: relative;
  max-width: 85%;
  margin: 0;
  color: rgba(255,253,241,.8);
  font-size: clamp(17px, 2.6vw, 31px);
  line-height: 1.45;
}

.eyebrow {
  position: relative;
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(10px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.3;
}

.media-scrim {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.03) 52%, rgba(0,0,0,.68) 100%);
}

.media-caption {
  position: absolute;
  z-index: 5;
  right: 4vw;
  bottom: 2.8vh;
  left: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--ivory);
  font-size: clamp(10px, 1.5vw, 18px);
  font-weight: 600;
}

.chapter-count { color: var(--gold-light); }

.details {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 2.7vh 2vw .4vh;
  transition: opacity .35s ease, transform .35s ease;
}

.details-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3vw;
  padding-bottom: 1.5vh;
  border-bottom: 1px solid rgba(255,253,241,.22);
}

.details h2,
.assortment h2 {
  margin: .18em 0 0;
  color: var(--ivory);
  font-size: clamp(29px, 5.3vw, 63px);
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.price {
  flex: 0 0 auto;
  padding-bottom: .15em;
  color: var(--gold-light);
  font-size: clamp(13px, 2vw, 25px);
  font-weight: 600;
  white-space: nowrap;
}

.description {
  margin: 1.35vh 0 1.5vh;
  color: rgba(255,253,241,.76);
  font-size: clamp(14px, 2vw, 24px);
  line-height: 1.35;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7vh 4vw;
  margin: auto 0 0;
}

.spec-grid div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1vw;
  padding: .7vh 0;
  border-top: 1px solid rgba(198,161,91,.42);
}

dt {
  color: rgba(255,253,241,.52);
  font-size: clamp(8px, 1.15vw, 14px);
}

dd {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(12px, 1.65vw, 20px);
  font-weight: 600;
  text-align: right;
}

.assortment {
  position: absolute;
  inset: 2vh 3.5vw 1.6vh;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vh 6vw;
  overflow: hidden;
  border: 1px solid rgba(198,161,91,.72);
  background:
    radial-gradient(circle at 100% 0%, rgba(50,122,138,.5), transparent 42%),
    linear-gradient(145deg, #0c343c, #06181d 70%);
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.show-assortment .assortment {
  opacity: 1;
  transform: scale(1);
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15vh 5vw;
  margin-top: 4vh;
}

.series-grid span {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  align-items: center;
  padding: 1.1vh 0;
  border-top: 1px solid rgba(198,161,91,.52);
  font-size: clamp(15px, 2.5vw, 29px);
  font-weight: 600;
  text-transform: uppercase;
}

.series-grid b {
  color: var(--gold);
  font-size: .6em;
  letter-spacing: .12em;
}

.retailer-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.2vw;
  padding: 1.35vh 5.5vw 1.4vh;
  background: var(--ivory);
  color: var(--ink);
}

.available,
.location {
  color: rgba(7,28,34,.62);
  font-size: clamp(8px, 1.05vw, 13px);
  font-weight: 600;
}

.retailer-footer strong {
  font-size: clamp(16px, 2.6vw, 31px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.location { text-align: right; }

.progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  height: .38vh;
  background: rgba(7,28,34,.18);
}

#progress {
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

#restart {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  width: 16vw;
  height: 8vh;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media (orientation: landscape) {
  #presentation {
    grid-template-rows: 11vh 1fr 10vh;
  }

  .story {
    grid-template-columns: minmax(0, 65%) minmax(0, 35%);
    grid-template-rows: 1fr;
  }

  .details { padding: 3vh 3vw; }
  .details-heading { align-items: flex-start; flex-direction: column; }
  .spec-grid { grid-template-columns: 1fr; width: 100%; }
}