/* =============================================================================
   INK & MAYHEM: universe site theme
   Served on inkandmayhem.exodusnds.com. Load AFTER assets/exodus/universe-site.css.

   Palette and fonts match shared/css/ink-and-mayhem.css in the book repo, so
   the site and the printed book stay one brand:
     Yellow #FFCA2C  primary accent        Bangers      display
     Red    #D92B2B  secondary / danger    Fredoka One  labels and UI
     Black  #1A1210  warm near-black       Crimson Pro  long-form body
     Paper  #FFF8E6  warm cream            Caveat       quotes and flavor

   Part 1 sets the tokens. Part 2 themes the shared us-* components. Part 3 is
   the landing page itself, carried over from the Ink & Mayhem promo page with
   every class prefixed im-.
   ============================================================================= */

/* ── Part 1: tokens ───────────────────────────────────────────────────────── */
:root {
  --im-yellow:       #FFCA2C;
  --im-yellow-lt:    #FFFADC;
  --im-red:          #D92B2B;
  --im-black:        #1A1210;
  --im-soft:         #3E2E28;
  --im-brown:        #7A5E4A;
  --im-paper:        #FFF8E6;
  --im-paper-alt:    #FFF0CC;
  --im-font-display: 'Bangers', 'Impact', fantasy;
  --im-font-label:   'Fredoka One', 'Arial Rounded MT Bold', sans-serif;
  --im-font-hand:    'Caveat', cursive;

  --us-bg:            var(--im-black);
  --us-surface:       var(--im-paper);
  --us-surface-alt:   var(--im-paper-alt);
  --us-text:          var(--im-black);
  --us-text-muted:    var(--im-soft);
  --us-on-dark:       #ffffff;
  --us-on-dark-muted: rgba(255, 202, 44, 0.62);
  --us-accent:        var(--im-yellow);
  --us-accent-2:      var(--im-red);
  --us-border:        var(--im-black);
  --us-font-display:  var(--im-font-display);
  --us-font-label:    var(--im-font-label);
  --us-font-body:     'Crimson Pro', Georgia, serif;
  --us-radius:        0;
}

/* ── Part 2: shared components, Ink & Mayhem style ────────────────────────── */
.us-nav-brand { text-shadow: 2px 2px 0 var(--im-red); }
.us-nav-brand span { color: var(--im-red); text-shadow: 2px 2px 0 var(--im-black); }

.us-nav-link.us-nav-cta {
  font-family: var(--im-font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.9rem 0.15rem;
  border: 2px solid var(--im-black);
  box-shadow: 3px 3px 0 var(--im-red);
}

/* Hard offset shadows instead of soft ones: ink, not drop shadow. */
.us-explore-card,
.us-kit-item { border-width: 3px; box-shadow: 5px 5px 0 var(--im-black); }
.us-explore-card:hover,
.us-explore-card:focus-visible,
.us-kit-item:hover,
.us-kit-item:focus-visible { box-shadow: 7px 7px 0 var(--im-red); }

.us-explore-card-title { letter-spacing: 0.06em; }
.us-explore-card:nth-child(3n + 1) .us-explore-card-title { color: var(--im-red); }

.us-band-dark .us-kit-item { box-shadow: 5px 5px 0 var(--im-yellow); }
.us-band-dark .us-kit-item:hover,
.us-band-dark .us-kit-item:focus-visible { box-shadow: 7px 7px 0 var(--im-red); }

.us-footer-brand span { color: var(--im-red); }

/* Menu panels and pager: ink outlines and hard shadows. */
/* Desktop only: on a phone the panels are a flat list inside the open menu. */
@media (min-width: 901px) {
  .us-menu-panel { border-width: 3px; box-shadow: 6px 6px 0 var(--im-red); }
}
.us-menu-toggle { font-family: var(--im-font-display); font-size: 1rem; border: 2px solid var(--im-black); box-shadow: 3px 3px 0 var(--im-red); }
.us-pager-link { border-width: 3px; box-shadow: 5px 5px 0 var(--im-black); }
.us-pager-link:hover,
.us-pager-link:focus-visible { box-shadow: 7px 7px 0 var(--im-red); }
.us-pager-label { letter-spacing: 0.05em; }

/* Chapter pages: the book's cream halftone paper, Bangers for the big heads,
   Fredoka for the working heads, as in shared/css/ink-and-mayhem.css. */
.us-page-title { letter-spacing: 0.04em; color: var(--im-yellow); text-shadow: 3px 3px 0 var(--im-black), 5px 5px 0 var(--im-red); }
main:has(> .us-page) {
  background-image: radial-gradient(circle, rgba(26, 18, 16, 0.045) 1px, transparent 1px);
  background-size: 11px 11px;
}
.us-page,
.us-pager { background: none; }
.us-toc-box { border-width: 3px; box-shadow: 4px 4px 0 var(--im-black); }

.us-prose h2 { font-size: 2.2rem; font-weight: 400; letter-spacing: 0.05em; }
.us-prose h3 {
  font-family: var(--im-font-display);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  border-bottom: 3px solid var(--im-red);
}
.us-prose h4,
.us-prose h5,
.us-prose h6 { font-family: var(--im-font-label); font-weight: 400; }
.us-prose h5 { font-size: 1.25rem; color: var(--im-red); }
.us-prose .note { border: 3px solid var(--im-black); box-shadow: 4px 4px 0 var(--im-yellow); background: var(--im-yellow-lt); }
.us-prose .descriptive { border-left: 6px solid var(--im-yellow); font-family: var(--im-font-hand); font-size: 1.3rem; line-height: 1.45; }
.us-prose th { font-family: var(--im-font-label); font-weight: 400; background: var(--im-black); color: var(--im-yellow); }
.us-prose .quote { font-family: var(--im-font-hand); font-size: 1.3rem; font-style: normal; }

/* ── Part 3: landing page ─────────────────────────────────────────────────── */
/* ── HALFTONE UTILITY ── */
.im-dots {
  background-image: radial-gradient(circle, rgba(26,18,16,0.07) 1.2px, transparent 1.2px);
  background-size: 12px 12px;
}
.im-dots-inv {
  background-image: radial-gradient(circle, rgba(255,202,44,0.18) 1.2px, transparent 1.2px);
  background-size: 10px 10px;
}

/* ── SECTION WRAPPERS ── */
.im-section { width: 100%; position: relative; overflow: hidden; }
.im-inner   { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.im-hero {
  background: var(--im-black);
  padding: 64px 24px 56px;
  text-align: center;
  position: relative;
}
.im-hero .im-dots-inv {
  position: absolute; inset: 0; pointer-events: none;
}

/* ink-burst rings */
.im-hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255,202,44,0.08) 0%,
    rgba(255,202,44,0.04) 40%,
    transparent 70%);
  pointer-events: none;
}

