/* Rock House Gym — shared styles
   Loaded after Tailwind CDN on every page. Holds the things Tailwind
   can't do cleanly: color tokens, fonts, marquee, hazard stripes,
   text-stroke headings, CTA hover shift, scroll reveal, sticky nav. */

:root {
  --bg:        #0a0a0a;
  --bg-2:      #141414;
  --bg-3:      #1c1c1c;
  --bone:      #f0e6d2;
  --bone-dim:  #c9bfa8;
  --orange:    #e04e1f;
  --orange-2:  #ff5e22;
  --blood:     #8b1a0e;
  --steel:     #2a2a2a;
}

html, body { background: var(--bg); color: var(--bone); }
body { font-family: 'Barlow', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.font-display { font-family: 'Anton', sans-serif; letter-spacing: 0.005em; line-height: 0.88; }
.font-cond    { font-family: 'Barlow Condensed', sans-serif; }

::selection { background: var(--orange); color: #0a0a0a; }

/* Subtle grain on dark sections */
.grain { position: relative; }
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.08; mix-blend-mode: overlay; z-index: 1;
}
.grain > * { position: relative; z-index: 2; }

/* Diagonal hazard stripes */
.stripes {
  background-image: repeating-linear-gradient(
    45deg, var(--orange) 0 14px, #0a0a0a 14px 28px
  );
}

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 38s linear infinite; will-change: transform; }
.marquee-track:hover { animation-play-state: paused; }

/* Outlined display text */
.text-stroke-orange { -webkit-text-stroke: 2px var(--orange); color: transparent; }
.text-stroke-bone   { -webkit-text-stroke: 1.5px rgba(240,230,210,0.35); color: transparent; }

/* CTA buttons — block-shadow shift on hover */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1.05rem 1.6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 0.95rem;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--orange); color: #0a0a0a;
}
.btn-primary:hover {
  background: var(--orange-2);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--bone);
}
.btn-ghost {
  background: transparent; color: var(--bone);
  border-color: var(--bone);
}
.btn-ghost:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--orange);
  background: rgba(240,230,210,0.04);
}

/* Section number — massive outlined */
.section-num {
  font-family: 'Anton', sans-serif;
  font-size: clamp(7rem, 18vw, 16rem);
  line-height: 0.8;
  -webkit-text-stroke: 1.5px rgba(240,230,210,0.18);
  color: transparent;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 720ms ease, transform 720ms ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Concrete divider */
.divider {
  height: 1px;
  background-image: linear-gradient(to right, transparent 0%, rgba(240,230,210,0.18) 20%, rgba(240,230,210,0.18) 80%, transparent 100%);
}

/* Tag chip */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(240,230,210,0.2);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-dim);
}
.chip .dot { width: 6px; height: 6px; background: var(--orange); display: inline-block; }

/* Nav scrolled state */
.nav-scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(240,230,210,0.08); }

/* Top-of-page "permanently closed" banner — sits above the nav on every page */
.closed-banner {
  background: #1c1c1c;
  color: var(--bone-dim);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(224, 78, 31, 0.35);
  line-height: 1.2;
}
.closed-banner strong {
  color: var(--orange);
  font-weight: 800;
  margin-left: 0.5rem;
}

/* Nav active link */
.nav-link { color: var(--bone); transition: color 140ms ease; }
.nav-link:hover { color: var(--orange); }
.nav-link.active { color: var(--orange); }

/* Tile cover for images that replace .photo-slot */
.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240,230,210,0.08);
  background: var(--bg-2);
}
.tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.tile:hover img { transform: scale(1.04); }

/* News feed card */
.news-card {
  position: relative;
  border-left: 3px solid var(--orange);
  background: var(--bg-2);
  padding: 2rem 2rem 2rem 2.25rem;
  transition: background-color 140ms ease;
}
.news-card:hover { background: var(--bg-3); }
.news-card .eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 0.85rem;
}
.news-card .eyebrow .num { color: var(--orange); }
.news-card a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-all; }
.news-card a:hover { color: var(--orange-2); }
.news-card.short p { font-family: 'Anton', sans-serif; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.005em; }
.news-card.long  p { font-size: 1.05rem; line-height: 1.6; color: var(--bone-dim); }
.news-card.long p + p { margin-top: 0.85rem; }