/* ============================================================
   OCEAN COUNTY BJJ — Brand Kit stylesheet
   Direction: Tough Exterior, Family Heart
   Palette: DeBlass Navy · Mat Black · Bone · White
   Type: Anton (display) · Barlow Condensed (labels) · Barlow (body)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

/* ---------- Tokens ---------- */
:root {
  /* Navy / black value ramp */
  --ink:      #0B0B12;   /* page background — near-black, faint navy */
  --carbon:   #12121E;   /* surface */
  --iron:     #1A1A2C;   /* surface-2 */
  --navy-deep:#1B1B44;
  --navy:     #282860;   /* DeBlass Navy — brand primary */
  --navy-soft:#34347C;
  --periwinkle:#9CA0D9;  /* navy tint — sparing accent on dark */
  --matblack: #0C0C0E;
  --bone:     #F4F2ED;
  --white:    #FFFFFF;

  /* Roles — dark is the base canvas */
  --bg:        var(--ink);
  --surface:   var(--carbon);
  --surface-2: var(--iron);
  --line:      #26263C;
  --line-strong:#353556;
  --text:      var(--bone);
  --text-dim:  #A6A9C2;
  --text-mute: #6E7192;

  /* Accent — on the dark canvas, white does the work ("Everyone Starts White") */
  --accent:     var(--bone);
  --accent-ink: var(--navy);

  /* Type */
  --f-display: "Teko", "Arial Narrow", sans-serif;             /* headlines, numbers */
  --f-stencil: "Barlow Condensed", "Arial Narrow", sans-serif; /* kickers, labels, section nums */
  --f-body:    "Barlow", system-ui, sans-serif;                /* paragraphs, forms */
  --f-semi:    "Barlow Condensed", "Barlow", sans-serif;       /* nav, subheads */

  /* Geometry */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
  --radius: 2px;
}

/* ---------- Section panels — the hybrid system ---------- */
/* Bone "family heart" surface: warm, readable, navy does the pointing */
.panel-bone {
  background: var(--bone);
  --bg: var(--bone);
  --surface: #FFFFFF;
  --surface-2: #ECE9E1;
  --line: #DEDAD0;
  --line-strong: #C9C4B6;
  --text: #14141C;
  --text-dim: #4C4C5A;
  --text-mute: #87889C;
  --accent: var(--navy);
  --accent-ink: #FFFFFF;
  color: var(--text);
  border-top: 0 !important;
}
/* Solid navy "tough" band */
.panel-navy {
  background: var(--navy);
  --bg: var(--navy);
  --surface: #2E2E6E;
  --surface-2: #34347C;
  --line: #3E3E84;
  --line-strong: #4C4C97;
  --text: #F4F2ED;
  --text-dim: #C7C9E6;
  --text-mute: #9092C4;
  --accent: var(--bone);
  --accent-ink: var(--navy);
  color: var(--text);
  border-top: 0 !important;
}
/* keep the photo treatment readable on light panels */
.panel-bone .photo { filter: contrast(1.04) brightness(.99); }

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body[data-grain="off"]::after { display: none; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(72px, 11vw, 150px) 0; position: relative; background: var(--bg); }
.section + .section { border-top: 1px solid var(--line); }
.section--tight { padding-top: clamp(48px, 7vw, 90px); }

.section-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: clamp(32px, 5vw, 64px); flex-wrap: wrap; }
.section-num {
  font-family: var(--f-stencil);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 44px);
  color: color-mix(in srgb, var(--accent) 60%, var(--text-mute));
  line-height: 1;
  letter-spacing: 0.04em;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(38px, 6.6vw, 78px);
  line-height: 0.9;
  letter-spacing: 0.005em;
}
.section-intro { color: var(--text-dim); max-width: 62ch; font-size: clamp(16px, 1.4vw, 19px); margin-top: 8px; font-weight: 400; }

/* ---------- Type utilities ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; }
.kicker {
  font-family: var(--f-stencil);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.tag {
  font-family: var(--f-stencil);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--text-dim);
}
.mono-label {
  font-family: var(--f-semi);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
}
.display {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
}

/* ---------- Brand mark ---------- */
.mark { display: block; color: var(--text); }

/* hazard / divider stripes — navy on ink */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--navy) 0 14px,
    var(--ink) 14px 28px
  );
}

/* faint chevron field pattern */
.chev-field {
  background-color: var(--carbon);
  background-image:
    linear-gradient(135deg, var(--iron) 25%, transparent 25%),
    linear-gradient(225deg, var(--iron) 25%, transparent 25%),
    linear-gradient(315deg, var(--iron) 25%, transparent 25%),
    linear-gradient(45deg, var(--iron) 25%, transparent 25%);
  background-size: 38px 38px;
}

/* ---------- Buttons / cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 34px);
}
.btn {
  font-family: var(--f-semi);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border: 1.5px solid var(--line-strong); color: var(--text); }
.btn:hover { transform: translateY(-2px); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Side nav rail ---------- */
.rail {
  position: fixed;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  z-index: 8000;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail a {
  font-family: var(--f-stencil);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  opacity: 0.5;
  transition: opacity .2s, color .2s;
}
.rail a::before { content: ""; width: 18px; height: 2px; background: currentColor; transition: width .2s; }
.rail a:hover, .rail a.active { opacity: 1; color: var(--accent); }
.rail a.active::before { width: 34px; }
@media (max-width: 1100px) { .rail { display: none; } }

/* ---------- helpers ---------- */
.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; } }

.divider-stripe { height: 8px; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}