/* ==========================================================================
   history.css — "Our History" premium page (v26)
   Everything is scoped under .hx so no other page can be affected.
   Palette follows the site: crimson / gold / navy / cream.
   ========================================================================== */
.hx {
  --hx-red: #b01c2e;
  --hx-red-d: #8c1322;
  --hx-red-dd: #5a0a16;
  --hx-gold: #d4a12a;
  --hx-gold-l: #f0cf7a;
  --hx-gold-s: #fdf4e0;
  --hx-navy: #1b3a6b;
  --hx-navy-d: #12294c;
  --hx-ink: #1d2433;
  --hx-mut: #5b6478;
  --hx-line: #eadfce;
  --hx-cream: #fffaf5;
  --hx-sh: 0 10px 30px rgba(25, 30, 45, .10);
  --hx-sh-lg: 0 22px 56px rgba(25, 30, 45, .16);
  color: var(--hx-ink);
  font-family: 'Noto Sans Devanagari', 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: #fff;
  overflow-x: clip;
}
/* The site's global `main { max-width:1240px; padding:... }` would inset the full-bleed hero; neutralise it for this page only. */
main.hx { max-width: none; width: 100%; margin: 0; padding: 0; }
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx svg { width: 1.4em; height: 1.4em; flex: none; }
.hx img { max-width: 100%; height: auto; display: block; }
/* :where() keeps these resets at zero specificity so component rules (e.g. .hx-note padding) always win. */
:where(.hx) :is(h1, h2, h3, p, ol, ul) { margin: 0; padding: 0; }
:where(.hx) :is(ol, ul) { list-style: none; }
.hx a { text-decoration: none; }
.hx-wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.hx-narrow { max-width: 820px; margin-inline: auto; }
.hx-center { text-align: center; }

/* ---------- buttons ---------- */
.hx-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.7rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; cursor: pointer;
}
.hx-btn:hover { transform: translateY(-2px); }
.hx-btn-gold { background: linear-gradient(135deg, #f3d57e, #d4a12a 55%, #b88717); color: #3b2a00; box-shadow: 0 8px 20px rgba(212, 161, 42, .38); }
.hx-btn-gold:hover { box-shadow: 0 12px 26px rgba(212, 161, 42, .5); color: #2c1f00; }
.hx-btn-ghost { border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .08); }
.hx-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- hero ---------- */
.hx-hero {
  position: relative; color: #fff; overflow: hidden;
  padding: 3rem 0 7.2rem;
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(240, 207, 122, .20), transparent 60%),
    linear-gradient(135deg, var(--hx-red-dd) 0%, #8a1428 38%, var(--hx-red) 70%, #7d0f20 100%);
}
.hx-hero-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .30;
  background: url('/assets/images/history/mandala.svg') no-repeat right -160px center / 760px auto;
}
.hx-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px;
  background: #fff; clip-path: ellipse(60% 100% at 50% 100%);
}
.hx-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.hx-crumbs { font-size: .85rem; color: rgba(255, 255, 255, .75); margin-bottom: 1.1rem; }
.hx-crumbs a { color: var(--hx-gold-l); }
.hx-crumbs span { margin: 0 .25rem; }
.hx-eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-gold-l); margin-bottom: .7rem; }
.hx-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.28; font-weight: 800; letter-spacing: -.01em; }
.hx-hero h1 span { color: var(--hx-gold-l); }
.hx-lead { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.9; color: rgba(255, 255, 255, .92); max-width: 36em; }

.hx-hero-art { position: relative; justify-self: center; text-align: center; width: min(340px, 78%); }
.hx-halo {
  position: absolute; z-index: 0; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 140, .75) 0%, rgba(255, 190, 80, .38) 38%, rgba(255, 190, 80, 0) 68%);
  border: 1.5px solid rgba(240, 207, 122, .45); box-shadow: 0 0 60px rgba(255, 200, 100, .35), inset 0 0 40px rgba(255, 200, 100, .25);
}
.hx-hero-art img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); animation: hx-float 7s ease-in-out infinite; }
.hx-hero-art figcaption { position: relative; z-index: 1; margin-top: .6rem; font-weight: 700; color: var(--hx-gold-l); font-size: .95rem; letter-spacing: .02em; }
@keyframes hx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }


/* ---------- hero: BOTH deities side by side ---------- */
.hx-hero-art.hx-duo { width: min(540px, 100%); }
.hx-duo .hx-halo { width: 108%; top: 47%; }
.hx-duo-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: .9rem; }
.hx-fig { flex: 0 1 auto; min-width: 0; text-align: center; }
/* same height for both figures so they look like a matched pair */
.hx-fig img { height: clamp(250px, 30vw, 410px); width: auto; max-width: 100%; margin-inline: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); animation: hx-float 7s ease-in-out infinite; }
.hx-fig:nth-child(2) img { animation-delay: -3.2s; }
.hx-fig figcaption { max-width: 210px; margin-inline: auto; margin-top: .5rem; font-weight: 700; color: var(--hx-gold-l); font-size: .9rem; line-height: 1.45; letter-spacing: .01em; }

/* ---------- Bhagwan Balbhadra section ---------- */
.hx-bal { display: grid; grid-template-columns: 300px 1fr; gap: 2.4rem; align-items: center; }
.hx-bal-art { position: relative; justify-self: center; width: 230px; margin: 0; }
.hx-bal-art img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 14px 18px rgba(30, 40, 90, .35)); }
.hx-bal-art .hx-halo { width: 135%; }
.hx-names { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.hx-names li { padding: .38rem 1rem; border-radius: 999px; font-weight: 700; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--hx-navy), #2b5aa8); box-shadow: 0 4px 10px rgba(27, 58, 107, .25); }
.hx-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 2.2rem 0 1.6rem; }
.hx-info > div { background: #fff; border: 1px solid var(--hx-line); border-left: 4px solid var(--hx-gold); border-radius: 14px; padding: .9rem 1.1rem; box-shadow: var(--hx-sh); }
.hx-info dt { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hx-red); margin-bottom: .2rem; }
.hx-info dd { margin: 0; font-weight: 700; color: var(--hx-ink); line-height: 1.6; }
.hx-info dd small { font-weight: 500; color: var(--hx-mut); font-size: .82rem; }
.hx-cards-3 { grid-template-columns: repeat(3, 1fr); }
.hx-callout .hx-link { margin-top: 0; margin-left: .3rem; white-space: nowrap; }

