/* ═══════════════════════════════════════════════════════════
   ROOTED STARS × PETRAPIXEL GRID SHELL
   Generated conversion: keeps Rooted Stars colors/components while
   moving every page/post onto the PetraPixel header/sidebar/main/footer layout.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Crimson+Text:ital@0;1&display=swap');

:root {
  --background-color: #1a1410;
  --content-background-color: rgba(42, 36, 31, 0.72);
  --sidebar-background-color: rgba(42, 36, 31, 0.68);
  --text-color: #e0d9d0;
  --sidebar-text-color: #d4cfc8;
  --link-color: #d4a574;
  --link-color-hover: #f0e8e0;
  --font: 'Crimson Text', Georgia, serif;
  --heading-font: 'Caveat', cursive;
  --font-size: 18px;
  --margin: 14px;
  --padding: 22px;
  --border: 1px solid var(--color-copper);
  --round-borders: 8px;
  --sidebar-width: 220px;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.5;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-charcoal) 80%, var(--color-stone) 20%) 0%,
    var(--color-deep-night) 50%,
    color-mix(in srgb, var(--color-charcoal) 70%, var(--color-deep-night) 30%) 100%);
  background-attachment: fixed;
}

::selection { background: rgba(212, 165, 116, 0.28); }

.layout {
  width: min(100%, 1240px);
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
  align-items: start;
}

main#content {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: var(--rs-panel-sync-height, 60vh);
  height: var(--rs-panel-sync-height, 60vh);
  min-width: 0;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
  box-shadow: inset 0 0 28px rgba(255,255,255,0.025), 0 14px 34px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
main#content::-webkit-scrollbar {
  width: 10px;
}

main#content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

main#content::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 8px;
  opacity: 0.7;
}

main#content::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
  opacity: 1;
}

header.rs-site-header {
  grid-area: header;
  border: var(--border);
  border-radius: var(--round-borders);
  background: rgba(42, 36, 31, 0.74);
  box-shadow: inset 0 0 28px rgba(184, 134, 11, 0.07), 0 14px 34px rgba(0,0,0,0.28);
  overflow: visible;
}

.header-content { padding: 1.05rem var(--padding) 1.15rem; text-align: center; }
.header-title { font-family: var(--heading-font); font-size: 2.4em; line-height: 1; font-weight: 700; letter-spacing: 0.04em; }
.header-title a { border-bottom: 0; color: var(--color-gold); text-decoration: none; }
.header-title a:hover { color: var(--color-warm); }
.header-subtitle { display: block; margin-top: 0.28rem; color: var(--text-secondary); font-size: 0.95em; font-style: italic; }

aside.left-sidebar { grid-area: leftSidebar; }
aside.right-sidebar { grid-area: rightSidebar; }

aside.left-sidebar,
aside.right-sidebar {
  position: sticky;
  top: 1rem;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: 0.85rem;
  color: var(--sidebar-text-color);
  box-shadow: inset 0 0 24px rgba(184, 134, 11, 0.055), 0 10px 26px rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
}

.sidebar-title {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--color-gold);
  font-size: 1.45em;
  line-height: 1;
  text-align: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--color-accent);
}

.sidebar-title::before { content: "☾ "; opacity: 0.82; }
.sidebar-title::after { content: " ☽"; opacity: 0.82; }
.sidebar-section:not(:last-child) { margin-bottom: 1rem; }
.sidebar-section p { margin: 0.35rem 0; font-size: 0.92em; line-height: 1.45; color: var(--text-light); }
.sidebar-section ul, .sidebar-section ol { padding-left: 1.15em; margin: 0.4rem 0; }
.sidebar-section li { margin: 0.18rem 0; }
.sidebar-section a { display: block; padding: 0.22rem 0.35rem; margin: 0.13rem 0; border-bottom: 1px dotted rgba(199, 181, 145, 0.35); color: var(--text-secondary); }
.sidebar-section a:hover, .sidebar-section a:focus { color: var(--color-warm); background: rgba(184, 134, 11, 0.12); border-bottom-color: var(--color-gold); }
.sidebar-section blockquote { background: rgba(0,0,0,0.18); border-left: 3px solid var(--color-copper); padding: 0.7rem; margin: 0.7rem 0; border-radius: 6px; }

.site-button { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.site-button textarea { width: 100%; min-height: 4.5rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.72em; color: var(--text-secondary); background: rgba(0,0,0,0.35); border: 1px solid var(--color-accent); border-radius: 4px; padding: 0.45rem; }
.site-button img, .button-strip img { image-rendering: auto; max-width: 100%; }
.button-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.tiny-button { display: inline-block; text-align: center; min-width: 70px; padding: 0.16rem 0.38rem; border: 1px solid var(--color-accent); background: rgba(26,20,16,0.72); color: var(--color-warm); font-size: 0.85em; }

footer.rs-site-footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.85em;
  padding: 0.9rem 1rem;
  background: rgba(42, 36, 31, 0.68);
  display: flex;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
}
footer.rs-site-footer p { margin: 0.25rem 0; }

nav.main-nav { margin-top: 0.8rem; margin-bottom: 0; }
nav.main-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin: 0; padding: 0; list-style: none; user-select: none; }
nav.main-nav li { list-style: none; margin: 0; padding: 0; position: relative; }
nav.main-nav a, nav.main-nav strong, nav.main-nav summary { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid rgba(199,181,145,0.38); border-radius: 999px; background: rgba(26,20,16,0.35); text-decoration: none; }
nav.main-nav a.active { color: var(--color-warm); border-color: var(--color-gold); box-shadow: 0 0 14px rgba(212,165,116,0.18); }

main#content p, main#content .image, main#content .full-width-image, main#content .two-columns { margin: 0.75em 0; }
main#content ol, main#content ul { margin: 0.5em 0; padding-left: 1.5em; }
main#content ol li, main#content ul li { margin-bottom: 0.2em; line-height: 1.35; }
main#content blockquote { background: rgba(0,0,0,0.14); padding: 15px; margin: 1em 0; border-left: 3px solid var(--color-copper); border-radius: 8px; }
main#content hr { border: 0; border-top: 1px dashed var(--color-accent); margin: 1.5em 0; }
main#content h1:first-child, main#content h2:first-child, main#content h3:first-child { margin-top: 0; }
.two-columns { display: flex; gap: 1.5em; }
.two-columns > * { flex: 1 1 0; margin: 0; }
.image { display: block; width: auto; height: auto; max-width: 100%; }
.full-width-image { display: block; width: 100%; height: auto; }
.images { display: flex; gap: 10px; width: 100%; }
.images img { width: 100%; height: auto; margin: 0; overflow: hidden; }

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.05rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}
#skip-to-content-link:focus, #skip-to-content-link:focus-within { transform: translateY(0); }

@media (max-width: 980px) {
  .layout { grid-template: "header" auto "main" auto "leftSidebar" auto "rightSidebar" auto "footer" auto / 1fr; }
  aside.left-sidebar, aside.right-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  main#content { max-height: none; }
}

@media (max-width: 640px) {
  body { padding: 8px; font-size: 16px; }
  .header-title { font-size: 1.8em; }
  nav.main-nav ul { flex-direction: column; align-items: center; gap: 0.35rem; }
  nav.main-nav a { min-width: min(17rem, 86vw); }
  aside.left-sidebar, aside.right-sidebar { grid-template-columns: 1fr; }
  .sidebar-section { max-height: 14rem; overflow: auto; }
  .sidebar-title { position: sticky; top: -0.85rem; background: rgba(42,36,31,0.96); z-index: 1; }
  main#content { padding: 15px; }
  .images { flex-wrap: wrap; }
  .images img { width: 100%; }
  .two-columns { flex-direction: column; }
}


/* ═════════ ROOTED STARS EXISTING COMPONENT STYLES ═════════ */
/* ═══════════════════════════════════════════════════════════
   ROOTED STARS: GRIMOIRE REDESIGN
   Threshold Magic. Whisp's Forest. Hekate's Keys.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   CRESCENT MOON BACK-TO-TOP BUTTON
   ═══════════════════════════════════════════════════════════ */

