/* Magikal Nav. IHUB-CUSTOM */
:root {
  --mgk-indigo: #12101c;
  --mgk-indigo-2: #1d1a2c;
  --mgk-gold: #c9a227;
  --mgk-gold-soft: rgba(201, 162, 39, .14);
  --mgk-muted: #a9a2bd;
  --mgk-bar-h: 56px;
  --mgk-safe: env(safe-area-inset-bottom, 0px);
  --mgk-sheet-bg: #ffffff;
  --mgk-sheet-fg: #1d1a2c;
  --mgk-sheet-sub: #6b6580;
  --mgk-sheet-line: #ece9f2;
  --mgk-sheet-hover: #f6f4fa;
  --mgk-z: 990;
}

.mgk-icon { width: 24px; height: 24px; flex: none; display: block; }
.mgk-icon path, .mgk-icon circle, .mgk-icon rect { vector-effect: non-scaling-stroke; }

/* ---------- Bottom bars (global + reader) ---------- */
.mgk-bnav, .mgk-rbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--mgk-z);
  display: none;
  background: var(--mgk-indigo);
  border-top: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 -6px 20px rgba(18, 16, 28, .18);
  padding: 0 12px var(--mgk-safe);
  transition: transform .25s ease;
}
html.mgk-mobile .mgk-bnav, html.mgk-mobile .mgk-rbar { display: flex; }
html.mgk-mobile.mgk-has-bar body { padding-bottom: calc(var(--mgk-bar-h) + 8px + var(--mgk-safe)); }

.mgk-bnav__item, .mgk-rbar__btn {
  flex: 1 1 0; min-width: 48px; min-height: var(--mgk-bar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--mgk-muted); text-decoration: none; background: none; border: 0; padding: 6px 2px; margin: 0;
  font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; letter-spacing: .01em; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mgk-bnav__item:hover, .mgk-rbar__btn:hover { color: #fff; text-decoration: none; }
.mgk-bnav__item.is-active { color: var(--mgk-gold); }
.mgk-bnav__item.is-active .mgk-bnav__label { font-weight: 600; }
.mgk-bnav__label, .mgk-rbar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* The highlighted (centre) button */
.mgk-bnav__item--hl .mgk-bnav__orb {
  width: 46px; height: 46px; border-radius: 50%; margin-top: -18px;
  display: grid; place-items: center;
  background: var(--mgk-gold); color: var(--mgk-indigo);
  box-shadow: 0 4px 14px rgba(201, 162, 39, .45), 0 0 0 4px var(--mgk-indigo);
}
.mgk-bnav__item--hl { color: var(--mgk-gold); }

.mgk-rbar.is-hidden { transform: translateY(calc(100% + 2px)); }
.mgk-rbar__btn[disabled] { opacity: .35; cursor: default; }
.mgk-rbar__progress {
  position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: var(--mgk-gold); transform-origin: 0 50%; transform: scaleX(var(--mgk-p, 0));
}

.mgk-badge {
  position: absolute; top: 4px; left: 50%; margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--mgk-gold); color: var(--mgk-indigo);
  font: 700 10px/18px system-ui, sans-serif; text-align: center;
}
.mgk-badge[hidden] { display: none; }

/* ---------- Desktop reader toolbar (right side) ---------- */
.mgk-rtool {
  position: fixed; top: 50%; z-index: var(--mgk-z);
  display: none; flex-direction: column; gap: 6px; padding: 8px;
  transform: translateY(-50%);
  background: var(--mgk-sheet-bg); border: 1px solid var(--mgk-sheet-line); border-radius: 28px;
  box-shadow: 0 8px 30px rgba(18, 16, 28, .12);
}
html.mgk-reading:not(.mgk-mobile) .mgk-rtool { display: flex; }
.mgk-rtool__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; margin: 0;
  display: grid; place-items: center; position: relative;
  background: transparent; color: var(--mgk-sheet-fg); cursor: pointer; text-decoration: none;
}
.mgk-rtool__btn:hover { background: var(--mgk-gold-soft); color: var(--mgk-indigo); }
.mgk-rtool__btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.mgk-rtool__sep { height: 1px; margin: 2px 8px; background: var(--mgk-sheet-line); }
.mgk-rtool .mgk-badge { top: 0; left: auto; right: -4px; margin: 0; }
.mgk-rtool__btn .mgk-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--mgk-indigo); color: #fff; font: 500 12px/1 system-ui, sans-serif;
  padding: 6px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.mgk-rtool__btn:hover .mgk-tip, .mgk-rtool__btn:focus-visible .mgk-tip { opacity: 1; }

.mgk-progress-top {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: calc(var(--mgk-z) + 1);
  background: var(--mgk-gold); transform-origin: 0 50%; transform: scaleX(var(--mgk-p, 0));
  display: none; pointer-events: none;
}
html.mgk-reading:not(.mgk-mobile) .mgk-progress-top { display: block; }

/* ---------- Sheets (Contents, Display settings) ---------- */
.mgk-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--mgk-z) + 10);
  background: rgba(18, 16, 28, .45); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mgk-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mgk-sheet {
  position: fixed; z-index: calc(var(--mgk-z) + 11);
  display: flex; flex-direction: column;
  background: var(--mgk-sheet-bg); color: var(--mgk-sheet-fg);
  visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
  font-family: inherit;
}
.mgk-sheet.is-open { visibility: visible; transition: transform .25s ease; }
html.mgk-mobile .mgk-sheet {
  left: 0; right: 0; bottom: 0; max-height: 82vh; border-radius: 18px 18px 0 0;
  transform: translateY(100%); padding-bottom: var(--mgk-safe);
}
html.mgk-mobile .mgk-sheet.is-open { transform: none; }
html:not(.mgk-mobile) .mgk-sheet {
  top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
  transform: translateX(100%); box-shadow: -12px 0 40px rgba(18, 16, 28, .18);
}
html:not(.mgk-mobile) .mgk-sheet.is-open { transform: none; }

.mgk-sheet__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--mgk-sheet-line);
}
html.mgk-mobile .mgk-sheet__head::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 2px; background: var(--mgk-sheet-line);
}
.mgk-sheet__titles { flex: 1; min-width: 0; }
.mgk-sheet__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: inherit; }
.mgk-sheet__sub { margin: 2px 0 0; font-size: 13px; color: var(--mgk-sheet-sub); }
.mgk-sheet__close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit;
  display: grid; place-items: center; cursor: pointer;
}
.mgk-sheet__close:hover { background: var(--mgk-sheet-hover); }
.mgk-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 16px; -webkit-overflow-scrolling: touch; }

