/* ============================================================
   Respawn Lounge — styles.css
   Design tokens from DESIGN.md (Linear — midnight precision instrument)
   Mobile-first · breakpoints 480 / 768 / 1024 / 1200
   ============================================================ */

:root {
  /* Colors */
  --color-void: #08090a;
  --color-carbon: #0f1011;
  --color-obsidian: #161718;
  --color-graphite: #23252a;
  --color-smoke: #383b3f;
  --color-ash: #62666d;
  --color-fog: #8a8f98;
  --color-mist: #d0d6e0;
  --color-bone: #e5e5e6;
  --color-paper: #ffffff;
  --color-acid-lime: #e4f222;
  --color-pulse-green: #27a644;
  --color-coral-red: #eb5757;
  --color-signal-teal: #02b8cc;
  --color-iris-violet: #6366f1;
  --color-lavender: #8b5cf6;

  /* Typography */
  --font-inter-variable: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-berkeley-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-w510: 510;
  --font-weight-w590: 590;

  /* Spacing */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px;
  --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;
  --spacing-28: 28px; --spacing-32: 32px; --spacing-36: 36px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px;
  --spacing-64: 64px; --spacing-80: 80px; --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Radii */
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-small: 2px;
  --radius-badges: 4px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
  --shadow-subtle: rgb(35, 37, 42) 0px 0px 0px 1px inset;
  --shadow-xl: rgba(8, 9, 10, 0.6) 0px 4px 32px 0px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--color-void);
  color: var(--color-mist);
  font-family: var(--font-inter-variable);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: -0.010em;
  font-feature-settings: "cv01" on, "ss03" on, "zero" on;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-20);
}
.container--narrow { max-width: 720px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--element-gap);
  border: none;
  border-radius: var(--radius-buttons);
  padding: 10px 16px;
  font-family: var(--font-inter-variable);
  font-size: 14px;
  font-weight: var(--font-weight-w510);
  letter-spacing: -0.011em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* The one chromatic action in the system */
.btn--primary {
  background: var(--color-acid-lime);
  color: var(--color-void);
  box-shadow: rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px;
}
.btn--primary:hover { opacity: 0.88; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-graphite);
  color: var(--color-mist);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  padding: 8px 12px;
}
.btn--ghost:hover { border-color: var(--color-smoke); background: rgba(255, 255, 255, 0.02); }

.btn--white {
  background: var(--color-paper);
  color: var(--color-void);
}
.btn--white:hover { background: var(--color-bone); }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-fog);
  border-radius: var(--radius-badges);
  padding: 0 6px;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}
.badge--green { color: var(--color-pulse-green); box-shadow: inset 0 0 0 1px var(--color-pulse-green); background: transparent; }
.badge--violet { background: rgba(99, 102, 241, 0.18); color: var(--color-lavender); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-16) 0;
}

.nav__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  width: 100%;
  max-width: 920px;
  background: rgba(15, 16, 17, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-pills);
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
  box-shadow: var(--shadow-sm);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--element-gap);
  text-decoration: none;
  color: var(--color-paper);
  font-size: 16px;
  font-weight: var(--font-weight-w510);
  white-space: nowrap;
}

.nav__logo-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-buttons);
  background: var(--color-void);
  box-shadow: var(--shadow-subtle);
  color: var(--color-acid-lime);
  font-family: var(--font-berkeley-mono);
  font-size: 11px;
  letter-spacing: -0.013em;
}

.nav__logo-word { display: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-pills);
  color: var(--color-mist);
  font-size: 15px;
  cursor: pointer;
}

.nav__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: var(--spacing-16);
  right: var(--spacing-16);
  flex-direction: column;
  gap: var(--spacing-4);
  background: var(--color-carbon);
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-cards);
  padding: var(--spacing-12);
  box-shadow: var(--shadow-xl);
}
.nav__pill { position: relative; }
.nav__menu.is-open { display: flex; }

