/* PROTEUS website — shared chrome (Thermocline v1.2). Pairs with tokens.css.
   The chrome section mirrors templates/web/site.css in
   FormingWorlds/proteus-visual-language; site-specific extensions follow the
   marked divider below. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--pt-font-body); background: var(--pt-void); color: var(--pt-text-d); -webkit-font-smoothing: antialiased; }
a { color: var(--pt-azure); text-decoration: none; }
a:hover { color: var(--pt-ice); }
.wrap { max-width: min(1560px, 90vw); margin: 0 auto; padding: 0 40px; }

/* ---------- header ---------- */
header.site { position: sticky; top: 0; z-index: 50; background: var(--pt-header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--pt-line-d); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { width: 30px; }
.nav-logo b { font-family: var(--pt-font-display); font-weight: 800; font-size: 19px; letter-spacing: 0.02em; color: var(--pt-text-d); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > a, .nav-links > .dd > a { font-size: 15px; font-weight: 500; color: var(--pt-text-d2); padding: 9px 14px; border-radius: var(--pt-r-2); display: block; white-space: nowrap; }
.nav-links > a:hover, .nav-links > .dd > a:hover { color: var(--pt-text-d); background: var(--pt-basalt-2); }
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: 10px; border: 1px solid var(--pt-line-d); border-radius: var(--pt-r-2); background: transparent; color: var(--pt-text-d2); cursor: pointer; flex: none; }
.theme-toggle:hover { color: var(--pt-text-d); background: var(--pt-basalt-2); border-color: var(--pt-text-d3); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .tt-sun { display: none; }
[data-theme="light"] .theme-toggle .tt-moon { display: none; }
[data-theme="light"] .theme-toggle .tt-sun { display: block; }
.nav-links > a.active { color: var(--pt-text-d); }
.nav-links > a.active::after { content: ""; display: block; height: 2px; margin-top: 2px; background: var(--pt-magma); border-radius: 1px; }
.dd { position: relative; }
.dd-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--pt-basalt); border: var(--pt-border-d); border-radius: var(--pt-r-2); padding: 8px; display: none; box-shadow: var(--pt-shadow-2); }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block; }
.dd-menu a { display: block; padding: 10px 14px; font-size: 15px; color: var(--pt-text-d2); border-radius: var(--pt-r-1); }
.dd-menu a:hover { color: var(--pt-text-d); background: var(--pt-basalt-2); }
.dd-menu .hint { font-family: var(--pt-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--pt-text-d3); padding: 8px 14px 4px; }
@media (max-width: 1180px) {
  .nav-links { gap: 0; }
  .nav-links > a, .nav-links > .dd > a { font-size: 13.5px; padding: 8px 9px; }
  .nav-logo b { font-size: 17px; }
  .wrap.nav { padding: 0 24px; }
}
@media (max-width: 900px) {
  .nav-links > a, .nav-links > .dd > a { font-size: 12.5px; padding: 7px 6px; letter-spacing: -0.01em; }
}

/* ---------- page hero ---------- */
.page-hero { padding: 96px 0 64px; border-bottom: 1px solid var(--pt-line-d); }
.eyebrow { font-family: var(--pt-font-mono); font-size: 13px; letter-spacing: var(--pt-track-label); color: var(--pt-azure); text-transform: uppercase; }
.page-hero h1 { font-family: var(--pt-font-display); font-weight: 800; font-size: 56px; letter-spacing: -0.025em; line-height: 1.08; margin-top: 20px; max-width: 22ch; }
.page-hero .lede { font-size: 19px; line-height: 1.6; color: var(--pt-text-d2); max-width: none; margin-top: 22px; }

