/* ConquestReborn - the public marketing pages (home, the five hubs, FAQ, Realm rules, About, Guides).
   Layers on css/style.css: same dark ground, same Cinzel + Alegreya Sans, gold as the main accent. The SECOND accent is
   an arcane teal (--mk-accent): it marks kickers, facts, step numbers, the Coming badge and the FAQ marker, so a page
   reads as gold (the realm) and teal (what to look at). Text first: there are no art slots and no shape marks anywhere
   in this file; the only images it draws are the 21 class icons (.mk-classstrip, .mk-classgrid). The signed-in suite pages do not load it.

   Every class here starts with mk- so nothing can collide with style.css or the suite's css/suite.css.
   Mobile first: the base rules are the 360px layout; min-width media queries add columns. Nothing may scroll sideways
   at 360-1920px: grids use minmax(0, 1fr) and long words wrap.

   CLASS VOCABULARY (the page builders' contract; FOUNDATION.md repeats it as a list)
     layout      .mk-wrap  .mk-wrap--narrow  .mk-band (--raise --edge --tight --snug --slim)  .mk-band__head (--left)  .mk-kicker  .mk-lede
                 .mk-split (.mk-split__text .mk-split__aside)  .mk-stack
     hero        .mk-hero (.mk-hero__inner .mk-hero__kicker .mk-hero__title .mk-hero__sub .mk-hero__ctas .mk-hero__note
                 .mk-hero__login)  .mk-chip (--live)
                 .mk-pagehead (.mk-pagehead__inner .mk-crumbs .mk-pagehead__sub)   the smaller hero of a hub / info page
     proof       .mk-stats (--3)  .mk-stats-slot  .mk-stat (.mk-stat__num .mk-stat__label .mk-stat__link .mk-stat__more)  .mk-stats__note
     text bits   .mk-fact (the one checkable fact)  .mk-link  .mk-note (--coming)  .mk-list  .mk-facts (dl)  .mk-chips (--links --center)  .mk-after
                 .mk-prose  .mk-kbd  .mk-table-wrap .mk-table
     cards       .mk-grid (--2 --3 --4)  .mk-card (--link)  .mk-card__tag  .mk-card__foot
     steps       .mk-steps (--row)
     spotlight   .mk-spot (--coming)  .mk-spot__eyebrow  .mk-spot__fact  .mk-spot__link  .mk-tag (--live --coming)
     tools       .mk-tools  .mk-tool (.mk-tool__name .mk-tool__does)
     roster      .mk-roster  .mk-class (.mk-class__no .mk-class__name .mk-class__feel)   a class's specialisation cards on classes.html
     class page  .mk-cls  .mk-clshead  .mk-clsh  .mk-list--cols  .mk-clsback   the 21 class sections of classes.html
     classgrid   .mk-classgrid  .mk-classtile (.mk-classtile__name)   the 21 class icons with their names (the jump bar of classes.html)
     classstrip  .mk-strip (.mk-strip__cap)  .mk-classstrip  .mk-classicon   the home page's one-row strip of 21 small icons under the hero buttons
     developer   .mk-band--quote  .mk-dev   the home page's note from the developer
     faq         .mk-faq  (details.mk-faq__item > summary + .mk-faq__a)
     guides      .mk-guide  .mk-toc  .mk-pager  .mk-sibs
     closing     .mk-cta
     latest      .mk-latest
     utility     .mk-sr  .mk-center  .mk-muted
*/

:root {
  --mk-accent: #6cc4cf;                         /* second accent: arcane teal */
  --mk-accent-bright: #a6e4ea;                  /* teal text on dark: links, numbers */
  --mk-accent-deep: #2d7b86;
  --mk-accent-wash: rgba(108, 196, 207, 0.11);
  --mk-accent-line: rgba(108, 196, 207, 0.34);
  --mk-wrap: 1160px;
  --mk-narrow: 760px;
  --mk-band-pad: clamp(52px, 8vw, 96px);
}

/* A jump link (#status, #classes) must not hide under the sticky nav. */
main [id] { scroll-margin-top: 88px; }