.nav__link {
  color: var(--color-mist);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-buttons);
}
.nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* White pill — high-emphasis nav CTA (Sign-up Button pattern) */
.nav__cta {
  display: inline-flex;
  justify-content: center;
  background: var(--color-paper);
  color: var(--color-void);
  border-radius: var(--radius-pills);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: var(--font-weight-w510);
  text-decoration: none;
}
.nav__cta:hover { background: var(--color-bone); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 128px 0 var(--spacing-64);
}

/* Pulsing edge glow — 3 palette hues cycling over 18s */
.hero__glow { position: absolute; inset: 0; pointer-events: none; }

.hero__glow-edge {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  will-change: opacity;
}
.hero__glow-edge--top {
  top: -220px; left: 50%; margin-left: -300px;
  width: 600px; height: 380px;
  background: var(--color-signal-teal);
  animation: glow-pulse 18s ease-in-out infinite;
}
.hero__glow-edge--left {
  bottom: -160px; left: -240px;
  width: 520px; height: 420px;
  background: var(--color-iris-violet);
  animation: glow-pulse 18s ease-in-out infinite;
  animation-delay: -6s;
}
.hero__glow-edge--right {
  top: 30%; right: -260px;
  width: 520px; height: 420px;
  background: var(--color-pulse-green);
  animation: glow-pulse 18s ease-in-out infinite;
  animation-delay: -12s;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0; }
  16%      { opacity: 0.16; }
  33%      { opacity: 0.05; }
  50%      { opacity: 0; }
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--spacing-40);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-20);
}
.hero__eyebrow-mono {
  font-family: var(--font-berkeley-mono);
  font-size: 12px;
  letter-spacing: -0.013em;
  color: var(--color-ash);
}

.hero__title {
  color: var(--color-paper);
  font-size: 44px;
  font-weight: var(--font-weight-w510);
  line-height: 1.0;
  letter-spacing: -0.022em;
}
.hero__title-accent { color: var(--color-acid-lime); }

.hero__sub {
  margin-top: var(--spacing-20);
  max-width: 560px;
  color: var(--color-fog);
  font-size: 16px;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-28);
}

/* Framed photo — product-screenshot card pattern */
.hero__frame {
  position: relative;
  background: var(--color-carbon);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-12);
}
.hero__img {
  width: 100%;
  border-radius: var(--radius-inputs);
  object-fit: cover;
}
.hero__caption {
  padding: var(--spacing-12) var(--spacing-4) var(--spacing-4);
  font-family: var(--font-berkeley-mono);
  font-size: 12px;
  letter-spacing: -0.013em;
  color: var(--color-ash);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: var(--spacing-96) 0; }

.section--carbon {
  background: var(--color-carbon);
  border-top: 1px solid var(--color-graphite);
  border-bottom: 1px solid var(--color-graphite);
}

.section__eyebrow {
  font-family: var(--font-berkeley-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-ash);
  margin-bottom: var(--spacing-16);
}

.section__title {
  color: var(--color-paper);
  font-size: 32px;
  font-weight: var(--font-weight-w510);
  line-height: 1.13;
  letter-spacing: -0.022em;
  margin-bottom: var(--spacing-16);
}

.section__lead {
  color: var(--color-fog);
  font-size: 16px;
  max-width: 560px;
  margin-bottom: var(--spacing-48);
}

/* ============================================================
   RATE CARDS
   ============================================================ */
.rates__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16);
}

.rate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-carbon);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
}

.rate-card--featured {
  background: var(--color-obsidian);
  box-shadow: inset 0 0 0 1px var(--color-smoke);
}

.rate-card__flag {
  position: absolute;
  top: calc(-1 * var(--spacing-12));
  left: var(--card-padding);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  color: var(--color-mist);
  border: 1px solid var(--color-smoke);
  border-radius: var(--radius-pills);
  padding: 4px 12px;
  font-size: 12px;
}

.rate-card__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}
.rate-card__icon { color: var(--color-fog); font-size: 15px; }
.rate-card__name {
  color: var(--color-paper);
  font-size: 17px;
  font-weight: var(--font-weight-w510);
  letter-spacing: -0.011em;
}

