/* ==========================================================================
   THE CLIMB — GLOBAL DESIGN SYSTEM
   Single source of truth for color, type, spacing, and breakpoints.
   Every page and every component pulls from these tokens.
   Do not hardcode colors/sizes in page-specific CSS — reference these vars.
   ========================================================================== */

:root{
  /* Color */
  --onyx:#11110f;           /* primary background */
  --porcelain:#F7F7F3;      /* primary text on dark */
  --gold:#d3a22e;           /* accent / CTA / gold-rule */
  --silver:#CCCCCC;         /* secondary text */
  --brick:#BA232D;          /* error / alert accent (used sparingly) */
  --muted:rgba(247,247,243,.72); /* de-emphasized body copy */

  /* Type */
  --font-display:"Bebas Neue","Arial Narrow",sans-serif;
  --font-body:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Layout */
  --header-h:88px;                      /* desktop/tablet header height */
  --header-h-mobile:76px;               /* mobile header height */
  --page-pad:clamp(24px,5vw,84px);      /* desktop/tablet side padding */
  --page-pad-mobile:22px;               /* mobile side padding */

  /* Breakpoints (reference only — used in media queries, CSS can't read these directly) */
  /* mobile:      max-width 640px  */
  /* tablet:      max-width 980px  */
  /* laptop:      max-width 1366px */
  /* desktop:     1440px+          */

  /* Ghost-text treatment (shared across all page heroes) */
  --ghost-color:rgba(255,255,255,.16);
  --ghost-color-strong:rgba(255,255,255,.18);

  /* Motion */
  --ease-standard:.35s ease;
  --ease-soft:.2s ease;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--onyx)}
body{
  margin:0;
  color:var(--porcelain);
  background:var(--onyx);
  font-family:var(--font-body);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--onyx)}

.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

.skip-link{
  position:fixed;left:12px;top:12px;z-index:1000;
  transform:translateY(-180%);
  background:var(--porcelain);color:var(--onyx);
  padding:10px 14px;border-radius:4px;
}
.skip-link:focus{transform:translateY(0)}

/* ==========================================================================
   TYPOGRAPHY SYSTEM
   Use these classes/rules instead of one-off font-sizes per page.
   ========================================================================== */
h1,h2,.font-display{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:.05em;
  margin:0;
}
h1{
  font-size:clamp(58px,6vw,102px);
  line-height:.9;
  text-shadow:0 3px 30px rgba(0,0,0,.28);
}
h2{
  font-size:clamp(32px,3.4vw,52px);
  line-height:.95;
}
p{margin:0}
.body-text{
  font-family:var(--font-body);
  font-size:clamp(14px,1.12vw,18px);
  line-height:1.7;
  color:var(--muted);
}
.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* Content-page kicker label (Shop, Events, The View From Here, article pages) */
.page-kicker{
  display:inline-block;
  margin:0 0 20px;
  padding-bottom:10px;
  border-bottom:1px solid var(--gold);
  color:var(--gold);
  font-size:12px;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
}

/* Ghost-text treatment — shared visual language for every hero */
.hero-ghost{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:400;
  color:var(--ghost-color);
  pointer-events:none;
  margin:0;
}

/* Gold rule divider — used under every hero headline */
.gold-rule{
  width:116px;height:2px;background:var(--gold);
  margin:28px 0;
}

/* ==========================================================================
   BUTTON SYSTEM
   One system, reused everywhere. Do not create one-off button styles.
   ========================================================================== */
.button{
  display:inline-block;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:16px 28px;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--porcelain);
  cursor:pointer;
  transition:background var(--ease-standard),color var(--ease-standard);
  text-align:center;
}
.button:hover{background:var(--gold);color:var(--onyx)}
.button-primary{
  background:var(--gold);
  color:var(--onyx);
  border-color:var(--gold);
}
.button-primary:hover{background:transparent;color:var(--porcelain)}
.button-ghost{
  border-color:rgba(247,247,243,.4);
}
.button-ghost:hover{background:var(--porcelain);color:var(--onyx);border-color:var(--porcelain)}

/* ==========================================================================
   FORM SYSTEM (newsletter / contact — one shared look)
   ========================================================================== */
.field{
  width:100%;
  padding:16px 18px;
  background:rgba(17,17,15,.4);
  border:1px solid rgba(211,162,46,.55);
  color:var(--porcelain);
  font-family:var(--font-body);
  font-size:14px;
}
.field::placeholder{color:var(--silver);opacity:.7}
.field:focus{outline:none;border-color:var(--gold)}

/* ==========================================================================
   IMAGE TREATMENT
   Shared filters/overlays so every hero/photo feels consistent.

   ⚠ Pitfall (cost real debugging time once already): if you build a custom
   image+overlay section, the <img> MUST have explicit position:absolute
   (or relative) and a z-index. A static/unpositioned <img> is painted
   ABOVE any negative-z-index sibling regardless of the z-index numbers,
   per CSS stacking rules — the overlay will silently render invisible
   even though every computed style looks correct. See .hero-background
   img in responsive.css for the correct reference pattern.
   ========================================================================== */
.image-grade{
  background:
    linear-gradient(180deg,rgba(17,17,15,.5) 0%,rgba(17,17,15,.1) 30%,rgba(17,17,15,.22) 58%,rgba(17,17,15,.9) 94%);
}

/* ==========================================================================
   ANIMATION STYLE
   Shared reveal-on-scroll treatment, used instead of one-off animations.
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.container{
  width:100%;
  padding-left:var(--page-pad);
  padding-right:var(--page-pad);
}
.section{
  padding-top:clamp(72px,9vh,112px);
  padding-bottom:clamp(72px,9vh,112px);
}