.moon-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border: none;
  background: radial-gradient(circle at 30% 50%, transparent 45%, var(--color-moon) 45%);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.moon-top:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 20px rgba(245, 241, 232, 0.2);
}

.moon-top.show {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 600px) {
  .moon-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
  }
}




/* ═══════════════════════════════════════════════════════════
   COLOR PALETTE
   ═══════════════════════════════════════════════════════════ */

/* DEFAULT (BROWN) COLORWAY */
:root {
  /* Threshold colors: twilight, forest, stone, fire */
  --color-deep-night: #1a1410;
  --color-forest: #2d3a2e;
  --color-stone: #3e3b38;
  --color-charcoal: #2f2a24;
  
  /* Warm accents: copper, gold, candlelight */
  --color-copper: #b8860b;
  --color-gold: #d4a574;
  --color-warm: #f0e8e0;
  --color-cream: #fffcf4;
  
  /* Secondary: whisp colors, moon, threshold */
  --color-whisp-blue: #4a5f7f;
  --color-moon: #f5f1e8;
  --color-accent: #c7b591;
  
  /* Text - increased brightness */
  --text-primary: #e0d9d0;
  --text-secondary: #d4cfc8;
  --text-light: #c5beb6;
  --text-pale: #a89f96;
}

/* BLUE COLORWAY */
html[data-colorway="blue"] {
  /* Deep blues and purples */
  --color-deep-night: #1e3947;
  --color-forest: #4b2f3c;
  --color-stone: #443151;
  --color-charcoal: #4b2f3c;
  
  /* Blue accents */
  --color-copper: #6398a8;
  --color-gold: #6398a8;
  --color-warm: #e2def1;
  --color-cream: #f0ecf8;
  
  /* Whisp and threshold */
  --color-whisp-blue: #6398a8;
  --color-moon: #e2def1;
  --color-accent: #6398a8;
  
  /* Text */
  --text-primary: #e2def1;
  --text-secondary: #d4cef6;
  --text-light: #c5bfef;
  --text-pale: #9d96b8;
}