/* ---------- content primitives ---------- */
.section { padding: 72px 0 0; }
.section:last-of-type { padding-bottom: 110px; }
.section h2 { font-family: var(--pt-font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; margin-bottom: 24px; }
.section h3 { font-family: var(--pt-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; margin: 36px 0 14px; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--pt-text-d2); max-width: none; margin-bottom: 18px; text-wrap: pretty; }
.prose p b, .prose p strong { color: var(--pt-text-d); }
.prose ul { max-width: none; padding-left: 0; list-style: none; display: grid; gap: 12px; margin-bottom: 18px; }
.prose ul li { font-size: 17px; line-height: 1.65; color: var(--pt-text-d2); position: relative; padding-left: 34px; text-wrap: pretty; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 4px; background: var(--pt-magma); border-radius: 2px; }
.prose code { font-family: var(--pt-font-mono); font-size: 14px; background: var(--pt-basalt); border: 1px solid var(--pt-line-d); border-radius: 3px; padding: 2px 6px; color: var(--pt-ice); }

table.site { border-collapse: collapse; width: 100%; font-size: 15.5px; margin: 22px 0; }
table.site th { font-family: var(--pt-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-text-d3); text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--pt-line-d); }
table.site td { padding: 14px 16px; border-bottom: 1px solid var(--pt-line-d); color: var(--pt-text-d2); line-height: 1.55; vertical-align: top; }
table.site td:first-child { color: var(--pt-text-d); font-weight: 500; white-space: nowrap; }

.card { background: var(--pt-basalt); border: var(--pt-border-d); border-radius: var(--pt-r-2); padding: 28px 30px; }