.rate-card__price { display: flex; align-items: baseline; gap: var(--spacing-8); margin-bottom: var(--spacing-12); }
.rate-card__amount {
  color: var(--color-paper);
  font-size: 48px;
  font-weight: var(--font-weight-w510);
  line-height: 1;
  letter-spacing: -0.022em;
}
.rate-card__per {
  font-family: var(--font-berkeley-mono);
  font-size: 12px;
  color: var(--color-ash);
}

.rate-card__blurb { color: var(--color-fog); font-size: 15px; line-height: 1.6; letter-spacing: -0.011em; margin-bottom: var(--spacing-20); }

.rate-card__list {
  display: grid;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}
.rate-card__list li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  color: var(--color-mist);
  font-size: 14px;
}
.rate-card__list i { color: var(--color-ash); font-size: 11px; }

.rate-card__btn { margin-top: auto; justify-content: center; }

/* ============================================================
   SPECS
   ============================================================ */
.specs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16);
}

.spec {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
}

.spec__icon {
  display: block;
  color: var(--color-signal-teal);
  font-size: 18px;
  margin-bottom: var(--spacing-16);
}
.spec:nth-child(even) .spec__icon { color: var(--color-iris-violet); }

.spec__name {
  color: var(--color-paper);
  font-size: 16px;
  font-weight: var(--font-weight-w510);
  letter-spacing: -0.010em;
  margin-bottom: var(--spacing-8);
}
.spec__text { color: var(--color-fog); font-size: 14px; line-height: 1.6; margin-bottom: var(--spacing-12); }
.spec__meta {
  font-family: var(--font-berkeley-mono);
  font-size: 12px;
  letter-spacing: -0.013em;
  color: var(--color-ash);
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-8);
}

.gallery__item {
  overflow: hidden;
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  background: var(--color-carbon);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.4s ease;
}
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { aspect-ratio: 16 / 8; }

/* ============================================================
   LOCATION & HOURS
   ============================================================ */
.location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16);
}

.location__card {
  background: var(--color-void);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
}

.location__card-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-paper);
  font-size: 17px;
  font-weight: var(--font-weight-w510);
  margin-bottom: var(--spacing-20);
}
.location__card-title i { color: var(--color-fog); font-size: 14px; }

.location__address {
  color: var(--color-mist);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: var(--spacing-20);
}

.location__notes { display: grid; gap: var(--spacing-12); }
.location__notes li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-12);
  color: var(--color-fog);
  font-size: 14px;
}
.location__notes i { color: var(--color-ash); font-size: 12px; width: 14px; }
.location__notes a { color: var(--color-mist); text-decoration: none; }
.location__notes a:hover { text-decoration: underline; }

.hours { display: grid; gap: var(--spacing-8); margin-bottom: var(--spacing-20); }
.hours__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-16);
  border-bottom: 1px solid var(--color-graphite);
  padding-bottom: var(--spacing-8);
}
.hours__row dt { color: var(--color-fog); font-size: 14px; }
.hours__row dd {
  font-family: var(--font-berkeley-mono);
  font-size: 14px;
  letter-spacing: -0.013em;
  color: var(--color-mist);
}
.hours__row--hot dd { color: var(--color-pulse-green); }

.location__hint { color: var(--color-fog); font-size: 13px; line-height: 1.6; }

/* ============================================================
   BOOKING FORM
   ============================================================ */
.booking {
  background: var(--color-carbon);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
  display: grid;
  gap: var(--spacing-20);
}

.booking__row { display: grid; gap: var(--spacing-20); }

.field { display: grid; gap: var(--spacing-8); }

.field__label {
  color: var(--color-mist);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
}
.field__label span[aria-hidden] { color: var(--color-ash); }
.field__optional { color: var(--color-ash); font-size: 12px; }

