* {
  box-sizing: border-box;
}

html {
  background: #050505;
}

body {
  margin: 0;

  min-height: 100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(15, 64, 160, 0.32),
      transparent 35%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(190, 20, 35, 0.28),
      transparent 40%
    ),
    #050505;
}

a {
  color: inherit;
  text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
  min-height: 72px;

  padding:
    0
    clamp(20px, 5vw, 72px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.12);

  background:
    rgba(0, 0, 0, 0.78);

  backdrop-filter:
    blur(14px);
}

.brand {
  font-size: 20px;
  font-weight: 800;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;

  font-size: 14px;
  font-weight: 700;
}

.site-nav a {
  opacity: 0.8;
}

.site-nav a:hover {
  opacity: 1;
}


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

.hero {
  min-height:
    calc(100vh - 72px);

  padding:
    80px
    clamp(24px, 8vw, 120px);

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(150, 5, 20, 0.26),
      rgba(0, 0, 0, 0.15) 48%,
      rgba(5, 46, 140, 0.28)
    );
}

.hero-content {
  width: min(
    850px,
    100%
  );
}

.eyebrow {
  margin-bottom: 18px;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.22em;

  color: #ff4858;
}

.hero h1 {
  margin:
    0
    0
    24px;

  font-size:
    clamp(
      54px,
      9vw,
      120px
    );

  line-height: 0.9;

  letter-spacing:
    -0.06em;
}

.hero-description {
  max-width: 650px;

  margin-bottom: 36px;

  font-size:
    clamp(
      19px,
      2vw,
      28px
    );

  line-height: 1.5;

  color:
    rgba(255, 255, 255, 0.75);
}


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

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  min-height: 52px;

  padding:
    0
    24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-weight: 800;
}

.button-primary {
  background:
    #b7081c;

  color:
    #ffffff;
}

.button-secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  background:
    rgba(255, 255, 255, 0.07);
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.home-section {
  max-width: 1200px;

  margin: auto;

  padding:
    80px
    24px;
}

.home-section h2 {
  font-size:
    clamp(
      32px,
      5vw,
      60px
    );
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
  max-width: 720px
) {

  .site-header {
    padding:
      16px
      20px;

    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    width: 100%;

    gap: 18px;

    overflow-x: auto;
  }

  .hero {
    min-height:
      calc(100vh - 120px);

    padding:
      64px
      22px;
  }

}


/*
|--------------------------------------------------------------------------
| Locations
|--------------------------------------------------------------------------
*/

.locations-page {
  width: min(
    1400px,
    100%
  );

  margin: auto;

  padding:
    80px
    clamp(22px, 5vw, 72px);
}

.locations-header {
  max-width: 760px;

  margin-bottom: 50px;
}

.locations-header h1 {
  margin:
    0
    0
    18px;

  font-size:
    clamp(
      44px,
      7vw,
      82px
    );

  line-height: 0.95;

  letter-spacing:
    -0.05em;
}

.locations-header p {
  line-height: 1.6;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}

.locations-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        260px,
        1fr
      )
    );

  gap: 18px;
}

.location-card {
  min-height: 200px;

  padding: 26px;

  display: flex;
  align-items: flex-end;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        180,
        10,
        28,
        0.18
      ),
      rgba(
        8,
        30,
        80,
        0.22
      )
    );

  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.location-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.28
    );
}

.location-card h2 {
  margin:
    10px
    0
    8px;

  font-size: 24px;
}

.location-card p {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.65
    );
}

.location-type {
  font-size: 11px;

  font-weight: 900;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

  color:
    #ff5263;
}

.empty-state {
  grid-column:
    1 / -1;

  padding: 50px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 18px;

  text-align: center;
}


/*
|--------------------------------------------------------------------------
| Location Detail
|--------------------------------------------------------------------------
*/

.location-page {
  width: min(
    1100px,
    100%
  );

  margin: auto;

  padding:
    70px
    clamp(22px, 5vw, 72px);
}

.back-link {
  display: inline-block;

  margin-bottom: 30px;

  color:
    rgba(255, 255, 255, 0.7);

  font-weight: 700;
}

.location-detail-card {
  padding:
    clamp(30px, 6vw, 70px);

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(180, 10, 28, 0.24),
      rgba(5, 32, 95, 0.22)
    );
}

.location-detail-card h1 {
  max-width: 900px;

  margin:
    14px
    0
    16px;

  font-size:
    clamp(
      42px,
      7vw,
      86px
    );

  line-height: 0.95;

  letter-spacing:
    -0.05em;
}

.location-city {
  margin-bottom: 40px;

  font-size: 22px;

  color:
    rgba(255, 255, 255, 0.7);
}

.location-detail-row {
  padding:
    18px
    0;

  display: flex;
  justify-content: space-between;
  gap: 24px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.location-detail-row span {
  text-align: right;

  color:
    rgba(255, 255, 255, 0.7);
}


/*
|--------------------------------------------------------------------------
| Login
|--------------------------------------------------------------------------
*/

.login-page {
  width: min(
    700px,
    100%
  );

  margin: auto;

  padding:
    80px
    24px;
}

.login-card {
  padding:
    clamp(
      30px,
      6vw,
      60px
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    20px;

  background:
    rgba(
      0,
      0,
      0,
      0.28
    );
}

.login-card h1 {
  margin:
    8px
    0
    16px;

  font-size:
    clamp(
      42px,
      7vw,
      68px
    );
}

.login-intro {
  margin-bottom:
    32px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}

.form-field {
  display: block;

  margin-bottom:
    20px;
}

.form-field span {
  display: block;

  margin-bottom:
    8px;

  font-size:
    14px;

  font-weight:
    700;
}

.form-field input {
  width: 100%;

  min-height:
    52px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color:
    #ffffff;

  font-size:
    16px;
}

.login-submit {
  width: 100%;

  border: 0;

  cursor: pointer;
}

.login-message {
  min-height:
    24px;

  margin-top:
    16px;

  color:
    #ff6371;
}

.logged-in-state {
  display: grid;

  gap:
    18px;
}

.account-label {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.65
    );
}

.logged-in-state button {
  width:
    fit-content;

  cursor:
    pointer;
}