/* A long unbroken string (a URL, a name) wraps inside its card instead of pushing the page sideways. */
.mk-hero, .mk-pagehead, .mk-band, .mk-cta, .mk-card, .mk-spot, .mk-tool, .mk-class, .mk-steps > li, .mk-facts, .mk-note, .mk-faq__a, .mk-prose { overflow-wrap: anywhere; }

.mk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-center { text-align: center; }
.mk-muted { color: var(--muted); }

/* ---------- Layout ---------- */
.mk-wrap { max-width: var(--mk-wrap); margin: 0 auto; padding: 0 24px; }
.mk-wrap--narrow { max-width: calc(var(--mk-narrow) + 48px); }

/* One band = one idea of the page (eyebrow, h2, ~50 words, one fact, one link). Bands are separated by a hairline. */
.mk-band { padding: var(--mk-band-pad) 0; border-top: 1px solid var(--line-faint); }
.mk-band--raise { background: var(--bg-raise); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-band--edge { border-top: 1px solid var(--mk-accent-line); }          /* a band that opens a new group */
.mk-band--tight { padding: clamp(44px, 6vw, 72px) 0; }                  /* the home page's text + fact bands */
.mk-band--snug { padding: clamp(28px, 3.2vw, 40px) 0; }                 /* the home page's bands since the shorter page */
.mk-band--snug .mk-band__head { margin-bottom: 22px; }
.mk-band--slim { padding: clamp(26px, 3vw, 34px) 0; }
#latest-list li:nth-child(n+4) { display: none; }   /* the home page shows the three newest updates; js/home.js builds five */

.mk-band__head { max-width: var(--mk-narrow); margin: 0 auto 36px; padding: 0 24px; text-align: center; }
.mk-band__head--left { margin-left: 0; margin-right: 0; padding: 0; text-align: left; max-width: none; }
.mk-band__head h2, .mk-band h2 { font-size: clamp(1.55rem, 4.4vw, 2.5rem); line-height: 1.2; margin: 0 0 14px; }
.mk-kicker {
  margin: 0 0 12px;
  color: var(--mk-accent);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.26em;
}
.mk-lede { margin: 0; color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.mk-band__head .mk-lede { margin-left: auto; margin-right: auto; }
.mk-band__head--left .mk-lede { margin-left: 0; }

/* Text beside its one fact: stacked on a phone, side by side from 900px. */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.mk-split__text p { margin: 0 0 16px; max-width: 62ch; }
.mk-split__text p:last-child { margin-bottom: 0; }
.mk-stack.mk-stack > * + * { margin-top: 16px; }   /* doubled class: must beat the later single-class "margin: 0" of .mk-fact / .mk-note / .mk-tools */

/* ---------- Hero (home) ---------- */
.mk-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px);
  text-align: center;
  border-bottom: 1px solid var(--line-faint);
  background:
    radial-gradient(ellipse 60% 85% at 10% 0%, var(--mk-accent-wash), transparent 72%),
    radial-gradient(ellipse 55% 75% at 92% 100%, rgba(200, 169, 94, 0.17), transparent 72%),
    linear-gradient(180deg, rgba(16, 21, 36, 0.6), rgba(10, 13, 22, 0));
}
.mk-hero__inner { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.mk-hero__kicker { margin: 0 0 18px; color: var(--muted); font-size: 1.05rem; letter-spacing: 0.02em; }
.mk-hero__title {
  margin: 18px 0 20px;
  font-size: clamp(1.95rem, 6.4vw, 4rem);
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.mk-hero__sub { margin: 0 auto 32px; max-width: 60ch; color: var(--ink); font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.55; }
.mk-hero__ctas { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 420px; margin: 0 auto; }
.mk-hero__note { margin: 22px 0 0; color: var(--muted); font-size: 0.98rem; letter-spacing: 0.04em; }
.mk-hero__login { margin: 10px 0 0; font-size: 0.98rem; }
.mk-hero { overflow-x: clip; }
.mk-hero__login a, .mk-cta a:not(.btn) { color: var(--mk-accent-bright); }

/* The primary button keeps the launcher's one glow, here and in the closing block. */
.mk-hero__ctas .btn-gold, .mk-cta .btn-gold {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-foot) 100%);
  border: 1px solid var(--gold-bright);
  color: var(--bg);
}
.mk-hero__ctas .btn-gold::before, .mk-cta .btn-gold::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: var(--gold);
  filter: blur(18px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.15s ease;
}
.mk-hero__ctas .btn-gold:hover::before, .mk-cta .btn-gold:hover::before { opacity: 0.45; }