/* FORESTY COLORWAY */
html[data-colorway="foresty"] {
  /* Forest greens and earth tones */
  --color-deep-night: #2e342c;
  --color-forest: #5a483b;
  --color-stone: #99673a;
  --color-charcoal: #5a483b;
  
  /* Olive and forest accents */
  --color-copper: #9eab31;
  --color-gold: #9eab31;
  --color-warm: #eaf3c4;
  --color-cream: #f5fae8;
  
  /* Whisp and threshold */
  --color-whisp-blue: #99673a;
  --color-moon: #eaf3c4;
  --color-accent: #9eab31;
  
  /* Text */
  --text-primary: #eaf3c4;
  --text-secondary: #dce9b8;
  --text-light: #cee0ac;
  --text-pale: #a8b877;
}

/* DUST COLORWAY */
html[data-colorway="dust"] {
  /* Warm, earthy dust tones */
  --color-deep-night: #6e5847;
  --color-forest: #bb966b;
  --color-stone: #ae9563;
  --color-charcoal: #bb966b;
  
  /* Warm dust accents */
  --color-copper: #c0875d;
  --color-gold: #c1a373;
  --color-warm: #c1a373;
  --color-cream: #e8dcc8;
  
  /* Whisp and threshold */
  --color-whisp-blue: #c0875d;
  --color-moon: #c1a373;
  --color-accent: #c0875d;
  
  /* Text */
  --text-primary: #c1a373;
  --text-secondary: #d4b896;
  --text-light: #dcc4a6;
  --text-pale: #b5996d;
}

