* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --gold: #d8b476;
  --gold-soft: #b98b55;
  --wine-1: #7c1820;
  --wine-2: #3d070c;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #030303;
}

body {
  min-height: 100svh;
  overflow: hidden;
}

a {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   DESKTOP / TABLET
   ========================================================= */

.desktop {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #030303;
}

/* The approved desktop artwork is reused as an atmospheric,
   enlarged background so wide monitors no longer show flat
   black bars at the sides. */
.ambient-bg {
  position: absolute;
  inset: -7%;
  z-index: -2;
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.32)),
    url("assets/landing-desktop.png") center / cover no-repeat;
  filter: blur(22px) brightness(.46) saturate(1.05);
  transform: scale(1.10);
}

.desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.00) 30%,
      rgba(0,0,0,.16) 66%,
      rgba(0,0,0,.58) 100%
    );
}

.desktop-card {
  position: relative;
  width: min(100vw, calc(100svh * 1.5));
  aspect-ratio: 3 / 2;
  max-height: 100svh;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.28);
}

.desktop-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* These buttons replace the colors painted into the artwork.
   Both are black at rest, then become burgundy on hover. */
.desktop-button {
  position: absolute;
  top: 73.55%;
  width: 25.55%;
  height: 14.4%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #e2c9a2;

  background:
    linear-gradient(180deg, rgba(13,14,15,.99), rgba(3,4,5,.99));
  border: 1px solid rgba(199,151,84,.94);
  box-shadow:
    inset 0 0 0 2px rgba(110,72,39,.24),
    0 10px 28px rgba(0,0,0,.24);

  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease,
    transform .22s ease;
}

.desktop-button.english {
  left: 21.48%;
}

.desktop-button.spanish {
  left: 52.12%;
}

.desktop-button::before,
.desktop-button::after {
  content: "";
  position: absolute;
  top: 8%;
  width: 29%;
  height: 1px;
  opacity: .48;
  background: linear-gradient(90deg, transparent, rgba(199,151,84,.9));
}

.desktop-button::before {
  left: 9%;
}

.desktop-button::after {
  right: 9%;
  transform: scaleX(-1);
}

.desktop-button span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.65vw, 2rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

.desktop-button:hover,
.desktop-button:focus-visible {
  background:
    radial-gradient(circle at 50% 42%, rgba(130,25,33,.98), rgba(57,7,12,.99) 75%);
  color: #f2d9ae;
  border-color: rgba(222,177,106,1);
  box-shadow:
    inset 0 0 0 2px rgba(191,113,74,.25),
    0 0 28px rgba(128,15,23,.34),
    0 12px 34px rgba(0,0,0,.38);
  transform: translateY(-2px);
  outline: none;
}

.desktop-button:active {
  transform: translateY(0);
}

/* =========================================================
   MOBILE — calibrated to the actual vertical artwork
   ========================================================= */

.mobile {
  display: none;
  position: relative;
  width: 100vw;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #030303;
}

/* Fill any extra space on unusually tall/narrow or short/wide
   phones with the same artwork, softly blurred — never flat black. */
.mobile::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  background:
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.30)),
    url("assets/landing-mobile.png") center / cover no-repeat;
  filter: blur(18px) brightness(.46) saturate(1.04);
  transform: scale(1.08);
}

.mobile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.18) 76%,
      rgba(0,0,0,.42) 100%);
}

/* Crucial fix:
   the clickable layer and the image now share the exact same
   941×1672 aspect ratio, so they can never drift apart. */
.mobile-card {
  position: relative;
  width: min(100vw, calc(100svh * 941 / 1672));
  aspect-ratio: 941 / 1672;
  max-height: 100svh;
  overflow: hidden;
  box-shadow: 0 0 46px rgba(0,0,0,.28);
}

.mobile-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* Exact button coordinates measured from the approved
   941×1672 mobile artwork. */
.mobile-button {
  position: absolute;
  left: 26.68%;
  width: 46.55%;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.mobile-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mobile-english {
  top: 68.00%;
  height: 7.48%;
}

.mobile-spanish {
  top: 77.21%;
  height: 7.60%;
}

/* Touch/focus feedback stays inside the actual visible button. */
.mobile-button:active,
.mobile-button:focus-visible {
  background:
    radial-gradient(circle at center,
      rgba(128,22,31,.58),
      rgba(61,7,13,.46));
  border-color: rgba(219,172,100,.78);
  box-shadow:
    inset 0 0 0 1px rgba(194,139,82,.18),
    0 0 18px rgba(121,15,23,.25);
  outline: none;
}

/* =========================================================
   RESPONSIVE SWITCH
   ========================================================= */

@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  body {
    overflow: hidden;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: grid;
  }
}

/* Short landscape screens continue to use the desktop version. */
@media (min-width: 821px) and (max-height: 650px) {
  .desktop-card {
    width: min(100vw, calc(100svh * 1.5));
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-button,
  .mobile-button {
    transition: none;
  }
}