/* ============================================================================
   HAYES COUNTRY CLUB — base.css
   Tokens, reset, typography and layout primitives.

   THE PALETTE WAS SAMPLED FROM THE CREST ITSELF.
   The green and the gold below are the exact values pulled out of the logo
   file, not approximations. The third gold — gold-deep — exists because the
   real gold is far too light to be read as text on ivory (2.4:1). Gold-deep
   measures 5.4:1 and is the only gold used for words on a pale ground.
   ========================================================================== */

:root {
  /* --- Core brand, sampled from the crest ------------------------------- */
  --hcc-green:        #084A28;   /* the green in the H and the wordmark */
  --hcc-green-deep:   #052E19;   /* deep bands, the footer, scrims */
  --hcc-green-soft:   #0D6034;   /* hovers and secondary green */
  --hcc-green-mist:   #E9EFEA;   /* the faintest green tint */

  --hcc-gold:         #D7971F;   /* the gold in the laurel, flag and rules */
  --hcc-gold-light:   #E8B65C;   /* gold on deep green */
  --hcc-gold-deep:    #8A5E0C;   /* the ONLY gold used for text on ivory */

  /* --- Ground ----------------------------------------------------------- */
  --hcc-ivory:        #FBF8F1;
  --hcc-cream:        #F3EDE1;
  --hcc-paper:        #FFFFFF;
  --hcc-ink:          #1C1B18;   /* warm near-black, never pure black */
  --hcc-ink-soft:     #4A4740;
  --hcc-rule:         #DCD3C2;

  /* --- Booking states --------------------------------------------------- */
  --hcc-available:    var(--hcc-green);
  --hcc-limited:      var(--hcc-gold-deep);
  --hcc-reserved:     #6E685E;

  /* --- Contextual, flipped inside deep-green bands ---------------------- */
  --hcc-focus:        var(--hcc-gold-deep);
  --hcc-surface:      var(--hcc-ivory);
  --hcc-on-surface:   var(--hcc-ink);

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.24rem + 0.7vw, 1.8rem);
  --step-3:  clamp(1.75rem, 1.44rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.15rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5:  clamp(2.75rem, 1.6rem + 5vw, 5.25rem);

  /* Vertical rhythm between major chapters. Premium hospitality pages
     should feel calm rather than efficient. */
  --rhythm: clamp(6rem, 11.5vw, 11rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --radius: 2px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html[data-scroll-locked] { overflow: hidden; }
html[data-scroll-locked] body { position: fixed; width: 100%; }

body {
  margin: 0;
  background: var(--hcc-ivory);
  color: var(--hcc-ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ==========================================================================
   FOCUS — always visible, never removed without a replacement.
   ========================================================================== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--hcc-focus);
  outline-offset: 2px;
  border-radius: 1px;
}
.band--green :focus-visible,
.hero :focus-visible,
.footer :focus-visible { --hcc-focus: var(--hcc-gold-light); }

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--hcc-green-deep);
  color: var(--hcc-ivory);
  padding: 0.85rem 1.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 180ms var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

.h-lead   { font-size: var(--step-4); }
.h-sub    { font-size: var(--step-3); }
.h-small  { font-size: var(--step-2); }

/* Headlines want a short measure. Body copy wants a long one. */
.measure-h { max-width: 19ch; }
.measure-h--wide { max-width: 24ch; }
.measure   { max-width: 64ch; }
.measure--tight { max-width: 54ch; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--hcc-ink-soft);
}

.prose p + p { margin-top: 1.15em; }
.prose { color: var(--hcc-ink-soft); }
.prose strong { color: var(--hcc-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   THE TRACKED LABEL
   This is the single most repeated typographic device on the site. It is the
   "COUNTRY CLUB" treatment from the crest: wide-tracked caps between two thin
   gold rules.
   -------------------------------------------------------------------------- */
.tracked {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hcc-green);
}
.tracked--gold { color: var(--hcc-gold-deep); }
.tracked--ivory { color: var(--hcc-ivory); }

/* The eyebrow: ——— SECTION LABEL ——— */
.tracked--rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: fit-content;
}
.tracked--rule::before,
.tracked--rule::after {
  content: "";
  height: 1px;
  width: clamp(1.75rem, 6vw, 3.25rem);
  background: var(--hcc-gold);
  flex: none;
}
.u-center .tracked--rule,
.tracked--rule.is-centered { margin-inline: auto; }

