/* ==========================================================================
   VUE/boulder light show preview
   Same brand treatment as sundance.vueboulder.com. Tokens and type scale come
   from BrandGuidelines_VUEBoulder.pdf and match the live vueboulder.com CSS.
   ========================================================================== */

@font-face {
  font-family: 'NOIR et BLANC';
  src: url('fonts/NOIRetBLANC-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bauhaus Byrl Display';
  src: url('fonts/BauhausByrlDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('fonts/AzeretMono-var-latin.woff2') format('woff2');
  font-weight: 200 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('fonts/AzeretMono-var-latin-ext.woff2') format('woff2');
  font-weight: 200 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens: the eight official brand colours ---------------------------- */

:root {
  --vue-black:      #000000;  /* primary   */
  --vue-periwinkle: #9DA4FF;  /* primary   */
  --vue-cobalt:     #2C3BD2;  /* secondary */
  --vue-orangered:  #E9541C;  /* secondary */
  --vue-peach:      #FFB590;  /* accent    */
  --vue-olive:      #C8D63E;  /* accent    */
  --vue-cream:      #EAE6D0;  /* accent    */
  --vue-lime:       #E0F984;  /* accent    */

  --font-display: 'NOIR et BLANC', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-heading: 'Bauhaus Byrl Display', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(30px, 4.05vw, 58px);
  --fs-heading: clamp(19px, 1.9vw, 27px);
  --fs-eyebrow: clamp(13px, 1.75vw, 25px);
  --fs-body:    16px;
  --fs-label:   12px;
  --lh-display: 1.4;

  --shell:  1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --band-y: clamp(56px, 7vw, 100px);

  color-scheme: dark;
}

/* ---- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vue-black);
  color: var(--vue-cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--vue-lime); outline-offset: 3px; }

.shell {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
}

.display {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: 0.005em;
}
.heading {
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--fs-heading); line-height: var(--lh-display);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.label {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-label); line-height: 1.4;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.prose { font-size: var(--fs-body); font-weight: 300; line-height: 1.75; max-width: 62ch; }

/* ---- Password gate ------------------------------------------------------- */

#gate {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); background: var(--vue-black);
}
.gate__card { width: 100%; max-width: 460px; text-align: center; }
.gate__mark { width: clamp(210px, 56vw, 300px); height: auto; margin: 0 auto clamp(22px, 4vw, 34px); }
.gate__label { color: var(--vue-lime); margin-bottom: clamp(20px, 3vw, 28px); }
.gate__row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
#pw {
  flex: 1 1 210px; min-width: 0;
  background: transparent;
  border: 1px solid rgba(234, 230, 208, 0.4);
  color: var(--vue-cream);
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
  letter-spacing: 0.16em; text-align: center;
  padding: 15px 16px;
}
#pw::placeholder { color: rgba(234, 230, 208, 0.42); letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; }
#pw:focus { outline: none; border-color: var(--vue-lime); }
#err { color: var(--vue-orangered); min-height: 24px; margin-top: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; padding: 16px 28px; border: 1px solid currentColor;
  background: var(--vue-lime); border-color: var(--vue-lime); color: var(--vue-black);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--vue-orangered); border-color: var(--vue-orangered); color: var(--vue-cream);
}

#content[hidden] { display: none; }

/* ---- Top bar ------------------------------------------------------------- */

.topbar { background: var(--vue-black); border-bottom: 1px solid rgba(234, 230, 208, 0.16); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px; padding-block: 14px;
}
.topbar__mark img { width: clamp(132px, 17vw, 196px); height: auto; }
.topbar__home {
  font-family: var(--font-body); font-weight: 400; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  color: var(--vue-cream); white-space: nowrap; transition: color 0.2s ease;
}
.topbar__home:hover, .topbar__home:focus-visible { color: var(--vue-lime); }
.topbar__home span { color: var(--vue-lime); }

/* ---- Intro --------------------------------------------------------------- */