.im-hero-eyebrow {
  font-family: var(--im-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,202,44,0.6);
  margin-bottom: 10px;
  position: relative;
}

.im-hero-title {
  font-family: var(--im-font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--im-yellow);
  text-shadow:
    4px 4px 0 var(--im-black),
    6px 6px 0 var(--im-red),
    -2px -2px 0 var(--im-black);
  position: relative;
  margin-bottom: 4px;
}

.im-hero-amp {
  color: var(--im-red);
  text-shadow: 3px 3px 0 var(--im-black);
}

.im-hero-sub {
  font-family: var(--im-font-display);
  font-size: clamp(1rem, 3vw, 1.7rem);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 28px;
  position: relative;
}

.im-hero-tagline {
  font-family: var(--im-font-hand);
  font-size: clamp(1.15rem, 3.5vw, 1.7rem);
  font-weight: 700;
  color: white;
  max-width: 680px;
  margin: 0 auto 36px;
  line-height: 1.4;
  position: relative;
}
.im-hero-tagline em { color: var(--im-yellow); font-style: normal; }

.im-hero-cta {
  display: inline-block;
  font-family: var(--im-font-display);
  font-size: 1.55rem;
  letter-spacing: 0.1em;
  background: var(--im-yellow);
  color: var(--im-black);
  border: 3px solid var(--im-black);
  padding: 10px 40px 6px;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--im-red);
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.im-hero-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--im-red);
}

/* decorative splat SVGs */
.im-splat {
  position: absolute;
  pointer-events: none;
}

