:root {
  --ink-navy:    #16224A;
  --ink-purple:  #312A63;
  --gold:        #C08A2E;
  --gold-line:   rgba(192, 138, 46, 0.53);
  --red:         #D2432A;
  --subtitle:    #3A4262;
  --parchment-1: #FDF8EC;
  --parchment-2: #FBF2DC;
  --parchment-3: #F5E8CB;
  --parchment-edge: rgba(228, 207, 160, 0.33);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

::selection {
  background: var(--red);
  color: #FBF3E0;
}

a        { color: var(--gold); }
a:hover  { color: var(--ink-navy); }

/* Full-viewport parchment stage */
.page {
  min-height: 100vh;      /* fallback for browsers without dvh */
  min-height: 100dvh;     /* accounts for mobile browser chrome */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Vertical padding collapses on short viewports so nothing is pushed off-screen */
  padding: clamp(1rem, 5vh, 4rem) clamp(1.25rem, 5vw, 1.5rem);
  overflow: hidden;
  background:
    radial-gradient(140% 120% at 50% 50%, rgba(252, 246, 230, 0) 55%, var(--parchment-edge) 100%),
    radial-gradient(70% 55% at 50% 42%, var(--parchment-1) 0%, var(--parchment-2) 55%, var(--parchment-3) 100%);
}

.content {
  width: 100%;
  max-width: 53.75rem;
  text-align: center;
}

/* Eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 clamp(0.75rem, 3vh, 1.625rem);
  color: var(--gold);
  font-size: clamp(0.6875rem, 1.6vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.eyebrow__rule {
  width: clamp(1.25rem, 5vw, 2.125rem);
  height: 0.09375rem;
  background: var(--gold-line);
}

/* Title */
.title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  color: var(--ink-navy);
  /* Scales with width, but the vh term shrinks it on short screens */
  font-size: clamp(2.75rem, 7vw + 1.5vh, 8.25rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
}

.title__accent {
  color: var(--gold);
}

/* Subtitle */
.subtitle {
  margin: clamp(1rem, 4vh, 2.5rem) auto 0;
  max-width: 35rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--subtitle);
  font-size: clamp(1.1875rem, 2.9vw, 1.75rem);
  line-height: 1.4;
}

/* Winding treasure-map trail */
.trail {
  margin: clamp(1rem, 4vh, 2.5rem) auto clamp(0.75rem, 2.5vh, 1.5rem);
  width: clamp(15rem, 40vw, 21.25rem);
}

.trail svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Tagline */
.tagline {
  margin: 0;
  color: var(--ink-purple);
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Narrow screens: drop the eyebrow's decorative rules so the phrase sits on one clean line */
@media (max-width: 30rem) {
  .eyebrow__rule { display: none; }
}

/* Very short / landscape viewports: hide the decorative trail to guarantee fit */
@media (max-height: 30rem) {
  .trail { display: none; }
}