/* ==========================================================================
   VUE/boulder  Sundance Film Festival 2027
   Design tokens sampled from the rendered CSS of vueboulder.com/details.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   Face roles were verified against the live site on 2026-08-24 by reading the
   computed font-family strings, which still carry Wix's `orig_` names:

     58px + 25px display  ->  TAN Gardenia            (not licensed on disk)
     27px secondary       ->  Bauhaus Byrl Display    (exact, shipped below)
     14-16px accent       ->  Alta Caption            (not licensed on disk)
     body / utility       ->  Azeret Mono             (exact, Google Fonts)

   NOIR et BLANC stands in for TAN Gardenia: same high-contrast stylish-serif
   category, and it is the face used for "VUE" in the brand lockup itself.
   Azeret Mono covers the small letterspaced accent role that Alta Caption
   fills on the live site, which is a role the live site already gives Azeret
   at the same sizes.
   -------------------------------------------------------------------------- */

@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, from BrandGuidelines_VUEBoulder.pdf page 6.
   Every value also matches the live CSS on vueboulder.com/details exactly, so the
   brand book and the shipping site agree. Nothing outside this list is brand. */
: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    */
  --vue-white:      #FFFFFF;

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

  /* 58px / 1.4 is the live display spec. The 1.4 ratio holds on all display type. */
  --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);
}

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

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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 { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--vue-lime);
  outline-offset: 3px;
}

.skip-link {
  /* clipped rather than pushed off-canvas, so it can never widen the page */
  position: absolute;
  left: 12px;
  top: 12px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 200;
  background: var(--vue-lime);
  color: var(--vue-black);
  padding: 12px 20px;
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; }

/* ---- Shared type --------------------------------------------------------- */

.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;
}

/* ---- Buttons ------------------------------------------------------------- */

.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;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--lime {
  background: var(--vue-lime);
  border-color: var(--vue-lime);
  color: var(--vue-black);
}
.btn--lime:hover, .btn--lime:focus-visible {
  background: var(--vue-orangered);
  border-color: var(--vue-orangered);
  color: var(--vue-cream);
}
.btn--ghost {
  background: transparent;
  color: var(--vue-cream);
  border-color: rgba(234, 230, 208, 0.55);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--vue-cream);
  border-color: var(--vue-cream);
  color: var(--vue-black);
}

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

.topbar {
  position: relative;
  z-index: 20;
  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); }

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 82vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0b0b0d;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Bottom-left weighted. Heavy enough for cream text on the copy block,
     light enough to leave the alpenglow and the red carpet reading. */
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.86) 20%,
      rgba(0,0,0,0.68) 40%,
      rgba(0,0,0,0.42) 58%,
      rgba(0,0,0,0.15) 72%,
      rgba(0,0,0,0.00) 88%),
    linear-gradient(to right,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.25) 42%,
      rgba(0,0,0,0.00) 72%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.34) 0%,
      rgba(0,0,0,0.00) 20%);
}
.hero__body {
  padding-block: clamp(48px, 8vw, 104px);
  max-width: 880px;
}
.hero__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);
}
.hero__title {
  color: var(--vue-cream);
  margin-bottom: clamp(16px, 2.2vw, 26px);
  text-wrap: balance;
}
.hero__sub {
  color: var(--vue-cream);
  max-width: 46ch;
  margin-bottom: clamp(26px, 3.4vw, 40px);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Stat row ------------------------------------------------------------ */

.stats {
  background: var(--vue-cream);
  color: var(--vue-black);
  padding-block: clamp(40px, 5vw, 72px);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat__figure {
  /* Bauhaus, not the display serif. NOIR et BLANC's hairlines are so thin that
     #E9541C reads as plain red at this size; the same hex in a heavy face reads
     as the orange-red it actually is. Both faces are brand (guidelines p.5). */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--vue-orangered);
}
.stat__label { color: var(--vue-black); }

/* ---- Positioning --------------------------------------------------------- */

.position {
  background: var(--vue-black);
  padding-block: var(--band-y);
}
.position__lede {
  color: var(--vue-cream);
  margin-bottom: clamp(38px, 5vw, 64px);
}
.position__pull {
  color: var(--vue-periwinkle);
  max-width: 20ch;
  text-wrap: balance;
}

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

.gallery {
  background: var(--vue-cream);
  color: var(--vue-black);
  padding-block: var(--band-y);
}
.gallery__head {
  margin-bottom: clamp(24px, 3.4vw, 40px);
}
.gallery__head h2 { color: var(--vue-black); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 14px);
  grid-auto-rows: clamp(92px, 10.6vw, 158px);
}