.band--green .tracked,
.hero .tracked,
.footer .tracked { color: var(--hcc-gold-light); }
.band--green .tracked--rule::before,
.band--green .tracked--rule::after,
.hero .tracked--rule::before,
.hero .tracked--rule::after,
.footer .tracked--rule::before,
.footer .tracked--rule::after { background: var(--hcc-gold); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap {
  width: min(1240px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.wrap--narrow { width: min(780px, 100% - (var(--gutter) * 2)); }
.wrap--mid    { width: min(1000px, 100% - (var(--gutter) * 2)); }
.wrap--wide   { width: min(1440px, 100% - (var(--gutter) * 2)); }

.section { padding-block: var(--rhythm); position: relative; }
.section--tight { padding-block: clamp(3.75rem, 8vw, 6.5rem); }

.band--ivory { background: var(--hcc-ivory); }
.band--cream { background: var(--hcc-cream); }
.band--paper { background: var(--hcc-paper); }
.band--green {
  background: var(--hcc-green-deep);
  color: var(--hcc-ivory);
  --hcc-surface: var(--hcc-green-deep);
  --hcc-on-surface: var(--hcc-ivory);
}
.band--green .prose,
.band--green .lede { color: rgba(251, 248, 241, 0.86); }

/* A whisper of a wash, never a visible gradient. */
.band--wash { background: linear-gradient(180deg, var(--hcc-ivory), var(--hcc-cream)); }

.u-center { text-align: center; }
.u-center .measure, .u-center .measure-h, .u-center .measure--tight { margin-inline: auto; }

.stack > * + * { margin-top: var(--stack, 1.5rem); }
.stack--sm { --stack: 1rem; }
.stack--lg { --stack: 2.25rem; }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   CREST ORNAMENTS
   ========================================================================== */
/* Ornaments are always sized by their wrapper. The wrapper must never be an
   inline box, or these percentage-sized SVGs expand to fill the whole column —
   the max rules below are a hard stop so that can never happen again. */
.orn { display: block; max-width: 100%; }
.orn--fleur { width: 0.85rem; height: 1.13rem; max-height: 3rem; color: var(--hcc-gold); }
.orn--laurel { width: 100%; height: 100%; max-height: 12rem; color: var(--hcc-gold); }
.orn--flag { width: 100%; height: 100%; max-height: 6rem; }
.orn--figure { width: 100%; height: 100%; max-height: 4rem; }

.fleur-term {
  display: block;
  width: 1.35rem;
  height: 1.8rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  color: var(--hcc-gold);
}
.fleur-term .orn--fleur { width: 100%; height: 100%; }

/* The hairline divider with a fleur set into it. */
.rule-fleur {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--hcc-gold);
}
.rule-fleur::before, .rule-fleur::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--hcc-rule);
}
.band--green .rule-fleur::before,
.band--green .rule-fleur::after,
.footer .rule-fleur::before,
.footer .rule-fleur::after { background: rgba(216, 155, 44, 0.35); }
.rule-fleur .orn--fleur { width: 0.95rem; height: 1.27rem; flex: none; }

/* --------------------------------------------------------------------------
   THE DOUBLE-RULE CERTIFICATE FRAME
   A 1px green outer border with a 1px gold border inset 6px inside it — the
   framing device from the bottom of the crest, used around the price, the
   founding seal and the reservation summary.
   -------------------------------------------------------------------------- */
.certificate {
  position: relative;
  border: 1px solid var(--hcc-green);
  background: var(--hcc-paper);
}
.certificate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hcc-gold);
  pointer-events: none;
}
.certificate__inner { padding: clamp(1.5rem, 4vw, 2.75rem); position: relative; }

.band--green .certificate {
  border-color: var(--hcc-gold);
  background: rgba(251, 248, 241, 0.04);
}
.band--green .certificate::before { border-color: rgba(232, 182, 92, 0.5); }