/* ============ PRIMAL shared styles (floor + all-classes pages) ============ */
@font-face{ font-family:'Akira'; src:url('fonts/Akira-Expanded.otf') format('opentype'); font-weight:800; font-display:swap; }
:root{ --red:#FF3333; --ink:#0A0A0A; }
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{ font-family:'Manrope',system-ui,sans-serif; background:var(--ink); color:var(--ink); overflow-x:hidden; }
.display{ font-family:'Akira','Manrope',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.98; }
.stretch{ font-family:'Manrope',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0; }
.text-red{ color:var(--red); }
.bg-red{ background:var(--red); }
.kicker{ font-family:'Manrope',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
::selection{ background:var(--red); color:#fff; }

.reveal{ opacity:0; transform:translateY(34px); }
.gimg{ filter:grayscale(100%); }
.hl-word{ will-change:opacity; }
.heroimg{ transform:scale(1.12); }
video{ filter:grayscale(100%); }

.btn-red, .btn-ghost{ border-radius:0 !important; }
.navlink{ position:relative; text-transform:uppercase; }
.joinchan{ background:var(--ink); transition:background .25s ease; }
.joinchan:hover{ background:var(--red); }
.navlink::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--red); transition:width .28s ease; }
.navlink:hover::after{ width:100%; }
.btn-red{ background:var(--red); color:#fff; transition:transform .2s ease, filter .2s ease; }
.btn-red:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn-ghost{ border:1.5px solid rgba(255,255,255,.35); transition:all .2s ease; }
.btn-ghost:hover{ background:#fff; border-color:#fff; color:var(--red); }
/* shared card shells (were inline-only on some pages) */
.card{ border:1px solid #e7e7e7; transition:border-color .25s, transform .25s; }
.card:hover{ border-color:var(--red); transform:translateY(-4px); }
.dcard{ border:1px solid rgba(255,255,255,.12); transition:border-color .25s, transform .25s; }
.dcard:hover{ border-color:var(--red); transform:translateY(-4px); }
.card-img{ filter:grayscale(100%); transition:filter .5s ease, transform .6s ease; }
.group:hover .card-img{ filter:grayscale(0%); transform:scale(1.04); }

.lang-vi [data-en]{ display:none; }
.lang-vi [data-vi]{ display:inline; }
.lang-en [data-vi]{ display:none; }

/* schedule table */
.sched-row:hover{ background:rgba(0,0,0,.03); }
.pill{ font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.15rem .5rem; border:1px solid currentColor; }

/* class accordion */
details.cls{ border-top:1px solid rgba(0,0,0,.12); }
details.cls > summary{ list-style:none; cursor:pointer; }
details.cls > summary::-webkit-details-marker{ display:none; }
details.cls .chev{ transition:transform .25s ease; }
details.cls[open] .chev{ transform:rotate(45deg); }

/* join modal */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(10,10,10,.78); padding:1.25rem; }
.modal.open{ display:flex; }
.modal__card{ background:#fff; max-width:460px; width:100%; padding:2rem; }

/* coach credentials modal (item 12) */
.modal__card--dark{ background:var(--ink); color:#fff; max-width:640px; border:1px solid rgba(255,255,255,.14); max-height:88vh; overflow-y:auto; }
.coach-card{ cursor:pointer; transition:border-color .2s ease, transform .2s ease; }
.coach-card:hover{ transform:translateY(-3px); }
.coach-card:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* Vietnamese sits taller than Latin: the marks above and below the letters need room,
   so the display headings get their leading back when lang-vi is on. */
.lang-vi .display{ line-height:1.16 !important; }
.lang-vi .stretch{ line-height:1.25 !important; }
.lang-vi .kicker{ line-height:1.4; }
.lang-vi h1.display, .lang-vi h2.display{ padding-bottom:.06em; }
/* 31/07: stacked hero lines in VI collide (marks above+below caps). Roomier leading for h1 heroes. */
.lang-vi h1.display{ line-height:1.32 !important; }