/* Cards, forms, chat, results, bars. Temple aesthetic: angular, stone + gold. */

/* --- Cards --- */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 600px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: linear-gradient(180deg, var(--stone-800) 0%, var(--stone-900) 100%);
  border: 1px solid var(--stone-700);
  padding: var(--s4);
  position: relative;
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-faint), transparent);
}
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-link .card { height: 100%; }
.card-link:hover .card {
  box-shadow: 0 0 16px var(--gold-ghost);
  transform: translateY(-2px);
  border-color: var(--gold);
}

.card-symbol { font-size: var(--text-2xl); display: block; margin-bottom: var(--s2); }
.card-title {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: var(--text-lg);
  margin-bottom: var(--s2);
}
.card-description { color: var(--parchment-dim); font-size: var(--text-sm); }
.card-numeral { color: var(--gold); font-family: var(--font-display); }
.card-keywords { color: var(--parchment-dim); font-size: var(--text-sm); font-style: italic; }
.card-detail { font-family: var(--font-body); font-size: var(--text-base); margin-top: var(--s2); }
.reversed-note { margin-top: var(--s2); }

/* --- Buttons & forms --- */
.gold-button {
  display: inline-block;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--text-base);
  transition: background var(--t-fast), color var(--t-fast);
}
.gold-button:hover { background: var(--gold); color: var(--ink); }

.link-button {
  background: none;
  border: none;
  color: var(--parchment);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
}
.link-button:hover { color: var(--gold); }
.link-button.danger:hover { color: var(--blood); }

.inline-form { display: inline; }

.stacked-form, .cast-form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 420px;
}
.stacked-form label, .cast-form label { color: var(--parchment-dim); margin-top: var(--s2); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
  background: var(--stone-900);
  border: 1px solid var(--stone-700);
  color: var(--parchment);
  padding: var(--s2) var(--s3);
  font-size: var(--text-base);
  font-family: var(--font-ui);
}
input:focus { border-color: var(--gold); outline: none; }

.choice-set { border: none; display: flex; flex-direction: column; gap: var(--s2); }
.choice { display: flex; gap: var(--s2); align-items: center; cursor: pointer; }
.choice input { accent-color: var(--gold); }

.auth-panel { max-width: 420px; margin: var(--s5) auto; }
.error-page { text-align: center; }

/* --- Flash --- */
.flash {
  border: 1px solid var(--stone-700);
  border-left: 3px solid var(--gold);
  background: var(--stone-800);
  padding: var(--s3);
  margin-bottom: var(--s3);
}
.flash-error { border-left-color: var(--blood); }
.flash-success { border-left-color: var(--sage); }

/* --- Daily Omen (dashboard) --- */
.daily-omen {
  text-align: center;
  background: linear-gradient(180deg, var(--stone-800), var(--stone-900));
  border: 1px solid var(--gold-ghost);
  padding: var(--s4);
  margin: var(--s4) 0 var(--s5);
}
.omen-label {
  font-family: var(--font-display);
  color: var(--parchment-dim);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.omen-symbol {
  display: block;
  font-size: var(--text-hero);
  color: var(--gold);
  margin: var(--s2) 0;
}
.omen-name {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: var(--text-xl);
}
.omen-keywords {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--parchment-dim);
  margin: var(--s1) 0 var(--s2);
}
.omen-meaning {
  font-family: var(--font-body);
  max-width: 58ch;
  margin: 0 auto;
}
.omen-guidance {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--gold-ghost);
}
.guidance-message {
  font-family: var(--font-body);
  max-width: 58ch;
  margin: var(--s2) auto 0;
  white-space: pre-line;
}

/* --- Results & reveal --- */
.result-region { margin-top: var(--s4); }
.results-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin: var(--s4) 0;
}
@media (min-width: 700px) { .results-layout { grid-template-columns: repeat(2, 1fr); } }

.result-card-wrapper .position-label {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--s1);
}
.result-card {
  background: linear-gradient(180deg, var(--stone-800), var(--stone-900));
  border: 1px solid var(--stone-700);
  padding: var(--s4);
  height: 100%;
}
.result-card.reversed { border-left: 3px solid var(--blood); }
.card-name { font-family: var(--font-display); color: var(--gold); font-size: var(--text-lg); }

