/* ==========================================================================
   The Eternal Kingdom Revealed — Design System
   Built from design-tokens.css + 03-generatepress-build-guide.md
   ========================================================================== */

:root {
  --ekr-ink: #111827;
  --ekr-midnight: #0b1628;
  --ekr-navy: #142743;
  --ekr-blue: #315b78;
  --ekr-gold: #c49a4a;
  --ekr-gold-light: #e4c77f;
  --ekr-parchment: #f3ecdd;
  --ekr-ivory: #fbf8f1;
  --ekr-stone: #d7cbb7;
  --ekr-muted: #647184;
  --ekr-white: #ffffff;
  --ekr-success: #58755a;
  --ekr-font-display: "Cormorant Garamond", Georgia, serif;
  --ekr-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ekr-content: 760px;
  --ekr-wide: 1180px;
  --ekr-radius-sm: 6px;
  --ekr-radius-lg: 18px;
  --ekr-shadow: 0 18px 60px rgba(5, 16, 32, .14);
  --ekr-s1: clamp(.5rem, .45rem + .25vw, .75rem);
  --ekr-s2: clamp(1rem, .85rem + .5vw, 1.5rem);
  --ekr-s3: clamp(1.5rem, 1.15rem + 1vw, 2.5rem);
  --ekr-s4: clamp(2.5rem, 1.75rem + 2vw, 4.5rem);
  --ekr-s5: clamp(4rem, 2.5rem + 4vw, 8rem);
  --ekr-header-h: 72px;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ekr-font-body);
  font-size: 18px;
  line-height: 1.72;
  color: var(--ekr-ink);
  background: var(--ekr-ivory);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--ekr-font-display); font-weight: 700; margin: 0 0 .5em; color: var(--ekr-navy); }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ekr-gold); color: var(--ekr-midnight); padding: .75em 1.25em; z-index: 999; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Typography helpers ---- */
.ekr-kicker { display: block; color: var(--ekr-gold); font: 700 .78rem/1.2 var(--ekr-font-body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--ekr-s1); }
.ekr-kicker--onlight { color: #9c7a34; }
.ekr-display { font-family: var(--ekr-font-display); font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: .96; letter-spacing: -.025em; margin: 0 0 var(--ekr-s2); }
.ekr-h2 { font-size: clamp(1.85rem, 1.5rem + 2vw, 3.25rem); line-height: 1.05; }
.ekr-h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.ekr-lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.65; color: var(--ekr-blue); }
.ekr-eyebrow-num { display: inline-block; font-family: var(--ekr-font-display); font-weight: 700; font-size: 1.5rem; color: var(--ekr-gold); margin-bottom: .25em; }

/* ---- Layout containers ---- */
.ekr-wide-container { max-width: var(--ekr-wide); margin: 0 auto; padding: 0 32px; }
.ekr-content-container { max-width: var(--ekr-content); margin: 0 auto; padding: 0 32px; }
.ekr-section { padding: var(--ekr-s4) 0; }
.ekr-section--tight { padding: var(--ekr-s3) 0; }
@media (max-width: 1024px) { .ekr-wide-container, .ekr-content-container { padding: 0 24px; } }
@media (max-width: 600px) { .ekr-wide-container, .ekr-content-container { padding: 0 20px; } }

.bg-ivory { background: var(--ekr-ivory); }
.bg-white { background: var(--ekr-white); }
.bg-parchment { background: var(--ekr-parchment); }
.bg-midnight { background: var(--ekr-midnight); color: var(--ekr-white); }
.bg-midnight h2, .bg-midnight h3 { color: var(--ekr-white); }
.bg-navy { background: var(--ekr-navy); color: var(--ekr-white); }

/* ---- Buttons ---- */
.ekr-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border-radius: 999px; min-height: 48px; padding: .8rem 1.5rem; font-weight: 700; font-size: .98rem; border: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.ekr-button--gold { background: var(--ekr-gold); color: var(--ekr-midnight); }
.ekr-button--gold:hover { background: var(--ekr-gold-light); transform: translateY(-1px); }
.ekr-button--ghost { border: 1px solid rgba(255,255,255,.5); color: var(--ekr-white); background: transparent; }
.ekr-button--ghost:hover { background: rgba(255,255,255,.1); }
.ekr-button--outline { border: 1px solid var(--ekr-navy); color: var(--ekr-navy); background: transparent; }
.ekr-button--outline:hover { background: var(--ekr-navy); color: var(--ekr-white); }
.ekr-button--link { padding: 0; min-height: auto; border-radius: 0; color: var(--ekr-blue); font-weight: 700; border-bottom: 2px solid var(--ekr-gold); }
.ekr-button-row { display: flex; flex-wrap: wrap; gap: var(--ekr-s2); align-items: center; }

