:root{
  --sc-accent: #5bbcff;
  --sc-accent-deep: #1f6fb2;
  --sc-text: #111827;
  --sc-muted: #4b5563;
  --sc-border: rgba(17,24,39,0.10);
  --sc-panel: rgba(91,188,255,0.10);
  --sc-bg: #ffffff;

  --sc-font-base: "Nunito", Helvetica, Arial, sans-serif;
  --sc-font-heading: "Libre Baskerville", Georgia, serif;

  --sc-font-weight-light: 300;
  --sc-font-weight-normal: 400;
  --sc-font-weight-medium: 500;
  --sc-font-weight-bold: 700;

  --sc-font-size-base: 1rem;
  --sc-line-height-base: 1.6;

  --sc-h1: 2.5rem;
  --sc-h2: 2rem;
  --sc-h3: 1.5rem;
  --sc-h4: 1.25rem;
  --sc-h5: 1.1rem;
  --sc-h6: 1rem;
  --sc-heading-line-height: 1.3;

  --sc-radius-lg: 18px;
  --sc-radius-md: 12px;
}

html, body{
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-font-base);
  font-size: var(--sc-font-size-base);
  line-height: var(--sc-line-height-base);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--sc-font-heading);
  line-height: var(--sc-heading-line-height);
  color: var(--sc-text);
  letter-spacing: -0.2px;
}
h1{ font-size: var(--sc-h1); }
h2{ font-size: var(--sc-h2); }
h3{ font-size: var(--sc-h3); }
h4{ font-size: var(--sc-h4); }
h5{ font-size: var(--sc-h5); }
h6{ font-size: var(--sc-h6); }

p, li{ color: var(--sc-text); }

a, a:visited{ color: var(--sc-accent-deep); }
a:hover{ color: var(--sc-accent-deep); text-decoration: underline; }

code, pre{ border-radius: 10px; }
pre{
  padding: 1rem;
  border: 1px solid var(--sc-border);
  background: rgba(17,24,39,0.03);
}

/* Shared components */
.callout{
  padding: 1rem 1rem;
  border-left: 4px solid var(--sc-accent);
  background: var(--sc-panel);
  border-radius: var(--sc-radius-md);
  margin: 1.25rem 0;
}

.hero{
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  background: var(--sc-panel);
  margin: 1rem 0 1.5rem 0;
}

.hero .kicker{
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--sc-muted);
  margin-bottom: 0.5rem;
}

.hero .lead{
  font-size: 1.05rem;
  margin-top: 0.6rem;
  color: var(--sc-text);
}

.badge{
  display: inline-block;
  font-size: 0.8rem;
  color: var(--sc-accent-deep);
  border: 1px solid rgba(31,111,178,0.25);
  background: rgba(91,188,255,0.10);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-right: 0.35rem;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0;
}
.card{
  padding: 1rem;
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  background: #fff;
}

/* === Scintilla Motif Helpers === */
.motif{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto 1.5rem auto;
}
.motif--boundary{ max-width: 980px; }
.motif--signal{ max-width: 520px; margin-top: 1.25rem; margin-bottom: 1.25rem; }

@media (max-width: 640px){
  .motif--boundary{ margin-top: .75rem; margin-bottom: 1rem; }
  .motif--signal{ max-width: 420px; }
}

/* === Print-safe === */
@media print{
  .side-bar, .main-header, .site-header, .site-nav, .search, .aux-nav, .breadcrumb-nav,
  .nav-list, .navigation, .page-header, .site-footer { display: none !important; }

  .main-content-wrap { max-width: none !important; }
  .main-content { padding-top: 0 !important; }

  .hero, .callout, .card { background: transparent !important; }
  .hero, .callout, .card { border-color: #111 !important; }
  .callout { border-left-color: #111 !important; }

  a, a:visited { color: #111 !important; text-decoration: underline; }

  img, svg { break-inside: avoid; page-break-inside: avoid; }

  .motif { filter: grayscale(100%); }
}

/* === Isometric hero diagrams (PNG/WebP) === */
picture.hero-iso {
  display: block;
  margin: 1rem auto 1.25rem auto;
  text-align: center;
}

picture.hero-iso img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;                 /* preserve aspect ratio */
  border-radius: 14px;
}

/* Mobile: ensure the whole image fits on screen */
@media (max-width: 640px) {
  picture.hero-iso {
    margin: 0.75rem auto 1rem auto;
  }

  picture.hero-iso img {
    max-height: 72vh;            /* cap height to viewport */
    width: auto;                 /* prevents “stretching” */
  }
}

/* Optional: slightly smaller secondary image */
picture.hero-iso--secondary img {
  max-width: 92%;
}