/* =============================================================================
   IX: universe site theme
   Served on ix.exodusnds.com. Load AFTER assets/exodus/universe-site.css.

   Ix is a dark book: near-black pages, bone text, gold for everything that
   matters. Part 1 sets the tokens every shared component reads. Part 2 themes
   those components and the chapter pages, including the fixes a dark surface
   needs (stat blocks, dice, tables). Part 3 is the landing page, classes ix-.
   The printed book's palette is in shared/css/ix.css.
   ============================================================================= */

/* ── Part 1: tokens ───────────────────────────────────────────────────────── */
:root {
  --ix-void:        #0a0a0e;
  --ix-page:        #141418;
  --ix-card:        #1e1e22;
  --ix-raised:      #252528;
  --ix-border:      #2e2c28;
  --ix-rule:        #3a3020;
  --ix-gold:        #c49030;
  --ix-gold-bright: #d8ac4a;
  --ix-bone:        #e0d4b0;
  --ix-bone-dim:    #cec8b2;
  --ix-ash:         #9a9080;
  --ix-cold:        #6888a0;

  --us-bg:            var(--ix-void);
  --us-surface:       var(--ix-page);
  --us-surface-alt:   var(--ix-card);
  --us-text:          var(--ix-bone-dim);
  --us-text-muted:    var(--ix-ash);
  --us-on-dark:       var(--ix-bone);
  --us-on-dark-muted: rgba(224, 212, 176, 0.62);
  --us-accent:        var(--ix-gold-bright);
  --us-accent-2:      var(--ix-gold);
  --us-border:        var(--ix-rule);
  --us-font-display:  'Cinzel', Georgia, serif;
  --us-font-label:    'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --us-font-body:     'Crimson Pro', Georgia, serif;
  --us-radius:        2px;

  /* Traditions and dice read against black, not paper. */
  --us-arcane: #9a78ff;
  --us-divine: #d8ac4a;
  --us-primal: #4cc07a;
}

/* ── Part 2: shared components and chapter pages, on a dark surface ───────── */
.us-nav { border-bottom-width: 1px; }
.us-nav-brand { letter-spacing: 0.3em; font-size: 1.5rem; }
.us-menu-panel { background: var(--ix-card); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); border-width: 1px; }
.us-menu-link { color: var(--ix-bone-dim); }
.us-menu-link:hover,
.us-menu-link:focus-visible { background: var(--ix-raised); color: var(--ix-gold-bright); }
.us-menu-link.is-active { color: var(--ix-gold-bright); box-shadow: inset 3px 0 0 var(--ix-gold); }
.us-notice { color: var(--ix-void); }

.us-page-title,
.us-band-title { font-weight: 500; letter-spacing: 0.06em; color: var(--ix-bone); }
.us-page-kicker { letter-spacing: 0.34em; }
.us-band-title::after { content: ''; display: block; width: 4rem; height: 1px; margin-top: 0.8rem; background: var(--ix-gold); }

.us-explore-card,
.us-kit-item,
.us-pager-link,
.us-toc-box { border-width: 1px; background: var(--ix-card); color: var(--ix-bone-dim); }
.us-explore-card:hover, .us-explore-card:focus-visible,
.us-kit-item:hover, .us-kit-item:focus-visible,
.us-pager-link:hover, .us-pager-link:focus-visible { border-color: var(--ix-gold); box-shadow: 0 0 0 1px var(--ix-gold), 0 12px 30px rgba(0, 0, 0, 0.5); }
.us-explore-card-title,
.us-pager-label { color: var(--ix-bone); }
.us-toc-box a { color: var(--ix-bone-dim); }

.us-prose { color: var(--ix-bone-dim); }
.us-prose h2,
.us-prose h3,
.us-prose h4 { color: var(--ix-bone); font-weight: 500; letter-spacing: 0.04em; }
.us-prose h2 { padding-bottom: 0.35rem; border-bottom: 1px solid var(--ix-rule); }
.us-prose h3 { border-bottom: 1px solid var(--ix-rule); }
.us-prose h5 { color: var(--ix-gold-bright); letter-spacing: 0.05em; }
.us-prose h6 { color: var(--ix-ash); }
.us-prose strong { color: var(--ix-bone); }
.us-prose a { color: var(--ix-gold-bright); }
.us-prose blockquote { border-left-color: var(--ix-gold); color: var(--ix-ash); }