.intro { background: var(--vue-black); padding-block: var(--band-y) clamp(38px, 5vw, 64px); }
.intro__eyebrow {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-eyebrow); line-height: 1.2; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--vue-lime);
  margin-bottom: clamp(14px, 2vw, 22px);
}
.intro__title { color: var(--vue-cream); margin-bottom: clamp(20px, 3vw, 30px); text-wrap: balance; }
.intro__body { color: var(--vue-cream); margin-bottom: clamp(22px, 3vw, 34px); }

/* The vision line, given the same periwinkle display treatment the Sundance
   page uses for its pull quote. */
.intro__pull {
  color: var(--vue-periwinkle);
  font-size: clamp(23px, 2.7vw, 38px);
  max-width: 26ch;
  text-wrap: balance;
  margin-bottom: clamp(24px, 3.2vw, 36px);
}

/* The technical caveat sits a tier below the vision copy. */
.intro__note {
  color: rgba(234, 230, 208, 0.6);
  font-size: 14px;
  line-height: 1.75;
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid rgba(234, 230, 208, 0.18);
  max-width: 68ch;
}

/* ---- The whole room (Alpenglow Effect elements) --------------------------- */

.room { background: var(--vue-cream); color: var(--vue-black); padding-block: var(--band-y); }
.room__label { color: var(--vue-cobalt); margin-bottom: 16px; }
.room__title { color: var(--vue-black); margin-bottom: clamp(18px, 2.6vw, 26px); text-wrap: balance; }
.room__lead { color: rgba(0, 0, 0, 0.78); margin-bottom: clamp(30px, 4vw, 52px); }
.room__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 48px);
  padding-block: clamp(26px, 3.5vw, 44px);
  border-top: 1px solid rgba(0, 0, 0, 0.16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.room__name { color: var(--vue-cobalt); margin-bottom: 12px; }
.room__text { font-size: var(--fs-body); font-weight: 300; line-height: 1.75; color: rgba(0, 0, 0, 0.78); }
.room__pull {
  color: var(--vue-cobalt);
  font-size: clamp(23px, 2.7vw, 38px);
  max-width: 30ch;
  text-wrap: balance;
  margin-top: clamp(30px, 4vw, 52px);
}

/* ---- Bridge into the galleries -------------------------------------------- */

.bridge { background: var(--vue-black); color: var(--vue-cream); padding-block: var(--band-y); }
.bridge__label { color: var(--vue-lime); margin-bottom: 16px; }
.bridge__title { color: var(--vue-cream); margin-bottom: clamp(18px, 2.6vw, 26px); }
.bridge__body { color: rgba(234, 230, 208, 0.82); max-width: 68ch; }

/* ---- Gallery sections ---------------------------------------------------- */

.cat { padding-block: var(--band-y); }
.cat:nth-of-type(odd)  { background: var(--vue-cream); color: var(--vue-black); }
.cat:nth-of-type(even) { background: var(--vue-black); color: var(--vue-cream); }

.cat__head { margin-bottom: clamp(22px, 3vw, 34px); max-width: 68ch; }
.cat__name { margin-bottom: 14px; }
.cat:nth-of-type(odd)  .cat__name { color: var(--vue-black); }
.cat:nth-of-type(even) .cat__name { color: var(--vue-lime); }
.cat__blurb { font-size: var(--fs-body); font-weight: 300; line-height: 1.75; }
.cat:nth-of-type(odd)  .cat__blurb { color: rgba(0, 0, 0, 0.78); }
.cat:nth-of-type(even) .cat__blurb { color: rgba(234, 230, 208, 0.82); }

/* ---- Carousel ------------------------------------------------------------ */

.car {
  position: relative;
  /* Clips are 1152x768. Capping here keeps the 3:2 frame from becoming a
     750px-tall slab at desktop width, and stays at or under native pixels. */
  max-width: 880px;
}

.car__viewport { overflow: hidden; position: relative; }

.car__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
  will-change: transform;
}

.car__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 0;
}

/* Explicit ratio on the frame, so nothing moves as posters and metadata load.
   All current clips are 1152x768. */
