/* What all three pages share: palette, header, logo and footer. */
:root {
  --void: #070706;
  --panel: #12120e;
  --panel-2: #1e1e17;
  --line: #3b3a2c;
  --yellow: #fbdf58;
  --on-yellow: #070706;
  --text: #f5f3e6;
  --muted: #aeac98;
  --alert: #ff8a5c;
  --hazard: repeating-linear-gradient(-45deg, var(--yellow) 0 9px, var(--void) 9px 18px);
  --display: 'Archivo', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --data: 'IBM Plex Mono', 'Hiragino Sans', ui-monospace, monospace;
  --gutter: clamp(16px, 3.5vw, 44px);
}

body {
  background:
    linear-gradient(rgba(251, 223, 88, .035) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(251, 223, 88, .035) 1px, transparent 1px) 0 0 / 44px 100%,
    var(--void);
}

.bar { position: relative; z-index: 50; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; min-height: 64px; padding: 10px var(--gutter); }
.mark { font: 700 28px/1 var(--display); color: var(--yellow); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.bar-nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin-right: auto; font: 400 16px var(--data); text-transform: uppercase; }
.bar-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--yellow); }
.bar-nav a[aria-current]::before { content: '> '; white-space: pre; }
.lang select { min-height: 44px; padding: 0 6px; background: var(--panel); border: 1px solid var(--yellow); border-radius: 0; color: var(--yellow); font: 400 15px var(--data); }

.no-comparator a[href='/comparador'] { display: none; }

.nav-account { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.nav-account a { color: var(--yellow); }
.nav-logout { min-height: 44px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; text-transform: uppercase; cursor: pointer; }
.nav-logout:hover { color: var(--yellow); }

.menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 10px; background: none; border: 1px solid var(--yellow); border-radius: 0; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: var(--yellow); transition: transform .15s ease-out, opacity .1s linear; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1500px) {
  .menu-toggle { display: flex; margin-left: auto; }
  .bar-nav, .bar .lang { display: none; }
  /* The open menu floats over the page instead of pushing it down. */
  .menu-open .bar-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; margin: 0; padding: 72px var(--gutter) 18px; max-height: calc(100dvh - 64px); overflow-y: auto; background: var(--void); border-bottom: 1px solid var(--yellow); box-shadow: 0 24px 48px rgba(0, 0, 0, .6); }
  .menu-open .bar-nav a { min-height: 50px; border-top: 1px solid var(--line); }
  .nav-account { justify-content: space-between; }
  .nav-account a { flex: 1; }
  .menu-open .lang { position: absolute; top: calc(100% + 14px); left: var(--gutter); right: var(--gutter); z-index: 61; display: block; }
  .menu-open .lang select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span { transition: none; }
}

.lockup { font: 700 clamp(16px, 2.2vw, 24px) var(--display); text-transform: uppercase; }

.foot { position: relative; display: flex; justify-content: space-between; padding: 24px var(--gutter) 16px; color: var(--muted); font: 400 14px var(--data); }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hazard); }

/* Sections of the full site stay hidden unless the server runs it (SURCO_FULL_SITE). */
html:not(.full-site) [data-full] { display: none !important; }

/* The REC wordmark stands in for the name in the bar. */
.mark { display: inline-flex; align-items: center; min-height: 44px; }
.mark-logo { display: block; width: auto; height: clamp(22px, 14px + 1.2vw, 30px); }
html.full-site [data-lite] { display: none !important; }

/* Where to play the Daily Ride: the web now, the app stores soon. */
.app-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.app-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; text-align: left; text-decoration: none; }
.app-badge-logo { flex: none; width: 26px; height: 26px; }
.app-badge-text { display: grid; line-height: 1.1; }
.app-badge-text small { color: var(--muted); font: 400 12px var(--data); text-transform: uppercase; letter-spacing: .04em; }
.app-badge-text strong { font: 700 19px var(--display); }
.app-badge.is-web { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); cursor: pointer; }
.app-badge.is-web small { color: var(--on-yellow); opacity: .75; }
.app-badge.is-web:hover, .app-badge.is-web:focus-visible { background: #fff; border-color: #fff; }
.app-badge.is-store:hover, .app-badge.is-store:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.app-badge.is-soon { color: var(--muted); border-style: dashed; }
.app-badge.is-soon strong { color: var(--text); }

/* Big headlines in Archivo's heaviest weight, a touch tighter, like the posters. */
.home-title, .home-heading, .party-date, .about-title, .resident-name, .gallery-title, .gate-slogan, .ride-head h1, .requests-page h1 { font-weight: 800; letter-spacing: -0.015em; }

/* The header stays at the top while scrolling. */
.bar { position: sticky; top: 0; background: rgba(7, 7, 6, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Sections jumped to from the menu land below the header, not under it. */
[id] { scroll-margin-top: 80px; }