@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&display=swap");

:root{
  --bg:#05070d;
  --bg-soft:#08101a;
  --panel:rgba(9,14,25,.82);
  --panel-soft:rgba(255,255,255,.045);
  --panel-strong:rgba(13,21,34,.94);
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.22);
  --line-gold:rgba(243,201,122,.28);
  --gold:#f3c97a;
  --gold-deep:#d99545;
  --cyan:#7af3ff;
  --ember:#ff7a3d;
  --green:#91ffbc;
  --text:#f4f1e8;
  --muted:#b9c1c7;
  --dim:#7d8992;
  --radius-sm:16px;
  --radius-md:24px;
  --radius-lg:34px;
  --shadow:0 28px 90px rgba(0,0,0,.48);
  --shadow-soft:0 18px 56px rgba(0,0,0,.34);
  --max:1180px;
  --content-wide:1440px;
  --content-main:1180px;
  --content-reading:760px;
  --content-narrow:640px;
  --shell-pad:clamp(1rem,3vw,2rem);
  --section-gap:clamp(3rem,6vw,6rem);
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark;overflow-x:hidden}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(16px,.14vw + 15.5px,18px);
  line-height:1.68;
  background:
    radial-gradient(circle at 18% 0%,rgba(122,243,255,.09),transparent 30%),
    radial-gradient(circle at 84% 14%,rgba(243,201,122,.12),transparent 34%),
    radial-gradient(circle at 50% 105%,rgba(217,149,69,.10),transparent 36%),
    var(--bg);
}

body.nav-open{overflow:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* Prevent images from causing layout overflow */
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Image wrapper for preserved aspect ratios */
.img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
button,input,select,textarea{font:inherit}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

h1,h2,h3{line-height:1.05;text-wrap:balance}
h1{margin:.1rem 0 .85rem;font-size:clamp(2.7rem,7vw,6.8rem);letter-spacing:-.055em}
h2{margin:.15rem 0 .85rem;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.035em}
h3{margin:.2rem 0 .7rem;color:var(--gold);font-size:clamp(1.25rem,2.7vw,1.75rem)}
p{line-height:1.75;text-wrap:pretty}

.codex-shell{
  width:min(calc(100% - (var(--shell-pad) * 2)),var(--content-wide));
  margin-inline:auto;
}

.codex-main{
  width:min(100%,var(--content-main));
  margin-inline:auto;
}

.codex-reading{
  width:min(100%,var(--content-reading));
  margin-inline:auto;
}

.codex-narrow{
  width:min(100%,var(--content-narrow));
  margin-inline:auto;
}

.codex-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(18px,2vw,30px);
}

.section-shell{
  position:relative;
  z-index:1;
  width:min(var(--content-main),calc(100% - (var(--shell-pad) * 2)));
  max-width:100%;
  margin-inline:auto;
  padding:var(--section-gap) 0;
  scroll-margin-top:calc(var(--header-h) + 1rem);
}

.section-shell > :where(p, ul, ol):not(.living-signal-bar){
  max-width:min(100%,var(--content-reading));
}

@media (max-width: 480px) {
  .section-shell{
    width:min(var(--content-main),calc(100% - 1rem));
    padding:clamp(1.75rem,8vw,2.65rem) 0;
  }

  h1{font-size:clamp(2.2rem,13vw,3.8rem)}
  h2{font-size:clamp(1.8rem,9vw,2.65rem)}
}

.eyebrow{
  margin:0 0 .7rem;
  color:var(--cyan);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.text-link{
  display:inline-flex;
  margin-top:.4rem;
  color:var(--gold);
  font-weight:900;
  text-decoration:none;
}

.text-link:hover{text-decoration:underline}

.site-footer{
  position:relative;
  z-index:1;
  padding:clamp(2.5rem,5vw,4rem) var(--shell-pad);
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  text-align:center;
}

.site-footer nav,
.site-footer p,
.footer nav,
.footer p{
  width:min(100%,var(--content-main));
  margin-inline:auto;
}

.site-footer nav,
.footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
  margin-bottom:1rem;
}

.site-footer nav a,
.footer nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:.88rem;
}

.site-footer nav a:hover,
.footer nav a:hover{
  color:var(--gold);
}

.compact-actions {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.compact-actions .btn {
  min-height: 44px;
}

.backline {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 1rem;
}

.backline a {
  color: var(--muted);
  text-underline-offset: 0.22em;
}

.soft {
  color: var(--muted);
  font-size: 0.72em;
}

.strong-list li {
  margin-bottom: 0.85rem;
}

.mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mini-card {
  border: 1px solid rgba(243, 201, 122, 0.18);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.mini-card strong,
.mini-card span {
  display: block;
}

.mini-card strong {
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.mini-card span {
  color: var(--muted);
}

.equation-stack {
  display: grid;
  gap: 1.25rem;
}

.equation-stack p {
  margin: 0;
}

mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding: 0.35rem 0;
}

.card mjx-container[jax="SVG"] {
  font-size: 108%;
}

@media (max-width: 620px) {
  .guide-hero h1 {
    font-size: clamp(2.35rem, 12vw, 4rem);
    line-height: 0.95;
  }

  .hero-copy {
    font-size: 1.1rem;
  }

  .backline {
    flex-wrap: wrap;
  }

  .card .equation,
  .equation-stack {
    font-size: 0.95rem;
  }
}

.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--gold)}

