/* Josefin Sans (SIL Open Font License, see fonts/OFL.txt), served from this site instead of Google Fonts */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/josefin-sans-semibold.woff") format("woff");
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/josefin-sans-bold.woff") format("woff");
}

/* ===== Space theme ===== */
:root {
  --space-bg: #0b0d21;
  --space-bg-2: #141737;
  --panel: rgba(23, 26, 54, 0.82);
  --panel-border: rgba(185, 166, 255, 0.22);
  --ink: #e8e6f5;
  --ink-muted: #a9a6c4;
  --purple: #b9a6ff;        /* links */
  --purple-hover: #d6cbff;
  --purple-strong: #6d4bff; /* buttons */
  --purple-strong-hover: #5a38f0;
  --gold: #f5cf6b;
  /* Heading font — to try another, change it here and in the Google Fonts link in _Layout.cshtml */
  --heading-font: "Josefin Sans", system-ui, sans-serif;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* On screen the page is a column whose content area grows, so the footer stays at the bottom of short pages */
@media screen {
  body { display: flex; flex-direction: column; min-height: 100vh; }
  body > .container { flex: 1 0 auto; }
}

body {
  color: var(--ink);
  background-color: var(--space-bg);
  /* Two layers of tiny stars over a deep-space gradient */
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 140px 80px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 90px 160px, #d6cbff, transparent),
    radial-gradient(1px 1px at 200px 220px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 260px 40px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 330px 190px, #fff, transparent),
    radial-gradient(ellipse at 80% -10%, rgba(109, 75, 255, .35), transparent 55%),
    radial-gradient(ellipse at -10% 110%, rgba(59, 130, 246, .18), transparent 50%),
    linear-gradient(180deg, var(--space-bg) 0%, var(--space-bg-2) 100%);
  background-size:
    360px 260px, 360px 260px, 360px 260px, 360px 260px, 360px 260px, 360px 260px,
    100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, .navbar-brand, .display-4, .display-5 {
  font-family: var(--heading-font);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Links: purple */
a { color: var(--purple); }
a:hover, a:focus { color: var(--purple-hover); }

/* Navbar */
.navbar.space-nav {
  background: rgba(11, 13, 33, 0.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-border);
}
.space-nav .navbar-brand { color: #fff; font-weight: 700; }
.space-nav .navbar-brand:hover { color: var(--purple-hover); }
.space-nav .nav-link { color: var(--purple) !important; }
.space-nav .nav-link:hover, .space-nav .nav-link:focus { color: var(--purple-hover) !important; }
/* A little more room between the top links on wider screens (narrower ones keep Bootstrap's spacing so they fit) */
@media (min-width: 992px) { .space-nav .navbar-nav .nav-link { padding-left: .85rem; padding-right: .85rem; } }

/* Panels and cards: no boxes — content sits directly on the starfield */
.card, .bg-light, .bg-white {
  background: transparent !important;
  color: var(--ink);
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}
.shadow-sm { box-shadow: none !important; }
hr { background-color: var(--panel-border); color: var(--panel-border); border: 0; opacity: 1; }

/* Text colors tuned for dark backgrounds */
.text-muted, .text-secondary { color: var(--ink-muted) !important; }
.text-dark { color: var(--ink) !important; }
.text-primary { color: var(--purple) !important; }
.text-warning { color: var(--gold) !important; }
.text-info { color: #67d4ef !important; }
.lead { color: var(--ink); }

/* Buttons */
.btn-primary {
  color: #fff;
  background-color: var(--purple-strong);
  border-color: var(--purple-strong);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  background-color: var(--purple-strong-hover);
  border-color: var(--purple-strong-hover);
}
.btn-link { color: var(--purple); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.1rem var(--space-bg), 0 0 0 0.25rem var(--purple);
}

/* Form fields */
.form-control, .form-select {
  background-color: rgba(11, 13, 33, 0.7);
  color: var(--ink);
  border: 1px solid var(--panel-border);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(11, 13, 33, 0.9);
  color: var(--ink);
  border-color: var(--purple);
}
.form-select option { background: var(--space-bg-2); color: var(--ink); }
input[type="datetime-local"] { color-scheme: dark; }

/* Tables */
.table { color: var(--ink); border-color: var(--panel-border); }

/* Footer */
.footer { border-top: 1px solid var(--panel-border) !important; color: var(--ink-muted) !important; }

/* Moon Data sidebar */
.space-sidebar a { text-decoration: none; }
.space-sidebar a:hover { text-decoration: underline; }
.space-sidebar .section-title {
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
  margin: .9rem 0 .4rem;
}
/* Planet sub-list: symbol and name on one row */
.planet-list { list-style: none; padding-left: .85rem; margin: 0; border-left: 1px solid var(--panel-border); }
.planet-list li { margin: .1rem 0; }
.planet-list a { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.planet-list .glyph { display: inline-block; width: 1.2em; text-align: center; font-size: 1.1rem; }
.planet-list a:hover .glyph { text-shadow: 0 0 8px rgba(185,166,255,.8); }
.node-about { font-size: .92rem; line-height: 1.5; max-width: 30rem; margin-left: auto; margin-right: auto; }
/* Tracker picture for the nodes, Lilith, Chiron and the asteroids (no planet drawing): the symbol in a glowing ring */
.tracker-glyph { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%;
  font-size: 3rem; color: var(--purple); border: 2px solid rgba(185,166,255,.55); background: radial-gradient(circle, rgba(109,75,255,.28), rgba(11,13,33,.2) 70%);
  box-shadow: 0 0 22px rgba(109,75,255,.35); font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif; }

/* Narrow, centered forms so inputs don't stretch the full column */
.compact-form { max-width: 340px; margin: 0 auto; }

/* Moon Tracker results */
.moon-emoji { font-size: 5rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(245, 236, 200, .35)); }

/* Links on sign names inside headings keep the heading's color */
a.sign-link { color: inherit; text-decoration: none; border-bottom: 2px dotted currentColor; }
a.sign-link:hover { color: var(--purple-hover); }

/* Zodiac grid */
.zodiac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem .75rem; }
.zodiac-tile { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .75rem .25rem; text-decoration: none; color: var(--ink); border-radius: 14px; transition: transform .15s ease, background-color .15s ease; }
.zodiac-tile:hover, .zodiac-tile:focus { color: var(--ink); background: rgba(185, 166, 255, .08); transform: translateY(-3px); }
.zodiac-tile .name { font-family: var(--heading-font); font-size: 1.2rem; font-weight: 600; color: var(--purple); }
.zodiac-tile .dates { font-size: .8rem; color: var(--ink-muted); }

/* Element pills */
.element { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; margin-top: .2rem; }
.element-fire { background: rgba(255, 138, 92, .18); color: #ffb08f; }
.element-earth { background: rgba(143, 209, 138, .18); color: #a9e3a4; }
.element-air { background: rgba(159, 211, 255, .18); color: #b9dcff; }
.element-water { background: rgba(127, 224, 220, .18); color: #9feae6; }

/* Sign detail page */
.keyword { display: inline-block; margin: .15rem; padding: .15rem .65rem; border: 1px solid var(--panel-border); border-radius: 999px; font-size: .85rem; color: var(--ink-muted); }
.sign-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1.5rem 0; text-align: center; }
.sign-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); font-weight: 600; }
.sign-facts dd { margin: 0; font-size: 1.05rem; }

/* Space Ipsum */
.ipsum-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; }
.ipsum-text p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; }
.form-check-input { background-color: rgba(11, 13, 33, 0.7); border-color: var(--panel-border); }
.form-check-input:checked { background-color: var(--purple-strong); border-color: var(--purple-strong); }

/* About page timeline */
.timeline { border-left: 2px solid var(--panel-border); padding-left: 1.25rem; margin-left: .35rem; }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before {
  content: ""; position: absolute; left: calc(-1.25rem - 6px); top: .35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px rgba(185, 166, 255, .8);
}
.timeline-when { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: .15rem; }

/* Home hero: the 1902 "A Trip to the Moon" clip, feathered into the starfield */
.hero { padding: .5rem 0 1rem; }
.hero-film { position: relative; max-width: 560px; margin: 0; }
.hero-film video {
  display: block; width: 100%; height: auto; border-radius: 50%/42%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 72%);
  filter: sepia(.25) hue-rotate(205deg) saturate(1.4) contrast(1.05);
}
.hero-film-toggle {
  position: absolute; right: 12%; bottom: 10%;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--panel-border); background: rgba(11, 13, 33, .75); color: var(--ink);
  font-size: .8rem; line-height: 1; cursor: pointer; opacity: .7;
}
.hero-film-toggle:hover, .hero-film-toggle:focus-visible { opacity: 1; border-color: var(--purple); }
.hero h1 { font-size: 2.6rem; }
.hero-credit { font-size: .75rem; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) {
  .hero-film video { animation: none; }
}

/* Tint an emoji purple (used for the Space Ipsum rocket) */
.emoji-purple {
  display: inline-block;
  filter: grayscale(1) sepia(1) hue-rotate(205deg) saturate(3.5) brightness(.85) contrast(1.15) drop-shadow(0 0 6px rgba(185, 166, 255, .65));
}

/* Space Ipsum: planets drifting around the page edges */
.ipsum-sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ipsum-page { position: relative; z-index: 1; }
.float-planet { position: absolute; height: auto; opacity: .9; animation: planet-float 9s ease-in-out infinite; }
.p-saturn  { width: 150px; top: 14%; left: 4%;  animation-delay: -1s; }
.p-jupiter { width: 130px; top: 58%; left: 7%;  animation-delay: -4s; animation-duration: 11s; }
.p-mars    { width: 70px;  top: 38%; left: 15%; animation-delay: -2s; animation-duration: 8s; }
.p-mercury { width: 46px;  top: 82%; left: 20%; animation-delay: -6s; }
.p-neptune { width: 110px; top: 16%; right: 6%; animation-delay: -3s; animation-duration: 10s; }
.p-venus   { width: 80px;  top: 44%; right: 14%; animation-delay: -5s; }
.p-uranus  { width: 110px; top: 66%; right: 5%; animation-delay: -7s; animation-duration: 12s; }
.p-pluto   { width: 44px;  top: 86%; right: 22%; animation-delay: -2.5s; animation-duration: 7s; }
@keyframes planet-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
/* On narrow screens there's no empty margin, so fade the planets behind the text */
@media (max-width: 1199px) {
  .float-planet { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .float-planet { animation: none; }
}

/* Pages laid out to fit on one screen without scrolling (desktop) */
.fit-page { padding-top: .25rem; }
.fit-page h1, .fit-page h2 { line-height: 1.15; }
.sign-facts-compact { grid-template-columns: repeat(2, 1fr); margin: .5rem 0 0; gap: .5rem; }
@media (min-width: 992px) {
  .result-panel { border-left: 1px solid var(--panel-border); padding-left: 2rem; }
}

/* Compact Moon Data sidebar so it doesn't force scrolling on laptop screens */
.space-sidebar { padding-top: .5rem !important; }
.space-sidebar p { margin-bottom: .2rem !important; }
.space-sidebar .section-title { margin: .5rem 0 .2rem; }
.space-sidebar > .d-flex { margin-bottom: .5rem !important; }
.planet-list { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: .9rem; margin-bottom: .2rem !important; }
.planet-list li { margin: 0; }
.space-sidebar { padding-left: 0 !important; padding-right: .5rem !important; }
.planet-list { padding-left: .55rem; column-gap: .6rem; font-size: .92rem; }
.planet-list a { gap: .3rem; }
.planet-list .glyph { width: 1em; font-size: 1rem; }
/* Three labelled groups in the side menu: Planets, Points (one column, so "North Node" fits), Chiron & asteroids */
.planet-groups { border-left: 1px solid var(--panel-border); padding-left: .55rem; }
.planet-groups .planet-list { border-left: 0; padding-left: 0; margin-bottom: .15rem !important; }
.planet-list-single { grid-template-columns: auto; }
.space-sidebar .planet-group-label { margin: .3rem 0 .05rem !important; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.space-sidebar .planet-group-label:first-child { margin-top: 0 !important; }
.moon-emoji-sm { font-size: 3.5rem; }

/* Collapsible Moon Data sidebar: the "Moon Data" heading is the toggle button */
.sidebar-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 0; padding: .5rem 0 .25rem; margin: 0;
  color: var(--ink); font-size: 1rem; cursor: pointer;
}
.sidebar-toggle:hover .sidebar-toggle-icon, .sidebar-toggle:focus-visible .sidebar-toggle-icon { color: var(--purple-hover); border-color: var(--purple); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
.sidebar-logo { filter: invert(1) drop-shadow(0 0 6px rgba(214,203,255,.7)); }
.sidebar-toggle-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border: 1px solid var(--panel-border); border-radius: 50%;
  color: var(--purple); font-size: .95rem; line-height: 1;
}
.space-sidebar { padding-top: 0 !important; }
.moon-shell.collapsed .moon-aside { flex: 0 0 auto; width: auto; }
.moon-shell.collapsed #moonSidebar { display: none; }
.moon-shell.collapsed .moon-main { flex: 1 1 0; width: auto; max-width: none; }
@media (max-width: 575.98px) {
  .moon-shell.collapsed .moon-aside { width: 100%; }
}

/* Home page: twinkling stars that drift like the Space Ipsum planets */
.float-star {
  position: absolute; filter: drop-shadow(0 0 6px rgba(255, 246, 194, .75));
  animation: planet-float 9s ease-in-out infinite, star-twinkle 3.5s ease-in-out infinite;
}
.s1  { top: 14%; left: 8%;  animation-delay: -1s, -.5s; }
.s2  { top: 30%; left: 18%; animation-delay: -3s, -1.2s; animation-duration: 11s, 2.8s; }
.s3  { top: 48%; left: 6%;  animation-delay: -5s, -2s; }
.s4  { top: 66%; left: 15%; animation-delay: -2s, -.8s; animation-duration: 8s, 4s; }
.s5  { top: 82%; left: 9%;  animation-delay: -6s, -2.6s; animation-duration: 12s, 3s; }
.s6  { top: 22%; left: 26%; animation-delay: -4s, -1.6s; }
.s7  { top: 12%; right: 10%; animation-delay: -2.5s, -1s; animation-duration: 10s, 3.2s; }
.s8  { top: 28%; right: 22%; animation-delay: -7s, -.3s; }
.s9  { top: 44%; right: 7%;  animation-delay: -1.5s, -2.2s; animation-duration: 11s, 4.2s; }
.s10 { top: 62%; right: 17%; animation-delay: -3.5s, -1.4s; }
.s11 { top: 78%; right: 8%;  animation-delay: -5.5s, -.9s; animation-duration: 9s, 2.6s; }
.s12 { top: 88%; right: 25%; animation-delay: -6.5s, -3s; }
@keyframes star-twinkle {
  0%, 100% { opacity: .95; }
  50% { opacity: .35; }
}
@media (max-width: 1199px) {
  .float-star { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .float-star { animation: none; }
}

/* My Favorite Things */
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2rem; }
.favorite-group h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.favorite-group ul { list-style: none; padding: 0; margin: 0; }
.favorite-group li { margin-bottom: .6rem; }
.favorite-note { display: block; font-size: .9rem; color: var(--ink-muted); }

/* Error and 404 pages */
.lost-page { max-width: 640px; padding-top: 3rem; }
.lost-emoji { font-size: 5rem; line-height: 1; margin-bottom: 1rem; }

/* Birth chart */
.birth-form { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; align-items: flex-start; }
.birth-field { min-width: 160px; }
.birth-place { position: relative; flex: 1 1 280px; max-width: 360px; }
.birth-submit { align-self: center; padding-top: .9rem; }
.place-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 4.1rem; margin: 0; padding: .25rem 0; list-style: none;
  background: var(--space-bg-2); border: 1px solid var(--purple); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  max-height: 260px; overflow-y: auto;
}
.place-results li { padding: .4rem .75rem; cursor: pointer; color: var(--ink); }
.place-results li:hover, .place-results li.active { background: rgba(185, 166, 255, .18); }
.notice-error { color: #ffb4b4; }
.big-three { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; text-align: center; }
.big-three-item { min-width: 150px; }
.big-three-unknown {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; border: 1px dashed var(--panel-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--ink-muted);
}
.chart-wheel { width: 100%; max-width: 480px; height: auto; }
.chart-wheel .wheel-bg { fill: rgba(11, 13, 33, .55); stroke: var(--panel-border); }
.chart-wheel .sign-seg { fill-opacity: .14; stroke: rgba(185, 166, 255, .3); stroke-width: 1; }
.chart-wheel .sign-glyph { font-size: 20px; text-anchor: middle; dominant-baseline: central; font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif; }
.chart-wheel .ring { fill: none; stroke: rgba(185, 166, 255, .35); }
.chart-wheel .ring.faint { stroke: rgba(185, 166, 255, .15); }
.chart-wheel .spoke { stroke: rgba(185, 166, 255, .15); }
.chart-wheel .house-num { fill: var(--ink-muted); font-size: 11px; text-anchor: middle; dominant-baseline: central; }
.chart-wheel .axis { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .8; }
.chart-wheel .axis-label { fill: var(--gold); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.chart-wheel .tick { stroke: var(--ink); stroke-width: 1.5; }
.chart-wheel .leader { stroke: rgba(232, 230, 245, .35); stroke-width: 1; }
.chart-wheel .planet circle { fill: #171a36; stroke: var(--purple); stroke-width: 1.2; }
.chart-wheel .planet text { fill: #fff; font-size: 15px; text-anchor: middle; dominant-baseline: central; font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif; }
.chart-wheel .planet:hover circle { stroke: var(--gold); }
/* South Node, Lilith, Chiron and the asteroids: smaller, quieter circles than the planets */
.chart-wheel .planet.minor circle { stroke: rgba(185, 166, 255, .6); stroke-dasharray: 2 1.5; }
.chart-wheel .planet.minor text { font-size: 12px; fill: var(--ink-muted); }
.chart-table { font-size: .95rem; }
.chart-table th { color: var(--ink-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; border-color: var(--panel-border); }
.chart-table td { border-color: rgba(185, 166, 255, .12); padding: .35rem .5rem; }
.chart-table .glyph { display: inline-block; width: 1.4em; text-align: center; color: var(--purple); font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif; }
.chart-table .chart-angles td { color: var(--gold); }

/* Houses: guide page, hover hints and the "Your houses" section on the chart */
.houses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem 2.25rem; }
.house-entry-head { display: flex; align-items: center; gap: .85rem; }
.house-number {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading-font); font-weight: 700; font-size: 1.15rem; color: #fff;
  border: 1px solid var(--purple); box-shadow: 0 0 12px rgba(185, 166, 255, .45);
}
.house-entry h4 { font-size: 1.15rem; }
.house-hint { border-bottom: 1px dotted var(--ink-muted); cursor: help; }
.chart-wheel .house-label { cursor: help; }
.house-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.5rem; }
.house-card { border-left: 2px solid var(--purple); padding: .15rem 0 .15rem .85rem; }
.house-card-num { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.house-card h5 { font-size: 1rem; }
.house-card-planets { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .92rem; }
.house-card-planets .glyph { color: var(--purple); font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif; }
.house-card-empty { border-left-color: rgba(185, 166, 255, .35); }
.house-card-none { color: var(--ink-muted); font-style: italic; }

/* Birth chart print: one portrait page (the calendar's landscape @page doesn't apply here), light and ink-friendly,
   wheel and table side by side, houses underneath. The form, button and site header/footer don't print. */
.birth-print-credit, .chart-season-side { display: none; }
@page birthchart { size: portrait; margin: 12mm; }
@media print {
  /* Moon pages: leave the side menu off paper and let the page use the full width */
  .moon-aside { display: none !important; }
  .moon-main { flex: 0 0 100% !important; max-width: 100% !important; }
  .birth-print { page: birthchart; color: #1d1b2a !important; }
  .birth-print > .text-center:first-child { margin-bottom: 4pt !important; }
  .birth-print > .text-center:first-child p { font-size: 9pt; }
  .birth-print .chart-results > p.small { margin-bottom: 6pt !important; }
  .birth-print .chart-results > .row { margin-top: 2pt !important; }
  .birth-print .sign-link { border-bottom: 0 !important; text-decoration: none !important; }
  .birth-print .birth-form, .birth-print .notice-error { display: none !important; }
  .birth-print h2 { font-size: 20pt; color: #3d2a9e !important; margin-bottom: 2pt !important; }
  .birth-print .text-muted, .birth-print small { color: #555 !important; }
  .birth-print .chart-results { margin-top: 4pt !important; }
  .birth-print .big-three { gap: 4pt 28pt; }
  .birth-print .big-three img { width: 54px; height: 54px; }
  .birth-print .big-three-unknown { border-color: #bbb; color: #888; }
  .birth-print .chart-results > .row { flex-wrap: nowrap; align-items: center !important; }
  .birth-print .chart-results > .row > .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  /* Wheel top left, the note under it, the table down the right (the table is too tall to have the note under it) */
  .birth-print .chart-results > .row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 0; }
  .birth-print .chart-results > .row > .col-lg-6 { max-width: none; width: auto; }
  .birth-print .chart-results > .row > .col-lg-6:first-child { grid-column: 1; grid-row: 1; }
  .birth-print .chart-results > .row > .col-lg-6:last-child { display: contents; }
  .birth-print .chart-results > .row .chart-table { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .birth-print .chart-results > .row .chart-table + p { grid-column: 1; grid-row: 2; padding: 4pt 10pt 0; text-align: center; }
  .birth-print .chart-wheel { max-width: 82mm; }
  /* The wheel prints in strong, dark lines (light purples washed out on paper) */
  .birth-print .chart-wheel { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .birth-print .chart-wheel .wheel-bg { fill: #fff; stroke: #2e2650; stroke-width: 1.5; }
  .birth-print .chart-wheel .sign-seg { fill-opacity: .45; stroke: #2e2650; stroke-width: 1.2; }
  .birth-print .chart-wheel .sign-glyph { fill: #1a1040; font-weight: 700; }
  .birth-print .chart-wheel .ring { stroke: #2e2650; stroke-width: 1.4; }
  .birth-print .chart-wheel .ring.faint, .birth-print .chart-wheel .spoke { stroke: #6e6890; stroke-width: 1; }
  .birth-print .chart-wheel .house-num { fill: #1d1b2a; font-weight: 700; }
  .birth-print .chart-wheel .axis { stroke: #6b4f00; stroke-width: 2; opacity: 1; }
  .birth-print .chart-wheel .axis-label { fill: #6b4f00; }
  .birth-print .chart-wheel .tick { stroke: #000; stroke-width: 2; }
  .birth-print .chart-wheel .leader { stroke: #4a4566; stroke-width: 1.2; }
  .birth-print .chart-wheel .planet circle { fill: #fff; stroke: #2a1580; stroke-width: 1.8; }
  .birth-print .chart-wheel .planet text { fill: #000; font-weight: 700; }
  .birth-print .chart-table { font-size: 9pt; color: #1d1b2a; --bs-table-color: #1d1b2a; --bs-table-bg: transparent; }
  .birth-print .chart-table th { color: #555; border-color: #bdb6d8; }
  .birth-print .chart-table td { border-color: #e1ddef; padding: 1.2pt 4pt; color: #1d1b2a; }
  .birth-print .chart-table td, .birth-print .chart-table th { line-height: 1.15; }
  .birth-print .chart-table .glyph { color: #6d4bff; }
  .birth-print .chart-table .chart-angles td { color: #8a6a10; }
  .birth-print .chart-wheel .planet.minor circle { stroke: #3d3480; stroke-width: 1.4; }
  .birth-print .chart-wheel .planet.minor text { fill: #1d1b2a; }
  .birth-print .chart-table + p, .birth-print .chart-results .small { font-size: 7.5pt; }
  .birth-print .house-hint { border-bottom: 0; }
  .birth-print .your-houses { margin-top: 8pt !important; break-inside: avoid; }
  .birth-print .your-houses h4 { font-size: 13pt; color: #3d2a9e; }
  .birth-print .house-cards { grid-template-columns: repeat(4, 1fr); gap: 5pt 10pt; }
  .birth-print .house-card { border-left-color: #6d4bff; break-inside: avoid; }
  .birth-print .house-card h5 { font-size: 9pt; margin-bottom: 1pt !important; }
  .birth-print .house-card-num { font-size: 6.5pt; color: #555; }
  .birth-print .house-card-planets { font-size: 8.5pt; }
  .birth-print .house-card-planets .glyph { color: #6d4bff; }
  .birth-print .house-card-empty { border-left-color: #b8b0dc; }
  .birth-print .house-card-none { color: #666; }
  .birth-print .birth-print-credit { display: block; text-align: center; font-size: 7pt; color: #777; margin: 8pt 0 0; }
  /* The calendar's seasonal drawings: two small ones each side of the title, and a pair of the larger scattered
     ones each side of the Sun / Moon / Rising row (winter and spring left, summer and autumn right) */
  .birth-print .chart-title-art .cal-season { margin: 0 .15em; }
  .birth-print .chart-season-row { position: relative; }
  .birth-print .big-three-item { min-width: 118px; }
  .birth-print .chart-season-side { display: flex; flex-direction: column; gap: 1.5mm; position: absolute; top: 50%;
    transform: translateY(-50%); width: 34mm; }
  .birth-print .chart-season-left { left: 0; }
  .birth-print .chart-season-right { right: 0; }
  .birth-print .chart-season-slot { position: relative; width: 34mm; height: 20mm; }
}

/* Projects */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.project-card { display: flex; flex-direction: column; }
.project-image {
  width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--panel-border); box-shadow: 0 0 24px rgba(109, 75, 255, .18); margin-bottom: .85rem;
}
.project-card h3 { font-size: 1.35rem; }
.project-year { font-size: .8rem; color: var(--ink-muted); font-weight: 400; margin-left: .35rem; }

/* Band Name Generator: same night sky, tuned to sound */
.band-page { --magenta: #ff6ec7; --cyan: #6ee7ff; }
.band-hero { position: relative; padding: 2.2rem 0 1.6rem; margin-bottom: 1rem; }
.soundwave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .75; }
.band-hero > :not(.soundwave) { position: relative; z-index: 1; }
.band-title { font-size: 2.6rem; letter-spacing: .02em; text-shadow: 0 0 18px rgba(185, 166, 255, .55), 0 0 2px #0b0d21; }
.wave { fill: none; stroke-width: 2; stroke-linecap: round; animation: wave-scroll linear infinite; }
.wave-1 { stroke: var(--purple); animation-duration: 7s; --period: -300px; filter: drop-shadow(0 0 6px rgba(185, 166, 255, .7)); }
.wave-2 { stroke: var(--magenta); stroke-opacity: .6; animation-duration: 4.5s; --period: -200px; }
.wave-3 { stroke: var(--cyan); stroke-opacity: .45; animation-duration: 3s; --period: -150px; }
.wave-breathe { transform-box: view-box; transform-origin: 50% 50%; animation: wave-breathe ease-in-out infinite alternate; }
.wb-1 { animation-duration: 3.2s; }
.wb-2 { animation-duration: 2.3s; animation-delay: -.8s; }
.wb-3 { animation-duration: 1.7s; animation-delay: -.4s; }
.band-page.is-busy .wave { animation-duration: 1.4s; }
.band-page.is-busy .wave-breathe { animation-duration: .6s; }
@keyframes wave-scroll { to { transform: translateX(var(--period)); } }
@keyframes wave-breathe { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } }

.band-legend { font-family: var(--heading-font); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: .45rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-input { position: absolute; opacity: 0; pointer-events: none; }
.theme-chip, .seg label {
  cursor: pointer; user-select: none; border: 1px solid var(--panel-border); color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s;
}
.theme-chip { padding: .35rem .9rem; border-radius: 999px; }
.theme-chip:hover, .seg label:hover { border-color: var(--purple); }
.chip-input:checked + .theme-chip, .chip-input:checked + label {
  border-color: var(--purple); background: rgba(185, 166, 255, .16); color: #fff; box-shadow: 0 0 14px rgba(185, 166, 255, .45);
}
.chip-input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.band-options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; }
.seg { display: inline-flex; }
.seg label { padding: .35rem .85rem; margin-left: -1px; min-width: 2.6rem; text-align: center; }
.seg label:first-of-type { border-radius: 999px 0 0 999px; margin-left: 0; }
.seg label:last-of-type { border-radius: 0 999px 999px 0; }
.band-the { margin-bottom: .45rem; }
.band-the .form-check-input:checked { background-color: var(--purple-strong); border-color: var(--purple-strong); }
.band-go { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; padding: .5rem 1.3rem; }

/* Equalizer bars: bounce while names are being checked */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 1em; vertical-align: -.1em; }
.eq i { display: block; width: 3px; height: 30%; border-radius: 2px; background: var(--purple); animation: eq-bounce .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; background: var(--magenta, #ff6ec7); }
.eq i:nth-child(3) { animation-delay: -.6s; }
.eq i:nth-child(4) { animation-delay: -.15s; background: var(--cyan, #6ee7ff); }
.eq i:nth-child(5) { animation-delay: -.45s; }
.eq-btn i { background: #fff !important; animation-play-state: paused; }
.band-go:hover .eq-btn i, .is-busy .eq-btn i { animation-play-state: running; }
@keyframes eq-bounce { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* Results: one spinning record per name */
.band-results { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.band-card {
  display: flex; align-items: center; gap: 1rem; padding: .65rem .25rem .65rem 0;
  border-bottom: 1px solid rgba(185, 166, 255, .12);
}
.band-card.swap-in .band-name { animation: name-in .5s ease-out; }
@keyframes name-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.vinyl {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255, 255, 255, .06) 35% 36%, transparent 37% 47%, rgba(255, 255, 255, .06) 48% 49%, transparent 50% 60%, rgba(255, 255, 255, .05) 61% 62%, transparent 63%),
    conic-gradient(from 30deg, #111 0 20%, #2a2540 25%, #111 30% 70%, #2a2540 75%, #111 80%);
  box-shadow: 0 0 0 1px rgba(185, 166, 255, .25), 0 0 14px rgba(109, 75, 255, .25);
  animation: vinyl-spin 6s linear infinite; animation-play-state: paused;
}
.vinyl-label { position: absolute; inset: 33%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.vinyl-label::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: #0b0d21; }
.band-card[data-state="checking"] .vinyl { animation-duration: 1.1s; animation-play-state: running; }
.band-card[data-state="available"] .vinyl, .band-card[data-state="song"] .vinyl { animation-play-state: running; }
.band-card[data-state="taken"] .vinyl { opacity: .45; filter: grayscale(1); }
.band-card-body { flex: 1 1 auto; min-width: 0; }
.band-name { font-family: var(--heading-font); font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.band-card[data-state="taken"] .band-name { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: rgba(255, 110, 199, .7); }
.band-status { font-size: .9rem; color: var(--ink-muted); margin-top: .15rem; }
.band-status .bmark, .own-headline .bmark { display: inline-block; width: 1.1em; text-align: center; font-weight: 700; }
[data-state="available"] .bmark { color: #7fe0a0; }
[data-state="song"] .bmark { color: var(--gold); }
[data-state="taken"] .bmark { color: var(--magenta, #ff6ec7); }
[data-state="error"] .bmark { color: #ffb4b4; }
.band-actions { display: flex; gap: .25rem; }
.icon-btn {
  background: none; border: 1px solid transparent; border-radius: 50%; width: 2.1rem; height: 2.1rem;
  color: var(--ink-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.icon-btn:hover, .icon-btn:focus-visible { color: #fff; border-color: var(--panel-border); }
.icon-btn.star.on { color: var(--gold); text-shadow: 0 0 10px rgba(245, 207, 107, .6); }
.band-results-note { font-size: .82rem; margin-top: .75rem; }

.band-h2 { font-size: 1.5rem; }
.own-form { display: flex; gap: .6rem; max-width: 520px; }
.own-form .form-control { background: rgba(11, 13, 33, .6); border-color: var(--panel-border); color: var(--ink); }
.own-form .form-control:focus { border-color: var(--purple); box-shadow: 0 0 0 .2rem rgba(185, 166, 255, .25); }
.own-form .form-control::placeholder { color: var(--ink-muted); opacity: .7; }
.own-result { margin-top: 1rem; }
.own-headline { font-size: 1.1rem; color: #fff; margin-bottom: .5rem; }
.own-subhead { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin: .9rem 0 .35rem; }
.own-list { list-style: none; padding: 0; margin: 0; }
.own-list li { padding: .15rem 0; }
.shortlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.shortlist li {
  display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .25rem .2rem .9rem; border-radius: 999px;
  border: 1px solid rgba(245, 207, 107, .45); font-family: var(--heading-font); color: #fff;
}
.shortlist .icon-btn { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
.band-fineprint { font-size: .85rem; color: var(--ink-muted); border-top: 1px solid rgba(185, 166, 255, .12); padding-top: 1rem; }

@media (max-width: 575.98px) {
  .band-title { font-size: 2rem; }
  .band-go { margin-left: 0; width: 100%; justify-content: center; }
  .band-name { font-size: 1.2rem; }
  .vinyl { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave, .wave-breathe, .eq i, .vinyl, .band-card.swap-in .band-name { animation: none !important; }
}

/* Planet tracker: retrograde badge in a purple-red that fits the night palette */
.badge-retrograde {
  background-color: #a4306f; color: #fff; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 0 12px rgba(164, 48, 111, .45);
}

/* Moon tracker: Northern / Southern Hemisphere view for the moon emoji */
.hemisphere-toggle { color: var(--ink-muted); }
.hemisphere-toggle button {
  background: none; border: none; padding: 0; color: var(--purple); text-decoration: underline; text-underline-offset: 3px;
}
.hemisphere-toggle button:hover { color: var(--purple-hover); }
.hemisphere-toggle button[aria-pressed="true"] { color: #fff; font-weight: 600; text-decoration: none; cursor: default; }

/* Elements & modalities: hover hints on the trackers and the guide on the Zodiac page */
a.quality-hint { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-muted); }
a.quality-hint:hover, a.quality-hint:focus-visible { color: var(--purple-hover); border-bottom-color: var(--purple-hover); }
.qualities { scroll-margin-top: 1rem; }
#elements, #modalities { scroll-margin-top: 1rem; }
.quality-table-wrap { overflow-x: auto; }
.quality-table { width: 100%; max-width: 640px; margin: 0 auto; border-collapse: collapse; text-align: center; }
.quality-table th, .quality-table td { padding: .55rem .35rem; border-bottom: 1px solid rgba(185, 166, 255, .12); }
.quality-table thead th { border-bottom-color: var(--panel-border); }
.quality-table tbody th { text-align: left; font-family: var(--heading-font); font-weight: 600; color: var(--ink-muted); }
.quality-table td a { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); line-height: 1.2; }
.quality-table td a:hover { color: var(--purple-hover); }
.quality-glyph { font-size: 1.35rem; color: var(--purple); font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif; }
.quality-list dt { font-family: var(--heading-font); font-size: 1.05rem; margin-top: .9rem; }
.quality-list dt small { font-family: var(--bs-body-font-family, inherit); font-size: .8rem; font-weight: 400; margin-left: .35rem; }
.quality-list dd { margin: .2rem 0 0; }
@media (max-width: 575.98px) {
  .quality-table { font-size: .85rem; }
  .quality-glyph { font-size: 1.1rem; }
}

/* Footer: the quiet "buy me a coffee" link */
.footer .coffee-link { color: var(--ink-muted); text-decoration: none; }
.footer .coffee-link:hover, .footer .coffee-link:focus-visible { color: var(--gold); }
/* Footer: the usual links on the left, Spooky Corner tucked into the bottom right */
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.footer .spooky-link { margin-left: auto; color: var(--ink-muted); text-decoration: none; }
.footer .spooky-link:hover, .footer .spooky-link:focus-visible { color: var(--purple); }
/* Members' sign-in is just a small, quiet crescent so visitors don't mistake it for something they need */
.footer .signin-moon { color: var(--ink-muted); text-decoration: none; opacity: .6; }
.footer .signin-moon:hover, .footer .signin-moon:focus-visible { color: var(--gold); opacity: 1; }
/* "Sign out" is a form button (sign-out must be a POST), styled like the footer's links */
.footer .footer-signout { font-size: inherit; line-height: inherit; color: var(--purple); text-decoration: underline; border: 0; }
.footer .footer-signout:hover, .footer .footer-signout:focus-visible { color: var(--gold); }

/* Python Practice (members only) */
.py-lesson-list li { margin-bottom: .5rem; }
.py-count { margin-left: .5rem; font-size: .85rem; color: var(--ink-muted); }
.py-count-done { color: var(--gold); }
.py-intro pre, .py-output { background: rgba(0, 0, 0, .35); border: 1px solid var(--panel-border); border-radius: .4rem;
  padding: .6rem .8rem; color: var(--ink); font-size: .9rem; white-space: pre-wrap; }
.py-intro code, .py-exercise code { color: var(--gold); }
.py-exercise { border-top: 1px solid var(--panel-border); padding-top: 1rem; margin-top: 1.5rem; }
.py-exercise h3 { font-size: 1.2rem; }
.py-tick { display: none; color: var(--gold); }
.py-done .py-tick { display: inline; }
.py-editor { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .95rem;
  background: rgba(0, 0, 0, .45) !important; color: var(--ink) !important; border-color: var(--panel-border); tab-size: 4; }
.py-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.py-output:empty { display: none; }
.py-output.py-error { color: #ffb4a8; }
.py-result.py-pass { color: var(--gold); }
.py-result.py-fail { color: #ffb4a8; }
.py-hint summary { color: var(--purple); cursor: pointer; }
.py-solution { background: rgba(0, 0, 0, .35); border: 1px solid var(--panel-border); border-radius: .4rem; padding: .6rem .8rem; color: var(--ink); }
/* SVG & Animation: code on the left, live drawing on the right (stacked on phones) */
.svg-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
@media (max-width: 700px) { .svg-workspace { grid-template-columns: minmax(0, 1fr); } }
.svg-preview { width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--panel-border); border-radius: .4rem; background: var(--space-bg); }
.svg-warning { color: #ffb4a8; min-height: 1.2em; margin: .35rem 0 0; }

/* Spooky Corner page */
.spooky-art { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto .5rem; }
/* Spooky Corner floaters (Views/Home/_SpookyFloaters.cshtml): like the twinkling stars, they drift gently around the
   page edges (planet-float); bats flap, the ghost sways, the cauldron bubbles */
.spooky-floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.spooky-float { position: absolute; filter: drop-shadow(0 0 7px rgba(185,166,255,.55)); animation: planet-float 10s ease-in-out infinite; }
.sf1 { top: 18%; left: 3%;  animation-duration: 9s;  animation-delay: -2s; }
.sf2 { top: 34%; right: 3%; animation-duration: 11s; animation-delay: -5s; }
.sf3 { top: 72%; left: 12%; animation-duration: 8s;  animation-delay: -1s; }
.sf4 { top: 50%; left: 4%;  animation: planet-float 12s ease-in-out infinite, ghost-sway 5s ease-in-out infinite; animation-delay: -3s, -1s;
  filter: drop-shadow(0 0 9px rgba(241,236,255,.6)); }
.sf5 { top: 80%; right: 4%; animation-duration: 10s; animation-delay: -6s; }
.sf6 { top: 86%; left: 3%;  animation-duration: 11s; animation-delay: -4s; }
.sf7 { top: 60%; right: 13%; animation-duration: 9s; animation-delay: -7s; filter: drop-shadow(0 0 8px rgba(233,134,47,.6)); }
.sf8 { top: 24%; left: 17%; animation-duration: 13s; animation-delay: -3s; filter: drop-shadow(0 0 8px rgba(245,207,107,.7)); }
@keyframes ghost-sway { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
.bat-wing { animation: bat-flap .35s ease-in-out infinite alternate; }
.bat-wing-l { transform-origin: 28px 15px; }
.bat-wing-r { transform-origin: 36px 15px; }
@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.bubble { animation: bubble-rise 2.4s ease-in infinite; }
.bubble.b2 { animation-delay: -.8s; } .bubble.b3 { animation-delay: -1.6s; }
@keyframes bubble-rise { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (max-width: 1199px) { .spooky-float { opacity: .7; } }

/* Friends either side of the Spooky Corner film (Views/Home/_SpookyHeroDeco.cshtml), placed from the page centre so they
   sit in the empty sky beside the 560px film; only on wide screens */
.hero-deco { display: none; }
@media (min-width: 1300px) {
  .hero-deco { display: block; position: absolute; inset: 0; pointer-events: none; }
  .deco { position: absolute; filter: drop-shadow(0 0 7px rgba(185,166,255,.5)); animation: planet-float 10s ease-in-out infinite; }
  .deco-spider { left: calc(50% - 345px); top: -1rem; animation: spider-dangle 6s ease-in-out infinite; transform-origin: 50% 0; }
  .deco-candy  { left: calc(50% - 560px); top: 170px; animation-duration: 9s; animation-delay: -3s; filter: drop-shadow(0 0 7px rgba(245,207,107,.55)); }
  .deco-cat    { left: calc(50% - 455px); top: 330px; animation: none; }
  .deco-house  { left: calc(50% + 330px); top: 320px; animation: none; }
  .deco-owl    { left: calc(50% + 340px); top: 120px; animation-duration: 11s; animation-delay: -5s; }
  .deco-ghost2 { left: calc(50% + 500px); top: 230px; animation-duration: 8s; animation-delay: -2s; filter: drop-shadow(0 0 9px rgba(241,236,255,.6)); }
}
@keyframes spider-dangle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(26px) rotate(3deg); } }
.cat-tail { transform-origin: 38px 56px; animation: cat-tail 3s ease-in-out infinite alternate; }
@keyframes cat-tail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.cat-eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.owl-lids { transform-box: fill-box; transform-origin: top; transform: scaleY(0); animation: owl-blink 4s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes owl-blink { 0%, 90%, 100% { transform: scaleY(0); } 93%, 96% { transform: scaleY(1); } }
.house-windows, .house-attic { animation: window-flicker 3.2s ease-in-out infinite; }
.house-attic { animation-delay: -1.3s; }
@keyframes window-flicker { 0%, 100% { opacity: 1; } 40% { opacity: .65; } 55% { opacity: .95; } 70% { opacity: .55; } }
.ghost-arm { transform-origin: 36px 20px; animation: ghost-wave 1.4s ease-in-out infinite alternate; }
@keyframes ghost-wave { from { transform: rotate(-10deg); } to { transform: rotate(16deg); } }
@media (prefers-reduced-motion: reduce) {
  .deco, .cat-tail, .cat-eye, .owl-lids, .house-windows, .house-attic, .ghost-arm { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .spooky-float, .bat-wing, .bubble { animation: none; } }

/* Bats and moon tucked into the Spooky Corner's top right corner */
.spooky-page { position: relative; }
.spooky-corner-art { position: absolute; top: -.5rem; right: 0; width: 190px; height: auto; pointer-events: none; z-index: 0; }
.spooky-page > .hero { position: relative; }
/* Wide screens: out past the content column, 70px from the window's right edge (the column is 960px, centred) */
@media (min-width: 1300px) { .spooky-corner-art { right: calc(480px - 50vw + 70px); } }
@media (max-width: 991px) { .spooky-corner-art { width: 130px; } }
@media (max-width: 575px) { .spooky-corner-art { width: 96px; top: -.75rem; right: -.25rem; opacity: .9; } }
.spooky-pumpkin { display: block; width: 140px; height: auto; margin: 1.5rem auto 0; }
/* Spooky Corner sections: the Halloween moon, spooky nights, Samhain, stories, pictures */
.spooky-toc a { color: var(--purple); }
.spooky-section { margin-top: 2.5rem; }
.spooky-section h2 { font-size: 1.6rem; border-bottom: 1px solid var(--panel-border); padding-bottom: .35rem; margin-bottom: 1rem; }
.spooky-section h3 { font-size: 1.05rem; color: var(--gold); margin-bottom: .4rem; }
.spooky-moon { display: flex; gap: 1.5rem; align-items: center; }
.spooky-moon .phase-moon { flex: 0 0 auto; }
@media (max-width: 575px) { .spooky-moon { flex-direction: column; text-align: center; } }
.spooky-subhead { position: relative; z-index: 1; text-align: center; margin-bottom: 1.5rem; padding-top: 1rem; }
.spooky-subhead p:first-child { font-size: .9rem; }
/* Old Spooky Films: each film beside a short strip of film (sprocket holes drawn with gradients), year on the frame */
.film-list { list-style: none; padding: 0; margin: 0; }
.film-entry { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.3rem 0; border-bottom: 1px solid rgba(185, 166, 255, .14); }
.film-entry:last-child { border-bottom: 0; }
.film-strip { flex: 0 0 74px; height: 104px; border-radius: 3px; position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, #e8e6f5 5px 11px, transparent 11px 16px) left 4px top 0 / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 5px, #e8e6f5 5px 11px, transparent 11px 16px) right 4px top 0 / 6px 100% no-repeat,
    #15111f;
  box-shadow: 0 0 0 1px rgba(185, 166, 255, .35); }
.film-strip span { position: absolute; inset: 10px 15px; display: grid; place-items: center; border-radius: 2px;
  background: radial-gradient(circle at 50% 40%, #3a3150, #1d1730); color: var(--gold); font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: .95rem; }
.film-text { min-width: 0; }
.film-title { font-family: var(--font), 'Josefin Sans', serif; font-size: 1.7rem; font-weight: 400; color: var(--purple); margin: 0 0 .15rem; }
.film-meta { color: var(--ink-muted); font-size: .9rem; margin-bottom: .45rem; }
.film-watch { color: var(--gold); font-weight: 600; text-decoration: none; }
.film-watch:hover, .film-watch:focus { text-decoration: underline; }
@media (max-width: 575px) { .film-strip { flex-basis: 56px; height: 80px; } .film-strip span { inset: 8px 12px; font-size: .8rem; } .film-title { font-size: 1.4rem; } }
/* The film player: a screen set in a strip of film (sprocket holes down both sides, like .film-strip), a "Now showing"
   title card in the film's own font, and previous / next below */
.film-player { position: relative; z-index: 1; margin: 0 auto 2rem; max-width: 720px; scroll-margin-top: 1rem; }
.player-frame { padding: 10px 26px; border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, #e8e6f5 7px 15px, transparent 15px 22px) left 8px top 0 / 9px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 7px, #e8e6f5 7px 15px, transparent 15px 22px) right 8px top 0 / 9px 100% no-repeat,
    #15111f;
  box-shadow: 0 0 0 1px rgba(185, 166, 255, .35), 0 0 40px rgba(109, 75, 255, .25); }
.player-screen { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 2px; overflow: hidden; }
.player-screen video { width: 100%; height: 100%; display: block; background: #000; }
.player-screen video::cue { background: rgba(11, 13, 33, .82); color: #f4f2fb; font-family: 'Josefin Sans', sans-serif; font-size: 1.05rem; line-height: 1.35; }
.player-card { position: absolute; inset: 0 0 auto 0; padding: 1rem 1.2rem 2.2rem; display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(180deg, rgba(11, 13, 33, .92), rgba(11, 13, 33, 0)); pointer-events: none;
  opacity: 0; transition: opacity .6s ease; }
.player-card.show { opacity: 1; }
.player-card-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.player-card-title { font-size: clamp(1.4rem, 4vw, 2.2rem); line-height: 1.15; color: var(--purple); }
.player-card-year { font-size: .9rem; color: var(--ink-muted); }
.player-bar { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.player-now { flex: 1; min-width: 0; margin: 0; text-align: center; line-height: 1.25; }
.player-now-title { display: block; font-size: 1.3rem; color: var(--purple); }
.player-now-meta { display: block; font-size: .8rem; color: var(--ink-muted); }
.player-note { text-align: center; margin: .5rem 0 0; }
.film-play { background: none; border: 0; padding: 0; color: var(--gold); font-weight: 600; cursor: pointer; }
.film-play:hover, .film-play:focus-visible { text-decoration: underline; }
.film-play.playing { color: var(--purple); }
.film-or { color: var(--ink-muted); margin: 0 .4rem; }
.film-watch { font-weight: 400; }
.coming-soon .film-title { font-size: 1.7rem; color: var(--purple); margin: 0 0 .15rem; }
.film-strip-soon span { color: var(--purple); }
.film-soon { color: var(--gold); font-weight: 600; margin: 0; }
@media (max-width: 575px) {
  .player-frame { padding: 6px 16px; background-size: 6px 100%, 6px 100%, auto; background-position: left 5px top 0, right 5px top 0, 0 0; }
  .player-bar button { padding: .25rem .45rem; font-size: .75rem; }
  .player-now-title { font-size: 1.05rem; }
  .coming-soon .film-title { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .player-card { transition: none; } }
/* Photos & Printables slideshows: one slide at a time, swipeable (scroll-snap), arrows and dots */
.slideshow { position: relative; padding: 0 2.6rem 0; }
.slideshow .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline-offset: 4px; }
.slideshow .slides::-webkit-scrollbar { display: none; }
.slideshow .slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 .25rem; }
.slideshow .goddess-painting { margin-top: .5rem; }
.slideshow .goddess-painting img { width: auto; max-width: 100%; height: auto; max-height: 460px; }
.slideshow .painting-crop { max-height: 460px; margin: 0 auto; }
.slide-arrow { position: absolute; top: 230px; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 1px solid var(--panel-border); background: rgba(11,13,33,.8); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.slide-arrow:hover, .slide-arrow:focus-visible { border-color: var(--purple); color: var(--gold); }
.slide-prev { left: 0; }
.slide-next { right: 0; }
.slide-dots { display: flex; justify-content: center; gap: .45rem; margin-top: .9rem; }
.slide-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid var(--purple); background: transparent; padding: 0; cursor: pointer; }
.slide-dot[aria-current="true"] { background: var(--gold); border-color: var(--gold); }
@media (max-width: 575px) { .slideshow { padding: 0; } .slide-arrow { top: auto; bottom: -.35rem; transform: none; } .slide-dots { margin-top: 1.1rem; } }

/* Book-illustration gallery: thumbnails that open the zoom viewer */
.zoom-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2rem; align-items: start; }
.gallery-item { margin: 0; text-align: center; }
.gallery-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-thumb img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 18px rgba(109,75,255,.25); }
.gallery-thumb .painting-crop { display: block; }
.gallery-thumb:hover img, .gallery-thumb:focus-visible img { box-shadow: 0 0 0 2px var(--purple), 0 0 22px rgba(185,166,255,.45); }
.gallery-zoom-badge { position: absolute; right: .5rem; bottom: .5rem; width: 2rem; height: 2rem; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: rgba(11,13,33,.75); font-size: .95rem; }
.gallery-item figcaption { margin-top: .6rem; }
.gallery-item figcaption span { display: block; }

/* The zoom viewer: a full-window dialog; "Fit" shows the whole picture, zoomed it scrolls and can be dragged */
.zoom-dialog { width: 96vw; height: 94vh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--panel-border);
  border-radius: 8px; background: #07081a; color: var(--ink); }
.zoom-dialog::backdrop { background: rgba(5, 6, 18, .85); }
.zoom-dialog[open] { display: flex; flex-direction: column; }
.zoom-toolbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
.zoom-title { flex: 1 1 auto; font-size: .9rem; color: var(--ink-muted); min-width: 10rem; }
.zoom-toolbar button { min-width: 2.2rem; height: 2.1rem; border-radius: 6px; border: 1px solid var(--panel-border); background: rgba(185,166,255,.08); color: var(--ink); }
.zoom-toolbar button:hover:not(:disabled), .zoom-toolbar button:focus-visible { border-color: var(--purple); color: var(--gold); }
.zoom-toolbar button:disabled { opacity: .4; }
.zoom-commons { font-size: .9rem; margin: 0 .25rem; }
.zoom-stage { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.zoom-stage img { max-width: 100%; max-height: 100%; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.zoom-stage.zoomed { overflow: auto; display: block; cursor: grab; }
.zoom-stage.zoomed img { max-width: none; max-height: none; height: auto; cursor: zoom-out; }

.postcard-print { display: none; }
@media print {
  .spooky-corner-art, .spooky-subhead, .slide-arrow, .slide-dots, .zoom-dialog { display: none !important; }
}

/* Postcard print choices on the page */
.pc-options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; margin: .25rem 0 .5rem; font-size: .9rem; }
.pc-options label { display: flex; flex-direction: column; gap: .2rem; color: var(--ink-muted); }
.pc-options select { min-width: 15rem; }
.pc-backs-step { border-left: 3px solid var(--gold); padding: .6rem .9rem; margin: .25rem 0 .75rem; background: rgba(245,207,107,.06); border-radius: 0 6px 6px 0; font-size: .92rem; }

/* "Print postcard": 6 × 4 in cards, front (the picture; tall ones are turned sideways like real postcards) then back.
   .pc-sheet = one card per 4 × 6 page; .pc-page = two cards on a Letter/A4 page with dashed cut lines */
@page postcard { size: 6in 4in; margin: 0; }
@page pcsheet { size: portrait; margin: .4in; }   /* fixed portrait so the backs page lines up when flipped on the long edge */
@media print {
  body.printing-postcard .spooky-photos-page { display: none !important; }
  body.printing-postcard .postcard-print { display: block; }
  .pc-sheet { page: postcard; break-after: page; }
  .pc-page { page: pcsheet; display: flex; flex-direction: column; align-items: center; gap: .5in; break-after: page; }
  .pc-sheet:last-child, .pc-page:last-child { break-after: auto; }
  .pc-card { position: relative; width: 6in; height: 4in; overflow: hidden; background: #fff; }
  .pc-page .pc-card { outline: 1px dashed #b8b2cf; }
  .pc-front img { position: absolute; inset: .08in; width: calc(100% - .16in); height: calc(100% - .16in); object-fit: contain; }
  .pc-front.pc-portrait img { inset: auto; left: 50%; top: 50%; width: calc(4in - .16in); height: calc(6in - .16in);
    transform: translate(-50%, -50%) rotate(-90deg); }
  .pc-back { color: #2b2540; font-family: "Josefin Sans", sans-serif; }
  .pc-heading { position: absolute; top: .22in; left: 0; right: 0; text-align: center; font-size: 15pt; font-weight: 700;
    letter-spacing: .35em; text-transform: uppercase; color: #3d2a9e; }
  .pc-divider { position: absolute; left: 3.15in; top: .7in; bottom: .35in; border-left: 1.2px solid #8f86bd; }
  .pc-stamp { position: absolute; top: .25in; right: .25in; width: .85in; height: 1in; border: 1.2px dashed #8f86bd;
    display: flex; align-items: center; justify-content: center; text-align: center; font-size: 6.5pt; letter-spacing: .1em;
    text-transform: uppercase; color: #8f86bd; line-height: 1.5; }
  .pc-lines { position: absolute; left: 3.4in; right: .3in; top: 1.65in; display: flex; flex-direction: column; gap: .42in; }
  .pc-lines span { display: block; border-bottom: 1px solid #8f86bd; }
  .pc-credit { position: absolute; left: .3in; bottom: .25in; width: 2.6in; font-size: 6.5pt; line-height: 1.35; color: #6b6585; }
  .pc-credit strong { display: block; font-size: 7.5pt; color: #3d2a9e; }
  .pc-credit .pc-caption { display: block; font-size: 7pt; color: #3b3554; margin: .03in 0 .05in; }
  .pc-credit .pc-made { display: block; }
}
/* Coloring pages (Printables): code-drawn SVGs in wwwroot/img/coloring, shown as sheets of paper; printed one per page */
.coloring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.75rem 1.5rem; }
.coloring-item { margin: 0; text-align: center; }
.coloring-item img { width: 100%; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.coloring-item figcaption { margin-top: .6rem; }
.coloring-title { display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 600; color: var(--gold); }
.coloring-blurb { display: block; font-size: .85rem; color: var(--ink-muted); }
.coloring-print { display: none; }
@page coloring { size: portrait; margin: .4in; }
@media print {
  body.printing-coloring .spooky-photos-page { display: none !important; }
  body.printing-coloring .coloring-print { display: block; }
  /* The whole print uses the coloring page's size, so nothing left over (like the page's bottom padding) lands on an
     extra sheet in the site's default landscape page; 9.8in leaves room under Letter's 10.2in */
  body.printing-coloring, body.printing-coloring main { page: coloring; padding-bottom: 0 !important; }
  .cp-page { page: coloring; break-after: page; height: 9.8in; display: flex; flex-direction: column; color: #222;
    font-family: 'Josefin Sans', sans-serif; }
  .cp-page:last-child { break-after: auto; }
  .cp-name { margin: 0 0 .12in; font-size: 13pt; }
  .cp-name::after { content: ""; display: inline-block; width: 3.2in; margin-left: .1in; border-bottom: 1px solid #222; }
  .cp-page img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; }
  .cp-foot { margin: .08in 0 0; text-align: center; font-size: 8.5pt; color: #666; }
}
/* The spooky montage uses the home page's feathered oval (.hero-film); it's 4:3 like the home clip, and the stronger
   feathering fades the Méliès archive copy's corner logo into the edge */
/* "screen" blending lets the night sky show through the film's black areas (Häxan's starry heaven, cosmos and night
   flight are mostly black), so the dark scenes melt into the page instead of sitting in a black hole */
/* Blending needs the film to share a layer with the page background, so the Spooky Corner page wrapper and hero don't
   start their own layer (z-index auto); the sections below are lifted above the floating stars instead */
.spooky-page.ipsum-page, .spooky-page > .hero { z-index: auto; }
.spooky-page > :not(.hero):not(.spooky-corner-art) { position: relative; z-index: 1; }
.spooky-hero-film video { mix-blend-mode: screen; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.3) hue-rotate(215deg) saturate(1.3) contrast(1.1) brightness(.95);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 46%, transparent 66%); mask-image: radial-gradient(ellipse at center, #000 46%, transparent 66%); }

/* Spooky book-spine fonts: original files from Google Fonts, licenses in wwwroot/fonts/spooky (browsers only fetch the
   ones a page actually uses, so only the Spooky Corner loads them) */
@font-face { font-family: "IM Fell English"; src: url("../fonts/spooky/IMFellEnglish-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Pirata One"; src: url("../fonts/spooky/PirataOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Mystery Quest"; src: url("../fonts/spooky/MysteryQuest-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Henny Penny"; src: url("../fonts/spooky/HennyPenny-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("../fonts/spooky/CinzelDecorative-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Almendra"; src: url("../fonts/spooky/Almendra-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/spooky/SpecialElite-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UnifrakturMaguntia"; src: url("../fonts/spooky/UnifrakturMaguntia-Book.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url("../fonts/spooky/GrenzeGotisch-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Creepster"; src: url("../fonts/spooky/Creepster-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Griffy"; src: url("../fonts/spooky/Griffy-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Metal Mania"; src: url("../fonts/spooky/MetalMania-Regular.ttf") format("truetype"); font-display: swap; }

/* The ghost-story shelf: every row is 230px tall, books stand on a wooden plank drawn by the repeating background */
.bookshelf { position: relative; padding: 1.4rem 1.1rem 0; border-radius: 6px;
  background: linear-gradient(180deg, #1a1226, #120c1b); box-shadow: inset 0 10px 30px rgba(0,0,0,.6), 0 0 0 6px #3a2615, 0 0 0 7px #24170d; }
.shelf-books { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  background: repeating-linear-gradient(180deg, transparent 0 212px, #5a3a1e 212px 216px, #3d2614 216px 226px, #24170d 226px 230px); }
.shelf-slot { height: 230px; padding-bottom: 18px; display: flex; align-items: flex-end; }
.book { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: var(--w); height: var(--h); margin: 0 1px; padding: 16px 0 12px; border-radius: 3px 3px 1px 1px; text-decoration: none;
  background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 22%, rgba(255,255,255,.08) 45%, transparent 70%, rgba(0,0,0,.5)), var(--spine);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 2px 0 3px rgba(0,0,0,.5);
  transition: transform .2s ease, box-shadow .2s ease; }
.book::before, .book::after { content: ""; position: absolute; left: 4px; right: 4px; height: 3px;
  border-top: 1px solid rgba(245,207,107,.7); border-bottom: 1px solid rgba(245,207,107,.7); }
.book::before { top: 8px; }
.book::after { bottom: 6px; }
.book-title { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); font-family: var(--font, "Josefin Sans"), serif; font-size: var(--fs, 12.5px);
  line-height: 1.15; color: #f1dda0; text-align: center; max-height: calc(var(--h) - 62px); overflow: hidden; letter-spacing: .03em;
  margin: auto 0; /* centered on the spine, between the top band and the author's name */ }
.book-author { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: rgba(241, 221, 160, .7); }
.book:hover, .book:focus-visible { transform: translateY(-10px); box-shadow: inset 0 0 0 1px rgba(245,207,107,.6), 0 6px 14px rgba(0,0,0,.6), 0 0 12px rgba(185,166,255,.35); outline: none; }
.shelf-decor { padding-left: .6rem; padding-right: .6rem; }
/* The lantern on the third shelf: its candle flame flickers (like the shelf candles) and the warm glow pulses with it */
.shelf-lantern { display: block; filter: drop-shadow(0 0 8px rgba(245,207,107,.45)); }
.lantern-flame { transform-origin: 35px 64px; animation: candle-flicker 1.6s ease-in-out infinite alternate; }
.lantern-halo { animation: lantern-glow 1.6s ease-in-out infinite alternate; }
@keyframes lantern-glow { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lantern-flame, .lantern-halo { animation: none; } }
.raven-eye { animation: raven-blink 6s steps(1) infinite; }
@keyframes raven-blink { 0%, 96% { opacity: 1; } 97%, 99% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .raven-eye { animation: none; } }
.shelf-web { position: absolute; top: 0; width: 70px; height: 70px; pointer-events: none; }
.shelf-web-left { left: 0; }
.shelf-web-right { right: 0; transform: scaleX(-1); }
.candle-flame { transform-origin: 20px 32px; animation: candle-flicker 1.6s ease-in-out infinite alternate; }
.candle-glow { animation: candle-glow 1.6s ease-in-out infinite alternate; }
@keyframes candle-flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.92, 1.06) rotate(2deg); } 100% { transform: scale(1.04, .95) rotate(-1deg); } }
@keyframes candle-glow { from { opacity: .14; } to { opacity: .24; } }
@media (prefers-reduced-motion: reduce) {
  .candle-flame, .candle-glow { animation: none; }
  .book { transition: none; }
}

/* Goddess encyclopedia */
.goddess-search { max-width: 520px; margin: 0 auto; background: rgba(11, 13, 33, .6); border-color: var(--panel-border); color: var(--ink); }
.goddess-search:focus { background: rgba(11, 13, 33, .75); color: var(--ink); border-color: var(--purple); box-shadow: 0 0 0 .2rem rgba(185, 166, 255, .25); }
.goddess-search::placeholder { color: var(--ink-muted); opacity: .75; }
.goddess-filters { text-align: center; }
.goddess-filters .chip-row { justify-content: center; }
.filter-chip {
  background: none; border: 1px solid var(--panel-border); color: var(--ink); border-radius: 999px;
  padding: .25rem .8rem; font-size: .88rem; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.filter-chip:hover { border-color: var(--trad, var(--purple)); }
.filter-chip[aria-pressed="true"] {
  border-color: var(--trad, var(--purple)); color: #fff;
  background: color-mix(in srgb, var(--trad, var(--purple)) 22%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--trad, var(--purple)) 45%, transparent);
}
.goddess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1.25rem .75rem; }
.goddess-card {
  display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; padding: .85rem .35rem;
  text-decoration: none; color: var(--ink); border-radius: 14px; transition: transform .15s ease, background-color .15s ease;
}
.goddess-card[hidden] { display: none; }
.goddess-card:hover, .goddess-card:focus-visible { color: var(--ink); background: rgba(185, 166, 255, .08); transform: translateY(-3px); }
.goddess-card .medallion { margin-bottom: .35rem; filter: drop-shadow(0 0 10px rgba(185, 166, 255, .25)); }
.goddess-card-name { font-family: var(--heading-font); font-size: 1.15rem; font-weight: 600; color: #fff; line-height: 1.2; }
.goddess-card-trad { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.goddess-card-domains { font-size: .8rem; color: var(--ink-muted); }
.goddess-page .medallion { filter: drop-shadow(0 0 16px rgba(185, 166, 255, .3)); }
.trad-pill {
  display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none;
  color: #fff; border: 1px solid var(--trad); background: color-mix(in srgb, var(--trad) 22%, transparent);
}
.trad-pill:hover { color: #fff; background: color-mix(in srgb, var(--trad) 35%, transparent); }
.living-pill {
  display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: var(--gold); border: 1px solid rgba(245, 207, 107, .55);
}
.living-note { border-left: 2px solid rgba(245, 207, 107, .55); padding-left: .75rem; }
.corr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem 1.5rem; margin: 0 0 .5rem; }
.corr-list dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); font-weight: 600; }
.corr-list dd { margin: 0; }
.source-list { padding-left: 1.1rem; }
/* Planet page <-> goddess page for the same figure (Planets.GoddessFor / ForGoddess) */
.cross-page-link { font-size: .95rem; margin-top: -.25rem; }
.cross-page-link a { color: var(--gold); text-decoration: none; }
.cross-page-link a:hover, .cross-page-link a:focus { text-decoration: underline; }
.goddess-fineprint { font-size: .85rem; color: var(--ink-muted); border-top: 1px solid rgba(185, 166, 255, .12); padding-top: 1rem; }

/* Goddess pages: "In Homer" section */
.homer-section { border-left: 2px solid rgba(185, 166, 255, .35); padding-left: 1rem; }
.epithet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem 1.25rem; margin: 0 0 .75rem; }
.epithet-list dt { font-family: var(--heading-font); font-style: italic; font-weight: 600; color: var(--purple); font-size: 1.05rem; }
.epithet-list dd { margin: 0; }
.homer-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.homer-list li { display: grid; grid-template-columns: minmax(8rem, 10.5rem) 1fr; gap: .1rem 1rem; padding: .35rem 0; border-bottom: 1px solid rgba(185, 166, 255, .1); }
.homer-ref { font-size: .88rem; font-weight: 600; color: var(--gold); text-decoration: none; }
.homer-ref:hover { color: #ffe39b; text-decoration: underline; }
.homer-note { font-style: italic; margin: .5rem 0; }
@media (max-width: 575.98px) { .homer-list li { grid-template-columns: 1fr; } }
.source-group-title { font-family: var(--heading-font); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin: 1rem 0 .5rem; }
.homer-section h5 + .source-group-title { margin-top: .4rem; }
.homer-list li > span.homer-ref { color: var(--gold); opacity: .85; }

/* ===== Moon & Seasons Calendar ===== */

/* ===== Moon & Seasons Calendar ===== */
.calendar-page { max-width: 1100px; margin: 0 auto; --moon-lit: #f3eeff; --moon-dark: #2a2550; --moon-edge: rgba(214, 203, 255, .7); }
.cal-year-nav { display: flex; justify-content: center; align-items: baseline; gap: 1.5rem; margin-bottom: 1rem; }
.cal-year-current { font-family: var(--heading-font); font-size: 2rem; font-weight: 700; color: #fff; }
.cal-year-step { text-decoration: none; font-size: 1.05rem; }
.cal-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: center; }
.cal-toggles { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; border: 0; padding: 0; margin: 0; }
.cal-toggle {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--panel-border); font-size: .88rem; user-select: none;
}
.cal-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cal-swatch { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--gc); }
.cal-toggle:has(input:checked) { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 18%, transparent); color: #fff; }
.cal-toggle:has(input:checked) .cal-swatch { background: var(--gc); }
.cal-toggle:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-actions { display: flex; gap: .6rem; align-items: center; }
.cal-hemi select { background-color: rgba(11, 13, 33, .6); color: var(--ink); border-color: var(--panel-border); }

.cal-icon { vertical-align: -2px; flex: 0 0 auto; }
.cal-icon .mi-lit { fill: var(--moon-lit); }
.cal-icon .mi-dark { fill: var(--moon-dark); stroke: var(--moon-edge); stroke-width: 1; }
.cal-icon .mi-wheel { fill: none; stroke: var(--gc, var(--gold)); stroke-width: 1.4; }
.cal-icon .mi-dot { fill: var(--gc, var(--purple)); }
.cal-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gc, var(--purple)); flex: 0 0 auto; }

.cal-print-title { display: none; }
.cal-year { margin-top: 2rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; justify-content: center; font-size: .82rem; color: var(--ink-muted); margin-bottom: 1rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem 1.4rem; }
.mini-month { text-decoration: none; color: var(--ink); display: block; padding: .4rem; border-radius: 10px; }
.mini-month:hover { background: rgba(185, 166, 255, .07); color: var(--ink); }
.mini-title { display: block; font-family: var(--heading-font); font-weight: 600; color: var(--purple); text-align: center; margin-bottom: .25rem; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: .74rem; text-align: center; }
.mini-wd { color: var(--ink-muted); font-size: .66rem; }
.mini-day { position: relative; min-height: 1.75rem; padding-top: .12rem; line-height: 1; }
.mini-moon { position: absolute; top: 1px; right: 1px; line-height: 0; }
.mini-num { display: block; }
.mini-dots { display: flex; justify-content: center; gap: 1px; margin-top: .15rem; }
.mini-dots .cal-dot { width: .3rem; height: .3rem; }
.cal-group-notes { margin-top: 1.5rem; font-size: .8rem; color: var(--ink-muted); columns: 2 320px; column-gap: 2rem; }
.cal-group-notes p { break-inside: avoid; margin-bottom: .5rem; }
.cal-credit { font-size: .72rem; opacity: .8; }

.cal-month { margin-top: 3rem; }
.cal-month-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: .5rem; }
.cal-month-head h2 { margin: 0; font-size: 1.8rem; }
.cal-month-year { color: var(--ink-muted); font-weight: 400; }
.cal-month-moons { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-moon-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; padding: .15rem .65rem; border-radius: 999px; border: 1px solid rgba(214, 203, 255, .4); }
.cal-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal-grid th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); font-weight: 600; text-align: left; padding: 0 .35rem .3rem; }
.cal-day { vertical-align: top; height: 6.4rem; padding: .25rem .35rem; border: 1px solid rgba(185, 166, 255, .16); overflow: hidden; }
.cal-day.empty { background: rgba(11, 13, 33, .25); }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--gold); }
@media print { .cal-day.is-today { box-shadow: none; } } /* today's gold outline is for the screen only */
.cal-num { display: block; font-family: var(--heading-font); font-weight: 600; color: #fff; font-size: .95rem; margin-bottom: .1rem; }
.ev { display: flex; align-items: center; gap: .25rem; font-size: .72rem; line-height: 1.2; margin-top: .1rem; }
.ev .cal-dot { width: .42rem; height: .42rem; }
.ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-time { color: var(--ink-muted); font-size: .66rem; white-space: nowrap; margin-left: auto; }
.ev-quarter .ev-title { color: var(--ink-muted); }
.cal-notes { list-style: none; padding: 0; margin: .9rem 0 0; columns: 2 380px; column-gap: 2rem; font-size: .82rem; }
.cal-notes li { display: grid; grid-template-columns: 3.1rem .6rem 1fr; gap: .4rem; align-items: baseline; break-inside: avoid; margin-bottom: .4rem; }
.cal-note-date { color: var(--ink-muted); font-size: .75rem; white-space: nowrap; }

@media (max-width: 700px) {
  .cal-day { height: 4.6rem; padding: .15rem; }
  .ev-time, .ev-quarter .ev-title { display: none; }
  .ev { font-size: .62rem; }
}

/* Print: light, ink-friendly pages. Year at a glance first, then one landscape page per month. */
@media print {
  @page { size: landscape; margin: 9mm; }
  html, body { background: #fff !important; color: #1d1b2a !important; }
  body > header, footer.footer, .ipsum-sky, .spooky-floaters, .hero-deco, .no-print, #blazor-error-ui { display: none !important; }
  main, .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .calendar-page { max-width: none; --moon-lit: #fff; --moon-dark: #3b3554; --moon-edge: #3b3554; }
  .cal-icon .mi-lit { stroke: #3b3554; stroke-width: 1; }
  .print-page { break-after: page; margin: 0 !important; }
  .print-page:last-child { break-after: auto; }
  .cal-print-title { display: block; text-align: center; font-size: 22pt; margin: 0 0 4pt; color: #3d2a9e; }
  .cal-legend, .cal-group-notes, .cal-note-date, .ev-time, .cal-month-year, .ev-quarter .ev-title, .mini-wd, .cal-grid th { color: #555 !important; }
  .mini-title, .cal-month-head h2 { color: #3d2a9e !important; }
  .cal-num, .mini-num { color: #1d1b2a !important; }
  .mini-month { padding: 2pt; }
  .cal-year-grid { grid-template-columns: repeat(4, 1fr); gap: 6pt 14pt; }
  .mini-grid { font-size: 7pt; }
  .mini-day { min-height: 15pt; }
  .cal-group-notes { font-size: 6.8pt; margin-top: 6pt; columns: 3; }
  .cal-month-head h2 { font-size: 20pt; }
  .cal-moon-chip { border-color: #bbb; font-size: 8pt; }
  .cal-day { height: 21.5mm; border-color: #c9c4dc; padding: 2pt 3pt; }
  .cal-day.empty { background: #f6f5fb; }
  .ev { font-size: 7pt; }
  .ev-time { font-size: 6pt; }
  .cal-dot, .mi-dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cal-dot { background: color-mix(in srgb, var(--gc) 75%, #000) !important; }
  .cal-icon .mi-wheel { stroke: color-mix(in srgb, var(--gc) 70%, #000); }
  .cal-notes { font-size: 7pt; margin-top: 5pt; columns: 2; }
  .cal-notes li { margin-bottom: 2pt; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* Calendar banner: the animated moon orbit above the title (img/projects/moon-orbit.svg) */
.cal-banner { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto .25rem; }
@media print { .cal-banner { display: none; } }

/* A few faint stars on the printed pages (light lavender outlines, very little ink) */
.cal-print-stars { display: none; }
@media print {
  .print-page { position: relative; }
  .cal-print-stars { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 11mm; pointer-events: none; }
}

/* Printed months: a small seasonal line drawing before the month name (Models/SeasonArt.cs) */
.cal-season, .cal-season-cell { display: none; }
@media print {
  .cal-season { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: -.4em; margin-right: .3em; }
  /* and a few more in the blank day boxes before the 1st and after the last day */
  .cal-day.empty { position: relative; }
  .cal-season-cell { display: block; position: absolute; inset: 6%; width: 88%; height: 88%; }
}

/* Goddess pages: a public-domain painting under the symbol */
.goddess-painting { margin: 1.5rem auto 0; text-align: center; }
.goddess-painting > a { display: inline-block; max-width: 100%; border-radius: 6px; overflow: hidden;
    box-shadow: 0 0 24px rgba(185, 166, 255, .18); transition: box-shadow .2s ease; }
.goddess-painting > a:hover, .goddess-painting > a:focus-visible { box-shadow: 0 0 30px rgba(185, 166, 255, .35); }
.goddess-painting > a > img { display: block; max-width: 100%; max-height: 42rem; width: auto; height: auto; }
/* A detail fills the column (a shrink-to-fit link would collapse it to nothing) */
.goddess-painting > a.painting-link-crop { display: block; max-width: 36rem; margin: 0 auto; }
.painting-crop { display: block; position: relative; overflow: hidden; width: 100%; }
.painting-crop img { position: absolute; max-width: none; height: auto; }
.goddess-painting figcaption { margin: .7rem auto 0; max-width: 36rem; font-size: .88rem; color: var(--ink-muted); line-height: 1.45; text-align: center; }
.goddess-painting figcaption > span { display: block; }
.painting-title { font-family: var(--heading-font); font-size: 1rem; color: var(--ink); font-style: italic; }
.painting-caption { margin-top: .35rem; }
.painting-credit { margin-top: .35rem; font-size: .78rem; opacity: .85; }

/* Calendar: one page at a time, with month tabs */
.cal-pager { display: flex; align-items: center; gap: .5rem; max-width: 900px; margin: 1.25rem auto .75rem; }
.cal-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; flex: 1; justify-content: safe center; padding: .2rem; }
.cal-tabs::-webkit-scrollbar { display: none; }
.cal-tab { flex: none; padding: .25rem .65rem; border-radius: 999px; font-family: var(--heading-font); font-size: .95rem;
    color: var(--ink-muted); text-decoration: none; border: 1px solid transparent; }
.cal-tab:hover { color: var(--ink); border-color: rgba(185, 166, 255, .35); }
.cal-tab.active { color: #fff; background: rgba(185, 166, 255, .2); border-color: rgba(185, 166, 255, .5); }
.cal-step { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(185, 166, 255, .35);
    background: transparent; color: var(--ink); font-size: 1.4rem; line-height: 1; padding: 0 0 .15rem; }
.cal-step:hover, .cal-step:focus-visible { background: rgba(185, 166, 255, .15); }
@media screen { #calendar.cal-paged .print-page:not(.is-current) { display: none; } }
@media print {
  #calendar.cal-print-one .print-page:not(.is-current) { display: none !important; }
  #calendar.cal-print-one .print-page.is-current { break-after: auto; }
}

/* Home page: calendar panel with the animated moon orbit */

/* Printed months fill the page: the grid stretches to use whatever height the notes leave */
@media print {
  .cal-month.print-page { display: flex; flex-direction: column; height: 186mm; overflow: hidden; }
  .cal-month.print-page .cal-grid { flex: 1 1 auto; height: 100%; }
  .cal-month.print-page .cal-day { height: 21.5mm; vertical-align: top; }
  .cal-month.print-page .cal-notes { flex: none; }
}

/* Goddess search: try-words, match hints, and links from a goddess page back to the search */
.goddess-try { text-align: center; }
.try-chip { background: none; border: 0; padding: 0 .3rem; color: var(--purple); font-size: .85rem; text-decoration: underline dotted; text-underline-offset: 3px; }
.try-chip:hover, .try-chip:focus-visible { color: #fff; }
.goddess-card-match { display: block; margin-top: .3rem; font-size: .75rem; color: var(--gold); line-height: 1.3; }
a.keyword-link { text-decoration: none; color: inherit; }
a.keyword-link:hover, a.keyword-link:focus-visible { border-color: var(--purple); color: #fff; }
a.corr-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(185, 166, 255, .5); }
a.corr-link:hover, a.corr-link:focus-visible { color: #fff; border-bottom-color: var(--purple); }

/* Encyclopedia of correspondences */
.corr-crumbs { font-size: .85rem; color: var(--ink-muted); margin-bottom: .75rem; }
.corr-crumbs a { color: var(--purple); text-decoration: none; }
.corr-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem 1.25rem; }
.corr-category { display: block; padding: 1rem 1.1rem; border-radius: 10px; color: var(--ink); text-decoration: none;
    border: 1px solid rgba(185, 166, 255, .14); transition: background .2s ease, transform .2s ease; }
.corr-category:hover, .corr-category:focus-visible { color: var(--ink); background: rgba(185, 166, 255, .08); transform: translateY(-2px); }
.corr-category > span { display: block; }
.corr-category-name { font-family: var(--heading-font); font-size: 1.35rem; font-weight: 600; color: #fff; }
.corr-category-count { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.corr-category-intro { font-size: .92rem; color: var(--ink-muted); }
.corr-category-sample { font-size: .82rem; color: var(--purple); margin-top: .5rem; }
.corr-items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem .9rem; }
.corr-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .5rem .7rem; border-radius: 8px;
    color: var(--ink); text-decoration: none; transition: background .2s ease; }
.corr-item:hover, .corr-item:focus-visible { color: #fff; background: rgba(185, 166, 255, .08); }
.corr-item-name { font-family: var(--heading-font); font-size: 1.05rem; font-weight: 600; }
.corr-item-count { font-size: .72rem; color: var(--gold); border: 1px solid rgba(245, 207, 107, .4); border-radius: 999px; padding: 0 .45rem; }
.corr-item-summary { flex-basis: 100%; font-size: .82rem; color: var(--ink-muted); }
.corr-goddesses { display: grid; gap: .4rem; }
.goddess-card.corr-goddess { display: flex; flex-direction: row; align-items: center; gap: .75rem; text-align: left; padding: .4rem .6rem; }
.goddess-card.corr-goddess .medallion { margin: 0; flex: none; }
.goddess-card.corr-goddess > span > span { display: block; }
.corr-more { font-family: inherit; font-weight: 400; color: var(--purple); text-decoration: none; margin-left: .5rem; }
.corr-more:hover { text-decoration: underline; }
.corr-group-title { font-size: 1.3rem; margin: 1.75rem 0 .75rem; }
.corr-items-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.corr-items-cards .corr-item { flex-direction: column; align-items: center; text-align: center; }
.corr-items-cards .corr-item-name { font-size: .95rem; }
.corr-items-cards .corr-item-summary { display: none; }
.corr-item-img { display: block; width: 100%; max-width: 120px; height: auto; border-radius: 6px; margin: 0 auto .35rem;
    box-shadow: 0 0 14px rgba(185, 166, 255, .15); }
.corr-figure { float: right; width: 220px; max-width: 45%; margin: 0 0 1rem 1.25rem; text-align: center; }
.corr-figure img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 24px rgba(185, 166, 255, .2); }
.corr-figure figcaption { font-size: .75rem; color: var(--ink-muted); margin-top: .4rem; }
.corr-figure.corr-figure-wide { float: none; width: 100%; max-width: none; margin: 0 0 1.25rem; }
.corr-category-img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: .6rem; opacity: .9; }