/* base.css - global typography and basic element styles */
html, body {
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  /* UI font for all body text */
  font-family: var(--font-sans);
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: var(--line-height-normal);
  font-feature-settings: "liga" 1;
  -webkit-font-feature-settings: "liga" 1;
}

/* Visual overlay scrollbar that sits above all content. This is an optional
   UI layer which mirrors the page scroll and is always visible. It does not
   interfere with native scrolling (pointer-events: none). */


/* Global vignette overlay: subtle fade at top and bottom (no central spotlight) */
/* Implemented with a pseudo-element on the page root so it layers above background but below content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* top and bottom subtle fades, center remains clean */
  background: linear-gradient(to bottom, rgba(0,0,0,var(--vignette-strength)) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,var(--vignette-strength)) 100%);
  mix-blend-mode: multiply;
  transition: opacity var(--transition-medium);
  z-index: 1; /* sits above background image (body::after) and below page content */
}

/* site structured background image layer - behind vignette but under content */
/* site structured background image layer - behind vignette but under content
   Implemented on body::after so it sits above the page background color but
   below the vignette (body::before) and all page content. This ensures the
   image covers the entire viewport and appears across all pages. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--site-bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* darkened to improve contrast */
  filter: saturate(0.75) contrast(0.9) brightness(0.3);
  background-blend-mode: multiply;
  background-attachment: fixed;
  will-change: transform;
  z-index: 0; /* below vignette (body::before which is z-index:1) and below content (z-index:2) */
  /* Make sure this decorative layer does not capture pointer events (so scrollbar and clicks work) */
  pointer-events: none;
}

/* keep content above vignette */
#page-root, header, main, footer {
  position: relative; z-index: 2; /* sit above vignette and background */
}

/* increase global vertical rhythm slightly */
section.section { padding-top: calc(var(--space-xl) + 16px); padding-bottom: calc(var(--space-lg) + 8px); }


html {
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-height: 100%;
}

html,
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(198,161,91,0.95) rgba(255,255,255,0.04);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(198,161,91,0.95), rgba(156,108,43,0.95));
  border-radius: 10px;
  border: 3px solid rgba(0,0,0,0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(210,174,104,0.98), rgba(170,120,52,0.98));
}


/* Skip link: visually hidden by default, visible when focused (keyboard users) */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
}
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; left: var(--container-padding-mobile); top: 12px; z-index: 9999; width: auto; height: auto; padding: 8px 12px; border-radius: 8px; background: rgba(10,12,14,0.92); color: var(--color-text-primary); box-shadow: 0 8px 30px rgba(0,0,0,0.6); text-decoration: none; outline: 2px solid var(--color-accent-gold); outline-offset: 3px;
}

/* Logo placeholder styles */
.site-logo { display: block; height: 42px; width: auto; max-width: 220px; }
.footer-logo { display: block; height: 38px; width: auto; max-width: 200px; }

a { color: var(--color-text-primary); text-decoration: none; }

.eyebrow { color: var(--color-accent-gold); letter-spacing: 0.18em; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 8px; font-family: var(--font-sans); font-weight: var(--fw-medium); }

/* Headlines in Gold */
h1, h2, h3, h4, h5, h6 { color: var(--color-accent-gold); line-height: 1.05; }
/* Headings use the display serif (Cormorant Garamond) per typographic legend */
h1 { font-family: var(--font-serif); font-weight: var(--fw-semi); font-size: var(--type-h1-clamp); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: var(--space-sm); }
/* Major section headings */
h2 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--type-h2-clamp); line-height: 1; letter-spacing: -0.015em; margin-bottom: var(--space-sm); }
h3 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--type-h3-clamp); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: var(--space-xs); }
/* Smaller headline scale */
h4 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--type-h4); line-height: 1.1; letter-spacing: -0.01em; }
h5 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--type-h5); line-height: 1.15; letter-spacing: -0.005em; }
h6 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--type-h6); line-height: 1.2; letter-spacing: 0; }

p { color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--type-body); line-height: 1.7; margin-bottom: 12px; }

/* Body large */
.body-large { font-family: var(--font-sans); font-size: var(--type-body-large); line-height: 1.65; color: var(--color-text-secondary); }

/* Button text */
.btn, .btn * { font-family: var(--font-sans); font-size: 0.98rem; font-weight: var(--fw-medium); letter-spacing: 0.01em; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 12px; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); }
.btn-primary { background: linear-gradient(180deg, rgba(184,146,79,1), rgba(166,122,57,1)); color: var(--color-bg-main); font-weight: 600; letter-spacing: 0.6px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); border-radius: 14px; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.45); }
.btn-ghost { background: transparent; color: var(--color-text-primary); border: 1px solid rgba(255,255,255,0.04); }
.btn-ghost:hover { color: var(--color-accent-gold); }
.btn-outline { background: transparent; border: 1px solid var(--color-divider-soft); color: var(--color-text-primary); }

/* utility grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.header-inner, .footer-inner { display: flex; align-items: center; gap: 20px; }

/* keyboard focus for keyboard users */
.user-is-tabbing :focus { outline: 2px solid var(--color-accent-gold); outline-offset: 4px; }

/* footer tweaks */
.site-footer { color: var(--color-text-secondary); }
.site-footer .footer-brand { font-weight:700; color: var(--color-accent-gold); letter-spacing:2px; }
.site-footer .footer-nav a { color: var(--color-text-secondary); opacity: 0.9; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: 0.95rem; }

/* Form inputs / UI text */
input, textarea, select, button { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--type-body); }