/* ==================================================================
   Hollick theme — applies to sections 1–10 (everything except
   .anatomy-section and .notebook-section, which keep their own
   visual languages).
   Loaded AFTER main.css so we override.
   ================================================================== */

/* Cormorant Garamond + Crimson Pro are already imported by anatomy.css.
   We rely on that. */

:root {
  --cream:     #f5efe2;
  --cream-2:   #ede5d3;
  --ink:       #2a2a2a;
  --ink-2:     #4a4438;
  --rust:      #b54a2a;
  --rust-2:    #8a3818;
  --navy:      #1f3a5f;
  --navy-2:    #15294a;
  --ochre:     #c7943d;
  --ochre-2:   #a07925;
  --moss:      #5a7345;
  --hair:      #a89c80;

  --display: "Cormorant Garamond", "Source Serif Pro", Georgia, serif;
  --body-serif: "Crimson Pro", "Source Serif Pro", Georgia, serif;
}

/* Repaint the page itself in cream, with subtle parchment grain. */
html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body-serif);
}

body {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(199,148,61,0.05) 0%, transparent 38%),
    radial-gradient(circle at 88% 76%, rgba(31,58,95,0.04) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(181,74,42,0.02) 0%, transparent 60%);
}

/* Overall accent/secondary palette swap. */
:root {
  --accent:    var(--rust);
  --accent-dk: var(--rust-2);
  --secondary: var(--navy);
  --secondary-dk: var(--navy-2);
  --paper:     #fbf7ec;
  --grid:      var(--hair);
  --grid-soft: rgba(168,156,128,0.18);
  --muted:     var(--ink-2);
  --muted-2:   #7a715f;
  --bg:        var(--cream);
}

/* Headings — switch to display serif small-caps for h2/h3 in
   non-anatomy/non-notebook sections. */
article > section > h2,
article > header.hero h1 {
  font-family: var(--display);
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink);
}
article > section > h2 {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1.6rem;
  border-bottom: 1px solid var(--hair);
}
article > section > h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--rust);
  margin-top: 0.4rem;
}

/* The hero h1 keeps a bigger size but in the display face. */
article > header.hero h1 {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.005em;
}
article > header.hero h1 em {
  color: var(--rust);
  font-family: var(--display);
  font-style: italic;
}

article > header.hero .kicker {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--rust);
}

article > header.hero .lede,
article > header.hero .byline,
article > section > p {
  font-family: var(--body-serif);
  color: var(--ink);
}

article > section > p em,
article > header.hero .lede em {
  color: var(--rust-2);
  font-style: italic;
}

.caption {
  font-family: var(--body-serif);
  font-style: italic;
  color: var(--ink-2);
}

/* Section dividers */
hr.rule {
  border-top: 1px solid var(--hair);
}

/* Recap boxes — left rule in rust, parchment fill. */
.recap {
  font-family: var(--body-serif);
  background: rgba(255,253,247,0.55);
  border-left: 3px solid var(--rust);
  color: var(--ink);
}

/* Widgets — turn into parchment plates. */
article section .widget {
  background:
    linear-gradient(180deg, rgba(255,253,247,0.55), rgba(245,239,226,0.0) 80%),
    var(--cream);
  border: 1px solid var(--hair);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(74,68,56,0.05),
    0 12px 26px -16px rgba(42,42,42,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  position: relative;
}
article section .widget::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid rgba(168,156,128,0.4);
  pointer-events: none;
  border-radius: 1px;
}

article section .widget > * { position: relative; z-index: 1; }

.widget-header h3 {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: none;
}
.widget-header p {
  font-family: var(--body-serif);
  font-style: italic;
  color: var(--ink-2);
}

/* Canvas wraps — light becomes parchment; dark "space" stays for hero
   widget and a couple of solar/orbit/chaos canvases.  We let those
   keep dark space backgrounds but darken the border to hair color. */