.field__input {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-mist);
  border-radius: var(--radius-inputs);
  padding: 12px 14px;
  font-family: var(--font-inter-variable);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  transition: border-color 0.15s ease;
}
.field__input::placeholder { color: var(--color-ash); }
.field__input:focus { outline: none; border-color: var(--color-mist); }
.field__input--area { resize: vertical; min-height: 96px; }

select.field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-fog) 50%), linear-gradient(135deg, var(--color-fog) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="date"].field__input, input[type="time"].field__input { color-scheme: dark; }

.field__error {
  display: none;
  color: var(--color-coral-red);
  font-size: 12px;
  line-height: 1.4;
}
.field.is-invalid .field__error { display: block; }
.field.is-invalid .field__input { border-color: var(--color-coral-red); }

.booking__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  align-items: flex-start;
}
.booking__submit { justify-content: center; }
.booking__note { color: var(--color-ash); font-size: 13px; }

.booking__status {
  display: none;
  border-radius: var(--radius-inputs);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 14px;
}
.booking__status.is-success {
  display: block;
  color: var(--color-pulse-green);
  box-shadow: inset 0 0 0 1px var(--color-pulse-green);
}
.booking__status.is-error {
  display: block;
  color: var(--color-coral-red);
  box-shadow: inset 0 0 0 1px var(--color-coral-red);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--color-graphite);
  padding: var(--spacing-64) 0 var(--spacing-32);
}

.footer__inner {
  display: grid;
  gap: var(--spacing-32);
  margin-bottom: var(--spacing-48);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-paper);
  font-size: 16px;
  font-weight: var(--font-weight-w510);
  margin-bottom: var(--spacing-12);
}
.footer__tag { color: var(--color-fog); font-size: 14px; line-height: 1.6; max-width: 360px; }

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-16); }
.footer__nav a {
  color: var(--color-mist);
  font-size: 13px;
  text-decoration: none;
  padding: var(--spacing-4) 0;
}
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  border-top: 1px solid var(--color-graphite);
  padding-top: var(--spacing-24);
  color: var(--color-ash);
  font-size: 13px;
}
.footer__mono { font-family: var(--font-berkeley-mono); font-size: 12px; letter-spacing: -0.013em; }

/* ============================================================
   BREAKPOINTS — mobile-first
   ============================================================ */

/* ≥480px */
@media (min-width: 480px) {
  .hero__title { font-size: 48px; letter-spacing: -1.056px; }
  .booking__row { grid-template-columns: 1fr 1fr; }
  .booking__footer { flex-direction: row; align-items: center; gap: var(--spacing-20); }
}

/* ≥768px */
@media (min-width: 768px) {
  .container { padding-inline: var(--spacing-32); }

  .nav__logo-word { display: inline; }
  .nav__toggle { display: none; }
  .nav__menu {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-4);
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .hero { padding-top: 152px; }
  .hero__title { font-size: 64px; letter-spacing: -1.408px; }
  .hero__sub { font-size: 17px; }

  .section__title { font-size: 48px; line-height: 1; letter-spacing: -1.056px; }

  .rates__grid { grid-template-columns: repeat(3, 1fr); }
  .specs__grid { grid-template-columns: repeat(2, 1fr); }
  .booking__row--three { grid-template-columns: 1fr 1fr 1fr; }

  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__item--wide img { aspect-ratio: auto; height: 100%; }
  .gallery__item--tall { grid-row: span 2; }
  .gallery__item--tall img { aspect-ratio: auto; height: 100%; }

  .location__grid { grid-template-columns: 1fr 1fr; }

  .footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* ≥1024px */
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: var(--spacing-64);
  }
  .hero__title { font-size: 72px; letter-spacing: -1.584px; }
  .specs__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__grid { gap: var(--spacing-12); }
}

/* ≥1200px */
@media (min-width: 1200px) {
  .hero { padding-top: 168px; padding-bottom: var(--spacing-96); }
  .section { padding: var(--spacing-128) 0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__glow-edge { animation: none !important; opacity: 0.08; }
  [data-parallax] { transform: none !important; }
}