.reveal-stagger > * {
  animation: reveal var(--t-reveal) var(--ease-ritual) both;
}
.reveal-stagger > *:nth-child(2) { animation-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 320ms; }
.reveal-stagger > *:nth-child(n+6) { animation-delay: 400ms; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Reveal choreography: while .awaiting-ritual is set (scene ritual playing),
   the result cards hold at frame 0 and everything after them stays hidden.
   On release the cards stagger in, then interpret/chat fade in last. */
.awaiting-ritual .reveal-stagger > * { animation-play-state: paused; }
.awaiting-ritual .reveal-stagger ~ * { opacity: 0; visibility: hidden; }
.reveal-stagger ~ * {
  transition: opacity var(--t-reveal) var(--ease-ritual) 500ms,
              visibility 0s 500ms;
}

.rune-glyph, .greek-glyph { color: var(--gold); }
.numerology-value { font-family: var(--font-display); color: var(--gold); }
.master-number { text-shadow: 0 0 12px var(--gold-faint); }
.oracle-verse { font-style: italic; }

/* --- I Ching hexagram lines --- */
.hexagram-lines { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); width: 80px; }
.hex-line { height: 6px; background: var(--gold); position: relative; }
.hex-line.yin {
  background: linear-gradient(90deg, var(--gold) 40%, transparent 40%, transparent 60%, var(--gold) 60%);
}
.hex-line.changing { box-shadow: 0 0 8px var(--gold-bright); }

/* --- Chat --- */
.oracle-chat {
  border: 1px solid var(--stone-700);
  border-top: 1px solid var(--gold-faint);
  background: var(--stone-900);
  padding: var(--s4);
  margin-top: var(--s4);
}
.chat-title { font-family: var(--font-display); color: var(--gold); margin-bottom: var(--s3); }
.chat-messages { display: flex; flex-direction: column; gap: var(--s2); }
.chat-msg { padding: var(--s2) var(--s3); }
.chat-msg strong { color: var(--gold); font-family: var(--font-display); font-weight: normal; }
.chat-user { background: var(--stone-800); }
.chat-oracle { border-left: 2px solid var(--gold-faint); }
.chat-text { white-space: pre-line; font-family: var(--font-body); }
.chat-form { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.chat-form input { flex: 1; min-width: 180px; }
.chat-error { color: var(--blood); margin-top: var(--s2); }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.oracle-thinking { color: var(--gold); font-style: italic; }

/* --- Sanctum (the dedicated Oracle conversation) --- */
.sanctum-intro {
  font-family: var(--font-body);
  color: var(--parchment-dim);
  max-width: 46rem;
  margin-bottom: var(--s4);
}
.sanctum-chat { max-width: 46rem; }

/* --- Interpretation --- */
.interpretation {
  border: 1px solid var(--gold-faint);
  background: var(--stone-900);
  padding: var(--s4);
  margin-top: var(--s4);
}
.interpretation-title { font-family: var(--font-display); color: var(--gold); margin-bottom: var(--s2); }
.interpretation-text { white-space: pre-line; font-family: var(--font-body); font-size: var(--text-lg); }
.interpret-region { margin-top: var(--s4); }

/* --- Lists (history, library) --- */
.reading-list { list-style: none; }
.reading-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border-bottom: 1px solid var(--stone-700);
}
.reading-row > a {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  text-decoration: none;
  color: var(--parchment);
}
.reading-row > a:hover .reading-summary { color: var(--gold); }
.reading-system { font-family: var(--font-display); color: var(--gold); font-size: var(--text-sm); }
.reading-summary { flex: 1; min-width: 200px; }
.reading-question { color: var(--parchment-dim); font-style: italic; font-size: var(--text-sm); }
.reading-date { color: var(--parchment-dim); font-size: var(--text-sm); }

.filter-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.filter-chip {
  border: 1px solid var(--stone-700);
  color: var(--parchment-dim);
  padding: var(--s1) var(--s3);
  text-decoration: none;
  font-size: var(--text-sm);
}
.filter-chip.active, .filter-chip:hover { border-color: var(--gold); color: var(--gold); }

.empty-state {
  border: 1px dashed var(--stone-700);
  padding: var(--s5);
  text-align: center;
  color: var(--parchment-dim);
}