.tile {
  position: relative;
  display: block;
  grid-column: span 1;
  grid-row: span 2;
  padding: 0;
  margin: 0;
  border: 0;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
}
.tile--wide { grid-column: span 2; }

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.035); }
/* ---- Lightbox ------------------------------------------------------------ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  padding: clamp(12px, 3vw, 40px);
}
.lb[open], .lb.is-open { display: flex; }

.lb__figure {
  position: relative;
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.lb.is-swapping .lb__img { opacity: 0; }

.lb__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vue-cream);
}.lb__count {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--vue-lime);
  white-space: nowrap;
}

.lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(234, 230, 208, 0.4);
  background: rgba(0, 0, 0, 0.5);
  color: var(--vue-cream);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.lb__btn:hover, .lb__btn:focus-visible {
  background: var(--vue-lime);
  border-color: var(--vue-lime);
  color: var(--vue-black);
}
.lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lb__prev  { left: clamp(6px, 2vw, 28px);  top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(6px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb__close { top: clamp(10px, 2vw, 26px); right: clamp(10px, 2vw, 26px); }

body.lb-open { overflow: hidden; }

/* ---- Amenities ----------------------------------------------------------- */

.amenities {
  background: var(--vue-black);
  padding-block: var(--band-y);
}
.amenities h2 { color: var(--vue-lime); margin-bottom: clamp(28px, 3.6vw, 46px); }
.amenities__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
}
.amenities__list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 0 16px;
  padding-block: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(234, 230, 208, 0.18);
  color: var(--vue-cream);
  line-height: 1.6;
}
.amenities__list li::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 0.72em;
  background: var(--vue-lime);
}

/* ---- Location + CTA ------------------------------------------------------ */

.contact {
  background: var(--vue-cobalt);
  color: var(--vue-cream);
  padding-block: var(--band-y);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.contact__label { color: var(--vue-peach); margin-bottom: 18px; }
.contact__addr {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: var(--lh-display);
  color: var(--vue-cream);
  font-style: normal;
  max-width: 16ch;
}
.contact__lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 30px; }
.contact__lines a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--vue-cream);
  border-bottom: 1px solid rgba(234, 230, 208, 0.35);
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact__lines a:hover, .contact__lines a:focus-visible {
  color: var(--vue-lime);
  border-color: var(--vue-lime);
}
.contact__social {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.contact__social a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vue-peach);
  transition: color 0.2s ease;
}
.contact__social a:hover, .contact__social a:focus-visible { color: var(--vue-lime); }

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

.footer {
  background: var(--vue-black);
  padding-block: clamp(34px, 4vw, 54px);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer__mark img { width: 132px; height: auto; opacity: 0.9; }
.footer__credit {
  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: 900px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(92px, 14vw, 150px); }
  .contact__grid { grid-template-columns: 1fr; }
  .amenities__list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --fs-body: 15px; }
  .stats__grid { grid-template-columns: 1fr; gap: 30px; }
  .stat { flex-direction: row; align-items: baseline; gap: 16px; }
  .stat__figure { min-width: 3.4ch; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: clamp(84px, 26vw, 130px); }
  .tile, .tile--wide { grid-column: span 1; }
  .lb__img { max-height: calc(100vh - 210px); }
  .lb__btn { width: 46px; height: 46px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__credit { text-align: left; }
}

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

/* ---- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .lb__img, .lb.is-swapping .lb__img { transition: none; opacity: 1; }
  .tile:hover img, .tile:focus-visible img { transform: none; }
}