/* kickstarter.css — Kickstarter landing page styles.
   Builds on style.css's :root palette (--amber, --gold, --ink, --line, etc.).

   The "comp" prefix denotes blocks skinned from C:/ArcoMage/kickstarter.png —
   the overnight 2026-05-30 hero/features pass. Element crops live in
   /static/img/ks/comp_elements/ (regenerate with _crop_kickstarter_comp.py). */

/* Comp design tokens (purple/gold spellbook palette, overlaid on top of the
   base amber palette). Keep them scoped to ks-* selectors so non-KS pages
   are unaffected. */
:root {
  --ks-purple-deep: #2a1654;
  --ks-purple:      #3d2378;
  --ks-purple-2:    #5c3aa0;
  --ks-gold-bright: #f0c95a;
  --ks-gold-soft:   #c9a04a;
  --ks-parchment:   #e8d9b4;
  --ks-parchment-2: #c6b27e;
}

/* Full-page castle-landscape background for the Kickstarter page (Trent
   2026-06-04). Loads after style.css so it overrides the base body texture,
   and is scoped to the KS page since kickstarter.css only loads here. The
   dark gradient overlay keeps the wood-header + framed parchment content and
   text readable over the bright artwork. */
body {
  background:
    linear-gradient(rgba(8,6,4,0.32), rgba(8,6,4,0.50)),
    url('/static/img/background.png') center center / cover no-repeat fixed,
    #14100a !important;
  /* CRITICAL: style.css sets `background-blend-mode: normal, multiply, normal`
     on body. Our castle is the MIDDLE layer, so it was being multiply-blended
     into near-black (looked like no image at all). Reset it. */
  background-blend-mode: normal !important;
}

/* Accessibility helper — visually hidden but still in the a11y tree. */
.ks-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   COMP HERO — full-image baked hero (hero_full_alpha.png) with CTA overlay.
   hero_full_alpha.png contains the complete composition from the comp:
   landscape + logo + tagline + wizard + troll.  We use it as a block <img>
   for pixel-perfect fidelity; only the subtitle + button are real elements.
   ───────────────────────────────────────────────────────────────────────── */
.ks-hero--comp-full {
  position: relative;
  margin-bottom: 0;
  background: #0a0612; /* letterbox fallback */
  line-height: 0; /* collapses the img baseline gap */
}
.ks-hero-full-img {
  display: block;
  width: 100%;
  height: auto;
  /* force a minimum visual height so the image isn't tiny on narrow viewports */
  min-height: 300px;
  object-fit: cover;
  object-position: center top;
}
/* Overlay — positioned so the real TRANSPARENT click-target sits exactly over
   the baked "BACK THIS PROJECT" button in hero_full_alpha.png.
   hero_full_alpha is 1024×456px; baked button is centred at ~y=71% from top.
   The sub text + logo + tagline are already baked in — we do NOT render them again.
   We only render INVISIBLE click targets. */
.ks-hero-full-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 4;
}
/* Hide the subtitle — baked into the image */
.ks-hero-full-sub {
  display: none;
}
/* CTA container — absolute within the overlay, positioned over the baked button */
.ks-hero-full-cta {
  position: absolute;
  /* baked "Back this project" button in hero_full_alpha.png (1536×1024)
     sits centred at ~38% from top. Percentage tracks the image at any width. */
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  width: min(40%, 360px);
  height: 7%;
  margin: 0;
}
/* New banner has no baked "Remind me" text — drop the invisible target. */
.ks-hero--comp-full .ks-hero-remind { display: none; }

/* ── Legacy .ks-hero--comp (kept for anything that still references it) ──── */
.ks-hero--comp {
  position: relative;
  text-align: center;
  /* padding-top: room for logo above center; padding-bottom: room for mascots */
  padding: 2.2rem 1rem 18%;
  min-height: 560px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
  overflow: hidden;
  background: #0a0612;
}
/* Background layer: the clean landscape painting, covers the whole section */
.ks-hero--comp .ks-hero-bg {
  position: absolute; inset: 0;
  background: url("/static/img/ks/comp_elements/hero_landscape_clean.png") center top / cover no-repeat;
  z-index: 0;
}
/* Light centre-bottom vignette so the CTA text is legible over bright sky */
.ks-hero--comp .ks-hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, transparent 25%, rgba(10,6,18,.40) 70%, rgba(10,6,18,.78) 100%),
    linear-gradient(180deg, rgba(10,6,18,.08) 0%, rgba(10,6,18,.0) 30%, rgba(10,6,18,.55) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Wizard left, troll right — bottom-anchored, sized proportionally */
.ks-hero--comp .ks-hero-mascot {
  position: absolute;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  /* no filter — the alpha images already have natural edges */
}
.ks-hero--comp .ks-hero-mascot--wizard {
  left: 0;
  bottom: 0;
  width: 26%;
  max-width: 280px;
  min-width: 120px;
}
.ks-hero--comp .ks-hero-mascot--troll {
  right: 0;
  bottom: 0;
  width: 28%;
  max-width: 300px;
  min-width: 130px;
}
@media (max-width: 720px) {
  .ks-hero--comp .ks-hero-mascot--wizard,
  .ks-hero--comp .ks-hero-mascot--troll { opacity: .28; }
}
/* Content stack — logo / tagline-image / subtitle / CTA */
.ks-hero--comp .ks-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 .8rem;
}
/* ArcoMage gold wordmark */
.ks-hero--comp .ks-hero-logo {
  display: block;
  width: min(72%, 500px);
  height: auto;
  margin: 0 auto .3rem;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.75));
}
/* "The Spell Is Yours" tagline baked image */
.ks-hero-tagline-img {
  display: block;
  width: min(68%, 460px);
  height: auto;
  margin: 0 auto .9rem;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.65));
}
.ks-hero--comp .ks-sub {
  color: #f3ead4;
  text-shadow: 0 2px 12px rgba(0,0,0,.90);
  font-size: 1.0rem;
  max-width: 48ch;
  margin: 0 auto .9rem;
  line-height: 1.5;
}
.ks-hero--comp .ks-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
  margin-bottom: .5rem;
}
/* "Back This Project" button inside the full-image hero:
   TRANSPARENT click target that sits perfectly over the baked button in
   hero_full_alpha.png.  Visually invisible; clickable area only.
   On hover we add a subtle glow so users feel the affordance. */
