/* ---------------------------------------------------------------
   Sentient Horizons design standard · the skeleton
   shell.css version 2.0.1 (2026-10-16): split out of deep-field.css 1.3.0; light-theme button text fixed.
   What every site shares and a reader learns once: the base, the links,
   the page width, the top bar, the type roles and heading scale, the
   layout helpers, buttons, chips, callouts, tables, the footer and the
   responsive rules. It defines no colour: every colour here is a token
   that the site's skin (design/skins/<name>.css) supplies. A site copies
   this file and one skin, in that order, into its own stylesheet and adds
   its own rules below a marked line; see design/README.md.
   --------------------------------------------------------------- */
* { box-sizing: border-box; }
/* The hidden attribute must win over component display rules (e.g. .run-out { display: flex }). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* Links in running text look like links by default. Components whose whole
   block is a link (nav, brand, buttons, chain cards, rail, footer, eyebrows,
   node-name headings) opt out with .u-link-reset or their own rule. */
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: color 0.15s ease, text-decoration-color 0.15s ease; }
a:hover { text-decoration-color: currentColor; }
:root[data-theme='light'] a { color: var(--link); }
:root[data-theme='light'] a:hover { color: var(--link-hover); }
.u-link-reset, .navlinks a, .brand, .btn, .link, .fcard, .rail li a, .footer-links a, .eyebrow a, .nname, .term, .beside, .dim { text-decoration: none; }
code { font-family: var(--mono); font-size: 0.88em; color: var(--text-soft); background: var(--chip-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; position: relative; z-index: 1; }
.narrow { max-width: 760px; }


/* ---- header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: blur(10px); }
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; gap: 10px; position: relative; }
.nav-toggle { display: none; width: 38px; height: 38px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.nav-toggle:hover { border-color: var(--accent); background: var(--hover-bg); }
.nav-toggle .ico-close { display: none; }
.site-header.nav-open .nav-toggle .ico-open { display: none; }
.site-header.nav-open .nav-toggle .ico-close { display: block; }
.brand { font-size: 19px; font-weight: 600; letter-spacing: 0.3px; color: var(--text); }
.brand:hover { color: var(--accent); }
.navlinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navlinks a { font-family: var(--sans); font-size: 13px; letter-spacing: 0.03em; color: var(--text-soft); font-weight: 500; padding: 6px 12px; border-radius: 7px; }
.navlinks a:hover { color: var(--text); background: var(--hover-bg); }
.navlinks a.active { color: var(--text); background: var(--active-bg); }
.navlinks a.nav-secondary { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.navlinks a.nav-primary { color: var(--text-soft); font-weight: 500; }
.navlinks a.nav-primary:hover { color: var(--text); }
.navlinks a.nav-cta { color: var(--on-accent); background: var(--accent); font-weight: 600; margin-left: 8px; }
.navlinks a.nav-cta:hover { color: var(--on-accent); background: var(--accent-hover); }
.nav-divider { width: 1px; height: 18px; background: var(--line-strong); margin: 0 8px; align-self: center; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 8px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--hover-bg); }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
:root[data-theme='light'] .theme-toggle .icon-sun { display: none; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: block; }

/* ---- typography ---- */
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--text); }
h1.question { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: 22px; font-weight: 600; margin: 0; color: var(--text); }
h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.eyebrow a { color: inherit; }
.lede { font-size: 18px; color: var(--muted); font-style: italic; }
.prose { font-size: 17px; line-height: 1.75; color: var(--text-soft); }
.prose p { margin: 0 0 1.1em; }
.prose em { color: var(--text); font-style: italic; }
.prose h2 { font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--text); margin: 1.9em 0 0.5em; }
.prose h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text); margin: 1.7em 0 0.4em; }
.prose ul, .prose ol { margin: 0 0 1.1em 1.2em; padding: 0; }
.prose li { margin: 0.4em 0; }
.prose blockquote { margin: 1.3em 0; padding: 0.3em 0 0.3em 1.1em; border-left: 3px solid var(--accent); font-style: italic; color: var(--text); }
.prose blockquote p { margin: 0; }
.prose strong { color: var(--text); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }
.dim { color: var(--muted); }
a.dim:hover { color: var(--accent); }
.mono { font-family: var(--mono); font-size: 0.85em; color: var(--muted); }

/* ---- layout helpers ---- */
.hero { padding: 64px 0 16px; max-width: 760px; }
.hero.wide { max-width: none; }
.section { padding: 26px 0; }
.hero + .section { padding-top: 0; }
.shead { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 20px; }
.shead h2 { font-size: 16px; letter-spacing: 0.02em; }
.shead span { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
[id] { scroll-margin-top: 84px; }

/* ---- buttons, chips, callouts ---- */
.btn { font-family: var(--sans); font-size: 13px; padding: 8px 15px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: inline-block; cursor: pointer; border: 1px solid var(--accent); }
.btn:hover { color: var(--on-accent); filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent); color: var(--on-accent); }
/* the light theme's link colour must not reach into buttons (the rule above for `a` outranks .btn) */
:root[data-theme='light'] a.btn { color: var(--on-accent); }
:root[data-theme='light'] a.btn.ghost { color: var(--accent); }
:root[data-theme='light'] a.btn.ghost:hover { color: var(--on-accent); }
.ctas { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-block; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.02em; border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; color: var(--muted); background: var(--chip-bg); white-space: nowrap; }
.chip.accent { color: var(--accent); }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.no { color: var(--no); border-color: var(--no); }
.chip.violet { color: var(--accent-2); }
.callout { background: var(--callout-bg); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 15px 17px; }
.callout h3 { font-size: 13px; font-family: var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.callout p { margin: 6px 0 0; }
.kicker { font-size: 13px; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }

/* ---- tables (shared shape; a site may widen or narrow columns) ---- */
.prose table, table.data { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13.5px; margin: 12px 0 18px; display: block; overflow-x: auto; }
.prose th, .prose td, table.data th, table.data td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th, table.data th { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.prose code, table.data code { white-space: nowrap; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 30px 0; color: var(--muted); font-family: var(--sans); font-size: 13px; position: relative; z-index: 1; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.footer-brand { font-weight: 600; color: var(--text); }
.footer-tag { margin: 0.3rem 0 0.5rem; }
.footer-links { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-soft); }
.footer-links a:hover { color: var(--accent); }
.footer-meta { margin: 0.5rem 0 0; font-size: 12px; }
.footer-parent { margin: 0.6rem 0 0; font-size: 12px; }
.footer-parent a { color: var(--text-soft); }
.footer-parent a:hover { color: var(--accent); }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; padding: 8px 26px 16px; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .site-header.nav-open .navlinks { display: flex; }
  .navlinks a { padding: 11px 6px; border-radius: 6px; font-size: 15px; text-align: right; }
  .navlinks a.nav-secondary { font-size: 15px; }
  .navlinks a.nav-cta { margin: 8px 0 0; }
  .nav-divider { display: none; }
  .theme-toggle { margin: 10px 0 0; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .space-bg { height: 560px; }
  .container { padding: 0 16px; }
}