/* A status chip: "Live, updated daily". */
.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid var(--mk-accent-line);
  border-radius: 999px;
  background: var(--mk-accent-wash);
  color: var(--mk-accent-bright);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.mk-chip--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }

/* ---------- Page head (hubs and info pages): the smaller hero ---------- */
.mk-pagehead {
  padding: clamp(40px, 7vw, 84px) 0 clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line-faint);
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, var(--mk-accent-wash), transparent 70%),
    linear-gradient(180deg, rgba(16, 21, 36, 0.55), rgba(10, 13, 22, 0));
}
.mk-pagehead__inner { max-width: var(--mk-wrap); margin: 0 auto; padding: 0 24px; }
.mk-pagehead__inner--narrow { max-width: calc(var(--mk-narrow) + 48px); }   /* head over a centred 760px column: same left edge */
.mk-pagehead h1 { margin: 0 0 14px; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.15; max-width: 22ch; }
.mk-pagehead__sub { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1.12rem; }
.mk-crumbs { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.04em; }
.mk-crumbs a { color: var(--mk-accent-bright); }

/* ---------- Proof strip: players online + updates in the last 7 days ---------- */
.mk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; max-width: 760px; margin: 0 auto; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mk-stats-slot { min-height: 216px; }   /* the strip's room is kept so nothing below moves when a box appears; on a phone it is the four-box height (online, updates, characters, accounts), the uptime box adds a row later */
.mk-stats--3 { max-width: 1040px; }   /* a third box is real: js/realm-stats.js and js/uptime.js add this class */
.mk-stat { display: flex; flex-direction: column; justify-content: center; margin: 0 -1px -1px 0; padding: 22px 20px; background: transparent; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }   /* the hairlines are the cells' own borders, so a short last row leaves no grey block */
.mk-stat[hidden] { display: none; }   /* .mk-stat sets display, which would otherwise beat the hidden attribute */
.mk-stat__num { display: block; font-family: Cinzel, Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700; line-height: 1.1; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.mk-stat__label { display: block; margin-top: 6px; color: var(--muted); font-size: 0.98rem; }
.mk-stat__link { display: block; margin: -22px -20px; padding: 22px 20px; width: calc(100% + 40px); color: inherit; text-decoration: none; }
.mk-stat__link:hover .mk-stat__num, .mk-stat__link:focus-visible .mk-stat__num { color: var(--gold); }
.mk-stat__link:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: -4px; }
#uptime-box { grid-column: 1 / -1; }   /* on a phone the long box takes the last row alone */
.mk-stat__more { display: block; margin-top: 4px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
@media (max-width: 639px) {   /* a phone: three short rows, the same height whether two boxes or five are filled (see min-height below) */
  .mk-stat { padding: 16px 10px; }
  .mk-stat__link { margin: -16px -10px; padding: 16px 10px; width: calc(100% + 20px); }
  .mk-stat__more { display: none; }
}
.mk-stats__note { margin: 14px auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: 0.88rem; }

/* ---------- Text bits ---------- */
/* The one checkable fact of a band. */
.mk-fact { margin: 0; padding: 16px 20px; border-left: 3px solid var(--mk-accent); background: var(--mk-accent-wash); border-radius: 0 6px 6px 0; color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.mk-list a, .mk-steps a, .mk-card a:not(.mk-link), .mk-note a, .mk-facts a, .mk-spot p a:not(.mk-link) { color: var(--mk-accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.mk-list a:hover, .mk-steps a:hover, .mk-card a:not(.mk-link):hover, .mk-note a:hover, .mk-facts a:hover { color: var(--gold-bright); }
.mk-link { display: inline-block; font-family: Cinzel, Georgia, serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-bright); text-decoration: none; }
.mk-link::after { content: " \2192"; }
.mk-link:hover { text-decoration: underline; }
.mk-note { margin: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-panel); color: var(--ink); }
.mk-note--coming { border-style: dashed; border-color: var(--mk-accent-line); }
.mk-list { margin: 0; padding-left: 1.25em; }
.mk-list li { margin: 0 0 8px; padding-left: 4px; }
.mk-list li::marker { color: var(--gold); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-chips li { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.86rem; }
.mk-chips--center { justify-content: center; }
.mk-chips--links li { padding: 0; }
.mk-chips--links a { display: block; padding: 5px 14px; color: var(--ink); text-decoration: none; }
.mk-chips--links li:hover, .mk-chips--links li:focus-within { border-color: var(--gold); background: #131a2d; }
.mk-chips--links a:hover, .mk-chips--links a:focus-visible { color: var(--gold-bright); }
.mk-chips--links a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 999px; }
.mk-after { margin-top: 20px; }
.mk-kbd { padding: 1px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--bg-field); font-family: Consolas, "Courier New", monospace; font-size: 0.88em; color: var(--ink); }

/* Practical facts: a definition list, key | value. */
.mk-facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-panel); }
.mk-facts dt { padding: 12px 18px 0; color: var(--mk-accent-bright); font-family: Cinzel, Georgia, serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; }
.mk-facts dd { margin: 0; padding: 2px 18px 12px; border-bottom: 1px solid var(--line-faint); }
.mk-facts dd:last-child { border-bottom: 0; }