/* ---- Utility / announcement bar ---- */
.ekr-utility-bar { background: var(--ekr-midnight); color: var(--ekr-stone); font-size: .85rem; }
.ekr-utility-bar .ekr-wide-container { display: flex; align-items: center; justify-content: center; gap: var(--ekr-s2); flex-wrap: wrap; padding-top: .55em; padding-bottom: .55em; text-align: center; }
.ekr-utility-bar a { color: var(--ekr-gold-light); font-weight: 700; white-space: nowrap; }
.ekr-utility-bar a:hover { text-decoration: underline; }

/* ---- Header / nav ---- */
.ekr-site-header { position: sticky; top: 0; z-index: 100; background: var(--ekr-ivory); border-bottom: 1px solid rgba(20,39,67,.08); }
.ekr-site-header .ekr-wide-container { display: flex; align-items: center; justify-content: space-between; height: var(--ekr-header-h); gap: var(--ekr-s3); }
.ekr-logo { font-family: var(--ekr-font-display); font-weight: 700; font-size: 1.25rem; color: var(--ekr-navy); line-height: 1.1; }
.ekr-logo small { display: block; font-family: var(--ekr-font-body); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ekr-muted); font-weight: 700; }

.ekr-nav { display: flex; align-items: center; gap: var(--ekr-s3); }
.ekr-nav-list { display: flex; align-items: center; gap: var(--ekr-s2); list-style: none; margin: 0; padding: 0; }
.ekr-nav-list > li { position: relative; }
.ekr-nav-list > li > a, .ekr-nav-list > li > button { font-weight: 700; font-size: .95rem; color: var(--ekr-navy); background: none; border: none; cursor: pointer; padding: .5em 0; font-family: inherit; display: inline-flex; align-items: center; gap: .3em; }
.ekr-nav-list > li > a:hover, .ekr-nav-list > li > button:hover { color: var(--ekr-blue); }
.ekr-nav-cta { margin-left: var(--ekr-s1); }

.ekr-mega { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(900px, 90vw); background: var(--ekr-white); border-radius: var(--ekr-radius-lg); box-shadow: var(--ekr-shadow); padding: var(--ekr-s3); grid-template-columns: repeat(3, 1fr) 220px; gap: var(--ekr-s3); border: 1px solid rgba(20,39,67,.08); }
.ekr-nav-list > li:hover .ekr-mega,
.ekr-nav-list > li:focus-within .ekr-mega { display: grid; }
.ekr-mega h4 { font-family: var(--ekr-font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--ekr-gold); margin-bottom: .75em; }
.ekr-mega ul { list-style: none; margin: 0; padding: 0; }
.ekr-mega li { margin-bottom: .55em; }
.ekr-mega a { font-size: .92rem; color: var(--ekr-ink); }
.ekr-mega a:hover { color: var(--ekr-blue); text-decoration: underline; }
.ekr-mega-feature { background: var(--ekr-parchment); border-radius: var(--ekr-radius-sm); padding: var(--ekr-s2); }
.ekr-mega-feature-img img { width: 100%; display: block; border-radius: 8px; }
.ekr-mega-feature .ekr-kicker { color: #9c7a34; }
.ekr-mega-feature p { font-size: .88rem; margin-bottom: .75em; }

.ekr-menu-toggle { display: none; background: none; border: 1px solid var(--ekr-navy); border-radius: 8px; padding: .5em .7em; font-family: inherit; font-weight: 700; }

@media (max-width: 1024px) {
  .ekr-menu-toggle { display: inline-flex; }
  .ekr-nav { position: fixed; inset: var(--ekr-header-h) 0 0 0; background: var(--ekr-ivory); flex-direction: column; align-items: stretch; overflow-y: auto; padding: var(--ekr-s3) 24px; transform: translateX(100%); transition: transform .2s ease; }
  .ekr-nav.is-open { transform: translateX(0); }
  .ekr-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .ekr-nav-list > li { border-bottom: 1px solid rgba(20,39,67,.08); }
  .ekr-nav-list > li > a, .ekr-nav-list > li > button { width: 100%; padding: .9em 0; justify-content: space-between; }
  .ekr-mega { position: static; display: none; transform: none; width: 100%; box-shadow: none; border: none; padding: 0 0 1em; grid-template-columns: 1fr; }
  .ekr-nav-list > li:hover .ekr-mega, .ekr-nav-list > li:focus-within .ekr-mega { display: none; }
  .ekr-nav-list > li.is-open .ekr-mega { display: grid; }
  .ekr-nav-cta { margin: var(--ekr-s2) 0 0; }
}

/* ---- Page hero (cinematic) ---- */
.ekr-hero { position: relative; min-height: 70svh; display: flex; align-items: center; background: linear-gradient(180deg, rgba(11,22,40,.55), rgba(11,22,40,.85)), var(--ekr-midnight); color: var(--ekr-white); overflow: hidden; }
.ekr-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(196,154,74,.18), transparent 70%); pointer-events: none; }
.ekr-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--ekr-s4); align-items: center; position: relative; z-index: 1; padding: var(--ekr-s4) 0; }
.ekr-hero-art { border-radius: var(--ekr-radius-lg); overflow: hidden; box-shadow: var(--ekr-shadow); aspect-ratio: 4/5; background: linear-gradient(160deg, var(--ekr-navy), var(--ekr-blue)); display: flex; align-items: center; justify-content: center; }
.ekr-hero .ekr-display { color: var(--ekr-white); }
.ekr-hero .ekr-lead { color: var(--ekr-stone); }
.ekr-hero--compact { min-height: 42svh; }
.ekr-hero--compact .ekr-hero-grid { grid-template-columns: 1fr; padding: var(--ekr-s3) 0; }
@media (max-width: 900px) {
  .ekr-hero-grid { grid-template-columns: 1fr; }
  .ekr-hero-art { order: -1; aspect-ratio: 4/5; max-width: 340px; margin: 0 auto var(--ekr-s2); }
}

