/* republicate.com — static, no JS. Header = FFG's CSS-only mega-menu (site2026 ffg.css), on v1's dark palette;
   the pico bits FFG relies on (.container, [role=button], list/nav resets) are restated here. */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* FFG → here: nuit→header, marine→panel, or→accent, or-fonce→accent-hover, papier→ink, brume→muted, trait→line */
:root {
  --ground: #0f1f33;
  --header: #042547;
  --panel: #16293f;
  --ink: #e7dfd3;
  --muted: #a2b0c0;
  --accent: #c89f68;
  --accent-hover: #b58d58;
  --line: #26405c;
  --header-height: 4.5rem;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: Montserrat, var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- base (v1 + the pico defaults the header assumes) --- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  background: var(--ground); color: var(--ink); font: 16px/1.6 var(--sans); }
body > main { flex: 1; width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[id] { scroll-margin-top: calc(var(--header-height) + 1rem); }
.container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
[role=button] { display: inline-block; border: 1px solid transparent; border-radius: .75rem; text-align: center; text-decoration: none; cursor: pointer; }

.banner { position: sticky; top: 0; z-index: 10; padding: 0; background: var(--header); color: var(--ink); border-bottom: 1px solid var(--line); }
.banner > .container { display: flex; align-items: stretch; gap: 1.75rem; height: var(--header-height); }
.brand { display: flex; align-items: center; gap: .75rem; flex: none; color: var(--ink); text-decoration: none; }
.brand svg { height: 2.5rem; width: auto; }
.brand span { font: 700 1.375rem/1 Montserrat, sans-serif; letter-spacing: .14em; }
.brand small { display: block; margin-top: .4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }

.topics { display: flex; flex: 1; justify-content: center; }
.topics > ul { display: flex; height: 100%; margin: 0; gap: .25rem; align-items: stretch; }
.topics li { padding: 0; }
.topics > ul > li { display: flex; }
.topics > ul > li > a { display: flex; align-items: center; margin: 0; padding: 0 .75rem; border-radius: 0; white-space: nowrap;
  font: 600 .75rem/1 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: none; }
.topics > ul > li:hover > a, .topics > ul > li:focus-within > a, .topics > ul > li.active > a { color: var(--accent); }
.topics > ul > li.active > a { box-shadow: inset 0 -3px 0 var(--accent); }

.panel { display: var(--panel-display, none); position: absolute; left: 0; right: 0; top: 100%; background: var(--panel);
  border-bottom: 1px solid var(--line); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35); }
.topics > ul > li:hover, .topics > ul > li:focus-within { --panel-display: block; }
.panel > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 3rem; padding-block: 2rem 2.25rem; }
.headline { display: flex; flex-direction: column; gap: .75rem; }
.headline strong { font: 600 .6875rem/1 Montserrat, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.headline p { margin: 0; font: 600 1.375rem/1.25 Montserrat, sans-serif; color: var(--ink); text-wrap: pretty; }
.headline a { color: var(--ink); }
.headline a:hover { color: var(--accent); }
.panel ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .375rem 1.25rem; align-content: start; align-items: start; }
.panel li a { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: .75rem .875rem; border-radius: .875rem; text-decoration: none; }
.panel li a:hover { background: var(--header); }
.panel li strong { font: 600 .9375rem/1.3 Inter, sans-serif; color: var(--ink); }
.panel li span { font: 400 .8125rem/1.45 Inter, sans-serif; color: var(--muted); }

.actions { display: flex; align-items: center; gap: .625rem; flex: none; }
.actions [role=button] { margin: 0; height: 2.5rem; padding: 0 1.125rem; font: 600 .8125rem/2.5rem Inter, sans-serif; white-space: nowrap;
  background: var(--accent); border-color: var(--accent); color: var(--header); }
.actions [role=button]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* --- mobile drawer: <details>, no JS --- */
.burger { display: none; margin: 0; }
.burger summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 99px; background: var(--panel); color: var(--ink);
  list-style: none; cursor: pointer; }
.burger summary::-webkit-details-marker { display: none; }
.drawer { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-height)); overflow: auto;
  padding: .5rem 1.5rem 2.5rem; background: var(--header); border-bottom: 1px solid var(--line); }
.drawer section { margin: 0; padding: 1.125rem 0; border-bottom: 1px solid var(--line); }
.drawer .rubrique { font: 600 .8125rem/1 Montserrat, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.drawer ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: .625rem 0 0; }
.drawer li a { display: inline-block; margin: 0; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); font: 500 .875rem/1 Inter, sans-serif; text-decoration: none; }
.drawer li a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--header); }

@media (max-width: 1080px) {
  .topics { display: none; }
  .burger { display: block; }
  .banner > .container { justify-content: space-between; }
}
@media (max-width: 480px) { .actions [role=button] { display: none; } }