.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pt-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 28px; border-radius: var(--pt-r-2); font-weight: 500; }
.btn-primary { background: var(--pt-magma); color: #FFF; }
.btn-primary:hover { background: #C93321; color: #FFF; }
.btn-ghost { border: 1px solid var(--pt-text-d3); color: var(--pt-text-d); }
.btn-ghost:hover { border-color: var(--pt-azure); color: var(--pt-ice); }

.shield { display: inline-flex; font-family: var(--pt-font-mono); font-size: 11px; letter-spacing: 0.04em; border-radius: 3px; overflow: hidden; vertical-align: middle; }
.shield i { font-style: normal; padding: 4px 8px; background: var(--pt-basalt-2); color: var(--pt-text-d2); }
.shield b { font-weight: 500; padding: 4px 8px; background: var(--pt-ocean); color: #fff; }
.shield b.ok { background: var(--pt-positive); }

/* ---------- footer ---------- */
.phase-rule { height: 6px; background: var(--pt-grad-phase); }
footer.site { border-top: 1px solid var(--pt-line-d); padding: 80px 0 56px; background: var(--pt-basalt); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot-col h6 { font-family: var(--pt-font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--pt-text-d3); text-transform: uppercase; margin-bottom: 18px; }
.foot-col a { display: block; font-size: 15px; color: var(--pt-text-d2); padding: 5px 0; }
.foot-col a:hover { color: var(--pt-ice); }
.foot-lockup { display: inline-flex; flex-direction: column; }
.foot-lockup .word { display: flex; align-items: center; font-family: var(--pt-font-display); font-weight: 800; font-size: 44px; letter-spacing: 0.01em; line-height: 1; color: var(--pt-paper); }
.foot-lockup .word img { height: 1.06em; width: auto; margin: 0 0.015em 0 0.03em; transform: translateY(0.011em); }
.foot-lockup .tag { font-family: var(--pt-font-mono); font-weight: 500; font-size: 8px; letter-spacing: 0.52em; color: var(--pt-azure); align-self: flex-end; margin-top: -1px; margin-right: 14px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--pt-line-d); font-size: 14px; color: var(--pt-text-d3); }

/* ============================================================
   SITE-SPECIFIC EXTENSIONS — proteus-framework.org
   Everything below builds on the shared chrome above.
   ============================================================ */

html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* The full-bleed hero is 100vw wide, which includes the vertical-scrollbar
   gutter on platforms with classic scrollbars; clip the few px of horizontal
   overflow rather than growing a page-wide horizontal scrollbar. The hidden
   fallback covers browsers without overflow: clip. */
html { overflow-x: hidden; overflow-x: clip; }

/* Honour the OS reduced-motion preference: anchor jumps snap instead of
   animating. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--pt-magma); outline-offset: 2px; }

/* Theme-swapped images: the dark variant renders in dark mode, the light
   variant in light mode. Regions that stay dark in both themes (the hero)
   use the dark asset directly instead of these classes. */
[data-theme="light"] .only-dark { display: none !important; }
:root:not([data-theme="light"]) .only-light { display: none !important; }

/* ---------- content column ---------- */
/* Header and footer span the wide wrap; the reading column is narrower. */
.wrap.narrow { max-width: min(1200px, 100vw); }
#main { padding-bottom: 110px; }

/* Base type for page content. :where() keeps specificity at zero so any
   page-level class can override without fighting the id selector. */
:where(#main) p { font-size: 17px; line-height: 1.7; color: var(--pt-text-d2); margin-bottom: 18px; text-wrap: pretty; }
:where(#main) p b, :where(#main) p strong { color: var(--pt-text-d); }
:where(#main) h2 { font-family: var(--pt-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; margin: 56px 0 20px; }
:where(#main) h3 { font-family: var(--pt-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; margin: 36px 0 14px; }
:where(#main) ol, :where(#main) ul { margin: 0 0 18px 1.3rem; }
:where(#main) li { font-size: 17px; line-height: 1.65; color: var(--pt-text-d2); margin-bottom: 10px; }
:where(#main) li p { margin-bottom: 10px; }
:where(#main) a:not(.btn) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
:where(#main) a:not(.btn):hover { text-decoration-color: currentColor; }
:where(#main) hr { border: none; border-top: 1px solid var(--pt-line-d); margin: var(--pt-7) 0; }

/* Mono uppercase section label (the eyebrow as a section heading). The class
   carries the look only; apply it to whatever heading level the page's
   document outline calls for. */
.section-label { font-family: var(--pt-font-mono); font-size: var(--pt-fs-13); font-weight: 500; letter-spacing: var(--pt-track-label); color: var(--pt-azure); text-transform: uppercase; border-bottom: 1px solid var(--pt-line-d); padding-bottom: 10px; margin: 56px 0 22px; }

/* Full-bleed band inside the constrained content column. */
.fullbleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---------- contrast steps above the shared chrome ---------- */
/* White label text on pure magma sits just under the 4.5:1 AA contrast
   ratio, so primary buttons rest on the deepened crimson and darken further
   on hover. */
.btn-primary { background: var(--pt-crimson); }
.btn-primary:hover { background: var(--pt-mantle); }
/* Muted d3 text reads below the AA ratio at small sizes; informational
   footer text steps up to the secondary tone. */
.foot-col h6, .foot-bottom { color: var(--pt-text-d2); }

/* ---------- module domain colours ---------- */
/* One class per physical domain, shared by the homepage swatches and the
   modules-page accent bars so every page names a domain the same way. */
.dom-interior { background: var(--pt-dom-interior); }
.dom-outgassing { background: var(--pt-dom-outgassing); }
.dom-tidal { background: var(--pt-dom-tidal); }
.dom-chem { background: var(--pt-dom-chem); }
.dom-atmos { background: var(--pt-dom-atmos); }
.dom-stellar { background: var(--pt-dom-stellar); }
.dom-accretion { background: var(--pt-dom-accretion); }

/* ---------- brand lockup (Lockup.astro) ---------- */
/* The wordmark with the phase glyph as the O plus the "framework" tag. The
   footer and home-hero variants set the --lockup-* properties and share the
   glyph alignment here, so tuning it moves every lockup together. The tag is
   tucked into the wordmark's lower-right corner: raised to hug the baseline
   and inset from the right edge, both scaled to the wordmark size. */
.brand-lockup { display: inline-flex; flex-direction: column; }
.brand-lockup .word { display: inline-flex; align-items: center; font-family: var(--pt-font-display); font-weight: 800; font-size: var(--lockup-size, 44px); letter-spacing: 0.01em; line-height: 1; color: var(--pt-paper); }
.brand-lockup .word img { height: 1.06em; width: auto; margin: 0 0.015em 0 0.03em; transform: translateY(0.011em); }
.brand-lockup .tag { font-family: var(--pt-font-mono); font-weight: 500; font-size: var(--lockup-tag-size, 8px); letter-spacing: var(--lockup-tag-track, var(--pt-track-tag)); color: var(--pt-azure); align-self: flex-end; margin-top: var(--lockup-tag-gap, calc(-0.03 * var(--lockup-size, 44px))); margin-right: var(--lockup-tag-inset, calc(0.32 * var(--lockup-size, 44px))); }

/* ---------- header: mobile navigation ---------- */
.nav-burger { display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--pt-line-d); border-radius: var(--pt-r-2); background: transparent; color: var(--pt-text-d2); cursor: pointer; flex: none; }
.nav-burger:hover { color: var(--pt-text-d); background: var(--pt-basalt-2); }
.nav-burger svg { width: 18px; height: 18px; display: block; }
.nav-links > .dd > a.active { color: var(--pt-text-d); }
.nav-links > .dd > a.active::after { content: ""; display: block; height: 2px; margin-top: 2px; background: var(--pt-magma); border-radius: 1px; }
@media (max-width: 820px) {
  .nav-burger { display: inline-grid; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--pt-basalt); border-bottom: 1px solid var(--pt-line-d); box-shadow: var(--pt-shadow-2); padding: var(--pt-3) var(--pt-5) 18px; }
  .nav-links.open { display: flex; }
  .nav-links > a, .nav-links > .dd > a { font-size: 15px; padding: 11px 10px; }
  .nav-links > a.active::after, .nav-links > .dd > a.active::after { width: 20px; }
  /* Submenus render inline, always expanded. */
  .dd-menu { display: block; position: static; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 0 0 4px 18px; }
  .dd-menu a { font-size: 14.5px; padding: 9px 10px; }
  .theme-toggle { margin: 10px 0 0 10px; }
}

/* ---------- page hero sizing ---------- */
/* margin-bottom sets the gap below the hero divider; it collapses with the
   first content block's top margin, so a page that opens on a heading keeps its
   larger heading margin while a page that opens on a paragraph clears the line. */
.page-hero { padding: 72px 0 var(--pt-7); margin-bottom: 28px; }
.page-hero h1 { font-size: clamp(34px, 6vw, 52px); }
.page-hero .lede { max-width: 72ch; }

/* ---------- footer responsiveness + social button ---------- */
/* The lockup is a link inside a footer column, so it must win over the
   generic .foot-col a block-display rule to keep its flex layout. */
.foot-col a.foot-lockup { display: inline-flex; flex-direction: column; padding: 0; }
/* The social button is also a link inside a footer column, so it must beat the
   generic .foot-col a rule: block display kills its place-items centring and
   the 5px block padding pushes the icon off-centre. */
.foot-col a.social-btn { display: inline-grid; padding: 0; }
.foot-tagline { font-size: 14px; color: var(--pt-text-d3); margin-top: 18px; max-width: 34ch; }
.social-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--pt-line-d); border-radius: var(--pt-r-2); background: transparent; color: var(--pt-text-d2); cursor: pointer; }
.social-btn:hover { color: var(--pt-text-d); background: var(--pt-basalt-2); border-color: var(--pt-text-d3); }
/* overflow visible lets the octocat's leg tips show past the viewBox edge,
   which is shifted down in Socials.astro to optically centre the top-heavy
   mark. */
.social-btn svg { width: 17px; height: 17px; display: block; overflow: visible; }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- status badges (validation page) ---------- */
img.badge { height: 20px; vertical-align: middle; }