/* ---- Jump links ---- */
.ekr-jumplinks { display: flex; flex-wrap: wrap; gap: .6em; padding: var(--ekr-s2) 0; border-bottom: 1px solid rgba(20,39,67,.08); margin-bottom: var(--ekr-s2); }
.ekr-jumplinks a { font-size: .85rem; font-weight: 700; padding: .4em .9em; border-radius: 999px; background: var(--ekr-parchment); color: var(--ekr-navy); }
.ekr-jumplinks a:hover { background: var(--ekr-gold-light); }

/* ---- Teaching article ---- */
.ekr-article h2 { margin-top: 1.6em; }
.ekr-article h2:first-child { margin-top: 0; }

/* ---- Scripture band ---- */
.ekr-scripture-band { padding: var(--ekr-s4) 0; background: var(--ekr-midnight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='12' cy='18' r='1' fill='%23c49a4a' opacity='.25'/%3E%3Ccircle cx='60' cy='60' r='1.4' fill='%23e4c77f' opacity='.2'/%3E%3Ccircle cx='95' cy='30' r='1' fill='%23d7cbb7' opacity='.2'/%3E%3Ccircle cx='40' cy='95' r='1.2' fill='%23c49a4a' opacity='.18'/%3E%3C/svg%3E"); color: var(--ekr-white); text-align: center; }
.ekr-scripture { border-left: 3px solid var(--ekr-gold); font-family: var(--ekr-font-display); font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.35; max-width: 820px; margin: 0 auto; padding-left: var(--ekr-s2); text-align: left; }
.ekr-scripture-ref { display: block; margin-top: var(--ekr-s2); font-family: var(--ekr-font-body); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; color: var(--ekr-gold-light); }

/* ---- Cards ---- */
.ekr-card { background: var(--ekr-white); border: 1px solid rgba(20,39,67,.1); border-radius: var(--ekr-radius-lg); box-shadow: var(--ekr-shadow); padding: var(--ekr-s3); }
.ekr-card h3 { margin-top: 0; }
.ekr-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ekr-s3); }
@media (max-width: 1024px) { .ekr-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ekr-card-grid { grid-template-columns: 1fr; } }
.ekr-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .ekr-card-grid--2 { grid-template-columns: 1fr; } }

/* ---- Timeline ---- */
.ekr-timeline-card .ekr-eyebrow-num { display: block; }
.ekr-timeline-card a { font-weight: 700; color: var(--ekr-blue); border-bottom: 1px solid var(--ekr-gold); }

/* ---- Teaching split ---- */
.ekr-split { display: grid; grid-template-columns: 55% 45%; gap: var(--ekr-s4); align-items: center; }
.ekr-split.reverse { direction: rtl; }
.ekr-split.reverse > * { direction: ltr; }
.ekr-split-media { border-radius: var(--ekr-radius-lg); overflow: hidden; aspect-ratio: 3/2; background: linear-gradient(150deg, var(--ekr-blue), var(--ekr-navy)); box-shadow: var(--ekr-shadow); }
@media (max-width: 768px) { .ekr-split { grid-template-columns: 1fr; } .ekr-split.reverse { direction: ltr; } }

/* ---- Definition / already-not-yet card ---- */
.ekr-definition-card { background: var(--ekr-parchment); border-radius: var(--ekr-radius-lg); padding: var(--ekr-s3); border-left: 4px solid var(--ekr-gold); }
.ekr-anly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ekr-s2); }
@media (max-width: 640px) { .ekr-anly-grid { grid-template-columns: 1fr; } }
.ekr-anly-grid .ekr-card h4 { font-family: var(--ekr-font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--ekr-gold); margin-bottom: .5em; }