/* --- page content (v1 rhythm) --- */
main a, footer a { border-bottom: 1px solid transparent; }
main a:hover, footer a:hover { border-bottom-color: var(--accent); }
.hero { padding: 4rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.hero h1 { margin: 0; font-size: 2.4rem; letter-spacing: .01em; }
.hero p { margin: .4rem 0 0; color: var(--accent); font-size: 1.15rem; }
.hero .sub { color: var(--muted); font-size: 1rem; max-width: 34rem; margin-top: 1rem; }
main section { padding: 3rem 0; border-bottom: 1px solid var(--line); }
main section:last-of-type { border-bottom: 0; }
main section section { padding: 2rem 0 0; border-bottom: 0; }
h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
main section section > h3 { font-size: 1.15rem; margin: 0 0 .75rem; }
h2 + .lead, h3 + .lead { color: var(--accent); margin: 0 0 .25rem; }
.muted { color: var(--muted); }
main p:not(.facts) { max-width: 46rem; }  /* prose measure; cards and figure keep the 72rem width */
.cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .85rem 1rem; }
.card h3, .card h4 { margin: 0 0 .2rem; font-size: 1rem; }
.card code { font-family: var(--mono); font-size: 1rem; }
.card p { margin: 0; font-size: .9rem; color: var(--muted); }
.kv { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.25rem 0 0; font-size: .9rem; color: var(--muted); }
figure { margin: 2.5rem 0 0; }
figure img { display: block; width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; }
figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }
footer { padding: 2.5rem 0 4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
footer a { color: var(--ink); }

/* --- stack page additions --- */
figure img { max-width: 62rem; margin: 0 auto; }
figcaption { margin-top: .75rem; font-size: .9rem; color: var(--muted); }
ol.principles { max-width: 46rem; padding-left: 1.25rem; }
ol.principles li { margin: 0 0 1rem; }
main h3 .muted { font-weight: 400; font-size: .9em; }
.cards + .muted { margin-top: 1rem; }
.brand img { height: 2.5rem; width: auto; }

@keyframes vanish-apps { from, to { --panel-display: none; } }
@keyframes vanish-governance { from, to { --panel-display: none; } }
@keyframes vanish-authoring { from, to { --panel-display: none; } }
@keyframes vanish-community { from, to { --panel-display: none; } }
@keyframes vanish-services { from, to { --panel-display: none; } }
@keyframes vanish-realization { from, to { --panel-display: none; } }
@keyframes vanish-consulting { from, to { --panel-display: none; } }
@keyframes vanish-about { from, to { --panel-display: none; } }
html:has(#apps:target) .topics li:has(a[href$="#apps"]) { animation: vanish-apps 1s; }
html:has(#governance:target) .topics li:has(a[href$="#governance"]) { animation: vanish-governance 1s; }
html:has(#authoring:target) .topics li:has(a[href$="#authoring"]) { animation: vanish-authoring 1s; }
html:has(#community:target) .topics li:has(a[href$="#community"]) { animation: vanish-community 1s; }
html:has(#services:target) .topics li:has(a[href$="#services"]) { animation: vanish-services 1s; }
html:has(#realization:target) .topics li:has(a[href$="#realization"]) { animation: vanish-realization 1s; }
html:has(#consulting:target) .topics li:has(a[href$="#consulting"]) { animation: vanish-consulting 1s; }
html:has(#about:target) .topics li:has(a[href$="#about"]) { animation: vanish-about 1s; }

@keyframes vanish-stack { from, to { --panel-display: none; } }
@keyframes vanish-essential-kson { from, to { --panel-display: none; } }
@keyframes vanish-kddl { from, to { --panel-display: none; } }
@keyframes vanish-skorm { from, to { --panel-display: none; } }
@keyframes vanish-kroom { from, to { --panel-display: none; } }
@keyframes vanish-company { from, to { --panel-display: none; } }
html:has(#stack:target) .topics li:has(a[href$="#stack"]) { animation: vanish-stack 1s; }
html:has(#essential-kson:target) .topics li:has(a[href$="#essential-kson"]) { animation: vanish-essential-kson 1s; }
html:has(#kddl:target) .topics li:has(a[href$="#kddl"]) { animation: vanish-kddl 1s; }
html:has(#skorm:target) .topics li:has(a[href$="#skorm"]) { animation: vanish-skorm 1s; }
html:has(#kroom:target) .topics li:has(a[href$="#kroom"]) { animation: vanish-kroom 1s; }
html:has(#company:target) .topics li:has(a[href$="#company"]) { animation: vanish-company 1s; }

/* --- repository link next to a library name: Fork Awesome's github glyph, inlined once as a symbol --- */
.repo { margin-left: .4rem; color: var(--muted); border-bottom: 0; vertical-align: -.15em; }
.repo svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.repo:hover { color: var(--accent); border-bottom: 0; }
main section section section { padding: 1.5rem 0 0; }
main section section section > h4 { font-size: 1.05rem; margin: 0 0 .25rem; }
h4 + .lead { color: var(--accent); margin: 0 0 1rem; }
@keyframes vanish-dependencies { from, to { --panel-display: none; } }
html:has(#dependencies:target) .topics li:has(a[href$="#dependencies"]) { animation: vanish-dependencies 1s; }