/* Running text (rules, about, guides, hub "good to know"). */
.mk-prose { max-width: var(--mk-narrow); }
.mk-prose h2 { margin: 2.2em 0 0.6em; font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.25; }
.mk-prose h2:first-child { margin-top: 0; }
.mk-prose h3 { margin: 1.8em 0 0.5em; font-size: 1.1rem; color: var(--ink); }
.mk-prose p, .mk-prose ul, .mk-prose ol { margin: 0 0 1em; }
.mk-prose li { margin: 0 0 0.45em; }
.mk-prose li::marker { color: var(--gold); }
.mk-prose a { color: var(--mk-accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.mk-prose a:hover { color: var(--gold-bright); }
.mk-prose strong { color: var(--ink); }
.mk-prose .mk-note { margin: 1.4em 0; }

.mk-table-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 8px; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.mk-table th, .mk-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-faint); }
.mk-table th { color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 0.78rem; letter-spacing: 0.1em; background: var(--bg-panel); white-space: nowrap; }
.mk-table tr:last-child td { border-bottom: 0; }

/* ---------- Cards ---------- */
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mk-card { position: relative; padding: 22px 22px 20px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; overflow-wrap: break-word; }
.mk-card h2, .mk-card h3 { margin: 0 0 10px; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.mk-card p { margin: 0 0 12px; color: var(--muted); }
.mk-card p:last-child { margin-bottom: 0; }
.mk-card__tag { margin: 0 0 12px; }
.mk-card__foot { margin-top: 16px; }
.mk-card--link { transition: border-color 0.12s ease, background 0.12s ease; }
.mk-card--link:hover, .mk-card--link:focus-within { border-color: var(--gold); background: #131a2d; }

/* ---------- Steps: a numbered list, numbers in the second accent ---------- */
.mk-steps { counter-reset: mk-step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mk-steps > li { counter-increment: mk-step; position: relative; padding: 20px 20px 20px 70px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; }
.mk-steps > li::before {
  content: counter(mk-step);
  position: absolute;
  left: 20px;
  top: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mk-accent-line);
  border-radius: 50%;
  background: var(--mk-accent-wash);
  color: var(--mk-accent-bright);
  font-family: Cinzel, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.mk-steps h3, .mk-steps strong:first-child { display: block; margin: 0 0 6px; color: var(--ink); font-family: Cinzel, Georgia, serif; font-size: 1.05rem; }
.mk-steps p { margin: 0; color: var(--muted); }
.mk-steps a.mk-link { margin-top: 10px; color: var(--gold-bright); text-decoration: none; }
.mk-steps a.mk-link:hover { text-decoration: underline; }

/* ---------- Spotlights: tag, h3, ~45 words, a fact, a link ---------- */
.mk-spot { display: flex; flex-direction: column; padding: 24px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; }
.mk-spot--coming { border-style: dashed; border-color: var(--mk-accent-line); background: linear-gradient(180deg, var(--mk-accent-wash), transparent 55%), var(--bg-panel); }
.mk-spot__eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; color: var(--mk-accent); font-family: Cinzel, Georgia, serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; }
.mk-spot h3 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.mk-spot p { margin: 0 0 14px; color: var(--muted); }
.mk-spot__fact { margin: 0 0 16px; color: var(--ink); font-weight: 700; }
.mk-spot__link { margin-top: auto; }

/* The status tags. LIVE is for what is live today; COMING (with a roadmap link) for everything that is not. */
.mk-tag { display: inline-block; padding: 2px 10px; border-radius: 4px; font-family: Cinzel, Georgia, serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.6; }
.mk-tag--live { color: #b9e8c4; background: rgba(87, 178, 106, 0.16); border: 1px solid rgba(87, 178, 106, 0.4); }
.mk-tag--coming { color: var(--mk-accent-bright); background: var(--mk-accent-wash); border: 1px solid var(--mk-accent-line); }

/* ---------- Built-in tools ---------- */
.mk-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mk-tool { padding: 16px 18px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; }
.mk-tool__name { margin: 0 0 6px; font-family: Cinzel, Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--gold-bright); }
.mk-tool__does { margin: 0; color: var(--muted); }

/* ---------- Home: the class grid (21 icons, each with its name) ---------- */
/* A flex row that wraps and centres, so a short last row sits in the middle. --cols is the number of tiles per row. */
.mk-classgrid { --cols: 3; --gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mk-classgrid li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.mk-classtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 12px 4px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.mk-classtile img { display: block; width: 64px; height: 64px; border-radius: 12px; }
.mk-classtile__name { font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
.mk-classtile:hover, .mk-classtile:focus-visible { border-color: var(--gold); background: #131a2d; }
.mk-classtile:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
@media (max-width: 359px) {
  .mk-classtile { padding-left: 2px; padding-right: 2px; }
  .mk-hero__ctas .btn-big { padding-left: 8px; padding-right: 8px; letter-spacing: 0.05em; font-size: 1.15rem; }   /* PICK YOUR CLASS stays on one line at 320 px */
  .mk-classtile__name { font-size: 0.8rem; }
}
.mk-classtile:hover .mk-classtile__name, .mk-classtile:focus-visible .mk-classtile__name { color: var(--gold-bright); }

/* ---------- Home: the one-row class strip under the hero buttons (21 icons; the name shows on hover and focus) ---------- */
.mk-strip { margin-top: 30px; }
.mk-strip__cap { margin: 0 0 12px; color: var(--muted); font-size: 0.92rem; letter-spacing: 0.04em; }
.mk-classstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin: 0 auto; padding: 0; list-style: none; }
.mk-classstrip li { position: relative; min-width: 0; }
.mk-classicon { display: block; position: relative; width: 100%; max-width: 44px; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-panel); line-height: 0; transition: border-color 0.12s ease, transform 0.12s ease; }
.mk-classicon img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; }
.mk-classicon:hover, .mk-classicon:focus-visible { border-color: var(--gold); transform: translateY(-2px); z-index: 2; }
.mk-classicon:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.mk-classicon::after { content: attr(title); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 3; padding: 4px 10px; border: 1px solid var(--gold); border-radius: 4px; background: #131a2d; color: var(--gold-bright); font-family: Alegreya Sans, Georgia, sans-serif; font-size: 0.86rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; white-space: nowrap; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; }
.mk-classicon:hover::after, .mk-classicon:focus-visible::after { opacity: 1; visibility: visible; }
.mk-classstrip li:nth-child(7n+1) .mk-classicon::after { left: 0; transform: none; }
.mk-classstrip li:nth-child(7n) .mk-classicon::after { left: auto; right: 0; transform: none; }
@media (hover: none) { .mk-classicon::after { display: none; } }
@media (min-width: 1100px) {
  .mk-classstrip { grid-template-columns: repeat(21, minmax(0, 1fr)); max-width: 1112px; }
  .mk-classstrip li:nth-child(7n+1) .mk-classicon::after, .mk-classstrip li:nth-child(7n) .mk-classicon::after { left: 50%; right: auto; transform: translateX(-50%); }
  .mk-classstrip li:nth-child(-n+3) .mk-classicon::after { left: 0; transform: none; }
  .mk-classstrip li:nth-child(n+19) .mk-classicon::after { left: auto; right: 0; transform: none; }
}

/* ---------- Home: the developer's note (a calm quote-style band: no photo, no signature) ---------- */
.mk-band--quote { background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(200, 169, 94, 0.09), transparent 72%); }
.mk-dev { padding: 4px 0 4px clamp(18px, 4vw, 40px); border-left: 3px solid var(--gold); }
.mk-dev h2 { margin: 0 0 22px; font-size: clamp(1.45rem, 4vw, 2.1rem); }
.mk-dev p { margin: 0 0 1.1em; max-width: 62ch; color: var(--ink); font-size: clamp(1.08rem, 2vw, 1.22rem); line-height: 1.7; }
.mk-dev p.mk-kicker { margin-bottom: 12px; color: var(--mk-accent); font-size: 0.76rem; line-height: 1.5; }
.mk-dev p:last-child { margin-bottom: 0; }

/* ---------- Cards for a class's specialisations (classes.html) ---------- */
.mk-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mk-class { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; }
.mk-class__no { color: var(--mk-accent); font-family: Cinzel, Georgia, serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; }
.mk-class__name { margin: 0; font-size: 1.08rem; line-height: 1.3; color: var(--gold-bright); }
.mk-class__feel { margin: 0; color: var(--muted); font-size: 0.96rem; }
.mk-class .mk-chips li { font-size: 0.78rem; padding: 1px 10px; }

/* ---------- Classes page: one detailed section per class (same cards, notes and lists as the other pages) ---------- */
.mk-cls { scroll-margin-top: 72px; }
.mk-clstop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; align-items: start; }
.mk-clstop .mk-lede { margin-bottom: 20px; }
@media (min-width: 1000px) {
  .mk-clstop { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  .mk-clstop .mk-lede { margin-bottom: 0; }
}
.mk-clshead { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.mk-clshead img { display: block; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; }
.mk-clshead .mk-kicker { margin: 0 0 4px; }
.mk-clshead h2 { margin: 0; font-size: clamp(1.45rem, 4vw, 2.1rem); }
.mk-cls .mk-lede { margin: 0 0 22px; max-width: 78ch; }
.mk-clsh { margin: 26px 0 12px; color: var(--mk-accent-bright); font-family: Cinzel, Georgia, serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-cls .mk-roster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mk-list--cols li { break-inside: avoid; }
.mk-cls .mk-note { margin-top: 22px; }
.mk-cls p, .mk-cls li, .mk-cls dd { line-height: 1.55; }
.mk-cls .mk-list li { margin: 0 0 0.4em; }
.mk-cls .mk-facts dt { padding-top: 12px; padding-bottom: 8px; }
.mk-cls .mk-facts dd { padding-top: 9px; padding-bottom: 9px; }
.mk-clsback { margin: 22px 0 0; text-align: right; }
@media (min-width: 900px) {
  .mk-list--cols { columns: 2; column-gap: 40px; }
}

/* ---------- FAQ: details / summary, no JavaScript ---------- */
.mk-faq { max-width: var(--mk-narrow); margin: 0 auto; border-top: 1px solid var(--line); }
.mk-faq__item { border-bottom: 1px solid var(--line); }
.mk-faq__item summary {
  position: relative;
  padding: 18px 44px 18px 4px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.mk-faq__item summary::-webkit-details-marker { display: none; }
.mk-faq__item summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--mk-accent); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.mk-faq__item[open] summary::after { content: "\2212"; }
.mk-faq__item summary:hover { color: var(--gold-bright); }
.mk-faq__item summary:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
.mk-faq__a { padding: 0 4px 20px; color: var(--muted); max-width: 66ch; }
.mk-faq__a p { margin: 0 0 0.8em; }
.mk-faq__a a { color: var(--mk-accent-bright); }

/* ---------- Guides: a side table of contents beside the text ---------- */
.mk-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0 var(--mk-band-pad); }
.mk-toc { padding: 16px 18px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; font-size: 0.95rem; }
.mk-toc h2 { margin: 0 0 8px; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--mk-accent); }
.mk-toc ol, .mk-toc ul { margin: 0; padding-left: 1.2em; }
.mk-toc li { margin: 0 0 6px; }
.mk-toc a { color: var(--muted); }
.mk-toc a:hover, .mk-toc a[aria-current="page"] { color: var(--gold-bright); }
.mk-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Two sibling links at the foot of a hub. */
.mk-sibs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mk-sibs li { display: flex; }
.mk-sibs a { flex: 1; display: block; padding: 16px 20px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-family: Cinzel, Georgia, serif; font-weight: 700; }
.mk-sibs a:hover { border-color: var(--gold); color: var(--gold-bright); }
.mk-sibs a::after { content: " \2192"; color: var(--mk-accent); }

/* ---------- Closing call to action ---------- */
.mk-cta { padding: clamp(28px, 4vw, 40px) 24px 12px; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--mk-accent-wash), transparent 70%); }
.mk-cta h2 { margin: 0 0 14px; font-size: clamp(1.55rem, 4.4vw, 2.4rem); }
.mk-cta p { margin: 0 auto 22px; max-width: 54ch; color: var(--muted); }
.mk-cta .btn { margin: 4px; }