/* ---------- quick facts ---------- */
.hx-facts { position: relative; z-index: 2; margin-top: -4.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hx-fact {
  background: #fff; border-radius: 18px; padding: 1.2rem 1.1rem 1.25rem; box-shadow: var(--hx-sh-lg);
  border-top: 4px solid var(--hx-gold); display: flex; flex-direction: column; gap: .35rem;
  transition: transform .25s ease;
}
.hx-fact:hover { transform: translateY(-4px); }
.hx-fact svg { width: 34px; height: 34px; color: var(--hx-red); }
.hx-fact small { color: var(--hx-mut); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.hx-fact strong { font-size: 1.03rem; line-height: 1.5; color: var(--hx-ink); }

.hx-english {
  margin: 1.8rem auto 0; max-width: 980px; padding: 1.05rem 1.3rem; border-radius: 14px;
  background: var(--hx-gold-s); border-left: 4px solid var(--hx-gold); color: #3b3a36;
  font-family: 'Inter', system-ui, sans-serif; font-size: .93rem; line-height: 1.75;
}

/* ---------- sections & headings ---------- */
.hx-sec { padding: 4.4rem 0; position: relative; }
.hx-cream { background: var(--hx-cream); }
.hx-dark {
  background: radial-gradient(800px 360px at 15% 0%, rgba(240, 207, 122, .10), transparent 60%), linear-gradient(160deg, #15305c 0%, #0f2347 55%, #0b1a37 100%);
  color: #e9eefb;
}
.hx-head { text-align: center; margin-bottom: 2.4rem; }
.hx-head .hx-eyebrow { color: var(--hx-red); margin-bottom: .45rem; }
.hx-head-light .hx-eyebrow { color: var(--hx-gold-l); }
.hx-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.3; color: var(--hx-ink); }
.hx-head-light h2 { color: #fff; }
.hx-sub { margin-top: .4rem; color: var(--hx-mut); font-size: 1rem; }
.hx-head-light .hx-sub { color: rgba(233, 238, 251, .75); }
.hx-orn { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem; }
.hx-orn i { width: 74px; height: 2px; background: linear-gradient(90deg, transparent, var(--hx-gold)); }
.hx-orn i:last-child { transform: scaleX(-1); }
.hx-orn b { width: 10px; height: 10px; background: var(--hx-gold); transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(212, 161, 42, .2); }

.hx-prose p { font-size: 1.07rem; line-height: 2; color: #2a3042; }
.hx-prose p + p { margin-top: 1rem; }
.hx-prose strong { color: var(--hx-red-d); }
.hx-prose-light p { color: #dfe7f8; }
.hx-prose-light strong { color: var(--hx-gold-l); }
.hx-prose.hx-narrow, .hx-prose.hx-center { margin-inline: auto; }
.hx-center.hx-prose { max-width: 900px; }
.hx-note { margin-top: 1.1rem !important; padding: .8rem 1rem; background: var(--hx-gold-s); border-left: 3px solid var(--hx-gold); border-radius: 8px; font-size: .95rem !important; line-height: 1.7 !important; }

.hx-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: start; }

/* ---------- puranic points ---------- */
.hx-points { display: grid; gap: .9rem; }
.hx-points li { display: flex; gap: .9rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--hx-line); border-radius: 16px; box-shadow: var(--hx-sh); }
.hx-points li > span {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, var(--hx-red), var(--hx-red-d)); color: #fff; box-shadow: 0 6px 14px rgba(176, 28, 46, .3);
}
.hx-points h3 { font-size: 1.04rem; color: var(--hx-ink); margin-bottom: .2rem; }
.hx-points p { font-size: .95rem; line-height: 1.75; color: var(--hx-mut); }

/* ---------- callouts ---------- */
.hx-callout {
  display: flex; gap: .9rem; align-items: flex-start; margin: 2.2rem auto 0; max-width: 980px;
  padding: 1.1rem 1.3rem; border-radius: 16px; background: var(--hx-gold-s); border: 1px solid #f0dfb5;
}
.hx-callout svg { width: 28px; height: 28px; color: var(--hx-gold); margin-top: .15rem; }
.hx-callout p { font-size: 1rem; line-height: 1.85; color: #3b3a36; }
.hx-callout-light { background: rgba(255, 255, 255, .08); border: 1px solid rgba(240, 207, 122, .45); }
.hx-callout-light p { color: #eaf0fd; }
.hx-callout-light svg, .hx-callout-light strong { color: var(--hx-gold-l); }

/* ---------- Kalachuri rulers ---------- */
.hx-rulers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.2rem; }
.hx-rulers article {
  position: relative; padding: 1.3rem 1.2rem 1.25rem; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); border: 1px solid rgba(240, 207, 122, .35);
  backdrop-filter: blur(2px);
}
.hx-rulers article::before { content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: 3px; background: linear-gradient(90deg, var(--hx-gold-l), transparent); border-radius: 3px; }
.hx-yr { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .05em; color: #2c1f00; background: var(--hx-gold-l); padding: .22rem .65rem; border-radius: 999px; margin-bottom: .7rem; }
.hx-rulers h3 { color: #fff; font-size: 1.15rem; margin-bottom: .45rem; }
.hx-rulers p { color: #d7e0f5; font-size: .93rem; line-height: 1.75; }

/* ---------- timeline ---------- */
.hx-timeline { position: relative; max-width: 980px; margin: 0 auto; padding: .5rem 0; }
.hx-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, var(--hx-gold), var(--hx-red) 55%, var(--hx-navy)); border-radius: 3px; }
.hx-timeline li { position: relative; width: calc(50% - 2.4rem); margin: 0 0 1.8rem; padding: 1.15rem 1.3rem 1.2rem; background: #fff; border: 1px solid var(--hx-line); border-radius: 18px; box-shadow: var(--hx-sh); }
.hx-timeline li:nth-child(odd) { margin-right: auto; }
.hx-timeline li:nth-child(even) { margin-left: auto; }
.hx-timeline li::before { /* dot on the line */
  content: ''; position: absolute; top: 1.5rem; width: 18px; height: 18px; border-radius: 50%; background: var(--c, var(--hx-red)); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--c, var(--hx-red));
}
.hx-timeline li:nth-child(odd)::before { right: calc(-2.4rem - 9px); }
.hx-timeline li:nth-child(even)::before { left: calc(-2.4rem - 9px); }
.hx-timeline li::after { /* connector */
  content: ''; position: absolute; top: calc(1.5rem + 8px); width: 2.4rem; height: 2px; background: var(--c, var(--hx-red)); opacity: .5;
}
.hx-timeline li:nth-child(odd)::after { right: -2.4rem; }
.hx-timeline li:nth-child(even)::after { left: -2.4rem; }
.hx-badge { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--c, var(--hx-red)); padding: .24rem .75rem; border-radius: 999px; margin-bottom: .6rem; }
.hx-timeline h3 { font-size: 1.15rem; color: var(--hx-ink); margin-bottom: .35rem; }
.hx-timeline p { font-size: .98rem; line-height: 1.8; color: var(--hx-mut); }
.hx-era-myth { --c: #c9891c; } .hx-era-ancient { --c: #b01c2e; } .hx-era-mid { --c: #7a4a1a; }
.hx-era-col { --c: #1b3a6b; } .hx-era-mod { --c: #1a7a4c; } .hx-era-now { --c: #5b3fb5; }

/* ---------- deities ---------- */
.hx-deities { display: grid; gap: 1.8rem; }
.hx-deity { display: grid; grid-template-columns: 290px 1fr; gap: 2rem; align-items: center; padding: 1.8rem; background: #fff; border-radius: 26px; border: 1px solid var(--hx-line); box-shadow: var(--hx-sh-lg); }
.hx-deity-rev { grid-template-columns: 1fr 290px; }
.hx-deity-rev .hx-deity-art { order: 2; }
.hx-deity-art { position: relative; justify-self: center; width: 200px; }
.hx-deity-art img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 12px 16px rgba(60, 20, 10, .3)); }
.hx-halo-sm { width: 128%; top: 50%; background: radial-gradient(circle, rgba(255, 214, 120, .85) 0%, rgba(255, 190, 80, .35) 42%, rgba(255, 190, 80, 0) 70%); box-shadow: none; border-color: rgba(212, 161, 42, .35); }
.hx-deity-body h3 { font-size: 1.5rem; color: var(--hx-red-d); margin-bottom: .6rem; line-height: 1.4; }
.hx-deity-body p { font-size: 1.03rem; line-height: 1.95; color: #2a3042; }
.hx-deity-body p + p, .hx-meta { margin-top: .8rem; }
.hx-meta { font-size: .95rem !important; padding: .75rem 1rem; border-radius: 10px; background: var(--hx-gold-s); border-left: 3px solid var(--hx-gold); color: #3b3a36 !important; line-height: 1.75 !important; }
.hx-link { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--hx-red); border-bottom: 2px solid var(--hx-gold); padding-bottom: 2px; }
.hx-link:hover { color: var(--hx-red-d); }
.hx-lamps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.hx-lamps span { color: #f0a500; filter: drop-shadow(0 0 6px rgba(255, 170, 0, .7)); animation: hx-flick 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -.23s); }
.hx-lamps svg { width: 24px; height: 24px; }
@keyframes hx-flick { 0%, 100% { transform: scale(1) translateY(0); opacity: .95; } 35% { transform: scale(1.12, 1.18) translateY(-1px); opacity: 1; } 70% { transform: scale(.94, .97); opacity: .85; } }

/* ---------- identity cards ---------- */
.hx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.hx-card { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: #fff; border: 1px solid var(--hx-line); border-radius: 20px; box-shadow: var(--hx-sh); transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.hx-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--hx-red), var(--hx-gold)); }
.hx-card:hover { transform: translateY(-5px); box-shadow: var(--hx-sh-lg); }
.hx-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, var(--hx-red), var(--hx-red-d)); color: #fff; margin-bottom: .9rem; box-shadow: 0 6px 14px rgba(176, 28, 46, .3); }
.hx-ic svg { width: 26px; height: 26px; }
.hx-card h3 { font-size: 1.15rem; margin-bottom: .5rem; color: var(--hx-ink); }
.hx-card p { font-size: .98rem; line-height: 1.85; color: var(--hx-mut); }
.hx-card strong { color: var(--hx-red-d); }

/* ---------- livelihoods chips ---------- */
.hx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.8rem; max-width: 900px; margin-inline: auto; }
.hx-chips li { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.2rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--hx-line); font-weight: 700; color: var(--hx-ink); box-shadow: var(--hx-sh); transition: transform .2s, border-color .2s; }
.hx-chips li:hover { transform: translateY(-3px); border-color: var(--hx-gold); }
.hx-chips svg { color: var(--hx-red); width: 22px; height: 22px; }

/* ---------- today / CTA ---------- */
.hx-today {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 250px; gap: 2rem; align-items: center; padding: 2.8rem 2.6rem; border-radius: 30px; color: #fff;
  background: radial-gradient(500px 240px at 90% 20%, rgba(240, 207, 122, .30), transparent 65%), linear-gradient(135deg, var(--hx-red-dd), #8a1428 55%, var(--hx-red));
  box-shadow: var(--hx-sh-lg);
}
.hx-today::before { content: ''; position: absolute; inset: 0; opacity: .18; background: url('/assets/images/history/mandala.svg') no-repeat right -90px center / 520px auto; pointer-events: none; }
.hx-today > * { position: relative; }
.hx-today h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.35; margin-bottom: .8rem; }
.hx-today p { color: rgba(255, 255, 255, .92); font-size: 1.05rem; line-height: 1.95; }
.hx-eyebrow-light { color: var(--hx-gold-l) !important; }
.hx-today img { width: 100%; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45)); }

/* ---------- sources ---------- */
.hx-sources { background: #f7f3ee; padding: 3rem 0 3.4rem; }
.hx-sources h2 { font-size: 1.4rem; color: var(--hx-ink); margin-bottom: .7rem; }
.hx-sources h2 small { font-size: .8rem; font-weight: 600; color: var(--hx-mut); margin-left: .4rem; letter-spacing: .08em; text-transform: uppercase; }
.hx-sources p, .hx-sources li { font-size: .93rem; line-height: 1.8; color: #4a5266; }
.hx-sources ul { margin: .7rem 0 1rem; padding-left: 1.2rem; list-style: disc; }
.hx-sources li { margin-bottom: .25rem; }
.hx-fine { padding: .9rem 1.1rem; border-radius: 12px; background: #fff; border: 1px dashed #d9c9a8; }
.hx-sources a { color: var(--hx-red); font-weight: 700; text-decoration: underline; }

/* ---------- scroll reveal (JS adds .hx-js) ---------- */
.hx-js .hx-timeline li, .hx-js .hx-card, .hx-js .hx-rulers article, .hx-js .hx-points li, .hx-js .hx-deity { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.hx-js .hx-in { opacity: 1 !important; transform: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hx-info { grid-template-columns: repeat(2, 1fr); }
  .hx-facts { grid-template-columns: repeat(2, 1fr); }
  .hx-rulers { grid-template-columns: repeat(2, 1fr); }
  .hx-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hx-hero { padding: 2.2rem 0 6.4rem; }
  .hx-hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hx-hero-art, .hx-hero-art.hx-duo { order: -1; width: min(420px, 100%); margin-bottom: .5rem; }
  .hx-bal { grid-template-columns: 1fr; gap: 1.4rem; text-align: left; }
  .hx-bal-art { width: 190px; }
  .hx-hero-bg { background-position: right -260px top 10px; opacity: .22; }
  .hx-two { grid-template-columns: 1fr; }
  .hx-deity, .hx-deity-rev { grid-template-columns: 1fr; padding: 1.4rem; text-align: left; }
  .hx-deity-rev .hx-deity-art { order: 0; }
  .hx-deity-art { width: 180px; margin-bottom: .6rem; }
  .hx-today { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .hx-today img { width: 170px; justify-self: center; order: -1; }
  .hx-timeline::before { left: 14px; transform: none; }
  .hx-timeline li, .hx-timeline li:nth-child(odd), .hx-timeline li:nth-child(even) { width: auto; margin: 0 0 1.4rem 2.6rem; }
  .hx-timeline li:nth-child(odd)::before, .hx-timeline li:nth-child(even)::before { left: calc(-2.6rem + 5px); right: auto; }
  .hx-timeline li:nth-child(odd)::after, .hx-timeline li:nth-child(even)::after { left: calc(-2.6rem + 23px); right: auto; width: calc(2.6rem - 23px); }
}
@media (max-width: 560px) {
  .hx-wrap { width: min(1180px, 100% - 1.6rem); }
  .hx-sec { padding: 3.2rem 0; }
  .hx-facts { grid-template-columns: 1fr; margin-top: -3.8rem; }
  .hx-info, .hx-cards-3 { grid-template-columns: 1fr; }
  .hx-fig figcaption { font-size: .78rem; }
  .hx-fig img { height: clamp(190px, 52vw, 260px); }
  .hx-duo-row { gap: .4rem; }
  .hx-rulers, .hx-cards { grid-template-columns: 1fr; }
  .hx-prose p { font-size: 1rem; line-height: 1.9; }
  .hx-actions .hx-btn { flex: 1 1 100%; }
  .hx-today h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
  .hx-js .hx-timeline li, .hx-js .hx-card, .hx-js .hx-rulers article, .hx-js .hx-points li, .hx-js .hx-deity { opacity: 1; transform: none; }
}
@media print {
  .hx-hero-bg, .hx-halo, .hx-lamps { display: none; }
  .hx-hero, .hx-dark, .hx-today { background: #fff !important; color: #000 !important; }
  .hx-hero h1, .hx-hero .hx-lead, .hx-dark h2, .hx-dark p, .hx-today h2, .hx-today p { color: #000 !important; }
}