/* ============================================
   West Coast Martial Arts — Design Tokens
   Ink & Bone palette · Ray Cyan accent · Gold for mastery
   ============================================ */
:root{
  --ink:#0b0e12;
  --ink-2:#11151b;
  --ink-3:#171d25;
  --ink-4:#212936;
  --bone:#f4efe6;
  --bone-dim:#b6afa0;
  --bone-faint:rgba(244,239,230,.55);
  --ray:#3fd3dc;
  --ray-deep:#17909c;
  --ray-soft:rgba(63,211,220,.13);
  --gold:#d4a94e;
  --gold-soft:rgba(212,169,78,.16);
  --green:#57b877;
  --red:#e06060;
  --line:rgba(244,239,230,.08);
  --line-strong:rgba(244,239,230,.17);

  /* Tide tiers */
  --t-drift:#8fb9c9;
  --t-glide:#3fd3dc;
  --t-surge:#3f9de0;
  --t-storm:#8b78e8;
  --t-apex:#d4a94e;

  --font-ui:'Manrope','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  --font-display:'Cinzel Decorative',serif;
  --font-display-ar:'Amiri',serif;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 70px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
img{max-width:100%}

.display{font-family:var(--font-display);font-weight:700;letter-spacing:.02em}
[dir=rtl] .display{font-family:var(--font-display-ar);letter-spacing:0}

/* generic progress bar */
.bar{height:8px;background:var(--ink-4);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ray-deep),var(--ray));
  transition:width 1.1s var(--ease)}
[dir=rtl] .bar>i{background:linear-gradient(-90deg,var(--ray-deep),var(--ray))}
.in .bar>i,.bar.in>i{width:var(--w,0%)}
.bar.gold>i{background:linear-gradient(90deg,#a8843a,var(--gold))}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:99px;font-size:12px;font-weight:700;
  background:var(--ray-soft);color:var(--ray);border:1px solid rgba(63,211,220,.25)}
.chip.gold{background:var(--gold-soft);color:var(--gold);border-color:rgba(212,169,78,.3)}
.chip.dim{background:var(--ink-4);color:var(--bone-dim);border-color:var(--line)}

/* icons */
.ic{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block}

::-webkit-scrollbar{height:6px;width:8px}
::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:99px}

/* brand image marks fill their container */
.wcma-img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}