/* --- Library reading mode --- */
.library-text {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.8;
  max-width: 65ch;
  margin: 0 auto;
  padding: var(--s4) 0 var(--s6);
}
.legal-text { max-width: 65ch; }
.legal-text p { margin-bottom: var(--s3); }

/* --- Bars (quantized widths — CSP-safe, no inline styles) --- */
.usage-bar, .element-bar {
  display: block;
  background: var(--stone-700);
  height: 8px;
  flex: 1;
}
.usage-fill, .element-fill { display: block; height: 100%; background: var(--gold); }
.element-bars { display: flex; flex-direction: column; gap: var(--s2); max-width: 420px; }
.element-bar-row { display: flex; align-items: center; gap: var(--s3); }
.element-name { width: 4.5rem; color: var(--parchment-dim); font-size: var(--text-sm); }
.element-pct { width: 3rem; text-align: right; color: var(--parchment-dim); font-size: var(--text-sm); }
.element-fire  { background: var(--blood); }
.element-water { background: #5c7a9c; }
.element-air   { background: var(--parchment-dim); }
.element-earth { background: var(--sage); }

.w-0 { width: 2%; } .w-10 { width: 10%; } .w-20 { width: 20%; }
.w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; }
.w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; }
.w-90 { width: 90%; } .w-100 { width: 100%; }

/* --- Scene mount --- */
.scene-mount { width: 100%; }
.scene-mount canvas { width: 100%; height: 320px; display: block; }

/* Pre-rendered scene frame injected where 3D never mounts (rule 21).
   In result mounts it fills the canvas slot; in the fixed/absolute
   backdrops it covers the layer, beneath any ::after glow effects. */
.scene-mount .scene-fallback { width: 100%; height: 320px; object-fit: cover; display: block; }
.page-backdrop .scene-fallback,
.hero-backdrop .scene-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Misc --- */
.detail-actions {
  margin-top: var(--s4);
  display: flex;
  gap: var(--s4);
  align-items: baseline;
}
.tier-card.featured { border-color: var(--gold); }
.pythagorean-map { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pythagorean-cell {
  border: 1px solid var(--stone-700);
  padding: var(--s1) var(--s2);
  font-size: var(--text-sm);
  color: var(--parchment-dim);
}
.aspect-list { list-style: none; }
.aspect-list li {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--stone-700);
  font-family: var(--font-body);
}
.astrology-section { margin-top: var(--s4); }

/* --- Bibliomancy --- */
.bibliomancy-wrapper { max-width: 46rem; }
.bibliomancy-passage {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.7;
  white-space: pre-line;
  border-left: 2px solid var(--gold);
  padding-left: var(--s3);
  margin: var(--s3) 0;
}
.bibliomancy-source { color: var(--parchment-dim); text-align: right; }
.prose-block {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 46rem;
}
.prose-block p { margin-bottom: var(--s3); }