.us-prose table { border-color: var(--ix-rule); }
.us-prose th { background: var(--ix-raised); color: var(--ix-gold-bright); font-family: var(--us-font-label); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.us-prose td { border-color: var(--ix-border); }
.us-prose tr:nth-child(even) td { background: var(--ix-card); }

.us-prose .note { background: var(--ix-card); border-left-color: var(--ix-gold); }
.us-prose .descriptive { background: var(--ix-void); border-left-color: var(--ix-gold); color: var(--ix-bone); font-style: italic; }
.us-prose .image-caption { color: var(--ix-ash); }
.us-prose img.framed { border: 1px solid var(--ix-rule); }

/* Stat cells: raised slate with bone numerals, not bone boxes with white text. */
.us-prose .archetype .stat,
.us-prose .adversary .stat,
.us-prose .minion .stat,
.us-prose .vehicle .stat,
.us-prose .spell .stat,
.us-prose .spell-combat > span { background: var(--ix-raised); color: var(--ix-bone); border: 1px solid var(--ix-rule); }
.us-prose .stat::before { color: var(--ix-gold-bright); }

/* Dice in their bright ENDS colours, legible on black. */
.us-prose .dice.boon    { color: #4c9bff; }
.us-prose .dice.bane    { color: #ff8a3c; }
.us-prose .dice.ability { color: #3fcf78; }
.us-prose .dice.trial   { color: #ff5a6a; }
.us-prose .dice.mastery { color: #b184ff; }
.us-prose .dice.crisis  { color: #f2c230; }

.us-section-page { color: var(--ix-bone-dim); }
.us-section-page h2,
.us-section-page h3 { color: var(--ix-bone); font-weight: 500; }
.us-section-page .universe-fact,
.us-section-page .universe-conceit,
.us-section-page .universe-info-panel,
.us-section-page .universe-touchstone,
.us-section-page .universe-pregen-card,
.us-section-page .universe-rule,
.us-section-page .universe-glossary-entry,
.us-section-page .universe-gallery-item,
.us-section-page .universe-glossary-index { background: var(--ix-card); border-width: 1px; }
.us-section-page .universe-glossary-index a { color: var(--ix-bone-dim); }

/* ── Part 3: landing page ─────────────────────────────────────────────────── */
.ix-page { background: var(--ix-void); color: var(--ix-bone-dim); font-family: var(--us-font-body); overflow-x: hidden; }
.ix-inner { max-width: 1000px; margin: 0 auto; padding: 0 28px; position: relative; }
.ix-eyebrow { display: block; margin-bottom: 1rem; font-family: var(--us-font-label); font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ix-gold); }
.ix-head { margin: 0 0 1.4rem; font-family: var(--us-font-display); font-size: clamp(1.7rem, 4.6vw, 2.9rem); font-weight: 500; line-height: 1.18; letter-spacing: 0.03em; color: var(--ix-bone); }
.ix-head em { font-style: normal; color: var(--ix-gold-bright); }
.ix-body { margin: 0 0 1.1rem; font-size: 1.16rem; line-height: 1.7; }
.ix-body strong { color: var(--ix-bone); font-weight: 600; }

.ix-hero {
  position: relative;
  padding: clamp(5rem, 14vw, 9rem) 0 clamp(4rem, 10vw, 6.5rem);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(196, 144, 48, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(104, 136, 160, 0.10), transparent 70%),
    var(--ix-void);
  border-bottom: 1px solid var(--ix-rule);
}
/* The shattered god: a ring of gold fragments behind the title. */
.ix-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(74vw, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, rgba(216, 172, 74, 0.34) 0deg 7deg, transparent 7deg 19deg, rgba(216, 172, 74, 0.16) 19deg 22deg, transparent 22deg 41deg);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 61%, #000 62%, #000 66%, transparent 67%);
  pointer-events: none;
}
.ix-hero-stamp { display: inline-block; margin-bottom: 2rem; padding: 0.35rem 1rem; font-family: var(--us-font-label); font-size: 0.68rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ix-gold); border: 1px solid var(--ix-rule); }
.ix-hero-title { margin: 0; font-family: var(--us-font-display); font-size: clamp(5rem, 22vw, 12rem); font-weight: 600; line-height: 0.9; letter-spacing: 0.16em; padding-left: 0.16em; color: var(--ix-gold-bright); text-shadow: 0 0 60px rgba(216, 172, 74, 0.35); }
.ix-hero-sub { margin: 1.2rem 0 2.2rem; font-family: var(--us-font-display); font-size: clamp(0.95rem, 2.6vw, 1.35rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ix-bone); }
.ix-hero-tagline { max-width: 40rem; margin: 0 auto 2.4rem; font-size: clamp(1.2rem, 3vw, 1.55rem); font-style: italic; line-height: 1.55; color: var(--ix-bone); }
.ix-hero-tagline strong { font-style: normal; color: var(--ix-gold-bright); font-weight: 600; }

.ix-btn { display: inline-block; padding: 0.85rem 2.2rem; font-family: var(--us-font-display); font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--ix-void); background: var(--ix-gold-bright); border: 1px solid var(--ix-gold-bright); transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.ix-btn:hover,
.ix-btn:focus-visible { background: transparent; color: var(--ix-gold-bright); box-shadow: 0 0 30px rgba(216, 172, 74, 0.25); }
.ix-btn-alt { background: transparent; color: var(--ix-bone); border-color: var(--ix-rule); }
.ix-btn-alt:hover,
.ix-btn-alt:focus-visible { border-color: var(--ix-gold); }

.ix-band { padding: clamp(3.5rem, 9vw, 6rem) 0; border-bottom: 1px solid var(--ix-border); }
.ix-band-page { background: var(--ix-page); }
.ix-pitch-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.ix-quote { margin: 0; padding: 1.6rem 1.7rem; font-size: 1.22rem; font-style: italic; line-height: 1.6; color: var(--ix-bone); background: var(--ix-card); border-left: 3px solid var(--ix-gold); }
.ix-quote cite { display: block; margin-top: 1rem; font-family: var(--us-font-label); font-size: 0.72rem; font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ix-ash); }

.ix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.25rem; margin-top: 2.2rem; }
.ix-card { padding: 1.7rem 1.6rem 1.8rem; background: var(--ix-card); border: 1px solid var(--ix-border); border-top: 2px solid var(--ix-gold); }
.ix-card-num { display: block; margin-bottom: 0.9rem; font-family: var(--us-font-display); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--ix-gold); }
.ix-card-head { margin: 0 0 0.7rem; font-family: var(--us-font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ix-bone); }
.ix-card-body { margin: 0; font-size: 1.04rem; line-height: 1.62; }
.ix-card-cold { border-top-color: var(--ix-cold); }
.ix-card-cold .ix-card-num { color: var(--ix-cold); }

.ix-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ix-chips li { padding: 0.3rem 0.9rem; font-family: var(--us-font-label); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--ix-bone); border: 1px solid var(--ix-rule); background: var(--ix-page); }

