/* Reset & base element styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* `select` belongs here with the others: without it the dropdowns on the
   booking form fall back to the browser default (Arial ~13px) while every
   input beside them renders in Inter at 17px, which reads as an unstyled
   control on the site's main conversion form. Inheriting also keeps them
   above 16px, below which iOS zooms the page in on focus. */
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

::selection {
  background: var(--color-gold);
  color: var(--color-ink);
}

/* Layout helpers */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-8);
}

.surface-inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.surface-secondary {
  background: var(--surface-secondary);
}

/* Section heading pattern: coordinate label + serif title */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.section-title {
  font-size: var(--fs-2xl);
  max-width: 26ch;
}

.section-intro {
  max-width: 42ch;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.surface-inverse .section-intro {
  color: var(--text-inverse-muted);
}

/* Regular gold only hits ~2.5:1 against the ivory surface-inverse
   background — well under WCAG AA's 4.5:1 minimum for normal-size text. */
.surface-inverse .section-label {
  color: var(--color-gold-contrast);
}

.surface-inverse .btn-text {
  color: var(--color-gold-contrast);
}

.eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Divider */

.hairline {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: 0;
}

.surface-inverse .hairline {
  border-top-color: var(--border-hairline-inverse);
}

.rank-divider {
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--border-hairline) 0,
    var(--border-hairline) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* Buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.9rem 1.9rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateX(0);
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-ink);
  border-color: var(--color-gold);
}

.btn-primary::before {
  background: var(--color-ivory);
}

.btn-primary:hover {
  color: var(--color-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-hairline);
}

.btn-ghost::before {
  background: var(--text-primary);
}

.btn-ghost:hover {
  color: var(--color-ink);
  border-color: var(--text-primary);
}

.surface-inverse .btn-ghost {
  color: var(--text-inverse);
  border-color: var(--border-hairline-inverse);
}

.surface-inverse .btn-ghost::before {
  background: var(--text-inverse);
}

.surface-inverse .btn-ghost:hover {
  color: var(--color-ivory);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--duration-fast) var(--ease-out), gap var(--duration-fast) var(--ease-out);
}

.btn-text:hover {
  border-color: var(--color-gold);
  gap: var(--space-3);
}

.btn-text svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn-text:hover svg {
  transform: translateX(3px);
}

/* Utility */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

.text-muted {
  color: var(--text-muted);
}

/* Long-form prose pages (privacy policy, terms, etc.) — a readable line
   length and simple vertical rhythm, reusing the same type/color tokens
   as the rest of the site rather than introducing new ones. */
.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
  margin-top: var(--space-4);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.prose ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.prose ol {
  padding-left: var(--space-5);
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-2);
}

/* A quoted line, not an alert box — a hairline rule rather than a filled
   panel keeps it inside the same quiet register as the rest of the article. */
.prose blockquote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-gold-dim);
  font-style: italic;
}

.prose strong {
  color: var(--text-primary);
}

/* Base resets a { color: inherit } site-wide, so inline links inside prose
   are indistinguishable from body text unless given their own treatment. */
.prose a {
  color: var(--color-gold);
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.prose a:hover {
  border-bottom-color: var(--color-gold);
}

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-8);
  }
}