/* ============================================================
   marble.css — SHARED MARBLE TONE (all pages: home + 15 subpages)
   ------------------------------------------------------------
   Extracted from index.html <style id="marble-preview"> on 2026-05-23.
   This file holds ONLY the page-agnostic marble tone: warm-white
   background + left/right scripture panes + reading-band highlight
   + cream content-card tones + chapter-divider data-pulse + uniform
   spacing + mobile media queries.

   Generalisation: every background / scripture selector that was
   scoped to `body.home-page` is now scoped to `body.marble-tone`
   so it applies to ANY page that opts in (home + subpages).

   Home-only selectors (#hero-canvas, .carousel-*, .stat-*,
   .manifesto-*) are included too; they are no-ops on subpages
   because those elements do not exist there.

   styles.css (the shared live stylesheet) is NOT modified.
   ============================================================ */

:root {
  /* re-map every dark token to the light marble palette */
  --navy:    #e4e2dc;
  --navy2:   #e2e0da;
  --dark:    #e9e7e1;   /* cool stone-ivory base */
  --dark2:   #e9e7e1;
  --dark3:   #e2e0da;   /* cool stone — section rhythm */
  --black:   #dedcd6;
  --gray:    #6b6258;   /* secondary ink (warm grey-brown) */
  --lgray:   #6b6258;
  --border:  rgba(154,123,63,0.22);
  --border-md: rgba(154,123,63,0.30);
  --border-strong: rgba(154,123,63,0.42);
  --white:   #1f1b16;   /* was light text -> now deep ink */
  --offwhite:#e2e0da;
  --cream:   #e9e7e1;
  --gold:    #9a7b3f;   /* antique gold — strong contrast on marble */
  --gold2:   #8a6c34;
  --gold-gradient: linear-gradient(135deg, #b8975a, #9a7b3f, #7d6230);
  --parchment: #e2e0da;
  --stone:   rgba(154,123,63,0.18);
  --ink:     #1f1b16;
  --accent:  #2a6496;
  --text:    #1f1b16;   /* primary ink */
  --text2:   #4a4239;
  --bg-elevated:      #e4e2dc;
  --body-text:        #3a342c;
  --accent-gold:      #9a7b3f;
  --accent-gold-bright: #856a32;
}

/* ---------- OUTER MARBLE WALL (page background only) ---------- */
body.marble-tone {
  background: transparent !important;
  color: var(--text) !important;
}
html { background: #ffffff; }

/* CONSISTENT SECTION SPACING (home-only sections; no-op on subpages) */
.home-page .stats-bar,
.home-page .manifesto-wrap,
.home-page .about-museum,
.home-page .news-tv-wrap,
.home-page .section-bar,
.home-page .portfolio-content,
.home-page .app-timeline-wrap,
.home-page #site-footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   GUTTER SKINS — pure-white fixed panels behind the scripture.
   Separate fixed layer at z-index:-1 so it sits BEHIND the
   scripture glyphs (z-index:0) and behind the content pillar.
   ============================================================ */
.gutter-skin {
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - 980px) / 2));
  z-index: -1;
  pointer-events: none;
  background: #ffffff;            /* pure white gutters behind the scripture */
  box-shadow: none;
}
.gutter-skin.left  { left: 0; }
.gutter-skin.right {
  right: 0;
  transform: scaleX(-1);
  background-position: 30% center, 30% center;
}

/* default body text colour everywhere on light */
body.marble-tone, body.marble-tone p, body.marble-tone li, body.marble-tone span,
body.marble-tone div, body.marble-tone h1, body.marble-tone h2, body.marble-tone h3,
body.marble-tone h4, body.marble-tone h5, body.marble-tone h6, body.marble-tone blockquote {
  color: var(--text);
}

/* ====================================================
   INNER CONTENT PILLAR — flat ivory (#e9e7e1) cream cards
   ==================================================== */
.stats-bar,
.about-museum,
.section-bar,
.portfolio-content,
.news-content,
.news-tv-wrap,
.home-tagline,
#site-footer {
  background: #e9e7e1 !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(154,123,63,0.22),
    0 10px 40px rgba(40,33,22,0.28) !important;
}