/* ══════════════════════════════════════
   PITCH BAND
══════════════════════════════════════ */
.im-pitch {
  background: var(--im-yellow);
  padding: 52px 24px;
  position: relative;
}
.im-pitch-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.im-pitch-headline {
  font-family: var(--im-font-display);
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  letter-spacing: 0.06em;
  color: var(--im-black);
  line-height: 1.1;
  margin-bottom: 18px;
}
.im-pitch-body {
  font-family: var(--im-font-label);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--im-soft);
  max-width: 680px;
  margin: 0 auto 28px;
}
.im-pitch-body strong { color: var(--im-black); }
.im-pitch-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.im-pill {
  background: var(--im-black);
  color: var(--im-yellow);
  font-family: var(--im-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  padding: 6px 20px 3px;
  border-radius: 2px;
}

/* ══════════════════════════════════════
   SECTION HEADER (reusable)
══════════════════════════════════════ */
.im-sec-hdr {
  background: var(--im-black);
  color: var(--im-yellow);
  font-family: var(--im-font-display);
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  letter-spacing: 0.1em;
  padding: 14px 28px 10px;
  display: inline-block;
  margin-bottom: 28px;
  position: relative;
}
.im-sec-hdr::after {
  content: '';
  position: absolute;
  right: -8px; bottom: -8px;
  width: 100%; height: 100%;
  background: var(--im-red);
  z-index: -1;
}

/* ══════════════════════════════════════
   TOON TYPES
══════════════════════════════════════ */
.im-types-section {
  background: var(--im-paper);
  padding: 64px 24px;
}
.im-types-section .im-dots {
  position: absolute; inset: 0; pointer-events: none;
}
.im-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.im-type-card {
  background: white;
  border: 3px solid var(--im-black);
  padding: 0;
  position: relative;
  box-shadow: 5px 5px 0 var(--im-black);
  overflow: hidden;
}
.im-type-card-head {
  background: var(--im-black);
  color: var(--im-yellow);
  font-family: var(--im-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  padding: 8px 16px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.im-type-card-head .im-type-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.im-type-card-sub {
  font-family: var(--im-font-hand);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,202,44,0.7);
  letter-spacing: 0.06em;
  padding: 4px 16px 4px;
  background: var(--im-soft);
  font-style: italic;
}
.im-type-card-body {
  padding: 14px 16px 16px;
  font-family: var(--im-font-label);
  font-size: 0.92rem;
  color: var(--im-soft);
  line-height: 1.6;
}
.im-type-card-body strong { color: var(--im-black); }

/* accent stripe on left */
.im-type-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.im-type-card.im-bruiser::before  { background: var(--im-red); }
.im-type-card.im-brain::before    { background: #4A8FD4; }
.im-type-card.im-zip::before      { background: #2DB87A; }
.im-type-card.im-charmer::before  { background: #C46BC0; }
.im-type-card.im-pro::before      { background: var(--im-brown); }
.im-type-card.im-wild::before     { background: var(--im-yellow); }

/* ══════════════════════════════════════
   MECHANICS SHOWCASE
══════════════════════════════════════ */
.im-mech-section {
  background: var(--im-black);
  padding: 64px 24px;
  position: relative;
}
.im-mech-section .im-dots-inv {
  position: absolute; inset: 0; pointer-events: none;
}
.im-mech-section .im-sec-hdr { color: var(--im-yellow); }

.im-mech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .im-mech-grid { grid-template-columns: 1fr; } }

.im-mech-card {
  background: rgba(255,248,230,0.06);
  border: 2px solid rgba(255,202,44,0.25);
  padding: 22px 22px 20px;
  position: relative;
}
.im-mech-card.im-featured {
  grid-column: 1 / -1;
  background: var(--im-yellow);
  border-color: var(--im-black);
  border-width: 3px;
  box-shadow: 6px 6px 0 var(--im-red);
}
.im-mech-label {
  font-family: var(--im-font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--im-yellow);
  margin-bottom: 6px;
}
.im-mech-card.im-featured .im-mech-label {
  color: var(--im-black);
  font-size: 1.7rem;
}
.im-mech-card.im-featured .im-mech-body { color: var(--im-soft); }
.im-mech-sublabel {
  font-family: var(--im-font-hand);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,202,44,0.55);
  font-style: italic;
  margin-bottom: 10px;
  display: block;
}
.im-mech-card.im-featured .im-mech-sublabel { color: var(--im-brown); }
.im-mech-body {
  font-family: var(--im-font-label);
  font-size: 0.93rem;
  color: rgba(255,248,230,0.78);
  line-height: 1.65;
}
.im-mech-body strong { color: white; }
.im-mech-body em { font-style: normal; color: var(--im-yellow); }
/* On the yellow featured card the defaults above vanish into the background. */
.im-mech-card.im-featured .im-mech-body strong { color: var(--im-black); }
.im-mech-card.im-featured .im-mech-body em { color: var(--im-red); }

/* ══════════════════════════════════════
   BITS SHOWCASE (dark paper)
══════════════════════════════════════ */
.im-bits-section {
  background: var(--im-paper-alt);
  padding: 64px 24px;
  position: relative;
}
.im-bits-section .im-dots { position: absolute; inset: 0; pointer-events: none; }

.im-bits-intro {
  max-width: 680px;
  margin-bottom: 32px;
}
.im-bits-intro p {
  font-family: var(--im-font-label);
  font-size: 1.0rem;
  color: var(--im-soft);
  line-height: 1.7;
}
.im-bits-intro p strong { color: var(--im-black); }

.im-bit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.im-bit-chip {
  background: var(--im-black);
  color: var(--im-yellow);
  font-family: var(--im-font-display);
  font-size: 1.0rem;
  letter-spacing: 0.07em;
  padding: 7px 18px 4px;
  border: 2px solid var(--im-black);
  box-shadow: 3px 3px 0 var(--im-red);
}
.im-bit-chip.im-plain {
  background: white;
  color: var(--im-soft);
  font-family: var(--im-font-label);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  box-shadow: 2px 2px 0 rgba(26,18,16,0.18);
}

.im-speech-bubble {
  background: white;
  border: 3px solid var(--im-black);
  border-radius: 16px;
  padding: 18px 22px;
  position: relative;
  font-family: var(--im-font-hand);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--im-black);
  display: inline-block;
  margin-top: 28px;
  box-shadow: 4px 4px 0 var(--im-black);
}
.im-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -22px; left: 32px;
  border: 11px solid transparent;
  border-top-color: var(--im-black);
}
.im-speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -17px; left: 34px;
  border: 9px solid transparent;
  border-top-color: white;
  z-index: 1;
}