/* PURPLE COLORWAY */
html[data-colorway="purple"] {
  /* Cool, mystical purples */
  --color-deep-night: #3a132f;
  --color-forest: #732251;
  --color-stone: #995177;
  --color-charcoal: #732251;
  
  /* Purple accents */
  --color-copper: #a9909d;
  --color-gold: #ccafd3;
  --color-warm: #ccafd3;
  --color-cream: #e8dff5;
  
  /* Whisp and threshold */
  --color-whisp-blue: #a9909d;
  --color-moon: #ccafd3;
  --color-accent: #a9909d;
  
  /* Text */
  --text-primary: #ccafd3;
  --text-secondary: #d9c1e0;
  --text-light: #e4d4e8;
  --text-pale: #b5a0c1;
}

/* NIGHT DESERT COLORWAY */
html[data-colorway="night-desert"] {
  /* Cool, sandy, mysterious */
  --color-deep-night: #070d2a;
  --color-forest: #1e263c;
  --color-stone: #7e683f;
  --color-charcoal: #1e263c;
  
  /* Sand and night accents */
  --color-copper: #d0c78b;
  --color-gold: #dbc79e;
  --color-warm: #dbc79e;
  --color-cream: #f0ead6;
  
  /* Whisp and threshold */
  --color-whisp-blue: #d0c78b;
  --color-moon: #dbc79e;
  --color-accent: #d0c78b;
  
  /* Text */
  --text-primary: #dbc79e;
  --text-secondary: #e5d4b0;
  --text-light: #ede0c2;
  --text-pale: #c9b880;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL STYLES
   ═══════════════════════════════════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Crimson Text', serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--color-charcoal) 80%, var(--color-stone) 20%) 0%,
    var(--color-deep-night) 50%,
    color-mix(in srgb, var(--color-charcoal) 70%, var(--color-deep-night) 30%) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  transition: background 0.4s ease, color 0.4s ease;
}

/* Subtle texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    );
  pointer-events: none;
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════════
   CONTAINER & LAYOUT
   ═══════════════════════════════════════════════════════════ */

#container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--color-copper);
  text-align: center;
}

#content {
  flex: 1;
  margin-bottom: 2rem;
}

#footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--color-accent);
  text-align: center;
  opacity: 0.7;
  font-size: 0.9em;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

