/* ============================================================
   AURUM HOUSE — design tokens
   Art direction: a small group of five hotels. Ink and brass,
   tight grid, wayfinding logic. Reads like a directory that
   happens to be beautiful, not a brochure.
   ============================================================ */

:root {
  --ink-950: #0a0a0b;
  --ink-900: #121214;
  --ink-800: #1a1a1d;
  --ink-700: #26262a;
  --ink-600: #3a3a40;
  --grey-500: #6e6e78;
  --grey-400: #9a9aa4;
  --grey-300: #c4c4cc;
  --paper:    #f5f4f1;
  --brass:    #b08d57;
  --brass-lt: #d4b483;
  --sage:     #6f7f6a;

  --bg:        var(--ink-950);
  --bg-raised: var(--ink-900);
  --bg-card:   var(--ink-800);
  --ink:       var(--paper);
  --ink-dim:   var(--grey-300);
  --ink-faint: var(--grey-500);
  --rule:      color-mix(in oklab, var(--paper) 14%, transparent);
  --rule-soft: color-mix(in oklab, var(--paper) 8%, transparent);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter Tight", Inter, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --step--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
  --step-1:  clamp(1.12rem, 1.02rem + 0.45vw, 1.38rem);
  --step-2:  clamp(1.45rem, 1.2rem + 1.15vw, 2.15rem);
  --step-3:  clamp(1.95rem, 1.35rem + 2.8vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.4rem + 5.6vw, 5.6rem);

  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4.5rem; --s-7: 7rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 58ch;
  --maxw: 92rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--brass); color: var(--ink-950); }
:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-7); }

.display { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; line-height: 0.98; }
.display--xl { font-size: var(--step-4); }
.display--lg { font-size: var(--step-3); }
.display--md { font-size: var(--step-2); }

.eyebrow {
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-dim); max-width: var(--measure); font-weight: 300; }
.body-dim { color: var(--ink-dim); max-width: var(--measure); }

.link { border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent); padding-bottom: 1px; transition: color 0.35s var(--ease), border-color 0.35s var(--ease); }
.link:hover { color: var(--brass-lt); border-bottom-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.9em 1.8em; font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  cursor: pointer; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink-950); border-color: var(--paper); }
.btn--brass { background: var(--brass); border-color: var(--brass); color: var(--ink-950); }
.btn--brass:hover { background: var(--brass-lt); border-color: var(--brass-lt); }

[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }