@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --content-max-width: 980px;
  --mono-font: "JetBrains Mono", "Iosevka", "Fira Code", monospace;
  --ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A fast, progressive cross-page transition. The slight contraction and
 * expansion reads like the page briefly receding into the background glyphs. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: arcane-page-out 140ms ease-in both;
}

::view-transition-new(root) {
  animation: arcane-page-in 220ms ease-out both;
}

@keyframes arcane-page-out {
  to {
    opacity: 0;
    transform: scale(0.992);
  }
}

@keyframes arcane-page-in {
  from {
    opacity: 0;
    transform: scale(1.008);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

.navy {
  --bg: #0c0c0d;
  --fg: #d4d4d8;
  --sidebar-bg: #111113;
  --sidebar-fg: #9ca3af;
  --sidebar-active: #38d9eb;
  --links: #38d9eb;
  --inline-code-color: #fbbf24;
  --quote-bg: #18181b;
  --quote-border: #2a2a2e;
  --table-border-color: #1f1f23;
  --table-header-bg: #18181b;
  --table-alternate-bg: #0f0f12;
  --theme-popup-bg: #18181b;
  --theme-popup-border: #27272a;
  --theme-hover: #1f1f23;
  --searchbar-bg: #18181b;
  --searchbar-fg: #d4d4d8;
}

/*
 * Low-contrast geometric field: circles, a five-pointed star and radial lines
 * suggest an arcane diagram without placing a busy texture behind the text.
 */
.navy #mdbook-body-container {
  isolation: isolate;
  min-height: 100vh;
}

.navy #mdbook-body-container::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #0c0c0d;
  background-image:
    radial-gradient(circle at 78% 12%, rgba(44, 48, 54, 0.09), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(38, 42, 48, 0.08), transparent 28%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='880' height='880' viewBox='0 0 880 880'%3E%3Cg fill='none' stroke='%2323262b' stroke-width='1' opacity='.46'%3E%3Ccircle cx='440' cy='440' r='292'/%3E%3Ccircle cx='440' cy='440' r='218'/%3E%3Ccircle cx='440' cy='440' r='74'/%3E%3Cpath d='M440 116 622 691 145 344 735 344 258 691Z'/%3E%3Cpath d='M440 116V440M622 691 440 440M145 344 440 440M735 344 440 440M258 691 440 440' opacity='.58'/%3E%3Cpath d='M440 218 651 371 570 620H310L229 371Z'/%3E%3C/g%3E%3Cg fill='%23282b30' opacity='.42'%3E%3Ccircle cx='440' cy='116' r='3'/%3E%3Ccircle cx='622' cy='691' r='3'/%3E%3Ccircle cx='145' cy='344' r='3'/%3E%3Ccircle cx='735' cy='344' r='3'/%3E%3Ccircle cx='258' cy='691' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-position: center, center, center 72px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 880px 880px;
}

.navy .page-wrapper {
  background-color: transparent;
}

.navy .sidebar {
  background-color: rgba(17, 17, 19, 0.91);
  backdrop-filter: blur(2px);
}

.content main { max-width: var(--content-max-width); }

h1, h2, h3 {
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #f4f4f5;
}

h1 code { color: #fbbf24; }

pre {
  border: 1px solid #27272a;
  border-radius: 8px;
}

code {
  font-size: 0.875em;
}

table { width: 100%; }

.menu-title {
  font-weight: 700;
  font-size: 1.05rem;
}

/* ── Landing Page ── */

.page-landing #mdbook-sidebar {
  display: none;
}
.page-landing #mdbook-body-container {
  left: 0 !important;
}

#landing-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  padding: 2rem 1rem;
}

.landing-content {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.landing-title {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #f4f4f5;
  margin-bottom: 2.5rem;
  line-height: 1.15;
}

.landing-search {
  position: relative;
  margin-bottom: 1.25rem;
}

.landing-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #71717a;
  pointer-events: none;
}

#big-search {
  width: 100%;
  padding: 16px 20px 16px 52px;
  font-family: var(--ui-font);
  font-size: 1.125rem;
  color: #f4f4f5;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

#big-search:focus {
  border-color: #38d9eb;
  box-shadow: 0 0 0 3px rgba(56, 217, 235, 0.15);
}

#big-search::placeholder {
  color: #52525b;
}

.landing-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2.5rem;
}

.landing-tag {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.875rem;
  color: #a1a1aa;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  user-select: none;
}

.landing-tag:hover {
  border-color: #38d9eb;
  color: #38d9eb;
}

.landing-note {
  font-size: 0.9rem;
  color: #71717a;
  margin: 0;
}

/* ── Incantations ── */

/* Keep entries in SUMMARY for generation, search, ordering and keyboard
 * navigation, but expose the collection through its About page and custom UI. */
#mdbook-sidebar .chapter-item:has(a[href*="incantations/0x"]),
.sidebar-iframe-inner .chapter-item:has(a[href*="incantations/0x"]),
#mdbook-sidebar .chapter-item:has(a[href*="rituals/0x"]),
.sidebar-iframe-inner .chapter-item:has(a[href*="rituals/0x"]) {
  display: none;
}

body:has(.incantation-marker) .nav-wrapper,
body:has(.incantation-marker) .nav-wide-wrapper {
  display: none;
}

.incantation-entry {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - var(--menu-bar-height) - 50px);
  padding: clamp(2rem, 5vh, 5rem) 0 1.5rem;
}

.incantation-entry h1 {
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #a1a1aa;
}

.incantation-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  padding: 3rem 1rem;
}

.incantation-stage pre {
  min-width: min(28rem, 80vw);
  margin: 0;
  padding: 2rem 2.5rem;
  border-color: rgba(56, 217, 235, 0.12);
  background: rgba(12, 12, 13, 0.72);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.28);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.75;
}

.incantation-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(56, 217, 235, 0.1);
  font-family: var(--mono-font);
  font-size: clamp(1.2rem, calc(0.25vw + 0.8rem), 1.6rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.incantation-nav > :first-child {
  justify-self: start;
}

.incantation-nav > :last-child {
  justify-self: end;
}

.incantation-nav a {
  color: #38d9eb;
}

.incantation-nav-position,
.incantation-nav-disabled {
  color: #71717a;
}

.incantation-intro + p {
  margin-top: 2rem;
}

/* ── Rituals ── */

body:has(.ritual-marker) .nav-wrapper,
body:has(.ritual-marker) .nav-wide-wrapper {
  display: none;
}

.ritual-entry {
  --ritual-accent: #a78bfa;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(1.5rem, 4vh, 3rem);
  min-height: calc(100vh - var(--menu-bar-height) - 50px);
  padding: clamp(2rem, 5vh, 4.5rem) 0 1.5rem;
}

.ritual-entry h1 {
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.045em;
  color: #c4b5fd;
}

.ritual-brief,
.ritual-solution {
  width: min(44rem, calc(100vw - 3rem));
  margin-inline: auto;
}

.ritual-brief {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 10px;
  background: rgba(12, 12, 13, 0.68);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.22);
}

.ritual-brief p:last-child {
  margin-bottom: 0;
}

.ritual-verse {
  margin-top: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.7;
  color: #a1a1aa;
}

.ritual-hint {
  color: #a1a1aa;
}

.ritual-solution {
  align-self: start;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 10px;
  background: rgba(15, 15, 18, 0.78);
  overflow: hidden;
}

.ritual-solution summary {
  padding: 1rem 1.25rem;
  color: #c4b5fd;
  font-family: var(--mono-font);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.ritual-solution summary:hover,
.ritual-solution summary:focus-visible {
  background: rgba(167, 139, 250, 0.07);
}

.ritual-solution[open] summary {
  border-bottom: 1px solid rgba(167, 139, 250, 0.14);
}

.ritual-solution-content {
  padding: 1.25rem;
  animation: ritual-reveal 420ms ease-out both;
}

.ritual-solution-content pre {
  margin-top: 0;
  border-color: rgba(167, 139, 250, 0.14);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

.ritual-solution-content p:last-child {
  margin-bottom: 0;
}

@keyframes ritual-reveal {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-0.3rem);
  }
}

.ritual-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(167, 139, 250, 0.13);
  font-family: var(--mono-font);
  font-size: clamp(1.2rem, calc(0.25vw + 0.8rem), 1.6rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ritual-nav > :first-child {
  justify-self: start;
}

.ritual-nav > :last-child {
  justify-self: end;
}

.ritual-nav a {
  color: #a78bfa;
}

.ritual-nav-position,
.ritual-nav-disabled {
  color: #71717a;
}

.ritual-intro + p {
  margin-top: 2rem;
}

@media (max-width: 600px) {
  .navy #mdbook-body-container::before {
    background-size: auto, auto, 620px 620px;
  }

  .landing-title {
    font-size: 2rem;
  }
  #big-search {
    font-size: 1rem;
    padding: 14px 16px 14px 46px;
  }

  .incantation-entry {
    min-height: calc(100vh - var(--menu-bar-height) - 25px);
    padding-top: 2rem;
  }

  .incantation-stage pre {
    min-width: 0;
    width: 100%;
    padding: 1.5rem;
  }

  .ritual-entry {
    min-height: calc(100vh - var(--menu-bar-height) - 25px);
    padding-top: 2rem;
  }

  .ritual-brief,
  .ritual-solution {
    width: 100%;
  }

  .ritual-nav,
  .incantation-nav {
    gap: 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
}

@media print {
  .navy #mdbook-body-container::before {
    display: none;
  }

  .ritual-solution:not([open]) > *:not(summary) {
    display: block;
  }
}