/* =========================================================
   base.css - Reset, element defaults, typography
   Bellrock-inspired - DM Sans body, PT Serif display
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   PHOTO GRADE - one warm, muted editorial filter over every
   photograph and the render: slight desaturation, sepia hint,
   lifted blacks. Unifies mixed stock into one mood.
   ========================================================= */
.hero__img,
.feature__img,
.experience__main,
.experience__inset,
.story-photo__img {
  filter: saturate(0.72) sepia(0.18) contrast(0.96) brightness(1.02);
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  font-feature-settings: 'kern', 'liga', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Guard for the heritage bleed: never a horizontal scrollbar. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

h1 {
  font-size: var(--fs-display-xl);
  font-weight: var(--w-display);
}

h2 {
  font-size: var(--fs-display-1);
  font-weight: var(--w-display);
}

h3 {
  font-size: var(--fs-heading);
  font-weight: var(--w-display);
  line-height: var(--lh-heading);
}

p {
  max-width: var(--text-max);
  color: var(--ink-soft);
}

p + p { margin-top: 1.2em; }

strong, b {
  font-weight: var(--w-semi);
  color: var(--ink);
}

em, i {
  font-style: italic;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--accent-deep); }

/* =========================================================
   SCRIPT ACCENT - italic serif with a champagne gold
   gradient on the letters. Used for inline highlight words
   in display headings only - never on body text.
   ========================================================= */
.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Gradient is applied to the span AND any word divs SplitText
   creates inside it - background-clip:text on a parent does not
   paint into transformed child layers, so each word clips its own.
   The padding extends the paint box past the italic overhangs
   (descenders, left swashes) so glyphs are never cut off;
   horizontal margins compensate so word spacing is unchanged. */
.script,
.script div {
  color: var(--gold-ink); /* fallback if background-clip unsupported */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0.08em 0.1em 0.22em 0.06em;
  margin: 0 -0.1em 0 -0.06em;
}
/* Brighter champagne gradient for .script on dark surfaces */
.section--dark-story .script,
.section--dark-story .script div,
.hero .script,
.hero .script div,
.footer .script,
.footer .script div,
.diagonal .script,
.diagonal .script div,
.creed .script,
.creed .script div {
  color: var(--gold-bright);
  background: var(--grad-gold-night);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   SECTION LABEL - mono small caps with horizontal lines on
   each side, like an enamel platform sign.
   Signature: —— LABEL ——
   ========================================================= */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink);
  white-space: nowrap;
}
.label::before,
.label::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.label--center { margin-inline: auto; }
.label--on-night { color: var(--night-text); }
.label--on-night::before,
.label--on-night::after,
.footer .label::before,
.footer .label::after,
.hero .label::before,
.hero .label::after { background: var(--gold-bright); }

.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--gold-ink);
}

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

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Brighter gold ring on dark surfaces */
.diagonal :focus-visible,
.section--dark-story :focus-visible,
.footer :focus-visible,
.ticket--first :focus-visible,
.dialog--night :focus-visible {
  outline-color: var(--gold-bright);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}