/* full-bleed timeline wrap: let marble show, ivory on the inner column */
.app-timeline-wrap {
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
}
.app-timeline-wrap > .container {
  max-width: var(--max) !important;
  background: #e9e7e1 !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(154,123,63,0.22),
    0 10px 40px rgba(40,33,22,0.28) !important;
}

/* ====================================================
   LIGHT MARBLE SECTION FACES (sand / white rhythm)
   ==================================================== */
.stats-bar {
  background: #e9e7e1 !important;
  background-image: none !important;
  border-top: 1px solid rgba(154,123,63,0.30) !important;
  border-bottom: 1px solid rgba(154,123,63,0.18) !important;
}
.stats-bar::before { opacity: 0.7 !important; }
.stat-number { color: #9a7b3f !important; text-shadow: none !important; }
.stat-suffix { color: #b8975a !important; }
.stat-label  { color: #6b6258 !important; }
.stat-item { border-right: 1px solid rgba(154,123,63,0.14) !important; }
.stat-item:hover { background: rgba(154,123,63,0.06) !important; }
.stat-item:hover .stat-number { text-shadow: 0 0 16px rgba(154,123,63,0.25) !important; }
.stat-hud-icon { color: #9a7b3f !important; text-shadow: none !important; }
.stat-hud-bar { background: rgba(154,123,63,0.18) !important; }

/* ---- ABOUT MUSEUM (flat ivory pillar) ---- */
.about-museum {
  background: #e9e7e1 !important;
  background-image: none !important;
  border-top: 1px solid rgba(154,123,63,0.18) !important;
  border-bottom: 1px solid rgba(154,123,63,0.18) !important;
}
.museum-label { color: #9a7b3f !important; }
.museum-label::before { color: #9a7b3f !important; }
.museum-origin  { background: #e9e7e1 !important; background-image: none !important; }
.museum-timeline{ background: #e9e7e1 !important; background-image: none !important; }
.museum-domains { background: #e9e7e1 !important; background-image: none !important; }
.museum-global  { background: #e9e7e1 !important; background-image: none !important; }
.museum-closing { background: #e9e7e1 !important; background-image: none !important; }
.museum-origin::after { color: #9a7b3f !important; opacity: 0.10 !important; }
.museum-quote   { color: #1f1b16 !important; }
.museum-quote strong { color: #8a6c34 !important; }
.museum-quote em     { color: #9a7b3f !important; text-shadow: none !important; }
.museum-quote::before, .museum-quote::after { background: #9a7b3f !important; opacity: 0.6 !important; }
.museum-sub     { color: #4a4239 !important; }
.museum-domains-intro { color: #4a4239 !important; }
.museum-global-text   { color: #3a342c !important; }
.museum-global-text strong { color: #9a7b3f !important; }
.museum-global::after { color: rgba(31,27,22,0.05) !important; }
.museum-closing-text  { color: #8a6c34 !important; text-shadow: none !important; }
.museum-closing::before { color: #9a7b3f !important; }
.timeline-year  { color: #9a7b3f !important; }
.timeline-text  { color: #4a4239 !important; }
.timeline-text strong { color: #9a7b3f !important; }
.timeline-dot   { background: rgba(154,123,63,0.30) !important; border-color: #ebe5d9 !important; box-shadow: 0 0 0 1px rgba(154,123,63,0.30) !important; }
.timeline-dot.active { background: #9a7b3f !important; border-color: #ebe5d9 !important; box-shadow: 0 0 0 2px #9a7b3f, 0 0 12px rgba(154,123,63,0.25) !important; }
.timeline::before { background: linear-gradient(90deg, transparent, rgba(154,123,63,0.25), #9a7b3f, rgba(154,123,63,0.25), transparent) !important; }
.domain-tag { color: #4a4239 !important; border: 1px solid rgba(154,123,63,0.28) !important; }
.domain-tag:hover { color: #9a7b3f !important; border-color: #9a7b3f !important; background: rgba(154,123,63,0.07) !important; text-shadow: none !important; }

/* ---- SECTION BARS (flat ivory label band) ---- */
.section-bar {
  background: #e9e7e1 !important;
  background-image: none !important;
  border-top: 1px solid rgba(154,123,63,0.22) !important;
}
.section-bar:hover { background: #e4e2dc !important; }
.section-bar-label { color: #8a6c34 !important; }
.section-bar-count { color: #6b6258 !important; }
.section-bar-arrow { color: #9a7b3f !important; }
.sector-num { color: rgba(122,98,52,0.85) !important; }
.sector-diamond { color: #9a7b3f !important; text-shadow: none !important; }

/* ---- PORTFOLIO / NEWS CONTENT (flat ivory pillar) ---- */
.portfolio-content {
  background: #e9e7e1 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(154,123,63,0.18) !important;
}
.news-content { background: #e9e7e1 !important; background-image: none !important; border-bottom: 1px solid rgba(154,123,63,0.18) !important; }
.atl-summary { background: rgba(255,255,255,0.45) !important; border: 1px solid rgba(154,123,63,0.20) !important; }
.atl-num { color: #8a6c34 !important; }
.atl-label { color: #6b6258 !important; }
.atl-quarter { color: #3a342c !important; }
.atl-quarter span { color: #9a7b3f !important; }
.atl-divider { background: rgba(154,123,63,0.20) !important; }
.atl-bar { background: rgba(154,123,63,0.14) !important; }
/* dev carousel cards -> light marble tiles (home-only) */
.carousel-card {
  background: linear-gradient(160deg, #e9e7e1 0%, #dedcd6 100%) !important;
  border: 1px solid rgba(154,123,63,0.22) !important;
}
.carousel-card strong { color: #1f1b16 !important; }
.carousel-card span   { color: #9a7b3f !important; }
.carousel-card p      { color: #4a4239 !important; }
.carousel-card img    { background: rgba(154,123,63,0.06) !important; filter: none !important; }
.carousel-card.is-front img { filter: none !important; background: rgba(154,123,63,0.10) !important; }
.carousel-card.is-front { border-color: rgba(154,123,63,0.45) !important; box-shadow: 0 0 24px rgba(154,123,63,0.14), 0 8px 28px rgba(60,50,35,0.18) !important; }
.carousel-prev, .carousel-next {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(154,123,63,0.30) !important;
  color: #9a7b3f !important;
}
.carousel-prev:hover, .carousel-next:hover { background: #9a7b3f !important; border-color: #9a7b3f !important; color: #e9e7e1 !important; }
/* ====================================================
   COVERFLOW REBUILD (home-only)
   ==================================================== */
.carousel-scene {
  height: 320px !important;
  overflow: hidden !important;
  perspective: 1400px !important;
}
.carousel-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
  transform-style: preserve-3d !important;
  transition: none !important;
}
.carousel-card {
  width: 168px !important;
  height: 240px !important;
  left: 0 !important;
  top: 0 !important;
  margin-left: -84px !important;
  margin-top: -120px !important;
  padding: 18px 14px 16px !important;
  justify-content: flex-start !important;
  backface-visibility: visible !important;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.45s ease, box-shadow 0.4s ease !important;
  will-change: transform, opacity;
}
.carousel-card p {
  opacity: 1 !important;
  max-height: none !important;
}
.carousel-card.is-front p { opacity: 1 !important; }

/* ====================================================
   BRAND CARDS — light marble face + faint gold frame
   ==================================================== */
.brand-card .card-box,
.brand-card {
  border-radius: 4px;
}
.brand-card .card-img-wrap {
  background: #e2e0da !important;
  border: 1px solid rgba(154,123,63,0.22) !important;
  border-bottom: none !important;
}
.brand-card-name {
  color: #1f1b16 !important;
  background: linear-gradient(180deg, #e9e7e1 0%, #e2e0da 100%) !important;
  border-top: 1px solid rgba(154,123,63,0.30) !important;
  border-left: 1px solid rgba(154,123,63,0.22) !important;
  border-right: 1px solid rgba(154,123,63,0.22) !important;
  text-shadow: none !important;
}
.brand-card-name::before { background: linear-gradient(90deg, transparent 0%, rgba(154,123,63,0.45) 50%, transparent 100%) !important; }
.brand-card-name::after  { background: linear-gradient(90deg, transparent, #9a7b3f, transparent) !important; }
.brand-card-tag {
  color: #8a6c34 !important;
  background: #e2e0da !important;
  border-left: 1px solid rgba(154,123,63,0.22) !important;
  border-right: 1px solid rgba(154,123,63,0.22) !important;
  border-bottom: 1px solid rgba(154,123,63,0.22) !important;
  text-shadow: none !important;
}
.brand-card:hover .brand-card-name {
  color: #9a7b3f !important;
  background: linear-gradient(180deg, #e9e7e1 0%, #dedcd4 100%) !important;
}
.brand-card:hover .brand-card-tag { color: #7d6230 !important; }
.brand-card .card-box { box-shadow: 0 4px 14px rgba(60,50,35,0.12) !important; border-color: rgba(154,123,63,0.22) !important; }
.brand-card:hover .card-box {
  border-color: rgba(154,123,63,0.55) !important;
  box-shadow: 0 12px 30px rgba(60,50,35,0.18), 0 0 0 1px rgba(154,123,63,0.30) !important;
}
.brand-card .card-img-wrap::after { background: linear-gradient(90deg, transparent, #9a7b3f, transparent) !important; }
.brand-grid { gap: 16px !important; }
.product-grid, .app-grid { gap: 16px !important; }

/* ---- FOOTER (flat ivory pillar) ---- */
#site-footer {
  background: #e9e7e1 !important;
  background-image: none !important;
}
#site-footer::before { background: linear-gradient(90deg, transparent, #9a7b3f, transparent) !important; opacity: 0.5 !important; }
.footer-brand { color: #9a7b3f !important; }
.footer-brand-sub { color: #6b6258 !important; }
.footer-col h5 { color: #9a7b3f !important; border-bottom: 1px solid rgba(154,123,63,0.25) !important; }
.footer-col p { color: #4a4239 !important; }
.footer-col p strong { color: #1f1b16 !important; }
.footer-col a { color: #4a4239 !important; }
.footer-col a:hover { color: #9a7b3f !important; }
.footer-tag { color: #8a6c34 !important; }
.footer-note { color: #6b6258 !important; }
.footer-bottom { color: #6b6258 !important; border-top: 1px solid rgba(154,123,63,0.25) !important; }

/* ---- SITE NAV (appears on scroll over light marble) ---- */
#site-nav.nav-visible {
  background: rgba(236,235,230,0.92) !important;
  border-color: rgba(154,123,63,0.20) !important;
}
.nav-logo { color: #9a7b3f !important; }
.nav-links a { color: #4a4239 !important; }
.nav-links a:hover { color: #9a7b3f !important; border-color: rgba(154,123,63,0.4) !important; }
.nav-hamburger span { background: #9a7b3f !important; }
.scroll-top { border-color: rgba(154,123,63,0.5) !important; color: #9a7b3f !important; background: rgba(244,241,234,0.6) !important; }
.scroll-top:hover { background: #9a7b3f !important; border-color: #9a7b3f !important; color: #e9e7e1 !important; }

/* ============================================================
   ONYX (BLACK MARBLE) ACCENT BANDS — home-only hero/manifesto
   ============================================================ */
.home-banner {
  background: #16130f !important;
}
.manifesto-wrap {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}
.manifesto-wrap::before { background-image: none !important; }
.manifesto-inner {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  background-color: #16130f !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(184,151,90,0.08) 0%, transparent 60%) !important;
  border: 1px solid rgba(184,151,90,0.22) !important;
  border-radius: 4px !important;
  padding: 60px 54px !important;
  box-shadow: 0 14px 48px rgba(20,16,12,0.45) !important;
}
.manifesto-line-1, .manifesto-line-2 { color: #ede8e1 !important; }
.manifesto-gold { color: #cead72 !important; text-shadow: 0 0 20px rgba(184,151,90,0.5), 0 0 40px rgba(184,151,90,0.25) !important; }
.manifesto-file-tag { color: #b8975a !important; }
.manifesto-coord { color: rgba(184,151,90,0.55) !important; }
.manifesto-body-text p { color: #e8e3da !important; }
.manifesto-closing span { color: #cec8bc !important; }
.manifesto-closing-sep { color: #b8975a !important; }
.manifesto-rule-diamond { color: #b8975a !important; }
.manifesto-data-item { color: rgba(184,151,90,0.6) !important; }
.manifesto-data-key { color: rgba(184,151,90,0.4) !important; }
.manifesto-status-live { color: #64dc64 !important; }
.manifesto-wrap::after, .manifesto-corner-br { border-color: rgba(184,151,90,0.4) !important; }

/* hero overlay text stays bright on dark banner image (home-only) */
.hero-overlay-bottom .home-banner-title { color: #a09890 !important; }
.hero-overlay-bottom .home-banner-quote { color: #fff !important; }
.home-banner-title { color: #c4bdb6 !important; }
.hero-active-badge { color: rgba(120,220,120,0.85) !important; }

/* news TV is a physical dark device — keep its bezel/screen dark */
.tv-label { color: #b8b0a8 !important; }

/* ============================================================
   SCRIPTURE PANES — engraved Latin/Greek litany in the gutters.
   page-fixed, never tiles. Black ink on white marble; the JS
   reading head softly highlights (teal) — never alters — glyphs.
   ============================================================ */
.scripture-pane {
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - 980px) / 2));
  padding: 26px 28px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Suez One", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
  word-spacing: 0.12em;
  text-align: justify;
  color: rgba(28,24,18,0.72);
  z-index: 0;
  pointer-events: none;
}
.scripture-pane .g {
  color: rgba(28,24,18,0.72);
  text-shadow: none;
  transition: color 0.55s ease, text-shadow 0.55s ease;
}
.scripture-pane .g.reading {
  color: rgba(46,120,132,0.85);
}
.scripture-pane .g.reading.far {
  color: rgba(60,110,120,0.70);
}
.scripture-pane .g.reading.near {
  color: rgba(34,140,156,0.95);
  text-shadow: 0 0 5px rgba(46,170,190,0.45);
}
.scripture-pane .g.reading.core {
  color: rgb(30,160,180);
  text-shadow:
    0 0 5px rgba(60,200,220,0.85),
    0 0 12px rgba(46,180,200,0.55),
    0 0 22px rgba(46,170,190,0.30);
}
@media (prefers-reduced-motion: reduce) {
  .scripture-pane .g,
  .scripture-pane .g.reading,
  .scripture-pane .g.reading.near,
  .scripture-pane .g.reading.far,
  .scripture-pane .g.reading.core {
    color: rgba(30,26,20,0.78);
    text-shadow: none;
    transition: none;
  }
}
.scripture-pane.left  { left: 0; }
.scripture-pane.right { right: 0; }

/* ============================================================
   EFFECT 3 — CHAPTER DIVIDER DATA-BUS PULSE
   ============================================================ */
.chapter-divider {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  height: 26px;
  overflow: hidden;
  pointer-events: none;
}
.chapter-divider::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to right,
    rgba(154,123,63,0) 0%,
    rgba(154,123,63,0.48) 18%,
    rgba(154,123,63,0.48) 82%,
    rgba(154,123,63,0) 100%);
}
.chapter-divider .bus-photon {
  position: absolute;
  top: 50%;
  width: 96px; height: 5px;
  transform: translateY(-50%);
  border-radius: 5px;
  background: linear-gradient(to right,
    rgba(120,210,180,0) 0%,
    rgba(120,210,180,0.7) 32%,
    rgba(255,244,205,1) 50%,
    rgba(120,210,180,0.7) 68%,
    rgba(120,210,180,0) 100%);
  filter: blur(0.2px);
  box-shadow: 0 0 14px rgba(190,230,210,0.85), 0 0 26px rgba(150,210,185,0.45);
  left: -100px;
  animation: busFlow var(--ph-dur, 5.4s) linear infinite;
  animation-delay: var(--ph-delay, 0s);
}
@keyframes busFlow {
  0%   { left: -8%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-divider .bus-photon { animation: none; opacity: 0; }
}

/* ============================================================
   EFFECT 4 — STATS COUNT-UP "LIVE SYSTEM" GLOW (home-only)
   ============================================================ */
@keyframes statLivePulse {
  0%, 100% { text-shadow: 0 0 8px rgba(154,123,63,0.30); opacity: 0.95; transform: scale(1); }
  50%      { text-shadow: 0 0 22px rgba(184,151,90,0.85), 0 0 44px rgba(184,151,90,0.40); opacity: 1; transform: scale(1.035); }
}
.stat-number.counted { animation: statLivePulse 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes statLockIn {
  0%   { text-shadow: 0 0 30px rgba(120,210,180,0.95), 0 0 60px rgba(184,151,90,0.6); }
  100% { text-shadow: 0 0 8px rgba(154,123,63,0.30); }
}
.stat-number.just-counted { animation: statLockIn 0.7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .stat-number.counted { animation: none; }
}

/* ============================================================
   UNIFORM SECTION-BOUNDARY SPACING (home-only sections)
   ============================================================ */
.home-page .manifesto-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.home-page .manifesto-inner {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.home-page .app-timeline-wrap {
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}
.home-page #site-footer {
  padding-top: 28px !important;
}
.home-page .news-tv-wrap {
  padding-top: 24px !important;
}

/* ============================================================
   MOBILE / TABLET RESPONSIVE
   ------------------------------------------------------------
   The 980px content pillar leaves no real gutter below ~1024px,
   so the fixed scripture/gutter panels are removed cleanly
   (display:none) — kills the border-box padding bleed and the
   reading JS short-circuits below the breakpoint.
   ============================================================ */
@media (max-width: 1023.98px) {
  .scripture-pane.left,
  .scripture-pane.right,
  .gutter-skin.left,
  .gutter-skin.right {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* HERO (home-only) — let the onyx banner size to phone width */
  .home-banner.hero-full { min-width: 0 !important; }
  #hero-canvas { max-width: 100% !important; }
  .hero-active-badge {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  /* MANIFESTO onyx card (home-only) — trim horizontal padding */
  .home-page .manifesto-inner,
  .manifesto-inner {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* grids — keep 16px gap on phone */
  .brand-grid   { gap: 14px !important; }
  .product-grid { gap: 14px !important; }
  .app-grid     { gap: 14px !important; }

  /* COVERFLOW (home-only) — shrink the card footprint */
  .carousel-scene { height: 260px !important; }
  .carousel-card {
    width: 132px !important;
    height: 196px !important;
    margin-left: -66px !important;
    margin-top: -98px !important;
    padding: 14px 11px 12px !important;
  }
  .carousel-card img { width: 48px !important; height: 48px !important; }
  .carousel-prev, .carousel-next {
    width: 34px !important; height: 34px !important;
    z-index: 20 !important;
  }
  .carousel-prev { left: 2px !important; }
  .carousel-next { right: 2px !important; }
}

@media (max-width: 480px) {
  .hero-active-badge { font-size: 8px !important; }
  .home-banner-title { letter-spacing: 1px !important; }

  .home-page .manifesto-inner,
  .manifesto-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .brand-grid { gap: 12px !important; }
}

/* ============================================================
   2026-05-30 — DARK BLOCK TEXT-COLOR REVERSAL
   ------------------------------------------------------------
   The blanket "body.marble-tone p / h1..h6 / li / span / div"
   rule above forces every descendant to dark ink (#1f1b16).
   That broke the few page elements that still use a dark
   background (loader, sub-footer, news TV, accordion, manifesto,
   home hero, site-nav). For each dark block we restore light
   text by repeating the body.marble-tone scope at the block
   selector — that beats the blanket on specificity.
   ============================================================ */

/* 1. CINEMATIC LOADER — RETONED TO LIGHT MARBLE (2026-05-30 v2)
   ---------------------------------------------------------------
   Home first paint must match the white-marble body.  We override
   the dark loader background (set by styles.css) with ivory, lift
   grid + corner-bracket contrast, and re-ink every text element
   to deep ink / antique gold so it reads on light.
   --------------------------------------------------------------- */
body.marble-tone #civ-loader {
  background: #e9e7e1 !important;
}
body.marble-tone #civ-loader::before {
  background-image:
    linear-gradient(rgba(154,123,63,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,123,63,0.10) 1px, transparent 1px) !important;
}
body.marble-tone #civ-loader .loader-inner {
  border-color: rgba(154,123,63,0.40) !important;
  background: rgba(255,255,255,0.35) !important;
  box-shadow: 0 8px 28px rgba(60,50,35,0.10) !important;
}
body.marble-tone #civ-loader .loader-inner::before,
body.marble-tone #civ-loader .loader-inner::after {
  border-color: #9a7b3f !important;
}
body.marble-tone #civ-loader .loader-logo {
  color: #1f1b16 !important;
  text-shadow:
    0 0 18px rgba(154,123,63,0.30),
    0 0 4px rgba(154,123,63,0.20) !important;
}
body.marble-tone #civ-loader .loader-subtitle {
  color: #8a6c34 !important;
}
body.marble-tone #civ-loader .loader-rule {
  background: linear-gradient(90deg, transparent, rgba(154,123,63,0.55), transparent) !important;
}
body.marble-tone #civ-loader .loader-bar-label {
  color: #6b6258 !important;
}
body.marble-tone #civ-loader .loader-bar-track {
  background: rgba(154,123,63,0.20) !important;
}
body.marble-tone #civ-loader .loader-bar-fill {
  background: linear-gradient(90deg, #b8975a, #9a7b3f) !important;
  box-shadow: 0 0 6px rgba(154,123,63,0.45) !important;
}
body.marble-tone #civ-loader .loader-bar-pct {
  color: #9a7b3f !important;
}
body.marble-tone #civ-loader .loader-status {
  color: #6b6258 !important;
}
body.marble-tone #civ-loader .loader-skip {
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(154,123,63,0.45) !important;
  color: #8a6c34 !important;
}
body.marble-tone #civ-loader .loader-skip:hover {
  background: #9a7b3f !important;
  border-color: #9a7b3f !important;
  color: #ffffff !important;
}

/* 2. SUB-FOOTER (all 16 subpages) — onyx band */
body.marble-tone .sub-footer,
body.marble-tone .sub-footer * {
  color: #e8e3da !important;
}
body.marble-tone .sub-footer a:hover,
body.marble-tone .sub-footer-brand {
  color: #cead72 !important;
}

/* 3. NEWS TV SCREEN (home only) — onyx device */
body.marble-tone .tv-screen,
body.marble-tone .tv-screen * {
  color: #e8e3da !important;
}

/* 4. NEWS CARD CAPTION (home only) — black gradient overlay on photo */
body.marble-tone .news-card-caption,
body.marble-tone .news-card-caption * {
  color: #ffffff !important;
}

/* 5. ACCORDION CONTENT (all 15 subpages) — dark expansion panel */
body.marble-tone .accordion-content,
body.marble-tone .accordion-content * {
  color: #e8e3da !important;
}
body.marble-tone .accordion-content strong,
body.marble-tone .accordion-content a {
  color: #cead72 !important;
}

/* 6. MANIFESTO INNER (home only) — onyx card */
body.marble-tone .manifesto-inner,
body.marble-tone .manifesto-inner * {
  color: #e8e3da !important;
}
body.marble-tone .manifesto-inner .manifesto-gold,
body.marble-tone .manifesto-inner .manifesto-file-tag,
body.marble-tone .manifesto-inner .manifesto-rule-diamond,
body.marble-tone .manifesto-inner .manifesto-closing-sep {
  color: #cead72 !important;
}
body.marble-tone .manifesto-inner .manifesto-data-key,
body.marble-tone .manifesto-inner .manifesto-coord {
  color: rgba(184,151,90,0.55) !important;
}
body.marble-tone .manifesto-inner .manifesto-status-live {
  color: #64dc64 !important;
}

/* 7. HOME HERO BANNER (home only) — onyx band */
body.marble-tone .home-banner,
body.marble-tone .home-banner * {
  color: #e8e3da !important;
}
body.marble-tone .home-banner .home-banner-title {
  color: #c4bdb6 !important;
}
body.marble-tone .home-banner .hero-active-badge {
  color: rgba(120,220,120,0.85) !important;
}

/* 8. SITE NAV (home only) — dark translucent bar */
body.marble-tone #site-nav,
body.marble-tone #site-nav * {
  color: #b8975a !important;
}
body.marble-tone #site-nav .nav-links a {
  color: rgba(184,151,90,0.85) !important;
}
body.marble-tone #site-nav .nav-links a:hover {
  color: #cead72 !important;
}

/* 9. LIGHT-BG closing quote — restore deep ink (was light cream on light marble) */
body.marble-tone .dark-section .closing-quote,
body.marble-tone .closing-quote {
  color: #1f1b16 !important;
}
body.marble-tone .dark-section .closing-quote::before,
body.marble-tone .dark-section .closing-quote::after,
body.marble-tone .closing-quote::before,
body.marble-tone .closing-quote::after {
  color: #9a7b3f !important;
}

/* 10. 2026-05-31 — SUBPAGE TOP "← ÁRKMORA" BACK BUTTON
       Brighten from 70% gold on dark to full-solid gold so it reads at a
       glance across all 16 subpages (was rgba(184,151,90,0.7) on dark). */
body.marble-tone .sub-home-btn,
body.marble-tone .sub-home-btn:visited {
  color: #cead72 !important;
  background: rgba(22, 19, 15, 0.65) !important;
  border-color: rgba(206, 173, 114, 0.55) !important;
}
body.marble-tone .sub-home-btn:hover {
  color: #ffe8b8 !important;
  background: rgba(184, 151, 90, 0.18) !important;
  border-color: rgba(206, 173, 114, 0.85) !important;
}

/* 11. 2026-05-31 — MANIFESTO COORD + DATA-KEY (homepage onyx card)
       Was rgba(184,151,90,0.55) which sat at dL≈0.106 — lifted to 0.78. */
body.marble-tone .manifesto-inner .manifesto-coord,
body.marble-tone .manifesto-inner .manifesto-data-key {
  color: rgba(184, 151, 90, 0.78) !important;
}

/* ============================================================
   2026-05-31 — SCROLL-JANK CLEANUP (천마신군님 분부 A)
   Homepage scroll felt heavy. Profiling = LayoutDuration 4.42s
   per scroll pass, mostly from (1) 10 chapter-divider bus-photon
   infinite animations and (2) 12 elements with backdrop-filter
   blur (which forces GPU re-rasterisation on every scroll frame).
   Drop both: divider rules stay (visual gold line preserved) but
   the moving photon is hidden + animation removed; backdrop-filter
   is neutralised everywhere while keeping the translucent fills.
   ============================================================ */

/* Kill the moving photon on every chapter divider */
.chapter-divider .bus-photon {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* Neutralise backdrop-filter blur everywhere (keeps semi-transparent bg) */
#site-nav,
#site-nav.nav-visible,
.hero-active-badge,
.scroll-top,
.carousel-prev,
.carousel-next,
.sub-footer-home,
.manifesto-status-live {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   2026-05-31 — SCRIPTURE-PANE ISOLATION (천마신군님 분부 A, v2)
   Two fixed gutters hold ~11,312 spans. marble.js runs an infinite
   60 FPS rAF that flips .reading classes on ~14 spans every tick.
   v1 (= will-change: color on every .g span) accidentally promoted
   11,312 elements to their own compositor layer — that's why the
   first attempt felt heavier, not lighter. Real fix: containment
   on the pane only, no per-glyph will-change.
   ============================================================ */
.scripture-pane {
  contain: strict !important;
  contain-intrinsic-size: 100vw 100vh;
  transform: translateZ(0);
}

/* ============================================================
   2026-06-02 — MOBILE EFFECT STRIP (천마신군님 직접 분):
   Mobile users were seeing the favicon paint-hold splash because
   first-paint was too slow. Strip all non-essential effects on
   ≤1023px so the page paints instantly: kill reveal animations,
   chapter-divider photons, backdrop filters, infinite glows,
   carousel transitions. Keeps the visual design but removes the
   render-blocking flourishes.
   ============================================================ */
@media (max-width: 1023.98px) {
  /* Reveal — show every section immediately, no fade-in */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Chapter divider photons — hide entirely */
  .chapter-divider .bus-photon {
    display: none !important;
  }

  /* All backdrop blurs — none */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Stat number infinite pulse — none */
  .stat-number.counted,
  .stat-number.just-counted {
    animation: none !important;
    text-shadow: none !important;
  }

  /* Carousel — disable smooth transitions and auto-rotation feel */
  .carousel-card,
  .carousel-ring {
    transition: none !important;
    animation: none !important;
  }

  /* Generic — remove decorative animations across the page */
  .scripture-pane,
  .scripture-pane * {
    display: none !important;
  }

  /* News-card / card hover effects — flat on mobile */
  .news-card,
  .brand-card,
  .product-card {
    transition: none !important;
  }

  /* Manifesto data-bus pulses, hero active badge pulses — kill */
  .manifesto-status-live,
  .hero-active-dot {
    animation: none !important;
  }
}