/* ==========================================================================
   Base — reset, global elements, grain overlay, keyframes
   --------------------------------------------------------------------------
   GENERATED by scripts/extract-globals.mjs from the <helmet> of
   Clarens Mountain Estate V1.dc.html. Re-run after converting pages.

   Keyframes are filtered to those actually referenced by the generated section
   stylesheets: the source defines 64, of which 1 is used.
   The remainder are residue from earlier design iterations.

   Accessibility corrections are appended at the bottom; they are additions to
   the design, not reinterpretations of it, and each says why.
   ========================================================================== */

/* --- From the design, verbatim ------------------------------------------- */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% 30%,#1b160e,#0b0906 70%) fixed;font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#C9A96E;text-decoration:none;transition:color .35s ease}
a:hover{color:#D8BC85}
img{display:block;max-width:100%}
::selection{background:#C9A96E;color:#14110C}
.cme-grain{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' sc-camel-base-frequency='0.85' sc-camel-num-octaves='3' sc-camel-stitch-tiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- Keyframes actually in use ------------------------------------------- */

@keyframes cme-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Accessibility ------------------------------------------------------- *
 * Additions, not changes to the visual design.
 * -------------------------------------------------------------------------- */

/* The design sets outline:none on form fields and offers nothing in its place,
   which leaves keyboard users with no visible position. :focus-visible shows a
   ring for keyboard navigation only, so pointer users see no change. */
:focus-visible {
  outline: 2px solid var(--cme-gold);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Only suppress the default ring where a custom one is provided. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link — the header is fixed and the nav has seven items before content. */
.cme-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--cme-ink);
  color: var(--cme-off-white);
  font-family: var(--cme-font-body);
  font-size: 13px;
  letter-spacing: var(--cme-track-cta);
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform .2s ease;
}

.cme-skip-link:focus {
  transform: translateY(0);
}

/* Visually hidden, still announced. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Images must never overflow once layouts collapse. */
img,
video {
  max-width: 100%;
  height: auto;
}

/*
 * <picture> must not exist as far as layout is concerned.
 *
 * The design styles its images directly — position:absolute with inset:0, and
 * width:100% / height:100% with object-fit — and all of those resolve against
 * the image's PARENT. The responsive image pipeline wraps each <img> in a
 * <picture> to offer AVIF and WebP, which silently inserts a new parent:
 * height:100% then resolves against a wrapper that is itself height:auto,
 * computes to auto, and the image collapses to its intrinsic aspect ratio
 * instead of filling its container.
 *
 * display:contents removes the wrapper from the box tree, so the <img> is laid
 * out as a direct child of the element the design actually styled.
 *
 * Safe specifically because <picture> carries no semantics — it is a
 * format-negotiation container, and the usual accessibility objection to
 * display:contents does not apply to an element with no role to lose.
 */
picture {
  display: contents;
}

/* The design animates continuously — marquee, reveals, parallax, count-ups.
   Honour the OS setting rather than overriding the user. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}