.ix-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; margin-top: 2.2rem; }
.ix-book { display: flex; flex-direction: column; padding: 1.8rem 1.6rem; text-decoration: none; color: inherit; background: var(--ix-page); border: 1px solid var(--ix-border); transition: border-color 0.15s, transform 0.15s; }
.ix-book:hover,
.ix-book:focus-visible { border-color: var(--ix-gold); transform: translateY(-3px); }
.ix-book-kind { font-family: var(--us-font-label); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ix-gold); }
.ix-book-title { margin: 0.6rem 0 0.8rem; font-family: var(--us-font-display); font-size: 1.5rem; font-weight: 500; color: var(--ix-bone); }
.ix-book-body { margin: 0 0 1.4rem; font-size: 1.02rem; line-height: 1.6; }
.ix-book-more { margin-top: auto; font-family: var(--us-font-label); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ix-gold-bright); }

.ix-cta { padding: clamp(4rem, 10vw, 6.5rem) 0; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(196, 144, 48, 0.14), transparent 70%), var(--ix-void); }
.ix-cta .ix-head { margin-bottom: 1rem; }
.ix-cta-sub { max-width: 38rem; margin: 0 auto 2.2rem; font-size: 1.18rem; line-height: 1.65; }
.ix-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1rem; }
.ix-cta-note { margin: 2rem 0 0; font-family: var(--us-font-label); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ix-ash); }

@media (max-width: 760px) {
  .ix-pitch-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ix-inner { padding: 0 18px; }
}