h1 {
  font-family: 'Caveat', cursive;
  font-size: 3em;
  font-weight: 700;
  color: var(--color-warm);
  margin-bottom: 0.5em;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

h2 {
  font-family: 'Caveat', cursive;
  font-size: 2em;
  color: var(--color-gold);
  margin: 1.5em 0 0.8em 0;
  letter-spacing: 0.03em;
}

h3 {
  font-family: 'Caveat', cursive;
  font-size: 1.5em;
  color: var(--color-accent);
  margin: 1.2em 0 0.6em 0;
}

p {
  margin: 1em 0;
  color: var(--text-secondary);
  line-height: 1.8;
  opacity: 1;
}

strong {
  color: var(--color-warm);
  font-weight: 600;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.25s ease;
  position: relative;
}

a:hover {
  color: var(--color-warm);
  border-bottom-color: var(--color-copper);
}

/* ═══════════════════════════════════════════════════════════
   CARDS & CONTAINERS
   ═══════════════════════════════════════════════════════════ */

.card {
  background: rgba(42, 36, 31, 0.6);
  border: 1px solid var(--color-copper);
  border-radius: 4px;
  padding: 1.8em;
  margin: 1.5em 0;
  box-shadow: 
    inset 0 0 20px rgba(255, 255, 255, 0.02),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.card p {
  color: #e0d9d0;
}

.card strong {
  color: var(--color-warm);
  font-weight: 600;
}

.card:hover {
  border-color: var(--color-gold);
  box-shadow: 
    inset 0 0 30px rgba(212, 165, 116, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.card-featured {
  background: linear-gradient(135deg, rgba(74, 95, 127, 0.3) 0%, rgba(42, 36, 31, 0.7) 100%);
  border: 2px solid var(--color-whisp-blue);
  padding: 2.2em;
}

.card-featured:hover {
  border-color: var(--color-gold);
}

/* ═══════════════════════════════════════════════════════════
   FEATURED SECTION (WHISP & HEKATE)
   ═══════════════════════════════════════════════════════════ */

.threshold-welcome {
  text-align: center;
  margin-bottom: 3rem;
}

.threshold-welcome p {
  font-size: 1.15em;
  color: var(--color-warm);
  line-height: 1.8;
  max-width: 700px;
  margin: 1.5em auto;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2em;
  margin: 2.5em 0;
}

.feature-card {
  background: rgba(42, 36, 31, 0.7);
  border: 2px solid var(--color-copper);
  border-radius: 8px;
  padding: 2em;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card h2 {
  position: relative;
  z-index: 1;
  font-size: 1.6em;
  margin-bottom: 0.8em;
}

.feature-card p {
  position: relative;
  z-index: 1;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0.8em 0;
  color: #d4cfc8;
}

.feature-card .card-link {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-top: 1.2em;
  padding: 0.6em 1.4em;
  border: 1px solid var(--color-copper);
  border-radius: 4px;
  color: var(--color-gold);
  transition: all 0.2s ease;
}

.feature-card .card-link:hover {
  background: rgba(184, 134, 11, 0.1);
  border-color: var(--color-gold);
  color: var(--color-warm);
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION & PATHWAYS
   ═══════════════════════════════════════════════════════════ */

.pathways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8em;
  margin: 3em 0;
}

.pathway-card {
  background: rgba(47, 42, 36, 0.8);
  border: 2px solid var(--color-accent);
  border-radius: 6px;
  padding: 2em 1.5em;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.pathway-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--color-copper) 0%, transparent 100%);
  opacity: 0;
  border-radius: 6px;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.pathway-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(180, 100, 11, 0.2);
}

.pathway-card a {
  display: block;
  text-decoration: none;
}

.pathway-card h3 {
  color: var(--color-warm);
  margin-bottom: 0.6em;
  margin-top: 0;
  font-size: 1.3em;
}

.pathway-card p {
  font-size: 0.9em;
  color: var(--text-light);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   PRACTICE CARDS (for posts, spells, sigils)
   ═══════════════════════════════════════════════════════════ */

.practice-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5em;
  margin: 2em 0;
}

.practice-card {
  background: rgba(42, 36, 31, 0.6);
  border-left: 4px solid var(--color-copper);
  padding: 1.5em;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.practice-card.spell {
  border-left-color: #d4a574;
}

.practice-card.sigil {
  border-left-color: #c7b591;
}

.practice-card.journal {
  border-left-color: #4a5f7f;
}

.practice-card.devotion {
  border-left-color: #b8860b;
}

.practice-card h3 {
  margin-top: 0;
  font-size: 1.15em;
}

.practice-card .card-meta {
  font-size: 0.85em;
  color: var(--text-pale);
  margin-bottom: 0.8em;
}

.practice-card p {
  font-size: 0.95em;
  color: #d4cfc8;
}

.practice-card .card-meta {
  font-size: 0.85em;
  color: #b8b0a8;
  margin-bottom: 0.8em;
}

/* ═══════════════════════════════════════════════════════════
   ALTAR & INTERACTIVE
   ═══════════════════════════════════════════════════════════ */

.altar-stage {
  position: relative;
  max-width: 800px;
  margin: 2em auto;
  border: 3px solid var(--color-copper);
  border-radius: 8px;
  background: rgba(42, 36, 31, 0.8);
  box-shadow: 
    inset 0 0 40px rgba(180, 134, 11, 0.1),
    0 16px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.altar-bg {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.95) contrast(1.05);
}

.altar-object {
  position: absolute;
  cursor: pointer;
  transition: all 0.2s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.altar-object:hover,
.altar-object:focus {
  filter: drop-shadow(0 8px 16px rgba(184, 134, 11, 0.3));
  transform: scale(1.08) translateY(-4px);
}

.altar-object img {
  width: 100%;
  height: auto;
  display: block;
}

.altar-object span {
  display: inline-block;
  position: absolute;
  bottom: -1.8em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-charcoal);
  color: var(--color-gold);
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'Crimson Text', serif;
  border: 1px solid var(--color-copper);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.altar-object:hover span {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.2em;
  }

  #container {
    padding: 1.5rem 1rem;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }

  .pathways-grid {
    grid-template-columns: 1fr;
  }

  .practice-card-container {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.4em;
  }

  #container {
    padding: 1rem;
  }

  .card {
    padding: 1.2em;
  }

  .feature-card {
    padding: 1.4em;
  }

  .threshold-welcome p {
    font-size: 1em;
  }
}


/* obsolete pre-Petra three-column build removed during layout conversion */

.main-nav {
  margin-top: 0.75rem;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.main-nav a {
  display: inline-block;
  border-bottom: 0;
}

@media screen and (max-width: 640px) {
  .site-title-link {
    font-size: 1.45em;
    line-height: 1.05;
  }

  .site-subtitle {
    max-width: 18rem;
    line-height: 1.35;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   PETRAPIXEL CONVERSION OVERRIDES / BUG FIXES
   ═══════════════════════════════════════════════════════════ */

#container, #header, #footer { display: contents; }
#content { min-width: 0; }

/* Keep old Rooted Stars components from trying to rebuild a second layout. */
.rs-layout-grid { display: contents !important; }
.rs-sidebar, .rs-sidebar-left, .rs-sidebar-right { display: none !important; }

/* Better defaults for images and embedded widgets. */
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
#visitorCounter { display: block; margin: 1.5rem auto; border: 1px solid var(--color-copper) !important; border-radius: 6px; background: rgba(0,0,0,0.25); }

/* Rooted Stars boxes used throughout posts. */
.entry-meta, .spell-quick-info, .working-log {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0;
}
.entry-meta span, .spell-quick-info p, .working-log p {
  margin: 0;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(199,181,145,0.42);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color: var(--text-light);
  font-size: 0.88em;
}
.note-box, .reading-box, .spell-box, .charm-box, .method-box, .materials-box, .warning-box, .sigil-box, .spell-header-card, .journal-lines, .dream-box {
  background: rgba(42, 36, 31, 0.58);
  border: 1px solid var(--color-copper);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin: 1rem 0;
  box-shadow: inset 0 0 18px rgba(255,255,255,0.018);
}
.warning-box { border-color: var(--color-gold); background: rgba(184,134,11,0.12); }
.note-box { border-left-width: 4px; }
.journal-lines { border-color: rgba(199,181,145,0.55); }
.latin-line, .translation-line { color: var(--text-light); font-style: italic; }

#nextprev {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0 0;
}
#nextprev a { padding: 0.45rem 0.8rem; border: 1px solid var(--color-accent); border-radius: 999px; background: rgba(0,0,0,0.22); }

/* Existing lightbox from script.js. */
#imageLightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.86);
  z-index: 10000;
}
#imageLightbox.visible { display: flex; }
#imageLightbox img { max-width: min(92vw, 900px); max-height: 82vh; border: 1px solid var(--color-copper); border-radius: 8px; background: rgba(255,255,255,0.06); }
#imageLightboxClose { position: fixed; top: 1rem; right: 1rem; font-size: 2rem; line-height: 1; border: 1px solid var(--color-copper); background: rgba(42,36,31,0.9); color: var(--color-warm); border-radius: 999px; width: 3rem; height: 3rem; cursor: pointer; }
#imageLightboxCaption { max-width: 900px; text-align: center; color: var(--text-secondary); }
.clickable-card-image { cursor: zoom-in; }
.lightbox-open { overflow: hidden; }

/* Make the moon button work everywhere. */
.moon-top { color: transparent; }

/* Petra shell-specific colorway dropdown. */
#colorway-selector { margin-top: 0.75rem; }
#colorway-selector label { font-size: 0.82em; color: var(--text-light); margin-right: 0.35rem; }
#colorway-dropdown { max-width: 10rem; }

/* Archive list cleanup after the wrapper switch. */
#postlistdiv > ul { list-style: none; padding-left: 0; }
#postlistdiv > ul > li { padding: 0.7rem 0; border-bottom: 1px dashed rgba(199,181,145,0.28); }

/* Footer links should not inherit button-like nav pills. */
footer.rs-site-footer a { display: inline; padding: 0; border-radius: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════
   FIX PASS: HEADER CENTERING + REAL PETRAPIXEL SIDEBARS
   Added after mobile screenshot review. Keep this at the bottom.
   ═══════════════════════════════════════════════════════════ */

/* Hide skip link until keyboard focus. It was peeking on mobile. */
#skip-to-content-link {
  transform: translateY(-140%) !important;
  width: auto;
  max-width: calc(100vw - 1rem);
}
#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0) !important;
}

/* Red-circle fix: the title/subtitle/theme/nav live centered in the header. */
header.rs-site-header,
header.rs-site-header .header-content,
header.rs-site-header .header-title,
header.rs-site-header .header-subtitle,
header.rs-site-header #colorway-selector,
header.rs-site-header nav.main-nav {
  text-align: center !important;
}

header.rs-site-header .header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

header.rs-site-header .header-title,
header.rs-site-header .header-title a,
header.rs-site-header .header-subtitle {
  display: block !important;
  width: 100%;
  max-width: min(56rem, 100%);
  margin-inline: auto !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

header.rs-site-header .header-subtitle {
  padding-inline: 0.75rem;
  line-height: 1.35;
}

header.rs-site-header #colorway-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  margin: 0.25rem auto 0;
}

header.rs-site-header nav.main-nav,
header.rs-site-header nav.main-nav ul {
  width: 100%;
  justify-content: center !important;
  align-items: center !important;
}

/* Blue-circle fix: these are honest-to-gods sidebars now, with list structure and wrapping. */
aside.left-sidebar,
aside.right-sidebar {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sidebar-section ul.site-shelf-list,
.sidebar-section ul.altar-drawer-list,
.sidebar-section ul.rs-recent-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.sidebar-section ul.site-shelf-list li,
.sidebar-section ul.altar-drawer-list li,
.sidebar-section ul.rs-recent-list li {
  margin: 0.18rem 0;
  padding: 0;
}

.sidebar-section ul.site-shelf-list a,
.sidebar-section ul.altar-drawer-list a,
.sidebar-section ul.rs-recent-list a,
.sidebar-section a.rs-widget-more {
  display: block !important;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Reassert the PetraPixel grid at the end of the file so old CSS cannot override it. */
.layout {
  width: min(100%, 1240px) !important;
  display: grid !important;
  gap: var(--margin) !important;
  grid-template-areas:
    "header header header"
    "leftSidebar main rightSidebar"
    "footer footer footer" !important;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width) !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  margin-inline: auto !important;
}

header.rs-site-header { grid-area: header !important; }
main#content { grid-area: main !important; }
aside.left-sidebar { grid-area: leftSidebar !important; }
aside.right-sidebar { grid-area: rightSidebar !important; }
footer.rs-site-footer { grid-area: footer !important; }

/* Tablet and phone: sidebars stack into their own boxed panels below content instead of becoming loose text. */
@media (max-width: 980px) {
  body {
    padding: 8px !important;
    overflow-x: hidden;
  }

  .layout {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-areas:
      "header"
      "main"
      "leftSidebar"
      "rightSidebar"
      "footer" !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  header.rs-site-header,
  main#content,
  aside.left-sidebar,
  aside.right-sidebar,
  footer.rs-site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  aside.left-sidebar,
  aside.right-sidebar {
    position: static !important;
    display: block !important;
  }
}

@media (max-width: 640px) {
  header.rs-site-header .header-title {
    font-size: clamp(1.85rem, 11vw, 2.6rem) !important;
  }

  header.rs-site-header .header-subtitle {
    font-size: 1rem !important;
    max-width: 21rem;
  }

  header.rs-site-header nav.main-nav ul {
    flex-direction: column !important;
  }

  header.rs-site-header nav.main-nav a {
    width: min(17rem, 86vw) !important;
    text-align: center !important;
  }

  .sidebar-section {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX PASS 2: SIDEBAR ASSIGNMENT + DESKTOP-PREVIEW WIDTH
   Red screenshot group belongs left. Blue screenshot group belongs right.
   Desktop-mode mobile preview should keep true left/main/right columns.
   ═══════════════════════════════════════════════════════════ */

/* Keep the PetraPixel three-column grid alive for tablet/desktop-preview widths. */
@media (min-width: 721px) {
  .layout {
    width: min(100%, 1240px) !important;
    display: grid !important;
    gap: var(--margin) !important;
    grid-template-areas:
      "header header header"
      "leftSidebar main rightSidebar"
      "footer footer footer" !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
  }

  aside.left-sidebar,
  aside.right-sidebar {
    position: sticky !important;
    top: 1rem !important;
    display: block !important;
    align-self: start !important;
  }
}

/* Only true phone-width views stack the sidebars under the content. */
@media (max-width: 720px) {
  .layout {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-areas:
      "header"
      "main"
      "leftSidebar"
      "rightSidebar"
      "footer" !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  aside.left-sidebar,
  aside.right-sidebar {
    position: static !important;
    display: block !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX PASS 3: REAL PHONE / TOUCH MOBILE CLEANUP
   The three-column desktop shell was squeezing posts into skinny strips on phones,
   especially mobile browsers using desktop-preview viewport widths. This final
   override keeps the same colors but makes touch-width views readable.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    padding: 10px !important;
  }

  .layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 14px !important;
    grid-template-areas:
      "header"
      "main"
      "leftSidebar"
      "rightSidebar"
      "footer" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    margin: 0 auto !important;
  }

  header.rs-site-header,
  main#content,
  aside.left-sidebar,
  aside.right-sidebar,
  footer.rs-site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  header.rs-site-header { grid-area: header !important; }
  main#content { grid-area: main !important; }
  aside.left-sidebar { grid-area: leftSidebar !important; }
  aside.right-sidebar { grid-area: rightSidebar !important; }
  footer.rs-site-footer { grid-area: footer !important; }

  main#content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 16px !important;
  }

  aside.left-sidebar,
  aside.right-sidebar {
    position: static !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0.9rem !important;
  }

  .sidebar-section {
    max-height: none !important;
    overflow: visible !important;
  }

  header.rs-site-header .header-content {
    padding: 1rem !important;
  }

  header.rs-site-header .header-title {
    font-size: clamp(2rem, 13vw, 3rem) !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  header.rs-site-header .header-subtitle {
    display: block !important;
    max-width: 100% !important;
    margin: 0.45rem auto 0 !important;
    line-height: 1.25 !important;
  }

  header.rs-site-header nav.main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  header.rs-site-header nav.main-nav li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  header.rs-site-header nav.main-nav a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .entry-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .entry-meta span,
  .note-box,
  .reading-box,
  .spell-box,
  .charm-box,
  .journal-lines,
  .journal-lines p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  img,
  video,
  iframe,
  textarea {
    max-width: 100% !important;
  }
}