/* ==========================================================
   The Syncreticon — design system
   Theme: Geburah (Mars) flowing into Tiphareth (Sun),
          through the Path of Lamed (Justice).
   ========================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html, body {
  margin: 0; padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}
body { min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input, textarea, select { max-width: 100%; }

h1, h2, h3, h4 { overflow-wrap: break-word; word-wrap: break-word; }

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --syn-void:      #08080c;
  --syn-bg:        #0b0b11;
  --syn-surface:   #14131c;
  --syn-surface-2: #1c1a26;
  --syn-border:    #2a2836;
  --syn-border-hi: #3d3a4d;
  --syn-text:      #ece7d8;
  --syn-text-dim:  #928c7b;
  --syn-text-mute: #5e5a51;

  --syn-gold:      #c9a449;
  --syn-gold-hi:   #e2c274;
  --syn-gold-low:  #8a6f2e;
  --syn-mars:      #a6302b;
  --syn-mars-hi:   #d14a43;
  --syn-ink:       #060608;

  /* Type */
  --syn-serif:   "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --syn-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --syn-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --syn-r:       6px;
  --syn-r-lg:    10px;
  --syn-shadow:  0 10px 40px -20px rgba(0,0,0,0.6);
  --syn-glow:    0 0 0 1px rgba(201,164,73,0.2), 0 8px 40px -8px rgba(201,164,73,0.15);
}

/* ---------- Body + type ---------- */
body {
  background: var(--syn-bg);
  color: var(--syn-text);
  font-family: var(--syn-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "onum";
}

h1, h2, h3, h4, legend, blockquote, cite {
  font-family: var(--syn-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

p { margin: 0 0 1rem; }
a { color: var(--syn-gold-hi); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--syn-gold); }

hr {
  border: 0;
  border-top: 1px solid var(--syn-border);
  margin: 3rem auto;
  max-width: 200px;
}

::selection { background: var(--syn-gold); color: var(--syn-ink); }

/* ---------- Header ---------- */
.syn-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--syn-border);
  background: rgba(11, 11, 17, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Top row: brand on the left, tier badges on the right, same baseline,
   one single horizontal row that never wraps. */
.syn-header-top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.syn-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--syn-text);
  font-weight: 600;
}
.syn-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--syn-gold);
  font-size: 1.3rem;
  line-height: 1;
}
.syn-name {
  font-family: var(--syn-sans);
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 600;
}

.syn-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.syn-nav > a,
.syn-nav-link,
.syn-nav form button {
  color: var(--syn-text-dim);
  padding: 0.5rem 0.85rem;
  border-radius: var(--syn-r);
  transition: color 0.15s, background 0.15s;
}
.syn-nav > a:hover,
.syn-nav-link:hover,
.syn-nav form button:hover {
  color: var(--syn-text);
  background: rgba(255,255,255,0.03);
}
.syn-nav .syn-cta {
  color: var(--syn-gold) !important;
  border: 1px solid var(--syn-gold-low);
  padding: 0.5rem 1rem;
  margin-left: 0.6rem;
}
.syn-nav .syn-cta:hover {
  border-color: var(--syn-gold);
  background: rgba(201,164,73,0.08);
}
.syn-logout { display: inline; margin: 0; }

/* Glyph hidden on desktop — nav stays label-only at ≥900px. */
.syn-nav-glyph { display: none; }

/* Hamburger button and scrim default-hidden on desktop. */
.syn-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.syn-nav-button { display: none; }
.syn-nav-scrim  { display: none; }

/* ============================================================
   MOBILE NAV · Hamburger tray
   Applied when viewport < 900px — above that the desktop nav
   remains a single horizontal row.
   ============================================================ */

@media (max-width: 899px) {
  /* Header hosts the mark + button only. The nav is laid out as a
     fixed-position tray below the header. */
  .syn-header {
    padding: 0.8rem 1rem;
  }

  /* Two rows on mobile: row 1 = brand + hamburger; row 2 = tier
     ladder, full-width centered. Wrapping is what carries the ladder
     to its own line — at desktop the row is nowrap. */
  .syn-header-top {
    flex-wrap: wrap;
    gap: 0.4rem 0;
    margin-bottom: 0;
  }
  .syn-mark {
    order: 1;
    flex: 1 1 auto;       /* grows so the hamburger gets pushed right */
  }
  .syn-tier-ladder {
    order: 3;
    flex: 1 0 100%;       /* wraps to the next row */
    justify-content: center;
    padding-top: 0.4rem;
    border-top: 1px solid var(--syn-border);
    margin-top: 0.2rem;
  }

  /* Hamburger button. */
  .syn-nav-button {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    margin-left: 0;       /* brand's flex-grow pushes us right now */
    order: 2;
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-r);
    background: transparent;
    cursor: pointer;
    z-index: 30;
    position: relative;
  }
  .syn-nav-button-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--syn-text);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }
  .syn-nav-button-x {
    display: none;
  }
  .syn-nav-toggle:checked ~ .syn-header-top .syn-nav-button .syn-nav-button-bar {
    display: none;
  }
  .syn-nav-toggle:checked ~ .syn-header-top .syn-nav-button .syn-nav-button-x {
    display: inline;
    font-size: 1.8rem;
    color: var(--syn-gold);
    line-height: 1;
  }

  /* Scrim that dismisses the tray on tap. */
  .syn-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 8, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 20;
  }
  /* The toggle is a direct child of .syn-header, ahead of .syn-header-top
     (which holds the scrim) and the .syn-nav drawer — so a plain ~ sibling
     combinator reaches both with no :has(), which iOS Safari < 15.4 lacks
     and would otherwise leave the drawer permanently unopenable. */
  .syn-nav-toggle:checked ~ .syn-header-top .syn-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* The tray itself — full-height drawer from the right. */
  .syn-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 5rem 1.25rem 1.5rem;
    background: var(--syn-surface);
    border-left: 1px solid var(--syn-border-hi);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 25;
    overflow-y: auto;
  }
  .syn-nav-toggle:checked ~ .syn-nav {
    transform: translateX(0);
  }

  /* Each item becomes a full-width row with glyph + label. */
  .syn-nav > a,
  .syn-nav-link,
  .syn-nav form button {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.9rem;
    font-size: 1rem;
    color: var(--syn-text);
    border-radius: var(--syn-r);
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
  }
  .syn-nav > a:hover,
  .syn-nav-link:hover,
  .syn-nav form button:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .syn-nav-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--syn-gold);
    font-size: 1.15rem;
    flex-shrink: 0;
  }
  .syn-nav-label {
    flex: 1;
    letter-spacing: 0.01em;
  }

  /* Tier badge moves to its own row at the top. */
  .syn-nav .syn-tier-badge {
    order: -1;
    align-self: flex-start;
    margin: 0 0 0.9rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em;
  }

  /* Logout button sits at the bottom with a separator. */
  .syn-nav .syn-logout {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--syn-border);
    width: 100%;
  }
  .syn-nav .syn-logout button {
    color: var(--syn-text-dim);
    font-size: 0.9rem;
  }

  /* Body scroll lock when drawer is open. Progressive enhancement only —
     the fixed drawer + scrim already cover the viewport, so on iOS < 15.4
     (no :has()) the menu is fully usable; the background just isn't frozen. */
  body:has(.syn-nav-toggle:checked) {
    overflow: hidden;
  }
}


/* Tier badge in nav */
/* Tier ladder — three rungs always visible as buttons on the top row,
   right of the brand. Always a horizontal flex row, never wraps. */
/* ============================================================
   Tier ladder — uniform buttons across the top-right of the header.
   Three text rungs (Seeker, Adept, Magister) sit shoulder-to-shoulder
   at identical width and height. The optional fourth rung (G) appears
   only for the invitation-only key-holder, and shows a square button
   carrying the masonic Square-and-Compasses-with-G emblem.
   ============================================================ */
.syn-tier-ladder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.syn-tier-ladder > .syn-tier-badge { flex-shrink: 0; }

.syn-tier-badge {
  /* Uniform button geometry — identical box for every rung. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  min-width: 5.6rem;
  padding: 0 0.85rem;
  border-radius: 6px;
  font-family: "Georgia", serif;
  font-size: 0.72rem !important;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--syn-border);
  color: var(--syn-text-dim) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.10) 100%);
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.32);
  transition: transform 0.12s ease, border-color 0.15s, color 0.15s,
              background 0.15s, opacity 0.15s, box-shadow 0.15s;
}

/* Clickable hover (only applies to <a> rungs and to G's preview link). */
.syn-tier-badge.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 10px rgba(0,0,0,0.32),
    0 0 0 1px var(--syn-gold-low) inset;
  color: var(--syn-gold-hi) !important;
  opacity: 1;
}
.syn-tier-badge.is-clickable:active { transform: translateY(0); }

/* Muted = not your tier (or, for G, not the active preview).
   For non-G users this state is also LOCKED — pointer-events off, so
   the badge is visible-but-dead. */
.syn-tier-badge.is-muted {
  opacity: 0.42;
  filter: saturate(0.5);
}
.syn-tier-badge.is-locked {
  cursor: default;
  pointer-events: none;
}
.syn-tier-badge.is-clickable.is-muted:hover { opacity: 0.92; filter: saturate(0.85); }

/* Current = full colour, with the rung's accent. */
.syn-tier-badge.is-current { opacity: 1; filter: none; }

.syn-tier-badge--seeker.is-current {
  border-color: var(--syn-gold-low);
  color: var(--syn-gold-hi) !important;
  background:
    linear-gradient(180deg, rgba(201,164,73,0.22) 0%, rgba(201,164,73,0.06) 100%);
  box-shadow:
    0 1px 0 rgba(255,225,150,0.18) inset,
    0 1px 3px rgba(0,0,0,0.36),
    0 0 12px -2px rgba(201,164,73,0.30);
}
.syn-tier-badge--adept.is-current {
  border-color: #8fa6d9;
  color: #d6e1f3 !important;
  background:
    linear-gradient(180deg, rgba(143,166,217,0.22) 0%, rgba(143,166,217,0.06) 100%);
  box-shadow:
    0 1px 0 rgba(180,200,240,0.18) inset,
    0 1px 3px rgba(0,0,0,0.36),
    0 0 12px -2px rgba(143,166,217,0.30);
}
.syn-tier-badge--magister.is-current {
  border-color: var(--syn-mars);
  color: #fff !important;
  background: linear-gradient(180deg, var(--syn-mars) 0%, #5a1c19 100%);
  box-shadow:
    0 1px 0 rgba(255,180,165,0.20) inset,
    0 1px 3px rgba(0,0,0,0.40),
    0 0 12px -2px rgba(196, 75, 68, 0.45);
}

/* G — invitation-only. A square button holding the masonic emblem;
   no text label (the symbol IS the identity). The user always refers
   to this rung as "G" but the button itself carries the emblem. */
.syn-tier-badge--g {
  min-width: 0;
  width: 2rem;
  padding: 0;
  border-color: rgba(255,255,255,0.62);
  color: #fff !important;
  background: linear-gradient(180deg, #1d1d1d 0%, #000 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 2px 4px rgba(0,0,0,0.55),
    0 0 14px -2px rgba(255,255,255,0.18);
}
.syn-tier-badge--g.is-current {
  border-color: rgba(255,235,180,0.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 2px 5px rgba(0,0,0,0.55),
    0 0 16px -2px rgba(255,222,150,0.55);
}
.syn-tier-badge--g .syn-tier-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.syn-tier-badge--g .syn-tier-emblem .syn-icon-masonic {
  width: 1.45rem;
  height: 1.45rem;
}
.syn-tier-badge--g.is-clickable:hover {
  border-color: rgba(255,255,255,0.92);
  color: #fff !important;
}

/* Visually-hidden text label kept for screen readers only. */
.syn-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* On narrow screens, shrink the rungs but keep them readable.
   Names are critical for orientation, so we keep them on. */
@media (max-width: 640px) {
  .syn-tier-badge { min-width: 0; height: 1.7rem; padding: 0 0.55rem; font-size: 0.6rem !important; letter-spacing: 0.14em; }
  .syn-tier-badge--g { width: 1.7rem; padding: 0; }
  .syn-tier-badge--g .syn-icon-masonic { width: 1.2rem; height: 1.2rem; }
}

/* Backward-compat — old single-badge classes still used in a few spots */
.syn-tier-badge-free     { /* default, dim */ }
.syn-tier-badge-seeker   { border-color: var(--syn-gold-low); color: var(--syn-gold-hi) !important; }
.syn-tier-badge-adept    { border-color: #8fa6d9; color: #b6c5e3 !important; }
.syn-tier-badge-magister {
  border-color: var(--syn-mars); color: #fff !important;
  background: linear-gradient(135deg, var(--syn-mars) 0%, #5a1c19 100%);
}

/* ---------- Main container ---------- */
.syn-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Buttons ---------- */
.syn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--syn-r);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  text-align: center;
  cursor: pointer;
  line-height: 1.2;
}
.syn-btn-primary {
  background: var(--syn-gold);
  color: var(--syn-ink);
  border-color: var(--syn-gold);
}
.syn-btn-primary:hover {
  background: var(--syn-gold-hi);
  border-color: var(--syn-gold-hi);
  color: var(--syn-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -12px rgba(201,164,73,0.5);
}
.syn-btn-ghost {
  background: transparent;
  color: var(--syn-text);
  border-color: var(--syn-border-hi);
}
.syn-btn-ghost:hover {
  border-color: var(--syn-gold);
  color: var(--syn-gold) !important;
}
.syn-btn-block { width: 100%; }
.syn-btn-danger {
  background: var(--syn-mars);
  color: var(--syn-text);
  border-color: var(--syn-mars);
}
.syn-btn-danger:hover {
  background: var(--syn-mars-hi);
  border-color: var(--syn-mars-hi);
  color: #fff !important;
  transform: translateY(-1px);
}
.syn-btn-danger-ghost {
  background: transparent;
  color: var(--syn-mars-hi) !important;
  border-color: rgba(209,74,67,0.3);
}
.syn-btn-danger-ghost:hover {
  border-color: var(--syn-mars-hi);
  background: rgba(209,74,67,0.06);
}

/* ==========================================================
   LANDING — banner + hero + teaser
   ========================================================== */
.syn-hero-banner {
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 1.5rem;
}
.syn-banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--syn-r-lg);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(201,164,73,0.15);
  filter: saturate(105%) contrast(102%);
}

/* Teaser */
.syn-teaser {
  max-width: 1000px;
  margin: 5rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--syn-border);
  border-bottom: 1px solid var(--syn-border);
}
.syn-teaser .syn-eyebrow { margin-bottom: 2rem; }
.syn-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.syn-teaser-card {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 1.25rem 1rem;
  text-align: center;
}
.syn-teaser-glyph {
  display: block;
  font-size: 1.6rem;
  color: var(--syn-gold);
  margin-bottom: 0.4rem;
}
.syn-teaser-card h4 {
  font-family: var(--syn-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  margin: 0 0 0.4rem;
}
.syn-teaser-card p {
  margin: 0;
  font-family: var(--syn-serif);
  font-size: 1rem;
  color: var(--syn-text);
  line-height: 1.3;
}
.syn-teaser-card p em  { color: var(--syn-gold-hi); font-style: italic; }
.syn-teaser-card p span { color: var(--syn-text-dim); }
.syn-teaser-foot {
  color: var(--syn-text-dim);
  font-size: 0.92rem;
  max-width: 620px;
  margin: 0 auto;
}
.syn-teaser-foot strong { color: var(--syn-gold-hi); font-weight: 500; }

/* ------------ Archetypes (4 elemental cards) ------------ */
.syn-archetypes {
  max-width: 1100px;
  margin: 6rem auto;
  padding: 0 1.5rem;
}
.syn-archetypes-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.syn-archetypes-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0.5rem 0 1rem;
}
.syn-archetypes-sub { color: var(--syn-text-dim); font-size: 1.02rem; }

.syn-archetype-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.syn-archetype {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-top: 3px solid var(--syn-border-hi);
  border-radius: var(--syn-r-lg);
  padding: 2rem 1.75rem;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}
.syn-archetype:hover {
  transform: translateY(-3px);
  border-color: var(--syn-gold-low);
}
.syn-archetype-fire  { border-top-color: #d14a43; }
.syn-archetype-water { border-top-color: #6a85c9; }
.syn-archetype-air   { border-top-color: #c9a449; }
.syn-archetype-earth { border-top-color: #9b8a75; }

.syn-archetype-glyph { font-size: 1.8rem; display: block; margin-bottom: 0.75rem; }
.syn-archetype h3 { margin: 0 0 0.5rem; font-size: 1.4rem; color: var(--syn-text); }
.syn-archetype-for { color: var(--syn-text-dim); font-size: 0.95rem; margin: 0 0 1.25rem; }
.syn-archetype blockquote {
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-gold-hi);
  border-left: 2px solid var(--syn-gold-low);
  background: rgba(201,164,73,0.04);
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  font-size: 0.96rem;
  line-height: 1.5;
}
.syn-archetype blockquote em { color: var(--syn-gold); font-style: italic; }
.syn-archetype-voice {
  margin: 0;
  color: var(--syn-text-mute);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.syn-archetypes-foot {
  text-align: center;
  color: var(--syn-text-dim);
  max-width: 700px;
  margin: 3rem auto 0;
  font-size: 1rem;
  font-style: italic;
}

/* ------------ How-it-works ------------ */
.syn-how {
  max-width: 1000px;
  margin: 6rem auto;
  padding: 0 1.5rem;
}
.syn-how header { text-align: center; margin-bottom: 3rem; }
.syn-how header h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0.5rem 0; }

.syn-how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.syn-how-steps li {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 2rem 1.75rem;
  position: relative;
}
.syn-how-num {
  display: block;
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-gold);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.syn-how-steps h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.syn-how-steps p  { margin: 0; color: var(--syn-text-dim); font-size: 0.96rem; }

/* ------------ Tiers-preview + Final CTA ------------ */
.syn-tiers-preview {
  max-width: 1100px;
  margin: 6rem auto;
  padding: 0 1.5rem;
}
.syn-tiers-preview header { text-align: center; margin-bottom: 3rem; }
.syn-tiers-preview header h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0.5rem 0; }

.syn-final-cta {
  max-width: 780px;
  margin: 8rem auto 6rem;
  padding: 4rem 2rem;
  text-align: center;
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(201,164,73,0.08), transparent 70%),
    var(--syn-surface);
}
.syn-final-cta h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0 0 1rem;
  color: var(--syn-gold-hi);
}
.syn-final-cta p {
  color: var(--syn-text-dim);
  max-width: 520px;
  margin: 0 auto 2rem;
}
.syn-final-cta .syn-hero-cta { justify-content: center; }

/* ==========================================================
   SIGNATURE PAGE
   ========================================================== */
.syn-sig {
  max-width: 1000px;
  margin: 3rem auto 5rem;
  padding: 0 1.5rem;
}
.syn-sig-head {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-sig-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0.5rem 0;
  color: var(--syn-gold-hi);
}
.syn-sig-missing {
  color: var(--syn-text-dim);
  font-style: italic;
  margin-top: 1rem;
}

.syn-sig-prose {
  max-width: 720px;
  margin: 0 auto 2rem;
  font-family: var(--syn-serif);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.7;
  color: var(--syn-text);
  text-align: center;
}
.syn-sig-prose p { margin: 0 0 1rem; }
.syn-sig-prose b { color: var(--syn-gold-hi); font-weight: 500; font-style: italic; }

.syn-sig-divider {
  max-width: 200px;
  margin: 3rem auto;
  border: 0;
  border-top: 1px solid var(--syn-border);
}

.syn-sig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.syn-sig-card {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 1.5rem 1.5rem 1.3rem;
}
.syn-sig-card h3 {
  margin: 0 0 1rem;
  font-family: var(--syn-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--syn-gold);
}
.syn-sig-card p { margin: 0 0 0.5rem; }
.syn-sig-card small { color: var(--syn-text-dim); font-size: 0.88rem; line-height: 1.5; display: block; }
.syn-sig-big {
  font-family: var(--syn-serif);
  font-size: 1.5rem;
  color: var(--syn-text);
  margin: 0 0 0.5rem !important;
}
.syn-sig-card em { color: var(--syn-gold-hi); font-style: italic; }
.syn-sig-card-astro { grid-column: span 2; }

.syn-sig-card-tier {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(201,164,73,0.06), var(--syn-surface) 60%);
  border-color: var(--syn-gold-low);
}
.syn-sig-card-tier-free {
  background: var(--syn-surface);
  border-color: var(--syn-border);
}
.syn-sig-card-tier-magister {
  background: linear-gradient(135deg, rgba(166,48,43,0.1), var(--syn-surface) 60%);
  border-color: var(--syn-mars);
}
.syn-sig-tier-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

/* ==========================================================
   NATAL + SYNASTRY (Magister)
   ========================================================== */
.syn-natal {
  max-width: 1000px;
  margin: 3rem auto 5rem;
  padding: 0 1.5rem;
}
.syn-natal-head {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-natal-head h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0.5rem 0;
  color: var(--syn-gold-hi);
}
.syn-natal-sub {
  color: var(--syn-text-dim);
  max-width: 640px;
  margin: 0 auto;
}
.syn-natal-sub b { color: var(--syn-gold-hi); font-weight: 500; }
.syn-natal-age {
  color: var(--syn-text-dim);
  font-size: 0.95rem;
  margin-top: 1rem;
}
.syn-natal-age b { color: var(--syn-gold-hi); font-weight: 500; }

.syn-natal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.syn-natal-card {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-left: 3px solid var(--syn-border-hi);
  border-radius: var(--syn-r-lg);
  padding: 1.3rem 1.4rem;
}
.syn-natal-sun    { border-left-color: var(--syn-gold-hi); }
.syn-natal-moon   { border-left-color: #9bb0d9; }
.syn-natal-aspect { border-left-color: var(--syn-mars-hi); }

.syn-natal-label {
  margin: 0 0 0.35rem;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.syn-natal-big {
  margin: 0 0 0.2rem !important;
  font-family: var(--syn-serif);
  font-size: 1.6rem;
  color: var(--syn-text);
  line-height: 1.2;
}
.syn-natal-deg {
  margin: 0 0 0.6rem !important;
  color: var(--syn-text-mute);
  font-size: 0.82rem;
}
.syn-natal-card small {
  color: var(--syn-text-dim);
  font-size: 0.84rem;
  line-height: 1.5;
  display: block;
}
.syn-natal-card small b { color: var(--syn-gold-hi); font-weight: 500; }

.syn-natal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--syn-border);
}

.syn-natal-note {
  max-width: 680px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  background: rgba(201,164,73,0.04);
  border-left: 2px solid var(--syn-gold-low);
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  color: var(--syn-text-dim);
  font-size: 0.9rem;
  line-height: 1.55;
  font-style: italic;
}

/* God-voice — the composed natal address */
.syn-god-voice {
  max-width: 780px;
  margin: 0 auto 3rem;
  padding: 2rem 2.25rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(201,164,73,0.06), transparent 70%),
    var(--syn-surface);
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  position: relative;
  box-shadow: 0 25px 70px -35px rgba(201,164,73,0.3);
}
.syn-god-mark {
  position: absolute;
  top: -0.9rem; left: 1.8rem;
  color: var(--syn-gold);
  font-size: 1.3rem;
  background: var(--syn-bg);
  padding: 0 0.5rem;
}
.syn-god-voice p {
  font-family: var(--syn-serif);
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  line-height: 1.65;
  color: var(--syn-text);
  margin: 0 0 1.25rem;
}
.syn-god-voice p:last-child {
  margin-bottom: 0;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--syn-border);
  font-style: italic;
  color: var(--syn-gold-hi);
}
.syn-god-voice p b { color: var(--syn-gold-hi); font-weight: 500; font-style: italic; }
.syn-god-voice p i { color: var(--syn-text-dim); }

/* Natal section titles between groups */
.syn-natal-section-title {
  font-family: var(--syn-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-gold);
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-natal-section-title small {
  color: var(--syn-text-mute);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Interpretation body inside a planet card */
.syn-natal-interp {
  margin: 0.75rem 0 !important;
  color: var(--syn-text) !important;
  font-family: var(--syn-serif);
  font-size: 0.95rem !important;
  line-height: 1.6;
  padding-top: 0.75rem;
  border-top: 1px solid var(--syn-border);
}

/* Planet card colour stripes */
.syn-natal-asc           { border-left-color: #c1a3d9; }
.syn-natal-planet-mercury { border-left-color: #e2c274; }
.syn-natal-planet-venus   { border-left-color: #9bd9c1; }
.syn-natal-planet-mars    { border-left-color: var(--syn-mars-hi); }
.syn-natal-planet-jupiter { border-left-color: #9bb0d9; }
.syn-natal-planet-saturn  { border-left-color: #8a8475; }

/* Aspect table */
.syn-aspect-table-wrap {
  overflow-x: auto;
  margin-bottom: 2rem;
}
.syn-aspect-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.syn-aspect-table thead th {
  text-align: left;
  color: var(--syn-text-mute);
  font-size: 0.68rem;
  font-family: var(--syn-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-aspect-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--syn-border);
  color: var(--syn-text);
  font-size: 0.95rem;
}
.syn-aspect-table tbody td b { color: var(--syn-gold-hi); font-weight: 500; }
.syn-aspect-mode-fusion      { color: var(--syn-gold-hi); }
.syn-aspect-mode-harmony     { color: #9bd9c1; }
.syn-aspect-mode-polarity    { color: #c1a3d9; }
.syn-aspect-mode-tension     { color: var(--syn-mars-hi); }
.syn-aspect-mode-opportunity { color: #9bb0d9; }
.syn-aspect-mode-adjustment  { color: #d4b570; }

/* Synastry result */
.syn-synastry-result {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--syn-border);
}
.syn-synastry-result > header { text-align: center; margin-bottom: 2rem; }
.syn-synastry-result > header h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: 0.4rem 0;
  color: var(--syn-gold-hi);
}

.syn-synastry-prose {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  font-family: var(--syn-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--syn-text);
  text-align: center;
}
.syn-synastry-prose p { margin: 0 0 0.75rem; }
.syn-synastry-prose b { color: var(--syn-gold-hi); font-style: italic; font-weight: 500; }
.syn-synastry-prose i { color: var(--syn-text-dim); }

.syn-synastry-aspects {
  max-width: 720px;
  margin: 2rem auto 0;
}
.syn-synastry-aspects h3 {
  font-size: 0.78rem;
  font-family: var(--syn-sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-gold);
  margin: 0 0 1rem;
}
.syn-synastry-aspects table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.syn-synastry-aspects th, .syn-synastry-aspects td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-synastry-aspects th {
  color: var(--syn-text-mute);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.syn-synastry-aspects td b { color: var(--syn-gold-hi); font-weight: 500; }
.syn-synastry-aspects td i { color: var(--syn-text-dim); font-style: italic; }

.syn-sig-astro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.syn-sig-astro-item { }
.syn-sig-astro-label {
  display: block;
  color: var(--syn-text-mute);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.syn-sig-astro-big {
  display: block;
  font-family: var(--syn-serif);
  font-size: 1.8rem;
  color: var(--syn-gold-hi);
  margin-bottom: 0.25rem;
}
.syn-sig-note {
  grid-column: span 2;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--syn-border);
  color: var(--syn-text-mute);
  font-size: 0.85rem;
  font-style: italic;
}
.syn-sig-nn { margin-top: 0.75rem; color: var(--syn-text-dim); }

/* Bars */
.syn-sig-bars {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0.45rem;
}
.syn-sig-bar {
  display: grid;
  grid-template-columns: 110px 1fr 30px;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.86rem;
}
.syn-sig-bar-label { color: var(--syn-text-dim); }
.syn-sig-bar-track {
  background: var(--syn-surface-2);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.syn-sig-bar-fill {
  display: block;
  height: 100%;
  background: var(--syn-gold);
  border-radius: inherit;
  transition: width 0.4s;
}
.syn-sig-bar-fire  .syn-sig-bar-fill { background: #d14a43; }
.syn-sig-bar-water .syn-sig-bar-fill { background: #6a85c9; }
.syn-sig-bar-air   .syn-sig-bar-fill { background: #c9a449; }
.syn-sig-bar-earth .syn-sig-bar-fill { background: #9b8a75; }
.syn-sig-bar-val { color: var(--syn-text-mute); font-family: var(--syn-mono); font-size: 0.8rem; text-align: right; }

.syn-sig-voice-bars {
  list-style: none;
  padding: 0; margin: 0.5rem 0 1rem;
  display: grid; gap: 0.4rem;
}
.syn-sig-voice-bars li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--syn-text-dim);
}

.syn-sig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 3rem 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--syn-border);
}

/* Settings summary card */
.syn-sig-summary {
  background: linear-gradient(180deg, rgba(201,164,73,0.05), var(--syn-surface) 70%);
  border: 1px solid var(--syn-border);
  border-left: 3px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 3rem;
}
.syn-sig-summary .syn-eyebrow { margin-bottom: 0.5rem; }
.syn-sig-summary-title {
  margin: 0 0 1rem;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--syn-gold-hi);
}
.syn-sig-summary-prose p {
  font-family: var(--syn-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--syn-text);
  margin: 0 0 0.5rem;
}
.syn-sig-summary-prose b { color: var(--syn-gold-hi); font-weight: 500; font-style: italic; }
.syn-sig-summary-prose + .syn-btn { margin-top: 1rem; }
.syn-sig-summary-incomplete { text-align: center; }
.syn-sig-summary-incomplete p { color: var(--syn-text-dim); margin: 0 0 1rem; }

/* Voice preview — on Settings */
.syn-voice-preview {
  margin: 3rem 0 0;
  padding-top: 3rem;
  border-top: 1px solid var(--syn-border);
}
.syn-voice-preview header { margin-bottom: 2rem; }
.syn-voice-preview header h3 {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: var(--syn-text);
}
.syn-voice-preview-sub {
  color: var(--syn-text-dim);
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}

.syn-voice-card {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-left: 3px solid var(--syn-border-hi);
  border-radius: var(--syn-r);
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.75rem;
}
.syn-voice-card p {
  margin: 0;
  font-family: var(--syn-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--syn-text);
}
.syn-voice-card p b {
  color: var(--syn-gold-hi);
  font-weight: 500;
  font-style: italic;
}
.syn-voice-tag {
  display: block;
  color: var(--syn-text-mute);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.syn-voice-tag b { color: var(--syn-gold); font-weight: 600; }
.syn-voice-card-current { border-left-color: var(--syn-gold); }
.syn-voice-card-soft    { border-left-color: #8fa6d9; }
.syn-voice-card-firm    { border-left-color: var(--syn-mars-hi); }
.syn-voice-card-mythic  { border-left-color: #c1a3d9; }
.syn-voice-foot {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--syn-text-dim);
  font-size: 0.9rem;
}

/* Original hero */
.syn-hero {
  padding: 6rem 1rem 5rem;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.syn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,164,73,0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(166,48,43,0.08), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.syn-hero-inner { max-width: 720px; margin: 0 auto; }
.syn-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--syn-gold);
  margin: 0 0 1.25rem;
  font-weight: 600;
}
.syn-hero-title {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.12;
  margin: 0 0 1.5rem;
  color: var(--syn-text);
}
.syn-hero-title .br-desktop { display: block; }
.syn-hero-sub {
  color: var(--syn-text-dim);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}
.syn-hero-cta {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pillars */
.syn-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 5rem auto;
  max-width: 960px;
}
.syn-pillar {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.syn-pillar:hover {
  border-color: var(--syn-border-hi);
  transform: translateY(-2px);
}
.syn-pillar-roman {
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-gold);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.syn-pillar h3 {
  font-size: 1.3rem;
  color: var(--syn-text);
  margin: 0 0 0.75rem;
}
.syn-pillar p {
  color: var(--syn-text-dim);
  margin: 0;
  font-size: 0.96rem;
}

/* Landing library teaser — six covers shown to unauthenticated visitors */
.syn-landing-library {
  margin: 5rem auto;
  padding: 0 1rem;
  max-width: 1400px;
  text-align: center;
}
.syn-landing-library-head {
  margin: 0 auto 2.5rem;
  max-width: 720px;
}
.syn-landing-library-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: 0.012em;
  color: var(--syn-gold-hi, #c8a85e);
  margin: 0.4rem 0 0.9rem;
}
.syn-landing-library-sub {
  color: var(--syn-text-dim);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}
.syn-landing-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin: 0 auto;
  max-width: 1100px;
}
.syn-landing-library-card {
  margin: 0;
  text-align: center;
}
.syn-landing-library-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #1a1612;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.7);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.syn-landing-library-card:hover img {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.75);
}
.syn-landing-library-card figcaption {
  margin-top: 0.85rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--syn-gold, #c7a65a);
  letter-spacing: 0.012em;
  line-height: 1.45;
  opacity: 0.92;
}
.syn-landing-library-cta {
  margin: 3rem 0 0;
  text-align: center;
}
@media (max-width: 800px) {
  .syn-landing-library-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .syn-landing-library { margin: 3rem auto; }
}
@media (max-width: 480px) {
  .syn-landing-library-grid { grid-template-columns: 1fr; max-width: 320px; gap: 1.4rem; }
  .syn-landing-library-card figcaption { font-size: 0.95rem; }
}

/* Creed */
.syn-creed {
  text-align: center;
  margin: 6rem auto;
  padding: 4rem 1rem;
  border-top: 1px solid var(--syn-border);
  border-bottom: 1px solid var(--syn-border);
  max-width: 760px;
}
.syn-creed-ornament {
  color: var(--syn-gold);
  font-size: 1.2rem;
  letter-spacing: 1rem;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
}
.syn-creed blockquote { margin: 0; }
.syn-creed blockquote p {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-style: italic;
  color: var(--syn-gold-hi);
  margin: 0 0 1.5rem;
  line-height: 1.4;
}
.syn-creed cite {
  display: block;
  color: var(--syn-text-dim);
  font-style: normal;
  font-family: var(--syn-sans);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ==========================================================
   FORMS
   ========================================================== */
.syn-form-wrap {
  max-width: 480px;
  margin: 4rem auto;
  padding: 0 0.5rem;
}
/* Settings page needs to break out of the form-wrap cage —
   the voice preview is prose, not a form. */
.syn-form-wrap.syn-settings {
  max-width: 820px;
}
.syn-form-wrap.syn-settings .syn-form {
  max-width: 480px;
  margin: 0 auto;
}
.syn-form-wrap h1 {
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  margin: 0 0 0.75rem;
}
.syn-form-sub {
  color: var(--syn-text-dim);
  margin-bottom: 2.5rem;
  font-size: 0.95rem;
}

.syn-form { display: block; }
.syn-field {
  display: block;
  margin-bottom: 1.25rem;
}
.syn-field-label {
  display: block;
  color: var(--syn-text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.syn-field-input,
.syn-form input[type="text"],
.syn-form input[type="email"],
.syn-form input[type="password"],
.syn-form input[type="date"],
.syn-form input[type="time"],
.syn-form input:not([type]),
.syn-form select,
.syn-form textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--syn-surface-2);
  border: 1px solid var(--syn-border);
  color: var(--syn-text);
  border-radius: var(--syn-r);
  font-size: 1rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.syn-form input:focus,
.syn-form select:focus,
.syn-form textarea:focus {
  outline: none;
  border-color: var(--syn-gold);
  background: var(--syn-surface);
  box-shadow: 0 0 0 3px rgba(201,164,73,0.12);
}
.syn-form input::placeholder,
.syn-form textarea::placeholder { color: var(--syn-text-mute); }

.syn-field-hint {
  display: block;
  color: var(--syn-text-mute);
  font-size: 0.82rem;
  margin-top: 0.4rem;
  line-height: 1.45;
}

.syn-field-error,
.syn-form .errorlist {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  color: var(--syn-mars-hi);
  font-size: 0.85rem;
}

.syn-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.syn-form-actions .syn-btn { flex: 1; }

.syn-form-foot {
  margin-top: 2rem;
  color: var(--syn-text-dim);
  font-size: 0.88rem;
  text-align: center;
}

/* collapse password policy into a subtle details */
.syn-help-details {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.syn-help-details summary {
  color: var(--syn-text-mute);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.syn-help-details summary::-webkit-details-marker { display: none; }
.syn-help-details summary::before {
  content: "›";
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.15s;
  margin-right: 0.3rem;
}
.syn-help-details[open] summary::before { transform: rotate(90deg); }
.syn-help-details ul {
  margin: 0.5rem 0 0 1rem;
  padding: 0;
  color: var(--syn-text-mute);
  line-height: 1.6;
}
.syn-help-details li { margin: 0; }

/* ==========================================================
   ONBOARDING — questions
   ========================================================== */
.syn-onboard { max-width: 680px; margin: 5rem auto; padding: 0 1rem; }
.syn-onboard-steps { padding-left: 1.2rem; }
.syn-onboard-steps li { margin-bottom: 0.75rem; color: var(--syn-text-dim); }
.syn-onboard-note {
  margin-top: 2.5rem; font-size: 0.85rem;
  color: var(--syn-text-mute); font-style: italic;
  padding-top: 1.5rem; border-top: 1px solid var(--syn-border);
}

.syn-onboard-q .syn-form { max-width: 620px; margin: 0 auto; }

.syn-q {
  border: 1px solid var(--syn-border);
  padding: 1.5rem 1.5rem 1rem;
  border-radius: var(--syn-r-lg);
  margin-bottom: 1rem;
  background: var(--syn-surface);
  transition: border-color 0.15s;
}
.syn-q:hover { border-color: var(--syn-border-hi); }
.syn-q legend {
  padding: 0 0.4rem;
  color: var(--syn-gold-hi);
  font-size: 1.02rem;
  font-family: var(--syn-serif);
  font-style: italic;
}
.syn-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--syn-r);
  cursor: pointer;
  color: var(--syn-text);
  transition: background 0.1s;
}
.syn-choice:hover { background: rgba(201,164,73,0.05); }
.syn-choice input {
  margin-top: 0.35rem;
  flex-shrink: 0;
  accent-color: var(--syn-gold);
}
.syn-choice span { line-height: 1.45; }

/* ==========================================================
   ORACLE DASHBOARD
   ========================================================== */
.syn-oracle { padding: 2.5rem 0 5rem; }

.syn-oracle-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-oracle-header .syn-eyebrow { margin-bottom: 0.75rem; }
.syn-oracle-title {
  font-size: clamp(1.7rem, 4.5vw, 2.7rem);
  color: var(--syn-gold-hi);
  margin: 0 0 2rem;
  line-height: 1.2;
}
.syn-oracle-title-prefix {
  color: var(--syn-text-dim);
  font-style: italic;
  margin-right: 0.3em;
  font-weight: 300;
}

/* Hour triptych: past / now / coming */
/* Explainer paragraph before the triptych */
.syn-hour-explainer {
  max-width: 740px;
  margin: 0.5rem auto 1.75rem;
  text-align: center;
  font-family: var(--syn-serif);
  color: var(--syn-text-dim);
  font-size: 1rem;
  line-height: 1.6;
}
.syn-hour-explainer strong { color: var(--syn-gold-hi); font-weight: 500; }

.syn-hour-triptych {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
  align-items: stretch;
  perspective: 1400px;
}

/* --- Flip tile: hidden checkbox toggles rotation of the card. --- */
.syn-hour-flip {
  position: relative;
  min-height: 300px;
}
.syn-flip-toggle {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.syn-flip-card {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  height: 100%;
  min-height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.25, 1.15);
  cursor: pointer;
  will-change: transform;
}
.syn-flip-toggle:checked + .syn-flip-card {
  transform: rotateY(180deg);
}
.syn-flip-toggle:focus-visible + .syn-flip-card .syn-flip-front,
.syn-flip-toggle:focus-visible + .syn-flip-card .syn-flip-back {
  box-shadow: 0 0 0 2px var(--syn-gold);
}

.syn-flip-face {
  grid-area: stack;
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 1.4rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.15s, box-shadow 0.25s;
  overflow: hidden;
}

/* --- Front face: the tile's resting state. --- */
.syn-flip-front {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  background:
    radial-gradient(circle at 90% 10%, rgba(201,164,73,0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.015), var(--syn-surface));
}
.syn-flip-front::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--syn-gold-low), transparent);
  opacity: 0.35;
}
.syn-hour-label {
  color: var(--syn-text-mute);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.syn-hour-glyph {
  font-family: var(--syn-serif);
  font-size: 3.1rem;
  line-height: 1;
  color: var(--syn-gold);
  margin: 0.25rem 0 0.2rem;
  text-shadow: 0 0 24px rgba(201,164,73,0.25);
}
.syn-hour-name {
  font-family: var(--syn-serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--syn-text);
  letter-spacing: 0.02em;
}
.syn-hour-tag {
  color: var(--syn-text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
  font-style: italic;
  flex: 1;
}
.syn-flip-hint {
  margin-top: auto;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  padding-top: 0.6rem;
  border-top: 1px dashed var(--syn-border);
}
.syn-flip-hint::after {
  content: " ↻";
  color: var(--syn-gold);
}

/* --- Back face: the reading. --- */
.syn-flip-back {
  transform: rotateY(180deg);
  overflow-y: auto;
}
.syn-flip-back-hint {
  align-self: flex-end;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin-bottom: 0.25rem;
}

.syn-hour-lead {
  font-family: var(--syn-serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--syn-text);
  margin: 0 0 0.6rem;
}
.syn-hour-lead b { color: var(--syn-gold-hi); font-weight: 500; }
.syn-hour-line {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--syn-text);
}
.syn-hour-line b {
  color: var(--syn-gold-low);
  letter-spacing: 0.04em;
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 0.25rem;
}
.syn-hour-ritual b { color: var(--syn-gold); }
.syn-hour-meta {
  font-size: 0.74rem;
  color: var(--syn-text-mute);
  margin: auto 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--syn-border);
  line-height: 1.7;
}
.syn-hour-meta em {
  color: var(--syn-text-dim);
  font-style: normal;
  margin-right: 0.2rem;
}

/* --- Past / Now / Next variants. --- */
.syn-hour-past  .syn-flip-face,
.syn-hour-next  .syn-flip-face { opacity: 0.82; }
.syn-hour-flip:hover .syn-flip-face { opacity: 1; border-color: var(--syn-border-hi); }

.syn-hour-now .syn-flip-face {
  border-color: var(--syn-gold-low);
  background:
    radial-gradient(circle at 90% 10%, rgba(201,164,73,0.18), transparent 55%),
    linear-gradient(180deg, rgba(201,164,73,0.08), var(--syn-surface) 65%);
  box-shadow: 0 12px 36px -14px rgba(201,164,73,0.3);
}
.syn-hour-now .syn-hour-name { color: var(--syn-gold-hi); font-size: 1.75rem; }
.syn-hour-now .syn-hour-label { color: var(--syn-gold); }
.syn-hour-now .syn-hour-glyph { font-size: 3.4rem; }

@media (max-width: 780px) {
  .syn-hour-triptych {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .syn-hour-flip { min-height: 280px; }
  .syn-flip-card { min-height: 280px; }
  .syn-hour-glyph { font-size: 2.5rem; }
  .syn-hour-now .syn-hour-glyph { font-size: 2.8rem; }
}

/* Synthesis — the composed prose reading */
.syn-synth {
  max-width: 780px;
  margin: 0 auto 2rem;
  padding: 2rem 2.2rem 1.75rem;
  background:
    linear-gradient(180deg, rgba(201,164,73,0.04), transparent 70%),
    var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-left: 3px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  position: relative;
}
.syn-synth::before {
  content: "❖";
  position: absolute;
  top: -0.6rem; left: 1.4rem;
  color: var(--syn-gold);
  background: var(--syn-bg);
  padding: 0 0.4rem;
  font-size: 0.9rem;
}
.syn-synth-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  margin-bottom: 1rem;
}
.syn-synth-pillar {
  color: var(--syn-gold);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--syn-gold-low);
  border-radius: 999px;
  font-size: 0.65rem;
}
.syn-synth-sep { color: var(--syn-text-mute); }
.syn-synth-element {}

.syn-synth-body {
  margin: 0 0 1rem;
  font-family: var(--syn-serif);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--syn-text);
}
.syn-synth-body b {
  font-weight: 500;
  color: var(--syn-gold-hi);
  font-style: italic;
}
.syn-synth-minute {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--syn-border);
  color: var(--syn-text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}
.syn-synth-minute b {
  color: var(--syn-gold-hi);
  font-weight: 500;
}

/* Mode tints — left border colour shifts by pillar */
.syn-synth-mode-truth    { border-left-color: #6a85c9; }  /* Mercury blue-violet */
.syn-synth-mode-fear     { border-left-color: #9b8ab8; }  /* Moon silver-violet */
.syn-synth-mode-outcomes { border-left-color: var(--syn-mars-hi); }

/* Element tints — subtle top-gradient colour shift */
.syn-synth-el-fire  { background: linear-gradient(180deg, rgba(209,74,67,0.05), transparent 70%), var(--syn-surface); }
.syn-synth-el-water { background: linear-gradient(180deg, rgba(106,133,201,0.05), transparent 70%), var(--syn-surface); }
.syn-synth-el-air   { background: linear-gradient(180deg, rgba(226,194,116,0.05), transparent 70%), var(--syn-surface); }
.syn-synth-el-earth { background: linear-gradient(180deg, rgba(155,138,117,0.05), transparent 70%), var(--syn-surface); }

/* THE LOOM — cross-thread + natal echo narrative */
.syn-loom {
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 1.75rem 2rem 1.5rem;
  background:
    linear-gradient(135deg, rgba(201,164,73,0.08), rgba(166,48,43,0.05) 70%),
    var(--syn-surface);
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  box-shadow: 0 25px 70px -35px rgba(201,164,73,0.35);
  position: relative;
}
.syn-loom > header {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-bottom: 1.1rem; padding-bottom: 1rem;
  border-bottom: 1px dashed var(--syn-border);
}
.syn-loom-mark {
  color: var(--syn-gold);
  font-size: 1.35rem;
  line-height: 1;
}
.syn-loom-tag {
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.syn-loom ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.syn-loom li {
  padding-left: 1rem;
  border-left: 2px solid var(--syn-gold);
  font-family: var(--syn-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--syn-text);
}
.syn-loom li b { color: var(--syn-gold-hi); font-weight: 500; font-style: italic; }
.syn-loom li i { color: var(--syn-text-dim); }

/* Per-card "weaves with" block */
.syn-stream-weaves {
  margin-top: 0.4rem;
  padding: 0.85rem 0.95rem;
  border-top: 1px dashed var(--syn-border);
}
.syn-stream-weaves-tag {
  display: block;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.65rem;
}
.syn-weave {
  padding: 0.4rem 0;
  border-top: 1px solid var(--syn-border);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--syn-text-dim);
}
.syn-weave:first-of-type { border-top: 0; padding-top: 0; }
.syn-weave-label {
  display: inline-block;
  font-family: var(--syn-sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--syn-text-mute);
  margin-right: 0.4rem;
}
.syn-weave b { color: var(--syn-text); font-weight: 500; }
.syn-weave-reason { color: var(--syn-text-mute); font-style: italic; }
.syn-weave-exact {
  background: rgba(201,164,73,0.08);
  border-radius: var(--syn-r);
  padding: 0.55rem 0.7rem;
  border-top: 0 !important;
  margin-bottom: 0.3rem;
}
.syn-weave-exact .syn-weave-label { color: var(--syn-gold); }
.syn-weave-exact b { color: var(--syn-gold-hi); }
.syn-weave-natal {
  background: rgba(166,48,43,0.07);
  border-left: 2px solid var(--syn-mars-hi);
  padding: 0.55rem 0.85rem !important;
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  border-top: 0 !important;
  margin-top: 0.4rem;
}
.syn-weave-natal .syn-weave-label { color: var(--syn-mars-hi); }
.syn-weave-natal p { margin: 0.25rem 0 0; color: var(--syn-text); font-size: 0.88rem; line-height: 1.5; }
.syn-weave-natal p b { color: var(--syn-gold-hi); font-weight: 500; }

/* Golden Thread — unity through echoes */
.syn-echoes {
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 1.75rem 2rem 1.25rem;
  background:
    linear-gradient(90deg, rgba(201,164,73,0.08), rgba(201,164,73,0.02) 70%),
    var(--syn-surface);
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  position: relative;
}
.syn-echoes-strong {
  box-shadow: 0 20px 60px -25px rgba(201,164,73,0.35);
  border-color: var(--syn-gold);
}
.syn-echoes > header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--syn-border);
}
.syn-echoes-mark {
  color: var(--syn-gold);
  font-size: 1.2rem;
  line-height: 1;
}
.syn-echoes-tag {
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  flex: 1;
}
.syn-echoes-verdict {
  margin: 0;
  color: var(--syn-gold-hi);
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 0.95rem;
}
.syn-echoes-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.syn-echo p {
  margin: 0;
  font-family: var(--syn-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--syn-text);
}
.syn-echo p b  { color: var(--syn-gold-hi); font-weight: 500; }
.syn-echo p i  { color: var(--syn-text-dim); font-style: italic; }
.syn-echo-element { border-left: 2px solid var(--syn-gold); padding-left: 1rem; }
.syn-echo-planet  { border-left: 2px solid var(--syn-mars-hi); padding-left: 1rem; }
.syn-echo-number  { border-left: 2px solid #8fa6d9; padding-left: 1rem; }

/* Free-tier upgrade nudge on Oracle */
.syn-tier-nudge {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 1.5rem 2rem;
  background:
    linear-gradient(135deg, rgba(201,164,73,0.1), rgba(201,164,73,0.02) 60%),
    var(--syn-surface);
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  box-shadow: 0 10px 40px -20px rgba(201,164,73,0.3);
}
.syn-tier-nudge > div:first-child { flex: 1; }
.syn-tier-nudge .syn-eyebrow { margin-bottom: 0.5rem; }
.syn-tier-nudge h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: var(--syn-gold-hi);
}
.syn-tier-nudge p {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.95rem;
}
.syn-tier-nudge p b { color: var(--syn-gold); font-weight: 500; }
.syn-tier-nudge > a.syn-btn { flex-shrink: 0; }

/* Continuity strip */
.syn-continuity {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 780px;
  margin: 0 auto 3rem;
  padding: 1.1rem 1.25rem;
  background: rgba(201,164,73,0.04);
  border-left: 2px solid var(--syn-gold-low);
  border-radius: var(--syn-r);
}
.syn-continuity-mark {
  color: var(--syn-gold);
  font-size: 1rem;
  line-height: 1.5;
}
.syn-continuity p {
  margin: 0;
  color: var(--syn-text);
  font-size: 0.95rem;
}
.syn-continuity strong { color: var(--syn-gold-hi); font-weight: 500; }

/* Streams grid (deprecated — kept for possible fallback) */
.syn-streams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Stream TABS (current default layout) ---------- */
.syn-stream-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 0.25rem;
  padding: 0 0 0.4rem;
  margin: 0 auto 1.5rem;
  max-width: 1100px;
  border-bottom: 1px solid var(--syn-border);
  -webkit-overflow-scrolling: touch;
}
.syn-stream-tabs::-webkit-scrollbar { height: 4px; }
.syn-stream-tabs::-webkit-scrollbar-thumb { background: var(--syn-border-hi); border-radius: 2px; }

.syn-stream-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: transparent;
  color: var(--syn-text-dim);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--syn-sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.syn-stream-tab:hover {
  color: var(--syn-text);
  background: rgba(255,255,255,0.02);
}
.syn-stream-tab.is-active {
  color: var(--syn-gold-hi);
  border-bottom-color: var(--syn-gold);
}
.syn-stream-tab-glyph {
  font-size: 1.05rem;
  color: var(--syn-gold);
  line-height: 1;
}
.syn-stream-tab-label {
  font-family: var(--syn-serif);
  font-size: 0.98rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
}
.syn-stream-tab-lock { font-size: 0.7rem; opacity: 0.6; margin-left: 0.25rem; }

.syn-stream-panels {
  max-width: 1100px;
  margin: 0 auto;
}
.syn-stream-panel {
  display: block;
  width: 100%;
  padding: 2rem 2.25rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
}
.syn-stream-panel[hidden] { display: none; }
.syn-stream-panel .syn-stream-headline {
  font-size: 1.7rem;
  margin-top: 0.5rem;
}
.syn-stream-panel .syn-stream-body {
  font-size: 1.02rem;
  max-width: 740px;
  line-height: 1.7;
}

/* Sensory rite panel — five senses to invoke the sixth */
.syn-rite-panel {
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(201,164,73,0.05), rgba(0,0,0,0.12) 70%);
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
}
.syn-rite-panel-tag {
  display: block;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--syn-border);
}
.syn-rite-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.syn-rite-row {
  display: grid;
  grid-template-columns: 1.2rem minmax(4.2rem, auto) 1fr;
  gap: 0.4rem 0.85rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--syn-border);
}
.syn-rite-row:last-of-type { border-bottom: 0; }
.syn-rite-icon {
  font-size: 1.05rem;
  color: var(--syn-gold);
  line-height: 1;
  text-align: center;
}
.syn-rite-label {
  font-family: var(--syn-sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--syn-text-mute);
}
.syn-rite-row p {
  margin: 0;
  color: var(--syn-text);
  font-size: 0.93rem;
  line-height: 1.55;
}
.syn-rite-chant p {
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-gold-hi);
  font-size: 1rem !important;
}
.syn-rite-action {
  background: rgba(201,164,73,0.06);
  border-radius: var(--syn-r);
  border-bottom: 0 !important;
  padding: 0.6rem 0.75rem !important;
  margin: 0.3rem 0;
}
.syn-rite-action .syn-rite-label { color: var(--syn-gold); }
.syn-rite-action p { color: var(--syn-text); }

.syn-stream {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 1.5rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 0.2s, transform 0.2s;
}
.syn-stream:hover {
  border-color: var(--syn-border-hi);
  transform: translateY(-2px);
}
.syn-stream-live {
  border-color: var(--syn-gold-low);
  background: linear-gradient(180deg, rgba(201,164,73,0.04), var(--syn-surface) 70%);
}

.syn-stream-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-stream-glyph {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--syn-gold);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.syn-stream-title {
  margin: 0;
  font-size: 0.78rem;
  font-family: var(--syn-sans);
  font-weight: 600;
  color: var(--syn-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.syn-stream-meta {
  margin: 0.25rem 0 0;
  color: var(--syn-text-mute);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.syn-stream-headline {
  margin: 0;
  font-family: var(--syn-serif);
  font-size: 1.35rem;
  color: var(--syn-text);
  line-height: 1.25;
}

.syn-stream-body {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.93rem;
  line-height: 1.55;
}
.syn-stream-shadow {
  margin: 0;
  color: var(--syn-text-mute);
  font-size: 0.85rem;
  line-height: 1.5;
}
.syn-shadow-label {
  color: var(--syn-mars-hi);
  font-family: var(--syn-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-right: 0.2rem;
}
.syn-stream-contemplation {
  margin: 0;
  padding: 0.85rem 1rem;
  background: rgba(201,164,73,0.05);
  border-left: 2px solid var(--syn-gold-low);
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  color: var(--syn-gold-hi);
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Rich sections inside a stream card (Sun/Moon have work, love, ritual, etc.) */
.syn-stream-sections {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
}
.syn-stream-section {
  padding: 0.45rem 0;
  border-top: 1px solid var(--syn-border);
}
.syn-stream-section:first-child { border-top: 0; padding-top: 0; }
.syn-stream-section-label {
  display: block;
  color: var(--syn-text-mute);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.syn-stream-section p {
  margin: 0;
  color: var(--syn-text);
  font-size: 0.88rem;
  line-height: 1.55;
}
.syn-stream-section-accent {
  background: rgba(201,164,73,0.05);
  border-left: 2px solid var(--syn-gold-low);
  border-top: 0;
  padding: 0.7rem 0.85rem;
  margin: 0.2rem 0;
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
}
.syn-stream-section-accent .syn-stream-section-label {
  color: var(--syn-gold);
}
.syn-stream-section-subtle p {
  color: var(--syn-text-mute);
  font-size: 0.84rem;
  font-style: italic;
}

/* Today's Ritual card */
.syn-ritual {
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 2rem 2rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(201,164,73,0.05), transparent 80%),
    var(--syn-surface);
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  box-shadow: 0 20px 60px -30px rgba(201,164,73,0.25);
  position: relative;
}
.syn-ritual::before {
  content: "⚚";
  position: absolute;
  top: -0.85rem; left: 1.6rem;
  color: var(--syn-gold);
  background: var(--syn-bg);
  padding: 0 0.5rem;
  font-size: 1.3rem;
}
.syn-ritual-head { margin-bottom: 1.75rem; }
.syn-ritual-tag {
  display: block;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.syn-ritual-opening {
  margin: 0;
  font-family: var(--syn-serif);
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  line-height: 1.5;
  color: var(--syn-text);
  font-weight: 400;
}
.syn-ritual-opening b {
  color: var(--syn-gold-hi);
  font-style: italic;
  font-weight: 500;
}
.syn-ritual-opening i { color: var(--syn-gold); font-style: italic; }

.syn-ritual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.syn-ritual-cell {
  padding: 0.85rem 1rem;
  background: rgba(0,0,0,0.15);
  border-radius: var(--syn-r);
  border: 1px solid var(--syn-border);
}
.syn-ritual-cell-wide { grid-column: span 2; }
.syn-ritual-label {
  display: block;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.syn-ritual-cell p {
  margin: 0;
  color: var(--syn-text);
  font-size: 0.95rem;
  line-height: 1.5;
}
.syn-ritual-word {
  font-family: var(--syn-serif) !important;
  font-style: italic;
  color: var(--syn-gold-hi) !important;
  font-size: 1.05rem !important;
}
.syn-ritual-contemplation {
  font-family: var(--syn-serif) !important;
  font-style: italic;
  color: var(--syn-gold-hi) !important;
  font-size: 1rem !important;
}
.syn-ritual-timer {
  margin: 1.25rem 0 0;
  text-align: right;
  color: var(--syn-text-mute);
  font-size: 0.82rem;
}
.syn-ritual-timer b { color: var(--syn-gold); font-weight: 500; }

/* Hourly pulse row inside a stream card */
.syn-stream-pulse {
  margin: 0.25rem -0.25rem -0.25rem;
  padding: 0.75rem 0.9rem;
  background: rgba(201,164,73,0.04);
  border: 1px dashed rgba(201,164,73,0.2);
  border-radius: var(--syn-r);
}
.syn-stream-pulse-tag {
  display: inline-block;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.syn-stream-pulse-name {
  margin: 0 0 0.2rem;
  font-family: var(--syn-serif);
  font-size: 1rem;
  color: var(--syn-text);
}
.syn-stream-pulse-meaning {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.85rem;
  line-height: 1.45;
}
.syn-stream-pulse-meaning i { color: var(--syn-text-mute); font-style: italic; }

/* Locked stream card */
.syn-stream-locked {
  background: linear-gradient(180deg, rgba(201,164,73,0.02), var(--syn-surface) 80%);
  border-style: dashed;
}
.syn-stream-locked .syn-stream-head { border-bottom-style: dashed; opacity: 0.6; }
.syn-stream-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.25rem 0;
  gap: 0.5rem;
}
.syn-stream-lock-icon {
  color: var(--syn-gold);
  font-size: 1.3rem;
  opacity: 0.7;
}
.syn-stream-lock-title {
  margin: 0;
  font-family: var(--syn-serif);
  color: var(--syn-gold-hi);
  font-size: 1.05rem;
}
.syn-stream-lock-body {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.88rem;
}
.syn-stream-lock-body b { color: var(--syn-gold); font-weight: 500; }
.syn-stream-lock .syn-btn { margin-top: 0.75rem; font-size: 0.85rem; padding: 0.55rem 1rem; }

/* Smaller tier-nudge variant (for after-cards "ascend" prompt) */
.syn-tier-nudge-small {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  background: var(--syn-surface);
  border-color: var(--syn-border);
  box-shadow: none;
}
.syn-tier-nudge-small h3 { font-size: 1.1rem; }
.syn-tier-nudge-small p { font-size: 0.9rem; }

/* Geomantic figure (4 rows) */
.syn-geo-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0;
}
.syn-geo-row {
  display: flex;
  gap: 1.1rem;
  min-height: 12px;
  align-items: center;
}
.syn-geo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--syn-gold);
  display: inline-block;
}

.syn-oracle-foot {
  text-align: center;
  max-width: 680px;
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--syn-border);
  color: var(--syn-text-mute);
  font-style: italic;
  font-size: 0.85rem;
}

/* ==========================================================
   TIERS
   ========================================================== */
.syn-tiers-wrap { padding: 4rem 0 6rem; }
.syn-tiers-wrap h1 {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  text-align: center;
  margin: 0 0 0.75rem;
}
.syn-tiers-intro {
  text-align: center;
  color: var(--syn-text-dim);
  max-width: 520px;
  margin: 0 auto 3rem;
}

.syn-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1080px;
  margin: 0 auto;
}
.syn-tier {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 2.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.syn-tier:hover {
  border-color: var(--syn-border-hi);
  transform: translateY(-2px);
}
.syn-tier.featured {
  /* Highlight is driven solely by .is-selected now, so a deselected Seeker
     carries no border/glow. .featured only marks the trial-badge tier. */
  border-color: var(--syn-border);
  background: var(--syn-surface);
}
.syn-tier-name {
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.syn-tier-trial-badge {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.28rem 0.85rem;
  background: var(--syn-gold);
  color: var(--syn-ink);
  border-radius: 999px;
  font-family: var(--syn-sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 2px 14px rgba(201,164,73,0.35);
}
.syn-tier-price {
  font-family: var(--syn-serif);
  font-size: 2rem;
  color: var(--syn-text);
  margin: 0 0 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.syn-tier-price small {
  font-family: var(--syn-sans);
  font-size: 0.82rem;
  color: var(--syn-text-dim);
  letter-spacing: 0;
}
.syn-tier-epigraph {
  font-family: var(--syn-serif);
  font-style: normal;
  font-size: 0.84rem;
  color: var(--syn-gold-hi);
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--syn-border);
  line-height: 1.4;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: none;
}
.syn-tier-epigraph b { color: var(--syn-gold); font-weight: 600; font-style: normal; }
.syn-tier-epigraph small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.76rem;
  font-style: italic;
  letter-spacing: 0.01em;
  opacity: 0.78;
}
.syn-tier.featured .syn-tier-epigraph { border-bottom-color: var(--syn-gold-low); }
.syn-tier-current-badge {
  display: block;
  text-align: center;
  padding: 0.3rem 0.6rem;
  margin: 0 0 0.6rem;
  background: rgba(201,164,73,0.12);
  color: var(--syn-gold);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Tier selection confirmation page */
.syn-tier-select { max-width: 560px; }
.syn-tier-select-card {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-left: 3px solid var(--syn-gold-low);
  border-radius: var(--syn-r-lg);
  padding: 2rem 1.75rem;
  margin: 2rem 0;
  text-align: center;
}
.syn-tier-select-price { margin-bottom: 1rem; }
.syn-tier-select-amount {
  font-family: var(--syn-serif);
  font-size: 3rem;
  color: var(--syn-gold-hi);
  line-height: 1;
}
.syn-tier-select-price small {
  display: block; margin-top: 0.4rem;
  color: var(--syn-text-dim);
  font-size: 0.85rem;
}
.syn-tier-select-epigraph {
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-gold-hi);
  margin: 0 0 1rem;
  font-size: 1.05rem;
}
.syn-tier-select-body {
  color: var(--syn-text-dim);
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}
.syn-tier-select-note {
  padding: 0.75rem 1rem;
  background: rgba(201,164,73,0.05);
  border-left: 2px solid var(--syn-gold-low);
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  color: var(--syn-text-dim);
  font-size: 0.88rem;
  margin: 1.5rem 0;
}
.syn-tier-select-note em { color: var(--syn-gold-hi); font-style: italic; }
.syn-tier-features {
  list-style: none;
  padding: 0; margin: 0 0 2rem;
  color: var(--syn-text-dim);
  font-size: 0.86rem;
  line-height: 1.4;
  flex-grow: 1;
}
.syn-tier-features li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--syn-border);
  word-break: keep-all;
  hyphens: none;
}
.syn-tier-features li:first-child { border-top: 0; }
.syn-tier-features li::before {
  content: "·";
  color: var(--syn-gold);
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.syn-tier-features li small {
  display: block;
  font-size: 0.72rem;
  color: var(--syn-text-dim);
  opacity: 0.7;
  font-style: italic;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}
.syn-tier-features li.syn-tier-group {
  grid-template-columns: 1fr;
  border-top: 0;
  padding: 1.1rem 0 0.2rem;
  color: var(--syn-gold);
  font-family: var(--syn-sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.syn-tier-features li.syn-tier-group::before { content: none; }
.syn-tier-features li.syn-tier-group:first-child { padding-top: 0; }
.syn-tier-features li.syn-tier-cont {
  grid-template-columns: 1fr;
  border-top: 0;
  padding-bottom: 0.1rem;
  color: var(--syn-text);
  font-style: italic;
}
.syn-tier-features li.syn-tier-cont::before { content: none; }
/* Alignment spacers: reserve a row to line headings up across cards, but
   carry no bullet, no border line, and no background of their own — blank
   to the visitor. Hidden entirely on mobile (no subgrid there). */
.syn-tier-features li.syn-tier-spacer {
  display: none;
  border-top: 0;
  background: transparent;
}
.syn-tier-features li.syn-tier-spacer::before { content: none; }

/* Whole tier card is a link to the plans page. Absolutely positioned so it
   overlays the card without taking a subgrid track. */
.syn-tier-stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--syn-r-lg);
}
.syn-tier-trial-badge { z-index: 3; }

/* Tier lock badge on the landing book covers — mirrors the /knowledge/
   .col-lock-badge so a visitor sees which tier opens each book. */
.syn-landing-library-card { position: relative; }
.syn-landing-lock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(0,0,0,0.72);
  color: var(--syn-gold-hi);
  border: 1px solid rgba(201,164,73,0.4);
  border-radius: 3px;
  padding: 2px 7px;
  font-family: var(--syn-sans);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Desktop (3-column): lock the three cards onto shared row tracks via
   subgrid, so every section heading (The Oracle / The Library / The
   Divination Tools) lines up across the cards regardless of how the
   copy wraps. Shared tracks size to the tallest card, so a longer line
   in one card cannot push another card's heading out of line. */
@media (min-width: 821px) {
  .syn-tiers {
    grid-template-rows: repeat(18, auto);
    row-gap: 0;
  }
  .syn-tier {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    align-items: start;
  }
  .syn-tier-features {
    grid-row: 4 / 17;
    display: grid;
    grid-template-rows: subgrid;
    margin-bottom: 0;
  }
  .syn-tier-gate { grid-row: 17 / 18; }
  .syn-tier-action { grid-row: 18 / 19; align-self: end; }
  .syn-tier-features li.syn-tier-spacer { display: block; }
}

/* Tier cards are click-to-select. */
.syn-tiers .syn-tier { cursor: pointer; }
.syn-tiers .syn-tier .syn-btn { cursor: pointer; }

/* Selected tier — gold border + glow on the card; the CTA is swapped to a
   real .syn-btn-primary (so its hover behaves), and we only add a glow here.
   No colour override — that caused gold-on-gold text to vanish on hover. */
.syn-tier.is-selected {
  border-color: var(--syn-gold);
  box-shadow: var(--syn-glow), 0 0 0 1px var(--syn-gold-low);
}
.syn-tier.is-selected .syn-tier-action .syn-btn {
  box-shadow: 0 0 22px rgba(201,164,73,0.5);
}

/* Numerology of the Ladder — the deep price story */
.syn-price-story {
  max-width: 820px;
  margin: 6rem auto 2rem;
}
.syn-price-story header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2.5rem 1rem;
  border-top: 1px solid var(--syn-border);
  border-bottom: 1px solid var(--syn-border);
}
.syn-price-story header h2 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin: 0.5rem 0 1rem;
  color: var(--syn-gold-hi);
}
.syn-price-story-sub {
  color: var(--syn-text-dim);
  max-width: 580px;
  margin: 0 auto;
}

.syn-price-block {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-price-block:last-of-type { border-bottom: 0; }
.syn-price-block-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.syn-price-block-price {
  font-family: var(--syn-serif);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--syn-gold-hi);
  flex-shrink: 0;
  padding-right: 1.5rem;
  border-right: 1px solid var(--syn-border);
}
.syn-price-block-tag {
  margin: 0 0 0.25rem;
  color: var(--syn-gold);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.syn-price-block-head h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  color: var(--syn-text);
}
.syn-price-block > p {
  font-family: var(--syn-serif);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--syn-text);
  margin: 0 0 1.25rem;
}
.syn-price-block > p b { color: var(--syn-gold-hi); font-weight: 500; font-style: italic; }
.syn-price-block > p em { color: var(--syn-gold-hi); font-style: italic; }
.syn-price-block-why {
  background: rgba(201,164,73,0.04);
  border-left: 2px solid var(--syn-gold-low);
  padding: 1rem 1.25rem !important;
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  color: var(--syn-text-dim) !important;
  font-size: 0.98rem !important;
}
.syn-price-block-why b:first-child { color: var(--syn-gold) !important; font-style: normal !important; }

.syn-price-story-closing {
  text-align: center;
  max-width: 520px;
  margin: 3rem auto 0;
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-gold-hi);
  font-size: 1.1rem;
  line-height: 1.6;
}

.syn-tiers-preview-sub {
  color: var(--syn-text-dim);
  max-width: 500px;
  margin: 0 auto;
  font-style: italic;
}

/* ==========================================================
   MESSAGES + SETTINGS
   ========================================================== */
.syn-messages {
  max-width: 540px;
  margin: 2rem auto 0;
  padding: 0;
  list-style: none;
}
.syn-message {
  padding: 0.75rem 1rem;
  border-radius: var(--syn-r);
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
  border: 1px solid var(--syn-border);
}
.syn-message-success {
  background: rgba(201,164,73,0.08);
  border-color: var(--syn-gold-low);
  color: var(--syn-gold-hi);
}
.syn-message-error {
  background: rgba(209,74,67,0.08);
  border-color: var(--syn-mars);
  color: var(--syn-mars-hi);
}

.syn-settings-sub {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-settings code {
  font-family: var(--syn-mono);
  font-size: 0.88em;
  background: var(--syn-surface-2);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  color: var(--syn-gold-hi);
}
.syn-settings .syn-field-hint b { color: var(--syn-gold-hi); font-weight: 500; }

/* Danger zone — inside settings */
.syn-danger-zone {
  margin-top: 4rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: rgba(209,74,67,0.03);
  border: 1px solid rgba(209,74,67,0.2);
  border-radius: var(--syn-r-lg);
}
.syn-danger-zone h3 {
  color: var(--syn-mars-hi);
  font-size: 0.8rem;
  font-family: var(--syn-sans);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.syn-danger-zone p {
  color: var(--syn-text-dim);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}

/* Delete-account page */
.syn-danger h1 { color: var(--syn-mars-hi); }

/* ==========================================================
   JOURNAL
   ========================================================== */
.syn-journal {
  max-width: 820px;
  margin: 3rem auto 4rem;
  padding: 0 0.5rem;
}
.syn-journal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-journal-head h1 { margin: 0 0 0.5rem; }
.syn-journal-sub {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.95rem;
  max-width: 500px;
}

.syn-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.syn-entry-row {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  transition: border-color 0.15s, transform 0.15s;
}
.syn-entry-row:hover {
  border-color: var(--syn-border-hi);
  transform: translateY(-1px);
}
.syn-entry-row > a {
  display: block;
  padding: 1.2rem 1.4rem;
  color: var(--syn-text);
}
.syn-entry-row > a:hover { color: var(--syn-text); }
.syn-entry-date {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.syn-entry-kind-tag {
  padding: 0.15rem 0.55rem;
  background: rgba(201,164,73,0.08);
  color: var(--syn-gold);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.syn-entry-row time {
  color: var(--syn-text-dim);
  font-size: 0.85rem;
}
.syn-entry-title {
  font-family: var(--syn-serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: var(--syn-text);
}
.syn-entry-mood {
  color: var(--syn-text-mute);
  font-size: 0.82rem;
  font-style: italic;
}
.syn-entry-kind-dream .syn-entry-kind-tag {
  background: rgba(106,133,201,0.1);
  color: #8fa6d9;
}
.syn-entry-kind-ritual .syn-entry-kind-tag {
  background: rgba(166,48,43,0.1);
  color: var(--syn-mars-hi);
}
.syn-entry-kind-intention .syn-entry-kind-tag {
  background: rgba(155,138,117,0.12);
  color: #c1b49b;
}

/* Empty state */
.syn-empty {
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed var(--syn-border);
  border-radius: var(--syn-r-lg);
}
.syn-empty p { margin: 0; color: var(--syn-text); font-size: 1.1rem; }
.syn-empty-sub { color: var(--syn-text-dim) !important; font-size: 0.95rem !important; margin: 0.5rem 0 2rem !important; }

/* Compose */
.syn-journal-compose .syn-form-wrap,
.syn-journal-compose { max-width: 720px; }
.syn-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.syn-field-row .syn-field { margin-bottom: 1.25rem; }

/* Detail */
.syn-entry-detail {
  max-width: 720px;
  margin: 3rem auto 4rem;
  padding: 0 0.5rem;
}
.syn-entry-back { margin: 0 0 2rem; font-size: 0.9rem; }
.syn-entry-back a { color: var(--syn-text-dim); }
.syn-entry-back a:hover { color: var(--syn-gold); }
.syn-entry-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}
.syn-entry-date-large {
  color: var(--syn-text-dim);
  font-size: 0.95rem;
}
.syn-entry-title-large {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: 0 0 0.75rem;
  color: var(--syn-text);
}
.syn-entry-mood-large {
  color: var(--syn-gold-hi);
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 2rem;
}
.syn-entry-body {
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--syn-text);
  padding: 1.5rem 0;
  border-top: 1px solid var(--syn-border);
  border-bottom: 1px solid var(--syn-border);
}
.syn-entry-actions {
  display: flex;
  gap: 0.75rem;
  margin: 2rem 0;
}
.syn-entry-footer { color: var(--syn-text-mute); }

/* ==========================================================
   FOOTER
   ========================================================== */
.syn-footer {
  text-align: center;
  padding: 3.5rem 1rem 2.2rem;
  color: var(--syn-text-dim);
  font-size: 0.82rem;
  border-top: 1px solid var(--syn-border);
  margin-top: 4rem;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,164,73,0.06), transparent 55%),
    var(--syn-ink);
}
.syn-footer a { color: var(--syn-text-dim); }
.syn-footer a:hover { color: var(--syn-gold); }

/* --- First Canon: the foundation message. --- */
.syn-footer-canon {
  max-width: 620px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.syn-canon-sigils {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--syn-gold);
  letter-spacing: 0.08em;
}
.syn-canon-sigil {
  display: inline-block;
  transition: text-shadow 0.4s, transform 0.4s;
}
.syn-canon-sigil-mars  { color: var(--syn-mars-hi, #c96057); }
.syn-canon-sigil-forge { color: var(--syn-gold); }
.syn-canon-sigil-dawn  { color: var(--syn-gold-hi); }
.syn-canon-sigil:hover { text-shadow: 0 0 10px currentColor; transform: translateY(-1px); }
.syn-canon-sigil-sep {
  color: var(--syn-border-hi);
  font-size: 0.85rem;
  opacity: 0.6;
}
.syn-canon-quote {
  margin: 0.2rem 0 0.7rem;
  padding: 0;
  border: 0;
}
.syn-canon-quote p {
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.5;
  color: var(--syn-text);
  letter-spacing: 0.01em;
  margin: 0;
}
.syn-canon-cite {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  line-height: 1.8;
}
.syn-canon-cite-lead {
  color: var(--syn-gold-low);
  font-variant: small-caps;
  letter-spacing: 0.18em;
}
.syn-canon-cite-sep {
  color: var(--syn-border-hi);
  margin: 0 0.15em;
}
.syn-canon-cite time {
  color: var(--syn-text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.syn-footer-meta {
  padding-top: 1.25rem;
  border-top: 1px solid var(--syn-border);
  max-width: 620px;
  margin: 0 auto;
}
.syn-footer-meta small { letter-spacing: 0.08em; }

/* --- Page colophon: attribution + caveat, layer above footer --- */
.syn-colophon {
  max-width: 820px;
  margin: 4rem auto 0;
  padding: 2rem 1.5rem 0;
  text-align: center;
  border-top: 1px solid var(--syn-border);
}
.syn-colophon-ornament {
  color: var(--syn-gold-low);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  margin-bottom: 1rem;
  opacity: 0.6;
}
.syn-colophon-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.syn-colophon-mark {
  color: var(--syn-gold);
  font-size: 0.9rem;
  margin-right: 0.2rem;
}
.syn-colophon-continuity {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--syn-text);
  margin: 0;
}
.syn-colophon-continuity strong { color: var(--syn-gold-hi); font-weight: 500; }
.syn-colophon-caveat {
  margin: 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--syn-text-mute);
  line-height: 1.7;
}
.syn-colophon-caveat em { color: var(--syn-text-dim); font-style: italic; }

@media (max-width: 520px) {
  .syn-canon-sigils { gap: 0.5rem; font-size: 1rem; }
  .syn-canon-quote p { font-size: 1rem; }
  .syn-canon-cite { font-size: 0.66rem; letter-spacing: 0.12em; }
  .syn-colophon { padding: 1.5rem 1rem 0; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 1100px) {
  .syn-main { max-width: 1240px; }
  .syn-streams     { grid-template-columns: repeat(3, 1fr); }
  .syn-natal-grid  { grid-template-columns: repeat(3, 1fr); }
  .syn-tiers       { grid-template-columns: repeat(3, 1fr); }
  .syn-archetype-grid { grid-template-columns: repeat(4, 1fr); }
  .syn-how-steps   { grid-template-columns: repeat(3, 1fr); }
  .syn-hero-banner { max-width: 1240px; }
}
@media (min-width: 1440px) {
  .syn-main { max-width: 1360px; }
  .syn-hero-banner { max-width: 1360px; }
}
@media (min-width: 1680px) {
  :root { font-size: 17px; }
  .syn-main { max-width: 1440px; }
  .syn-hero-banner { max-width: 1440px; }
}

@media (max-width: 980px) {
  .syn-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .syn-pillars { grid-template-columns: 1fr; margin: 3rem auto; gap: 1rem; max-width: 520px; }
  .syn-tiers   { grid-template-columns: repeat(2, 1fr); }
  .syn-archetype-grid { grid-template-columns: 1fr; }
  .syn-how-steps { grid-template-columns: 1fr; }
  .syn-sig-grid  { grid-template-columns: 1fr; }
  .syn-sig-card-astro { grid-column: span 1; }
  .syn-sig-note  { grid-column: span 1; }
  .syn-sig-astro-row { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 720px) {
  :root { font-size: 15px; }

  /* .syn-nav desktop-overrides removed; mobile rules live in the
     dedicated @media (max-width: 899px) block above. */
  .syn-sigil { width: 24px; height: 24px; font-size: 1.15rem; }
  .syn-name { font-size: 0.7rem; letter-spacing: 0.16em; }

  .syn-main { padding: 0 1rem; }

  .syn-hero { padding: 3rem 0 2.5rem; }
  .syn-hero-title {
    font-size: clamp(1.75rem, 7.5vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .syn-hero-title .br-desktop { display: inline; }
  .syn-eyebrow { letter-spacing: 0.14em; font-size: 0.66rem; margin-bottom: 1rem; }
  .syn-hero-sub { font-size: 0.98rem; margin-bottom: 2rem; }
  .syn-hero-cta { gap: 0.6rem; }
  .syn-hero-cta .syn-btn { flex: 1; min-width: 140px; }

  .syn-pillar { padding: 1.5rem 1.3rem; }
  .syn-pillar h3 { font-size: 1.2rem; }

  .syn-creed { margin: 3.5rem auto; padding: 2.5rem 0.5rem; }
  .syn-creed blockquote p { font-size: 1.25rem; }
  .syn-creed cite { font-size: 0.7rem; letter-spacing: 0.1em; }

  .syn-form-wrap { margin: 2rem auto; padding: 0; }
  .syn-form-wrap h1 { font-size: 1.8rem; }

  .syn-tiers { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .syn-tier { padding: 1.75rem 1.4rem; }

  .syn-form-actions { flex-direction: column; }

  .syn-hour-triptych { grid-template-columns: 1fr; gap: 0.6rem; }
  .syn-oracle-title { font-size: 1.55rem; }
  .syn-streams { grid-template-columns: 1fr; }

  /* Price story on mobile */
  .syn-price-block-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .syn-price-block-price { border-right: 0; padding-right: 0; padding-bottom: 0.5rem; }

  /* Natal grid stacks */
  .syn-natal-grid { grid-template-columns: 1fr; }
  .syn-synastry-aspects { font-size: 0.82rem; overflow-x: auto; }
  .syn-synastry-aspects table { min-width: 500px; }

  /* Tier nudge on oracle — stack on mobile */
  .syn-tier-nudge { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem 1.25rem 1.25rem; }
  .syn-tier-nudge > a.syn-btn { align-self: stretch; text-align: center; }

  /* Today's Ritual — stack columns on mobile */
  .syn-ritual { padding: 1.5rem 1.25rem 1.25rem; }
  .syn-ritual-grid { grid-template-columns: 1fr; }
  .syn-ritual-cell-wide { grid-column: span 1; }

  /* Stream panels — mobile-first tighter spacing */
  .syn-stream-panel { padding: 1.5rem 1.25rem; }
  .syn-stream-panel .syn-stream-headline { font-size: 1.3rem; }
  .syn-rite-row { grid-template-columns: 1.1rem minmax(3.6rem, auto) 1fr; gap: 0.35rem 0.55rem; padding: 0.45rem 0; }
  .syn-stream-tab { padding: 0.55rem 0.7rem; }
  .syn-stream-tab-label { font-size: 0.85rem; }

  .syn-synth { padding: 1.5rem 1.4rem 1.4rem; }
  .syn-synth-body { font-size: 1.05rem; }
  .syn-synth-meta { flex-wrap: wrap; font-size: 0.66rem; }

  /* Landing on mobile */
  .syn-hero-banner { padding: 0 1rem; margin-top: 1rem; }
  .syn-teaser { margin: 3rem auto; padding: 2rem 1rem; }
  .syn-teaser-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Journal on mobile */
  .syn-journal-head { flex-direction: column; align-items: stretch; }
  .syn-journal-head .syn-btn { align-self: stretch; }
  .syn-field-row { grid-template-columns: 1fr; gap: 0; }

  /* Settings sub-links stack */
  .syn-settings-sub { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .syn-settings-sub .syn-btn { flex: 1; min-width: 150px; }
}

@media (max-width: 420px) {
  .syn-oracle-grid { grid-template-columns: 1fr; }
  .syn-hero-cta { flex-direction: column; }
  .syn-hero-cta .syn-btn { width: 100%; flex: initial; }
  .syn-name { font-size: 0.65rem; letter-spacing: 0.14em; }
  .syn-teaser-grid { grid-template-columns: 1fr; }
  .syn-entry-actions { flex-direction: column; }
  .syn-entry-actions .syn-btn { width: 100%; }
}

/* ============================================================
   LIBRARY · Publications and chapter reader
   ============================================================ */

.syn-library { padding: 2rem 0 4rem; max-width: 1080px; margin: 0 auto; }
.syn-library-head { margin-bottom: 2.5rem; }
.syn-library-head h1 { margin: 0 0 0.4rem; font-size: 2.4rem; letter-spacing: 0.01em; }
.syn-library-lede { color: var(--syn-text-dim); max-width: 640px; line-height: 1.6; }

.syn-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
}

.syn-book-card {
  display: flex; gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  transition: border-color 0.15s, transform 0.15s;
}
.syn-book-card:hover { border-color: var(--syn-border-hi); }
.syn-book-card--magister { border-color: rgba(166, 48, 43, 0.4); }
.syn-book-card--magister:hover { border-color: var(--syn-mars); }
.syn-book-card--locked { opacity: 0.7; }
.syn-book-card--locked:hover { opacity: 0.9; }

.syn-book-sigil {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--syn-serif);
  font-size: 1.9rem;
  color: var(--syn-gold);
  background: var(--syn-void);
  border: 1px solid var(--syn-border-hi);
  border-radius: 50%;
}
.syn-book-sigil--lg { width: 72px; height: 72px; font-size: 2.4rem; }

/* Per-collection sigil tint — carries the tradition palette from the
   library landing through to the publication landing's sigil badge. */
.syn-book-sigil--grimoires    { color: rgba(232,140,90,0.85); border-color: rgba(232,140,90,0.42); background: radial-gradient(circle at 50% 50%, rgba(44,16,16,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--thelema      { color: rgba(240,90,80,0.88); border-color: rgba(240,90,80,0.42); background: radial-gradient(circle at 50% 50%, rgba(44,10,10,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--theosophy    { color: rgba(190,180,240,0.9); border-color: rgba(170,160,232,0.42); background: radial-gradient(circle at 50% 50%, rgba(20,19,44,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--hermetica    { color: rgba(140,212,170,0.88); border-color: rgba(140,212,170,0.42); background: radial-gradient(circle at 50% 50%, rgba(20,42,31,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--folklore     { color: rgba(200,190,90,0.88); border-color: rgba(190,180,80,0.42); background: radial-gradient(circle at 50% 50%, rgba(31,32,16,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--eastern      { color: rgba(240,180,80,0.88); border-color: rgba(240,180,80,0.42); background: radial-gradient(circle at 50% 50%, rgba(42,26,8,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--egyptian     { color: rgba(248,212,100,0.94); border-color: rgba(120,170,232,0.42); background: radial-gradient(circle at 50% 50%, rgba(10,24,48,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--mysticism    { color: rgba(248,232,200,0.92); border-color: rgba(248,232,200,0.42); background: radial-gradient(circle at 50% 50%, rgba(31,28,20,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--astrology    { color: rgba(232,232,240,0.95); border-color: rgba(170,160,232,0.45); background: radial-gradient(circle at 50% 50%, rgba(10,10,34,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--classical    { color: rgba(232,170,110,0.88); border-color: rgba(232,170,110,0.42); background: radial-gradient(circle at 50% 50%, rgba(42,31,20,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--norse        { color: rgba(180,210,225,0.92); border-color: rgba(170,200,220,0.42); background: radial-gradient(circle at 50% 50%, rgba(20,32,42,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--tarot        { color: rgba(220,170,240,0.92); border-color: rgba(212,160,232,0.42); background: radial-gradient(circle at 50% 50%, rgba(29,10,42,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--spiritualism { color: rgba(190,220,232,0.88); border-color: rgba(180,210,220,0.42); background: radial-gradient(circle at 50% 50%, rgba(14,26,34,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--masonic      { color: rgba(220,225,240,0.92); border-color: rgba(210,215,230,0.42); background: radial-gradient(circle at 50% 50%, rgba(26,30,42,0.95) 0%, var(--syn-void) 80%); }
.syn-book-sigil--syncreticon  { color: rgba(240,201,90,0.92); border-color: rgba(240,201,90,0.5); background: radial-gradient(circle at 50% 50%, rgba(42,32,16,0.95) 0%, var(--syn-void) 80%); }

.syn-book-cover {
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--syn-border-hi);
  background: var(--syn-void);
}
.syn-book-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.syn-book-cover--lg { width: 144px; height: 144px; }
.syn-book-card--has-cover { align-items: center; }

.syn-book-body { flex: 1; min-width: 0; }
.syn-book-title {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.syn-book-title a { color: var(--syn-text); }
.syn-book-title a:hover { color: var(--syn-gold-hi); }
.syn-book-subtitle {
  margin: 0 0 0.7rem;
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-text-dim);
  font-size: 1rem;
}
.syn-book-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
}
.syn-book-desc {
  color: var(--syn-text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.syn-book-gate { margin: 0; }
.syn-book-open {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r);
  color: var(--syn-gold-hi);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s;
}
.syn-book-open:hover { background: rgba(201, 164, 73, 0.08); border-color: var(--syn-gold); }
.syn-book-locked-note {
  font-size: 0.85rem;
  color: var(--syn-text-dim);
}
.syn-book-locked-note a {
  color: var(--syn-mars-hi);
  border-bottom: 1px dotted var(--syn-mars);
}

/* ------- Publication (TOC) page ------- */

.syn-book { max-width: 760px; margin: 0 auto; padding: 2rem 0 4rem; }
.syn-book-head { margin-bottom: 2.5rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--syn-border); }
.syn-book-crumb { font-size: 0.8rem; color: var(--syn-text-mute); margin: 0 0 1.5rem; }
.syn-book-crumb a { color: var(--syn-text-dim); }
.syn-book-crumb a:hover { color: var(--syn-gold-hi); }

.syn-book-title-block {
  display: flex; gap: 1.5rem; align-items: flex-start;
  margin-bottom: 1.5rem;
}
.syn-book-title-block h1 { margin: 0 0 0.3rem; font-size: 2.2rem; line-height: 1.15; }
.syn-book-title-block .syn-book-subtitle { margin-bottom: 0.6rem; font-size: 1.05rem; }

.syn-book-toc { list-style: none; padding: 0; margin: 0; counter-reset: syn-ch; }
.syn-book-toc li { margin: 0; }
.syn-book-toc-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid var(--syn-border);
  color: var(--syn-text);
  transition: background 0.1s, color 0.1s;
}
.syn-book-toc-row:hover { background: rgba(255,255,255,0.02); color: var(--syn-gold-hi); }
.syn-book-toc-num {
  font-family: var(--syn-serif);
  color: var(--syn-gold-low);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.syn-book-toc-title {
  font-family: var(--syn-serif);
  font-size: 1.08rem;
  line-height: 1.3;
}
.syn-book-toc-wc {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  white-space: nowrap;
}

/* ------- Chapter reader ------- */

.syn-book-reader {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 0 5rem;
}
.syn-book-crumbs {
  font-size: 0.8rem;
  color: var(--syn-text-mute);
  margin-bottom: 2.5rem;
}
.syn-book-crumbs a { color: var(--syn-text-dim); }
.syn-book-crumbs a:hover { color: var(--syn-gold-hi); }
.syn-book-crumbs span { margin: 0 0.4rem; color: var(--syn-text-mute); }

.syn-book-reader-head {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-book-reader-pos {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  margin: 0 0 0.6rem;
}
.syn-book-reader-head h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

.syn-book-reader-body {
  font-family: var(--syn-serif);
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--syn-text);
}
.syn-book-reader-body p {
  margin: 0 0 1.25rem;
}
.syn-book-reader-body h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1.2rem;
  color: var(--syn-gold-hi);
  letter-spacing: 0.005em;
}
.syn-book-reader-body h3 {
  font-size: 1.2rem;
  margin: 2rem 0 1rem;
  color: var(--syn-text);
  font-style: italic;
}
.syn-book-reader-body strong { color: var(--syn-gold-hi); font-weight: 600; }
.syn-book-reader-body em { color: var(--syn-text); }
.syn-book-reader-body blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-left: 2px solid var(--syn-gold-low);
  color: var(--syn-text-dim);
  font-style: italic;
}
.syn-book-reader-body ul, .syn-book-reader-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.6rem;
}
.syn-book-reader-body li {
  margin: 0 0 0.5rem;
}
.syn-book-reader-body hr {
  border: 0;
  border-top: 1px solid var(--syn-border);
  margin: 2.5rem auto;
  max-width: 180px;
}
.syn-book-reader-body a { border-bottom: 1px dotted var(--syn-gold-low); }

/* ────────── Facsimile-mode publications (Masonic, etc.) ──────────
   The verbatim-extract publications carry an inline page anchor at the
   top of each original page: `<sup class="syn-page-anchor">p. NN</sup>`.
   Without dedicated CSS they render as default browser superscript —
   sharp, distracting, hard on the eye against the body type.  Style
   them as a subtle horizontal divider that lets the reader feel the
   page boundary without breaking the reading rhythm. */
.syn-book-reader-body sup.syn-page-anchor {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--syn-serif);
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--syn-text-dim, #8a8275);
  text-align: center;
  line-height: 1;
  text-transform: lowercase;
  vertical-align: baseline;
  top: 0;
}
/* The markdown renderer wraps every line in a <p>; when a paragraph
   contains nothing but a page anchor, drop the paragraph margins so the
   anchor itself owns the vertical rhythm. */
.syn-book-reader-body p:has(> sup.syn-page-anchor:only-child) {
  margin: 2.4rem 0 1.6rem;
  text-align: center;
}
.syn-book-reader-body sup.syn-page-anchor::before,
.syn-book-reader-body sup.syn-page-anchor::after {
  content: "";
  display: inline-block;
  width: 4rem;
  height: 1px;
  vertical-align: middle;
  background: linear-gradient(90deg,
    transparent,
    var(--syn-gold-low, #6b5a30) 50%,
    transparent);
  margin: 0 0.9rem;
  opacity: 0.55;
}
/* The very first page anchor in a chapter sits right under the H1; give
   it a little less top space so it nests cleanly below the header. */
.syn-book-reader-body > sup.syn-page-anchor:first-child {
  margin-top: 0.6rem;
}
/* When a page anchor immediately follows another anchor (rare — happens
   when an original page is image-only), collapse the spacing. */
.syn-book-reader-body sup.syn-page-anchor + sup.syn-page-anchor {
  margin-top: 0.6rem;
}

/* Standalone short ALL-CAPS paragraphs (≤ ~30 chars) in facsimile bodies
   are usually section markers in the original — `OPENING`, `CLOSING`,
   `THE GRAND LODGE`, `ANTIENT CHARGES`. Small-caps wrapping already
   makes them read as small caps; this rule centres them and gives them
   a touch of breathing room so they read as headings rather than as
   bare text. We target paragraphs containing only a single small-caps
   span (the typographic marker the renderer applied). */
.syn-book-reader-body p:has(> span.syn-sc:only-child) {
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 2rem 0 1rem;
  color: var(--syn-gold-hi, #d6b04e);
}
.syn-book-reader-body p:has(> span.syn-sc:only-child) > span.syn-sc {
  font-weight: 600;
}

/* ─────── Ritual stage directions ───────
   Pure stage-direction paragraphs — those wrapped entirely in `*…*` by
   the ritual formatter — render in markdown as `<p><em>…</em></p>`
   (paragraph whose only child is an `<em>`).  Style them like a
   stage-direction in a script: subtle warm background, gold left rule,
   smaller / italic body, indented from the dialogue column.  This sits
   alongside the prayer/latin treatments lower in this stylesheet. */
.syn-book-reader-body p:has(> em:only-child) {
  margin: 1.0rem 0 1.0rem 0.6rem;
  padding: 0.55rem 1rem 0.55rem 1.1rem;
  border-left: 2px solid rgba(201, 164, 73, 0.28);
  background: rgba(40, 26, 10, 0.22);
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--syn-text-dim, #b8a47a);
  border-radius: 0 4px 4px 0;
}
.syn-book-reader-body p:has(> em:only-child) > em {
  font-style: italic;
  color: var(--syn-text-dim, #b8a47a);
}

/* Inline action notes inside speaker exchanges — `**WM** *names JW* — …`
   render as `<strong>…</strong> <em>…</em> — …`.  Give them a gentle
   inline tint (slight warm background, no border) so they read as a
   parenthetical action, distinct from the surrounding dialogue text but
   without breaking the line into a block. */
.syn-book-reader-body p > strong + em,
.syn-book-reader-body p > strong + em ~ em {
  font-style: italic;
  color: #c9b07e;
  background: rgba(201, 164, 73, 0.07);
  padding: 0 0.3em;
  border-radius: 2px;
}

/* Speaker prefix and em-dash separator — `<strong>WM</strong>` is
   already gold (inherited from `.syn-book-reader-body strong`); add
   slightly more letter-spacing so two-letter abbreviations read as
   labels rather than running into the following word. */
.syn-book-reader-body p > strong:first-child {
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-right: 0.1em;
}

/* Pager between chapters */
.syn-book-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--syn-border);
}

/* Top variant of the chapter pager — slimmer chrome, sits above the
   chapter title so the reader can move chapters without scrolling first.
   The visual weight is lower than the bottom pager (the post-chapter
   pager is the natural "what next?" moment); the top pager is just a
   convenience. */
.syn-book-pager--top {
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-top: 0;
  padding-bottom: 1.2rem;
  border-top: 0;
  border-bottom: 1px solid var(--syn-border);
}
.syn-book-pager--top .syn-book-pager-prev,
.syn-book-pager--top .syn-book-pager-next {
  padding: 0.55rem 0.9rem;
  font-size: 0.78rem;
  min-height: 0;
}
.syn-book-pager--top .syn-book-pager-title {
  font-size: 0.78rem;
}
.syn-book-pager-prev, .syn-book-pager-next {
  display: flex; flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r);
  color: var(--syn-text-dim);
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
  min-height: 3.5rem;
}
.syn-book-pager-prev:hover, .syn-book-pager-next:hover {
  border-color: var(--syn-gold-low); color: var(--syn-text);
}
.syn-book-pager-next { text-align: right; }
.syn-book-pager-empty { border-color: transparent !important; background: transparent; pointer-events: none; }
.syn-book-pager-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
}
.syn-book-pager-title {
  font-family: var(--syn-serif);
  font-size: 0.98rem;
  line-height: 1.3;
}
.syn-book-pager-arrow {
  font-size: 0.9rem;
  color: var(--syn-gold-low);
}
.syn-book-pager-toc {
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-text-dim);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r);
  white-space: nowrap;
}
.syn-book-pager-toc:hover { border-color: var(--syn-gold-low); color: var(--syn-gold-hi); }

/* Gated view */
.syn-book-gated {
  display: flex; justify-content: center;
  padding: 4rem 1rem;
}
.syn-book-gated-inner {
  max-width: 560px;
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
}
.syn-book-gated-inner .syn-book-sigil { margin: 0 auto 1.5rem; }
.syn-book-gated-inner h1 { margin: 0 0 0.3rem; font-size: 1.9rem; }
.syn-book-gated-lede {
  font-family: var(--syn-serif);
  font-size: 1.15rem;
  color: var(--syn-text);
  margin: 1.5rem 0 1rem;
}

@media (max-width: 640px) {
  .syn-book-grid { grid-template-columns: 1fr; }
  .syn-book-title-block { flex-direction: column; gap: 1rem; }
  .syn-book-reader-body { font-size: 1.05rem; }
  .syn-book-pager { grid-template-columns: 1fr; }
  .syn-book-pager-next { text-align: left; }
  .syn-book-toc-row { grid-template-columns: 2.4rem 1fr; gap: 0.6rem; }
  .syn-book-toc-wc { display: none; }
}

/* ---- Library groups (Syncreticon Works / Grimoires) ---- */
.syn-library-group { margin-bottom: 3.5rem; }
.syn-library-group-head {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-library-group-head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-family: var(--syn-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--syn-gold-hi);
  font-weight: 500;
}
.syn-library-group--grimoires .syn-library-group-head h2 { color: var(--syn-mars-hi); }
/* Ensure title inside a book card uses the right weight now that it's an h3 */
.syn-book-card h3.syn-book-title { margin: 0 0 0.2rem; font-size: 1.35rem; line-height: 1.25; }

/* ============================================================
   LIBRARY · Figures (SVG sigils / plates / diagrams)
   ============================================================ */

.syn-figure {
  margin: 2rem auto;
  text-align: center;
}
.syn-figure-art {
  display: inline-block;
  line-height: 0;  /* prevent descender artefact under inline SVG */
}
.syn-fig-svg {
  display: block;
  max-width: 100%;
  height: auto;
  /* Parchment "page" — the engraving's native medium.
     A calibrated warm cream so the black ink reads clearly without
     dazzling a mobile night-reader. Gold-tinted shadow lifts the
     card off the dark page like a displayed artefact. */
  background: #ede4c8;
  padding: 1.1rem 1.2rem;
  border-radius: 4px;
  box-shadow:
    0 6px 24px -8px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(140, 110, 60, 0.18);
}
/* When the figure is an <img>-loaded SVG (post-task #50 externalisation),
   the div carries the .syn-fig-svg class and the SVG is referenced as a
   raster. Make sure the IMG fills the card naturally. */
.syn-fig-svg > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* Traced potrace sigils are silhouette paths; force their fill to the
   ink colour so they read clearly on any background. Only applies to
   INLINE <svg> elements (path-fill CSS cannot reach into <img>-loaded
   SVGs — those rely on the parchment card for contrast instead).
   Herbal-pantheon sketches (`syn-herb-sketch`) carry explicit per-path
   fills and must be excluded from this blanket override. */
svg.syn-fig-svg:not(.syn-herb-sketch) path { fill: #1a150c; }

/* Raster figures get a comparable card, sized to fit photographic
   illustrations from facsimile sources. */
.syn-fig-raster {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  box-shadow:
    0 6px 24px -8px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35);
}
.syn-fig-raster > img { display: block; width: 100%; height: auto; }

/* Herb sketches: the parchment background is already painted as the first
   <rect> inside the SVG, so strip the CSS background/padding here and let
   the sketch occupy the full frame. Do NOT set `fill:` on paths — the
   inline `fill="…"` presentation attributes carry the correct values and
   no CSS override applies now that we've scoped the one above. */
.syn-herb-sketch {
  background: transparent;
  padding: 0;
}

.syn-figure figcaption {
  margin-top: 0.6rem;
  font-family: var(--syn-serif);
  font-size: 0.92rem;
  color: var(--syn-text-dim);
  line-height: 1.4;
  font-style: italic;
}
.syn-fig-num {
  font-variant: small-caps;
  font-style: normal;
  color: var(--syn-gold-low);
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
}

/* Size variants. */
.syn-figure--inline {
  /* Float the sigil beside the spirit description. */
  float: right;
  width: 200px;
  max-width: 40%;
  margin: 0.25rem 0 1rem 1.5rem;
  clear: right;
}
.syn-figure--inline .syn-fig-svg { padding: 0.6rem; }

.syn-figure--medium {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.syn-figure--plate {
  max-width: 100%;
  margin: 3rem auto;
}
.syn-figure--plate .syn-fig-svg {
  padding: 1.5rem;
}

/* Rider-Waite-Smith tarot cards (Pictorial Key). Kept crisp at the source
   thumbnail's natural width; scoped to the rws_ basename so other publications
   are untouched. Two layouts, driven by the figure size:
     size="plate"  -> centred in the reading flow (long-description chapters:
                      the Trumps' inner symbolism and the Lesser Arcana)
     size="inline" -> side-by-side [text | card] (short-entry chapter:
                      the Greater Arcana divinatory meanings). */
.syn-figure[data-fig-basename^="rws_"] .syn-fig-raster > img {
  width: auto;
  max-width: 200px;
}
.syn-figure--plate[data-fig-basename^="rws_"] {
  float: none;
  clear: both;
  width: auto;
  max-width: 200px;
  margin: 1.25rem auto 1.6rem;
  text-align: center;
}
.syn-figure--plate[data-fig-basename^="rws_"] .syn-fig-raster {
  max-width: 200px;
  margin: 0 auto;
}
.syn-figure--inline[data-fig-basename^="rws_"] {
  float: right;
  clear: right;
  width: 170px;
  max-width: 40%;
  margin: 0.15rem 0 0.8rem 1.4rem;
}
.syn-figure--inline[data-fig-basename^="rws_"] .syn-fig-raster {
  max-width: 170px;
}

/* Greater Arcana divinatory meanings: a true two-column lexicon — each card's
   meaning on the left, aligned in the same row with its card on the right.
   Scoped via :has() to the rws_ card images so other tables are untouched. */
.syn-book-reader-body table:has(td img[src*="/figures/rws_"]) {
  font-size: inherit;
}
.syn-book-reader-body table:has(td img[src*="/figures/rws_"]) thead {
  display: none;
}
.syn-book-reader-body table:has(td img[src*="/figures/rws_"]) td {
  vertical-align: top;
}
.syn-book-reader-body table:has(td img[src*="/figures/rws_"]) td:last-child {
  width: 170px;
  text-align: center;
}
.syn-book-reader-body table:has(td img[src*="/figures/rws_"]) td img {
  width: 150px;
  height: auto;
  border-radius: 4px;
  display: inline-block;
}

.syn-figure--missing {
  padding: 1.2rem;
  border: 1px dashed var(--syn-mars);
  color: var(--syn-mars-hi);
  font-family: var(--syn-mono);
  font-size: 0.85rem;
}

/* Clear floats at chapter end. */
.syn-book-reader-body::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 640px) {
  .syn-figure--inline {
    float: none;
    width: auto;
    max-width: 320px;
    margin: 1.5rem auto;
  }
}

/* ============================================================
   LIBRARY · Reading typography (v2 polish)
   ============================================================ */

/* Tighten the reading measure — 38em matches 65–70 chars in serif,
   the classical ideal for long-form prose. */
.syn-book-reader {
  max-width: 38em;
}
.syn-book-reader-body {
  font-size: 1.08rem;
  line-height: 1.7;
}
.syn-book-reader-body p {
  margin: 0 0 1em;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Drop cap: first paragraph under each heading gets a 3-line raised cap. */
.syn-drop-cap::first-letter {
  font-family: var(--syn-serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 0.1em 0.12em 0 0;
  margin-top: 0.08em;
  color: var(--syn-gold);
  font-weight: 600;
}

/* Small caps for ALL-CAPS proper nouns. We lowercase in the HTML and apply
   true small-caps via font features so readability doesn't suffer from a
   paragraph littered with SHOUTED WORDS. */
.syn-sc {
  font-variant: small-caps;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.04em;
  color: var(--syn-text);
}

/* Heading refinement for dense historic prose. H3 becomes an italic small-cap
   run-in, giving structure without visual weight. */
.syn-book-reader-body h2 {
  font-family: var(--syn-serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--syn-gold-hi);
  margin: 2.5rem 0 0.4rem;
  letter-spacing: 0.005em;
  text-align: left;
}
.syn-book-reader-body h3 {
  font-family: var(--syn-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--syn-gold);
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 2rem 0 0.6rem;
  text-align: center;
}
/* Ornamental fleuron before each H3. */
.syn-book-reader-body h3::before {
  content: "❦";
  display: block;
  color: var(--syn-gold-low);
  font-style: normal;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  letter-spacing: 0;
}

/* Blockquote (N.B. asides etc.) */
.syn-book-reader-body blockquote {
  margin: 1.5rem 0;
  padding: 0.7rem 1.2rem;
  border-left: 2px solid var(--syn-gold-low);
  background: rgba(201, 164, 73, 0.04);
  font-size: 0.97rem;
  color: var(--syn-text-dim);
  font-style: normal;
}
.syn-book-reader-body blockquote p { text-align: left; }
.syn-book-reader-body blockquote strong { color: var(--syn-gold-hi); }

/* =========================================================================
   Liturgical typography — prayers, Latin orations, voces magicae
   ========================================================================= */

/* Latin paragraphs. Displayed in the same size as body text but in italic
   with a slightly warmer, muted color — signals to the reader "this is the
   Latin original" without pulling too much attention. */
.syn-book-reader-body p.syn-latin,
.syn-book-reader-body blockquote.syn-latin {
  font-style: italic;
  color: #b8a47a;
  font-family: var(--syn-serif);
  letter-spacing: 0.01em;
  hyphens: none;
}
.syn-book-reader-body p.syn-latin {
  margin: 1.25rem 0;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(201, 164, 73, 0.18);
  text-align: justify;
}

/* Non-English passages of ANY tongue — Italian charms, Greek hymns, Sanskrit
   verses, German mysticism, transliterated Hebrew. House rule for the corpus:
   every non-English passage is set apart in a warm highlighted block so the
   reader sees at a glance "this is the original, in another language." Lighter
   and quieter than .syn-prayer (a rite to be spoken aloud); a held-apart quote,
   not a ceremony. Applied by the formatting pass as
       <div class="syn-foreign" lang="xx">…</div>  (lang optional) */
.syn-book-reader-body .syn-foreign {
  margin: 1.5rem 0;
  padding: 1.05rem 1.4rem;
  border-left: 2px solid rgba(201, 164, 73, 0.45);
  background: rgba(40, 26, 10, 0.28);
  color: #c9b07e;
  font-family: var(--syn-serif);
  font-style: italic;
  line-height: 1.7;
  letter-spacing: 0.01em;
  hyphens: none;
  border-radius: 2px;
}
.syn-book-reader-body .syn-foreign p { margin: 0.5rem 0; text-indent: 0; text-align: left; }
.syn-book-reader-body .syn-foreign p:first-child { margin-top: 0; }
.syn-book-reader-body .syn-foreign p:last-child { margin-bottom: 0; }
.syn-book-reader-body .syn-foreign strong,
.syn-book-reader-body .syn-foreign em { color: var(--syn-gold-hi); font-style: normal; }

/* Prayers, invocations, conjurations — elevated above ordinary blockquote:
   gold left border, warmer background, first-line indent dropped, vertical
   breathing room. The typesetting a chapel missal would give them. */
.syn-book-reader-body blockquote.syn-prayer {
  margin: 2rem 0;
  padding: 1.3rem 1.6rem 1.1rem;
  border-left: 3px solid var(--syn-gold);
  border-top: 1px solid rgba(201, 164, 73, 0.22);
  border-bottom: 1px solid rgba(201, 164, 73, 0.22);
  background: rgba(40, 26, 10, 0.35);
  color: var(--syn-text);
  font-family: var(--syn-serif);
  font-size: 1.02rem;
  font-style: normal;
  line-height: 1.75;
  position: relative;
}
/* Glyph at the top-left of every prayer — a drop of incense. */
.syn-book-reader-body blockquote.syn-prayer::before {
  content: "✦";
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  background: var(--syn-paper, #14100a);
  padding: 0 0.45rem;
  color: var(--syn-gold);
  font-size: 0.95rem;
}
.syn-book-reader-body blockquote.syn-prayer p {
  text-align: justify;
  text-indent: 0;
  margin: 0.6rem 0;
}
.syn-book-reader-body blockquote.syn-prayer p:first-child { margin-top: 0; }
.syn-book-reader-body blockquote.syn-prayer p:last-child { margin-bottom: 0; }
.syn-book-reader-body blockquote.syn-prayer.syn-latin {
  font-style: italic;
  color: #c9b07e;
}
.syn-book-reader-body blockquote.syn-prayer strong,
.syn-book-reader-body blockquote.syn-prayer em { color: var(--syn-gold-hi); }

/* Voces magicae — the barbarous names of power. Tracked-out small caps,
   slight color shift, marks the catena as distinct from ordinary list of
   names while still being read aloud as speech. */
.syn-book-reader-body .syn-voces {
  font-variant: small-caps;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.12em;
  color: var(--syn-gold-hi);
  font-weight: 500;
  white-space: normal;
}

/* Ordered list restored from inline (1)(2)(3)… */
.syn-book-reader-body ol {
  padding-left: 1.4rem;
  margin: 1rem 0 1.5rem;
  counter-reset: syn-li;
  list-style: none;
}
.syn-book-reader-body ol li {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 2rem;
  text-align: justify;
  counter-increment: syn-li;
}
.syn-book-reader-body ol li::before {
  content: counter(syn-li) ".";
  position: absolute;
  left: 0; top: 0;
  width: 1.6rem;
  text-align: right;
  color: var(--syn-gold-low);
  font-variant-numeric: oldstyle-nums;
  font-weight: 500;
}

/* Footnotes block — markdown's "footnotes" extension renders a <hr> + <ol>. */
.syn-book-reader-body .footnote {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--syn-border);
  font-size: 0.86rem;
  color: var(--syn-text-dim);
  line-height: 1.55;
}
.syn-book-reader-body .footnote ol {
  padding-left: 2rem;
  list-style: decimal;
}
.syn-book-reader-body .footnote ol li {
  padding-left: 0.3rem;
  margin-bottom: 0.6rem;
}
.syn-book-reader-body .footnote ol li::before { content: ""; }
.syn-book-reader-body .footnote p { margin: 0; display: inline; }
.syn-book-reader-body .footnote-backref {
  margin-left: 0.4em;
  color: var(--syn-gold-low);
  text-decoration: none;
}

/* Inline footnote reference — superscript, small, gold. */
.syn-book-reader-body sup.footnote-ref,
.syn-book-reader-body a.footnote-ref {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  color: var(--syn-gold-hi);
  text-decoration: none;
  margin-left: 1px;
  border: 0;
}

/* Running head: decoration line + book name over chapter */
.syn-book-reader-head {
  text-align: center;
}
.syn-book-reader-head h1 {
  text-align: center;
}
.syn-book-reader-pos {
  text-align: center;
}
.syn-book-reader-head::before {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: var(--syn-gold-low);
  margin: 0 auto 1.2rem;
}

/* ============================================================
   LIBRARY · Reading-mode toggle (Chapter / Tome / Spread)
   ============================================================ */

.syn-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--syn-border);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 1.5rem;
  background: var(--syn-void);
}
.syn-mode-opt {
  padding: 0.45rem 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  border-right: 1px solid var(--syn-border);
}
.syn-mode-opt:last-child { border-right: 0; }
.syn-mode-opt--on {
  color: var(--syn-gold-hi);
  background: rgba(201, 164, 73, 0.08);
}
.syn-mode-opt--off:hover {
  color: var(--syn-text);
  background: rgba(255, 255, 255, 0.02);
}

/* ============================================================
   LIBRARY · Tome view (whole book, one scroll)
   ============================================================ */

.syn-book-tome {
  max-width: 48em;
  margin: 0 auto;
  padding: 2rem 0 6rem;
}
.syn-book-tome-head {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--syn-border);
  margin-bottom: 2.5rem;
}
.syn-book-tome-head h1 {
  margin: 0.5rem 0 0.3rem;
  font-size: 2.3rem;
}
.syn-book-tome-head .syn-book-sigil { margin: 0 auto; }
.syn-book-tome-head .syn-book-meta { justify-content: center; margin-top: 0.8rem; }

.syn-tome-index {
  max-width: 32em;
  margin: 0 auto 4rem;
  padding: 1.2rem 1.8rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
}
.syn-tome-index ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: tome-ix;
  column-count: 2;
  column-gap: 2rem;
}
.syn-tome-index li {
  counter-increment: tome-ix;
  break-inside: avoid;
  padding: 0.25rem 0;
  font-size: 0.88rem;
}
.syn-tome-index li a {
  color: var(--syn-text-dim);
}
.syn-tome-index li a:hover {
  color: var(--syn-gold-hi);
}

.syn-tome-chapter {
  max-width: 38em;
  margin: 0 auto 5rem;
  scroll-margin-top: 6rem;
}
.syn-tome-chapter-head {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--syn-border);
}
.syn-tome-chapter-head::before {
  content: "✦";
  display: block;
  color: var(--syn-gold-low);
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}
.syn-tome-chapter-head h2 {
  font-size: 1.9rem;
  margin: 0.3rem 0 0;
  color: var(--syn-text);
}
.syn-tome-chapter-head .syn-book-reader-pos {
  margin: 0 0 0.3rem;
}

.syn-crumbs-current { color: var(--syn-text-dim); }

@media (max-width: 640px) {
  .syn-tome-index ol { column-count: 1; }
  .syn-mode-toggle { width: 100%; }
  .syn-mode-opt { flex: 1; text-align: center; }
}

/* ============================================================
   DIVINATION · Index and systems
   ============================================================ */
.syn-div { max-width: 1080px; margin: 0 auto; padding: 2rem 0 5rem; }
.syn-div-head { margin-bottom: 2.5rem; text-align: center; }
.syn-div-head h1 { font-size: 2.4rem; letter-spacing: 0.01em; margin: 0 0 0.6rem; }
.syn-div-lede {
  color: var(--syn-text-dim);
  max-width: 660px; margin: 0 auto; line-height: 1.6;
}

.syn-div-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.syn-div-card {
  padding: 2rem 1.8rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  text-align: center;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: border-color 0.15s, transform 0.15s;
}
.syn-div-card:hover { border-color: var(--syn-gold-low); transform: translateY(-2px); }
.syn-div-card h2 { margin: 0; font-size: 1.6rem; color: var(--syn-gold-hi); }
.syn-div-sub {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--syn-text-mute); margin: 0;
}
.syn-div-card p { color: var(--syn-text-dim); font-size: 0.95rem; margin: 0; }
.syn-div-sigil {
  font-size: 2.8rem; color: var(--syn-gold);
  line-height: 1;
  font-family: var(--syn-serif);
  margin-bottom: 0.5rem;
}
.syn-div-sigil--rune {
  font-size: 2rem;
  font-family: "Noto Sans Runic", "DejaVu Sans", monospace;
}
.syn-div-enter {
  display: inline-block;
  margin-top: auto;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--syn-gold-low);
  border-radius: var(--syn-r);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syn-gold-hi);
}
.syn-div-enter:hover { background: rgba(201,164,73,0.08); border-color: var(--syn-gold); }

/* System home pages */
.syn-div-system { max-width: 680px; margin: 0 auto; padding: 2rem 0 4rem; }
.syn-div-system-head { text-align: center; margin: 2rem 0 2rem; }
.syn-div-system-head h1 { margin: 0.4rem 0; font-size: 2.2rem; }
.syn-div-system-body { margin-bottom: 2.5rem; font-size: 1.05rem; line-height: 1.7; color: var(--syn-text); }
.syn-div-system-body p { margin: 0 0 1rem; }

.syn-div-form {
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: 1.8rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.syn-div-label {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--syn-text-mute);
}
.syn-div-optional { color: var(--syn-text-mute); letter-spacing: 0; text-transform: none; }
.syn-div-input {
  background: var(--syn-void);
  color: var(--syn-text);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r);
  padding: 0.7rem 1rem;
  font-family: var(--syn-serif);
  font-size: 1.05rem;
  font-style: italic;
}
.syn-div-input:focus { outline: none; border-color: var(--syn-gold-low); }
.syn-div-form button { align-self: flex-start; margin-top: 0.3rem; }

/* Result pages */
.syn-div-result { max-width: 980px; margin: 0 auto; padding: 2rem 0 5rem; }
.syn-div-question {
  text-align: center;
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--syn-gold-hi);
  margin: 2rem auto;
  max-width: 600px;
}
.syn-div-result-body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 3rem;
  align-items: start;
  margin: 2rem 0;
  padding: 2rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
}
.syn-div-text h1 {
  font-size: 2rem;
  margin: 0.2rem 0 0.6rem;
  color: var(--syn-gold-hi);
}
.syn-div-number {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--syn-text-mute); margin: 0;
}
.syn-div-native {
  font-family: var(--syn-serif);
  color: var(--syn-text-dim);
  margin: 0 0 1.2rem;
  font-size: 1.08rem;
}
.syn-div-reading {
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--syn-text);
}

/* Three-card spread */
.syn-div-spread {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}
.syn-div-spread--three {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.syn-div-spread-cell {
  padding: 1.6rem 1.4rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  text-align: center;
}
.syn-div-reversed .syn-fig-svg { transform: rotate(180deg); }
.syn-div-position {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.2rem;
}
.syn-div-position-desc {
  font-size: 0.85rem; color: var(--syn-text-mute);
  margin: 0 0 1rem;
}
.syn-div-rune-name {
  font-family: var(--syn-serif);
  font-size: 1.35rem;
  color: var(--syn-gold-hi);
  margin: 0.9rem 0 0.2rem;
}
.syn-div-rune-title {
  font-style: italic;
  color: var(--syn-text-dim);
  font-size: 0.92rem;
  margin: 0 0 0.8rem;
}
.syn-div-mark {
  font-size: 0.75rem;
  color: var(--syn-mars-hi);
  letter-spacing: 0.08em;
  font-style: italic;
}
.syn-div-figure {
  display: flex; justify-content: center; margin: 0.5rem 0 0.8rem;
}
.syn-div-figure .syn-fig-svg { max-width: 220px; box-shadow: none; }

/* RWS card art in the tarot tool (Pamela Colman Smith plates from the
   Pictorial Key). Native ~150x257; shown crisp at natural size, capped. */
.syn-tarot-card-art img {
  width: auto;
  max-width: 100%;
  max-height: 300px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  display: inline-block;
}

.syn-div-actions {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  align-items: center;
}

/* Recent castings / history */
.syn-div-recent { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--syn-border); }
.syn-div-recent h2 { font-size: 1.1rem; color: var(--syn-gold-hi); letter-spacing: 0.12em; text-transform: uppercase; }
.syn-div-recent ol, .syn-div-history { list-style: none; padding: 0; }
.syn-div-recent li, .syn-div-history li { border-bottom: 1px solid var(--syn-border); }
.syn-div-recent li a, .syn-div-history li a {
  display: grid;
  grid-template-columns: 110px 170px 1fr;
  gap: 1rem;
  padding: 0.7rem 0.3rem;
  color: var(--syn-text-dim);
  align-items: baseline;
}
.syn-div-recent li a:hover, .syn-div-history li a:hover { color: var(--syn-text); background: rgba(255,255,255,0.02); }
.syn-div-recent-sys {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--syn-gold-low);
}
.syn-div-recent-when {
  font-family: var(--syn-mono);
  font-size: 0.8rem;
  color: var(--syn-text-mute);
}
.syn-div-recent-q {
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .syn-div-result-body { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .syn-div-recent li a, .syn-div-history li a { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ============================================================
   SIGNATURE · Full natal chart table (7 planets + Ascendant)
   ============================================================ */

.syn-sig-astro-head {
  margin-bottom: 1.25rem;
}
.syn-sig-astro-head h3 {
  margin: 0 0 0.25rem;
}
.syn-sig-astro-subtitle {
  font-size: 0.85rem;
  color: var(--syn-text-dim);
  margin: 0;
  font-style: italic;
}

.syn-sig-natal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.syn-sig-natal-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  padding: 0.9rem 0.9rem 0.9rem 0.5rem;
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r);
  background: rgba(255, 255, 255, 0.015);
  align-items: start;
}
.syn-sig-natal-row:hover {
  border-color: var(--syn-border-hi);
  background: rgba(255, 255, 255, 0.03);
}
/* Luminaries and Ascendant get a subtle gold left rail. */
.syn-sig-natal-sun,
.syn-sig-natal-moon,
.syn-sig-natal-ascendant {
  border-left: 2px solid var(--syn-gold-low);
}

.syn-sig-natal-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--syn-serif);
  font-size: 1.6rem;
  color: var(--syn-gold);
  line-height: 1;
  padding-top: 0.1rem;
}
.syn-sig-natal-body { min-width: 0; }
.syn-sig-natal-headline {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--syn-text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}
.syn-sig-natal-planet {
  font-family: var(--syn-serif);
  font-weight: 500;
  color: var(--syn-text);
}
.syn-sig-natal-sep {
  color: var(--syn-text-mute);
  font-size: 0.85rem;
  font-style: italic;
}
.syn-sig-natal-sign {
  font-family: var(--syn-serif);
  font-weight: 500;
  color: var(--syn-gold-hi);
}
.syn-sig-natal-element {
  color: var(--syn-text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.syn-sig-natal-approx {
  margin-left: auto;
  color: var(--syn-text-mute);
  font-size: 1rem;
  cursor: help;
}
.syn-sig-natal-title {
  margin: 0.1rem 0 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
}
.syn-sig-natal-desc {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* The natal card gets full width in the signature grid. */
.syn-sig-grid .syn-sig-card-astro {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .syn-sig-natal-row {
    grid-template-columns: 36px 1fr;
    gap: 0.6rem;
    padding: 0.75rem 0.7rem;
  }
  .syn-sig-natal-glyph { font-size: 1.3rem; }
  .syn-sig-natal-headline { font-size: 0.98rem; }
  .syn-sig-natal-desc { font-size: 0.9rem; }
}

/* ============================================================
   PORTAL · subscriber hub
   ============================================================ */

.syn-portal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}
.syn-portal-head {
  text-align: center;
  margin: 0 0 3rem;
}
.syn-portal-title {
  font-family: var(--syn-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--syn-gold-hi);
  margin: 0.4rem 0 0.8rem;
}
.syn-portal-lede {
  max-width: 560px;
  margin: 0 auto;
  color: var(--syn-text-dim);
  font-size: 1rem;
  line-height: 1.6;
}
.syn-portal-lede em { color: var(--syn-gold-low); font-style: italic; }

.syn-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.syn-portal-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  color: var(--syn-text);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.25s, background 0.2s;
  position: relative;
  min-height: 170px;
  text-decoration: none;
  overflow: hidden;
}
.syn-portal-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(201,164,73,0.12), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.syn-portal-tile:hover {
  transform: translateY(-3px);
  border-color: var(--syn-gold-low);
  box-shadow: 0 18px 40px -22px rgba(201,164,73,0.35);
  color: var(--syn-text) !important;
}
.syn-portal-tile:hover::before { opacity: 1; }

.syn-portal-tile-glyph {
  font-family: var(--syn-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--syn-gold);
  margin-bottom: 0.35rem;
  position: relative;
  z-index: 1;
}
.syn-portal-tile-name {
  font-family: var(--syn-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--syn-text);
  position: relative;
  z-index: 1;
}
.syn-portal-tile-lede {
  margin: 0.25rem 0 0;
  color: var(--syn-text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.syn-portal-tile-magister {
  border-color: color-mix(in srgb, var(--syn-mars) 35%, var(--syn-border));
}
.syn-portal-tile-magister .syn-portal-tile-glyph { color: #e6b5a8; }
.syn-portal-tile-magister:hover {
  border-color: var(--syn-mars);
  box-shadow: 0 18px 40px -22px rgba(143,36,29,0.5);
}

.syn-portal-tile-locked { opacity: 0.64; }
.syn-portal-tile-locked:hover { opacity: 1; }
.syn-portal-lock { font-size: 0.75em; margin-left: 0.3em; }

@media (max-width: 520px) {
  .syn-portal { padding: 1.5rem 0 3rem; }
  .syn-portal-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .syn-portal-tile { padding: 1.2rem 1rem 1.1rem; min-height: 140px; }
  .syn-portal-tile-glyph { font-size: 1.7rem; }
  .syn-portal-tile-name { font-size: 1.05rem; }
  .syn-portal-tile-lede { font-size: 0.82rem; }
}

/* ============================================================
   RADIO GROUP · for handedness and similar boolean clusters
   ============================================================ */
.syn-field-radio-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}
.syn-field-radio-group legend {
  padding: 0;
}
.syn-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.5rem;
}
.syn-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  color: var(--syn-text-dim);
  font-size: 0.92rem;
}
.syn-radio:hover {
  border-color: var(--syn-border-hi);
  color: var(--syn-text);
}
.syn-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--syn-border-hi);
  border-radius: 50%;
  margin: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.syn-radio input[type="radio"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--syn-gold);
  transform: scale(0);
  transition: transform 0.15s;
}
.syn-radio input[type="radio"]:checked {
  border-color: var(--syn-gold);
}
.syn-radio input[type="radio"]:checked::before {
  transform: scale(1);
}
.syn-radio:has(input[type="radio"]:checked) {
  border-color: var(--syn-gold-low);
  color: var(--syn-text);
  background: rgba(201, 164, 73, 0.06);
}

/* ============================================================
   STREAM FLIP TILES · 8 divinatory streams as flip cards
   Reuses .syn-flip-toggle / .syn-flip-card / .syn-flip-face /
   .syn-flip-front / .syn-flip-back / .syn-flip-hint primitives.
   ============================================================ */

.syn-stream-grid-explainer {
  max-width: 740px;
  margin: 2rem auto 1rem;
  text-align: center;
  font-family: var(--syn-serif);
  color: var(--syn-text-dim);
  font-size: 0.98rem;
  line-height: 1.6;
  font-style: italic;
}

.syn-stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 1.1rem;
  max-width: 1180px;
  margin: 0 auto 2rem;
  perspective: 1600px;
}

.syn-stream-flip {
  position: relative;
  min-height: 420px;
  height: 420px;
}
.syn-stream-flip .syn-flip-card {
  /* Override the grid:stack from hour-flip. Here we want an absolute
     overlay so the tall back content doesn't stretch the card.      */
  display: block;
  min-height: 0;
  height: 100%;
}
.syn-stream-flip .syn-flip-face {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.4rem 1.25rem;
  gap: 0.55rem;
}
.syn-stream-flip .syn-flip-back {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--syn-border-hi) transparent;
  padding: 1.25rem 1.2rem 1.2rem;
}
.syn-stream-flip .syn-flip-back::-webkit-scrollbar { width: 5px; }
.syn-stream-flip .syn-flip-back::-webkit-scrollbar-thumb { background: var(--syn-border-hi); border-radius: 3px; }

/* --- Stream front face --- */
.syn-stream-front-glyph {
  font-family: var(--syn-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--syn-gold);
  text-shadow: 0 0 32px rgba(201,164,73,0.22);
  margin: 0.35rem 0 0.15rem;
}
.syn-stream-front-title {
  font-family: var(--syn-serif);
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--syn-text);
  margin: 0 0 0.2rem;
}
.syn-stream-front-headline {
  font-family: var(--syn-serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--syn-gold-hi);
  margin: 0;
  flex: 1;
}
.syn-stream-front-meta {
  font-size: 0.75rem;
  color: var(--syn-text-mute);
  margin: 0;
  letter-spacing: 0.04em;
}
.syn-stream-front-lock-tag {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0.25rem 0 0.2rem;
}
.syn-stream-front-lock-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--syn-text-dim);
  margin: 0;
  flex: 1;
}
.syn-stream-front-lock-body b { color: var(--syn-gold); font-weight: 500; }
.syn-flip-hint-locked::after { content: " →"; color: var(--syn-gold); }

/* --- Stream back face — condense the existing stream content --- */
.syn-stream-back-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-stream-back-glyph {
  font-family: var(--syn-serif);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--syn-gold);
}
.syn-stream-back-title {
  font-family: var(--syn-serif);
  font-size: 1.15rem;
  font-weight: 500;
  font-style: italic;
  color: var(--syn-text);
  margin: 0;
}
/* Scoped back-face tightening — the existing stream styles from tabs
   had generous spacing; compress for the flip-card viewport. */
.syn-stream-flip .syn-flip-back .syn-stream-headline {
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 0.2rem 0 0.7rem;
  color: var(--syn-gold-hi);
}
.syn-stream-flip .syn-flip-back .syn-stream-body {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
  color: var(--syn-text);
}
.syn-stream-flip .syn-flip-back .syn-stream-sections {
  margin: 0.5rem 0;
  gap: 0.4rem;
}
.syn-stream-flip .syn-flip-back .syn-stream-section {
  font-size: 0.88rem;
  padding: 0.55rem 0.75rem;
}
.syn-stream-flip .syn-flip-back .syn-stream-shadow {
  font-size: 0.85rem;
  margin: 0.6rem 0;
}
.syn-stream-flip .syn-flip-back .syn-stream-contemplation {
  font-size: 0.92rem;
  margin: 0.5rem 0 0.75rem;
}
.syn-stream-flip .syn-flip-back .syn-stream-pulse {
  margin-top: 0.6rem;
  padding: 0.65rem 0.8rem;
}
.syn-stream-flip .syn-flip-back .syn-rite-panel {
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
}
.syn-stream-flip .syn-flip-back .syn-rite-rows { gap: 0.35rem; }
.syn-stream-flip .syn-flip-back .syn-rite-row { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.syn-stream-flip .syn-flip-back .syn-stream-weaves { margin-top: 0.6rem; }

/* --- Locked tile (simple anchor, no flip) --- */
.syn-stream-flip-locked {
  position: relative;
  min-height: 420px;
  height: 420px;
  display: block;
  color: var(--syn-text);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.25s;
}
.syn-stream-flip-locked .syn-flip-face {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.4rem 1.25rem;
  background: var(--syn-surface);
  border: 1px dashed var(--syn-border-hi);
  border-radius: var(--syn-r-lg);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  opacity: 0.76;
  transition: opacity 0.2s, border-color 0.2s;
}
.syn-stream-flip-locked:hover { transform: translateY(-2px); color: var(--syn-text) !important; }
.syn-stream-flip-locked:hover .syn-flip-face {
  opacity: 1;
  border-color: var(--syn-gold-low);
  box-shadow: 0 18px 40px -22px rgba(201,164,73,0.3);
}

/* --- Geomancy figure on front (smaller than back) --- */
.syn-geo-figure-front { transform: scale(0.7); transform-origin: left top; margin: 0.1rem 0; }

/* Live-stream glow subtle accent */
.syn-stream-live .syn-flip-front::before {
  content: "";
  position: absolute;
  top: 1rem; right: 1rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--syn-gold);
  box-shadow: 0 0 8px rgba(201,164,73,0.8);
  animation: syn-stream-pulse 2.4s ease-in-out infinite;
}
@keyframes syn-stream-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}

@media (max-width: 520px) {
  .syn-stream-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .syn-stream-flip,
  .syn-stream-flip-locked { min-height: 380px; height: 380px; }
  .syn-stream-front-glyph { font-size: 2.6rem; }
  .syn-stream-front-title { font-size: 1.1rem; }
  .syn-stream-front-headline { font-size: 0.95rem; }
}

/* ============================================================
   LANDING · Three-minute quiz
   ============================================================ */

.syn-quiz {
  max-width: 1180px;
  margin: 3rem auto 4rem;
  padding: 2.5rem 1.5rem 3rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,164,73,0.08), transparent 60%),
    var(--syn-ink);
  border-top: 1px solid var(--syn-border);
  border-bottom: 1px solid var(--syn-border);
  scroll-margin-top: 2rem;
}
.syn-quiz-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2rem;
}
.syn-quiz-title {
  font-family: var(--syn-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0.4rem 0 0.7rem;
  color: var(--syn-text);
}
.syn-quiz-title em { color: var(--syn-gold-hi); font-style: italic; }
.syn-quiz-sub {
  color: var(--syn-text-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Progress dots */
.syn-quiz-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 2.5rem;
  flex-wrap: wrap;
  max-width: 720px;
}
.syn-quiz-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--syn-border);
  color: var(--syn-text-mute);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.syn-quiz-dot b {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--syn-border);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 19px;
  text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.syn-quiz-dot.is-active {
  border-color: var(--syn-gold-low);
  color: var(--syn-gold-hi);
  background: rgba(201,164,73,0.06);
}
.syn-quiz-dot.is-active b {
  background: var(--syn-gold);
  color: var(--syn-ink);
  border-color: var(--syn-gold);
}
.syn-quiz-dot.is-done {
  color: var(--syn-text-dim);
  border-color: var(--syn-gold-low);
}
.syn-quiz-dot.is-done b {
  background: var(--syn-gold-low);
  color: var(--syn-ink);
  border-color: var(--syn-gold-low);
}
.syn-quiz-sep {
  width: 20px; height: 1px;
  background: var(--syn-border-hi);
  flex-shrink: 0;
}

.syn-quiz-step {
  animation: syn-quiz-fade 0.4s ease-out;
}
@keyframes syn-quiz-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.syn-quiz-step-intro {
  max-width: 680px;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--syn-text-dim);
  font-size: 0.98rem;
  line-height: 1.6;
}
.syn-quiz-step-title {
  text-align: center;
  font-family: var(--syn-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--syn-text);
  margin: 0 0 1.5rem;
}

/* ------ Step 1: VOICE flip grid (reuses .syn-flip-*) ------ */
.syn-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  max-width: 1100px;
  margin: 0 auto;
  perspective: 1400px;
}
.syn-voice-flip {
  position: relative;
  min-height: 340px;
  height: 340px;
}
.syn-voice-flip .syn-flip-card {
  display: block;
  min-height: 0;
  height: 100%;
}
.syn-voice-flip .syn-flip-face {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  gap: 0.55rem;
  align-items: center;
  text-align: center;
}
.syn-voice-glyph {
  font-size: 3rem;
  line-height: 1;
  color: var(--syn-gold);
  margin: 0.1rem 0 0.3rem;
  filter: drop-shadow(0 0 16px rgba(201,164,73,0.25));
}
.syn-voice-glyph-back { font-size: 2rem; margin: 0; }
.syn-voice-title {
  font-family: var(--syn-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
  color: var(--syn-text);
}
.syn-voice-for {
  font-style: italic;
  color: var(--syn-text-dim);
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.syn-voice-quote {
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  border: 0;
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--syn-text);
}
.syn-voice-quality {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.75rem;
}
.syn-voice-pick {
  margin-top: auto;
  padding: 0.6rem 1rem !important;
  font-size: 0.85rem !important;
  width: 100%;
}

/* Voice elemental tints */
.syn-voice-flip-fire  .syn-flip-front { background: radial-gradient(circle at 50% 15%, rgba(191, 79, 53, 0.14), transparent 55%), var(--syn-surface); }
.syn-voice-flip-water .syn-flip-front { background: radial-gradient(circle at 50% 15%, rgba(79, 128, 191, 0.14), transparent 55%), var(--syn-surface); }
.syn-voice-flip-air   .syn-flip-front { background: radial-gradient(circle at 50% 15%, rgba(163, 172, 185, 0.14), transparent 55%), var(--syn-surface); }
.syn-voice-flip-earth .syn-flip-front { background: radial-gradient(circle at 50% 15%, rgba(122, 102, 67, 0.14), transparent 55%), var(--syn-surface); }

.syn-voice-flip.is-chosen .syn-flip-face {
  border-color: var(--syn-gold);
  box-shadow: 0 0 0 2px rgba(201,164,73,0.18);
}

/* ------ Step 2: BIRTHDAY form ------ */
.syn-quiz-birthday {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.syn-quiz-bday-input {
  width: 100%;
  font-size: 1.3rem;
  padding: 1rem 1.2rem;
  text-align: center;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border-hi);
  border-radius: var(--syn-r);
  color: var(--syn-text);
  font-family: var(--syn-serif);
  margin: 0 0 1.5rem;
  color-scheme: dark;
}
.syn-quiz-bday-input:focus {
  outline: 2px solid var(--syn-gold);
  outline-offset: 2px;
  border-color: var(--syn-gold-low);
}
.syn-quiz-nav {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ------ Step 3: STYLE cards ------ */
.syn-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  max-width: 900px;
  margin: 0 auto 1.75rem;
}
.syn-style-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.3rem 1.2rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  cursor: pointer;
  text-align: left;
  color: var(--syn-text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s, background 0.15s;
  font-family: inherit;
}
.syn-style-card:hover {
  transform: translateY(-2px);
  border-color: var(--syn-gold-low);
  box-shadow: 0 12px 30px -18px rgba(201,164,73,0.35);
}
.syn-style-glyph {
  font-family: var(--syn-serif);
  font-size: 1.7rem;
  color: var(--syn-gold);
  line-height: 1;
}
.syn-style-card strong {
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.syn-style-card p {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ------ Step 4: REVEAL — teaser flip tiles ------ */
.syn-quiz-reveal-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2rem;
}
.syn-quiz-reveal-title {
  font-family: var(--syn-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--syn-text);
  margin: 0.4rem 0 0.7rem;
}
.syn-quiz-reveal-voice {
  font-style: italic;
  color: var(--syn-gold-hi);
}
.syn-quiz-reveal-sub {
  color: var(--syn-text-dim);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}

.syn-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  perspective: 1400px;
}
.syn-teaser-flip {
  position: relative;
  min-height: 310px;
  height: 310px;
}
.syn-teaser-flip .syn-flip-card {
  display: block;
  min-height: 0;
  height: 100%;
}
.syn-teaser-flip .syn-flip-face {
  position: absolute;
  inset: 0;
  padding: 1.4rem 1.2rem 1.2rem;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}
.syn-teaser-glyph {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--syn-gold);
  margin: 0.3rem 0 0.1rem;
  filter: drop-shadow(0 0 14px rgba(201,164,73,0.22));
}
.syn-teaser-title {
  font-family: var(--syn-serif);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  color: var(--syn-text);
}
.syn-teaser-front-line {
  color: var(--syn-gold-hi);
  font-family: var(--syn-serif);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.syn-teaser-back-title {
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--syn-gold-hi);
  margin: 0.3rem 0 0.6rem;
  line-height: 1.3;
}
.syn-teaser-back-body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--syn-text);
  margin: 0 0 auto;
  flex: 1;
  font-family: var(--syn-serif);
}
.syn-teaser-cta {
  margin-top: 0.7rem;
  padding: 0.6rem 1rem !important;
  font-size: 0.85rem !important;
  width: 100%;
}

.syn-quiz-final-cta {
  text-align: center;
  max-width: 680px;
  margin: 1.75rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--syn-border);
}
.syn-quiz-final-lede {
  color: var(--syn-text-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
  font-style: italic;
}
.syn-quiz-final-lede b { color: var(--syn-gold-hi); font-style: normal; font-weight: 500; }

@media (max-width: 520px) {
  .syn-quiz { padding: 1.75rem 0.75rem 2rem; border-radius: 0; }
  .syn-quiz-progress { gap: 0.25rem; }
  .syn-quiz-dot { padding: 0.3rem 0.5rem; font-size: 0.68rem; gap: 0.3rem; }
  .syn-quiz-dot b { width: 16px; height: 16px; line-height: 15px; font-size: 0.7rem; }
  .syn-quiz-sep { width: 10px; }
  .syn-voice-flip, .syn-teaser-flip { height: auto; min-height: 320px; }
  .syn-voice-grid, .syn-teaser-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LANDING · Tier ladder — strengthened copy
   ============================================================ */
.syn-tier-gate {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--syn-border);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--syn-text-mute);
  letter-spacing: 0.02em;
  text-align: center;
}
.syn-tier.featured .syn-tier-gate {
  border-top-color: var(--syn-gold-low);
  color: var(--syn-gold-low);
}
.syn-tiers-cta {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--syn-text-dim);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  font-size: 0.98rem;
  line-height: 1.65;
}
.syn-tiers-cta .syn-btn { margin-top: 1rem; }
.syn-tiers-preview-sub b {
  color: var(--syn-gold-hi);
  font-weight: 500;
  font-style: italic;
}

/* ============================================================
   LIVE · change-window glow
   JS writes a --syn-glow value in [0..1] to tiles with
   [data-syn-glow-cycle] while within the 10-min-before/after
   change window (30s for minute-cycle tiles).

   Key trick: --syn-glow is registered as <number> via @property so
   the browser can interpolate its value every frame between JS
   updates. With a 1200ms linear transition, the ring breathes
   continuously rather than stepping once per second.
   ============================================================ */

@property --syn-glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

[data-syn-glow-cycle] {
  --syn-glow: 0;
  position: relative;
  /* Interpolate the custom property itself so every derived calc() in
     the ::after recomputes smoothly on every frame between JS writes. */
  transition: --syn-glow 320ms linear;
}

/* The ring sits outside the tile so the 3D-flipped faces don't mask
   it. Opacity scales linearly with the glow value, so at 0 it is
   literally invisible (no paint cost beyond the element itself). */
[data-syn-glow-cycle]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--syn-r-lg) + 3px);
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(201, 164, 73, calc(0.2 + 0.7 * var(--syn-glow)));
  box-shadow:
    0 0 calc(4px + 34px * var(--syn-glow)) rgba(201, 164, 73, calc(0.1 + 0.6 * var(--syn-glow))),
    0 0 calc(1px + 14px * var(--syn-glow)) rgba(201, 164, 73, calc(0.15 + 0.55 * var(--syn-glow))) inset;
  opacity: var(--syn-glow);
  /* Fallback interpolation for browsers that miss @property interpolation. */
  transition: border-color 320ms linear, box-shadow 320ms linear, opacity 320ms linear;
}

/* A very slow breath on top of the proximity curve. Driven by its own
   keyframe so it layers with (not replaces) the proximity interpolation.
   Uses a scale on the inset shadow via a secondary var. */
[data-syn-glow-cycle]::after {
  animation: syn-glow-breathe 3.6s ease-in-out infinite;
}
@keyframes syn-glow-breathe {
  0%, 100% { filter: brightness(1)           saturate(1); }
  50%      { filter: brightness(calc(1 + 0.22 * var(--syn-glow))) saturate(calc(1 + 0.15 * var(--syn-glow))); }
}

/* Reduced motion: keep intensity, drop the breathe oscillation. */
@media (prefers-reduced-motion: reduce) {
  [data-syn-glow-cycle]::after {
    animation: none;
    transition: none;
  }
  [data-syn-glow-cycle] { transition: none; }
}

/* Live clock typography — monospace the digits so width doesn't jitter. */
.syn-live-clock {
  font-variant-numeric: tabular-nums;
  color: var(--syn-gold-hi);
  font-weight: 500;
}

/* ============================================================
   TAROT · flip cards in divination result
   Front keeps the existing spread cell (position, SVG, meaning).
   Back reveals the deep reading: correspondences, catalyst, rite.
   Reuses .syn-flip-* primitives.
   ============================================================ */

.syn-div-help {
  max-width: 680px;
  margin: 0.5rem auto 2rem;
  color: var(--syn-text-dim);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
}
.syn-div-help em { color: var(--syn-gold-hi); font-style: italic; }

.syn-div-spread--three {
  perspective: 1600px;
}

.syn-tarot-flip {
  position: relative;
  min-height: 640px;
  height: 640px;
}
.syn-tarot-flip .syn-flip-card {
  display: block;
  min-height: 0;
  height: 100%;
}
.syn-tarot-flip .syn-flip-face {
  position: absolute;
  inset: 0;
  padding: 1.4rem 1.3rem 1.2rem;
  border-radius: var(--syn-r-lg);
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}

/* Front keeps original cell aesthetics. Shrink the SVG so the meaning
   (which can run two or three lines) isn't clipped at the bottom. */
.syn-tarot-flip .syn-flip-front {
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}
.syn-tarot-flip .syn-flip-front .syn-div-figure {
  flex: 0 0 auto;
  align-items: center;
  margin: 0.5rem 0 0.3rem;
}
.syn-tarot-flip .syn-flip-front .syn-div-figure .syn-fig-svg {
  max-width: 170px;   /* was 220 — the aspect is ~1.5 so height drops ~75px */
  height: auto;
}
.syn-tarot-flip .syn-flip-front .syn-div-rune-name {
  margin: 0.3rem 0 0.2rem;
  font-size: 1.25rem;
}
.syn-tarot-flip .syn-flip-front .syn-div-reading {
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  overflow: hidden;
}
.syn-tarot-flip .syn-flip-front .syn-flip-hint {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--syn-border);
}

/* Back — scrollable deep reading. */
.syn-tarot-flip .syn-flip-back {
  text-align: left;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--syn-border-hi) transparent;
  padding: 1.3rem 1.3rem 1.2rem;
  gap: 0.65rem;
}
.syn-tarot-flip .syn-flip-back::-webkit-scrollbar { width: 5px; }
.syn-tarot-flip .syn-flip-back::-webkit-scrollbar-thumb { background: var(--syn-border-hi); border-radius: 3px; }

.syn-tarot-back-head {
  padding-bottom: 0.7rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--syn-border);
}
.syn-tarot-back-head .syn-div-position {
  margin: 0.4rem 0 0.4rem;
  font-style: normal;
}
.syn-tarot-back-head .syn-div-position em {
  color: var(--syn-gold-hi);
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: 1.1rem;
  text-transform: none;
}
.syn-tarot-keywords {
  margin: 0.2rem 0 0.3rem;
  font-size: 0.88rem;
  color: var(--syn-text);
  line-height: 1.5;
}
.syn-tarot-keywords b {
  color: var(--syn-gold-hi);
  font-family: var(--syn-serif);
  font-style: italic;
  font-weight: 500;
}
.syn-tarot-refs {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--syn-text-mute);
  letter-spacing: 0.03em;
}
.syn-tarot-refs b { color: var(--syn-gold-low); font-weight: 500; }

/* Section labels (uppercase eyebrow above each block). */
.syn-tarot-section-label {
  display: block;
  color: var(--syn-gold-low);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.syn-tarot-amplified p,
.syn-tarot-shadow p,
.syn-tarot-catalyst p,
.syn-tarot-ritual p {
  margin: 0;
  font-family: var(--syn-serif);
  color: var(--syn-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.syn-tarot-amplified { margin-top: 0.2rem; }
.syn-tarot-shadow {
  padding: 0.5rem 0.7rem;
  background: rgba(143, 36, 29, 0.06);
  border-left: 2px solid var(--syn-mars);
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
}
.syn-tarot-shadow p { color: var(--syn-text-dim); font-size: 0.86rem; }

.syn-tarot-catalyst {
  padding: 0.7rem 0.85rem;
  background: rgba(201, 164, 73, 0.06);
  border-left: 2px solid var(--syn-gold-low);
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
}
.syn-tarot-question {
  font-style: italic;
  color: var(--syn-gold-hi) !important;
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
}

.syn-tarot-ritual {
  padding: 0.7rem 0.85rem;
  background: var(--syn-ink);
  border: 1px dashed var(--syn-gold-low);
  border-radius: var(--syn-r);
}
.syn-tarot-ritual p {
  color: var(--syn-text);
  font-size: 0.88rem;
}

.syn-tarot-meta {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--syn-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.3rem 0.8rem;
  font-size: 0.76rem;
  color: var(--syn-text-mute);
  line-height: 1.6;
}
.syn-tarot-meta span em {
  display: inline-block;
  min-width: 58px;
  color: var(--syn-gold-low);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.3em;
}

/* Suit-tinted accents on the back face for minors. */
.syn-tarot-suit-wands     .syn-flip-back { background: radial-gradient(circle at 85% -5%, rgba(191, 79, 53, 0.12), transparent 50%), var(--syn-surface); }
.syn-tarot-suit-cups      .syn-flip-back { background: radial-gradient(circle at 85% -5%, rgba(79, 128, 191, 0.12), transparent 50%), var(--syn-surface); }
.syn-tarot-suit-swords    .syn-flip-back { background: radial-gradient(circle at 85% -5%, rgba(163, 172, 185, 0.12), transparent 50%), var(--syn-surface); }
.syn-tarot-suit-pentacles .syn-flip-back { background: radial-gradient(circle at 85% -5%, rgba(122, 102, 67, 0.14), transparent 50%), var(--syn-surface); }

/* Major arcana get a faint gold wash. */
.syn-tarot-flip-major .syn-flip-back {
  background: radial-gradient(circle at 85% -5%, rgba(201, 164, 73, 0.12), transparent 55%), var(--syn-surface);
}
.syn-tarot-flip-major .syn-flip-face { border-color: var(--syn-border-hi); }

@media (max-width: 640px) {
  .syn-tarot-flip { min-height: 580px; height: 580px; }
  .syn-tarot-flip .syn-flip-front .syn-div-figure .syn-fig-svg { max-width: 150px; }
  .syn-tarot-flip .syn-flip-face { padding: 1.2rem 1rem 1rem; }
  .syn-tarot-flip .syn-flip-back { padding: 1rem 1rem 0.9rem; }
  .syn-tarot-amplified p,
  .syn-tarot-shadow p,
  .syn-tarot-catalyst p,
  .syn-tarot-ritual p { font-size: 0.86rem; }
}

/* ============================================================
   NUMEROLOGY · live clock inside the minute tile
   ============================================================ */
.syn-minute-clock {
  font-family: var(--syn-serif);
  font-variant-numeric: tabular-nums;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  color: var(--syn-gold-hi);
  margin: 0.2rem 0 0.3rem;
  text-shadow: 0 0 18px rgba(201, 164, 73, 0.18);
}
.syn-minute-clock-back {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

/* ============================================================
   TIMEZONE · onboarding + settings explainer
   ============================================================ */
.syn-field-tz { margin-bottom: 1.75rem; }
.syn-field-sublabel {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--syn-text-mute);
  font-size: 0.85em;
  font-style: italic;
  margin-left: 0.3em;
}
.syn-tz-explain {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem 0.8rem;
  background: rgba(201, 164, 73, 0.035);
  border: 1px dashed var(--syn-border-hi);
  border-radius: var(--syn-r);
  color: var(--syn-text-dim);
  font-size: 0.88rem;
  line-height: 1.6;
}
.syn-tz-explain-lede {
  margin: 0 0 0.45rem;
  color: var(--syn-gold-hi);
  font-style: italic;
}
.syn-tz-explain-lede em { font-style: italic; color: var(--syn-gold); }
.syn-tz-explain ul {
  margin: 0 0 0.6rem;
  padding: 0 0 0 1.1rem;
  list-style: "· ";
}
.syn-tz-explain li {
  margin: 0.15rem 0;
  color: var(--syn-text-dim);
}
.syn-tz-explain li b {
  color: var(--syn-gold-low);
  font-weight: 500;
}
.syn-tz-explain li em {
  color: var(--syn-text);
  font-style: italic;
}
.syn-tz-explain-foot {
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--syn-border);
  font-size: 0.82rem;
  color: var(--syn-text-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: baseline;
}
.syn-tz-explain-foot code {
  background: var(--syn-ink);
  border: 1px solid var(--syn-border);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--syn-gold-low);
}
.syn-tz-detect {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--syn-gold-low);
  color: var(--syn-gold) !important;
  padding: 0.35rem 0.75rem;
  border-radius: var(--syn-r);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.syn-tz-detect:hover {
  border-color: var(--syn-gold);
  color: var(--syn-gold-hi) !important;
  background: rgba(201, 164, 73, 0.06);
}

/* ============================================================
   LIVE · per-tile revelation countdown
   Shown at the base of every dynamic tile's front face,
   above the "tap to reveal" hint.
   ============================================================ */

.syn-reveal-countdown {
  display: block;
  font-family: var(--syn-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--syn-border);
  opacity: 0.8;
}

/* When the same tile also has the flip hint below, don't double the border. */
.syn-reveal-countdown + .syn-flip-hint {
  border-top: 0;
  padding-top: 0.2rem;
  margin-top: 0;
}

/* Compact on the hour-now tile, which already has the "hour now — Xm" label up top. */
.syn-hour-now .syn-reveal-countdown {
  color: var(--syn-gold);
  opacity: 1;
}

/* ============================================================
   ORACLE · Discipline sections
   Tiles are grouped under a tradition header (Celestial, Cards &
   Lots, Numerology, …) so each family of readings is framed before
   it is read.
   ============================================================ */

.syn-disciplines-intro {
  max-width: 820px;
  margin: 2.5rem auto 2rem;
  text-align: center;
}
.syn-disciplines-intro .syn-stream-grid-explainer {
  margin-top: 0.4rem;
}

.syn-discipline {
  max-width: 1180px;
  margin: 0 auto 3rem;
}
.syn-discipline-header {
  max-width: 720px;
  margin: 0 auto 1.25rem;
  text-align: center;
  padding: 0 1rem;
}
.syn-discipline-eyebrow {
  font-family: var(--syn-sans);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
  opacity: 0.9;
}
.syn-discipline-title {
  font-family: var(--syn-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--syn-gold-hi);
  margin: 0 0 0.5rem;
  font-style: italic;
}
.syn-discipline-title::before,
.syn-discipline-title::after {
  content: "✦";
  display: inline-block;
  color: var(--syn-gold-low);
  font-size: 0.7em;
  opacity: 0.45;
  margin: 0 0.7em;
  transform: translateY(-0.15em);
  font-style: normal;
}
.syn-discipline-lede {
  margin: 0;
  color: var(--syn-text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
}

/* Subtle discipline-specific accent on the tile grid background */
.syn-discipline-celestial .syn-stream-grid  { background: radial-gradient(ellipse at 50% -20%, rgba(79,128,191,0.04), transparent 60%); padding: 0.5rem; border-radius: var(--syn-r-lg); }
.syn-discipline-lots      .syn-stream-grid  { background: radial-gradient(ellipse at 50% -20%, rgba(201,164,73,0.04), transparent 60%); padding: 0.5rem; border-radius: var(--syn-r-lg); }
.syn-discipline-numerology .syn-stream-grid { background: radial-gradient(ellipse at 50% -20%, rgba(163,172,185,0.04), transparent 60%); padding: 0.5rem; border-radius: var(--syn-r-lg); }
.syn-discipline-green-kingdom .syn-stream-grid { background: radial-gradient(ellipse at 50% -20%, rgba(117, 156, 94, 0.055), transparent 60%); padding: 0.5rem; border-radius: var(--syn-r-lg); }

/* Green-Kingdom herb tiles carry a subtle gold-green accent on the border */
.syn-discipline-green-kingdom .syn-stream-card {
  border-color: rgba(117, 156, 94, 0.22);
}
.syn-discipline-green-kingdom .syn-stream-card:hover,
.syn-discipline-green-kingdom .syn-stream-card:focus-within {
  border-color: rgba(201, 164, 73, 0.38);
  box-shadow: 0 0 0 1px rgba(117, 156, 94, 0.12),
              0 8px 24px rgba(0, 0, 0, 0.25);
}

/* "Read in the Pantheon →" link at the bottom of each herb tile */
.syn-stream-link {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(201, 164, 73, 0.16);
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 0.95rem;
  text-align: right;
}
.syn-stream-link a {
  color: var(--syn-gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.syn-stream-link a:hover {
  color: var(--syn-gold-hi);
  text-decoration: underline;
}

/* =====================================================================
   The Witchcrafte discipline — forest-green / antler-copper accent.
   Distinct from the Green Kingdom's botanical palette: this is the
   horned-god / green-man / hearth-and-hearthstone aesthetic of the
   Olde Crafte. Primary #4a5c3a forest; accent #8b5a2b antler-copper.
   ===================================================================== */
.syn-discipline-witchcrafte .syn-stream-grid {
  background: radial-gradient(ellipse at 50% -20%, rgba(74, 92, 58, 0.065), transparent 60%);
  padding: 0.5rem;
  border-radius: var(--syn-r-lg);
}
.syn-discipline-witchcrafte .syn-stream-card {
  border-color: rgba(74, 92, 58, 0.26);
}
.syn-discipline-witchcrafte .syn-stream-card:hover,
.syn-discipline-witchcrafte .syn-stream-card:focus-within {
  border-color: rgba(139, 90, 43, 0.42);
  box-shadow: 0 0 0 1px rgba(74, 92, 58, 0.14),
              0 8px 24px rgba(0, 0, 0, 0.28);
}
.syn-discipline-witchcrafte .syn-stream-front-glyph {
  color: #a07245;  /* antler copper — a warmer metal than the gold */
}
.syn-discipline-witchcrafte .syn-stream-link {
  border-top-color: rgba(139, 90, 43, 0.22);
}
.syn-discipline-witchcrafte .syn-stream-link a {
  color: #b58658;
}
.syn-discipline-witchcrafte .syn-stream-link a:hover {
  color: #d4a574;
  text-decoration: underline;
}
/* Free-tier (Rede meditation) tile — a quiet pale-green cast to mark
   the ethical-gate entry tile that Inquisitors can read in full. */
.syn-discipline-witchcrafte .syn-stream-witchcrafte-rede-meditation .syn-stream-front-glyph,
.syn-discipline-witchcrafte .syn-stream-witchcrafte-rede-meditation .syn-stream-back-glyph {
  color: #7a9464;
}

@media (max-width: 520px) {
  .syn-discipline { margin-bottom: 2rem; }
  .syn-discipline-title::before,
  .syn-discipline-title::after { margin: 0 0.4em; }
}

/* =========================================================================
   Reader-UX · glossary tooltips, bookmarks, return-button, appendix pages
   Appended 2026-04-24.
   ========================================================================= */

/* --- Glossary terms inline in body prose --- */
.syn-term {
  border-bottom: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 70%, transparent);
  cursor: help;
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease;
  padding: 0 1px;
}
.syn-term:hover {
  background: color-mix(in oklab, var(--syn-gold, #c7a65a) 18%, transparent);
}

/* --- Cross-reference anchors (ch. 373 / Appendix A) --- */
.syn-xref {
  color: var(--syn-gold-hi, #e6c87a);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, transparent);
  cursor: pointer;
}
.syn-xref:hover {
  color: var(--syn-gold-hi, #e6c87a);
  border-bottom-color: var(--syn-gold-hi, #e6c87a);
}

/* --- Glossary tooltip popover --- */
.syn-tooltip {
  position: absolute;
  max-width: 360px;
  z-index: 200;
  background: #131218;
  color: #e7e1d3;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, #2a2530);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(199,166,90,0.08);
  padding: 14px 16px 12px;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.syn-tooltip--open { opacity: 1; transform: translateY(0); }
.syn-tooltip h3.syn-tooltip-term {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--syn-gold-hi, #e6c87a);
  letter-spacing: .02em;
  padding-right: 24px;
}
.syn-tooltip .syn-tooltip-def {
  color: #d5ccb8;
  font-size: 14px;
}
.syn-tooltip .syn-tooltip-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--syn-gold-hi, #e6c87a);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, transparent);
}
.syn-tooltip .syn-tooltip-more:hover { border-bottom-color: var(--syn-gold-hi, #e6c87a); }
.syn-tooltip-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: 0;
  color: #8d8573;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.syn-tooltip-close:hover { color: #e7e1d3; }

/* --- Arrival flash on linked paragraph --- */
@keyframes syn-flash-anim {
  0%   { background: color-mix(in oklab, var(--syn-gold, #c7a65a) 28%, transparent); }
  100% { background: transparent; }
}
.syn-flash {
  animation: syn-flash-anim 2.4s ease-out;
  border-radius: 2px;
  padding: 2px 4px;
  margin: 0 -4px;
}

/* --- Return-button (appears on arrival from a cross-ref) --- */
.syn-return-btn {
  position: fixed;
  top: 78px;
  right: 20px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #1a1820;
  color: #e7e1d3;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 50%, #2a2530);
  border-radius: 24px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: transform .15s ease, background .15s ease;
}
.syn-return-btn:hover {
  transform: translateY(-1px);
  background: #221f2a;
  color: #fff;
}
.syn-return-arrow { color: var(--syn-gold-hi, #e6c87a); font-size: 15px; }
.syn-return-title { color: var(--syn-gold-hi, #e6c87a); font-style: normal; }

/* (Legacy .syn-para-bookmark removed — replaced by .syn-para-mark and
   .syn-para-ref. Rules live further down in the Paragraph actions block.) */

/* --- Bookmark save form --- */
.syn-bookmark-form {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 220;
  width: min(480px, calc(100vw - 32px));
  background: #131218;
  color: #e7e1d3;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, #2a2530);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}
.syn-bookmark-form .syn-bookmark-excerpt {
  font-style: italic;
  color: #d5ccb8;
  border-left: 2px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 50%, transparent);
  padding-left: 10px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.syn-bookmark-form label {
  display: block;
  font-size: 13px;
  color: #a59b85;
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.syn-bookmark-form input {
  width: 100%;
  margin-top: 6px;
  background: #0a0910;
  color: #e7e1d3;
  border: 1px solid #2a2530;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}
.syn-bookmark-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.syn-bookmark-actions button {
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #2a2530;
  background: #1a1820;
  color: #d5ccb8;
}
.syn-bookmark-actions .syn-bookmark-save {
  background: color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, #1a1820);
  color: #fff;
  border-color: var(--syn-gold, #c7a65a);
}
.syn-bookmark-actions button:hover { background: #221f2a; }

/* --- Transient flash message --- */
.syn-flash-msg {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 12px);
  background: #131218;
  color: #e7e1d3;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, #2a2530);
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 14px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 260;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.syn-flash-msg.show { opacity: 1; transform: translate(-50%, 0); }
.syn-flash-msg--bad { border-color: #7a3a3a; }

/* =========================================================================
   Appendix-specific formatting
   ========================================================================= */

.syn-appendix .syn-book-reader-head h1 {
  font-variant: small-caps;
  letter-spacing: .04em;
}

/* Tables inside appendices: responsive overflow-scroll, zebra stripes,
   compact padding, gold-accent column headers. */
.syn-appendix .syn-book-reader-body table,
.syn-book-reader-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  font-family: inherit;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.syn-book-reader-body table thead th {
  background: #1a1820;
  color: var(--syn-gold-hi, #e6c87a);
  font-weight: 500;
  letter-spacing: .02em;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, transparent);
  white-space: nowrap;
}
.syn-book-reader-body table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid #221f2a;
  vertical-align: top;
  white-space: normal;
}
.syn-book-reader-body table tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.012);
}
.syn-book-reader-body table tbody tr:hover td {
  background: rgba(199, 166, 90, 0.05);
}

/* Glossary appendix: dense definition-list layout.
   Each entry is a paragraph that starts with <strong>Term</strong>—definition.
   We don't rewrite the HTML, just style the paragraph. */
.syn-appendix .syn-book-reader-body > p {
  margin: 10px 0;
  padding-left: 2em;
  text-indent: -2em;
  line-height: 1.55;
}
.syn-appendix .syn-book-reader-body > p > strong:first-child {
  color: var(--syn-gold-hi, #e6c87a);
  font-weight: 600;
  letter-spacing: .02em;
  display: inline-block;
  min-width: 0;
}

/* Appendix section headers (## A, ## B, ...) get a sticky letter-bar vibe. */
.syn-appendix .syn-book-reader-body h2 {
  position: sticky;
  top: 60px;
  z-index: 5;
  background: linear-gradient(to bottom, #0a0910 0%, #0a0910 75%, rgba(10,9,16,0) 100%);
  margin: 36px -16px 14px;
  padding: 14px 16px 10px;
  font-size: 28px;
  color: var(--syn-gold-hi, #e6c87a);
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 30%, transparent);
}

/* Letter-jump nav: JS-generated, rendered as a sticky pill-bar. */
.syn-letter-jump {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 6px;
  margin: 0 -8px 16px;
  background: rgba(10, 9, 16, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid #221f2a;
}
.syn-letter-jump a {
  display: inline-block;
  min-width: 24px;
  padding: 3px 8px;
  text-align: center;
  color: #a59b85;
  text-decoration: none;
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: .02em;
}
.syn-letter-jump a:hover {
  background: color-mix(in oklab, var(--syn-gold, #c7a65a) 20%, transparent);
  color: var(--syn-gold-hi, #e6c87a);
}
.syn-letter-jump a.active {
  background: color-mix(in oklab, var(--syn-gold, #c7a65a) 30%, transparent);
  color: #fff;
}

/* Bibliography / Practitioners Index: tighter line height, smaller bottom margin */
.syn-appendix[data-appendix="g"] .syn-book-reader-body > p,
.syn-appendix[data-appendix="i"] .syn-book-reader-body > p {
  margin: 6px 0;
}

/* Drop-cap is out of place in reference pages; suppress for appendices. */
.syn-appendix .syn-drop-cap::first-letter {
  font-size: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
}

/* Mobile: soften the sticky headers so they don't eat screen */
@media (max-width: 640px) {
  .syn-appendix .syn-book-reader-body h2 {
    position: static;
    top: auto;
    background: none;
    border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 25%, transparent);
  }
  .syn-letter-jump { position: static; backdrop-filter: none; }
  .syn-return-btn { top: auto; bottom: 12px; right: 12px; }
}

/* Saved references in Journal */
.syn-saved-refs {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #221f2a;
}
.syn-saved-refs-head {
  font-size: 22px;
  color: var(--syn-gold-hi, #e6c87a);
  letter-spacing: .03em;
  margin: 0 0 6px;
}
.syn-saved-refs-sub {
  color: #9a9180;
  font-size: 14px;
  margin: 0 0 18px;
}
.syn-ref-list { list-style: none; padding: 0; margin: 0; }
.syn-ref-row {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #0f0e14;
  border: 1px solid #221f2a;
  border-left: 3px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 60%, transparent);
  border-radius: 4px;
  transition: background .15s ease;
}
.syn-ref-row:hover { background: #14131a; }
.syn-ref-link { flex: 1; color: inherit; text-decoration: none; display: block; }
.syn-ref-where {
  font-size: 13px;
  color: var(--syn-gold-hi, #e6c87a);
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.syn-ref-book { font-weight: 500; }
.syn-ref-sep  { opacity: .5; margin: 0 6px; }
.syn-ref-chapter { color: #d5ccb8; }
.syn-ref-excerpt {
  font-style: italic;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  color: #d5ccb8;
  font-size: 15px;
  line-height: 1.55;
}
.syn-ref-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--syn-gold-hi, #e6c87a);
}
.syn-ref-date {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #6f6a5c;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.syn-ref-del { display: inline-block; }
.syn-ref-del button {
  background: transparent;
  border: 0;
  color: #6f6a5c;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.syn-ref-del button:hover { color: #d79090; background: rgba(215,144,144,0.08); }

/* Dashboard continue-reading tile */
.syn-continue-tile {
  grid-column: span 2;
  display: block;
  padding: 18px 20px;
  background: linear-gradient(135deg, #14131a 0%, #1a1820 100%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, #2a2530);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
.syn-continue-tile:hover {
  transform: translateY(-1px);
  border-color: var(--syn-gold, #c7a65a);
}
.syn-continue-label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a9180;
  margin-bottom: 6px;
}
.syn-continue-book {
  display: block;
  font-size: 13px;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 4px;
}
.syn-continue-chapter {
  display: block;
  font-size: 17px;
  color: #e7e1d3;
  font-weight: 500;
}

/* =========================================================================
   ORACLE · unified shell + .syn-rite component (2026-04-24 restructure)
   Both Daily and Hourly blocks use the same .syn-rite markup with
   data-planet="…" for strong colour-of-the-planet backgrounds.
   ========================================================================= */

.syn-oracle {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.syn-oracle > * { max-width: 100%; width: 100%; margin: 0; }

/* --------- Per-planet accent colour tokens --------- */
.syn-rite,
.syn-orient-tile {
  --p-accent: #c7a65a;
  --p-soft:   rgba(199,166,90,0.10);
  --p-edge:   rgba(199,166,90,0.35);
  --p-bg:     rgba(199,166,90,0.04);
}
.syn-rite[data-planet="sun"],     .syn-orient-tile[data-planet="sun"]     { --p-accent:#d4b94a; --p-soft:rgba(212,185,74,0.12);  --p-edge:rgba(212,185,74,0.45); --p-bg:rgba(212,185,74,0.05); }
.syn-rite[data-planet="moon"],    .syn-orient-tile[data-planet="moon"]    { --p-accent:#c3d4e0; --p-soft:rgba(195,212,224,0.10); --p-edge:rgba(195,212,224,0.38); --p-bg:rgba(195,212,224,0.04); }
.syn-rite[data-planet="mars"],    .syn-orient-tile[data-planet="mars"]    { --p-accent:#c44b44; --p-soft:rgba(196,75,68,0.12);   --p-edge:rgba(196,75,68,0.46); --p-bg:rgba(196,75,68,0.06); }
.syn-rite[data-planet="mercury"], .syn-orient-tile[data-planet="mercury"] { --p-accent:#d89a4a; --p-soft:rgba(216,154,74,0.11);  --p-edge:rgba(216,154,74,0.42); --p-bg:rgba(216,154,74,0.05); }
.syn-rite[data-planet="jupiter"], .syn-orient-tile[data-planet="jupiter"] { --p-accent:#6b84c9; --p-soft:rgba(107,132,201,0.11); --p-edge:rgba(107,132,201,0.44); --p-bg:rgba(107,132,201,0.05); }
.syn-rite[data-planet="venus"],   .syn-orient-tile[data-planet="venus"]   { --p-accent:#4ea98a; --p-soft:rgba(78,169,138,0.11);  --p-edge:rgba(78,169,138,0.42); --p-bg:rgba(78,169,138,0.05); }
.syn-rite[data-planet="saturn"],  .syn-orient-tile[data-planet="saturn"]  { --p-accent:#8a82b8; --p-soft:rgba(138,130,184,0.11); --p-edge:rgba(138,130,184,0.42); --p-bg:rgba(138,130,184,0.05); }

/* --------- .syn-rite master component --------- */
.syn-rite {
  position: relative;
  padding: 26px 30px 28px;
  background:
    radial-gradient(ellipse at 10% -20%, var(--p-soft) 0%, rgba(26,24,32,0) 60%),
    linear-gradient(180deg, #131218 0%, #0d0c12 100%);
  border: 1px solid var(--p-edge);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.syn-rite--hour { margin-top: 0; }

/* Banner: left-justified, with kind-label + date + hero */
.syn-rite-banner { margin-bottom: 20px; }
.syn-rite-kind {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin-right: 14px;
}
.syn-rite-date {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8d8573;
}
.syn-rite-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--p-edge);
}
.syn-rite-sigil {
  font-size: 70px;
  line-height: 1;
  color: var(--p-accent);
  font-family: "Georgia", serif;
  font-weight: 300;
  text-shadow: 0 2px 18px var(--p-soft);
}
.syn-rite-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8d8573;
  margin-bottom: 4px;
}
.syn-rite-name {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: 0.05em;
  color: var(--p-accent);
  margin: 0;
  line-height: 1.05;
}

/* Triptych — re-used for day + hour */
.syn-rite-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.syn-rite-flip {
  position: relative;
  height: 180px;
  perspective: 1200px;
}
.syn-rite-flip .syn-flip-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.syn-rite-flip .syn-flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.syn-rite-flip .syn-flip-toggle:checked ~ .syn-flip-card {
  transform: rotateY(180deg);
}
.syn-rite-flip .syn-flip-face {
  position: absolute;
  inset: 0;
  padding: 14px 12px;
  background: rgba(10,9,16,0.55);
  border: 1px solid #221f2a;
  border-radius: 6px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.syn-rite-flip .syn-flip-back { transform: rotateY(180deg); align-items: flex-start; justify-content: flex-start; }
.syn-rite-flip--now .syn-flip-face { border-color: var(--p-edge); background: linear-gradient(160deg, var(--p-bg) 0%, rgba(10,9,16,0.7) 100%); }

.syn-rite-flip-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d8573;
}
.syn-rite-flip-glyph {
  font-size: 36px;
  color: var(--p-accent);
  line-height: 1;
  margin: 4px 0;
  font-family: "Georgia", serif;
}
.syn-rite-flip-name {
  font-family: "Georgia", serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #e7e1d3;
  font-weight: 500;
}
.syn-rite-flip-sub {
  font-size: 0.75rem;
  color: #8d8573;
  font-style: italic;
}
.syn-rite-flip-line {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #d5ccb8;
}
.syn-rite-flip .syn-flip-hint {
  position: absolute;
  bottom: 8px;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f6a5c;
}
.syn-rite-flip .syn-flip-back-hint {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 0.6rem;
  color: #6f6a5c;
}

/* Summary paragraph */
.syn-rite-summary {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: rgba(10, 9, 16, 0.45);
  border-left: 3px solid var(--p-accent);
  border-radius: 3px;
}
.syn-rite-summary b { color: var(--p-accent); font-weight: 500; font-style: normal; }
.syn-rite-lead {
  font-family: "Georgia", serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #d5ccb8;
  font-style: italic;
  margin: 0 0 12px;
}
.syn-thread {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(8em, max-content) 1fr;
  column-gap: 14px;
  row-gap: 6px;
  font-size: 0.92rem;
}
.syn-thread-row { display: contents; }
.syn-thread dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8275;
  align-self: center;
}
.syn-thread dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  color: #d5ccb8;
}
.syn-thread dd > b {
  font-family: "Georgia", serif;
  font-size: 1.02rem;
}
.syn-thread dd > span {
  position: relative;
  padding-left: 12px;
  color: #b3a895;
  font-size: 0.88rem;
}
.syn-thread dd > span::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--p-accent);
  opacity: 0.7;
}
.syn-thread dd > b + span,
.syn-thread dd > span + span { padding-left: 12px; }

/* Correspondence tiles */
.syn-rite-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.syn-rite-tile {
  padding: 10px 12px;
  background: rgba(10,9,16,0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-top: 2px solid var(--p-edge);
  border-radius: 3px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
}
.syn-rite-tile--wide { grid-column: span 2; }
.syn-rite-tile-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin-bottom: 4px;
}
.syn-rite-tile p {
  margin: 0;
  color: #e7e1d3;
  font-size: 0.9rem;
  line-height: 1.5;
  font-family: "Georgia", serif;
}
.syn-rite-tile-word {
  font-style: italic;
  color: var(--p-accent);
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .syn-rite-tiles { grid-template-columns: repeat(2, 1fr); }
  .syn-rite-tile--wide { grid-column: span 2; }
}
@media (max-width: 540px) {
  .syn-rite { padding: 20px 18px 22px; }
  .syn-rite-triptych { grid-template-columns: 1fr; }
  .syn-rite-tiles { grid-template-columns: 1fr; }
  .syn-rite-tile--wide { grid-column: 1; }
  .syn-rite-sigil { font-size: 54px; }
  .syn-rite-name { font-size: 28px; }
}

/* =========================================================================
   ORIENTATION tile strip — shown between Hourly Rite and the disciplines
   ========================================================================= */

.syn-orient { }
.syn-orient-head { text-align: center; margin-bottom: 18px; }
.syn-orient-tag {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 6px;
}
.syn-orient-sub {
  margin: 0;
  color: #8d8573;
  font-size: 0.85rem;
  font-style: italic;
}
.syn-orient-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 1080px) { .syn-orient-tiles { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px)  { .syn-orient-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .syn-orient-tiles { grid-template-columns: 1fr; } }

.syn-orient-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(26,24,32,0.85) 0%, rgba(12,11,18,0.92) 100%);
  border: 1px solid #221f2a;
  border-top: 2px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 38%, transparent);
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.syn-orient-tile:hover {
  transform: translateY(-2px);
  border-top-color: var(--syn-gold-hi, #e6c87a);
  background: linear-gradient(180deg, rgba(34,32,40,0.95) 0%, rgba(16,14,20,0.98) 100%);
}
.syn-orient-tile--magister { border-top-color: rgba(166,48,43,0.55); }
.syn-orient-tile--magister:hover { border-top-color: var(--syn-mars, #a6302b); }

.syn-orient-step {
  display: inline-block;
  font-family: "Georgia", serif;
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 2px;
}
.syn-orient-name {
  font-family: "Georgia", serif;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #e7e1d3;
  letter-spacing: 0.01em;
}
.syn-orient-count {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d8573;
  margin-top: 4px;
}

/* =========================================================================
   Discipline header — progression-of-rites styling
   ========================================================================= */
.syn-discipline-header {
  position: relative;
}
.syn-discipline-header .syn-discipline-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--syn-gold, #c7a65a);
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.6;
}

/* =========================================================================
   Numerology: 3-up; streams: 2-up default, 3-up on ultrawide
   ========================================================================= */
.syn-discipline-numerology .syn-stream-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .syn-discipline-numerology .syn-stream-grid { grid-template-columns: 1fr; } }

.syn-streams,
.syn-stream-grid {
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================================
   OCCULT SYSTEM tiles (reduced; bottom-of-page Magister section)
   ========================================================================= */
.syn-occult-tiles { margin: 0; }
.syn-occult-head { text-align: center; margin-bottom: 18px; }
.syn-occult-tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9a9180;
  margin-bottom: 6px;
}
.syn-occult-title {
  font-family: "Georgia", serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 0 4px;
}
.syn-occult-sub { margin: 0; color: #8d8573; font-size: 0.85rem; font-style: italic; }
.syn-occult-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 1180px) { .syn-occult-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .syn-occult-grid { grid-template-columns: 1fr; } }
.syn-occult-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(26,24,32,0.88) 0%, rgba(12,11,18,0.92) 100%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 26%, #2a2530);
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.syn-occult-tile:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 58%, #2a2530); }
.syn-occult-tile--day-planet  { border-top: 2px solid rgba(212,185,74,0.5); }
.syn-occult-tile--hour-planet { border-top: 2px solid rgba(138,130,184,0.5); }
.syn-occult-tile--tarot-day   { border-top: 2px solid rgba(180,116,180,0.5); }
.syn-occult-tile--practice    { border-top: 2px solid rgba(78,169,138,0.5); }
.syn-occult-tile-eyebrow {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.syn-occult-tile-title {
  font-family: "Georgia", serif;
  font-size: 1rem;
  line-height: 1.3;
  color: #e7e1d3;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.syn-occult-tile-excerpt {
  flex: 1;
  font-family: "Georgia", serif;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #b6ae9b;
  font-style: italic;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.syn-occult-tile-cta {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin-top: auto;
}
.syn-occult-tile-edge {
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 20px;
  background: linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--syn-gold, #c7a65a) 30%, transparent) 50%);
  opacity: 0.5;
}

/* =========================================================================
   Shared .syn-rite grid — table-effect matching the old ritual block
   2 narrow cells top row, wide cells below; same CSS for both Daily and
   Hourly so the panels are identical in layout, differing only in content.
   ========================================================================= */
.syn-rite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 2px;
  border: 1px solid var(--p-edge);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(10, 9, 16, 0.45);
}
.syn-rite-cell {
  position: relative;
  padding: 14px 18px 12px;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.syn-rite-cell:nth-child(2n) { border-right: 0; }
.syn-rite-cell-wide {
  grid-column: 1 / -1;
  border-right: 0;
}
.syn-rite-cell:last-child { border-bottom: 0; }
.syn-rite-cell-wide + .syn-rite-cell-wide:last-child { border-bottom: 0; }
.syn-rite-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin-bottom: 6px;
}
.syn-rite-cell p {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #e7e1d3;
}
.syn-rite-cell p b {
  color: var(--p-accent);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.syn-rite-word {
  font-style: italic;
  color: var(--p-accent) !important;
  font-size: 0.98rem !important;
}

@media (max-width: 640px) {
  .syn-rite-grid { grid-template-columns: 1fr; }
  .syn-rite-cell { border-right: 0; }
}

/* Kill the old syn-rite-tiles layout which we've replaced with the grid */
.syn-rite-tiles { display: none; }

/* =========================================================================
   Orientation tiles — equal height regardless of content length
   ========================================================================= */
.syn-orient-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 112px;
}
.syn-orient-tile .syn-orient-step { flex: 0 0 auto; }
.syn-orient-tile .syn-orient-name {
  flex: 1 1 auto;      /* absorbs vertical slack so count sits at bottom */
  display: block;
}
.syn-orient-tile .syn-orient-count {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 6px;
}

/* =========================================================================
   Occult System tiles — ALWAYS 2-col, tiles are larger/more prominent
   so they read as parity with every other discipline.
   ========================================================================= */
.syn-occult-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
}
@media (max-width: 640px) { .syn-occult-grid { grid-template-columns: 1fr !important; } }

.syn-occult-tile { padding: 20px 22px 18px; min-height: 200px; }
.syn-occult-tile-title { font-size: 1.15rem; }
.syn-occult-tile-excerpt { font-size: 0.92rem; -webkit-line-clamp: 5; }

/* =========================================================================
   Harmonise triptych colour — when inside a .syn-rite with data-planet,
   the gold-chrome of .syn-hour-* cards tints to the planetary accent.
   Applies to both the Daily and Hourly rites.
   ========================================================================= */

.syn-rite[data-planet] .syn-hour-triptych { max-width: 100%; }
.syn-rite[data-planet] .syn-hour-glyph     { color: var(--p-accent); text-shadow: 0 0 24px var(--p-soft); }
.syn-rite[data-planet] .syn-flip-hint      { color: var(--p-accent); border-top-color: var(--p-edge); opacity: 0.7; }
.syn-rite[data-planet] .syn-flip-hint::after { color: var(--p-accent); }
.syn-rite[data-planet] .syn-flip-back-hint { color: var(--p-accent); opacity: 0.7; }
.syn-rite[data-planet] .syn-hour-ritual b  { color: var(--p-accent); }
.syn-rite[data-planet] .syn-hour-line b    { color: var(--p-accent); }
.syn-rite[data-planet] .syn-hour-lead b    { color: var(--p-accent); }

/* Now-card emphasis uses planetary colour, not gold */
.syn-rite[data-planet] .syn-hour-now .syn-flip-face {
  border-color: var(--p-edge);
  background:
    radial-gradient(circle at 90% 10%, var(--p-soft), transparent 55%),
    linear-gradient(180deg, var(--p-bg), var(--syn-surface) 65%);
  box-shadow: 0 12px 36px -14px var(--p-soft);
}
.syn-rite[data-planet] .syn-hour-now .syn-hour-name  { color: var(--p-accent); font-size: 1.75rem; }
.syn-rite[data-planet] .syn-hour-now .syn-hour-label { color: var(--p-accent); }
.syn-rite[data-planet] .syn-hour-now .syn-hour-glyph { font-size: 3.4rem; color: var(--p-accent); }

/* The gold-underglow bar on each front-face tints to planet too */
.syn-rite[data-planet] .syn-flip-front::after {
  background: linear-gradient(90deg, transparent, var(--p-edge), transparent);
  opacity: 0.55;
}

/* The radial gold highlight tints to planet */
.syn-rite[data-planet] .syn-flip-front {
  background:
    radial-gradient(circle at 90% 10%, var(--p-soft), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.015), var(--syn-surface));
}

/* Orientation tile — locked & partial states */
.syn-orient-tile--locked {
  opacity: 0.55;
  border-top-color: rgba(255,255,255,0.08);
}
.syn-orient-tile--locked:hover { opacity: 0.85; border-top-color: var(--syn-gold-hi, #e6c87a); }
.syn-orient-tile--locked .syn-orient-count {
  color: var(--syn-gold, #c7a65a);
  letter-spacing: 0.08em;
}
.syn-orient-tile--partial .syn-orient-count {
  color: var(--syn-gold-hi, #e6c87a);
}

/* Inline variants of Loom / Synthesis — tighter spacing so they read as
   commentary on the preceding rite rather than standalone sections */
.syn-loom-inline,
.syn-synth-inline {
  margin: -20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
}

/* =========================================================================
   The Golden Thread — visible threading across the dashboard (2026-04-24)
   Each panel that participates in the day's echo gets a gold hairline;
   each rite summary carries an inline italic weave sentence.
   ========================================================================= */

/* Thread statement at the top of the Golden Thread section */
.syn-thread-statement {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
  color: #d5ccb8;
  margin: 10px 0 4px;
  max-width: 72ch;
  letter-spacing: 0.01em;
}
.syn-thread-statement b { color: var(--syn-gold-hi, #e6c87a); font-weight: 500; font-style: normal; }

/* Inline weave — the italic thread sentence appended to Daily/Hourly summaries */
.syn-thread-weave {
  display: inline;
  font-style: italic;
  color: var(--p-accent, var(--syn-gold-hi, #e6c87a));
  margin-left: 4px;
  border-left: 2px solid var(--p-edge, var(--syn-gold-low, #8e7c4f));
  padding-left: 10px;
  background: color-mix(in oklab, var(--p-accent, #c7a65a) 5%, transparent);
  border-radius: 0 2px 2px 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.syn-thread-weave b { color: var(--p-accent, var(--syn-gold-hi, #e6c87a)); font-weight: 500; font-style: normal; }

/* Threaded stream tiles — a visible gold hairline along the top edge
   signalling "this tile participates in today's thread". Subtle but
   consistent across disciplines so the eye can trace it. */
.syn-stream-flip[data-threaded="true"] .syn-flip-face {
  border-top: 2px solid var(--syn-gold-hi, #e6c87a);
}
.syn-stream-flip[data-threaded="true"] .syn-flip-face::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--syn-gold-hi, #e6c87a) 50%,
    transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* Thread line inside stream tiles — subtle gold, small */
.syn-stream-thread {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 25%, transparent);
  font-size: 0.82rem;
  font-style: italic;
  color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 90%, #b6ae9b);
  line-height: 1.55;
}
.syn-stream-thread b {
  color: var(--syn-gold-hi, #e6c87a);
  font-weight: 500;
  font-style: normal;
}

/* =========================================================================
   Grimoire tiles — Magister-only; two grimoires keyed to day + hour rulers.
   Same visual register as the Occult System tiles (they're siblings).
   ========================================================================= */

.syn-grimoire-tiles { margin: 0 0 28px; }
.syn-grimoire-head { text-align: center; margin-bottom: 18px; }
.syn-grimoire-tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9a9180;
  margin-bottom: 6px;
}
.syn-grimoire-sub {
  margin: 0;
  color: #8d8573;
  font-size: 0.85rem;
  font-style: italic;
}

.syn-grimoire-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 640px) { .syn-grimoire-grid { grid-template-columns: 1fr; } }

.syn-grimoire-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, rgba(28,25,34,0.9) 0%, rgba(14,12,20,0.95) 100%);
  border: 1px solid color-mix(in oklab, var(--syn-mars, #a6302b) 28%, #2a2530);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.syn-grimoire-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--syn-mars, #a6302b) 65%, transparent);
}
.syn-grimoire-tile--day-planet  { border-top: 2px solid rgba(212,185,74,0.55); }
.syn-grimoire-tile--hour-planet { border-top: 2px solid rgba(138,130,184,0.55); }

.syn-grimoire-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.syn-grimoire-sigil {
  font-family: "Georgia", serif;
  font-size: 22px;
  color: var(--syn-gold-hi, #e6c87a);
  line-height: 1;
}
.syn-grimoire-eyebrow {
  flex: 1;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
}

.syn-grimoire-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #e7e1d3;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.syn-grimoire-subtitle {
  margin: 0 0 10px;
  font-family: "Georgia", serif;
  font-size: 0.85rem;
  font-style: italic;
  color: #a59b85;
}
.syn-grimoire-blurb {
  flex: 1;
  font-family: "Georgia", serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #c7bfac;
  margin: 0 0 14px;
}
.syn-grimoire-meta {
  font-size: 0.72rem;
  color: #6f6a5c;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.syn-grimoire-cta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin-top: auto;
}

/* =========================================================================
   Paragraph actions — 🔖 bookmark + ✦ journal reference
   Always visible next to every paragraph so the reader never has to
   hunt for them. Desktop: floating in the left margin. Narrow viewports:
   inline at the end of the paragraph.
   ========================================================================= */

.syn-para-with-actions { position: relative; }

.syn-para-actions {
  position: absolute;
  top: 0.15em;
  left: -44px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  user-select: none;
}

.syn-para-mark,
.syn-para-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  background: rgba(10,9,16,0.55);
  color: color-mix(in oklab, var(--syn-gold, #c7a65a) 70%, #fff 30%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 28%, transparent);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s ease, background .15s ease,
              color .15s ease, border-color .15s ease, transform .12s ease;
}
.syn-para-with-actions:hover .syn-para-mark,
.syn-para-with-actions:hover .syn-para-ref,
.syn-para-mark:focus-visible,
.syn-para-ref:focus-visible { opacity: 1; }
.syn-para-mark:hover,
.syn-para-ref:hover {
  opacity: 1;
  background: color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
  border-color: var(--syn-gold-hi, #e6c87a);
  color: #fff;
  transform: scale(1.08);
}

/* Narrow viewports: no room in the margin, so tuck the buttons in the
   top-right corner of the paragraph. Still always visible. */
@media (max-width: 900px) {
  .syn-para-actions {
    position: static;
    float: right;
    flex-direction: row;
    gap: 4px;
    margin: 0 0 4px 10px;
    top: auto; left: auto;
  }
  .syn-para-mark,
  .syn-para-ref { opacity: 0.7; }
}

/* Persistent bookmark marker — the paragraph holding this book's bookmark
   gets a gold ribbon on the left and a subtle tint so it's immediately
   recognisable on revisit. */
.syn-para-bookmarked {
  position: relative;
  background: color-mix(in oklab, var(--syn-gold, #c7a65a) 8%, transparent);
  border-radius: 3px;
  padding: 6px 10px 6px 16px;
  margin: 0 -10px;
  box-shadow: inset 3px 0 0 var(--syn-gold-hi, #e6c87a);
}
.syn-para-bookmarked::before {
  content: "🔖";
  position: absolute;
  top: -6px; left: -22px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
@media (max-width: 720px) {
  .syn-para-bookmarked::before { left: -18px; font-size: 14px; top: -2px; }
}

/* =========================================================================
   Reader icon-key explainer — shown once per book (per user).
   ========================================================================= */

.syn-reader-keys-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 10, 0.74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 240;
}
.syn-reader-keys {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 250;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px 26px 20px;
  background: linear-gradient(180deg, rgba(26,24,32,0.98) 0%, rgba(12,11,18,1) 100%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, #2a2530);
  border-left: 3px solid var(--syn-gold, #c7a65a);
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.55;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(199,166,90,0.1);
}
.syn-reader-keys-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.syn-reader-keys-title {
  font-family: "Georgia", serif;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--syn-gold-hi, #e6c87a);
}
.syn-reader-keys-dismiss {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 30%, transparent);
  color: var(--syn-gold-hi, #e6c87a);
  padding: 4px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
}
.syn-reader-keys-dismiss:hover { background: rgba(199,166,90,0.12); }
.syn-reader-keys-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #c7bfac;
}
.syn-reader-keys-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.syn-reader-keys-list .syn-reader-key-icon {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 22px;
  text-align: center;
  color: var(--syn-gold-hi, #e6c87a);
  font-size: 1rem;
}
@media (max-width: 620px) {
  .syn-reader-keys-list { grid-template-columns: 1fr; }
}

/* A tiny "?" help button in the reader header re-opens the explainer */
.syn-reader-help {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 30%, transparent);
  color: var(--syn-gold, #c7a65a);
  width: 22px; height: 22px;
  padding: 0;
  font-size: 0.75rem;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 10px;
}
.syn-reader-help:hover { background: rgba(199,166,90,0.1); color: var(--syn-gold-hi, #e6c87a); }

/* =========================================================================
   Journal — My bookmarks (one per book, deliberate)
   Distinct from "Saved references" (many per book, clippings).
   ========================================================================= */
.syn-my-bookmarks {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid #221f2a;
}
.syn-my-bookmarks-head {
  font-size: 22px;
  color: var(--syn-gold-hi, #e6c87a);
  letter-spacing: .03em;
  margin: 0 0 6px;
}
.syn-my-bookmarks-sub {
  color: #9a9180;
  font-size: 14px;
  font-style: italic;
  margin: 0 0 18px;
}
.syn-bm-list { list-style: none; padding: 0; margin: 0; }
.syn-bm-row {
  margin-bottom: 10px;
}
.syn-bm-link {
  display: block;
  padding: 14px 16px 12px;
  background: #0f0e14;
  border: 1px solid #221f2a;
  border-left: 3px solid var(--syn-gold-hi, #e6c87a);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.syn-bm-link:hover { background: #14131a; }
.syn-bm-book {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--syn-gold-hi, #e6c87a);
  font-size: 14px;
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.syn-bm-sigil { font-size: 16px; }
.syn-bm-title { font-weight: 500; }
.syn-bm-where {
  color: #c7bfac;
  font-size: 13px;
  font-family: "Georgia", serif;
  font-style: italic;
  margin-bottom: 6px;
}
.syn-bm-excerpt {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  font-family: "Georgia", serif;
  font-size: 14px;
  color: #a59b85;
  line-height: 1.5;
  font-style: italic;
}
.syn-bm-date {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  color: #6f6a5c;
  text-transform: uppercase;
}

/* Reader hint strip — persistent affordance under the chapter title */
.syn-reader-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 8px 14px;
  font-size: 0.78rem;
  color: #9a9180;
  background: rgba(10, 9, 16, 0.5);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 18%, transparent);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.syn-reader-hint-sep { opacity: 0.5; }
.syn-reader-hint b { color: var(--syn-gold-hi, #e6c87a); font-weight: 500; }

@media (max-width: 560px) {
  .syn-reader-hint { font-size: 0.72rem; }
}

/* =========================================================================
   Publication detail page — Resume-bookmark tile + reader-features intro
   ========================================================================= */

/* ────────── Tarot deck card grid ────────── */
.syn-tarot-deck {
  margin: 0 0 1.4rem;
}
.syn-tarot-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.55rem;
}
.syn-tarot-grid--majors {
  grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
}
.syn-tarot-grid--minors {
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
}
.syn-tarot-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.85rem 0.6rem;
  background: linear-gradient(180deg,
    rgba(200, 168, 94, 0.07) 0%,
    rgba(200, 168, 94, 0.02) 100%);
  border: 1px solid rgba(200, 168, 94, 0.22);
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  min-height: 4.2em;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.18s;
  border-bottom: 1px solid rgba(200, 168, 94, 0.22);
}
.syn-tarot-grid a:hover {
  border-color: rgba(200, 168, 94, 0.65);
  background: linear-gradient(180deg,
    rgba(200, 168, 94, 0.16) 0%,
    rgba(200, 168, 94, 0.06) 100%);
  transform: translateY(-1px);
}
.syn-tarot-card-numeral {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--syn-gold-hi, #c8a85e);
  letter-spacing: 0.04em;
  font-variant-numeric: oldstyle-nums;
}
.syn-tarot-grid--minors .syn-tarot-card-numeral { font-size: 1.1rem; }
.syn-tarot-court .syn-tarot-card-numeral {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.syn-tarot-card-name {
  font-size: 0.86rem;
  color: var(--syn-text);
  line-height: 1.25;
}
.syn-tarot-suit {
  margin: 0 0 1.5rem;
}
.syn-tarot-suit-name {
  margin: 1.5rem 0 0.7rem;
  font-size: 1.18rem;
  color: var(--syn-gold-hi, #c8a85e);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.syn-tarot-suit-glyph {
  font-size: 1.3em;
  margin-right: 0.3rem;
}
.syn-tarot-suit-elem {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  font-weight: 400;
}

/* ────────── Footnote tooltip (page-flip + chapter view) ────────── */
.syn-fn-tooltip {
  position: absolute;
  display: none;
  background: var(--syn-bg, #0d0c14);
  color: var(--syn-text);
  border: 1px solid rgba(200, 168, 94, 0.45);
  border-left: 3px solid rgba(200, 168, 94, 0.7);
  border-radius: 4px;
  padding: 0.75rem 1.05rem;
  font-size: 0.92rem;
  line-height: 1.55;
  font-family: var(--syn-serif, serif);
  max-width: 28em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: auto;
}
.syn-fn-tooltip.syn-fn-tooltip--visible {
  display: block;
  opacity: 1;
}
.syn-fn-tooltip p { margin: 0.4em 0; }
.syn-fn-tooltip p:first-child { margin-top: 0; }
.syn-fn-tooltip p:last-child  { margin-bottom: 0; }
.syn-fn-tooltip a { color: var(--syn-gold-hi, #c8a85e); }

sup[id^="fnref"] a.footnote-ref {
  text-decoration: none;
  color: var(--syn-gold-hi, #c8a85e);
  font-weight: 600;
  padding: 0 0.1em;
  border-radius: 2px;
  transition: background 0.15s;
  border-bottom: none;
}
sup[id^="fnref"]:hover a.footnote-ref,
sup[id^="fnref"] a.footnote-ref:focus {
  background: rgba(200, 168, 94, 0.16);
  outline: none;
}

@media (max-width: 700px) {
  .syn-fn-tooltip.syn-fn-tooltip--visible {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 8px 8px 0 0;
    border-left: none;
    border-top: 3px solid rgba(200, 168, 94, 0.7);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.55);
    padding: 1.1rem 1.25rem 1.6rem;
    font-size: 0.95rem;
  }
}

.syn-book-toc-section {
  margin: 1.6rem 0 1rem;
}
.syn-book-toc-section-title {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
  margin: 2rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(200, 168, 94, 0.18);
}

.syn-herb-pantheon-hint {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
}
.syn-herb-letter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 1.5rem;
  padding: 0.6rem;
  background: rgba(200, 168, 94, 0.05);
  border: 1px solid rgba(200, 168, 94, 0.18);
  border-radius: 6px;
}
.syn-herb-letter-bar a {
  flex: 0 0 auto;
  min-width: 1.8em;
  padding: 0.25rem 0.55rem;
  text-align: center;
  color: var(--syn-gold-hi, #c8a85e);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: none;
}
.syn-herb-letter-bar a:hover {
  background: rgba(200, 168, 94, 0.14);
  border-color: rgba(200, 168, 94, 0.32);
}
.syn-herb-letter {
  margin: 1.4rem 0 0.6rem;
  padding-bottom: 0.25rem;
  font-size: 1.55rem;
  color: var(--syn-gold-hi, #c8a85e);
  border-bottom: 1px dashed rgba(200, 168, 94, 0.32);
  font-weight: 600;
  scroll-margin-top: 1.5rem;
}
.syn-herb-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 0.5rem;
}
.syn-herb-grid a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.7rem 0.9rem;
  background: rgba(200, 168, 94, 0.04);
  border: 1px solid rgba(200, 168, 94, 0.16);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  border-bottom: 1px solid rgba(200, 168, 94, 0.16);
}
.syn-herb-grid a:hover {
  background: rgba(200, 168, 94, 0.10);
  border-color: rgba(200, 168, 94, 0.42);
}
.syn-herb-name {
  font-size: 1.02rem;
  color: var(--syn-text);
  font-weight: 500;
}
.syn-herb-meta {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syn-text-mute);
}

.syn-book-search-launch {
  display: flex;
  gap: 8px;
  margin: 16px 0 18px;
}
.syn-book-search-launch input[type="search"] {
  flex: 1;
  background: rgba(200, 168, 94, 0.06);
  color: var(--syn-text);
  border: 1px solid rgba(200, 168, 94, 0.32);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-family: var(--syn-serif, serif);
}
.syn-book-search-launch input[type="search"]:focus {
  outline: none;
  border-color: rgba(200, 168, 94, 0.7);
  box-shadow: 0 0 0 3px rgba(200, 168, 94, 0.14);
}
.syn-book-search-launch button {
  background: rgba(200, 168, 94, 0.85);
  color: var(--syn-bg, #0d0c14);
  border: 0;
  border-radius: 6px;
  padding: 0 1rem;
  font-size: 1.05rem;
  cursor: pointer;
}
.syn-book-search-launch button:hover {
  background: rgba(228, 196, 110, 1);
}

.syn-book-resume {
  display: block;
  margin: 16px 0 18px;
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, rgba(26,24,32,0.9) 0%, rgba(12,11,18,0.95) 100%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 45%, #2a2530);
  border-left: 3px solid var(--syn-gold-hi, #e6c87a);
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, transform .12s ease;
}
.syn-book-resume:hover {
  background: linear-gradient(180deg, rgba(34,32,40,0.95) 0%, rgba(18,16,24,1) 100%);
  transform: translateY(-1px);
}
.syn-book-resume-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 4px;
}
.syn-book-resume-where {
  display: block;
  font-family: "Georgia", serif;
  font-size: 1.05rem;
  color: #e7e1d3;
  margin-bottom: 4px;
}
.syn-book-resume-excerpt {
  display: block;
  font-family: "Georgia", serif;
  font-size: 0.86rem;
  font-style: italic;
  color: #a59b85;
  line-height: 1.5;
  margin-bottom: 6px;
}
.syn-book-resume-cta {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
}

.syn-book-reader-intro {
  margin: 18px 0 24px;
  padding: 18px 22px 16px;
  background: rgba(10, 9, 16, 0.5);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
  border-radius: 5px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.syn-book-reader-intro-title {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--syn-gold, #c7a65a);
  margin: 0 0 14px;
}

/* ────────── Collapsed-by-default reader tip ─────────────────────── */
/* Renders the "While you read" panel as a folded <details> disclosure.
   Closed state: a compact "Tip — bookmarks, glossary, journal-clips…"
   strip. Click to expand. Hidden entirely once the user has any
   bookmark anywhere in their library (server-side: view passes
   show_reader_tip=False). */
.syn-book-reader-intro.syn-reader-tip {
  padding: 10px 16px;
  margin: 14px 0 18px;
}
.syn-book-reader-intro.syn-reader-tip > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.86rem;
  color: var(--syn-text-dim);
  user-select: none;
  outline: none;
  padding: 2px 0;
}
.syn-book-reader-intro.syn-reader-tip > summary::-webkit-details-marker {
  display: none;
}
.syn-book-reader-intro.syn-reader-tip > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--syn-gold, #c7a65a);
  width: 1em;
  text-align: center;
  transition: transform 0.15s;
}
.syn-book-reader-intro.syn-reader-tip[open] > summary::before {
  transform: rotate(90deg);
}
.syn-book-reader-intro.syn-reader-tip .syn-reader-tip-marker {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold, #c7a65a);
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 40%, transparent);
  border-radius: 999px;
  flex: 0 0 auto;
}
.syn-book-reader-intro.syn-reader-tip .syn-reader-tip-summary {
  font-style: italic;
  color: var(--syn-text-dim);
}
.syn-book-reader-intro.syn-reader-tip[open] {
  padding: 14px 20px 14px;
}
.syn-book-reader-intro.syn-reader-tip[open] .syn-book-reader-intro-list {
  margin-top: 14px;
}

/* Single-column rows. Icon in a fixed-width gutter on the left, text
   flowing beside it. `align-items: start` prevents multi-line text
   from running under the icon. */
.syn-book-reader-intro-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #c7bfac;
}
.syn-book-reader-intro-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  line-height: 1.55;
}
.syn-book-reader-intro-list .syn-reader-key-icon {
  grid-column: 1;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--syn-gold-hi, #e6c87a);
  text-align: center;
  padding-top: 1px;
}
.syn-book-reader-intro-list li > *:last-child {
  grid-column: 2;
  min-width: 0;
}
.syn-book-reader-intro-list strong {
  color: #e7e1d3;
  font-weight: 500;
  margin-right: 0.25em;
}
.syn-book-reader-intro-foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  font-size: 0.82rem;
  color: #8d8573;
  font-style: italic;
}
.syn-book-reader-intro-foot a {
  color: var(--syn-gold-hi, #e6c87a);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* Mobile: tighter gutter, smaller icon column */
@media (max-width: 520px) {
  .syn-book-reader-intro { padding: 14px 16px 12px; font-size: 0.88rem; }
  .syn-book-reader-intro-list li { grid-template-columns: 26px 1fr; gap: 10px; }
  .syn-book-reader-intro-list .syn-reader-key-icon { font-size: 1rem; }
}

/* Wider desktop: the intro panel extends slightly outside the 760px
   reading column since it's UI guidance, not prose. Collapses on narrower
   viewports. */
@media (min-width: 960px) {
  .syn-book-reader-intro { margin-left: -30px; margin-right: -30px; padding: 20px 28px 18px; }
}

/* =========================================================================
   Consultation rite — /journal/consult/ form, response, echoed, blocked.
   ========================================================================= */

.syn-consult,
.syn-consult-blocked,
.syn-consult-echoed,
.syn-consultation {
  max-width: 720px;
  margin: 2rem auto 5rem;
  padding: 0 1rem;
}

.syn-consult-head {
  margin-bottom: 2rem;
}
.syn-consult-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-gold-low, #8d7843);
  margin: 0 0 0.5rem;
}
.syn-consult-head h1 {
  font-family: var(--syn-serif);
  font-size: 2rem;
  margin: 0 0 1rem;
  color: var(--syn-text);
}
.syn-consult-lede {
  color: var(--syn-text-dim);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 60ch;
}

/* --- Form --- */
.syn-consult-form { display: flex; flex-direction: column; gap: 0.75rem; }
.syn-consult-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--syn-gold-low);
}
.syn-consult-textarea {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  background: rgba(8, 7, 14, 0.7);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 26%, transparent);
  border-radius: 6px;
  color: var(--syn-text);
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  line-height: 1.55;
  resize: vertical;
}
.syn-consult-textarea:focus {
  outline: none;
  border-color: var(--syn-gold-hi, #e6c87a);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
}
.syn-consult-hint {
  font-size: 0.85rem;
  color: var(--syn-text-dim);
  margin: 0;
}
.syn-consult-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.syn-consult-quota {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(15, 13, 22, 0.6);
  border: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 20%, transparent);
  border-radius: 6px;
  color: var(--syn-text-dim);
}
.syn-consult-quota-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--syn-gold-low);
  margin: 0 0 0.5rem;
}

/* --- Blocked / upgrade nudge --- */
.syn-consult-pitch { color: var(--syn-text-dim); }
.syn-consult-pitch-lede { font-size: 1.1rem; line-height: 1.6; margin: 0 0 1.5rem; }
.syn-consult-divider {
  border: none;
  border-top: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 16%, transparent);
  margin: 1.5rem 0;
}
.syn-consult-pitch-cta { margin: 1.5rem 0; }
.syn-consult-reset { color: var(--syn-gold-low); font-style: italic; }
.syn-consult-back { margin-top: 2rem; }

.syn-tier-rung-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.syn-tier-rung {
  padding: 1rem 1.2rem;
  background: rgba(15, 13, 22, 0.6);
  border-left: 3px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 26%, transparent);
  border-radius: 0 4px 4px 0;
}
.syn-tier-rung--magister {
  border-left-color: var(--syn-gold-hi, #e6c87a);
  background: rgba(28, 22, 12, 0.7);
}
.syn-tier-rung strong { color: var(--syn-gold-hi); }

/* --- Consultation detail page (rendered markdown) --- */
.syn-consultation-body {
  background: rgba(10, 8, 16, 0.5);
  padding: 2rem 1.5rem;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
}
.syn-consultation-body h1 {
  font-family: var(--syn-serif);
  font-size: 1.7rem;
  margin: 0 0 1rem;
  color: var(--syn-gold-hi);
}
.syn-consultation-body h2 {
  font-family: var(--syn-serif);
  font-size: 1.25rem;
  margin: 1.8rem 0 0.6rem;
  color: var(--syn-gold-hi);
  letter-spacing: 0.005em;
}
.syn-consultation-body h3 {
  font-size: 1rem;
  font-style: italic;
  margin: 1.2rem 0 0.4rem;
  color: var(--syn-text);
}
.syn-consultation-body p { margin: 0 0 0.8rem; line-height: 1.65; }
.syn-consultation-body blockquote {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(28, 22, 12, 0.5);
  border-left: 3px solid var(--syn-gold-hi, #e6c87a);
  border-radius: 0 4px 4px 0;
}
.syn-consultation-body ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.4rem;
}
.syn-consultation-body li { margin: 0.25rem 0; line-height: 1.5; }
.syn-consultation-body code {
  background: rgba(0, 0, 0, 0.4);
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--syn-gold-low);
}
.syn-consultation-body em { color: var(--syn-text); font-style: italic; }
.syn-consultation-body strong { color: var(--syn-gold-hi); }
.syn-consultation-body hr {
  border: none;
  border-top: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 12%, transparent);
  margin: 2rem 0;
}

/* --- Reflection form below the rendered consultation --- */
.syn-consult-reflect h2 {
  font-family: var(--syn-serif);
  margin: 2rem 0 0.4rem;
  color: var(--syn-gold-hi);
  font-size: 1.2rem;
}

/* --- Echoed-question screen --- */
.syn-consult-echo-body { color: var(--syn-text-dim); line-height: 1.65; }
.syn-consult-echo-lede {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--syn-text);
  margin: 0 0 1.5rem;
}
.syn-consult-echo-prior {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--syn-gold-hi, #e6c87a);
  background: rgba(15, 13, 22, 0.5);
  border-radius: 0 4px 4px 0;
}
.syn-consult-echo-prior-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-consult-echo-prior-q {
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  font-style: italic;
  margin: 0;
  color: var(--syn-text);
}
.syn-consult-echo-now { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--syn-gold-low); margin: 1.5rem 0 0.4rem; }
.syn-consult-echo-now-q { font-family: var(--syn-serif); font-size: 1.1rem; font-style: italic; margin: 0 0 1.5rem; color: var(--syn-text); }
.syn-consult-echo-tail { color: var(--syn-text-dim); margin: 1.5rem 0; }
.syn-consult-echo-actions { margin-top: 2rem; }

/* --- Journal index — past consultations list --- */
.syn-journal-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.syn-btn-rite {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  background: rgba(28, 22, 12, 0.7);
  border: 1px solid var(--syn-gold-hi, #e6c87a);
  border-radius: 4px;
  color: var(--syn-gold-hi);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  transition: background .15s;
}
.syn-btn-rite:hover { background: rgba(48, 38, 18, 0.85); }

.syn-consult-list { margin: 2rem 0; }
.syn-consult-list-head {
  font-family: var(--syn-serif);
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
  color: var(--syn-gold-hi);
}
.syn-consult-list-sub { color: var(--syn-text-dim); margin: 0 0 1rem; font-size: 0.95rem; }
.syn-consult-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.syn-consult-row a {
  display: block;
  padding: 0.85rem 1rem;
  background: rgba(15, 13, 22, 0.5);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
  border-radius: 4px;
  color: var(--syn-text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.syn-consult-row a:hover {
  border-color: color-mix(in oklab, var(--syn-gold, #c7a65a) 36%, transparent);
  background: rgba(20, 16, 28, 0.7);
}
.syn-consult-row-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 0.3rem;
  color: var(--syn-gold-low);
  font-size: 0.85rem;
}
.syn-consult-row-tag {
  padding: 0.05rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--syn-gold-hi);
}
.syn-consult-row-q {
  font-family: var(--syn-serif);
  font-style: italic;
  margin: 0.3rem 0 0;
  color: var(--syn-text);
  line-height: 1.4;
}
.syn-consult-row-decided { font-size: 0.8rem; color: var(--syn-gold-hi); margin: 0.3rem 0 0; }

/* =========================================================================
   Consult hero — the invitation tile on the Journal page and Oracle
   dashboard. Designed to stop the eye and pull the user in: gold-edged,
   gradient-warmed, sigil-led, with a clear "cast a consultation" CTA.
   ========================================================================= */

.syn-consult-hero {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0 2.5rem;
  padding: 1.6rem 1.8rem;
  background:
    radial-gradient(ellipse at 20% 0%,
      color-mix(in oklab, var(--syn-gold, #c7a65a) 16%, transparent) 0%,
      transparent 55%),
    linear-gradient(135deg,
      rgba(28, 22, 12, 0.85) 0%,
      rgba(14, 11, 22, 0.92) 60%,
      rgba(10, 8, 18, 0.95) 100%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 38%, transparent);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.syn-consult-hero::before {
  /* faint chasing-gold edge that appears on hover — the "use me" wink */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    transparent 0%,
    color-mix(in oklab, var(--syn-gold, #c7a65a) 0%, transparent) 35%,
    color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 70%, transparent) 50%,
    color-mix(in oklab, var(--syn-gold, #c7a65a) 0%, transparent) 65%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.syn-consult-hero:hover {
  transform: translateY(-1px);
  border-color: var(--syn-gold-hi, #e6c87a);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 36%, transparent);
}
.syn-consult-hero:hover::before { opacity: 1; }

.syn-consult-hero-sigil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 36%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%,
      color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 24%, transparent) 0%,
      transparent 65%),
    rgba(8, 6, 12, 0.85);
  box-shadow:
    inset 0 0 24px color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent),
    0 0 22px color-mix(in oklab, var(--syn-gold, #c7a65a) 10%, transparent);
}
.syn-consult-hero-glyph {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--syn-gold-hi, #e6c87a);
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 35%, transparent));
}

.syn-consult-hero-body { min-width: 0; }
.syn-consult-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-low, #8d7843);
  margin: 0 0 0.4rem;
}
.syn-consult-hero-title {
  font-family: var(--syn-serif);
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 0 0.55rem;
  letter-spacing: 0.005em;
}
.syn-consult-hero-lede {
  color: var(--syn-text-dim, #b3a89a);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  max-width: 60ch;
}
.syn-consult-hero-lede em {
  color: var(--syn-gold-hi);
  font-style: italic;
}
.syn-consult-hero-streams {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.syn-consult-hero-streams li {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.65rem;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 24%, transparent);
  border-radius: 12px;
  color: var(--syn-gold-hi);
  background: rgba(0, 0, 0, 0.25);
}
.syn-consult-hero-cta {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.65rem 1.1rem;
  background: linear-gradient(180deg,
    var(--syn-gold-hi, #e6c87a) 0%,
    var(--syn-gold, #c7a65a) 100%);
  color: #0e0a14;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--syn-gold, #c7a65a) 28%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.syn-consult-hero:hover .syn-consult-hero-cta {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 32%, transparent);
}

@media (max-width: 720px) {
  .syn-consult-hero {
    grid-template-columns: 1fr;
    padding: 1.4rem 1.3rem;
    gap: 1rem;
    text-align: left;
  }
  .syn-consult-hero-sigil {
    width: 64px; height: 64px;
  }
  .syn-consult-hero-glyph { font-size: 1.7rem; }
  .syn-consult-hero-title { font-size: 1.25rem; }
}

/* Dashboard variant — slightly more compact since it sits above the
   Daily Rite which has its own visual gravity. */
.syn-consult-hero--dashboard {
  margin-top: 0;
  padding: 1.3rem 1.5rem;
}
.syn-consult-hero--dashboard .syn-consult-hero-title { font-size: 1.35rem; }

/* =========================================================================
   Consultation rite — form page (replaces the plain styling above for the
   new ceremonial form template; old .syn-consult- classes still used by
   blocked/echoed pages).
   ========================================================================= */

.syn-consult-rite {
  max-width: 760px;
  margin: 2.5rem auto 6rem;
  padding: 0 1rem;
}

.syn-consult-rite-head {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
}

.syn-consult-rite-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 38%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%,
      color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 24%, transparent) 0%,
      transparent 65%),
    rgba(8, 6, 12, 0.85);
  font-size: 1.6rem;
  color: var(--syn-gold-hi, #e6c87a);
  box-shadow:
    inset 0 0 18px color-mix(in oklab, var(--syn-gold, #c7a65a) 16%, transparent),
    0 0 28px color-mix(in oklab, var(--syn-gold, #c7a65a) 12%, transparent);
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 25%, transparent));
}
.syn-consult-rite-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--syn-gold-low, #8d7843);
  margin: 0 0 0.6rem;
}
.syn-consult-rite-title {
  font-family: var(--syn-serif);
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 auto 1rem;
  max-width: 22ch;
  letter-spacing: 0.005em;
}
.syn-consult-rite-lede {
  color: var(--syn-text-dim, #b3a89a);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 56ch;
}

/* Ceremonial textarea container — ringed in gold, glowing inner shadow */
.syn-consult-form-frame {
  position: relative;
  padding: 1.4rem 1.4rem 1rem;
  background:
    radial-gradient(ellipse at top,
      color-mix(in oklab, var(--syn-gold, #c7a65a) 6%, transparent) 0%,
      transparent 70%),
    rgba(8, 6, 14, 0.75);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 32%, transparent);
  border-radius: 10px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px color-mix(in oklab, var(--syn-gold, #c7a65a) 8%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.syn-consult-form-frame:focus-within {
  border-color: var(--syn-gold-hi, #e6c87a);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 22%, transparent),
    0 0 0 3px color-mix(in oklab, var(--syn-gold, #c7a65a) 10%, transparent);
}

.syn-consult-textarea {
  display: block;
  width: 100%;
  min-height: 140px;
  padding: 0.4rem 0.4rem 0.6rem;
  background: transparent !important;
  border: none !important;
  color: var(--syn-text);
  font-family: var(--syn-serif);
  font-size: 1.4rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
  resize: vertical;
  outline: none !important;
  box-shadow: none !important;
}
.syn-consult-textarea::placeholder {
  color: color-mix(in oklab, var(--syn-text-dim, #b3a89a) 50%, transparent);
  font-style: italic;
}

.syn-consult-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 12%, transparent);
}
.syn-consult-form-hint {
  font-size: 0.78rem;
  color: var(--syn-text-dim);
  text-align: right;
  font-style: italic;
}
.syn-consult-counter {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--syn-gold-low, #8d7843);
  font-variant-numeric: tabular-nums;
}
.syn-consult-counter--near { color: var(--syn-gold-hi, #e6c87a); }
.syn-consult-counter--full { color: #d8635c; }

/* Cast button — the ceremonial CTA */
.syn-consult-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.syn-btn-cast {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: linear-gradient(180deg,
    var(--syn-gold-hi, #e6c87a) 0%,
    var(--syn-gold, #c7a65a) 100%);
  color: #0e0a14;
  border: none;
  border-radius: 6px;
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    0 10px 28px color-mix(in oklab, var(--syn-gold, #c7a65a) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.syn-btn-cast:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 36%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.syn-btn-cast:active { transform: translateY(0); }
.syn-btn-cast-glyph { font-size: 1.1rem; }

/* Budget panel — at the bottom of the form, not pulling focus */
.syn-consult-budget {
  margin-top: 2.5rem;
  padding: 1rem 1.3rem;
  text-align: center;
  background: rgba(15, 13, 22, 0.5);
  border: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 16%, transparent);
  border-radius: 6px;
  color: var(--syn-text-dim);
}
.syn-consult-budget-label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-consult-budget-line { margin: 0; font-size: 0.95rem; }
.syn-consult-budget-tier { color: var(--syn-gold-hi); font-weight: 600; letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .syn-consult-rite-title { font-size: 1.5rem; }
  .syn-consult-textarea  { font-size: 1.2rem; }
}

/* =========================================================================
   Reading detail — the rendered consultation as a sectioned artifact.
   This replaces the "raw markdown dump" look with discrete components.
   ========================================================================= */

.syn-reading {
  max-width: 820px;
  margin: 2rem auto 6rem;
  padding: 0 1rem;
}

.syn-reading-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--syn-text-dim);
  margin-bottom: 1.5rem;
}
.syn-reading-crumbs a { color: var(--syn-gold-low); text-decoration: none; }
.syn-reading-crumbs a:hover { color: var(--syn-gold-hi); }

/* --- Header: sigil, eyebrow, date, question call-out --- */
.syn-reading-head {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
}
.syn-reading-sigil {
  display: inline-block;
  width: 56px; height: 56px;
  line-height: 54px;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 38%, transparent);
  border-radius: 50%;
  color: var(--syn-gold-hi);
  background:
    radial-gradient(circle at 40% 30%,
      color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 22%, transparent) 0%,
      transparent 65%),
    rgba(8, 6, 12, 0.85);
  box-shadow: 0 0 24px color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
}
.syn-reading-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-reading-when {
  font-family: var(--syn-serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--syn-text);
  margin: 0 0 1.5rem;
  letter-spacing: 0.005em;
}

.syn-reading-question {
  margin: 1.2rem auto 0;
  padding: 1.2rem 1.4rem;
  max-width: 60ch;
  background:
    radial-gradient(ellipse at 50% 0%,
      color-mix(in oklab, var(--syn-gold, #c7a65a) 8%, transparent) 0%,
      transparent 60%),
    rgba(15, 12, 22, 0.6);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 26%, transparent);
  border-left: 3px solid var(--syn-gold-hi, #e6c87a);
  border-radius: 0 6px 6px 0;
  text-align: left;
}
.syn-reading-question-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-reading-question-text {
  font-family: var(--syn-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--syn-text);
  margin: 0;
  line-height: 1.45;
}

/* --- Section eyebrow used across panels --- */
.syn-reading-section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 2.5rem 0 0.8rem;
}

/* --- The Golden Thread — centred, glowing, the strongest visual --- */
.syn-reading-thread {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 1.8rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%,
      color-mix(in oklab, var(--syn-gold, #c7a65a) 16%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, rgba(28, 22, 12, 0.55) 0%, rgba(10, 8, 18, 0.7) 100%);
  border-top: 1px solid var(--syn-gold-hi, #e6c87a);
  border-bottom: 1px solid var(--syn-gold-hi, #e6c87a);
}
.syn-reading-thread-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--syn-gold-hi);
  margin: 0 0 0.8rem;
}
.syn-reading-thread-statement {
  font-family: var(--syn-serif);
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--syn-text);
  margin: 0 auto 1.2rem;
  max-width: 50ch;
  font-style: italic;
}
.syn-reading-thread-marks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--syn-text-dim);
}
.syn-reading-thread-marks li strong { color: var(--syn-gold-hi); font-weight: 500; }

/* --- Day / Hour panels paired side by side --- */
.syn-reading-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
@media (max-width: 720px) {
  .syn-reading-pair { grid-template-columns: 1fr; }
}
.syn-reading-panel {
  padding: 1.4rem 1.4rem 1.2rem;
  background: rgba(15, 13, 22, 0.55);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 18%, transparent);
  border-radius: 8px;
}
.syn-reading-panel--day { border-top: 2px solid var(--syn-gold, #c7a65a); }
.syn-reading-panel--hour { border-top: 2px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 60%, #6c8ec3); }
.syn-reading-panel-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-reading-panel-title {
  font-family: var(--syn-serif);
  font-size: 1.6rem;
  margin: 0 0 0.3rem;
  color: var(--syn-gold-hi);
  font-weight: 400;
}
.syn-reading-panel-meta {
  font-size: 0.85rem;
  color: var(--syn-text-dim);
  margin: 0 0 1rem;
  font-style: italic;
}

.syn-reading-dl,
.syn-reading-rite-dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.2rem;
  row-gap: 0.4rem;
  font-size: 0.92rem;
}
.syn-reading-dl dt,
.syn-reading-rite-dl dt {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  align-self: baseline;
  padding-top: 0.15rem;
}
.syn-reading-dl dd,
.syn-reading-rite-dl dd {
  margin: 0;
  color: var(--syn-text);
  line-height: 1.55;
}

/* --- The Sky --- */
.syn-reading-sky-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.syn-reading-sky-cell {
  padding: 1.2rem;
  background: rgba(10, 8, 18, 0.5);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
  border-radius: 6px;
}
.syn-reading-sky-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-reading-sky-name {
  font-family: var(--syn-serif);
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
  color: var(--syn-gold-hi);
}
.syn-reading-sky-meta { font-size: 0.85rem; color: var(--syn-text-dim); margin: 0; font-style: italic; }

/* --- Cards & Lots — visual cards in a grid --- */
.syn-reading-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.syn-reading-card {
  padding: 1.1rem 1.2rem;
  background:
    radial-gradient(ellipse at top,
      color-mix(in oklab, var(--syn-gold, #c7a65a) 6%, transparent) 0%,
      transparent 70%),
    rgba(8, 6, 14, 0.7);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 18%, transparent);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.syn-reading-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--syn-gold, #c7a65a) 60%, transparent) 50%,
    transparent 100%);
}
.syn-reading-card-kind {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin: 0 0 0.4rem;
}
.syn-reading-card-name {
  font-family: var(--syn-serif);
  font-size: 1.2rem;
  color: var(--syn-gold-hi);
  margin: 0 0 0.6rem;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.syn-reading-card-num {
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.syn-reading-card-num-sep { color: var(--syn-gold-low); font-size: 1.3rem; }
.syn-reading-card-glyph { font-size: 1.5rem; }
.syn-reading-card-line {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--syn-text-dim);
  margin: 0 0 0.5rem;
}
.syn-reading-card-line strong { color: var(--syn-gold-hi); font-weight: 500; }
.syn-reading-card-line--quote {
  font-family: var(--syn-serif);
  font-style: italic;
  color: var(--syn-text);
  border-left: 2px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 28%, transparent);
  padding-left: 0.7rem;
  margin-top: 0.6rem;
}

/* --- Synthesis: callout block --- */
.syn-reading-synthesis {
  margin: 2rem 0;
  padding: 1.6rem 1.5rem;
  background:
    linear-gradient(135deg, rgba(28, 22, 12, 0.4) 0%, rgba(10, 8, 18, 0.6) 100%);
  border-left: 3px solid var(--syn-gold-hi);
  border-radius: 0 6px 6px 0;
}
.syn-reading-synthesis-framing {
  font-size: 0.95rem;
  color: var(--syn-text-dim);
  margin: 0 0 0.8rem;
  line-height: 1.55;
}
.syn-reading-synthesis-imperative {
  font-family: var(--syn-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--syn-text);
  margin: 0 0 0.6rem;
  line-height: 1.5;
}
.syn-reading-synthesis-imperative strong,
.syn-reading-synthesis-framing strong { color: var(--syn-gold-hi); }
.syn-reading-synthesis-minute {
  font-size: 0.9rem;
  color: var(--syn-text-dim);
  margin: 0;
  font-style: italic;
}

/* --- Hourly Rite --- */
.syn-reading-rite {
  margin: 2rem 0;
  padding: 1.4rem 1.5rem;
  background: rgba(15, 13, 22, 0.55);
  border: 1px dashed color-mix(in oklab, var(--syn-gold, #c7a65a) 20%, transparent);
  border-radius: 8px;
}
.syn-reading-rite-word {
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--syn-gold-hi);
}

/* --- What the streams answer --- */
.syn-reading-answer {
  margin: 2rem 0;
}
.syn-reading-answer-lede {
  font-size: 0.9rem;
  color: var(--syn-text-dim);
  font-style: italic;
  margin: 0 0 1rem;
}
.syn-reading-answer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.syn-reading-answer-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(10, 8, 18, 0.4);
  border-left: 2px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 36%, transparent);
  border-radius: 0 4px 4px 0;
}
@media (max-width: 540px) {
  .syn-reading-answer-list li { grid-template-columns: 1fr; gap: 0.3rem; }
}
.syn-reading-answer-name {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syn-gold-hi);
  align-self: baseline;
  padding-top: 0.15rem;
}
.syn-reading-answer-note {
  font-family: var(--syn-serif);
  color: var(--syn-text);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* --- Reflection form --- */
.syn-reading-divider {
  border: none;
  border-top: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
  margin: 3rem 0 2rem;
}
.syn-reading-reflect h2.syn-reading-reflect-title {
  font-family: var(--syn-serif);
  font-size: 1.25rem;
  color: var(--syn-gold-hi);
  margin: 1.5rem 0 0.4rem;
  font-weight: 400;
}
.syn-reading-reflect-hint {
  font-size: 0.9rem;
  color: var(--syn-text-dim);
  margin: 0 0 0.8rem;
  font-style: italic;
}
.syn-reading-reflect-input {
  font-size: 1.05rem !important;
  min-height: auto !important;
  padding: 0.9rem 1rem !important;
  background: rgba(8, 6, 14, 0.7) !important;
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 18%, transparent) !important;
  border-radius: 6px !important;
  width: 100%;
}
.syn-reading-reflect-input:focus {
  border-color: var(--syn-gold-hi, #e6c87a) !important;
  outline: none !important;
}
.syn-reading-reflect-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* --- Narrator address — opens the reading by speaking to the question --- */
.syn-reading-address {
  margin: 2rem 0 2.4rem;
  padding: 1.6rem 1.7rem;
  background:
    radial-gradient(ellipse at 0% 0%,
      color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 9%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg, rgba(28, 22, 12, 0.4) 0%, rgba(10, 8, 18, 0.55) 100%);
  border-left: 3px solid var(--syn-gold-hi, #e6c87a);
  border-radius: 0 8px 8px 0;
}
.syn-reading-address-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 0 0.7rem;
  opacity: 0.9;
}
.syn-reading-address-text {
  font-family: var(--syn-serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--syn-text);
  margin: 0;
}
.syn-reading-address-text strong { color: var(--syn-gold-hi); font-weight: 500; }

/* --- Per-section resonance — the question threaded into each draw --- */
.syn-reading-resonance {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.9rem 0 0;
  padding: 0.65rem 0.8rem;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 8%, transparent) 0%,
      transparent 100%);
  border-left: 2px solid color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 50%, transparent);
  border-radius: 0 4px 4px 0;
}
.syn-reading-resonance-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  opacity: 0.85;
}
.syn-reading-resonance-note {
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--syn-text);
}
.syn-reading-resonance--inline {
  margin-top: 0.7rem;
}

/* --- Imperative — the closing call to action --- */
.syn-reading-imperative {
  margin: 2rem 0;
  padding: 1.5rem 1.6rem;
  background: rgba(10, 8, 18, 0.55);
  border-top: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 22%, transparent);
}
.syn-reading-imperative-text {
  font-family: var(--syn-serif);
  font-size: 1.18rem;
  font-style: italic;
  color: var(--syn-text);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.syn-reading-imperative-text strong { color: var(--syn-gold-hi); font-weight: 500; }
.syn-reading-imperative-minute {
  font-size: 0.9rem;
  color: var(--syn-text-dim);
  font-style: italic;
  margin: 0;
}

/* --- Foot actions --- */
.syn-reading-foot {
  display: flex;
  gap: 0.7rem;
  margin: 2.4rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
  flex-wrap: wrap;
}

/* ===== Past-consultations archive ===== */

/* Tile that lives on the Journal — replaces the inline 30-row dump. */
.syn-consult-archive-tile {
  display: block;
  margin: 1.5rem 0 2rem;
  padding: 1.4rem 1.5rem;
  background:
    radial-gradient(ellipse at 100% 0%,
      color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 9%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg, rgba(20, 16, 10, 0.55) 0%, rgba(10, 8, 18, 0.6) 100%);
  border: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 26%, transparent);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.syn-consult-archive-tile:hover {
  border-color: var(--syn-gold-hi, #e6c87a);
  transform: translateY(-1px);
}
.syn-consult-archive-tile-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}
.syn-consult-archive-tile-sigil {
  font-size: 1.6rem;
  color: var(--syn-gold-hi, #e6c87a);
  line-height: 1;
}
.syn-consult-archive-tile-titles {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.syn-consult-archive-tile-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  opacity: 0.9;
}
.syn-consult-archive-tile-count {
  font-family: var(--syn-serif);
  font-size: 1.15rem;
  color: var(--syn-text);
}
.syn-consult-archive-tile-recent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  background: rgba(8, 6, 14, 0.55);
  border-left: 2px solid color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 50%, transparent);
  border-radius: 0 4px 4px 0;
}
.syn-consult-archive-tile-recent-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  opacity: 0.85;
}
.syn-consult-archive-tile-recent-q {
  font-family: var(--syn-serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--syn-text);
  line-height: 1.45;
}
.syn-consult-archive-tile-recent-when {
  font-size: 0.78rem;
  color: var(--syn-text-dim);
}
.syn-consult-archive-tile-cta {
  font-size: 0.92rem;
  color: var(--syn-gold-hi, #e6c87a);
  letter-spacing: 0.04em;
}

/* The dedicated archive page. */
.syn-consult-archive {
  max-width: 820px;
  margin: 0 auto;
  padding: 1rem 0 4rem;
}
.syn-consult-archive-head {
  text-align: center;
  margin: 1.2rem 0 2.5rem;
}
.syn-consult-archive-sigil {
  display: inline-block;
  font-size: 2rem;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 0.3rem;
  line-height: 1;
}
.syn-consult-archive-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 0 0.5rem;
  opacity: 0.9;
}
.syn-consult-archive-title {
  font-family: var(--syn-serif);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--syn-text);
  margin: 0 0 0.6rem;
}
.syn-consult-archive-lede {
  font-size: 0.98rem;
  color: var(--syn-text-dim);
  margin: 0 auto 1.4rem;
  max-width: 560px;
  line-height: 1.55;
}
.syn-consult-archive-actions {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.syn-consult-archive-month {
  margin: 2rem 0;
}
.syn-consult-archive-month-head {
  font-family: var(--syn-serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 18%, transparent);
  letter-spacing: 0.04em;
}

.syn-consult-archive-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--syn-gold, #c7a65a) 14%, transparent);
}
.syn-consult-archive-pager-status {
  font-size: 0.85rem;
  color: var(--syn-text-dim);
  letter-spacing: 0.04em;
}
.syn-consult-archive-pager-spacer { width: 1px; }


/* ============================================================
 * THE TEACHINGS — daily + hourly grids of flat discipline cards
 * ============================================================
 * Two bands: gold-accented daily tiles, indigo-accented hourly tiles.
 * Each card shows the reading summary on its face — no flip required.
 * The CTA at the bottom of the card opens the discipline's full chapter.
 */
.syn-teachings {
  margin: 3rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}
.syn-teachings-head {
  margin-bottom: 2rem;
  text-align: center;
}
.syn-teachings-tag {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 70%, #6a6470);
  margin-bottom: 0.4rem;
}
.syn-teachings-title {
  font-family: var(--syn-serif, Georgia, "Times New Roman", serif);
  font-size: 1.65rem;
  font-weight: 400;
  margin: 0 0 0.5rem 0;
  color: var(--syn-text-hi, #ece6d8);
}
.syn-teachings-sub {
  font-size: 0.92rem;
  color: var(--syn-text-mid, #a8a298);
  max-width: 60ch;
  margin: 0 auto;
}

/* The two bands — daily and hourly. Each band is a header + grid. */
.syn-teachings-band {
  margin-top: 2.4rem;
}
.syn-teachings-band-title {
  font-family: var(--syn-serif, Georgia, "Times New Roman", serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 1.1rem 0;
  padding-bottom: 0.5rem;
  color: var(--syn-text-hi, #ece6d8);
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 22%, #2a2530);
}
.syn-teachings-band--hour .syn-teachings-band-title {
  border-bottom-color: rgba(138, 130, 184, 0.32);
}

/* The grid */
.syn-teachings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* The card — flat, summary on the face */
.syn-teaching-card {
  background: color-mix(in oklab, #15131a 92%, #2a2530);
  border: 1px solid color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 18%, #2a2530);
  border-top: 2px solid rgba(212, 185, 74, 0.45);  /* daily — gold */
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 200ms ease, transform 200ms ease;
}
.syn-teaching-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 50%, #2a2530);
  border-top-color: rgba(212, 185, 74, 0.85);
}
.syn-teaching-card--hour {
  border-top: 2px solid rgba(138, 130, 184, 0.55);  /* hourly — indigo */
}
.syn-teaching-card--hour:hover {
  border-color: rgba(138, 130, 184, 0.45);
  border-top-color: rgba(138, 130, 184, 0.95);
}

/* Card header — sigil + discipline name */
.syn-teaching-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 12%, #2a2530);
  margin-bottom: 0.3rem;
}
.syn-teaching-card--hour .syn-teaching-head {
  border-bottom-color: rgba(138, 130, 184, 0.16);
}
.syn-teaching-sigil {
  font-size: 1.5rem;
  line-height: 1;
  color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 80%, #ece6d8);
  flex-shrink: 0;
}
.syn-teaching-card--hour .syn-teaching-sigil {
  color: color-mix(in oklab, #8a82b8 75%, #ece6d8);
}
.syn-teaching-headtext {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.syn-teaching-name {
  font-family: var(--syn-serif, Georgia, "Times New Roman", serif);
  font-size: 1rem;
  color: var(--syn-text-hi, #ece6d8);
  line-height: 1.25;
}
.syn-teaching-discipline-tag {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--syn-text-low, #807a72);
}

/* Card body — eyebrow + title + excerpt */
.syn-teaching-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 65%, #807a72);
  margin-top: 0.2rem;
}
.syn-teaching-eyebrow--hour {
  color: color-mix(in oklab, #8a82b8 70%, #ece6d8);
}
.syn-teaching-card-title {
  font-family: var(--syn-serif, Georgia, "Times New Roman", serif);
  font-size: 1.08rem;
  font-weight: 400;
  margin: 0;
  color: var(--syn-text-hi, #ece6d8);
  line-height: 1.3;
}
.syn-teaching-excerpt {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--syn-text-mid, #a8a298);
  margin: 0;
}

/* Card footer — the open-chapter CTA */
.syn-teaching-cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 80%, #ece6d8);
  text-decoration: none;
  border-top: 1px dashed color-mix(in oklab, var(--syn-gold-hi, #e6c87a) 14%, #2a2530);
  transition: color 200ms ease;
}
.syn-teaching-cta:hover {
  color: var(--syn-gold-hi, #e6c87a);
}
.syn-teaching-cta--hour {
  color: color-mix(in oklab, #8a82b8 80%, #ece6d8);
  border-top-color: rgba(138, 130, 184, 0.18);
}
.syn-teaching-cta--hour:hover {
  color: #b3acdb;
}

@media (max-width: 600px) {
  .syn-teachings-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PUBLICATION-CLASS CHASSIS  ▸  three editorial typographies
   ────────────────────────────────────────────────────────────────────────
   Body classes set by knowledge.views._publication_class():
     .pub-class--restored-grimoire   — antique grimoire feel (the original 22)
     .pub-class--syncreticon-original — flagship Syncreticon literary chassis
     .pub-class--facsimile-verbatim   — clean reference for OCR'd extracts
   ════════════════════════════════════════════════════════════════════════ */

/* ── Class 1 ▸ Restored grimoire ──────────────────────────────────────── */
.pub-class--restored-grimoire .syn-book-reader-body {
  /* The base serif (EB Garamond) is already wired site-wide. The
     parchment wash hint comes through inside figure SVGs and the chapter
     wrap below. */
}
.pub-class--restored-grimoire .syn-book-reader-body::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 auto 1.6rem;
  width: 8rem;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, #f7f2e5 70%, transparent),
    transparent);
  border-radius: 2px;
}
.pub-class--restored-grimoire .syn-book-reader-head h1,
.pub-class--restored-grimoire .syn-tome-chapter-head h2 {
  letter-spacing: 0.04em;
  font-variant: small-caps;
  font-weight: 500;
}
.pub-class--restored-grimoire .syn-drop-cap::first-letter {
  /* A more generous drop ornament — the antique grimoire feel. */
  font-size: 4.4em;
  line-height: 0.85;
  padding: 0.05em 0.18em 0.1em 0;
  color: color-mix(in oklab, var(--syn-gold-low, #8a6f2e) 80%, var(--syn-text, #ece7d8));
}

/* ── Class 2 ▸ Syncreticon original (flagship literary) ──────────────── */
.pub-class--syncreticon-original .syn-book-reader-body,
.pub-class--syncreticon-original .syn-tome-chapter .syn-book-reader-body {
  font-family: "EB Garamond", "Sorts Mill Goudy", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "onum", "calt";
  max-width: 38em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5em;
}
/* First narrative paragraph: drop cap, no indent. The renderer marks it
   with the .syn-drop-cap class — we override the size/lift here.       */
.pub-class--syncreticon-original .syn-book-reader-body p.syn-drop-cap,
.pub-class--syncreticon-original .syn-book-reader-body > p:first-of-type {
  text-indent: 0;
}
.pub-class--syncreticon-original .syn-book-reader-body p.syn-drop-cap::first-letter,
.pub-class--syncreticon-original .syn-book-reader-body > p:first-of-type::first-letter {
  font-family: "Sorts Mill Goudy", "EB Garamond", Georgia, serif;
  font-size: 3em;
  line-height: 0.9;
  float: left;
  padding: 0.05em 0.12em 0 0;
  margin: 0.05em 0.12em -0.1em 0;
  color: color-mix(in oklab, var(--syn-gold-hi, #e2c274) 70%, var(--syn-text, #ece7d8));
  font-style: normal;
  /* Optical-alignment nudge — keeps the cap flush with the left edge. */
  text-indent: -0.03em;
}
/* Section-break ornament — the trade-dress fleuron. Renders as `<hr>`
   in markdown; we replace its bar with a centred floral heart.        */
.pub-class--syncreticon-original .syn-book-reader-body hr {
  border: none;
  height: auto;
  margin: 2.4em auto;
  text-align: center;
  background: none;
  overflow: visible;
}
.pub-class--syncreticon-original .syn-book-reader-body hr::before {
  content: "\2766"; /* U+2766 FLORAL HEART */
  display: inline-block;
  font-family: "EB Garamond", "Junicode", "Sorts Mill Goudy", serif;
  font-size: 1.3rem;
  color: color-mix(in oklab, var(--syn-gold-low, #8a6f2e) 80%, var(--syn-text-dim, #928c7b));
  letter-spacing: 0.6em;
  padding-left: 0.6em; /* compensate for trailing letter-spacing */
}
/* Echo passages — warm, inset, italic blockquote. */
.pub-class--syncreticon-original .syn-book-reader-body blockquote {
  margin: 1.6em 1.2em;
  padding: 0.8em 1.4em;
  border-left: 3px solid color-mix(in oklab, var(--syn-gold-low, #8a6f2e) 60%, transparent);
  background: color-mix(in oklab, var(--syn-gold-hi, #e2c274) 4%, transparent);
  font-style: italic;
  color: color-mix(in oklab, var(--syn-text, #ece7d8) 92%, var(--syn-gold-hi, #e2c274));
  border-radius: 0 4px 4px 0;
}
.pub-class--syncreticon-original .syn-book-reader-head h1 {
  font-family: "Sorts Mill Goudy", "EB Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Class 3 ▸ Facsimile-verbatim (OCR'd reference) ───────────────────── */
.pub-class--facsimile-verbatim .syn-book-reader-body,
.pub-class--facsimile-verbatim .syn-tome-chapter .syn-book-reader-body {
  font-family: var(--syn-serif);
  font-size: 0.96rem;
  line-height: 1.55;
}
/* No drop caps in reference material — would look pretentious on a
   Mackey lookup. */
.pub-class--facsimile-verbatim .syn-book-reader-body p.syn-drop-cap::first-letter,
.pub-class--facsimile-verbatim .syn-book-reader-body > p:first-of-type::first-letter {
  font-size: inherit !important;
  line-height: inherit !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
}
/* Page-anchor superscripts (markers like p<sup>34</sup>) — currently
   intrude. Mute them. */
.pub-class--facsimile-verbatim .syn-book-reader-body sup,
.pub-class--facsimile-verbatim .syn-book-reader-body sup a {
  font-size: 0.7em;
  opacity: 0.5;
  color: var(--syn-text-mute, #5e5a51);
  text-decoration: none;
}
.pub-class--facsimile-verbatim .syn-book-reader-body sup:hover,
.pub-class--facsimile-verbatim .syn-book-reader-body sup a:hover {
  opacity: 0.95;
}

/* ════════════════════════════════════════════════════════════════════════
   FOREIGN-LANGUAGE TYPOGRAPHIC SPINE  ▸  :lang() based
   ──────────────────────────────────────────────────────────────────────
   Authored markup (e.g. by publications/_lib/restore.py) carries
   lang="la" / "grc" / "he" / "ar" / "sa" etc. on inline <span> and
   block <p>/<blockquote>. The Markdown pipeline preserves these
   attributes; this spine renders them properly.
   ════════════════════════════════════════════════════════════════════════ */

:lang(la), :lang(grc), :lang(he), :lang(arc), :lang(sa), :lang(pi),
:lang(non), :lang(is), :lang(ar), :lang(zh), :lang(zh-Latn) {
  font-feature-settings: "kern", "liga";
}
:lang(la) {
  font-style: italic;
  hyphens: auto;
}
:lang(grc) {
  font-family: "GFS Didot", "EB Garamond", "Old Standard TT", "Times New Roman", serif;
  font-style: normal;
}
:lang(he), :lang(arc) {
  font-family: "SBL Hebrew", "Ezra SIL", "David", serif;
  font-style: normal;
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.05em;
  line-height: 1.5;
}
:lang(ar) {
  font-family: "Amiri", "Scheherazade New", "Traditional Arabic", serif;
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.05em;
  line-height: 1.6;
}
:lang(sa), :lang(pi), :lang(hi), :lang(bo), :lang(zh-Latn) {
  font-feature-settings: "kern", "liga", "calt";
  hyphens: none;
}
:lang(sa)[script="deva"], :lang(hi) {
  font-family: "Sanskrit 2003", "Lohit Devanagari", "Noto Sans Devanagari", serif;
}
:lang(non), :lang(is) {
  hyphens: none;
}

/* Helper classes the build pipeline emits (publications/_lib/restore.py) */
.syn-latin {
  font-style: italic;
  color: var(--syn-text-dim, #6c5f4a);
}
.syn-prayer {
  border-left: 2px solid var(--syn-gold-low, #b89968);
  padding-left: 1.2em;
  margin-left: 0;
  font-style: italic;
}
.syn-conjuration {
  border-left: 3px double var(--syn-gold-low, #b89968);
  padding: 0.6em 1em;
  background: rgba(184, 153, 104, 0.05);
  font-style: italic;
}

/* ============================================================
   .syn-captioned — museum-card treatment for set-aside content.
   Used for term-definition lists (Pearl.-/Sapphire.-), numbered
   day/hour lists, spells, rituals, prayers, conjurations, and any
   quoted set-piece that should read as a "displayed exhibit" rather
   than running prose. Pairs with the parchment-card figure treatment.
   ============================================================ */
.syn-captioned {
  border-left: 3px solid var(--syn-gold-low, #b89968);
  background: rgba(184, 153, 104, 0.045);
  padding: 1rem 1.4rem 1rem 1.25rem;
  margin: 1.6rem 0;
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.syn-captioned > :first-child { margin-top: 0; }
.syn-captioned > :last-child  { margin-bottom: 0; }

/* Term-definition list flavour — for stones / herbs / spirits catalogues.
   Each Term sits as a gold-tinted lead-in, body trails as a definition. */
.syn-term-list {
  display: grid;
  grid-template-columns: minmax(7em, max-content) 1fr;
  column-gap: 1.1rem;
  row-gap: 0.7rem;
}
.syn-term-list dt {
  font-family: var(--syn-serif);
  font-weight: 600;
  color: var(--syn-gold-hi);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  padding-top: 0.05em;
  text-align: right;
  border-right: 1px solid var(--syn-border);
  padding-right: 0.9rem;
}
.syn-term-list dd {
  margin: 0;
  color: var(--syn-text);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .syn-term-list {
    grid-template-columns: 1fr;
    row-gap: 0.3rem;
  }
  .syn-term-list dt {
    text-align: left;
    border-right: 0;
    padding-right: 0;
    padding-top: 0.5rem;
  }
}

/* Numbered list flavour — for day/hour judgements, enumerated rules,
   spell-step sequences. Stronger ordinal hierarchy than plain `<ol>`. */
.syn-num-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  counter-reset: syn-num-list var(--syn-num-list-start, 0);
}
.syn-num-list > li {
  counter-increment: syn-num-list;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--syn-border);
  line-height: 1.5;
}
.syn-num-list > li:first-child { border-top: 0; padding-top: 0; }
.syn-num-list > li::before {
  content: counter(syn-num-list) ".";
  font-family: var(--syn-serif);
  font-weight: 600;
  color: var(--syn-gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.syn-voces {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--syn-text-dim, #6c5f4a);
}

/* Runic script rendering */
.syn-rune,
span[lang="non-runr"],
span[lang="ang-runr"] {
  font-family: "Junicode", "Noto Sans Runic", "Segoe UI Symbol", serif;
  font-size: 1.4em;
  letter-spacing: 0.12em;
}

/* Translation gloss */
.syn-translation,
em.syn-gloss {
  font-style: italic;
  color: var(--syn-text-mute, #8b7d65);
  font-size: 0.95em;
}
.syn-translation::before {
  content: "[trans.] ";
  font-size: 0.85em;
  color: var(--syn-text-mute, #8b7d65);
}

/* ════════════════════════════════════════════════════════════════════════
   FACSIMILE FIGURES  ▸  the third figure size variant
   ──────────────────────────────────────────────────────────────────────
   Used by `{{figure:foo|size="facsimile"}}` and as the chassis default
   for .pub-class--facsimile-verbatim publications. Sepia-bordered
   thumbnail with a "View full page" affordance underneath.
   ════════════════════════════════════════════════════════════════════════ */

.syn-figure--facsimile {
  max-width: 320px;
  margin: 1.2em auto;
  border: 1px solid #a08359;
  padding: 4px;
  background: #fbf6e9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  text-align: center;
}
.syn-figure--facsimile img {
  width: 100%;
  height: auto;
  display: block;
}
.syn-figure--facsimile .syn-figure-art {
  display: block;
  line-height: 0;
}
.syn-figure--facsimile figcaption {
  font-size: 0.8em;
  color: #8b7d65;
  text-align: center;
  margin-top: 0.4em;
  font-style: italic;
  font-family: var(--syn-serif);
}
.syn-figure--facsimile .syn-figure-zoom {
  display: inline-block;
  font-size: 0.75em;
  color: #6c5f4a;
  text-decoration: underline;
  margin-top: 0.2em;
}
.syn-figure--facsimile .syn-figure-zoom:hover {
  color: var(--syn-gold, #c9a449);
}

/* For .pub-class--facsimile-verbatim: suppress in-line figures by default;
   accessible via the Original Pages side panel (toggled by the JS at
   syn-facsimile-panel.js, which adds `show-original-pages` to <body>). */
.pub-class--facsimile-verbatim .syn-figure--facsimile {
  display: none;
}
.pub-class--facsimile-verbatim.show-original-pages .syn-figure--facsimile {
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   SIDE-PANEL "ORIGINAL PAGES" BROWSER
   ──────────────────────────────────────────────────────────────────────
   Right-side aside with thumbnail strip of every figure for the
   publication. Default-collapsed. Only rendered server-side on
   facsimile-verbatim publications (see chapter.html).
   ════════════════════════════════════════════════════════════════════════ */

.syn-toggle-original {
  position: fixed;
  right: 1em;
  top: 6em;
  background: #fbf6e9;
  color: #3a2f1a;
  border: 1px solid #a08359;
  padding: 0.4em 0.8em;
  cursor: pointer;
  font-size: 0.85em;
  font-family: var(--syn-serif);
  z-index: 100;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.syn-toggle-original:hover {
  background: #f3ebd6;
  border-color: var(--syn-gold-low, #8a6f2e);
}
.syn-facsimile-panel[hidden] {
  display: none;
}
.syn-facsimile-panel:not([hidden]) {
  position: fixed;
  right: 1em;
  top: 9em;
  width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fbf6e9;
  color: #3a2f1a;
  border: 1px solid #a08359;
  padding: 0.8em;
  z-index: 99;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.syn-facsimile-panel h3 {
  margin: 0 0 0.6em;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c5f4a;
  font-family: var(--syn-serif);
  border-bottom: 1px solid color-mix(in oklab, #a08359 40%, transparent);
  padding-bottom: 0.4em;
}
.syn-thumbnails {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8em;
}
.syn-thumb {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #6c5f4a;
}
.syn-thumb img {
  width: 100%;
  border: 1px solid #a08359;
  background: white;
  display: block;
  margin-bottom: 0.2em;
}
.syn-thumb span {
  font-size: 0.75em;
  color: #6c5f4a;
  font-family: var(--syn-serif);
}
.syn-thumb:hover img {
  border-color: var(--syn-gold, #c9a449);
}
@media (max-width: 1024px) {
  .syn-toggle-original,
  .syn-facsimile-panel {
    display: none !important;
  }
}


/* ======================================================================
   Oracle nav (tabs across Oracle / 23 / Readings)
   ====================================================================== */
.syn-oracle-nav {
  display: flex;
  gap: 4px;
  margin: 0 auto 18px;
  padding: 4px;
  background: rgba(10, 9, 16, 0.55);
  border-radius: 6px;
  border: 1px solid rgba(200, 168, 75, 0.18);
  /* Constrain to the same max-width as the daily rite panel below
     (`.syn-23 { max-width: 920px }`) so the 23 / Readings sub-tabs
     never sit wider than the content they switch between. */
  max-width: 920px;
  /* Six tabs, not three. A flex row that cannot wrap and whose items cannot
     shrink below their own text ("Consultation" is twelve characters) pushes
     the whole page wider than the phone it is on. Wrapping rather than
     scrolling on purpose: a horizontal scroll strip hides tabs off the edge
     where a reader never finds them, which is the same failure as a hamburger
     that will not open. */
  flex-wrap: wrap;
}
.syn-onav-tab {
  flex: 1 1 auto;
  min-width: 6.5rem;
  text-align: center;
  padding: 9px 14px;
  font-family: "Georgia", serif;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: #b3a895;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.syn-onav-tab:hover { background: rgba(200, 168, 75, 0.08); color: var(--syn-gold-hi, #e6c87a); }
.syn-onav-tab--on {
  background: rgba(200, 168, 75, 0.14);
  color: var(--syn-gold-hi, #e6c87a);
  border-color: rgba(200, 168, 75, 0.35);
}
@media (max-width: 620px) {
  .syn-onav-tab {
    min-width: 5.2rem;
    padding: 8px 9px;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
  }
}

/* ======================================================================
   Readings — passages for day + hour
   ====================================================================== */
.syn-readings {
  max-width: 1200px;
  margin: 0 auto;
}
.syn-readings-group {
  position: relative;
  margin: 28px 0;
  padding: 18px 22px 22px;
  background: rgba(8, 8, 14, 0.4);
  border-radius: 6px;
  border: 1px solid var(--p-edge, rgba(201,164,73,0.32));
  border-top: 3px solid var(--p-accent, #c8a84b);
}
.syn-readings-group[data-syn-glow-cycle]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  border: 1px solid rgba(212, 174, 70, 0.55);
  box-shadow:
    0 0 calc(8px + 32px * var(--syn-glow)) rgba(212, 174, 70, 0.65),
    0 0 calc(2px + 14px * var(--syn-glow)) rgba(212, 174, 70, 0.18) inset;
  opacity: var(--syn-glow);
  pointer-events: none;
  z-index: 1;
}
.syn-readings-group-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--p-edge, rgba(201,164,73,0.25));
}
.syn-readings-group-glyph {
  font-size: 48px;
  line-height: 1;
  color: var(--p-accent, #c8a84b);
  text-shadow: 0 2px 22px var(--p-soft, rgba(201,164,73,0.18));
  text-align: center;
}
.syn-readings-group-title {
  font-family: "Georgia", serif;
  font-size: 1.55rem;
  font-weight: normal;
  color: var(--p-accent, #c8a84b);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.syn-readings-group-meta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8275;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.syn-readings-period {
  position: relative;
  margin: 28px 0;
  padding: 18px 22px 22px;
  background: rgba(8, 8, 14, 0.4);
  border-radius: 6px;
  border: 1px solid var(--p-edge, rgba(201,164,73,0.32));
  border-top: 3px solid var(--p-accent, #c8a84b);
}
.syn-readings-period[data-syn-glow-cycle]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  border: 1px solid rgba(212, 174, 70, 0.55);
  box-shadow:
    0 0 calc(8px + 32px * var(--syn-glow)) rgba(212, 174, 70, 0.65),
    0 0 calc(2px + 14px * var(--syn-glow)) rgba(212, 174, 70, 0.18) inset;
  opacity: var(--syn-glow);
  pointer-events: none;
}
.syn-readings-period-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--p-edge, rgba(201,164,73,0.25));
}
.syn-readings-period-title {
  font-family: "Georgia", serif;
  font-size: 1.45rem;
  font-weight: normal;
  color: var(--p-accent, #c8a84b);
  margin: 0 0 4px;
}
.syn-readings-period-meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8275;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.syn-readings-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.syn-readings-cat {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--p-edge, rgba(201,164,73,0.25));
  border-radius: 5px;
  overflow: hidden;
}
.syn-readings-cat[open] {
  background: rgba(0, 0, 0, 0.32);
}
.syn-readings-cat-head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-family: "Georgia", serif;
}
.syn-readings-cat-head::-webkit-details-marker { display: none; }
.syn-readings-cat-head::before {
  content: "▸";
  position: absolute;
  margin-left: -22px;
  color: var(--p-accent, #c8a84b);
  transition: transform 160ms;
}
.syn-readings-cat[open] .syn-readings-cat-head::before {
  transform: rotate(90deg);
}
.syn-readings-cat-glyph {
  font-size: 24px;
  color: var(--p-accent, #c8a84b);
  text-align: center;
}
.syn-readings-cat-title {
  font-size: 1.04rem;
  color: #e6dcc8;
  letter-spacing: 0.02em;
}
.syn-readings-cat-count {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8275;
  white-space: nowrap;
}
.syn-readings-cat-body {
  padding: 6px 14px 14px;
}
.syn-readings-cat-loading {
  font-style: italic;
  color: #8a8275;
  margin: 8px 0;
  font-size: 0.92rem;
}
.syn-readings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  transition: opacity 320ms linear;
}
.syn-readings-grid .syn-passage {
  margin: 0;
  padding: 16px 18px;
}
.syn-readings-grid .syn-passage-head {
  grid-template-columns: 44px 1fr;
  gap: 12px;
}
.syn-readings-grid .syn-passage-glyph {
  font-size: 32px;
}
.syn-readings-grid .syn-passage-title {
  font-size: 0.98rem;
  margin: 2px 0;
}
.syn-readings-grid .syn-passage-body {
  font-size: 0.95rem;
  line-height: 1.62;
  padding: 10px 0;
  margin: 10px 0;
}
.syn-readings-grid .syn-passage-body p:first-of-type::first-letter {
  font-size: 2.6em;
  line-height: 0.95;
  margin: 2px 6px 0 0;
}
.syn-readings-banner {
  text-align: center;
  margin: 16px 0 28px;
}
.syn-readings-title {
  font-family: "Georgia", serif;
  font-size: 1.7rem;
  font-weight: normal;
  color: var(--syn-gold-hi, #e6c87a);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.syn-readings-lede {
  font-family: "Georgia", serif;
  font-size: 0.98rem;
  color: #c8b090;
  font-style: italic;
  margin: 0 auto;
  max-width: 60ch;
  line-height: 1.55;
}

.syn-passage[data-planet="sun"]     { --p-accent:#d4b94a; --p-soft:rgba(212,185,74,0.12);  --p-edge:rgba(212,185,74,0.45); --p-bg:rgba(212,185,74,0.05); }
.syn-passage[data-planet="moon"]    { --p-accent:#c3d4e0; --p-soft:rgba(195,212,224,0.10); --p-edge:rgba(195,212,224,0.38); --p-bg:rgba(195,212,224,0.04); }
.syn-passage[data-planet="mars"]    { --p-accent:#c44b44; --p-soft:rgba(196,75,68,0.12);   --p-edge:rgba(196,75,68,0.46); --p-bg:rgba(196,75,68,0.06); }
.syn-passage[data-planet="mercury"] { --p-accent:#d89a4a; --p-soft:rgba(216,154,74,0.11);  --p-edge:rgba(216,154,74,0.42); --p-bg:rgba(216,154,74,0.05); }
.syn-passage[data-planet="jupiter"] { --p-accent:#6b84c9; --p-soft:rgba(107,132,201,0.11); --p-edge:rgba(107,132,201,0.44); --p-bg:rgba(107,132,201,0.05); }
.syn-passage[data-planet="venus"]   { --p-accent:#4ea98a; --p-soft:rgba(78,169,138,0.11);  --p-edge:rgba(78,169,138,0.42); --p-bg:rgba(78,169,138,0.05); }
.syn-passage[data-planet="saturn"]  { --p-accent:#8a82b8; --p-soft:rgba(138,130,184,0.11); --p-edge:rgba(138,130,184,0.42); --p-bg:rgba(138,130,184,0.05); }

.syn-passage {
  position: relative;
  margin: 0 0 28px;
  padding: 22px 26px;
  background:
    radial-gradient(ellipse at 0% 0%, var(--p-soft) 0%, rgba(10,9,16,0) 60%),
    rgba(10, 9, 16, 0.5);
  border-radius: 6px;
  border: 1px solid var(--p-edge);
  border-left: 3px solid var(--p-accent);
  transition: opacity 320ms linear;
}
.syn-passage[data-syn-glow-cycle]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  border: 1px solid rgba(212, 174, 70, 0.55);
  box-shadow:
    0 0 calc(8px + 32px * var(--syn-glow)) rgba(212, 174, 70, 0.65),
    0 0 calc(2px + 14px * var(--syn-glow)) rgba(212, 174, 70, 0.18) inset;
  opacity: var(--syn-glow);
  pointer-events: none;
  z-index: 1;
}
.syn-passage-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  margin-bottom: 14px;
  align-items: start;
}
.syn-passage-glyph {
  font-size: 56px;
  line-height: 1;
  color: var(--p-accent);
  text-shadow: 0 2px 22px var(--p-soft);
  font-family: "Georgia", serif;
  font-feature-settings: "tnum";
  text-align: center;
}
.syn-passage-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8275;
  margin-bottom: 4px;
}
.syn-passage-eyebrow .syn-23-countdown { margin-left: 0; }
.syn-passage-title {
  font-family: "Georgia", serif;
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--p-accent);
  margin: 0 0 4px;
}
.syn-passage-cite {
  font-size: 0.85rem;
  color: #b3a895;
  margin: 0;
  font-style: italic;
}
.syn-passage-body {
  font-family: "Georgia", serif;
  font-size: 1.06rem;
  line-height: 1.72;
  color: #e6dcc8;
  margin: 14px 0;
  padding: 14px 0;
  border-top: 1px dashed var(--p-edge);
  border-bottom: 1px dashed var(--p-edge);
  text-align: justify;
  hyphens: auto;
}
.syn-passage-body p:first-of-type::first-letter {
  font-family: "Georgia", serif;
  font-size: 3.2em;
  line-height: 0.92;
  float: left;
  margin: 4px 8px 0 0;
  color: var(--p-accent);
  text-shadow: 0 2px 18px var(--p-soft);
}
.syn-passage-foot { text-align: right; }
.syn-passage-link {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--p-accent);
  text-decoration: none;
  transition: color 200ms;
}
.syn-passage-link:hover { color: #fff; text-decoration: underline; }
.syn-passage-empty {
  text-align: center;
  color: #8a8275;
  font-style: italic;
  padding: 2rem 0;
}

@media (max-width: 640px) {
  .syn-passage-head { grid-template-columns: 56px 1fr; gap: 12px; }
  .syn-passage-glyph { font-size: 40px; }
  .syn-passage-body { text-align: left; hyphens: none; }
}

/* ======================================================================
   Tab 23 — Today's Rite (document, planetary-themed, rich)
   ====================================================================== */
.syn-23 {
  max-width: 920px;
  margin: 0 auto;
  --p-accent: #c8a84b;
  --p-soft:   rgba(200, 168, 75, 0.10);
  --p-edge:   rgba(200, 168, 75, 0.40);
  --p-bg:     rgba(200, 168, 75, 0.05);
}
/* Planet theming on Tab 23 root — same palette as the existing dashboard
   so the colour-mood follows the day. */
.syn-23[data-planet="sun"]     { --p-accent:#d4b94a; --p-soft:rgba(212,185,74,0.12); --p-edge:rgba(212,185,74,0.45); --p-bg:rgba(212,185,74,0.05); }
.syn-23[data-planet="moon"]    { --p-accent:#c3d4e0; --p-soft:rgba(195,212,224,0.10); --p-edge:rgba(195,212,224,0.38); --p-bg:rgba(195,212,224,0.04); }
.syn-23[data-planet="mars"]    { --p-accent:#c44b44; --p-soft:rgba(196,75,68,0.12);  --p-edge:rgba(196,75,68,0.46); --p-bg:rgba(196,75,68,0.06); }
.syn-23[data-planet="mercury"] { --p-accent:#d89a4a; --p-soft:rgba(216,154,74,0.11); --p-edge:rgba(216,154,74,0.42); --p-bg:rgba(216,154,74,0.05); }
.syn-23[data-planet="jupiter"] { --p-accent:#6b84c9; --p-soft:rgba(107,132,201,0.11); --p-edge:rgba(107,132,201,0.44); --p-bg:rgba(107,132,201,0.05); }
.syn-23[data-planet="venus"]   { --p-accent:#4ea98a; --p-soft:rgba(78,169,138,0.11); --p-edge:rgba(78,169,138,0.42); --p-bg:rgba(78,169,138,0.05); }
.syn-23[data-planet="saturn"]  { --p-accent:#8a82b8; --p-soft:rgba(138,130,184,0.11); --p-edge:rgba(138,130,184,0.42); --p-bg:rgba(138,130,184,0.05); }
.syn-23-section[data-planet="sun"]     { --p-accent:#d4b94a; --p-soft:rgba(212,185,74,0.12); --p-edge:rgba(212,185,74,0.45); --p-bg:rgba(212,185,74,0.05); }
.syn-23-section[data-planet="moon"]    { --p-accent:#c3d4e0; --p-soft:rgba(195,212,224,0.10); --p-edge:rgba(195,212,224,0.38); --p-bg:rgba(195,212,224,0.04); }
.syn-23-section[data-planet="mars"]    { --p-accent:#c44b44; --p-soft:rgba(196,75,68,0.12);  --p-edge:rgba(196,75,68,0.46); --p-bg:rgba(196,75,68,0.06); }
.syn-23-section[data-planet="mercury"] { --p-accent:#d89a4a; --p-soft:rgba(216,154,74,0.11); --p-edge:rgba(216,154,74,0.42); --p-bg:rgba(216,154,74,0.05); }
.syn-23-section[data-planet="jupiter"] { --p-accent:#6b84c9; --p-soft:rgba(107,132,201,0.11); --p-edge:rgba(107,132,201,0.44); --p-bg:rgba(107,132,201,0.05); }
.syn-23-section[data-planet="venus"]   { --p-accent:#4ea98a; --p-soft:rgba(78,169,138,0.11); --p-edge:rgba(78,169,138,0.42); --p-bg:rgba(78,169,138,0.05); }
.syn-23-section[data-planet="saturn"]  { --p-accent:#8a82b8; --p-soft:rgba(138,130,184,0.11); --p-edge:rgba(138,130,184,0.42); --p-bg:rgba(138,130,184,0.05); }

/* Hero — large planetary sigil + name (top row), pantheon row below */
.syn-23-hero {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 28px 22px 22px;
  margin: 16px 0 22px;
  border-bottom: 1px solid var(--p-edge);
}
.syn-23-hero-main {
  display: flex;
  align-items: center;
  gap: 24px;
}
.syn-23-hero-sigil {
  font-family: "Georgia", serif;
  font-size: 92px;
  line-height: 1;
  color: var(--p-accent);
  text-shadow: 0 4px 28px var(--p-soft);
  font-weight: 300;
}
.syn-23-hero-text { display: flex; flex-direction: column; gap: 4px; }
.syn-23-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d8573;
}
.syn-23-name {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--p-accent);
  line-height: 1.05;
  margin: 0;
}
.syn-23-when {
  font-size: 0.94rem;
  color: #c8b090;
  margin: 6px 0 0;
  letter-spacing: 0.04em;
}
.syn-23-lede {
  font-family: "Georgia", serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #d5ccb8;
  font-style: italic;
  text-align: center;
  margin: 0 auto 28px;
  max-width: 60ch;
  padding: 0 22px;
}

/* Section chassis */
.syn-23-section {
  margin: 0 0 22px;
  padding: 18px 22px 20px;
  background: var(--p-bg);
  border-radius: 5px;
  border: 1px solid var(--p-edge);
  border-left: 3px solid var(--p-accent);
}
.syn-23-shead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--p-edge);
}
.syn-23-shead-glyph {
  font-family: "Georgia", serif;
  font-size: 28px;
  color: var(--p-accent);
  text-shadow: 0 0 14px var(--p-soft);
  line-height: 1;
}
.syn-23-h {
  font-family: "Georgia", serif;
  font-size: 1.18rem;
  font-weight: 400;
  color: var(--p-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  flex: 1;
}
.syn-23-shead-aux {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8275;
}
.syn-23-sub {
  font-family: "Georgia", serif;
  font-size: 1.04rem;
  font-weight: 400;
  color: #e6dcc8;
  margin: 14px 0 4px;
  letter-spacing: 0.02em;
}
.syn-23-explain {
  font-family: "Georgia", serif;
  font-size: 0.96rem;
  line-height: 1.62;
  color: #c8b090;
  margin: 0 0 10px;
}
.syn-23-explain b { color: var(--p-accent); font-weight: 500; }
/* Voiced paragraphs: the seeker's voice cell speaking — slightly warmer
   colour, italic-leaning serif, faint left rule to separate from the
   factual explain copy that surrounds them. */
.syn-23-explain--voiced {
  color: #d8c4a3;
  border-left: 2px solid var(--p-edge, rgba(201,164,73,0.4));
  padding: 6px 14px;
  margin: 4px 0 14px;
  background: rgba(255,255,255,0.018);
  font-style: italic;
  font-size: 0.98rem;
}
.syn-23-explain--voiced b { font-style: normal; }
.syn-23-explain--interlude {
  margin: 18px 0 14px;
  text-align: center;
  border-left: none;
  border-top:    1px dashed var(--p-edge, rgba(201,164,73,0.3));
  border-bottom: 1px dashed var(--p-edge, rgba(201,164,73,0.3));
  padding: 14px 22px;
}
/* Aspirational-gap note: a quiet personal observation just under the
   lede when the seeker's Q6 self-report differs from their behavioural
   temperament. Smaller and softer than the lede, set in italic, with a
   thin top-rule to mark it apart from the page's body voice. */
.syn-23-gap-note {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #b8a586;
  margin: -2px 0 18px;
  padding: 8px 14px 0;
  border-top: 1px dashed var(--p-edge, rgba(201,164,73,0.25));
  max-width: 680px;
}

/* Final closer at the bottom of the page — small, centered, set apart. */
.syn-23-final-closer {
  font-family: "Georgia", serif;
  font-style: italic;
  text-align: center;
  color: #c8b090;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 32px auto 24px;
  max-width: 540px;
  padding: 16px 22px;
  border-top: 1px solid var(--p-edge, rgba(201,164,73,0.28));
}
.syn-23-tag {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8275;
  margin: 0 0 10px;
}
.syn-23-rite {
  font-size: 0.93rem;
  color: #c8b090;
  margin: 8px 0 0;
  line-height: 1.55;
}
.syn-23-rite b { color: var(--p-accent); }
.syn-23-rite--shadow b { color: #d8856a; }
.syn-23-meta {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #8a8275;
}
.syn-23-quote {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 1rem;
  color: #d5ccb8;
  border-left: 2px solid var(--p-edge);
  padding: 4px 0 4px 14px;
  margin: 10px 0;
}

/* Tile grid for The Day / Hour attributes */
.syn-23-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.syn-23-tile {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--p-edge);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.syn-23-tile--wide { grid-column: span 2; }
.syn-23-tile-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8275;
}
.syn-23-tile p {
  margin: 0;
  color: #e6dcc8;
  font-size: 0.96rem;
  line-height: 1.4;
}

/* The Hermetic axiom — its own dignity */
.syn-23-section--hermetic .syn-23-axiom {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: #e6dcc8;
  text-align: center;
  font-style: italic;
  margin: 14px 0 6px;
  padding: 4px 22px;
  position: relative;
}
.syn-23-section--hermetic .syn-23-axiom::before,
.syn-23-section--hermetic .syn-23-axiom::after {
  font-family: "Georgia", serif;
  color: var(--p-accent);
  font-size: 1.6em;
  font-style: normal;
  line-height: 1;
  position: absolute;
}
.syn-23-section--hermetic .syn-23-axiom::before { content: "“"; left: 0; top: -2px; }
.syn-23-section--hermetic .syn-23-axiom::after  { content: "”"; right: 0; bottom: -10px; }

/* The celestial pair — Sun + Moon side-by-side */
.syn-23-celestial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  /* Template order is: Sun · Sun's Companion · Moon · Moon's Companion.
     Column flow places Sun (1,1), Sun's Companion (1,2), Moon (2,1),
     Moon's Companion (2,2). Result: Sun directly above Sun's Companion,
     Moon directly above Moon's Companion. */
  grid-auto-flow: column;
  gap: 14px;
}
@media (max-width: 640px) {
  .syn-23-celestial {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.syn-23-cel {
  text-align: center;
  padding: 14px 12px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  border: 1px solid var(--p-edge);
}
.syn-23-cel-glyph {
  display: block;
  font-size: 44px;
  line-height: 1;
  color: var(--p-accent);
  text-shadow: 0 0 18px var(--p-soft);
  margin-bottom: 4px;
}
.syn-23-cel .syn-23-sub { margin-top: 0; }
.syn-23-cel .syn-23-explain { margin-top: 4px; }

/* Cards & Lots — each card with its own glyph */
.syn-23-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 12px 14px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid var(--p-edge);
  border-radius: 4px;
  align-items: start;
}
.syn-23-card-glyph {
  font-size: 56px;
  line-height: 1;
  color: var(--p-accent);
  text-align: center;
  text-shadow: 0 0 16px var(--p-soft);
  font-family: "Georgia", serif;
  padding-top: 4px;
}
.syn-23-card-glyph--rune  { font-size: 64px; }
.syn-23-card-glyph--iching {
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
}
.syn-23-card-glyph--geo {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  padding-top: 0;
  font-family: "Courier New", monospace;
  letter-spacing: 0.12em;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.syn-23-geo-row {
  display: block;
  color: var(--p-accent);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.12em;
  font-size: inherit;
}
.syn-23-card-num {
  font-size: 0.8em;
  color: #8a8275;
  font-weight: 400;
  margin-left: 8px;
}
.syn-23-card-body { padding-top: 4px; }
.syn-23-card .syn-23-sub { margin-top: 0; margin-bottom: 4px; font-size: 1.08rem; }

/* Numerology — big digits */
.syn-23-numerology {
  margin: 16px 0 18px;
  padding: 14px 18px 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--p-edge);
  border-left: 3px solid var(--p-accent);
  border-radius: 4px;
}
.syn-23-numerology-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}
.syn-23-numerology-glyph {
  font-family: "Georgia", serif;
  font-size: 28px;
  line-height: 1;
  color: var(--p-accent);
  text-align: center;
  text-shadow: 0 1px 12px var(--p-soft);
}
.syn-23-numerology-title {
  font-family: "Georgia", serif;
  font-size: 1.05rem;
  font-weight: normal;
  color: var(--p-accent);
  margin: 0 0 2px;
}
.syn-23-numerology-meta {
  font-size: 0.85rem;
  color: #8a8275;
  margin: 0;
  line-height: 1.45;
}
.syn-23-numgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 6px 0 0;
}
.syn-23-num--primary {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--p-edge);
  box-shadow: 0 0 0 1px var(--p-soft) inset, 0 4px 22px var(--p-soft);
}
.syn-23-num--primary .syn-23-num-digit { color: var(--p-accent); text-shadow: 0 2px 18px var(--p-soft); }
.syn-23-num--primary .syn-23-num-label { color: var(--p-accent); }

.syn-23-num--muted {
  opacity: 0.62;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(180, 168, 140, 0.18);
}
.syn-23-num--muted .syn-23-num-digit { color: #b3a895; text-shadow: none; }
.syn-23-num--muted .syn-23-num-label { color: #6f685a; }
.syn-23-num--muted .syn-23-num-title { color: #8a8275; }
.syn-23-num {
  text-align: center;
  padding: 14px 10px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid var(--p-edge);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.syn-23-num-digit {
  display: block;
  font-family: "Georgia", serif;
  font-size: 56px;
  line-height: 1;
  color: var(--p-accent);
  font-weight: 300;
  text-shadow: 0 2px 18px var(--p-soft);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.syn-23-num-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8275;
}
.syn-23-num-title {
  font-size: 0.86rem;
  color: #d5ccb8;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   Tree of Life icon (Sephirah card)
   The 10 spheres in their Queen-Scale colours; today's leaf glows.
   Inactive spheres are outlined ghosts so the whole Tree reads as a
   single living glyph rather than a chart.
   ───────────────────────────────────────────────────────────────── */
.syn-tree-of-life {
  display: block;
  width: 100%;
  height: auto;
  max-width: 88px;
  margin: 0 auto;
  overflow: visible;
}
.syn-tree-paths line {
  stroke: rgba(201, 164, 73, 0.32);
  stroke-width: 0.6;
  fill: none;
}
.syn-tree-spheres circle {
  fill-opacity: 0.14;
  stroke-width: 0.9;
  transition: fill-opacity 200ms, stroke-width 200ms;
}
/* Queen-Scale colour assignments — Western Hermetic Qabalah / Golden Dawn */
.syn-tree-spheres [data-sephirah="kether"]    circle { fill: #f5f5e0; stroke: #f5f5e0; }
.syn-tree-spheres [data-sephirah="chokmah"]   circle { fill: #a0a0a8; stroke: #a0a0a8; }
.syn-tree-spheres [data-sephirah="binah"]     circle { fill: #2a2a3a; stroke: #6a6a78; }
.syn-tree-spheres [data-sephirah="chesed"]    circle { fill: #3060c0; stroke: #3060c0; }
.syn-tree-spheres [data-sephirah="geburah"]   circle { fill: #c14a4a; stroke: #c14a4a; }
.syn-tree-spheres [data-sephirah="tiphareth"] circle { fill: #e6c47a; stroke: #e6c47a; }
.syn-tree-spheres [data-sephirah="netzach"]   circle { fill: #3aa869; stroke: #3aa869; }
.syn-tree-spheres [data-sephirah="hod"]       circle { fill: #d97f3a; stroke: #d97f3a; }
.syn-tree-spheres [data-sephirah="yesod"]     circle { fill: #7a4a9a; stroke: #7a4a9a; }
.syn-tree-spheres [data-sephirah="malkuth"]   circle { fill: #6e5a3a; stroke: #6e5a3a; }

/* The active leaf — full colour fill + glow, plus a subtle scale via
   stroke-width bump. Drop-shadow stacked twice for a soft halo. */
.syn-tree-active circle:first-of-type {
  fill-opacity: 1 !important;
  stroke-width: 1.4;
}
.syn-tree-active[data-sephirah="kether"]    { filter: drop-shadow(0 0 4px #f5f5e0) drop-shadow(0 0 9px #f5f5e0); }
.syn-tree-active[data-sephirah="chokmah"]   { filter: drop-shadow(0 0 4px #a0a0a8) drop-shadow(0 0 9px #a0a0a8); }
.syn-tree-active[data-sephirah="binah"]     { filter: drop-shadow(0 0 4px #6a6a78) drop-shadow(0 0 9px #6a6a78); }
.syn-tree-active[data-sephirah="chesed"]    { filter: drop-shadow(0 0 4px #3060c0) drop-shadow(0 0 10px #3060c0); }
.syn-tree-active[data-sephirah="geburah"]   { filter: drop-shadow(0 0 4px #c14a4a) drop-shadow(0 0 10px #c14a4a); }
.syn-tree-active[data-sephirah="tiphareth"] { filter: drop-shadow(0 0 4px #e6c47a) drop-shadow(0 0 12px #e6c47a); }
.syn-tree-active[data-sephirah="netzach"]   { filter: drop-shadow(0 0 4px #3aa869) drop-shadow(0 0 10px #3aa869); }
.syn-tree-active[data-sephirah="hod"]       { filter: drop-shadow(0 0 4px #d97f3a) drop-shadow(0 0 10px #d97f3a); }
.syn-tree-active[data-sephirah="yesod"]     { filter: drop-shadow(0 0 4px #7a4a9a) drop-shadow(0 0 10px #7a4a9a); }
.syn-tree-active[data-sephirah="malkuth"]   { filter: drop-shadow(0 0 4px #6e5a3a) drop-shadow(0 0 10px #6e5a3a); }

/* Sephirah card holds an SVG instead of a glyph in its left column;
   the SVG needs all the room the column can give and no font metrics. */
.syn-23-card-glyph--tree,
.syn-23-card-glyph--svg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: inherit;
  text-shadow: none;
  color: var(--p-accent);
}
@media (max-width: 640px) {
  .syn-tree-of-life { max-width: 70px; }
}

/* ─────────────────────────────────────────────────────────────────
   Hand-built SVG icon family — Pentacle / Hexagram / Wheel / Kamea.
   Each picks up `currentColor` from its card glyph slot, which is
   set to the planet's accent — so every icon takes the day's hue.
   ───────────────────────────────────────────────────────────────── */
.syn-icon {
  display: block;
  width: 100%;
  height: auto;
  max-width: 88px;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 6px var(--p-soft));
}
@media (max-width: 640px) { .syn-icon { max-width: 70px; } }

/* RWS card art used as the Oracle's tarot-of-the-day glyph: a photo, so swap
   the line-icon drop-shadow for a card-like frame. */
.syn-tarot-rws-glyph {
  border-radius: 5px;
  filter: none;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.45);
}

/* Pentacle — slight inner glow on the central glyph. */
.syn-icon-pentacle text { font-style: normal; }

/* Hexagram — central planet-glyph picks up the planet color too. */
.syn-icon-hexagram text { font-weight: 400; }

/* Wheel of the Year — eight stations, today's sabbat glows. */
.syn-icon-wheel .syn-wheel-stations circle { opacity: 0.55; }
.syn-icon-wheel[data-sabbat="Yule"]       circle[data-sabbat="Yule"],
.syn-icon-wheel[data-sabbat="Imbolc"]     circle[data-sabbat="Imbolc"],
.syn-icon-wheel[data-sabbat="Ostara"]     circle[data-sabbat="Ostara"],
.syn-icon-wheel[data-sabbat="Beltane"]    circle[data-sabbat="Beltane"],
.syn-icon-wheel[data-sabbat="Litha"]      circle[data-sabbat="Litha"],
.syn-icon-wheel[data-sabbat="Lughnasadh"] circle[data-sabbat="Lughnasadh"],
.syn-icon-wheel[data-sabbat="Mabon"]      circle[data-sabbat="Mabon"],
.syn-icon-wheel[data-sabbat="Samhain"]    circle[data-sabbat="Samhain"] {
  opacity: 1;
  r: 4;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}

/* Kamea — magic-square grid; central cell glows with the planet's accent. */
.syn-icon-kamea .syn-kamea-cells rect { opacity: 0.85; }
.syn-icon-kamea .syn-kamea-active {
  fill: currentColor;
  fill-opacity: 0.85;
  stroke: currentColor;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
}
.syn-icon-kamea--daemon .syn-kamea-cells rect {
  stroke: rgba(150, 80, 80, 0.55);
  opacity: 0.6;
}
.syn-icon-kamea--daemon .syn-kamea-active {
  fill: #6e2222;
  stroke: #c14a4a;
  filter: drop-shadow(0 0 3px #c14a4a) drop-shadow(0 0 6px #6e2222);
}

/* Sun & Moon — celestial pane SVG holders. The Sun has its own gold so
   we don't tint with the planet accent; the Moon ditto for silver. */
.syn-23-cel-glyph--svg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: inherit;
  text-shadow: none;
  color: var(--p-accent);
}
.syn-23-cel-glyph--svg .syn-icon { max-width: 60px; filter: drop-shadow(0 0 8px rgba(0,0,0,0.45)); }
.syn-icon-sun  { color: #e6c47a; }
.syn-icon-moon { color: #c3d4e0; }

/* Section-header SVG holder — replaces the small ⊕ glyph next to a section title. */
.syn-23-shead-glyph--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.syn-23-shead-glyph--svg .syn-icon { max-width: 36px; }

/* Animal icon — the medallion backing inherits the planet accent. */
.syn-icon-animal { color: var(--p-accent); }

/* Tarot, Caduceus, Plant, Herb, Stone, Metal, Colour, Tea, Incense,
   YinYang, Masonic — they all use currentColor inherited from the
   planet accent on the card glyph slot, so no extra colour rules needed. */
.syn-icon-yinyang { color: var(--p-accent); }
.syn-icon-masonic { color: var(--p-accent); }

/* Pantheon row in the hero — small icon holder. The pantheon-glyph
   span is 22px wide; SVG fills it. */
.syn-23-pantheon-glyph--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--p-accent);
}
.syn-23-pantheon-glyph--svg .syn-icon { max-width: 22px; }

/* Hero sigil — the large planet glyph at the top of the page.
   Uses an SVG instead of a Unicode glyph so it renders identically
   on every platform. */
.syn-23-hero-sigil--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  font-size: 0;
  text-shadow: none;
}
.syn-23-hero-sigil--svg .syn-icon {
  max-width: 92px;
  filter: drop-shadow(0 4px 24px var(--p-soft));
}
@media (max-width: 640px) {
  .syn-23-hero-sigil--svg { width: 64px; height: 64px; }
  .syn-23-hero-sigil--svg .syn-icon { max-width: 64px; }
}

/* Numerology header glyph holder — the lemniscate icon sits in the
   numerology block's small left-column glyph slot. */
.syn-23-numerology-glyph--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0;
  color: var(--p-accent);
}
.syn-23-numerology-glyph--svg .syn-icon { max-width: 36px; }

/* Pantheon icons — many use planet-themed accent. Egyptian / Greek /
   Norse / Celtic / Olympic / Thelemic carry their own clear silhouettes
   and pick up planet accent colour. */
.syn-icon-egyptian, .syn-icon-greek, .syn-icon-norse,
.syn-icon-celtic, .syn-icon-olympic, .syn-icon-thelemic,
.syn-icon-numerology, .syn-icon-thread, .syn-icon-celestial,
.syn-icon-planet, .syn-icon-sigil, .syn-icon-word,
.syn-icon-gesture, .syn-icon-avoid, .syn-icon-scent,
.syn-icon-zodiac {
  color: var(--p-accent);
}

/* Zodiac glyph — drops inline alongside the sign name in the
   Celestial Sphere section, sized to text rather than card-sized. */
.syn-icon-zodiac {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  margin: 0 0.12em 0 0;
  vertical-align: -0.22em;
  filter: drop-shadow(0 0 3px var(--p-soft));
}

/* Three-card Tarot spread (Past · Present · Future) */
.syn-23-spread {
  margin: 22px 0 30px;
  padding: 24px 28px 28px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--p-edge, rgba(201,164,73,0.3));
  border-radius: 8px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
}
.syn-23-spread-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--p-edge, rgba(201,164,73,0.32));
  text-align: center;
}
.syn-23-spread-title {
  font-family: "Georgia", serif;
  font-size: 1.22rem;
  font-weight: normal;
  color: var(--p-accent, #c8a84b);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.syn-23-spread-meta {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8275;
  margin: 0;
}
.syn-23-spread-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Six row tracks — header / tag / position / upright / contemplation / shadow.
     Cards subgrid into these rows so the same conceptual section sits at
     the same y-coordinate across all three cards. */
  grid-template-rows: repeat(6, auto);
  gap: 22px;
}
.syn-23-spread-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 6;
  padding: 22px 22px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.24) 100%);
  border: 1px solid var(--p-edge, rgba(201,164,73,0.28));
  border-radius: 6px;
  border-top: 3px solid var(--p-accent, #c8a84b);
  row-gap: 14px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}
/* Each row keeps its own minimum height so empty cells in one card still
   reserve the slot (preserving alignment across columns). */
.syn-23-spread-row { margin: 0; align-self: start; }
.syn-23-spread-row--tag {
  min-height: 1.4em;
  padding: 4px 0 8px;
  border-bottom: 1px dashed rgba(201,164,73,0.16);
  font-size: 0.7rem !important;
}
.syn-23-spread-row--position {
  min-height: 1.6em;
  padding: 8px 12px;
  border-left: 2px solid var(--p-accent, #c8a84b);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 3px 3px 0;
  font-size: 0.86rem;
  color: #c8b090;
  line-height: 1.5;
}
.syn-23-spread-row--upright {
  min-height: 3em;
  font-size: 0.94rem;
  line-height: 1.6;
  padding: 4px 0;
}
.syn-23-spread-row--contemplation {
  min-height: 2em;
  padding: 12px 14px;
  margin: 4px 0 0;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 4px;
  font-style: italic;
  color: #d5ccb8;
  line-height: 1.55;
  position: relative;
}
.syn-23-spread-row--contemplation:not(:empty)::before {
  content: "❝";
  position: absolute;
  left: 4px;
  top: 0;
  font-size: 1.4rem;
  color: var(--p-accent, #c8a84b);
  opacity: 0.45;
  line-height: 1;
}
.syn-23-spread-row--shadow {
  min-height: 1.6em;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px dashed rgba(216, 133, 106, 0.28);
  font-size: 0.88rem;
  line-height: 1.55;
}
.syn-23-spread-row:empty::before { content: ""; display: block; }
.syn-23-spread-card-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 164, 73, 0.18);
  margin-bottom: 4px;
}
.syn-23-spread-card-glyph { padding-top: 2px; }
.syn-23-spread-card-name {
  font-family: "Georgia", serif;
  font-size: 1.04rem;
  font-weight: 400;
  color: #e6dcc8;
  letter-spacing: 0.01em;
  line-height: 1.28;
}
.syn-23-spread-position {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}
.syn-23-spread-card-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.syn-23-spread-card-glyph {
  font-size: 40px;
  line-height: 1;
  color: var(--p-accent, #c8a84b);
  text-shadow: 0 2px 18px var(--p-soft, rgba(201,164,73,0.18));
  text-align: center;
}

/* RWS card art in the daily Past·Present·Future spread — a card thumbnail
   in the head's first column beside the position + name. */
.syn-23-spread-card-head:has(.syn-23-spread-card-img) { grid-template-columns: 80px 1fr; }
.syn-23-spread-card-img {
  display: block;
  width: 100%;
  max-width: 80px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.syn-23-spread-position {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-accent, #c8a84b);
  margin: 0 0 2px;
}
.syn-23-spread-card-name {
  font-family: "Georgia", serif;
  font-size: 1rem;
  font-weight: normal;
  color: #e6dcc8;
  margin: 0;
  line-height: 1.25;
}
.syn-23-spread-card-num {
  font-size: 0.78rem;
  color: #8a8275;
  margin-left: 4px;
}
.syn-23-spread-position-meaning {
  font-size: 0.85rem;
  color: #b3a895;
  margin: 0 0 8px;
  border-left: 2px solid var(--p-accent, #c8a84b);
  padding-left: 8px;
}
.syn-23-spread-card .syn-23-explain { font-size: 0.9rem; }
.syn-23-spread-card .syn-23-quote { font-size: 0.9rem; }
@media (max-width: 880px) {
  .syn-23-spread-grid {
    grid-template-columns: 1fr;
    /* Each card becomes its own 6-row block stacked vertically.
       Subgrid alignment across columns no longer applies; cards
       become independent flow blocks. */
    grid-template-rows: none;
  }
  .syn-23-spread-card {
    grid-template-rows: auto;
    grid-row: auto;
  }
  .syn-23-spread-row:empty { display: none; }
}

.syn-23-notes {
  margin: 14px 0 6px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.syn-23-notes dt {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8275;
  align-self: baseline;
  padding-top: 2px;
}
.syn-23-notes dd {
  margin: 0;
  color: #c8b090;
}
.syn-23-notes dd b { color: var(--p-accent); font-weight: 500; }
.syn-23-notes dd i { color: #8a8275; font-style: italic; }

.syn-23 [data-syn-glow-cycle]::after {
  inset: -2px;
  border-radius: 7px;
  border: 1px solid rgba(212, 174, 70, 0.55);
  box-shadow:
    0 0 calc(8px + 36px * var(--syn-glow)) rgba(212, 174, 70, 0.65),
    0 0 calc(2px + 16px * var(--syn-glow)) rgba(212, 174, 70, 0.18) inset;
  opacity: var(--syn-glow);
  animation: none;
}
.syn-23-hero[data-syn-glow-cycle]::after { border-radius: 6px; }

/* Pantheon row inside the hero — the named faces of today's planet
   across traditions (Egyptian, Greek, Norse, Celtic, Olympic, Thelemic).
   Lifted out of the body card-list so the hero reads as the day's
   complete identity. */
.syn-23-hero-pantheon {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--p-edge, rgba(201,164,73,0.3));
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.syn-23-pantheon-item {
  display: grid;
  grid-template-columns: 22px max-content;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 0;
  align-items: center;
}
.syn-23-pantheon-glyph {
  grid-row: 1 / span 2;
  font-family: "Georgia", serif;
  font-size: 22px;
  line-height: 1;
  color: var(--p-accent, #c8a84b);
  text-shadow: 0 1px 10px var(--p-soft, rgba(201,164,73,0.18));
  text-align: center;
}
.syn-23-pantheon-trad {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8275;
  line-height: 1.1;
}
.syn-23-pantheon-name {
  grid-column: 2;
  grid-row: 2;
  font-family: "Georgia", serif;
  font-size: 0.95rem;
  color: #e6dcc8;
  line-height: 1.2;
}
@media (max-width: 640px) {
  .syn-23-hero-pantheon { gap: 8px 14px; }
  .syn-23-pantheon-glyph { font-size: 18px; }
  .syn-23-pantheon-name  { font-size: 0.88rem; }
}
.syn-23-num[data-syn-glow-cycle]::after  { border-radius: 5px; }

.syn-23-countdown {
  display: inline-block;
  font-family: "Georgia", serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c8b090;
  padding: 3px 10px;
  border: 1px solid var(--p-edge);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}
.syn-23-countdown--inline {
  margin-left: 8px;
  vertical-align: baseline;
}
.syn-23-countdown--mini {
  font-size: 0.62rem;
  padding: 2px 8px;
  margin-top: 6px;
  align-self: center;
}

.syn-23-clock {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.syn-23-clock .syn-live-clock {
  font-family: "Georgia", serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--p-accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

@media (max-width: 640px) {
  .syn-23-hero-sigil { font-size: 64px; }
  .syn-23-name       { font-size: 32px; }
  .syn-23-card       { grid-template-columns: 56px 1fr; gap: 10px; padding: 12px 14px; }
  .syn-23-card-glyph { font-size: 40px; }
  .syn-23-card-glyph--rune   { font-size: 48px; }
  .syn-23-card-glyph--iching { font-size: 56px; }
  .syn-23-card-glyph--geo    { font-size: 12px; letter-spacing: 0.08em; gap: 3px; }
  .syn-23-num-digit          { font-size: 42px; }

  .syn-23-card .syn-23-sub { font-size: 1rem; }
  .syn-23-card .syn-23-explain,
  .syn-23-card .syn-23-quote,
  .syn-23-card .syn-23-rite { font-size: 0.95rem; line-height: 1.55; }

  /* Cards & Lots backs use a 2-col <dl class="syn-23-notes"> on desktop —
     on mobile, stack each label/value pair so dd has full width. */
  .syn-23-card .syn-23-notes {
    grid-template-columns: 1fr;
    gap: 2px 0;
    margin: 12px 0 6px;
  }
  .syn-23-card .syn-23-notes dt {
    margin-top: 8px;
    padding-top: 0;
  }
  .syn-23-card .syn-23-notes dd {
    margin: 0 0 6px;
    padding-left: 0;
  }
}

/* On phones <520px the 56px-icon column eats too much horizontal
   real-estate from the LLM-voiced paragraph. Stack icon above text so
   the dynamic content gets the full viewport width minus card padding,
   and let the page itself use a tighter horizontal padding. */
@media (max-width: 520px) {
  .syn-main {
    padding: 0 1rem;
  }
  .syn-23-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 14px 16px;
    margin: 12px 0;
    align-items: stretch;
  }
  .syn-23-card-glyph {
    font-size: 38px;
    text-align: left;
    padding-top: 0;
    line-height: 1;
  }
  .syn-23-card-glyph--rune   { font-size: 44px; }
  .syn-23-card-glyph--iching { font-size: 48px; }
  .syn-23-card-glyph--svg .syn-icon { width: 38px; height: 38px; }
  .syn-23-card .syn-23-sub  { font-size: 1.05rem; line-height: 1.3; }
  .syn-23-card .syn-23-tag  { font-size: 0.78rem; }
  .syn-23-card .syn-23-explain,
  .syn-23-card .syn-23-quote,
  .syn-23-card .syn-23-rite { font-size: 1rem; line-height: 1.55; }
}

/* ============================================================
   Prognostics panel — first panel of the Daily Rite
   ============================================================ */
.syn-23-prog {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.1rem 1.25rem;
  background: var(--p-bg, rgba(0,0,0,0.04));
  border: 1px solid var(--p-edge, rgba(0,0,0,0.08));
  border-radius: 10px;
}
.syn-23-prog-head { margin-bottom: 0.6rem; }
.syn-23-prog-head h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--p-accent, currentColor);
}
.syn-23-prog-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  opacity: 0.7;
  font-style: italic;
}

.syn-23-prog-band {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.syn-23-prog-band:first-of-type {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}
.syn-23-prog-band-title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.78;
}

.syn-23-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.syn-23-prog-card {
  background: rgba(255,255,255,0.04);
  border-radius: 7px;
  padding: 8px 12px;
  border-left: 3px solid;
  font-size: 0.92rem;
}
.syn-23-prog-card[open]  { padding-bottom: 10px; }
.syn-23-prog-warn        { border-left-color: #a83232; background: rgba(168,50,50,0.06); }
.syn-23-prog-ausp        { border-left-color: #2c7a3a; background: rgba(44,122,58,0.06); }

.syn-23-prog-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.syn-23-prog-card summary::-webkit-details-marker { display: none; }
.syn-23-prog-icon {
  width: 22px; text-align: center; font-size: 1.05rem;
}
.syn-23-prog-warn .syn-23-prog-icon { color: #a83232; }
.syn-23-prog-ausp .syn-23-prog-icon { color: #2c7a3a; }
.syn-23-prog-cat { flex: 1; }
.syn-23-prog-score {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 11px;
  background: rgba(0,0,0,0.07);
}
.syn-23-prog-warn .syn-23-prog-score { background: rgba(168,50,50,0.18); color: #8a2828; }
.syn-23-prog-ausp .syn-23-prog-score { background: rgba(44,122,58,0.18); color: #1f5530; }

.syn-23-prog-advice {
  margin: 8px 0 4px;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.88;
}

.syn-23-prog-evidence {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px dotted rgba(0,0,0,0.1);
  padding-top: 6px;
}
.syn-23-prog-evidence li {
  margin: 6px 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.syn-23-prog-sig {
  font-weight: 600;
  display: inline-block;
}
.syn-23-prog-sig em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.7;
  font-size: 0.78rem;
  margin-left: 4px;
}
.syn-23-prog-src {
  display: block;
  font-size: 0.78rem;
  opacity: 0.7;
  margin-top: 2px;
  padding-left: 4px;
  border-left: 2px solid rgba(0,0,0,0.06);
  padding-left: 8px;
}

@media (max-width: 640px) {
  .syn-23-prog { padding: 0.85rem; }
  .syn-23-prog-grid { grid-template-columns: 1fr; }
}

.syn-23-prog-quiet {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.55;
}

/* ============================================================
   Prognostics — unified per-category cards with hour rollover
   ============================================================ */
.syn-23-prog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  flex-wrap: wrap;
}
.syn-23-prog-timing {
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 11px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.syn-23-prog-timing--day  { background: rgba(212,185,74,0.18); color: #6a5520; }
.syn-23-prog-timing--hour { background: rgba(196,75,68,0.18);  color: #7a2828; }
.syn-23-prog-timing--both { background: rgba(107,132,201,0.18); color: #25406b; }

.syn-23-prog-active-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(76,140,90,0.22);
  color: #1f5530;
}
.syn-23-prog-active-tag--upcoming {
  background: rgba(120,120,140,0.16);
  color: #555;
}
.syn-23-prog-active-tag--passed {
  background: rgba(120,120,120,0.12);
  color: #888;
}

/* state — active: normal rendering */
.syn-23-prog-card.state-active { opacity: 1; }

/* state — upcoming: card present but dimmed */
.syn-23-prog-card.state-upcoming { opacity: 0.78; }

/* state — passed: heavily dimmed */
.syn-23-prog-card.state-passed {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.syn-23-prog-card.state-passed .syn-23-prog-score {
  opacity: 0.7;
}

/* Smooth state transitions on hour rollover */
.syn-23-prog-card {
  transition: opacity 600ms ease, filter 600ms ease;
}
.syn-23-prog-card [data-prog-bind="score"],
.syn-23-prog-card [data-prog-bind="advice"],
.syn-23-prog-card [data-prog-bind="evidence"] {
  transition: opacity 280ms ease;
}
.syn-23-prog-card.swapping [data-prog-bind] { opacity: 0.4; }

/* ============================================================
   Threaded Daily + Hourly cards
   Day anchor on top, hour echo below, same visual chassis as
   the existing .syn-23-card. Hour-echo line updates live.
   ============================================================ */
.syn-23-thread {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px;
}
.syn-23-thread-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.95rem;
}
.syn-23-thread-axis {
  display: inline-block;
  min-width: 38px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.55;
}
.syn-23-thread-value {
  font-weight: 600;
}
.syn-23-thread-row--hour .syn-23-thread-axis {
  color: var(--p-accent, currentColor);
  opacity: 0.85;
}
.syn-23-thread-row--hour .syn-23-thread-value {
  color: var(--p-accent, currentColor);
}
.syn-23-thread-when {
  font-size: 0.72rem;
  opacity: 0.55;
  font-style: italic;
}
@media (max-width: 480px) {
  .syn-23-thread-row { font-size: 0.88rem; }
  .syn-23-thread-axis { min-width: 32px; }
}

/* ============================================================
   Per-row planetary tinting in threaded cards
   The Day row picks up the day_ruler's accent; the Hour row picks
   up the hour_ruler's accent and TRANSITIONS smoothly when the hour
   changes. Each row is a separately-styled entry under the card's
   concept (e.g. Colour), so it's unambiguous which value belongs
   to which time axis.
   ============================================================ */
.syn-23-thread {
  border-top: 1px solid var(--p-edge, rgba(0,0,0,0.08));
  padding-top: 6px;
  gap: 0;
}
.syn-23-thread-row {
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--row-bg, transparent);
  transition: background 600ms ease, color 600ms ease;
}
.syn-23-thread-row + .syn-23-thread-row {
  margin-top: 2px;
}
.syn-23-thread-axis {
  color: var(--row-accent, var(--p-accent, currentColor));
  transition: color 600ms ease;
}
.syn-23-thread-value {
  color: var(--row-accent, var(--p-accent, currentColor));
  transition: color 600ms ease;
}

/* Per-planet accent override at the row level — applies whether the
   row is the Day axis or the Hour axis. The hour row's data-planet
   value is swapped by JS on the hour boundary, so the colour glides
   from one planet to the next over the 600ms transition. */
.syn-23-thread-row[data-planet="sun"]     { --row-accent:#d4b94a; --row-bg:rgba(212,185,74,0.06); }
.syn-23-thread-row[data-planet="moon"]    { --row-accent:#c3d4e0; --row-bg:rgba(195,212,224,0.06); }
.syn-23-thread-row[data-planet="mars"]    { --row-accent:#c44b44; --row-bg:rgba(196,75,68,0.06); }
.syn-23-thread-row[data-planet="mercury"] { --row-accent:#d89a4a; --row-bg:rgba(216,154,74,0.06); }
.syn-23-thread-row[data-planet="jupiter"] { --row-accent:#6b84c9; --row-bg:rgba(107,132,201,0.06); }
.syn-23-thread-row[data-planet="venus"]   { --row-accent:#4ea98a; --row-bg:rgba(78,169,138,0.06); }
.syn-23-thread-row[data-planet="saturn"]  { --row-accent:#8a82b8; --row-bg:rgba(138,130,184,0.06); }

/* Slight contrast between Day and Hour rows — Hour gets a soft left
   stripe matching its planet, so the eye reads it as "the one that
   moves". */
.syn-23-thread-row--hour {
  border-left: 3px solid var(--row-accent, var(--p-accent, currentColor));
  padding-left: 8px;
  transition: border-color 600ms ease, background 600ms ease;
}
.syn-23-thread-row--day {
  border-left: 3px solid transparent;
  padding-left: 8px;
}

/* ============================================================
   Threaded Day/Hour axis sections inside each card
   ============================================================ */
.syn-23-axis {
  margin: 8px 0 0;
  padding: 8px 10px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--row-accent, var(--p-accent, currentColor));
  background: var(--row-bg, rgba(0,0,0,0.02));
  transition: border-color 600ms ease, background 600ms ease;
}
.syn-23-axis + .syn-23-axis { margin-top: 6px; }

.syn-23-axis-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.syn-23-axis-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--row-accent, var(--p-accent, currentColor));
  transition: color 600ms ease;
}
.syn-23-axis-planet {
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.55;
}
.syn-23-axis-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--row-accent, var(--p-accent, currentColor));
  flex: 1 1 100%;
  margin-top: 2px;
  transition: color 600ms ease;
}
.syn-23-axis-voice {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.92;
}

/* Planet colour overrides on the axis */
.syn-23-axis[data-planet="sun"]     { --row-accent:#d4b94a; --row-bg:rgba(212,185,74,0.06); }
.syn-23-axis[data-planet="moon"]    { --row-accent:#c3d4e0; --row-bg:rgba(195,212,224,0.06); }
.syn-23-axis[data-planet="mars"]    { --row-accent:#c44b44; --row-bg:rgba(196,75,68,0.07); }
.syn-23-axis[data-planet="mercury"] { --row-accent:#d89a4a; --row-bg:rgba(216,154,74,0.06); }
.syn-23-axis[data-planet="jupiter"] { --row-accent:#6b84c9; --row-bg:rgba(107,132,201,0.06); }
.syn-23-axis[data-planet="venus"]   { --row-accent:#4ea98a; --row-bg:rgba(78,169,138,0.06); }
.syn-23-axis[data-planet="saturn"]  { --row-accent:#8a82b8; --row-bg:rgba(138,130,184,0.06); }

.syn-23-card--hour-only {
  opacity: 0.95;
}
.syn-23-card--hour-only .syn-23-axis--hour {
  margin-top: 6px;
}

/* Mobile tightening */
@media (max-width: 640px) {
  .syn-23-axis { padding: 6px 8px 8px; }
  .syn-23-axis-value { font-size: 0.95rem; }
  .syn-23-axis-voice { font-size: 0.82rem; }
}

/* Hide the old (now-unused) thread classes if they linger anywhere */
.syn-23-thread, .syn-23-thread-row { display: none; }

/* ============================================================
   The Thread — promoted to top of Daily Rite
   The personalized narrative is the lede; the structured thread
   attributes (Day, Hour, Element/Planet/Number echoes) appear
   below as planet-tinted marker pills, anchoring the prose to
   the actual day's data.
   ============================================================ */
.syn-23-section--thread {
  border: 1px solid var(--p-edge, rgba(0,0,0,0.08));
  background: var(--p-bg, rgba(0,0,0,0.02));
  border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
}
.syn-23-thread-narrative {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.syn-23-thread-narrative--secondary {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-top: 0.5rem;
}
.syn-23-thread-gap {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.88rem;
  opacity: 0.78;
  font-style: italic;
}

.syn-thread-markers {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--p-edge, rgba(0,0,0,0.08));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.syn-thread-marker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--marker-bg, rgba(0,0,0,0.02));
  border-left: 3px solid var(--marker-accent, var(--p-accent, currentColor));
  transition: border-color 600ms ease, background 600ms ease;
}
.syn-thread-axis {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--marker-accent, var(--p-accent, currentColor));
  min-width: 84px;
  transition: color 600ms ease;
}
.syn-thread-pill {
  font-size: 0.78rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.syn-thread-pill--primary {
  background: var(--marker-accent-soft, rgba(0,0,0,0.08));
  color: var(--marker-accent, var(--p-accent, currentColor));
  font-weight: 700;
  transition: background 600ms ease, color 600ms ease;
}
.syn-thread-pill--muted {
  background: transparent;
  font-size: 0.74rem;
  opacity: 0.6;
  letter-spacing: 0.3px;
  padding: 3px 4px;
}

/* Per-planet tinting on each marker row */
.syn-thread-marker[data-planet="sun"]     { --marker-accent:#d4b94a; --marker-accent-soft:rgba(212,185,74,0.16); --marker-bg:rgba(212,185,74,0.05); }
.syn-thread-marker[data-planet="moon"]    { --marker-accent:#c3d4e0; --marker-accent-soft:rgba(195,212,224,0.16); --marker-bg:rgba(195,212,224,0.04); }
.syn-thread-marker[data-planet="mars"]    { --marker-accent:#c44b44; --marker-accent-soft:rgba(196,75,68,0.16); --marker-bg:rgba(196,75,68,0.06); }
.syn-thread-marker[data-planet="mercury"] { --marker-accent:#d89a4a; --marker-accent-soft:rgba(216,154,74,0.16); --marker-bg:rgba(216,154,74,0.05); }
.syn-thread-marker[data-planet="jupiter"] { --marker-accent:#6b84c9; --marker-accent-soft:rgba(107,132,201,0.16); --marker-bg:rgba(107,132,201,0.05); }
.syn-thread-marker[data-planet="venus"]   { --marker-accent:#4ea98a; --marker-accent-soft:rgba(78,169,138,0.16); --marker-bg:rgba(78,169,138,0.05); }
.syn-thread-marker[data-planet="saturn"]  { --marker-accent:#8a82b8; --marker-accent-soft:rgba(138,130,184,0.16); --marker-bg:rgba(138,130,184,0.05); }

/* Echo markers (Element / Planet / Number) — use a neutral accent */
.syn-thread-marker--echo {
  --marker-accent: var(--p-accent, currentColor);
  --marker-accent-soft: var(--p-soft, rgba(0,0,0,0.08));
  --marker-bg: var(--p-bg, rgba(0,0,0,0.02));
}

/* The old standalone lede is gone — guard against orphans */
.syn-23-lede, .syn-23-gap-note { display: none; }

@media (max-width: 640px) {
  .syn-23-section--thread { padding: 0.85rem 0.9rem 1rem; border-radius: 10px; }
  .syn-23-thread-narrative { font-size: 0.95rem; }
  .syn-thread-axis { min-width: 64px; font-size: 0.55rem; }
  .syn-thread-pill { font-size: 0.72rem; padding: 2px 7px; }
}

/* ============================================================
   Hero — Day primary, Hour referenced
   ============================================================ */
.syn-23-hero-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.syn-23-hero-hour {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hour-edge, rgba(0,0,0,0.12));
  border-left: 4px solid var(--hour-accent, var(--p-accent, currentColor));
  transition: border-color 600ms ease, background 600ms ease;
  min-width: 220px;
}
.syn-23-hero-hour-sigil {
  display: inline-flex;
  width: 38px;
  height: 38px;
  color: var(--hour-accent, var(--p-accent, currentColor));
  transition: color 600ms ease;
}
.syn-23-hero-hour-sigil svg { width: 100%; height: 100%; }
.syn-23-hero-hour-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.syn-23-hero-hour-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.55;
}
.syn-23-hero-hour-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hour-accent, var(--p-accent, currentColor));
  letter-spacing: 0.4px;
  transition: color 600ms ease;
}
.syn-23-hero-hour-rel {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 1px;
}
.syn-23-hero-hour-clock {
  font-size: 0.74rem;
  opacity: 0.78;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.syn-23-hero-hour[data-planet="sun"]     { --hour-accent:#d4b94a; --hour-edge:rgba(212,185,74,0.45); }
.syn-23-hero-hour[data-planet="moon"]    { --hour-accent:#c3d4e0; --hour-edge:rgba(195,212,224,0.40); }
.syn-23-hero-hour[data-planet="mars"]    { --hour-accent:#c44b44; --hour-edge:rgba(196,75,68,0.46); }
.syn-23-hero-hour[data-planet="mercury"] { --hour-accent:#d89a4a; --hour-edge:rgba(216,154,74,0.42); }
.syn-23-hero-hour[data-planet="jupiter"] { --hour-accent:#6b84c9; --hour-edge:rgba(107,132,201,0.44); }
.syn-23-hero-hour[data-planet="venus"]   { --hour-accent:#4ea98a; --hour-edge:rgba(78,169,138,0.42); }
.syn-23-hero-hour[data-planet="saturn"]  { --hour-accent:#8a82b8; --hour-edge:rgba(138,130,184,0.42); }

@media (max-width: 720px) {
  .syn-23-hero-hour {
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   The Golden Thread — branded with the project's gold accent
   ============================================================ */
.syn-23-section--golden-thread {
  position: relative;
  border: 1px solid rgba(212,185,74,0.45);
  background:
    linear-gradient(180deg, rgba(212,185,74,0.10) 0%, rgba(212,185,74,0.02) 60%);
  box-shadow:
    inset 0 1px 0 rgba(212,185,74,0.35),
    0 1px 4px rgba(212,185,74,0.15);
}
.syn-23-section--golden-thread::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,185,74,0.0) 5%,
    rgba(212,185,74,0.7) 50%,
    rgba(212,185,74,0.0) 95%,
    transparent 100%);
}
.syn-23-section--golden-thread .syn-23-h {
  color: #d4b94a;
  text-shadow: 0 0 12px rgba(212,185,74,0.18);
  letter-spacing: 1.5px;
}
.syn-23-section--golden-thread .syn-23-shead-glyph {
  color: #d4b94a;
}
.syn-23-thread-rede {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  font-style: italic;
  text-transform: uppercase;
  color: #b89a30;
  opacity: 0.85;
}
.syn-23-section--golden-thread .syn-thread-markers {
  border-top-color: rgba(212,185,74,0.35);
}

/* ============================================================
   Prognostics — icon sizing
   ============================================================ */
.syn-23-prog-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
}
.syn-23-prog-icon .syn-icon-prog {
  width: 100%;
  height: 100%;
  display: block;
}
.syn-23-prog-warn .syn-23-prog-icon { color: #a83232; }
.syn-23-prog-ausp .syn-23-prog-icon { color: #2c7a3a; }

@media (max-width: 480px) {
  .syn-23-prog-icon { width: 24px; height: 24px; }
}

/* ============================================================
   Animal grid — multiple allies per axis (Day, Hour)
   ============================================================ */
.syn-23-card--animals .syn-23-card-glyph {
  align-self: flex-start;
}
.syn-23-animal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.syn-23-animal-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  transition: background 300ms ease, border-color 300ms ease;
}
.syn-23-animal-chip[data-primary="1"] {
  background: var(--row-accent-soft, rgba(0,0,0,0.08));
  border-color: var(--row-accent, var(--p-accent, currentColor));
  border-left-width: 3px;
}
.syn-23-animal-chip-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--row-accent, var(--p-accent, currentColor));
}
.syn-23-animal-chip[data-primary="1"] .syn-23-animal-chip-icon {
  width: 40px;
  height: 40px;
}
.syn-23-animal-chip-icon svg { width: 100%; height: 100%; }
.syn-23-animal-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.syn-23-animal-chip-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--row-accent, var(--p-accent, currentColor));
}
.syn-23-animal-chip[data-primary="1"] .syn-23-animal-chip-name {
  font-size: 1rem;
  font-weight: 700;
}
.syn-23-animal-chip-source {
  font-size: 0.72rem;
  opacity: 0.72;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.syn-23-animal-chip {
  align-items: flex-start;
}
.syn-23-animal-chip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.syn-23-animal-chip-line {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.3;
  font-weight: 500;
  margin-top: 1px;
}

@media (max-width: 480px) {
  .syn-23-animal-grid { grid-template-columns: 1fr; }
  .syn-23-animal-chip-icon { width: 28px; height: 28px; }
  .syn-23-animal-chip[data-primary="1"] .syn-23-animal-chip-icon { width: 36px; height: 36px; }
}

.syn-23-attrib {
  margin: 2rem auto 1rem;
  font-size: 0.72rem;
  opacity: 0.5;
  text-align: center;
  line-height: 1.5;
}
.syn-23-attrib a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.3);
}
.syn-23-attrib a:hover { opacity: 1; }

/* ============================================================
   Consultation — personalised LLM response + Eye of Horus loader
   ============================================================ */
.syn-consult-personal {
  /* On the dark Syncreticon background, a translucent gold tint reads as
     parchment — but TEXT must be light against it, not dark. */
  background: linear-gradient(180deg, rgba(212,185,74,0.12) 0%, rgba(212,185,74,0.04) 100%);
  border: 1px solid rgba(212,185,74,0.55);
  border-left: 4px solid #d4b94a;
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 1.5rem 0 2rem;
  box-shadow: 0 1px 14px rgba(212,185,74,0.18);
  color: #f0e5c6;  /* readable on the dark page background */
}
.syn-consult-personal [hidden] { display: none !important; }

.syn-consult-personal-head {
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(212,185,74,0.35);
}
.syn-consult-personal-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: #f0c95a;  /* warm gold heading */
  text-shadow: 0 0 8px rgba(212,185,74,0.25);
}
.syn-consult-personal-body p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 0.85rem;
  color: #f5ecd0 !important;  /* warm cream on dark — high contrast */
}
.syn-consult-personal-body p:last-child { margin-bottom: 0; }
.syn-consult-personal-error {
  font-size: 0.88rem;
  font-style: italic;
  opacity: 0.85;
  color: #ddd1b0;
  margin: 0;
}
.syn-consult-personal-tiergate {
  color: #f0c95a;
  font-style: normal;
  opacity: 1;
}

/* Eye of Horus loader — pulsating glow only, no caption text */
.syn-consult-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
}
.syn-consult-loader[hidden] { display: none !important; }
.syn-consult-loader-eye {
  display: inline-block;
  width: 96px;
  height: 60px;
  color: #d4b94a;
  animation: syn-eye-pulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(212,185,74,0.4));
  transform-origin: center center;
}
.syn-consult-loader-eye svg { width: 100%; height: 100%; }
@keyframes syn-eye-pulse {
  0%   { opacity: 0.45; transform: scale(0.96); filter: drop-shadow(0 0 2px rgba(212,185,74,0.25)); }
  50%  { opacity: 1;    transform: scale(1.04); filter: drop-shadow(0 0 14px rgba(212,185,74,0.85)); }
  100% { opacity: 0.45; transform: scale(0.96); filter: drop-shadow(0 0 2px rgba(212,185,74,0.25)); }
}
@media (prefers-reduced-motion: reduce) {
  .syn-consult-loader-eye { animation: none; opacity: 1; }
}

/* G-tier banner when viewing another user's consultation */
.syn-reading-viewer-mode {
  margin: 0.75rem 0 0;
  padding: 6px 12px;
  background: rgba(212,185,74,0.12);
  border-left: 3px solid #d4b94a;
  font-size: 0.85rem;
  color: #6a5320;
  border-radius: 0 4px 4px 0;
}

/* Prognostics signals in the consultation detail */
.syn-consult-signals {
  margin: 1.75rem 0;
}
.syn-consult-signals-h {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #6a5320;
  margin: 0 0 0.75rem;
  font-weight: 700;
}
.syn-consult-signals-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 1rem;
}
.syn-consult-signal {
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 8px 12px;
  border-left: 3px solid;
}
.syn-consult-signals-warn .syn-consult-signal { border-color: #a83232; background: rgba(168,50,50,0.05); }
.syn-consult-signals-ausp .syn-consult-signal { border-color: #2c7a3a; background: rgba(44,122,58,0.05); }
.syn-consult-signal summary { cursor: pointer; font-size: 0.92rem; list-style: none; }
.syn-consult-signal summary::-webkit-details-marker { display: none; }
.syn-consult-signal-mark { margin-right: 6px; }
.syn-consult-signals-warn .syn-consult-signal-mark { color: #a83232; }
.syn-consult-signals-ausp .syn-consult-signal-mark { color: #2c7a3a; }
.syn-consult-signal-score {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 11px;
  background: rgba(0,0,0,0.08);
}
.syn-consult-signal-advice {
  margin: 8px 0 6px;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.45;
}
.syn-consult-signal-evidence {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.78rem;
  border-top: 1px dotted rgba(0,0,0,0.1);
  padding-top: 6px;
}
.syn-consult-signal-evidence li { margin: 4px 0; }
.syn-consult-signal-source { opacity: 0.7; }

/* ============================================================
   Teaching pages — Intelligence & Daemon, future planet/sephirah
   ============================================================ */
.syn-teaching {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.2rem 1.4rem 4rem;
}
.syn-teaching-head { text-align: center; margin: 0 0 2.4rem; }
.syn-teaching-head h1 {
  font-family: var(--syn-serif);
  font-size: 2.3rem;
  color: var(--syn-gold);
  margin: 0.4rem 0 0.9rem;
}
.syn-teaching-sub {
  font-family: var(--syn-serif);
  font-size: 1.05rem;
  color: var(--syn-text);
  line-height: 1.55;
  max-width: 740px;
  margin: 0 auto;
}
.syn-teaching-prose {
  max-width: 740px;
  margin: 0 auto 2.4rem;
  font-family: var(--syn-serif);
  line-height: 1.65;
  color: var(--syn-text);
}
.syn-teaching-prose p { margin: 0 0 1rem; }
.syn-teaching-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin: 0 0 2.8rem;
}
.syn-teaching-card {
  background: var(--syn-bg-card, rgba(0,0,0,0.18));
  border: 1px solid var(--syn-border, rgba(201,164,73,0.18));
  border-radius: 8px;
  padding: 1.2rem 1.1rem 1.0rem;
}
.syn-teaching-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--syn-border, rgba(201,164,73,0.18));
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
}
.syn-teaching-glyph {
  font-size: 1.6rem;
  color: var(--syn-gold);
  line-height: 1;
}
.syn-teaching-card-title {
  font-family: var(--syn-serif);
  font-size: 1.3rem;
  color: var(--syn-gold);
  margin: 0;
}
.syn-teaching-card-sephirah {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--syn-text-dim);
}
.syn-teaching-dl { margin: 0; }
.syn-teaching-dl dt {
  font-family: var(--syn-sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--syn-gold-low);
  margin-top: 0.85rem;
}
.syn-teaching-dl dd {
  margin: 0.15rem 0 0;
  font-family: var(--syn-serif);
  font-size: 0.95rem;
  color: var(--syn-text);
  line-height: 1.45;
}
.syn-teaching-note {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--syn-text-dim);
  line-height: 1.5;
}
.syn-teaching-citations {
  max-width: 740px;
  margin: 0 auto;
  font-family: var(--syn-serif);
  font-size: 0.92rem;
  color: var(--syn-text);
  line-height: 1.6;
}
.syn-teaching-citations h3 {
  font-family: var(--syn-serif);
  font-size: 1.1rem;
  color: var(--syn-gold);
  margin: 0 0 0.6rem;
}
.syn-teaching-citations ul {
  margin: 0; padding-left: 1.1rem;
}
.syn-teaching-citations li { margin-bottom: 0.5rem; }
.syn-teaching-closer { text-align: center; margin-top: 2.4rem; }
.syn-23-teach-link {
  color: var(--syn-gold-hi);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--syn-gold-low);
}
.syn-23-teach-link:hover { color: var(--syn-gold); border-bottom-color: var(--syn-gold); }

/* Per-divination section header glyphs */
.syn-23-shead-glyph--rune { font-family: "Noto Sans Runic", "Segoe UI Historic", "Georgia", serif; font-size: 30px; }
.syn-23-shead-glyph--iching { font-family: "Noto Sans Symbols", "Segoe UI Symbol", "Georgia", serif; font-size: 32px; line-height: 1; }
.syn-23-shead-glyph--geo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 1.1;
  color: var(--p-accent);
}
.syn-23-shead-glyph--geo .syn-23-geo-row { font-family: "Georgia", serif; letter-spacing: 4px; }
.syn-23-h-num { font-size: 0.72em; opacity: 0.7; font-weight: 400; margin-left: 4px; }

/* ============================================================
   Napoleon's Book of Fate — divination tool
   ============================================================ */
.syn-bof .syn-div-method { max-width: 46rem; margin-left: auto; margin-right: auto; }
.syn-bof-form { max-width: 44rem; margin: 0 auto; }
.syn-bof-step { margin: 1.6rem 0; }
.syn-bof-label { display: block; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #f0c95a; margin-bottom: 0.5rem; }
.syn-bof-hint { font-size: 0.9rem; color: #c9bd97; margin: 0 0 0.8rem; font-style: italic; }
.syn-bof-select {
  width: 100%; padding: 0.7rem 0.8rem; font-size: 1rem;
  background: rgba(15,12,22,0.7); color: #f5ecd0;
  border: 1px solid rgba(212,185,74,0.45); border-radius: 7px;
}
.syn-bof-board {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: linear-gradient(180deg, rgba(212,185,74,0.07), rgba(212,185,74,0.02));
  border: 1px solid rgba(212,185,74,0.35); border-radius: 10px; padding: 0.8rem;
}
.syn-bof-row {
  display: flex; align-items: center; gap: 0.6rem; min-height: 2.6rem;
  padding: 0.35rem 0.6rem; border-radius: 6px; cursor: pointer;
  background: rgba(15,12,22,0.5); border: 1px dashed rgba(212,185,74,0.3);
  transition: border-color 0.15s, background 0.15s;
}
.syn-bof-row:hover { background: rgba(212,185,74,0.08); }
.syn-bof-row:focus { outline: 2px solid rgba(212,185,74,0.5); outline-offset: 2px; }
.syn-bof-row--enough { border-color: rgba(143,196,166,0.6); border-style: solid; }
.syn-bof-rowlabel { width: 2rem; flex: 0 0 auto; color: #c9a04a; font-style: italic; text-align: right; }
.syn-bof-strokes { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 1.4rem; }
.syn-bof-mark { display: inline-block; width: 2px; height: 1.1rem; background: #e6c87a; transform: rotate(8deg); }
.syn-bof-count { flex: 0 0 auto; width: 2rem; text-align: center; color: #f0c95a; font-variant-numeric: tabular-nums; }
.syn-bof-board-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.syn-bof-note { max-width: 40rem; margin: 1.6rem auto 0; font-size: 0.82rem; color: rgba(201,189,151,0.75); text-align: center; font-style: italic; }

/* result */
.syn-bof-cast-summary { text-align: center; margin: 1.2rem 0; }
.syn-bof-sign { display: inline-flex; flex-direction: column; gap: 2px; padding: 0.6rem 1rem; border: 1px solid rgba(212,185,74,0.3); border-radius: 8px; background: rgba(15,12,22,0.5); }
.syn-bof-sign-row { color: #e6c87a; letter-spacing: 0.3em; font-size: 1.1rem; }
.syn-bof-sign-meta { margin: 0.7rem 0 0; font-size: 0.9rem; color: #c9bd97; }
.syn-bof-sign-meta strong { color: #f5ecd0; }
.syn-bof-answer {
  max-width: 40rem; margin: 1.6rem auto; padding: 1.6rem 1.8rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,185,74,0.1), transparent 70%), rgba(15,12,22,0.6);
  border: 1px solid rgba(212,185,74,0.4); border-left: 3px solid #e6c87a; border-radius: 0 8px 8px 0;
}
.syn-bof-answer p { font-family: var(--syn-serif, 'EB Garamond', Georgia, serif); font-size: 1.35rem; line-height: 1.5; color: #f5ecd0; font-style: italic; margin: 0; }
.syn-bof-about { max-width: 42rem; margin: 2rem auto 0; font-size: 0.88rem; color: #c9bd97; }
.syn-bof-about summary { cursor: pointer; color: #f0c95a; letter-spacing: 0.05em; }
.syn-bof-about p { line-height: 1.6; margin: 0.7rem 0; }


/* Book of Fate — tool→library cross-link */
.syn-bof-crosslink {
  max-width: 40rem; margin: 1.4rem auto 0; padding: 0.9rem 1.1rem;
  font-size: 0.92rem; line-height: 1.6; color: #c9bd97; text-align: center;
  border-top: 1px solid rgba(212,185,74,0.2);
}
.syn-bof-crosslink a { color: #f0c95a; text-decoration: none; border-bottom: 1px dotted rgba(240,201,90,0.5); }
.syn-bof-crosslink a:hover { color: #f5ecd0; }


/* ── The Book of Fate — deterministic daily/hourly oracle surface ── */
.syn-23-bof .syn-23-bof-sigil {
  color: #f0c95a;
  font-size: 1.5rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(240, 201, 90, 0.35);
}
.syn-23-bof-answer {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.7;
  color: #f5ecd0;
  border-left: 2px solid rgba(230, 200, 122, 0.55);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 0.9rem 0 0.4rem;
}
.syn-23-bof-links {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.syn-23-bof-link {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: #f0c95a;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 201, 90, 0.35);
  padding-bottom: 1px;
}
.syn-23-bof-link:hover { color: #ffe9a8; border-bottom-color: rgba(255, 233, 168, 0.7); }
.syn-23-bof-link--subtle { color: #c9bd97; border-bottom-color: rgba(201, 189, 151, 0.3); }
.syn-23-bof-link--subtle:hover { color: #e6c87a; border-bottom-color: rgba(230, 200, 122, 0.55); }


/* ============================================================= */
/*  Oracle entity reference — tappable names + popout card        */
/*  (The Syncreticon — The Explanation deep-links)               */
/* ============================================================= */

.syn-ref {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline;
  text-align: inherit;
  border-bottom: 1px dotted rgba(240, 201, 90, 0.65);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.syn-ref:hover,
.syn-ref:focus-visible {
  color: #f0c95a;
  border-bottom-color: #f0c95a;
  outline: none;
}

.syn-ref-pop {
  position: absolute;
  z-index: 1200;
  width: min(360px, calc(100vw - 24px));
  max-height: min(72vh, 560px);
  overflow-y: auto;
  background: rgba(20, 17, 12, 0.97);
  border: 1px solid rgba(230, 200, 122, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  padding: 16px 18px 14px;
  color: #f5ecd0;
  font-size: 0.92rem;
  line-height: 1.5;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.syn-ref-pop[hidden] { display: none; }

.syn-ref-pop-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: 0;
  color: #c9bd97;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.syn-ref-pop-close:hover { color: #f0c95a; }

.syn-ref-pop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-right: 22px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(201, 189, 151, 0.22);
  padding-bottom: 8px;
}
.syn-ref-pop-glyph {
  font-size: 1.4rem;
  color: #f0c95a;
  line-height: 1;
}
.syn-ref-pop-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  color: #f0c95a;
}

.syn-ref-pop-facet { margin: 0 0 9px; }
.syn-ref-pop-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c9bd97;
  margin-bottom: 1px;
}
.syn-ref-pop-text {
  margin: 0;
  color: #f5ecd0;
}

.syn-ref-pop-corr {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(201, 189, 151, 0.22);
  font-size: 0.78rem;
  color: #c9bd97;
  letter-spacing: 0.01em;
}

.syn-ref-pop-foot {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(201, 189, 151, 0.22);
}
.syn-ref-pop-link {
  color: #e6c87a;
  text-decoration: none;
  font-size: 0.85rem;
}
.syn-ref-pop-link:hover {
  color: #f0c95a;
  text-decoration: underline;
}

/* Reference note — quiet pointer to The Explanation at the foot of every book chapter */
.syn-reference-note {
  max-width: 42rem;
  margin: 2.5rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(212,185,74,0.22);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  color: rgba(201,189,151,0.72);
  font-style: italic;
}
.syn-reference-note a {
  color: #c9a04a;
  text-decoration: none;
  border-bottom: 1px dotted rgba(201,160,74,0.5);
  font-style: normal;
}
.syn-reference-note a:hover { color: #f0c95a; }

/* Guidebook tier backlinks — foot of The Explanation's chapters */
.syn-guide-tiers { text-align: left; max-width: 42rem; }
.syn-guide-tiers p { margin: 0 0 0.6rem; }
.syn-guide-tier-links {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(201,189,151,0.85);
}
.syn-guide-tier-links a {
  color: #c9a04a;
  text-decoration: none;
  border-bottom: 1px dotted rgba(201,160,74,0.5);
  font-style: normal;
}
.syn-guide-tier-links a:hover { color: #f0c95a; }

/* Public teaser landing for locked Syncreticon Originals */
.syn-book-teaser { max-width: 60rem; margin: 1.5rem auto 4rem; padding: 0 1rem; }
.syn-book-teaser-head { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1.2rem; }
.syn-book-teaser-head .syn-book-cover--lg { flex: 0 0 auto; width: 240px; max-width: 40vw; }
.syn-book-teaser-head .syn-book-cover--lg img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.syn-book-teaser-meta { flex: 1 1 320px; }
.syn-book-teaser-meta h1 { margin: 0 0 0.3rem; }
.syn-book-voice { font-style: italic; color: #c9bd97; margin: 0 0 0.8rem; font-size: 0.92rem; }
.syn-book-teaser-lock { color: #f0c95a; font-size: 0.95rem; margin: 1.2rem 0 0.6rem; }
.syn-book-teaser-cta { margin: 0.4rem 0 0; }
.syn-book-teaser-contents { margin-top: 2.6rem; border-top: 1px solid rgba(212,185,74,0.22); padding-top: 1.4rem; }
.syn-book-teaser-contents h2 { font-size: 1.2rem; color: #f5ecd0; margin: 0 0 0.8rem; }
.syn-book-teaser-toc { columns: 2; column-gap: 2.5rem; padding-left: 1.2rem; margin: 0; color: #d5cba8; line-height: 1.8; font-size: 0.95rem; }
.syn-book-teaser-toc li { break-inside: avoid; }
@media (max-width: 640px) { .syn-book-teaser-toc { columns: 1; } }
.syn-book-teaser-foot { margin-top: 1.4rem; font-size: 0.88rem; color: rgba(201,189,151,0.8); font-style: italic; }
.syn-book-teaser-foot a { color: #c9a04a; }

/* ── Password reveal ───────────────────────────────────────────────────────
   A show/hide control inside every password box, so a typo can be caught
   before it becomes a failed sign-in or a mismatched confirmation.

   The wrapper and button are injected by js/password-reveal.js; without
   JavaScript the field is an ordinary password input and nothing here
   applies. Extra right padding on the input keeps the text clear of the
   button rather than sliding underneath it. */
.syn-pw-wrap {
  position: relative;
  display: block;
}
.syn-pw-wrap > input {
  /* Room for the button. Overrides the shared 1rem right padding. */
  padding-right: 3rem !important;
}
.syn-pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0 var(--syn-r) var(--syn-r) 0;
  color: var(--syn-text-mute);
  cursor: pointer;
  transition: color 0.15s;
}
.syn-pw-toggle:hover { color: var(--syn-gold); }
.syn-pw-toggle:focus-visible {
  outline: 2px solid var(--syn-gold);
  outline-offset: -2px;
  color: var(--syn-gold);
}
.syn-pw-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  pointer-events: none;
}
/* Only one of the two icons shows, chosen by the button's pressed state. */
.syn-pw-toggle .syn-pw-open { display: none; }
.syn-pw-toggle[aria-pressed="true"] .syn-pw-open { display: block; }
.syn-pw-toggle[aria-pressed="true"] .syn-pw-shut { display: none; }

/* Edge and IE render their own reveal control; two would be confusing. */
.syn-pw-wrap > input::-ms-reveal,
.syn-pw-wrap > input::-ms-clear { display: none; }

/* ======================================================================
   Footer navigation — the way out from the bottom of a long page
   ====================================================================== */
.syn-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  max-width: 900px;
  margin: 0 auto 1.6rem;
  padding: 0 1rem 1.4rem;
  border-bottom: 1px solid rgba(200, 168, 75, 0.14);
}
.syn-footer-nav a {
  color: #b3a895;
  font-size: 0.93rem;
  text-decoration: none;
}
.syn-footer-nav a:hover { color: var(--syn-gold-hi, #e6c87a); }
.syn-footer-nav a:focus-visible { outline: 2px solid #d9b45a; outline-offset: 3px; border-radius: 4px; }
.syn-footer-uptop { color: var(--syn-gold-hi, #e6c87a) !important; }
/* Jumping the full height of a long reading is disorienting; easing it is not,
   unless the reader has asked the system for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The reading's opening line. Sits above the thread statement and carries a
   little more weight than the lines that follow it. */
.syn-23-thread-narrative--lede {
  font-size: 1.06em;
  color: var(--syn-gold-hi, #e6c87a);
  margin-bottom: 0.7em;
}

/* ============================================================
   Chart panels — positions and angles, side by side beneath the
   wheel. Not behind a disclosure: these are the chart, not an
   appendix to it, and a reader should not have to find them.

   The two tables share the drawing's vocabulary deliberately —
   the same sign glyphs, the same three aspect inks, the same
   weight for a tight angle as the wheel gives its lines — so the
   eye can move between picture and table without relearning
   anything.
   ============================================================ */
.syn-chart-panels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.4rem;
  margin:1.8rem auto 0;
  align-items:start;
  /* The prose column is ~680px, which is right for reading and too narrow for
     two tables — at that width auto-fit silently collapses to one column and
     the panels stack. A figure should not be sized by the paragraph next to it,
     so these break out of the column, up to the room actually available. */
  width:min(1100px,100vw - 2rem);
  max-width:1100px;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
.syn-chart-panel{
  background:rgba(255,255,255,.018);
  border:1px solid rgba(160,140,200,.18);
  border-radius:4px;
  padding:1rem 1.1rem 1.2rem;
  min-width:0;                       /* lets a wide table scroll instead of
                                        forcing the grid column wider */
}
.syn-chart-panel > h3{
  font-family:'Sorts Mill Goudy',Georgia,serif;
  font-size:1.02rem;letter-spacing:.4px;color:#e6c87a;
  margin:0 0 .2rem;font-weight:normal;
}
.syn-chart-panel > p.syn-chart-panel-sub{
  color:#8e8677;font-size:.82rem;margin:0 0 .9rem;
}
.syn-chart-col{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.syn-chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- positions ---- */
table.syn-chart-table{
  width:100%;border-collapse:collapse;font-size:.88rem;
  font-variant-numeric:tabular-nums;
}
.syn-chart-table th,.syn-chart-table td{
  padding:.34rem .45rem;text-align:left;
  border-bottom:1px solid rgba(160,140,200,.10);
  white-space:nowrap;
}
.syn-chart-table thead th{
  color:#8e8677;font-weight:normal;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.7px;
  border-bottom:1px solid rgba(160,140,200,.28);
}
.syn-chart-table tbody th{color:#e9e2d4;font-weight:normal}
.syn-chart-table tbody tr:last-child th,
.syn-chart-table tbody tr:last-child td{border-bottom:none}
.syn-chart-glyph{
  font-size:1.15rem;color:#ffd77a;padding-right:.15rem;
}
.syn-chart-signglyph{font-size:1.05rem}
.syn-el-fire  .syn-chart-signglyph,.syn-sg-fire {color:#f08a63}
.syn-el-earth .syn-chart-signglyph,.syn-sg-earth{color:#93c97a}
.syn-el-water .syn-chart-signglyph,.syn-sg-water{color:#7fb4e0}
.syn-el-air   .syn-chart-signglyph,.syn-sg-air  {color:#f0cf6a}
.syn-chart-rx{color:#e87a55;font-size:.78rem}
.syn-chart-dignity{color:#8e8677;font-size:.78rem;font-style:italic}

/* ---- aspect grid ---- */
table.syn-chart-grid{border-collapse:collapse;font-size:.82rem;margin:0 auto}
.syn-chart-grid th,.syn-chart-grid td{
  width:1.85rem;height:1.85rem;text-align:center;padding:0;
  border:1px solid rgba(160,140,200,.10);
}
.syn-chart-grid th[scope=row]{
  text-align:right;padding-right:.4rem;width:auto;
  color:#e9e2d4;font-weight:normal;border:none;
}
.syn-chart-grid-foot th{
  color:#ffd77a;font-weight:normal;border:none;font-size:1.05rem;
}
.syn-grid-cell{font-size:1.02rem;line-height:1}
/* A tight angle reads heavier here for the same reason it draws heavier on the
   wheel — the eye should find the same things first in both. */
.syn-grid-exact{font-weight:bold;font-size:1.14rem}
.syn-chart-key{color:#b9b0a0;font-size:.83rem;margin:.8rem 0 0}
.syn-chart-swatch{
  display:inline-block;width:1.4rem;height:3px;border-radius:2px;
  vertical-align:middle;margin:0 .35rem 0 .6rem;
}
.syn-chart-key .syn-chart-swatch:first-child{margin-left:0}

/* ---- fixed stars ---- */
.syn-star-list{list-style:none;margin:.2rem 0 0;padding:0}
.syn-star-list li{color:#b9b0a0;font-size:.88rem;padding:.28rem 0;
  border-bottom:1px solid rgba(160,140,200,.10)}
.syn-star-list li:last-child{border-bottom:none}
.syn-star-list b{color:#e9e2d4;font-weight:normal;margin-right:.3rem}
.syn-star-tag{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;
  border-radius:9px;background:rgba(200,168,75,.14);color:#d9b45a;
  font-size:.72rem;letter-spacing:.03em;cursor:help}
.syn-star-royal{background:rgba(232,122,85,.16);color:#e8a07a}

/* ---- balance bars ---- */
.syn-chart-breakdown{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.1rem 1.6rem;margin:1.4rem 0 0;
}
.syn-chart-panel .syn-chart-breakdown{margin-top:.2rem}
.syn-chart-bars{list-style:none;margin:.3rem 0 0;padding:0}
.syn-chart-bar{
  display:grid;grid-template-columns:4.2rem 1fr 1.6rem;
  align-items:center;gap:.5rem;margin:.24rem 0;font-size:.83rem;
}
.syn-chart-bar-label{color:#b9b0a0}
.syn-chart-bar-track{background:rgba(160,140,200,.14);height:6px;border-radius:3px}
.syn-chart-bar-fill{display:block;height:6px;border-radius:3px;background:#e6c87a}
.syn-el-fire  .syn-chart-bar-fill{background:#f08a63}
.syn-el-earth .syn-chart-bar-fill{background:#93c97a}
.syn-el-water .syn-chart-bar-fill{background:#7fb4e0}
.syn-el-air   .syn-chart-bar-fill{background:#f0cf6a}
.syn-chart-bar-count{color:#8e8677;text-align:right}
.syn-chart-balance > small{color:#8e8677;font-size:.8rem;display:block;margin-top:.4rem}

@media (max-width:640px){
  .syn-chart-panels{gap:1.1rem}
  .syn-chart-panel{padding:.85rem .8rem 1rem}
  .syn-chart-table{font-size:.82rem}
  .syn-chart-grid th,.syn-chart-grid td{width:1.6rem;height:1.6rem}
}

/* Form-wide error summary. A field whose errors are never rendered fails in
   total silence — the page simply comes back and the reader believes it saved.
   This reads the form itself, so it covers fields added later too. */
.syn-form-errors {
  border: 1px solid var(--syn-warn, #b4553a);
  border-left-width: 3px;
  background: rgba(180, 85, 58, 0.08);
  padding: 0.9rem 1rem;
  margin: 0 0 1.4rem;
  border-radius: 3px;
}
.syn-form-errors-title {
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--syn-warn, #b4553a);
}
.syn-form-errors ul { margin: 0; padding-left: 1.1rem; }
.syn-form-errors li { margin: 0.2rem 0; color: var(--syn-text, inherit); }
.syn-form-errors a { color: inherit; text-underline-offset: 2px; }

/* Harmony: the people a member has asked the Oracle to keep. The chart used to
   forget the partner the moment it was drawn, so every visit began by typing a
   birth date, a time and a place again. */
.syn-harmony-saved { margin: 0 0 1.6rem; }
.syn-harmony-saved-h {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8d8471; margin: 0 0 .5rem;
}
.syn-harmony-saved-list { list-style: none; margin: 0; padding: 0; }
.syn-harmony-saved-item {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid rgba(240, 201, 90, .12);
}
.syn-harmony-saved-item.is-open { border-left: 2px solid rgba(240,201,90,.55);
  padding-left: .6rem; }
.syn-harmony-saved-open { font-weight: 600; text-underline-offset: 2px; }
.syn-harmony-saved-meta { color: #8d8471; font-size: .85rem; }
.syn-harmony-forget { margin-left: auto; }
.syn-harmony-forget-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #8d8471; font-size: .8rem; text-decoration: underline;
  text-underline-offset: 2px;
}
.syn-harmony-forget-btn:hover { color: #b4553a; }
.syn-field-check { display: flex; align-items: baseline; gap: .5rem;
  flex-wrap: wrap; margin: .8rem 0; }

/* Harmony: save is a button. The checkbox that used to sit here rendered
   perfectly and nobody found it — a reader looking for a way to save looks
   for something to press. */
.syn-harmony-actions { display: flex; gap: .6rem; flex-wrap: wrap;
  margin: 1.1rem 0 .35rem; }
.syn-harmony-actions-hint { margin: 0 0 .5rem; }

/* The Astrology page's vocabulary, explained at the reader's level. A two-column
   definition list rather than a wall: the term is what the eye is scanning for. */
.syn-astro-glossary { margin: 1.4rem 0; }
.syn-astro-glossary > summary { cursor: pointer; font-weight: 600; }
.syn-astro-glossary-list {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: .45rem 1.1rem; margin: .9rem 0 .6rem;
}
.syn-astro-glossary-list dt {
  font-weight: 600; color: #d9b45a; padding-top: .05rem;
}
.syn-astro-glossary-list dd {
  margin: 0; color: #b9b0a0; line-height: 1.65;
}
.syn-astro-glossary-note { margin: 0; font-size: .84rem; color: #8d8471; }
@media (max-width: 560px) {
  .syn-astro-glossary-list { grid-template-columns: 1fr; gap: .15rem; }
  .syn-astro-glossary-list dd { margin: 0 0 .7rem; }
}

/* Chart controls. Three naked selects in a row, offering "Wholesign" and "Ink"
   with nothing to say what either would do, is not a choice — it is a dare.
   A grid, real names, and each control stating its own job. */
.syn-chart-controls-set {
  border: 1px solid rgba(240, 201, 90, .18); border-radius: 4px;
  padding: 1rem 1.1rem 1.1rem; margin: 1.2rem 0;
}
.syn-chart-controls-legend {
  padding: 0 .45rem; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8d8471;
}
.syn-chart-controls-set {
  display: grid; gap: 1rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.syn-chart-controls-legend { grid-column: 1 / -1; }
.syn-chart-control { display: flex; flex-direction: column; gap: .3rem; }
.syn-chart-control select { width: 100%; }
.syn-chart-control .syn-field-hint { margin: 0; line-height: 1.5; }
.syn-chart-control-current { color: #b9b0a0; }
.syn-chart-control--go { justify-content: flex-end; }
@media (max-width: 560px) {
  .syn-chart-controls-set { grid-template-columns: 1fr; }
}

/* A glossary term marked where it stands. Quieter than an entity reference —
   these appear inside running prose and a whole paragraph of bright dotted
   underlines stops meaning "here is a word you may not know". */
.syn-ref--term {
  border-bottom-style: dotted; border-bottom-width: 1px;
  border-bottom-color: rgba(217, 180, 90, .55);
  color: inherit; font: inherit; background: none; padding: 0;
  cursor: help;
}
.syn-ref--term:hover, .syn-ref--term:focus-visible { color: #d9b45a; }

/* The key to the aspect grid. Its symbols carried their names only in a title
   attribute — nothing a touch device shows. */
.syn-chart-aspect-key {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: .35rem 1rem; margin: .9rem 0 .3rem;
  font-size: .88rem;
}
.syn-chart-aspect-key dt { color: #d9b45a; font-weight: 600; }
.syn-chart-aspect-key dd { margin: 0; color: #b9b0a0; line-height: 1.6; }
.syn-chart-aspect-glyph { display: inline-block; width: 1.4em; }
@media (max-width: 560px) {
  .syn-chart-aspect-key { grid-template-columns: 1fr; gap: .1rem; }
  .syn-chart-aspect-key dd { margin: 0 0 .6rem; }
}

/* Eclipses. All of them, with the reader's own marked — an eclipse is a public
   event and personal relevance is an annotation, not a filter. */
.syn-eclipse { padding: .3rem 0; border-left: 2px solid transparent;
  padding-left: .6rem; }
.syn-eclipse--exact, .syn-eclipse--strong {
  border-left-color: rgba(240, 201, 90, .78);
  background: rgba(240, 201, 90, .06);
}
.syn-eclipse--wide {
  border-left-color: rgba(240, 201, 90, .34);
  background: rgba(240, 201, 90, .025);
}
.syn-eclipse-near { display: block; color: #7d7565; font-size: .82rem;
  padding-top: .1rem; }
.syn-eclipse-tag--wide { background: rgba(217, 180, 90, .35); color: #f0e6cc; }
.syn-eclipse-what { color: #b9b0a0; }
.syn-eclipse-tag {
  display: inline-block; margin-left: .4rem; padding: 0 .4rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: #1b1710; background: #d9b45a; border-radius: 2px; vertical-align: 1px;
}
.syn-eclipse-touch { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .1rem; }
.syn-eclipse-touch li { color: #cfc6b4; font-size: .86rem; padding: .1rem 0; }
.syn-eclipse-means { display: block; color: #8d8471; font-size: .82rem; }
.syn-eclipse-none { display: block; margin-top: .5rem; color: #8d8471; }


/* Eclipses as a table: four separate facts — when, what, where, whom — that a
   run-on sentence made the reader parse apart every time. */
.syn-eclipse-table { width: 100%; border-collapse: collapse; }
.syn-eclipse-table th, .syn-eclipse-table td {
  vertical-align: top; padding: .45rem .6rem; text-align: left;
}
.syn-eclipse-table tbody tr { border-top: 1px solid rgba(240, 201, 90, .10); }
.syn-eclipse-when { white-space: nowrap; font-weight: 600; color: #cfc6b4; }
.syn-eclipse-where { white-space: nowrap; color: #b9b0a0; }
.syn-eclipse-who { min-width: 14rem; }
.syn-eclipse-table .syn-eclipse--exact,
.syn-eclipse-table .syn-eclipse--strong { background: rgba(240, 201, 90, .06); }
.syn-eclipse-table .syn-eclipse--wide { background: rgba(240, 201, 90, .025); }
.syn-eclipse-table .syn-eclipse--exact th,
.syn-eclipse-table .syn-eclipse--strong th { box-shadow: inset 2px 0 rgba(240,201,90,.78); }
.syn-eclipse-table .syn-eclipse--wide th { box-shadow: inset 2px 0 rgba(240,201,90,.34); }
.syn-eclipse-who .syn-eclipse-touch b { color: #d9b45a; font-weight: 600; }
@media (max-width: 620px) {
  .syn-eclipse-table th, .syn-eclipse-table td { padding: .35rem .4rem;
    font-size: .86rem; }
  .syn-eclipse-who { min-width: 0; }
}

/* An eclipse that misses the member but lands on somebody they have kept. Its
   own mark, not a borrowed "yours" — that would claim something untrue. */
.syn-eclipse-table .syn-eclipse--kin { background: rgba(143, 182, 223, .06); }
.syn-eclipse-table .syn-eclipse--kin th {
  box-shadow: inset 2px 0 rgba(143, 182, 223, .6);
}
.syn-eclipse-tag--kin { background: rgba(143, 182, 223, .8); color: #10151b; }

/* The signs an eclipse crosses — the one it falls in and the three square and
   opposite. The date is when the Sun crosses that same degree, so a reader can
   place themselves knowing only their birthday. */
.syn-eclipse-signs { min-width: 12rem; }
.syn-eclipse-sign { display: block; color: #b9b0a0; font-size: .86rem;
  line-height: 1.5; }
.syn-eclipse-sign.is-host { color: #d9b45a; font-weight: 600; }
/* Why this sign is in the list at all — three of the four are here on an
   aspect, not because the eclipse is in them. */
.syn-eclipse-rel { display: block; font-style: normal; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: #6f6857; }
.syn-eclipse-sign.is-host .syn-eclipse-rel { color: #a08744; }
.syn-eclipse-sign { padding-block: .18rem; }
.syn-eclipse-sign + .syn-eclipse-sign {
  border-top: 1px solid rgba(255, 255, 255, .05); margin-top: .18rem;
}
.syn-eclipse-sign i { display: block; color: #7d7565; font-style: normal;
  font-size: .8rem; }

/* Eclipses across two charts. One that falls on both at once is the thing the
   Harmony page exists to notice. */
.syn-harmony-eclipses { margin: 2rem 0 0; }
.syn-harmony-eclipses-h {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8d8471; margin: 0 0 .5rem;
}
.syn-eclipse-table .syn-eclipse--both { background: rgba(240, 201, 90, .08); }
.syn-eclipse-table .syn-eclipse--both th {
  box-shadow: inset 2px 0 rgba(240, 201, 90, .85);
}