/* --- Reading companion (library) --- */
.companion {
  position: fixed;
  right: var(--s3);
  bottom: 0;
  width: min(26rem, calc(100vw - 2 * var(--s3)));
  background: var(--stone-900);
  border: 1px solid var(--stone-700);
  border-bottom: none;
  z-index: 40;
}
.companion-summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s2) var(--s3);
  font-family: var(--font-display);
  color: var(--gold);
  background: var(--stone-800);
}
.companion-summary::-webkit-details-marker { display: none; }
.companion-summary:hover { color: var(--gold-bright); }
.companion-body {
  padding: var(--s3);
  max-height: 45vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.companion-body .chat-messages { flex: 1; }
@media (max-width: 640px) {
  .companion { right: 0; width: 100vw; }
  .companion-body { max-height: 55vh; }
}

/* --- Lunar Observatory --- */
.moon-stage canvas { height: 340px; }
.moon-now { text-align: center; margin: var(--s4) 0; }
.moon-phase-name { font-family: var(--font-display); color: var(--gold); font-size: 1.6rem; }
.moon-phase-stats { color: var(--parchment-dim); margin: var(--s1) 0 var(--s2); }
.moon-phase-desc { font-family: var(--font-body); max-width: 40rem; margin: 0 auto; }
.moon-events { list-style: none; padding: 0; display: flex; gap: var(--s4); flex-wrap: wrap; }
.moon-events li { display: flex; gap: var(--s2); align-items: baseline; }
.moon-event-symbol { color: var(--gold); }
.moon-cal-header { display: flex; align-items: baseline; gap: var(--s3); }
.moon-cal-nav { font-size: 1.3rem; color: var(--gold); text-decoration: none; }
.moon-cal-nav:hover { color: var(--gold-bright); }
.moon-calendar { width: 100%; max-width: 34rem; border-collapse: collapse; }
.moon-calendar th { color: var(--parchment-dim); font-family: var(--font-ui); font-weight: normal; font-size: 0.8rem; padding: var(--s1); }
.moon-calendar td { text-align: center; padding: var(--s1); border: 1px solid var(--gold-ghost); }
.moon-calendar .moon-empty { border: none; }
.moon-day-num { display: block; font-size: 0.75rem; color: var(--parchment-dim); }
.moon-day-glyph { display: block; font-size: 1.05rem; }
.moon-today { outline: 2px solid var(--gold); outline-offset: -2px; }
.moon-guidance-current { border-left: 2px solid var(--gold); }
.omen-moon-line { margin-top: var(--s2); }
.omen-moon-line a { color: var(--parchment-dim); text-decoration: none; }
.omen-moon-line a:hover { color: var(--gold); }

/* --- Sigil Workshop --- */
.sigil-steps { margin: var(--s4) 0; }
.sigil-step { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; margin-bottom: var(--s1); }
.sigil-step-label { min-width: 8rem; color: var(--parchment-dim); font-family: var(--font-ui); font-size: 0.85rem; }
.sigil-letters { font-family: var(--font-display); letter-spacing: 0.35em; color: var(--gold); overflow-wrap: anywhere; min-width: 0; }
.sigil-final { color: var(--gold-bright); font-size: 1.2rem; }
.sigil-letter { display: inline-block; transition: color var(--t-reveal) var(--ease-ritual), opacity var(--t-reveal) var(--ease-ritual); }
/* JS adds .striking to the section, then .struck per letter, staggered.
   Without JS (or skipped, or reduced-motion) the end state renders at once. */
.will-strike { color: var(--parchment-dim); opacity: 0.45; text-decoration: line-through; }
.striking .will-strike:not(.struck) { color: var(--gold); opacity: 1; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .sigil-letter { transition: none; }
}
.sigil-candidates { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.sigil-candidate { border: 1px solid var(--stone-700); cursor: pointer; max-width: 30%; height: auto; }
.sigil-candidate.sigil-selected { border-color: var(--gold); }
.sigil-canvas-wrap { max-width: 520px; }
.sigil-canvas { border: 1px solid var(--gold-ghost); touch-action: none; display: block; width: 100%; }
.sigil-toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0 var(--s3); align-items: center; }
.tool-button {
  background: var(--stone-800); color: var(--parchment); border: 1px solid var(--stone-700);
  padding: var(--s1) var(--s2); cursor: pointer; font-family: var(--font-ui);
}
.tool-button:hover { border-color: var(--gold); }
.tool-button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-bright); }
.sigil-width-label { color: var(--parchment-dim); font-family: var(--font-ui); font-size: 0.85rem; display: flex; gap: var(--s2); align-items: center; }
.sigil-save-form { margin-top: var(--s3); }
.sigil-seal-choice { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.sigil-thumb { width: 100%; max-width: 180px; image-rendering: auto; display: block; margin-bottom: var(--s2); }
.sigil-detail-canvas { max-width: 100%; border: 1px solid var(--gold-ghost); }
.sigil-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0; }
.sigil-meta dt { color: var(--parchment-dim); font-family: var(--font-ui); font-size: 0.85rem; }
.sigil-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sigil-moon-note { margin-top: var(--s3); max-width: 46rem; }

