/* ============================================================================
   TOTSNAME — MYTHOLOGICAL FIGURE DETAIL
   ----------------------------------------------------------------------------
   Loaded ONLY on /mythological-names/:slug/ (mythFiguresController sends
   pageCss:'mythological-detail'), exactly like name-detail.css and
   celebrity-detail.css already do. Everything is namespaced under .myth-d so
   nothing here can reach the name pages, the mythology hub, or any other
   template, and style.css needs no edit.

   SVG-FIRST: zero raster artwork. The three illustrations are vector SVG
   files and every icon, divider, halo and decorative shape below is inline
   SVG or CSS, which is why the page looks rich on a tiny payload.
   ========================================================================== */

.myth-d{
  --m-navy:#102A6B; --m-navy-d:#0B225C; --m-blue:#0F5FAE;
  --m-pink:#C8136A; --m-pink-d:#A30F56; --m-link:#C8136A;
  --m-bd:#E4EAF3; --m-card:#F5F9FE; --m-gold:#8A6208; --m-gold-l:#F3E3BF;
  --m-ink:#172033; --m-mut:#26365C;
  --m-r:16px; --m-sh:0 2px 10px rgba(16,42,107,.05);
  background:#fff; color:var(--m-ink);
  font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.myth-d *{ box-sizing:border-box; }
[data-theme="dark"] .myth-d{
  /* Dark mode: strong LIGHT text on the dark surface -- never dark-on-dark
     and never faded. Every token below measures >= 7:1 on #0B1220/#121C2E. */
  --m-navy:#F1F5FF; --m-navy-d:#FFFFFF; --m-bd:#26344D; --m-card:#121C2E;
  --m-ink:#E6ECF8; --m-mut:#D3DCEE; --m-gold:#EFC56A; --m-gold-l:#3A3328;
  --m-blue:#8CBDFF; --m-link:#FF8CC0;
  background:#0B1220;
}
.myth-d-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.myth-d h1,.myth-d h2,.myth-d h3{ color:var(--m-navy); margin:0; }
.myth-d .m-sec{ margin-top:34px; }
.myth-d .m-h{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.myth-d .m-h h2{ font-size:28.9px; font-weight:700; letter-spacing:-.3px; display:flex; align-items:center; gap:9px; }
.myth-d .m-h .m-sub{ font-size:15px; color:var(--m-mut); }
.myth-d .m-h .m-more{ margin-left:auto; font-size:14.4px; font-weight:600; color:var(--m-link); text-decoration:none; white-space:nowrap; }
.myth-d .m-h .m-more:hover{ text-decoration:underline; }
.myth-d .m-ico{ width:22px; height:22px; flex:0 0 auto; }

/* ---------- breadcrumb ---------- */
.myth-d-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13.9px; color:var(--m-mut); padding:14px 0 0; }
.myth-d-crumb a{ color:var(--m-mut); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.myth-d-crumb a:hover{ color:var(--m-link); text-decoration:underline; }
.myth-d-crumb strong{ color:var(--m-navy); font-weight:600; }
.myth-d-crumb svg{ width:13px; height:13px; }

/* ---------- hero ---------- */
.myth-hero{ position:relative; border-radius:22px; overflow:hidden; margin-top:12px;
  background:linear-gradient(105deg,#FFFFFF 0%,#FFFFFF 44%,#F4EFE6 58%,#F8F3E9 100%); border:1px solid var(--m-bd); }
[data-theme="dark"] .myth-hero{ background:linear-gradient(105deg,#0E1728 0%,#0E1728 46%,#16233A 100%); }
.myth-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
.myth-hero-copy{ padding:26px 30px; }
.myth-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.8px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--m-gold); margin-bottom:6px; }
.myth-hero h1{ font-size:68.8px; line-height:1.02; font-weight:800; letter-spacing:-1.5px;
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.myth-hero h1 .m-dev{ font-family:"Noto Sans Devanagari","Poppins",sans-serif; font-size:.62em; font-weight:600; color:var(--m-gold); }
.myth-hero .m-tag{ font-size:20px; font-weight:600; color:var(--m-navy); margin:2px 0 6px; }
.myth-hero p.m-lede{ font-size:16.1px; line-height:1.5; color:var(--m-ink); max-width:46ch; margin:0 0 12px; }
.myth-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.m-btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; border-radius:22px;
  font-size:15.5px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:.18s; }
.m-btn-p{ background:var(--m-pink); color:#fff !important; }
.m-btn-p:hover{ background:var(--m-pink-d); }
.m-btn-s{ background:#fff; color:var(--m-navy) !important; border-color:var(--m-bd); }
.m-btn-s:hover{ border-color:#C9D6EA; }
[data-theme="dark"] .m-btn-s{ background:#162238; border-color:#26344D; }
.myth-quote{ display:flex; align-items:flex-start; gap:10px; margin-top:6px; flex-wrap:wrap; }
.myth-quote blockquote{ flex:1 1 280px; margin:0; padding:8px 14px; background:var(--m-card);
  border-left:3px solid var(--m-gold); border-radius:0 12px 12px 0; font-size:15px; line-height:1.35; font-style:italic; color:var(--m-ink); }
.myth-mantra{ font-family:"Noto Sans Devanagari","Poppins",sans-serif; font-size:17.8px; color:var(--m-gold); white-space:nowrap; align-self:center; }
.myth-hero-art{ position:relative; align-self:stretch; min-height:340px; display:flex; }
/* The artwork carries its own sky/ground, so it is COVERed to fill the panel
   edge to edge. Contain would leave the panel background showing around it,
   which reads as a separate pasted-in box; cover removes that seam entirely. */
.myth-hero-art img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; }
.myth-hero-words{ position:absolute; top:22px; right:22px; text-align:right; font-size:14.4px; line-height:1.85;
  font-weight:600; color:#12306B; text-shadow:0 1px 6px rgba(255,255,255,.75); pointer-events:none; }

/* ---------- quick facts ---------- */
.myth-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.myth-fact{ display:flex; gap:11px; padding:15px 16px; background:#fff; border:1px solid var(--m-bd);
  border-radius:var(--m-r); box-shadow:var(--m-sh); }
[data-theme="dark"] .myth-fact{ background:#121C2E; }
.myth-fact .m-badge{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--m-gold-l);
  display:flex; align-items:center; justify-content:center; }
.myth-fact .m-badge svg{ width:20px; height:20px; }
.myth-fact b{ display:block; font-size:15px; color:var(--m-navy); margin-bottom:3px; }
.myth-fact span{ font-size:13.9px; line-height:1.55; color:var(--m-mut); }

/* ---------- main two-column ---------- */
.myth-main{ display:grid; grid-template-columns:minmax(0,65fr) minmax(0,35fr); gap:22px; align-items:start; margin-top:30px; }
.m-card{ background:#fff; border:1px solid var(--m-bd); border-radius:var(--m-r); box-shadow:var(--m-sh); padding:22px; }
[data-theme="dark"] .m-card{ background:#121C2E; }
.myth-d p{ font-size:15.5px; line-height:1.75; color:var(--m-ink); }
.myth-banner{ display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:14px 18px;
  background:linear-gradient(90deg,#FFFBF2,#FFF7E8); border:1px solid var(--m-gold-l); border-radius:12px;
  font-size:15px; font-style:italic; color:var(--m-navy); }
[data-theme="dark"] .myth-banner{ background:#211D18; border-color:#3A3328; }

/* ---------- the four forms ---------- */
.myth-forms{ display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:0; margin-top:20px; }
.myth-form{ text-align:center; padding:6px 12px; position:relative; }
.myth-form + .myth-form{ border-left:1px solid var(--m-bd); }
.myth-form .m-orb{ width:56px; height:56px; margin:0 auto 10px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; }
.myth-form .m-orb svg{ width:30px; height:30px; }
.myth-form b{ display:block; font-size:15.5px; color:var(--m-navy); margin-bottom:5px; }
.myth-form span{ font-size:13.9px; line-height:1.6; color:var(--m-mut); }

/* ---------- story highlight ---------- */
.myth-highlight{ margin-top:16px; padding:16px 18px; background:var(--m-card); border:1px solid var(--m-bd);
  border-radius:14px; }
[data-theme="dark"] .myth-highlight{ background:#101A2C; }
.myth-highlight h3{ font-size:17.8px; margin-bottom:6px; }
.myth-highlight p{ margin:0; font-size:15px; }

/* ---------- at a glance ---------- */
.myth-glance h2{ font-size:22.2px; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.myth-glance dl{ margin:0; }
.myth-grow{ display:grid; grid-template-columns:118px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid var(--m-bd); font-size:14.4px; }
.myth-grow:last-of-type{ border-bottom:none; }
.myth-grow dt{ display:flex; align-items:flex-start; gap:7px; color:var(--m-navy); font-weight:600; margin:0; }
.myth-grow dt svg{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; }
.myth-grow dd{ margin:0; color:var(--m-ink); line-height:1.6; }

/* ---------- 10 divine names ---------- */
.myth-names{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
/* span (the meaning) may wrap anywhere; the NAME must never break mid-word. */
.myth-name b{ overflow-wrap:normal; word-break:keep-all; }
.myth-name span{ overflow-wrap:anywhere; }
.myth-name{ position:relative; display:block; padding:14px 12px 13px; background:#fff; border:1px solid var(--m-bd);
  border-radius:13px; text-decoration:none; box-shadow:var(--m-sh); transition:transform .18s,border-color .18s; }
[data-theme="dark"] .myth-name{ background:#121C2E; }
.myth-name:hover{ transform:translateY(-2px); border-color:#C9D6EA; }
.myth-name .m-no{ position:absolute; top:9px; left:11px; font-size:11.7px; font-weight:700; color:var(--m-gold); letter-spacing:.06em; }
.myth-name .m-sym{ display:block; width:30px; height:30px; margin:14px auto 9px; }
.myth-name b{ display:block; font-size:15px; color:var(--m-navy); text-align:center; margin-bottom:3px; }
.myth-name span{ display:block; font-size:12.8px; line-height:1.45; color:var(--m-mut); text-align:center; }

/* ---------- inspired names ---------- */
.myth-insp{ padding:14px 14px 13px; background:#fff; border:1px solid var(--m-bd); border-radius:13px; box-shadow:var(--m-sh); }
[data-theme="dark"] .myth-insp{ background:#121C2E; }
.myth-insp .m-leaf{ width:22px; height:22px; margin-bottom:8px; }
.myth-insp b{ display:block; font-size:15.5px; color:var(--m-navy); }
.myth-insp .m-g{ font-size:12.8px; font-weight:600; margin:2px 0 6px; }
.myth-insp .m-g.boy{ color:var(--m-blue); } .myth-insp .m-g.girl{ color:var(--m-link); }
.myth-insp .m-or{ display:block; font-size:12.8px; color:var(--m-mut); }
.myth-insp .m-mn{ display:block; font-size:13.3px; color:var(--m-ink); line-height:1.5; margin:4px 0 9px; }
.myth-insp a{ font-size:13.3px; font-weight:600; color:var(--m-link); text-decoration:none; }
.myth-insp a:hover{ text-decoration:underline; }

/* ---------- divine circle ---------- */
.myth-circle{ display:grid; gap:11px; }
.myth-dc{ display:flex; align-items:center; gap:10px; padding:12px 13px; background:#fff; border:1px solid var(--m-bd);
  border-radius:13px; text-decoration:none; box-shadow:var(--m-sh); transition:transform .18s; }
[data-theme="dark"] .myth-dc{ background:#121C2E; }
.myth-dc:hover{ transform:translateY(-2px); }
.myth-dc .m-av{ flex:0 0 auto; width:38px; height:38px; }
.myth-dc b{ display:block; font-size:14.4px; color:var(--m-navy); }
.myth-dc span{ display:block; font-size:12.8px; color:var(--m-mut); line-height:1.4; }

/* ---------- faq ---------- */
.myth-faq{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:11px; align-items:start; }
.myth-faq details{ background:#fff; border:1px solid var(--m-bd); border-radius:12px; box-shadow:var(--m-sh); }
[data-theme="dark"] .myth-faq details{ background:#121C2E; }
.myth-faq summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:13px 15px; font-size:15px; font-weight:500; color:var(--m-navy); }
.myth-faq summary::-webkit-details-marker{ display:none; }
.myth-faq summary:focus-visible{ outline:2px solid var(--m-blue); outline-offset:2px; border-radius:12px; }
.myth-faq summary .m-cv{ width:15px; height:15px; margin-left:auto; flex:0 0 auto; transition:transform .2s; color:var(--m-mut); }
.myth-faq details[open] summary .m-cv{ transform:rotate(180deg); }
.myth-faq details p{ margin:0; padding:0 15px 14px; font-size:14.4px; line-height:1.7; }

/* ---------- final cta ---------- */
.myth-final{ position:relative; overflow:hidden; margin:34px 0 10px; padding:34px 30px; border-radius:20px;
  border:1px solid var(--m-bd); background:linear-gradient(100deg,#F3F7FD 0%,#FBF3F7 55%,#F6F2FB 100%);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
[data-theme="dark"] .myth-final{ background:linear-gradient(100deg,#111C2E,#1B1726); }
.myth-final .m-fin-t{ flex:1 1 320px; }
.myth-final h2{ font-size:27.8px; font-weight:800; margin-bottom:6px; }
.myth-final h2 em{ font-style:normal; color:var(--m-link); }
.myth-final p{ font-size:15px; margin:0; }
.myth-final .m-peak{ position:absolute; inset:auto 0 0 0; height:62px; opacity:.5; pointer-events:none; }

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .myth-hero h1{ font-size:51.1px; }
  .myth-hero-copy{ padding:16px 18px; }
  .myth-facts{ grid-template-columns:repeat(2,1fr); }
  .myth-main{ grid-template-columns:1fr; }
  .myth-names{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
}
@media (max-width:767px){
  .myth-d-wrap{ padding:0 16px; }
  .myth-hero-grid{ grid-template-columns:1fr; }
  .myth-hero-art{ order:-1; min-height:0; aspect-ratio:16/10; }
  .myth-hero-copy{ padding:16px 16px 18px; }
  .myth-hero h1{ font-size:42.2px; letter-spacing:-1px; }
  .myth-hero .m-tag{ font-size:16.7px; }
  .myth-hero-words{ font-size:12.2px; top:12px; right:12px; }
  .myth-mantra{ white-space:normal; }
  .m-btn{ flex:1 1 auto; justify-content:center; }
  .myth-facts{ grid-template-columns:1fr; }
  .myth-forms{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 0; }
  .myth-form:nth-child(odd){ border-left:none; }
  .myth-form:nth-child(3){ border-left:none; }
  .myth-names{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .myth-inspired,.myth-circle,.myth-chipgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .myth-faq{ grid-template-columns:1fr; }
  .myth-d .m-h h2{ font-size:23.3px; }
  .myth-final{ padding:24px 20px; }
  .myth-final h2{ font-size:23.3px; }
}

.myth-name b{ overflow-wrap:normal; }
.myth-name span{ overflow-wrap:anywhere; }

/* ---------- 10 Divine Names: 2 rows x 5 ----------
   Five equal tracks on desktop and tablet gives exactly two rows of five for
   the ten names, with far more readable cards than a single ten-across row.
   minmax(0,1fr) lets the tracks shrink evenly rather than overflow. Mobile
   drops to two per row. */
.myth-names{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.myth-name b{ overflow-wrap:normal; }
.myth-name span{ overflow-wrap:anywhere; }
@media (min-width:768px) and (max-width:1199px){
  .myth-names{ gap:8px; }
  .myth-name{ padding:12px 7px 11px; }
  .myth-name b{ font-size:12.8px; letter-spacing:-.2px; }
  .myth-name span{ font-size:11.1px; line-height:1.35; }
}
@media (max-width:767px){
  .myth-names{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

/* ---------- character artwork heroes ----------
   The artwork is true vector SVG that fades to white at its own edges, so the
   panel behind it is plain white: the character dissolves into the hero with
   no rectangular boundary. CONTAINed so no part of the figure is cropped. */
/* height:auto + a max-height on the portrait stops a tall card from
   stretching the whole hero panel and leaving a large empty gap beside
   short copy. */
.myth-hero-art:has(.myth-portrait){ align-items:center; justify-content:center; padding:6px 0; background:#FFFFFF; }
.myth-hero-art img.myth-portrait{
  width:auto; height:auto; max-width:100%; max-height:392px;
  object-fit:contain; display:block; margin:auto;
}
@media (max-width:1199px){ .myth-hero-art img.myth-portrait{ max-height:314px; } }
@media (max-width:767px){ .myth-hero-art img.myth-portrait{ max-height:272px; } }
@media (max-width:767px){
  .myth-hero-art:has(.myth-portrait){ aspect-ratio:auto; min-height:244px; }
}

/* Figures with no artwork: the hero would otherwise leave its right half
   blank, and the main grid would leave a gap where the glance card sits. */
.myth-hero.is-noart .myth-hero-grid{ grid-template-columns:1fr; }
.myth-hero.is-noart .myth-hero-art{ display:none; }
.myth-main:not(:has(.myth-glance)){ grid-template-columns:1fr; }

/* With vector/raster artwork that fades to white, the whole hero panel must
   be white too -- its default cream gradient would otherwise show as a band
   beside the artwork. */
.myth-hero:has(.myth-portrait){ background:#FFFFFF; }

/* ==========================================================================
   DYNAMIC CARD GRIDS -- single source of truth.
   --------------------------------------------------------------------------
   The server (controllers/mythFiguresController + services/mythFiguresService
   .bestColumns) computes exactly how many columns a given row of cards
   should use: min(itemCount, 6) when everything fits one row, or a balanced
   split (e.g. 7 -> 4+3) when it does not. That number arrives as an inline
   custom property, e.g. style="--cols:5", on .myth-inspired / .myth-circle /
   .myth-chipgrid / .myth-forms. This is what makes "6 per row on desktop,
   never wasted space, never an orphan card" work for EVERY section on EVERY
   one of the 50 pages, whatever its actual item count is -- no per-page CSS,
   no guessing via auto-fit/minmax.
   ========================================================================== */
.myth-inspired,.myth-circle,.myth-chipgrid{
  display:grid; gap:11px;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}
@media (max-width:1199px){
  /* Tablet never exceeds 3 columns, regardless of --cols, so cards stay a
     comfortable reading width; fewer than 3 items still uses their own count. */
  .myth-inspired,.myth-circle,.myth-chipgrid{
    grid-template-columns:repeat(var(--cols-t,3),minmax(0,1fr));
  }
}

/* Divine Names card that is also a real baby name: a small explicit cue, so
   the name is reachable once here rather than repeated under Names Inspired. */
.myth-name .m-bn{ display:block; margin-top:7px; font-style:normal; font-size:11.7px;
  font-weight:600; color:var(--m-link); letter-spacing:.01em; text-align:center; }
.myth-name:hover .m-bn{ text-decoration:underline; }

/* ==========================================================================
   SACRED PLACES / FESTIVALS & TRADITIONS — shared banner sections
   --------------------------------------------------------------------------
   Both sections use the SAME two shared images across all 50 pages
   (public/images/mythology/shared/{sacred-places,festivals-traditions}.webp)
   -- the visual banner is global, the chip content beneath/beside it is
   entirely character-specific and comes from fig.temples / fig.festivals.
   ========================================================================== */
.myth-banner-sec{ display:block; margin-bottom:14px; }
/* Full content width, natural aspect ratio (height:auto + intrinsic
   width/height attributes): never cropped, never distorted, no layout shift. */
.myth-banner-img{ display:block; width:100%; height:auto; aspect-ratio:1907/825;
  border-radius:var(--m-r); border:1px solid var(--m-bd); box-shadow:var(--m-sh); }
.myth-banner-cap{ padding:14px 2px 0; }
.myth-banner-cap h2{ font-size:24.4px; font-weight:700; margin-bottom:4px; }
.myth-banner-cap .m-sub{ font-size:15px; color:var(--m-mut); }
.myth-chipgrid{ margin-top:2px; }
.myth-chip-card{ display:flex; align-items:center; gap:10px; padding:13px 14px; background:#fff;
  border:1px solid var(--m-bd); border-radius:12px; box-shadow:var(--m-sh); font-size:14.4px; color:var(--m-ink); }
[data-theme="dark"] .myth-chip-card{ background:#121C2E; }
.myth-chip-card svg{ width:18px; height:18px; flex:0 0 auto; }
.myth-empty{ font-size:14.4px; color:var(--m-mut); font-style:italic; margin:4px 0 0; }

/* story insight card built from a verified epithet story */
.myth-form .m-cap{ display:block; font-style:normal; font-size:12.8px; font-weight:600; color:var(--m-gold); margin:-2px 0 6px; }
.myth-form.is-legend{ text-align:left; }
.myth-form.is-legend .m-orb{ margin-left:0; }

/* The hero panel stays WHITE in dark mode, because the character artwork
   fades to white at its edges and must not look pasted onto a dark box. So
   in dark mode the hero is a light card on the dark page, and the text INSIDE
   it takes the light-mode (dark, high-contrast) tokens. Without this, dark
   mode put light text on the white panel at about 1.1:1, which is invisible. */
[data-theme="dark"] .myth-hero:has(.myth-portrait){
  --m-navy:#102A6B; --m-navy-d:#0B225C; --m-ink:#172033; --m-mut:#26365C;
  --m-gold:#8A6208; --m-link:#C8136A; --m-card:#F5F9FE; --m-bd:#E4EAF3;
}
[data-theme="dark"] .myth-hero:has(.myth-portrait) .m-btn-s{ background:#FFFFFF; border-color:#E4EAF3; }

/* Long names (Parashurama, Madhavendra) must never break mid-word or clip.
   Each card is its own size container, so a name scales down ONLY when its
   card is narrow (e.g. 5 view-all columns at 768px) and keeps its full size
   everywhere else; min() caps it at the normal size. */
.myth-insp, .myth-dc{ container-type:inline-size; }
.myth-insp b{ font-size:min(15.5px, 10.6cqi); overflow-wrap:normal; }
.myth-dc b{ font-size:min(14.4px, 10.6cqi); }

/* ==========================================================================
   v10.338 — Mythology standardisation
   ========================================================================== */

/* "Names Inspired by …" card: the whole card is now one <a> (it was a <div>
   with only "View Name" clickable). Same look as before; the hover/focus
   state makes it obvious the entire card is the target. */
a.myth-insp{ display:block; text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.myth-insp:hover{ border-color:#E7C9A0; box-shadow:0 10px 24px -16px rgba(184,134,11,.55); transform:translateY(-2px); }
a.myth-insp:focus-visible{ outline:3px solid var(--m-blue,#1677D2); outline-offset:2px; }
.myth-insp .m-view{ display:inline-block; font-size:13.3px; font-weight:600; color:var(--m-link); }
a.myth-insp:hover .m-view{ text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ a.myth-insp{ transition:none; } a.myth-insp:hover{ transform:none; } }

/* Link from a figure's story card to its full published Name Story */
.myth-story-more{ margin:4px 0 0; }
.myth-story-more a{ font-size:14.4px; font-weight:600; color:var(--m-link); text-decoration:none; }
.myth-story-more a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   HERO PORTRAIT — size & position (all 50 figures, one rule set)
   Every portrait is a 450x450 WEBP whose own artwork starts 9–14% below its
   top edge (measured across all 50 files) and ends ~3% above its bottom.
   Desktop: the portrait is drawn ~17% larger (392 -> 460px), moved right by
   7% of the art column, and lifted so that part of that blank top band is
   tucked behind the hero's top edge -- never any of the artwork itself.
   Tablet/mobile use smaller, recalculated values (see below).
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  .myth-hero-art:has(.myth-portrait){ padding:0; min-height:430px; align-items:flex-start; overflow:hidden; }
  .myth-hero-art img.myth-portrait{
    width:460px; height:460px; max-width:none; max-height:none;
    margin:-30px auto 0; position:relative; left:7%;
  }
  .myth-hero-words{ z-index:1; }
}
@media (min-width:768px) and (max-width:1199px){
  /* Two columns still, narrower art column: recalculated, smaller values. */
  .myth-hero-art:has(.myth-portrait){ padding:0; min-height:340px; align-items:flex-start; overflow:hidden; }
  .myth-hero-art img.myth-portrait{
    /* No sideways shift on tablet: the narrower column leaves no room for
       it without the artwork running under the hero's corner words. */
    width:min(340px, 88%); height:auto; max-height:none;
    margin:-20px auto 0; position:relative; left:0;
  }
  /* Keep the corner words (Shiva) readable over the larger portrait */
  .myth-hero-words{ background:rgba(255,255,255,.82); padding:6px 10px; border-radius:10px; }
}
@media (max-width:767px){
  /* Stacked (art above the text): no sideways shift at all -- the figure
     stays centred. +10% (272 -> 300px) and a 14px lift. */
  .myth-hero-art:has(.myth-portrait){ padding:0; min-height:0; overflow:hidden; }
  .myth-hero-art img.myth-portrait{ width:min(300px, 84vw); height:auto; max-height:none; margin:-14px auto 0; }
}
/* Below 900px the art column is too narrow for the decorative corner words
   (aria-hidden; Shiva only) to sit beside the character -- they would cover
   the face. They are dropped there; the words' meaning is already carried by
   the tagline and quote in the hero copy. */
@media (max-width:899px){ .myth-hero-words{ display:none; } }

/* v10.352 — four main cards in one row; colourful icon orbs; legends in their own box */
.myth-four{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:0; }
@media (max-width:860px){ .myth-four{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px 0; } .myth-four .myth-form:nth-child(odd){ border-left:none; } }
.m-orb.m-orb-color{ display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; margin:0 auto 10px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 42%), linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow:0 8px 18px -6px color-mix(in srgb, var(--g1) 70%, transparent), inset 0 -3px 6px rgba(0,0,0,.12); border:2px solid #fff; }
.m-orb.m-orb-color svg{ width:28px !important; height:28px !important; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.myth-four .myth-form b{ font-size:16.5px; }
.myth-legends-box{ margin-top:26px; border:1px solid var(--m-bd); border-radius:18px; padding:18px; background:var(--m-surface, #FFFCF8); }
.myth-legends-h{ margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#8A5A12; }
.myth-legends{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.myth-legend{ display:flex; gap:14px; align-items:flex-start; text-align:left; background:var(--m-card, #fff); border:1px solid var(--m-bd); border-radius:14px; padding:14px 16px; }
.myth-legend .m-orb.m-orb-color{ flex:0 0 auto; margin:0; width:50px; height:50px; }
.myth-legend .m-orb.m-orb-color svg{ width:24px !important; height:24px !important; }
.myth-legend b{ display:block; font-size:16px; color:var(--m-navy); margin-bottom:3px; }
.myth-legend .m-cap{ display:block; font-style:normal; font-weight:700; font-size:13px; color:#8A5A12; margin-bottom:6px; }
.myth-legend span{ font-size:14.5px; line-height:1.65; color:var(--m-mut); }
[data-theme="dark"] .myth-legends-h,[data-theme="dark"] .myth-legend .m-cap{ color:#F5C77E; }
[data-theme="dark"] .m-orb.m-orb-color{ border-color:rgba(255,255,255,.85); }

/* --------------------------------------------------------------------------
   v10.443 mythology visual refresh — the character art now arrives as a
   600x600 pastel canvas with its own gold ornamental frame. The old rules
   above lifted the image (negative top margin) and shifted it sideways to
   hide blank space in the previous white-background art; with a framed
   canvas that would crop the frame, so the portrait is now centred, shown
   whole, with soft rounded corners and a gentle gold-tinted shadow.
   -------------------------------------------------------------------------- */
.myth-hero-art img.myth-portrait{ object-fit:contain; aspect-ratio:1 / 1; border-radius:22px;
  box-shadow:0 0 0 1px rgba(201,162,84,.28), 0 16px 34px -18px rgba(132,96,36,.45); }
@media (min-width:1200px){
  .myth-hero-art:has(.myth-portrait){ padding:18px 0; min-height:0; align-items:center; overflow:visible; }
  .myth-hero-art img.myth-portrait{ width:420px; height:420px; margin:auto; left:0; }
}
@media (min-width:768px) and (max-width:1199px){
  .myth-hero-art:has(.myth-portrait){ padding:14px 0; min-height:0; align-items:center; overflow:visible; }
  .myth-hero-art img.myth-portrait{ width:min(330px, 88%); height:auto; margin:auto; }
}
@media (max-width:767px){
  .myth-hero-art:has(.myth-portrait){ padding:14px 0 6px; overflow:visible; }
  .myth-hero-art img.myth-portrait{ width:min(300px, 80vw); height:auto; margin:0 auto; }
}

/* ==========================================================================
   v10.445 Illustrated hero banners (Radha, Krishna, Shiva, Parvati, Ganesha,
   Hanuman, Saraswati, Lakshmi, Durga). The artwork carries the name, line and
   both buttons; the real H1/copy stay in the HTML (visually hidden on
   desktop). The painted buttons are real links laid over the artwork.
   ========================================================================== */
.myth-vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.myth-hero.myth-hero-banner{padding:0;box-shadow:0 0 0 1px rgba(201,162,84,.28),0 16px 34px -20px rgba(132,96,36,.45)}
.myth-bh-frame{position:relative;width:100%;line-height:0}
.myth-bh-img{display:block;width:100%;height:100%;object-fit:cover}
.myth-bh-hot{position:absolute;display:block;border-radius:999px;transition:box-shadow .15s ease,transform .15s ease}
.myth-bh-hot:hover{box-shadow:0 0 0 3px rgba(255,255,255,.7),0 8px 18px -6px rgba(214,0,94,.55);transform:translateY(-1px)}
.myth-bh-hot:focus-visible{outline:3px solid #D6005E;outline-offset:2px}
.myth-bh-copy .myth-bh-lede{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.myth-bh-copy .myth-bh-cta{display:none}
.myth-bh-copy .myth-quote{margin:14px 22px 16px}
@media (max-width:640px){
  .myth-bh-hot{display:none}
  .myth-hero.myth-hero-banner{border-radius:16px}
  .myth-bh-copy{padding:12px 14px 14px}
  .myth-bh-copy .myth-bh-lede{position:static!important;width:auto;height:auto;margin:0 0 10px;overflow:visible;clip:auto;white-space:normal;font-size:14.5px;line-height:1.5}
  .myth-bh-copy .myth-bh-cta{display:flex;flex-wrap:nowrap;gap:8px}
  .myth-bh-copy .myth-bh-cta .m-btn{flex:1 1 0;min-width:0;justify-content:center;padding-left:10px;padding-right:10px;font-size:14px}
  .myth-bh-copy .myth-quote{margin:12px 0 0}
}