/* ══════════════════════════════════════
   WHY INK & MAYHEM
══════════════════════════════════════ */
.im-why-section {
  background: var(--im-red);
  padding: 56px 24px;
  position: relative;
}
.im-why-section .im-dots-inv { position: absolute; inset: 0; pointer-events: none; }
.im-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.im-why-card {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
  padding: 20px 20px 18px;
}
.im-why-card-head {
  font-family: var(--im-font-display);
  font-size: 1.2rem;
  letter-spacing: 0.07em;
  color: var(--im-yellow);
  margin-bottom: 8px;
}
.im-why-card-body {
  font-family: var(--im-font-label);
  font-size: 0.9rem;
  color: rgba(255,248,230,0.85);
  line-height: 1.6;
}
.im-why-section .im-sec-hdr {
  background: var(--im-yellow);
  color: var(--im-black);
}
.im-why-section .im-sec-hdr::after { background: var(--im-black); }

/* ══════════════════════════════════════
   ACTION WORDS (decorative)
══════════════════════════════════════ */
.im-sfx {
  font-family: var(--im-font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: 0.04em;
  transform: rotate(-8deg);
  display: inline-block;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.im-sfx-yellow { color: var(--im-yellow); text-shadow: 3px 3px 0 var(--im-black); }
.im-sfx-red    { color: var(--im-red);    text-shadow: 3px 3px 0 var(--im-black); }
.im-sfx-black  { color: var(--im-black);  text-shadow: 3px 3px 0 var(--im-red); }
.im-sfx-white  { color: white;         text-shadow: 3px 3px 0 var(--im-black); }

/* ══════════════════════════════════════
   CTA / FOOTER BAND
══════════════════════════════════════ */
.im-cta-section {
  background: var(--im-yellow);
  padding: 64px 24px 56px;
  text-align: center;
  position: relative;
}
.im-cta-section .im-dots { position: absolute; inset: 0; pointer-events: none; }
.im-cta-title {
  font-family: var(--im-font-display);
  font-size: clamp(2rem, 7vw, 4.5rem);
  color: var(--im-black);
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin-bottom: 16px;
  position: relative;
}
.im-cta-sub {
  font-family: var(--im-font-hand);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--im-soft);
  margin-bottom: 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.im-cta-btn {
  display: inline-block;
  font-family: var(--im-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  background: var(--im-black);
  color: var(--im-yellow);
  border: 3px solid var(--im-black);
  padding: 12px 48px 8px;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--im-red);
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.im-cta-btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 var(--im-red);
}
.im-cta-fine {
  font-family: var(--im-font-label);
  font-size: 0.75rem;
  color: rgba(26,18,16,0.45);
  margin-top: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

/* ══════════════════════════════════════
   DIVIDERS
══════════════════════════════════════ */
.im-zigzag {
  width: 100%;
  height: 28px;
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}

/* ── Landing page additions (not in the original promo) ───────────────────── */
.im-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 22px;
  margin-bottom: 22px;
}
.im-cta-btn.im-cta-btn-alt {
  font-size: 1.15rem;
  padding: 12px 26px 8px;
  align-self: center;
  background: var(--im-paper);
  color: var(--im-black);
  box-shadow: 5px 5px 0 var(--im-black);
}
.im-cta-btn.im-cta-btn-alt:hover { box-shadow: 7px 7px 0 var(--im-black); }

/* The promo's section header was a span; as an h2 it needs its own line. */
h2.im-sec-hdr { display: table; line-height: 1.1; }

.im-hero-title { font-weight: 400; }
.im-pitch-headline,
.im-cta-title { font-weight: 400; }

@media (max-width: 640px) {
  .im-cta-btn { font-size: 1.3rem; padding: 10px 28px 6px; }
}

h2.im-sec-hdr { font-weight: 400; }