/* ---------- "Latest updates": the newest release headlines ---------- */
.mk-latest { margin: 0; padding: 0; list-style: none; max-width: var(--mk-narrow); margin-left: auto; margin-right: auto; border-top: 1px solid var(--line); }
.mk-latest li { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px; border-bottom: 1px solid var(--line-faint); }
.mk-latest time { color: var(--mk-accent); font-size: 0.82rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.mk-latest a { color: var(--ink); text-decoration: none; }
.mk-latest a:hover { color: var(--gold-bright); text-decoration: underline; }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .mk-hero__ctas { flex-direction: row; justify-content: center; max-width: none; }
  .mk-classgrid { --cols: 4; --gap: 14px; }
  .mk-classtile { padding: 16px 8px 14px; }
  .mk-classtile__name { font-size: 1rem; }
  .mk-grid--2, .mk-grid--3, .mk-grid--4, .mk-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-facts { grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr); }
  .mk-facts dt { padding: 15px 8px 12px 18px; border-bottom: 1px solid var(--line-faint); }
  .mk-facts dd { padding: 12px 18px 12px 8px; }
  .mk-facts dt:last-of-type { border-bottom: 0; }
  .mk-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-steps--row > li { padding: 70px 20px 20px; }
  .mk-sibs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-latest li { flex-direction: row; gap: 18px; align-items: baseline; }
  .mk-latest time { flex: 0 0 120px; }
}
@media (min-width: 640px) {
  .mk-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  #uptime-box { grid-column: span 2; }
  .mk-stats-slot { min-height: 290px; }
}
@media (min-width: 860px) {
  .mk-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  #uptime-box { grid-column: auto; }
  .mk-stats-slot { min-height: 180px; }
}
@media (min-width: 900px) {
  .mk-tools--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center; }
  .mk-split__aside .mk-fact { font-family: Cinzel, Georgia, serif; font-size: 1.35rem; line-height: 1.35; padding: 28px 28px; }
  .mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-guide { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .mk-toc { position: sticky; top: 96px; align-self: start; }
}
@media (min-width: 1000px) {
  .mk-classgrid { --cols: 7; }
}
@media (min-width: 1100px) {
  .mk-grid--4, .mk-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-tools.mk-tools--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card--link, .mk-classtile, .mk-hero__ctas .btn-gold::before, .mk-cta .btn-gold::before { transition: none; }
}