.ks-hero--comp-full .ks-btn-back-comp {
  background: transparent;
  border: none;
  color: transparent;
  /* fill the CTA box so the click area lines up with the baked button */
  width: 100%;
  height: 100%;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  /* subtle pointer glow on hover shows it's clickable */
  transition: box-shadow .15s ease;
}
.ks-hero--comp-full .ks-btn-back-comp:hover {
  box-shadow: 0 0 0 3px rgba(100,220,130,.55), 0 6px 20px rgba(63,167,90,.5);
}
/* Generic .ks-btn-back-comp for use outside the hero */
.ks-btn-back-comp {
  background: linear-gradient(180deg, #4aba64 0%, #2d8040 100%) !important;
  border: 2px solid #a0d8b0 !important;
  color: #0a1f0d !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .75rem 2.2rem !important;
  border-radius: 6px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.2) !important;
  box-shadow: 0 4px 18px rgba(63,167,90,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
/* Remind me link — transparent in full-image hero (baked text below);
   visible in other hero contexts */
.ks-hero--comp-full .ks-hero-remind {
  background: transparent;
  color: transparent;
  border: none;
  cursor: pointer;
  padding: .7rem 1rem;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow .15s;
}
.ks-hero--comp-full .ks-hero-remind:hover {
  box-shadow: 0 0 0 2px rgba(220,240,228,.4);
  border-radius: 4px;
}
.ks-hero-remind {
  color: #d8f0de;
  text-decoration: none;
  font-size: .92rem;
  opacity: .85;
  margin-left: .3rem;
}
.ks-hero-remind:hover { opacity: 1; text-decoration: underline; }
.ks-hero--comp .ks-hero-note {
  color: #cbb98a;
  font-size: .88rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
  margin-top: .4rem;
}
/* PS partner badge — unchanged */
.ks-hero--comp .ks-ps-partner { margin-bottom: .6rem; }

/* ── Official PlayStation Partner badge (text treatment — no Sony lockup) ──── */
.ks-ps-partner {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 auto 1.1rem;
  padding: .42rem .9rem;
  border: 1px solid rgba(180, 200, 255, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18,26,52,.78) 0%, rgba(8,12,28,.82) 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
}
.ks-ps-glyphs { display: inline-flex; gap: .28rem; line-height: 1; }
.ks-ps-g { font-size: .82rem; line-height: 1; }
.ks-ps-g--tri { color: #6fe39a; }   /* triangle (green) */
.ks-ps-g--cir { color: #ff7d8a; }   /* circle (red)     */
.ks-ps-g--x   { color: #7da8ff; }   /* cross (blue)     */
.ks-ps-g--sq  { color: #d59bff; }   /* square (purple)  */
.ks-ps-text {
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e8eefc;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.ks-ps-text strong { color: #ffffff; font-weight: 800; }
@media (max-width: 540px) {
  .ks-ps-text { font-size: .72rem; letter-spacing: .08em; }
}

/* ─────────────────────────────────────────────────────────────────────────
   COMP FEATURES — 5 gold-framed pillar cards (one row on desktop).
   Two variants:
     default (feat_*.png) — plain illustration + overlaid title/text
     --pillar (pillar_*_alpha.png) — baked comp image, no overlay needed
   ───────────────────────────────────────────────────────────────────────── */
.ks-comp-features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 1rem 4px 1.4rem;
  margin-bottom: .6rem;
  /* slight dark bg so transparent card edges look clean */
  background: linear-gradient(180deg, rgba(14,10,28,.82) 0%, rgba(10,8,20,.92) 100%);
}

/* ── Default card style (used when pillar_*_alpha isn't the image) ── */
.ks-comp-feat {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--ks-purple) 0%, var(--ks-purple-deep) 100%);
  border: 1px solid var(--ks-gold-soft);
  box-shadow: 0 6px 18px rgba(0,0,0,.5),
              inset 0 0 0 1px rgba(240,201,90,.18);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ks-comp-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.65), 0 0 22px rgba(240,201,90,.35);
}
.ks-comp-feat img {
  display: block;
  width: 100%;
  height: auto;
}
.ks-comp-feat h3 {
  font-family: "Cinzel", "Iowan Old Style", Georgia, serif;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ks-gold-bright);
  margin: .9rem .5rem .35rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.ks-comp-feat p {
  font-size: .85rem;
  color: #d8ccaa;
  line-height: 1.45;
  margin: 0 .8rem 1rem;
}

/* ── Pillar variant: baked comp image — no border, no bg, no text overlay ── */
.ks-comp-feat--pillar {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}
.ks-comp-feat--pillar:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.ks-comp-feat--pillar img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ks-comp-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .ks-comp-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ks-hero--comp {
    min-height: 0;
    padding: 1.5rem .6rem 22%;
  }
  .ks-hero--comp .ks-hero-mascot { display: none; }
  .ks-hero--comp .ks-hero-content { max-width: 100%; }
  .ks-hero--comp .ks-hero-logo { width: min(85%, 380px); }
  .ks-hero-tagline-img { width: min(85%, 380px); }
}
@media (max-width: 480px) {
  .ks-comp-features { grid-template-columns: 1fr; }
}

/* ── Hero (legacy — kept for any non-comp usage) ──────────────── */
.ks-hero {
  text-align: center;
  padding: 4rem 1.2rem 3.2rem;
  background:
    linear-gradient(180deg, rgba(10,8,5,.65) 0%, rgba(28,21,13,.85) 100%),
    url("/static/img/hero.png") center/cover no-repeat;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  margin-bottom: 1rem;
}
.ks-hero h1 {
  font-size: 4rem; margin: .2rem 0 .4rem;
  text-shadow: 0 2px 22px rgba(0,0,0,.85);
  letter-spacing: .03em;
}
.ks-kicker {
  display: inline-block;
  color: var(--amber-2);
  letter-spacing: .25em;
  font-size: .82rem;
  text-transform: uppercase;
  padding: .3rem .9rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: rgba(227,99,26,.08);
  margin: 0 0 1rem;
}
.ks-tagline {
  font-style: italic; color: var(--gold);
  font-size: 1.5rem; margin: 0 auto 1.2rem;
  max-width: 36ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.ks-sub {
  color: var(--ink-dim);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 auto 1.8rem;
  line-height: 1.6;
}
.ks-hero-note { font-size: .88rem; margin-top: 1.4rem; }

.ks-btn-primary { font-size: 1.1rem; padding: .9rem 1.8rem; }
.ks-btn-large   { font-size: 1.2rem; padding: 1.05rem 2.2rem; }
.ks-btn-ghost   { font-size: 1.05rem; padding: .8rem 1.5rem;
                  border: 1px solid var(--gold); border-radius: 8px; display: inline-block;
                  margin: .3rem; }
.ks-btn-ghost:hover { color: var(--gold); background: rgba(227,99,26,.08); }

/* ── Section headings ──────────────────────────────────────── */
.ks-pillars h2,
.ks-cards-showcase h2,
.ks-tiers h2,
.ks-stretch h2,
.ks-about h2,
.ks-risks h2,
.ks-faq h2,
.ks-final-cta h2,
.ks-video-pipeline h2,
.ks-support h2 {
  text-align: center;
  font-size: 2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .5rem;
  margin-bottom: 1.4rem;
}

/* ── AI video pipeline section ─────────────────────────────── */
.ks-video-pipeline {
  padding: 1.8rem 1.4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.ks-video-banner {
  margin: 0 auto 1.4rem;
  max-width: 1100px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.ks-video-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.ks-video-pipeline p {
  max-width: 70ch;
  margin: 0 auto 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.ks-video-pipeline .ks-cta {
  text-align: center;
  margin-top: 1.4rem;
}

/* ── Pillars ───────────────────────────────────────────────── */
.ks-pillars { padding: 1.8rem 1.4rem; }
.ks-pillar {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: rgba(28,21,13,.5);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
}
.ks-pillar-icon {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--amber-2);
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  padding-top: .15rem;
  text-shadow: 0 0 22px rgba(227,99,26,.45);
}
.ks-pillar h3 { margin: 0 0 .3rem; color: var(--gold); }
.ks-pillar p  { margin: 0; color: var(--ink); }

/* ── Cards showcase ────────────────────────────────────────── */
.ks-cards-showcase {
  padding: 1.8rem 1.4rem;
  text-align: center;
}
.ks-cards-showcase > p { max-width: 62ch; margin: 0 auto 1.6rem; color: var(--ink); }
.ks-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}
.ks-card {
  width: 100%; height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0c0805;
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ks-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(227,99,26,.35);
}
.ks-cards-note { margin-top: .6rem; font-size: .92rem; }

/* ── Reward tiers ──────────────────────────────────────────── */
.ks-tiers { padding: 1.8rem 1.4rem; }
.ks-tiers-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 1.8rem;
  color: var(--ink);
}
.ks-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.6rem 1.4rem;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .ks-tier-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px)  { .ks-tier-grid { grid-template-columns: 1fr; } }

/* Default tier (dark style) — used by odd-indexed tiers */
.ks-tier {
  background: linear-gradient(160deg, rgba(40,28,12,.85) 0%, rgba(22,16,8,.92) 100%);
  border: 1px solid var(--amber);
  border-radius: 14px;
  padding: 1.8rem 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(227,177,90,.15);
}
/* Parchment style — alternating tiers (even children) get this */
.ks-tier:nth-child(even) {
  background: url("/static/img/ui_pieces/panel_profile_card.png") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  padding: 2.6rem 2.2rem 2.4rem;
  color: #2a1a08;
  box-shadow: none;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
/* Default heading colors */
.ks-tier h3 { color: var(--amber-2); margin: 0 0 .4rem; font-size: 1.45rem; font-family: 'Cinzel', Georgia, serif; }
.ks-tier p { color: var(--ink-dim); }
/* Parchment-tier heading colors override */
.ks-tier:nth-child(even) h3 { color: #6b2c08; }
.ks-tier:nth-child(even) p  { color: #3a2814; }
.ks-tier-price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--amber-2);
  letter-spacing: .02em;
  margin-bottom: .15rem;
  text-shadow: 0 0 18px rgba(227,99,26,.4);
}
.ks-tier ul {
  margin: .5rem 0 0;
  padding-left: 1.2rem;
  color: var(--ink);
  line-height: 1.55;
}
.ks-tier li { margin-bottom: .35rem; }
.ks-tier li::marker { color: var(--amber); }
.ks-tier strong { color: var(--amber-2); }
.ks-tier em { color: var(--gold); }
.ks-tier-lead {
  color: var(--ink-dim);
  font-style: italic;
  margin: .3rem 0 .5rem;
}
/* Parchment-tier overrides for list items + emphasis */
.ks-tier:nth-child(even) ul { color: #3a2814; }
.ks-tier:nth-child(even) li::marker { color: #8a4a1a; }
.ks-tier:nth-child(even) strong { color: #6b2c08; }
.ks-tier:nth-child(even) em { color: #6b2c08; }
.ks-tier:nth-child(even) .ks-tier-lead { color: #4a3018; }
.ks-tier:nth-child(even) .ks-tier-price { color: #6b2c08; text-shadow: none; }
.ks-tier:nth-child(even) .ks-tier-disclaimer { color: #5a4220; }
.ks-tier:nth-child(even) .ks-tier-disclaimer strong { color: #6b2c08; }
.ks-tier-disclaimer {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  font-size: .85rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.ks-tier-disclaimer strong { color: var(--amber-2); }

/* Featured / Most popular tier — $50 Archmage */
.ks-tier-featured {
  border: 2px solid var(--amber);
  background: linear-gradient(180deg, rgba(227,99,26,.12) 0%, rgba(28,21,13,.7) 80%);
  box-shadow: 0 0 32px rgba(227,99,26,.25), 0 8px 24px rgba(0,0,0,.6);
  transform: scale(1.03);
  z-index: 2;
}
.ks-tier-featured .ks-tier-price { color: var(--gold); }
.ks-tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--amber-2), var(--amber));
  color: #1a0e05;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}

/* ── Stretch goals ─────────────────────────────────────────── */
.ks-stretch { padding: 1.8rem 1.4rem; }
.ks-stretch-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 1.5rem;
  color: var(--ink-dim);
  font-style: italic;
}
.ks-stretch-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ks-stretch-list li {
  background: rgba(28,21,13,.5);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  padding: .8rem 1.1rem;
  margin-bottom: .6rem;
  line-height: 1.55;
}
.ks-stretch-list strong { color: var(--gold); }

/* ── About / Risks ─────────────────────────────────────────── */
.ks-about,
.ks-risks { padding: 1.8rem 1.4rem; }
.ks-about p { max-width: 64ch; margin: 0 auto 1rem; }
.ks-risks-list {
  list-style: none;
  padding: 0;
  max-width: 70ch;
  margin: 0 auto;
}
.ks-risks-list li {
  background: rgba(28,21,13,.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
  line-height: 1.55;
}
.ks-risks-list strong { color: var(--amber-2); }

/* ── FAQ ───────────────────────────────────────────────────── */
.ks-faq { padding: 1.8rem 1.4rem; }
.ks-faq details {
  background: rgba(28,21,13,.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .85rem 1.1rem;
  margin-bottom: .6rem;
}
.ks-faq summary {
  cursor: pointer;
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05rem;
  outline: none;
}
.ks-faq summary:hover { color: var(--amber-2); }
.ks-faq details[open] summary { margin-bottom: .5rem; }
.ks-faq details p { margin: 0; line-height: 1.6; color: var(--ink); }

/* ── Final CTA ─────────────────────────────────────────────── */
.ks-final-cta {
  text-align: center;
  background:
    linear-gradient(180deg, rgba(28,21,13,.7) 0%, rgba(10,8,5,.85) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3rem 1.4rem;
  margin-bottom: 1.4rem;
}
.ks-final-cta p { max-width: 56ch; margin: 0 auto 1rem; color: var(--ink); }
.ks-share { margin-top: 1.4rem; font-size: .95rem; }
.ks-share a { margin: 0 .1em; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ks-hero h1 { font-size: 2.6rem; }
  .ks-tagline { font-size: 1.2rem; }
  .ks-sub     { font-size: 1rem; padding: 0 .4rem; }
  .ks-pillar {
    flex-direction: column;
    gap: .6rem;
    padding: 1.1rem 1rem;
  }
  .ks-pillar-icon {
    font-size: 2rem;
    width: auto;
    text-align: left;
  }
  .ks-tier-featured { transform: none; }
  .ks-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
  }
  .ks-tiers h2,
  .ks-pillars h2,
  .ks-cards-showcase h2,
  .ks-stretch h2,
  .ks-about h2,
  .ks-risks h2,
  .ks-faq h2,
  .ks-final-cta h2 { font-size: 1.6rem; }
  .ks-tier-price { font-size: 2rem; }
  .ks-final-cta { padding: 2rem 1rem; }
  .mainnav a.nav-ks {
    margin-left: .4rem;
    font-size: .9rem;
    padding: .2rem .55rem;
  }
}

/* Tier-card hero imagery — chest/dust visuals from /static/img/ks/.
   Float at the top of the card so it reads like a product hero shot. */
.ks-tier-img {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto 1rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(255, 154, 61, .25));
}
.ks-tier-featured .ks-tier-img {
    filter: drop-shadow(0 16px 32px rgba(255, 200, 68, .35));
}

/* ── Founder Spell Chest opening teaser ───────────────────────── */
.ks-chest-teaser {
  padding: 1.4rem 1.4rem 0;
  text-align: center;
}
.ks-chest-opening-figure {
  max-width: 720px;
  margin: 0 auto;
}
.ks-chest-opening {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .65),
              0 0 28px rgba(227, 99, 26, .18);
  background: #0c0805;
  display: block;
}
.ks-chest-opening-figure figcaption {
  color: var(--ink-dim);
  font-style: italic;
  font-size: .95rem;
  margin-top: .7rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ── Ghost Spell Pack tier — illustration showcase ────────────── */
.ks-tier-ghost {
  /* highlight the showcase tier, but lighter than the featured $50 */
  border: 1px solid var(--amber);
  background: linear-gradient(180deg,
              rgba(70, 40, 110, .22) 0%,
              rgba(28, 21, 13, .7) 80%);
  box-shadow: 0 0 22px rgba(140, 90, 200, .18),
              0 6px 18px rgba(0, 0, 0, .55);
}
.ks-ghost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 1rem 0 .8rem;
}
.ks-ghost-grid figure {
  margin: 0;
  background: rgba(10, 8, 5, .55);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ks-ghost-grid figure:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 22px rgba(140, 90, 200, .35);
}
.ks-ghost-grid img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #0c0805;
  display: block;
  margin-bottom: .5rem;
}
.ks-ghost-grid figcaption {
  font-size: .88rem;
  line-height: 1.3;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.ks-ghost-grid figcaption strong {
  color: var(--gold);
  font-weight: 600;
}
.ks-ghost-note {
  font-size: .85rem;
  margin: 0 0 .8rem;
  line-height: 1.45;
}

/* ── Rarity badges ────────────────────────────────────────────── */
.rarity {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
}
.rarity.common {
  color: #d8d5cf;
  border-color: rgba(216, 213, 207, .55);
  background: rgba(216, 213, 207, .08);
  box-shadow: 0 0 8px rgba(216, 213, 207, .12);
}
.rarity.rare {
  color: #7eb8ff;
  border-color: rgba(126, 184, 255, .6);
  background: rgba(126, 184, 255, .1);
  box-shadow: 0 0 10px rgba(126, 184, 255, .25);
}
.rarity.epic {
  color: #c79bff;
  border-color: rgba(199, 155, 255, .65);
  background: rgba(199, 155, 255, .1);
  box-shadow: 0 0 10px rgba(199, 155, 255, .3);
}
.rarity.legendary {
  color: #ffc844;
  border-color: rgba(255, 200, 68, .7);
  background: rgba(255, 200, 68, .1);
  box-shadow: 0 0 12px rgba(255, 200, 68, .35);
}

/* ── Mobile-page notify form + community channels ───────────── */
.ks-mobile-cta-inline { margin-top: 1.2rem; }
.ks-mobile-notify {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.ks-mobile-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 1.4rem auto 0;
  padding: 1.4rem 1.6rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 200, 100, .12);
  border-radius: 10px;
  text-align: left;
}
.ks-mobile-field { display: flex; flex-direction: column; gap: .35rem; }
.ks-mobile-field label {
  font-size: .92rem;
  letter-spacing: .03em;
  color: #c9b88c;
}
.ks-mobile-field input {
  font-family: inherit;
  font-size: 1rem;
  padding: .65rem .85rem;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 200, 100, .25);
  color: #f4ecd6;
  border-radius: 6px;
  outline: none;
  transition: border-color .15s;
}
.ks-mobile-field input:focus {
  border-color: rgba(255, 200, 100, .65);
}
.ks-mobile-or {
  text-align: center;
  color: #8a7a55;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: -.2rem 0;
}
.ks-mobile-submit { align-self: flex-start; margin-top: .3rem; }
.ks-mobile-form-status {
  margin: .3rem 0 0;
  min-height: 1.2rem;
  font-size: .92rem;
}
.ks-mobile-form-status.ok  { color: #9fe19f; }
.ks-mobile-form-status.err { color: #ff9b8c; }

.ks-mobile-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}
.ks-mobile-channel {
  display: block;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 200, 100, .15);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.ks-mobile-channel:hover {
  border-color: rgba(255, 200, 100, .55);
  transform: translateY(-2px);
}
.ks-mobile-channel h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  color: #ffd683;
}
.ks-mobile-channel p {
  margin: 0;
  font-size: .9rem;
  color: #c9b88c;
}
.ks-mobile-channel-cta {
  display: inline-block;
  margin-top: .6rem;
  font-size: .88rem;
  color: #ffd683;
  letter-spacing: .03em;
}

/* ── Player profile + leaderboard ─────────────────────────────── */
.player-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.6rem 1.8rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 200, 100, .18);
  border-radius: 12px;
}
.player-card-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.player-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 200, 100, .35);
  background: rgba(0, 0, 0, .25);
}
.player-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: rgba(255, 220, 130, .5);
}
.player-name-block { flex: 1 1 auto; min-width: 180px; }
.player-name { margin: 0; font-size: 1.6rem; color: #ffd683; }
.player-handle { margin: .1rem 0 0; color: #8a7a55; font-size: .95rem; }
.player-tier { margin: .35rem 0 0; color: #c79bff; font-size: .85rem; letter-spacing: .04em; }
.player-edit-link { white-space: nowrap; }
.player-rank-badge {
  width: 96px; height: 96px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 14px rgba(255, 200, 100, .25));
}
.player-rank-label {
  margin: .45rem 0 0;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.player-rank-label.rank-bronze   { color: #d99466; }
.player-rank-label.rank-silver   { color: #c9d5e0; }
.player-rank-label.rank-gold     { color: #ffc844; }
.player-rank-label.rank-platinum { color: #b3e3ff; }
.player-rank-label.rank-diamond  { color: #c79bff; }
.player-rank-label.rank-unranked { color: #8a7a55; }

.badge-col { width: 56px; text-align: center; }
.leaderboard-rank-badge {
  width: 40px; height: 40px;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(255, 200, 100, .25));
}

.player-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
  margin-top: 1.3rem;
}
.player-stat {
  display: flex;
  flex-direction: column;
  padding: .7rem .6rem;
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 200, 100, .12);
  border-radius: 8px;
  text-align: center;
}
.player-stat-num { font-size: 1.35rem; font-weight: 700; color: #f4ecd6; }
.player-stat-lbl { font-size: .78rem; color: #8a7a55; letter-spacing: .04em; margin-top: .2rem; }

.player-bio {
  margin-top: 1.2rem;
  font-style: italic;
  color: #c9b88c;
}
.player-unranked-note { margin-top: 1rem; font-size: .9rem; }

.player-recent {
  max-width: 880px;
  margin: 0 auto;
}
.match-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.match-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 200, 100, .08);
  border-radius: 8px;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.result-chip {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 4px;
}
.result-chip.win  { background: rgba(159, 225, 159, .14); color: #9fe19f; }
.result-chip.loss { background: rgba(255, 155, 140, .14); color: #ff9b8c; }
.result-chip.draw { background: rgba(200, 200, 200, .14); color: #c9b88c; }
.match-vs { flex: 1 1 auto; min-width: 140px; }
.match-vs a { color: #ffd683; }
.elo-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.elo-delta.up   { color: #9fe19f; }
.elo-delta.down { color: #ff9b8c; }
.elo-delta.flat { color: #8a7a55; }
.match-time { font-size: .85rem; }

.leaderboard-section { max-width: 980px; margin: 0 auto; }
.leaderboard {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, .02);
  border-radius: 10px;
  overflow: hidden;
}
.leaderboard thead th {
  text-align: left;
  padding: .7rem .8rem;
  background: rgba(255, 200, 100, .08);
  border-bottom: 1px solid rgba(255, 200, 100, .2);
  font-size: .92rem;
  color: #c9b88c;
}
.leaderboard tbody td {
  padding: .55rem .8rem;
  border-bottom: 1px solid rgba(255, 200, 100, .05);
  vertical-align: middle;
}
.leaderboard tbody tr:nth-child(2n) { background: rgba(255, 255, 255, .015); }
.rank-col { width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.num-col  { text-align: right; font-variant-numeric: tabular-nums; }
.rank-gold   td.rank-col { color: #ffc844; font-weight: 700; font-size: 1.05rem; }
.rank-silver td.rank-col { color: #c9d5e0; font-weight: 700; font-size: 1.05rem; }
.rank-bronze td.rank-col { color: #d99466; font-weight: 700; font-size: 1.05rem; }
.leaderboard-portrait {
  width: 32px; height: 32px;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: .55rem;
  border: 1px solid rgba(255, 200, 100, .2);
  object-fit: cover;
}
.leaderboard-handle { color: #8a7a55; margin-left: .4rem; font-size: .88rem; }

/* Player edit form */
.player-edit { max-width: 880px; margin: 0 auto; }
.player-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem 1.8rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 200, 100, .15);
  border-radius: 12px;
}
.player-edit-field { display: flex; flex-direction: column; gap: .4rem; }
.player-edit-field label,
.player-edit-portraits legend { color: #c9b88c; font-size: .92rem; letter-spacing: .03em; }
.player-edit-field input[type="text"],
.player-edit-field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: .65rem .85rem;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 200, 100, .25);
  color: #f4ecd6;
  border-radius: 6px;
  outline: none;
}
.player-edit-field input[type="text"]:focus,
.player-edit-field textarea:focus { border-color: rgba(255, 200, 100, .65); }
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}
.portrait-opt {
  position: relative;
  cursor: pointer;
  display: block;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
  aspect-ratio: 1 / 1;
}
.portrait-opt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-opt input { position: absolute; opacity: 0; pointer-events: none; }
.portrait-opt:has(input:checked) { border-color: #ffc844; box-shadow: 0 0 8px rgba(255, 200, 68, .5); }
.portrait-opt-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: #c9b88c;
}
.portrait-opt-blank { font-size: 1.8rem; }
.portrait-opt-lbl { margin-top: .2rem; }
.player-edit-actions { display: flex; gap: .8rem; }

/* ── Mobile overrides for new sections ────────────────────────── */
@media (max-width: 720px) {
  .ks-ghost-grid {
    grid-template-columns: 1fr;
    gap: .7rem;
  }
  .ks-chest-opening-figure figcaption {
    font-size: .88rem;
  }
  .ks-mobile-channels-grid {
    grid-template-columns: 1fr;
  }
  .ks-mobile-form {
    padding: 1.1rem 1rem;
  }
  .player-stats { grid-template-columns: repeat(2, 1fr); }
  .leaderboard thead th:nth-child(5),
  .leaderboard tbody td:nth-child(5) { display: none; }   /* hide Peak column on narrow */
  .leaderboard-portrait { width: 24px; height: 24px; }
  .leaderboard-rank-badge { width: 28px; height: 28px; }
  .player-rank-badge { width: 64px; height: 64px; }
}

/* ===== ArcoMage Cup section (tournament signup hook) ===== */
.ks-cup {
  max-width: 1200px;
  margin: 48px auto 24px;
  padding: 0 20px;
}
.ks-cup-inner {
  display: grid;
  grid-template-columns: minmax(280px, 480px) 1fr;
  gap: 40px;
  align-items: center;
}
.ks-cup-video {
  border: 4px solid #d4af37;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 14px 38px rgba(0,0,0,.55),
    0 0 32px rgba(212,175,55,.22);
  background: #0c1530;
}
.ks-cup-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;   /* matches the 720x1280 source */
  object-fit: cover;
}
.ks-cup-copy { color: #e8e4d8; }
.ks-cup-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: #d4af37;
  margin: 0 0 6px 0;
  font-weight: 600;
}
.ks-cup-title {
  font-family: "Cinzel", "Trajan Pro", Constantia, Garamond, serif;
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  line-height: 1.02;
  margin: 0 0 18px 0;
  color: #f0c95a !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.75), 0 0 18px rgba(212,175,55,.18);
}
.ks-cup-lead {
  font-size: 1.08rem;
  line-height: 1.55;
  margin: 0 0 14px 0;
  max-width: 56ch;
  color: #e8e4d8;
}
.ks-cup-lead strong { color: #f0c95a; }
.ks-cup-prizes {
  font-family: "Cinzel", "Trajan Pro", Constantia, Garamond, serif;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  color: #ff6b3a;
  margin: 0 0 22px 0;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.ks-cup-copy .ks-btn-primary {
  display: inline-block;
  font-size: 1.05rem;
  padding: 12px 28px;
}
@media (max-width: 760px) {
  .ks-cup-inner { grid-template-columns: 1fr; gap: 24px; }
  .ks-cup-video { max-width: 360px; margin: 0 auto; }
}

/* ── Click-to-play video player (Guild Founder tier + reusable) ───── */
.ks-click-video {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 14px auto;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #0a1129;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.35),
    0 6px 22px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(212,175,55,.15);
}
.ks-click-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a1129;
}
.ks-cv-btn {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: rgba(10,16,40,.32);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
  pointer-events: none;     /* clicks bubble to wrapper handler */
}
.ks-cv-btn svg {
  width: 64px;
  height: 64px;
  fill: #f0c95a;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.85))
    drop-shadow(0 0 14px rgba(212,175,55,.45));
  transition: transform .18s ease;
}
.ks-cv-icon-replay { display: none; }
.ks-click-video:hover .ks-cv-btn { background: rgba(10,16,40,.18); }
.ks-click-video:hover .ks-cv-btn svg { transform: scale(1.08); }

/* Playing — hide overlay so the video reads cleanly. */
.ks-click-video[data-state="playing"] .ks-cv-btn {
  background: transparent;
  opacity: 0;
}
.ks-click-video[data-state="playing"]:hover .ks-cv-btn {
  background: rgba(10,16,40,.18);
  opacity: 1;
}
.ks-click-video[data-state="playing"] .ks-cv-icon-play { display: none; }
.ks-click-video[data-state="playing"] .ks-cv-icon-replay { display: none; }
.ks-click-video[data-state="playing"]:hover .ks-cv-icon-play {
  display: block;
}
/* Show pause glyph on hover-while-playing by reusing the play SVG path
   as a translucent "tap to pause" affordance; keep it simple — same icon */

/* Ended — swap to replay icon. */
.ks-click-video[data-state="ended"] .ks-cv-icon-play { display: none; }
.ks-click-video[data-state="ended"] .ks-cv-icon-replay { display: block; }

/* ── Cup community-links line ─────────────────────────────────────── */
.ks-cup-join { font-size: 1rem; color: #b9b3a4; margin-top: -4px; }
.ks-cup-join a { color: #d4af37; text-decoration: underline; }
.ks-cup-join a:hover { color: #f0c95a; }

/* ── Tournament Signup section ────────────────────────────────────── */
.ks-signup {
  max-width: 1200px;
  margin: 48px auto 24px;
  padding: 0 20px;
}
.ks-signup-inner {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 48px;
  align-items: center;
}
.ks-signup-video .ks-click-video {
  max-width: 360px;
  margin: 0;
}
.ks-signup-form-wrap { color: #e8e4d8; }
.ks-signup-title {
  font-family: "Cinzel", "Trajan Pro", Constantia, Garamond, serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.05;
  margin: 0 0 14px 0;
  color: #f0c95a !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.75), 0 0 18px rgba(212,175,55,.18);
}
.ks-signup-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 52ch;
  color: #e8e4d8;
  margin: 0 0 20px 0;
}
.ks-signup-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 0 14px 0;
}
.ks-signup-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: #1a1206;
  background: #f3ead3;
  border: 2px solid #d4af37;
  border-radius: 6px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ks-signup-form input[type="email"]:focus {
  border-color: #f0c95a;
  box-shadow: 0 0 0 3px rgba(240,201,90,.28);
}
.ks-signup-form input[type="email"]::placeholder { color: #7a6a4a; }
.ks-signup-form .ks-btn-primary {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 1rem;
  white-space: nowrap;
}
.ks-signup-fine {
  font-size: 0.85rem;
  color: #9a9484;
  max-width: 52ch;
  line-height: 1.5;
  margin: 0;
}
/* form result banner (server response) */
.ks-signup-result {
  margin: 12px 0 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.4);
  color: #f0c95a;
}
.ks-signup-result.error {
  background: rgba(184,57,43,.14);
  border-color: rgba(184,57,43,.55);
  color: #ff8a7a;
}

@media (max-width: 760px) {
  .ks-signup-inner { grid-template-columns: 1fr; gap: 24px; }
  .ks-signup-video .ks-click-video { max-width: 300px; margin: 0 auto; }
  .ks-signup-form { flex-direction: column; }
  .ks-signup-form .ks-btn-primary { width: 100%; }
}

/* ── Tabletop play hero (autoplay loop) — added 2026-05-28 ─────── */
.ks-tabletop-hero { padding: 0 0 16px; background: transparent; }
.ks-tabletop-figure {
  max-width: 1180px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 0 2px rgba(212,175,55,.22) inset;
}
.ks-tabletop-video { display: block; width: 100%; height: auto; }
.ks-tabletop-caption {
  text-align: center; padding: 14px 16px 18px;
  background: linear-gradient(180deg, rgba(12,16,26,.85), rgba(12,16,26,1));
  color: #e8e0c8; font-size: 1.05rem;
}
.ks-tabletop-caption em { display: block; color: #d4af37; font-style: italic; margin-top: 6px; }

/* ── Physical-book milestone callout (in stretch list) ─────────── */
.ks-stretch-milestone {
  background: linear-gradient(180deg, rgba(108,60,140,.18), rgba(108,60,140,.06));
  border-left: 4px solid #d4af37;
  padding: 14px 18px;
  margin: 0 0 12px;
  border-radius: 6px;
  list-style: none;
}
.ks-stretch-milestone strong { color: #f5dc82; }
.ks-stretch-milestone em { color: #c9c0a8; font-style: italic; }
.ks-stretch-milestone-headline {
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(108,60,140,.10));
  border-left: 4px solid #f0c95a;
}

/* ── Wider pillars + SVG icon sizing (2026-05-28) ───────────────── */
html { scroll-behavior: smooth; }   /* CSS fallback for smooth scroll */

.ks-pillars {
  max-width: 1400px;
  margin: 0 auto;
}
.ks-pillar { padding: 1.6rem 1.8rem; }
.ks-pillar-icon { width: 64px; padding-top: 0; }
.ks-pillar-icon svg {
  display: block;
  width: 48px;
  height: 48px;
  margin: 6px auto 0;
  color: var(--amber-2);
  filter: drop-shadow(0 0 10px rgba(227,99,26,.45));
}

/* ── Founder Spell Preview grid ─────────────────────────────────── */
.ks-spell-preview {
  padding: 2.6rem 1.6rem 2.2rem;
  text-align: center;
}
.ks-spell-preview h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.4rem;
  color: var(--amber-2);
  margin: 0 0 .6rem;
}
.ks-spell-preview__lead {
  max-width: 780px;
  margin: 0 auto 2rem;
  color: #d4c8a8;
  font-size: 1.05rem;
  line-height: 1.55;
}
.ks-spell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem 1.2rem;
  max-width: 1380px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .ks-spell-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px)  { .ks-spell-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px)  { .ks-spell-grid { grid-template-columns: 1fr; } }

/* parchment 9-slice tile frame */
.ks-spell-tile {
  margin: 0;
  padding: 26px 22px 18px;
  background: url("/static/img/ui_pieces/panel_profile_card.png") center / 100% 100% no-repeat;
  text-align: center;
  transition: transform .18s ease;
}
.ks-spell-tile:hover { transform: translateY(-3px); }
.ks-spell-tile__art {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  background: #0a0805;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  overflow: hidden;
  margin: 0 0 .8rem;
}
.ks-spell-tile__art video,
.ks-spell-tile__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ks-spell-tile__pending {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  color: #f3e6c4;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 18px 8px 8px;
  text-align: center;
}
.ks-spell-tile--ghost .ks-spell-tile__art {
  box-shadow: 0 4px 14px rgba(0,0,0,.55),
              0 0 18px rgba(96, 160, 220, .35);
}
.ks-spell-tile--epic .ks-spell-tile__art {
  box-shadow: 0 4px 14px rgba(0,0,0,.55),
              0 0 22px rgba(227, 177, 90, .55);
}
.ks-spell-tile__meta {
  font-family: 'Cinzel', Georgia, serif;
  line-height: 1.25;
}
.ks-spell-tile__name {
  display: block;
  font-size: 1.05rem;
  color: #2a1a08;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.ks-spell-tile__sub {
  display: block;
  font-size: .78rem;
  color: #5a4220;
  letter-spacing: .03em;
}
.ks-spell-preview__foot {
  margin: 1.6rem auto 0;
  max-width: 760px;
  font-style: italic;
  font-size: .92rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   ABOUT — parchment panel + purple-banner highlights sidebar.
   Skinned from kickstarter.png (2026-05-30 comp). Pattern: ONE bg-image
   stretched, content padded inside the clear zone of the baked-in frame
   (per forum_skin/mockup.php — "no 9-slice, no pseudos, just padding").
   ───────────────────────────────────────────────────────────────────────── */
.ks-about--comp {
  padding: 1.4rem 1rem 1.6rem;
  max-width: 1280px;
  margin: 0 auto;
}
.ks-about-grid {
  display: grid;
  /* Owner hard requirement 2026-06-02: LEFT (About) ~2× the RIGHT (Highlights). */
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: stretch;
}
/* Parchment frame — one full-bleed image, content padded into the middle */
.ks-parchment {
  background-image: url("/static/img/ks/comp_elements/parchment_panel.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* padding clears the baked-in chrome: top filigree + bottom troll/medallion/dragon band */
  padding: 130px 90px 320px 90px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.55));
  min-height: 680px;
  display: flex;
  align-items: stretch;
}
.ks-parchment-content {
  color: #3a2410;
  font-family: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.6;
  width: 100%;
}
.ks-parchment-content h2 {
  font-family: 'Cinzel', serif;
  color: #5a3d12;
  font-weight: 800;
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  border-bottom: 2px solid rgba(120,84,28,.45);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
}
.ks-parchment-content p {
  color: #3a2410;
  max-width: none;
  margin: 0 0 .8rem;
}
.ks-parchment-content em {
  color: #6b2c08;
  font-style: italic;
}

/* Purple-banner highlights sidebar (full image as bg) */
.ks-highlights {
  background-image: url("/static/img/ks/comp_elements/sidebar_panel_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 48px 28px 70px;
  min-height: 680px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.55));
}
.ks-highlights-inner { color: #f0c95a; text-align: center; }
.ks-highlights h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f0c95a;
  margin: 0 0 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.ks-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.ks-highlights li {
  display: flex;
  gap: .7rem;
  align-items: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: .98rem;
  color: #e8d9b4;
  line-height: 1.3;
  text-align: left;
}
.ks-hl-icon {
  flex: 0 0 28px;
  font-size: 1.6rem;
  color: #f0c95a;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(240,201,90,.4));
}

/* Mobile collapse */
@media (max-width: 960px) {
  .ks-about-grid { grid-template-columns: 1fr; }
  .ks-parchment {
    padding: 70px 50px 180px 50px;
    min-height: 0;
  }
  .ks-highlights {
    padding: 28px 22px 38px;
    min-height: 0;
  }
}
@media (max-width: 540px) {
  .ks-parchment {
    padding: 50px 30px 140px 30px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   JOIN THE COVEN — bottom band with troll sign + center banner + crystals.
   Three columns inside the deep-wood band, each a baked-in scene element.
   ───────────────────────────────────────────────────────────────────────── */
.ks-coven {
  margin: 1.4rem auto 0;
  max-width: 1280px;
  padding: 0 1rem;
}
.ks-coven-inner {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 0;
  align-items: center;
  background: linear-gradient(180deg, #2a1654 0%, #1a0e35 100%);
  border: 1px solid #c9a04a;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.6),
              inset 0 0 0 1px rgba(240,201,90,.2);
  overflow: hidden;
  min-height: 220px;
}
.ks-coven-troll-sign {
  align-self: stretch;
  background: url("/static/img/ks/comp_elements/bottom_troll_sign.png") left center / cover no-repeat;
  min-height: 220px;
}
.ks-coven-crystals {
  align-self: stretch;
  background: url("/static/img/ks/comp_elements/bottom_crystals.png") right center / cover no-repeat;
  min-height: 220px;
}
.ks-coven-content {
  text-align: center;
  padding: 1.6rem 1.4rem;
  color: #f3ead4;
}
.ks-coven-content h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  letter-spacing: .12em;
  color: #f0c95a;
  text-transform: uppercase;
  margin: 0 0 .4rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
  border: 0 !important;
  padding-bottom: 0 !important;
}
.ks-coven-content p {
  color: #e8d9b4;
  font-size: 1.02rem;
  margin: 0 0 1rem;
}
.ks-coven-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.ks-coven-links a {
  color: #f0c95a;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: .92rem;
  letter-spacing: .04em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transition: color .15s ease, transform .15s ease;
}
.ks-coven-links a:hover {
  color: #ffd683;
  transform: translateY(-2px);
}
.ks-coven-icon {
  display: inline-block;
  font-size: 1.6rem;
  color: #f0c95a;
  filter: drop-shadow(0 0 8px rgba(240,201,90,.45));
}
@media (max-width: 880px) {
  .ks-coven-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ks-coven-troll-sign,
  .ks-coven-crystals {
    min-height: 140px;
    background-size: contain;
    background-position: center;
  }
  .ks-coven-links { gap: 1.2rem; }
}