/* --- Journal --- */
.journal-stamp { color: var(--parchment-dim); font-family: var(--font-display); margin-bottom: var(--s3); }
.journal-moon { min-width: 1.5rem; color: var(--gold); }
.journal-linked { color: var(--parchment-dim); }
.journal-form textarea {
  width: 100%; background: var(--stone-800); color: var(--parchment);
  border: 1px solid var(--stone-700); padding: var(--s3);
  font-family: var(--font-body); font-size: 1.1rem; line-height: 1.6;
  resize: vertical;
}
.journal-form textarea:focus { border-color: var(--gold); outline: none; }
.journal-actions { display: flex; gap: var(--s2); margin-top: var(--s3); align-items: center; flex-wrap: wrap; }
.journal-mic[aria-pressed="true"] { border-color: var(--blood); color: var(--gold-bright); }
.journal-body {
  font-family: var(--font-body); font-size: 1.15rem; line-height: 1.7;
  white-space: pre-line; max-width: 46rem; margin: var(--s4) 0;
}
.journal-entry-block { border-left: 2px solid var(--gold-ghost); padding-left: var(--s3); margin: var(--s3) 0; }
.journal-links { margin-top: var(--s4); }
.journal-excerpt { font-family: var(--font-body); white-space: pre-line; }

/* --- Poppet --- */
.poppet-stage {
  position: relative; height: 420px; max-width: 640px;
  border: 1px solid var(--gold-ghost);
  background: url('../img/scenes/poppet.jpg') center / cover no-repeat var(--ink);
}
.poppet-stage canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.poppet-hint {
  position: absolute; bottom: var(--s2); left: 0; right: 0; text-align: center;
  color: var(--parchment-dim); font-family: var(--font-ui); font-size: 0.85rem;
  pointer-events: none; z-index: 1;
}
.pin-kind-set { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.pin-blessing { color: var(--pin-blessing); }
.pin-protection { color: var(--pin-protection); }
.pin-healing { color: var(--pin-healing); }
.pin-banishing { color: var(--pin-banishing); }
.pin-list { list-style: none; padding: 0; }
.pin-row {
  display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap;
  padding: var(--s2) 0; border-bottom: 1px solid var(--gold-ghost);
}
.pin-symbol { min-width: 1.5rem; }
.pin-label { flex: 1; font-family: var(--font-body); font-size: 1.1rem; min-width: 12rem; }
.pin-date { color: var(--parchment-dim); font-size: 0.85rem; font-family: var(--font-ui); }
.poppet-actions { margin-top: var(--s4); }
@media (max-width: 480px) {
  .poppet-stage { height: 330px; }
}

/* --- Correspondences (E7: plants & colors) --- */
.corr-intro { max-width: 46rem; }
.corr-intro a { color: var(--gold); }
.corr-section { margin-top: var(--s4); }
.filter-input {
  width: 100%; max-width: 28rem; padding: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  background: var(--stone-800); border: 1px solid var(--stone-700);
  color: var(--parchment); font-family: var(--font-ui); font-size: 1rem;
}
.filter-input:focus { border-color: var(--gold); outline: none; }
.corr-list { list-style: none; padding: 0; }
.corr-row {
  padding: var(--s3) 0; border-bottom: 1px solid var(--gold-ghost);
  max-width: 46rem;
}
.corr-name {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--gold);
  margin: 0 0 var(--s1); display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap;
}
.corr-latin {
  font-family: var(--font-body); font-size: 0.95rem;
  color: var(--parchment-dim); font-style: italic; font-weight: normal;
}
.corr-ties {
  color: var(--parchment-dim); font-family: var(--font-ui);
  font-size: 0.85rem; letter-spacing: 0.04em; margin: 0 0 var(--s2);
}
.corr-caution { color: var(--blood); font-size: 0.95rem; }
.corr-swatch {
  display: inline-block; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; border: 1px solid var(--gold-ghost); flex: none;
}
.swatch-white { background: var(--swatch-white); }
.swatch-black { background: var(--swatch-black); }
.swatch-red { background: var(--swatch-red); }
.swatch-pink { background: var(--swatch-pink); }
.swatch-orange { background: var(--swatch-orange); }
.swatch-yellow { background: var(--swatch-yellow); }
.swatch-green { background: var(--swatch-green); }
.swatch-light-blue { background: var(--swatch-light-blue); }
.swatch-dark-blue { background: var(--swatch-dark-blue); }
.swatch-purple { background: var(--swatch-purple); }
.swatch-brown { background: var(--swatch-brown); }
.swatch-silver { background: var(--swatch-silver); }
.swatch-gold { background: var(--swatch-gold); }
.swatch-grey { background: var(--swatch-grey); }
.corr-crosslink { margin-top: var(--s3); max-width: 46rem; }
.corr-crosslink a { color: var(--gold); }