@font-face { font-family: 'Espuma Pro'; src: url('../fonts/EspumaPro-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Espuma Pro'; src: url('../fonts/EspumaPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Espuma Pro'; src: url('../fonts/EspumaPro-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Espuma Pro'; src: url('../fonts/EspumaPro-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Espuma Pro'; src: url('../fonts/EspumaPro-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-main: 'Espuma Pro', sans-serif;
  --bs-body-font-family: var(--font-main);
  --teal: #2cbcb8;
  --teal-dark: #23a5a1;
  --grid-line: rgba(0, 60, 58, 0.35);
  --red: #ed1c2e;
  --cream: #fdf9e6;
  --ink: #1a1a1a;
  --panel: #262323;
}

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
img, svg, iframe { max-width: 100%; }
*, button, input, select, textarea { font-family: var(--font-main); }

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font-main);
  color: var(--ink);
  overflow-x: hidden;
}

[hidden] { display: none !important; }

/* =====================================================
   Shared: logo + nav
   ===================================================== */
.top-nav a {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  margin-left: 28px;
  letter-spacing: .02em;
}
.top-nav a:hover { color: var(--red); }

.tenets-logo-row { margin-bottom: 1.5rem; }
.tenets-logo { width: clamp(150px, 15vw, 230px); height: auto; display: block; }

/* =====================================================
   VIEW 1: Hero / countdown  (#heroView)
   ===================================================== */
#heroView .top-nav {
  position: absolute;
  top: 50px; right: 0;
  z-index: 10;
  padding: 8px 56px;
}

#heroView .hero { min-height: 100vh; min-height: 100dvh; }

#heroView .hero-left {
  background-color: var(--teal);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 27px 27px;
  padding: 24px clamp(20px, 3vw, 36px) 80px;
  /*min-height: 95vh;*/
  min-height: 100vh;
}

#heroView .hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60px 20px;
}

.headline { margin-top: clamp(48px, 6vw, 86px); }
.headline span {
  display: inline-block;
  background: var(--cream);
  font-family: var(--font-main);
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.25;
  padding: 4px 8px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.15);
}

.live-badge {
  display: inline-block;
  margin-top: 36px;
  background: var(--red);
  color: #fff;
  font-size: clamp(14px, 1.3vw, 17px);
  padding: 8px 12px;
  max-width: 100%;
}
.countdown {
  display: inline-flex;
  margin-top: 6px;
  background: var(--panel);
  border-radius: 3px;
  padding: 12px 0;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .25);
}
.countdown .unit {
  width: clamp(76px, 9vw, 122px);
  text-align: center;
  color: #fff;
}
.countdown .unit + .unit { border-left: 1px solid var(--red); }
.countdown .num { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.countdown .label { font-size: clamp(12px, 1.3vw, 17px); text-transform: uppercase; }

.illustration { max-width: 100%; height: auto; max-height: min(560px, 70vh); }

.pixels {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(4, 20px);
  grid-auto-rows: 18px;
}
.pixels i { display: block; border: 1px solid #333; }
.pixels .t { background: #12c6c0; }
.pixels .r { background: var(--red); }
.pixels .n { border: 0; }
.pixels-1 { top: 34%; right: 12%; }
.pixels-2 { top: 55%; left: 20%; }

/* =====================================================
   VIEW 2: Now Live / video  (#liveView)
   ===================================================== */
.live-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 60px;
}

.grid-panel {
  position: absolute;
  top: 10px; left: 0; bottom: 14px;
  width: 51.5%;
  background-color: var(--teal);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 41px 40px;
  z-index: 0;
}

#liveView .top-nav {
  position: absolute;
  top: 54px; right: 56px;
  z-index: 5;
}

#liveView .live-logo {
  position: absolute;
  top: 22px; left: 38px;
  z-index: 5;
  margin-bottom: 0;
}

