/* Typography, dimensions and palette from the official website's TopMenu,
   Footer, index.css and tailwind.config.cjs. */
@font-face { font-family: 'Space Mono'; src: url('/assets/SpaceMono-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/SpaceMono-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
:root { --bg: #000; --surface: #111; --surface-alt: #1a1a1a; --text: #e8e8e8; --text-secondary: #999; --brand-accent: #e5690f; --mono: 'Space Mono', 'JetBrains Mono', 'SF Mono', monospace; --font: var(--mono); }
body { background: #000; font-weight: 400; }
.official-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 88px; border-bottom: 1px solid #222; background: rgb(0 0 0 / 70%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topmenu-bar { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.official-header a { text-decoration: none; }
.official-logo { flex-shrink: 0; display: flex; align-items: center; }
.official-logo img { display: block; width: 144px; height: 48px; object-fit: contain; }
.desktop-navigation { display: none; align-items: center; gap: 16px; }
.desktop-navigation > a { color: #999; font: 400 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px; transition: color 200ms, border-color 200ms; }
.desktop-navigation > a:hover { color: #fff; }
.desktop-navigation .reserve-link { color: #fff; padding: 12px 24px; border: 1px solid #333; border-radius: 999px; white-space: nowrap; }
.desktop-navigation .create-account-link { color: #fff; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.desktop-navigation .reserve-link:hover, .desktop-navigation .create-account-link:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.auth-field input:is([type="email"], [name="code"]):focus { border-color: var(--brand-accent); outline-color: var(--brand-accent); }
.mobile-navigation > summary { list-style: none; width: 48px; height: 48px; padding: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
.mobile-navigation > summary::-webkit-details-marker { display: none; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 28px; height: 2px; background: currentColor; transition: transform 200ms; }
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ''; position: absolute; left: 0; }
.menu-bars::before { top: -8px; }
.menu-bars::after { top: 8px; }
.mobile-navigation[open] .menu-bars { background: transparent; }
.mobile-navigation[open] .menu-bars::before { top: 0; transform: rotate(45deg); }
.mobile-navigation[open] .menu-bars::after { top: 0; transform: rotate(-45deg); }
.mobile-panel { position: absolute; top: 88px; left: 0; right: 0; height: calc(100dvh - 88px); overflow-y: auto; background: #000; padding: 8px 16px 24px; }
.mobile-panel > a { display: block; padding: 24px 12px; border-bottom: 1px solid #222; color: #e8e8e8; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mobile-panel > a:hover { color: #fff; }
.mobile-panel .official-socials { justify-content: space-between; padding: 16px 8px 32px; border-bottom: 1px solid #222; }
.mobile-panel .official-socials a { height: 40px; width: 40px; padding: 10px; border: 1px solid #222; background: #111; }
.container { margin-top: 88px; }
.container:has(> .account-hero) { max-width: none; padding: 0; background: #000; }
.account-hero { min-height: calc(100svh - 88px); padding: 100px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }
.account-hero h1 { max-width: 1160px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.25; letter-spacing: -.04em; color: #fff; }
.account-hero p { max-width: 1000px; margin-top: 28px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.8; color: #999; text-wrap: pretty; }
.account-sign-in { display: inline-flex; align-items: center; justify-content: center; margin-top: 40px; min-height: 48px; padding: 12px 28px; border: 1px solid transparent; border-radius: 999px; background: #e5690f; color: #000; font-size: 15px; text-decoration: none; transition: background-color 200ms, transform 200ms; }
.account-sign-in:hover { background: #f47a20; color: #000; }
.account-sign-in:active { transform: translateY(1px); }
.account-sign-in:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.mobile-panel .create-account-link { text-transform: none; letter-spacing: 0; }
.official-footer { position: relative; background: #000; border-top: 1px solid rgb(232 232 232 / 8%); padding: 64px 32px 32px; color: #fff; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.footer-brand > a { display: inline-block; }
.footer-brand img { width: 176px; height: auto; object-fit: contain; display: block; }
.footer-brand p { margin-top: 24px; max-width: 320px; font: 400 12px/1.625 var(--mono); color: #999; }
.footer-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.footer-navigation h2 { margin: 0 0 20px; font: 400 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #666; }
.footer-navigation ul { list-style: none; padding: 0; margin: 0; }
.footer-navigation li + li { margin-top: 14px; }
.footer-navigation a { color: #e8e8e8; font: 400 12px/1.625 var(--mono); text-decoration: none; transition: color 200ms; }
.footer-navigation a:hover, .footer-navigation a:focus-visible { color: #e5690f; }
.footer-bottom { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgb(232 232 232 / 8%); display: flex; flex-direction: column; gap: 28px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 12px; color: #666; font: 400 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.footer-legal a { color: inherit; text-decoration: none; transition: color 200ms; }
.footer-legal a:hover { color: #fff; }
.official-socials { display: flex; align-items: center; gap: 20px; }
.official-socials a { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; opacity: .6; transition: opacity 200ms; }
.official-socials a:hover, .official-socials a:focus-visible { opacity: 1; }
.official-socials img { width: 100%; height: 100%; object-fit: contain; }
.official-header :focus-visible, .official-footer :focus-visible { outline: 2px solid #e5690f; outline-offset: 5px; }
.skip-link { z-index: 60; }
.scramble-text { display: inline-grid; }
.scramble-measure, .scramble-visual { grid-area: 1 / 1; }
.scramble-measure { visibility: hidden; }
.scramble-cell { display: inline-grid; }
.scramble-cell::before { content: attr(data-measure); visibility: hidden; grid-area: 1 / 1; }
.scramble-cell > span { grid-area: 1 / 1; text-align: center; }
.scramble-dud { opacity: .6; }
@media (min-width: 640px) { .footer-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .topmenu-bar { padding: 0 64px; }
  .official-footer { padding: 80px 64px 40px; }
  .footer-brand img { width: 208px; }
  .footer-bottom { margin-top: 80px; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .desktop-navigation { display: flex; }
  .mobile-navigation { display: none; }
  .topmenu-bar { padding: 0 96px; }
  .official-logo img { height: 64px; }
  .official-footer { padding-left: 96px; padding-right: 96px; }
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .footer-brand { grid-column: span 4; }
  .footer-navigation { grid-column: span 8; }
}
@media (prefers-reduced-motion: reduce) { .official-header *, .official-footer * { transition: none; } }