article section .canvas-wrap.light {
  background:
    radial-gradient(circle at 50% 45%, #fbf7ec 0%, var(--cream) 70%);
  border: 1px solid rgba(168,156,128,0.5);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
article section .canvas-wrap.light::after {
  content: "";
  position: absolute; inset: 4px;
  border: 1px dashed rgba(168,156,128,0.35);
  pointer-events: none;
}

/* Dark space backgrounds: we keep them but add a hair border for cohesion. */
article section .canvas-wrap:not(.light) {
  background: #0e1626;
  border: 1px solid var(--hair);
  border-radius: 2px;
}

/* Chart wrap (small) */
.chart {
  background:
    radial-gradient(circle at 50% 45%, #fbf7ec 0%, var(--cream) 70%);
  border: 1px solid rgba(168,156,128,0.5);
}

/* Sliders — parchment look. */
.slider-row {
  font-family: var(--body-serif);
  color: var(--ink);
}
.slider-row label {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.slider-row .val {
  font-family: "Source Serif Pro", Georgia, serif;
  color: var(--ink);
  font-weight: 500;
}
.slider-row input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: linear-gradient(90deg, var(--rust) 0%, var(--ochre) 100%);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ochre);
  border: 2px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.slider-row input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ochre);
  border: 2px solid var(--ink);
  cursor: pointer;
}

/* The "speed" toggle range — same treatment */
.toggle input[type=range] { accent-color: var(--rust); }

/* Readouts — parchment-style inset boxes. */
.readout {
  font-family: var(--body-serif);
  background: rgba(255,253,247,0.5);
  border: 1px solid rgba(168,156,128,0.5);
  border-radius: 2px;
  color: var(--ink);
}
.readout .item .v {
  font-family: "Source Serif Pro", Georgia, serif;
  color: var(--rust);
  font-weight: 600;
}
.readout .item .lbl {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.readout.tag .v { color: var(--rust); }

/* Panel labels — small-caps display. */
.panel-label {
  font-family: var(--display) !important;
  font-variant: small-caps !important;
  letter-spacing: 0.18em !important;
  font-size: 0.82rem !important;
  color: var(--ink-2) !important;
  text-transform: none !important;
}

/* Buttons — parchment with rust border. */
button {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 0.45em 1em;
  cursor: pointer;
  transition: all 0.12s ease;
}
button:hover { border-color: var(--rust); color: var(--rust); }
button:active { background: rgba(181,74,42,0.08); }
button.primary {
  background: var(--rust);
  color: #fdfaf2;
  border-color: var(--rust-2);
}
button.primary:hover { background: var(--rust-2); color: #fdfaf2; border-color: var(--rust-2); }
button.secondary {
  background: var(--navy);
  color: #fdfaf2;
  border-color: var(--navy-2);
}
button.secondary:hover { background: var(--navy-2); color: #fdfaf2; border-color: var(--navy-2); }

/* Toggle text */
.toggle {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--ink-2);
}

/* Hero widget — keep dark "space" feel but border in hair. */
.hero-widget {
  background:
    radial-gradient(circle at 50% 45%, #fbf7ec 0%, var(--cream) 70%);
  border: 1px solid var(--hair);
  border-radius: 2px;
  position: relative;
}
.hero-widget::after {
  content: "ENGRAVING I";
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--ink-2);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

/* Lagrange tooltip card — parchment style */
.lagrange-card {
  font-family: var(--body-serif);
  background: rgba(255,253,247,0.55);
  border-left: 3px solid var(--navy);
  color: var(--ink);
}
.lagrange-card h4 {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.lagrange-card .missions {
  color: var(--rust);
  font-family: var(--body-serif);
  font-style: italic;
}

/* Tables (solar system) */
article section table {
  font-family: var(--body-serif) !important;
  color: var(--ink);
}
article section table th {
  font-family: var(--display) !important;
  font-variant: small-caps !important;
  letter-spacing: 0.14em !important;
  color: var(--ink-2) !important;
  text-transform: none !important;
}
article section table td {
  font-family: var(--body-serif) !important;
  color: var(--ink) !important;
}

/* Footer */
footer p {
  font-family: var(--body-serif);
  color: var(--ink-2);
  font-style: italic;
}

/* The notebook-section and anatomy-section keep their own styles —
   make sure we don't bleed into them. */
.notebook-section h2,
.notebook-section p,
.notebook-section button,
.anatomy-section h2,
.anatomy-section p,
.anatomy-section button {
  /* The respective stylesheets take over. */
}

/* Wide widgets get a bit more breathing room. */
article > section .widget.wide,
article > section.wide,
article > section > .widget.wide {
  max-width: 1100px;
}