/* =====================================================================
   UI Refresh — Typography, Motion, Interactive Depth
   ===================================================================== */

:root {
  --display: "Cinzel", Georgia, "Times New Roman", serif;
}

/* ---- Text selection ---- */
::selection {
  background: rgba(243, 201, 122, 0.2);
  color: #f7f0de;
}

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #04060e;
}
::-webkit-scrollbar-thumb {
  background: rgba(243, 201, 122, 0.26);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(243, 201, 122, 0.5);
}

/* ---- Display typeface on major headings ---- */
h1,
h2 {
  font-family: var(--display);
  letter-spacing: 0.025em;
  font-weight: 700;
  line-height: 1.06;
}

h3 {
  letter-spacing: -0.01em;
}

/* Hero subline also gets the display serif for cohesion */
.hero-line {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ---- Eyebrow label refinement ---- */
.eyebrow {
  letter-spacing: 0.22em;
  font-size: 0.72rem;
}

/* ---- Brand mark hover glow ---- */
.brand {
  transition: opacity 140ms ease;
}
.brand-mark {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.brand:hover .brand-mark {
  border-color: rgba(243, 201, 122, 0.44);
  box-shadow: 0 0 28px rgba(243, 201, 122, 0.22);
}

/* ---- Nav & footer link transitions ---- */
.site-nav a,
.site-footer a {
  transition: color 140ms ease, background 140ms ease;
}

/* ---- Button tactility ---- */
.btn {
  transition:
    transform 160ms cubic-bezier(.22, .61, .36, 1),
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 220ms ease;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.09);
}
.btn.primary:hover {
  box-shadow: 0 18px 48px rgba(243, 201, 122, 0.34);
}
.btn:active {
  transform: translateY(0);
  transition-duration: 60ms;
}

/* ---- Card base visual + depth & hover lift ---- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 24px);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background:
    radial-gradient(circle at 15% 0%, rgba(122, 243, 255, 0.07), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: var(--shadow-soft, 0 18px 56px rgba(0, 0, 0, 0.34));
  transition:
    transform 200ms cubic-bezier(.22, .61, .36, 1),
    border-color 200ms ease,
    box-shadow 260ms ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46);
}

/* Gold-accent card variant */
.card.glow {
  border-color: rgba(243, 201, 122, 0.28);
  background:
    radial-gradient(circle at 15% 0%, rgba(243, 201, 122, 0.11), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

/* ---- Grid layout utilities ---- */
.grid {
  display: grid;
  gap: 1rem;
}

.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 1rem;
}

.split {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

@media (max-width: 760px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* ---- Nav-card (clickable card link) ---- */
a.nav-card, .nav-card[href] {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform 200ms cubic-bezier(.22, .61, .36, 1),
    border-color 200ms ease,
    box-shadow 240ms ease;
}

a.nav-card:hover,
a.nav-card:focus-visible,
.nav-card[href]:hover,
.nav-card[href]:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(122, 243, 255, 0.38);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
  outline: none;
}

.nav-card strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--gold);
}

.nav-card span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---- Clean numbered list ---- */
.clean-list {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
  counter-reset: clean-counter;
}

.clean-list li {
  position: relative;
  counter-increment: clean-counter;
  padding: 0.65rem 0.75rem 0.65rem 2.8rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  line-height: 1.55;
  color: var(--muted);
}

.clean-list li::before {
  content: counter(clean-counter);
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold, #f3c97a);
  color: #0a0a10;
  font-size: 0.76rem;
  font-weight: 900;
}

.clean-list li strong {
  color: var(--text, #f4f1e8);
}

/* ---- Page wrapper (simple pages — ledger, downloads, etc.) ---- */
.page {
  position: relative;
  z-index: 1;
}

/* ---- Text-link underline swipe ---- */
.text-link {
  position: relative;
  transition: color 160ms ease;
}
.text-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 260ms cubic-bezier(.22, .61, .36, 1);
}
.text-link:hover::after {
  width: 100%;
}

/* =========================================================
   FOOTER DIRECTORY (Phase 3 — categorized site directory)
   ========================================================= */

.footer-directory {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 2rem 3rem;
  margin-bottom: 1.5rem !important;
  text-align: left;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 130px;
}

.footer-col strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--gold, #f3c97a);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-col a {
  color: var(--muted, #b9c1c7) !important;
  font-size: 0.84rem !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--gold, #f3c97a) !important;
}

@media (max-width: 600px) {
  .footer-directory {
    gap: 1.5rem 2rem;
  }
  .footer-col {
    min-width: 110px;
  }
}