.car__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #07070a;
  overflow: hidden;
}
.car__frame video { width: 100%; height: 100%; object-fit: contain; background: #07070a; }

.car__caption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-top: 14px;
  min-height: 1.4em;   /* holds its space so swapping captions moves nothing */
}
.car__slidelabel {
  font-family: var(--font-body); font-weight: 400; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.cat:nth-of-type(odd)  .car__slidelabel { color: rgba(0, 0, 0, 0.66); }
.cat:nth-of-type(even) .car__slidelabel { color: rgba(234, 230, 208, 0.66); }
/* Chapter label: names the section of a clip that moves through several,
   and changes with playback. Set in the periwinkle so it reads as live state
   rather than as a second static caption, and it sits between the slide label
   and the sound prompt in the same flex row, so it costs no extra height.
   The caption row already reserves its space, so nothing shifts as it
   changes. */
.car__chapter:empty { display: none; }
.car__chapter {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
  margin-inline-end: auto;
}
.cat:nth-of-type(odd)  .car__chapter { color: var(--vue-cobalt); }
.cat:nth-of-type(even) .car__chapter { color: var(--vue-periwinkle); }

.car__sound:empty { display: none; }
.car__sound {
  font-family: var(--font-body); font-weight: 500; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--vue-orangered); white-space: nowrap;
}

/* controls */
.car__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; z-index: 3; cursor: pointer;
  border: 1px solid rgba(234, 230, 208, 0.4);
  background: rgba(0, 0, 0, 0.55); color: var(--vue-cream);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.car__btn:hover:not(:disabled), .car__btn:focus-visible {
  background: var(--vue-lime); border-color: var(--vue-lime); color: var(--vue-black);
}
.car__btn:disabled { opacity: 0.28; cursor: default; }
.car__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.car__prev { left: clamp(8px, 1.4vw, 18px); }
.car__next { right: clamp(8px, 1.4vw, 18px); }

.car__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px;
}
.car__dots { display: flex; gap: 9px; }
.car__dot {
  width: 9px; height: 9px; padding: 0; cursor: pointer;
  border: 1px solid currentColor; background: transparent;
  border-radius: 50%;
}
.cat:nth-of-type(odd)  .car__dot { color: rgba(0, 0, 0, 0.5); }
.cat:nth-of-type(even) .car__dot { color: rgba(234, 230, 208, 0.5); }
.car__dot[aria-current="true"] { background: var(--vue-orangered); border-color: var(--vue-orangered); }
.car__count {
  font-family: var(--font-body); font-weight: 400; font-size: 11px;
  letter-spacing: 0.22em; white-space: nowrap;
}
.cat:nth-of-type(odd)  .car__count { color: rgba(0, 0, 0, 0.6); }
.cat:nth-of-type(even) .car__count { color: var(--vue-lime); }

/* A single-video category is not a carousel: hide the machinery entirely. */
.car[data-single="true"] .car__btn,
.car[data-single="true"] .car__foot { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- Footer -------------------------------------------------------------- */

.foot { background: var(--vue-cobalt); color: var(--vue-cream); padding-block: var(--band-y); }
.foot__label { color: var(--vue-peach); margin-bottom: 16px; }
.foot__note { font-size: var(--fs-body); font-weight: 300; line-height: 1.75; max-width: 68ch; }

.credit { background: var(--vue-black); padding-block: clamp(30px, 4vw, 48px); }
.credit__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
}
.credit__mark img { width: 118px; height: auto; opacity: 0.9; }
.credit__line {
  font-family: var(--font-body); font-weight: 300; font-size: 10px;
  letter-spacing: 0.16em; line-height: 1.8; text-transform: uppercase;
  color: rgba(234, 230, 208, 0.72); text-align: right;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --fs-body: 15px; }
  .room__grid { grid-template-columns: 1fr; }
  /* Video first on a phone: break the frame out to the screen edges, but keep
     the caption and dots lined up with the body copy. */
  .car { margin-inline: calc(var(--gutter) * -1); max-width: none; }
  .car__caption, .car__foot { padding-inline: var(--gutter); }
  .car__btn { width: 42px; height: 42px; }
  .car__prev { left: 6px; }
  .car__next { right: 6px; }
  .credit__inner { flex-direction: column; align-items: flex-start; }
  .credit__line { text-align: left; }
}

@media (min-width: 1800px) { :root { --shell: 1400px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .car__track { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}