/* Contents list */
.mgk-toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.mgk-toc__link {
  display: flex; gap: 14px; align-items: baseline; padding: 12px 20px;
  color: var(--mgk-sheet-fg); text-decoration: none; font-size: 15px; line-height: 1.4;
}
.mgk-toc__link:hover { background: var(--mgk-sheet-hover); color: var(--mgk-sheet-fg); text-decoration: none; }
.mgk-toc__num { flex: none; min-width: 28px; color: var(--mgk-sheet-sub); font-variant-numeric: tabular-nums; font-size: 13px; }
.mgk-toc__link.is-current { background: var(--mgk-gold-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--mgk-gold); }
.mgk-toc__link.is-current .mgk-toc__num { color: #8a6d10; }

/* Display settings */
.mgk-aa { padding: 8px 20px 4px; }
.mgk-aa__row { padding: 12px 0; border-bottom: 1px solid var(--mgk-sheet-line); }
.mgk-aa__row:last-child { border-bottom: 0; }
.mgk-aa__label { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--mgk-sheet-sub); text-transform: uppercase; letter-spacing: .06em; }
.mgk-aa__size { display: flex; align-items: center; gap: 12px; }
.mgk-aa__size button {
  width: 48px; height: 44px; border-radius: 10px; border: 1px solid var(--mgk-sheet-line);
  background: var(--mgk-sheet-bg); color: var(--mgk-sheet-fg); cursor: pointer; font-family: Georgia, serif;
}
.mgk-aa__size button:hover:not([disabled]) { border-color: var(--mgk-gold); }
.mgk-aa__size button[disabled] { opacity: .35; cursor: default; }
.mgk-aa__dots { flex: 1; display: flex; justify-content: center; gap: 8px; }
.mgk-aa__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--mgk-sheet-line); }
.mgk-aa__dots span.is-on { background: var(--mgk-gold); }
.mgk-aa__choices { display: flex; gap: 10px; }
.mgk-aa__choice {
  flex: 1; min-height: 44px; border-radius: 10px; border: 2px solid var(--mgk-sheet-line);
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 8px;
}
.mgk-aa__choice[aria-pressed="true"] { border-color: var(--mgk-gold); }
.mgk-aa__choice--default { background: #fff; color: #1d1a2c; }
.mgk-aa__choice--sepia { background: #f4ecd8; color: #3b2f1e; }
.mgk-aa__choice--night { background: #12101c; color: #e6e1f2; }
.mgk-aa__choice--plain { background: var(--mgk-sheet-bg); color: var(--mgk-sheet-fg); }

/* ---------- Reading column & display settings ---------- */
html.mgk-reading.mgk-col .mgk-article,
html.mgk-reading.mgk-col article:has(.mgk-reader-text) { max-width: var(--mgk-col, 720px); margin-left: auto; margin-right: auto; }
html.mgk-reading .mgk-reader-text { font-size: calc(1em * var(--mgk-fs, 1)); }
html.mgk-fs-1 { --mgk-fs: .9; }
html.mgk-fs-2 { --mgk-fs: 1; }
html.mgk-fs-3 { --mgk-fs: 1.12; }
html.mgk-fs-4 { --mgk-fs: 1.25; }
html.mgk-fs-5 { --mgk-fs: 1.4; }
html.mgk-reading .mgk-reader-text p { line-height: 1.75; }
html.mgk-reading.mgk-ls-wide .mgk-reader-text p { line-height: 2.05; }

html.mgk-reading.mgk-theme-sepia body,
html.mgk-reading.mgk-theme-sepia .tm-page,
html.mgk-reading.mgk-theme-sepia .tm-main,
html.mgk-reading.mgk-theme-sepia .tm-main .uk-section { background: #f4ecd8 !important; }
html.mgk-reading.mgk-theme-sepia .tm-main,
html.mgk-reading.mgk-theme-sepia .mgk-article,
html.mgk-reading.mgk-theme-sepia :is(.tm-main, .mgk-article) :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, .uk-article-meta, .article-info) { color: #3b2f1e; }

html.mgk-reading.mgk-theme-night body,
html.mgk-reading.mgk-theme-night .tm-page,
html.mgk-reading.mgk-theme-night .tm-main,
html.mgk-reading.mgk-theme-night .tm-main .uk-section { background: #12101c !important; }
html.mgk-reading.mgk-theme-night .tm-main,
html.mgk-reading.mgk-theme-night .mgk-article,
html.mgk-reading.mgk-theme-night :is(.tm-main, .mgk-article) :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, .uk-article-meta, .article-info) { color: #e6e1f2; }
html.mgk-reading.mgk-theme-night .mgk-article a, html.mgk-reading.mgk-theme-night .mgk-reader-text a { color: #e2c25a; }
html.mgk-reading.mgk-theme-night {
  --mgk-sheet-bg: #1d1a2c; --mgk-sheet-fg: #ece8f6; --mgk-sheet-sub: #a9a2bd;
  --mgk-sheet-line: #2e2a42; --mgk-sheet-hover: #26223a;
}

/* ---------- Chapter links above and below the text ---------- */
.mgk-chapter-top {
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 28px; padding: 10px 0; border-bottom: 1px solid rgba(127, 120, 150, .2);
  font-size: 14px; line-height: 1.4;
}
html:not(.mgk-mobile) .mgk-chapter-top { display: flex; }
.mgk-chapter-top a { text-decoration: none; }
.mgk-chapter-top__prev, .mgk-chapter-top__next { flex: 0 0 90px; white-space: nowrap; }
.mgk-chapter-top__next { text-align: right; }
.mgk-chapter-top__where { flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgk-chapter-top__count { opacity: .7; }

.mgk-chapter-end { margin: 48px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mgk-chapter-end__next {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; max-width: 440px; padding: 16px 20px; border-radius: 14px;
  background: var(--mgk-indigo); color: #fff !important; text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(18, 16, 28, .18); transition: transform .15s ease;
}
.mgk-chapter-end__next:hover { transform: translateY(-1px); }
.mgk-chapter-end__label { font-weight: 700; font-size: 17px; color: var(--mgk-gold); }
.mgk-chapter-end__title { font-size: 14px; opacity: .85; }
.mgk-chapter-end__caught-up { font-style: italic; opacity: .8; margin: 0; }
.mgk-chapter-end__links { display: flex; gap: 20px; align-items: center; font-size: 14px; flex-wrap: wrap; justify-content: center; }
.mgk-chapter-end__links a { text-decoration: none; }
.mgk-linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mgk-chapter-end__cta {
  width: 100%; max-width: 440px; padding: 18px 20px; border-radius: 14px;
  border: 1px dashed rgba(201, 162, 39, .6); background: rgba(201, 162, 39, .06);
}
.mgk-chapter-end__cta-text { margin: 0 0 12px; }
.mgk-chapter-end__cta-btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--mgk-gold); color: var(--mgk-indigo) !important; font-weight: 700; text-decoration: none !important;
}

/* ---------- Accessibility ---------- */
.mgk-bnav a:focus-visible, .mgk-rbar button:focus-visible, .mgk-rtool__btn:focus-visible,
.mgk-sheet button:focus-visible, .mgk-sheet a:focus-visible {
  outline: 2px solid var(--mgk-gold); outline-offset: 2px;
}
.mgk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .mgk-bnav, .mgk-rbar, .mgk-sheet, .mgk-backdrop, .mgk-chapter-end__next { transition: none !important; }
}

@media print {
  .mgk-bnav, .mgk-rbar, .mgk-rtool, .mgk-progress-top, .mgk-chapter-top, .mgk-chapter-end { display: none !important; }
}

/* ---------- Buttons used on Tales and Glimpses ---------- */
.mgk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.1;
  text-decoration: none !important; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.mgk-btn:active { transform: translateY(1px); }
.mgk-btn--gold { background: var(--mgk-gold); color: var(--mgk-indigo) !important; }
.mgk-btn--gold:hover, .mgk-btn--gold:focus-visible { background: #dbb43a; }
.mgk-btn--ghost { background: transparent; color: var(--mgk-indigo) !important; border-color: rgba(18, 16, 28, .28); }
.mgk-btn--ghost:hover, .mgk-btn--ghost:focus-visible { border-color: var(--mgk-indigo); }
.mgk-empty { color: #6b6580; font-style: italic; }

/* ---------- Tales: one card per story ---------- */
.mgk-series-list { display: grid; gap: 28px; margin: 8px 0 24px; }
.mgk-series {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start;
  background: #fff; border: 1px solid #ece9f2; border-radius: 18px; padding: 24px;
  box-shadow: 0 10px 30px rgba(18, 16, 28, .06);
}
.mgk-series__cover img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 28px rgba(18, 16, 28, .28); }
.mgk-series__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a7b12; margin-bottom: 6px; }
.mgk-series__title { margin: 0 0 10px !important; font-size: 30px; line-height: 1.15; }
.mgk-series__title a { color: var(--mgk-indigo); text-decoration: none; }
.mgk-series__blurb { color: #3b3550; font-size: 17px; line-height: 1.6; }
.mgk-series__blurb > :last-child { margin-bottom: 0; }
.mgk-series__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mgk-series__where { margin: 8px 0 0; font-size: 14px; color: #6b6580; }
.mgk-series__latest { margin: 12px 0 0; font-size: 14px; color: #6b6580; }
.mgk-series__latest a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mgk-series__toc { margin-top: 18px; border-top: 1px solid #ece9f2; padding-top: 12px; }
.mgk-series__toc summary { cursor: pointer; font-weight: 600; color: var(--mgk-indigo); padding: 6px 0; list-style-position: inside; }
.mgk-series__toc ol { margin: 8px 0 0; padding-left: 1.6em; columns: 2 260px; column-gap: 32px; }
.mgk-series__toc li { break-inside: avoid; padding: 4px 0; color: #9a94ad; }
.mgk-series__toc a { color: #2a2540; text-decoration: none; }
.mgk-series__toc a:hover { text-decoration: underline; }
.mgk-series__toc a.is-current { color: #9a7b12; font-weight: 700; }

@media (max-width: 700px) {
  .mgk-series { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .mgk-series__cover { justify-self: center; width: 150px; }
  .mgk-series__title { font-size: 26px; }
  .mgk-series__actions .mgk-btn { flex: 1 1 auto; }
}

/* ---------- Glimpses ---------- */
.mgk-glimpses { display: grid; gap: 22px; margin: 8px 0 24px; max-width: 720px; }
.mgk-glimpse {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1d1830 0%, var(--mgk-indigo) 70%);
  color: #ece8f6; border-radius: 18px; padding: 28px 26px 24px;
  box-shadow: 0 14px 34px rgba(18, 16, 28, .22);
}
.mgk-glimpse::before {
  content: "\201C"; position: absolute; top: -22px; right: 18px;
  font-family: Georgia, "Times New Roman", serif; font-size: 150px; line-height: 1; color: rgba(201, 162, 39, .18);
  pointer-events: none;
}
.mgk-glimpse__from { padding-right: 56px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mgk-gold); margin-bottom: 8px; }
.mgk-glimpse__title { padding-right: 40px; margin: 0 0 14px !important; font-size: 22px; line-height: 1.25; color: #fff !important; }
.mgk-glimpse__title a { color: inherit !important; text-decoration: none; }
.mgk-glimpse__text { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.7; color: #e4def2; }
.mgk-glimpse__text p { margin: 0 0 .9em; color: inherit; }
.mgk-glimpse__text > :last-child { margin-bottom: 0; }
.mgk-glimpse__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.mgk-glimpse .mgk-btn--ghost { color: #ece8f6 !important; border-color: rgba(236, 232, 246, .35); }
.mgk-glimpse .mgk-btn--ghost:hover { border-color: #ece8f6; }
.mgk-glimpse__more { margin-left: auto; color: var(--mgk-muted) !important; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.mgk-glimpse--single { margin: 4px 0 24px; max-width: 720px; }

@media (max-width: 700px) {
  .mgk-glimpse { padding: 24px 20px 20px; border-radius: 16px; }
  .mgk-glimpse__text { font-size: 17px; }
  .mgk-glimpse__actions .mgk-btn--gold { flex: 1 1 100%; }
  .mgk-glimpse__more { margin-left: 0; }
}