.now-live {
  position: absolute;
  top: 72px;
  left: 42.6%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1;
  padding: 7px 10px 8px;
  border-radius: 6px;
}
.now-live svg { width: 1.56em; height: 1.06em; }
.now-live .wave { animation: pulse 1.6s ease-in-out infinite; }
.now-live .wave-2 { animation-delay: .3s; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .now-live .wave { animation: none; } }

.video-wrap {
  position: relative;
  z-index: 4;
  margin-left: 20.5%;
  width: 59.2%;
  padding-top: clamp(150px, 13vw, 190px);
}
.video-frame {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000 center / cover no-repeat;
  border: 0;
  width: 100%;
  cursor: pointer;
}
.play-btn {
  width: clamp(64px, 7vw, 102px);
  height: clamp(64px, 7vw, 102px);
  border-radius: 50%;
  background: rgba(60, 60, 55, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.video-poster:hover .play-btn,
.video-poster:focus-visible .play-btn { background: var(--red); }
.video-poster:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.play-btn svg { width: 45%; margin-left: 8%; fill: #fff; }

/* =====================================================
   Responsive
   ===================================================== */

/* Large desktops */
@media (min-width: 1600px) {
  #heroView .hero-left { padding-left: 64px; }
  .illustration { max-height: 640px; }
}

/* Tablets and below: stack sections */
@media (max-width: 991.98px) {
  /* hero */
  #heroView .top-nav { position: static; text-align: right; padding: 10px 20px; }
  #heroView .hero { min-height: auto; }
  #heroView .hero-left { min-height: auto; padding-bottom: 56px; }
  #heroView .hero-right { padding: 32px 20px 48px; }
  .illustration { max-height: 420px; }
  .headline { margin-top: 40px; }
  .pixels { display: none; }

  /* live */
  .live-stage { min-height: auto; padding-bottom: 40px; }
  .grid-panel { width: 100%; bottom: auto; height: 340px; }
  #liveView .live-logo { position: relative; top: auto; left: auto; display: block; margin: 22px 0 0 20px; }
  #liveView .top-nav { top: 16px; right: 20px; }
  .now-live { position: relative; top: auto; left: auto; margin: 24px 0 0 20px; display: flex; width: fit-content; }
  .video-wrap { margin: 18px 20px 0; width: auto; padding-top: 0; }
}

/* Phones */
@media (max-width: 575.98px) {
  .top-nav a { display: inline-block; padding: 6px 0; margin-left: 20px; }

  #heroView .hero-left { padding: 16px 16px 40px; }
  .tenets-logo { width: 160px; }
  .headline { margin-top: 32px; }
  .headline span { font-size: clamp(22px, 7vw, 30px); }
  .live-badge { margin-top: 28px; }
  .countdown { display: flex; width: 100%; max-width: 360px; }
  .countdown .unit { flex: 1 1 0; width: auto; }
  .illustration { max-height: 300px; }

  #liveView .top-nav { position: static; text-align: right; padding: 10px 20px 0; }
  #liveView .live-logo { margin: 8px 0 0 16px; }
  .now-live { margin: 20px 0 0 16px; font-size: 22px; }
  .grid-panel { height: 300px; }
  .video-wrap { margin: 16px 12px 0; }
}

/* Very small phones */
@media (max-width: 359.98px) {
  .tenets-logo { width: 140px; }
  .countdown .num { font-size: 26px; }
  .now-live { font-size: 19px; }
}

/* Short landscape screens (phones turned sideways) */
@media (max-height: 480px) and (orientation: landscape) {
  #heroView .hero, .live-stage { min-height: auto; }
  #heroView .hero-left { min-height: auto; }
}

/* Touch devices: no hover-only states */
@media (hover: none) {
  .top-nav a:hover { color: var(--ink); }
}

/* 1024px and above: headline always on exactly 2 lines */
@media (min-width: 1024px) {
  .headline span {
    white-space: nowrap;
    font-size: clamp(24px, 2.5vw, 46px);
  }
}