/* ---- Book conversion panel ---- */
.ekr-book-panel { display: grid; grid-template-columns: 4fr 8fr; gap: var(--ekr-s4); align-items: center; }
.ekr-book-cover { width: 280px; aspect-ratio: 2/3; margin: 0 auto; background: linear-gradient(160deg, var(--ekr-navy), var(--ekr-midnight)); border-radius: 4px; box-shadow: var(--ekr-shadow); display: flex; align-items: center; justify-content: center; color: var(--ekr-gold-light); font-family: var(--ekr-font-display); text-align: center; padding: 1.5em; }
@media (max-width: 900px) { .ekr-book-panel { grid-template-columns: 1fr; text-align: center; } .ekr-book-cover { width: 190px; } .ekr-button-row { justify-content: center; } }

/* ---- Next-step pair ---- */
.ekr-next-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ekr-s3); }
@media (max-width: 640px) { .ekr-next-pair { grid-template-columns: 1fr; } }

/* ---- Email band ---- */
.ekr-email-band { text-align: center; }
.ekr-email-form { display: flex; gap: .75em; max-width: 480px; margin: var(--ekr-s2) auto 0; flex-wrap: wrap; justify-content: center; }
.ekr-email-form input[type="email"] { flex: 1 1 240px; min-height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: var(--ekr-white); padding: 0 1.2em; font-family: inherit; }
.ekr-email-form input::placeholder { color: rgba(255,255,255,.6); }
.ekr-privacy-line { font-size: .8rem; color: var(--ekr-stone); margin-top: var(--ekr-s1); }

/* ---- Footer ---- */
.ekr-footer { background: var(--ekr-navy); color: var(--ekr-stone); padding: var(--ekr-s4) 0 var(--ekr-s2); }
.ekr-footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--ekr-s3); padding-bottom: var(--ekr-s3); border-bottom: 1px solid rgba(255,255,255,.1); }
.ekr-footer-top h4 { font-family: var(--ekr-font-body); color: var(--ekr-gold-light); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: 1em; }
.ekr-footer-top ul { list-style: none; margin: 0; padding: 0; }
.ekr-footer-top li { margin-bottom: .6em; }
.ekr-footer-top a { color: var(--ekr-stone); font-size: .92rem; }
.ekr-footer-top a:hover { color: var(--ekr-white); text-decoration: underline; }
.ekr-footer-brand p { font-size: .92rem; color: var(--ekr-stone); }
.ekr-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--ekr-s1); padding-top: var(--ekr-s2); font-size: .82rem; color: rgba(215,203,183,.75); }
.ekr-footer-bottom nav { display: flex; gap: 1.25em; flex-wrap: wrap; }
.ekr-footer-bottom a { color: rgba(215,203,183,.85); }
.ekr-footer-bottom a:hover { color: var(--ekr-white); }
@media (max-width: 900px) { .ekr-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ekr-footer-top { grid-template-columns: 1fr; } }

/* ---- Resources / study page extras ---- */
.ekr-study-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.ekr-study-steps li { position: relative; padding-left: 3em; margin-bottom: var(--ekr-s2); }
.ekr-study-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--ekr-gold); color: var(--ekr-midnight); font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--ekr-font-display); }
.ekr-glossary dt { font-family: var(--ekr-font-display); font-weight: 700; color: var(--ekr-navy); font-size: 1.15rem; margin-top: 1em; }
.ekr-glossary dd { margin: .2em 0 0; }

/* ---- Editorial note ---- */
.ekr-editorial-note { border-radius: var(--ekr-radius-sm); border: 1px dashed var(--ekr-muted); padding: var(--ekr-s2); font-size: .85rem; color: var(--ekr-muted); font-style: italic; margin-top: var(--ekr-s2); }

/* ---- Contrast helpers ---- */
.text-muted { color: var(--ekr-muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---- GeneratePress wrapper integration overrides ---- */
#page, .site-content, .content-area, .site-main, .inside-article, .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.entry-content > *:first-child { margin-top: 0; }
.gb-container, .entry-content .ekr-section, .entry-content section { max-width: none; }
body.generatepress { background: var(--ekr-ivory); }

/* ---- Specificity safety net: GeneratePress's own stylesheet loads after ours
   for some handles, so pin the few rules that must never be overridden. ---- */
body a { text-decoration: none; color: inherit; }
body .ekr-button, body .ekr-mega a:hover, body .ekr-footer-top a:hover { text-decoration: none; }
body h1, body h2, body h3, body h4 { font-family: var(--ekr-font-display); color: var(--ekr-navy); }
body .ekr-hero h1, body .ekr-hero .ekr-display { color: var(--ekr-white); }
body .ekr-nav-list, body .ekr-mega ul, body .ekr-footer-top ul, body .ekr-nav-list ul { list-style: none; padding-left: 0; margin: 0; }